bartvdbraak/omnidash
1
0
Fork 0
mirror of https://github.com/bartvdbraak/omnidash.git synced 2025-06-28 20:29:13 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat: appearance form validation and update user appearance mode

Browse source
This commit is contained in:
Bart van der Braak 2024-02-06 22:28:17 +01:00
parent af5267d97a
commit a43f74cc7b
4 changed files with 61 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

11
apps/web/src/routes/(dashboard)/settings/appearance/+page.server.ts
View file

@ -10,15 +10,16 @@ export const load: PageServerLoad = async () => {
};
export const actions: Actions = {
default: async (event) => {
const form = await superValidate(event, appearanceFormSchema);
default: async ({ request, locals }: { request: Request; locals: App.Locals }) => {
const form = await superValidate(request, appearanceFormSchema);
console.log('form: ', form);
if (!form.valid) {
return fail(400, {
form
});
}
return {
form
};
await locals.pocketBase
.collection('users')
.update(locals.id, { appearanceMode: form.data.theme });
}
};

3
apps/web/src/routes/(dashboard)/settings/appearance/+page.svelte
View file

@ -4,6 +4,7 @@
import AppearanceForm from './appearance-form.svelte';
export let data: PageData;
export let { form, user } = data;
</script>
<div class="space-y-6">
@ -14,5 +15,5 @@
</p>
</div>
<Separator />
<AppearanceForm data={data.form} />
<AppearanceForm data={form} {user} />
</div>

4
apps/web/src/routes/(dashboard)/settings/appearance/appearance-form.svelte
View file

@ -15,7 +15,9 @@
import * as Form from '$lib/components/ui/form';
import Label from '$lib/components/ui/label/label.svelte';
import { dev } from '$app/environment';
import type { PageData } from '../$types';
export let data: SuperValidated<AppearanceFormSchema>;
export let user: PageData['user'];
</script>
<Form.Root
@ -31,7 +33,7 @@
<Form.Label>Theme</Form.Label>
<Form.Description>Select the theme for the dashboard.</Form.Description>
<Form.Validation />
<Form.RadioGroup class="grid max-w-xl grid-cols-3 gap-8 pt-2" orientation="horizontal">
<Form.RadioGroup class="grid max-w-xl grid-cols-3 gap-8 pt-2" orientation="horizontal" value={user?.appearanceMode}>
<Label for="light" class="[&:has([data-state=checked])>div]:border-primary">
<Form.RadioItem id="light" value="light" class="sr-only" />
<div class="items-center rounded-md border-2 border-muted p-1 hover:border-accent">