fix(form): Form description (#25)

* feat(form) Form description

* style: pnpm format

.github/ISSUE_TEMPLATE/bug_report.md

@@ -4,14 +4,14 @@ about: Create a report to help us improve
 title: ''
 labels: bug
 assignees: SergioRibera
-
 ---
 
 **Describe the bug**
 A clear and concise description of what the bug is.
 
 **To Reproduce**
 Steps to reproduce the behavior:
+
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'
@@ -24,8 +24,9 @@ A clear and concise description of what you expected to happen.
 If applicable, add screenshots to help explain your problem.
 
 **Desktop (please complete the following information):**
- - OS: [e.g. NixOS 24.05 (Uakari)]
- - Wrangler Version [e.g. 3.28.3]
+
+- OS: [e.g. NixOS 24.05 (Uakari)]
+- Wrangler Version [e.g. 3.28.3]
 
 **Additional context**
 Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -4,7 +4,6 @@ about: Suggest an idea for this project
 title: ''
 labels: enhancement
 assignees: ''
-
 ---
 
 **Is your feature request related to a problem? Please describe.**

.github/ISSUE_TEMPLATE/pull_request_template.md

@@ -26,4 +26,4 @@ Remove if not relevant
 
 - [ ] I have performed a self-review of my code
 - [ ] I have made corresponding changes to the documentation
-- [ ] I have made updated the nix environment
+- [ ] I have made updated the nix environment

.github/workflows/deploy.yml

@@ -6,8 +6,8 @@ on:
     branches:
       - main
     paths:
-      - ".github/workflows/deploy.yml"
-      - "wrangler.toml"
+      - '.github/workflows/deploy.yml'
+      - 'wrangler.toml'
 
 jobs:
   deploy:
@@ -29,7 +29,7 @@ jobs:
         with:
           apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
           accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
-          wranglerVersion: "3.77.0"
+          wranglerVersion: '3.77.0'
           secrets: |
             ADMINS
             AUTH_GITHUB_ID

.github/workflows/pr-preview.yml

@@ -41,7 +41,7 @@ jobs:
     steps:
       - uses: actions/checkout@v3
         with:
-          submodules: "recursive"
+          submodules: 'recursive'
           ref: ${{ github.event.pull_request.head.ref }}
           repository: ${{ github.event.pull_request.head.repo.full_name }}
 
@@ -78,7 +78,7 @@ jobs:
         with:
           apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
           accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
-          wranglerVersion: "3.67.0"
+          wranglerVersion: '3.67.0'
           command: pages deploy ./dist --project-name=dashboard --branch="${{ env.BRANCH_NAME }}"
           secrets: |
             ADMINS

src/auth.ts

@@ -1,7 +1,7 @@
-import { SvelteKitAuth } from "@auth/sveltekit"
-import GitHub from "@auth/sveltekit/providers/github"
- 
+import { SvelteKitAuth } from '@auth/sveltekit';
+import GitHub from '@auth/sveltekit/providers/github';
+
 export const { handle, signIn, signOut } = SvelteKitAuth({
-  providers: [GitHub],
-  trustHost: true
-})
+	providers: [GitHub],
+	trustHost: true
+});

src/hooks.server.ts

@@ -1,7 +1,7 @@
-import { sequence } from "@sveltejs/kit/hooks";
+import { sequence } from '@sveltejs/kit/hooks';
 
-import { prepareStylesSSR } from "@svelteuidev/core";
+import { prepareStylesSSR } from '@svelteuidev/core';
 
-import { handle as authHandle } from "./auth";
+import { handle as authHandle } from './auth';
 
 export const handle = sequence(authHandle, prepareStylesSSR);

src/lib/presentation/NavBar.svelte

@@ -22,7 +22,7 @@
 
 		if (selectedProject !== newSelectedProject) {
 			const route = routes[newSelectedProject as keyof typeof routes];
-      selectedProject = newSelectedProject;
+			selectedProject = newSelectedProject;
 			goto(route);
 		}
 	}

src/lib/presentation/NavBar.ts

@@ -1,40 +1,37 @@
-import { writable } from "svelte/store";
+import { writable } from 'svelte/store';
 
 export type NavItem =
