added support for saving and loading applications (no session/database yet)

2025-08-16 21:32:43 -04:00
parent 4936f02278
commit 350aeaf677
6 changed files with 464 additions and 344 deletions
--- a/ui/src/components/application/ApplicationForm.vue
+++ b/ui/src/components/application/ApplicationForm.vue
@@ -2,93 +2,149 @@
 import Button from '@/components/ui/button/Button.vue';
 import Checkbox from '@/components/ui/checkbox/Checkbox.vue';
 import {
-    FormControl,
-    FormDescription,
-    FormField,
-    FormItem,
-    FormLabel,
-    FormMessage,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
 } from '@/components/ui/form'
 import Input from '@/components/ui/input/Input.vue';
 import Label from '@/components/ui/label/Label.vue';
 import Textarea from '@/components/ui/textarea/Textarea.vue';
 import { toTypedSchema } from '@vee-validate/zod';
 import { Form } from 'vee-validate';
+import { onMounted, readonly, ref } from 'vue';
 import * as z from 'zod';

 const formSchema = toTypedSchema(z.object({
-    age: z.coerce.number({ invalid_type_error: "Must be a number" }).min(0, "Cannot be less than 0"),
-    name: z.string(),
-    playtime: z.coerce.number({ invalid_type_error: "Must be a number", }).min(0, "Cannot be less than 0"),
-    hobbies: z.string(),
-    military: z.boolean(),
-    communities: z.string(),
-    joinReason: z.string(),
-    milsimAttraction: z.string(),
-    referral: z.string(),
-    steamProfile: z.string(),
-    timezone: z.string(),
-    canAttendSaturday: z.boolean(),
-    interests: z.string(),
-    aknowledgeRules: z.literal(true, {
-        errorMap: () => ({ message: "Required" })
-    }),
+  age: z.coerce.number({ invalid_type_error: "Must be a number" }).min(0, "Cannot be less than 0"),
+  name: z.string(),
+  playtime: z.coerce.number({ invalid_type_error: "Must be a number", }).min(0, "Cannot be less than 0"),
+  hobbies: z.string(),
+  military: z.boolean(),
+  communities: z.string(),
+  joinReason: z.string(),
+  milsimAttraction: z.string(),
+  referral: z.string(),
+  steamProfile: z.string(),
+  timezone: z.string(),
+  canAttendSaturday: z.boolean(),
+  interests: z.string(),
+  aknowledgeRules: z.literal(true, {
+    errorMap: () => ({ message: "Required" })
+  }),
 }))

-function onSubmit(val) {
-    console.log(val)
+type ApplicationDto = Partial<{
+  age: number | string
+  name: string
+  playtime: number | string
+  hobbies: string
+  military: boolean
+  communities: string
+  joinReason: string
+  milsimAttraction: string
+  referral: string
+  steamProfile: string
+  timezone: string
+  canAttendSaturday: boolean
+  interests: string
+  aknowledgeRules: boolean
+}>
+
+const fallbackInitials = {
+  military: false,
+  canAttendSaturday: false,
+  aknowledgeRules: false,
 }

+const initialValues = ref<Record<string, unknown> | null>(null);
+const readOnly = ref(false);
+
+async function onSubmit(val: any) {
+  if (readOnly.value) return // guard (shouldn't be visible anyway)
+  await fetch('http://localhost:3000/application', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(val),
+  })
+}
+
+async function loadApplication(): Promise<ApplicationDto | null> {
+  const res = await fetch('http://localhost:3000/me/application')
+  if (res.status === 204) return null
+  if (!res.ok) throw new Error('Failed to load application')
+  const json = await res.json()
+  // Accept either the object at root or under `application`
+  return (json?.application ?? json) as ApplicationDto
+}
+
+onMounted(async () => {
+  try {
+    const data = await loadApplication()
+    if (data) {
+      // Optional: coerce/normalize incoming payload to field names/types if needed
+      initialValues.value = {
+        ...fallbackInitials, // ensure booleans exist even if API omits them
+        ...data,
+      }
+      readOnly.value = true;
+    } else {
+      // 204 or empty → use your preset three fields only
+      initialValues.value = { ...fallbackInitials }
+    }
+  } catch (e) {
+    console.error(e)
+    // On error, also fall back
+    initialValues.value = { ...fallbackInitials }
+  }
+})
 </script>

 <template>
