change case loading in server side mode, made case list functional

src/routes/(angemeldet)/list/+page.server.ts

@@ -0,0 +1,10 @@
+import { getListOfVorgänge } from '$lib/server/vorgangService';
+import type { PageServerLoad } from '../../(token-based)/view/$types';
+
+export const load: PageServerLoad = async () => {
+    const caseList = await getListOfVorgänge();
+
+    return {
+        caseList
+    };
+};

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

@@ -1,34 +1,11 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
 	import Trash from '$lib/icons/Trash.svelte';
 	import Folder from '$lib/icons/Folder.svelte';
+	import type { PageData } from '../$types';
 
-	/**
-	 * @type any[]
-	 */
-	let list: any[] = [];
-	//$: list;
+	export let data: PageData;
 
-	onMount(async () => {
-		const response = await fetch('/api/list');
-		const stream = await response.body;
-		if (!stream) return;
-
-		const reader = stream.getReader();
-
-		while (true) {
-			const { done, value } = await reader.read();
-			if (done) return;
-
-			const objs = new TextDecoder()
-				.decode(value)
-				.split('\n')
-				.filter((i) => i.length > 0)
-				.map((i) => JSON.parse(i));
-
-			list = list.concat(objs);
-		}
-	});
+	const caseList = data.caseList;
 
 	async function delete_item(ev: Event) {
 		let delete_item = window.confirm('Bist du sicher?');
@@ -67,9 +44,9 @@
 	</div>
 	<div class="mx-auto flex justify-center max-w-7xl h-full">
 		<ul role="list" class="divide-y divide-gray-100">
-			{#each list as item}
+			{#each caseList as item}
 				<li>
-					<a href="/list/{item.name}" class="flex justify-between gap-x-6 py-5">
+					<a href="/list/{item.name}?token={item.token}" class="flex justify-between gap-x-6 py-5">
 						<div class="flex gap-x-4">
 							<!-- Ordner -->
 							<Folder />

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

@@ -1,18 +1,28 @@
+import { checkIfVorgangExists } from '$lib/server/vorgangService';
 import { hasValidToken } from '$lib/server/vorgangService';
-import { redirect } from '@sveltejs/kit';
+import { getVorgangByCaseId } from '$lib/server/vorgangService';
 import type { PageServerLoad } from '../../view/$types';
 
-export const load: PageServerLoad = ({params, url}) => {
-    const caseID = params.vorgang;
-    const token = url.searchParams.get('token');
+export const load: PageServerLoad = async ({ params, url }) => {
+	const caseId = params.vorgang;
+	const caseToken = url.searchParams.get('token');
 
-    let isTokenValid
+	const isVorgangValid = await checkIfVorgangExists(caseId);
+	if (isVorgangValid !== true) {
+		return {
+			error: 'Vorgang wurde nicht gefunden.'
+		};
+	}
+	const isTokenValid = await hasValidToken(caseId, caseToken);
+	if (isTokenValid !== true) {
+		return {
+			error: 'Zugriffscode ist ungültig.'
+		};
+	}
 
-    if (typeof token === 'string' && caseID) {
-        isTokenValid = hasValidToken(caseID, token);
-    }
+	const crimesList = await getVorgangByCaseId(caseId);
 
-    if(!isTokenValid) {
-        redirect(303, '/anmeldung');
-    }
+	return {
+		crimesList
+	};
 };

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

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
 	import shortenFileSize from '$lib/helper/shortenFileSize';
 	import { page } from '$app/stores';
 
@@ -27,8 +26,7 @@
 		// add other properties as needed
 	}
 
-	let list: ListItem[] = [];
-	$: list;
+	const crimesList: ListItem[] = data.crimesList;
 
 	let open = false;
 	$: open;
@@ -40,38 +38,12 @@
 	let rename_input;
 	$: rename_input;
 
-	onMount(async () => {
-		const response = await fetch('/api/list/' + $page.params.vorgang);
-		const stream = response.body;
-		if (!stream) return;
-
-		const reader = stream.getReader();
-
-		while (true) {
-			const { done, value } = await reader.read();
-			if (done) return;
-
-			const objs = new TextDecoder()
-				.decode(value)
-				.split('\n')
-				.filter((i) => i.length > 0)
-				.map((i) => JSON.parse(i));
-
-			list = list.concat(objs);
-
-			list = list.map((item) => {
-				item.show_button = true;
-				return item;
-			});
-		}
-	});
-
 	function uploadSuccessful() {
 		open = false;
 	}
 
 	function defocus_element(i: number) {
-		let item = list[i];
+		let item = crimesList[i];
 		let text_field_id = `label__${item.name}`;
 
 		let text_field = document.getElementById(text_field_id);
@@ -81,12 +53,12 @@
 		}
 
 		// reshow button
-		list[i].show_button = true;
+		crimesList[i].show_button = true;
 		return;
 	}
 
 	async function handle_input(ev: KeyboardEvent, i: number) {
-		let item = list[i];
+		let item = crimesList[i];
 		if (ev.key == 'Escape') {
 			let text_field_id = `label__${item.name}`;
 
@@ -163,7 +135,7 @@
 	</div>
 	<div class="mx-auto flex justify-center max-w-7xl h-full">
 		<ul class="divide-y divide-gray-100">
-			{#each list as item, i}
+			{#each crimesList as item, i}
 				<li>
 					<a
 						href="/view/{$page.params.vorgang}/{item.name}"
@@ -191,20 +163,6 @@
 										}}>{item.name}</span
 									>
 
-									<!--<input
-									class="text-sm font-semibold leading-6 text-gray-900 inline-block min-w-1"
-									type="text"
-									name=""
-									on:keydown|stopPropagation={// event needed to identify ID
-									// TO-DO: check if event is needed or if index is sufficient
-									async (ev) => {
-										handle_input(ev, i);
-									}}
-									bind:value={item.name}
-									id="label__{item.name}"
-								/>-->
-									<!-- disabled={item.show_button} -->
-									<!-- https://iconduck.com/icons/192863/edit-rename -->
 
 									{#if item.show_button}
 										<button
@@ -306,6 +264,12 @@
 	</Modal>
 </div>
 
+{#if data.error}
+	<div class="max-w-xl mx-auto bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mt-4">
+		<strong class="font-bold">Fehler: </strong>
+		<span class="block sm:inline">{data.error}</span>
+	</div>
+{/if}
 <style>
 	ul {
 		min-width: 24rem;

src/routes/anmeldung/+page.server.ts

@@ -1,5 +1,6 @@
 import { loginUser, logoutUser } from '$lib/server/authService';
-import { getVorgangByCaseId } from '$lib/server/vorgangService.js';
+import { checkIfVorgangExists, hasValidToken } from '$lib/server/vorgangService.js';
+import { redirect } from '@sveltejs/kit';
 
 export const actions = {
 	login: ({ request, cookies }) => loginUser({ request, cookies }),
@@ -8,8 +9,13 @@ export const actions = {
 		const data = await request.formData();
 		const caseId = data.get('case-id');
 		const caseToken = data.get('case-token');
-		const result = await getVorgangByCaseId(caseId, caseToken);
+		
+		const isVorgangValid = await checkIfVorgangExists(caseId);
+		if (isVorgangValid !== true) return isVorgangValid;
+		const isTokenValid = await hasValidToken(caseId, caseToken);
+		if ( isTokenValid !== true) return isTokenValid;
 
-		console.log(result);
+
+		throw redirect(303, `/list/${caseId}?token=${caseToken}`);
 	}
 } as const;