merge feat/teams-new-ui
Co-authored-by: Isha Gupta <40794215+IshaGupta18@users.noreply.github.com> Co-authored-by: Liyas Thomas <liyascthomas@gmail.com> Co-authored-by: Osheen Sachdev <45964755+oshhh@users.noreply.github.com> Co-authored-by: Rohan Rajpal <rohan46000@gmail.com> Co-authored-by: Raghav Gupta <raghav.gupta0307@gmail.com>
This commit is contained in:
Liyas Thomas
GitHub
92
components/teams/Add.vue
Normal file
92
components/teams/Add.vue
Normal file
@@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<SmartModal v-if="show" @close="hideModal">
|
||||
<div slot="header">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="row-wrapper">
|
||||
<h3 class="title">{{ $t("new_team") }}</h3>
|
||||
<div>
|
||||
<button class="icon" @click="hideModal">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div slot="body">
|
||||
<ul>
|
||||
<li>
|
||||
<input
|
||||
type="text"
|
||||
v-model="name"
|
||||
:placeholder="$t('my_new_team')"
|
||||
@keyup.enter="addNewTeam"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div slot="footer">
|
||||
<div class="row-wrapper">
|
||||
<span></span>
|
||||
<span>
|
||||
<button class="icon" @click="hideModal">
|
||||
{{ $t("cancel") }}
|
||||
</button>
|
||||
<button class="icon primary" @click="addNewTeam">
|
||||
{{ $t("save") }}
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</SmartModal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import team_utils from "~/helpers/teams/utils"
|
||||
|
||||
export default {
|
||||
props: {
|
||||
show: Boolean,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
name: undefined,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
addNewTeam() {
|
||||
console.log("addNewTeam start")
|
||||
// We save the user input in case of an error
|
||||
const name = this.name
|
||||
// We clear it early to give the UI a snappy feel
|
||||
this.name = ""
|
||||
if (name != null && name.replace(/\s/g, "").length < 6) {
|
||||
this.$toast.error(this.$t("string_length_insufficient"), {
|
||||
icon: "error",
|
||||
})
|
||||
console.log("String length less than 6")
|
||||
return
|
||||
}
|
||||
// Call to the graphql mutation
|
||||
team_utils
|
||||
.createTeam(this.$apollo, name)
|
||||
.then((data) => {
|
||||
// Result
|
||||
this.hideModal()
|
||||
console.log(data)
|
||||
})
|
||||
.catch((error) => {
|
||||
// Error
|
||||
console.error(error)
|
||||
// We restore the initial user input
|
||||
this.name = name
|
||||
})
|
||||
},
|
||||
hideModal() {
|
||||
this.$data.name = undefined
|
||||
this.$emit("hide-modal")
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
436
components/teams/Edit.vue
Normal file
436
components/teams/Edit.vue
Normal file
@@ -0,0 +1,436 @@
|
||||
<template>
|
||||
<SmartModal v-if="show" @close="hideModal">
|
||||
<div slot="header">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="row-wrapper">
|
||||
<h3 class="title">{{ $t("edit_team") }}</h3>
|
||||
<div>
|
||||
<button class="icon" @click="hideModal">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div slot="body">
|
||||
<ul>
|
||||
<li>
|
||||
<input
|
||||
type="text"
|
||||
v-model="name"
|
||||
:placeholder="editingTeam.name"
|
||||
@keyup.enter="saveTeam"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<div class="row-wrapper">
|
||||
<label for="memberList">{{ $t("team_member_list") }}</label>
|
||||
<div></div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul v-for="(member, index) in teamMembers" :key="`new-${index}`">
|
||||
<li>
|
||||
<input
|
||||
:placeholder="$t('email')"
|
||||
:name="'param' + index"
|
||||
:value="member.user.email"
|
||||
readonly
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<span class="select-wrapper">
|
||||
<v-popover>
|
||||
<input
|
||||
:placeholder="$t('permissions')"
|
||||
:name="'value' + index"
|
||||
:value="typeof member.role === 'string' ? member.role : JSON.stringify(member.role)"
|
||||
readonly
|
||||
/>
|
||||
<template slot="popover">
|
||||
<div>
|
||||
<button class="icon" v-close-popover @click="member.role = 'OWNER'">OWNER</button>
|
||||
</div>
|
||||
<div>
|
||||
<button class="icon" v-close-popover @click="member.role = 'EDITOR'">
|
||||
EDITOR
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<button class="icon" v-close-popover @click="member.role = 'VIEWER'">
|
||||
VIEWER
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</v-popover>
|
||||
</span>
|
||||
</li>
|
||||
<div>
|
||||
<li>
|
||||
<button
|
||||
class="icon"
|
||||
@click="removeExistingTeamMember(member.user.uid)"
|
||||
v-tooltip.bottom="$t('delete')"
|
||||
id="member"
|
||||
>
|
||||
<i class="material-icons">delete</i>
|
||||
</button>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
<ul v-for="(member, index) in members" :key="index">
|
||||
<li>
|
||||
<input
|
||||
:placeholder="$t('email')"
|
||||
:name="'param' + index"
|
||||
v-model="member.key"
|
||||
autofocus
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<span class="select-wrapper">
|
||||
<v-popover>
|
||||
<input
|
||||
:placeholder="$t('permissions')"
|
||||
:name="'value' + index"
|
||||
:value="
|
||||
typeof member.value === 'string' ? member.value : JSON.stringify(member.value)
|
||||
"
|
||||
readonly
|
||||
/>
|
||||
<template slot="popover">
|
||||
<div>
|
||||
<button class="icon" v-close-popover @click="member.value = 'OWNER'">
|
||||
OWNER
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<button class="icon" v-close-popover @click="member.value = 'EDITOR'">
|
||||
EDITOR
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<button class="icon" v-close-popover @click="member.value = 'VIEWER'">
|
||||
VIEWER
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</v-popover>
|
||||
</span>
|
||||
</li>
|
||||
<div>
|
||||
<li>
|
||||
<button
|
||||
class="icon"
|
||||
@click="removeTeamMember(index)"
|
||||
v-tooltip.bottom="$t('delete')"
|
||||
id="member"
|
||||
>
|
||||
<i class="material-icons">delete</i>
|
||||
</button>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<button class="icon" @click="addTeamMember">
|
||||
<i class="material-icons">add</i>
|
||||
<span>{{ $t("add_new") }}</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div slot="footer">
|
||||
<div class="row-wrapper">
|
||||
<span></span>
|
||||
<span>
|
||||
<button class="icon" @click="hideModal">
|
||||
{{ $t("cancel") }}
|
||||
</button>
|
||||
<button class="icon primary" @click="saveTeam">
|
||||
{{ $t("save") }}
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</SmartModal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import team_utils from "~/helpers/teams/utils"
|
||||
import gql from "graphql-tag"
|
||||
|
||||
export default {
|
||||
apollo: {
|
||||
teamMembers: {
|
||||
query: gql`
|
||||
query GetMyTeams {
|
||||
myTeams {
|
||||
id
|
||||
members {
|
||||
user {
|
||||
displayName
|
||||
email
|
||||
uid
|
||||
}
|
||||
role
|
||||
}
|
||||
}
|
||||
}
|
||||
`,
|
||||
subscribeToMore: [
|
||||
{
|
||||
document: gql`
|
||||
subscription teamMemberAdded($teamID: String!) {
|
||||
teamMemberAdded(teamID: $teamID) {
|
||||
role
|
||||
user {
|
||||
displayName
|
||||
email
|
||||
uid
|
||||
}
|
||||
}
|
||||
}
|
||||
`,
|
||||
variables() {
|
||||
return { teamID: this.$props.editingteamID }
|
||||
},
|
||||
skip() {
|
||||
return this.$props.editingteamID === ""
|
||||
},
|
||||
updateQuery(previousResult, { subscriptionData }) {
|
||||
const teamIdx = previousResult.myTeams.findIndex(
|
||||
(x) => x.id === this.$props.editingteamID
|
||||
)
|
||||
previousResult.myTeams[teamIdx].members.push(subscriptionData.data.teamMemberAdded)
|
||||
return previousResult
|
||||
},
|
||||
},
|
||||
{
|
||||
document: gql`
|
||||
subscription teamMemberUpdated($teamID: String!) {
|
||||
teamMemberUpdated(teamID: $teamID) {
|
||||
role
|
||||
user {
|
||||
displayName
|
||||
email
|
||||
uid
|
||||
}
|
||||
}
|
||||
}
|
||||
`,
|
||||
variables() {
|
||||
return { teamID: this.$props.editingteamID }
|
||||
},
|
||||
skip() {
|
||||
return this.$props.editingteamID === ""
|
||||
},
|
||||
updateQuery(previousResult, { subscriptionData }) {
|
||||
const teamIdx = previousResult.myTeams.findIndex(
|
||||
(x) => x.id === this.$props.editingteamID
|
||||
)
|
||||
const memberIdx = previousResult.myTeams[teamIdx].members.findIndex(
|
||||
(x) => x.user.uid === subscriptionData.data.teamMemberUpdated.user.uid
|
||||
)
|
||||
previousResult.myTeams[teamIdx].members[memberIdx].user =
|
||||
subscriptionData.data.teamMemberUpdated.user
|
||||
previousResult.myTeams[teamIdx].members[memberIdx].role =
|
||||
subscriptionData.data.teamMemberUpdated.role
|
||||
|
||||
return previousResult
|
||||
},
|
||||
},
|
||||
{
|
||||
document: gql`
|
||||
subscription teamMemberRemoved($teamID: String!) {
|
||||
teamMemberRemoved(teamID: $teamID)
|
||||
}
|
||||
`,
|
||||
variables() {
|
||||
return { teamID: this.$props.editingteamID }
|
||||
},
|
||||
skip() {
|
||||
return this.$props.editingteamID === ""
|
||||
},
|
||||
updateQuery(previousResult, { subscriptionData }) {
|
||||
const teamIdx = previousResult.myTeams.findIndex(
|
||||
(x) => x.id === this.$props.editingteamID
|
||||
)
|
||||
const memberIdx = previousResult.myTeams[teamIdx].members.findIndex(
|
||||
(x) => x.user.id === subscriptionData.data.teamMemberRemoved.id
|
||||
)
|
||||
if (memberIdx !== -1) previousResult.myTeams[teamIdx].members.splice(memberIdx, 1)
|
||||
|
||||
return previousResult
|
||||
},
|
||||
},
|
||||
],
|
||||
update(response) {
|
||||
const teamIdx = response.myTeams.findIndex((x) => x.id === this.$props.editingteamID)
|
||||
return response.myTeams[teamIdx].members
|
||||
},
|
||||
skip() {
|
||||
return this.$props.editingteamID === ""
|
||||
},
|
||||
},
|
||||
},
|
||||
props: {
|
||||
show: Boolean,
|
||||
editingTeam: Object,
|
||||
editingteamID: String,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
rename: null,
|
||||
doneButton: '<i class="material-icons">done</i>',
|
||||
members: [],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
editingTeamCopy() {
|
||||
return this.editingTeam
|
||||
},
|
||||
name: {
|
||||
get() {
|
||||
return this.editingTeam.name
|
||||
},
|
||||
set(name) {
|
||||
this.rename = name
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
addTeamMember() {
|
||||
let value = { key: "", value: "" }
|
||||
this.members.push(value)
|
||||
console.log("addTeamMember")
|
||||
},
|
||||
removeExistingTeamMember(userID) {
|
||||
team_utils
|
||||
.removeTeamMember(this.$apollo, userID, this.editingteamID)
|
||||
.then((data) => {
|
||||
// Result
|
||||
this.$toast.success(this.$t("user_removed"), {
|
||||
icon: "done",
|
||||
})
|
||||
this.hideModal()
|
||||
})
|
||||
.catch((error) => {
|
||||
// Error
|
||||
this.$toast.error(this.$t("error_occurred"), {
|
||||
icon: "done",
|
||||
})
|
||||
console.error(error)
|
||||
})
|
||||
},
|
||||
removeTeamMember(index) {
|
||||
this.members.splice(index, 1)
|
||||
console.log("removeTeamMember")
|
||||
},
|
||||
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("string_length_insufficient"), {
|
||||
icon: "error",
|
||||
})
|
||||
console.log("String length less than 6")
|
||||
return
|
||||
}
|
||||
console.log("saveTeam", this.members)
|
||||
this.$data.members.forEach((element) => {
|
||||
if (!this.validateEmail(element.key)) {
|
||||
this.$toast.error(this.$t("invalid_emailID_format"), {
|
||||
icon: "error",
|
||||
})
|
||||
console.log("Email id format invalid")
|
||||
return
|
||||
}
|
||||
})
|
||||
this.$data.members.forEach((element) => {
|
||||
// Call to the graphql mutation
|
||||
team_utils
|
||||
.addTeamMemberByEmail(this.$apollo, element.value, element.key, this.editingteamID)
|
||||
.then((data) => {
|
||||
// Result
|
||||
this.$toast.success(this.$t("team_saved"), {
|
||||
icon: "done",
|
||||
})
|
||||
this.hideModal()
|
||||
})
|
||||
.catch((error) => {
|
||||
// Error
|
||||
this.$toast.error(this.$t("error_occurred"), {
|
||||
icon: "done",
|
||||
})
|
||||
console.error(error)
|
||||
})
|
||||
})
|
||||
let messageShown = true
|
||||
this.teamMembers.forEach((element) => {
|
||||
team_utils
|
||||
.updateTeamMemberRole(this.$apollo, element.user.uid, element.role, this.editingteamID)
|
||||
.then((data) => {
|
||||
// Result
|
||||
if (messageShown) {
|
||||
this.$toast.success(this.$t("role_updated"), {
|
||||
icon: "done",
|
||||
})
|
||||
messageShown = false
|
||||
}
|
||||
this.hideModal()
|
||||
})
|
||||
.catch((error) => {
|
||||
// Error
|
||||
if (messageShown) {
|
||||
this.$toast.error(this.$t("error_occurred"), {
|
||||
icon: "done",
|
||||
})
|
||||
messageShown = false
|
||||
}
|
||||
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("team_name_empty"), {
|
||||
icon: "error",
|
||||
})
|
||||
// Call to the graphql mutation
|
||||
if (this.name !== this.rename)
|
||||
team_utils
|
||||
.renameTeam(this.$apollo, newName, this.editingteamID)
|
||||
.then((data) => {
|
||||
// Result
|
||||
this.$toast.success(this.$t("team_saved"), {
|
||||
icon: "done",
|
||||
})
|
||||
this.hideModal()
|
||||
})
|
||||
.catch((error) => {
|
||||
// Error
|
||||
this.$toast.error(this.$t("error_occurred"), {
|
||||
icon: "done",
|
||||
})
|
||||
console.error(error)
|
||||
})
|
||||
}
|
||||
this.hideModal()
|
||||
this.members = []
|
||||
},
|
||||
hideModal() {
|
||||
this.$emit("hide-modal")
|
||||
this.$data.name = undefined
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
173
components/teams/ImportExport.vue
Normal file
173
components/teams/ImportExport.vue
Normal file
@@ -0,0 +1,173 @@
|
||||
<template>
|
||||
<SmartModal v-if="show" @close="hideModal">
|
||||
<div slot="header">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="row-wrapper">
|
||||
<h3 class="title">{{ $t("import_export") }} {{ $t("teams") }}</h3>
|
||||
<div>
|
||||
<button class="icon" @click="hideModal">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-wrapper">
|
||||
<span
|
||||
v-tooltip="{
|
||||
content: !fb.currentUser ? $t('login_first') : $t('replace_current'),
|
||||
}"
|
||||
>
|
||||
<button :disabled="!fb.currentUser" class="icon" @click="syncTeams">
|
||||
<i class="material-icons">folder_shared</i>
|
||||
<span>{{ $t("import_from_sync") }}</span>
|
||||
</button>
|
||||
</span>
|
||||
<button
|
||||
class="icon"
|
||||
@click="openDialogChooseFileToReplaceWith"
|
||||
v-tooltip="$t('replace_current')"
|
||||
>
|
||||
<i class="material-icons">create_new_folder</i>
|
||||
<span>{{ $t("replace_json") }}</span>
|
||||
<input
|
||||
type="file"
|
||||
@change="replaceWithJSON"
|
||||
style="display: none"
|
||||
ref="inputChooseFileToReplaceWith"
|
||||
accept="application/json"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
class="icon"
|
||||
@click="openDialogChooseFileToImportFrom"
|
||||
v-tooltip="$t('preserve_current')"
|
||||
>
|
||||
<i class="material-icons">folder_special</i>
|
||||
<span>{{ $t("import_json") }}</span>
|
||||
<input
|
||||
type="file"
|
||||
@change="importFromJSON"
|
||||
style="display: none"
|
||||
ref="inputChooseFileToImportFrom"
|
||||
accept="application/json"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div slot="body">
|
||||
<textarea v-model="teamJson" rows="8" readonly></textarea>
|
||||
</div>
|
||||
<div slot="footer">
|
||||
<div class="row-wrapper">
|
||||
<span></span>
|
||||
<span>
|
||||
<button class="icon" @click="hideModal">
|
||||
{{ $t("cancel") }}
|
||||
</button>
|
||||
<button class="icon primary" @click="exportJSON" v-tooltip="$t('download_file')">
|
||||
{{ $t("export") }}
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</SmartModal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { fb } from "~/helpers/fb"
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
fb,
|
||||
}
|
||||
},
|
||||
props: {
|
||||
show: Boolean,
|
||||
teams: Array,
|
||||
},
|
||||
computed: {
|
||||
teamJson() {
|
||||
return this.teams
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
hideModal() {
|
||||
this.$emit("hide-modal")
|
||||
},
|
||||
openDialogChooseFileToReplaceWith() {
|
||||
this.$refs.inputChooseFileToReplaceWith.click()
|
||||
},
|
||||
openDialogChooseFileToImportFrom() {
|
||||
this.$refs.inputChooseFileToImportFrom.click()
|
||||
},
|
||||
replaceWithJSON() {
|
||||
let reader = new FileReader()
|
||||
reader.onload = (event) => {
|
||||
let content = event.target.result
|
||||
let teams = JSON.parse(content)
|
||||
}
|
||||
reader.readAsText(this.$refs.inputChooseFileToReplaceWith.files[0])
|
||||
this.fileImported()
|
||||
this.syncToFBTeams()
|
||||
},
|
||||
importFromJSON() {
|
||||
let reader = new FileReader()
|
||||
reader.onload = (event) => {
|
||||
let content = event.target.result
|
||||
let importFileObj = JSON.parse(content)
|
||||
if (importFileObj["_postman_member_scope"] === "team") {
|
||||
this.importFromPostman(importFileObj)
|
||||
} else {
|
||||
this.importFromPostwoman(importFileObj)
|
||||
}
|
||||
}
|
||||
reader.readAsText(this.$refs.inputChooseFileToImportFrom.files[0])
|
||||
this.syncToFBTeams()
|
||||
},
|
||||
importFromPostwoman(teams) {
|
||||
let confirmation = this.$t("file_imported")
|
||||
console.log("Import from PW")
|
||||
},
|
||||
importFromPostman(importFileObj) {
|
||||
let team = { name: importFileObj.name, members: [] }
|
||||
importFileObj.values.forEach((element) =>
|
||||
team.members.push({ key: element.key, value: element.value })
|
||||
)
|
||||
let teams = [team]
|
||||
this.importFromPostwoman(teams)
|
||||
},
|
||||
exportJSON() {
|
||||
let text = this.teamJson
|
||||
text = text.replace(/\n/g, "\r\n")
|
||||
let blob = new Blob([text], {
|
||||
type: "text/json",
|
||||
})
|
||||
let anchor = document.createElement("a")
|
||||
anchor.download = "postwoman-team.json"
|
||||
anchor.href = window.URL.createObjectURL(blob)
|
||||
anchor.target = "_blank"
|
||||
anchor.style.display = "none"
|
||||
document.body.appendChild(anchor)
|
||||
anchor.click()
|
||||
document.body.removeChild(anchor)
|
||||
this.$toast.success(this.$t("download_started"), {
|
||||
icon: "done",
|
||||
})
|
||||
},
|
||||
syncTeams() {
|
||||
this.fileImported()
|
||||
},
|
||||
syncToFBTeams() {
|
||||
console.log("syncToFBTeams")
|
||||
},
|
||||
fileImported() {
|
||||
this.$toast.info(this.$t("file_imported"), {
|
||||
icon: "folder_shared",
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
114
components/teams/Team.vue
Normal file
114
components/teams/Team.vue
Normal file
@@ -0,0 +1,114 @@
|
||||
<template>
|
||||
<div class="row-wrapper">
|
||||
<div>
|
||||
<button class="icon" v-tooltip.right="$t('use_team')">
|
||||
<i class="material-icons">group</i>
|
||||
<span>{{ team.name }}</span>
|
||||
</button>
|
||||
</div>
|
||||
<v-popover>
|
||||
<button class="tooltip-target icon" v-tooltip.left="$t('more')">
|
||||
<i class="material-icons">more_vert</i>
|
||||
</button>
|
||||
<template slot="popover">
|
||||
<div v-if="team.myRole === 'OWNER'">
|
||||
<button class="icon" @click="$emit('edit-team')" v-close-popover>
|
||||
<i class="material-icons">create</i>
|
||||
<span>{{ $t("edit") }}</span>
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="team.myRole === 'OWNER'">
|
||||
<button class="icon" @click="deleteTeam" v-close-popover>
|
||||
<i class="material-icons">delete</i>
|
||||
<span>{{ $t("delete") }}</span>
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
class="icon"
|
||||
@click="exitTeam"
|
||||
v-close-popover
|
||||
:disabled="!(team.myRole === 'OWNER' && team.ownersCount == 1)"
|
||||
>
|
||||
<i class="material-icons">remove</i>
|
||||
<div
|
||||
v-tooltip.left="{
|
||||
content:
|
||||
team.myRole === 'OWNER' && team.ownersCount == 1 ? null : $t('disable_exit'),
|
||||
}"
|
||||
>
|
||||
<span>{{ $t("exit") }}</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</v-popover>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
ul {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
ul li {
|
||||
display: flex;
|
||||
padding-left: 16px;
|
||||
border-left: 1px solid var(--brd-color);
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import team_utils from "~/helpers/teams/utils"
|
||||
|
||||
export default {
|
||||
props: {
|
||||
team: Object,
|
||||
teamID: String,
|
||||
},
|
||||
methods: {
|
||||
deleteTeam() {
|
||||
if (!confirm("Are you sure you want to remove this team?")) return
|
||||
console.log("deleteTeam", this.teamID)
|
||||
// Call to the graphql mutation
|
||||
team_utils
|
||||
.deleteTeam(this.$apollo, this.teamID)
|
||||
.then((data) => {
|
||||
// Result
|
||||
this.$toast.success(this.$t("new_team_created"), {
|
||||
icon: "done",
|
||||
})
|
||||
console.log(data)
|
||||
})
|
||||
.catch((error) => {
|
||||
// Error
|
||||
this.$toast.error(this.$t("error_occurred"), {
|
||||
icon: "done",
|
||||
})
|
||||
console.error(error)
|
||||
})
|
||||
},
|
||||
exitTeam() {
|
||||
if (!confirm("Are you sure you want to exit this team?")) return
|
||||
console.log("leaveTeam", this.teamID)
|
||||
team_utils
|
||||
.exitTeam(this.$apollo, this.teamID)
|
||||
.then((data) => {
|
||||
// Result
|
||||
this.$toast.success(this.$t("team_exited"), {
|
||||
icon: "done",
|
||||
})
|
||||
console.log(data)
|
||||
})
|
||||
.catch((error) => {
|
||||
// Error
|
||||
this.$toast.error(this.$t("error_occurred"), {
|
||||
icon: "error",
|
||||
})
|
||||
console.error(error)
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
145
components/teams/index.vue
Normal file
145
components/teams/index.vue
Normal file
@@ -0,0 +1,145 @@
|
||||
<template>
|
||||
<AppSection class="green" icon="history" :label="$t('teams')" ref="teams" no-legend>
|
||||
<!-- debug start -->
|
||||
<pre>me: {{ me }}</pre>
|
||||
<pre>myTeams: {{ myTeams }}</pre>
|
||||
<!-- debug end -->
|
||||
<TeamsAdd :show="showModalAdd" @hide-modal="displayModalAdd(false)" />
|
||||
<TeamsEdit
|
||||
:team="myTeams[0]"
|
||||
:show="showModalEdit"
|
||||
:editingTeam="editingTeam"
|
||||
:editingteamID="editingteamID"
|
||||
@hide-modal="displayModalEdit(false)"
|
||||
/>
|
||||
<TeamsImportExport
|
||||
:show="showModalImportExport"
|
||||
:teams="myTeams"
|
||||
@hide-modal="displayModalImportExport(false)"
|
||||
/>
|
||||
<div class="row-wrapper">
|
||||
<div>
|
||||
<button class="icon" @click="displayModalAdd(true)">
|
||||
<i class="material-icons">add</i>
|
||||
<span>{{ $t("new") }}</span>
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<button class="icon" @click="displayModalImportExport(true)">
|
||||
{{ $t("import_export") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<p v-if="$apollo.queries.myTeams.loading" class="info">{{ $t("loading") }}</p>
|
||||
<p v-if="myTeams.length === 0" class="info">
|
||||
<i class="material-icons">help_outline</i> {{ $t("create_new_team") }}
|
||||
</p>
|
||||
<div v-else class="virtual-list">
|
||||
<ul class="flex-col">
|
||||
<li v-for="(team, index) in myTeams" :key="`team-${index}`">
|
||||
<TeamsTeam :teamID="team.id" :team="team" @edit-team="editTeam(team, team.id)" />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</AppSection>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.virtual-list {
|
||||
max-height: calc(100vh - 241px);
|
||||
}
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import gql from "graphql-tag"
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showModalImportExport: false,
|
||||
showModalAdd: false,
|
||||
showModalEdit: false,
|
||||
editingTeam: {},
|
||||
editingteamID: "",
|
||||
me: {},
|
||||
myTeams: [],
|
||||
}
|
||||
},
|
||||
apollo: {
|
||||
me: {
|
||||
query: gql`
|
||||
query GetMe {
|
||||
me {
|
||||
uid
|
||||
}
|
||||
}
|
||||
`,
|
||||
pollInterval: 100000,
|
||||
},
|
||||
myTeams: {
|
||||
query: gql`
|
||||
query GetMyTeams {
|
||||
myTeams {
|
||||
id
|
||||
name
|
||||
myRole
|
||||
ownersCount
|
||||
members {
|
||||
user {
|
||||
displayName
|
||||
email
|
||||
uid
|
||||
}
|
||||
role
|
||||
}
|
||||
}
|
||||
}
|
||||
`,
|
||||
pollInterval: 10000,
|
||||
},
|
||||
},
|
||||
async mounted() {
|
||||
this._keyListener = function (e) {
|
||||
if (e.key === "Escape") {
|
||||
e.preventDefault()
|
||||
this.showModalImportExport = false
|
||||
}
|
||||
}
|
||||
document.addEventListener("keydown", this._keyListener.bind(this))
|
||||
},
|
||||
methods: {
|
||||
displayModalAdd(shouldDisplay) {
|
||||
this.showModalAdd = shouldDisplay
|
||||
},
|
||||
displayModalEdit(shouldDisplay) {
|
||||
this.showModalEdit = shouldDisplay
|
||||
|
||||
if (!shouldDisplay) this.resetSelectedData()
|
||||
},
|
||||
displayModalImportExport(shouldDisplay) {
|
||||
this.showModalImportExport = shouldDisplay
|
||||
},
|
||||
editTeam(team, teamID) {
|
||||
console.log("editTeamStart", team)
|
||||
this.editingTeam = team
|
||||
this.editingteamID = team.id
|
||||
this.displayModalEdit(true)
|
||||
this.syncTeams()
|
||||
},
|
||||
resetSelectedData() {
|
||||
console.log("resetSelectedData")
|
||||
},
|
||||
syncTeams() {
|
||||
console.log("syncTeams")
|
||||
},
|
||||
},
|
||||
beforeDestroy() {
|
||||
document.removeEventListener("keydown", this._keyListener)
|
||||
},
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user