store/resources/js/components/admin/finance/employee-advances/EmployeeAdvanceFormModal.vue

<script setup lang="ts">
import { useForm } from '@inertiajs/vue3';
import { Save } from '@lucide/vue';
import { computed, watch } from 'vue';
import { toast } from 'vue-sonner';
import MediaImageUpload from '@/components/media/MediaImageUpload.vue';
import { Button } from '@/components/ui/button';
import { DatePicker } from '@/components/ui/date-picker';
import {
    Dialog,
    DialogContent,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from '@/components/ui/dialog';
import {
    Field,
    FieldError,
    FieldGroup,
    FieldLabel,
    FieldSet,
} from '@/components/ui/field';
import { RupiahInput } from '@/components/ui/rupiah-input';
import { Textarea } from '@/components/ui/textarea';
import { parseRupiah } from '@/lib/rupiah';
import type { EmployeeAdvanceListItem } from '@/types/employee-advance';
import { appendRootPhotosToFormData, createMediaUploadState } from '@/types/media';

const open = defineModel<boolean>('open', { default: false });

const props = defineProps<{
    employeeAdvance?: EmployeeAdvanceListItem | null;
}>();

const isEditing = computed(() => props.employeeAdvance != null);

const form = useForm({
    amount: '',
    description: '',
    due_date: '',
    media: createMediaUploadState(),
});

function resetForm() {
    form.reset();
    form.media = createMediaUploadState();
    form.clearErrors();
}

function populateForm(employeeAdvance: EmployeeAdvanceListItem | null | undefined) {
    resetForm();

    if (!employeeAdvance) {
        return;
    }

    form.amount = String(employeeAdvance.amount);
    form.description = employeeAdvance.description;
    form.due_date = employeeAdvance.due_date_input;
    form.media = createMediaUploadState(employeeAdvance.photos ?? []);
}

watch(
    () => props.employeeAdvance,
    (employeeAdvance) => {
        populateForm(employeeAdvance);
    },
);

watch(open, (isOpen) => {
    if (isOpen) {
        populateForm(props.employeeAdvance);
    } else {
        resetForm();
    }
});

function buildFormData(forUpdate: boolean): FormData {
    const formData = new FormData();

    if (forUpdate) {
        formData.append('_method', 'PUT');
    }

    formData.append('amount', parseRupiah(form.amount));
    formData.append('description', form.description);
    formData.append('due_date', form.due_date);
    appendRootPhotosToFormData(formData, form.media);

    return formData;
}

function formError(key: string): string | undefined {
    return (form.errors as Record<string, string>)[key];
}

function submit() {
    const options = {
        forceFormData: true,
        preserveScroll: true,
        onSuccess: () => {
            open.value = false;
        },
        onError: () => {
            toast.error('Gagal menyimpan data. Periksa kembali formulir.');
        },
    };

    const payload = buildFormData(isEditing.value);

    if (isEditing.value && props.employeeAdvance) {
        form.transform(() => payload).post(`/admin/finance/employee-advances/${props.employeeAdvance.id}`, options);
    } else {
        form.transform(() => payload).post('/admin/finance/employee-advances', options);
    }
}
</script>

<template>
    <Dialog v-model:open="open">
        <DialogContent class="sm:max-w-md">
            <DialogHeader>
                <DialogTitle>{{ isEditing ? 'Ubah Pengajuan Kasbon' : 'Ajukan Kasbon' }}</DialogTitle>
            </DialogHeader>

            <form @submit.prevent="submit">
                <FieldGroup>
                    <FieldSet class="grid gap-4">
                        <Field>
                            <FieldLabel for="employee-advance-amount" required>Jumlah</FieldLabel>
                            <RupiahInput id="employee-advance-amount" v-model="form.amount" autofocus />
                            <FieldError :errors="form.errors.amount ? [form.errors.amount] : []" />
                        </Field>
                        <Field>
                            <FieldLabel for="employee-advance-description" required>Keterangan</FieldLabel>
                            <Textarea id="employee-advance-description" v-model="form.description"
                                placeholder="Contoh: Kebutuhan mendesak" rows="3" />
                            <FieldError :errors="form.errors.description ? [form.errors.description] : []" />
                        </Field>
                        <Field>
                            <FieldLabel for="employee-advance-due-date" required>Jatuh Tempo</FieldLabel>
                            <DatePicker id="employee-advance-due-date" v-model="form.due_date" />
                            <FieldError :errors="form.errors.due_date ? [form.errors.due_date] : []" />
                        </Field>
                        <MediaImageUpload id="employee-advance-photos" v-model="form.media" label="Foto Bukti" required
                            :errors="formError('photos') ? [formError('photos')!] : []" />
                    </FieldSet>
                </FieldGroup>

                <DialogFooter class="mt-6">
                    <Button type="button" variant="outline" :disabled="form.processing" @click="open = false">
                        Batal
                    </Button>
                    <Button type="submit" :disabled="form.processing">
                        <Save class="size-4" />
                        {{ form.processing ? 'Menyimpan...' : 'Ajukan' }}
                    </Button>
                </DialogFooter>
            </form>
        </DialogContent>
    </Dialog>
</template>