mirror of
https://github.com/seanmorley15/AdventureLog.git
synced 2025-07-19 04:49:37 +02:00
feat(collections): enhance collections page with sorting, filtering, and pagination features
- Updated the collections loading logic to include sorting and pagination parameters from the URL. - Refactored the collections page to manage owned, shared, and archived collections with a tabbed interface. - Added sorting functionality to allow users to sort collections by different attributes. - Implemented a sidebar for filtering and sorting options. - Improved the UI for better user experience, including a floating action button for creating new collections. - Added a not found page for collections that do not exist, enhancing error handling.
This commit is contained in:
Sean Morley
parent
7eb96bcc2a
commit
14eb4ca802
23 changed files with 1691 additions and 1251 deletions
|
|
@ -112,7 +112,6 @@
|
|||
location: null,
|
||||
images: [],
|
||||
user_id: null,
|
||||
collection: collection?.id || null,
|
||||
category: {
|
||||
id: '',
|
||||
name: '',
|
||||
|
|
@ -138,7 +137,6 @@
|
|||
location: adventureToEdit?.location || null,
|
||||
images: adventureToEdit?.images || [],
|
||||
user_id: adventureToEdit?.user_id || null,
|
||||
collection: adventureToEdit?.collection || collection?.id || null,
|
||||
visits: adventureToEdit?.visits || [],
|
||||
is_visited: adventureToEdit?.is_visited || false,
|
||||
category: adventureToEdit?.category || {
|
||||
|
|
@ -628,7 +626,7 @@
|
|||
<p class="text-red-500">{wikiError}</p>
|
||||
</div>
|
||||
</div>
|
||||
{#if !adventure?.collection}
|
||||
{#if adventure.collections && adventure.collections.length == 0}
|
||||
<div>
|
||||
<div class="form-control flex items-start mt-1">
|
||||
<label class="label cursor-pointer flex items-start space-x-2">
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
|
||||
<ul
|
||||
tabindex="0"
|
||||
class="dropdown-content z-[1] text-neutral-200 menu p-2 shadow bg-neutral mt-2 rounded-box w-52"
|
||||
class="dropdown-content z-[999] text-neutral-200 menu p-2 shadow bg-neutral mt-2 rounded-box w-52"
|
||||
>
|
||||
<!-- svelte-ignore a11y-missing-attribute -->
|
||||
<!-- svelte-ignore a11y-missing-attribute -->
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
import ShareVariant from '~icons/mdi/share-variant';
|
||||
|
||||
import { goto } from '$app/navigation';
|
||||
import type { Adventure, Collection } from '$lib/types';
|
||||
import type { Adventure, Collection, User } from '$lib/types';
|
||||
import { addToast } from '$lib/toasts';
|
||||
import { t } from 'svelte-i18n';
|
||||
|
||||
|
|
@ -25,6 +25,7 @@
|
|||
|
||||
export let type: String | undefined | null;
|
||||
export let linkedCollectionList: string[] | null = null;
|
||||
export let user: User | null;
|
||||
let isShareModalOpen: boolean = false;
|
||||
|
||||
function editAdventure() {
|
||||
|
|
@ -168,76 +169,78 @@
|
|||
<Launch class="w-4 h-4" />
|
||||
{$t('adventures.open_details')}
|
||||
</button>
|
||||
<div class="dropdown dropdown-end">
|
||||
<button type="button" class="btn btn-square btn-sm btn-base-300">
|
||||
<DotsHorizontal class="w-5 h-5" />
|
||||
</button>
|
||||
<ul
|
||||
class="dropdown-content menu bg-base-100 rounded-box z-[1] w-64 p-2 shadow-xl border border-base-300"
|
||||
>
|
||||
{#if type != 'viewonly'}
|
||||
<li>
|
||||
<button class="flex items-center gap-2" on:click={editAdventure}>
|
||||
<FileDocumentEdit class="w-4 h-4" />
|
||||
{$t('adventures.edit_collection')}
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
class="flex items-center gap-2"
|
||||
on:click={() => (isShareModalOpen = true)}
|
||||
>
|
||||
<ShareVariant class="w-4 h-4" />
|
||||
{$t('adventures.share')}
|
||||
</button>
|
||||
</li>
|
||||
{#if collection.is_archived}
|
||||
{#if user && user.uuid == collection.user_id}
|
||||
<div class="dropdown dropdown-end">
|
||||
<button type="button" class="btn btn-square btn-sm btn-base-300">
|
||||
<DotsHorizontal class="w-5 h-5" />
|
||||
</button>
|
||||
<ul
|
||||
class="dropdown-content menu bg-base-100 rounded-box z-[1] w-64 p-2 shadow-xl border border-base-300"
|
||||
>
|
||||
{#if type != 'viewonly'}
|
||||
<li>
|
||||
<button
|
||||
class="flex items-center gap-2"
|
||||
on:click={() => archiveCollection(false)}
|
||||
>
|
||||
<ArchiveArrowUp class="w-4 h-4" />
|
||||
{$t('adventures.unarchive')}
|
||||
<button class="flex items-center gap-2" on:click={editAdventure}>
|
||||
<FileDocumentEdit class="w-4 h-4" />
|
||||
{$t('adventures.edit_collection')}
|
||||
</button>
|
||||
</li>
|
||||
{:else}
|
||||
<li>
|
||||
<button
|
||||
class="flex items-center gap-2"
|
||||
on:click={() => archiveCollection(true)}
|
||||
on:click={() => (isShareModalOpen = true)}
|
||||
>
|
||||
<ArchiveArrowDown class="w-4 h-4" />
|
||||
{$t('adventures.archive')}
|
||||
<ShareVariant class="w-4 h-4" />
|
||||
{$t('adventures.share')}
|
||||
</button>
|
||||
</li>
|
||||
{#if collection.is_archived}
|
||||
<li>
|
||||
<button
|
||||
class="flex items-center gap-2"
|
||||
on:click={() => archiveCollection(false)}
|
||||
>
|
||||
<ArchiveArrowUp class="w-4 h-4" />
|
||||
{$t('adventures.unarchive')}
|
||||
</button>
|
||||
</li>
|
||||
{:else}
|
||||
<li>
|
||||
<button
|
||||
class="flex items-center gap-2"
|
||||
on:click={() => archiveCollection(true)}
|
||||
>
|
||||
<ArchiveArrowDown class="w-4 h-4" />
|
||||
{$t('adventures.archive')}
|
||||
</button>
|
||||
</li>
|
||||
{/if}
|
||||
<div class="divider my-1"></div>
|
||||
<li>
|
||||
<button
|
||||
id="delete_collection"
|
||||
data-umami-event="Delete Collection"
|
||||
class="text-error flex items-center gap-2"
|
||||
on:click={() => (isWarningModalOpen = true)}
|
||||
>
|
||||
<TrashCan class="w-4 h-4" />
|
||||
{$t('adventures.delete')}
|
||||
</button>
|
||||
</li>
|
||||
{/if}
|
||||
<div class="divider my-1"></div>
|
||||
<li>
|
||||
<button
|
||||
id="delete_collection"
|
||||
data-umami-event="Delete Collection"
|
||||
class="text-error flex items-center gap-2"
|
||||
on:click={() => (isWarningModalOpen = true)}
|
||||
>
|
||||
<TrashCan class="w-4 h-4" />
|
||||
{$t('adventures.delete')}
|
||||
</button>
|
||||
</li>
|
||||
{/if}
|
||||
{#if type == 'viewonly'}
|
||||
<li>
|
||||
<button
|
||||
class="flex items-center gap-2"
|
||||
on:click={() => goto(`/collections/${collection.id}`)}
|
||||
>
|
||||
<Launch class="w-4 h-4" />
|
||||
{$t('adventures.open_details')}
|
||||
</button>
|
||||
</li>
|
||||
{/if}
|
||||
</ul>
|
||||
</div>
|
||||
{#if type == 'viewonly'}
|
||||
<li>
|
||||
<button
|
||||
class="flex items-center gap-2"
|
||||
on:click={() => goto(`/collections/${collection.id}`)}
|
||||
>
|
||||
<Launch class="w-4 h-4" />
|
||||
{$t('adventures.open_details')}
|
||||
</button>
|
||||
</li>
|
||||
{/if}
|
||||
</ul>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -219,6 +219,28 @@
|
|||
{$t('about.close')}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{#if collection.is_public && collection.id}
|
||||
<div class="bg-neutral p-4 mt-2 rounded-md shadow-sm text-neutral-content">
|
||||
<p class=" font-semibold">{$t('adventures.share_collection')}</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<p class="text-card-foreground font-mono">
|
||||
{window.location.origin}/collections/{collection.id}
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
on:click={() => {
|
||||
navigator.clipboard.writeText(
|
||||
`${window.location.origin}/collections/${collection.id}`
|
||||
);
|
||||
}}
|
||||
class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-10 px-4 py-2"
|
||||
>
|
||||
{$t('adventures.copy_link')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -277,7 +277,7 @@
|
|||
{#if data.user}
|
||||
<Avatar user={data.user} />
|
||||
{/if}
|
||||
<div class="dropdown dropdown-bottom dropdown-end">
|
||||
<div class="dropdown dropdown-bottom dropdown-end z-[999]">
|
||||
<div tabindex="0" role="button" class="btn m-1 p-2">
|
||||
<DotsHorizontal class="w-6 h-6" />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -273,7 +273,8 @@
|
|||
"all_linked_items": "Alle verknüpften Elemente",
|
||||
"itinerary": "Route",
|
||||
"joined": "Verbunden",
|
||||
"view_profile": "Profil anzeigen"
|
||||
"view_profile": "Profil anzeigen",
|
||||
"share_collection": "Teilen Sie diese Sammlung!"
|
||||
},
|
||||
"home": {
|
||||
"desc_1": "Entdecken, planen und erkunden Sie mühelos",
|
||||
|
|
@ -513,7 +514,8 @@
|
|||
"social_auth_setup": "Social Authentication Setup",
|
||||
"staff_status": "Personalstatus",
|
||||
"staff_user": "Personalbenutzer",
|
||||
"profile_info_desc": "Aktualisieren Sie Ihre persönlichen Daten und Ihr Profilbild"
|
||||
"profile_info_desc": "Aktualisieren Sie Ihre persönlichen Daten und Ihr Profilbild",
|
||||
"email_verified_error_desc": "Ihre E -Mail konnte nicht überprüft werden. \nBitte versuchen Sie es erneut."
|
||||
},
|
||||
"checklist": {
|
||||
"add_item": "Eintrag hinzufügen",
|
||||
|
|
@ -540,7 +542,8 @@
|
|||
"error_creating_collection": "Fehler beim Erstellen der Sammlung",
|
||||
"error_editing_collection": "Fehler beim Bearbeiten der Sammlung",
|
||||
"new_collection": "Neue Sammlung",
|
||||
"public_collection": "Öffentliche Sammlung"
|
||||
"public_collection": "Öffentliche Sammlung",
|
||||
"manage_collections": "Sammlungen verwalten"
|
||||
},
|
||||
"notes": {
|
||||
"add_a_link": "Fügen Sie einen Link hinzu",
|
||||
|
|
|
|||
|
|
@ -124,6 +124,7 @@
|
|||
"distance": "Distance",
|
||||
"upload_images_here": "Upload images here",
|
||||
"share_adventure": "Share this Adventure!",
|
||||
"share_collection": "Share this Collection!",
|
||||
"copy_link": "Copy Link",
|
||||
"sun_times": "Sun Times",
|
||||
"sunrise": "Sunrise",
|
||||
|
|
@ -404,6 +405,7 @@
|
|||
"token_required": "Token and UID are required for password reset.",
|
||||
"reset_password": "Reset Password",
|
||||
"possible_reset": "If the email address you provided is associated with an account, you will receive an email with instructions to reset your password!",
|
||||
"email_verified_error_desc": "Your email could not be verified. Please try again.",
|
||||
"missing_email": "Please enter an email address",
|
||||
"submit": "Submit",
|
||||
"password_does_not_match": "Passwords do not match",
|
||||
|
|
|
|||
|
|
@ -321,7 +321,8 @@
|
|||
"all_linked_items": "Todos los artículos vinculados",
|
||||
"itinerary": "Itinerario",
|
||||
"joined": "Unido",
|
||||
"view_profile": "Ver perfil"
|
||||
"view_profile": "Ver perfil",
|
||||
"share_collection": "¡Comparte esta colección!"
|
||||
},
|
||||
"worldtravel": {
|
||||
"all": "Todo",
|
||||
|
|
@ -413,7 +414,6 @@
|
|||
"email_set_primary": "¡El correo electrónico se configuró como principal correctamente!",
|
||||
"email_set_primary_error": "Error al configurar el correo electrónico como principal",
|
||||
"make_primary": "Hacer primario",
|
||||
"no_email_set": "No hay correo electrónico configurado",
|
||||
"not_verified": "No verificado",
|
||||
"primary": "Principal",
|
||||
"verified": "Verificado",
|
||||
|
|
@ -433,7 +433,6 @@
|
|||
"reset_session_error": "Por favor cierre sesión y vuelva a iniciarla para actualizar su sesión e inténtelo nuevamente.",
|
||||
"authenticator_code": "Código de autenticación",
|
||||
"email_verified": "¡Correo electrónico verificado exitosamente!",
|
||||
"email_verified_error_desc": "Su correo electrónico no pudo ser verificado. \nPor favor, inténtalo de nuevo.",
|
||||
"email_verified_error": "Error al verificar el correo electrónico",
|
||||
"email_verified_success": "Su correo electrónico ha sido verificado. \nAhora puedes iniciar sesión.",
|
||||
"invalid_code": "Código MFA no válido",
|
||||
|
|
@ -513,7 +512,10 @@
|
|||
"staff_status": "Estado del personal",
|
||||
"staff_user": "Usuario de personal",
|
||||
"license": "Licencia",
|
||||
"all_rights_reserved": "Reservados todos los derechos."
|
||||
"all_rights_reserved": "Reservados todos los derechos.",
|
||||
"email_verified_erorr_desc": "Su correo electrónico no pudo ser verificado. \nPor favor intente de nuevo.",
|
||||
"email_verified_error_desc": "Su correo electrónico no pudo ser verificado. \nPor favor intente de nuevo.",
|
||||
"no_emai_set": "Sin conjunto de correo electrónico"
|
||||
},
|
||||
"checklist": {
|
||||
"add_item": "Añadir elemento",
|
||||
|
|
@ -540,7 +542,8 @@
|
|||
"error_creating_collection": "Error al crear la colección",
|
||||
"error_editing_collection": "Error al editar la colección",
|
||||
"new_collection": "Nueva colección",
|
||||
"public_collection": "Colección pública"
|
||||
"public_collection": "Colección pública",
|
||||
"manage_collections": "Gestionar colecciones"
|
||||
},
|
||||
"notes": {
|
||||
"add_a_link": "Agregar un enlace",
|
||||
|
|
|
|||
|
|
@ -273,7 +273,8 @@
|
|||
"all_linked_items": "Tous les éléments liés",
|
||||
"itinerary": "Itinéraire",
|
||||
"joined": "Joint",
|
||||
"view_profile": "Afficher le profil"
|
||||
"view_profile": "Afficher le profil",
|
||||
"share_collection": "Partagez cette collection!"
|
||||
},
|
||||
"home": {
|
||||
"desc_1": "Découvrez, planifiez et explorez en toute simplicité",
|
||||
|
|
@ -513,7 +514,8 @@
|
|||
"disabled": "Désactivé",
|
||||
"disconnected": "Déconnecté",
|
||||
"email_management": "Gestion des e-mails",
|
||||
"enter_last_name": "Entrez votre nom de famille"
|
||||
"enter_last_name": "Entrez votre nom de famille",
|
||||
"email_verified_error_desc": "Votre e-mail n'a pas pu être vérifié. \nVeuillez réessayer."
|
||||
},
|
||||
"checklist": {
|
||||
"add_item": "Ajouter un élément",
|
||||
|
|
@ -540,7 +542,8 @@
|
|||
"error_creating_collection": "Erreur lors de la création de la collection",
|
||||
"error_editing_collection": "Erreur lors de la modification de la collection",
|
||||
"new_collection": "Nouvelle collection",
|
||||
"public_collection": "Collection publique"
|
||||
"public_collection": "Collection publique",
|
||||
"manage_collections": "Gérer les collections"
|
||||
},
|
||||
"notes": {
|
||||
"add_a_link": "Ajouter un lien",
|
||||
|
|
|
|||
|
|
@ -273,7 +273,8 @@
|
|||
"all_linked_items": "Tutti gli elementi collegati",
|
||||
"itinerary": "Itinerario",
|
||||
"joined": "Partecipato",
|
||||
"view_profile": "Visualizza il profilo"
|
||||
"view_profile": "Visualizza il profilo",
|
||||
"share_collection": "Condividi questa collezione!"
|
||||
},
|
||||
"home": {
|
||||
"desc_1": "Scopri, pianifica ed esplora con facilità",
|
||||
|
|
@ -513,7 +514,8 @@
|
|||
"social_auth_setup": "Setup di autenticazione sociale",
|
||||
"staff_status": "Stato del personale",
|
||||
"staff_user": "Utente del personale",
|
||||
"password_auth": "Autenticazione della password"
|
||||
"password_auth": "Autenticazione della password",
|
||||
"email_verified_error_desc": "La tua email non poteva essere verificata. \nPer favore riprova."
|
||||
},
|
||||
"checklist": {
|
||||
"add_item": "Aggiungi elemento",
|
||||
|
|
@ -540,7 +542,8 @@
|
|||
"collection_created": "Collezione creata con successo!",
|
||||
"collection_edit_success": "Collezione modificata con successo!",
|
||||
"create": "Creare",
|
||||
"public_collection": "Collezione pubblica"
|
||||
"public_collection": "Collezione pubblica",
|
||||
"manage_collections": "Gestisci collezioni"
|
||||
},
|
||||
"notes": {
|
||||
"add_a_link": "Aggiungi un collegamento",
|
||||
|
|
|
|||
|
|
@ -273,7 +273,8 @@
|
|||
"all_linked_items": "모든 링크 된 항목",
|
||||
"itinerary": "여정",
|
||||
"joined": "가입",
|
||||
"view_profile": "프로필을 봅니다"
|
||||
"view_profile": "프로필을 봅니다",
|
||||
"share_collection": "이 컬렉션을 공유하십시오!"
|
||||
},
|
||||
"auth": {
|
||||
"both_passwords_required": "두 암호 모두 필요합니다",
|
||||
|
|
@ -336,7 +337,8 @@
|
|||
"error_creating_collection": "컬렉션 생성 오류",
|
||||
"error_editing_collection": "컬렉션 편집 오류",
|
||||
"new_collection": "새로운 컬렉션",
|
||||
"public_collection": "공개 컬렉션"
|
||||
"public_collection": "공개 컬렉션",
|
||||
"manage_collections": "컬렉션을 관리합니다"
|
||||
},
|
||||
"dashboard": {
|
||||
"add_some": "다음 모험을 계획해 보는게 어떨까요? 아래 버튼을 클릭하여 새로운 모험을 추가할 수 있습니다.",
|
||||
|
|
@ -618,7 +620,8 @@
|
|||
"social_auth_desc_1": "소셜 로그인 옵션 및 비밀번호 설정을 관리합니다",
|
||||
"social_auth_setup": "소셜 인증 설정",
|
||||
"staff_status": "직원 상태",
|
||||
"staff_user": "직원 사용자"
|
||||
"staff_user": "직원 사용자",
|
||||
"email_verified_error_desc": "귀하의 이메일을 확인할 수 없습니다. \n다시 시도하십시오."
|
||||
},
|
||||
"share": {
|
||||
"go_to_settings": "설정으로 이동",
|
||||
|
|
|
|||
|
|
@ -273,7 +273,8 @@
|
|||
"all_linked_items": "Alle gekoppelde items",
|
||||
"itinerary": "Routebeschrijving",
|
||||
"joined": "Samengevoegd",
|
||||
"view_profile": "Bekijk profiel"
|
||||
"view_profile": "Bekijk profiel",
|
||||
"share_collection": "Deel deze collectie!"
|
||||
},
|
||||
"home": {
|
||||
"desc_1": "Ontdek, plan en verken met gemak",
|
||||
|
|
@ -513,7 +514,8 @@
|
|||
"social_auth_setup": "Sociale authenticatie -opstelling",
|
||||
"staff_status": "Status",
|
||||
"staff_user": "Personeelsgebruiker",
|
||||
"connected": "Aangesloten"
|
||||
"connected": "Aangesloten",
|
||||
"email_verified_error_desc": "Uw e -mail kan niet worden geverifieerd. \nProbeer het opnieuw."
|
||||
},
|
||||
"checklist": {
|
||||
"add_item": "Artikel toevoegen",
|
||||
|
|
@ -540,7 +542,8 @@
|
|||
"error_creating_collection": "Fout bij aanmaken collectie",
|
||||
"error_editing_collection": "Fout bij het bewerken van de collectie",
|
||||
"new_collection": "Nieuwe collectie",
|
||||
"public_collection": "Openbare collectie"
|
||||
"public_collection": "Openbare collectie",
|
||||
"manage_collections": "Beheer collecties"
|
||||
},
|
||||
"notes": {
|
||||
"add_a_link": "Voeg een link toe",
|
||||
|
|
|
|||
|
|
@ -321,7 +321,8 @@
|
|||
"all_linked_items": "Alle koblede varer",
|
||||
"itinerary": "Reiserute",
|
||||
"joined": "Ble med",
|
||||
"view_profile": "Vis profil"
|
||||
"view_profile": "Vis profil",
|
||||
"share_collection": "Del denne samlingen!"
|
||||
},
|
||||
"worldtravel": {
|
||||
"country_list": "Liste over land",
|
||||
|
|
@ -513,7 +514,8 @@
|
|||
"social_auth_desc_1": "Administrer sosiale påloggingsalternativer og passordinnstillinger",
|
||||
"social_auth_setup": "Sosial autentiseringsoppsett",
|
||||
"staff_status": "Personalstatus",
|
||||
"staff_user": "Personalbruker"
|
||||
"staff_user": "Personalbruker",
|
||||
"email_verified_error_desc": "E -posten din kunne ikke bekreftes. \nVennligst prøv igjen."
|
||||
},
|
||||
"collection": {
|
||||
"collection_created": "Samling opprettet!",
|
||||
|
|
@ -523,7 +525,8 @@
|
|||
"collection_edit_success": "Samling redigert!",
|
||||
"error_editing_collection": "Feil ved redigering av samling",
|
||||
"edit_collection": "Rediger samling",
|
||||
"public_collection": "Offentlig samling"
|
||||
"public_collection": "Offentlig samling",
|
||||
"manage_collections": "Administrer samlinger"
|
||||
},
|
||||
"notes": {
|
||||
"note_deleted": "Notat slettet!",
|
||||
|
|
|
|||
|
|
@ -321,7 +321,8 @@
|
|||
"all_linked_items": "Wszystkie połączone elementy",
|
||||
"itinerary": "Trasa",
|
||||
"joined": "Dołączył",
|
||||
"view_profile": "Zobacz profil"
|
||||
"view_profile": "Zobacz profil",
|
||||
"share_collection": "Udostępnij tę kolekcję!"
|
||||
},
|
||||
"worldtravel": {
|
||||
"country_list": "Lista krajów",
|
||||
|
|
@ -513,7 +514,8 @@
|
|||
"social_auth_desc_1": "Zarządzaj opcjami logowania społecznościowego i ustawieniami haseł",
|
||||
"social_auth_setup": "Konfiguracja uwierzytelniania społecznego",
|
||||
"staff_status": "Status personelu",
|
||||
"staff_user": "Użytkownik personelu"
|
||||
"staff_user": "Użytkownik personelu",
|
||||
"email_verified_error_desc": "Twój e -mail nie można zweryfikować. \nSpróbuj ponownie."
|
||||
},
|
||||
"collection": {
|
||||
"collection_created": "Kolekcja została pomyślnie utworzona!",
|
||||
|
|
@ -523,7 +525,8 @@
|
|||
"collection_edit_success": "Kolekcja została pomyślnie edytowana!",
|
||||
"error_editing_collection": "Błąd podczas edytowania kolekcji",
|
||||
"edit_collection": "Edytuj kolekcję",
|
||||
"public_collection": "Kolekcja publiczna"
|
||||
"public_collection": "Kolekcja publiczna",
|
||||
"manage_collections": "Zarządzaj kolekcjami"
|
||||
},
|
||||
"notes": {
|
||||
"note_deleted": "Notatka została pomyślnie usunięta!",
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -273,7 +273,8 @@
|
|||
"all_linked_items": "Alla länkade objekt",
|
||||
"itinerary": "Resväg",
|
||||
"joined": "Gick med i",
|
||||
"view_profile": "Visa profil"
|
||||
"view_profile": "Visa profil",
|
||||
"share_collection": "Dela denna samling!"
|
||||
},
|
||||
"home": {
|
||||
"desc_1": "Upptäck, planera och utforska med lätthet",
|
||||
|
|
@ -513,7 +514,8 @@
|
|||
"social_auth_desc_1": "Hantera sociala inloggningsalternativ och lösenordsinställningar",
|
||||
"social_auth_setup": "Social autentiseringsinställning",
|
||||
"staff_status": "Personalstatus",
|
||||
"staff_user": "Personalanvändare"
|
||||
"staff_user": "Personalanvändare",
|
||||
"email_verified_error_desc": "Ditt e -postmeddelande kunde inte verifieras. \nFörsök igen."
|
||||
},
|
||||
"checklist": {
|
||||
"add_item": "Lägg till objekt",
|
||||
|
|
@ -540,7 +542,8 @@
|
|||
"error_creating_collection": "Det gick inte att skapa samlingen",
|
||||
"error_editing_collection": "Ett fel uppstod vid redigering av samling",
|
||||
"new_collection": "Ny samling",
|
||||
"public_collection": "Offentlig samling"
|
||||
"public_collection": "Offentlig samling",
|
||||
"manage_collections": "Hantera samlingar"
|
||||
},
|
||||
"notes": {
|
||||
"add_a_link": "Lägg till en länk",
|
||||
|
|
|
|||
|
|
@ -321,7 +321,8 @@
|
|||
"all_linked_items": "所有链接的项目",
|
||||
"itinerary": "行程",
|
||||
"joined": "加入",
|
||||
"view_profile": "查看个人资料"
|
||||
"view_profile": "查看个人资料",
|
||||
"share_collection": "分享这个收藏！"
|
||||
},
|
||||
"auth": {
|
||||
"forgot_password": "忘记密码？",
|
||||
|
|
@ -513,7 +514,8 @@
|
|||
"staff_user": "员工用户",
|
||||
"quick_actions": "快速动作",
|
||||
"region_updates": "区域更新",
|
||||
"region_updates_desc": "更新访问了地区和城市"
|
||||
"region_updates_desc": "更新访问了地区和城市",
|
||||
"email_verified_error_desc": "无法验证您的电子邮件。\n请重试。"
|
||||
},
|
||||
"checklist": {
|
||||
"add_item": "添加项目",
|
||||
|
|
@ -540,7 +542,8 @@
|
|||
"error_creating_collection": "创建合集时出错",
|
||||
"error_editing_collection": "编辑合集时出错",
|
||||
"new_collection": "新建合集",
|
||||
"public_collection": "公开合集"
|
||||
"public_collection": "公开合集",
|
||||
"manage_collections": "管理收藏"
|
||||
},
|
||||
"notes": {
|
||||
"add_a_link": "添加链接",
|
||||
|
|
|
|||
|
|
@ -11,9 +11,17 @@
|
|||
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 MapMarker from '~icons/mdi/map-marker';
|
||||
import Eye from '~icons/mdi/eye';
|
||||
import EyeOff from '~icons/mdi/eye-off';
|
||||
import Calendar from '~icons/mdi/calendar';
|
||||
import Star from '~icons/mdi/star';
|
||||
import Tag from '~icons/mdi/tag';
|
||||
import Compass from '~icons/mdi/compass';
|
||||
|
||||
export let data: any;
|
||||
console.log(data);
|
||||
|
||||
let adventures: Adventure[] = data.props.adventures || [];
|
||||
|
||||
|
|
@ -27,16 +35,17 @@
|
|||
};
|
||||
|
||||
let resultsPerPage: number = 25;
|
||||
|
||||
let count = data.props.count || 0;
|
||||
|
||||
let totalPages = Math.ceil(count / resultsPerPage);
|
||||
let currentPage: number = 1;
|
||||
|
||||
let is_category_modal_open: boolean = false;
|
||||
|
||||
let typeString: string = '';
|
||||
let adventureToEdit: Adventure | null = null;
|
||||
let isAdventureModalOpen: boolean = false;
|
||||
let sidebarOpen = false;
|
||||
|
||||
// Reactive statements
|
||||
$: {
|
||||
if (typeof window !== 'undefined') {
|
||||
let url = new URL(window.location.href);
|
||||
|
|
@ -49,9 +58,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
// sets typeString if present in the URL
|
||||
$: {
|
||||
// check to make sure its running on the client side
|
||||
if (typeof window !== 'undefined') {
|
||||
let url = new URL(window.location.href);
|
||||
let types = url.searchParams.get('types');
|
||||
|
|
@ -61,24 +68,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
function handleChangePage(pageNumber: number) {
|
||||
// let query = new URLSearchParams($page.url.searchParams.toString());
|
||||
|
||||
// query.set('page', pageNumber.toString());
|
||||
|
||||
// console.log(query.toString());
|
||||
currentPage = pageNumber;
|
||||
|
||||
let url = new URL(window.location.href);
|
||||
url.searchParams.set('page', pageNumber.toString());
|
||||
adventures = [];
|
||||
adventures = data.props.adventures;
|
||||
|
||||
goto(url.toString(), { invalidateAll: true, replaceState: true });
|
||||
|
||||
// goto(`?${query.toString()}`, { invalidateAll: true });
|
||||
}
|
||||
|
||||
$: {
|
||||
let url = new URL($page.url);
|
||||
let page = url.searchParams.get('page');
|
||||
|
|
@ -128,14 +117,19 @@
|
|||
}
|
||||
}
|
||||
|
||||
let adventureToEdit: Adventure | null = null;
|
||||
let isAdventureModalOpen: boolean = false;
|
||||
function handleChangePage(pageNumber: number) {
|
||||
currentPage = pageNumber;
|
||||
let url = new URL(window.location.href);
|
||||
url.searchParams.set('page', pageNumber.toString());
|
||||
adventures = [];
|
||||
adventures = data.props.adventures;
|
||||
goto(url.toString(), { invalidateAll: true, replaceState: true });
|
||||
}
|
||||
|
||||
function deleteAdventure(event: CustomEvent<string>) {
|
||||
adventures = adventures.filter((adventure) => adventure.id !== event.detail);
|
||||
}
|
||||
|
||||
// function that save changes to an existing adventure or creates a new one if it doesn't exist
|
||||
function saveOrCreate(event: CustomEvent<Adventure>) {
|
||||
if (adventures.find((adventure) => adventure.id === event.detail.id)) {
|
||||
adventures = adventures.map((adventure) => {
|
||||
|
|
@ -155,13 +149,24 @@
|
|||
isAdventureModalOpen = true;
|
||||
}
|
||||
|
||||
let sidebarOpen = false;
|
||||
|
||||
function toggleSidebar() {
|
||||
sidebarOpen = !sidebarOpen;
|
||||
}
|
||||
|
||||
function getVisitedCount() {
|
||||
return adventures.filter((a) => a.is_visited).length;
|
||||
}
|
||||
|
||||
function getPlannedCount() {
|
||||
return adventures.filter((a) => !a.is_visited).length;
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{$t('navbar.adventures')}</title>
|
||||
<meta name="description" content="View your completed and planned adventures." />
|
||||
</svelte:head>
|
||||
|
||||
{#if isAdventureModalOpen}
|
||||
<AdventureModal
|
||||
{adventureToEdit}
|
||||
|
|
@ -174,212 +179,336 @@
|
|||
<CategoryModal on:close={() => (is_category_modal_open = false)} />
|
||||
{/if}
|
||||
|
||||
<div class="fixed bottom-4 right-4 z-[999]">
|
||||
<div class="flex flex-row items-center justify-center gap-4">
|
||||
<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">
|
||||
<Compass class="w-8 h-8 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<h1
|
||||
class="text-3xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent"
|
||||
>
|
||||
{$t('navbar.my_adventures')}
|
||||
</h1>
|
||||
<p class="text-sm text-base-content/60">
|
||||
{count} adventures • {getVisitedCount()} visited • {getPlannedCount()} planned
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Stats -->
|
||||
<div class="hidden md:flex items-center gap-3">
|
||||
<div class="stats stats-horizontal bg-base-200/50 border border-base-300/50">
|
||||
<div class="stat py-2 px-4">
|
||||
<div class="stat-figure text-primary">
|
||||
<Eye class="w-5 h-5" />
|
||||
</div>
|
||||
<div class="stat-title text-xs">Visited</div>
|
||||
<div class="stat-value text-lg">{getVisitedCount()}</div>
|
||||
</div>
|
||||
<div class="stat py-2 px-4">
|
||||
<div class="stat-figure text-secondary">
|
||||
<Calendar class="w-5 h-5" />
|
||||
</div>
|
||||
<div class="stat-title text-xs">Planned</div>
|
||||
<div class="stat-value text-lg">{getPlannedCount()}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="container mx-auto px-6 py-8">
|
||||
{#if adventures.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">
|
||||
<Compass class="w-16 h-16 text-base-content/30" />
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold text-base-content/70 mb-2">No adventures yet</h3>
|
||||
<p class="text-base-content/50 text-center max-w-md">
|
||||
Start documenting your adventures and planning new ones. Every journey has a story
|
||||
worth telling.
|
||||
</p>
|
||||
<button
|
||||
class="btn btn-primary btn-wide mt-6 gap-2"
|
||||
on:click={() => {
|
||||
adventureToEdit = null;
|
||||
isAdventureModalOpen = true;
|
||||
}}
|
||||
>
|
||||
<Plus class="w-5 h-5" />
|
||||
Create Adventure
|
||||
</button>
|
||||
</div>
|
||||
{:else}
|
||||
<!-- Adventures 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 adventures as adventure}
|
||||
<AdventureCard
|
||||
user={data.user}
|
||||
{adventure}
|
||||
on:delete={deleteAdventure}
|
||||
on:edit={editAdventure}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
{#if totalPages > 1}
|
||||
<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={() => handleChangePage(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">
|
||||
<Filter class="w-6 h-6 text-primary" />
|
||||
</div>
|
||||
<h2 class="text-xl font-bold">Filters & Sort</h2>
|
||||
</div>
|
||||
|
||||
<!-- Filters Form -->
|
||||
<form method="get" class="space-y-6">
|
||||
<!-- Category Filter -->
|
||||
<div class="card bg-base-200/50 p-4">
|
||||
<h3 class="font-semibold text-lg mb-4 flex items-center gap-2">
|
||||
<Tag class="w-5 h-5" />
|
||||
Categories
|
||||
</h3>
|
||||
<CategoryFilterDropdown bind:types={typeString} />
|
||||
<button
|
||||
type="button"
|
||||
on:click={() => (is_category_modal_open = true)}
|
||||
class="btn btn-outline btn-sm w-full mt-3 gap-2"
|
||||
>
|
||||
<Tag class="w-4 h-4" />
|
||||
{$t('categories.manage_categories')}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Sort Options -->
|
||||
<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>
|
||||
<label class="label">
|
||||
<span class="label-text font-medium">{$t('adventures.order_direction')}</span>
|
||||
</label>
|
||||
<div class="join w-full">
|
||||
<input
|
||||
class="join-item btn btn-sm flex-1"
|
||||
type="radio"
|
||||
name="order_direction"
|
||||
id="asc"
|
||||
value="asc"
|
||||
aria-label={$t('adventures.ascending')}
|
||||
checked={currentSort.order === 'asc'}
|
||||
/>
|
||||
<input
|
||||
class="join-item btn btn-sm flex-1"
|
||||
type="radio"
|
||||
name="order_direction"
|
||||
id="desc"
|
||||
value="desc"
|
||||
aria-label={$t('adventures.descending')}
|
||||
checked={currentSort.order === 'desc'}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="label">
|
||||
<span class="label-text font-medium">{$t('adventures.order_by')}</span>
|
||||
</label>
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<label
|
||||
class="label cursor-pointer justify-start gap-2 p-2 rounded-lg hover:bg-base-300/50"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="order_by"
|
||||
value="updated_at"
|
||||
class="radio radio-primary radio-sm"
|
||||
checked={currentSort.order_by === 'updated_at'}
|
||||
/>
|
||||
<span class="label-text text-sm">{$t('adventures.updated')}</span>
|
||||
</label>
|
||||
<label
|
||||
class="label cursor-pointer justify-start gap-2 p-2 rounded-lg hover:bg-base-300/50"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="order_by"
|
||||
value="name"
|
||||
class="radio radio-primary radio-sm"
|
||||
checked={currentSort.order_by === 'name'}
|
||||
/>
|
||||
<span class="label-text text-sm">{$t('adventures.name')}</span>
|
||||
</label>
|
||||
<label
|
||||
class="label cursor-pointer justify-start gap-2 p-2 rounded-lg hover:bg-base-300/50"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="order_by"
|
||||
value="date"
|
||||
class="radio radio-primary radio-sm"
|
||||
checked={currentSort.order_by === 'date'}
|
||||
/>
|
||||
<span class="label-text text-sm">{$t('adventures.date')}</span>
|
||||
</label>
|
||||
<label
|
||||
class="label cursor-pointer justify-start gap-2 p-2 rounded-lg hover:bg-base-300/50"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="order_by"
|
||||
value="rating"
|
||||
class="radio radio-primary radio-sm"
|
||||
checked={currentSort.order_by === 'rating'}
|
||||
/>
|
||||
<span class="label-text text-sm">{$t('adventures.rating')}</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Visit Status Filter -->
|
||||
<div class="card bg-base-200/50 p-4">
|
||||
<h3 class="font-semibold text-lg mb-4 flex items-center gap-2">
|
||||
<Eye class="w-5 h-5" />
|
||||
{$t('adventures.visited')}
|
||||
</h3>
|
||||
<div class="join w-full">
|
||||
<input
|
||||
class="join-item btn btn-sm flex-1"
|
||||
type="radio"
|
||||
name="is_visited"
|
||||
id="all"
|
||||
value="all"
|
||||
aria-label={$t('adventures.all')}
|
||||
checked={currentSort.is_visited === 'all'}
|
||||
/>
|
||||
<input
|
||||
class="join-item btn btn-sm flex-1"
|
||||
type="radio"
|
||||
name="is_visited"
|
||||
id="true"
|
||||
value="true"
|
||||
aria-label={$t('adventures.visited')}
|
||||
checked={currentSort.is_visited === 'true'}
|
||||
/>
|
||||
<input
|
||||
class="join-item btn btn-sm flex-1"
|
||||
type="radio"
|
||||
name="is_visited"
|
||||
id="false"
|
||||
value="false"
|
||||
aria-label={$t('adventures.not_visited')}
|
||||
checked={currentSort.is_visited === 'false'}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sources Filter -->
|
||||
<div class="card bg-base-200/50 p-4">
|
||||
<h3 class="font-semibold text-lg mb-4 flex items-center gap-2">
|
||||
<MapMarker class="w-5 h-5" />
|
||||
{$t('adventures.sources')}
|
||||
</h3>
|
||||
<label class="label cursor-pointer justify-start gap-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="include_collections"
|
||||
id="include_collections"
|
||||
class="checkbox checkbox-primary"
|
||||
checked={currentSort.includeCollections}
|
||||
/>
|
||||
<span class="label-text">{$t('adventures.collection_adventures')}</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary w-full gap-2">
|
||||
<Filter class="w-4 h-4" />
|
||||
{$t('adventures.filter')}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Floating Action Button -->
|
||||
<div class="fixed bottom-6 right-6 z-50">
|
||||
<div class="dropdown dropdown-top dropdown-end">
|
||||
<div tabindex="0" role="button" class="btn m-1 size-16 btn-primary">
|
||||
<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>
|
||||
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
|
||||
<ul
|
||||
tabindex="0"
|
||||
class="dropdown-content z-[1] menu p-4 shadow bg-base-300 text-base-content rounded-box w-52 gap-4"
|
||||
class="dropdown-content z-[1] menu p-4 shadow-2xl bg-base-100 rounded-2xl w-64 border border-base-300"
|
||||
>
|
||||
<p class="text-center font-bold text-lg">{$t('adventures.create_new')}</p>
|
||||
<div class="text-center mb-4">
|
||||
<h3 class="font-bold text-lg">{$t('adventures.create_new')}</h3>
|
||||
<p class="text-sm text-base-content/60">Document your journey</p>
|
||||
</div>
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
class="btn btn-primary gap-2 w-full"
|
||||
on:click={() => {
|
||||
isAdventureModalOpen = true;
|
||||
adventureToEdit = null;
|
||||
}}
|
||||
>
|
||||
{$t('adventures.adventure')}</button
|
||||
>
|
||||
|
||||
<!-- <button
|
||||
class="btn btn-primary"
|
||||
on:click={() => (isShowingNewTrip = true)}>Trip Planner</button
|
||||
> -->
|
||||
<Compass class="w-5 h-5" />
|
||||
{$t('adventures.adventure')}
|
||||
</button>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="drawer lg:drawer-open">
|
||||
<input id="my-drawer" type="checkbox" class="drawer-toggle" bind:checked={sidebarOpen} />
|
||||
<div class="drawer-content">
|
||||
<!-- Page content -->
|
||||
<h1 class="text-center font-bold text-4xl mb-2">{$t('navbar.my_adventures')}</h1>
|
||||
<p class="text-center">{count} {$t('adventures.count_txt')}</p>
|
||||
{#if adventures.length === 0}
|
||||
<NotFound error={undefined} />
|
||||
{/if}
|
||||
<div class="p-4">
|
||||
<button
|
||||
class="btn btn-primary drawer-button lg:hidden mb-4 fixed bottom-0 left-0 ml-2 z-[999]"
|
||||
on:click={toggleSidebar}
|
||||
>
|
||||
{sidebarOpen ? $t(`adventures.close_filters`) : $t(`adventures.open_filters`)}
|
||||
</button>
|
||||
|
||||
<div class="flex flex-wrap gap-4 mr-4 justify-center content-center">
|
||||
{#each adventures as adventure}
|
||||
<AdventureCard
|
||||
user={data.user}
|
||||
{adventure}
|
||||
on:delete={deleteAdventure}
|
||||
on:edit={editAdventure}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<div class="join flex items-center justify-center mt-4">
|
||||
{#if totalPages > 1}
|
||||
<div class="join">
|
||||
{#each Array.from({ length: totalPages }, (_, i) => i + 1) as page}
|
||||
{#if currentPage != page}
|
||||
<button class="join-item btn btn-lg" on:click={() => handleChangePage(page)}
|
||||
>{page}</button
|
||||
>
|
||||
{:else}
|
||||
<button class="join-item btn btn-lg btn-active">{page}</button>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="drawer-side">
|
||||
<label for="my-drawer" class="drawer-overlay"></label>
|
||||
|
||||
<ul class="menu p-4 w-80 h-full bg-base-200 text-base-content rounded-lg">
|
||||
<!-- Sidebar content here -->
|
||||
<div class="form-control">
|
||||
<!-- <h3 class="text-center font-bold text-lg mb-4">Adventure Types</h3> -->
|
||||
<form method="get">
|
||||
<CategoryFilterDropdown bind:types={typeString} />
|
||||
<button
|
||||
on:click={() => (is_category_modal_open = true)}
|
||||
class="btn btn-neutral btn-sm min-w-full">{$t('categories.manage_categories')}</button
|
||||
>
|
||||
<div class="divider"></div>
|
||||
<h3 class="text-center font-bold text-lg mb-4">{$t('adventures.sort')}</h3>
|
||||
<p class="text-lg font-semibold mb-2">{$t('adventures.order_direction')}</p>
|
||||
<div class="join">
|
||||
<input
|
||||
class="join-item btn btn-neutral"
|
||||
type="radio"
|
||||
name="order_direction"
|
||||
id="asc"
|
||||
value="asc"
|
||||
aria-label={$t('adventures.ascending')}
|
||||
checked={currentSort.order === 'asc'}
|
||||
/>
|
||||
<input
|
||||
class="join-item btn btn-neutral"
|
||||
type="radio"
|
||||
name="order_direction"
|
||||
id="desc"
|
||||
value="desc"
|
||||
aria-label={$t('adventures.descending')}
|
||||
checked={currentSort.order === 'desc'}
|
||||
/>
|
||||
</div>
|
||||
<br />
|
||||
<p class="text-lg font-semibold mt-2 mb-2">{$t('adventures.order_by')}</p>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<input
|
||||
class="btn btn-neutral text-wrap"
|
||||
type="radio"
|
||||
name="order_by"
|
||||
id="updated_at"
|
||||
value="updated_at"
|
||||
aria-label={$t('adventures.updated')}
|
||||
checked={currentSort.order_by === 'updated_at'}
|
||||
/>
|
||||
<input
|
||||
class="btn btn-neutral text-wrap"
|
||||
type="radio"
|
||||
name="order_by"
|
||||
id="name"
|
||||
aria-label={$t('adventures.name')}
|
||||
value="name"
|
||||
checked={currentSort.order_by === 'name'}
|
||||
/>
|
||||
<input
|
||||
class="btn btn-neutral text-wrap"
|
||||
type="radio"
|
||||
value="date"
|
||||
name="order_by"
|
||||
id="date"
|
||||
aria-label={$t('adventures.date')}
|
||||
checked={currentSort.order_by === 'date'}
|
||||
/>
|
||||
<input
|
||||
class="btn btn-neutral text-wrap"
|
||||
type="radio"
|
||||
name="order_by"
|
||||
id="rating"
|
||||
aria-label={$t('adventures.rating')}
|
||||
value="rating"
|
||||
checked={currentSort.order_by === 'rating'}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- is visited true false or all -->
|
||||
<p class="text-lg font-semibold mt-2 mb-2">{$t('adventures.visited')}</p>
|
||||
<div class="join">
|
||||
<input
|
||||
class="join-item btn btn-neutral"
|
||||
type="radio"
|
||||
name="is_visited"
|
||||
id="all"
|
||||
value="all"
|
||||
aria-label={$t('adventures.all')}
|
||||
checked={currentSort.is_visited === 'all'}
|
||||
/>
|
||||
<input
|
||||
class="join-item btn btn-neutral"
|
||||
type="radio"
|
||||
name="is_visited"
|
||||
id="true"
|
||||
value="true"
|
||||
aria-label={$t('adventures.visited')}
|
||||
checked={currentSort.is_visited === 'true'}
|
||||
/>
|
||||
<input
|
||||
class="join-item btn btn-neutral"
|
||||
type="radio"
|
||||
name="is_visited"
|
||||
id="false"
|
||||
value="false"
|
||||
aria-label={$t('adventures.not_visited')}
|
||||
checked={currentSort.is_visited === 'false'}
|
||||
/>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<div class="form-control">
|
||||
<p class="text-lg font-semibold mb-2">{$t('adventures.sources')}</p>
|
||||
<label class="label cursor-pointer">
|
||||
<span class="label-text">{$t('adventures.collection_adventures')}</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="include_collections"
|
||||
id="include_collections"
|
||||
class="checkbox checkbox-primary"
|
||||
checked={currentSort.includeCollections}
|
||||
/>
|
||||
</label>
|
||||
<button type="submit" class="btn btn-success mt-4">{$t('adventures.filter')}</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<svelte:head>
|
||||
<title>{$t('navbar.adventures')}</title>
|
||||
<meta name="description" content="View your completed and planned adventures." />
|
||||
</svelte:head>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import type { PageServerLoad } from './$types';
|
|||
const PUBLIC_SERVER_URL = process.env['PUBLIC_SERVER_URL'];
|
||||
import type { Adventure, Collection } from '$lib/types';
|
||||
|
||||
import type { Actions, RequestEvent } from '@sveltejs/kit';
|
||||
import type { Actions } from '@sveltejs/kit';
|
||||
import { fetchCSRFToken } from '$lib/index.server';
|
||||
import { checkLink } from '$lib';
|
||||
|
||||
|
|
@ -16,16 +16,27 @@ export const load = (async (event) => {
|
|||
let next = null;
|
||||
let previous = null;
|
||||
let count = 0;
|
||||
let adventures: Adventure[] = [];
|
||||
let collections: Adventure[] = [];
|
||||
let sessionId = event.cookies.get('sessionid');
|
||||
let initialFetch = await fetch(`${serverEndpoint}/api/collections/?order_by=updated_at`, {
|
||||
|
||||
// Get sorting parameters from URL
|
||||
const order_by = event.url.searchParams.get('order_by') || 'updated_at';
|
||||
const order_direction = event.url.searchParams.get('order_direction') || 'desc';
|
||||
const page = event.url.searchParams.get('page') || '1';
|
||||
|
||||
// Build API URL with parameters
|
||||
let apiUrl = `${serverEndpoint}/api/collections/?order_by=${order_by}&order_direction=${order_direction}&page=${page}`;
|
||||
|
||||
console.log('Fetching collections from:', apiUrl);
|
||||
|
||||
let initialFetch = await fetch(apiUrl, {
|
||||
headers: {
|
||||
Cookie: `sessionid=${sessionId}`
|
||||
},
|
||||
credentials: 'include'
|
||||
});
|
||||
if (!initialFetch.ok) {
|
||||
console.error('Failed to fetch visited adventures');
|
||||
console.error('Failed to fetch collections');
|
||||
return redirect(302, '/login');
|
||||
} else {
|
||||
let res = await initialFetch.json();
|
||||
|
|
@ -33,15 +44,45 @@ export const load = (async (event) => {
|
|||
next = res.next;
|
||||
previous = res.previous;
|
||||
count = res.count;
|
||||
adventures = [...adventures, ...visited];
|
||||
collections = [...collections, ...visited];
|
||||
}
|
||||
|
||||
let sharedRes = await fetch(`${serverEndpoint}/api/collections/shared/`, {
|
||||
headers: {
|
||||
Cookie: `sessionid=${sessionId}`
|
||||
}
|
||||
});
|
||||
if (!sharedRes.ok) {
|
||||
console.error('Failed to fetch shared collections');
|
||||
return redirect(302, '/login');
|
||||
}
|
||||
let sharedCollections = (await sharedRes.json()) as Collection[];
|
||||
|
||||
let archivedRes = await fetch(`${serverEndpoint}/api/collections/archived/`, {
|
||||
headers: {
|
||||
Cookie: `sessionid=${sessionId}`
|
||||
}
|
||||
});
|
||||
if (!archivedRes.ok) {
|
||||
console.error('Failed to fetch archived collections');
|
||||
return redirect(302, '/login');
|
||||
}
|
||||
let archivedCollections = (await archivedRes.json()) as Collection[];
|
||||
|
||||
// Calculate current page from URL
|
||||
const currentPage = parseInt(page);
|
||||
|
||||
return {
|
||||
props: {
|
||||
adventures,
|
||||
adventures: collections,
|
||||
next,
|
||||
previous,
|
||||
count
|
||||
count,
|
||||
sharedCollections,
|
||||
currentPage,
|
||||
order_by,
|
||||
order_direction,
|
||||
archivedCollections
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<script lang="ts">
|
||||
import { enhance } from '$app/forms';
|
||||
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';
|
||||
|
|
@ -9,82 +9,128 @@
|
|||
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(data);
|
||||
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 = 1;
|
||||
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 (count != collections.length) {
|
||||
if (activeView === 'owned' && count !== collections.length) {
|
||||
count = collections.length;
|
||||
}
|
||||
}
|
||||
|
||||
function handleChangePage() {
|
||||
return async ({ result }: any) => {
|
||||
if (result.type === 'success') {
|
||||
console.log(result.data);
|
||||
collections = result.data.body.adventures as Collection[];
|
||||
next = result.data.body.next;
|
||||
previous = result.data.body.previous;
|
||||
count = result.data.body.count;
|
||||
currentPage = result.data.body.page;
|
||||
totalPages = Math.ceil(count / resultsPerPage);
|
||||
}
|
||||
};
|
||||
// Reactive statements to update collections based on props
|
||||
$: {
|
||||
if (data.props.adventures) {
|
||||
collections = data.props.adventures;
|
||||
}
|
||||
if (data.props.archivedCollections) {
|
||||
archivedCollections = data.props.archivedCollections;
|
||||
}
|
||||
}
|
||||
|
||||
function handleSubmit() {
|
||||
return async ({ result, update }: any) => {
|
||||
// First, call the update function with reset: false
|
||||
update({ reset: false });
|
||||
function goToPage(pageNum: number) {
|
||||
const url = new URL($page.url);
|
||||
url.searchParams.set('page', pageNum.toString());
|
||||
goto(url.toString(), { invalidateAll: true, replaceState: true });
|
||||
}
|
||||
|
||||
// Then, handle the result
|
||||
if (result.type === 'success') {
|
||||
if (result.data) {
|
||||
// console.log(result.data);
|
||||
collections = result.data.adventures as Collection[];
|
||||
next = result.data.next;
|
||||
previous = result.data.previous;
|
||||
count = result.data.count;
|
||||
totalPages = Math.ceil(count / resultsPerPage);
|
||||
currentPage = 1;
|
||||
|
||||
console.log(next);
|
||||
}
|
||||
}
|
||||
};
|
||||
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
|
||||
goto(url.toString(), { invalidateAll: true, replaceState: true });
|
||||
}
|
||||
|
||||
function deleteCollection(event: CustomEvent<string>) {
|
||||
collections = collections.filter((collection) => collection.id !== event.detail);
|
||||
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 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 archiveCollection(event: CustomEvent<string>) {
|
||||
const collectionId = event.detail;
|
||||
// Find the collection in owned collections
|
||||
const collectionToArchive = collections.find((collection) => collection.id === collectionId);
|
||||
|
||||
let collectionToEdit: Collection | null = null;
|
||||
if (collectionToArchive) {
|
||||
// Remove from owned collections
|
||||
collections = collections.filter((collection) => collection.id !== collectionId);
|
||||
// Add to archived collections
|
||||
archivedCollections = [...archivedCollections, { ...collectionToArchive, is_archived: true }];
|
||||
|
||||
// Automatically switch to archived tab to show the archived item
|
||||
activeView = 'archived';
|
||||
}
|
||||
}
|
||||
|
||||
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 }];
|
||||
|
||||
// Automatically switch to owned tab to show the unarchived item
|
||||
activeView = 'owned';
|
||||
}
|
||||
}
|
||||
|
||||
function saveOrCreate(event: CustomEvent<Collection>) {
|
||||
if (collections.find((collection) => collection.id === event.detail.id)) {
|
||||
|
|
@ -115,13 +161,20 @@
|
|||
isShowingCollectionModal = false;
|
||||
}
|
||||
|
||||
let sidebarOpen = 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}
|
||||
|
|
@ -130,156 +183,300 @@
|
|||
on:save={saveOrCreate}
|
||||
/>
|
||||
{/if}
|
||||
<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">
|
||||
<div tabindex="0" role="button" class="btn m-1 size-16 btn-primary">
|
||||
<Plus class="w-8 h-8" />
|
||||
</div>
|
||||
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
|
||||
<ul
|
||||
tabindex="0"
|
||||
class="dropdown-content z-[1] menu p-4 shadow bg-base-300 text-base-content rounded-box w-52 gap-4"
|
||||
>
|
||||
<p class="text-center font-bold text-lg">{$t(`adventures.create_new`)}</p>
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
on:click={() => {
|
||||
collectionToEdit = null;
|
||||
isShowingCollectionModal = true;
|
||||
newType = 'visited';
|
||||
}}
|
||||
>
|
||||
{$t(`adventures.collection`)}</button
|
||||
>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="drawer lg:drawer-open">
|
||||
<input id="my-drawer" type="checkbox" class="drawer-toggle" bind:checked={sidebarOpen} />
|
||||
<div class="drawer-content">
|
||||
<!-- Page content -->
|
||||
<h1 class="text-center font-bold text-4xl mb-6">{$t(`adventures.my_collections`)}</h1>
|
||||
<p class="text-center">{count} {$t(`adventures.count_txt`)}</p>
|
||||
{#if collections.length === 0}
|
||||
<NotFound error={undefined} />
|
||||
{/if}
|
||||
<div class="p-4">
|
||||
<button
|
||||
class="btn btn-primary drawer-button lg:hidden mb-4 fixed bottom-0 left-0 ml-2 z-[999]"
|
||||
on:click={toggleSidebar}
|
||||
>
|
||||
{sidebarOpen ? $t(`adventures.close_filters`) : $t(`adventures.open_filters`)}
|
||||
</button>
|
||||
<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="flex flex-wrap gap-4 mr-4 justify-center content-center">
|
||||
{#each collections as collection}
|
||||
<CollectionCard
|
||||
type=""
|
||||
{collection}
|
||||
on:delete={deleteCollection}
|
||||
on:edit={editCollection}
|
||||
adventures={collection.adventures}
|
||||
/>
|
||||
{/each}
|
||||
<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-gradient-to-r from-primary to-secondary bg-clip-text text-transparent"
|
||||
>
|
||||
{$t(`adventures.my_collections`)}
|
||||
</h1>
|
||||
<p class="text-sm text-base-content/60">
|
||||
{currentCount}
|
||||
{activeView === 'owned'
|
||||
? 'collections'
|
||||
: activeView === 'shared'
|
||||
? 'shared collections'
|
||||
: '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">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">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">Archived</span>
|
||||
<div
|
||||
class="badge badge-sm {activeView === 'archived'
|
||||
? 'badge-primary'
|
||||
: 'badge-ghost'}"
|
||||
>
|
||||
{archivedCollections.length}
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="join flex items-center justify-center mt-4">
|
||||
{#if next || previous}
|
||||
<div class="join">
|
||||
{#each Array.from({ length: totalPages }, (_, i) => i + 1) as page}
|
||||
<form action="?/changePage" method="POST" use:enhance={handleChangePage}>
|
||||
<input type="hidden" name="page" value={page} />
|
||||
<input type="hidden" name="next" value={next} />
|
||||
<input type="hidden" name="previous" value={previous} />
|
||||
{#if currentPage != page}
|
||||
<button class="join-item btn btn-lg">{page}</button>
|
||||
{:else}
|
||||
<button class="join-item btn btn-lg btn-active">{page}</button>
|
||||
{/if}
|
||||
</form>
|
||||
<!-- 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'
|
||||
? 'No collections yet'
|
||||
: activeView === 'shared'
|
||||
? 'No shared collections'
|
||||
: 'No archived collections'}
|
||||
</h3>
|
||||
<p class="text-base-content/50 text-center max-w-md">
|
||||
{activeView === 'owned'
|
||||
? 'Create your first collection to organize your adventures and memories.'
|
||||
: activeView === 'shared'
|
||||
? 'Collections shared with you will appear here.'
|
||||
: 'Archived collections will 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" />
|
||||
Create Collection
|
||||
</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>
|
||||
</div>
|
||||
<div class="drawer-side">
|
||||
<label for="my-drawer" class="drawer-overlay"></label>
|
||||
<ul class="menu p-4 w-80 h-full bg-base-200 text-base-content rounded-lg">
|
||||
<!-- Sidebar content here -->
|
||||
<div class="form-control">
|
||||
<form action="?/get" method="post" use:enhance={handleSubmit}>
|
||||
<h3 class="text-center font-semibold text-lg mb-4">{$t(`adventures.sort`)}</h3>
|
||||
<p class="text-lg font-semibold mb-2">{$t(`adventures.order_direction`)}</p>
|
||||
<div class="join">
|
||||
<input
|
||||
class="join-item btn btn-neutral"
|
||||
type="radio"
|
||||
name="order_direction"
|
||||
id="asc"
|
||||
value="asc"
|
||||
aria-label={$t(`adventures.ascending`)}
|
||||
checked
|
||||
/>
|
||||
<input
|
||||
class="join-item btn btn-neutral"
|
||||
type="radio"
|
||||
name="order_direction"
|
||||
id="desc"
|
||||
value="desc"
|
||||
aria-label={$t(`adventures.descending`)}
|
||||
/>
|
||||
</div>
|
||||
<p class="text-lg font-semibold mt-2 mb-2">{$t('adventures.order_by')}</p>
|
||||
<div class="join">
|
||||
<input
|
||||
class="join-item btn btn-neutral"
|
||||
type="radio"
|
||||
name="order_by"
|
||||
id="upated_at"
|
||||
value="upated_at"
|
||||
aria-label={$t('adventures.updated')}
|
||||
checked
|
||||
/>
|
||||
<input
|
||||
class="join-item btn btn-neutral"
|
||||
type="radio"
|
||||
name="order_by"
|
||||
id="start_date"
|
||||
value="start_date"
|
||||
aria-label={$t('adventures.start_date')}
|
||||
/>
|
||||
<input
|
||||
class="join-item btn btn-neutral"
|
||||
type="radio"
|
||||
name="order_by"
|
||||
id="name"
|
||||
value="name"
|
||||
aria-label={$t('adventures.name')}
|
||||
/>
|
||||
</div>
|
||||
<br />
|
||||
|
||||
<button type="submit" class="btn btn-success btn-primary mt-4"
|
||||
>{$t(`adventures.sort`)}</button
|
||||
>
|
||||
</form>
|
||||
<div class="divider"></div>
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-neutral btn-primary mt-4"
|
||||
on:click={() => goto('/collections/archived')}
|
||||
>{$t(`adventures.archived_collections`)}</button
|
||||
>
|
||||
<!-- 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">Filters & 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>
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<!-- Quick Actions -->
|
||||
<div class="space-y-3 mt-6">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-outline w-full gap-2"
|
||||
on:click={() => switchView('archived')}
|
||||
>
|
||||
<Archive class="w-4 h-4" />
|
||||
{$t(`adventures.archived_collections`)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<svelte:head>
|
||||
<title>Collections</title>
|
||||
<meta name="description" content="View your adventure collections." />
|
||||
</svelte:head>
|
||||
<!-- 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
|
||||
tabindex="0"
|
||||
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>
|
||||
<p class="text-sm text-base-content/60">Choose what to create</p>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
import { marked } from 'marked'; // Import the markdown parser
|
||||
|
||||
import { t } from 'svelte-i18n';
|
||||
import Lost from '$lib/assets/undraw_lost.svg';
|
||||
|
||||
// @ts-ignore
|
||||
import Calendar from '@event-calendar/core';
|
||||
|
|
@ -320,6 +321,10 @@
|
|||
notFound = true;
|
||||
}
|
||||
|
||||
if (!collection) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (collection.start_date && collection.end_date) {
|
||||
numberOfDays =
|
||||
Math.floor(
|
||||
|
|
@ -327,7 +332,7 @@
|
|||
(1000 * 60 * 60 * 24)
|
||||
) + 1;
|
||||
|
||||
// Update `options.evdateents` when `collection.start_date` changes
|
||||
// Update `options.events` when `collection.start_date` changes
|
||||
// @ts-ignore
|
||||
options = { ...options, date: collection.start_date };
|
||||
}
|
||||
|
|
@ -641,7 +646,7 @@
|
|||
<span class="loading loading-spinner w-24 h-24"></span>
|
||||
</div>
|
||||
{/if}
|
||||
{#if collection}
|
||||
{#if collection && collection.id}
|
||||
{#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">
|
||||
|
|
@ -1537,6 +1542,19 @@
|
|||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{:else}
|
||||
<div class="hero min-h-screen bg-gradient-to-br from-base-200 to-base-300 overflow-x-hidden">
|
||||
<div class="hero-content text-center">
|
||||
<div class="max-w-md">
|
||||
<img src={Lost} alt="Lost" class="w-64 mx-auto mb-8 opacity-80" />
|
||||
<h1 class="text-5xl font-bold text-primary mb-4">{$t('adventures.not_found')}</h1>
|
||||
<p class="text-lg opacity-70 mb-8">{$t('adventures.not_found_desc')}</p>
|
||||
<button class="btn btn-primary btn-lg" on:click={() => goto('/')}>
|
||||
{$t('adventures.homepage')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<svelte:head>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue