Question & Actions Lists

docs/HITL_Docs/PROMPTS_JAZ.md

@@ -0,0 +1,11 @@
+Read through the ARCHITECTURE.md and FUNCTIONAL.md files get to grips with the project
+My task is to create a component that displays:
+
+- A section header
+- A question
+- an input for the user to answer the question
+- an additional input for the user to declare 'actions'
+- a skip button
+- a submit button
+  Don't do any styling, I will handle that later. I just want a template component that I can edit.
+  Do you have any questions for me regarding the task? If not, please suggest some code for me

package.json

@@ -14,7 +14,8 @@
 		"format:check": "prettier . --check",
 		"format": "prettier . --write",
 		"test:unit": "vitest",
-		"test": "npm run test:unit -- --run"
+		"test": "npm run test:unit -- --run",
+		"db:reset": "supabase db reset && ./scripts/seed-test-data.sh"
 	},
 	"devDependencies": {
 		"@eslint/compat": "^1.2.5",

src/app.css

@@ -24,7 +24,7 @@ body {
 
 .dev {
 	margin: 1rem;
-	outline: 2px dashed var(--color-teal);
+	outline: 2px solid var(--color-teal);
 	padding: 1rem;
 }
 

src/lib/components/cards/QuestionCard.svelte

@@ -0,0 +1,153 @@
+<script lang="ts">
+	import { getQuestionById } from '$lib/services/database';
+	import SubmitButton from '../ui/SubmitButton.svelte';
+	import type { DbResult } from '$lib/services/database/types';
+	import type { Database } from '$lib/types/supabase';
+	import { getLatestResponses } from '$lib/services/database/responses';
+	import { getLatestActions } from '$lib/services/database';
+	import ToggleStatus from '../ui/ToggleStatus.svelte';
+
+	type Question = Database['public']['Tables']['questions']['Row'];
+
+	//Delete later --> for development only
+	const user_id = '550e8400-e29b-41d4-a716-446655440005';
+
+	interface Props {
+		questionId: string;
+	}
+
+	let { questionId }: Props = $props();
+
+	const getData = async () => {
+		const question = await getQuestionById(questionId);
+		const previousResponse = await getLatestResponse();
+
+		if (previousResponse) responseInput = previousResponse;
+
+		return {
+			question: question || null,
+			previousResponse: previousResponse || null
+		};
+	};
+
+	const getLatestResponse = async () => {
+		const response = await getLatestResponses(user_id);
+		if (response?.data) {
+			const questionResponse = response.data.find((r) => r.question_id === questionId);
+			const previousAction = await getLatestAction(questionResponse?.id);
+			if (previousAction?.description) {
+				actionsInput = previousAction.description;
+				actionType = previousAction.type;
+			}
+			if (questionResponse?.visibility) isPublic = questionResponse?.visibility;
+			if (questionResponse?.id) responseId = questionResponse?.id;
+			return questionResponse?.response_text;
+		}
+		return null;
+	};
+	let responseInput = $state('');
+	let responseId = $state('');
+
+	const getLatestAction = async (response_Id: string | undefined) => {
+		const response = await getLatestActions(user_id);
+		if (response?.data) {
+			const actionResponse = response.data.find((r) => r.response_id === response_Id);
+			return actionResponse;
+		}
+		return null;
+	};
+	let actionType = $state('');
+	let actionsInput = $state('');
+	let isPublic = $state('private');
+	$inspect(isPublic);
+
+	const toggleVisibility = () => {
+		isPublic = isPublic === 'public' ? 'private' : 'public';
+	};
+</script>
+
+{#await getData() then response}
+	{#if response.question && response.question.data}
+		<div class=" m-auto flex min-h-[90dvh] w-sm flex-col justify-around rounded-3xl p-5 shadow-2xl">
+			<header>
+				<h1 class="text-center text-2xl">{response.question.data.category}</h1>
+			</header>
+
+			<ToggleStatus {isPublic} {toggleVisibility} />
+
+			<div class="flex flex-col">
+				<label for="response-{questionId}" class="text-xl"
+					>{response.question.data.question_text || 'Question'}</label
+				>
+				<textarea
+					id="response-{questionId}"
+					bind:value={responseInput}
+					placeholder="Enter your response here..."
+					rows="4"
+					class="text-area"
+				></textarea>
+			</div>
+
+			<div>
+				<h2 class="text-xl">A description of what actions are for</h2>
+				<label for="cars">Action type:</label>
+				<select id="action-type-{questionId}" bind:value={actionType}>
+					<option>Action type</option>
+					<option value="workplace_adjustment">Workplace adjustment</option>
+					<option value="schedule_adjustment">Schedule adjustment</option>
+					<option value="communication">Communication</option>
+					<option value="schedule_flexibility">Schedule flexibility</option>
+				</select>
+
+				<div class="flex flex-col">
+					<label for="actions-{questionId}">Actions needed:</label>
+					<textarea
+						id="actions-{questionId}"
+						bind:value={actionsInput}
+						placeholder="Enter your response here..."
+						rows="3"
+						class="text-area"
+					></textarea>
+				</div>
+			</div>
+
+			<div class="flex justify-around">
+				<SubmitButton
+					text="Skip"
+					status="skipped"
+					{responseInput}
+					{actionsInput}
+					{actionType}
+					{isPublic}
+					{responseId}
+				/>
+				<SubmitButton
+					text="Submit"
+					status="answered"
+					{responseInput}
+					{actionsInput}
+					{actionType}
+					{isPublic}
+					{responseId}
+				/>
+			</div>
+		</div>
+	{:else}
+		<div class=" m-auto flex min-h-[90dvh] w-sm flex-col justify-around rounded-3xl p-5 shadow-2xl">
+			Sorry! We can't load you're questions right now. Please try again later.
+		</div>
+	{/if}
+{/await}
+
+<style>
+	.text-area {
+		border: solid 2px var(--pink);
+		border-radius: 10px;
+		padding: 10px;
+		outline: none;
+	}
+
+	.text-area:focus {
+		border: solid 2px var(--teal);
+	}
+</style>

src/lib/components/layouts/Footer.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	let { devMode, profileId } = $props();
+</script>
+
+<footer class="sticky bottom-0 z-50 w-full border-t border-gray-200 bg-white">
+  <div id="dev-info" class="flex flex-row justify-between">
+    <div class="dev"></div>
+
+    <div class="dev">
+      {#if profileId}
+        <p>Profile ID: {profileId}</p>
+      {:else}
+        <p>Not Logged In</p>
+      {/if}
+    </div>
+
+    <div class="dev">
+      <p>Dev Mode: {devMode}</p>
+    </div>
+  </div>
+</footer>

src/lib/components/header.svelte → src/lib/components/layouts/Header.svelte

@@ -1,11 +1,9 @@
 <script lang="ts">
 	import { getContext } from 'svelte';
-	import Button from './Button.svelte';
+	import Button from '$lib/components/ui/Button.svelte';
 
 	const toggleDevMode = getContext<() => void>('toggleDevMode');
-	const onToggleDevMode = () => {
-		toggleDevMode();
-	};
+	const onToggleDevMode = () => { toggleDevMode() };
 </script>
 
 <header class="sticky top-0 z-50 w-full border-b border-gray-200 bg-white">
@@ -25,7 +23,7 @@
 			<!-- Dev Mode Toggle (Development Only) -->
 			<button
 				onclick={onToggleDevMode}
-				class="dev button inline-flex items-center rounded-md border border-gray-300 bg-gray-100 px-3 py-2 text-sm font-medium text-gray-700 transition-colors duration-200 hover:bg-gray-200 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none"
+				class="button inline-flex items-center rounded-md border border-gray-300 bg-gray-100 px-3 py-2 text-sm font-medium text-gray-700 transition-colors duration-200 hover:bg-gray-200 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none"
 				type="button"
 				aria-label="Toggle development mode"
 			>

src/lib/components/ui/SubmitButton.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { createAction } from '$lib/services/database/actions';
+	import { createResponse } from '$lib/services/database/responses';
+
+	//Delete later --> for development only
+	const user_id = '550e8400-e29b-41d4-a716-446655440005';
+	const questionId = 'bacc6ffa-b589-4bdc-8eb8-d29eeef7f153';
+
+	interface Props {
+		text: string;
+		responseInput: string;
+		actionsInput: string;
+		actionType: string;
+		status: string;
+		isPublic: string;
+		responseId: string;
+	}
+
+	let { text, responseInput, actionsInput, actionType, status, isPublic, responseId }: Props =
+		$props();
+
+	function handleSubmit() {
+		createResponse(user_id, {
+			response_text: responseInput,
+			question_id: questionId,
+			status: status,
+			visibility: isPublic
+		});
+		createAction(user_id, { type: actionType, description: actionsInput, response_id: responseId });
+	}
+</script>
+
+<button type="button" onclick={handleSubmit} class="rounded-2xl border p-4">{text}</button>

src/lib/components/ui/ToggleStatus.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	let { isPublic, toggleVisibility } = $props();
+</script>
+
+<div class="flex items-center gap-3">
+	<div class="relative inline-block h-5 w-11">
+		<input
+			checked={toggleVisibility}
+			onclick={toggleVisibility}
+			id="switch-component"
+			type="checkbox"
+			class="peer h-5 w-11 cursor-pointer appearance-none rounded-full bg-slate-100 transition-colors duration-300 checked:bg-[var(--teal)]"
+		/>
+		<label
+			for="switch-component"
+			class="absolute top-0 left-0 h-5 w-5 cursor-pointer rounded-full border border-slate-300 bg-white shadow-sm transition-transform duration-300 peer-checked:translate-x-6 peer-checked:border-[var(--teal)]"
+		>
+		</label>
+	</div>
+	<span class=" text-sm font-medium">{isPublic}</span>
+</div>