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>

335
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: { tabColor: {
type: String, type: String,
default: 'blue-600' default: "blue-600",
}, },
types: { types: {
type: Object, type: Object,
default: { default: {
address_types: [], address_types: [],
phone_types: [] phone_types: [],
} },
} },
}); });
const drawerUpdatePerson = ref(false); const drawerUpdatePerson = ref(false);
@ -55,134 +53,150 @@ 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
? `Ali res želite izbrisati “${label}”?`
: "Ali res želite izbrisati izbran element?",
type, type,
id, 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(
route("person.email.delete", { person: props.person, email_id: id })
);
const list = props.person.emails || []; const list = props.person.emails || [];
const idx = list.findIndex(e => e.id === id); const idx = list.findIndex((e) => e.id === id);
if (idx !== -1) list.splice(idx, 1); if (idx !== -1) list.splice(idx, 1);
} else if (type === 'trr') { } else if (type === "trr") {
await axios.delete(route('person.trr.delete', { person: props.person, trr_id: id })); await axios.delete(
let list = props.person.trrs || props.person.bank_accounts || props.person.accounts || props.person.bankAccounts || []; route("person.trr.delete", { person: props.person, trr_id: id })
const idx = list.findIndex(a => a.id === id); );
let list =
props.person.trrs ||
props.person.bank_accounts ||
props.person.accounts ||
props.person.bankAccounts ||
[];
const idx = list.findIndex((a) => a.id === id);
if (idx !== -1) list.splice(idx, 1); if (idx !== -1) list.splice(idx, 1);
} else if (type === 'address') { } else if (type === "address") {
await axios.delete(route('person.address.delete', { person: props.person, address_id: id })); await axios.delete(
route("person.address.delete", { person: props.person, address_id: id })
);
const list = props.person.addresses || []; const list = props.person.addresses || [];
const idx = list.findIndex(a => a.id === id); const idx = list.findIndex((a) => a.id === id);
if (idx !== -1) list.splice(idx, 1); if (idx !== -1) list.splice(idx, 1);
} else if (type === 'phone') { } else if (type === "phone") {
await axios.delete(route('person.phone.delete', { person: props.person, phone_id: id })); await axios.delete(
route("person.phone.delete", { person: props.person, phone_id: id })
);
const list = props.person.phones || []; const list = props.person.phones || [];
const idx = list.findIndex(p => p.id === id); const idx = list.findIndex((p) => p.id === id);
if (idx !== -1) list.splice(idx, 1); if (idx !== -1) list.splice(idx, 1);
} }
closeConfirm(); closeConfirm();
} catch (e) { } catch (e) {
console.error('Delete failed', e?.response || e); console.error("Delete failed", e?.response || e);
closeConfirm(); 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">
<UserEditIcon size="lg" css="text-gray-500 hover:text-gray-800" />
</button>
</span> </span>
</div> </div>
<div class="grid grid-rows-* grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-2"> <div class="grid grid-rows-* grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-2">
@ -192,52 +206,82 @@ const getTRRs = (p) => {
</div> </div>
<div class="rounded p-2 shadow"> <div class="rounded p-2 shadow">
<p class="text-sm leading-5 md:text-sm text-gray-500">Name.</p> <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> <p class="text-sm md:text-base leading-7 text-gray-900">
{{ person.full_name }}
</p>
</div> </div>
<div class="rounded p-2 shadow"> <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 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> <p class="text-sm md:text-base leading-7 text-gray-900">
{{ person.tax_number }}
</p>
</div> </div>
<div class="rounded p-2 shadow"> <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 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> <p class="text-sm md:text-base leading-7 text-gray-900">
{{ person.social_security_number }}
</p>
</div> </div>
</div> </div>
<div class="grid grid-rows-* grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 mt-1"> <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"> <div class="rounded p-2 shadow">
<p class="text-sm leading-5 md:text-sm text-gray-500">Address</p> <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> <p class="text-sm md:text-base leading-7 text-gray-900">
{{ getMainAddress(person.addresses) }}
</p>
</div> </div>
<div class="rounded p-2 shadow"> <div class="rounded p-2 shadow">
<p class="text-sm leading-5 md:text-sm text-gray-500">Phone</p> <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 class="text-sm md:text-base leading-7 text-gray-900">
{{ getMainPhone(person.phones) }}
</p>
</div> </div>
<div class="md:col-span-full lg:col-span-1 rounded p-2 shadow"> <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 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> <p class="text-sm md:text-base leading-7 text-gray-900">
{{ person.description }}
</p>
</div> </div>
</div> </div>
</CusTab > </CusTab>
<CusTab name="addresses" title="Naslovi"> <CusTab name="addresses" title="Naslovi">
<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><PlusIcon @click="openDrawerAddAddress(false, 0)" size="lg" css="text-gray-500 hover:text-gray-800" /></button> <button>
<PlusIcon
@click="openDrawerAddAddress(false, 0)"
size="lg"
css="text-gray-500 hover:text-gray-800"
/>
</button>
</span> </span>
</div> </div>
<div class="grid grid-rows-* grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 mt-1"> <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="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="text-sm leading-5 md:text-sm text-gray-500 flex justify-between">
<div class="flex "> <div class="flex">
<FwbBadge type="yellow">{{ address.country }}</FwbBadge> <FwbBadge type="yellow">{{ address.country }}</FwbBadge>
<FwbBadge>{{ address.type.name }}</FwbBadge> <FwbBadge>{{ address.type.name }}</FwbBadge>
</div> </div>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<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> <EditIcon
@click="openDrawerAddAddress(true, address.id)"
size="md"
css="text-gray-500 hover:text-gray-800"
/>
</button>
<button @click="openConfirm('address', address.id, address.address)">
<TrashBinIcon size="md" css="text-red-600 hover:text-red-700" />
</button>
</div> </div>
</div> </div>
<p class="text-sm md:text-base leading-7 text-gray-900"> <p class="text-sm md:text-base leading-7 text-gray-900">
{{ (address.post_code && address.city) ? `${address.address}, ${address.post_code} ${address.city}` : address.address }} {{
address.post_code && address.city
? `${address.address}, ${address.post_code} ${address.city}`
: address.address
}}
</p> </p>
</div> </div>
</div> </div>
@ -245,19 +289,33 @@ const getTRRs = (p) => {
<CusTab name="phones" title="Telefonske"> <CusTab name="phones" title="Telefonske">
<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><PlusIcon @click="operDrawerAddPhone(false, 0)" size="lg" css="text-gray-500 hover:text-gray-800" /></button> <button>
<PlusIcon
@click="operDrawerAddPhone(false, 0)"
size="lg"
css="text-gray-500 hover:text-gray-800"
/>
</button>
</span> </span>
</div> </div>
<div class="grid grid-rows-* grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 mt-1"> <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="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="text-sm leading-5 md:text-sm text-gray-500 flex justify-between">
<div class="flex "> <div class="flex">
<FwbBadge title type="yellow">+{{ phone.country_code }}</FwbBadge> <FwbBadge title type="yellow">+{{ phone.country_code }}</FwbBadge>
<FwbBadge>{{ phone.type.name }}</FwbBadge> <FwbBadge>{{ phone.type.name }}</FwbBadge>
</div> </div>
<div class="flex items-center gap-2"> <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>
<button @click="openConfirm('phone', phone.id, phone.nu)"><TrashBinIcon size="md" css="text-red-600 hover:text-red-700" /></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>
</div> </div>
</div> </div>
<p class="text-sm md:text-base leading-7 text-gray-900">{{ phone.nu }}</p> <p class="text-sm md:text-base leading-7 text-gray-900">{{ phone.nu }}</p>
@ -267,26 +325,50 @@ const getTRRs = (p) => {
<CusTab name="emails" title="Email"> <CusTab name="emails" title="Email">
<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><PlusIcon @click="openDrawerAddEmail(false, 0)" size="lg" css="text-gray-500 hover:text-gray-800" /></button> <button>
<PlusIcon
@click="openDrawerAddEmail(false, 0)"
size="lg"
css="text-gray-500 hover:text-gray-800"
/>
</button>
</span> </span>
</div> </div>
<div class="grid grid-rows-* grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 mt-1"> <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"> <template v-if="getEmails(person).length">
<div class="rounded p-2 shadow" v-for="(email, idx) in getEmails(person)" :key="idx"> <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="text-sm leading-5 md:text-sm text-gray-500 flex justify-between">
<div class="flex gap-2"> <div class="flex gap-2">
<FwbBadge v-if="email?.label">{{ email.label }}</FwbBadge> <FwbBadge v-if="email?.label">{{ email.label }}</FwbBadge>
<FwbBadge v-else type="indigo">Email</FwbBadge> <FwbBadge v-else type="indigo">Email</FwbBadge>
</div> </div>
<div class="flex items-center gap-2"> <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>
<button @click="deleteEmail(email.id, email?.value || email?.email || email?.address)"><TrashBinIcon size="md" css="text-red-600 hover:text-red-700" /></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> </div>
<p class="text-sm md:text-base leading-7 text-gray-900"> <p class="text-sm md:text-base leading-7 text-gray-900">
{{ email?.value || email?.email || email?.address || '-' }} {{ 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> </p>
<p v-if="email?.note" class="mt-1 text-xs text-gray-500 whitespace-pre-wrap">{{ email.note }}</p>
</div> </div>
</template> </template>
<p v-else class="p-2 text-sm text-gray-500">Ni e-poštnih naslovov.</p> <p v-else class="p-2 text-sm text-gray-500">Ni e-poštnih naslovov.</p>
@ -295,35 +377,61 @@ const getTRRs = (p) => {
<CusTab name="trr" title="TRR"> <CusTab name="trr" title="TRR">
<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><PlusIcon @click="openDrawerAddTrr(false, 0)" size="lg" css="text-gray-500 hover:text-gray-800" /></button> <button>
<PlusIcon
@click="openDrawerAddTrr(false, 0)"
size="lg"
css="text-gray-500 hover:text-gray-800"
/>
</button>
</span> </span>
</div> </div>
<div class="grid grid-rows-* grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 mt-1"> <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"> <template v-if="getTRRs(person).length">
<div class="rounded p-2 shadow" v-for="(acc, idx) in getTRRs(person)" :key="idx"> <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="text-sm leading-5 md:text-sm text-gray-500 flex justify-between">
<div class="flex gap-2"> <div class="flex gap-2">
<FwbBadge v-if="acc?.bank_name">{{ acc.bank_name }}</FwbBadge> <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?.holder_name" type="indigo">{{
acc.holder_name
}}</FwbBadge>
<FwbBadge v-if="acc?.currency" type="yellow">{{ acc.currency }}</FwbBadge> <FwbBadge v-if="acc?.currency" type="yellow">{{ acc.currency }}</FwbBadge>
</div> </div>
<div class="flex items-center gap-2"> <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>
<button @click="deleteTrr(acc.id, acc?.iban || acc?.account_number)"><TrashBinIcon size="md" css="text-red-600 hover:text-red-700" /></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>
<p class="text-sm md:text-base leading-7 text-gray-900"> <p class="text-sm md:text-base leading-7 text-gray-900">
{{ acc?.iban || acc?.account_number || acc?.account || acc?.nu || acc?.number || '-' }} {{
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> </p>
<p v-if="acc?.notes" class="mt-1 text-xs text-gray-500 whitespace-pre-wrap">{{ acc.notes }}</p>
</div> </div>
</template> </template>
<p v-else class="p-2 text-sm text-gray-500">Ni TRR računov.</p> <p v-else class="p-2 text-sm text-gray-500">Ni TRR računov.</p>
</div> </div>
</CusTab> </CusTab>
<CusTab name="other" title="Drugo">
ssss4
</CusTab>
</CusTabs> </CusTabs>
<PersonUpdateForm <PersonUpdateForm
:show="drawerUpdatePerson" :show="drawerUpdatePerson"
@ -402,5 +510,4 @@ const getTRRs = (p) => {
@close="closeConfirm" @close="closeConfirm"
@confirm="onConfirmDelete" @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">

198
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>
</div>
</template>
<div class="py-6">
<div class="max-w-6xl mx-auto sm:px-6 lg:px-8">
<div class="flex flex-col gap-3 bg-white shadow sm:rounded-lg p-4">
<div class="flex justify-end">
<Link <Link
:href="route('imports.create')" :href="route('imports.create')"
class="px-3 py-2 rounded bg-blue-600 text-white text-sm" class="px-3 py-2 rounded bg-blue-600 text-white text-sm"
>Novi uvoz</Link >Novi uvoz</Link
> >
</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> </template>
<div class="py-6"> <!-- Status badge -->
<div class="max-w-6xl mx-auto sm:px-6 lg:px-8"> <template #cell-status="{ row }">
<div class="bg-white shadow sm:rounded-lg p-6"> <span :class="['px-2 py-0.5 rounded text-xs', statusBadge(row.status)]">
<div class="overflow-x-auto"> {{ row.status }}
<table class="min-w-full text-sm"> </span>
<thead> </template>
<tr class="text-left text-xs uppercase text-gray-500 border-b">
<th class="p-2">Datum</th>
<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 class="flex items-center justify-between mt-4 text-sm text-gray-600"> <!-- Client name -->
<div> <template #cell-client="{ row }">
Prikaz {{ imports.meta.from }}–{{ imports.meta.to }} od {{ row.client?.person?.full_name ?? "—" }}
{{ imports.meta.total }} </template>
</div>
<div class="space-x-2"> <!-- Template name -->
<Link <template #cell-template="{ row }">
v-if="imports.links.prev" {{ row.template?.name ?? "—" }}
:href="imports.links.prev" </template>
class="px-2 py-1 border rounded"
>Nazaj</Link <!-- Actions -->
<template #cell-actions="{ row }">
<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 <Link
v-if="imports.links.next" :href="route('imports.continue', { import: row.uuid })"
:href="imports.links.next" class="flex items-center w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
class="px-2 py-1 border rounded"
>Naprej</Link
> >
<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>
</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>

166
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 <DataTableServer
v-model="search" :columns="columns"
type="text" :rows="contracts?.data || []"
placeholder="Iskanje po referenci ali imenu" :meta="contracts || {}"
class="w-full sm:w-80 rounded border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 px-3 py-2 text-sm" v-model:search="search"
/> route-name="segments.show"
</div> :route-params="{ segment: segment?.id ?? segment }"
<div class="overflow-x-auto"> :only-props="['contracts']"
<table class="min-w-full text-left text-sm"> :page-size-options="[10, 25, 50]"
<thead> empty-text="Ni pogodb v tem segmentu."
<tr class="border-b"> row-key="uuid"
<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> <!-- Primer (client_case) cell with link when available -->
<td class="py-2 pr-4"> <template #cell-client_case="{ row }">
<Link <Link
v-if="c.client_case?.uuid" v-if="row.client_case?.uuid"
:href=" :href="
route('clientCase.show', { route('clientCase.show', {
client_case: c.client_case.uuid, client_case: row.client_case.uuid,
segment: segment.id, segment: segment?.id ?? segment,
}) })
" "
class="text-indigo-600 hover:underline" class="text-indigo-600 hover:underline"
> >
{{ c.client_case?.person?.full_name || "Primer stranke" }} {{ row.client_case?.person?.full_name || "Primer stranke" }}
</Link> </Link>
<span v-else>{{ c.client_case?.person?.full_name || "-" }}</span> <span v-else>{{ row.client_case?.person?.full_name || "-" }}</span>
</td> </template>
<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 --> <!-- Stranka (client) name -->
<div <template #cell-client="{ row }">
class="flex items-center justify-between mt-4 text-sm text-gray-700" {{ row.client?.person?.full_name || "-" }}
v-if="contracts.total > 0" </template>
>
<div> <!-- Vrsta (type) -->
Prikazano {{ contracts.from || 0 }}–{{ contracts.to || 0 }} od <template #cell-type="{ row }">
{{ contracts.total }} {{ row.type?.name || "-" }}
</div> </template>
<div class="flex items-center gap-2">
<Link <!-- Dates formatted -->
v-if="contracts.prev_page_url" <template #cell-start_date="{ row }">
:href="contracts.prev_page_url" {{ formatDate(row.start_date) }}
class="px-2 py-1 border rounded hover:bg-gray-50" </template>
>Prejšnja</Link <template #cell-end_date="{ row }">
> {{ formatDate(row.end_date) }}
<span>Stran {{ contracts.current_page }} / {{ contracts.last_page }}</span> </template>
<Link
v-if="contracts.next_page_url" <!-- Account balance formatted -->
:href="contracts.next_page_url" <template #cell-account="{ row }">
class="px-2 py-1 border rounded hover:bg-gray-50" <div class="text-right">
>Naslednja</Link {{ formatCurrency(row.account?.balance_amount) }}
>
</div>
</div> </div>
</template>
</DataTableServer>
</div> </div>
</div> </div>
</AppLayout> </AppLayout>

243
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,25 +24,36 @@ 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) => {
@ -54,58 +67,58 @@ const openEditDrawer = (item) => {
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) => { props.segments.forEach((s) => {
segmentOptions.value.push({ segmentOptions.value.push({
name: s.name, name: s.name,
id: s.id 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 ||
a.name?.toLowerCase().includes(term) ||
a.color_tag?.toLowerCase().includes(term);
const matchesSegment =
!selectedSegment.value || a.segment?.id === selectedSegment.value;
return matchesSearch && matchesSegment; 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();
}, },
@ -113,7 +126,7 @@ const update = () => {
}; };
const store = () => { const store = () => {
createForm.post(route('settings.actions.store'), { createForm.post(route("settings.actions.store"), {
onSuccess: () => { onSuccess: () => {
closeCreateDrawer(); closeCreateDrawer();
}, },
@ -132,60 +145,74 @@ const cancelDelete = () => {
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
v-model="search"
placeholder="Search actions..."
class="w-full sm:w-64"
/>
<div class="w-64"> <div class="w-64">
<Multiselect <Multiselect
v-model="selectedSegment" v-model="selectedSegment"
:options="segmentOptions.map(o=>o.id)" :options="segmentOptions.map((o) => o.id)"
:multiple="false" :multiple="false"
:searchable="true" :searchable="true"
placeholder="Filter by segment" placeholder="Filter by segment"
:append-to-body="true" :append-to-body="true"
:custom-label="(opt) => (segmentOptions.find(o=>o.id===opt)?.name || '')" :custom-label="(opt) => segmentOptions.find((o) => o.id === opt)?.name || ''"
/> />
</div> </div>
</div> </div>
<PrimaryButton @click="openCreateDrawer">+ Dodaj akcijo</PrimaryButton> <PrimaryButton @click="openCreateDrawer">+ Dodaj akcijo</PrimaryButton>
</div> </div>
<div class="px-4 pb-4">
<fwb-table> <DataTableClient
<fwb-table-head> :columns="columns"
<fwb-table-head-cell>#</fwb-table-head-cell> :rows="filtered"
<fwb-table-head-cell>Name</fwb-table-head-cell> :sort="sort"
<fwb-table-head-cell>Color tag</fwb-table-head-cell> :search="''"
<fwb-table-head-cell>Decisions</fwb-table-head-cell> :page="page"
<fwb-table-head-cell> :pageSize="pageSize"
<span class="sr-only">Edit</span> :showToolbar="false"
</fwb-table-head-cell> @update:sort="(v) => (sort = v)"
</fwb-table-head> @update:page="(v) => (page = v)"
<fwb-table-body> @update:pageSize="(v) => (pageSize = v)"
<fwb-table-row v-for="act in filtered" :key="act.id"> >
<fwb-table-cell>{{ act.id }}</fwb-table-cell> <template #cell-color_tag="{ row }">
<fwb-table-cell>{{ act.name }}</fwb-table-cell>
<fwb-table-cell>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<span class="inline-block h-4 w-4 rounded" :style="{ backgroundColor: act.color_tag }"></span> <span
<span>{{ act.color_tag }}</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> </div>
</fwb-table-cell>
<fwb-table-cell>{{ act.decisions.length }}</fwb-table-cell>
<fwb-table-cell>
<button class="px-2" @click="openEditDrawer(act)"><EditIcon size="md" css="text-gray-500" /></button>
<button class="px-2 disabled:opacity-40" :disabled="(act.activities_count ?? 0) > 0" @click="confirmDelete(act)"><TrashBinIcon size="md" css="text-red-500" /></button>
</fwb-table-cell>
</fwb-table-row>
</fwb-table-body>
</fwb-table>
<DialogModal :show="drawerEdit" @close="closeEditDrawer"> <DialogModal :show="drawerEdit" @close="closeEditDrawer">
<template #title> <template #title>
@ -194,7 +221,7 @@ const destroyAction = () => {
<template #content> <template #content>
<form @submit.prevent="update"> <form @submit.prevent="update">
<div class="col-span-6 sm:col-span-4"> <div class="col-span-6 sm:col-span-4">
<InputLabel for="name" value="Ime"/> <InputLabel for="name" value="Ime" />
<TextInput <TextInput
id="name" id="name"
ref="nameInput" ref="nameInput"
@ -205,38 +232,29 @@ const destroyAction = () => {
/> />
</div> </div>
<div class="col-span-6 sm:col-span-4"> <div class="col-span-6 sm:col-span-4">
<InputLabel for="colorTag" value="Barva"/> <InputLabel for="colorTag" value="Barva" />
<div class="mt-1 w-full border flex p-1"> <div class="mt-1">
<TextInput <InlineColorPicker v-model="form.color_tag" />
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> </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="segmentEdit" value="Segment" />
<multiselect <multiselect
id="segmentEdit" id="segmentEdit"
v-model="form.segment_id" v-model="form.segment_id"
:options="segmentOptions.map(s=>s.id)" :options="segmentOptions.map((s) => s.id)"
:multiple="false" :multiple="false"
:searchable="true" :searchable="true"
:taggable="false" :taggable="false"
placeholder="Izberi segment" placeholder="Izberi segment"
:append-to-body="true" :append-to-body="true"
:custom-label="(opt) => (segmentOptions.find(s=>s.id===opt)?.name || '')" :custom-label="(opt) => segmentOptions.find((s) => s.id === opt)?.name || ''"
/> />
</div> </div>
<div class="col-span-6 sm:col-span-4"> <div class="col-span-6 sm:col-span-4">
<InputLabel for="decisions" value="Odločitve"/> <InputLabel for="decisions" value="Odločitve" />
<multiselect <multiselect
id="decisions" id="decisions"
ref="decisionsSelect" ref="decisionsSelect"
@ -256,7 +274,10 @@ const destroyAction = () => {
Shranjuje. Shranjuje.
</ActionMessage> </ActionMessage>
<PrimaryButton :class="{ 'opacity-25': form.processing }" :disabled="form.processing"> <PrimaryButton
:class="{ 'opacity-25': form.processing }"
:disabled="form.processing"
>
Shrani Shrani
</PrimaryButton> </PrimaryButton>
</div> </div>
@ -271,7 +292,7 @@ const destroyAction = () => {
<template #content> <template #content>
<form @submit.prevent="store"> <form @submit.prevent="store">
<div class="col-span-6 sm:col-span-4"> <div class="col-span-6 sm:col-span-4">
<InputLabel for="nameCreate" value="Ime"/> <InputLabel for="nameCreate" value="Ime" />
<TextInput <TextInput
id="nameCreate" id="nameCreate"
v-model="createForm.name" v-model="createForm.name"
@ -281,36 +302,29 @@ const destroyAction = () => {
/> />
</div> </div>
<div class="col-span-6 sm:col-span-4"> <div class="col-span-6 sm:col-span-4">
<InputLabel for="colorTagCreate" value="Barva"/> <InputLabel for="colorTagCreate" value="Barva" />
<div class="mt-1 w-full border flex p-1"> <div class="mt-1">
<TextInput <InlineColorPicker v-model="createForm.color_tag" />
id="colorTagCreate"
v-model="createForm.color_tag"
type="color"
class="mr-2"
autocomplete="color-tag"
/>
<span>{{ createForm.color_tag }}</span>
</div> </div>
</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="segmentCreate" value="Segment" />
<multiselect <multiselect
id="segmentCreate" id="segmentCreate"
v-model="createForm.segment_id" v-model="createForm.segment_id"
:options="segmentOptions.map(s=>s.id)" :options="segmentOptions.map((s) => s.id)"
:multiple="false" :multiple="false"
:searchable="true" :searchable="true"
:taggable="false" :taggable="false"
placeholder="Izberi segment" placeholder="Izberi segment"
:append-to-body="true" :append-to-body="true"
:custom-label="(opt) => (segmentOptions.find(s=>s.id===opt)?.name || '')" :custom-label="(opt) => segmentOptions.find((s) => s.id === opt)?.name || ''"
/> />
</div> </div>
<div class="col-span-6 sm:col-span-4"> <div class="col-span-6 sm:col-span-4">
<InputLabel for="decisionsCreate" value="Odločitve"/> <InputLabel for="decisionsCreate" value="Odločitve" />
<multiselect <multiselect
id="decisionsCreate" id="decisionsCreate"
v-model="createForm.decisions" v-model="createForm.decisions"
@ -329,7 +343,10 @@ const destroyAction = () => {
Shranjuje. Shranjuje.
</ActionMessage> </ActionMessage>
<PrimaryButton :class="{ 'opacity-25': createForm.processing }" :disabled="createForm.processing"> <PrimaryButton
:class="{ 'opacity-25': createForm.processing }"
:disabled="createForm.processing"
>
Dodaj Dodaj
</PrimaryButton> </PrimaryButton>
</div> </div>
@ -338,14 +355,18 @@ const destroyAction = () => {
</DialogModal> </DialogModal>
<ConfirmationModal :show="showDelete" @close="cancelDelete"> <ConfirmationModal :show="showDelete" @close="cancelDelete">
<template #title> <template #title> Delete action </template>
Delete action
</template>
<template #content> <template #content>
Are you sure you want to delete action "{{ toDelete?.name }}"? This cannot be undone. Are you sure you want to delete action "{{ toDelete?.name }}"? This cannot be
undone.
</template> </template>
<template #footer> <template #footer>
<button @click="cancelDelete" class="px-4 py-2 rounded bg-gray-200 hover:bg-gray-300 me-2">Cancel</button> <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> <PrimaryButton @click="destroyAction">Delete</PrimaryButton>
</template> </template>
</ConfirmationModal> </ConfirmationModal>

297
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,24 +24,36 @@ 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,
@ -57,40 +71,43 @@ const openEditDrawer = (item) => {
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 =
!term ||
d.name?.toLowerCase().includes(term) ||
d.color_tag?.toLowerCase().includes(term);
const matchesAuto = !onlyAutoMail.value || !!d.auto_mail; const matchesAuto = !onlyAutoMail.value || !!d.auto_mail;
const matchesTemplate = !tplId || Number(d.email_template_id || 0) === tplId; const matchesTemplate = !tplId || Number(d.email_template_id || 0) === tplId;
return matchesSearch && matchesAuto && matchesTemplate; return matchesSearch && matchesAuto && matchesTemplate;
@ -98,7 +115,7 @@ const filtered = computed(() => {
}); });
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();
}, },
@ -106,7 +123,7 @@ const update = () => {
}; };
const store = () => { const store = () => {
createForm.post(route('settings.decisions.store'), { createForm.post(route("settings.decisions.store"), {
onSuccess: () => { onSuccess: () => {
closeCreateDrawer(); closeCreateDrawer();
}, },
@ -125,67 +142,91 @@ const cancelDelete = () => {
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"
placeholder="Search decisions..."
class="w-full sm:w-72"
/>
<select
v-model="selectedTemplateId"
class="block w-full sm:w-64 border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
>
<option :value="null">All templates</option> <option :value="null">All templates</option>
<option v-for="t in emailTemplates" :key="t.id" :value="t.id">{{ t.name }}</option> <option v-for="t in emailTemplates" :key="t.id" :value="t.id">
{{ t.name }}
</option>
</select> </select>
<label class="flex items-center gap-2 text-sm"> <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"> <input
type="checkbox"
v-model="onlyAutoMail"
class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500"
/>
Only auto mail Only auto mail
</label> </label>
</div> </div>
<PrimaryButton @click="openCreateDrawer">+ Dodaj odločitev</PrimaryButton> <PrimaryButton @click="openCreateDrawer">+ Dodaj odločitev</PrimaryButton>
</div> </div>
<div class="px-4 pb-4">
<fwb-table> <DataTableClient
<fwb-table-head> :columns="columns"
<fwb-table-head-cell>#</fwb-table-head-cell> :rows="filtered"
<fwb-table-head-cell>Name</fwb-table-head-cell> :sort="sort"
<fwb-table-head-cell>Color tag</fwb-table-head-cell> :search="''"
<fwb-table-head-cell>Belongs to actions</fwb-table-head-cell> :page="page"
<fwb-table-head-cell>Auto mail</fwb-table-head-cell> :pageSize="pageSize"
<fwb-table-head-cell> :showToolbar="false"
<span class="sr-only">Edit</span> @update:sort="(v) => (sort = v)"
</fwb-table-head-cell> @update:page="(v) => (page = v)"
</fwb-table-head> @update:pageSize="(v) => (pageSize = v)"
<fwb-table-body> >
<fwb-table-row v-for="d in filtered" :key="d.id"> <template #cell-color_tag="{ row }">
<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"> <div class="flex items-center gap-2">
<span class="inline-block h-4 w-4 rounded" :style="{ backgroundColor: d.color_tag }"></span> <span
<span>{{ d.color_tag }}</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> </div>
</fwb-table-cell> </template>
<fwb-table-cell>{{ d.actions.length }}</fwb-table-cell> <template #cell-belongs="{ row }">
<fwb-table-cell> {{ row.actions?.length ?? 0 }}
</template>
<template #cell-auto_mail="{ row }">
<div class="flex flex-col text-sm"> <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 :class="row.auto_mail ? 'text-green-700' : 'text-gray-500'">{{
<span v-if="d.auto_mail && d.email_template_id" class="text-gray-600"> row.auto_mail ? "Enabled" : "Disabled"
Template: {{ (emailTemplates.find(t => t.id === d.email_template_id)?.name) || '—' }} }}</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> </span>
</div> </div>
</fwb-table-cell> </template>
<fwb-table-cell> <template #actions="{ row }">
<button class="px-2" @click="openEditDrawer(d)"><EditIcon size="md" css="text-gray-500" /></button> <button class="px-2" @click="openEditDrawer(row)">
<button class="px-2 disabled:opacity-40" :disabled="(d.activities_count ?? 0) > 0" @click="confirmDelete(d)"><TrashBinIcon size="md" css="text-red-500" /></button> <EditIcon size="md" css="text-gray-500" />
</fwb-table-cell> </button>
</fwb-table-row> <button
</fwb-table-body> class="px-2 disabled:opacity-40"
</fwb-table> :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"> <DialogModal :show="drawerEdit" @close="closeEditDrawer">
<template #title> <template #title>
<span>Spremeni odločitev</span> <span>Spremeni odločitev</span>
@ -193,7 +234,7 @@ const destroyDecision = () => {
<template #content> <template #content>
<form @submit.prevent="update"> <form @submit.prevent="update">
<div class="col-span-6 sm:col-span-4"> <div class="col-span-6 sm:col-span-4">
<InputLabel for="name" value="Ime"/> <InputLabel for="name" value="Ime" />
<TextInput <TextInput
id="name" id="name"
v-model="form.name" v-model="form.name"
@ -204,36 +245,49 @@ const destroyDecision = () => {
</div> </div>
<div class="mt-4 flex items-center gap-2"> <div class="mt-4 flex items-center gap-2">
<input id="autoMailEdit" type="checkbox" v-model="form.auto_mail" class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500"> <input
id="autoMailEdit"
type="checkbox"
v-model="form.auto_mail"
class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500"
/>
<label for="autoMailEdit" class="text-sm">Samodejna pošta (auto mail)</label> <label for="autoMailEdit" class="text-sm">Samodejna pošta (auto mail)</label>
</div> </div>
<div class="col-span-6 sm:col-span-4 mt-2"> <div class="col-span-6 sm:col-span-4 mt-2">
<InputLabel for="emailTemplateEdit" value="Email predloga"/> <InputLabel for="emailTemplateEdit" value="Email predloga" />
<select id="emailTemplateEdit" v-model="form.email_template_id" :disabled="!form.auto_mail" class="block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm disabled:opacity-50 disabled:cursor-not-allowed"> <select
id="emailTemplateEdit"
v-model="form.email_template_id"
:disabled="!form.auto_mail"
class="block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm disabled:opacity-50 disabled:cursor-not-allowed"
>
<option :value="null">— Brez —</option> <option :value="null">— Brez —</option>
<option v-for="t in emailTemplates" :key="t.id" :value="t.id">{{ t.name }}</option> <option v-for="t in emailTemplates" :key="t.id" :value="t.id">
{{ t.name }}
</option>
</select> </select>
<p v-if="form.email_template_id" class="text-xs text-gray-500 mt-1"> <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> <span
v-if="
(
emailTemplates.find((t) => t.id === form.email_template_id)
?.entity_types || []
).includes('contract')
"
>Ta predloga zahteva pogodbo.</span
>
</p> </p>
</div> </div>
<div class="col-span-6 sm:col-span-4"> <div class="col-span-6 sm:col-span-4">
<InputLabel for="colorTag" value="Barva"/> <InputLabel for="colorTag" value="Barva" />
<div class="mt-1 w-full border flex p-1"> <div class="mt-1">
<TextInput <InlineColorPicker v-model="form.color_tag" />
id="colorTag"
v-model="form.color_tag"
type="color"
class="mr-2"
autocomplete="color-tag"
/>
<span>{{ form.color_tag }}</span>
</div> </div>
</div> </div>
<div class="col-span-6 sm:col-span-4"> <div class="col-span-6 sm:col-span-4">
<InputLabel for="actionsSelect" value="Akcije"/> <InputLabel for="actionsSelect" value="Akcije" />
<multiselect <multiselect
id="actionsSelect" id="actionsSelect"
v-model="form.actions" v-model="form.actions"
@ -252,7 +306,10 @@ const destroyDecision = () => {
Shranjuje. Shranjuje.
</ActionMessage> </ActionMessage>
<PrimaryButton :class="{ 'opacity-25': form.processing }" :disabled="form.processing"> <PrimaryButton
:class="{ 'opacity-25': form.processing }"
:disabled="form.processing"
>
Shrani Shrani
</PrimaryButton> </PrimaryButton>
</div> </div>
@ -267,7 +324,7 @@ const destroyDecision = () => {
<template #content> <template #content>
<form @submit.prevent="store"> <form @submit.prevent="store">
<div class="col-span-6 sm:col-span-4"> <div class="col-span-6 sm:col-span-4">
<InputLabel for="nameCreate" value="Ime"/> <InputLabel for="nameCreate" value="Ime" />
<TextInput <TextInput
id="nameCreate" id="nameCreate"
v-model="createForm.name" v-model="createForm.name"
@ -278,36 +335,49 @@ const destroyDecision = () => {
</div> </div>
<div class="mt-4 flex items-center gap-2"> <div class="mt-4 flex items-center gap-2">
<input id="autoMailCreate" type="checkbox" v-model="createForm.auto_mail" class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500"> <input
id="autoMailCreate"
type="checkbox"
v-model="createForm.auto_mail"
class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500"
/>
<label for="autoMailCreate" class="text-sm">Samodejna pošta (auto mail)</label> <label for="autoMailCreate" class="text-sm">Samodejna pošta (auto mail)</label>
</div> </div>
<div class="col-span-6 sm:col-span-4 mt-2"> <div class="col-span-6 sm:col-span-4 mt-2">
<InputLabel for="emailTemplateCreate" value="Email predloga"/> <InputLabel for="emailTemplateCreate" value="Email predloga" />
<select id="emailTemplateCreate" v-model="createForm.email_template_id" :disabled="!createForm.auto_mail" class="block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm disabled:opacity-50 disabled:cursor-not-allowed"> <select
id="emailTemplateCreate"
v-model="createForm.email_template_id"
:disabled="!createForm.auto_mail"
class="block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm disabled:opacity-50 disabled:cursor-not-allowed"
>
<option :value="null">— Brez —</option> <option :value="null">— Brez —</option>
<option v-for="t in emailTemplates" :key="t.id" :value="t.id">{{ t.name }}</option> <option v-for="t in emailTemplates" :key="t.id" :value="t.id">
{{ t.name }}
</option>
</select> </select>
<p v-if="createForm.email_template_id" class="text-xs text-gray-500 mt-1"> <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> <span
v-if="
(
emailTemplates.find((t) => t.id === createForm.email_template_id)
?.entity_types || []
).includes('contract')
"
>Ta predloga zahteva pogodbo.</span
>
</p> </p>
</div> </div>
<div class="col-span-6 sm:col-span-4"> <div class="col-span-6 sm:col-span-4">
<InputLabel for="colorTagCreate" value="Barva"/> <InputLabel for="colorTagCreate" value="Barva" />
<div class="mt-1 w-full border flex p-1"> <div class="mt-1">
<TextInput <InlineColorPicker v-model="createForm.color_tag" />
id="colorTagCreate"
v-model="createForm.color_tag"
type="color"
class="mr-2"
autocomplete="color-tag"
/>
<span>{{ createForm.color_tag }}</span>
</div> </div>
</div> </div>
<div class="col-span-6 sm:col-span-4"> <div class="col-span-6 sm:col-span-4">
<InputLabel for="actionsCreate" value="Akcije"/> <InputLabel for="actionsCreate" value="Akcije" />
<multiselect <multiselect
id="actionsCreate" id="actionsCreate"
v-model="createForm.actions" v-model="createForm.actions"
@ -326,7 +396,10 @@ const destroyDecision = () => {
Shranjuje. Shranjuje.
</ActionMessage> </ActionMessage>
<PrimaryButton :class="{ 'opacity-25': createForm.processing }" :disabled="createForm.processing"> <PrimaryButton
:class="{ 'opacity-25': createForm.processing }"
:disabled="createForm.processing"
>
Dodaj Dodaj
</PrimaryButton> </PrimaryButton>
</div> </div>
@ -335,14 +408,18 @@ const destroyDecision = () => {
</DialogModal> </DialogModal>
<ConfirmationModal :show="showDelete" @close="cancelDelete"> <ConfirmationModal :show="showDelete" @close="cancelDelete">
<template #title> <template #title> Delete decision </template>
Delete decision
</template>
<template #content> <template #content>
Are you sure you want to delete decision "{{ toDelete?.name }}"? This cannot be undone. Are you sure you want to delete decision "{{ toDelete?.name }}"? This cannot be
undone.
</template> </template>
<template #footer> <template #footer>
<button @click="cancelDelete" class="px-4 py-2 rounded bg-gray-200 hover:bg-gray-300 me-2">Cancel</button> <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> <PrimaryButton @click="destroyDecision">Delete</PrimaryButton>
</template> </template>
</ConfirmationModal> </ConfirmationModal>

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));
});