Teren-app/resources/js/Pages/Cases/Partials/ContractDrawer.vue

<script setup>
import ActionMessage from '@/Components/ActionMessage.vue';
import DialogModal from '@/Components/DialogModal.vue';
import InputLabel from '@/Components/InputLabel.vue';
import PrimaryButton from '@/Components/PrimaryButton.vue';
import SectionTitle from '@/Components/SectionTitle.vue';
import TextInput from '@/Components/TextInput.vue';
import DatePickerField from '@/Components/DatePickerField.vue';
import { useForm } from '@inertiajs/vue3';
import { watch } from 'vue';

const props = defineProps({
    client_case: Object,
    show: { type: Boolean, default: false },
    types: Array,
    // Optional: when provided, drawer acts as edit mode
    contract: { type: Object, default: null },
});

console.log(props.types);

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

const close = () => {
    emit('close');
}

// form state for create or edit
const formContract = useForm({
    client_case_uuid: props.client_case.uuid,
    uuid: props.contract?.uuid ?? null,
    reference: props.contract?.reference ?? '',
    start_date: props.contract?.start_date ?? new Date().toISOString(),
        type_id: (props.contract?.type_id ?? props.contract?.type?.id) ?? props.types[0].id,
    description: props.contract?.description ?? '',
    // nested account fields, if exists
    initial_amount: props.contract?.account?.initial_amount ?? null,
    balance_amount: props.contract?.account?.balance_amount ?? null,
});

// keep form in sync when switching between create and edit
const applyContract = (c) => {
    formContract.uuid = c?.uuid ?? null
    formContract.reference = c?.reference ?? ''
    formContract.start_date = c?.start_date ?? new Date().toISOString()
    formContract.type_id = (c?.type_id ?? c?.type?.id) ?? props.types[0].id
    formContract.description = c?.description ?? ''
    formContract.initial_amount = c?.account?.initial_amount ?? null
    formContract.balance_amount = c?.account?.balance_amount ?? null
}

watch(() => props.contract, (c) => {
    applyContract(c)
})

watch(() => props.show, (open) => {
    if (open && !props.contract) {
        // reset for create
        applyContract(null)
    }
})

const storeOrUpdate = () => {
    const isEdit = !!formContract.uuid
    const options = {
        onBefore: () => {
            formContract.start_date = formContract.start_date
        },
        onSuccess: () => {
            close()
            // keep state clean; reset to initial
            if (!isEdit) formContract.reset()
        },
        preserveScroll: true,
    }
    if (isEdit) {
        formContract.put(route('clientCase.contract.update', { client_case: props.client_case.uuid, uuid: formContract.uuid }), options)
    } else {
        formContract.post(route('clientCase.contract.store', props.client_case), options)
    }
}

</script>

<template>
    <DialogModal
        :show="show"
        @close="close"
    >
        <template #title>{{ formContract.uuid ? 'Uredi pogodbo' : 'Dodaj pogodbo' }}</template>
        <template #content>
            <form @submit.prevent="storeOrUpdate">
                <SectionTitle class="mt-4 border-b mb-4">
                    <template #title>
                        Pogodba
                    </template>
                </SectionTitle>
                <div class="col-span-6 sm:col-span-4">
                    <InputLabel for="contractRef" value="Referenca"/>
                    <TextInput
                        id="contractRef"
                        ref="contractRefInput"
                        v-model="formContract.reference"
                        type="text"
                        class="mt-1 block w-full"
                        autocomplete="contract-reference"
                    />
                </div>
                <DatePickerField
                    id="contractStartDate"
                    label="Datum pričetka"
                    v-model="formContract.start_date"
                    format="dd.MM.yyyy"
                    :enable-time-picker="false"
                />
                <div class="col-span-6 sm:col-span-4">
                    <InputLabel for="contractTypeSelect" value="Tip"/>
                    <select 
                        class="block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
                        id="contractTypeSelect"
                        v-model="formContract.type_id"
                    >
                        <option v-for="t in types" :value="t.id">{{ t.name }}</option>
                    <!-- ... -->
                    </select>
                </div>
                <div class="col-span-6 sm:col-span-4 mt-4">
                    <InputLabel for="contractDescription" value="Opis"/>
                    <textarea
                        id="contractDescription"
                        v-model="formContract.description"
                        class="mt-1 block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
                        rows="3"
                    />
                </div>
                <SectionTitle class="mt-6 border-b mb-4">
                    <template #title>
                        Račun
                    </template>
                </SectionTitle>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <InputLabel for="initialAmount" value="Predani znesek"/>
                        <TextInput
                            id="initialAmount"
                            v-model.number="formContract.initial_amount"
                            type="number"
                            step="0.01"
                            class="mt-1 block w-full"
                            autocomplete="off"
                        />
                    </div>
                    <div>
                        <InputLabel for="balanceAmount" value="Odprti znesek"/>
                        <TextInput
                            id="balanceAmount"
                            v-model.number="formContract.balance_amount"
                            type="number"
                            step="0.01"
                            class="mt-1 block w-full"
                            autocomplete="off"
                        />
                    </div>
                </div>
                <div class="flex justify-end mt-4">
                    <ActionMessage :on="formContract.recentlySuccessful" class="me-3">
                        Shranjuje.
                    </ActionMessage>

                    <PrimaryButton :class="{ 'opacity-25': formContract.processing }" :disabled="formContract.processing">
                        {{ formContract.uuid ? 'Posodobi' : 'Shrani' }}
                    </PrimaryButton>
                </div>
            </form>
        </template>
    </DialogModal>
    
</template>