1
0
Fork 0
mirror of https://github.com/seanmorley15/AdventureLog.git synced 2025-07-29 09:49:38 +02:00

Enhance category management: update adventure category assignment logic, improve category display in UI components, and add dynamic sorting for category dropdown

This commit is contained in:
Sean Morley 2024-11-26 20:06:52 -05:00
parent adf45ff557
commit f878167a36
6 changed files with 441 additions and 429 deletions

View file

@ -122,6 +122,7 @@ export default defineConfig({
}, },
{ {
text: "Changelogs", text: "Changelogs",
collapsed: false,
items: [ items: [
{ {
text: "v0.7.1", text: "v0.7.1",

View file

@ -405,8 +405,11 @@
console.log(adventure); console.log(adventure);
if (adventure.id === '') { if (adventure.id === '') {
console.log(categories); console.log(categories);
if (adventure.category?.display_name == '') {
if (categories.some((category) => category.name === 'general')) { if (categories.some((category) => category.name === 'general')) {
adventure.category = categories.find((category) => category.name === 'general') as Category; adventure.category = categories.find(
(category) => category.name === 'general'
) as Category;
} else { } else {
adventure.category = { adventure.category = {
id: '', id: '',
@ -416,6 +419,7 @@
user_id: '' user_id: ''
}; };
} }
}
let res = await fetch('/api/adventures', { let res = await fetch('/api/adventures', {
method: 'POST', method: 'POST',
headers: { headers: {

View file

@ -77,16 +77,19 @@
> >
</div> </div>
<div class="flex flex-wrap gap-2 mt-2"> <div class="flex flex-wrap gap-2 mt-2">
<!-- svelte-ignore a11y-no-static-element-interactions --> <!-- Sort the categories dynamically before rendering -->
{#each categories as category} {#each categories
<!-- svelte-ignore a11y-click-events-have-key-events --> .slice()
<!-- svelte-ignore a11y-no-static-element-interactions --> .sort((a, b) => (b.num_adventures || 0) - (a.num_adventures || 0)) as category}
<div <button
type="button"
class="btn btn-neutral flex items-center space-x-2" class="btn btn-neutral flex items-center space-x-2"
on:click={() => selectCategory(category)} 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> <span>{category.display_name} {category.icon} ({category.num_adventures})</span>
</div> </button>
{/each} {/each}
</div> </div>
</div> </div>

View file

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

View file

@ -126,7 +126,7 @@
on:click={togglePopup} on:click={togglePopup}
> >
<span class="text-xl"> <span class="text-xl">
{adventure.category?.display_name + ' ' + adventure.category?.icon} {adventure.category?.icon}
</span> </span>
{#if isPopupOpen} {#if isPopupOpen}
<Popup openOn="click" offset={[0, -10]} on:close={() => (isPopupOpen = false)}> <Popup openOn="click" offset={[0, -10]} on:close={() => (isPopupOpen = false)}>