mirror of
https://github.com/seanmorley15/AdventureLog.git
synced 2025-07-18 20:39:36 +02:00
b0e8000cf8
- Updated various headings and text elements to utilize localization functions for better internationalization support. - Simplified gradient styles in headings to enhance readability. - Adjusted adventure and travel statistics sections to reflect localized titles and descriptions. - Enhanced filter options and buttons with localized text for clarity. - Modified Tailwind CSS configuration to include a new color 'dim' for future styling needs.
467 lines
15 KiB
Svelte
467 lines
15 KiB
Svelte
<script lang="ts">
|
|
import { goto } from '$app/navigation';
|
|
import { page } from '$app/stores';
|
|
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';
|
|
import { t } from 'svelte-i18n';
|
|
|
|
import Plus from '~icons/mdi/plus';
|
|
import Filter from '~icons/mdi/filter-variant';
|
|
import Sort from '~icons/mdi/sort';
|
|
import Archive from '~icons/mdi/archive';
|
|
import Share from '~icons/mdi/share-variant';
|
|
import CollectionIcon from '~icons/mdi/folder-multiple';
|
|
|
|
export let data: any;
|
|
console.log('Collections page data:', data);
|
|
|
|
let collections: Collection[] = data.props.adventures || [];
|
|
let sharedCollections: Collection[] = data.props.sharedCollections || [];
|
|
let archivedCollections: Collection[] = data.props.archivedCollections || [];
|
|
|
|
let newType: string = '';
|
|
let resultsPerPage: number = 25;
|
|
let isShowingCollectionModal: boolean = false;
|
|
let activeView: 'owned' | 'shared' | 'archived' = 'owned';
|
|
|
|
let next: string | null = data.props.next || null;
|
|
let previous: string | null = data.props.previous || null;
|
|
let count = data.props.count || 0;
|
|
let totalPages = Math.ceil(count / resultsPerPage);
|
|
let currentPage: number = data.props.currentPage || 1;
|
|
let orderBy = data.props.order_by || 'updated_at';
|
|
let orderDirection = data.props.order_direction || 'asc';
|
|
|
|
let sidebarOpen = false;
|
|
let collectionToEdit: Collection | null = null;
|
|
|
|
$: currentCollections =
|
|
activeView === 'owned'
|
|
? collections
|
|
: activeView === 'shared'
|
|
? sharedCollections
|
|
: activeView === 'archived'
|
|
? archivedCollections
|
|
: [];
|
|
|
|
$: currentCount =
|
|
activeView === 'owned'
|
|
? collections.length
|
|
: activeView === 'shared'
|
|
? sharedCollections.length
|
|
: activeView === 'archived'
|
|
? archivedCollections.length
|
|
: 0;
|
|
|
|
// Optionally, keep count in sync with collections only for owned view
|
|
$: {
|
|
if (activeView === 'owned' && count !== collections.length) {
|
|
count = collections.length;
|
|
}
|
|
}
|
|
|
|
async function goToPage(pageNum: number) {
|
|
const url = new URL($page.url);
|
|
url.searchParams.set('page', pageNum.toString());
|
|
await goto(url.toString(), { invalidateAll: true, replaceState: true });
|
|
if (data.props.adventures) {
|
|
collections = data.props.adventures;
|
|
}
|
|
if (data.props.archivedCollections) {
|
|
archivedCollections = data.props.archivedCollections;
|
|
}
|
|
currentPage = pageNum;
|
|
}
|
|
|
|
async function updateSort(by: string, direction: string) {
|
|
const url = new URL($page.url);
|
|
url.searchParams.set('order_by', by);
|
|
url.searchParams.set('order_direction', direction);
|
|
url.searchParams.set('page', '1'); // Reset to first page when sorting changes
|
|
currentPage = 1;
|
|
await goto(url.toString(), { invalidateAll: true, replaceState: true });
|
|
if (data.props.adventures) {
|
|
collections = data.props.adventures;
|
|
}
|
|
if (data.props.archivedCollections) {
|
|
archivedCollections = data.props.archivedCollections;
|
|
}
|
|
}
|
|
|
|
function deleteCollection(event: CustomEvent<string>) {
|
|
const collectionId = event.detail;
|
|
collections = collections.filter((collection) => collection.id !== collectionId);
|
|
sharedCollections = sharedCollections.filter((collection) => collection.id !== collectionId);
|
|
archivedCollections = archivedCollections.filter(
|
|
(collection) => collection.id !== collectionId
|
|
);
|
|
}
|
|
|
|
function archiveCollection(event: CustomEvent<string>) {
|
|
const collectionId = event.detail;
|
|
console.log('Archiving collection with ID:', collectionId);
|
|
// Find the collection in owned collections
|
|
const collectionToArchive = collections.find((collection) => collection.id === collectionId);
|
|
|
|
if (collectionToArchive) {
|
|
// Remove from owned collections
|
|
collections = collections.filter((collection) => collection.id !== collectionId);
|
|
// Add to archived collections
|
|
archivedCollections = [...archivedCollections, { ...collectionToArchive, is_archived: true }];
|
|
}
|
|
}
|
|
|
|
function unarchiveCollection(event: CustomEvent<string>) {
|
|
const collectionId = event.detail;
|
|
// Find the collection in archived collections
|
|
const collectionToUnarchive = archivedCollections.find(
|
|
(collection) => collection.id === collectionId
|
|
);
|
|
|
|
if (collectionToUnarchive) {
|
|
// Remove from archived collections
|
|
archivedCollections = archivedCollections.filter(
|
|
(collection) => collection.id !== collectionId
|
|
);
|
|
// Add to owned collections
|
|
collections = [...collections, { ...collectionToUnarchive, is_archived: false }];
|
|
}
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
function editCollection(event: CustomEvent<Collection>) {
|
|
collectionToEdit = event.detail;
|
|
isShowingCollectionModal = true;
|
|
}
|
|
|
|
function saveEdit(event: CustomEvent<Collection>) {
|
|
collections = collections.map((adventure) => {
|
|
if (adventure.id === event.detail.id) {
|
|
return event.detail;
|
|
}
|
|
return adventure;
|
|
});
|
|
isShowingCollectionModal = false;
|
|
}
|
|
|
|
function toggleSidebar() {
|
|
sidebarOpen = !sidebarOpen;
|
|
}
|
|
|
|
function switchView(view: 'owned' | 'shared' | 'archived') {
|
|
activeView = view;
|
|
}
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>Collections</title>
|
|
<meta name="description" content="View your adventure collections." />
|
|
</svelte:head>
|
|
|
|
{#if isShowingCollectionModal}
|
|
<CollectionModal
|
|
{collectionToEdit}
|
|
on:close={() => (isShowingCollectionModal = false)}
|
|
on:saveEdit={saveEdit}
|
|
on:save={saveOrCreate}
|
|
/>
|
|
{/if}
|
|
|
|
<div class="min-h-screen bg-gradient-to-br from-base-200 via-base-100 to-base-200">
|
|
<div class="drawer lg:drawer-open">
|
|
<input id="my-drawer" type="checkbox" class="drawer-toggle" bind:checked={sidebarOpen} />
|
|
|
|
<div class="drawer-content">
|
|
<!-- Header Section -->
|
|
<div class="sticky top-0 z-40 bg-base-100/80 backdrop-blur-lg border-b border-base-300">
|
|
<div class="container mx-auto px-6 py-4">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-4">
|
|
<button class="btn btn-ghost btn-square lg:hidden" on:click={toggleSidebar}>
|
|
<Filter class="w-5 h-5" />
|
|
</button>
|
|
<div class="flex items-center gap-3">
|
|
<div class="p-2 bg-primary/10 rounded-xl">
|
|
<CollectionIcon class="w-8 h-8 text-primary" />
|
|
</div>
|
|
<div>
|
|
<h1 class="text-3xl font-bold bg-clip-text text-primary">
|
|
{$t(`adventures.my_collections`)}
|
|
</h1>
|
|
<p class="text-sm text-base-content/60">
|
|
{currentCount}
|
|
{activeView === 'owned'
|
|
? $t('navbar.collections')
|
|
: activeView === 'shared'
|
|
? $t('collection.shared_collections')
|
|
: $t('adventures.archived_collections')}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- View Toggle -->
|
|
<div class="tabs tabs-boxed bg-base-200">
|
|
<button
|
|
class="tab gap-2 {activeView === 'owned' ? 'tab-active' : ''}"
|
|
on:click={() => switchView('owned')}
|
|
>
|
|
<CollectionIcon class="w-4 h-4" />
|
|
<span class="hidden sm:inline">{$t('adventures.my_collections')}</span>
|
|
<div
|
|
class="badge badge-sm {activeView === 'owned' ? 'badge-primary' : 'badge-ghost'}"
|
|
>
|
|
{collections.length}
|
|
</div>
|
|
</button>
|
|
<button
|
|
class="tab gap-2 {activeView === 'shared' ? 'tab-active' : ''}"
|
|
on:click={() => switchView('shared')}
|
|
>
|
|
<Share class="w-4 h-4" />
|
|
<span class="hidden sm:inline">{$t('share.shared')}</span>
|
|
<div
|
|
class="badge badge-sm {activeView === 'shared' ? 'badge-primary' : 'badge-ghost'}"
|
|
>
|
|
{sharedCollections.length}
|
|
</div>
|
|
</button>
|
|
<button
|
|
class="tab gap-2 {activeView === 'archived' ? 'tab-active' : ''}"
|
|
on:click={() => switchView('archived')}
|
|
>
|
|
<Archive class="w-4 h-4" />
|
|
<span class="hidden sm:inline">{$t('adventures.archived')}</span>
|
|
<div
|
|
class="badge badge-sm {activeView === 'archived'
|
|
? 'badge-primary'
|
|
: 'badge-ghost'}"
|
|
>
|
|
{archivedCollections.length}
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Content -->
|
|
<div class="container mx-auto px-6 py-8">
|
|
{#if currentCollections.length === 0}
|
|
<div class="flex flex-col items-center justify-center py-16">
|
|
<div class="p-6 bg-base-200/50 rounded-2xl mb-6">
|
|
{#if activeView === 'owned'}
|
|
<CollectionIcon class="w-16 h-16 text-base-content/30" />
|
|
{:else if activeView === 'shared'}
|
|
<Share class="w-16 h-16 text-base-content/30" />
|
|
{:else}
|
|
<Archive class="w-16 h-16 text-base-content/30" />
|
|
{/if}
|
|
</div>
|
|
<h3 class="text-xl font-semibold text-base-content/70 mb-2">
|
|
{activeView === 'owned'
|
|
? $t('collection.no_collections_yet')
|
|
: activeView === 'shared'
|
|
? $t('collection.no_shared_collections')
|
|
: $t('collection.no_archived_collections')}
|
|
</h3>
|
|
<p class="text-base-content/50 text-center max-w-md">
|
|
{activeView === 'owned'
|
|
? $t('collection.create_first')
|
|
: activeView === 'shared'
|
|
? $t('collection.make_sure_public')
|
|
: $t('collection.archived_appear_here')}
|
|
</p>
|
|
{#if activeView === 'owned'}
|
|
<button
|
|
class="btn btn-primary btn-wide mt-6 gap-2"
|
|
on:click={() => {
|
|
collectionToEdit = null;
|
|
isShowingCollectionModal = true;
|
|
newType = 'visited';
|
|
}}
|
|
>
|
|
<Plus class="w-5 h-5" />
|
|
{$t('collection.create')}
|
|
</button>
|
|
{/if}
|
|
</div>
|
|
{:else}
|
|
<!-- Collections Grid -->
|
|
<div
|
|
class="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-6"
|
|
>
|
|
{#each currentCollections as collection}
|
|
<CollectionCard
|
|
type=""
|
|
{collection}
|
|
on:delete={deleteCollection}
|
|
on:edit={editCollection}
|
|
on:archive={archiveCollection}
|
|
on:unarchive={unarchiveCollection}
|
|
user={data.user}
|
|
/>
|
|
{/each}
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
{#if activeView === 'owned' && (next || previous)}
|
|
<div class="flex justify-center mt-12">
|
|
<div class="join bg-base-100 shadow-lg rounded-2xl p-2">
|
|
{#each Array.from({ length: totalPages }, (_, i) => i + 1) as page}
|
|
<button
|
|
class="join-item btn btn-sm {currentPage === page
|
|
? 'btn-primary'
|
|
: 'btn-ghost'}"
|
|
on:click={() => goToPage(page)}
|
|
>
|
|
{page}
|
|
</button>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sidebar -->
|
|
<div class="drawer-side z-50">
|
|
<label for="my-drawer" class="drawer-overlay"></label>
|
|
<div class="w-80 min-h-full bg-base-100 shadow-2xl">
|
|
<div class="p-6">
|
|
<!-- Sidebar Header -->
|
|
<div class="flex items-center gap-3 mb-8">
|
|
<div class="p-2 bg-primary/10 rounded-lg">
|
|
<Sort class="w-6 h-6 text-primary" />
|
|
</div>
|
|
<h2 class="text-xl font-bold">{$t('adventures.filters_and_sort')}</h2>
|
|
</div>
|
|
|
|
<!-- Sort Form - Updated to use URL navigation -->
|
|
<div class="card bg-base-200/50 p-4">
|
|
<h3 class="font-semibold text-lg mb-4 flex items-center gap-2">
|
|
<Sort class="w-5 h-5" />
|
|
{$t(`adventures.sort`)}
|
|
</h3>
|
|
|
|
<div class="space-y-4">
|
|
<div>
|
|
<!-- svelte-ignore a11y-label-has-associated-control -->
|
|
<label class="label">
|
|
<span class="label-text font-medium">{$t(`adventures.order_direction`)}</span>
|
|
</label>
|
|
<div class="join w-full">
|
|
<button
|
|
class="join-item btn btn-sm flex-1 {orderDirection === 'asc'
|
|
? 'btn-active'
|
|
: ''}"
|
|
on:click={() => updateSort(orderBy, 'asc')}
|
|
>
|
|
{$t(`adventures.ascending`)}
|
|
</button>
|
|
<button
|
|
class="join-item btn btn-sm flex-1 {orderDirection === 'desc'
|
|
? 'btn-active'
|
|
: ''}"
|
|
on:click={() => updateSort(orderBy, 'desc')}
|
|
>
|
|
{$t(`adventures.descending`)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<!-- svelte-ignore a11y-label-has-associated-control -->
|
|
<label class="label">
|
|
<span class="label-text font-medium">{$t('adventures.order_by')}</span>
|
|
</label>
|
|
<div class="space-y-2">
|
|
<label class="label cursor-pointer justify-start gap-3">
|
|
<input
|
|
type="radio"
|
|
name="order_by_radio"
|
|
class="radio radio-primary radio-sm"
|
|
checked={orderBy === 'updated_at'}
|
|
on:change={() => updateSort('updated_at', orderDirection)}
|
|
/>
|
|
<span class="label-text">{$t('adventures.updated')}</span>
|
|
</label>
|
|
<label class="label cursor-pointer justify-start gap-3">
|
|
<input
|
|
type="radio"
|
|
name="order_by_radio"
|
|
class="radio radio-primary radio-sm"
|
|
checked={orderBy === 'start_date'}
|
|
on:change={() => updateSort('start_date', orderDirection)}
|
|
/>
|
|
<span class="label-text">{$t('adventures.start_date')}</span>
|
|
</label>
|
|
<label class="label cursor-pointer justify-start gap-3">
|
|
<input
|
|
type="radio"
|
|
name="order_by_radio"
|
|
class="radio radio-primary radio-sm"
|
|
checked={orderBy === 'name'}
|
|
on:change={() => updateSort('name', orderDirection)}
|
|
/>
|
|
<span class="label-text">{$t('adventures.name')}</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Floating Action Button -->
|
|
{#if activeView === 'owned'}
|
|
<div class="fixed bottom-6 right-6 z-50">
|
|
<div class="dropdown dropdown-top dropdown-end">
|
|
<div
|
|
tabindex="0"
|
|
role="button"
|
|
class="btn btn-primary btn-circle w-16 h-16 shadow-2xl hover:shadow-primary/25 transition-all duration-200"
|
|
>
|
|
<Plus class="w-8 h-8" />
|
|
</div>
|
|
<ul
|
|
class="dropdown-content z-[1] menu p-4 shadow-2xl bg-base-100 rounded-2xl w-64 border border-base-300"
|
|
>
|
|
<div class="text-center mb-4">
|
|
<h3 class="font-bold text-lg">{$t(`adventures.create_new`)}</h3>
|
|
</div>
|
|
<button
|
|
class="btn btn-primary gap-2 w-full"
|
|
on:click={() => {
|
|
collectionToEdit = null;
|
|
isShowingCollectionModal = true;
|
|
newType = 'visited';
|
|
}}
|
|
>
|
|
<CollectionIcon class="w-5 h-5" />
|
|
{$t(`adventures.collection`)}
|
|
</button>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|