146 lines
4.5 KiB
Vue
146 lines
4.5 KiB
Vue
<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,
|
|
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>
|
|
<fwb-table>
|
|
<fwb-table-head>
|
|
<fwb-table-head-cell>#</fwb-table-head-cell>
|
|
<fwb-table-head-cell>Name</fwb-table-head-cell>
|
|
<fwb-table-head-cell>Color tag</fwb-table-head-cell>
|
|
<fwb-table-head-cell>Decisions</fwb-table-head-cell>
|
|
<fwb-table-head-cell>
|
|
<span class="sr-only">Edit</span>
|
|
</fwb-table-head-cell>
|
|
</fwb-table-head>
|
|
<fwb-table-body>
|
|
<fwb-table-row v-for="act in actions" :key="act.id">
|
|
<fwb-table-cell>{{ act.id }}</fwb-table-cell>
|
|
<fwb-table-cell>{{ act.name }}</fwb-table-cell>
|
|
<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>
|
|
</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> |