Update to laravel 12, other changes.

resources/js/Components/BasicTable.vue

@@ -58,7 +58,7 @@ const update = () => {
     props.options.editor_data.form.route.params,
     formUpdate[props.options.editor_data.form.key]
   )
-
+  
   formUpdate.put(putRoute, {
     onSuccess: () => {
       closeEditor();

resources/js/Components/buttons/BasicButton.vue

@@ -0,0 +1,30 @@
+<script setup>
+import { ref, watch } from 'vue';
+
+defineProps({
+    type: {
+        type: String,
+        default: 'submit',
+    },
+    bgcolor: {
+        type: String,
+        default: 'bg-blue-500'
+    },
+});
+
+const isHover = ref(false);
+
+watch(
+    () => isHover.value,
+    (isHover) => {
+        console.log(isHover)
+    }
+)
+
+</script>
+
+<template>
+    <button :type="type" class="inline-flex items-center px-4 py-2 bg-blue-500 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-blue-700 focus:bg-blue-700 active:bg-blue-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:opacity-50 transition ease-in-out duration-150" :class="[bgcolor, color]">
+        <slot />
+    </button>
+</template>

resources/js/Pages/Cases/Partials/ActivityDrawer.vue

@@ -1,10 +1,12 @@
 <script setup>
 import ActionMessage from '@/Components/ActionMessage.vue';
+import BasicButton from '@/Components/buttons/BasicButton.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 { PlusIcon } from '@/Utilities/Icons';
 import { useForm } from '@inertiajs/vue3';
 import { FwbTextarea } from 'flowbite-vue';
 import { ref, watch } from 'vue';
@@ -45,6 +47,17 @@ watch(
     }
 );
 
+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});
+        }
+        
+    }
+);
+
 const store = () => {
     console.table({ 
         due_date: form.due_date,
@@ -55,13 +68,19 @@ const store = () => {
     });
     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();
+            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.')
         }
     });
 }
