Update to laravel 12, other changes.

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>