changes notification added
This commit is contained in:
Simon Pocrnjič
@@ -1,158 +1,185 @@
|
||||
<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';
|
||||
|
||||
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 TextInput from "@/Components/TextInput.vue";
|
||||
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 },
|
||||
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 emit = defineEmits(["close"]);
|
||||
|
||||
const close = () => {
|
||||
emit('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,
|
||||
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;
|
||||
}
|
||||
() => 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 });
|
||||
}
|
||||
|
||||
() => form.due_date,
|
||||
(due_date) => {
|
||||
if (due_date) {
|
||||
let date = new Date(form.due_date).toLocaleDateString("en-CA");
|
||||
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; }
|
||||
() => 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
|
||||
const store = async () => {
|
||||
console.table({
|
||||
due_date: form.due_date,
|
||||
action_id: form.action_id,
|
||||
decision_id: form.decision_id,
|
||||
amount: form.amount,
|
||||
note: form.note,
|
||||
});
|
||||
|
||||
form
|
||||
.transform((data) => ({
|
||||
...data,
|
||||
due_date: new Date(data.due_date).toLocaleDateString("en-CA"),
|
||||
}))
|
||||
.post(route("clientCase.activity.store", props.client_case), {
|
||||
onSuccess: () => {
|
||||
close();
|
||||
// Preserve selected contract across submissions; reset only user-editable fields
|
||||
form.reset("due_date", "amount", "note");
|
||||
},
|
||||
onError: (errors) => {
|
||||
console.log("Validation or server error:", errors);
|
||||
},
|
||||
onFinish: () => {
|
||||
console.log("Request finished processing.");
|
||||
},
|
||||
});
|
||||
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();
|
||||
// Preserve selected contract across submissions; reset only user-editable fields
|
||||
form.reset('due_date', 'amount', 'note');
|
||||
},
|
||||
onError: (errors) => {
|
||||
console.log('Validation or server error:', errors);
|
||||
},
|
||||
onFinish: () => {
|
||||
console.log('Request finished processing.')
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// When the drawer opens, always sync the current contractUuid into the form,
|
||||
// even if the value hasn't changed (prevents stale/null contract_uuid after reset)
|
||||
watch(
|
||||
() => props.show,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
form.contract_uuid = props.contractUuid || null;
|
||||
}
|
||||
() => props.show,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
form.contract_uuid = props.contractUuid || null;
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
</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>
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user