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 state: string
rating: string rating: string
start_date: string start_date: string
}
export interface DetailedAnime extends Anime {
end_date: string end_date: string
genres: string[] genres: string[]
average_duration: number average_duration: number
@ -24,7 +27,7 @@ declare namespace Meikan {
myanimelist_id: number myanimelist_id: number
} }
export interface UserAnime { export interface UserAnime {
anime: Anime anime: Anime
state: string state: string
episode: number episode: number

View File

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

View File

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