149 lines
5.1 KiB
Vue
149 lines
5.1 KiB
Vue
<script setup>
|
|
import ActionMessage from '@/Components/ActionMessage.vue';
|
|
import Drawer from '@/Components/Drawer.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 { 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
|
|
});
|
|
|
|
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
|
|
});
|
|
|
|
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;
|
|
}
|
|
);
|
|
|
|
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 !== null || form.due_date !== '') {
|
|
form.due_date = new Date(form.due_date).toISOString();
|
|
}
|
|
},
|
|
onSuccess: () => {
|
|
close();
|
|
form.reset();
|
|
}
|
|
});
|
|
}
|
|
|
|
</script>
|
|
<template>
|
|
<Drawer
|
|
:show="show"
|
|
@close="close"
|
|
>
|
|
<template #title>Add activity</template>
|
|
<template #content>
|
|
<form @submit.prevent="store">
|
|
<SectionTitle class="mt-4 border-b mb-4">
|
|
<template #title>
|
|
Activity
|
|
</template>
|
|
</SectionTitle>
|
|
<div class="col-span-6 sm:col-span-4">
|
|
<InputLabel for="activityDueDate" value="Due date"/>
|
|
<vue-date-picker
|
|
id="activityDueDate"
|
|
:enable-time-picker="false"
|
|
format="dd.MM.yyyy"
|
|
class="mt-1 block w-full"
|
|
v-model="form.due_date"
|
|
/>
|
|
</div>
|
|
<div class="col-span-6 sm:col-span-4">
|
|
<InputLabel for="activityAmount" value="Amount"/>
|
|
<TextInput
|
|
id="activityAmount"
|
|
ref="activityAmountinput"
|
|
v-model="form.amount"
|
|
type="number"
|
|
class="mt-1 block w-full"
|
|
autocomplete="0.00"
|
|
/>
|
|
</div>
|
|
<div class="col-span-6 sm:col-span-4">
|
|
<InputLabel for="activityAction" value="Action"/>
|
|
<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="Decision"/>
|
|
<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="Note"
|
|
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>
|
|
<div class="flex justify-end mt-4">
|
|
<ActionMessage :on="form.recentlySuccessful" class="me-3">
|
|
Saved.
|
|
</ActionMessage>
|
|
|
|
<PrimaryButton :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
|
|
Save
|
|
</PrimaryButton>
|
|
</div>
|
|
</form>
|
|
</template>
|
|
</Drawer>
|
|
</template> |