From 56bae8c72f8aa8da5b20ffe66bd083556f4b351f Mon Sep 17 00:00:00 2001
From: glazk0 <43091603+glazk0@users.noreply.github.com>
Date: Tue, 17 Sep 2024 18:34:03 +0200
Subject: [PATCH] fix(chapters): removed filters when no data

---
 .../chapters/[chapterId=id]/+page.svelte      | 86 ++++++++++---------
 1 file changed, 45 insertions(+), 41 deletions(-)

diff --git a/src/routes/(app)/chapters/[chapterId=id]/+page.svelte b/src/routes/(app)/chapters/[chapterId=id]/+page.svelte
index bf3eea3..fbe5ec3 100644
--- a/src/routes/(app)/chapters/[chapterId=id]/+page.svelte
+++ b/src/routes/(app)/chapters/[chapterId=id]/+page.svelte
@@ -102,48 +102,52 @@
 			{/if}
 		</div>
 	</header>
-	<div class="flex flex-col md:flex-row gap-2">
+	<div class="flex flex-col gap-2 md:flex-row">
 		<Input bind:value={name} placeholder="Rechercher un puzzle" />
-		<Select.Root
-			multiple
-			selected={themeList.map((theme) => ({ label: theme, value: theme }))}
-			onSelectedChange={(v) => {
-				if (v) {
-					themeList = v.map((item) => item.value);
-				} else {
-					themeList = [];
-				}
-			}}
-		>
-			<Select.Trigger class="md:w-[180px]">
-				<Select.Value placeholder="Thème" />
-			</Select.Trigger>
-			<Select.Content>
-				{#each Object.entries(themes) as [key, value]}
-					<Select.Item {value}>{key}</Select.Item>
-				{/each}
-			</Select.Content>
-		</Select.Root>
-		<Select.Root
-			multiple
-			selected={difficultyList.map((difficulty) => ({ label: difficulty, value: difficulty }))}
-			onSelectedChange={(v) => {
-				if (v) {
-					difficultyList = v.map((item) => item.value);
-				} else {
-					difficultyList = [];
-				}
-			}}
-		>
-			<Select.Trigger class="md:w-[180px]">
-				<Select.Value placeholder="Difficulté" />
-			</Select.Trigger>
-			<Select.Content>
-				{#each Object.entries(difficulties) as [key, value]}
-					<Select.Item {value}>{key}</Select.Item>
-				{/each}
-			</Select.Content>
-		</Select.Root>
+		{#if Object.keys(themes).length}
+			<Select.Root
+				multiple
+				selected={themeList.map((theme) => ({ label: theme, value: theme }))}
+				onSelectedChange={(v) => {
+					if (v) {
+						themeList = v.map((item) => item.value);
+					} else {
+						themeList = [];
+					}
+				}}
+			>
+				<Select.Trigger class="md:w-[180px]">
+					<Select.Value placeholder="Thème" />
+				</Select.Trigger>
+				<Select.Content>
+					{#each Object.entries(themes) as [key, value]}
+						<Select.Item {value}>{key}</Select.Item>
+					{/each}
+				</Select.Content>
+			</Select.Root>
+		{/if}
+		{#if Object.keys(difficulties).length}
+			<Select.Root
+				multiple
+				selected={difficultyList.map((difficulty) => ({ label: difficulty, value: difficulty }))}
+				onSelectedChange={(v) => {
+					if (v) {
+						difficultyList = v.map((item) => item.value);
+					} else {
+						difficultyList = [];
+					}
+				}}
+			>
+				<Select.Trigger class="md:w-[180px]">
+					<Select.Value placeholder="Difficulté" />
+				</Select.Trigger>
+				<Select.Content>
+					{#each Object.entries(difficulties) as [key, value]}
+						<Select.Item {value}>{key}</Select.Item>
+					{/each}
+				</Select.Content>
+			</Select.Root>
+		{/if}
 	</div>
 	<ul class="flex flex-col gap-2">
 		{#if !filteredPuzzles.length}