src/lib/components/ListItem.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+	import Cube from '$lib/icons/Cube.svelte';
+	import Edit from '$lib/icons/Edit.svelte';
+	import Trash from '$lib/icons/Trash.svelte';
+	import shortenFileSize from '$lib/helper/shortenFileSize';
+	import timeElapsed from '$lib/helper/timeElapsed';
+
+	export let data;
+	export let i;
+
+	let crimesList = data.crimesList;
+	let item = crimesList[i];
+
+	let admin = data.user?.admin;
+	let link = `/view/${item.prefix}/${item.name}?token=${data.caseToken}`;
+
+	console.log('Debug Mina', crimesList, data);
+
+	function editName() {
+		console.log('Edit Name');
+	}
+
+	function deleteCase() {
+		console.log('Delete Case');
+	}
+
+	function checkIsEmpty() {
+		if (!item.name) console.log('Das Feld ist leer');
+	}
+
+	function cancelEdit() {
+		console.log('Bearbeitung abgebrochen');
+	}
+</script>
+
+<a href={link} class="flex justify-between items-center gap-x-6 py-5">
+	<div class=" flex gap-x-4">
+		<Cube class="h-auto" />
+		<div class="min-w-0 flex-auto">
+			{#if admin}
+				<input
+					class="text-sm font-semibold leading-6 text-gray-900 inline-block min-w-1"
+					type="text"
+					value={item.name}
+					on:click|preventDefault={(ev) => {
+						editName();
+					}}
+				/>
+
+				<button
+					class="p-2"
+					on:click|preventDefault={(ev) => {
+						editName();
+					}}
+				>
+					<Edit />
+				</button>
+
+				<button
+					class="p-2"
+					on:click|preventDefault={async (ev) => {
+						deleteCase();
+					}}
+				>
+					<Trash />
+				</button>
+			{:else}
+				<span class="text-sm font-semibold leading-6 text-gray-900 inline-block min-w-1">
+					{item.name}
+				</span>
+			{/if}
+
+			<p class="mt-1 truncate text-xs leading-5 text-gray-500">{shortenFileSize(item.size)}</p>
+		</div>
+	</div>
+	<div class="hidden sm:flex sm:flex-col sm:items-end">
+		<p class="text-sm leading-6 text-gray-900">3D Tatort</p>
+
+		<p class="mt-1 text-xs leading-5 text-gray-500">
+			Zuletzt geändert <time datetime="2023-01-23T13:23Z"
+				>{timeElapsed(new Date(item.lastModified))}</time
+			>
+		</p>
+	</div>
+</a>

src/lib/icons/Cube.svelte

@@ -1,10 +1,15 @@
+<script>
+	let classNames = '';
+	export { classNames as class };
+</script>
+
 <svg
 	xmlns="http://www.w3.org/2000/svg"
 	fill="none"
 	viewBox="0 0 24 24"
 	stroke-width="1.5"
 	stroke="currentColor"
-	class=" w-6 h-6"
+	class=" w-6 h-6 {classNames}"
 >
 	<path
 		stroke-linecap="round"

src/routes/(token-based)/list/[vorgang]/+page.svelte

@@ -1,21 +1,13 @@
 <script lang="ts">
-	import shortenFileSize from '$lib/helper/shortenFileSize';
 	import { page } from '$app/stores';
-
-	import timeElapsed from '$lib/helper/timeElapsed';
-
 	import Alert from '$lib/components/Alert.svelte';
 	import Button from '$lib/components/Button.svelte';
 	import Modal from '$lib/components/Modal/Modal.svelte';
 	import ModalTitle from '$lib/components/Modal/ModalTitle.svelte';
 	import ModalContent from '$lib/components/Modal/ModalContent.svelte';
 	import ModalFooter from '$lib/components/Modal/ModalFooter.svelte';
-	import Cube from '$lib/icons/Cube.svelte';
+	import ListItem from '$lib/components/ListItem.svelte';
-	import Edit from '$lib/icons/Edit.svelte';
-	import Trash from '$lib/icons/Trash.svelte';
 
-	/** export let data; */
-	/** @type {import('./$types').PageData} */
 	export let data;
 
 	interface ListItem {
@@ -28,6 +20,7 @@
 
 	const crimesList: ListItem[] = data.crimesList;
 	const token: string = data.caseToken;
+	export let vorgang = $page.params.vorgang;
 
 	let open = false;
 	$: open;
@@ -43,20 +36,20 @@
 		open = false;
 	}
 
-	function defocus_element(i: number) {
+	// function defocus_element(i: number) {
-		let item = crimesList[i];
+	// 	let item = crimesList[i];
-		let text_field_id = `label__${item.name}`;
+	// 	let text_field_id = `label__${item.name}`;
 
-		let text_field = document.getElementById(text_field_id);
+	// 	let text_field = document.getElementById(text_field_id);
-		if (text_field) {
+	// 	if (text_field) {
-			text_field.setAttribute('contenteditable', 'false');
+	// 		text_field.setAttribute('contenteditable', 'false');
-			text_field.textContent = item.name;
+	// 		text_field.textContent = item.name;
-		}
+	// 	}
 
-		// reshow button
+	// 	// reshow button
-		crimesList[i].show_button = true;
+	// 	crimesList[i].show_button = true;
-		return;
+	// 	return;
-	}
+	// }
 
 	async function handle_input(ev: KeyboardEvent, i: number) {
 		let item = crimesList[i];
@@ -132,13 +125,13 @@
 
 <div class="-z-10 bg-white">
 	<div class="flex flex-col items-center justify-center w-full">
-		<h1 class="text-xl">Vorgang {$page.params.vorgang}</h1>
+		<h1 class="text-xl">Vorgang {vorgang}</h1>
 	</div>
 	<div class="mx-auto flex justify-center max-w-7xl h-full">
 		<ul class="divide-y divide-gray-100">
 			{#each crimesList as item, i}
 				<li>
-					<a
+					<!-- <a
 						href="/view/{$page.params.vorgang}/{item.name}?token={token}"
 						class=" flex justify-between gap-x-6 py-5"
 						aria-label="zum 3D-modell"
@@ -164,7 +157,6 @@
 										}}>{item.name}</span
 									>
 
-
 									{#if item.show_button}
 										<button
 											style="padding: 2px"
@@ -245,7 +237,8 @@
 								>
 							</p>
 						</div>
-					</a>
+					</a> -->
+					<ListItem {data} {i}></ListItem>
 				</li>
 			{/each}
 		</ul>