From cce2866b52ab2ccb27e36ed65b0a797e836abf57 Mon Sep 17 00:00:00 2001 From: Alex <$(pass /github/email)> Date: Fri, 7 Feb 2025 22:00:43 +0100 Subject: [PATCH] frontend cleanup --- frontend/src/lib/components/InputField.svelte | 1 - frontend/src/lib/components/Modal.svelte | 39 ------------------- .../src/lib/components/UserEditForm.svelte | 17 ++++---- .../routes/auth/about/[id]/+page.server.js | 6 +-- .../src/routes/auth/about/[id]/+page.svelte | 9 ++++- .../routes/auth/admin/users/+page.server.js | 2 +- .../src/routes/auth/admin/users/+page.svelte | 8 +--- 7 files changed, 22 insertions(+), 60 deletions(-) diff --git a/frontend/src/lib/components/InputField.svelte b/frontend/src/lib/components/InputField.svelte index 169ec93..8011140 100644 --- a/frontend/src/lib/components/InputField.svelte +++ b/frontend/src/lib/components/InputField.svelte @@ -1,5 +1,4 @@
@@ -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; diff --git a/frontend/src/lib/components/UserEditForm.svelte b/frontend/src/lib/components/UserEditForm.svelte index e25ae53..58e1e43 100644 --- a/frontend/src/lib/components/UserEditForm.svelte +++ b/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.} */ acc, [_, category]) => { + (/** @type {Object.} */ 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 @@

{$t('licence_categories')}

- {#each Object.entries(groupedCategories) as [group, categories], groupIndex} + {#each Object.entries(groupedCategories) as [, categories], groupIndex} {#if groupIndex > 0}
{/if} @@ -417,11 +418,11 @@

{$t('monthly_fee')}: - {selectedSubscriptionModel?.monthly_fee || '-'} + {selectedSubscriptionModel?.monthly_fee || '-'} €

{$t('hourly_rate')}: - {selectedSubscriptionModel?.hourly_rate || '-'} + {selectedSubscriptionModel?.hourly_rate || '-'} €

{#if selectedSubscriptionModel?.included_hours_per_year}

diff --git a/frontend/src/routes/auth/about/[id]/+page.server.js b/frontend/src/routes/auth/about/[id]/+page.server.js index 3a345e3..0f25201 100644 --- a/frontend/src/routes/auth/about/[id]/+page.server.js +++ b/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.dir(formData); + console.log('Is creating: ', isCreating); + // console.dir(formData); + console.dir(processedData.user.membership); const apiURL = `${BASE_API_URI}/backend/users/update/`; /** @type {RequestInit} */ diff --git a/frontend/src/routes/auth/about/[id]/+page.svelte b/frontend/src/routes/auth/about/[id]/+page.svelte index 1479cb7..65477c7 100644 --- a/frontend/src/routes/auth/about/[id]/+page.svelte +++ b/frontend/src/routes/auth/about/[id]/+page.svelte @@ -86,7 +86,14 @@ {#if showModal} - + {/if} diff --git a/frontend/src/routes/auth/admin/users/+page.server.js b/frontend/src/routes/auth/admin/users/+page.server.js index c6c2d81..d9057ea 100644 --- a/frontend/src/routes/auth/admin/users/+page.server.js +++ b/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`); diff --git a/frontend/src/routes/auth/admin/users/+page.svelte b/frontend/src/routes/auth/admin/users/+page.svelte index 98a294b..26aba61 100644 --- a/frontend/src/routes/auth/admin/users/+page.svelte +++ b/frontend/src/routes/auth/admin/users/+page.svelte @@ -7,13 +7,7 @@ /** @type {import('./$types').ActionData} */ export let form; - $: ({ - user, - users = [], - licence_categories = [], - subscriptions = [], - payments = [] - } = $page.data); + $: ({ users = [], licence_categories = [], subscriptions = [], payments = [] } = $page.data); let activeSection = 'users'; /** @type{App.Locals['user'] | null} */