-  <Form :validation-schema="formSchema"
-  :initial-values="{
-    military: false,
-    canAttendSaturday: false,
-    aknowledgeRules: false,
-  }"
-   @submit="onSubmit" class="space-y-6 max-w-3xl mx-auto my-20">
+  <Form v-if="initialValues" :validation-schema="formSchema" :initial-values="initialValues" @submit="onSubmit"
+    class="space-y-6 max-w-3xl mx-auto my-20">
    <!-- Age -->
-    <FormField name="age" v-slot="{ componentField }">
+    <FormField name="age" v-slot="{ value, handleChange }">
      <FormItem>
        <FormLabel>What is your age?</FormLabel>
        <FormControl>
-          <Input v-bind="componentField" />
+          <Input :model-value="value" @update:model-value="handleChange" :disabled="readOnly" />
        </FormControl>
        <FormMessage />
      </FormItem>
    </FormField>

    <!-- Name -->
-    <FormField name="name" v-slot="{ componentField }">
+    <FormField name="name" v-slot="{ value, handleChange }">
      <FormItem>
        <FormLabel>What name will you be going by within the community?</FormLabel>
        <FormDescription>This name must be consistent across platforms.</FormDescription>
        <FormControl>
-          <Input v-bind="componentField" />
+          <Input :model-value="value" @update:model-value="handleChange" :disabled="readOnly" />
        </FormControl>
        <FormMessage />
      </FormItem>
    </FormField>

    <!-- Playtime -->
-    <FormField name="playtime" v-slot="{ componentField }">
+    <FormField name="playtime" v-slot="{ value, handleChange }">
      <FormItem>
        <FormLabel>How long have you played Arma 3 for (in hours)?</FormLabel>
        <FormControl>
-          <Input type="number" v-bind="componentField" />
+          <Input type="number" :model-value="value" @update:model-value="handleChange" :disabled="readOnly" />
        </FormControl>
        <FormMessage />
      </FormItem>
    </FormField>

    <!-- Hobbies -->
-    <FormField name="hobbies" v-slot="{ componentField }">
+    <FormField name="hobbies" v-slot="{ value, handleChange }">
      <FormItem>
        <FormLabel>What hobbies do you like to participate in outside of gaming?</FormLabel>
        <FormControl>
-          <Textarea rows="4" class="resize-none" v-bind="componentField" />
+          <Textarea rows="4" class="resize-none" :model-value="value" @update:model-value="handleChange" :disabled="readOnly" />
        </FormControl>
        <FormMessage />
      </FormItem>
