milsim-site-v4/ui/src/components/application/ApplicationForm.vue

<script setup lang="ts">
import Button from '@/components/ui/button/Button.vue';
import Checkbox from '@/components/ui/checkbox/Checkbox.vue';
import {
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '@/components/ui/form'
import Input from '@/components/ui/input/Input.vue';
import Textarea from '@/components/ui/textarea/Textarea.vue';
import { toTypedSchema } from '@vee-validate/zod';
import { Form } from 'vee-validate';
import { onMounted, ref } from 'vue';
import * as z from 'zod';
import Popover from '../ui/popover/Popover.vue';
import PopoverTrigger from '../ui/popover/PopoverTrigger.vue';
import { CalculatorIcon } from 'lucide-vue-next';
import PopoverContent from '../ui/popover/PopoverContent.vue';
import Calendar from '../ui/calendar/Calendar.vue';
import DateInput from '../form/DateInput.vue';

const formSchema = toTypedSchema(z.object({
  dob: z.string().refine(v => v, { message: "A date of birth is required." }),
  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" })
  }),
}))


const fallbackInitials = {
  military: false,
  canAttendSaturday: false,
  aknowledgeRules: false,
}

const props = defineProps<{
  readOnly: boolean,
  data: object,
}>()

const emit = defineEmits(['submit']);

const initialValues = ref<Record<string, unknown> | null>(null);

async function onSubmit(val: any) {
  emit('submit', val);
}

onMounted(() => {
  if (props.data) {
    initialValues.value = { ...props.data, ...fallbackInitials }
  } else {
    initialValues.value = { ...fallbackInitials }
  }
})


</script>

<template>
  <Form v-if="initialValues" :validation-schema="formSchema" :initial-values="initialValues" @submit="onSubmit"
    class="space-y-6">
    <!-- Age -->
    <FormField name="age" v-slot="{ value, handleChange }">
      <FormItem>
        <FormLabel>What is your date of birth?</FormLabel>
        <FormControl>
          <DateInput :model-value="(value as string) ?? ''" :disabled="readOnly"
            @update:model-value="handleChange" />
        </FormControl>
        <FormMessage />
      </FormItem>
    </FormField>

    <!-- Name -->
    <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 :model-value="value" @update:model-value="handleChange" :disabled="readOnly" />
        </FormControl>
        <FormMessage />
      </FormItem>
    </FormField>

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

    <!-- Hobbies -->
    <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" :model-value="value" @update:model-value="handleChange"
            :disabled="readOnly" />
        </FormControl>
        <FormMessage />
      </FormItem>
    </FormField>

    <!-- Military (boolean) -->
    <FormField name="military" v-slot="{ value, handleChange }">
      <FormItem>
        <FormLabel>Have you ever served in the military?</FormLabel>
        <FormControl>
          <div class="flex items-center gap-2">
            <Checkbox :checked="value ?? false" @update:checked="handleChange" :disabled="readOnly" />
            <span>Yes (checked) / No (unchecked)</span>
          </div>
        </FormControl>
        <FormMessage />
      </FormItem>
    </FormField>

    <!-- Other communities (freeform) -->
    <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 :model-value="value" @update:model-value="handleChange" :disabled="readOnly" />
        </FormControl>
        <FormMessage />
      </FormItem>
    </FormField>

    <!-- Why join -->
    <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" :model-value="value" @update:model-value="handleChange"
            :disabled="readOnly" />
        </FormControl>
        <FormMessage />
      </FormItem>
    </FormField>

    <!-- Attraction to milsim -->
    <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" :model-value="value" @update:model-value="handleChange"
            :disabled="readOnly" />
        </FormControl>
        <FormMessage />
      </FormItem>
    </FormField>

    <!-- Referral (freeform) -->
    <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" :model-value="value" @update:model-value="handleChange"
            :disabled="readOnly" />
        </FormControl>
        <FormMessage />
      </FormItem>
    </FormField>

    <!-- Steam profile -->
    <FormField name="steamProfile" v-slot="{ value, handleChange }">
      <FormItem>
        <FormLabel>Steam profile link</FormLabel>
        <FormDescription>
          Format: <code>https://steamcommunity.com/id/USER/</code> or
          <code>https://steamcommunity.com/profiles/STEAMID64/</code>
        </FormDescription>
        <FormControl>
          <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="{ value, handleChange }">
      <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" />
        </FormControl>
        <FormMessage />
      </FormItem>
    </FormField>

    <!-- Attendance (boolean) -->
    <FormField name="canAttendSaturday" v-slot="{ value, handleChange }">
      <FormItem>
        <FormLabel>Are you able to attend weekly operations Saturdays @ 7pm CST?</FormLabel>
        <FormControl>
          <div class="flex items-center gap-2">
            <Checkbox :model-value="value ?? false" @update:model-value="handleChange" :disabled="readOnly" />
            <span>Yes (checked) / No (unchecked)</span>
          </div>
        </FormControl>
        <FormMessage />
      </FormItem>
    </FormField>

    <!-- Interests / Playstyle (freeform) -->
    <FormField name="interests" v-slot="{ value, handleChange }">
      <FormItem>
        <FormLabel>Which playstyles interest you?</FormLabel>
        <FormControl>
          <Input placeholder="e.g., Rifleman; Medic; Pilot" :model-value="value" @update:model-value="handleChange"
            :disabled="readOnly" />
        </FormControl>
        <FormMessage />
      </FormItem>
    </FormField>

    <!-- Code of Conduct (boolean, field name kept as-is) -->
    <FormField name="aknowledgeRules" v-slot="{ value, handleChange }">
      <FormItem>
        <FormLabel>Community Code of Conduct</FormLabel>
        <FormControl>
          <div class="flex items-center gap-2">
            <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 />
      </FormItem>
    </FormField>

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