frontend cleanup

frontend/src/lib/components/InputField.svelte

@@ -1,5 +1,4 @@
 <script>
-	import { createEventDispatcher } from 'svelte';
 	import { t } from 'svelte-i18n';
 
 	/** @type {string} */

frontend/src/lib/components/Modal.svelte

@@ -1,9 +1,6 @@
 <script>
 	import { quintOut } from 'svelte/easing';
 
-	import { t } from 'svelte-i18n';
-	import { createEventDispatcher } from 'svelte';
-
 	const modal = (/** @type {Element} */ node, { duration = 300 } = {}) => {
 		const transform = getComputedStyle(node).transform;
 
@@ -19,11 +16,6 @@
 			}
 		};
 	};
-
-	const dispatch = createEventDispatcher();
-	function closeModal() {
-		dispatch('close', {});
-	}
 </script>
 
 <div class="modal-background">
@@ -59,42 +51,11 @@
 		box-shadow: 0 4px 20px rgba(17, 17, 27, 0.5); /* var(--crust) with opacity */
 		transform: translate(-50%, -50%);
 	}
-	.sr-only {
-		position: absolute;
-		width: 1px;
-		height: 1px;
-		padding: 0;
-		margin: -1px;
-		overflow: hidden;
-		clip: rect(0, 0, 0, 0);
-		white-space: nowrap;
-		border-width: 0;
-	}
 	@media (max-width: 990px) {
 		.modal {
 			width: 90%;
 		}
 	}
-	.modal-close {
-		border: none;
-		padding: 1rem;
-		cursor: pointer;
-		position: absolute;
-		right: 0;
-		top: 0;
-	}
-
-	.modal-close svg {
-		display: block;
-		margin-left: auto;
-		margin-right: auto;
-		transition: all 0.3s ease-in-out;
-		fill: var(--blue); /* Using Catppuccin blue */
-	}
-	.modal-close:hover svg {
-		fill: var(--red); /* Using Catppuccin red */
-		transform: scale(1.2);
-	}
 	.modal .container {
 		max-height: 90vh;
 		overflow-y: auto;

frontend/src/lib/components/UserEditForm.svelte

@@ -80,7 +80,7 @@
 		}
 	}
 
-	$: isNewUser = user === null;
+	// $: isNewUser = user === null;
 	$: isLoading = user === undefined;
 
 	$: {
@@ -135,7 +135,8 @@
 		label: sub?.name ?? ''
 	}));
 	$: selectedSubscriptionModel =
-		subscriptions.find((sub) => sub?.id === localUser.membership?.subscription_model.id) || null;
+		subscriptions.find((sub) => sub?.name === localUser.membership?.subscription_model.name) ||
+		null;
 
 	/**
 	 * creates groups of categories depending on the first letter
@@ -146,7 +147,7 @@
 		return Object.entries(categories)
 			.sort((a, b) => a[1].category.localeCompare(b[1].category))
 			.reduce(
-				(/** @type {Object.<string, App.Locals['licence_categories']>} */ acc, [_, category]) => {
+				(/** @type {Object.<string, App.Locals['licence_categories']>} */ acc, [, category]) => {
 					const firstLetter = category.category[0];
 					if (!acc[firstLetter]) {
 						acc[firstLetter] = [];
@@ -167,12 +168,12 @@
 	}
 
 	/** @type {import('../../routes/auth/about/[id]/$types').SubmitFunction} */
-	const handleUpdate = async ({ formData, action, cancel }) => {
+	const handleUpdate = async () => {
 		isUpdating = true;
 		return async ({ result }) => {
 			isUpdating = false;
 			if (result.type === 'success' || result.type === 'redirect') {
-				close();
+				dispatch('close');
 			} else {
 				document.querySelector('.modal .container')?.scrollTo({ top: 0, behavior: 'smooth' });
 			}
@@ -371,7 +372,7 @@
 			<div class="licence-categories">
 				<h3>{$t('licence_categories')}</h3>
 				<div class="checkbox-grid">
-					{#each Object.entries(groupedCategories) as [group, categories], groupIndex}
+					{#each Object.entries(groupedCategories) as [, categories], groupIndex}
 						{#if groupIndex > 0}
 							<div class="category-break"></div>
 						{/if}
@@ -417,11 +418,11 @@
 				<div class="subscription-column">
 					<p>
 						<strong>{$t('monthly_fee')}:</strong>
-						{selectedSubscriptionModel?.monthly_fee || '-'}
+						{selectedSubscriptionModel?.monthly_fee || '-'} €
 					</p>
 					<p>
 						<strong>{$t('hourly_rate')}:</strong>
-						{selectedSubscriptionModel?.hourly_rate || '-'}
+						{selectedSubscriptionModel?.hourly_rate || '-'} €
 					</p>
 					{#if selectedSubscriptionModel?.included_hours_per_year}
 						<p>

frontend/src/routes/auth/about/[id]/+page.server.js

@@ -32,10 +32,10 @@ export const actions = {
 		const rawData = formDataToObject(formData);
 		const processedData = processFormData(rawData);
 
-		console.dir(processedData.user.membership);
 		const isCreating = !processedData.user.id || processedData.user.id === 0;
-		console.log('Is updating: ', isCreating);
+		console.log('Is creating: ', isCreating);
-		console.dir(formData);
+		// console.dir(formData);
+		console.dir(processedData.user.membership);
 		const apiURL = `${BASE_API_URI}/backend/users/update/`;
 
 		/** @type {RequestInit} */

frontend/src/routes/auth/about/[id]/+page.svelte

@@ -86,7 +86,14 @@
 
 {#if showModal}
 	<Modal on:close={close}>
-		<UserEditForm {form} {user} {subscriptions} {licence_categories} on:cancel={close} />
+		<UserEditForm
+			{form}
+			{user}
+			{subscriptions}
+			{licence_categories}
+			on:close={close}
+			on:cancel={close}
+		/>
 	</Modal>
 {/if}
 

frontend/src/routes/auth/admin/users/+page.server.js

@@ -8,7 +8,7 @@ import { fail, redirect } from '@sveltejs/kit';
 import { formDataToObject, processFormData } from '$lib/utils/processing';
 
 /** @type {import('./$types').PageServerLoad} */
-export async function load({ locals, params }) {
+export async function load({ locals }) {
 	// redirect user if not logged in
 	if (!locals.user) {
 		throw redirect(302, `/auth/login?next=/auth/users`);

frontend/src/routes/auth/admin/users/+page.svelte

@@ -7,13 +7,7 @@
 	/** @type {import('./$types').ActionData} */
 	export let form;
 
-	$: ({
+	$: ({ users = [], licence_categories = [], subscriptions = [], payments = [] } = $page.data);
-		user,
-		users = [],
-		licence_categories = [],
-		subscriptions = [],
-		payments = []
-	} = $page.data);
 
 	let activeSection = 'users';
 	/** @type{App.Locals['user'] | null} */