f51371bbe0
- remove from created / mounted - initialize component services in data - use immediate watcher where appropriate - deep watch for route changes
57 lines
1.2 KiB
Vue
57 lines
1.2 KiB
Vue
<template>
|
|
<div class="content loader-container is-max-width-desktop" :class="{ 'is-loading': teamService.loading}">
|
|
<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="teams box" v-if="teams.length > 0">
|
|
<li :key="t.id" v-for="t in teams">
|
|
<router-link :to="{name: 'teams.edit', params: {id: t.id}}">
|
|
{{ t.name }}
|
|
</router-link>
|
|
</li>
|
|
</ul>
|
|
<p v-else-if="!teamService.loading" 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>
|
|
import TeamService from '../../services/team'
|
|
|
|
export default {
|
|
name: 'ListTeams',
|
|
data() {
|
|
return {
|
|
teamService: new TeamService(),
|
|
teams: [],
|
|
}
|
|
},
|
|
created() {
|
|
this.loadTeams()
|
|
},
|
|
mounted() {
|
|
this.setTitle(this.$t('team.title'))
|
|
},
|
|
methods: {
|
|
loadTeams() {
|
|
this.teamService.getAll()
|
|
.then(response => {
|
|
this.$set(this, 'teams', response)
|
|
})
|
|
.catch(e => {
|
|
this.$message.error(e)
|
|
})
|
|
},
|
|
},
|
|
}
|
|
</script>
|