Changes to UI
This commit is contained in:
Simon Pocrnjič
parent
bf09164dbe
commit
8f2e5e282c
|
|
@ -14,8 +14,8 @@ class WorkflowController extends Controller
|
|||
public function index(Request $request)
|
||||
{
|
||||
return Inertia::render('Settings/Workflow/Index', [
|
||||
'actions' => Action::query()->with(['decisions', 'segment'])->withCount('activities')->get(),
|
||||
'decisions' => Decision::query()->with('actions')->withCount('activities')->get(),
|
||||
'actions' => Action::query()->with(['decisions', 'segment'])->withCount('activities')->orderBy('id')->get(),
|
||||
'decisions' => Decision::query()->with('actions')->withCount('activities')->orderBy('id')->get(),
|
||||
'segments' => Segment::query()->get(),
|
||||
'email_templates' => EmailTemplate::query()->where('active', true)->get(['id', 'name', 'entity_types']),
|
||||
]);
|
||||
|
|
|
|||
|
|
@ -209,7 +209,7 @@ function setPageSize(ps) {
|
|||
@click="toggleSort(col)"
|
||||
: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-else-if="sort?.key === col.key && sort.direction === 'desc'"
|
||||
>▼</span
|
||||
|
|
@ -281,9 +281,14 @@ function setPageSize(ps) {
|
|||
</FwbTable>
|
||||
</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">
|
||||
<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>
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
|
|
@ -311,7 +316,9 @@ function setPageSize(ps) {
|
|||
v-if="visiblePages[0] > 1"
|
||||
class="px-2 py-1 rounded border border-gray-300 hover:bg-gray-50"
|
||||
@click="setPage(1)"
|
||||
>1</button>
|
||||
>
|
||||
1
|
||||
</button>
|
||||
<span v-if="visiblePages[0] > 2" class="px-1">…</span>
|
||||
|
||||
<!-- Page numbers -->
|
||||
|
|
@ -319,7 +326,11 @@ function setPageSize(ps) {
|
|||
v-for="p in visiblePages"
|
||||
:key="p"
|
||||
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"
|
||||
@click="setPage(p)"
|
||||
>
|
||||
|
|
@ -327,12 +338,16 @@ function setPageSize(ps) {
|
|||
</button>
|
||||
|
||||
<!-- 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
|
||||
v-if="visiblePages[visiblePages.length - 1] < lastPage"
|
||||
class="px-2 py-1 rounded border border-gray-300 hover:bg-gray-50"
|
||||
@click="setPage(lastPage)"
|
||||
>{{ lastPage }}</button>
|
||||
>
|
||||
{{ lastPage }}
|
||||
</button>
|
||||
|
||||
<!-- Next -->
|
||||
<button
|
||||
|
|
|
|||
|
|
@ -209,7 +209,7 @@ function goToPageInput() {
|
|||
@click="toggleSort(col)"
|
||||
: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-else-if="sort?.key === col.key && sort.direction === 'desc'"
|
||||
>▼</span
|
||||
|
|
|
|||
61
resources/js/Components/InlineColorPicker.vue
Normal file
61
resources/js/Components/InlineColorPicker.vue
Normal 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>
|
||||
|
|
@ -1,39 +1,37 @@
|
|||
<script setup>
|
||||
import { FwbBadge } from 'flowbite-vue';
|
||||
import { EditIcon, PlusIcon, UserEditIcon, TrashBinIcon } from '@/Utilities/Icons';
|
||||
import CusTab from './CusTab.vue';
|
||||
import CusTabs from './CusTabs.vue';
|
||||
import { provide, ref, watch } from 'vue';
|
||||
import axios from 'axios';
|
||||
import PersonUpdateForm from './PersonUpdateForm.vue';
|
||||
import AddressCreateForm from './AddressCreateForm.vue';
|
||||
import AddressUpdateForm from './AddressUpdateForm.vue';
|
||||
import PhoneCreateForm from './PhoneCreateForm.vue';
|
||||
import EmailCreateForm from './EmailCreateForm.vue';
|
||||
import EmailUpdateForm from './EmailUpdateForm.vue';
|
||||
import TrrCreateForm from './TrrCreateForm.vue';
|
||||
import TrrUpdateForm from './TrrUpdateForm.vue';
|
||||
import ConfirmDialog from './ConfirmDialog.vue';
|
||||
|
||||
import { FwbBadge } from "flowbite-vue";
|
||||
import { EditIcon, PlusIcon, UserEditIcon, TrashBinIcon } from "@/Utilities/Icons";
|
||||
import CusTab from "./CusTab.vue";
|
||||
import CusTabs from "./CusTabs.vue";
|
||||
import { provide, ref, watch } from "vue";
|
||||
import axios from "axios";
|
||||
import PersonUpdateForm from "./PersonUpdateForm.vue";
|
||||
import AddressCreateForm from "./AddressCreateForm.vue";
|
||||
import AddressUpdateForm from "./AddressUpdateForm.vue";
|
||||
import PhoneCreateForm from "./PhoneCreateForm.vue";
|
||||
import EmailCreateForm from "./EmailCreateForm.vue";
|
||||
import EmailUpdateForm from "./EmailUpdateForm.vue";
|
||||
import TrrCreateForm from "./TrrCreateForm.vue";
|
||||
import TrrUpdateForm from "./TrrUpdateForm.vue";
|
||||
import ConfirmDialog from "./ConfirmDialog.vue";
|
||||
|
||||
const props = defineProps({
|
||||
person: Object,
|
||||
edit: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
person: Object,
|
||||
edit: {
|
||||
type: Boolean,
|
||||
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);
|
||||
|
|
@ -54,353 +52,462 @@ const editTrrId = ref(0);
|
|||
|
||||
// Confirm dialog state
|
||||
const confirm = ref({
|
||||
show: false,
|
||||
title: 'Potrditev brisanja',
|
||||
message: '',
|
||||
type: '', // 'email' | 'trr' | 'address' | 'phone'
|
||||
id: 0,
|
||||
show: false,
|
||||
title: "Potrditev brisanja",
|
||||
message: "",
|
||||
type: "", // 'email' | 'trr' | 'address' | 'phone'
|
||||
id: 0,
|
||||
});
|
||||
|
||||
const openConfirm = (type, id, label = '') => {
|
||||
confirm.value = {
|
||||
show: true,
|
||||
title: 'Potrditev brisanja',
|
||||
message: label ? `Ali res želite izbrisati “${label}”?` : 'Ali res želite izbrisati izbran element?',
|
||||
type,
|
||||
id,
|
||||
};
|
||||
}
|
||||
const closeConfirm = () => { confirm.value.show = false; };
|
||||
const openConfirm = (type, id, label = "") => {
|
||||
confirm.value = {
|
||||
show: true,
|
||||
title: "Potrditev brisanja",
|
||||
message: label
|
||||
? `Ali res želite izbrisati “${label}”?`
|
||||
: "Ali res želite izbrisati izbran element?",
|
||||
type,
|
||||
id,
|
||||
};
|
||||
};
|
||||
const closeConfirm = () => {
|
||||
confirm.value.show = false;
|
||||
};
|
||||
|
||||
const getMainAddress = (adresses) => {
|
||||
const addr = adresses.filter( a => a.type.id === 1 )[0] ?? '';
|
||||
if( addr !== '' ){
|
||||
const tail = (addr.post_code && addr.city) ? `, ${addr.post_code} ${addr.city}` : '';
|
||||
const country = addr.country !== '' ? ` - ${addr.country}` : '';
|
||||
return addr.address !== '' ? (addr.address + tail + country) : '';
|
||||
}
|
||||
|
||||
return '';
|
||||
}
|
||||
const addr = adresses.filter((a) => a.type.id === 1)[0] ?? "";
|
||||
if (addr !== "") {
|
||||
const tail = addr.post_code && addr.city ? `, ${addr.post_code} ${addr.city}` : "";
|
||||
const country = addr.country !== "" ? ` - ${addr.country}` : "";
|
||||
return addr.address !== "" ? addr.address + tail + country : "";
|
||||
}
|
||||
|
||||
return "";
|
||||
};
|
||||
|
||||
const getMainPhone = (phones) => {
|
||||
const pho = phones.filter( a => a.type.id === 1 )[0] ?? '';
|
||||
if( pho !== '' ){
|
||||
const countryCode = pho.country_code !== null ? `+${pho.country_code} ` : '';
|
||||
return pho.nu !== '' ? countryCode + pho.nu: '';
|
||||
}
|
||||
const pho = phones.filter((a) => a.type.id === 1)[0] ?? "";
|
||||
if (pho !== "") {
|
||||
const countryCode = pho.country_code !== null ? `+${pho.country_code} ` : "";
|
||||
return pho.nu !== "" ? countryCode + pho.nu : "";
|
||||
}
|
||||
|
||||
return '';
|
||||
|
||||
}
|
||||
return "";
|
||||
};
|
||||
|
||||
const openDrawerUpdateClient = () => {
|
||||
drawerUpdatePerson.value = true;
|
||||
}
|
||||
drawerUpdatePerson.value = true;
|
||||
};
|
||||
|
||||
const openDrawerAddAddress = (edit = false, id = 0) => {
|
||||
drawerAddAddress.value = true;
|
||||
editAddress.value = edit;
|
||||
editAddressId.value = id;
|
||||
|
||||
}
|
||||
drawerAddAddress.value = true;
|
||||
editAddress.value = edit;
|
||||
editAddressId.value = id;
|
||||
};
|
||||
|
||||
const operDrawerAddPhone = (edit = false, id = 0) => {
|
||||
drawerAddPhone.value = true;
|
||||
editPhone.value = edit;
|
||||
editPhoneId.value = id;
|
||||
}
|
||||
drawerAddPhone.value = true;
|
||||
editPhone.value = edit;
|
||||
editPhoneId.value = id;
|
||||
};
|
||||
|
||||
const openDrawerAddEmail = (edit = false, id = 0) => {
|
||||
drawerAddEmail.value = true;
|
||||
editEmail.value = edit;
|
||||
editEmailId.value = id;
|
||||
}
|
||||
drawerAddEmail.value = true;
|
||||
editEmail.value = edit;
|
||||
editEmailId.value = id;
|
||||
};
|
||||
|
||||
const openDrawerAddTrr = (edit = false, id = 0) => {
|
||||
drawerAddTrr.value = true;
|
||||
editTrr.value = edit;
|
||||
editTrrId.value = id;
|
||||
}
|
||||
drawerAddTrr.value = true;
|
||||
editTrr.value = edit;
|
||||
editTrrId.value = id;
|
||||
};
|
||||
|
||||
// Delete handlers (expects routes: person.email.delete, person.trr.delete)
|
||||
const deleteEmail = async (emailId, label = '') => {
|
||||
if (!emailId) return;
|
||||
openConfirm('email', emailId, label || 'email');
|
||||
}
|
||||
const deleteEmail = async (emailId, label = "") => {
|
||||
if (!emailId) return;
|
||||
openConfirm("email", emailId, label || "email");
|
||||
};
|
||||
|
||||
const deleteTrr = async (trrId, label = '') => {
|
||||
if (!trrId) return;
|
||||
openConfirm('trr', trrId, label || 'TRR');
|
||||
}
|
||||
const deleteTrr = async (trrId, label = "") => {
|
||||
if (!trrId) return;
|
||||
openConfirm("trr", trrId, label || "TRR");
|
||||
};
|
||||
|
||||
const onConfirmDelete = async () => {
|
||||
const { type, id } = confirm.value;
|
||||
try {
|
||||
if (type === 'email') {
|
||||
await axios.delete(route('person.email.delete', { person: props.person, email_id: id }));
|
||||
const list = props.person.emails || [];
|
||||
const idx = list.findIndex(e => e.id === id);
|
||||
if (idx !== -1) list.splice(idx, 1);
|
||||
} else if (type === 'trr') {
|
||||
await axios.delete(route('person.trr.delete', { person: props.person, trr_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);
|
||||
} else if (type === 'address') {
|
||||
await axios.delete(route('person.address.delete', { person: props.person, address_id: id }));
|
||||
const list = props.person.addresses || [];
|
||||
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();
|
||||
const { type, id } = confirm.value;
|
||||
try {
|
||||
if (type === "email") {
|
||||
await axios.delete(
|
||||
route("person.email.delete", { person: props.person, email_id: id })
|
||||
);
|
||||
const list = props.person.emails || [];
|
||||
const idx = list.findIndex((e) => e.id === id);
|
||||
if (idx !== -1) list.splice(idx, 1);
|
||||
} else if (type === "trr") {
|
||||
await axios.delete(
|
||||
route("person.trr.delete", { person: props.person, trr_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);
|
||||
} else if (type === "address") {
|
||||
await axios.delete(
|
||||
route("person.address.delete", { person: props.person, address_id: id })
|
||||
);
|
||||
const list = props.person.addresses || [];
|
||||
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
|
||||
const getEmails = (p) => Array.isArray(p?.emails) ? p.emails : []
|
||||
const getEmails = (p) => (Array.isArray(p?.emails) ? p.emails : []);
|
||||
const getTRRs = (p) => {
|
||||
if (Array.isArray(p?.trrs)) return p.trrs
|
||||
if (Array.isArray(p?.bank_accounts)) return p.bank_accounts
|
||||
if (Array.isArray(p?.accounts)) return p.accounts
|
||||
if (Array.isArray(p?.bankAccounts)) return p.bankAccounts
|
||||
return []
|
||||
}
|
||||
|
||||
if (Array.isArray(p?.trrs)) return p.trrs;
|
||||
if (Array.isArray(p?.bank_accounts)) return p.bank_accounts;
|
||||
if (Array.isArray(p?.accounts)) return p.accounts;
|
||||
if (Array.isArray(p?.bankAccounts)) return p.bankAccounts;
|
||||
return [];
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CusTabs :selected-color="tabColor">
|
||||
<CusTab name="person" title="Oseba">
|
||||
<div class="flex justify-end mb-2">
|
||||
<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>
|
||||
</span>
|
||||
<CusTabs :selected-color="tabColor">
|
||||
<CusTab name="person" title="Oseba">
|
||||
<div class="flex justify-end mb-2">
|
||||
<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>
|
||||
</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 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 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 @click="openConfirm('address', address.id, address.address)">
|
||||
<TrashBinIcon size="md" css="text-red-600 hover:text-red-700" />
|
||||
</button>
|
||||
</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>
|
||||
<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
|
||||
}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CusTab>
|
||||
<CusTab name="phones" title="Telefonske">
|
||||
<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>
|
||||
</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 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>
|
||||
</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 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 @click="openConfirm('address', address.id, address.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">
|
||||
{{ (address.post_code && address.city) ? `${address.address}, ${address.post_code} ${address.city}` : address.address }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm md:text-base leading-7 text-gray-900">{{ phone.nu }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</CusTab>
|
||||
<CusTab name="emails" title="Email">
|
||||
<div class="flex justify-end mb-2">
|
||||
<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>
|
||||
</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>
|
||||
</CusTab>
|
||||
<CusTab name="phones" title="Telefonske">
|
||||
<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>
|
||||
<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>
|
||||
<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 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>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm md:text-base leading-7 text-gray-900">{{ phone.nu }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</CusTab>
|
||||
<CusTab name="emails" title="Email">
|
||||
<div class="flex justify-end mb-2">
|
||||
<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>
|
||||
</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>
|
||||
<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"
|
||||
/>
|
||||
<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>
|
||||
</CusTabs>
|
||||
<PersonUpdateForm
|
||||
:show="drawerUpdatePerson"
|
||||
@close="drawerUpdatePerson = false"
|
||||
:person="person"
|
||||
/>
|
||||
|
||||
<AddressCreateForm
|
||||
:show="drawerAddAddress"
|
||||
@close="drawerAddAddress = false"
|
||||
:person="person"
|
||||
:types="types.address_types"
|
||||
:id="editAddressId"
|
||||
:edit="editAddress"
|
||||
/>
|
||||
<AddressUpdateForm
|
||||
:show="drawerAddAddress && editAddress"
|
||||
@close="drawerAddAddress = false"
|
||||
:person="person"
|
||||
:types="types.address_types"
|
||||
:id="editAddressId"
|
||||
/>
|
||||
<AddressCreateForm
|
||||
:show="drawerAddAddress"
|
||||
@close="drawerAddAddress = false"
|
||||
:person="person"
|
||||
:types="types.address_types"
|
||||
:id="editAddressId"
|
||||
:edit="editAddress"
|
||||
/>
|
||||
<AddressUpdateForm
|
||||
:show="drawerAddAddress && editAddress"
|
||||
@close="drawerAddAddress = false"
|
||||
:person="person"
|
||||
:types="types.address_types"
|
||||
:id="editAddressId"
|
||||
/>
|
||||
|
||||
<PhoneCreateForm
|
||||
:show="drawerAddPhone"
|
||||
@close="drawerAddPhone = false"
|
||||
:person="person"
|
||||
:types="types.phone_types"
|
||||
:id="editPhoneId"
|
||||
:edit="editPhone"
|
||||
/>
|
||||
<!-- Email dialogs -->
|
||||
<EmailCreateForm
|
||||
:show="drawerAddEmail && !editEmail"
|
||||
@close="drawerAddEmail = false"
|
||||
:person="person"
|
||||
:types="types.email_types ?? []"
|
||||
:is-client-context="!!person?.client"
|
||||
/>
|
||||
<EmailUpdateForm
|
||||
:show="drawerAddEmail && editEmail"
|
||||
@close="drawerAddEmail = false"
|
||||
:person="person"
|
||||
:types="types.email_types ?? []"
|
||||
:id="editEmailId"
|
||||
:is-client-context="!!person?.client"
|
||||
/>
|
||||
<PhoneCreateForm
|
||||
:show="drawerAddPhone"
|
||||
@close="drawerAddPhone = false"
|
||||
:person="person"
|
||||
:types="types.phone_types"
|
||||
:id="editPhoneId"
|
||||
:edit="editPhone"
|
||||
/>
|
||||
<!-- Email dialogs -->
|
||||
<EmailCreateForm
|
||||
:show="drawerAddEmail && !editEmail"
|
||||
@close="drawerAddEmail = false"
|
||||
:person="person"
|
||||
:types="types.email_types ?? []"
|
||||
:is-client-context="!!person?.client"
|
||||
/>
|
||||
<EmailUpdateForm
|
||||
:show="drawerAddEmail && editEmail"
|
||||
@close="drawerAddEmail = false"
|
||||
:person="person"
|
||||
:types="types.email_types ?? []"
|
||||
:id="editEmailId"
|
||||
:is-client-context="!!person?.client"
|
||||
/>
|
||||
|
||||
<!-- TRR dialogs -->
|
||||
<TrrCreateForm
|
||||
:show="drawerAddTrr && !editTrr"
|
||||
@close="drawerAddTrr = false"
|
||||
:person="person"
|
||||
:types="types.trr_types ?? []"
|
||||
:banks="types.banks ?? []"
|
||||
:currencies="types.currencies ?? ['EUR']"
|
||||
/>
|
||||
<TrrUpdateForm
|
||||
:show="drawerAddTrr && editTrr"
|
||||
@close="drawerAddTrr = false"
|
||||
:person="person"
|
||||
:types="types.trr_types ?? []"
|
||||
:banks="types.banks ?? []"
|
||||
:currencies="types.currencies ?? ['EUR']"
|
||||
: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"
|
||||
/>
|
||||
|
||||
</template>
|
||||
<!-- TRR dialogs -->
|
||||
<TrrCreateForm
|
||||
:show="drawerAddTrr && !editTrr"
|
||||
@close="drawerAddTrr = false"
|
||||
:person="person"
|
||||
:types="types.trr_types ?? []"
|
||||
:banks="types.banks ?? []"
|
||||
:currencies="types.currencies ?? ['EUR']"
|
||||
/>
|
||||
<TrrUpdateForm
|
||||
:show="drawerAddTrr && editTrr"
|
||||
@close="drawerAddTrr = false"
|
||||
:person="person"
|
||||
:types="types.trr_types ?? []"
|
||||
:banks="types.banks ?? []"
|
||||
:currencies="types.currencies ?? ['EUR']"
|
||||
: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"
|
||||
/>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -153,9 +153,7 @@ function safeCaseHref(uuid, segment = null) {
|
|||
|
||||
<template>
|
||||
<AppLayout title="Nadzorna plošča">
|
||||
<template #header>
|
||||
<h2 class="font-semibold text-xl text-gray-800 leading-tight">Nadzorna plošča</h2>
|
||||
</template>
|
||||
<template #header> </template>
|
||||
|
||||
<div class="max-w-7xl mx-auto space-y-10 py-6">
|
||||
<!-- KPI Cards with trends -->
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@ const filteredTemplates = computed(() => {
|
|||
if (!cuuid) {
|
||||
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);
|
||||
|
|
@ -232,19 +232,7 @@ async function startImport() {
|
|||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="flex flex-wrap 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>
|
||||
<div class="flex flex-wrap justify-end gap-3 pt-2">
|
||||
<button
|
||||
type="button"
|
||||
@click="
|
||||
|
|
@ -258,6 +246,18 @@ async function startImport() {
|
|||
>
|
||||
Počisti
|
||||
</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 class="text-xs text-gray-400 pt-4 border-t">
|
||||
|
|
|
|||
|
|
@ -3,6 +3,16 @@ import AppLayout from "@/Layouts/AppLayout.vue";
|
|||
import { Link, router } from "@inertiajs/vue3";
|
||||
import { ref } from "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({
|
||||
imports: Object,
|
||||
|
|
@ -11,6 +21,7 @@ const props = defineProps({
|
|||
const deletingId = ref(null);
|
||||
const confirming = ref(false);
|
||||
const errorMsg = ref(null);
|
||||
const search = ref(new URLSearchParams(window.location.search).get("search") || "");
|
||||
|
||||
function canDelete(status) {
|
||||
return !["completed", "processing"].includes(status);
|
||||
|
|
@ -47,6 +58,28 @@ function statusBadge(status) {
|
|||
};
|
||||
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>
|
||||
|
||||
<template>
|
||||
|
|
@ -54,89 +87,116 @@ function statusBadge(status) {
|
|||
<template #header>
|
||||
<div class="flex items-center justify-between">
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<div class="py-6">
|
||||
<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="overflow-x-auto">
|
||||
<table class="min-w-full text-sm">
|
||||
<thead>
|
||||
<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 class="flex flex-col gap-3 bg-white shadow sm:rounded-lg p-4">
|
||||
<div class="flex justify-end">
|
||||
<Link
|
||||
:href="route('imports.create')"
|
||||
class="px-3 py-2 rounded bg-blue-600 text-white text-sm"
|
||||
>Novi uvoz</Link
|
||||
>
|
||||
</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">
|
||||
<div>
|
||||
Prikaz {{ imports.meta.from }}–{{ imports.meta.to }} od
|
||||
{{ imports.meta.total }}
|
||||
</div>
|
||||
<div class="space-x-2">
|
||||
<Link
|
||||
v-if="imports.links.prev"
|
||||
:href="imports.links.prev"
|
||||
class="px-2 py-1 border rounded"
|
||||
>Nazaj</Link
|
||||
>
|
||||
<Link
|
||||
v-if="imports.links.next"
|
||||
:href="imports.links.next"
|
||||
class="px-2 py-1 border rounded"
|
||||
>Naprej</Link
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Status badge -->
|
||||
<template #cell-status="{ row }">
|
||||
<span :class="['px-2 py-0.5 rounded text-xs', statusBadge(row.status)]">
|
||||
{{ row.status }}
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<!-- Client name -->
|
||||
<template #cell-client="{ row }">
|
||||
{{ row.client?.person?.full_name ?? "—" }}
|
||||
</template>
|
||||
|
||||
<!-- Template name -->
|
||||
<template #cell-template="{ row }">
|
||||
{{ row.template?.name ?? "—" }}
|
||||
</template>
|
||||
|
||||
<!-- 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
|
||||
: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
|
||||
:show="confirming"
|
||||
@close="
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ function formatCurrencyEUR(value) {
|
|||
|
||||
<template>
|
||||
<AppLayout title="Segmenti">
|
||||
<template #header>Segmenti</template>
|
||||
<template #header></template>
|
||||
<div class="pt-12">
|
||||
<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">
|
||||
|
|
@ -82,7 +82,7 @@ function formatCurrencyEUR(value) {
|
|||
</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-600 min-h-[1.25rem]">
|
||||
{{ s.description || "—" }}
|
||||
{{ s.description || "" }}
|
||||
</p>
|
||||
<div class="mt-4 flex items-center justify-between">
|
||||
<div class="text-sm text-gray-500">Vsota stanj</div>
|
||||
|
|
@ -90,13 +90,6 @@ function formatCurrencyEUR(value) {
|
|||
{{ formatCurrencyEUR(s.total_balance) }}
|
||||
</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 v-else class="text-gray-500">Ni aktivnih segmentov.</div>
|
||||
|
|
|
|||
|
|
@ -1,35 +1,27 @@
|
|||
<script setup>
|
||||
import AppLayout from "@/Layouts/AppLayout.vue";
|
||||
import { Link, router } from "@inertiajs/vue3";
|
||||
import { debounce } from "lodash";
|
||||
import { ref, watch, onUnmounted } from "vue";
|
||||
import { Link } from "@inertiajs/vue3";
|
||||
import { ref } from "vue";
|
||||
import DataTableServer from "@/Components/DataTable/DataTableServer.vue";
|
||||
|
||||
const props = defineProps({
|
||||
segment: Object,
|
||||
contracts: Object, // LengthAwarePaginator payload from Laravel
|
||||
});
|
||||
|
||||
const search = ref("");
|
||||
const applySearch = debounce((v) => {
|
||||
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);
|
||||
// Initialize search from current URL so input reflects server filter
|
||||
const search = ref(new URLSearchParams(window.location.search).get("search") || "");
|
||||
|
||||
watch(search, (v) => applySearch(v));
|
||||
onUnmounted(() => applySearch.cancel && applySearch.cancel());
|
||||
// Column definitions for the server-driven table
|
||||
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) {
|
||||
if (!value) {
|
||||
|
|
@ -56,100 +48,66 @@ function formatCurrency(value) {
|
|||
|
||||
<template>
|
||||
<AppLayout :title="`Segment: ${segment?.name || ''}`">
|
||||
<template #header>
|
||||
<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>
|
||||
<template #header> </template>
|
||||
<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="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 -->
|
||||
<div
|
||||
class="flex items-center justify-between mt-4 text-sm text-gray-700"
|
||||
v-if="contracts.total > 0"
|
||||
<DataTableServer
|
||||
:columns="columns"
|
||||
:rows="contracts?.data || []"
|
||||
: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>
|
||||
Prikazano {{ contracts.from || 0 }}–{{ contracts.to || 0 }} od
|
||||
{{ contracts.total }}
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<!-- Primer (client_case) cell with link when available -->
|
||||
<template #cell-client_case="{ row }">
|
||||
<Link
|
||||
v-if="contracts.prev_page_url"
|
||||
:href="contracts.prev_page_url"
|
||||
class="px-2 py-1 border rounded hover:bg-gray-50"
|
||||
>Prejšnja</Link
|
||||
v-if="row.client_case?.uuid"
|
||||
:href="
|
||||
route('clientCase.show', {
|
||||
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>
|
||||
<Link
|
||||
v-if="contracts.next_page_url"
|
||||
:href="contracts.next_page_url"
|
||||
class="px-2 py-1 border rounded hover:bg-gray-50"
|
||||
>Naslednja</Link
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
{{ row.client_case?.person?.full_name || "Primer stranke" }}
|
||||
</Link>
|
||||
<span v-else>{{ row.client_case?.person?.full_name || "-" }}</span>
|
||||
</template>
|
||||
|
||||
<!-- Stranka (client) name -->
|
||||
<template #cell-client="{ row }">
|
||||
{{ row.client?.person?.full_name || "-" }}
|
||||
</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>
|
||||
</AppLayout>
|
||||
|
|
|
|||
|
|
@ -1,20 +1,22 @@
|
|||
<script setup>
|
||||
import { FwbTable, FwbTableBody, FwbTableHead, FwbTableHeadCell, FwbTableCell, FwbTableRow } from 'flowbite-vue';
|
||||
import { EditIcon, TrashBinIcon } from '@/Utilities/Icons';
|
||||
import DialogModal from '@/Components/DialogModal.vue';
|
||||
import ConfirmationModal from '@/Components/ConfirmationModal.vue';
|
||||
import { computed, onMounted, ref, watch } from 'vue';
|
||||
import { router, useForm } from '@inertiajs/vue3';
|
||||
import InputLabel from '@/Components/InputLabel.vue';
|
||||
import TextInput from '@/Components/TextInput.vue';
|
||||
import Multiselect from 'vue-multiselect';
|
||||
import PrimaryButton from '@/Components/PrimaryButton.vue';
|
||||
import ActionMessage from '@/Components/ActionMessage.vue';
|
||||
// flowbite-vue table imports removed; using DataTableClient
|
||||
import { EditIcon, TrashBinIcon } from "@/Utilities/Icons";
|
||||
import DialogModal from "@/Components/DialogModal.vue";
|
||||
import ConfirmationModal from "@/Components/ConfirmationModal.vue";
|
||||
import { computed, onMounted, ref } from "vue";
|
||||
import { router, useForm } from "@inertiajs/vue3";
|
||||
import InputLabel from "@/Components/InputLabel.vue";
|
||||
import TextInput from "@/Components/TextInput.vue";
|
||||
import Multiselect from "vue-multiselect";
|
||||
import PrimaryButton from "@/Components/PrimaryButton.vue";
|
||||
import ActionMessage from "@/Components/ActionMessage.vue";
|
||||
import DataTableClient from "@/Components/DataTable/DataTableClient.vue";
|
||||
import InlineColorPicker from "@/Components/InlineColorPicker.vue";
|
||||
|
||||
const props = defineProps({
|
||||
actions: Array,
|
||||
decisions: Array,
|
||||
segments: Array
|
||||
actions: Array,
|
||||
decisions: Array,
|
||||
segments: Array,
|
||||
});
|
||||
|
||||
const drawerEdit = ref(false);
|
||||
|
|
@ -22,331 +24,350 @@ const drawerCreate = ref(false);
|
|||
const showDelete = ref(false);
|
||||
const toDelete = ref(null);
|
||||
|
||||
const search = ref('');
|
||||
const search = ref("");
|
||||
const selectedSegment = ref(null);
|
||||
|
||||
const selectOptions = ref([]);
|
||||
const segmentOptions = ref([]);
|
||||
|
||||
// DataTable state
|
||||
const sort = ref({ key: null, direction: null });
|
||||
const page = ref(1);
|
||||
const pageSize = ref(25);
|
||||
const columns = [
|
||||
{ key: "id", label: "#", sortable: true, class: "w-16" },
|
||||
{ key: "name", label: "Name", sortable: true },
|
||||
{ key: "color_tag", label: "Color tag", sortable: false },
|
||||
{ key: "decisions", label: "Decisions", sortable: false, class: "w-32" },
|
||||
];
|
||||
|
||||
const form = useForm({
|
||||
id: 0,
|
||||
name: '',
|
||||
color_tag: '',
|
||||
segment_id: null,
|
||||
decisions: []
|
||||
id: 0,
|
||||
name: "",
|
||||
color_tag: "",
|
||||
segment_id: null,
|
||||
decisions: [],
|
||||
});
|
||||
|
||||
const createForm = useForm({
|
||||
name: '',
|
||||
color_tag: '',
|
||||
segment_id: null,
|
||||
decisions: []
|
||||
name: "",
|
||||
color_tag: "",
|
||||
segment_id: null,
|
||||
decisions: [],
|
||||
});
|
||||
|
||||
const openEditDrawer = (item) => {
|
||||
form.decisions = [];
|
||||
form.id = item.id;
|
||||
form.name = item.name;
|
||||
form.color_tag = item.color_tag;
|
||||
form.segment_id = item.segment ? item.segment.id : null;
|
||||
drawerEdit.value = true;
|
||||
form.decisions = [];
|
||||
form.id = item.id;
|
||||
form.name = item.name;
|
||||
form.color_tag = item.color_tag;
|
||||
form.segment_id = item.segment ? item.segment.id : null;
|
||||
drawerEdit.value = true;
|
||||
|
||||
item.decisions.forEach((d) => {
|
||||
form.decisions.push({
|
||||
name: d.name,
|
||||
id: d.id
|
||||
});
|
||||
})
|
||||
}
|
||||
item.decisions.forEach((d) => {
|
||||
form.decisions.push({
|
||||
name: d.name,
|
||||
id: d.id,
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const closeEditDrawer = () => {
|
||||
drawerEdit.value = false;
|
||||
form.reset();
|
||||
}
|
||||
drawerEdit.value = false;
|
||||
form.reset();
|
||||
};
|
||||
|
||||
const openCreateDrawer = () => {
|
||||
createForm.reset();
|
||||
drawerCreate.value = true;
|
||||
}
|
||||
createForm.reset();
|
||||
drawerCreate.value = true;
|
||||
};
|
||||
|
||||
const closeCreateDrawer = () => {
|
||||
drawerCreate.value = false;
|
||||
createForm.reset();
|
||||
}
|
||||
drawerCreate.value = false;
|
||||
createForm.reset();
|
||||
};
|
||||
|
||||
const onColorPickerChange = () => {
|
||||
console.log(form.color_tag);
|
||||
}
|
||||
// removed unused color picker change handler; InlineColorPicker handles updates
|
||||
|
||||
onMounted(() => {
|
||||
props.decisions.forEach((d) => {
|
||||
selectOptions.value.push({
|
||||
name: d.name,
|
||||
id: d.id
|
||||
});
|
||||
|
||||
props.decisions.forEach((d) => {
|
||||
selectOptions.value.push({
|
||||
name: d.name,
|
||||
id: d.id,
|
||||
});
|
||||
props.segments.forEach((s) => {
|
||||
segmentOptions.value.push({
|
||||
name: s.name,
|
||||
id: s.id
|
||||
})
|
||||
})
|
||||
|
||||
});
|
||||
props.segments.forEach((s) => {
|
||||
segmentOptions.value.push({
|
||||
name: s.name,
|
||||
id: s.id,
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
const filtered = computed(() => {
|
||||
const term = search.value?.toLowerCase() ?? '';
|
||||
return (props.actions || []).filter(a => {
|
||||
const matchesSearch = !term || a.name?.toLowerCase().includes(term) || a.color_tag?.toLowerCase().includes(term);
|
||||
const matchesSegment = !selectedSegment.value || a.segment?.id === selectedSegment.value;
|
||||
return matchesSearch && matchesSegment;
|
||||
});
|
||||
const term = search.value?.toLowerCase() ?? "";
|
||||
return (props.actions || []).filter((a) => {
|
||||
const matchesSearch =
|
||||
!term ||
|
||||
a.name?.toLowerCase().includes(term) ||
|
||||
a.color_tag?.toLowerCase().includes(term);
|
||||
const matchesSegment =
|
||||
!selectedSegment.value || a.segment?.id === selectedSegment.value;
|
||||
return matchesSearch && matchesSegment;
|
||||
});
|
||||
});
|
||||
|
||||
const update = () => {
|
||||
form.put(route('settings.actions.update', { id: form.id }), {
|
||||
onSuccess: () => {
|
||||
closeEditDrawer();
|
||||
},
|
||||
});
|
||||
form.put(route("settings.actions.update", { id: form.id }), {
|
||||
onSuccess: () => {
|
||||
closeEditDrawer();
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const store = () => {
|
||||
createForm.post(route('settings.actions.store'), {
|
||||
onSuccess: () => {
|
||||
closeCreateDrawer();
|
||||
},
|
||||
});
|
||||
createForm.post(route("settings.actions.store"), {
|
||||
onSuccess: () => {
|
||||
closeCreateDrawer();
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const confirmDelete = (action) => {
|
||||
toDelete.value = action;
|
||||
showDelete.value = true;
|
||||
toDelete.value = action;
|
||||
showDelete.value = true;
|
||||
};
|
||||
|
||||
const cancelDelete = () => {
|
||||
toDelete.value = null;
|
||||
showDelete.value = false;
|
||||
toDelete.value = null;
|
||||
showDelete.value = false;
|
||||
};
|
||||
|
||||
const destroyAction = () => {
|
||||
if (!toDelete.value) return;
|
||||
router.delete(route('settings.actions.destroy', { id: toDelete.value.id }), {
|
||||
preserveScroll: true,
|
||||
onFinish: () => cancelDelete(),
|
||||
});
|
||||
if (!toDelete.value) return;
|
||||
router.delete(route("settings.actions.destroy", { id: toDelete.value.id }), {
|
||||
preserveScroll: true,
|
||||
onFinish: () => cancelDelete(),
|
||||
});
|
||||
};
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<div class="p-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div class="flex gap-3 items-center w-full sm:w-auto">
|
||||
<TextInput v-model="search" placeholder="Search actions..." class="w-full sm:w-64" />
|
||||
<div class="w-64">
|
||||
<Multiselect
|
||||
v-model="selectedSegment"
|
||||
:options="segmentOptions.map(o=>o.id)"
|
||||
:multiple="false"
|
||||
:searchable="true"
|
||||
placeholder="Filter by segment"
|
||||
:append-to-body="true"
|
||||
:custom-label="(opt) => (segmentOptions.find(o=>o.id===opt)?.name || '')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<PrimaryButton @click="openCreateDrawer">+ Dodaj akcijo</PrimaryButton>
|
||||
<div class="p-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div class="flex gap-3 items-center w-full sm:w-auto">
|
||||
<TextInput
|
||||
v-model="search"
|
||||
placeholder="Search actions..."
|
||||
class="w-full sm:w-64"
|
||||
/>
|
||||
<div class="w-64">
|
||||
<Multiselect
|
||||
v-model="selectedSegment"
|
||||
:options="segmentOptions.map((o) => o.id)"
|
||||
:multiple="false"
|
||||
:searchable="true"
|
||||
placeholder="Filter by segment"
|
||||
:append-to-body="true"
|
||||
:custom-label="(opt) => segmentOptions.find((o) => o.id === opt)?.name || ''"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<PrimaryButton @click="openCreateDrawer">+ Dodaj akcijo</PrimaryButton>
|
||||
</div>
|
||||
<div class="px-4 pb-4">
|
||||
<DataTableClient
|
||||
:columns="columns"
|
||||
:rows="filtered"
|
||||
:sort="sort"
|
||||
:search="''"
|
||||
:page="page"
|
||||
:pageSize="pageSize"
|
||||
:showToolbar="false"
|
||||
@update:sort="(v) => (sort = v)"
|
||||
@update:page="(v) => (page = v)"
|
||||
@update:pageSize="(v) => (pageSize = v)"
|
||||
>
|
||||
<template #cell-color_tag="{ row }">
|
||||
<div class="flex items-center gap-2">
|
||||
<span
|
||||
v-if="row.color_tag"
|
||||
class="inline-block h-4 w-4 rounded"
|
||||
:style="{ backgroundColor: row.color_tag }"
|
||||
></span>
|
||||
<span>{{ row.color_tag || "—" }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #cell-decisions="{ row }">
|
||||
{{ row.decisions?.length ?? 0 }}
|
||||
</template>
|
||||
<template #actions="{ row }">
|
||||
<button class="px-2" @click="openEditDrawer(row)">
|
||||
<EditIcon size="md" css="text-gray-500" />
|
||||
</button>
|
||||
<button
|
||||
class="px-2 disabled:opacity-40"
|
||||
:disabled="(row.activities_count ?? 0) > 0"
|
||||
@click="confirmDelete(row)"
|
||||
>
|
||||
<TrashBinIcon size="md" css="text-red-500" />
|
||||
</button>
|
||||
</template>
|
||||
</DataTableClient>
|
||||
</div>
|
||||
|
||||
<fwb-table>
|
||||
<fwb-table-head>
|
||||
<fwb-table-head-cell>#</fwb-table-head-cell>
|
||||
<fwb-table-head-cell>Name</fwb-table-head-cell>
|
||||
<fwb-table-head-cell>Color tag</fwb-table-head-cell>
|
||||
<fwb-table-head-cell>Decisions</fwb-table-head-cell>
|
||||
<fwb-table-head-cell>
|
||||
<span class="sr-only">Edit</span>
|
||||
</fwb-table-head-cell>
|
||||
</fwb-table-head>
|
||||
<fwb-table-body>
|
||||
<fwb-table-row v-for="act in filtered" :key="act.id">
|
||||
<fwb-table-cell>{{ act.id }}</fwb-table-cell>
|
||||
<fwb-table-cell>{{ act.name }}</fwb-table-cell>
|
||||
<fwb-table-cell>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="inline-block h-4 w-4 rounded" :style="{ backgroundColor: act.color_tag }"></span>
|
||||
<span>{{ act.color_tag }}</span>
|
||||
</div>
|
||||
</fwb-table-cell>
|
||||
<fwb-table-cell>{{ act.decisions.length }}</fwb-table-cell>
|
||||
<fwb-table-cell>
|
||||
<button class="px-2" @click="openEditDrawer(act)"><EditIcon size="md" css="text-gray-500" /></button>
|
||||
<button class="px-2 disabled:opacity-40" :disabled="(act.activities_count ?? 0) > 0" @click="confirmDelete(act)"><TrashBinIcon size="md" css="text-red-500" /></button>
|
||||
</fwb-table-cell>
|
||||
</fwb-table-row>
|
||||
</fwb-table-body>
|
||||
</fwb-table>
|
||||
<DialogModal :show="drawerEdit" @close="closeEditDrawer">
|
||||
<template #title>
|
||||
<span>Spremeni akcijo</span>
|
||||
</template>
|
||||
<template #content>
|
||||
<form @submit.prevent="update">
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="name" value="Ime" />
|
||||
<TextInput
|
||||
id="name"
|
||||
ref="nameInput"
|
||||
v-model="form.name"
|
||||
type="text"
|
||||
class="mt-1 block w-full"
|
||||
autocomplete="name"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="colorTag" value="Barva" />
|
||||
<div class="mt-1">
|
||||
<InlineColorPicker v-model="form.color_tag" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogModal :show="drawerEdit" @close="closeEditDrawer">
|
||||
<template #title>
|
||||
<span>Spremeni akcijo</span>
|
||||
</template>
|
||||
<template #content>
|
||||
<form @submit.prevent="update">
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="name" value="Ime"/>
|
||||
<TextInput
|
||||
id="name"
|
||||
ref="nameInput"
|
||||
v-model="form.name"
|
||||
type="text"
|
||||
class="mt-1 block w-full"
|
||||
autocomplete="name"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="colorTag" value="Barva"/>
|
||||
<div class="mt-1 w-full border flex p-1">
|
||||
<TextInput
|
||||
id="colorTag"
|
||||
ref="colorTagInput"
|
||||
v-model="form.color_tag"
|
||||
@change="onColorPickerChange"
|
||||
type="color"
|
||||
class="mr-2"
|
||||
autocomplete="color-tag"
|
||||
/>
|
||||
<span>{{ form.color_tag }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="segmentEdit" value="Segment"/>
|
||||
<multiselect
|
||||
id="segmentEdit"
|
||||
v-model="form.segment_id"
|
||||
:options="segmentOptions.map(s=>s.id)"
|
||||
:multiple="false"
|
||||
:searchable="true"
|
||||
:taggable="false"
|
||||
placeholder="Izberi segment"
|
||||
:append-to-body="true"
|
||||
:custom-label="(opt) => (segmentOptions.find(s=>s.id===opt)?.name || '')"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="segmentEdit" value="Segment" />
|
||||
<multiselect
|
||||
id="segmentEdit"
|
||||
v-model="form.segment_id"
|
||||
:options="segmentOptions.map((s) => s.id)"
|
||||
:multiple="false"
|
||||
:searchable="true"
|
||||
:taggable="false"
|
||||
placeholder="Izberi segment"
|
||||
:append-to-body="true"
|
||||
:custom-label="(opt) => segmentOptions.find((s) => s.id === opt)?.name || ''"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="decisions" value="Odločitve"/>
|
||||
<multiselect
|
||||
id="decisions"
|
||||
ref="decisionsSelect"
|
||||
v-model="form.decisions"
|
||||
:options="selectOptions"
|
||||
:multiple="true"
|
||||
track-by="id"
|
||||
:taggable="true"
|
||||
placeholder="Dodaj odločitev"
|
||||
:append-to-body="true"
|
||||
label="name"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="decisions" value="Odločitve" />
|
||||
<multiselect
|
||||
id="decisions"
|
||||
ref="decisionsSelect"
|
||||
v-model="form.decisions"
|
||||
:options="selectOptions"
|
||||
:multiple="true"
|
||||
track-by="id"
|
||||
:taggable="true"
|
||||
placeholder="Dodaj odločitev"
|
||||
:append-to-body="true"
|
||||
label="name"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end mt-4">
|
||||
<ActionMessage :on="form.recentlySuccessful" class="me-3">
|
||||
Shranjuje.
|
||||
</ActionMessage>
|
||||
<div class="flex justify-end mt-4">
|
||||
<ActionMessage :on="form.recentlySuccessful" class="me-3">
|
||||
Shranjuje.
|
||||
</ActionMessage>
|
||||
|
||||
<PrimaryButton :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
|
||||
Shrani
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
</DialogModal>
|
||||
<PrimaryButton
|
||||
:class="{ 'opacity-25': form.processing }"
|
||||
:disabled="form.processing"
|
||||
>
|
||||
Shrani
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
</DialogModal>
|
||||
|
||||
<DialogModal :show="drawerCreate" @close="closeCreateDrawer">
|
||||
<template #title>
|
||||
<span>Dodaj akcijo</span>
|
||||
</template>
|
||||
<template #content>
|
||||
<form @submit.prevent="store">
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="nameCreate" value="Ime"/>
|
||||
<TextInput
|
||||
id="nameCreate"
|
||||
v-model="createForm.name"
|
||||
type="text"
|
||||
class="mt-1 block w-full"
|
||||
autocomplete="name"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="colorTagCreate" value="Barva"/>
|
||||
<div class="mt-1 w-full border flex p-1">
|
||||
<TextInput
|
||||
id="colorTagCreate"
|
||||
v-model="createForm.color_tag"
|
||||
type="color"
|
||||
class="mr-2"
|
||||
autocomplete="color-tag"
|
||||
/>
|
||||
<span>{{ createForm.color_tag }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="segmentCreate" value="Segment"/>
|
||||
<multiselect
|
||||
id="segmentCreate"
|
||||
v-model="createForm.segment_id"
|
||||
:options="segmentOptions.map(s=>s.id)"
|
||||
:multiple="false"
|
||||
:searchable="true"
|
||||
:taggable="false"
|
||||
placeholder="Izberi segment"
|
||||
:append-to-body="true"
|
||||
:custom-label="(opt) => (segmentOptions.find(s=>s.id===opt)?.name || '')"
|
||||
/>
|
||||
</div>
|
||||
<DialogModal :show="drawerCreate" @close="closeCreateDrawer">
|
||||
<template #title>
|
||||
<span>Dodaj akcijo</span>
|
||||
</template>
|
||||
<template #content>
|
||||
<form @submit.prevent="store">
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="nameCreate" value="Ime" />
|
||||
<TextInput
|
||||
id="nameCreate"
|
||||
v-model="createForm.name"
|
||||
type="text"
|
||||
class="mt-1 block w-full"
|
||||
autocomplete="name"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="colorTagCreate" value="Barva" />
|
||||
<div class="mt-1">
|
||||
<InlineColorPicker v-model="createForm.color_tag" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="decisionsCreate" value="Odločitve"/>
|
||||
<multiselect
|
||||
id="decisionsCreate"
|
||||
v-model="createForm.decisions"
|
||||
:options="selectOptions"
|
||||
:multiple="true"
|
||||
track-by="id"
|
||||
:taggable="true"
|
||||
placeholder="Dodaj odločitev"
|
||||
:append-to-body="true"
|
||||
label="name"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="segmentCreate" value="Segment" />
|
||||
<multiselect
|
||||
id="segmentCreate"
|
||||
v-model="createForm.segment_id"
|
||||
:options="segmentOptions.map((s) => s.id)"
|
||||
:multiple="false"
|
||||
:searchable="true"
|
||||
:taggable="false"
|
||||
placeholder="Izberi segment"
|
||||
:append-to-body="true"
|
||||
:custom-label="(opt) => segmentOptions.find((s) => s.id === opt)?.name || ''"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end mt-4">
|
||||
<ActionMessage :on="createForm.recentlySuccessful" class="me-3">
|
||||
Shranjuje.
|
||||
</ActionMessage>
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="decisionsCreate" value="Odločitve" />
|
||||
<multiselect
|
||||
id="decisionsCreate"
|
||||
v-model="createForm.decisions"
|
||||
:options="selectOptions"
|
||||
:multiple="true"
|
||||
track-by="id"
|
||||
:taggable="true"
|
||||
placeholder="Dodaj odločitev"
|
||||
:append-to-body="true"
|
||||
label="name"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<PrimaryButton :class="{ 'opacity-25': createForm.processing }" :disabled="createForm.processing">
|
||||
Dodaj
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
</DialogModal>
|
||||
<div class="flex justify-end mt-4">
|
||||
<ActionMessage :on="createForm.recentlySuccessful" class="me-3">
|
||||
Shranjuje.
|
||||
</ActionMessage>
|
||||
|
||||
<ConfirmationModal :show="showDelete" @close="cancelDelete">
|
||||
<template #title>
|
||||
Delete action
|
||||
</template>
|
||||
<template #content>
|
||||
Are you sure you want to delete action "{{ toDelete?.name }}"? This cannot be undone.
|
||||
</template>
|
||||
<template #footer>
|
||||
<button @click="cancelDelete" class="px-4 py-2 rounded bg-gray-200 hover:bg-gray-300 me-2">Cancel</button>
|
||||
<PrimaryButton @click="destroyAction">Delete</PrimaryButton>
|
||||
</template>
|
||||
</ConfirmationModal>
|
||||
</template>
|
||||
<PrimaryButton
|
||||
:class="{ 'opacity-25': createForm.processing }"
|
||||
:disabled="createForm.processing"
|
||||
>
|
||||
Dodaj
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
</DialogModal>
|
||||
|
||||
<ConfirmationModal :show="showDelete" @close="cancelDelete">
|
||||
<template #title> Delete action </template>
|
||||
<template #content>
|
||||
Are you sure you want to delete action "{{ toDelete?.name }}"? This cannot be
|
||||
undone.
|
||||
</template>
|
||||
<template #footer>
|
||||
<button
|
||||
@click="cancelDelete"
|
||||
class="px-4 py-2 rounded bg-gray-200 hover:bg-gray-300 me-2"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<PrimaryButton @click="destroyAction">Delete</PrimaryButton>
|
||||
</template>
|
||||
</ConfirmationModal>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,20 +1,22 @@
|
|||
<script setup>
|
||||
import { FwbTable, FwbTableBody, FwbTableHead, FwbTableHeadCell, FwbTableCell, FwbTableRow } from 'flowbite-vue';
|
||||
import { EditIcon, TrashBinIcon } from '@/Utilities/Icons';
|
||||
import DialogModal from '@/Components/DialogModal.vue';
|
||||
import ConfirmationModal from '@/Components/ConfirmationModal.vue';
|
||||
import { computed, onMounted, ref } from 'vue';
|
||||
import { router, useForm } from '@inertiajs/vue3';
|
||||
import InputLabel from '@/Components/InputLabel.vue';
|
||||
import TextInput from '@/Components/TextInput.vue';
|
||||
import Multiselect from 'vue-multiselect';
|
||||
import PrimaryButton from '@/Components/PrimaryButton.vue';
|
||||
import ActionMessage from '@/Components/ActionMessage.vue';
|
||||
// flowbite-vue table imports removed; using DataTableClient
|
||||
import { EditIcon, TrashBinIcon } from "@/Utilities/Icons";
|
||||
import DialogModal from "@/Components/DialogModal.vue";
|
||||
import ConfirmationModal from "@/Components/ConfirmationModal.vue";
|
||||
import { computed, onMounted, ref } from "vue";
|
||||
import { router, useForm } from "@inertiajs/vue3";
|
||||
import InputLabel from "@/Components/InputLabel.vue";
|
||||
import TextInput from "@/Components/TextInput.vue";
|
||||
import Multiselect from "vue-multiselect";
|
||||
import PrimaryButton from "@/Components/PrimaryButton.vue";
|
||||
import ActionMessage from "@/Components/ActionMessage.vue";
|
||||
import DataTableClient from "@/Components/DataTable/DataTableClient.vue";
|
||||
import InlineColorPicker from "@/Components/InlineColorPicker.vue";
|
||||
|
||||
const props = defineProps({
|
||||
decisions: Array,
|
||||
actions: Array,
|
||||
emailTemplates: { type: Array, default: () => [] }
|
||||
decisions: Array,
|
||||
actions: Array,
|
||||
emailTemplates: { type: Array, default: () => [] },
|
||||
});
|
||||
|
||||
const drawerEdit = ref(false);
|
||||
|
|
@ -22,328 +24,403 @@ const drawerCreate = ref(false);
|
|||
const showDelete = ref(false);
|
||||
const toDelete = ref(null);
|
||||
|
||||
const search = ref('');
|
||||
const search = ref("");
|
||||
const selectedTemplateId = ref(null);
|
||||
const onlyAutoMail = ref(false);
|
||||
|
||||
const actionOptions = ref([]);
|
||||
|
||||
// DataTable state
|
||||
const sort = ref({ key: null, direction: null });
|
||||
const page = ref(1);
|
||||
const pageSize = ref(25);
|
||||
const columns = [
|
||||
{ key: "id", label: "#", sortable: true, class: "w-16" },
|
||||
{ key: "name", label: "Name", sortable: true },
|
||||
{ key: "color_tag", label: "Color tag", sortable: false },
|
||||
{ key: "belongs", label: "Belongs to actions", sortable: false, class: "w-40" },
|
||||
{ key: "auto_mail", label: "Auto mail", sortable: false, class: "w-56" },
|
||||
];
|
||||
|
||||
const form = useForm({
|
||||
id: 0,
|
||||
name: '',
|
||||
color_tag: '',
|
||||
actions: [],
|
||||
auto_mail: false,
|
||||
email_template_id: null,
|
||||
id: 0,
|
||||
name: "",
|
||||
color_tag: "",
|
||||
actions: [],
|
||||
auto_mail: false,
|
||||
email_template_id: null,
|
||||
});
|
||||
|
||||
const createForm = useForm({
|
||||
name: '',
|
||||
color_tag: '',
|
||||
actions: [],
|
||||
auto_mail: false,
|
||||
email_template_id: null,
|
||||
name: "",
|
||||
color_tag: "",
|
||||
actions: [],
|
||||
auto_mail: false,
|
||||
email_template_id: null,
|
||||
});
|
||||
|
||||
const openEditDrawer = (item) => {
|
||||
form.actions = [];
|
||||
form.id = item.id;
|
||||
form.name = item.name;
|
||||
form.color_tag = item.color_tag;
|
||||
form.auto_mail = !!item.auto_mail;
|
||||
form.email_template_id = item.email_template_id || null;
|
||||
drawerEdit.value = true;
|
||||
form.actions = [];
|
||||
form.id = item.id;
|
||||
form.name = item.name;
|
||||
form.color_tag = item.color_tag;
|
||||
form.auto_mail = !!item.auto_mail;
|
||||
form.email_template_id = item.email_template_id || null;
|
||||
drawerEdit.value = true;
|
||||
|
||||
item.actions.forEach((a) => {
|
||||
form.actions.push({
|
||||
name: a.name,
|
||||
id: a.id
|
||||
});
|
||||
})
|
||||
}
|
||||
item.actions.forEach((a) => {
|
||||
form.actions.push({
|
||||
name: a.name,
|
||||
id: a.id,
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const closeEditDrawer = () => {
|
||||
drawerEdit.value = false;
|
||||
form.reset();
|
||||
}
|
||||
drawerEdit.value = false;
|
||||
form.reset();
|
||||
};
|
||||
|
||||
const openCreateDrawer = () => {
|
||||
createForm.reset();
|
||||
drawerCreate.value = true;
|
||||
}
|
||||
createForm.reset();
|
||||
drawerCreate.value = true;
|
||||
};
|
||||
|
||||
const closeCreateDrawer = () => {
|
||||
drawerCreate.value = false;
|
||||
createForm.reset();
|
||||
}
|
||||
drawerCreate.value = false;
|
||||
createForm.reset();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
props.actions.forEach((a) => {
|
||||
actionOptions.value.push({
|
||||
name: a.name,
|
||||
id: a.id
|
||||
});
|
||||
props.actions.forEach((a) => {
|
||||
actionOptions.value.push({
|
||||
name: a.name,
|
||||
id: a.id,
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
const filtered = computed(() => {
|
||||
const term = search.value?.toLowerCase() ?? '';
|
||||
const tplId = selectedTemplateId.value ? Number(selectedTemplateId.value) : null;
|
||||
return (props.decisions || []).filter(d => {
|
||||
const matchesSearch = !term || d.name?.toLowerCase().includes(term) || d.color_tag?.toLowerCase().includes(term);
|
||||
const matchesAuto = !onlyAutoMail.value || !!d.auto_mail;
|
||||
const matchesTemplate = !tplId || Number(d.email_template_id || 0) === tplId;
|
||||
return matchesSearch && matchesAuto && matchesTemplate;
|
||||
});
|
||||
const term = search.value?.toLowerCase() ?? "";
|
||||
const tplId = selectedTemplateId.value ? Number(selectedTemplateId.value) : null;
|
||||
return (props.decisions || []).filter((d) => {
|
||||
const matchesSearch =
|
||||
!term ||
|
||||
d.name?.toLowerCase().includes(term) ||
|
||||
d.color_tag?.toLowerCase().includes(term);
|
||||
const matchesAuto = !onlyAutoMail.value || !!d.auto_mail;
|
||||
const matchesTemplate = !tplId || Number(d.email_template_id || 0) === tplId;
|
||||
return matchesSearch && matchesAuto && matchesTemplate;
|
||||
});
|
||||
});
|
||||
|
||||
const update = () => {
|
||||
form.put(route('settings.decisions.update', { id: form.id }), {
|
||||
onSuccess: () => {
|
||||
closeEditDrawer();
|
||||
},
|
||||
});
|
||||
form.put(route("settings.decisions.update", { id: form.id }), {
|
||||
onSuccess: () => {
|
||||
closeEditDrawer();
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const store = () => {
|
||||
createForm.post(route('settings.decisions.store'), {
|
||||
onSuccess: () => {
|
||||
closeCreateDrawer();
|
||||
},
|
||||
});
|
||||
createForm.post(route("settings.decisions.store"), {
|
||||
onSuccess: () => {
|
||||
closeCreateDrawer();
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const confirmDelete = (decision) => {
|
||||
toDelete.value = decision;
|
||||
showDelete.value = true;
|
||||
toDelete.value = decision;
|
||||
showDelete.value = true;
|
||||
};
|
||||
|
||||
const cancelDelete = () => {
|
||||
toDelete.value = null;
|
||||
showDelete.value = false;
|
||||
toDelete.value = null;
|
||||
showDelete.value = false;
|
||||
};
|
||||
|
||||
const destroyDecision = () => {
|
||||
if (!toDelete.value) return;
|
||||
router.delete(route('settings.decisions.destroy', { id: toDelete.value.id }), {
|
||||
preserveScroll: true,
|
||||
onFinish: () => cancelDelete(),
|
||||
});
|
||||
if (!toDelete.value) return;
|
||||
router.delete(route("settings.decisions.destroy", { id: toDelete.value.id }), {
|
||||
preserveScroll: true,
|
||||
onFinish: () => cancelDelete(),
|
||||
});
|
||||
};
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<div class="p-4 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
|
||||
<div class="flex flex-col sm:flex-row gap-2 items-start sm:items-center">
|
||||
<TextInput v-model="search" placeholder="Search decisions..." class="w-full sm:w-72" />
|
||||
<select v-model="selectedTemplateId" class="block w-full sm:w-64 border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm">
|
||||
<option :value="null">All templates</option>
|
||||
<option v-for="t in emailTemplates" :key="t.id" :value="t.id">{{ t.name }}</option>
|
||||
</select>
|
||||
<label class="flex items-center gap-2 text-sm">
|
||||
<input type="checkbox" v-model="onlyAutoMail" class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500">
|
||||
Only auto mail
|
||||
</label>
|
||||
</div>
|
||||
<PrimaryButton @click="openCreateDrawer">+ Dodaj odločitev</PrimaryButton>
|
||||
<div class="p-4 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
|
||||
<div class="flex flex-col sm:flex-row gap-2 items-start sm:items-center">
|
||||
<TextInput
|
||||
v-model="search"
|
||||
placeholder="Search decisions..."
|
||||
class="w-full sm:w-72"
|
||||
/>
|
||||
<select
|
||||
v-model="selectedTemplateId"
|
||||
class="block w-full sm:w-64 border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
|
||||
>
|
||||
<option :value="null">All templates</option>
|
||||
<option v-for="t in emailTemplates" :key="t.id" :value="t.id">
|
||||
{{ t.name }}
|
||||
</option>
|
||||
</select>
|
||||
<label class="flex items-center gap-2 text-sm">
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="onlyAutoMail"
|
||||
class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500"
|
||||
/>
|
||||
Only auto mail
|
||||
</label>
|
||||
</div>
|
||||
<PrimaryButton @click="openCreateDrawer">+ Dodaj odločitev</PrimaryButton>
|
||||
</div>
|
||||
<div class="px-4 pb-4">
|
||||
<DataTableClient
|
||||
:columns="columns"
|
||||
:rows="filtered"
|
||||
:sort="sort"
|
||||
:search="''"
|
||||
:page="page"
|
||||
:pageSize="pageSize"
|
||||
:showToolbar="false"
|
||||
@update:sort="(v) => (sort = v)"
|
||||
@update:page="(v) => (page = v)"
|
||||
@update:pageSize="(v) => (pageSize = v)"
|
||||
>
|
||||
<template #cell-color_tag="{ row }">
|
||||
<div class="flex items-center gap-2">
|
||||
<span
|
||||
v-if="row.color_tag"
|
||||
class="inline-block h-4 w-4 rounded"
|
||||
:style="{ backgroundColor: row.color_tag }"
|
||||
></span>
|
||||
<span>{{ row.color_tag || "—" }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #cell-belongs="{ row }">
|
||||
{{ row.actions?.length ?? 0 }}
|
||||
</template>
|
||||
<template #cell-auto_mail="{ row }">
|
||||
<div class="flex flex-col text-sm">
|
||||
<span :class="row.auto_mail ? 'text-green-700' : 'text-gray-500'">{{
|
||||
row.auto_mail ? "Enabled" : "Disabled"
|
||||
}}</span>
|
||||
<span v-if="row.auto_mail && row.email_template_id" class="text-gray-600">
|
||||
Template:
|
||||
{{ emailTemplates.find((t) => t.id === row.email_template_id)?.name || "—" }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #actions="{ row }">
|
||||
<button class="px-2" @click="openEditDrawer(row)">
|
||||
<EditIcon size="md" css="text-gray-500" />
|
||||
</button>
|
||||
<button
|
||||
class="px-2 disabled:opacity-40"
|
||||
:disabled="(row.activities_count ?? 0) > 0"
|
||||
@click="confirmDelete(row)"
|
||||
>
|
||||
<TrashBinIcon size="md" css="text-red-500" />
|
||||
</button>
|
||||
</template>
|
||||
</DataTableClient>
|
||||
</div>
|
||||
<DialogModal :show="drawerEdit" @close="closeEditDrawer">
|
||||
<template #title>
|
||||
<span>Spremeni odločitev</span>
|
||||
</template>
|
||||
<template #content>
|
||||
<form @submit.prevent="update">
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="name" value="Ime" />
|
||||
<TextInput
|
||||
id="name"
|
||||
v-model="form.name"
|
||||
type="text"
|
||||
class="mt-1 block w-full"
|
||||
autocomplete="name"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<fwb-table>
|
||||
<fwb-table-head>
|
||||
<fwb-table-head-cell>#</fwb-table-head-cell>
|
||||
<fwb-table-head-cell>Name</fwb-table-head-cell>
|
||||
<fwb-table-head-cell>Color tag</fwb-table-head-cell>
|
||||
<fwb-table-head-cell>Belongs to actions</fwb-table-head-cell>
|
||||
<fwb-table-head-cell>Auto mail</fwb-table-head-cell>
|
||||
<fwb-table-head-cell>
|
||||
<span class="sr-only">Edit</span>
|
||||
</fwb-table-head-cell>
|
||||
</fwb-table-head>
|
||||
<fwb-table-body>
|
||||
<fwb-table-row v-for="d in filtered" :key="d.id">
|
||||
<fwb-table-cell>{{ d.id }}</fwb-table-cell>
|
||||
<fwb-table-cell>{{ d.name }}</fwb-table-cell>
|
||||
<fwb-table-cell>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="inline-block h-4 w-4 rounded" :style="{ backgroundColor: d.color_tag }"></span>
|
||||
<span>{{ d.color_tag }}</span>
|
||||
</div>
|
||||
</fwb-table-cell>
|
||||
<fwb-table-cell>{{ d.actions.length }}</fwb-table-cell>
|
||||
<fwb-table-cell>
|
||||
<div class="flex flex-col text-sm">
|
||||
<span :class="d.auto_mail ? 'text-green-700' : 'text-gray-500'">{{ d.auto_mail ? 'Enabled' : 'Disabled' }}</span>
|
||||
<span v-if="d.auto_mail && d.email_template_id" class="text-gray-600">
|
||||
Template: {{ (emailTemplates.find(t => t.id === d.email_template_id)?.name) || '—' }}
|
||||
</span>
|
||||
</div>
|
||||
</fwb-table-cell>
|
||||
<fwb-table-cell>
|
||||
<button class="px-2" @click="openEditDrawer(d)"><EditIcon size="md" css="text-gray-500" /></button>
|
||||
<button class="px-2 disabled:opacity-40" :disabled="(d.activities_count ?? 0) > 0" @click="confirmDelete(d)"><TrashBinIcon size="md" css="text-red-500" /></button>
|
||||
</fwb-table-cell>
|
||||
</fwb-table-row>
|
||||
</fwb-table-body>
|
||||
</fwb-table>
|
||||
<div class="mt-4 flex items-center gap-2">
|
||||
<input
|
||||
id="autoMailEdit"
|
||||
type="checkbox"
|
||||
v-model="form.auto_mail"
|
||||
class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500"
|
||||
/>
|
||||
<label for="autoMailEdit" class="text-sm">Samodejna pošta (auto mail)</label>
|
||||
</div>
|
||||
|
||||
<DialogModal :show="drawerEdit" @close="closeEditDrawer">
|
||||
<template #title>
|
||||
<span>Spremeni odločitev</span>
|
||||
</template>
|
||||
<template #content>
|
||||
<form @submit.prevent="update">
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="name" value="Ime"/>
|
||||
<TextInput
|
||||
id="name"
|
||||
v-model="form.name"
|
||||
type="text"
|
||||
class="mt-1 block w-full"
|
||||
autocomplete="name"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-span-6 sm:col-span-4 mt-2">
|
||||
<InputLabel for="emailTemplateEdit" value="Email predloga" />
|
||||
<select
|
||||
id="emailTemplateEdit"
|
||||
v-model="form.email_template_id"
|
||||
:disabled="!form.auto_mail"
|
||||
class="block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<option :value="null">— Brez —</option>
|
||||
<option v-for="t in emailTemplates" :key="t.id" :value="t.id">
|
||||
{{ t.name }}
|
||||
</option>
|
||||
</select>
|
||||
<p v-if="form.email_template_id" class="text-xs text-gray-500 mt-1">
|
||||
<span
|
||||
v-if="
|
||||
(
|
||||
emailTemplates.find((t) => t.id === form.email_template_id)
|
||||
?.entity_types || []
|
||||
).includes('contract')
|
||||
"
|
||||
>Ta predloga zahteva pogodbo.</span
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="colorTag" value="Barva" />
|
||||
<div class="mt-1">
|
||||
<InlineColorPicker v-model="form.color_tag" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 flex items-center gap-2">
|
||||
<input id="autoMailEdit" type="checkbox" v-model="form.auto_mail" class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500">
|
||||
<label for="autoMailEdit" class="text-sm">Samodejna pošta (auto mail)</label>
|
||||
</div>
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="actionsSelect" value="Akcije" />
|
||||
<multiselect
|
||||
id="actionsSelect"
|
||||
v-model="form.actions"
|
||||
:options="actionOptions"
|
||||
:multiple="true"
|
||||
track-by="id"
|
||||
:taggable="true"
|
||||
placeholder="Dodaj akcijo"
|
||||
:append-to-body="true"
|
||||
label="name"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-span-6 sm:col-span-4 mt-2">
|
||||
<InputLabel for="emailTemplateEdit" value="Email predloga"/>
|
||||
<select id="emailTemplateEdit" v-model="form.email_template_id" :disabled="!form.auto_mail" class="block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm disabled:opacity-50 disabled:cursor-not-allowed">
|
||||
<option :value="null">— Brez —</option>
|
||||
<option v-for="t in emailTemplates" :key="t.id" :value="t.id">{{ t.name }}</option>
|
||||
</select>
|
||||
<p v-if="form.email_template_id" class="text-xs text-gray-500 mt-1">
|
||||
<span v-if="(emailTemplates.find(t => t.id === form.email_template_id)?.entity_types || []).includes('contract')">Ta predloga zahteva pogodbo.</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="colorTag" value="Barva"/>
|
||||
<div class="mt-1 w-full border flex p-1">
|
||||
<TextInput
|
||||
id="colorTag"
|
||||
v-model="form.color_tag"
|
||||
type="color"
|
||||
class="mr-2"
|
||||
autocomplete="color-tag"
|
||||
/>
|
||||
<span>{{ form.color_tag }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-end mt-4">
|
||||
<ActionMessage :on="form.recentlySuccessful" class="me-3">
|
||||
Shranjuje.
|
||||
</ActionMessage>
|
||||
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="actionsSelect" value="Akcije"/>
|
||||
<multiselect
|
||||
id="actionsSelect"
|
||||
v-model="form.actions"
|
||||
:options="actionOptions"
|
||||
:multiple="true"
|
||||
track-by="id"
|
||||
:taggable="true"
|
||||
placeholder="Dodaj akcijo"
|
||||
:append-to-body="true"
|
||||
label="name"
|
||||
/>
|
||||
</div>
|
||||
<PrimaryButton
|
||||
:class="{ 'opacity-25': form.processing }"
|
||||
:disabled="form.processing"
|
||||
>
|
||||
Shrani
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
</DialogModal>
|
||||
|
||||
<div class="flex justify-end mt-4">
|
||||
<ActionMessage :on="form.recentlySuccessful" class="me-3">
|
||||
Shranjuje.
|
||||
</ActionMessage>
|
||||
<DialogModal :show="drawerCreate" @close="closeCreateDrawer">
|
||||
<template #title>
|
||||
<span>Dodaj odločitev</span>
|
||||
</template>
|
||||
<template #content>
|
||||
<form @submit.prevent="store">
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="nameCreate" value="Ime" />
|
||||
<TextInput
|
||||
id="nameCreate"
|
||||
v-model="createForm.name"
|
||||
type="text"
|
||||
class="mt-1 block w-full"
|
||||
autocomplete="name"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<PrimaryButton :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
|
||||
Shrani
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
</DialogModal>
|
||||
<div class="mt-4 flex items-center gap-2">
|
||||
<input
|
||||
id="autoMailCreate"
|
||||
type="checkbox"
|
||||
v-model="createForm.auto_mail"
|
||||
class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500"
|
||||
/>
|
||||
<label for="autoMailCreate" class="text-sm">Samodejna pošta (auto mail)</label>
|
||||
</div>
|
||||
|
||||
<DialogModal :show="drawerCreate" @close="closeCreateDrawer">
|
||||
<template #title>
|
||||
<span>Dodaj odločitev</span>
|
||||
</template>
|
||||
<template #content>
|
||||
<form @submit.prevent="store">
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="nameCreate" value="Ime"/>
|
||||
<TextInput
|
||||
id="nameCreate"
|
||||
v-model="createForm.name"
|
||||
type="text"
|
||||
class="mt-1 block w-full"
|
||||
autocomplete="name"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-span-6 sm:col-span-4 mt-2">
|
||||
<InputLabel for="emailTemplateCreate" value="Email predloga" />
|
||||
<select
|
||||
id="emailTemplateCreate"
|
||||
v-model="createForm.email_template_id"
|
||||
:disabled="!createForm.auto_mail"
|
||||
class="block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<option :value="null">— Brez —</option>
|
||||
<option v-for="t in emailTemplates" :key="t.id" :value="t.id">
|
||||
{{ t.name }}
|
||||
</option>
|
||||
</select>
|
||||
<p v-if="createForm.email_template_id" class="text-xs text-gray-500 mt-1">
|
||||
<span
|
||||
v-if="
|
||||
(
|
||||
emailTemplates.find((t) => t.id === createForm.email_template_id)
|
||||
?.entity_types || []
|
||||
).includes('contract')
|
||||
"
|
||||
>Ta predloga zahteva pogodbo.</span
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="colorTagCreate" value="Barva" />
|
||||
<div class="mt-1">
|
||||
<InlineColorPicker v-model="createForm.color_tag" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 flex items-center gap-2">
|
||||
<input id="autoMailCreate" type="checkbox" v-model="createForm.auto_mail" class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500">
|
||||
<label for="autoMailCreate" class="text-sm">Samodejna pošta (auto mail)</label>
|
||||
</div>
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="actionsCreate" value="Akcije" />
|
||||
<multiselect
|
||||
id="actionsCreate"
|
||||
v-model="createForm.actions"
|
||||
:options="actionOptions"
|
||||
:multiple="true"
|
||||
track-by="id"
|
||||
:taggable="true"
|
||||
placeholder="Dodaj akcijo"
|
||||
:append-to-body="true"
|
||||
label="name"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-span-6 sm:col-span-4 mt-2">
|
||||
<InputLabel for="emailTemplateCreate" value="Email predloga"/>
|
||||
<select id="emailTemplateCreate" v-model="createForm.email_template_id" :disabled="!createForm.auto_mail" class="block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm disabled:opacity-50 disabled:cursor-not-allowed">
|
||||
<option :value="null">— Brez —</option>
|
||||
<option v-for="t in emailTemplates" :key="t.id" :value="t.id">{{ t.name }}</option>
|
||||
</select>
|
||||
<p v-if="createForm.email_template_id" class="text-xs text-gray-500 mt-1">
|
||||
<span v-if="(emailTemplates.find(t => t.id === createForm.email_template_id)?.entity_types || []).includes('contract')">Ta predloga zahteva pogodbo.</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="colorTagCreate" value="Barva"/>
|
||||
<div class="mt-1 w-full border flex p-1">
|
||||
<TextInput
|
||||
id="colorTagCreate"
|
||||
v-model="createForm.color_tag"
|
||||
type="color"
|
||||
class="mr-2"
|
||||
autocomplete="color-tag"
|
||||
/>
|
||||
<span>{{ createForm.color_tag }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-end mt-4">
|
||||
<ActionMessage :on="createForm.recentlySuccessful" class="me-3">
|
||||
Shranjuje.
|
||||
</ActionMessage>
|
||||
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="actionsCreate" value="Akcije"/>
|
||||
<multiselect
|
||||
id="actionsCreate"
|
||||
v-model="createForm.actions"
|
||||
:options="actionOptions"
|
||||
:multiple="true"
|
||||
track-by="id"
|
||||
:taggable="true"
|
||||
placeholder="Dodaj akcijo"
|
||||
:append-to-body="true"
|
||||
label="name"
|
||||
/>
|
||||
</div>
|
||||
<PrimaryButton
|
||||
:class="{ 'opacity-25': createForm.processing }"
|
||||
:disabled="createForm.processing"
|
||||
>
|
||||
Dodaj
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
</DialogModal>
|
||||
|
||||
<div class="flex justify-end mt-4">
|
||||
<ActionMessage :on="createForm.recentlySuccessful" class="me-3">
|
||||
Shranjuje.
|
||||
</ActionMessage>
|
||||
|
||||
<PrimaryButton :class="{ 'opacity-25': createForm.processing }" :disabled="createForm.processing">
|
||||
Dodaj
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
</DialogModal>
|
||||
|
||||
<ConfirmationModal :show="showDelete" @close="cancelDelete">
|
||||
<template #title>
|
||||
Delete decision
|
||||
</template>
|
||||
<template #content>
|
||||
Are you sure you want to delete decision "{{ toDelete?.name }}"? This cannot be undone.
|
||||
</template>
|
||||
<template #footer>
|
||||
<button @click="cancelDelete" class="px-4 py-2 rounded bg-gray-200 hover:bg-gray-300 me-2">Cancel</button>
|
||||
<PrimaryButton @click="destroyDecision">Delete</PrimaryButton>
|
||||
</template>
|
||||
</ConfirmationModal>
|
||||
</template>
|
||||
<ConfirmationModal :show="showDelete" @close="cancelDelete">
|
||||
<template #title> Delete decision </template>
|
||||
<template #content>
|
||||
Are you sure you want to delete decision "{{ toDelete?.name }}"? This cannot be
|
||||
undone.
|
||||
</template>
|
||||
<template #footer>
|
||||
<button
|
||||
@click="cancelDelete"
|
||||
class="px-4 py-2 rounded bg-gray-200 hover:bg-gray-300 me-2"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<PrimaryButton @click="destroyDecision">Delete</PrimaryButton>
|
||||
</template>
|
||||
</ConfirmationModal>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
// this import. This is nice for IDE syntax and refactoring.
|
||||
use App\Models\Client;
|
||||
use App\Models\ClientCase;
|
||||
use App\Models\Segment;
|
||||
use Diglactic\Breadcrumbs\Breadcrumbs;
|
||||
// This import is also not required, and you could replace `BreadcrumbTrail $trail`
|
||||
// with `$trail`. This is nice for IDE type checking and completion.
|
||||
|
|
@ -88,3 +89,15 @@
|
|||
$trail->parent('settings');
|
||||
$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));
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user