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.

UserSelect.vue 1.6KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. <template>
  2. <div>
  3. <md-table v-model="foundUsers" @md-selected="onSelect">
  4. <md-table-toolbar>
  5. <div class="md-toolbar-section-start">
  6. <h1 class="md-title">Users</h1>
  7. </div>
  8. <md-field md-clearable class="md-toolbar-section-end">
  9. <md-input placeholder="Search users" @input="onInput" />
  10. </md-field>
  11. </md-table-toolbar>
  12. <md-table-row slot="md-table-row" slot-scope="{ item }" md-selectable="single">
  13. <md-table-cell md-label="#" md-numeric width="100">{{ item.id }}</md-table-cell>
  14. <md-table-cell md-label="Title" md-sort-by="title">{{ item.name }}</md-table-cell>
  15. </md-table-row>
  16. </md-table>
  17. </div>
  18. </template>
  19. <script lang="ts">
  20. import _ from 'lodash'
  21. import { Component, Vue } from 'vue-property-decorator'
  22. import { namespace } from 'vuex-class'
  23. const userStore = namespace('user')
  24. const userAnimeStore = namespace('userAnime')
  25. @Component({})
  26. export default class Home extends Vue {
  27. @userStore.Mutation('setCurrentUser')
  28. private setCurrentUser!: (user: User) => void
  29. @userStore.Action('findUsers')
  30. private findUsers!: (name: string) => Promise<User[]>
  31. @userStore.Action('resetFoundUsers')
  32. private resetFoundUsers!: () => void
  33. @userStore.Getter('foundUsers')
  34. private foundUsers!: User[]
  35. @userAnimeStore.Action
  36. private resetUserAnime!: () => void
  37. private onInput = _.debounce((name: string) => {
  38. if (name === '') {
  39. this.resetFoundUsers()
  40. return
  41. }
  42. this.findUsers(name)
  43. }, 200)
  44. private onSelect(user: User) {
  45. this.setCurrentUser(user)
  46. this.resetUserAnime()
  47. this.$router.push({ name: 'userAnime' })
  48. }
  49. }
  50. </script>