Lots of changes

2024-11-13 22:11:07 +01:00
parent 90a5858320
commit 953ff38d64
76 changed files with 2822 additions and 427 deletions
@@ -0,0 +1,149 @@
+<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>