-  | {
-    badge?: string;
-    href: string;
-    label: string;
-  }
-  | "separator";
+	| {
+			badge?: string;
+			href: string;
+			label: string;
+	  }
+	| 'separator';
 
 export interface Navbar {
-  selectedProject: string;
-  links: NavItem[];
+	selectedProject: string;
+	links: NavItem[];
 }
 
 export let navbar = writable<Navbar>({
-  selectedProject: "RustLangES",
-  links: [],
+	selectedProject: 'RustLangES',
+	links: []
 });
 
-export function loadNavbar(
-  links: NavItem[],
-  selectedProject = "RustLangES",
-): { navbar: Navbar } {
-  navbar.update((v) => {
-    v.selectedProject = selectedProject;
-    v.links = links;
-    return v;
-  });
+export function loadNavbar(links: NavItem[], selectedProject = 'RustLangES'): { navbar: Navbar } {
+	navbar.update((v) => {
+		v.selectedProject = selectedProject;
+		v.links = links;
+		return v;
+	});
 
-  return {
-    navbar: { links, selectedProject },
-  };
+	return {
+		navbar: { links, selectedProject }
+	};
 }
 
 export function receiveNavbar(data: unknown) {
-  if (typeof data === "object" && data !== null && "navbar" in data) {
-    navbar.set(data.navbar as Navbar);
-  }
+	if (typeof data === 'object' && data !== null && 'navbar' in data) {
+		navbar.set(data.navbar as Navbar);
+	}
 }

src/routes/(dashboard)/+layout.server.ts

@@ -1,22 +1,22 @@
-import * as env from "$env/static/private";
-import { error } from "@sveltejs/kit";
-import type { LayoutServerLoad } from "./$types";
+import * as env from '$env/static/private';
+import { error } from '@sveltejs/kit';
+import type { LayoutServerLoad } from './$types';
 
 export const load: LayoutServerLoad = async (event) => {
-  const session = await event.locals.auth();
+	const session = await event.locals.auth();
 
-  const isNotAdmin = !session?.user || !session.user.email ||
-    !env.ADMINS.split(";").includes(session.user.email);
+	const isNotAdmin =
+		!session?.user || !session.user.email || !env.ADMINS.split(';').includes(session.user.email);
 
-  if (event.url.pathname !== "/" && isNotAdmin) {
-    return error(403)
-  }
+	if (event.url.pathname !== '/' && isNotAdmin) {
+		return error(403);
+	}
 
-  if (isNotAdmin) {
-    event.cookies.delete("sessionToken", { path: "/" });
-    event.cookies.delete("authjs.session-token", { path: "/" });
-    return {};
-  }
+	if (isNotAdmin) {
+		event.cookies.delete('sessionToken', { path: '/' });
+		event.cookies.delete('authjs.session-token', { path: '/' });
+		return {};
+	}
 
-  return { session };
+	return { session };
 };

src/routes/(dashboard)/+layout.svelte

@@ -8,7 +8,7 @@
 
 	setDarkTheme();
 
-	$: selectedProject = $navbar.selectedProject ?? "";
+	$: selectedProject = $navbar.selectedProject ?? '';
 	$: links = $navbar.links ?? [];
 </script>
 

src/routes/(dashboard)/forms/+layout.server.ts

@@ -5,17 +5,20 @@ import type { LayoutServerLoad } from './$types';
 export const load: LayoutServerLoad = async ({ platform }) => {
 	const forms = await loadFormsFromDB(platform);
 
-	const navbar = loadNavbar([
-		{
-			href: '/forms',
-			label: 'Home'
-		},
-		...forms.map((form) => ({
-			href: '/forms/' + form.id,
-			label: form.title,
-			badge: form.deleted === 1 ? 'X' : undefined
-		}))
-	], "Forms");
+	const navbar = loadNavbar(
+		[
+			{
+				href: '/forms',
+				label: 'Home'
+			},
+			...forms.map((form) => ({
+				href: '/forms/' + form.id,
+				label: form.title,
+				badge: form.deleted === 1 ? 'X' : undefined
+			}))
+		],
+		'Forms'
+	);
 
 	return {
 		...navbar,

src/routes/(dashboard)/forms/[slug]/+layout.svelte

@@ -8,6 +8,12 @@
 
 	export let data: { form: Form; questions: Question[] };
 
+	let title = data.form.title;
+	let require_login = data.form.require_login === 1;
+	let edition = data.form.edition;
+	let multiple_times = data.form.multiple_times === 1;
+	let description = data.form.description;
+
 	function handleClick() {
 		const id = $page.params.slug;
 		goto(`/forms/${id}/question/create`);
@@ -34,9 +40,34 @@
 			console.error(error);
 		}
 	}
+
+	async function handleUpdate() {
+		try {
+			const response = await fetch(`/forms/${$page.params.slug}`, {
+				method: 'PATCH',
+				headers: {
+					'Content-Type': 'application/json'
+				},
+				body: JSON.stringify({
+					id_form: parseInt($page.params.slug),
+					title,
+					require_login,
+					edition,
+					multiple_times,
+					description
+				})
+			});
+
+			if (!response.ok) {
+				throw new Error(`Response status: ${response.status}`);
+			}
+		} catch (error) {
+			console.error('Error updating form:', error);
+		}
+	}
 </script>
 
-<PageHeader title={data.form.title}>
+<PageHeader {title}>
 	<Button on:click={handleDelete} color="red">Delete</Button>
 </PageHeader>
 
@@ -47,23 +78,23 @@
 			variant="unstyled"
 			size="xs"
 			placeholder="Write a description"
-			value={data.form.description}
+			bind:value={description}
 		/>
 
 		<TextInput
 			label="Edition"
 			variant="unstyled"
 			size="xs"
 			placeholder="Write a description"
-			value={data.form.edition}
+			bind:value={edition}
 		/>
 
 		<Tooltip label="The user require login to response this form">
-			<Switch label="Require login" checked={data.form.require_login === 1} />
+			<Switch label="Require login" bind:checked={require_login} />
 		</Tooltip>
 
 		<Tooltip label="The user can response this form multiple times">
-			<Switch label="Multiple times" checked={data.form.multiple_times === 1} />
+			<Switch label="Multiple times" bind:checked={multiple_times} />
 		</Tooltip>
 
 		<div class="form-container__new-question">
@@ -79,6 +110,7 @@
 				<li>No questions avilable</li>
 			{/each}
 		</ul>
+		<Button on:click={handleUpdate} color="green">Update</Button>
 	</section>
 
 	<Divider orientation="vertical" mx="xl" />

src/routes/(dashboard)/forms/[slug]/+server.ts

@@ -10,3 +10,28 @@ export async function DELETE({ platform, request }: ServerLoadEvent) {
 
 	return new Response(response.meta.last_row_id);
 }
+
+export async function PATCH({ platform, request }: ServerLoadEvent) {
+	try {
+		const { id_form, title, require_login, edition, multiple_times, description } = await request.json();
+
+		const response = await platform!.env.FORMS_DB.prepare(
+			'UPDATE Form SET title = ?, require_login = ?, edition = ?, multiple_times = ?, description = ? WHERE id = ?'
+		)
+			.bind(title, require_login, edition, multiple_times, description, id_form)
+			.run();
+
+		console.log('Update response:', response);
+
+		return new Response(JSON.stringify({ success: true, id: id_form }), {
+			status: 200,
+			headers: { 'Content-Type': 'application/json' }
+		});
+	} catch (error) {
+		console.error('Error in PATCH:', error);
+		return new Response(JSON.stringify({ error: 'Internal Server Error' }), {
+			status: 500,
+			headers: { 'Content-Type': 'application/json' }
+		});
+	}
+}

src/routes/(dashboard)/forms/[slug]/question/[questionId]/+page.svelte

@@ -12,8 +12,6 @@
 	let dataAux =
 		typeof data.question.data === 'string' ? JSON.parse(data.question.data) : data.question.data;
 
-	console.log('Data loaded:', dataAux);
-
 	dataAux = {
 		canMultiple: dataAux.canMultiple ?? false,
 		required: dataAux.required ?? false,