285 lines
9.6 KiB
Vue
285 lines
9.6 KiB
Vue
<script setup>
|
|
import { FwbTable, FwbTableBody, FwbTableHead, FwbTableHeadCell, FwbTableCell, FwbTableRow } from 'flowbite-vue';
|
|
import { EditIcon, TrashBinIcon } from '@/Utilities/Icons';
|
|
import DialogModal from '@/Components/DialogModal.vue';
|
|
import ConfirmationModal from '@/Components/ConfirmationModal.vue';
|
|
import { computed, onMounted, ref } from 'vue';
|
|
import { router, 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({
|
|
decisions: Array,
|
|
actions: Array
|
|
});
|
|
|
|
const drawerEdit = ref(false);
|
|
const drawerCreate = ref(false);
|
|
const showDelete = ref(false);
|
|
const toDelete = ref(null);
|
|
|
|
const search = ref('');
|
|
|
|
const actionOptions = ref([]);
|
|
|
|
const form = useForm({
|
|
id: 0,
|
|
name: '',
|
|
color_tag: '',
|
|
actions: []
|
|
});
|
|
|
|
const createForm = useForm({
|
|
name: '',
|
|
color_tag: '',
|
|
actions: []
|
|
});
|
|
|
|
const openEditDrawer = (item) => {
|
|
form.actions = [];
|
|
form.id = item.id;
|
|
form.name = item.name;
|
|
form.color_tag = item.color_tag;
|
|
drawerEdit.value = true;
|
|
|
|
item.actions.forEach((a) => {
|
|
form.actions.push({
|
|
name: a.name,
|
|
id: a.id
|
|
});
|
|
})
|
|
}
|
|
|
|
const closeEditDrawer = () => {
|
|
drawerEdit.value = false;
|
|
form.reset();
|
|
}
|
|
|
|
const openCreateDrawer = () => {
|
|
createForm.reset();
|
|
drawerCreate.value = true;
|
|
}
|
|
|
|
const closeCreateDrawer = () => {
|
|
drawerCreate.value = false;
|
|
createForm.reset();
|
|
}
|
|
|
|
onMounted(() => {
|
|
props.actions.forEach((a) => {
|
|
actionOptions.value.push({
|
|
name: a.name,
|
|
id: a.id
|
|
});
|
|
});
|
|
});
|
|
|
|
const filtered = computed(() => {
|
|
const term = search.value?.toLowerCase() ?? '';
|
|
return (props.decisions || []).filter(d => {
|
|
return !term || d.name?.toLowerCase().includes(term) || d.color_tag?.toLowerCase().includes(term);
|
|
});
|
|
});
|
|
|
|
const update = () => {
|
|
form.put(route('settings.decisions.update', { id: form.id }), {
|
|
onSuccess: () => {
|
|
closeEditDrawer();
|
|
},
|
|
});
|
|
};
|
|
|
|
const store = () => {
|
|
createForm.post(route('settings.decisions.store'), {
|
|
onSuccess: () => {
|
|
closeCreateDrawer();
|
|
},
|
|
});
|
|
};
|
|
|
|
const confirmDelete = (decision) => {
|
|
toDelete.value = decision;
|
|
showDelete.value = true;
|
|
};
|
|
|
|
const cancelDelete = () => {
|
|
toDelete.value = null;
|
|
showDelete.value = false;
|
|
};
|
|
|
|
const destroyDecision = () => {
|
|
if (!toDelete.value) return;
|
|
router.delete(route('settings.decisions.destroy', { id: toDelete.value.id }), {
|
|
preserveScroll: true,
|
|
onFinish: () => cancelDelete(),
|
|
});
|
|
};
|
|
|
|
</script>
|
|
<template>
|
|
<div class="p-4 flex items-center justify-between gap-3">
|
|
<TextInput v-model="search" placeholder="Search decisions..." class="w-full sm:w-72" />
|
|
<PrimaryButton @click="openCreateDrawer">+ Dodaj odločitev</PrimaryButton>
|
|
</div>
|
|
|
|
<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>Belongs to actions</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="d in filtered" :key="d.id">
|
|
<fwb-table-cell>{{ d.id }}</fwb-table-cell>
|
|
<fwb-table-cell>{{ d.name }}</fwb-table-cell>
|
|
<fwb-table-cell>
|
|
<div class="flex items-center gap-2">
|
|
<span class="inline-block h-4 w-4 rounded" :style="{ backgroundColor: d.color_tag }"></span>
|
|
<span>{{ d.color_tag }}</span>
|
|
</div>
|
|
</fwb-table-cell>
|
|
<fwb-table-cell>{{ d.actions.length }}</fwb-table-cell>
|
|
<fwb-table-cell>
|
|
<button class="px-2" @click="openEditDrawer(d)"><EditIcon size="md" css="text-gray-500" /></button>
|
|
<button class="px-2 disabled:opacity-40" :disabled="(d.activities_count ?? 0) > 0" @click="confirmDelete(d)"><TrashBinIcon size="md" css="text-red-500" /></button>
|
|
</fwb-table-cell>
|
|
</fwb-table-row>
|
|
</fwb-table-body>
|
|
</fwb-table>
|
|
|
|
<DialogModal :show="drawerEdit" @close="closeEditDrawer">
|
|
<template #title>
|
|
<span>Spremeni odločitev</span>
|
|
</template>
|
|
<template #content>
|
|
<form @submit.prevent="update">
|
|
<div class="col-span-6 sm:col-span-4">
|
|
<InputLabel for="name" value="Ime"/>
|
|
<TextInput
|
|
id="name"
|
|
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"
|
|
v-model="form.color_tag"
|
|
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="actionsSelect" value="Akcije"/>
|
|
<multiselect
|
|
id="actionsSelect"
|
|
v-model="form.actions"
|
|
:options="actionOptions"
|
|
:multiple="true"
|
|
track-by="id"
|
|
:taggable="true"
|
|
placeholder="Dodaj akcijo"
|
|
:append-to-body="true"
|
|
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>
|
|
</DialogModal>
|
|
|
|
<DialogModal :show="drawerCreate" @close="closeCreateDrawer">
|
|
<template #title>
|
|
<span>Dodaj odločitev</span>
|
|
</template>
|
|
<template #content>
|
|
<form @submit.prevent="store">
|
|
<div class="col-span-6 sm:col-span-4">
|
|
<InputLabel for="nameCreate" value="Ime"/>
|
|
<TextInput
|
|
id="nameCreate"
|
|
v-model="createForm.name"
|
|
type="text"
|
|
class="mt-1 block w-full"
|
|
autocomplete="name"
|
|
/>
|
|
</div>
|
|
<div class="col-span-6 sm:col-span-4">
|
|
<InputLabel for="colorTagCreate" value="Barva"/>
|
|
<div class="mt-1 w-full border flex p-1">
|
|
<TextInput
|
|
id="colorTagCreate"
|
|
v-model="createForm.color_tag"
|
|
type="color"
|
|
class="mr-2"
|
|
autocomplete="color-tag"
|
|
/>
|
|
<span>{{ createForm.color_tag }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-span-6 sm:col-span-4">
|
|
<InputLabel for="actionsCreate" value="Akcije"/>
|
|
<multiselect
|
|
id="actionsCreate"
|
|
v-model="createForm.actions"
|
|
:options="actionOptions"
|
|
:multiple="true"
|
|
track-by="id"
|
|
:taggable="true"
|
|
placeholder="Dodaj akcijo"
|
|
:append-to-body="true"
|
|
label="name"
|
|
/>
|
|
</div>
|
|
|
|
<div class="flex justify-end mt-4">
|
|
<ActionMessage :on="createForm.recentlySuccessful" class="me-3">
|
|
Shranjuje.
|
|
</ActionMessage>
|
|
|
|
<PrimaryButton :class="{ 'opacity-25': createForm.processing }" :disabled="createForm.processing">
|
|
Dodaj
|
|
</PrimaryButton>
|
|
</div>
|
|
</form>
|
|
</template>
|
|
</DialogModal>
|
|
|
|
<ConfirmationModal :show="showDelete" @close="cancelDelete">
|
|
<template #title>
|
|
Delete decision
|
|
</template>
|
|
<template #content>
|
|
Are you sure you want to delete decision "{{ toDelete?.name }}"? This cannot be undone.
|
|
</template>
|
|
<template #footer>
|
|
<button @click="cancelDelete" class="px-4 py-2 rounded bg-gray-200 hover:bg-gray-300 me-2">Cancel</button>
|
|
<PrimaryButton @click="destroyDecision">Delete</PrimaryButton>
|
|
</template>
|
|
</ConfirmationModal>
|
|
</template> |