Browse Source

Add userAnime search and sorting

ts
Crow Crowcrow 8 months ago
parent
commit
ff3d8572f1
Signed by: robinknaapen <robin@ultraware.nl> GPG Key ID: 45A8E203AF859FD8
3 changed files with 61 additions and 13 deletions
  1. 4
    1
      src/types/shims-vue.d.ts
  2. 53
    12
      src/views/UserAnime.vue
  3. 4
    0
      src/views/UserSelect.vue

+ 4
- 1
src/types/shims-vue.d.ts View File

@@ -17,6 +17,9 @@ declare namespace Meikan {
17 17
 		state: string
18 18
 		rating: string
19 19
 		start_date: string
20
+	}
21
+
22
+	export interface DetailedAnime extends Anime {
20 23
 		end_date: string
21 24
 		genres: string[]
22 25
 		average_duration: number
@@ -24,7 +27,7 @@ declare namespace Meikan {
24 27
 		myanimelist_id: number
25 28
 	}
26 29
 
27
- export interface UserAnime {
30
+	export interface UserAnime {
28 31
 		anime: Anime
29 32
 		state: string
30 33
 		episode: number

+ 53
- 12
src/views/UserAnime.vue View File

@@ -1,20 +1,32 @@
1 1
 <template>
2
-	<md-table v-model="anime">
2
+	<md-table v-model="searched" md-card md-sort="id" md-sort-order="asc">
3 3
 		<md-table-toolbar>
4 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>
5
+			<div class="md-toolbar-section-end">
6
+				<md-field md-clearable>
7
+					<md-input placeholder="Search by name..." v-model="search" @input="searchOnTable" />
8
+				</md-field>
9
+				<md-button 
10
+					class="md-icon-button md-primary"
11
+					@click="refresh"
12
+				>
13
+					<md-icon>refresh</md-icon>
14
+				</md-button>
15
+			</div>
11 16
 		</md-table-toolbar>
12
-		<md-table-empty-state>
17
+
18
+		<md-table-empty-state v-if="loading">
13 19
 			<md-progress-spinner class="md-accent" md-mode="indeterminate"></md-progress-spinner>
14 20
 		</md-table-empty-state>
21
+		<md-table-empty-state 
22
+			v-else
23
+			md-label="No results"
24
+			md-description="It's a void"
25
+		/>
26
+
15 27
 		<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>
28
+			<md-table-cell md-label="#" md-numeric md-sort-by="anime.id">{{ item.anime.id }}</md-table-cell>
29
+			<md-table-cell md-label="Title" md-sort-by="anime.title">{{ item.anime.title }}</md-table-cell>
18 30
 		</md-table-row>
19 31
 	</md-table>
20 32
 </template>
@@ -28,6 +40,11 @@ const userAnime = namespace('userAnime')
28 40
 
29 41
 @Component({})
30 42
 export default class Home extends Vue {
43
+	public loading: boolean = false
44
+
45
+	public search: string = ''
46
+	public searched: Meikan.UserAnime[] = []
47
+
31 48
 	@user.Getter
32 49
 	private currentUser!: Meikan.User
33 50
 
@@ -41,14 +58,38 @@ export default class Home extends Vue {
41 58
 	private anime!: Meikan.UserAnime[]
42 59
 
43 60
 	private created() {
44
-		if (this.anime.length === 0) {
45
-			this.fetchUserAnime(this.currentUser)
61
+		if (this.anime.length !== 0) {
62
+			this.searched = this.anime
63
+			return
46 64
 		}
65
+		this.loading = true
66
+		this.fetchUserAnime(this.currentUser)
67
+			.then(() => {
68
+				this.loading = false
69
+				this.searched = this.anime
70
+			})
47 71
 	}
48 72
 
49 73
 	private refresh() {
50 74
 		this.resetUserAnime()
75
+
76
+		this.loading = true
51 77
 		this.fetchUserAnime(this.currentUser)
78
+			.then(() => {
79
+				this.loading = false
80
+			})
81
+	}
82
+
83
+	private searchOnTable() {
84
+		if (this.search.length === 0) {
85
+			this.searched = this.anime
86
+		}
87
+
88
+		this.searched = this.anime.filter((item) => {
89
+			return item.anime.title
90
+				.toLowerCase()
91
+				.includes(this.search.toLowerCase())
92
+		})
52 93
 	}
53 94
 }
54 95
 </script>

+ 4
- 0
src/views/UserSelect.vue View File

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

Loading…
Cancel
Save