@@ -75,32 +94,6 @@ const store = () => {
         <template #title>Dodaj aktivnost</template>
         <template #content>
             <form @submit.prevent="store">
-                <SectionTitle class="mt-4 border-b mb-4">
-                    <template #title>
-                        Aktivnost
-                    </template>
-                </SectionTitle>
-                <div class="col-span-6 sm:col-span-4">
-                    <InputLabel for="activityDueDate" value="Datum zapadlosti"/>
-                    <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="Znesek"/>
-                    <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="Akcija"/>
                     <select 
@@ -134,14 +127,37 @@ const store = () => {
                         class="block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
                     />
                 </div>
+                <div class="col-span-6 sm:col-span-4">
+                    <InputLabel for="activityDueDate" value="Datum zapadlosti"/>
+                    <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="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">
-                        Saved.
+                        Shranjuje.
                     </ActionMessage>
-
-                    <PrimaryButton :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
-                        Save
-                    </PrimaryButton>
+                    <BasicButton 
+                        :class="{ 'opacity-25': form.processing }"
+                        :disabled="form.processing"
+                    >
+                        Shrani
+                    </BasicButton>
                 </div>
             </form>
         </template>

resources/js/Pages/Cases/Partials/ActivityTable.vue

@@ -23,7 +23,7 @@ const createBody = (data) => {
 
     data.forEach((p) => {
         const createdDate =  new Date(p.created_at).toLocaleDateString('de');
-        const dueDate = (p.due_date === null) ? new Date().toLocaleDateString('de') : null;
+        const dueDate = (p.due_date) ? new Date().toLocaleDateString('de') : null;
 
         const cols = [
             C_TD.make(createdDate, 'body' ),

resources/js/Pages/Cases/Show.vue

@@ -9,6 +9,7 @@ import ContractTable from "./Partials/ContractTable.vue";
 import ActivityDrawer from "./Partials/ActivityDrawer.vue";
 import ActivityTable from "./Partials/ActivityTable.vue";
 import { AngleDownIcon, AngleUpIcon } from "@/Utilities/Icons";
+import Pagination from "@/Components/Pagination.vue";
 
 const props = defineProps({
   client: Object,
@@ -134,13 +135,15 @@ const hideClietnDetails = () => {
       <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
         <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg border-l-4">
           <div class="mx-auto max-w-4x1">
-            <div class="flex justify-between p-3">
+            <div class="flex justify-between p-4">
               <SectionTitle>
-                <template #title> Aktivnosti </template>
+                <template #title>Aktivnosti</template>
+          
               </SectionTitle>
               <FwbButton @click="openDrawerAddActivity">Nova</FwbButton>
             </div>
             <ActivityTable :client_case="client_case" :activities="activities" />
+            <Pagination :links="activities.links" :from="activities.from" :to="activities.to" :total="activities.total" />
           </div>
         </div>
       </div>

resources/js/Pages/Settings/Partials/ActionTable.vue

@@ -1,25 +1,26 @@
 <script setup>
-import { FwbTable, FwbTableBody, FwbTableHead, FwbTableHeadCell, FwbTableCell, FwbTableRow } from 'flowbite-vue';
-import { EditIcon, TrashBinIcon } from '@/Utilities/Icons';
+import { FwbTable, FwbTableBody, FwbTableHead, FwbTableHeadCell, FwbTableCell, FwbTableRow, FwbDropdown } from 'flowbite-vue';
+import { DottedMenu, EditIcon, TrashBinIcon } from '@/Utilities/Icons';
 import Drawer from '@/Components/Drawer.vue';
 import { onMounted, ref } from 'vue';
 import { useForm } from '@inertiajs/vue3';
 import InputLabel from '@/Components/InputLabel.vue';
 import TextInput from '@/Components/TextInput.vue';
 import Multiselect from 'vue-multiselect';
-
+import PrimaryButton from '@/Components/PrimaryButton.vue';
+import ActionMessage from '@/Components/ActionMessage.vue';
 
 const props = defineProps({
     actions: Array,
     decisions: Array
 });
 
+const menuDropdown = ref();
+
 const drawerEdit = ref(false);
 
 const selectOptions = ref([]);
 
-const selectValue = ref([]);
-
 const form = useForm({
     id: 0,
     name: '',
@@ -32,39 +33,43 @@ const openEditDrawer = (item) => {
     form.name = item.name;
     form.color_tag = item.color_tag;
     drawerEdit.value = true;
-    console.log(item.decisions);
 
     item.decisions.forEach((d) => {
-        selectValue.value.push({
+        form.decisions.push({
             name: d.name,
-            code: d.name.substring(0,2).toLowerCase() + d.id
+            id: d.id
         });
     })
 }
 
 const closeEditDrawer = () => {
-    form.reset();
-
     drawerEdit.value = false;
+    form.reset();
 }
 
 const onColorPickerChange = () => {
     console.log(form.color_tag);
 }
 
-
 onMounted(() => {
     props.decisions.forEach((d) => {
         selectOptions.value.push({
             name: d.name,
-            code: d.name.substring(0,2).toLowerCase() + d.id
+            id: d.id
         });
-    });
 
-    console.log(selectOptions.value);
+    });
   
 });
 
+const update = () => {
+    form.put(route('settings.actions.update', { id: form.id }), {
+        onSuccess: () => {
+            closeEditDrawer();
+        },
+    });
+};
+
 </script>
 <template>
     <fwb-table>
@@ -84,7 +89,7 @@ onMounted(() => {
                 <fwb-table-cell>{{ act.color_tag }}</fwb-table-cell>
                 <fwb-table-cell>{{ act.decisions.length }}</fwb-table-cell>
                 <fwb-table-cell>
-                    <button @click="openEditDrawer(act)"><EditIcon /></button>
+                    <button class="px-2" @click="openEditDrawer(act)"><EditIcon size="md" css="text-gray-500" /></button>
                 </fwb-table-cell>
             </fwb-table-row>
         </fwb-table-body>
@@ -98,7 +103,7 @@ onMounted(() => {
             <span>Spremeni akcijo</span>
         </template>
         <template #content>
-            <form @submit.prevent="">
+            <form @submit.prevent="update">
                 <div class="col-span-6 sm:col-span-4">
                     <InputLabel for="name" value="Ime"/>
                     <TextInput 
@@ -131,15 +136,25 @@ onMounted(() => {
                     <multiselect 
                         id="decisions"
                         ref="decisionsSelect"
-                        v-model="selectValue" 
+                        v-model="form.decisions" 
                         :options="selectOptions"
                         :multiple="true"
-                        track-by="code"
+                        track-by="id"
                         :taggable="true"
                         placeholder="Dodaj odločitev"
                         label="name"
                     />
                 </div>
+
+                <div class="flex justify-end mt-4">
+                    <ActionMessage :on="form.recentlySuccessful" class="me-3">
+                        Shranjuje.
+                    </ActionMessage>
+
+                    <PrimaryButton :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
+                        Shrani
+                    </PrimaryButton>
+                </div>
             </form>
         </template>
     </Drawer>

resources/js/Utilities/Icons.js

@@ -53,7 +53,7 @@ const AlignCenterIcon = {
 
 const EditIcon = {
     __proto__: Icon,
-    template: `<svg class="dark:text-white" :class="[defineSize(size),css]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+    template: `<svg :class="[defineSize(size),css]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
             <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m14.304 4.844 2.852 2.852M7 7H4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-4.5m2.409-9.91a2.017 2.017 0 0 1 0 2.853l-6.844 6.844L8 14l.713-3.565 6.844-6.844a2.015 2.015 0 0 1 2.852 0Z"/>
         </svg>`
 }
@@ -121,6 +121,14 @@ const PlusIcon = {
     `
 }
 
+const DottedMenu = {
+    __proto__: Icon,
+    template: `<svg :class="[defineSize(size),css]" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 4 15">
+          <path d="M3.5 1.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm0 6.041a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm0 5.959a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z" />
+        </svg>
+    `
+}
+
 export {
     AddressBookIcon, 
     AlignCenterIcon,
@@ -132,5 +140,6 @@ export {
     AngleUpIcon,
     UserEditIcon,
     CirclePlusIcon,
-    PlusIcon
+    PlusIcon,
+    DottedMenu
 };