@@ -100,7 +156,7 @@ function onSubmit(val) {
        <FormLabel>Have you ever served in the military?</FormLabel>
        <FormControl>
          <div class="flex items-center gap-2">
-            <Checkbox :checked="value ?? false" @update:checked="handleChange" />
+            <Checkbox :checked="value ?? false" @update:checked="handleChange" :disabled="readOnly" />
            <span>Yes (checked) / No (unchecked)</span>
          </div>
        </FormControl>
@@ -109,51 +165,51 @@ function onSubmit(val) {
    </FormField>

    <!-- Other communities (freeform) -->
-    <FormField name="communities" v-slot="{ componentField }">
+    <FormField name="communities" v-slot="{ value, handleChange }">
      <FormItem>
        <FormLabel>Are you a part of any other communities? If so, which ones? If none, type "No"</FormLabel>
        <FormControl>
-          <Input v-bind="componentField" />
+          <Input :model-value="value" @update:model-value="handleChange" :disabled="readOnly" />
        </FormControl>
        <FormMessage />
      </FormItem>
    </FormField>

    <!-- Why join -->
-    <FormField name="joinReason" v-slot="{ componentField }">
+    <FormField name="joinReason" v-slot="{ value, handleChange }">
      <FormItem>
        <FormLabel>Why do you want to join our community?</FormLabel>
        <FormControl>
-          <Textarea rows="4" class="resize-none" v-bind="componentField" />
+          <Textarea rows="4" class="resize-none" :model-value="value" @update:model-value="handleChange" :disabled="readOnly" />
        </FormControl>
        <FormMessage />
      </FormItem>
    </FormField>

    <!-- Attraction to milsim -->
-    <FormField name="milsimAttraction" v-slot="{ componentField }">
+    <FormField name="milsimAttraction" v-slot="{ value, handleChange }">
      <FormItem>
        <FormLabel>What attracts you to the Arma 3 milsim playstyle?</FormLabel>
        <FormControl>
-          <Textarea rows="4" class="resize-none" v-bind="componentField" />
+          <Textarea rows="4" class="resize-none" :model-value="value" @update:model-value="handleChange" :disabled="readOnly" />
        </FormControl>
        <FormMessage />
      </FormItem>
    </FormField>

    <!-- Referral (freeform) -->
-    <FormField name="referral" v-slot="{ componentField }">
+    <FormField name="referral" v-slot="{ value, handleChange }">
      <FormItem>
        <FormLabel>Where did you hear about us? (If another member, who?)</FormLabel>
        <FormControl>
-          <Input placeholder="e.g., Reddit / Member: Alice" v-bind="componentField" />
+          <Input placeholder="e.g., Reddit / Member: Alice" :model-value="value" @update:model-value="handleChange" :disabled="readOnly" />
        </FormControl>
        <FormMessage />
      </FormItem>
    </FormField>

    <!-- Steam profile -->
-    <FormField name="steamProfile" v-slot="{ componentField }">
+    <FormField name="steamProfile" v-slot="{ value, handleChange }">
      <FormItem>
        <FormLabel>Steam profile link</FormLabel>
        <FormDescription>
@@ -161,18 +217,19 @@ function onSubmit(val) {
          <code>https://steamcommunity.com/profiles/STEAMID64/</code>
        </FormDescription>
        <FormControl>
-          <Input type="url" placeholder="https://steamcommunity.com/profiles/7656119..." v-bind="componentField" />
+          <Input type="url" placeholder="https://steamcommunity.com/profiles/7656119..." :model-value="value"
+            @update:model-value="handleChange" :disabled="readOnly" />
        </FormControl>
        <FormMessage />
      </FormItem>
    </FormField>

    <!-- Timezone -->
-    <FormField name="timezone" v-slot="{ componentField }">
+    <FormField name="timezone" v-slot="{ value, handleChange }">
      <FormItem>
        <FormLabel>What time zone are you in?</FormLabel>
        <FormControl>
-          <Input placeholder="e.g., AEST, EST, UTC+10" v-bind="componentField" />
+          <Input placeholder="e.g., AEST, EST, UTC+10" :model-value="value" @update:model-value="handleChange" :disabled="readOnly" />
        </FormControl>
        <FormMessage />
      </FormItem>
@@ -184,7 +241,7 @@ function onSubmit(val) {
        <FormLabel>Are you able to attend weekly operations Saturdays @ 7pm CST?</FormLabel>
        <FormControl>
          <div class="flex items-center gap-2">
-            <Checkbox :checked="value ?? false" @update:checked="handleChange" />
+            <Checkbox :model-value="value ?? false" @update:model-value="handleChange" :disabled="readOnly" />
            <span>Yes (checked) / No (unchecked)</span>
          </div>
        </FormControl>
@@ -193,11 +250,11 @@ function onSubmit(val) {
    </FormField>

    <!-- Interests / Playstyle (freeform) -->
-    <FormField name="interests" v-slot="{ componentField }">
+    <FormField name="interests" v-slot="{ value, handleChange }">
      <FormItem>
        <FormLabel>Which playstyles interest you?</FormLabel>
        <FormControl>
-          <Input placeholder="e.g., Rifleman; Medic; Pilot" v-bind="componentField" />
+          <Input placeholder="e.g., Rifleman; Medic; Pilot" :model-value="value" @update:model-value="handleChange" :disabled="readOnly" />
        </FormControl>
        <FormMessage />
      </FormItem>
@@ -209,8 +266,9 @@ function onSubmit(val) {
        <FormLabel>Community Code of Conduct</FormLabel>
        <FormControl>
          <div class="flex items-center gap-2">
-            <Checkbox :checked="value" @update:model-value="handleChange" />
-            <span>By checking this box, you accept the <Button variant="link" class="p-0">Code of Conduct</Button>.</span>
+            <Checkbox :model-value="value" @update:model-value="handleChange" :disabled="readOnly" />
+            <span>By checking this box, you accept the <Button variant="link" class="p-0">Code of
+                Conduct</Button>.</span>
          </div>
        </FormControl>
        <FormMessage />
@@ -218,7 +276,7 @@ function onSubmit(val) {
    </FormField>

    <div class="pt-2">
-      <Button type="submit" :onClick="() => console.log('hi')">Submit Application</Button>
+      <Button type="submit" :onClick="() => console.log('hi')" :disabled="readOnly">Submit Application</Button>
    </div>
  </Form>
 </template>