feat: category specific fields

aura-nw · Aug 19, 2024 · 1f67cd3 · 1f67cd3
1 parent 8ffc3a9
commit 1f67cd3
Show file tree

Hide file tree

Showing 6 changed files with 105 additions and 47 deletions.
diff --git a/src/routes/(sidebar)/crud/products/+page.ts b/src/routes/(sidebar)/crud/products/+page.ts
@@ -14,6 +14,10 @@ export interface ProductPageData {
 	selected_player_supports?: string[];
 	game_modes: string[];
 	selected_game_modes?: string[];
+	manga_statuses: string[];
+	selected_manga_statuses?: string[];
+	manga_genres: string[];
+	selected_manga_genres?: string[];
 }
 
 export async function load(): Promise<ListWithPagingResponse<ProductResponseData>> {

diff --git a/src/routes/(sidebar)/crud/products/Product.svelte b/src/routes/(sidebar)/crud/products/Product.svelte
@@ -41,6 +41,7 @@
 	$: isViewMode = mode === PAGE_MODE.VIEW || form?.reload;
 
 	let deleteId: string | undefined = undefined;
+	let category = data.product.category || '';
 </script>
 
 <MetaTag {path} {description} {title} {subtitle} />
@@ -101,7 +102,7 @@
 						<Select
 							class="w-22 me-4"
 							items={PRODUCT_CATEGORIES.map((c) => ({ name: c, value: c }))}
-							selected={data.product.category || ''}
+							bind:selected={category}
 							selectProps={{
 								name: 'category',
 								disabled: isViewMode
@@ -224,50 +225,81 @@
 					<div class="mb-4 flex items-center justify-between">
 						<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Type-Specific</h3>
 					</div>
-					<MultiSelectWithSearch
-						name="Status"
-						placeholder="e.g. Ethereum"
-						class="mb-2 me-4 mt-3 w-full"
-						items={data.statuses}
-						selected={data.selected_statuses}
-						multiSelectProps={{
-							name: 'statuses',
-							allowUserOptions: 'append',
-							disabled: isViewMode
-						}}
-					/>
-					<MultiSelectWithSearch
-						name="Player info"
-						placeholder="e.g. Ethereum"
-						class="mb-2 me-4 mt-3 w-full"
-						items={data.player_supports}
-						selected={data.selected_player_supports}
-						multiSelectProps={{
-							name: 'players_infos',
-							allowUserOptions: 'append',
-							disabled: isViewMode
-						}}
-					/>
-					<MultiSelectWithSearch
-						name="Genre"
-						placeholder="e.g. Ethereum"
-						class="mb-2 me-4 mt-3 w-full"
-						items={data.genres}
-						selected={data.selected_genres}
-						multiSelectProps={{ name: 'genres', allowUserOptions: 'append', disabled: isViewMode }}
-					/>
-					<MultiSelectWithSearch
-						name="Game mode"
-						placeholder="e.g. Ethereum"
-						class="mb-2 me-4 mt-3 w-full"
-						items={data.game_modes}
-						selected={data.selected_game_modes}
-						multiSelectProps={{
-							name: 'game_modes',
-							allowUserOptions: 'append',
-							disabled: isViewMode
-						}}
-					/>
+					{#if category === PRODUCT_CATEGORIES[0]}
+						<MultiSelectWithSearch
+							name="Status"
+							placeholder="e.g. ongoign"
+							class="mb-2 me-4 mt-3 w-full"
+							items={data.statuses}
+							selected={data.selected_statuses}
+							multiSelectProps={{
+								name: 'statuses',
+								allowUserOptions: 'append',
+								disabled: isViewMode
+							}}
+						/>
+						<MultiSelectWithSearch
+							name="Player info"
+							placeholder="e.g. pvp"
+							class="mb-2 me-4 mt-3 w-full"
+							items={data.player_supports}
+							selected={data.selected_player_supports}
+							multiSelectProps={{
+								name: 'players_infos',
+								allowUserOptions: 'append',
+								disabled: isViewMode
+							}}
+						/>
+						<MultiSelectWithSearch
+							name="Genre"
+							placeholder="e.g. horor"
+							class="mb-2 me-4 mt-3 w-full"
+							items={data.genres}
+							selected={data.selected_genres}
+							multiSelectProps={{
+								name: 'genres',
+								allowUserOptions: 'append',
+								disabled: isViewMode
+							}}
+						/>
+						<MultiSelectWithSearch
+							name="Game mode"
+							placeholder="e.g. survivor"
+							class="mb-2 me-4 mt-3 w-full"
+							items={data.game_modes}
+							selected={data.selected_game_modes}
+							multiSelectProps={{
+								name: 'game_modes',
+								allowUserOptions: 'append',
+								disabled: isViewMode
+							}}
+						/>
+					{:else}
+						<MultiSelectWithSearch
+							name="Status"
+							placeholder="e.g. launching"
+							class="mb-2 me-4 mt-3 w-full"
+							items={data.manga_statuses}
+							selected={data.selected_manga_statuses}
+							multiSelectProps={{
+								name: 'manga_statuses',
+								allowUserOptions: 'append',
+								disabled: isViewMode
+							}}
+						/>
+						<MultiSelectWithSearch
+							name="Genre"
+							placeholder="e.g. horor"
+							class="mb-2 me-4 mt-3 w-full"
+							items={data.manga_genres}
+							selected={data.selected_manga_genres}
+							multiSelectProps={{
+								name: 'manga_genres',
+								allowUserOptions: 'append',
+								disabled: isViewMode
+							}}
+						/>
+					{/if}
 				</Card>
 			</Card>
 		</div>

diff --git a/src/routes/(sidebar)/crud/products/[id]/+page.server.ts b/src/routes/(sidebar)/crud/products/[id]/+page.server.ts
@@ -55,6 +55,14 @@ export const actions = {
 				...JSON.parse(data.get('game_modes')?.toString() || '[]').map((value: string) => ({
 					name: 'game mode',
 					value
+				})),
+				...JSON.parse(data.get('manga_statuses')?.toString() || '[]').map((value: string) => ({
+					name: 'manga status',
+					value
+				})),
+				...JSON.parse(data.get('manga_genres')?.toString() || '[]').map((value: string) => ({
+					name: 'manga genre',
+					value
 				}))
 			]
 		};

diff --git a/src/routes/(sidebar)/crud/products/[id]/+page.ts b/src/routes/(sidebar)/crud/products/[id]/+page.ts
@@ -21,6 +21,10 @@ export async function load(pageLoadEvent): Promise<ProductPageData> {
 		player_supports: nameToValues['player support']?.map((v) => v.value),
 		selected_player_supports: selectedNameToValues['player support']?.map((v) => v.value),
 		game_modes: nameToValues['game mode']?.map((v) => v.value),
-		selected_game_modes: selectedNameToValues['game mode']?.map((v) => v.value)
+		selected_game_modes: selectedNameToValues['game mode']?.map((v) => v.value),
+		manga_statuses: nameToValues['manga status']?.map((v) => v.value),
+		selected_manga_statuses: selectedNameToValues['manga status']?.map((v) => v.value),
+		manga_genres: nameToValues['manga genre']?.map((v) => v.value),
+		selected_manga_genres: selectedNameToValues['manga genre']?.map((v) => v.value)
 	};
 }
diff --git a/src/routes/(sidebar)/crud/products/create/+page.server.ts b/src/routes/(sidebar)/crud/products/create/+page.server.ts
@@ -48,6 +48,14 @@ export const actions = {
 				...JSON.parse(data.get('game_modes')?.toString() || '[]').map((value: string) => ({
 					name: 'game mode',
 					value
+				})),
+				...JSON.parse(data.get('manga_statuses')?.toString() || '[]').map((value: string) => ({
+					name: 'manga status',
+					value
+				})),
+				...JSON.parse(data.get('manga_genres')?.toString() || '[]').map((value: string) => ({
+					name: 'manga genre',
+					value
 				}))
 			]
 		};

diff --git a/src/routes/(sidebar)/crud/products/create/+page.ts b/src/routes/(sidebar)/crud/products/create/+page.ts
@@ -25,6 +25,8 @@ export async function load(): Promise<ProductPageData> {
 		statuses: nameToValues['status']?.map((v) => v.value),
 		genres: nameToValues['genre']?.map((v) => v.value),
 		player_supports: nameToValues['player support']?.map((v) => v.value),
-		game_modes: nameToValues['game mode']?.map((v) => v.value)
+		game_modes: nameToValues['game mode']?.map((v) => v.value),
+		manga_statuses: nameToValues['manga status']?.map((v) => v.value),
+		manga_genres: nameToValues['manga genre']?.map((v) => v.value)
 	};
 }