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

<script lang="ts">
	import { createEventDispatcher } from 'svelte';
	import type { Collection, Transportation } from '$lib/types';
	const dispatch = createEventDispatcher();
	import { onMount } from 'svelte';
	import { addToast } from '$lib/toasts';
	let modal: HTMLDialogElement;
	import { t } from 'svelte-i18n';

	import MarkdownEditor from './MarkdownEditor.svelte';

	export let collectionToEdit: Collection | null = null;

	let collection: Collection = {
		id: collectionToEdit?.id || '',
		name: collectionToEdit?.name || '',
		description: collectionToEdit?.description || '',
		start_date: collectionToEdit?.start_date || null,
		end_date: collectionToEdit?.end_date || null,
		user_id: collectionToEdit?.user_id || '',
		is_public: collectionToEdit?.is_public || false,
		adventures: collectionToEdit?.adventures || [],
		link: collectionToEdit?.link || '',
		shared_with: collectionToEdit?.shared_with || []
	};

	console.log(collection);

	onMount(async () => {
		modal = document.getElementById('my_modal_1') as HTMLDialogElement;
		if (modal) {
			modal.showModal();
		}
	});

	function close() {
		dispatch('close');
	}

	function handleKeydown(event: KeyboardEvent) {
		if (event.key === 'Escape') {
			close();
		}
	}

	async function handleSubmit(event: Event) {
		event.preventDefault();
		console.log(collection);

		if (collection.id === '') {
			let res = await fetch('/api/collections', {
				method: 'POST',
				headers: {
					'Content-Type': 'application/json'
				},
				body: JSON.stringify(collection)
			});
			let data = await res.json();
			if (data.id) {
				collection = data as Collection;
				addToast('success', $t('collection.collection_created'));
				dispatch('save', collection);
			} else {
				console.error(data);
				addToast('error', $t('collection.error_creating_collection'));
			}
		} else {
			let res = await fetch(`/api/collections/${collection.id}`, {
				method: 'PATCH',
				headers: {
					'Content-Type': 'application/json'
				},
				body: JSON.stringify(collection)
			});
			let data = await res.json();
			if (data.id) {
				collection = data as Collection;
				addToast('success', $t('collection.collection_edit_success'));
				dispatch('save', collection);
			} else {
				addToast('error', $t('collection.error_editing_collection'));
			}
		}
	}
</script>

<dialog id="my_modal_1" class="modal">
	<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
	<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
	<div class="modal-box w-11/12 max-w-3xl" role="dialog" on:keydown={handleKeydown} tabindex="0">
		<h3 class="font-bold text-2xl">
			{collectionToEdit ? $t('adventures.edit_collection') : $t('collection.new_collection')}
		</h3>
		<div class="modal-action items-center">
			<form method="post" style="width: 100%;" on:submit={handleSubmit}>
				<!-- Basic Information Section -->
				<div class="collapse collapse-plus bg-base-200 mb-4">
					<input type="checkbox" checked />
					<div class="collapse-title text-xl font-medium">
						{$t('adventures.basic_information')}
					</div>
					<div class="collapse-content">
						<!-- Name -->
						<div>
							<label for="name">
								{$t('adventures.name')}<span class="text-red-500">*</span>
							</label>
							<input
								type="text"
								id="name"
								name="name"
								bind:value={collection.name}
								class="input input-bordered w-full"
								required
							/>
						</div>
						<!-- Description -->
						<div>
							<label for="description">{$t('adventures.description')}</label><br />
							<MarkdownEditor bind:text={collection.description} editor_height={'h-32'} />
						</div>
						<!-- Start Date -->
						<div>
							<label for="start_date">{$t('adventures.start_date')}</label>
							<input
								type="date"
								id="start_date"
								name="start_date"
								bind:value={collection.start_date}
								class="input input-bordered w-full"
							/>
						</div>
						<!-- End Date -->
						<div>
							<label for="end_date">{$t('adventures.end_date')}</label>
							<input
								type="date"
								id="end_date"
								name="end_date"
								bind:value={collection.end_date}
								class="input input-bordered w-full"
							/>
						</div>
						<!-- Public -->
						<div>
							<label class="label cursor-pointer flex items-start space-x-2">
								<span class="label-text">{$t('collection.public_collection')}</span>
								<input
									type="checkbox"
									class="toggle toggle-primary"
									id="is_public"
									name="is_public"
									bind:checked={collection.is_public}
								/>
							</label>
						</div>
						<!-- Link -->
						<div>
							<label for="link">{$t('adventures.link')}</label>
							<input
								type="text"
								id="link"
								name="link"
								bind:value={collection.link}
								class="input input-bordered w-full"
							/>
						</div>
					</div>
				</div>
				<!-- Form Actions -->
				<div class="mt-4">
					<button type="submit" class="btn btn-primary">
						{$t('adventures.save_next')}
					</button>
					<button type="button" class="btn" on:click={close}>
						{$t('about.close')}
					</button>
				</div>
			</form>
		</div>
	</div>
</dialog>