AdventureLog/frontend/src/lib/components/CollectionCard.svelte

<script lang="ts">
	import { createEventDispatcher } from 'svelte';

	import Launch from '~icons/mdi/launch';
	import TrashCanOutline from '~icons/mdi/trash-can-outline';

	import FileDocumentEdit from '~icons/mdi/file-document-edit';
	import ArchiveArrowDown from '~icons/mdi/archive-arrow-down';
	import ArchiveArrowUp from '~icons/mdi/archive-arrow-up';

	import { goto } from '$app/navigation';
	import type { Adventure, Collection } from '$lib/types';
	import { addToast } from '$lib/toasts';

	import Plus from '~icons/mdi/plus';
	import DotsHorizontal from '~icons/mdi/dots-horizontal';
	import TrashCan from '~icons/mdi/trashcan';
	import DeleteWarning from './DeleteWarning.svelte';
	import ShareModal from './ShareModal.svelte';
	import CardCarousel from './CardCarousel.svelte';

	const dispatch = createEventDispatcher();

	export let type: String | undefined | null;
	export let adventures: Adventure[] = [];
	let isShareModalOpen: boolean = false;

	function editAdventure() {
		dispatch('edit', collection);
	}

	async function archiveCollection(is_archived: boolean) {
		console.log(JSON.stringify({ is_archived: is_archived }));
		let res = await fetch(`/api/collections/${collection.id}/`, {
			method: 'PATCH',
			headers: {
				'Content-Type': 'application/json'
			},
			body: JSON.stringify({ is_archived: is_archived })
		});
		if (res.ok) {
			console.log(`Collection ${is_archived ? 'archived' : 'unarchived'}`);
			addToast('info', `Collection ${is_archived ? 'archived' : 'unarchived'} successfully!`);
			dispatch('delete', collection.id);
		} else {
			console.log('Error archiving collection');
		}
	}

	export let collection: Collection;

	async function deleteCollection() {
		let res = await fetch(`/collections/${collection.id}?/delete`, {
			method: 'POST',
			headers: {
				'Content-Type': 'application/x-www-form-urlencoded'
			}
		});
		if (res.ok) {
			console.log('Collection deleted');
			addToast('info', 'Collection deleted successfully!');
			dispatch('delete', collection.id);
		} else {
			console.log('Error deleting collection');
		}
	}

	let isWarningModalOpen: boolean = false;
</script>

{#if isWarningModalOpen}
	<DeleteWarning
		title="Delete Collection"
		button_text="Delete"
		description="Are you sure you want to delete this collection? This will also delete all of the linked adventures. This action cannot be undone."
		is_warning={true}
		on:close={() => (isWarningModalOpen = false)}
		on:confirm={deleteCollection}
	/>
{/if}

{#if isShareModalOpen}
	<ShareModal {collection} on:close={() => (isShareModalOpen = false)} />
{/if}

<div
	class="card min-w-max lg:w-96 md:w-80 sm:w-60 xs:w-40 bg-neutral text-neutral-content shadow-xl"
>
	<CardCarousel {adventures} />
	<div class="card-body">
		<div class="flex justify-between">
			<button
				on:click={() => goto(`/collections/${collection.id}`)}
				class="text-2xl font-semibold -mt-2 break-words text-wrap hover:underline"
			>
				{collection.name}
			</button>
		</div>
		<div class="inline-flex gap-2 mb-2">
			<div class="badge badge-secondary">{collection.is_public ? 'Public' : 'Private'}</div>
			{#if collection.is_archived}
				<div class="badge badge-warning">Archived</div>
			{/if}
		</div>
		<p>{collection.adventures.length} Adventures</p>
		{#if collection.start_date && collection.end_date}
			<p>
				Dates: {new Date(collection.start_date).toLocaleDateString(undefined, { timeZone: 'UTC' })} -
				{new Date(collection.end_date).toLocaleDateString(undefined, { timeZone: 'UTC' })}
			</p>
			<!-- display the duration in days -->
			<p>
				Duration: {Math.floor(
					(new Date(collection.end_date).getTime() - new Date(collection.start_date).getTime()) /
						(1000 * 60 * 60 * 24)
				) + 1}{' '}
				days
			</p>{/if}

		<div class="card-actions justify-end">
			{#if type == 'link'}
				<button class="btn btn-primary" on:click={() => dispatch('link', collection.id)}>
					<Plus class="w-5 h-5 mr-1" />
				</button>
			{:else}
				<div class="dropdown dropdown-end">
					<div tabindex="0" role="button" class="btn btn-neutral-200">
						<DotsHorizontal class="w-6 h-6" />
					</div>
					<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
					<ul
						tabindex="0"
						class="dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow"
					>
						{#if type != 'link' && type != 'viewonly'}
							<button
								class="btn btn-neutral mb-2"
								on:click={() => goto(`/collections/${collection.id}`)}
								><Launch class="w-5 h-5 mr-1" />Open Details</button
							>
							{#if !collection.is_archived}
								<button class="btn btn-neutral mb-2" on:click={editAdventure}>
									<FileDocumentEdit class="w-6 h-6" />Edit Collection
								</button>
								<button class="btn btn-neutral mb-2" on:click={() => (isShareModalOpen = true)}>
									<FileDocumentEdit class="w-6 h-6" />Share
								</button>
							{/if}
							{#if collection.is_archived}
								<button class="btn btn-neutral mb-2" on:click={() => archiveCollection(false)}>
									<ArchiveArrowUp class="w-6 h-6 mr-1" />Unarchive
								</button>
							{:else}
								<button class="btn btn-neutral mb-2" on:click={() => archiveCollection(true)}>
									<ArchiveArrowDown class="w-6 h-6 mr" />Archive
								</button>
							{/if}
							<button
								id="delete_adventure"
								data-umami-event="Delete Adventure"
								class="btn btn-warning"
								on:click={() => (isWarningModalOpen = true)}
								><TrashCan class="w-6 h-6" />Delete</button
							>
						{/if}
						{#if type == 'viewonly'}
							<button
								class="btn btn-neutral mb-2"
								on:click={() => goto(`/collections/${collection.id}`)}
								><Launch class="w-5 h-5 mr-1" />Open Details</button
							>
						{/if}
					</ul>
				</div>
			{/if}
		</div>
	</div>
</div>