changes

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

@@ -1,12 +1,69 @@
 <script setup>
 import { FwbTable, FwbTableBody, FwbTableHead, FwbTableHeadCell, FwbTableCell, FwbTableRow } from 'flowbite-vue';
 import { 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';
+
 
 const props = defineProps({
-    actions: Array
+    actions: Array,
+    decisions: Array
 });
 
+const drawerEdit = ref(false);
 
+const selectOptions = ref([]);
+
+const selectValue = ref([]);
+
+const form = useForm({
+    id: 0,
+    name: '',
+    color_tag: '',
+    decisions: []
+});
+
+const openEditDrawer = (item) => {
+    form.id = item.id;
+    form.name = item.name;
+    form.color_tag = item.color_tag;
+    drawerEdit.value = true;
+    console.log(item.decisions);
+
+    item.decisions.forEach((d) => {
+        selectValue.value.push({
+            name: d.name,
+            code: d.name.substring(0,2).toLowerCase() + d.id
+        });
+    })
+}
+
+const closeEditDrawer = () => {
+    form.reset();
+
+    drawerEdit.value = false;
+}
+
+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
+        });
+    });
+
+    console.log(selectOptions.value);
+  
+});
 
 </script>
 <template>
@@ -27,10 +84,63 @@ const props = defineProps({
                 <fwb-table-cell>{{ act.color_tag }}</fwb-table-cell>
                 <fwb-table-cell>{{ act.decisions.length }}</fwb-table-cell>
                 <fwb-table-cell>
-                    <button><EditIcon /></button>
-                    <button><TrashBinIcon /></button>
+                    <button @click="openEditDrawer(act)"><EditIcon /></button>
                 </fwb-table-cell>
             </fwb-table-row>
         </fwb-table-body>
     </fwb-table>
+    <Drawer
+        :show="drawerEdit"
+        @close="closeEditDrawer"
+    >
+
+        <template #title>
+            <span>Spremeni akcijo</span>
+        </template>
+        <template #content>
+            <form @submit.prevent="">
+                <div class="col-span-6 sm:col-span-4">
+                    <InputLabel for="name" value="Ime"/>
+                    <TextInput 
+                        id="name"
+                        ref="nameInput"
+                        v-model="form.name"
+                        type="text"
+                        class="mt-1 block w-full"
+                        autocomplete="name"
+                    />
+                </div>
+                <div class="col-span-6 sm:col-span-4">
+                    <InputLabel for="colorTag" value="Barva"/>
+                    <div class="mt-1 w-full border flex p-1">
+                        <TextInput 
+                            id="colorTag"
+                            ref="colorTagInput"
+                            v-model="form.color_tag"
+                            @change="onColorPickerChange"
+                            type="color"
+                            class="mr-2" 
+                            autocomplete="color-tag"
+                        />
+                        <span>{{ form.color_tag }}</span>
+                    </div>
+                </div>
+                
+                <div class="col-span-6 sm:col-span-4">
+                    <InputLabel for="decisions" value="Odločitve"/>
+                    <multiselect 
+                        id="decisions"
+                        ref="decisionsSelect"
+                        v-model="selectValue" 
+                        :options="selectOptions"
+                        :multiple="true"
+                        track-by="code"
+                        :taggable="true"
+                        placeholder="Dodaj odločitev"
+                        label="name"
+                    />
+                </div>
+            </form>
+        </template>
+    </Drawer>
 </template>