feat: add star col to support favorite

Justin3go · Feb 21, 2024 · 9be90de · 9be90de
1 parent 548a177
commit 9be90de
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 8 deletions.
diff --git a/components/home/List.vue b/components/home/List.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="list-container">
-		<v-card >
+		<v-card>
 			<template v-slot:text>
 				<v-text-field
 					v-model="search"
@@ -27,8 +27,7 @@
 			<v-data-table
 				v-model:expanded="expanded"
 				:headers="headers"
-				:items="data"
-
+				:items="dataList"
 				item-value="prompt"
 			>
 				<template v-slot:item.prompt="{ item }">
@@ -37,7 +36,15 @@
 					</div>
 				</template>
 				<template v-slot:item.homepage="{ item }">
-					<v-btn class="text-capitalize" color="primary" variant="text" :href="item.homepage" target="_blank"> Go to Page </v-btn>
+					<v-btn
+						class="text-capitalize"
+						color="primary"
+						variant="text"
+						:href="item.homepage"
+						target="_blank"
+					>
+						Go to Page
+					</v-btn>
 				</template>
 				<template v-slot:item.video="{ item }">
 					<v-card class="my-2" elevation="2" rounded>
@@ -52,6 +59,24 @@
 						></iframe>
 					</v-card>
 				</template>
+				<template v-slot:item.star="{ item }">
+					<ClientOnly>
+						<v-checkbox
+							v-model="item.star"
+							:messages="item.star ? 'starred' : 'star it'"
+							false-icon="mdi-star-outline"
+							true-icon="mdi-star"
+							@update:modelValue="() => starItem(item)"
+						></v-checkbox>
+						<template #placeholder>
+							<v-checkbox
+								:model-value="false"
+								messages="star it"
+								false-icon="mdi-star-outline"
+							></v-checkbox>
+						</template>
+					</ClientOnly>
+				</template>
 			</v-data-table>
 		</v-card>
 	</div>
@@ -67,14 +92,35 @@ const headers = ref([
 		key: "prompt",
 	},
 	{ title: "Author", sortable: false, key: "author" },
-	{ title: "HomePage", sortable: false, align: "center",  key: "homepage" },
 	{ title: "Publish", width: "120px", key: "publish" },
+	{ title: "HomePage", sortable: false, align: "center", key: "homepage" },
+	{ title: "Star", key: "star" },
 	{ title: "Preview", sortable: false, key: "video" },
 ]);
 
-const { data } = await useFetch("/api/sora", { query: { search } });
+const { data: soraData }: { data: any } = await useFetch("/api/sora", {
+	query: { search },
+});
 const { data: topWords } = await useFetch("/api/topWords");
 
+const store = useMyFavoritesListStore();
+const dataList = computed(() => {
+	const favoriteSet = new Set(
+		store.favoritesList.map((item: any) => item.prompt)
+	);
+	return soraData?.value?.map((item: any) => ({
+		...item,
+		star: favoriteSet.has(item.prompt),
+	}));
+});
+
+function starItem(item: any) {
+	if (item.star) {
+		store.addFavorite(item);
+	} else {
+		store.removeFavorite(item);
+	}
+}
 </script>
 
 <style></style>
diff --git a/stores/favoritesList.ts b/stores/favoritesList.ts
@@ -1,11 +1,34 @@
 import { defineStore } from 'pinia'
 
+interface IFavoritesListItem {
+  prompt: string;
+  author: string;
+  homepage: string;
+  video: string;
+  publish: string;
+}
+
 export const useMyFavoritesListStore = defineStore({
   id: 'myFavoritesListStore',
   state: () => ({
-    favoritesList: [],
+    favoritesList: [] as IFavoritesListItem[],
   }),
-  actions: {},
+  actions: {
+    addFavorite(item: IFavoritesListItem) {
+      const index = this.favoritesList.findIndex((i) => i.prompt === item.prompt)
+      if (index === -1) {
+        this.favoritesList.push(item)
+        return true;
+      }
+      else return false;
+    },
+    removeFavorite(item: IFavoritesListItem) {
+      const index = this.favoritesList.findIndex((i) => i.prompt === item.prompt)
+      if (index !== -1) {
+        this.favoritesList.splice(index, 1)
+      }
+    },
+  },
   persist: {
     storage: persistedState.localStorage,
   },