Docker/AdventureLog
Docker/AdventureLog
1
0
Fork 0
mirror of https://github.com/seanmorley15/AdventureLog.git synced 2025-07-29 17:59:36 +02:00
Code Issues Releases Activity

Refactor adventure category handling: update type definitions, enhance category management in UI components, and implement user-specific category deletion logic in the backend

Browse source
This commit is contained in:
Sean Morley 2024-11-23 13:42:41 -05:00
parent 736ede2417
commit 8e5a20ec62
12 changed files with 324 additions and 93 deletions
Download patch file Download diff file Expand all files Collapse all files

88
frontend/src/lib/components/CategoryDropdown.svelte
View file

@ -4,17 +4,16 @@
import { t } from 'svelte-i18n';
export let categories: Category[] = [];
let selected_category: Category | null = null;
export let selected_category: Category | null = null;
let new_category: Category = {
name: '',
display_name: '',
icon: '',
id: '',
user_id: '',
num_adventures: 0
};
export let category_id:
| {
id: string;
name: string;
display_name: string;
icon: string;
user_id: string;
}
| string;
let isOpen = false;
function toggleDropdown() {
@ -22,25 +21,28 @@
}
function selectCategory(category: Category) {
console.log('category', category);
selected_category = category;
category_id = category.id;
isOpen = false;
}
function removeCategory(categoryName: string) {
categories = categories.filter((category) => category.name !== categoryName);
if (selected_category && selected_category.name === categoryName) {
selected_category = null;
}
function custom_category() {
new_category.name = new_category.display_name.toLowerCase().replace(/ /g, '_');
selectCategory(new_category);
}
// function removeCategory(categoryName: string) {
// categories = categories.filter((category) => category.name !== categoryName);
// if (selected_category && selected_category.name === categoryName) {
// selected_category = null;
// }
// }
// Close dropdown when clicking outside
let dropdownRef: HTMLDivElement;
onMount(() => {
if (category_id) {
// when category_id is passed, it will be the full object not just the id that is why we can use it directly as selected_category
selected_category = category_id as Category;
}
categories = categories.sort((a, b) => (b.num_adventures || 0) - (a.num_adventures || 0));
const handleClickOutside = (event: MouseEvent) => {
if (dropdownRef && !dropdownRef.contains(event.target as Node)) {
isOpen = false;
@ -55,28 +57,52 @@
<div class="mt-2 relative" bind:this={dropdownRef}>
<button type="button" class="btn btn-outline w-full text-left" on:click={toggleDropdown}>
{selected_category
{selected_category && selected_category.name
? selected_category.display_name + ' ' + selected_category.icon
: 'Select Category'}
</button>
{#if isOpen}
<div class="absolute z-10 w-full mt-1 bg-base-300 rounded shadow-lg p-2 flex flex-wrap gap-2">
{#each categories as category}
<div
class="btn btn-neutral flex items-center space-x-2"
on:click={() => selectCategory(category)}
<div class="absolute z-10 w-full mt-1 bg-base-300 rounded shadow-lg p-2">
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div class="flex items-center gap-2">
<input
type="text"
placeholder="Category Name"
class="input input-bordered w-full max-w-xs"
bind:value={new_category.display_name}
/>
<input
type="text"
placeholder="Icon"
class="input input-bordered w-full max-w-xs"
bind:value={new_category.icon}
/>
<button on:click={custom_category} type="button" class="btn btn-primary"
>{$t('adventures.add')}</button
>
<span>{category.display_name} {category.icon}</span>
<button
</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
class="btn btn-neutral flex items-center space-x-2"
on:click={() => selectCategory(category)}
>
<span>{category.display_name} {category.icon} ({category.num_adventures})</span>
<!-- <button
type="button"
class="btn btn-xs btn-error"
on:click|stopPropagation={() => removeCategory(category.name)}
>
{$t('adventures.remove')}
</button>
</div>
{/each}
</button> -->
</div>
{/each}
</div>
</div>
{/if}
</div>