Meikan client v2
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

UserAnime.vue 1.4KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. <template>
  2. <md-table v-model="anime">
  3. <md-table-toolbar>
  4. <h1 class="md-title md-toolbar-section-start">{{ currentUser.name }}'s anime</h1>
  5. <md-button
  6. class="md-icon-button md-primary"
  7. @click="refresh"
  8. >
  9. <md-icon>refresh</md-icon>
  10. </md-button>
  11. </md-table-toolbar>
  12. <md-table-empty-state>
  13. <md-progress-spinner class="md-accent" md-mode="indeterminate"></md-progress-spinner>
  14. </md-table-empty-state>
  15. <md-table-row slot="md-table-row" slot-scope="{ item }">
  16. <md-table-cell md-label="#" md-numeric width="100">{{ item.anime.id }}</md-table-cell>
  17. <md-table-cell md-label="Title" md-sort-by="title">{{ item.anime.title }}</md-table-cell>
  18. </md-table-row>
  19. </md-table>
  20. </template>
  21. <script lang="ts">
  22. import { Component, Vue } from 'vue-property-decorator'
  23. import { namespace } from 'vuex-class'
  24. const user = namespace('user')
  25. const userAnime = namespace('userAnime')
  26. @Component({})
  27. export default class Home extends Vue {
  28. @user.Getter
  29. private currentUser!: User
  30. @userAnime.Action
  31. private resetUserAnime!: () => void
  32. @userAnime.Action
  33. private fetchUserAnime!: (user: User) => Promise<UserAnime[]>
  34. @userAnime.Getter
  35. private anime!: UserAnime[]
  36. private created() {
  37. if (this.anime.length === 0) {
  38. this.fetchUserAnime(this.currentUser)
  39. }
  40. }
  41. private refresh() {
  42. this.resetUserAnime()
  43. this.fetchUserAnime(this.currentUser)
  44. }
  45. }
  46. </script>