82 lines
1.7 KiB
Vue
82 lines
1.7 KiB
Vue
<template>
|
|
<div class="content loader-container is-max-width-desktop" :class="{ 'is-loading': teamServiceLoading}">
|
|
<x-button
|
|
:to="{name:'teams.create'}"
|
|
class="is-pulled-right"
|
|
icon="plus"
|
|
>
|
|
{{ $t('team.create.title') }}
|
|
</x-button>
|
|
|
|
<h1>{{ $t('team.title') }}</h1>
|
|
<ul class="team-list box" v-if="Object.keys(teams).length > 0">
|
|
<li class="team-item" :key="t.id" v-for="t in teams">
|
|
<router-link class="team-link" :to="{name: 'teams.edit', params: {id: t.id}}">
|
|
{{ t.name }}
|
|
</router-link>
|
|
</li>
|
|
</ul>
|
|
<p v-else-if="!teamServiceLoading" class="has-text-centered has-text-grey is-italic">
|
|
{{ $t('team.noTeams') }}
|
|
<router-link :to="{name: 'teams.create'}">
|
|
{{ $t('team.create.title') }}.
|
|
</router-link>
|
|
</p>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { watchEffect } from 'vue'
|
|
import { useI18n } from 'vue-i18n'
|
|
import { storeToRefs } from 'pinia'
|
|
|
|
import { useTitle } from '@/composables/useTitle'
|
|
import { useTeamStore } from '@/stores/teams'
|
|
|
|
const { t } = useI18n()
|
|
useTitle(() => t('team.title'))
|
|
|
|
function useTeams() {
|
|
const teamStore = useTeamStore()
|
|
|
|
watchEffect(() => teamStore.loadAllTeams())
|
|
|
|
const {teamServiceLoading} = storeToRefs(teamStore)
|
|
|
|
return {
|
|
teams: teamStore.teams,
|
|
teamServiceLoading,
|
|
}
|
|
}
|
|
|
|
const {teams, teamServiceLoading} = useTeams()
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.team-list {
|
|
padding: 0;
|
|
margin-left: 0;
|
|
overflow: hidden;
|
|
|
|
}
|
|
|
|
.team-item {
|
|
list-style: none;
|
|
margin: 0;
|
|
|
|
> & + & {
|
|
border-top: 1px solid $border;
|
|
}
|
|
}
|
|
|
|
.team-link {
|
|
color: #363636;
|
|
display: block;
|
|
padding: 0.5rem 1rem;
|
|
transition: background-color $transition;
|
|
|
|
&:hover {
|
|
background: var(--grey-100);
|
|
}
|
|
}
|
|
</style> |