17th-Ranger-Battalion-ORG/milsim-site-v4
8
1
Fork 0
Code Issues 23 Pull Requests 2 Actions 2 Packages Projects Releases Wiki Activity

wrapped up most of the application stuff for now (pending database integration)

Browse Source
This commit is contained in:
ajdj100
2025-08-17 17:11:55 -04:00
parent 7913b45629
commit fe12c820ee
4 changed files with 123 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
ui/src/components/application/ApplicationForm.vue
View File

@@ -10,11 +10,10 @@ import {
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 { onMounted, ref } from 'vue';
import * as z from 'zod';
const formSchema = toTypedSchema(z.object({
@@ -36,22 +35,6 @@ const formSchema = toTypedSchema(z.object({
}),
}))
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,
@@ -59,44 +42,23 @@ const fallbackInitials = {
aknowledgeRules: false,
}
const props = defineProps<{
readOnly: boolean,
data: object,
}>()
const emit = defineEmits(['submit']);
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),
})
emit('submit', 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
onMounted(() => {
if (props.data) {
initialValues.value = { ...props.data, ...fallbackInitials }
} else {
initialValues.value = { ...fallbackInitials }
}
})
@@ -104,7 +66,7 @@ onMounted(async () => {
<template>
<Form v-if="initialValues" :validation-schema="formSchema" :initial-values="initialValues" @submit="onSubmit"
class="space-y-6 max-w-3xl mx-auto my-20">
class="space-y-6">
<!-- Age -->
<FormField name="age" v-slot="{ value, handleChange }">
<FormItem>
@@ -144,7 +106,8 @@ onMounted(async () => {
<FormItem>
<FormLabel>What hobbies do you like to participate in outside of gaming?</FormLabel>
<FormControl>
<Textarea rows="4" class="resize-none" :model-value="value" @update:model-value="handleChange" :disabled="readOnly" />
<Textarea rows="4" class="resize-none" :model-value="value" @update:model-value="handleChange"
:disabled="readOnly" />
</FormControl>
<FormMessage />
</FormItem>
@@ -180,7 +143,8 @@ onMounted(async () => {
<FormItem>
<FormLabel>Why do you want to join our community?</FormLabel>
<FormControl>
<Textarea rows="4" class="resize-none" :model-value="value" @update:model-value="handleChange" :disabled="readOnly" />
<Textarea rows="4" class="resize-none" :model-value="value" @update:model-value="handleChange"
:disabled="readOnly" />
</FormControl>
<FormMessage />
</FormItem>
@@ -191,7 +155,8 @@ onMounted(async () => {
<FormItem>
<FormLabel>What attracts you to the Arma 3 milsim playstyle?</FormLabel>
<FormControl>
<Textarea rows="4" class="resize-none" :model-value="value" @update:model-value="handleChange" :disabled="readOnly" />
<Textarea rows="4" class="resize-none" :model-value="value" @update:model-value="handleChange"
:disabled="readOnly" />
</FormControl>
<FormMessage />
</FormItem>
@@ -202,7 +167,8 @@ onMounted(async () => {
<FormItem>
<FormLabel>Where did you hear about us? (If another member, who?)</FormLabel>
<FormControl>
<Input placeholder="e.g., Reddit / Member: Alice" :model-value="value" @update:model-value="handleChange" :disabled="readOnly" />
<Input placeholder="e.g., Reddit / Member: Alice" :model-value="value" @update:model-value="handleChange"
:disabled="readOnly" />
</FormControl>
<FormMessage />
</FormItem>
@@ -229,7 +195,8 @@ onMounted(async () => {
<FormItem>
<FormLabel>What time zone are you in?</FormLabel>
<FormControl>
<Input placeholder="e.g., AEST, EST, UTC+10" :model-value="value" @update:model-value="handleChange" :disabled="readOnly" />
<Input placeholder="e.g., AEST, EST, UTC+10" :model-value="value" @update:model-value="handleChange"
:disabled="readOnly" />
</FormControl>
<FormMessage />
</FormItem>
@@ -254,7 +221,8 @@ onMounted(async () => {
<FormItem>
<FormLabel>Which playstyles interest you?</FormLabel>
<FormControl>
<Input placeholder="e.g., Rifleman; Medic; Pilot" :model-value="value" @update:model-value="handleChange" :disabled="readOnly" />
<Input placeholder="e.g., Rifleman; Medic; Pilot" :model-value="value" @update:model-value="handleChange"
:disabled="readOnly" />
</FormControl>
<FormMessage />
</FormItem>
@@ -275,7 +243,7 @@ onMounted(async () => {
</FormItem>
</FormField>
<div class="pt-2">
<div class="pt-2" v-if="!readOnly">
<Button type="submit" :onClick="() => console.log('hi')" :disabled="readOnly">Submit Application</Button>
</div>
</Form>