405 lines
11 KiB
Vue
405 lines
11 KiB
Vue
<template>
|
|
<SmartModal v-if="show" :title="$t('team.edit')" @close="hideModal">
|
|
<template #body>
|
|
<div class="flex flex-col px-2">
|
|
<input
|
|
id="selectLabelTeamEdit"
|
|
v-model="name"
|
|
v-focus
|
|
class="input floating-input"
|
|
placeholder=" "
|
|
type="text"
|
|
@keyup.enter="saveTeam"
|
|
/>
|
|
<label for="selectLabelTeamEdit">
|
|
{{ $t("label") }}
|
|
</label>
|
|
<div class="flex flex-1 justify-between items-center">
|
|
<label for="memberList" class="font-semibold px-4 pt-4 pb-4">
|
|
{{ $t("team.members") }}
|
|
</label>
|
|
<ButtonSecondary
|
|
icon="add"
|
|
:label="$t('add.new')"
|
|
@click.native="addTeamMember"
|
|
/>
|
|
</div>
|
|
<div class="border-divider border rounded">
|
|
<div
|
|
v-for="(member, index) in members"
|
|
:key="`member-${index}`"
|
|
class="
|
|
divide-x divide-dividerLight
|
|
border-b border-dividerLight
|
|
flex
|
|
"
|
|
>
|
|
<input
|
|
class="
|
|
bg-primaryLight
|
|
flex
|
|
font-semibold font-mono
|
|
flex-1
|
|
py-2
|
|
px-4
|
|
focus:outline-none
|
|
"
|
|
:placeholder="$t('team.email')"
|
|
:name="'param' + index"
|
|
:value="member.user.email"
|
|
readonly
|
|
/>
|
|
<span class="select-wrapper">
|
|
<tippy
|
|
ref="memberOptions"
|
|
interactive
|
|
trigger="click"
|
|
theme="popover"
|
|
arrow
|
|
>
|
|
<template #trigger>
|
|
<input
|
|
class="
|
|
bg-primaryLight
|
|
flex
|
|
font-semibold font-mono
|
|
flex-1
|
|
py-2
|
|
px-4
|
|
focus:outline-none
|
|
"
|
|
:placeholder="$t('team.permissions')"
|
|
:name="'value' + index"
|
|
:value="
|
|
typeof member.role === 'string'
|
|
? member.role
|
|
: JSON.stringify(member.role)
|
|
"
|
|
readonly
|
|
/>
|
|
</template>
|
|
<SmartItem
|
|
label="OWNER"
|
|
@click.native="
|
|
$refs.memberOptions.tippy().hide()
|
|
updateMemberRole(index, 'OWNER')
|
|
"
|
|
/>
|
|
<SmartItem
|
|
label="EDITOR"
|
|
@click.native="
|
|
$refs.memberOptions.tippy().hide()
|
|
updateMemberRole(index, 'EDITOR')
|
|
"
|
|
/>
|
|
<SmartItem
|
|
label="VIEWER"
|
|
@click.native="
|
|
$refs.memberOptions.tippy().hide()
|
|
updateMemberRole(index, 'VIEWER')
|
|
"
|
|
/>
|
|
</tippy>
|
|
</span>
|
|
<ButtonSecondary
|
|
id="member"
|
|
v-tippy="{ theme: 'tooltip' }"
|
|
:title="$t('delete')"
|
|
icon="delete"
|
|
color="red"
|
|
@click.native="removeExistingTeamMember(member.user.uid)"
|
|
/>
|
|
</div>
|
|
<div
|
|
v-for="(member, index) in newMembers"
|
|
:key="`new-member-${index}`"
|
|
class="
|
|
divide-x divide-dividerLight
|
|
border-b border-dividerLight
|
|
flex
|
|
"
|
|
>
|
|
<input
|
|
v-model="member.key"
|
|
class="
|
|
bg-primaryLight
|
|
flex
|
|
font-semibold font-mono
|
|
flex-1
|
|
py-2
|
|
px-4
|
|
focus:outline-none
|
|
"
|
|
:placeholder="$t('team.email')"
|
|
:name="'member' + index"
|
|
autofocus
|
|
/>
|
|
<span class="select-wrapper">
|
|
<tippy
|
|
ref="newMemberOptions"
|
|
interactive
|
|
trigger="click"
|
|
theme="popover"
|
|
arrow
|
|
>
|
|
<template #trigger>
|
|
<input
|
|
class="
|
|
bg-primaryLight
|
|
flex
|
|
font-semibold font-mono
|
|
flex-1
|
|
py-2
|
|
px-4
|
|
focus:outline-none
|
|
"
|
|
:placeholder="$t('team.permissions')"
|
|
:name="'value' + index"
|
|
:value="
|
|
typeof member.value === 'string'
|
|
? member.value
|
|
: JSON.stringify(member.value)
|
|
"
|
|
readonly
|
|
/>
|
|
</template>
|
|
<SmartItem
|
|
label="OWNER"
|
|
@click.native="
|
|
$refs.newMemberOptions.tippy().hide()
|
|
updateNewMemberRole(index, 'OWNER')
|
|
"
|
|
/>
|
|
<SmartItem
|
|
label="EDITOR"
|
|
@click.native="
|
|
$refs.newMemberOptions.tippy().hide()
|
|
updateNewMemberRole(index, 'EDITOR')
|
|
"
|
|
/>
|
|
<SmartItem
|
|
label="VIEWER"
|
|
@click.native="
|
|
$refs.newMemberOptions.tippy().hide()
|
|
updateNewMemberRole(index, 'VIEWER')
|
|
"
|
|
/>
|
|
</tippy>
|
|
</span>
|
|
<ButtonSecondary
|
|
id="member"
|
|
v-tippy="{ theme: 'tooltip' }"
|
|
:title="$t('delete')"
|
|
icon="delete"
|
|
color="red"
|
|
@click.native="removeTeamMember(index)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template #footer>
|
|
<span>
|
|
<ButtonPrimary :label="$t('save')" @click.native="saveTeam" />
|
|
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
|
|
</span>
|
|
</template>
|
|
</SmartModal>
|
|
</template>
|
|
|
|
<script>
|
|
import cloneDeep from "lodash/cloneDeep"
|
|
import { defineComponent } from "@nuxtjs/composition-api"
|
|
import * as teamUtils from "~/helpers/teams/utils"
|
|
import TeamMemberAdapter from "~/helpers/teams/TeamMemberAdapter"
|
|
|
|
export default defineComponent({
|
|
props: {
|
|
show: Boolean,
|
|
editingTeam: { type: Object, default: () => {} },
|
|
editingteamID: { type: String, default: null },
|
|
},
|
|
data() {
|
|
return {
|
|
rename: null,
|
|
members: [],
|
|
newMembers: [],
|
|
membersAdapter: new TeamMemberAdapter(null),
|
|
}
|
|
},
|
|
computed: {
|
|
editingTeamCopy() {
|
|
return this.editingTeam
|
|
},
|
|
name: {
|
|
get() {
|
|
return this.editingTeam.name
|
|
},
|
|
set(name) {
|
|
this.rename = name
|
|
},
|
|
},
|
|
},
|
|
watch: {
|
|
editingteamID(teamID) {
|
|
this.membersAdapter.changeTeamID(teamID)
|
|
},
|
|
},
|
|
mounted() {
|
|
this.membersAdapter.members$.subscribe((list) => {
|
|
this.members = cloneDeep(list)
|
|
})
|
|
},
|
|
methods: {
|
|
updateMemberRole(id, role) {
|
|
this.members[id].role = role
|
|
},
|
|
updateNewMemberRole(id, role) {
|
|
this.newMembers[id].value = role
|
|
},
|
|
addTeamMember() {
|
|
const member = { key: "", value: "" }
|
|
this.newMembers.push(member)
|
|
},
|
|
removeExistingTeamMember(userID) {
|
|
teamUtils
|
|
.removeTeamMember(this.$apollo, userID, this.editingteamID)
|
|
.then(() => {
|
|
// Result
|
|
this.$toast.success(this.$t("team.member_removed"), {
|
|
icon: "done",
|
|
})
|
|
this.hideModal()
|
|
})
|
|
.catch((error) => {
|
|
// Error
|
|
this.$toast.error(this.$t("error_occurred"), {
|
|
icon: "done",
|
|
})
|
|
console.error(error)
|
|
})
|
|
},
|
|
removeTeamMember(index) {
|
|
this.newMembers.splice(index, 1)
|
|
},
|
|
validateEmail(emailID) {
|
|
if (
|
|
/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(
|
|
emailID
|
|
)
|
|
) {
|
|
return true
|
|
}
|
|
return false
|
|
},
|
|
saveTeam() {
|
|
if (
|
|
this.$data.rename !== null &&
|
|
this.$data.rename.replace(/\s/g, "").length < 6
|
|
) {
|
|
this.$toast.error(this.$t("team.name_length_insufficient"), {
|
|
icon: "error",
|
|
})
|
|
return
|
|
}
|
|
let invalidEmail = false
|
|
this.$data.newMembers.forEach((element) => {
|
|
if (!this.validateEmail(element.key)) {
|
|
this.$toast.error(this.$t("team.invalid_email_format"), {
|
|
icon: "error",
|
|
})
|
|
invalidEmail = true
|
|
}
|
|
})
|
|
if (invalidEmail) return
|
|
let invalidPermission = false
|
|
this.$data.newMembers.forEach((element) => {
|
|
if (!element.value) {
|
|
this.$toast.error(this.$t("invalid_member_permission"), {
|
|
icon: "error",
|
|
})
|
|
invalidPermission = true
|
|
}
|
|
})
|
|
if (invalidPermission) return
|
|
this.$data.newMembers.forEach((element) => {
|
|
// Call to the graphql mutation
|
|
teamUtils
|
|
.addTeamMemberByEmail(
|
|
this.$apollo,
|
|
element.value,
|
|
element.key,
|
|
this.editingteamID
|
|
)
|
|
.then(() => {
|
|
// Result
|
|
this.$toast.success(this.$t("team.saved"), {
|
|
icon: "done",
|
|
})
|
|
})
|
|
.catch((error) => {
|
|
// Error
|
|
this.$toast.error(error, {
|
|
icon: "done",
|
|
})
|
|
console.error(error)
|
|
})
|
|
})
|
|
this.members.forEach((element) => {
|
|
teamUtils
|
|
.updateTeamMemberRole(
|
|
this.$apollo,
|
|
element.user.uid,
|
|
element.role,
|
|
this.editingteamID
|
|
)
|
|
.then(() => {
|
|
// Result
|
|
this.$toast.success(this.$t("team.member_role_updated"), {
|
|
icon: "done",
|
|
})
|
|
})
|
|
.catch((error) => {
|
|
// Error
|
|
this.$toast.error(error, {
|
|
icon: "done",
|
|
})
|
|
console.error(error)
|
|
})
|
|
})
|
|
if (this.$data.rename !== null) {
|
|
const newName =
|
|
this.name === this.$data.rename ? this.name : this.$data.rename
|
|
if (!/\S/.test(newName))
|
|
return this.$toast.error(this.$t("empty.team_name"), {
|
|
icon: "error",
|
|
})
|
|
// Call to the graphql mutation
|
|
if (this.name !== this.rename)
|
|
teamUtils
|
|
.renameTeam(this.$apollo, newName, this.editingteamID)
|
|
.then(() => {
|
|
// Result
|
|
this.$toast.success(this.$t("team.saved"), {
|
|
icon: "done",
|
|
})
|
|
})
|
|
.catch((error) => {
|
|
// Error
|
|
this.$toast.error(this.$t("error_occurred"), {
|
|
icon: "done",
|
|
})
|
|
console.error(error)
|
|
})
|
|
}
|
|
this.hideModal()
|
|
},
|
|
hideModal() {
|
|
this.rename = null
|
|
this.newMembers = []
|
|
this.$emit("hide-modal")
|
|
},
|
|
},
|
|
})
|
|
</script>
|