sipo/Teren-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Changes to UI

Browse Source
This commit is contained in:
Simon Pocrnjič 2025-10-18 22:56:51 +02:00
parent bf09164dbe
commit 8f2e5e282c
13 changed files with 1440 additions and 1137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/Http/Controllers/WorkflowController.php
View File

@ -14,8 +14,8 @@ class WorkflowController extends Controller
public function index(Request $request) public function index(Request $request)
{ {
return Inertia::render('Settings/Workflow/Index', [ return Inertia::render('Settings/Workflow/Index', [
'actions' => Action::query()->with(['decisions', 'segment'])->withCount('activities')->get(), 'actions' => Action::query()->with(['decisions', 'segment'])->withCount('activities')->orderBy('id')->get(),
'decisions' => Decision::query()->with('actions')->withCount('activities')->get(), 'decisions' => Decision::query()->with('actions')->withCount('activities')->orderBy('id')->get(),
'segments' => Segment::query()->get(), 'segments' => Segment::query()->get(),
'email_templates' => EmailTemplate::query()->where('active', true)->get(['id', 'name', 'entity_types']), 'email_templates' => EmailTemplate::query()->where('active', true)->get(['id', 'name', 'entity_types']),
]); ]);

29
resources/js/Components/DataTable/DataTableClient.vue
View File

@ -209,7 +209,7 @@ function setPageSize(ps) {
@click="toggleSort(col)" @click="toggleSort(col)"
:aria-sort="sort?.key === col.key ? sort.direction || 'none' : 'none'" :aria-sort="sort?.key === col.key ? sort.direction || 'none' : 'none'"
> >
<span>{{ col.label }}</span> <span class="uppercase">{{ col.label }}</span>
<span v-if="sort?.key === col.key && sort.direction === 'asc'">▲</span> <span v-if="sort?.key === col.key && sort.direction === 'asc'">▲</span>
<span v-else-if="sort?.key === col.key && sort.direction === 'desc'" <span v-else-if="sort?.key === col.key && sort.direction === 'desc'"
>▼</span >▼</span
@ -281,9 +281,14 @@ function setPageSize(ps) {
</FwbTable> </FwbTable>
</div> </div>
<nav class="mt-3 flex flex-wrap items-center justify-between gap-3 text-sm text-gray-700" aria-label="Pagination"> <nav
class="mt-3 flex flex-wrap items-center justify-between gap-3 text-sm text-gray-700"
aria-label="Pagination"
>
<div v-if="showPageStats"> <div v-if="showPageStats">
<span v-if="total > 0">Prikazano: {{ showingFrom }}–{{ showingTo }} od {{ total }}</span> <span v-if="total > 0"
>Prikazano: {{ showingFrom }}–{{ showingTo }} od {{ total }}</span
>
<span v-else>Ni zadetkov</span> <span v-else>Ni zadetkov</span>
</div> </div>
<div class="flex items-center gap-1"> <div class="flex items-center gap-1">
@ -311,7 +316,9 @@ function setPageSize(ps) {
v-if="visiblePages[0] > 1" v-if="visiblePages[0] > 1"
class="px-2 py-1 rounded border border-gray-300 hover:bg-gray-50" class="px-2 py-1 rounded border border-gray-300 hover:bg-gray-50"
@click="setPage(1)" @click="setPage(1)"
>1</button> >
1
</button>
<span v-if="visiblePages[0] > 2" class="px-1">…</span> <span v-if="visiblePages[0] > 2" class="px-1">…</span>
<!-- Page numbers --> <!-- Page numbers -->
@ -319,7 +326,11 @@ function setPageSize(ps) {
v-for="p in visiblePages" v-for="p in visiblePages"
:key="p" :key="p"
class="px-3 py-1 rounded border transition-colors" class="px-3 py-1 rounded border transition-colors"
:class="p === currentPage ? 'border-indigo-600 bg-indigo-600 text-white' : 'border-gray-300 hover:bg-gray-50'" :class="
p === currentPage
? 'border-indigo-600 bg-indigo-600 text-white'
: 'border-gray-300 hover:bg-gray-50'
"
:aria-current="p === currentPage ? 'page' : undefined" :aria-current="p === currentPage ? 'page' : undefined"
@click="setPage(p)" @click="setPage(p)"
> >
@ -327,12 +338,16 @@ function setPageSize(ps) {
</button> </button>
<!-- Trailing ellipsis / last page when window doesn't include last --> <!-- Trailing ellipsis / last page when window doesn't include last -->
<span v-if="visiblePages[visiblePages.length - 1] < lastPage - 1" class="px-1">…</span> <span v-if="visiblePages[visiblePages.length - 1] < lastPage - 1" class="px-1"
>…</span
>
<button <button
v-if="visiblePages[visiblePages.length - 1] < lastPage" v-if="visiblePages[visiblePages.length - 1] < lastPage"
class="px-2 py-1 rounded border border-gray-300 hover:bg-gray-50" class="px-2 py-1 rounded border border-gray-300 hover:bg-gray-50"
@click="setPage(lastPage)" @click="setPage(lastPage)"
>{{ lastPage }}</button> >
{{ lastPage }}
</button>
<!-- Next --> <!-- Next -->
<button <button

2
resources/js/Components/DataTable/DataTableServer.vue
View File

@ -209,7 +209,7 @@ function goToPageInput() {
@click="toggleSort(col)" @click="toggleSort(col)"
:aria-sort="sort?.key === col.key ? sort.direction || 'none' : 'none'" :aria-sort="sort?.key === col.key ? sort.direction || 'none' : 'none'"
> >
<span>{{ col.label }}</span> <span class="uppercase">{{ col.label }}</span>
<span v-if="sort?.key === col.key && sort.direction === 'asc'">▲</span> <span v-if="sort?.key === col.key && sort.direction === 'asc'">▲</span>
<span v-else-if="sort?.key === col.key && sort.direction === 'desc'" <span v-else-if="sort?.key === col.key && sort.direction === 'desc'"
>▼</span >▼</span

61
resources/js/Components/InlineColorPicker.vue Normal file
View File

@ -0,0 +1,61 @@
<script setup>
import { computed, ref } from 'vue'
const props = defineProps({
modelValue: { type: String, default: null },
defaultColor: { type: String, default: '#000000' },
clearLabel: { type: String, default: 'Počisti' },
selectLabel: { type: String, default: 'Izberi barvo' },
})
const emit = defineEmits(['update:modelValue'])
const inputRef = ref(null)
const inputValue = computed(() => props.modelValue || props.defaultColor)
const hasValue = computed(() => !!props.modelValue)
function onInput(e) {
const val = e.target.value
emit('update:modelValue', val)
}
function clear() {
emit('update:modelValue', null)
}
</script>
<template>
<div class="flex items-center gap-2">
<div
class="relative px-2 py-1 rounded border border-gray-300 hover:bg-gray-50 inline-flex items-center gap-2 select-none"
>
<span
v-if="hasValue"
class="inline-block h-4 w-4 rounded"
:style="{ backgroundColor: modelValue }"
/>
<span class="text-sm text-gray-700">{{ hasValue ? modelValue : selectLabel }}</span>
<!-- Keep the same input element always mounted, positioned over the trigger to anchor the native picker -->
<input
ref="inputRef"
type="color"
class="absolute inset-0 opacity-0 cursor-pointer"
:value="inputValue"
@input="onInput"
aria-label="Color picker"
/>
</div>
<button
v-if="hasValue"
type="button"
class="px-2 py-1 rounded border border-gray-300 hover:bg-gray-50 text-sm"
@click="clear"
>
{{ clearLabel }}
</button>
</div>
</template>

789
resources/js/Components/PersonInfoGrid.vue
View File

@ -1,39 +1,37 @@
<script setup> <script setup>
import { FwbBadge } from 'flowbite-vue'; import { FwbBadge } from "flowbite-vue";
import { EditIcon, PlusIcon, UserEditIcon, TrashBinIcon } from '@/Utilities/Icons'; import { EditIcon, PlusIcon, UserEditIcon, TrashBinIcon } from "@/Utilities/Icons";
import CusTab from './CusTab.vue'; import CusTab from "./CusTab.vue";
import CusTabs from './CusTabs.vue'; import CusTabs from "./CusTabs.vue";
import { provide, ref, watch } from 'vue'; import { provide, ref, watch } from "vue";
import axios from 'axios'; import axios from "axios";
import PersonUpdateForm from './PersonUpdateForm.vue'; import PersonUpdateForm from "./PersonUpdateForm.vue";
import AddressCreateForm from './AddressCreateForm.vue'; import AddressCreateForm from "./AddressCreateForm.vue";
import AddressUpdateForm from './AddressUpdateForm.vue'; import AddressUpdateForm from "./AddressUpdateForm.vue";
import PhoneCreateForm from './PhoneCreateForm.vue'; import PhoneCreateForm from "./PhoneCreateForm.vue";
import EmailCreateForm from './EmailCreateForm.vue'; import EmailCreateForm from "./EmailCreateForm.vue";
import EmailUpdateForm from './EmailUpdateForm.vue'; import EmailUpdateForm from "./EmailUpdateForm.vue";
import TrrCreateForm from './TrrCreateForm.vue'; import TrrCreateForm from "./TrrCreateForm.vue";
import TrrUpdateForm from './TrrUpdateForm.vue'; import TrrUpdateForm from "./TrrUpdateForm.vue";
import ConfirmDialog from './ConfirmDialog.vue'; import ConfirmDialog from "./ConfirmDialog.vue";
const props = defineProps({ const props = defineProps({
person: Object, person: Object,
edit: { edit: {
type: Boolean, type: Boolean,
default: false default: false,
},
tabColor: {
type: String,
default: "blue-600",
},
types: {
type: Object,
default: {
address_types: [],
phone_types: [],
}, },
tabColor: { },
type: String,
default: 'blue-600'
},
types: {
type: Object,
default: {
address_types: [],
phone_types: []
}
}
}); });
const drawerUpdatePerson = ref(false); const drawerUpdatePerson = ref(false);
@ -54,353 +52,462 @@ const editTrrId = ref(0);
// Confirm dialog state // Confirm dialog state
const confirm = ref({ const confirm = ref({
show: false, show: false,
title: 'Potrditev brisanja', title: "Potrditev brisanja",
message: '', message: "",
type: '', // 'email' | 'trr' | 'address' | 'phone' type: "", // 'email' | 'trr' | 'address' | 'phone'
id: 0, id: 0,
}); });
const openConfirm = (type, id, label = '') => { const openConfirm = (type, id, label = "") => {
confirm.value = { confirm.value = {
show: true, show: true,
title: 'Potrditev brisanja', title: "Potrditev brisanja",
message: label ? `Ali res želite izbrisati “${label}”?` : 'Ali res želite izbrisati izbran element?', message: label
type, ? `Ali res želite izbrisati “${label}”?`
id, : "Ali res želite izbrisati izbran element?",
}; type,
} id,
const closeConfirm = () => { confirm.value.show = false; }; };
};
const closeConfirm = () => {
confirm.value.show = false;
};
const getMainAddress = (adresses) => { const getMainAddress = (adresses) => {
const addr = adresses.filter( a => a.type.id === 1 )[0] ?? ''; const addr = adresses.filter((a) => a.type.id === 1)[0] ?? "";
if( addr !== '' ){ if (addr !== "") {
const tail = (addr.post_code && addr.city) ? `, ${addr.post_code} ${addr.city}` : ''; const tail = addr.post_code && addr.city ? `, ${addr.post_code} ${addr.city}` : "";
const country = addr.country !== '' ? ` - ${addr.country}` : ''; const country = addr.country !== "" ? ` - ${addr.country}` : "";
return addr.address !== '' ? (addr.address + tail + country) : ''; return addr.address !== "" ? addr.address + tail + country : "";
} }
return ''; return "";
} };
const getMainPhone = (phones) => { const getMainPhone = (phones) => {
const pho = phones.filter( a => a.type.id === 1 )[0] ?? ''; const pho = phones.filter((a) => a.type.id === 1)[0] ?? "";
if( pho !== '' ){ if (pho !== "") {
const countryCode = pho.country_code !== null ? `+${pho.country_code} ` : ''; const countryCode = pho.country_code !== null ? `+${pho.country_code} ` : "";
return pho.nu !== '' ? countryCode + pho.nu: ''; return pho.nu !== "" ? countryCode + pho.nu : "";
} }
return ''; return "";
};
}
const openDrawerUpdateClient = () => { const openDrawerUpdateClient = () => {
drawerUpdatePerson.value = true; drawerUpdatePerson.value = true;
} };
const openDrawerAddAddress = (edit = false, id = 0) => { const openDrawerAddAddress = (edit = false, id = 0) => {
drawerAddAddress.value = true; drawerAddAddress.value = true;
editAddress.value = edit; editAddress.value = edit;
editAddressId.value = id; editAddressId.value = id;
};
}
const operDrawerAddPhone = (edit = false, id = 0) => { const operDrawerAddPhone = (edit = false, id = 0) => {
drawerAddPhone.value = true; drawerAddPhone.value = true;
editPhone.value = edit; editPhone.value = edit;
editPhoneId.value = id; editPhoneId.value = id;
} };
const openDrawerAddEmail = (edit = false, id = 0) => { const openDrawerAddEmail = (edit = false, id = 0) => {
drawerAddEmail.value = true; drawerAddEmail.value = true;
editEmail.value = edit; editEmail.value = edit;
editEmailId.value = id; editEmailId.value = id;
} };
const openDrawerAddTrr = (edit = false, id = 0) => { const openDrawerAddTrr = (edit = false, id = 0) => {
drawerAddTrr.value = true; drawerAddTrr.value = true;
editTrr.value = edit; editTrr.value = edit;
editTrrId.value = id; editTrrId.value = id;
} };
// Delete handlers (expects routes: person.email.delete, person.trr.delete) // Delete handlers (expects routes: person.email.delete, person.trr.delete)
const deleteEmail = async (emailId, label = '') => { const deleteEmail = async (emailId, label = "") => {
if (!emailId) return; if (!emailId) return;
openConfirm('email', emailId, label || 'email'); openConfirm("email", emailId, label || "email");
} };
const deleteTrr = async (trrId, label = '') => { const deleteTrr = async (trrId, label = "") => {
if (!trrId) return; if (!trrId) return;
openConfirm('trr', trrId, label || 'TRR'); openConfirm("trr", trrId, label || "TRR");
} };
const onConfirmDelete = async () => { const onConfirmDelete = async () => {
const { type, id } = confirm.value; const { type, id } = confirm.value;
try { try {
if (type === 'email') { if (type === "email") {
await axios.delete(route('person.email.delete', { person: props.person, email_id: id })); await axios.delete(
const list = props.person.emails || []; route("person.email.delete", { person: props.person, email_id: id })
const idx = list.findIndex(e => e.id === id); );
if (idx !== -1) list.splice(idx, 1); const list = props.person.emails || [];
} else if (type === 'trr') { const idx = list.findIndex((e) => e.id === id);
await axios.delete(route('person.trr.delete', { person: props.person, trr_id: id })); if (idx !== -1) list.splice(idx, 1);
let list = props.person.trrs || props.person.bank_accounts || props.person.accounts || props.person.bankAccounts || []; } else if (type === "trr") {
const idx = list.findIndex(a => a.id === id); await axios.delete(
if (idx !== -1) list.splice(idx, 1); route("person.trr.delete", { person: props.person, trr_id: id })
} else if (type === 'address') { );
await axios.delete(route('person.address.delete', { person: props.person, address_id: id })); let list =
const list = props.person.addresses || []; props.person.trrs ||
const idx = list.findIndex(a => a.id === id); props.person.bank_accounts ||
if (idx !== -1) list.splice(idx, 1); props.person.accounts ||
} else if (type === 'phone') { props.person.bankAccounts ||
await axios.delete(route('person.phone.delete', { person: props.person, phone_id: id })); [];
const list = props.person.phones || []; const idx = list.findIndex((a) => a.id === id);
const idx = list.findIndex(p => p.id === id); if (idx !== -1) list.splice(idx, 1);
if (idx !== -1) list.splice(idx, 1); } else if (type === "address") {
} await axios.delete(
closeConfirm(); route("person.address.delete", { person: props.person, address_id: id })
} catch (e) { );
console.error('Delete failed', e?.response || e); const list = props.person.addresses || [];
closeConfirm(); const idx = list.findIndex((a) => a.id === id);
if (idx !== -1) list.splice(idx, 1);
} else if (type === "phone") {
await axios.delete(
route("person.phone.delete", { person: props.person, phone_id: id })
);
const list = props.person.phones || [];
const idx = list.findIndex((p) => p.id === id);
if (idx !== -1) list.splice(idx, 1);
} }
} closeConfirm();
} catch (e) {
console.error("Delete failed", e?.response || e);
closeConfirm();
}
};
// Safe accessors for optional collections // Safe accessors for optional collections
const getEmails = (p) => Array.isArray(p?.emails) ? p.emails : [] const getEmails = (p) => (Array.isArray(p?.emails) ? p.emails : []);
const getTRRs = (p) => { const getTRRs = (p) => {
if (Array.isArray(p?.trrs)) return p.trrs if (Array.isArray(p?.trrs)) return p.trrs;
if (Array.isArray(p?.bank_accounts)) return p.bank_accounts if (Array.isArray(p?.bank_accounts)) return p.bank_accounts;
if (Array.isArray(p?.accounts)) return p.accounts if (Array.isArray(p?.accounts)) return p.accounts;
if (Array.isArray(p?.bankAccounts)) return p.bankAccounts if (Array.isArray(p?.bankAccounts)) return p.bankAccounts;
return [] return [];
} };
</script> </script>
<template> <template>
<CusTabs :selected-color="tabColor"> <CusTabs :selected-color="tabColor">
<CusTab name="person" title="Oseba"> <CusTab name="person" title="Oseba">
<div class="flex justify-end mb-2"> <div class="flex justify-end mb-2">
<span class=" border-b-2 border-gray-500 hover:border-gray-800"> <span class="border-b-2 border-gray-500 hover:border-gray-800">
<button @click="openDrawerUpdateClient"><UserEditIcon size="lg" css="text-gray-500 hover:text-gray-800" /></button> <button @click="openDrawerUpdateClient">
</span> <UserEditIcon size="lg" css="text-gray-500 hover:text-gray-800" />
</button>
</span>
</div>
<div class="grid grid-rows-* grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-2">
<div class="rounded p-2 shadow">
<p class="text-xs leading-5 md:text-sm text-gray-500">Nu.</p>
<p class="text-sm md:text-base leading-7 text-gray-900">{{ person.nu }}</p>
</div>
<div class="rounded p-2 shadow">
<p class="text-sm leading-5 md:text-sm text-gray-500">Name.</p>
<p class="text-sm md:text-base leading-7 text-gray-900">
{{ person.full_name }}
</p>
</div>
<div class="rounded p-2 shadow">
<p class="text-sm leading-5 md:text-sm text-gray-500">Tax NU.</p>
<p class="text-sm md:text-base leading-7 text-gray-900">
{{ person.tax_number }}
</p>
</div>
<div class="rounded p-2 shadow">
<p class="text-sm leading-5 md:text-sm text-gray-500">Social security NU.</p>
<p class="text-sm md:text-base leading-7 text-gray-900">
{{ person.social_security_number }}
</p>
</div>
</div>
<div class="grid grid-rows-* grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 mt-1">
<div class="rounded p-2 shadow">
<p class="text-sm leading-5 md:text-sm text-gray-500">Address</p>
<p class="text-sm md:text-base leading-7 text-gray-900">
{{ getMainAddress(person.addresses) }}
</p>
</div>
<div class="rounded p-2 shadow">
<p class="text-sm leading-5 md:text-sm text-gray-500">Phone</p>
<p class="text-sm md:text-base leading-7 text-gray-900">
{{ getMainPhone(person.phones) }}
</p>
</div>
<div class="md:col-span-full lg:col-span-1 rounded p-2 shadow">
<p class="text-sm leading-5 md:text-sm text-gray-500">Description</p>
<p class="text-sm md:text-base leading-7 text-gray-900">
{{ person.description }}
</p>
</div>
</div>
</CusTab>
<CusTab name="addresses" title="Naslovi">
<div class="flex justify-end mb-2">
<span class="border-b-2 border-gray-500 hover:border-gray-800">
<button>
<PlusIcon
@click="openDrawerAddAddress(false, 0)"
size="lg"
css="text-gray-500 hover:text-gray-800"
/>
</button>
</span>
</div>
<div class="grid grid-rows-* grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 mt-1">
<div class="rounded p-2 shadow" v-for="address in person.addresses">
<div class="text-sm leading-5 md:text-sm text-gray-500 flex justify-between">
<div class="flex">
<FwbBadge type="yellow">{{ address.country }}</FwbBadge>
<FwbBadge>{{ address.type.name }}</FwbBadge>
</div> </div>
<div class="grid grid-rows-* grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-2"> <div class="flex items-center gap-2">
<div class="rounded p-2 shadow"> <button>
<p class="text-xs leading-5 md:text-sm text-gray-500">Nu.</p> <EditIcon
<p class="text-sm md:text-base leading-7 text-gray-900">{{ person.nu }}</p> @click="openDrawerAddAddress(true, address.id)"
</div> size="md"
<div class="rounded p-2 shadow"> css="text-gray-500 hover:text-gray-800"
<p class="text-sm leading-5 md:text-sm text-gray-500">Name.</p> />
<p class="text-sm md:text-base leading-7 text-gray-900">{{ person.full_name }}</p> </button>
</div> <button @click="openConfirm('address', address.id, address.address)">
<div class="rounded p-2 shadow"> <TrashBinIcon size="md" css="text-red-600 hover:text-red-700" />
<p class="text-sm leading-5 md:text-sm text-gray-500">Tax NU.</p> </button>
<p class="text-sm md:text-base leading-7 text-gray-900">{{ person.tax_number }}</p>
</div>
<div class="rounded p-2 shadow">
<p class="text-sm leading-5 md:text-sm text-gray-500">Social security NU.</p>
<p class="text-sm md:text-base leading-7 text-gray-900">{{ person.social_security_number }}</p>
</div>
</div> </div>
<div class="grid grid-rows-* grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 mt-1"> </div>
<div class="rounded p-2 shadow"> <p class="text-sm md:text-base leading-7 text-gray-900">
<p class="text-sm leading-5 md:text-sm text-gray-500">Address</p> {{
<p class="text-sm md:text-base leading-7 text-gray-900">{{ getMainAddress(person.addresses) }}</p> address.post_code && address.city
</div> ? `${address.address}, ${address.post_code} ${address.city}`
<div class="rounded p-2 shadow"> : address.address
<p class="text-sm leading-5 md:text-sm text-gray-500">Phone</p> }}
<p class="text-sm md:text-base leading-7 text-gray-900">{{ getMainPhone(person.phones) }}</p> </p>
</div> </div>
<div class="md:col-span-full lg:col-span-1 rounded p-2 shadow"> </div>
<p class="text-sm leading-5 md:text-sm text-gray-500">Description</p> </CusTab>
<p class="text-sm md:text-base leading-7 text-gray-900">{{ person.description }}</p> <CusTab name="phones" title="Telefonske">
</div> <div class="flex justify-end mb-2">
<span class="border-b-2 border-gray-500 hover:border-gray-800">
<button>
<PlusIcon
@click="operDrawerAddPhone(false, 0)"
size="lg"
css="text-gray-500 hover:text-gray-800"
/>
</button>
</span>
</div>
<div class="grid grid-rows-* grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 mt-1">
<div class="rounded p-2 shadow" v-for="phone in person.phones">
<div class="text-sm leading-5 md:text-sm text-gray-500 flex justify-between">
<div class="flex">
<FwbBadge title type="yellow">+{{ phone.country_code }}</FwbBadge>
<FwbBadge>{{ phone.type.name }}</FwbBadge>
</div> </div>
</CusTab > <div class="flex items-center gap-2">
<CusTab name="addresses" title="Naslovi"> <button>
<div class="flex justify-end mb-2"> <EditIcon
<span class="border-b-2 border-gray-500 hover:border-gray-800"> @click="operDrawerAddPhone(true, phone.id)"
<button><PlusIcon @click="openDrawerAddAddress(false, 0)" size="lg" css="text-gray-500 hover:text-gray-800" /></button> size="md"
</span> css="text-gray-500 hover:text-gray-800"
/>
</button>
<button @click="openConfirm('phone', phone.id, phone.nu)">
<TrashBinIcon size="md" css="text-red-600 hover:text-red-700" />
</button>
</div> </div>
<div class="grid grid-rows-* grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 mt-1"> </div>
<div class="rounded p-2 shadow" v-for="address in person.addresses"> <p class="text-sm md:text-base leading-7 text-gray-900">{{ phone.nu }}</p>
<div class="text-sm leading-5 md:text-sm text-gray-500 flex justify-between"> </div>
<div class="flex "> </div>
<FwbBadge type="yellow">{{ address.country }}</FwbBadge> </CusTab>
<FwbBadge>{{ address.type.name }}</FwbBadge> <CusTab name="emails" title="Email">
</div> <div class="flex justify-end mb-2">
<div class="flex items-center gap-2"> <span class="border-b-2 border-gray-500 hover:border-gray-800">
<button><EditIcon @click="openDrawerAddAddress(true, address.id)" size="md" css="text-gray-500 hover:text-gray-800" /></button> <button>
<button @click="openConfirm('address', address.id, address.address)"><TrashBinIcon size="md" css="text-red-600 hover:text-red-700" /></button> <PlusIcon
</div> @click="openDrawerAddEmail(false, 0)"
</div> size="lg"
<p class="text-sm md:text-base leading-7 text-gray-900"> css="text-gray-500 hover:text-gray-800"
{{ (address.post_code && address.city) ? `${address.address}, ${address.post_code} ${address.city}` : address.address }} />
</p> </button>
</div> </span>
</div>
<div class="grid grid-rows-* grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 mt-1">
<template v-if="getEmails(person).length">
<div
class="rounded p-2 shadow"
v-for="(email, idx) in getEmails(person)"
:key="idx"
>
<div class="text-sm leading-5 md:text-sm text-gray-500 flex justify-between">
<div class="flex gap-2">
<FwbBadge v-if="email?.label">{{ email.label }}</FwbBadge>
<FwbBadge v-else type="indigo">Email</FwbBadge>
</div>
<div class="flex items-center gap-2">
<button>
<EditIcon
@click="openDrawerAddEmail(true, email.id)"
size="md"
css="text-gray-500 hover:text-gray-800"
/>
</button>
<button
@click="
deleteEmail(email.id, email?.value || email?.email || email?.address)
"
>
<TrashBinIcon size="md" css="text-red-600 hover:text-red-700" />
</button>
</div>
</div> </div>
</CusTab> <p class="text-sm md:text-base leading-7 text-gray-900">
<CusTab name="phones" title="Telefonske"> {{ email?.value || email?.email || email?.address || "-" }}
<div class="flex justify-end mb-2"> </p>
<span class="border-b-2 border-gray-500 hover:border-gray-800"> <p v-if="email?.note" class="mt-1 text-xs text-gray-500 whitespace-pre-wrap">
<button><PlusIcon @click="operDrawerAddPhone(false, 0)" size="lg" css="text-gray-500 hover:text-gray-800" /></button> {{ email.note }}
</span> </p>
</div>
</template>
<p v-else class="p-2 text-sm text-gray-500">Ni e-poštnih naslovov.</p>
</div>
</CusTab>
<CusTab name="trr" title="TRR">
<div class="flex justify-end mb-2">
<span class="border-b-2 border-gray-500 hover:border-gray-800">
<button>
<PlusIcon
@click="openDrawerAddTrr(false, 0)"
size="lg"
css="text-gray-500 hover:text-gray-800"
/>
</button>
</span>
</div>
<div class="grid grid-rows-* grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 mt-1">
<template v-if="getTRRs(person).length">
<div
class="rounded p-2 shadow"
v-for="(acc, idx) in getTRRs(person)"
:key="idx"
>
<div class="text-sm leading-5 md:text-sm text-gray-500 flex justify-between">
<div class="flex gap-2">
<FwbBadge v-if="acc?.bank_name">{{ acc.bank_name }}</FwbBadge>
<FwbBadge v-if="acc?.holder_name" type="indigo">{{
acc.holder_name
}}</FwbBadge>
<FwbBadge v-if="acc?.currency" type="yellow">{{ acc.currency }}</FwbBadge>
</div>
<div class="flex items-center gap-2">
<button>
<EditIcon
@click="openDrawerAddTrr(true, acc.id)"
size="md"
css="text-gray-500 hover:text-gray-800"
/>
</button>
<button @click="deleteTrr(acc.id, acc?.iban || acc?.account_number)">
<TrashBinIcon size="md" css="text-red-600 hover:text-red-700" />
</button>
</div>
</div> </div>
<div class="grid grid-rows-* grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 mt-1"> <p class="text-sm md:text-base leading-7 text-gray-900">
<div class="rounded p-2 shadow" v-for="phone in person.phones"> {{
<div class="text-sm leading-5 md:text-sm text-gray-500 flex justify-between"> acc?.iban ||
<div class="flex "> acc?.account_number ||
<FwbBadge title type="yellow">+{{ phone.country_code }}</FwbBadge> acc?.account ||
<FwbBadge>{{ phone.type.name }}</FwbBadge> acc?.nu ||
</div> acc?.number ||
<div class="flex items-center gap-2"> "-"
<button><EditIcon @click="operDrawerAddPhone(true, phone.id)" size="md" css="text-gray-500 hover:text-gray-800" /></button> }}
<button @click="openConfirm('phone', phone.id, phone.nu)"><TrashBinIcon size="md" css="text-red-600 hover:text-red-700" /></button> </p>
</div> <p v-if="acc?.notes" class="mt-1 text-xs text-gray-500 whitespace-pre-wrap">
</div> {{ acc.notes }}
<p class="text-sm md:text-base leading-7 text-gray-900">{{ phone.nu }}</p> </p>
</div> </div>
</div> </template>
</CusTab> <p v-else class="p-2 text-sm text-gray-500">Ni TRR računov.</p>
<CusTab name="emails" title="Email"> </div>
<div class="flex justify-end mb-2"> </CusTab>
<span class="border-b-2 border-gray-500 hover:border-gray-800"> </CusTabs>
<button><PlusIcon @click="openDrawerAddEmail(false, 0)" size="lg" css="text-gray-500 hover:text-gray-800" /></button> <PersonUpdateForm
</span> :show="drawerUpdatePerson"
</div> @close="drawerUpdatePerson = false"
<div class="grid grid-rows-* grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 mt-1"> :person="person"
<template v-if="getEmails(person).length"> />
<div class="rounded p-2 shadow" v-for="(email, idx) in getEmails(person)" :key="idx">
<div class="text-sm leading-5 md:text-sm text-gray-500 flex justify-between">
<div class="flex gap-2">
<FwbBadge v-if="email?.label">{{ email.label }}</FwbBadge>
<FwbBadge v-else type="indigo">Email</FwbBadge>
</div>
<div class="flex items-center gap-2">
<button><EditIcon @click="openDrawerAddEmail(true, email.id)" size="md" css="text-gray-500 hover:text-gray-800" /></button>
<button @click="deleteEmail(email.id, email?.value || email?.email || email?.address)"><TrashBinIcon size="md" css="text-red-600 hover:text-red-700" /></button>
</div>
</div>
<p class="text-sm md:text-base leading-7 text-gray-900">
{{ email?.value || email?.email || email?.address || '-' }}
</p>
<p v-if="email?.note" class="mt-1 text-xs text-gray-500 whitespace-pre-wrap">{{ email.note }}</p>
</div>
</template>
<p v-else class="p-2 text-sm text-gray-500">Ni e-poštnih naslovov.</p>
</div>
</CusTab>
<CusTab name="trr" title="TRR">
<div class="flex justify-end mb-2">
<span class="border-b-2 border-gray-500 hover:border-gray-800">
<button><PlusIcon @click="openDrawerAddTrr(false, 0)" size="lg" css="text-gray-500 hover:text-gray-800" /></button>
</span>
</div>
<div class="grid grid-rows-* grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 mt-1">
<template v-if="getTRRs(person).length">
<div class="rounded p-2 shadow" v-for="(acc, idx) in getTRRs(person)" :key="idx">
<div class="text-sm leading-5 md:text-sm text-gray-500 flex justify-between">
<div class="flex gap-2">
<FwbBadge v-if="acc?.bank_name">{{ acc.bank_name }}</FwbBadge>
<FwbBadge v-if="acc?.holder_name" type="indigo">{{ acc.holder_name }}</FwbBadge>
<FwbBadge v-if="acc?.currency" type="yellow">{{ acc.currency }}</FwbBadge>
</div>
<div class="flex items-center gap-2">
<button><EditIcon @click="openDrawerAddTrr(true, acc.id)" size="md" css="text-gray-500 hover:text-gray-800" /></button>
<button @click="deleteTrr(acc.id, acc?.iban || acc?.account_number)"><TrashBinIcon size="md" css="text-red-600 hover:text-red-700" /></button>
</div>
</div>
<p class="text-sm md:text-base leading-7 text-gray-900">
{{ acc?.iban || acc?.account_number || acc?.account || acc?.nu || acc?.number || '-' }}
</p>
<p v-if="acc?.notes" class="mt-1 text-xs text-gray-500 whitespace-pre-wrap">{{ acc.notes }}</p>
</div>
</template>
<p v-else class="p-2 text-sm text-gray-500">Ni TRR računov.</p>
</div>
</CusTab>
<CusTab name="other" title="Drugo">
ssss4
</CusTab>
</CusTabs>
<PersonUpdateForm
:show="drawerUpdatePerson"
@close="drawerUpdatePerson = false"
:person="person"
/>
<AddressCreateForm <AddressCreateForm
:show="drawerAddAddress" :show="drawerAddAddress"
@close="drawerAddAddress = false" @close="drawerAddAddress = false"
:person="person" :person="person"
:types="types.address_types" :types="types.address_types"
:id="editAddressId" :id="editAddressId"
:edit="editAddress" :edit="editAddress"
/> />
<AddressUpdateForm <AddressUpdateForm
:show="drawerAddAddress && editAddress" :show="drawerAddAddress && editAddress"
@close="drawerAddAddress = false" @close="drawerAddAddress = false"
:person="person" :person="person"
:types="types.address_types" :types="types.address_types"
:id="editAddressId" :id="editAddressId"
/> />
<PhoneCreateForm <PhoneCreateForm
:show="drawerAddPhone" :show="drawerAddPhone"
@close="drawerAddPhone = false" @close="drawerAddPhone = false"
:person="person" :person="person"
:types="types.phone_types" :types="types.phone_types"
:id="editPhoneId" :id="editPhoneId"
:edit="editPhone" :edit="editPhone"
/> />
<!-- Email dialogs --> <!-- Email dialogs -->
<EmailCreateForm <EmailCreateForm
:show="drawerAddEmail && !editEmail" :show="drawerAddEmail && !editEmail"
@close="drawerAddEmail = false" @close="drawerAddEmail = false"
:person="person" :person="person"
:types="types.email_types ?? []" :types="types.email_types ?? []"
:is-client-context="!!person?.client" :is-client-context="!!person?.client"
/> />
<EmailUpdateForm <EmailUpdateForm
:show="drawerAddEmail && editEmail" :show="drawerAddEmail && editEmail"
@close="drawerAddEmail = false" @close="drawerAddEmail = false"
:person="person" :person="person"
:types="types.email_types ?? []" :types="types.email_types ?? []"
:id="editEmailId" :id="editEmailId"
:is-client-context="!!person?.client" :is-client-context="!!person?.client"
/> />
<!-- TRR dialogs --> <!-- TRR dialogs -->
<TrrCreateForm <TrrCreateForm
:show="drawerAddTrr && !editTrr" :show="drawerAddTrr && !editTrr"
@close="drawerAddTrr = false" @close="drawerAddTrr = false"
:person="person" :person="person"
:types="types.trr_types ?? []" :types="types.trr_types ?? []"
:banks="types.banks ?? []" :banks="types.banks ?? []"
:currencies="types.currencies ?? ['EUR']" :currencies="types.currencies ?? ['EUR']"
/> />
<TrrUpdateForm <TrrUpdateForm
:show="drawerAddTrr && editTrr" :show="drawerAddTrr && editTrr"
@close="drawerAddTrr = false" @close="drawerAddTrr = false"
:person="person" :person="person"
:types="types.trr_types ?? []" :types="types.trr_types ?? []"
:banks="types.banks ?? []" :banks="types.banks ?? []"
:currencies="types.currencies ?? ['EUR']" :currencies="types.currencies ?? ['EUR']"
:id="editTrrId" :id="editTrrId"
/> />
<!-- Confirm deletion dialog -->
<ConfirmDialog
:show="confirm.show"
:title="confirm.title"
:message="confirm.message"
confirm-text="Izbriši"
cancel-text="Prekliči"
:danger="true"
@close="closeConfirm"
@confirm="onConfirmDelete"
/>
<!-- Confirm deletion dialog -->
<ConfirmDialog
:show="confirm.show"
:title="confirm.title"
:message="confirm.message"
confirm-text="Izbriši"
cancel-text="Prekliči"
:danger="true"
@close="closeConfirm"
@confirm="onConfirmDelete"
/>
</template> </template>

4
resources/js/Pages/Dashboard.vue
View File

@ -153,9 +153,7 @@ function safeCaseHref(uuid, segment = null) {
<template> <template>
<AppLayout title="Nadzorna plošča"> <AppLayout title="Nadzorna plošča">
<template #header> <template #header> </template>
<h2 class="font-semibold text-xl text-gray-800 leading-tight">Nadzorna plošča</h2>
</template>
<div class="max-w-7xl mx-auto space-y-10 py-6"> <div class="max-w-7xl mx-auto space-y-10 py-6">
<!-- KPI Cards with trends --> <!-- KPI Cards with trends -->

28
resources/js/Pages/Imports/Create.vue
View File

@ -48,7 +48,7 @@ const filteredTemplates = computed(() => {
if (!cuuid) { if (!cuuid) {
return list.filter((t) => t.client_id == null); return list.filter((t) => t.client_id == null);
} }
return list.filter((t) => t.client_uuid === cuuid); return list.filter((t) => t.client_uuid === cuuid || t.client_id == null);
}); });
const uploading = ref(false); const uploading = ref(false);
@ -232,19 +232,7 @@ async function startImport() {
</div> </div>
<!-- Actions --> <!-- Actions -->
<div class="flex flex-wrap gap-3 pt-2"> <div class="flex flex-wrap justify-end gap-3 pt-2">
<button
type="button"
@click="startImport"
:disabled="uploading"
class="inline-flex items-center gap-2 px-5 py-2.5 rounded bg-indigo-600 disabled:bg-indigo-300 text-white text-sm font-medium shadow-sm"
>
<span
v-if="uploading"
class="h-4 w-4 border-2 border-white/60 border-t-transparent rounded-full animate-spin"
></span>
<span>{{ uploading ? "Nalagam..." : "Začni uvoz" }}</span>
</button>
<button <button
type="button" type="button"
@click=" @click="
@ -258,6 +246,18 @@ async function startImport() {
> >
Počisti Počisti
</button> </button>
<button
type="button"
@click="startImport"
:disabled="uploading"
class="inline-flex items-center gap-2 px-5 py-2.5 rounded bg-indigo-600 disabled:bg-indigo-300 text-white text-sm font-medium shadow-sm"
>
<span
v-if="uploading"
class="h-4 w-4 border-2 border-white/60 border-t-transparent rounded-full animate-spin"
></span>
<span>{{ uploading ? "Nalagam..." : "Začni uvoz" }}</span>
</button>
</div> </div>
<div class="text-xs text-gray-400 pt-4 border-t"> <div class="text-xs text-gray-400 pt-4 border-t">

212
resources/js/Pages/Imports/Index.vue
View File

@ -3,6 +3,16 @@ import AppLayout from "@/Layouts/AppLayout.vue";
import { Link, router } from "@inertiajs/vue3"; import { Link, router } from "@inertiajs/vue3";
import { ref } from "vue"; import { ref } from "vue";
import ConfirmationModal from "@/Components/ConfirmationModal.vue"; import ConfirmationModal from "@/Components/ConfirmationModal.vue";
import DataTableServer from "@/Components/DataTable/DataTableServer.vue";
import Dropdown from "@/Components/Dropdown.vue";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import {
faEllipsisVertical,
faEye,
faPlay,
faTrash,
faCircleCheck,
} from "@fortawesome/free-solid-svg-icons";
const props = defineProps({ const props = defineProps({
imports: Object, imports: Object,
@ -11,6 +21,7 @@ const props = defineProps({
const deletingId = ref(null); const deletingId = ref(null);
const confirming = ref(false); const confirming = ref(false);
const errorMsg = ref(null); const errorMsg = ref(null);
const search = ref(new URLSearchParams(window.location.search).get("search") || "");
function canDelete(status) { function canDelete(status) {
return !["completed", "processing"].includes(status); return !["completed", "processing"].includes(status);
@ -47,6 +58,28 @@ function statusBadge(status) {
}; };
return map[status] || "bg-gray-100 text-gray-800"; return map[status] || "bg-gray-100 text-gray-800";
} }
const columns = [
{ key: "created_at", label: "Datum" },
{ key: "original_name", label: "Datoteka" },
{ key: "status", label: "Status" },
{ key: "client", label: "Naročnik" },
{ key: "template", label: "Predloga" },
{ key: "actions", label: "Akcije", class: "w-px" },
];
function formatDateTimeNoSeconds(value) {
if (!value) return "-";
const d = new Date(value);
if (isNaN(d)) return String(value);
return d.toLocaleString("sl-SI", {
year: "numeric",
month: "2-digit",
day: "2-digit",
hour: "2-digit",
minute: "2-digit",
});
}
</script> </script>
<template> <template>
@ -54,89 +87,116 @@ function statusBadge(status) {
<template #header> <template #header>
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<h2 class="font-semibold text-xl text-gray-800 leading-tight">Uvozi</h2> <h2 class="font-semibold text-xl text-gray-800 leading-tight">Uvozi</h2>
<Link
:href="route('imports.create')"
class="px-3 py-2 rounded bg-blue-600 text-white text-sm"
>Novi uvoz</Link
>
</div> </div>
</template> </template>
<div class="py-6"> <div class="py-6">
<div class="max-w-6xl mx-auto sm:px-6 lg:px-8"> <div class="max-w-6xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white shadow sm:rounded-lg p-6"> <div class="flex flex-col gap-3 bg-white shadow sm:rounded-lg p-4">
<div class="overflow-x-auto"> <div class="flex justify-end">
<table class="min-w-full text-sm"> <Link
<thead> :href="route('imports.create')"
<tr class="text-left text-xs uppercase text-gray-500 border-b"> class="px-3 py-2 rounded bg-blue-600 text-white text-sm"
<th class="p-2">Datum</th> >Novi uvoz</Link
<th class="p-2">Datoteka</th> >
<th class="p-2">Status</th>
<th class="p-2">Naročnik</th>
<th class="p-2">Predloga</th>
<th class="p-2">Akcije</th>
</tr>
</thead>
<tbody>
<tr v-for="imp in imports.data" :key="imp.uuid" class="border-b">
<td class="p-2 whitespace-nowrap">
{{ new Date(imp.created_at).toLocaleString() }}
</td>
<td class="p-2">{{ imp.original_name }}</td>
<td class="p-2">
<span
:class="['px-2 py-0.5 rounded text-xs', statusBadge(imp.status)]"
>{{ imp.status }}</span
>
</td>
<td class="p-2">{{ imp.client?.person?.full_name ?? "—" }}</td>
<td class="p-2">{{ imp.template?.name ?? "—" }}</td>
<td class="p-2 space-x-2">
<Link
:href="route('imports.continue', { import: imp.uuid })"
class="px-2 py-1 rounded bg-gray-200 text-gray-800 text-xs"
>Poglej</Link
>
<Link
v-if="imp.status !== 'completed'"
:href="route('imports.continue', { import: imp.uuid })"
class="px-2 py-1 rounded bg-amber-600 text-white text-xs"
>Nadaljuj</Link
>
<button
v-if="canDelete(imp.status)"
class="px-2 py-1 rounded bg-red-600 text-white text-xs"
@click="confirmDelete(imp)"
>
Izbriši
</button>
<span v-else class="text-xs text-gray-400">Zaključen</span>
</td>
</tr>
</tbody>
</table>
</div> </div>
<DataTableServer
:columns="columns"
:rows="imports?.data || []"
:meta="
imports?.meta
? {
current_page: imports.meta.current_page,
per_page: imports.meta.per_page,
total: imports.meta.total,
last_page: imports.meta.last_page,
}
: {}
"
v-model:search="search"
route-name="imports.index"
:only-props="['imports']"
row-key="uuid"
empty-text="Ni uvozov."
>
<!-- Datum column formatted -->
<template #cell-created_at="{ row }">
{{ formatDateTimeNoSeconds(row.created_at) }}
</template>
<div class="flex items-center justify-between mt-4 text-sm text-gray-600"> <!-- Status badge -->
<div> <template #cell-status="{ row }">
Prikaz {{ imports.meta.from }}–{{ imports.meta.to }} od <span :class="['px-2 py-0.5 rounded text-xs', statusBadge(row.status)]">
{{ imports.meta.total }} {{ row.status }}
</div> </span>
<div class="space-x-2"> </template>
<Link
v-if="imports.links.prev" <!-- Client name -->
:href="imports.links.prev" <template #cell-client="{ row }">
class="px-2 py-1 border rounded" {{ row.client?.person?.full_name ?? "—" }}
>Nazaj</Link </template>
>
<Link <!-- Template name -->
v-if="imports.links.next" <template #cell-template="{ row }">
:href="imports.links.next" {{ row.template?.name ?? "—" }}
class="px-2 py-1 border rounded" </template>
>Naprej</Link
> <!-- Actions -->
</div> <template #cell-actions="{ row }">
</div> <Dropdown width="48" :close-on-content-click="true">
<template #trigger>
<button
type="button"
class="inline-flex items-center justify-center w-8 h-8 rounded hover:bg-gray-100"
aria-label="Akcije"
>
<FontAwesomeIcon
:icon="faEllipsisVertical"
class="w-4 h-4 text-gray-600"
/>
</button>
</template>
<template #content>
<div class="py-1">
<Link
:href="route('imports.continue', { import: row.uuid })"
class="flex items-center w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
>
<FontAwesomeIcon :icon="faEye" class="w-4 h-4 me-2 text-gray-500" />
<span>Poglej</span>
</Link>
<Link
v-if="row.status !== 'completed'"
:href="route('imports.continue', { import: row.uuid })"
class="flex items-center w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
>
<FontAwesomeIcon
:icon="faPlay"
class="w-4 h-4 me-2 text-gray-500"
/>
<span>Nadaljuj</span>
</Link>
<button
v-if="canDelete(row.status)"
type="button"
class="flex items-center w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-red-50"
@click="confirmDelete(row)"
>
<FontAwesomeIcon :icon="faTrash" class="w-4 h-4 me-2" />
<span>Izbriši</span>
</button>
<div
v-else
class="flex items-center px-4 py-2 text-sm text-gray-400 cursor-default"
>
<FontAwesomeIcon :icon="faCircleCheck" class="w-4 h-4 me-2" />
<span>Zaključen</span>
</div>
</div>
</template>
</Dropdown>
</template>
</DataTableServer>
<ConfirmationModal <ConfirmationModal
:show="confirming" :show="confirming"
@close=" @close="

11
resources/js/Pages/Segments/Index.vue
View File

@ -43,7 +43,7 @@ function formatCurrencyEUR(value) {
<template> <template>
<AppLayout title="Segmenti"> <AppLayout title="Segmenti">
<template #header>Segmenti</template> <template #header></template>
<div class="pt-12"> <div class="pt-12">
<div class="max-w-5xl mx-auto sm:px-6 lg:px-8"> <div class="max-w-5xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg p-4 mb-6"> <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg p-4 mb-6">
@ -82,7 +82,7 @@ function formatCurrencyEUR(value) {
</span> </span>
</div> </div>
<p class="text-sm text-gray-600 min-h-[1.25rem]"> <p class="text-sm text-gray-600 min-h-[1.25rem]">
{{ s.description || "—" }} {{ s.description || "" }}
</p> </p>
<div class="mt-4 flex items-center justify-between"> <div class="mt-4 flex items-center justify-between">
<div class="text-sm text-gray-500">Vsota stanj</div> <div class="text-sm text-gray-500">Vsota stanj</div>
@ -90,13 +90,6 @@ function formatCurrencyEUR(value) {
{{ formatCurrencyEUR(s.total_balance) }} {{ formatCurrencyEUR(s.total_balance) }}
</div> </div>
</div> </div>
<div class="mt-3">
<Link
:href="route('segments.show', s.id)"
class="text-sm text-indigo-600 hover:underline"
>Odpri</Link
>
</div>
</div> </div>
</div> </div>
<div v-else class="text-gray-500">Ni aktivnih segmentov.</div> <div v-else class="text-gray-500">Ni aktivnih segmentov.</div>

180
resources/js/Pages/Segments/Show.vue
View File

@ -1,35 +1,27 @@
<script setup> <script setup>
import AppLayout from "@/Layouts/AppLayout.vue"; import AppLayout from "@/Layouts/AppLayout.vue";
import { Link, router } from "@inertiajs/vue3"; import { Link } from "@inertiajs/vue3";
import { debounce } from "lodash"; import { ref } from "vue";
import { ref, watch, onUnmounted } from "vue"; import DataTableServer from "@/Components/DataTable/DataTableServer.vue";
const props = defineProps({ const props = defineProps({
segment: Object, segment: Object,
contracts: Object, // LengthAwarePaginator payload from Laravel contracts: Object, // LengthAwarePaginator payload from Laravel
}); });
const search = ref(""); // Initialize search from current URL so input reflects server filter
const applySearch = debounce((v) => { const search = ref(new URLSearchParams(window.location.search).get("search") || "");
const params = Object.fromEntries(
new URLSearchParams(window.location.search).entries()
);
if (v) {
params.search = v;
} else {
delete params.search;
}
// reset pagination when typing
delete params.page;
router.get(
route("segments.show", { segment: props.segment?.id ?? props.segment }),
params,
{ preserveState: true, replace: true, preserveScroll: true }
);
}, 300);
watch(search, (v) => applySearch(v)); // Column definitions for the server-driven table
onUnmounted(() => applySearch.cancel && applySearch.cancel()); const columns = [
{ key: "reference", label: "Pogodba", sortable: true },
{ key: "client_case", label: "Primer" },
{ key: "client", label: "Stranka" },
{ key: "type", label: "Vrsta" },
{ key: "start_date", label: "Začetek", sortable: true },
{ key: "end_date", label: "Konec", sortable: true },
{ key: "account", label: "Stanje", align: "right" },
];
function formatDate(value) { function formatDate(value) {
if (!value) { if (!value) {
@ -56,100 +48,66 @@ function formatCurrency(value) {
<template> <template>
<AppLayout :title="`Segment: ${segment?.name || ''}`"> <AppLayout :title="`Segment: ${segment?.name || ''}`">
<template #header> <template #header> </template>
<div class="flex items-center justify-between">
<h1 class="text-xl font-semibold">Segment: {{ segment?.name }}</h1>
<Link
:href="route('segments.index')"
class="text-sm text-indigo-600 hover:underline"
>Nazaj na segmente</Link
>
</div>
</template>
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8"> <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white overflow-hidden shadow-xl sm:rounded-lg p-6"> <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg p-4">
<h2 class="text-lg">{{ segment.name }}</h2>
<div class="text-sm text-gray-600 mb-4">{{ segment?.description }}</div> <div class="text-sm text-gray-600 mb-4">{{ segment?.description }}</div>
<div class="flex items-center justify-between mb-4 gap-3">
<input
v-model="search"
type="text"
placeholder="Iskanje po referenci ali imenu"
class="w-full sm:w-80 rounded border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 px-3 py-2 text-sm"
/>
</div>
<div class="overflow-x-auto">
<table class="min-w-full text-left text-sm">
<thead>
<tr class="border-b">
<th class="py-2 pr-4">Pogodba</th>
<th class="py-2 pr-4">Primer</th>
<th class="py-2 pr-4">Stranka</th>
<th class="py-2 pr-4">Vrsta</th>
<th class="py-2 pr-4">Začetek</th>
<th class="py-2 pr-4">Konec</th>
<th class="py-2 pr-4">Stanje</th>
</tr>
</thead>
<tbody>
<tr
v-for="c in contracts.data"
:key="c.uuid"
class="border-b last:border-0"
>
<td class="py-2 pr-4">{{ c.reference }}</td>
<td class="py-2 pr-4">
<Link
v-if="c.client_case?.uuid"
:href="
route('clientCase.show', {
client_case: c.client_case.uuid,
segment: segment.id,
})
"
class="text-indigo-600 hover:underline"
>
{{ c.client_case?.person?.full_name || "Primer stranke" }}
</Link>
<span v-else>{{ c.client_case?.person?.full_name || "-" }}</span>
</td>
<td class="py-2 pr-4">{{ c.client?.person?.full_name || "-" }}</td>
<td class="py-2 pr-4">{{ c.type?.name }}</td>
<td class="py-2 pr-4">{{ formatDate(c.start_date) }}</td>
<td class="py-2 pr-4">{{ formatDate(c.end_date) }}</td>
<td class="py-2 pr-4">{{ formatCurrency(c.account?.balance_amount) }}</td>
</tr>
<tr v-if="!contracts.data || contracts.data.length === 0">
<td colspan="7" class="py-4 text-gray-500">Ni pogodb v tem segmentu.</td>
</tr>
</tbody>
</table>
</div>
<!-- Pagination --> <DataTableServer
<div :columns="columns"
class="flex items-center justify-between mt-4 text-sm text-gray-700" :rows="contracts?.data || []"
v-if="contracts.total > 0" :meta="contracts || {}"
v-model:search="search"
route-name="segments.show"
:route-params="{ segment: segment?.id ?? segment }"
:only-props="['contracts']"
:page-size-options="[10, 25, 50]"
empty-text="Ni pogodb v tem segmentu."
row-key="uuid"
> >
<div> <!-- Primer (client_case) cell with link when available -->
Prikazano {{ contracts.from || 0 }}–{{ contracts.to || 0 }} od <template #cell-client_case="{ row }">
{{ contracts.total }}
</div>
<div class="flex items-center gap-2">
<Link <Link
v-if="contracts.prev_page_url" v-if="row.client_case?.uuid"
:href="contracts.prev_page_url" :href="
class="px-2 py-1 border rounded hover:bg-gray-50" route('clientCase.show', {
>Prejšnja</Link client_case: row.client_case.uuid,
segment: segment?.id ?? segment,
})
"
class="text-indigo-600 hover:underline"
> >
<span>Stran {{ contracts.current_page }} / {{ contracts.last_page }}</span> {{ row.client_case?.person?.full_name || "Primer stranke" }}
<Link </Link>
v-if="contracts.next_page_url" <span v-else>{{ row.client_case?.person?.full_name || "-" }}</span>
:href="contracts.next_page_url" </template>
class="px-2 py-1 border rounded hover:bg-gray-50"
>Naslednja</Link <!-- Stranka (client) name -->
> <template #cell-client="{ row }">
</div> {{ row.client?.person?.full_name || "-" }}
</div> </template>
<!-- Vrsta (type) -->
<template #cell-type="{ row }">
{{ row.type?.name || "-" }}
</template>
<!-- Dates formatted -->
<template #cell-start_date="{ row }">
{{ formatDate(row.start_date) }}
</template>
<template #cell-end_date="{ row }">
{{ formatDate(row.end_date) }}
</template>
<!-- Account balance formatted -->
<template #cell-account="{ row }">
<div class="text-right">
{{ formatCurrency(row.account?.balance_amount) }}
</div>
</template>
</DataTableServer>
</div> </div>
</div> </div>
</AppLayout> </AppLayout>

591
resources/js/Pages/Settings/Partials/ActionTable.vue
View File

@ -1,20 +1,22 @@
<script setup> <script setup>
import { FwbTable, FwbTableBody, FwbTableHead, FwbTableHeadCell, FwbTableCell, FwbTableRow } from 'flowbite-vue'; // flowbite-vue table imports removed; using DataTableClient
import { EditIcon, TrashBinIcon } from '@/Utilities/Icons'; import { EditIcon, TrashBinIcon } from "@/Utilities/Icons";
import DialogModal from '@/Components/DialogModal.vue'; import DialogModal from "@/Components/DialogModal.vue";
import ConfirmationModal from '@/Components/ConfirmationModal.vue'; import ConfirmationModal from "@/Components/ConfirmationModal.vue";
import { computed, onMounted, ref, watch } from 'vue'; import { computed, onMounted, ref } from "vue";
import { router, useForm } from '@inertiajs/vue3'; import { router, useForm } from "@inertiajs/vue3";
import InputLabel from '@/Components/InputLabel.vue'; import InputLabel from "@/Components/InputLabel.vue";
import TextInput from '@/Components/TextInput.vue'; import TextInput from "@/Components/TextInput.vue";
import Multiselect from 'vue-multiselect'; import Multiselect from "vue-multiselect";
import PrimaryButton from '@/Components/PrimaryButton.vue'; import PrimaryButton from "@/Components/PrimaryButton.vue";
import ActionMessage from '@/Components/ActionMessage.vue'; import ActionMessage from "@/Components/ActionMessage.vue";
import DataTableClient from "@/Components/DataTable/DataTableClient.vue";
import InlineColorPicker from "@/Components/InlineColorPicker.vue";
const props = defineProps({ const props = defineProps({
actions: Array, actions: Array,
decisions: Array, decisions: Array,
segments: Array segments: Array,
}); });
const drawerEdit = ref(false); const drawerEdit = ref(false);
@ -22,331 +24,350 @@ const drawerCreate = ref(false);
const showDelete = ref(false); const showDelete = ref(false);
const toDelete = ref(null); const toDelete = ref(null);
const search = ref(''); const search = ref("");
const selectedSegment = ref(null); const selectedSegment = ref(null);
const selectOptions = ref([]); const selectOptions = ref([]);
const segmentOptions = 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({ const form = useForm({
id: 0, id: 0,
name: '', name: "",
color_tag: '', color_tag: "",
segment_id: null, segment_id: null,
decisions: [] decisions: [],
}); });
const createForm = useForm({ const createForm = useForm({
name: '', name: "",
color_tag: '', color_tag: "",
segment_id: null, segment_id: null,
decisions: [] decisions: [],
}); });
const openEditDrawer = (item) => { const openEditDrawer = (item) => {
form.decisions = []; form.decisions = [];
form.id = item.id; form.id = item.id;
form.name = item.name; form.name = item.name;
form.color_tag = item.color_tag; form.color_tag = item.color_tag;
form.segment_id = item.segment ? item.segment.id : null; form.segment_id = item.segment ? item.segment.id : null;
drawerEdit.value = true; drawerEdit.value = true;
item.decisions.forEach((d) => { item.decisions.forEach((d) => {
form.decisions.push({ form.decisions.push({
name: d.name, name: d.name,
id: d.id id: d.id,
}); });
}) });
} };
const closeEditDrawer = () => { const closeEditDrawer = () => {
drawerEdit.value = false; drawerEdit.value = false;
form.reset(); form.reset();
} };
const openCreateDrawer = () => { const openCreateDrawer = () => {
createForm.reset(); createForm.reset();
drawerCreate.value = true; drawerCreate.value = true;
} };
const closeCreateDrawer = () => { const closeCreateDrawer = () => {
drawerCreate.value = false; drawerCreate.value = false;
createForm.reset(); createForm.reset();
} };
const onColorPickerChange = () => { // removed unused color picker change handler; InlineColorPicker handles updates
console.log(form.color_tag);
}
onMounted(() => { onMounted(() => {
props.decisions.forEach((d) => { props.decisions.forEach((d) => {
selectOptions.value.push({ selectOptions.value.push({
name: d.name, name: d.name,
id: d.id id: d.id,
});
}); });
props.segments.forEach((s) => { });
segmentOptions.value.push({ props.segments.forEach((s) => {
name: s.name, segmentOptions.value.push({
id: s.id name: s.name,
}) id: s.id,
}) });
});
}); });
const filtered = computed(() => { const filtered = computed(() => {
const term = search.value?.toLowerCase() ?? ''; const term = search.value?.toLowerCase() ?? "";
return (props.actions || []).filter(a => { return (props.actions || []).filter((a) => {
const matchesSearch = !term || a.name?.toLowerCase().includes(term) || a.color_tag?.toLowerCase().includes(term); const matchesSearch =
const matchesSegment = !selectedSegment.value || a.segment?.id === selectedSegment.value; !term ||
return matchesSearch && matchesSegment; 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 = () => { const update = () => {
form.put(route('settings.actions.update', { id: form.id }), { form.put(route("settings.actions.update", { id: form.id }), {
onSuccess: () => { onSuccess: () => {
closeEditDrawer(); closeEditDrawer();
}, },
}); });
}; };
const store = () => { const store = () => {
createForm.post(route('settings.actions.store'), { createForm.post(route("settings.actions.store"), {
onSuccess: () => { onSuccess: () => {
closeCreateDrawer(); closeCreateDrawer();
}, },
}); });
}; };
const confirmDelete = (action) => { const confirmDelete = (action) => {
toDelete.value = action; toDelete.value = action;
showDelete.value = true; showDelete.value = true;
}; };
const cancelDelete = () => { const cancelDelete = () => {
toDelete.value = null; toDelete.value = null;
showDelete.value = false; showDelete.value = false;
}; };
const destroyAction = () => { const destroyAction = () => {
if (!toDelete.value) return; if (!toDelete.value) return;
router.delete(route('settings.actions.destroy', { id: toDelete.value.id }), { router.delete(route("settings.actions.destroy", { id: toDelete.value.id }), {
preserveScroll: true, preserveScroll: true,
onFinish: () => cancelDelete(), onFinish: () => cancelDelete(),
}); });
}; };
</script> </script>
<template> <template>
<div class="p-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"> <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"> <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" /> <TextInput
<div class="w-64"> v-model="search"
<Multiselect placeholder="Search actions..."
v-model="selectedSegment" class="w-full sm:w-64"
:options="segmentOptions.map(o=>o.id)" />
:multiple="false" <div class="w-64">
:searchable="true" <Multiselect
placeholder="Filter by segment" v-model="selectedSegment"
:append-to-body="true" :options="segmentOptions.map((o) => o.id)"
:custom-label="(opt) => (segmentOptions.find(o=>o.id===opt)?.name || '')" :multiple="false"
/> :searchable="true"
</div> placeholder="Filter by segment"
</div> :append-to-body="true"
<PrimaryButton @click="openCreateDrawer">+ Dodaj akcijo</PrimaryButton> :custom-label="(opt) => segmentOptions.find((o) => o.id === opt)?.name || ''"
/>
</div>
</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> <DialogModal :show="drawerEdit" @close="closeEditDrawer">
<fwb-table-head> <template #title>
<fwb-table-head-cell>#</fwb-table-head-cell> <span>Spremeni akcijo</span>
<fwb-table-head-cell>Name</fwb-table-head-cell> </template>
<fwb-table-head-cell>Color tag</fwb-table-head-cell> <template #content>
<fwb-table-head-cell>Decisions</fwb-table-head-cell> <form @submit.prevent="update">
<fwb-table-head-cell> <div class="col-span-6 sm:col-span-4">
<span class="sr-only">Edit</span> <InputLabel for="name" value="Ime" />
</fwb-table-head-cell> <TextInput
</fwb-table-head> id="name"
<fwb-table-body> ref="nameInput"
<fwb-table-row v-for="act in filtered" :key="act.id"> v-model="form.name"
<fwb-table-cell>{{ act.id }}</fwb-table-cell> type="text"
<fwb-table-cell>{{ act.name }}</fwb-table-cell> class="mt-1 block w-full"
<fwb-table-cell> autocomplete="name"
<div class="flex items-center gap-2"> />
<span class="inline-block h-4 w-4 rounded" :style="{ backgroundColor: act.color_tag }"></span> </div>
<span>{{ act.color_tag }}</span> <div class="col-span-6 sm:col-span-4">
</div> <InputLabel for="colorTag" value="Barva" />
</fwb-table-cell> <div class="mt-1">
<fwb-table-cell>{{ act.decisions.length }}</fwb-table-cell> <InlineColorPicker v-model="form.color_tag" />
<fwb-table-cell> </div>
<button class="px-2" @click="openEditDrawer(act)"><EditIcon size="md" css="text-gray-500" /></button> </div>
<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"> <div class="col-span-6 sm:col-span-4">
<template #title> <InputLabel for="segmentEdit" value="Segment" />
<span>Spremeni akcijo</span> <multiselect
</template> id="segmentEdit"
<template #content> v-model="form.segment_id"
<form @submit.prevent="update"> :options="segmentOptions.map((s) => s.id)"
<div class="col-span-6 sm:col-span-4"> :multiple="false"
<InputLabel for="name" value="Ime"/> :searchable="true"
<TextInput :taggable="false"
id="name" placeholder="Izberi segment"
ref="nameInput" :append-to-body="true"
v-model="form.name" :custom-label="(opt) => segmentOptions.find((s) => s.id === opt)?.name || ''"
type="text" />
class="mt-1 block w-full" </div>
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"> <div class="col-span-6 sm:col-span-4">
<InputLabel for="segmentEdit" value="Segment"/> <InputLabel for="decisions" value="Odločitve" />
<multiselect <multiselect
id="segmentEdit" id="decisions"
v-model="form.segment_id" ref="decisionsSelect"
:options="segmentOptions.map(s=>s.id)" v-model="form.decisions"
:multiple="false" :options="selectOptions"
:searchable="true" :multiple="true"
:taggable="false" track-by="id"
placeholder="Izberi segment" :taggable="true"
:append-to-body="true" placeholder="Dodaj odločitev"
:custom-label="(opt) => (segmentOptions.find(s=>s.id===opt)?.name || '')" :append-to-body="true"
/> label="name"
</div> />
</div>
<div class="col-span-6 sm:col-span-4"> <div class="flex justify-end mt-4">
<InputLabel for="decisions" value="Odločitve"/> <ActionMessage :on="form.recentlySuccessful" class="me-3">
<multiselect Shranjuje.
id="decisions" </ActionMessage>
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"> <PrimaryButton
<ActionMessage :on="form.recentlySuccessful" class="me-3"> :class="{ 'opacity-25': form.processing }"
Shranjuje. :disabled="form.processing"
</ActionMessage> >
Shrani
</PrimaryButton>
</div>
</form>
</template>
</DialogModal>
<PrimaryButton :class="{ 'opacity-25': form.processing }" :disabled="form.processing"> <DialogModal :show="drawerCreate" @close="closeCreateDrawer">
Shrani <template #title>
</PrimaryButton> <span>Dodaj akcijo</span>
</div> </template>
</form> <template #content>
</template> <form @submit.prevent="store">
</DialogModal> <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>
<DialogModal :show="drawerCreate" @close="closeCreateDrawer"> <div class="col-span-6 sm:col-span-4">
<template #title> <InputLabel for="segmentCreate" value="Segment" />
<span>Dodaj akcijo</span> <multiselect
</template> id="segmentCreate"
<template #content> v-model="createForm.segment_id"
<form @submit.prevent="store"> :options="segmentOptions.map((s) => s.id)"
<div class="col-span-6 sm:col-span-4"> :multiple="false"
<InputLabel for="nameCreate" value="Ime"/> :searchable="true"
<TextInput :taggable="false"
id="nameCreate" placeholder="Izberi segment"
v-model="createForm.name" :append-to-body="true"
type="text" :custom-label="(opt) => segmentOptions.find((s) => s.id === opt)?.name || ''"
class="mt-1 block w-full" />
autocomplete="name" </div>
/>
</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"> <div class="col-span-6 sm:col-span-4">
<InputLabel for="segmentCreate" value="Segment"/> <InputLabel for="decisionsCreate" value="Odločitve" />
<multiselect <multiselect
id="segmentCreate" id="decisionsCreate"
v-model="createForm.segment_id" v-model="createForm.decisions"
:options="segmentOptions.map(s=>s.id)" :options="selectOptions"
:multiple="false" :multiple="true"
:searchable="true" track-by="id"
:taggable="false" :taggable="true"
placeholder="Izberi segment" placeholder="Dodaj odločitev"
:append-to-body="true" :append-to-body="true"
:custom-label="(opt) => (segmentOptions.find(s=>s.id===opt)?.name || '')" label="name"
/> />
</div> </div>
<div class="col-span-6 sm:col-span-4"> <div class="flex justify-end mt-4">
<InputLabel for="decisionsCreate" value="Odločitve"/> <ActionMessage :on="createForm.recentlySuccessful" class="me-3">
<multiselect Shranjuje.
id="decisionsCreate" </ActionMessage>
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"> <PrimaryButton
<ActionMessage :on="createForm.recentlySuccessful" class="me-3"> :class="{ 'opacity-25': createForm.processing }"
Shranjuje. :disabled="createForm.processing"
</ActionMessage> >
Dodaj
</PrimaryButton>
</div>
</form>
</template>
</DialogModal>
<PrimaryButton :class="{ 'opacity-25': createForm.processing }" :disabled="createForm.processing"> <ConfirmationModal :show="showDelete" @close="cancelDelete">
Dodaj <template #title> Delete action </template>
</PrimaryButton> <template #content>
</div> Are you sure you want to delete action "{{ toDelete?.name }}"? This cannot be
</form> undone.
</template> </template>
</DialogModal> <template #footer>
<button
<ConfirmationModal :show="showDelete" @close="cancelDelete"> @click="cancelDelete"
<template #title> class="px-4 py-2 rounded bg-gray-200 hover:bg-gray-300 me-2"
Delete action >
</template> Cancel
<template #content> </button>
Are you sure you want to delete action "{{ toDelete?.name }}"? This cannot be undone. <PrimaryButton @click="destroyAction">Delete</PrimaryButton>
</template> </template>
<template #footer> </ConfirmationModal>
<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> </template>

641
resources/js/Pages/Settings/Partials/DecisionTable.vue
View File

@ -1,20 +1,22 @@
<script setup> <script setup>
import { FwbTable, FwbTableBody, FwbTableHead, FwbTableHeadCell, FwbTableCell, FwbTableRow } from 'flowbite-vue'; // flowbite-vue table imports removed; using DataTableClient
import { EditIcon, TrashBinIcon } from '@/Utilities/Icons'; import { EditIcon, TrashBinIcon } from "@/Utilities/Icons";
import DialogModal from '@/Components/DialogModal.vue'; import DialogModal from "@/Components/DialogModal.vue";
import ConfirmationModal from '@/Components/ConfirmationModal.vue'; import ConfirmationModal from "@/Components/ConfirmationModal.vue";
import { computed, onMounted, ref } from 'vue'; import { computed, onMounted, ref } from "vue";
import { router, useForm } from '@inertiajs/vue3'; import { router, useForm } from "@inertiajs/vue3";
import InputLabel from '@/Components/InputLabel.vue'; import InputLabel from "@/Components/InputLabel.vue";
import TextInput from '@/Components/TextInput.vue'; import TextInput from "@/Components/TextInput.vue";
import Multiselect from 'vue-multiselect'; import Multiselect from "vue-multiselect";
import PrimaryButton from '@/Components/PrimaryButton.vue'; import PrimaryButton from "@/Components/PrimaryButton.vue";
import ActionMessage from '@/Components/ActionMessage.vue'; import ActionMessage from "@/Components/ActionMessage.vue";
import DataTableClient from "@/Components/DataTable/DataTableClient.vue";
import InlineColorPicker from "@/Components/InlineColorPicker.vue";
const props = defineProps({ const props = defineProps({
decisions: Array, decisions: Array,
actions: Array, actions: Array,
emailTemplates: { type: Array, default: () => [] } emailTemplates: { type: Array, default: () => [] },
}); });
const drawerEdit = ref(false); const drawerEdit = ref(false);
@ -22,328 +24,403 @@ const drawerCreate = ref(false);
const showDelete = ref(false); const showDelete = ref(false);
const toDelete = ref(null); const toDelete = ref(null);
const search = ref(''); const search = ref("");
const selectedTemplateId = ref(null); const selectedTemplateId = ref(null);
const onlyAutoMail = ref(false); const onlyAutoMail = ref(false);
const actionOptions = ref([]); 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({ const form = useForm({
id: 0, id: 0,
name: '', name: "",
color_tag: '', color_tag: "",
actions: [], actions: [],
auto_mail: false, auto_mail: false,
email_template_id: null, email_template_id: null,
}); });
const createForm = useForm({ const createForm = useForm({
name: '', name: "",
color_tag: '', color_tag: "",
actions: [], actions: [],
auto_mail: false, auto_mail: false,
email_template_id: null, email_template_id: null,
}); });
const openEditDrawer = (item) => { const openEditDrawer = (item) => {
form.actions = []; form.actions = [];
form.id = item.id; form.id = item.id;
form.name = item.name; form.name = item.name;
form.color_tag = item.color_tag; form.color_tag = item.color_tag;
form.auto_mail = !!item.auto_mail; form.auto_mail = !!item.auto_mail;
form.email_template_id = item.email_template_id || null; form.email_template_id = item.email_template_id || null;
drawerEdit.value = true; drawerEdit.value = true;
item.actions.forEach((a) => { item.actions.forEach((a) => {
form.actions.push({ form.actions.push({
name: a.name, name: a.name,
id: a.id id: a.id,
}); });
}) });
} };
const closeEditDrawer = () => { const closeEditDrawer = () => {
drawerEdit.value = false; drawerEdit.value = false;
form.reset(); form.reset();
} };
const openCreateDrawer = () => { const openCreateDrawer = () => {
createForm.reset(); createForm.reset();
drawerCreate.value = true; drawerCreate.value = true;
} };
const closeCreateDrawer = () => { const closeCreateDrawer = () => {
drawerCreate.value = false; drawerCreate.value = false;
createForm.reset(); createForm.reset();
} };
onMounted(() => { onMounted(() => {
props.actions.forEach((a) => { props.actions.forEach((a) => {
actionOptions.value.push({ actionOptions.value.push({
name: a.name, name: a.name,
id: a.id id: a.id,
});
}); });
});
}); });
const filtered = computed(() => { const filtered = computed(() => {
const term = search.value?.toLowerCase() ?? ''; const term = search.value?.toLowerCase() ?? "";
const tplId = selectedTemplateId.value ? Number(selectedTemplateId.value) : null; const tplId = selectedTemplateId.value ? Number(selectedTemplateId.value) : null;
return (props.decisions || []).filter(d => { return (props.decisions || []).filter((d) => {
const matchesSearch = !term || d.name?.toLowerCase().includes(term) || d.color_tag?.toLowerCase().includes(term); const matchesSearch =
const matchesAuto = !onlyAutoMail.value || !!d.auto_mail; !term ||
const matchesTemplate = !tplId || Number(d.email_template_id || 0) === tplId; d.name?.toLowerCase().includes(term) ||
return matchesSearch && matchesAuto && matchesTemplate; 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 = () => { const update = () => {
form.put(route('settings.decisions.update', { id: form.id }), { form.put(route("settings.decisions.update", { id: form.id }), {
onSuccess: () => { onSuccess: () => {
closeEditDrawer(); closeEditDrawer();
}, },
}); });
}; };
const store = () => { const store = () => {
createForm.post(route('settings.decisions.store'), { createForm.post(route("settings.decisions.store"), {
onSuccess: () => { onSuccess: () => {
closeCreateDrawer(); closeCreateDrawer();
}, },
}); });
}; };
const confirmDelete = (decision) => { const confirmDelete = (decision) => {
toDelete.value = decision; toDelete.value = decision;
showDelete.value = true; showDelete.value = true;
}; };
const cancelDelete = () => { const cancelDelete = () => {
toDelete.value = null; toDelete.value = null;
showDelete.value = false; showDelete.value = false;
}; };
const destroyDecision = () => { const destroyDecision = () => {
if (!toDelete.value) return; if (!toDelete.value) return;
router.delete(route('settings.decisions.destroy', { id: toDelete.value.id }), { router.delete(route("settings.decisions.destroy", { id: toDelete.value.id }), {
preserveScroll: true, preserveScroll: true,
onFinish: () => cancelDelete(), onFinish: () => cancelDelete(),
}); });
}; };
</script> </script>
<template> <template>
<div class="p-4 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3"> <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"> <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" /> <TextInput
<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"> v-model="search"
<option :value="null">All templates</option> placeholder="Search decisions..."
<option v-for="t in emailTemplates" :key="t.id" :value="t.id">{{ t.name }}</option> class="w-full sm:w-72"
</select> />
<label class="flex items-center gap-2 text-sm"> <select
<input type="checkbox" v-model="onlyAutoMail" class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500"> v-model="selectedTemplateId"
Only auto mail class="block w-full sm:w-64 border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
</label> >
</div> <option :value="null">All templates</option>
<PrimaryButton @click="openCreateDrawer">+ Dodaj odločitev</PrimaryButton> <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> </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> <div class="mt-4 flex items-center gap-2">
<fwb-table-head> <input
<fwb-table-head-cell>#</fwb-table-head-cell> id="autoMailEdit"
<fwb-table-head-cell>Name</fwb-table-head-cell> type="checkbox"
<fwb-table-head-cell>Color tag</fwb-table-head-cell> v-model="form.auto_mail"
<fwb-table-head-cell>Belongs to actions</fwb-table-head-cell> class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500"
<fwb-table-head-cell>Auto mail</fwb-table-head-cell> />
<fwb-table-head-cell> <label for="autoMailEdit" class="text-sm">Samodejna pošta (auto mail)</label>
<span class="sr-only">Edit</span> </div>
</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>
<DialogModal :show="drawerEdit" @close="closeEditDrawer"> <div class="col-span-6 sm:col-span-4 mt-2">
<template #title> <InputLabel for="emailTemplateEdit" value="Email predloga" />
<span>Spremeni odločitev</span> <select
</template> id="emailTemplateEdit"
<template #content> v-model="form.email_template_id"
<form @submit.prevent="update"> :disabled="!form.auto_mail"
<div class="col-span-6 sm:col-span-4"> 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"
<InputLabel for="name" value="Ime"/> >
<TextInput <option :value="null">— Brez —</option>
id="name" <option v-for="t in emailTemplates" :key="t.id" :value="t.id">
v-model="form.name" {{ t.name }}
type="text" </option>
class="mt-1 block w-full" </select>
autocomplete="name" <p v-if="form.email_template_id" class="text-xs text-gray-500 mt-1">
/> <span
</div> 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"> <div class="col-span-6 sm:col-span-4">
<input id="autoMailEdit" type="checkbox" v-model="form.auto_mail" class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500"> <InputLabel for="actionsSelect" value="Akcije" />
<label for="autoMailEdit" class="text-sm">Samodejna pošta (auto mail)</label> <multiselect
</div> 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"> <div class="flex justify-end mt-4">
<InputLabel for="emailTemplateEdit" value="Email predloga"/> <ActionMessage :on="form.recentlySuccessful" class="me-3">
<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"> Shranjuje.
<option :value="null">— Brez —</option> </ActionMessage>
<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="col-span-6 sm:col-span-4"> <PrimaryButton
<InputLabel for="actionsSelect" value="Akcije"/> :class="{ 'opacity-25': form.processing }"
<multiselect :disabled="form.processing"
id="actionsSelect" >
v-model="form.actions" Shrani
:options="actionOptions" </PrimaryButton>
:multiple="true" </div>
track-by="id" </form>
:taggable="true" </template>
placeholder="Dodaj akcijo" </DialogModal>
:append-to-body="true"
label="name"
/>
</div>
<div class="flex justify-end mt-4"> <DialogModal :show="drawerCreate" @close="closeCreateDrawer">
<ActionMessage :on="form.recentlySuccessful" class="me-3"> <template #title>
Shranjuje. <span>Dodaj odločitev</span>
</ActionMessage> </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"> <div class="mt-4 flex items-center gap-2">
Shrani <input
</PrimaryButton> id="autoMailCreate"
</div> type="checkbox"
</form> v-model="createForm.auto_mail"
</template> class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500"
</DialogModal> />
<label for="autoMailCreate" class="text-sm">Samodejna pošta (auto mail)</label>
</div>
<DialogModal :show="drawerCreate" @close="closeCreateDrawer"> <div class="col-span-6 sm:col-span-4 mt-2">
<template #title> <InputLabel for="emailTemplateCreate" value="Email predloga" />
<span>Dodaj odločitev</span> <select
</template> id="emailTemplateCreate"
<template #content> v-model="createForm.email_template_id"
<form @submit.prevent="store"> :disabled="!createForm.auto_mail"
<div class="col-span-6 sm:col-span-4"> 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"
<InputLabel for="nameCreate" value="Ime"/> >
<TextInput <option :value="null">— Brez —</option>
id="nameCreate" <option v-for="t in emailTemplates" :key="t.id" :value="t.id">
v-model="createForm.name" {{ t.name }}
type="text" </option>
class="mt-1 block w-full" </select>
autocomplete="name" <p v-if="createForm.email_template_id" class="text-xs text-gray-500 mt-1">
/> <span
</div> 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"> <div class="col-span-6 sm:col-span-4">
<input id="autoMailCreate" type="checkbox" v-model="createForm.auto_mail" class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500"> <InputLabel for="actionsCreate" value="Akcije" />
<label for="autoMailCreate" class="text-sm">Samodejna pošta (auto mail)</label> <multiselect
</div> 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"> <div class="flex justify-end mt-4">
<InputLabel for="emailTemplateCreate" value="Email predloga"/> <ActionMessage :on="createForm.recentlySuccessful" class="me-3">
<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"> Shranjuje.
<option :value="null">— Brez —</option> </ActionMessage>
<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="col-span-6 sm:col-span-4"> <PrimaryButton
<InputLabel for="actionsCreate" value="Akcije"/> :class="{ 'opacity-25': createForm.processing }"
<multiselect :disabled="createForm.processing"
id="actionsCreate" >
v-model="createForm.actions" Dodaj
:options="actionOptions" </PrimaryButton>
:multiple="true" </div>
track-by="id" </form>
:taggable="true" </template>
placeholder="Dodaj akcijo" </DialogModal>
:append-to-body="true"
label="name"
/>
</div>
<div class="flex justify-end mt-4"> <ConfirmationModal :show="showDelete" @close="cancelDelete">
<ActionMessage :on="createForm.recentlySuccessful" class="me-3"> <template #title> Delete decision </template>
Shranjuje. <template #content>
</ActionMessage> Are you sure you want to delete decision "{{ toDelete?.name }}"? This cannot be
undone.
<PrimaryButton :class="{ 'opacity-25': createForm.processing }" :disabled="createForm.processing"> </template>
Dodaj <template #footer>
</PrimaryButton> <button
</div> @click="cancelDelete"
</form> class="px-4 py-2 rounded bg-gray-200 hover:bg-gray-300 me-2"
</template> >
</DialogModal> Cancel
</button>
<ConfirmationModal :show="showDelete" @close="cancelDelete"> <PrimaryButton @click="destroyDecision">Delete</PrimaryButton>
<template #title> </template>
Delete decision </ConfirmationModal>
</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> </template>

13
routes/breadcrumbs.php
View File

@ -6,6 +6,7 @@
// this import. This is nice for IDE syntax and refactoring. // this import. This is nice for IDE syntax and refactoring.
use App\Models\Client; use App\Models\Client;
use App\Models\ClientCase; use App\Models\ClientCase;
use App\Models\Segment;
use Diglactic\Breadcrumbs\Breadcrumbs; use Diglactic\Breadcrumbs\Breadcrumbs;
// This import is also not required, and you could replace `BreadcrumbTrail $trail` // This import is also not required, and you could replace `BreadcrumbTrail $trail`
// with `$trail`. This is nice for IDE type checking and completion. // with `$trail`. This is nice for IDE type checking and completion.
@ -88,3 +89,15 @@
$trail->parent('settings'); $trail->parent('settings');
$trail->push('Plačila', route('settings.payment.edit')); $trail->push('Plačila', route('settings.payment.edit'));
}); });
// Dashboard > Segments
Breadcrumbs::for('segments.index', function (BreadcrumbTrail $trail) {
$trail->parent('dashboard');
$trail->push('Segmenti', route('segments.index'));
});
// Dashboard > Segments > [Segment]
Breadcrumbs::for('segments.show', function (BreadcrumbTrail $trail, Segment $segment) {
$trail->parent('segments.index');
$trail->push($segment->name, route('segments.show', $segment));
});