Add userAnime search and sorting

This commit is contained in:
Crow Crowcrow 2018-12-13 22:44:47 +01:00
parent 6060dea8c4
commit ff3d8572f1
Signed by: Crow
GPG Key ID: 45A8E203AF859FD8
3 changed files with 61 additions and 13 deletions

View File

@ -17,6 +17,9 @@ declare namespace Meikan {
state: string
rating: string
start_date: string
}
export interface DetailedAnime extends Anime {
end_date: string
genres: string[]
average_duration: number
@ -24,7 +27,7 @@ declare namespace Meikan {
myanimelist_id: number
}
export interface UserAnime {
export interface UserAnime {
anime: Anime
state: string
episode: number

View File

@ -1,20 +1,32 @@
<template>
<md-table v-model="anime">
<md-table v-model="searched" md-card md-sort="id" md-sort-order="asc">
<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>
<div class="md-toolbar-section-end">
<md-field md-clearable>
<md-input placeholder="Search by name..." v-model="search" @input="searchOnTable" />
</md-field>
<md-button
class="md-icon-button md-primary"
@click="refresh"
>
<md-icon>refresh</md-icon>
</md-button>
</div>
</md-table-toolbar>
<md-table-empty-state>
<md-table-empty-state v-if="loading">
<md-progress-spinner class="md-accent" md-mode="indeterminate"></md-progress-spinner>
</md-table-empty-state>
<md-table-empty-state
v-else
md-label="No results"
md-description="It's a void"
/>
<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-cell md-label="#" md-numeric md-sort-by="anime.id">{{ item.anime.id }}</md-table-cell>
<md-table-cell md-label="Title" md-sort-by="anime.title">{{ item.anime.title }}</md-table-cell>
</md-table-row>
</md-table>
</template>
@ -28,6 +40,11 @@ const userAnime = namespace('userAnime')
@Component({})
export default class Home extends Vue {
public loading: boolean = false
public search: string = ''
public searched: Meikan.UserAnime[] = []
@user.Getter
private currentUser!: Meikan.User
@ -41,14 +58,38 @@ export default class Home extends Vue {
private anime!: Meikan.UserAnime[]
private created() {
if (this.anime.length === 0) {
this.fetchUserAnime(this.currentUser)
if (this.anime.length !== 0) {
this.searched = this.anime
return
}
this.loading = true
this.fetchUserAnime(this.currentUser)
.then(() => {
this.loading = false
this.searched = this.anime
})
}
private refresh() {
this.resetUserAnime()
this.loading = true
this.fetchUserAnime(this.currentUser)
.then(() => {
this.loading = false
})
}
private searchOnTable() {
if (this.search.length === 0) {
this.searched = this.anime
}
this.searched = this.anime.filter((item) => {
return item.anime.title
.toLowerCase()
.includes(this.search.toLowerCase())
})
}
}
</script>

View File

@ -59,5 +59,9 @@ export default class Home extends Vue {
this.$router.push({ name: 'userAnime' })
}
private created() {
this.resetFoundUsers()
}
}
</script>