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

<script setup>
import ActionMessage from '@/Components/ActionMessage.vue';
import BasicButton from '@/Components/buttons/BasicButton.vue';
import DialogModal from '@/Components/DialogModal.vue';
import InputLabel from '@/Components/InputLabel.vue';
import DatePickerField from '@/Components/DatePickerField.vue';
import PrimaryButton from '@/Components/PrimaryButton.vue';
import SectionTitle from '@/Components/SectionTitle.vue';
import TextInput from '@/Components/TextInput.vue';
import { PlusIcon } from '@/Utilities/Icons';
import { useForm } from '@inertiajs/vue3';
import { FwbTextarea } from 'flowbite-vue';
import { ref, watch } from 'vue';


const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    client_case: Object,
    actions: Array,
    // optionally pre-select a contract to attach the activity to
    contractUuid: { type: String, default: null },
});

const decisions = ref(props.actions[0].decisions);

console.log(props.actions);

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

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

const form = useForm({
    due_date: null,
    amount: null,
    note: '',
    action_id: props.actions[0].id,
    decision_id: props.actions[0].decisions[0].id,
    contract_uuid: props.contractUuid,
});

watch(
    () => form.action_id,
    (action_id) => {
        decisions.value = props.actions.filter((el) => el.id === action_id)[0].decisions;
        form.decision_id = decisions.value[0].id;
    }
);

watch(
    () => form.due_date,
    (due_date) => {
        if (due_date) {
            let date = new Date(form.due_date).toISOString().split('T')[0];
            console.table({ old: due_date, new: date });
        }

    }
);

// keep contract_uuid synced if the prop changes while the drawer is open
watch(
    () => props.contractUuid,
    (cu) => { form.contract_uuid = cu || null; }
);

const store = () => {
    console.table({
        due_date: form.due_date,
        action_id: form.action_id,
        decision_id: form.decision_id,
        amount: form.amount,
        note: form.note
    });
    form.post(route('clientCase.activity.store', props.client_case), {
        onBefore: () => {
            if (form.due_date) {
                form.due_date = new Date(form.due_date).toISOString().split('T')[0];
            }
        },
        onSuccess: () => {
            close();
            form.reset();
        },
        onError: (errors) => {
            console.log('Validation or server error:', errors);
        },
        onFinish: () => {
            console.log('Request finished processing.')
        }
    });
}

</script>
<template>
    <DialogModal :show="show" @close="close">
        <template #title>Dodaj aktivnost</template>
        <template #content>
            <form @submit.prevent="store">
                <div class="col-span-6 sm:col-span-4">
                    <InputLabel for="activityAction" value="Akcija" />
                    <select
                        class="block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
                        id="activityAction" ref="activityActionSelect" v-model="form.action_id">
                        <option v-for="a in actions" :value="a.id">{{ a.name }}</option>
                        <!-- ... -->
                    </select>
                </div>
                <div class="col-span-6 sm:col-span-4">
                    <InputLabel for="activityDecision" value="Odločitev" />
                    <select
                        class="block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
                        id="activityDecision" ref="activityDecisionSelect" v-model="form.decision_id">
                        <option v-for="d in decisions" :value="d.id">{{ d.name }}</option>
                        <!-- ... -->
                    </select>
                </div>
                <div class="col-span-6 sm:col-span-4">
                    <FwbTextarea label="Opomba" id="activityNote" ref="activityNoteTextarea" v-model="form.note"
                        class="block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm" />
                </div>
                <DatePickerField id="activityDueDate" label="Datum zapadlosti" v-model="form.due_date"
                    format="dd.MM.yyyy" :enable-time-picker="false" :auto-position="true" :teleport-target="'body'"
                    :inline="false" :auto-apply="false" :fixed="false" :close-on-auto-apply="true"
                    :close-on-scroll="true" />
                <div class="col-span-6 sm:col-span-4">
                    <InputLabel for="activityAmount" value="Znesek" />
                    <TextInput id="activityAmount" ref="activityAmountinput" v-model="form.amount" type="number"
                        class="mt-1 block w-full" autocomplete="0.00" />
                </div>
                <div class="flex justify-end mt-4">
                    <ActionMessage :on="form.recentlySuccessful" class="me-3">
                        Shranjuje.
                    </ActionMessage>
                    <BasicButton :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
                        Shrani
                    </BasicButton>
                </div>
            </form>
        </template>
    </DialogModal>
</template>