tatort/src/routes/(angemeldet)/list/+page.svelte

<script lang="ts">
	import ExpandableForm from '$lib/components/ExpandableForm.svelte';
	import Trash from '$lib/icons/Trash.svelte';
	import Folder from '$lib/icons/Folder.svelte';
	import EmptyList from '$lib/components/EmptyList.svelte';
	import { API_ROUTES, ROUTE_NAMES } from '../../index.js';

	let { data, form } = $props();

	let vorgangList = data.vorgangList;

	let isEmptyList = vorgangList.length === 0;

	let vorgangName = $state('');
	let vorgangPIN = $state('');
	let errorMsg = $state('');

	// reset input fields when submission successful
	$effect(() => {
		if (form?.token) {
			vorgangName = '';
			vorgangPIN = '';
			errorMsg = '';
		}
	});

	async function submitVorgang(ev: Event) {
		const isValid = inputValid(vorgangName, vorgangPIN);
		if (!isValid) {
			ev.preventDefault();
			return;
		}

		// continue form action on server
	}

	/**
	 * Check for required fields
	 * @param vorgangName
	 * @param vorgangPIN
	 * @returns {boolean} Indicates whether input is valid
	 */
	function inputValid(vorgangName, vorgangPIN) {
		if (!(vorgangName || vorgangPIN)) {
			errorMsg = 'Bitte beide Felder ausfüllen.';
			return false;
		} else if (!vorgangName) {
			errorMsg = 'Bitte einen Vorgangsnamen vergeben.';
			return false;
		} else if (!vorgangPIN) {
			errorMsg = 'Bitte einen Vorgangs-PIN eingeben.';
			return false;
		}

		const existing = vorgangList.some((vorg) => vorg.vorgangName === vorgangName);
		if (existing) {
			errorMsg = 'Der Name existiert bereits.';
			return false;
		}

		return true;
	}

	async function delete_item(ev: Event) {
		let delete_item = window.confirm('Bist du sicher?');

		if (delete_item) {
			const target = ev.currentTarget as HTMLElement | null;
			if (!target) return;
			let filename = target.id.split('del__')[1];

			let url = API_ROUTES.VORGANG(filename);

			try {
				const response = await fetch(url, { method: 'DELETE' });
				if (response.status == 204) {
					setTimeout(() => {
						window.location.reload();
					}, 500);
				}
			} catch (error) {
				if (error instanceof Error) {
					console.log(error.message);
				} else {
					console.log(error);
				}
			}
		}
	}
</script>

<div class="-z-10 bg-white">
	<div class="flex flex-col items-center justify-center w-full">
		<h1 class="text-xl">Liste der Vorgänge</h1>
	</div>
	<div class="mx-auto flex justify-center max-w-7xl h-full">
		<ul role="list" class="divide-y divide-gray-100">
			{#if isEmptyList}
				<EmptyList></EmptyList>
			{:else}
				{#each vorgangList as vorgangItem}
					<li data-testid="test-list-item">
						<a
						href="{ROUTE_NAMES.VORGANG(vorgangItem.vorgangToken)}"
						class="flex flex-col items-center justify-center gap-2 py-4 px-4 rounded-lg hover:bg-gray-50 transition text-center"
						>
						<div class="flex items-center justify-center gap-3">
							<Folder class="w-6 h-6 text-gray-600" />

							<span class="text-sm font-semibold leading-6 text-gray-900">
							{vorgangItem.vorgangName}
							</span>

							<button
							id="del__{vorgangItem.vorgangToken}"
							on:click|preventDefault={delete_item}
							aria-label="Vorgang {vorgangItem.name} löschen"
							class="p-1.5 rounded-full text-gray-500 hover:text-red-600 hover:bg-red-50 transition"
							>
							<Trash class="w-4 h-4" />
							</button>
						</div>
						</a>
					</li>
				{/each}
			{/if}
		</ul>
	</div>
</div>


<ExpandableForm>
<form class="flex flex-col items-center" method="POST">
	<div class="flex flex-col sm:flex-row sm:space-x-4 w-full max-w-lg">
		<div class="flex-1">
			<label for="vorgang" class="block text-sm font-medium leading-6 text-gray-900">
				<span class="flex"> Vorgangsname </span>
			</label>
			<div class="mt-2">
				<div
					class="flex rounded-md shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-600"
				>
					<input
						required
						bind:value={vorgangName}
						type="text"
						name="vorgang"
						id="vorgang"
						class="block flex-1 border-0 bg-transparent py-1.5 pl-1 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6"
					/>
				</div>
			</div>
		</div>

		<div class="flex-1 mt-4 sm:mt-0">
			<label for="pin" class="block text-sm font-medium leading-6 text-gray-900">
				<span class="flex"> PIN </span>
			</label>
			<div class="mt-2">
				<div
					class="flex rounded-md shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-600"
				>
					<input
						required
						type="password"
						bind:value={vorgangPIN}
						name="pin"
						id="pin"
						class="block flex-1 border-0 bg-transparent py-1.5 pl-1 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6"
					/>
				</div>
			</div>
		</div>
	</div>

	{#if errorMsg}
		<p>{errorMsg}</p>
	{/if}
	{#if form?.message}
		<p>{form.message}</p>
	{/if}
	<button
		type="submit"
		on:click={submitVorgang}
		class="mt-4 bg-indigo-600 text-white px-6 py-2 rounded hover:bg-indigo-700 transition"
	>
		Neuen Vorgang hinzufügen
	</button>
</form>

</ExpandableForm>

<style>
	ul {
		min-width: 24rem;
	}
</style>