Add userAnime search and sorting

src/types/shims-vue.d.ts

@@ -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

src/views/UserAnime.vue

@@ -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>

src/views/UserSelect.vue

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