milsim-site-v4/ui/src/components/loa/loaForm.vue

<script setup lang="ts">
import { Check, Search } from "lucide-vue-next"
import { Combobox, ComboboxAnchor, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxList } from "@/components/ui/combobox"
import { onMounted, ref } from "vue";
import { Member, getMembers } from "@/api/member";
import Button from "@/components/ui/button/Button.vue";
import {
    CalendarDate,
    DateFormatter,
    getLocalTimeZone,
} from "@internationalized/date"
import type { DateRange } from "reka-ui"
import type { Ref } from "vue"
import Popover from "@/components/ui/popover/Popover.vue";
import PopoverTrigger from "@/components/ui/popover/PopoverTrigger.vue";
import PopoverContent from "@/components/ui/popover/PopoverContent.vue";
import { RangeCalendar } from "@/components/ui/range-calendar"
import { cn } from "@/lib/utils";
import { CalendarIcon } from "lucide-vue-next"
import Textarea from "@/components/ui/textarea/Textarea.vue";
import { LOARequest, submitLOA } from "@/api/loa"; // <-- import the submit function

const members = ref<Member[]>([])
const currentMember = ref<Member | null>(null);

const props = withDefaults(defineProps<{
    adminMode?: boolean;
    member?: Member | null;
}>(), {
    adminMode: false,
    member: null,
});


const df = new DateFormatter("en-US", {
    dateStyle: "medium",
})

const value = ref({
    // start: new CalendarDate(2022, 1, 20),
    // end: new CalendarDate(2022, 1, 20).add({ days: 20 }),
}) as Ref<DateRange>

const reason = ref(""); // <-- reason for LOA
const submitting = ref(false);
const submitError = ref<string | null>(null);
const submitSuccess = ref(false);

onMounted(async () => {
    if (props.member) {
        currentMember.value = props.member;
    }
    if (props.adminMode) {
        members.value = await getMembers();
    }
    members.value = await getMembers();
});

// Submit handler
async function handleSubmit() {
    submitError.value = null;
    submitSuccess.value = false;
    submitting.value = true;

    // Use currentMember if adminMode, otherwise use your own member id (stubbed as 89 here)
    const member_id = currentMember.value?.member_id ?? 89;

    // Format dates as ISO strings
    const filed_date = toMariaDBDatetime(new Date());
    const start_date = toMariaDBDatetime(value.value.start?.toDate(getLocalTimeZone()));
    const end_date = toMariaDBDatetime(value.value.end?.toDate(getLocalTimeZone()));

    if (!member_id || !filed_date || !start_date || !end_date) {
        submitError.value = "Missing required fields";
        submitting.value = false;
        return;
    }

    const req: LOARequest = {
        filed_date,
        start_date,
        end_date,
        reason: reason.value,
        member_id
    };

    const result = await submitLOA(req);
    submitting.value = false;

    if (result.id) {
        submitSuccess.value = true;
        reason.value = "";
    } else {
        submitError.value = result.error || "Failed to submit LOA";
    }
}

function toMariaDBDatetime(date: Date): string {
    return date.toISOString().slice(0, 19).replace('T', ' ');
}
</script>

<template>
    <div class="flex flex-row-reverse gap-6 mx-auto w-full" :class="!adminMode ? 'max-w-5xl' : 'max-w-5xl'">
        <div v-if="!adminMode" class="flex-1 flex space-x-4 rounded-md border p-4">
            <div class="flex-2 space-y-1">
                <p class="text-sm font-medium leading-none">
                    LOA Policy
                </p>
                <p class="text-sm text-muted-foreground">
                    Policy goes here.
                </p>
            </div>
        </div>
        <div class="flex-1 flex flex-col gap-5">
            <div class="flex w-full gap-5 ">
                <Combobox class="w-1/2" v-model="currentMember" :disabled="!adminMode">
                    <ComboboxAnchor class="w-full">
                        <ComboboxInput placeholder="Search members..." class="w-full pl-9"
                            :display-value="(v) => v ? v.member_name : ''" />
                    </ComboboxAnchor>
                    <ComboboxList class="w-full">
                        <ComboboxEmpty class="text-muted-foreground">No results</ComboboxEmpty>
                        <ComboboxGroup>
                            <template v-for="member in members" :key="member.member_id">
                                <ComboboxItem :value="member"
                                    class="data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative cursor-pointer select-none px-2 py-1.5">
                                    {{ member.member_name }}
                                    <ComboboxItemIndicator class="absolute left-2 inline-flex items-center">
                                        <Check class="h-4 w-4" />
                                    </ComboboxItemIndicator>
                                </ComboboxItem>
                            </template>
                        </ComboboxGroup>
                    </ComboboxList>
                </Combobox>
                <Popover>
                    <PopoverTrigger as-child>
                        <Button variant="outline" :class="cn(
                            'w-1/2 justify-start text-left font-normal',
                            !value && 'text-muted-foreground',
                        )">
                            <CalendarIcon class="mr-2 h-4 w-4" />
                            <template v-if="value.start">
                                <template v-if="value.end">
                                    {{ df.format(value.start.toDate(getLocalTimeZone())) }} - {{
                                        df.format(value.end.toDate(getLocalTimeZone())) }}
                                </template>
                                <template v-else>
                                    {{ df.format(value.start.toDate(getLocalTimeZone())) }}
                                </template>
                            </template>
                            <template v-else>
                                Pick a date
                            </template>
                        </Button>
                    </PopoverTrigger>
                    <PopoverContent class="w-auto p-0">
                        <RangeCalendar v-model="value" initial-focus :number-of-months="2"
                            @update:start-value="(startDate) => value.start = startDate" />
                    </PopoverContent>
                </Popover>
            </div>
            <Textarea v-model="reason" placeholder="Reason for LOA" class="w-full resize-none" />
            <div class="flex justify-end">
                <Button :onClick="handleSubmit" :disabled="submitting" class="w-min">Submit</Button>
            </div>
            <div v-if="submitError" class="text-red-500 text-sm mt-2">{{ submitError }}</div>
            <div v-if="submitSuccess" class="text-green-500 text-sm mt-2">LOA submitted successfully!</div>
        </div>
    </div>
</template>