feat(forms) Add view answers

package.json

@@ -10,7 +10,7 @@
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"lint": "prettier --check . && eslint .",
 		"format": "prettier --write .",
-		"seed": "echo \"#################################\nNode version should be 22.9 or above\n#################################\"; node --experimental-sqlite seeder/index.js",
+		"seed": "node --experimental-sqlite seeder/index.js",
 		"test:integration": "playwright test",
 		"test:unit": "vitest"
 	},

seeder/db.js

@@ -2,7 +2,7 @@ import { DatabaseSync } from 'node:sqlite';
 import { BOLD, DIM, getIdentation, RESET, UP_ARROW } from './util.js';
 
 const defaultDB =
-	'.wrangler/state/v3/d1/56d060060cda9b9bbea5ad9ecf937a6610673e7d83efb6a4863cae9a061cc103.sqlite';
+	'.wrangler/state/v3/d1/miniflare-D1DatabaseObject/56d060060cda9b9bbea5ad9ecf937a6610673e7d83efb6a4863cae9a061cc103.sqlite';
 export const database = new DatabaseSync(process.argv[2] ?? defaultDB);
 
 export function runSql(sql, ...args) {

seeder/index.js

@@ -61,7 +61,7 @@ seedTable(
 	},
 	(_, form_id) => {
 		const questions = seedTable(CONFIG.questionsPerForm, 'Question', {
-			form_id: () => form_id,
+			form_id: () => form_id + 1,
 			title: () => faker.lorem.sentence({ min: 1, max: 5 }),
 			description: () => faker.lorem.paragraph(),
 			type: () => faker.helpers.arrayElement(['text', 'questionText', 'questionText', 'options', 'options']),
@@ -139,7 +139,7 @@ seedTable(
 					// TODO:
 					session_id: () => form_offset + session_idx + 1,
 					question_id: (_, idx) => form_id * CONFIG.questionsPerForm + idx + 1,
-					form_id: () => form_id,
+					form_id: () => form_id + 1,
 					data: ({ question_id }) => {
 						const questions = getRows('Question');
 						const question = questions[question_id - 1];

src/lib/forms/models.d.ts

@@ -17,6 +17,35 @@ export interface Form {
 	created_at: number;
 }
 
+export interface Session {
+	id: number;
+	device_id: string;
+	form_id: number;
+	external_id: number;
+	token: string;
+	last_answer: number;
+	steps: string;
+
+	/** Created datetime in seconds */
+	created_at: number;
+}
+
+export interface Answer {
+	id: number;
+	form_id: number;
+	question_id: number;
+	session_id: number;
+	data: string;
+}
+
+export interface External {
+	id: number;
+	external_id: string;
+	kind: string;
+	email: string;
+	token: string;
+}
+
 type Step<Type extends string, Data extends object> = {
 	id: number;
 	title: string;

src/lib/forms/service/stores/session.ts

@@ -0,0 +1,34 @@
+import { writable } from 'svelte/store';
+import type { Answer, Session } from '../../models';
+
+export const sessionDetails = writable<Session>();
+export const answer = writable<Answer[]>();
+
+export async function loadSessionDetailsFromDB(
+	platform: Readonly<App.Platform> | undefined,
+	params: number
+): Promise<Session & { answers: Answer[] }> {
+	const session_res = await platform!.env.FORMS_DB.prepare('SELECT * FROM Session WHERE id = ?')
+		.bind(params)
+		.run();
+	sessionDetails.set(session_res.results[0]);
+
+	const answer_res = await platform!.env.FORMS_DB.prepare(
+		'SELECT * FROM Answer WHERE session_id = ?'
+	)
+		.bind(params)
+		.run();
+	answer.set(answer_res.results);
+
+	const response = { answers: answer_res.results, ...session_res.results[0] };
+
+	return response;
+}
+
+export function receiveSessionDetails(data: unknown) {
+	if (typeof data === 'object' && data !== null && 'sessionDetails' in data) {
+		sessionDetails.set(data.sessionDetails as Session & { answers: Answer[] });
+	} else {
+		console.error('Invalid data format in receiveSession:', data);
+	}
+}

src/lib/forms/service/stores/sessions.ts

@@ -0,0 +1,53 @@
+import { writable } from 'svelte/store';
+import type { External, Session } from '../../models';
+
+export const sessions = writable<(Session & { external: External })[]>();
+
+export async function loadSessionsFromDB(
+	platform: Readonly<App.Platform> | undefined,
+	formId: number
+): Promise<(Session & { external: External })[]> {
+	const query = `
+		SELECT 
+			s.*,
+			e.external_id as e_external_id,
+			e.kind as e_kind,
+			e.email as e_email,
+			e.token as e_token
+		FROM Session s
+		LEFT JOIN External e ON s.external_id = e.id
+		WHERE s.form_id = ?
+	`;
+
+	const sessions_res = await platform!.env.FORMS_DB.prepare(query).bind(formId).all();
+
+	const sessionsWithExternal = sessions_res.results.map((row) => ({
+		id: row.id,
+		device_id: row.device_id,
+		form_id: row.form_id,
+		external_id: row.external_id,
+		token: row.token,
+		last_answer: row.last_answer,
+		steps: row.steps,
+		created_at: row.created_at,
+		external: {
+			id: row.external_id,
+			external_id: row.e_external_id,
+			kind: row.e_kind,
+			email: row.e_email,
+			token: row.e_token
+		}
+	}));
+
+	sessions.set(sessionsWithExternal);
+
+	return sessionsWithExternal;
+}
+
+export function receiveSessions(data: unknown) {
+	if (typeof data === 'object' && data !== null && 'sessions' in data) {
+		sessions.set(data.sessions as (Session & { external: External })[]);
+	} else {
+		console.error('Invalid data format in receiveSessions:', data);
+	}
+}

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

@@ -65,6 +65,11 @@
 			console.error('Error updating form:', error);
 		}
 	}
+
+	async function handleAnswers() {
+		const id = $page.params.slug;
+		goto(`/forms/${id}/answers`);
+	}
 </script>
 
 <PageHeader {title}>
@@ -111,6 +116,7 @@
 			{/each}
 		</ul>
 		<Button on:click={handleUpdate} color="green">Update</Button>
+		<Button on:click={handleAnswers} color="orange">View Answers</Button>
 	</section>
 
 	<Divider orientation="vertical" mx="xl" />

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

@@ -0,0 +1,8 @@
+import type { PageServerLoad } from './$types';
+import { loadSessionsFromDB } from '$lib/forms/service/stores/sessions';
+
+export const load: PageServerLoad = async ({ platform, params }) => {
+	const sessions = await loadSessionsFromDB(platform, parseInt(params.slug));
+
+	return { sessions };
+};

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

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import { receiveSessions } from '$lib/forms/service/stores/sessions';
+
+	export let data;
+	receiveSessions(data);
+
+	console.log(data);
+</script>
+
+<h1>ANSWERS</h1>
+
+<ul>
+	{#each data.sessions as session, i}
+		<li>
+			<a href={`${$page.url.pathname}/${session.id}`}>
+				Session #{i + 1}
+			</a>
+
+			<p>{session.external.email}</p>
+		</li>
+	{:else}
+		<li>No sessions avilable</li>
+	{/each}
+</ul>

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

@@ -0,0 +1,8 @@
+import type { PageServerLoad } from './$types';
+import { loadSessionDetailsFromDB } from '$lib/forms/service/stores/session';
+
+export const load: PageServerLoad = async ({ platform, params }) => {
+	const sessionDetails = await loadSessionDetailsFromDB(platform, parseInt(params.session_id));
+
+	return { sessionDetails };
+};

src/routes/(dashboard)/forms/[slug]/answers/[session_id]/+page.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { receiveSessionDetails } from '$lib/forms/service/stores/session';
+
+	export let data;
+	receiveSessionDetails(data);
+
+	console.log(data);
+
+	/*
+  - Si existe token
+    - No ha terminado el form
+      - No lo ha terminado, el wey
+  - No existe
+    - Ya terminó pa
+
+-------------------------------------------
+
+  - Mostrar las listas de las respuestas
+  */
+</script>
+
+{#if data.sessionDetails.token}
+	<p>No ha terminado</p>
+{:else}
+	<p>Ya terminó el questionario</p>
+{/if}
+
+<h2>Answers</h2>
+{#each data.sessionDetails.answers as answer}
+	<h4>{data.questions.find((question) => question.id === answer.question_id).title}</h4>
+	{#if answer.data}
+		<li>{answer.data}</li>
+	{:else}
+		<li>No answer</li>
+	{/if}
+{/each}