Enhance category management: update adventure category assignment log…

…ic, improve category display in UI components, and add dynamic sorting for category dropdown
seanmorley15 · Nov 27, 2024 · f878167 · f878167
1 parent adf45ff
commit f878167
Show file tree

Hide file tree

Showing 6 changed files with 441 additions and 429 deletions.
diff --git a/documentation/.vitepress/config.mts b/documentation/.vitepress/config.mts
@@ -122,6 +122,7 @@ export default defineConfig({
       },
       {
         text: "Changelogs",
+        collapsed: false,
         items: [
           {
             text: "v0.7.1",

diff --git a/frontend/src/lib/components/AdventureModal.svelte b/frontend/src/lib/components/AdventureModal.svelte
@@ -405,16 +405,20 @@
 		console.log(adventure);
 		if (adventure.id === '') {
 			console.log(categories);
-			if (categories.some((category) => category.name === 'general')) {
-				adventure.category = categories.find((category) => category.name === 'general') as Category;
-			} else {
-				adventure.category = {
-					id: '',
-					name: 'general',
-					display_name: 'General',
-					icon: '🌍',
-					user_id: ''
-				};
+			if (adventure.category?.display_name == '') {
+				if (categories.some((category) => category.name === 'general')) {
+					adventure.category = categories.find(
+						(category) => category.name === 'general'
+					) as Category;
+				} else {
+					adventure.category = {
+						id: '',
+						name: 'general',
+						display_name: 'General',
+						icon: '🌍',
+						user_id: ''
+					};
+				}
 			}
 			let res = await fetch('/api/adventures', {
 				method: 'POST',

diff --git a/frontend/src/lib/components/CategoryDropdown.svelte b/frontend/src/lib/components/CategoryDropdown.svelte
@@ -77,16 +77,19 @@
 				>
 			</div>
 			<div class="flex flex-wrap gap-2 mt-2">
-				<!-- svelte-ignore a11y-no-static-element-interactions -->
-				{#each categories as category}
-					<!-- svelte-ignore a11y-click-events-have-key-events -->
-					<!-- svelte-ignore a11y-no-static-element-interactions -->
-					<div
+				<!-- Sort the categories dynamically before rendering -->
+				{#each categories
+					.slice()
+					.sort((a, b) => (b.num_adventures || 0) - (a.num_adventures || 0)) as category}
+					<button
+						type="button"
 						class="btn btn-neutral flex items-center space-x-2"
 						on:click={() => selectCategory(category)}
+						role="option"
+						aria-selected={selected_category && selected_category.id === category.id}
 					>
 						<span>{category.display_name} {category.icon} ({category.num_adventures})</span>
-					</div>
+					</button>
 				{/each}
 			</div>
 		</div>

diff --git a/frontend/src/lib/components/CategoryModal.svelte b/frontend/src/lib/components/CategoryModal.svelte
@@ -6,6 +6,8 @@
 	let modal: HTMLDialogElement;
 	import { t } from 'svelte-i18n';
 
+	import InformationSlabCircle from '~icons/mdi/information-slab-circle';
+
 	export let categories: Category[] = [];
 
 	let category_to_edit: Category | null = null;
@@ -86,6 +88,8 @@
 						<button on:click={removeCategory(category)} class="btn btn-warning btn-sm"
 							>{$t('adventures.remove')}</button
 						>
+					{:else}
+						<button class="btn btn-warning btn-sm btn-disabled">{$t('adventures.remove')}</button>
 					{/if}
 				</div>
 			</div>