alex/voyage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update note and checklist modals as well as add an unlinked state in the collection page for better organization

Browse Source
This commit is contained in:
Sean Morley
2024-12-26 21:56:14 -05:00
parent f7c998ab58
commit df2ce01910
12 changed files with 460 additions and 326 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
frontend/src/routes/collections/+page.svelte
View File

@@ -2,6 +2,7 @@
import { enhance } from '$app/forms';
import { goto } from '$app/navigation';
import CollectionCard from '$lib/components/CollectionCard.svelte';
import CollectionLink from '$lib/components/CollectionLink.svelte';
import CollectionModal from '$lib/components/CollectionModal.svelte';
import NotFound from '$lib/components/NotFound.svelte';
import type { Collection } from '$lib/types';
@@ -73,26 +74,31 @@
collections = collections.filter((collection) => collection.id !== event.detail);
}
function sort({ attribute, order }: { attribute: string; order: string }) {
currentSort.attribute = attribute;
currentSort.order = order;
if (attribute === 'name') {
if (order === 'asc') {
collections = collections.sort((a, b) => b.name.localeCompare(a.name));
} else {
collections = collections.sort((a, b) => a.name.localeCompare(b.name));
}
}
}
// function sort({ attribute, order }: { attribute: string; order: string }) {
// currentSort.attribute = attribute;
// currentSort.order = order;
// if (attribute === 'name') {
// if (order === 'asc') {
// collections = collections.sort((a, b) => b.name.localeCompare(a.name));
// } else {
// collections = collections.sort((a, b) => a.name.localeCompare(b.name));
// }
// }
// }
let collectionToEdit: Collection | null = null;
function deleteAdventure(event: CustomEvent<string>) {
collections = collections.filter((adventure) => adventure.id !== event.detail);
}
function createAdventure(event: CustomEvent<Collection>) {
collections = [event.detail, ...collections];
function saveOrCreate(event: CustomEvent<Collection>) {
if (collections.find((collection) => collection.id === event.detail.id)) {
collections = collections.map((collection) => {
if (collection.id === event.detail.id) {
return event.detail;
}
return collection;
});
} else {
collections = [event.detail, ...collections];
}
isShowingCollectionModal = false;
}
@@ -123,6 +129,7 @@
{collectionToEdit}
on:close={() => (isShowingCollectionModal = false)}
on:saveEdit={saveEdit}
on:save={saveOrCreate}
/>
{/if}
<div class="fixed bottom-4 right-4 z-[999]">
@@ -256,6 +263,6 @@
</div>
<svelte:head>
<title>{$t(`navbar.collections`)}</title>
<title>Collections</title>
<meta name="description" content="View your adventure collections." />
</svelte:head>

76
frontend/src/routes/collections/[id]/+page.svelte
View File

@@ -315,7 +315,7 @@
</div>
{/if}
{#if collection}
{#if data.user && data.user.uuid && (data.user.uuid == collection.user_id || collection.shared_with.includes(data.user.uuid)) && !collection.is_archived}
{#if data.user && data.user.uuid && (data.user.uuid == collection.user_id || (collection.shared_with && collection.shared_with.includes(data.user.uuid))) && !collection.is_archived}
<div class="fixed bottom-4 right-4 z-[999]">
<div class="flex flex-row items-center justify-center gap-4">
<div class="dropdown dropdown-top dropdown-end">
@@ -428,7 +428,8 @@
{#if collection.description}
<div class="flex justify-center mt-4">
<article
class="prose overflow-auto h-96 max-w-full p-4 border border-base-300 rounded-lg bg-base-300"
class="prose overflow-auto max-h-96 max-w-full p-4 border border-base-300 rounded-lg bg-base-300 mb-4"
style="overflow-y: auto;"
>
{@html renderMarkdown(collection.description)}
</article>
@@ -451,40 +452,42 @@
</div>
{/if}
<div class="flex justify-center mx-auto">
<!-- svelte-ignore a11y-missing-attribute -->
<div role="tablist" class="tabs tabs-boxed tabs-lg max-w-xl">
{#if collection.start_date}
<div class="flex justify-center mx-auto">
<!-- svelte-ignore a11y-missing-attribute -->
<a
role="tab"
class="tab {currentView === 'itinerary' ? 'tab-active' : ''}"
tabindex="0"
on:click={() => (currentView = 'itinerary')}
on:keydown={(e) => e.key === 'Enter' && (currentView = 'itinerary')}>Itinerary</a
>
<a
role="tab"
class="tab {currentView === 'all' ? 'tab-active' : ''}"
tabindex="0"
on:click={() => (currentView = 'all')}
on:keydown={(e) => e.key === 'Enter' && (currentView = 'all')}>All Linked Items</a
>
<a
role="tab"
class="tab {currentView === 'calendar' ? 'tab-active' : ''}"
tabindex="0"
on:click={() => (currentView = 'calendar')}
on:keydown={(e) => e.key === 'Enter' && (currentView = 'calendar')}>Calendar</a
>
<a
role="tab"
class="tab {currentView === 'map' ? 'tab-active' : ''}"
tabindex="0"
on:click={() => (currentView = 'map')}
on:keydown={(e) => e.key === 'Enter' && (currentView = 'map')}>Map</a
>
<div role="tablist" class="tabs tabs-boxed tabs-lg max-w-xl">
<!-- svelte-ignore a11y-missing-attribute -->
<a
role="tab"
class="tab {currentView === 'itinerary' ? 'tab-active' : ''}"
tabindex="0"
on:click={() => (currentView = 'itinerary')}
on:keydown={(e) => e.key === 'Enter' && (currentView = 'itinerary')}>Itinerary</a
>
<a
role="tab"
class="tab {currentView === 'all' ? 'tab-active' : ''}"
tabindex="0"
on:click={() => (currentView = 'all')}
on:keydown={(e) => e.key === 'Enter' && (currentView = 'all')}>All Linked Items</a
>
<a
role="tab"
class="tab {currentView === 'calendar' ? 'tab-active' : ''}"
tabindex="0"
on:click={() => (currentView = 'calendar')}
on:keydown={(e) => e.key === 'Enter' && (currentView = 'calendar')}>Calendar</a
>
<a
role="tab"
class="tab {currentView === 'map' ? 'tab-active' : ''}"
tabindex="0"
on:click={() => (currentView = 'map')}
on:keydown={(e) => e.key === 'Enter' && (currentView = 'map')}>Map</a
>
</div>
</div>
</div>
{/if}
{#if currentView == 'all'}
{#if adventures.length > 0}
@@ -559,6 +562,11 @@
{/each}
</div>
{/if}
<!-- if none found -->
{#if adventures.length == 0 && transportations.length == 0 && notes.length == 0 && checklists.length == 0}
<NotFound error={undefined} />
{/if}
{/if}
{#if collection.start_date && collection.end_date}