370 lines
10 KiB
Vue
370 lines
10 KiB
Vue
<script setup>
|
|
// 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,
|
|
});
|
|
|
|
const drawerEdit = ref(false);
|
|
const drawerCreate = ref(false);
|
|
const showDelete = ref(false);
|
|
const toDelete = ref(null);
|
|
|
|
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: "Ime", sortable: true },
|
|
{ key: "color_tag", label: "Barva", sortable: false },
|
|
{ key: "decisions", label: "Odločitve", sortable: false, class: "w-32" },
|
|
];
|
|
|
|
const form = useForm({
|
|
id: 0,
|
|
name: "",
|
|
color_tag: "",
|
|
segment_id: null,
|
|
decisions: [],
|
|
});
|
|
|
|
const createForm = useForm({
|
|
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;
|
|
|
|
item.decisions.forEach((d) => {
|
|
form.decisions.push({
|
|
name: d.name,
|
|
id: d.id,
|
|
});
|
|
});
|
|
};
|
|
|
|
const closeEditDrawer = () => {
|
|
drawerEdit.value = false;
|
|
form.reset();
|
|
};
|
|
|
|
const openCreateDrawer = () => {
|
|
createForm.reset();
|
|
drawerCreate.value = true;
|
|
};
|
|
|
|
const closeCreateDrawer = () => {
|
|
drawerCreate.value = false;
|
|
createForm.reset();
|
|
};
|
|
|
|
// removed unused color picker change handler; InlineColorPicker handles updates
|
|
|
|
onMounted(() => {
|
|
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,
|
|
});
|
|
});
|
|
});
|
|
|
|
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 update = () => {
|
|
form.put(route("settings.actions.update", { id: form.id }), {
|
|
onSuccess: () => {
|
|
closeEditDrawer();
|
|
},
|
|
});
|
|
};
|
|
|
|
const store = () => {
|
|
createForm.post(route("settings.actions.store"), {
|
|
onSuccess: () => {
|
|
closeCreateDrawer();
|
|
},
|
|
});
|
|
};
|
|
|
|
const confirmDelete = (action) => {
|
|
toDelete.value = action;
|
|
showDelete.value = true;
|
|
};
|
|
|
|
const cancelDelete = () => {
|
|
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(),
|
|
});
|
|
};
|
|
</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="Iskanje..." 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 po segmentu"
|
|
: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>
|
|
|
|
<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>
|
|
|
|
<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="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 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="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="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="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 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>
|