make admin table resizable

src/routes/+layout.svelte

@@ -92,9 +92,8 @@
 </main>
 <nav>
 	<div
-		class={onAdminPage
-			? 'fixed bottom-4 right-4 group/menu-bar flex flex-col-reverse justify-center items-center'
-			: 'fixed bottom-4 right-4 group/menu-bar flex flex-col-reverse justify-center items-center sm:left-4 sm:right-[initial]'}
+		class="fixed bottom-4 right-4 sm:left-4 sm:right-[initial] group/menu-bar flex flex-col-reverse justify-center items-center"
+		class:hidden={onAdminPage}
 		bind:this={nav}
 	>
 		<button
@@ -145,8 +144,7 @@
 			<ul class="flex flex-col bg-base-200 rounded">
 				{#each navPaths as navPath, i}
 					<li
-						class="flex justify-center tooltip tooltip-left"
-						class:sm:tooltip-right={!onAdminPage}
+						class="flex justify-center tooltip tooltip-left sm:tooltip-right"
 						data-tip={navPath.name}
 					>
 						<a

src/routes/admin/+layout.svelte

@@ -19,7 +19,7 @@
 
 {#if $page.url.pathname !== `${env.PUBLIC_BASE_PATH}/admin/login`}
 	<div class="flex h-screen">
-		<div class="h-full">
+		<div class="h-full w-max">
 			<ul class="menu p-4 w-fit h-full bg-base-200 text-base-content">
 				<li>
 					<a href="{env.PUBLIC_BASE_PATH}/admin/admin">
@@ -35,7 +35,7 @@
 				</li>
 			</ul>
 		</div>
-		<div class="h-full w-full">
+		<div class="h-full w-full overflow-scroll">
 			<slot />
 		</div>
 	</div>

src/routes/admin/admin/+page.svelte

@@ -6,7 +6,7 @@
 	import { Permissions } from '$lib/permissions';
 	import { env } from '$env/dynamic/public';
 	import ErrorToast from '$lib/components/Toast/ErrorToast.svelte';
-	import { buttonTriggeredRequest } from '$lib/components/utils';
+	import { buttonTriggeredRequest, resizeTableColumn } from '$lib/components/utils';
 	import { goto } from '$app/navigation';
 
 	let allPermissionBadges = {
@@ -30,7 +30,9 @@
 			})
 		});
 		if (response.ok) {
-			data.admins.push(await response.json());
+			let res = await response.json();
+			res.permissions = new Permissions(res.permissions).asArray();
+			data.admins.push(res);
 			data.admins = data.admins;
 		} else {
 			throw new Error();
@@ -89,28 +91,21 @@
 	let permissions = new Permissions(data.permissions);
 </script>
 
-<table class="table table-zebra">
-	<colgroup>
-		<col span="1" style="width: 5%" />
-		<col span="1" style="width: 25%" />
-		<col span="1" style="width: 25%" />
-		<col span="1" style="width: 30%" />
-		<col span="1" style="width: 15%" />
-	</colgroup>
+<table class="table table-zebra w-full">
 	<thead>
 		<tr>
-			<th />
-			<th>Benutzername</th>
-			<th>Passwort</th>
-			<th>Berechtigungen</th>
-			<th />
+			<th on:mousedown={(e) => resizeTableColumn(e, 5)} />
+			<th on:mousedown={(e) => resizeTableColumn(e, 5)}>Benutzername</th>
+			<th on:mousedown={(e) => resizeTableColumn(e, 5)}>Passwort</th>
+			<th on:mousedown={(e) => resizeTableColumn(e, 5)}>Berechtigungen</th>
+			<th on:mousedown={(e) => resizeTableColumn(e, 5)} />
 		</tr>
 	</thead>
 	<tbody>
 		{#each data.admins as admin, i}
 			<tr>
-				<td>{i}</td>
-				<td
+				<td on:mousedown={(e) => resizeTableColumn(e, 5)}>{i}</td>
+				<td on:mousedown={(e) => resizeTableColumn(e, 5)}
 					><Input
 						type="text"
 						bind:value={admin.username}
@@ -118,7 +113,7 @@
 						size="sm"
 					/></td
 				>
-				<td
+				<td on:mousedown={(e) => resizeTableColumn(e, 5)}
 					><Input
 						type="password"
 						bind:value={admin.password}
@@ -127,14 +122,14 @@
 						size="sm"
 					/></td
 				>
-				<td
+				<td on:mousedown={(e) => resizeTableColumn(e, 5)}
 					><Badges
 						bind:value={admin.permissions}
 						available={allPermissionBadges}
 						disabled={!permissions.adminWrite() || !admin.edit}
 					/></td
 				>
-				<td>
+				<td on:mousedown={(e) => resizeTableColumn(e, 5)}>
 					<div>
 						{#if admin.edit}
 							<span class="w-min" class:cursor-not-allowed={!permissions.adminWrite()}>
@@ -245,3 +240,28 @@
 <ErrorToast show={errorMessage !== ''}>
 	<span />
 </ErrorToast>
+
+<style lang="scss">
+	thead tr th,
+	tbody tr td {
+		@apply relative;
+
+		&:not(:first-child) {
+			@apply border-l-[1px] border-dashed;
+
+			&::before {
+				@apply absolute left-0 bottom-0 h-full w-[5px] cursor-col-resize;
+				content: '';
+			}
+		}
+
+		&:not(:last-child) {
+			@apply border-r-[1px] border-dashed border-base-300;
+
+			&::after {
+				@apply absolute right-0 bottom-0 h-full w-[5px] cursor-col-resize;
+				content: '';
+			}
+		}
+	}
+</style>

src/routes/admin/admin/+server.ts

@@ -34,6 +34,8 @@ export const POST = (async ({ request, cookies }) => {
 		permissions: new Permissions(permissions)
 	});
 
+	delete admin.dataValues.password;
+
 	return new Response(JSON.stringify(admin), {
 		status: 201
 	});