MeikanClient/src/views/UserAnime.vue

55 řádky
1.4 KiB
Vue

<template>
<md-table v-model="anime">
<md-table-toolbar>
<h1 class="md-title md-toolbar-section-start">{{ currentUser.name }}'s anime</h1>
<md-button
class="md-icon-button md-primary"
@click="refresh"
>
<md-icon>refresh</md-icon>
</md-button>
</md-table-toolbar>
<md-table-empty-state>
<md-progress-spinner class="md-accent" md-mode="indeterminate"></md-progress-spinner>
</md-table-empty-state>
<md-table-row slot="md-table-row" slot-scope="{ item }">
<md-table-cell md-label="#" md-numeric width="100">{{ item.anime.id }}</md-table-cell>
<md-table-cell md-label="Title" md-sort-by="title">{{ item.anime.title }}</md-table-cell>
</md-table-row>
</md-table>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { namespace } from 'vuex-class'
const user = namespace('user')
const userAnime = namespace('userAnime')
@Component({})
export default class Home extends Vue {
@user.Getter
private currentUser!: User
@userAnime.Action
private resetUserAnime!: () => void
@userAnime.Action
private fetchUserAnime!: (user: User) => Promise<UserAnime[]>
@userAnime.Getter
private anime!: UserAnime[]
private created() {
if (this.anime.length === 0) {
this.fetchUserAnime(this.currentUser)
}
}
private refresh() {
this.resetUserAnime()
this.fetchUserAnime(this.currentUser)
}
}
</script>