55 rivejä
1.4 KiB
Vue
55 rivejä
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>
|