129 lines
3.0 KiB
Vue
129 lines
3.0 KiB
Vue
<template>
|
|
<AppSection label="teams">
|
|
<h4 class="text-secondaryDark">
|
|
{{ $t("team.title") }}
|
|
</h4>
|
|
<div class="mt-1 text-secondaryLight">
|
|
<SmartAnchor
|
|
:label="$t('team.join_beta')"
|
|
to="https://hoppscotch.io/beta"
|
|
blank
|
|
class="link"
|
|
/>
|
|
</div>
|
|
<div class="space-y-4 mt-4">
|
|
<ButtonSecondary
|
|
:label="$t('team.create_new')"
|
|
outline
|
|
@click.native="displayModalAdd(true)"
|
|
/>
|
|
<p v-if="$apollo.queries.myTeams.loading">
|
|
{{ $t("state.loading") }}
|
|
</p>
|
|
<div v-if="myTeams.length === 0" class="flex items-center">
|
|
<i class="mr-4 material-icons">help_outline</i>
|
|
{{ $t("empty.teams") }}
|
|
</div>
|
|
<div v-else class="grid gap-4 sm:grid-cols-2 md:grid-cols-3">
|
|
<TeamsTeam
|
|
v-for="(team, index) in myTeams"
|
|
:key="`team-${index}`"
|
|
:team-i-d="team.id"
|
|
:team="team"
|
|
@edit-team="editTeam(team, team.id)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<TeamsAdd :show="showModalAdd" @hide-modal="displayModalAdd(false)" />
|
|
<TeamsEdit
|
|
:team="myTeams[0]"
|
|
:show="showModalEdit"
|
|
:editing-team="editingTeam"
|
|
:editingteam-i-d="editingteamID"
|
|
@hide-modal="displayModalEdit(false)"
|
|
/>
|
|
</AppSection>
|
|
</template>
|
|
|
|
<script>
|
|
import { defineComponent } from "@nuxtjs/composition-api"
|
|
import gql from "graphql-tag"
|
|
import { currentUser$ } from "~/helpers/fb/auth"
|
|
import { useReadonlyStream } from "~/helpers/utils/composables"
|
|
|
|
export default defineComponent({
|
|
setup() {
|
|
return {
|
|
currentUser: useReadonlyStream(currentUser$, null),
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
showModalAdd: false,
|
|
showModalEdit: false,
|
|
editingTeam: {},
|
|
editingteamID: "",
|
|
me: {},
|
|
myTeams: [],
|
|
}
|
|
},
|
|
apollo: {
|
|
me: {
|
|
query: gql`
|
|
query GetMe {
|
|
me {
|
|
uid
|
|
eaInvited
|
|
}
|
|
}
|
|
`,
|
|
pollInterval: 100000,
|
|
},
|
|
myTeams: {
|
|
query: gql`
|
|
query GetMyTeams {
|
|
myTeams {
|
|
id
|
|
name
|
|
myRole
|
|
ownersCount
|
|
members {
|
|
user {
|
|
photoURL
|
|
displayName
|
|
email
|
|
uid
|
|
}
|
|
role
|
|
}
|
|
}
|
|
}
|
|
`,
|
|
pollInterval: 10000,
|
|
},
|
|
},
|
|
beforeDestroy() {
|
|
document.removeEventListener("keydown", this._keyListener)
|
|
},
|
|
methods: {
|
|
displayModalAdd(shouldDisplay) {
|
|
this.showModalAdd = shouldDisplay
|
|
},
|
|
displayModalEdit(shouldDisplay) {
|
|
this.showModalEdit = shouldDisplay
|
|
|
|
if (!shouldDisplay) this.resetSelectedData()
|
|
},
|
|
editTeam(team, teamID) {
|
|
this.editingTeam = team
|
|
this.editingteamID = teamID
|
|
this.displayModalEdit(true)
|
|
},
|
|
resetSelectedData() {
|
|
this.$data.editingTeam = undefined
|
|
this.$data.editingteamID = undefined
|
|
},
|
|
},
|
|
})
|
|
</script>
|