Changes to UI
This commit is contained in:
Simon Pocrnjič
@@ -1,20 +1,22 @@
|
||||
<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, watch } 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';
|
||||
// flowbite-vue table imports removed; using DataTableClient
|
||||
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";
|
||||
import DataTableClient from "@/Components/DataTable/DataTableClient.vue";
|
||||
import InlineColorPicker from "@/Components/InlineColorPicker.vue";
|
||||
|
||||
const props = defineProps({
|
||||
actions: Array,
|
||||
decisions: Array,
|
||||
segments: Array
|
||||
actions: Array,
|
||||
decisions: Array,
|
||||
segments: Array,
|
||||
});
|
||||
|
||||
const drawerEdit = ref(false);
|
||||
@@ -22,331 +24,350 @@ const drawerCreate = ref(false);
|
||||
const showDelete = ref(false);
|
||||
const toDelete = ref(null);
|
||||
|
||||
const search = ref('');
|
||||
const search = ref("");
|
||||
const selectedSegment = ref(null);
|
||||
|
||||
const selectOptions = ref([]);
|
||||
const segmentOptions = ref([]);
|
||||
|
||||
// DataTable state
|
||||
const sort = ref({ key: null, direction: null });
|
||||
const page = ref(1);
|
||||
const pageSize = ref(25);
|
||||
const columns = [
|
||||
{ key: "id", label: "#", sortable: true, class: "w-16" },
|
||||
{ key: "name", label: "Name", sortable: true },
|
||||
{ key: "color_tag", label: "Color tag", sortable: false },
|
||||
{ key: "decisions", label: "Decisions", sortable: false, class: "w-32" },
|
||||
];
|
||||
|
||||
const form = useForm({
|
||||
id: 0,
|
||||
name: '',
|
||||
color_tag: '',
|
||||
segment_id: null,
|
||||
decisions: []
|
||||
id: 0,
|
||||
name: "",
|
||||
color_tag: "",
|
||||
segment_id: null,
|
||||
decisions: [],
|
||||
});
|
||||
|
||||
const createForm = useForm({
|
||||
name: '',
|
||||
color_tag: '',
|
||||
segment_id: null,
|
||||
decisions: []
|
||||
name: "",
|
||||
color_tag: "",
|
||||
segment_id: null,
|
||||
decisions: [],
|
||||
});
|
||||
|
||||
const openEditDrawer = (item) => {
|
||||
form.decisions = [];
|
||||
form.id = item.id;
|
||||
form.name = item.name;
|
||||
form.color_tag = item.color_tag;
|
||||
form.segment_id = item.segment ? item.segment.id : null;
|
||||
drawerEdit.value = true;
|
||||
form.decisions = [];
|
||||
form.id = item.id;
|
||||
form.name = item.name;
|
||||
form.color_tag = item.color_tag;
|
||||
form.segment_id = item.segment ? item.segment.id : null;
|
||||
drawerEdit.value = true;
|
||||
|
||||
item.decisions.forEach((d) => {
|
||||
form.decisions.push({
|
||||
name: d.name,
|
||||
id: d.id
|
||||
});
|
||||
})
|
||||
}
|
||||
item.decisions.forEach((d) => {
|
||||
form.decisions.push({
|
||||
name: d.name,
|
||||
id: d.id,
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const closeEditDrawer = () => {
|
||||
drawerEdit.value = false;
|
||||
form.reset();
|
||||
}
|
||||
drawerEdit.value = false;
|
||||
form.reset();
|
||||
};
|
||||
|
||||
const openCreateDrawer = () => {
|
||||
createForm.reset();
|
||||
drawerCreate.value = true;
|
||||
}
|
||||
createForm.reset();
|
||||
drawerCreate.value = true;
|
||||
};
|
||||
|
||||
const closeCreateDrawer = () => {
|
||||
drawerCreate.value = false;
|
||||
createForm.reset();
|
||||
}
|
||||
drawerCreate.value = false;
|
||||
createForm.reset();
|
||||
};
|
||||
|
||||
const onColorPickerChange = () => {
|
||||
console.log(form.color_tag);
|
||||
}
|
||||
// removed unused color picker change handler; InlineColorPicker handles updates
|
||||
|
||||
onMounted(() => {
|
||||
props.decisions.forEach((d) => {
|
||||
selectOptions.value.push({
|
||||
name: d.name,
|
||||
id: d.id
|
||||
});
|
||||
|
||||
props.decisions.forEach((d) => {
|
||||
selectOptions.value.push({
|
||||
name: d.name,
|
||||
id: d.id,
|
||||
});
|
||||
props.segments.forEach((s) => {
|
||||
segmentOptions.value.push({
|
||||
name: s.name,
|
||||
id: s.id
|
||||
})
|
||||
})
|
||||
|
||||
});
|
||||
props.segments.forEach((s) => {
|
||||
segmentOptions.value.push({
|
||||
name: s.name,
|
||||
id: s.id,
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
const filtered = computed(() => {
|
||||
const term = search.value?.toLowerCase() ?? '';
|
||||
return (props.actions || []).filter(a => {
|
||||
const matchesSearch = !term || a.name?.toLowerCase().includes(term) || a.color_tag?.toLowerCase().includes(term);
|
||||
const matchesSegment = !selectedSegment.value || a.segment?.id === selectedSegment.value;
|
||||
return matchesSearch && matchesSegment;
|
||||
});
|
||||
const term = search.value?.toLowerCase() ?? "";
|
||||
return (props.actions || []).filter((a) => {
|
||||
const matchesSearch =
|
||||
!term ||
|
||||
a.name?.toLowerCase().includes(term) ||
|
||||
a.color_tag?.toLowerCase().includes(term);
|
||||
const matchesSegment =
|
||||
!selectedSegment.value || a.segment?.id === selectedSegment.value;
|
||||
return matchesSearch && matchesSegment;
|
||||
});
|
||||
});
|
||||
|
||||
const update = () => {
|
||||
form.put(route('settings.actions.update', { id: form.id }), {
|
||||
onSuccess: () => {
|
||||
closeEditDrawer();
|
||||
},
|
||||
});
|
||||
form.put(route("settings.actions.update", { id: form.id }), {
|
||||
onSuccess: () => {
|
||||
closeEditDrawer();
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const store = () => {
|
||||
createForm.post(route('settings.actions.store'), {
|
||||
onSuccess: () => {
|
||||
closeCreateDrawer();
|
||||
},
|
||||
});
|
||||
createForm.post(route("settings.actions.store"), {
|
||||
onSuccess: () => {
|
||||
closeCreateDrawer();
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const confirmDelete = (action) => {
|
||||
toDelete.value = action;
|
||||
showDelete.value = true;
|
||||
toDelete.value = action;
|
||||
showDelete.value = true;
|
||||
};
|
||||
|
||||
const cancelDelete = () => {
|
||||
toDelete.value = null;
|
||||
showDelete.value = false;
|
||||
toDelete.value = null;
|
||||
showDelete.value = false;
|
||||
};
|
||||
|
||||
const destroyAction = () => {
|
||||
if (!toDelete.value) return;
|
||||
router.delete(route('settings.actions.destroy', { id: toDelete.value.id }), {
|
||||
preserveScroll: true,
|
||||
onFinish: () => cancelDelete(),
|
||||
});
|
||||
if (!toDelete.value) return;
|
||||
router.delete(route("settings.actions.destroy", { id: toDelete.value.id }), {
|
||||
preserveScroll: true,
|
||||
onFinish: () => cancelDelete(),
|
||||
});
|
||||
};
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<div class="p-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div class="flex gap-3 items-center w-full sm:w-auto">
|
||||
<TextInput v-model="search" placeholder="Search actions..." class="w-full sm:w-64" />
|
||||
<div class="w-64">
|
||||
<Multiselect
|
||||
v-model="selectedSegment"
|
||||
:options="segmentOptions.map(o=>o.id)"
|
||||
:multiple="false"
|
||||
:searchable="true"
|
||||
placeholder="Filter by segment"
|
||||
:append-to-body="true"
|
||||
:custom-label="(opt) => (segmentOptions.find(o=>o.id===opt)?.name || '')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<PrimaryButton @click="openCreateDrawer">+ Dodaj akcijo</PrimaryButton>
|
||||
<div class="p-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div class="flex gap-3 items-center w-full sm:w-auto">
|
||||
<TextInput
|
||||
v-model="search"
|
||||
placeholder="Search actions..."
|
||||
class="w-full sm:w-64"
|
||||
/>
|
||||
<div class="w-64">
|
||||
<Multiselect
|
||||
v-model="selectedSegment"
|
||||
:options="segmentOptions.map((o) => o.id)"
|
||||
:multiple="false"
|
||||
:searchable="true"
|
||||
placeholder="Filter by segment"
|
||||
:append-to-body="true"
|
||||
:custom-label="(opt) => segmentOptions.find((o) => o.id === opt)?.name || ''"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<PrimaryButton @click="openCreateDrawer">+ Dodaj akcijo</PrimaryButton>
|
||||
</div>
|
||||
<div class="px-4 pb-4">
|
||||
<DataTableClient
|
||||
:columns="columns"
|
||||
:rows="filtered"
|
||||
:sort="sort"
|
||||
:search="''"
|
||||
:page="page"
|
||||
:pageSize="pageSize"
|
||||
:showToolbar="false"
|
||||
@update:sort="(v) => (sort = v)"
|
||||
@update:page="(v) => (page = v)"
|
||||
@update:pageSize="(v) => (pageSize = v)"
|
||||
>
|
||||
<template #cell-color_tag="{ row }">
|
||||
<div class="flex items-center gap-2">
|
||||
<span
|
||||
v-if="row.color_tag"
|
||||
class="inline-block h-4 w-4 rounded"
|
||||
:style="{ backgroundColor: row.color_tag }"
|
||||
></span>
|
||||
<span>{{ row.color_tag || "—" }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #cell-decisions="{ row }">
|
||||
{{ row.decisions?.length ?? 0 }}
|
||||
</template>
|
||||
<template #actions="{ row }">
|
||||
<button class="px-2" @click="openEditDrawer(row)">
|
||||
<EditIcon size="md" css="text-gray-500" />
|
||||
</button>
|
||||
<button
|
||||
class="px-2 disabled:opacity-40"
|
||||
:disabled="(row.activities_count ?? 0) > 0"
|
||||
@click="confirmDelete(row)"
|
||||
>
|
||||
<TrashBinIcon size="md" css="text-red-500" />
|
||||
</button>
|
||||
</template>
|
||||
</DataTableClient>
|
||||
</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>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 filtered" :key="act.id">
|
||||
<fwb-table-cell>{{ act.id }}</fwb-table-cell>
|
||||
<fwb-table-cell>{{ act.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: act.color_tag }"></span>
|
||||
<span>{{ act.color_tag }}</span>
|
||||
</div>
|
||||
</fwb-table-cell>
|
||||
<fwb-table-cell>{{ act.decisions.length }}</fwb-table-cell>
|
||||
<fwb-table-cell>
|
||||
<button class="px-2" @click="openEditDrawer(act)"><EditIcon size="md" css="text-gray-500" /></button>
|
||||
<button class="px-2 disabled:opacity-40" :disabled="(act.activities_count ?? 0) > 0" @click="confirmDelete(act)"><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 akcijo</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"
|
||||
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">
|
||||
<InlineColorPicker v-model="form.color_tag" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogModal :show="drawerEdit" @close="closeEditDrawer">
|
||||
<template #title>
|
||||
<span>Spremeni akcijo</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"
|
||||
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="segmentEdit" value="Segment"/>
|
||||
<multiselect
|
||||
id="segmentEdit"
|
||||
v-model="form.segment_id"
|
||||
:options="segmentOptions.map(s=>s.id)"
|
||||
:multiple="false"
|
||||
:searchable="true"
|
||||
:taggable="false"
|
||||
placeholder="Izberi segment"
|
||||
:append-to-body="true"
|
||||
:custom-label="(opt) => (segmentOptions.find(s=>s.id===opt)?.name || '')"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="segmentEdit" value="Segment" />
|
||||
<multiselect
|
||||
id="segmentEdit"
|
||||
v-model="form.segment_id"
|
||||
:options="segmentOptions.map((s) => s.id)"
|
||||
:multiple="false"
|
||||
:searchable="true"
|
||||
:taggable="false"
|
||||
placeholder="Izberi segment"
|
||||
:append-to-body="true"
|
||||
:custom-label="(opt) => segmentOptions.find((s) => s.id === opt)?.name || ''"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="decisions" value="Odločitve"/>
|
||||
<multiselect
|
||||
id="decisions"
|
||||
ref="decisionsSelect"
|
||||
v-model="form.decisions"
|
||||
:options="selectOptions"
|
||||
:multiple="true"
|
||||
track-by="id"
|
||||
:taggable="true"
|
||||
placeholder="Dodaj odločitev"
|
||||
:append-to-body="true"
|
||||
label="name"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="decisions" value="Odločitve" />
|
||||
<multiselect
|
||||
id="decisions"
|
||||
ref="decisionsSelect"
|
||||
v-model="form.decisions"
|
||||
:options="selectOptions"
|
||||
:multiple="true"
|
||||
track-by="id"
|
||||
:taggable="true"
|
||||
placeholder="Dodaj odločitev"
|
||||
:append-to-body="true"
|
||||
label="name"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end mt-4">
|
||||
<ActionMessage :on="form.recentlySuccessful" class="me-3">
|
||||
Shranjuje.
|
||||
</ActionMessage>
|
||||
<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>
|
||||
<PrimaryButton
|
||||
:class="{ 'opacity-25': form.processing }"
|
||||
:disabled="form.processing"
|
||||
>
|
||||
Shrani
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
</DialogModal>
|
||||
|
||||
<DialogModal :show="drawerCreate" @close="closeCreateDrawer">
|
||||
<template #title>
|
||||
<span>Dodaj akcijo</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="segmentCreate" value="Segment"/>
|
||||
<multiselect
|
||||
id="segmentCreate"
|
||||
v-model="createForm.segment_id"
|
||||
:options="segmentOptions.map(s=>s.id)"
|
||||
:multiple="false"
|
||||
:searchable="true"
|
||||
:taggable="false"
|
||||
placeholder="Izberi segment"
|
||||
:append-to-body="true"
|
||||
:custom-label="(opt) => (segmentOptions.find(s=>s.id===opt)?.name || '')"
|
||||
/>
|
||||
</div>
|
||||
<DialogModal :show="drawerCreate" @close="closeCreateDrawer">
|
||||
<template #title>
|
||||
<span>Dodaj akcijo</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">
|
||||
<InlineColorPicker v-model="createForm.color_tag" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="decisionsCreate" value="Odločitve"/>
|
||||
<multiselect
|
||||
id="decisionsCreate"
|
||||
v-model="createForm.decisions"
|
||||
:options="selectOptions"
|
||||
:multiple="true"
|
||||
track-by="id"
|
||||
:taggable="true"
|
||||
placeholder="Dodaj odločitev"
|
||||
:append-to-body="true"
|
||||
label="name"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="segmentCreate" value="Segment" />
|
||||
<multiselect
|
||||
id="segmentCreate"
|
||||
v-model="createForm.segment_id"
|
||||
:options="segmentOptions.map((s) => s.id)"
|
||||
:multiple="false"
|
||||
:searchable="true"
|
||||
:taggable="false"
|
||||
placeholder="Izberi segment"
|
||||
:append-to-body="true"
|
||||
:custom-label="(opt) => segmentOptions.find((s) => s.id === opt)?.name || ''"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end mt-4">
|
||||
<ActionMessage :on="createForm.recentlySuccessful" class="me-3">
|
||||
Shranjuje.
|
||||
</ActionMessage>
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="decisionsCreate" value="Odločitve" />
|
||||
<multiselect
|
||||
id="decisionsCreate"
|
||||
v-model="createForm.decisions"
|
||||
:options="selectOptions"
|
||||
:multiple="true"
|
||||
track-by="id"
|
||||
:taggable="true"
|
||||
placeholder="Dodaj odločitev"
|
||||
:append-to-body="true"
|
||||
label="name"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<PrimaryButton :class="{ 'opacity-25': createForm.processing }" :disabled="createForm.processing">
|
||||
Dodaj
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
</DialogModal>
|
||||
<div class="flex justify-end mt-4">
|
||||
<ActionMessage :on="createForm.recentlySuccessful" class="me-3">
|
||||
Shranjuje.
|
||||
</ActionMessage>
|
||||
|
||||
<ConfirmationModal :show="showDelete" @close="cancelDelete">
|
||||
<template #title>
|
||||
Delete action
|
||||
</template>
|
||||
<template #content>
|
||||
Are you sure you want to delete action "{{ 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="destroyAction">Delete</PrimaryButton>
|
||||
</template>
|
||||
</ConfirmationModal>
|
||||
</template>
|
||||
<PrimaryButton
|
||||
:class="{ 'opacity-25': createForm.processing }"
|
||||
:disabled="createForm.processing"
|
||||
>
|
||||
Dodaj
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
</DialogModal>
|
||||
|
||||
<ConfirmationModal :show="showDelete" @close="cancelDelete">
|
||||
<template #title> Delete action </template>
|
||||
<template #content>
|
||||
Are you sure you want to delete action "{{ 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="destroyAction">Delete</PrimaryButton>
|
||||
</template>
|
||||
</ConfirmationModal>
|
||||
</template>
|
||||
|
||||
@@ -1,20 +1,22 @@
|
||||
<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';
|
||||
// flowbite-vue table imports removed; using DataTableClient
|
||||
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";
|
||||
import DataTableClient from "@/Components/DataTable/DataTableClient.vue";
|
||||
import InlineColorPicker from "@/Components/InlineColorPicker.vue";
|
||||
|
||||
const props = defineProps({
|
||||
decisions: Array,
|
||||
actions: Array,
|
||||
emailTemplates: { type: Array, default: () => [] }
|
||||
decisions: Array,
|
||||
actions: Array,
|
||||
emailTemplates: { type: Array, default: () => [] },
|
||||
});
|
||||
|
||||
const drawerEdit = ref(false);
|
||||
@@ -22,328 +24,403 @@ const drawerCreate = ref(false);
|
||||
const showDelete = ref(false);
|
||||
const toDelete = ref(null);
|
||||
|
||||
const search = ref('');
|
||||
const search = ref("");
|
||||
const selectedTemplateId = ref(null);
|
||||
const onlyAutoMail = ref(false);
|
||||
|
||||
const actionOptions = ref([]);
|
||||
|
||||
// DataTable state
|
||||
const sort = ref({ key: null, direction: null });
|
||||
const page = ref(1);
|
||||
const pageSize = ref(25);
|
||||
const columns = [
|
||||
{ key: "id", label: "#", sortable: true, class: "w-16" },
|
||||
{ key: "name", label: "Name", sortable: true },
|
||||
{ key: "color_tag", label: "Color tag", sortable: false },
|
||||
{ key: "belongs", label: "Belongs to actions", sortable: false, class: "w-40" },
|
||||
{ key: "auto_mail", label: "Auto mail", sortable: false, class: "w-56" },
|
||||
];
|
||||
|
||||
const form = useForm({
|
||||
id: 0,
|
||||
name: '',
|
||||
color_tag: '',
|
||||
actions: [],
|
||||
auto_mail: false,
|
||||
email_template_id: null,
|
||||
id: 0,
|
||||
name: "",
|
||||
color_tag: "",
|
||||
actions: [],
|
||||
auto_mail: false,
|
||||
email_template_id: null,
|
||||
});
|
||||
|
||||
const createForm = useForm({
|
||||
name: '',
|
||||
color_tag: '',
|
||||
actions: [],
|
||||
auto_mail: false,
|
||||
email_template_id: null,
|
||||
name: "",
|
||||
color_tag: "",
|
||||
actions: [],
|
||||
auto_mail: false,
|
||||
email_template_id: null,
|
||||
});
|
||||
|
||||
const openEditDrawer = (item) => {
|
||||
form.actions = [];
|
||||
form.id = item.id;
|
||||
form.name = item.name;
|
||||
form.color_tag = item.color_tag;
|
||||
form.auto_mail = !!item.auto_mail;
|
||||
form.email_template_id = item.email_template_id || null;
|
||||
drawerEdit.value = true;
|
||||
form.actions = [];
|
||||
form.id = item.id;
|
||||
form.name = item.name;
|
||||
form.color_tag = item.color_tag;
|
||||
form.auto_mail = !!item.auto_mail;
|
||||
form.email_template_id = item.email_template_id || null;
|
||||
drawerEdit.value = true;
|
||||
|
||||
item.actions.forEach((a) => {
|
||||
form.actions.push({
|
||||
name: a.name,
|
||||
id: a.id
|
||||
});
|
||||
})
|
||||
}
|
||||
item.actions.forEach((a) => {
|
||||
form.actions.push({
|
||||
name: a.name,
|
||||
id: a.id,
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const closeEditDrawer = () => {
|
||||
drawerEdit.value = false;
|
||||
form.reset();
|
||||
}
|
||||
drawerEdit.value = false;
|
||||
form.reset();
|
||||
};
|
||||
|
||||
const openCreateDrawer = () => {
|
||||
createForm.reset();
|
||||
drawerCreate.value = true;
|
||||
}
|
||||
createForm.reset();
|
||||
drawerCreate.value = true;
|
||||
};
|
||||
|
||||
const closeCreateDrawer = () => {
|
||||
drawerCreate.value = false;
|
||||
createForm.reset();
|
||||
}
|
||||
drawerCreate.value = false;
|
||||
createForm.reset();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
props.actions.forEach((a) => {
|
||||
actionOptions.value.push({
|
||||
name: a.name,
|
||||
id: a.id
|
||||
});
|
||||
props.actions.forEach((a) => {
|
||||
actionOptions.value.push({
|
||||
name: a.name,
|
||||
id: a.id,
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
const filtered = computed(() => {
|
||||
const term = search.value?.toLowerCase() ?? '';
|
||||
const tplId = selectedTemplateId.value ? Number(selectedTemplateId.value) : null;
|
||||
return (props.decisions || []).filter(d => {
|
||||
const matchesSearch = !term || d.name?.toLowerCase().includes(term) || d.color_tag?.toLowerCase().includes(term);
|
||||
const matchesAuto = !onlyAutoMail.value || !!d.auto_mail;
|
||||
const matchesTemplate = !tplId || Number(d.email_template_id || 0) === tplId;
|
||||
return matchesSearch && matchesAuto && matchesTemplate;
|
||||
});
|
||||
const term = search.value?.toLowerCase() ?? "";
|
||||
const tplId = selectedTemplateId.value ? Number(selectedTemplateId.value) : null;
|
||||
return (props.decisions || []).filter((d) => {
|
||||
const matchesSearch =
|
||||
!term ||
|
||||
d.name?.toLowerCase().includes(term) ||
|
||||
d.color_tag?.toLowerCase().includes(term);
|
||||
const matchesAuto = !onlyAutoMail.value || !!d.auto_mail;
|
||||
const matchesTemplate = !tplId || Number(d.email_template_id || 0) === tplId;
|
||||
return matchesSearch && matchesAuto && matchesTemplate;
|
||||
});
|
||||
});
|
||||
|
||||
const update = () => {
|
||||
form.put(route('settings.decisions.update', { id: form.id }), {
|
||||
onSuccess: () => {
|
||||
closeEditDrawer();
|
||||
},
|
||||
});
|
||||
form.put(route("settings.decisions.update", { id: form.id }), {
|
||||
onSuccess: () => {
|
||||
closeEditDrawer();
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const store = () => {
|
||||
createForm.post(route('settings.decisions.store'), {
|
||||
onSuccess: () => {
|
||||
closeCreateDrawer();
|
||||
},
|
||||
});
|
||||
createForm.post(route("settings.decisions.store"), {
|
||||
onSuccess: () => {
|
||||
closeCreateDrawer();
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const confirmDelete = (decision) => {
|
||||
toDelete.value = decision;
|
||||
showDelete.value = true;
|
||||
toDelete.value = decision;
|
||||
showDelete.value = true;
|
||||
};
|
||||
|
||||
const cancelDelete = () => {
|
||||
toDelete.value = null;
|
||||
showDelete.value = false;
|
||||
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(),
|
||||
});
|
||||
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 flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
|
||||
<div class="flex flex-col sm:flex-row gap-2 items-start sm:items-center">
|
||||
<TextInput v-model="search" placeholder="Search decisions..." class="w-full sm:w-72" />
|
||||
<select v-model="selectedTemplateId" class="block w-full sm:w-64 border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm">
|
||||
<option :value="null">All templates</option>
|
||||
<option v-for="t in emailTemplates" :key="t.id" :value="t.id">{{ t.name }}</option>
|
||||
</select>
|
||||
<label class="flex items-center gap-2 text-sm">
|
||||
<input type="checkbox" v-model="onlyAutoMail" class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500">
|
||||
Only auto mail
|
||||
</label>
|
||||
</div>
|
||||
<PrimaryButton @click="openCreateDrawer">+ Dodaj odločitev</PrimaryButton>
|
||||
<div class="p-4 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
|
||||
<div class="flex flex-col sm:flex-row gap-2 items-start sm:items-center">
|
||||
<TextInput
|
||||
v-model="search"
|
||||
placeholder="Search decisions..."
|
||||
class="w-full sm:w-72"
|
||||
/>
|
||||
<select
|
||||
v-model="selectedTemplateId"
|
||||
class="block w-full sm:w-64 border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
|
||||
>
|
||||
<option :value="null">All templates</option>
|
||||
<option v-for="t in emailTemplates" :key="t.id" :value="t.id">
|
||||
{{ t.name }}
|
||||
</option>
|
||||
</select>
|
||||
<label class="flex items-center gap-2 text-sm">
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="onlyAutoMail"
|
||||
class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500"
|
||||
/>
|
||||
Only auto mail
|
||||
</label>
|
||||
</div>
|
||||
<PrimaryButton @click="openCreateDrawer">+ Dodaj odločitev</PrimaryButton>
|
||||
</div>
|
||||
<div class="px-4 pb-4">
|
||||
<DataTableClient
|
||||
:columns="columns"
|
||||
:rows="filtered"
|
||||
:sort="sort"
|
||||
:search="''"
|
||||
:page="page"
|
||||
:pageSize="pageSize"
|
||||
:showToolbar="false"
|
||||
@update:sort="(v) => (sort = v)"
|
||||
@update:page="(v) => (page = v)"
|
||||
@update:pageSize="(v) => (pageSize = v)"
|
||||
>
|
||||
<template #cell-color_tag="{ row }">
|
||||
<div class="flex items-center gap-2">
|
||||
<span
|
||||
v-if="row.color_tag"
|
||||
class="inline-block h-4 w-4 rounded"
|
||||
:style="{ backgroundColor: row.color_tag }"
|
||||
></span>
|
||||
<span>{{ row.color_tag || "—" }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #cell-belongs="{ row }">
|
||||
{{ row.actions?.length ?? 0 }}
|
||||
</template>
|
||||
<template #cell-auto_mail="{ row }">
|
||||
<div class="flex flex-col text-sm">
|
||||
<span :class="row.auto_mail ? 'text-green-700' : 'text-gray-500'">{{
|
||||
row.auto_mail ? "Enabled" : "Disabled"
|
||||
}}</span>
|
||||
<span v-if="row.auto_mail && row.email_template_id" class="text-gray-600">
|
||||
Template:
|
||||
{{ emailTemplates.find((t) => t.id === row.email_template_id)?.name || "—" }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #actions="{ row }">
|
||||
<button class="px-2" @click="openEditDrawer(row)">
|
||||
<EditIcon size="md" css="text-gray-500" />
|
||||
</button>
|
||||
<button
|
||||
class="px-2 disabled:opacity-40"
|
||||
:disabled="(row.activities_count ?? 0) > 0"
|
||||
@click="confirmDelete(row)"
|
||||
>
|
||||
<TrashBinIcon size="md" css="text-red-500" />
|
||||
</button>
|
||||
</template>
|
||||
</DataTableClient>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<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>Auto mail</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>
|
||||
<div class="flex flex-col text-sm">
|
||||
<span :class="d.auto_mail ? 'text-green-700' : 'text-gray-500'">{{ d.auto_mail ? 'Enabled' : 'Disabled' }}</span>
|
||||
<span v-if="d.auto_mail && d.email_template_id" class="text-gray-600">
|
||||
Template: {{ (emailTemplates.find(t => t.id === d.email_template_id)?.name) || '—' }}
|
||||
</span>
|
||||
</div>
|
||||
</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>
|
||||
<div class="mt-4 flex items-center gap-2">
|
||||
<input
|
||||
id="autoMailEdit"
|
||||
type="checkbox"
|
||||
v-model="form.auto_mail"
|
||||
class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500"
|
||||
/>
|
||||
<label for="autoMailEdit" class="text-sm">Samodejna pošta (auto mail)</label>
|
||||
</div>
|
||||
|
||||
<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 mt-2">
|
||||
<InputLabel for="emailTemplateEdit" value="Email predloga" />
|
||||
<select
|
||||
id="emailTemplateEdit"
|
||||
v-model="form.email_template_id"
|
||||
:disabled="!form.auto_mail"
|
||||
class="block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<option :value="null">— Brez —</option>
|
||||
<option v-for="t in emailTemplates" :key="t.id" :value="t.id">
|
||||
{{ t.name }}
|
||||
</option>
|
||||
</select>
|
||||
<p v-if="form.email_template_id" class="text-xs text-gray-500 mt-1">
|
||||
<span
|
||||
v-if="
|
||||
(
|
||||
emailTemplates.find((t) => t.id === form.email_template_id)
|
||||
?.entity_types || []
|
||||
).includes('contract')
|
||||
"
|
||||
>Ta predloga zahteva pogodbo.</span
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="colorTag" value="Barva" />
|
||||
<div class="mt-1">
|
||||
<InlineColorPicker v-model="form.color_tag" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 flex items-center gap-2">
|
||||
<input id="autoMailEdit" type="checkbox" v-model="form.auto_mail" class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500">
|
||||
<label for="autoMailEdit" class="text-sm">Samodejna pošta (auto mail)</label>
|
||||
</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="col-span-6 sm:col-span-4 mt-2">
|
||||
<InputLabel for="emailTemplateEdit" value="Email predloga"/>
|
||||
<select id="emailTemplateEdit" v-model="form.email_template_id" :disabled="!form.auto_mail" class="block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm disabled:opacity-50 disabled:cursor-not-allowed">
|
||||
<option :value="null">— Brez —</option>
|
||||
<option v-for="t in emailTemplates" :key="t.id" :value="t.id">{{ t.name }}</option>
|
||||
</select>
|
||||
<p v-if="form.email_template_id" class="text-xs text-gray-500 mt-1">
|
||||
<span v-if="(emailTemplates.find(t => t.id === form.email_template_id)?.entity_types || []).includes('contract')">Ta predloga zahteva pogodbo.</span>
|
||||
</p>
|
||||
</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="flex justify-end mt-4">
|
||||
<ActionMessage :on="form.recentlySuccessful" class="me-3">
|
||||
Shranjuje.
|
||||
</ActionMessage>
|
||||
|
||||
<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>
|
||||
<PrimaryButton
|
||||
:class="{ 'opacity-25': form.processing }"
|
||||
:disabled="form.processing"
|
||||
>
|
||||
Shrani
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
</DialogModal>
|
||||
|
||||
<div class="flex justify-end mt-4">
|
||||
<ActionMessage :on="form.recentlySuccessful" class="me-3">
|
||||
Shranjuje.
|
||||
</ActionMessage>
|
||||
<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>
|
||||
|
||||
<PrimaryButton :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
|
||||
Shrani
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
</DialogModal>
|
||||
<div class="mt-4 flex items-center gap-2">
|
||||
<input
|
||||
id="autoMailCreate"
|
||||
type="checkbox"
|
||||
v-model="createForm.auto_mail"
|
||||
class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500"
|
||||
/>
|
||||
<label for="autoMailCreate" class="text-sm">Samodejna pošta (auto mail)</label>
|
||||
</div>
|
||||
|
||||
<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 mt-2">
|
||||
<InputLabel for="emailTemplateCreate" value="Email predloga" />
|
||||
<select
|
||||
id="emailTemplateCreate"
|
||||
v-model="createForm.email_template_id"
|
||||
:disabled="!createForm.auto_mail"
|
||||
class="block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<option :value="null">— Brez —</option>
|
||||
<option v-for="t in emailTemplates" :key="t.id" :value="t.id">
|
||||
{{ t.name }}
|
||||
</option>
|
||||
</select>
|
||||
<p v-if="createForm.email_template_id" class="text-xs text-gray-500 mt-1">
|
||||
<span
|
||||
v-if="
|
||||
(
|
||||
emailTemplates.find((t) => t.id === createForm.email_template_id)
|
||||
?.entity_types || []
|
||||
).includes('contract')
|
||||
"
|
||||
>Ta predloga zahteva pogodbo.</span
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="colorTagCreate" value="Barva" />
|
||||
<div class="mt-1">
|
||||
<InlineColorPicker v-model="createForm.color_tag" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 flex items-center gap-2">
|
||||
<input id="autoMailCreate" type="checkbox" v-model="createForm.auto_mail" class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500">
|
||||
<label for="autoMailCreate" class="text-sm">Samodejna pošta (auto mail)</label>
|
||||
</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="col-span-6 sm:col-span-4 mt-2">
|
||||
<InputLabel for="emailTemplateCreate" value="Email predloga"/>
|
||||
<select id="emailTemplateCreate" v-model="createForm.email_template_id" :disabled="!createForm.auto_mail" class="block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm disabled:opacity-50 disabled:cursor-not-allowed">
|
||||
<option :value="null">— Brez —</option>
|
||||
<option v-for="t in emailTemplates" :key="t.id" :value="t.id">{{ t.name }}</option>
|
||||
</select>
|
||||
<p v-if="createForm.email_template_id" class="text-xs text-gray-500 mt-1">
|
||||
<span v-if="(emailTemplates.find(t => t.id === createForm.email_template_id)?.entity_types || []).includes('contract')">Ta predloga zahteva pogodbo.</span>
|
||||
</p>
|
||||
</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="flex justify-end mt-4">
|
||||
<ActionMessage :on="createForm.recentlySuccessful" class="me-3">
|
||||
Shranjuje.
|
||||
</ActionMessage>
|
||||
|
||||
<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>
|
||||
<PrimaryButton
|
||||
:class="{ 'opacity-25': createForm.processing }"
|
||||
:disabled="createForm.processing"
|
||||
>
|
||||
Dodaj
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
</DialogModal>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user