Docker/AdventureLog
Docker/AdventureLog
1
0
Fork 0
mirror of https://github.com/seanmorley15/AdventureLog.git synced 2025-07-23 14: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

29
frontend/src/lib/components/AdventureModal.svelte
View file

@ -31,6 +31,7 @@
import ActivityComplete from './ActivityComplete.svelte';
import { appVersion } from '$lib/config';
import CategoryDropdown from './CategoryDropdown.svelte';
import { findFirstValue } from '$lib';
let wikiError: string = '';
@ -56,7 +57,13 @@
images: [],
user_id: null,
collection: collection?.id || null,
category: ''
category: {
id: '',
name: '',
display_name: '',
icon: '',
user_id: ''
}
};
export let adventureToEdit: Adventure | null = null;
@ -78,7 +85,13 @@
collection: adventureToEdit?.collection || collection?.id || null,
visits: adventureToEdit?.visits || [],
is_visited: adventureToEdit?.is_visited || false,
category: adventureToEdit?.category || ''
category: adventureToEdit?.category || {
id: '',
name: '',
display_name: '',
icon: '',
user_id: ''
}
};
let markers: Point[] = [];
@ -405,7 +418,8 @@
warningMessage = '';
addToast('success', $t('adventures.adventure_created'));
} else {
warningMessage = Object.values(data)[0] as string;
warningMessage = findFirstValue(data) as string;
console.error(data);
addToast('error', $t('adventures.adventure_create_error'));
}
} else {
@ -450,7 +464,8 @@
</div>
<div class="collapse-content">
<div>
<label for="name">{$t('adventures.name')}</label><br />
<label for="name">{$t('adventures.name')}<span class="text-red-500">*</span></label
><br />
<input
type="text"
id="name"
@ -461,9 +476,11 @@
/>
</div>
<div>
<label for="link">{$t('adventures.category')}</label><br />
<label for="link"
>{$t('adventures.category')}<span class="text-red-500">*</span></label
><br />
<CategoryDropdown bind:categories bind:category_id={adventure.category} />
<CategoryDropdown bind:categories bind:selected_category={adventure.category} />
</div>
<div>
<label for="rating">{$t('adventures.rating')}</label><br />

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>

107
frontend/src/lib/components/CategoryModal.svelte Normal file
View file

@ -0,0 +1,107 @@
<script lang="ts">
import type { Category } from '$lib/types';
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
import { onMount } from 'svelte';
let modal: HTMLDialogElement;
import { t } from 'svelte-i18n';
export let categories: Category[] = [];
let category_to_edit: Category | null = null;
onMount(async () => {
modal = document.getElementById('my_modal_1') as HTMLDialogElement;
if (modal) {
modal.showModal();
}
let category_fetch = await fetch('/api/categories/categories');
categories = await category_fetch.json();
// remove the general category if it exists
categories = categories.filter((c) => c.name !== 'general');
});
async function saveCategory() {
if (category_to_edit) {
let edit_fetch = await fetch(`/api/categories/${category_to_edit.id}`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(category_to_edit)
});
if (edit_fetch.ok) {
category_to_edit = null;
let the_category = (await edit_fetch.json()) as Category;
categories = categories.map((c) => {
if (c.id === the_category.id) {
return the_category;
}
return c;
});
}
}
}
function close() {
dispatch('close');
}
function handleKeydown(event: KeyboardEvent) {
if (event.key === 'Escape') {
dispatch('close');
}
}
function removeCategory(category: Category) {
return async () => {
let response = await fetch(`/api/categories/${category.id}`, {
method: 'DELETE'
});
if (response.ok) {
categories = categories.filter((c) => c.id !== category.id);
}
};
}
</script>
<dialog id="my_modal_1" class="modal">
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
<div class="modal-box" role="dialog" on:keydown={handleKeydown} tabindex="0">
<h3 class="font-bold text-lg">Manage Categories</h3>
{#each categories as category}
<div class="flex justify-between items-center mt-2">
<span>{category.display_name} {category.icon}</span>
<div class="flex space-x-2">
<button on:click={() => (category_to_edit = category)} class="btn btn-primary btn-sm"
>Edit</button
>
<button on:click={removeCategory(category)} class="btn btn-warning btn-sm">Remove</button>
</div>
</div>
{/each}
{#if categories.length === 0}
<p>No categories found.</p>
{/if}
{#if category_to_edit}
<input
type="text"
placeholder="Name"
bind:value={category_to_edit.display_name}
class="input input-bordered w-full max-w-xs"
/>
<input
type="text"
placeholder="Icon"
bind:value={category_to_edit.icon}
class="input input-bordered w-full max-w-xs"
/>
<button class="btn btn-primary" on:click={saveCategory}>Save</button>
{/if}
<button class="btn btn-primary mt-4" on:click={close}>{$t('about.close')}</button>
</div>
</dialog>

3
frontend/src/lib/components/CollectionCard.svelte
View file

@ -6,6 +6,7 @@
import FileDocumentEdit from '~icons/mdi/file-document-edit';
import ArchiveArrowDown from '~icons/mdi/archive-arrow-down';
import ArchiveArrowUp from '~icons/mdi/archive-arrow-up';
import ShareVariant from '~icons/mdi/share-variant';
import { goto } from '$app/navigation';
import type { Adventure, Collection } from '$lib/types';
@ -149,7 +150,7 @@
<FileDocumentEdit class="w-6 h-6" />{$t('adventures.edit_collection')}
</button>
<button class="btn btn-neutral mb-2" on:click={() => (isShareModalOpen = true)}>
<FileDocumentEdit class="w-6 h-6" />{$t('adventures.share')}
<ShareVariant class="w-6 h-6" />{$t('adventures.share')}
</button>
{/if}
{#if collection.is_archived}

3
frontend/src/lib/components/Navbar.svelte
View file

@ -219,8 +219,7 @@
>
<button
class="btn btn-sm mt-2"
on:click={() => (window.location.href = 'https://discord.gg/wRbQ9Egr8C')}
>{$t('navbar.discord')}</button
on:click={() => (window.location.href = 'https://discord.gg/wRbQ9Egr8C')}>Discord</button
>
<p class="font-bold m-4 text-lg text-center">{$t('navbar.theme_selection')}</p>
<form method="POST" use:enhance={submitUpdateTheme}>