139 lines
3.9 KiB
Vue
139 lines
3.9 KiB
Vue
<template>
|
|
<div>
|
|
<div class="p-4 space-y-4">
|
|
<ButtonSecondary
|
|
:label="`${t('team.create_new')}`"
|
|
outline
|
|
@click.native="displayModalAdd(true)"
|
|
/>
|
|
<div v-if="loading" class="flex flex-col items-center justify-center">
|
|
<SmartSpinner class="mb-4" />
|
|
<span class="text-secondaryLight">{{ t("state.loading") }}</span>
|
|
</div>
|
|
<div
|
|
v-if="!loading && myTeams.length === 0"
|
|
class="flex flex-col items-center justify-center p-4 text-secondaryLight"
|
|
>
|
|
<img
|
|
:src="`/images/states/${$colorMode.value}/add_group.svg`"
|
|
loading="lazy"
|
|
class="inline-flex flex-col object-contain object-center w-16 h-16 mb-8"
|
|
:alt="`${t('empty.teams')}`"
|
|
/>
|
|
<span class="mb-4 text-center">
|
|
{{ t("empty.teams") }}
|
|
</span>
|
|
<ButtonSecondary
|
|
:label="`${t('team.create_new')}`"
|
|
filled
|
|
@click.native="displayModalAdd(true)"
|
|
/>
|
|
</div>
|
|
<div
|
|
v-else-if="!loading"
|
|
class="grid gap-4"
|
|
:class="
|
|
modal ? 'grid-cols-1' : 'sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4'
|
|
"
|
|
>
|
|
<TeamsTeam
|
|
v-for="(team, index) in myTeams"
|
|
:key="`team-${String(index)}`"
|
|
:team-i-d="team.id"
|
|
:team="team"
|
|
:compact="modal"
|
|
@edit-team="editTeam(team, team.id)"
|
|
@invite-team="inviteTeam(team, team.id)"
|
|
/>
|
|
</div>
|
|
<div v-if="!loading && adapterError" class="flex flex-col items-center">
|
|
<i class="mb-4 material-icons">help_outline</i>
|
|
{{ t("error.something_went_wrong") }}
|
|
</div>
|
|
</div>
|
|
<TeamsAdd :show="showModalAdd" @hide-modal="displayModalAdd(false)" />
|
|
<!-- ¯\_(ツ)_/¯ -->
|
|
<TeamsEdit
|
|
v-if="!loading && myTeams.length > 0"
|
|
:team="myTeams[0]"
|
|
:show="showModalEdit"
|
|
:editing-team="editingTeam"
|
|
:editing-team-i-d="editingTeamID"
|
|
@hide-modal="displayModalEdit(false)"
|
|
@invite-team="inviteTeam(editingTeam, editingTeamID)"
|
|
@refetch-teams="refetchTeams"
|
|
/>
|
|
<TeamsInvite
|
|
v-if="!loading && myTeams.length > 0"
|
|
:team="myTeams[0]"
|
|
:show="showModalInvite"
|
|
:editing-team="editingTeam"
|
|
:editing-team-i-d="editingTeamID"
|
|
@hide-modal="displayModalInvite(false)"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, ref } from "@nuxtjs/composition-api"
|
|
import { onLoggedIn } from "~/helpers/fb/auth"
|
|
import TeamListAdapter from "~/helpers/teams/TeamListAdapter"
|
|
import { useI18n, useReadonlyStream } from "~/helpers/utils/composables"
|
|
|
|
const t = useI18n()
|
|
|
|
defineProps<{
|
|
modal: boolean
|
|
}>()
|
|
|
|
const showModalAdd = ref(false)
|
|
const showModalEdit = ref(false)
|
|
const showModalInvite = ref(false)
|
|
const editingTeam = ref<any>({}) // TODO: Check this out
|
|
const editingTeamID = ref<any>("")
|
|
|
|
const adapter = new TeamListAdapter(true)
|
|
const adapterLoading = useReadonlyStream(adapter.loading$, false)
|
|
const adapterError = useReadonlyStream(adapter.error$, null)
|
|
const myTeams = useReadonlyStream(adapter.teamList$, [])
|
|
|
|
const loading = computed(
|
|
() => adapterLoading.value && myTeams.value.length === 0
|
|
)
|
|
|
|
onLoggedIn(() => {
|
|
adapter.initialize()
|
|
})
|
|
|
|
const displayModalAdd = (shouldDisplay: boolean) => {
|
|
showModalAdd.value = shouldDisplay
|
|
adapter.fetchList()
|
|
}
|
|
|
|
const displayModalEdit = (shouldDisplay: boolean) => {
|
|
showModalEdit.value = shouldDisplay
|
|
adapter.fetchList()
|
|
}
|
|
|
|
const displayModalInvite = (shouldDisplay: boolean) => {
|
|
showModalInvite.value = shouldDisplay
|
|
adapter.fetchList()
|
|
}
|
|
|
|
const editTeam = (team: any, teamID: any) => {
|
|
editingTeam.value = team
|
|
editingTeamID.value = teamID
|
|
displayModalEdit(true)
|
|
}
|
|
|
|
const inviteTeam = (team: any, teamID: any) => {
|
|
editingTeam.value = team
|
|
editingTeamID.value = teamID
|
|
displayModalInvite(true)
|
|
}
|
|
|
|
const refetchTeams = () => {
|
|
adapter.fetchList()
|
|
}
|
|
</script>
|