472 lines
17 KiB
Vue
472 lines
17 KiB
Vue
<script setup>
|
|
import AppLayout from "@/Layouts/AppLayout.vue";
|
|
import { ref } from "vue";
|
|
import { Link, router, useForm } from "@inertiajs/vue3";
|
|
import DataTableServer from "@/Components/DataTable/DataTableServer.vue";
|
|
import PersonInfoGrid from "@/Components/PersonInfoGrid.vue";
|
|
import SectionTitle from "@/Components/SectionTitle.vue";
|
|
import Multiselect from "vue-multiselect";
|
|
import Dropdown from "@/Components/Dropdown.vue";
|
|
import DialogModal from "@/Components/DialogModal.vue";
|
|
import InputLabel from "@/Components/InputLabel.vue";
|
|
|
|
const props = defineProps({
|
|
client: Object,
|
|
contracts: Object,
|
|
filters: Object,
|
|
segments: Object,
|
|
types: Object,
|
|
});
|
|
|
|
const fromDate = ref(props.filters?.from || "");
|
|
const toDate = ref(props.filters?.to || "");
|
|
const search = ref(props.filters?.search || "");
|
|
const selectedSegments = ref(
|
|
props.filters?.segments
|
|
? props.segments.filter((s) => props.filters.segments.includes(s.id.toString()))
|
|
: []
|
|
);
|
|
const selectedRows = ref([]);
|
|
const showSegmentModal = ref(false);
|
|
const targetSegmentId = ref(null);
|
|
const segmentForm = useForm({ segment_id: null, contracts: [] });
|
|
|
|
function toggleSelectAll() {
|
|
if (selectedRows.value.length === props.contracts.data.length) {
|
|
selectedRows.value = [];
|
|
} else {
|
|
selectedRows.value = props.contracts.data.map((row) => row.uuid);
|
|
}
|
|
}
|
|
|
|
function toggleRowSelection(uuid) {
|
|
const index = selectedRows.value.indexOf(uuid);
|
|
if (index > -1) {
|
|
selectedRows.value.splice(index, 1);
|
|
} else {
|
|
selectedRows.value.push(uuid);
|
|
}
|
|
}
|
|
|
|
function isRowSelected(uuid) {
|
|
return selectedRows.value.includes(uuid);
|
|
}
|
|
|
|
function isAllSelected() {
|
|
return (
|
|
props.contracts.data.length > 0 &&
|
|
selectedRows.value.length === props.contracts.data.length
|
|
);
|
|
}
|
|
|
|
function isIndeterminate() {
|
|
return (
|
|
selectedRows.value.length > 0 &&
|
|
selectedRows.value.length < props.contracts.data.length
|
|
);
|
|
}
|
|
|
|
function openSegmentModal() {
|
|
if (!selectedRows.value.length) return;
|
|
targetSegmentId.value = null;
|
|
showSegmentModal.value = true;
|
|
}
|
|
|
|
function submitSegment() {
|
|
if (!targetSegmentId.value || !selectedRows.value.length) return;
|
|
segmentForm.segment_id = targetSegmentId.value;
|
|
segmentForm.contracts = [...selectedRows.value];
|
|
segmentForm.patch(route("contracts.segment"), {
|
|
preserveScroll: true,
|
|
onSuccess: () => {
|
|
showSegmentModal.value = false;
|
|
selectedRows.value = [];
|
|
router.reload({ only: ["contracts"] });
|
|
},
|
|
});
|
|
}
|
|
function applyDateFilter() {
|
|
const params = Object.fromEntries(
|
|
new URLSearchParams(window.location.search).entries()
|
|
);
|
|
if (fromDate.value) {
|
|
params.from = fromDate.value;
|
|
} else {
|
|
delete params.from;
|
|
}
|
|
if (toDate.value) {
|
|
params.to = toDate.value;
|
|
} else {
|
|
delete params.to;
|
|
}
|
|
if (search.value && search.value.trim() !== "") {
|
|
params.search = search.value.trim();
|
|
} else {
|
|
delete params.search;
|
|
}
|
|
if (selectedSegments.value && selectedSegments.value.length > 0) {
|
|
params.segments = selectedSegments.value.map((s) => s.id).join(",");
|
|
} else {
|
|
delete params.segments;
|
|
}
|
|
delete params.page;
|
|
router.get(route("client.contracts", { uuid: props.client.uuid }), params, {
|
|
preserveState: true,
|
|
replace: true,
|
|
preserveScroll: true,
|
|
});
|
|
}
|
|
|
|
function clearDateFilter() {
|
|
fromDate.value = "";
|
|
toDate.value = "";
|
|
selectedSegments.value = [];
|
|
applyDateFilter();
|
|
}
|
|
|
|
// Search handled by DataTableServer toolbar; keep date filter applying
|
|
|
|
// Build params for navigating to client case show, including active segment if available
|
|
function caseShowParams(contract) {
|
|
const params = { client_case: contract?.client_case?.uuid };
|
|
const segId = contract?.segments?.[0]?.id;
|
|
if (segId) {
|
|
params.segment = segId;
|
|
}
|
|
return params;
|
|
}
|
|
|
|
// Format YYYY-MM-DD (or ISO date) to dd.mm.yyyy
|
|
function formatDate(value) {
|
|
if (!value) return "-";
|
|
try {
|
|
const iso = String(value).split("T")[0];
|
|
const parts = iso.split("-");
|
|
if (parts.length !== 3) return value;
|
|
const [y, m, d] = parts;
|
|
return `${d.padStart(2, "0")}.${m.padStart(2, "0")}.${y}`;
|
|
} catch (e) {
|
|
return value;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<AppLayout title="Pogodbe">
|
|
<template #header></template>
|
|
<!-- Header card (matches Client/Show header style) -->
|
|
<div class="pt-12">
|
|
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
|
|
<div
|
|
class="bg-white overflow-hidden shadow-xl sm:rounded-lg border-l-4 border-blue-400"
|
|
>
|
|
<div class="mx-auto max-w-4x1 p-3">
|
|
<div class="flex items-center justify-between">
|
|
<SectionTitle>
|
|
<template #title>
|
|
{{ client.person.full_name }}
|
|
</template>
|
|
</SectionTitle>
|
|
</div>
|
|
<nav class="mt-2 border-b border-gray-200">
|
|
<ul class="flex gap-6 -mb-px">
|
|
<li>
|
|
<Link
|
|
:href="route('client.show', { uuid: client.uuid })"
|
|
:class="[
|
|
'inline-flex items-center px-3 py-2 text-sm font-medium border-b-2',
|
|
route().current('client.show')
|
|
? 'text-indigo-600 border-indigo-600'
|
|
: 'text-gray-600 border-transparent hover:text-gray-800 hover:border-gray-300',
|
|
]"
|
|
>
|
|
Primeri
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link
|
|
:href="route('client.contracts', { uuid: client.uuid })"
|
|
:class="[
|
|
'inline-flex items-center px-3 py-2 text-sm font-medium border-b-2',
|
|
route().current('client.contracts')
|
|
? 'text-indigo-600 border-indigo-600'
|
|
: 'text-gray-600 border-transparent hover:text-gray-800 hover:border-gray-300',
|
|
]"
|
|
>
|
|
Pogodbe
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Client details card (separate container) -->
|
|
<div class="pt-1">
|
|
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
|
|
<div
|
|
class="bg-white overflow-hidden shadow-xl sm:rounded-lg border-l-4 border-blue-400"
|
|
>
|
|
<div class="mx-auto max-w-4x1 px-2">
|
|
<PersonInfoGrid :types="types" :person="client.person" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Contracts list card -->
|
|
<div class="py-12">
|
|
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
|
|
<div class="px-3 bg-white overflow-hidden shadow-xl sm:rounded-lg">
|
|
<div class="mx-auto max-w-4x1 py-3">
|
|
<!-- Filters Section -->
|
|
<div class="bg-gray-50 rounded-lg border border-gray-200 p-3 mb-4">
|
|
<div class="flex flex-wrap items-center gap-x-6 gap-y-3">
|
|
<!-- Date Range -->
|
|
<div class="flex flex-col gap-3">
|
|
<InputLabel value="Datum začetka" />
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-xs text-gray-500">Od</span>
|
|
<input
|
|
type="date"
|
|
v-model="fromDate"
|
|
@change="applyDateFilter"
|
|
class="rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 text-sm py-1.5"
|
|
/>
|
|
<span class="text-xs text-gray-500">Do</span>
|
|
<input
|
|
type="date"
|
|
v-model="toDate"
|
|
@change="applyDateFilter"
|
|
class="rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 text-sm py-1.5"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Segments -->
|
|
<div class="flex flex-col gap-3">
|
|
<InputLabel for="segmentSelect" value="Segmenti" />
|
|
<Multiselect
|
|
v-model="selectedSegments"
|
|
:options="segments"
|
|
:multiple="true"
|
|
:close-on-select="false"
|
|
:clear-on-select="false"
|
|
:preserve-search="true"
|
|
:taggable="true"
|
|
:append-to-body="true"
|
|
placeholder="Izberi segmente"
|
|
label="name"
|
|
track-by="id"
|
|
id="segmentSelect"
|
|
:preselect-first="false"
|
|
@update:modelValue="applyDateFilter"
|
|
class="w-80"
|
|
>
|
|
</Multiselect>
|
|
</div>
|
|
|
|
<!-- Clear Button -->
|
|
<button
|
|
type="button"
|
|
class="inline-flex items-center px-3 py-1.5 text-sm font-medium rounded-md border border-gray-300 text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition ml-auto"
|
|
:disabled="!fromDate && !toDate && selectedSegments.length === 0"
|
|
@click="clearDateFilter"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="h-4 w-4 mr-1.5"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M6 18L18 6M6 6l12 12"
|
|
/>
|
|
</svg>
|
|
Počisti filtre
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<DataTableServer
|
|
class="mt-3"
|
|
:columns="[
|
|
{ key: 'select', label: '', sortable: false, width: '50px' },
|
|
{ key: 'reference', label: 'Referenca', sortable: false },
|
|
{ key: 'customer', label: 'Stranka', sortable: false },
|
|
{ key: 'start', label: 'Začetek', sortable: false },
|
|
{ key: 'segment', label: 'Segment', sortable: false },
|
|
{ key: 'balance', label: 'Stanje', sortable: false, align: 'right' },
|
|
]"
|
|
:rows="contracts.data || []"
|
|
:meta="{
|
|
current_page: contracts.current_page,
|
|
per_page: contracts.per_page,
|
|
total: contracts.total,
|
|
last_page: contracts.last_page,
|
|
}"
|
|
route-name="client.contracts"
|
|
:route-params="{ uuid: client.uuid }"
|
|
:query="{
|
|
from: fromDate || undefined,
|
|
to: toDate || undefined,
|
|
segments:
|
|
selectedSegments.length > 0
|
|
? selectedSegments.map((s) => s.id).join(',')
|
|
: undefined,
|
|
}"
|
|
:search="search"
|
|
row-key="uuid"
|
|
:only-props="['contracts']"
|
|
>
|
|
<template #toolbar-extra>
|
|
<div v-if="selectedRows.length" class="flex items-center gap-2">
|
|
<div class="text-sm text-gray-700">
|
|
Izbrano: <span class="font-medium">{{ selectedRows.length }}</span>
|
|
</div>
|
|
<Dropdown width="48" align="left">
|
|
<template #trigger>
|
|
<button
|
|
type="button"
|
|
class="inline-flex items-center px-3 py-1.5 text-sm font-medium rounded-md border border-gray-300 text-gray-700 bg-white hover:bg-gray-50"
|
|
>
|
|
Akcije
|
|
<svg
|
|
class="ml-1 h-4 w-4"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.24 4.24a.75.75 0 01-1.06 0L5.21 8.29a.75.75 0 01.02-1.08z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</template>
|
|
<template #content>
|
|
<button
|
|
type="button"
|
|
class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
|
|
@click="openSegmentModal"
|
|
>
|
|
Preusmeri v segment
|
|
</button>
|
|
</template>
|
|
</Dropdown>
|
|
</div>
|
|
</template>
|
|
<template #header-select>
|
|
<input
|
|
type="checkbox"
|
|
:checked="isAllSelected()"
|
|
:indeterminate="isIndeterminate()"
|
|
@change="toggleSelectAll"
|
|
class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
|
|
/>
|
|
</template>
|
|
<template #cell-select="{ row }">
|
|
<input
|
|
type="checkbox"
|
|
:checked="isRowSelected(row.uuid)"
|
|
@change="toggleRowSelection(row.uuid)"
|
|
class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
|
|
/>
|
|
</template>
|
|
<template #cell-reference="{ row }">
|
|
<Link
|
|
:href="route('clientCase.show', caseShowParams(row))"
|
|
class="text-indigo-600 hover:underline"
|
|
>
|
|
{{ row.reference }}
|
|
</Link>
|
|
</template>
|
|
<template #cell-customer="{ row }">
|
|
{{ row.client_case?.person?.full_name || "-" }}
|
|
</template>
|
|
<template #cell-start="{ row }">
|
|
{{ formatDate(row.start_date) }}
|
|
</template>
|
|
<template #cell-segment="{ row }">
|
|
{{ row.segments?.[0]?.name || "-" }}
|
|
</template>
|
|
<template #cell-balance="{ row }">
|
|
<div class="text-right">
|
|
{{
|
|
new Intl.NumberFormat("sl-SI", {
|
|
style: "currency",
|
|
currency: "EUR",
|
|
}).format(Number(row.account?.balance_amount ?? 0))
|
|
}}
|
|
</div>
|
|
</template>
|
|
<template #empty>
|
|
<div class="p-6 text-center text-gray-500">Ni zadetkov.</div>
|
|
</template>
|
|
</DataTableServer>
|
|
|
|
<!-- Segment Reassignment Modal -->
|
|
<DialogModal :show="showSegmentModal" @close="showSegmentModal = false">
|
|
<template #title> Preusmeri v segment </template>
|
|
<template #content>
|
|
<div class="space-y-3">
|
|
<div class="text-sm text-gray-600">
|
|
Število izbranih pogodb:
|
|
<span class="font-medium">{{ selectedRows.length }}</span>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1"
|
|
>Ciljni segment</label
|
|
>
|
|
<select
|
|
v-model="targetSegmentId"
|
|
class="w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 text-sm"
|
|
>
|
|
<option :value="null" disabled>Izberi segment</option>
|
|
<option v-for="seg in segments" :key="seg.id" :value="seg.id">
|
|
{{ seg.name }}
|
|
</option>
|
|
</select>
|
|
<div
|
|
v-if="segmentForm.errors.segment_id"
|
|
class="mt-1 text-sm text-red-600"
|
|
>
|
|
{{ segmentForm.errors.segment_id }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template #footer>
|
|
<button
|
|
type="button"
|
|
class="px-3 py-1.5 text-sm rounded-md border border-gray-300 text-gray-700 bg-white hover:bg-gray-50 mr-2"
|
|
@click="showSegmentModal = false"
|
|
>
|
|
Prekliči
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="px-3 py-1.5 text-sm rounded-md bg-indigo-600 text-white hover:bg-indigo-700 disabled:opacity-50"
|
|
:disabled="
|
|
!targetSegmentId || !selectedRows.length || segmentForm.processing
|
|
"
|
|
@click="submitSegment"
|
|
>
|
|
Potrdi
|
|
</button>
|
|
</template>
|
|
</DialogModal>
|
|
</div>
|
|
<!-- Pagination handled by DataTableServer -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</AppLayout>
|
|
</template>
|