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

Changes to import and notifications

Browse Source
This commit is contained in:
Simon Pocrnjič
2025-10-13 21:14:10 +02:00
parent 0bbed64542
commit 79b3e20b02
28 changed files with 2173 additions and 438 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/Pages/Cases/Index.vue
+77 -92
View File
@@ -1,38 +1,17 @@
<script setup>
import AppLayout from "@/Layouts/AppLayout.vue";
import Pagination from "@/Components/Pagination.vue";
import SectionTitle from "@/Components/SectionTitle.vue";
import { Link, router } from "@inertiajs/vue3";
import { debounce } from "lodash";
import { ref, watch, onUnmounted } from "vue";
import { ref } from "vue";
import DataTableServer from "@/Components/DataTable/DataTableServer.vue";
const props = defineProps({
client_cases: Object,
filters: Object,
});
// Search state (initialize from server-provided filters)
// Initial search for DataTable toolbar
const search = ref(props.filters?.search || "");
const applySearch = debounce((term) => {
const params = Object.fromEntries(
new URLSearchParams(window.location.search).entries()
);
if (term) {
params.search = term;
} else {
delete params.search;
}
// Reset paginator key used by backend: 'client-cases-page'
delete params["client-cases-page"];
delete params.page;
router.get(route("clientCase"), params, {
preserveState: true,
replace: true,
preserveScroll: true,
});
}, 300);
watch(search, (v) => applySearch(v));
onUnmounted(() => applySearch.cancel && applySearch.cancel());
// Format helpers
const fmtCurrency = (v) => {
@@ -53,79 +32,85 @@ const fmtCurrency = (v) => {
<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">
<div class="flex items-center justify-between gap-3 pb-3">
<div class="pb-3">
<SectionTitle>
<template #title>Primeri</template>
</SectionTitle>
<input
v-model="search"
type="text"
placeholder="Iskanje po 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">Št.</th>
<th class="py-2 pr-4">Primer</th>
<th class="py-2 pr-4">Stranka</th>
<th class="py-2 pr-4">Davčna</th>
<th class="py-2 pr-4 text-right">Aktivne pogodbe</th>
<th class="py-2 pr-4 text-right">Skupaj stanje</th>
</tr>
</thead>
<tbody>
<tr
v-for="c in client_cases.data"
:key="c.uuid"
class="border-b last:border-0"
>
<td class="py-2 pr-4">{{ c.person?.nu || "-" }}</td>
<td class="py-2 pr-4">
<Link
:href="route('clientCase.show', { client_case: c.uuid })"
class="text-indigo-600 hover:underline"
>
{{ c.person?.full_name || "-" }}
</Link>
<button
v-if="!c.person"
@click.prevent="
router.post(
route('clientCase.emergencyPerson', { client_case: c.uuid })
)
"
class="ml-2 inline-flex items-center rounded bg-red-50 px-2 py-0.5 text-xs font-semibold text-red-600 hover:bg-red-100 border border-red-200"
title="Emergency: recreate missing person"
>
Add Person
</button>
</td>
<td class="py-2 pr-4">{{ c.client?.person?.full_name || "-" }}</td>
<td class="py-2 pr-4">{{ c.person?.tax_number || "-" }}</td>
<td class="py-2 pr-4 text-right">
{{ c.active_contracts_count ?? 0 }}
</td>
<td class="py-2 pr-4 text-right">
{{ fmtCurrency(c.active_contracts_balance_sum) }}
</td>
</tr>
<tr v-if="!client_cases.data || client_cases.data.length === 0">
<td colspan="6" class="py-4 text-gray-500">Ni zadetkov.</td>
</tr>
</tbody>
</table>
</div>
<DataTableServer
:columns="[
{ key: 'nu', label: 'Št.', sortable: false, class: 'w-40' },
{ key: 'case', label: 'Primer', sortable: false },
{ key: 'client', label: 'Stranka', sortable: false },
{ key: 'tax', label: 'Davčna', sortable: false },
{
key: 'active_contracts',
label: 'Aktivne pogodbe',
sortable: false,
align: 'right',
},
{
key: 'balance',
label: 'Skupaj stanje',
sortable: false,
align: 'right',
},
]"
:rows="client_cases.data || []"
:meta="{
current_page: client_cases.current_page,
per_page: client_cases.per_page,
total: client_cases.total,
last_page: client_cases.last_page,
}"
:search="search"
route-name="clientCase"
page-param-name="client-cases-page"
:only-props="['client_cases']"
>
<template #cell-nu="{ row }">
{{ row.person?.nu || "-" }}
</template>
<template #cell-case="{ row }">
<Link
:href="route('clientCase.show', { client_case: row.uuid })"
class="text-indigo-600 hover:underline"
>
{{ row.person?.full_name || "-" }}
</Link>
<button
v-if="!row.person"
@click.prevent="
router.post(
route('clientCase.emergencyPerson', { client_case: row.uuid })
)
"
class="ml-2 inline-flex items-center rounded bg-red-50 px-2 py-0.5 text-xs font-semibold text-red-600 hover:bg-red-100 border border-red-200"
title="Emergency: recreate missing person"
>
Add Person
</button>
</template>
<template #cell-client="{ row }">
{{ row.client?.person?.full_name || "-" }}
</template>
<template #cell-tax="{ row }">
{{ row.person?.tax_number || "-" }}
</template>
<template #cell-active_contracts="{ row }">
<div class="text-right">{{ row.active_contracts_count ?? 0 }}</div>
</template>
<template #cell-balance="{ row }">
<div class="text-right">
{{ fmtCurrency(row.active_contracts_balance_sum) }}
</div>
</template>
<template #empty>
<div class="p-6 text-center text-gray-500">Ni zadetkov.</div>
</template>
</DataTableServer>
</div>
<Pagination
:links="client_cases.links"
:from="client_cases.from"
:to="client_cases.to"
:total="client_cases.total"
/>
<!-- Pagination handled by DataTableServer -->
</div>
</div>
</div>
resources/js/Pages/Cases/Partials/ActivityTable.vue
+14 -2
View File
@@ -1,6 +1,6 @@
<script setup>
import { ref } from "vue";
import { router } from "@inertiajs/vue3";
import { Link, router } from "@inertiajs/vue3";
import Dropdown from "@/Components/Dropdown.vue";
import ConfirmationModal from "@/Components/ConfirmationModal.vue";
import SecondaryButton from "@/Components/SecondaryButton.vue";
@@ -107,7 +107,19 @@ const confirmDeleteAction = () => {
:key="row.id"
class="border-b last:border-b-0"
>
<td class="py-2 pr-4 align-top">{{ row.contract?.reference || "" }}</td>
<td class="py-2 pr-4 align-top">
<template v-if="row.contract?.reference">
{{ row.contract.reference }}
</template>
<template v-else>
<Link
:href="route('clientCase.show', { client_case: client_case.uuid })"
class="text-indigo-600 hover:underline"
>
{{ client_case?.person?.full_name || "—" }}
</Link>
</template>
</td>
<td class="py-2 pr-4 align-top">
<div class="flex flex-col gap-1">
<span
resources/js/Pages/Cases/Show.vue
-1
View File
@@ -258,7 +258,6 @@ const submitAttachSegment = () => {
:types="types"
tab-color="red-600"
:person="client_case.person"
/>
</div>
</div>
resources/js/Pages/Client/Contracts.vue
+85 -104
View File
@@ -2,7 +2,7 @@
import AppLayout from "@/Layouts/AppLayout.vue";
import { ref } from "vue";
import { Link, router } from "@inertiajs/vue3";
import Pagination from "@/Components/Pagination.vue";
import DataTableServer from "@/Components/DataTable/DataTableServer.vue";
import PersonInfoGrid from "@/Components/PersonInfoGrid.vue";
import SectionTitle from "@/Components/SectionTitle.vue";
@@ -43,33 +43,14 @@ function applyDateFilter() {
});
}
function applySearch() {
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;
}
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 = "";
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 };
@@ -112,19 +93,36 @@ function formatDate(value) {
</template>
</SectionTitle>
</div>
<div class="mt-2 flex items-center gap-3 text-sm">
<Link
:href="route('client.show', { uuid: client.uuid })"
class="px-2 py-1 rounded hover:underline"
>Primeri</Link
>
<span class="text-gray-300">|</span>
<Link
:href="route('client.contracts', { uuid: client.uuid })"
class="px-2 py-1 rounded text-indigo-600 hover:underline"
>Pogodbe</Link
>
</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>
@@ -171,78 +169,61 @@ function formatDate(value) {
class="rounded border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 px-3 py-2 text-sm"
/>
</div>
</div>
<div class="flex items-center gap-2">
<input
type="text"
v-model="search"
@keyup.enter="applySearch"
placeholder="Išči po referenci ali imenu"
class="rounded border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 px-3 py-2 text-sm w-64"
/>
<button
type="button"
@click="applySearch"
class="inline-flex items-center px-3 py-2 text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 rounded"
class="inline-flex items-center px-3 py-2 text-sm font-medium rounded border border-gray-300 text-gray-700 hover:bg-gray-50 disabled:opacity-50"
:disabled="!fromDate && !toDate"
@click="clearDateFilter"
title="Počisti datum"
>
Išči
Počisti
</button>
</div>
<!-- Search lives in DataTable toolbar -->
</div>
<div class="overflow-x-auto mt-3">
<table class="min-w-full text-left text-sm">
<thead>
<tr class="border-b">
<th class="py-2 pr-4">Referenca</th>
<th class="py-2 pr-4">Stranka</th>
<th class="py-2 pr-4">Začetek</th>
<th class="py-2 pr-4">Segment</th>
<th class="py-2 pr-4 text-right">Stanje</th>
</tr>
</thead>
<tbody>
<tr
v-for="contract in contracts.data"
:key="contract.uuid"
class="border-b last:border-0"
>
<td class="py-2 pr-4">
<Link
:href="route('clientCase.show', caseShowParams(contract))"
class="text-indigo-600 hover:underline"
>
{{ contract.reference }}
</Link>
</td>
<td class="py-2 pr-4">
{{ contract.client_case?.person?.full_name || "-" }}
</td>
<td class="py-2 pr-4">
{{ formatDate(contract.start_date) }}
</td>
<td class="py-2 pr-4">{{ contract.segments?.[0]?.name || "-" }}</td>
<td class="py-2 pr-4 text-right">
{{
new Intl.NumberFormat("sl-SI", {
style: "currency",
currency: "EUR",
}).format(Number(contract.account?.balance_amount ?? 0))
}}
</td>
</tr>
<tr v-if="!contracts.data || contracts.data.length === 0">
<td colspan="5" class="py-4 text-gray-500">Ni zadetkov.</td>
</tr>
</tbody>
</table>
</div>
<DataTableServer
class="mt-3"
:columns="[
{ 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 }"
:search="search"
row-key="uuid"
:only-props="['contracts']"
>
<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>
</div>
<Pagination
:links="contracts.links"
:from="contracts.from"
:to="contracts.to"
:total="contracts.total"
/>
<!-- Pagination handled by DataTableServer -->
</div>
</div>
</div>
resources/js/Pages/Client/Index.vue
+78 -84
View File
@@ -1,5 +1,5 @@
<script setup>
import { ref, watch } from "vue";
import { ref } from "vue";
import AppLayout from "@/Layouts/AppLayout.vue";
import PrimaryButton from "@/Components/PrimaryButton.vue";
import InputLabel from "@/Components/InputLabel.vue";
@@ -7,8 +7,7 @@ import TextInput from "@/Components/TextInput.vue";
import { Link, useForm, router } from "@inertiajs/vue3";
import ActionMessage from "@/Components/ActionMessage.vue";
import DialogModal from "@/Components/DialogModal.vue";
import Pagination from "@/Components/Pagination.vue";
import { debounce } from "lodash";
import DataTableServer from "@/Components/DataTable/DataTableServer.vue";
const props = defineProps({
clients: Object,
@@ -41,25 +40,8 @@ const formClient = useForm({
//Create client drawer
const drawerCreateClient = ref(false);
// Search state (table-friendly, SPA)
const search = ref(props.filters?.search || "");
const applySearch = debounce((term) => {
const params = Object.fromEntries(
new URLSearchParams(window.location.search).entries()
);
if (term) {
params.search = term;
} else {
delete params.search;
}
delete params.page; // reset pagination
router.get(route("client"), params, {
preserveState: true,
replace: true,
preserveScroll: true,
});
}, 300);
watch(search, (v) => applySearch(v));
// Initial search (passed to DataTable toolbar)
const initialSearch = ref(props.filters?.search || "");
//Open drawer create client
const openDrawerCreateClient = () => {
@@ -105,74 +87,86 @@ const fmtCurrency = (v) => {
<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">
<div class="mx-auto max-w-4x1 py-3 space-y-3">
<!-- Top actions -->
<div class="flex items-center justify-between gap-3">
<PrimaryButton @click="openDrawerCreateClient" class="bg-blue-400"
<PrimaryButton
@click="openDrawerCreateClient"
class="bg-blue-600 hover:bg-blue-700"
>Dodaj</PrimaryButton
>
<input
v-model="search"
type="text"
placeholder="Iskanje po 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 mt-3">
<table class="min-w-full text-left text-sm">
<thead>
<tr class="border-b">
<th class="py-2 pr-4">Št.</th>
<th class="py-2 pr-4">Naročnik</th>
<th class="py-2 pr-4 text-right">Primeri z aktivnimi pogodbami</th>
<th class="py-2 pr-4 text-right">Skupaj stanje</th>
</tr>
</thead>
<tbody>
<tr
v-for="client in clients.data"
:key="client.uuid"
class="border-b last:border-0"
<!-- DataTable (server-side) -->
<DataTableServer
:columns="[
{ key: 'nu', label: 'Št.', sortable: false, class: 'w-40' },
{ key: 'name', label: 'Naročnik', sortable: false },
{
key: 'cases',
label: 'Primeri z aktivnimi pogodbami',
sortable: false,
align: 'right',
},
{
key: 'balance',
label: 'Skupaj stanje',
sortable: false,
align: 'right',
},
]"
:rows="clients.data || []"
:meta="{
current_page: clients.current_page,
per_page: clients.per_page,
total: clients.total,
last_page: clients.last_page,
}"
:sort="{
key: props.filters?.sort || null,
direction: props.filters?.direction || null,
}"
:search="initialSearch"
route-name="client"
row-key="uuid"
:page-size-options="[clients.per_page]"
:only-props="['clients']"
>
<template #cell-nu="{ row }">
{{ row.person?.nu || "-" }}
</template>
<template #cell-name="{ row }">
<Link
:href="route('client.show', { uuid: row.uuid })"
class="text-indigo-600 hover:underline"
>
{{ row.person?.full_name || "-" }}
</Link>
<div v-if="!row.person" class="mt-1">
<PrimaryButton
class="!py-0.5 !px-2 bg-red-500 hover:bg-red-600 text-xs"
@click.prevent="
router.post(route('client.emergencyPerson', { uuid: row.uuid }))
"
>Add Person</PrimaryButton
>
<td class="py-2 pr-4">{{ client.person?.nu || "-" }}</td>
<td class="py-2 pr-4">
<Link
:href="route('client.show', { uuid: client.uuid })"
class="text-indigo-600 hover:underline"
>
{{ client.person?.full_name || "-" }}
</Link>
<div v-if="!client.person" class="mt-1">
<PrimaryButton
class="!py-0.5 !px-2 bg-red-500 hover:bg-red-600 text-xs"
@click.prevent="
router.post(
route('client.emergencyPerson', { uuid: client.uuid })
)
"
>Add Person</PrimaryButton
>
</div>
</td>
<td class="py-2 pr-4 text-right">
{{ client.cases_with_active_contracts_count ?? 0 }}
</td>
<td class="py-2 pr-4 text-right">
{{ fmtCurrency(client.active_contracts_balance_sum) }}
</td>
</tr>
<tr v-if="!clients.data || clients.data.length === 0">
<td colspan="4" class="py-4 text-gray-500">Ni zadetkov.</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>
<template #cell-cases="{ row }">
<div class="text-right">
{{ row.cases_with_active_contracts_count ?? 0 }}
</div>
</template>
<template #cell-balance="{ row }">
<div class="text-right">
{{ fmtCurrency(row.active_contracts_balance_sum) }}
</div>
</template>
<template #empty>
<div class="p-6 text-center text-gray-500">Ni zadetkov.</div>
</template>
</DataTableServer>
</div>
<Pagination
:links="clients.links"
:from="clients.from"
:to="clients.to"
:total="clients.total"
/>
</div>
</div>
</div>
resources/js/Pages/Client/Show.vue
+99 -92
View File
@@ -1,13 +1,12 @@
<script setup>
import AppLayout from "@/Layouts/AppLayout.vue";
import PrimaryButton from "@/Components/PrimaryButton.vue";
import { ref, watch } from "vue";
import { Link, router } from "@inertiajs/vue3";
import { ref } from "vue";
import { Link } from "@inertiajs/vue3";
import SectionTitle from "@/Components/SectionTitle.vue";
import PersonInfoGrid from "@/Components/PersonInfoGrid.vue";
import Pagination from "@/Components/Pagination.vue";
import FormCreateCase from "./Partials/FormCreateCase.vue";
import { debounce } from "lodash";
import DataTableServer from "@/Components/DataTable/DataTableServer.vue";
const props = defineProps({
client: Object,
@@ -17,25 +16,9 @@ const props = defineProps({
types: Object,
});
// Table-friendly search for client cases
// Removed page-level search; DataTable or server can handle filtering elsewhere if needed
// DataTable search state
const search = ref(props.filters?.search || "");
const applySearch = debounce((term) => {
const params = Object.fromEntries(
new URLSearchParams(window.location.search).entries()
);
if (term) {
params.search = term;
} else {
delete params.search;
}
delete params.page;
router.get(route("client.show", { uuid: props.client.uuid }), params, {
preserveState: true,
replace: true,
preserveScroll: true,
});
}, 300);
watch(search, (v) => applySearch(v));
const drawerCreateCase = ref(false);
@@ -60,19 +43,36 @@ const openDrawerCreateCase = () => {
</template>
</SectionTitle>
</div>
<div class="mt-2 flex items-center gap-3 text-sm">
<Link
:href="route('client.show', { uuid: client.uuid })"
class="px-2 py-1 rounded hover:underline"
>Primeri</Link
>
<span class="text-gray-300">|</span>
<Link
:href="route('client.contracts', { uuid: client.uuid })"
class="px-2 py-1 rounded text-indigo-600 hover:underline"
>Pogodbe</Link
>
</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>
@@ -97,65 +97,72 @@ const openDrawerCreateCase = () => {
<PrimaryButton @click="openDrawerCreateCase" class="bg-blue-400"
>Dodaj</PrimaryButton
>
<input
v-model="search"
type="text"
placeholder="Iskanje po 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 mt-3">
<table class="min-w-full text-left text-sm">
<thead>
<tr class="border-b">
<th class="py-2 pr-4">Št.</th>
<th class="py-2 pr-4">Primer</th>
<th class="py-2 pr-4">Davčna</th>
<th class="py-2 pr-4 text-right">Aktivne pogodbe</th>
<th class="py-2 pr-4 text-right">Skupaj stanje</th>
</tr>
</thead>
<tbody>
<tr
v-for="c in client_cases.data"
:key="c.uuid"
class="border-b last:border-0"
>
<td class="py-2 pr-4">{{ c.person?.nu || "-" }}</td>
<td class="py-2 pr-4">
<Link
:href="route('clientCase.show', { client_case: c.uuid })"
class="text-indigo-600 hover:underline"
>
{{ c.person?.full_name || "-" }}
</Link>
</td>
<td class="py-2 pr-4">{{ c.person?.tax_number || "-" }}</td>
<td class="py-2 pr-4 text-right">
{{ c.active_contracts_count ?? 0 }}
</td>
<td class="py-2 pr-4 text-right">
{{
new Intl.NumberFormat("sl-SI", {
style: "currency",
currency: "EUR",
}).format(Number(c.active_contracts_balance_sum ?? 0))
}}
</td>
</tr>
<tr v-if="!client_cases.data || client_cases.data.length === 0">
<td colspan="5" class="py-4 text-gray-500">Ni zadetkov.</td>
</tr>
</tbody>
</table>
</div>
<DataTableServer
class="mt-3"
:columns="[
{ key: 'nu', label: 'Št.', sortable: false, class: 'w-40' },
{ key: 'case', label: 'Primer', sortable: false },
{ key: 'tax', label: 'Davčna', sortable: false },
{
key: 'active_contracts',
label: 'Aktivne pogodbe',
sortable: false,
align: 'right',
},
{
key: 'balance',
label: 'Skupaj stanje',
sortable: false,
align: 'right',
},
]"
:rows="client_cases.data || []"
:meta="{
current_page: client_cases.current_page,
per_page: client_cases.per_page,
total: client_cases.total,
last_page: client_cases.last_page,
}"
route-name="client.show"
:route-params="{ uuid: client.uuid }"
row-key="uuid"
:search="search"
:only-props="['client_cases']"
>
<template #cell-nu="{ row }">
{{ row.person?.nu || "-" }}
</template>
<template #cell-case="{ row }">
<Link
:href="route('clientCase.show', { client_case: row.uuid })"
class="text-indigo-600 hover:underline"
>
{{ row.person?.full_name || "-" }}
</Link>
</template>
<template #cell-tax="{ row }">
{{ row.person?.tax_number || "-" }}
</template>
<template #cell-active_contracts="{ row }">
<div class="text-right">{{ row.active_contracts_count ?? 0 }}</div>
</template>
<template #cell-balance="{ row }">
<div class="text-right">
{{
new Intl.NumberFormat("sl-SI", {
style: "currency",
currency: "EUR",
}).format(Number(row.active_contracts_balance_sum ?? 0))
}}
</div>
</template>
<template #empty>
<div class="p-6 text-center text-gray-500">Ni zadetkov.</div>
</template>
</DataTableServer>
</div>
<Pagination
:links="client_cases.links"
:from="client_cases.from"
:to="client_cases.to"
:total="client_cases.total"
/>
<!-- Pagination handled by DataTableServer -->
</div>
</div>
</div>
resources/js/Pages/Imports/Import.vue
+158
View File
@@ -82,6 +82,74 @@ const previewColumns = ref([]);
const previewTruncated = ref(false);
const previewLimit = ref(200);
// Import options (persisted on Import): show_missing and reactivate
const showMissingEnabled = ref(Boolean(props.import?.show_missing ?? false));
const reactivateEnabled = ref(Boolean(props.import?.reactivate ?? false));
async function saveImportOptions() {
if (!importId.value) return;
try {
await axios.post(
route("imports.options", { import: importId.value }),
{
show_missing: !!showMissingEnabled.value,
// keep existing reactivate value if UI doesn't expose it here
reactivate: !!reactivateEnabled.value,
},
{ headers: { Accept: "application/json" }, withCredentials: true }
);
} catch (e) {
console.error(
"Save import options failed",
e.response?.status || "",
e.response?.data || e
);
}
}
// Missing contracts (post-finish) UI state
const showMissingContracts = ref(false);
const missingContractsLoading = ref(false);
const missingContracts = ref([]);
const contractRefIsKeyref = computed(() => {
return (persistedMappings.value || []).some((m) => {
const tf = String(m?.target_field || "")
.toLowerCase()
.trim();
const am = String(m?.apply_mode || "")
.toLowerCase()
.trim();
return ["contract.reference", "contracts.reference"].includes(tf) && am === "keyref";
});
});
const canShowMissingButton = computed(() => {
return contractRefIsKeyref.value && !!showMissingEnabled.value;
});
async function openMissingContracts() {
if (!importId.value || !contractRefIsKeyref.value) return;
showMissingContracts.value = true;
missingContractsLoading.value = true;
try {
const { data } = await axios.get(
route("imports.missing-contracts", { import: importId.value }),
{
headers: { Accept: "application/json" },
withCredentials: true,
}
);
missingContracts.value = Array.isArray(data?.missing) ? data.missing : [];
} catch (e) {
console.error(
"Missing contracts fetch failed",
e.response?.status || "",
e.response?.data || e
);
missingContracts.value = [];
} finally {
missingContractsLoading.value = false;
}
}
// Determine if all detected columns are mapped with entity+field
function evaluateMappingSaved() {
console.log("here the evaluation happen of mapping save!");
@@ -1028,6 +1096,11 @@ async function fetchSimulation() {
:class="['px-2 py-0.5 rounded-full text-xs font-medium', statusInfo.classes]"
>{{ statusInfo.label }}</span
>
<span
v-if="showMissingEnabled"
class="text-[10px] px-1 py-0.5 rounded bg-amber-100 text-amber-700 align-middle"
>seznam manjkajočih</span
>
</div>
</div>
</template>
@@ -1065,6 +1138,22 @@ async function fetchSimulation() {
<span class="font-medium">{{ props.import?.valid_rows ?? "—" }}</span>
</div>
</div>
<div class="mt-3 flex items-center gap-2">
<button
class="px-3 py-1.5 bg-gray-700 text-white text-xs rounded"
@click.prevent="openPreview"
>
Ogled CSV
</button>
<button
v-if="canShowMissingButton"
class="px-3 py-1.5 bg-indigo-600 text-white text-xs rounded"
@click.prevent="openMissingContracts"
title="Prikaži aktivne pogodbe, ki niso bile prisotne v uvozu (samo keyref)"
>
Ogled manjkajoče
</button>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<TemplateControls
@@ -1096,6 +1185,24 @@ async function fetchSimulation() {
"
@apply-template="applyTemplateToImport"
/>
<!-- Import options -->
<div v-if="!isCompleted" class="mt-2 p-3 rounded border bg-gray-50">
<div class="flex items-center gap-3">
<label class="inline-flex items-center text-sm text-gray-700">
<input
type="checkbox"
class="rounded mr-2"
v-model="showMissingEnabled"
@change="saveImportOptions"
/>
<span>Seznam manjkajočih (po končanem uvozu)</span>
</label>
</div>
<p class="mt-1 text-xs text-gray-500">
Ko je omogočeno in je "contract.reference" nastavljen na keyref, bo po
končanem uvozu na voljo gumb za ogled pogodb, ki jih ni v datoteki.
</p>
</div>
<ChecklistSteps :steps="stepStates" :missing-critical="missingCritical" />
</div>
@@ -1173,6 +1280,57 @@ async function fetchSimulation() {
@change-limit="(val) => (previewLimit = val)"
@refresh="fetchPreview"
/>
<!-- Missing contracts modal -->
<Modal
:show="showMissingContracts"
max-width="2xl"
@close="showMissingContracts = false"
>
<div class="p-4 max-h-[70vh] overflow-auto">
<div class="flex items-center justify-between mb-4">
<h3 class="font-semibold text-lg">Manjkajoče pogodbe (aktivne, ne-arhivirane)</h3>
<button
class="text-gray-500 hover:text-gray-700"
@click.prevent="showMissingContracts = false"
>
Zapri
</button>
</div>
<div v-if="missingContractsLoading" class="py-8 text-center text-sm text-gray-500">
Nalagam …
</div>
<div v-else>
<div v-if="!missingContracts.length" class="py-6 text-sm text-gray-600">
Ni zadetkov.
</div>
<ul v-else class="divide-y divide-gray-200">
<li
v-for="row in missingContracts"
:key="row.uuid"
class="py-2 text-sm flex items-center justify-between"
>
<div class="min-w-0">
<div class="font-mono text-gray-800">{{ row.reference }}</div>
<div class="text-xs text-gray-500 truncate">
<span class="font-medium text-gray-600">Primer: </span>
<span>{{ row.full_name || "—" }}</span>
<span v-if="row.balance_amount != null" class="ml-2"
>• {{ formatMoney(row.balance_amount) }}</span
>
</div>
</div>
<div class="flex-shrink-0">
<a
:href="route('clientCase.show', row.case_uuid)"
class="text-blue-600 hover:underline text-xs"
>Odpri primer</a
>
</div>
</li>
</ul>
</div>
</div>
</Modal>
<SimulationModal
:show="showPaymentSim"
:rows="paymentSimRows"
resources/js/Pages/Imports/Partials/SimulationModal.vue
+32 -2
View File
@@ -11,10 +11,21 @@ const props = defineProps({
limit: { type: Number, default: 50 },
loading: { type: Boolean, default: false },
entities: { type: Array, default: () => [] },
// passthrough verbose from parent to render extra sources in table
verbose: { type: Boolean, default: false },
});
// Emits
const emit = defineEmits(["close", "update:limit"]);
const emit = defineEmits(["close", "update:limit", "toggle-verbose"]);
// Local handlers for header controls
function onLimit(e) {
const val = Number(e?.target?.value ?? props.limit ?? 50);
emit("update:limit", isNaN(val) ? 50 : val);
}
function toggleVerbose() {
emit("toggle-verbose");
}
// Map technical entity keys to localized labels
const entityLabelMap = {
@@ -70,6 +81,8 @@ const entitiesWithRows = computed(() => {
const activeEntity = ref(null);
const hideChain = ref(false);
const showOnlyChanged = ref(false);
// Show only rows skipped due to missing contract.reference in keyref mode (contract/account)
const showOnlyKeyrefSkipped = ref(false);
watch(
entitiesWithRows,
(val) => {
@@ -156,6 +169,15 @@ const visibleRows = computed(() => {
.filter((r) => {
if (!r.entities || !r.entities[activeEntity.value]) return false;
const ent = r.entities[activeEntity.value];
// Filter: only rows explicitly skipped due to keyref missing
if (showOnlyKeyrefSkipped.value) {
if (Array.isArray(ent)) {
const anySkipped = ent.some((i) => i && i.skipped_due_to_keyref);
if (!anySkipped) return false;
} else {
if (!ent.skipped_due_to_keyref) return false;
}
}
if (!Array.isArray(ent)) {
if (hideChain.value && ent.existing_chain) return false;
}
@@ -286,7 +308,7 @@ function referenceOf(entityName, ent) {
class="text-[11px] px-2 py-1 rounded border bg-white hover:bg-gray-50"
@click="toggleVerbose"
>
{{ verbose ? "Manj" : "Več" }} podrobnosti
{{ props.verbose ? "Manj" : "Več" }} podrobnosti
</button>
<label class="flex items-center gap-1 text-[11px] text-gray-600">
<input type="checkbox" v-model="hideChain" class="rounded border-gray-300" />
@@ -300,6 +322,14 @@ function referenceOf(entityName, ent) {
/>
Samo spremenjeni
</label>
<label class="flex items-center gap-1 text-[11px] text-gray-600" title="Prikaži le vrstice preskočene zaradi manjkajoče contract.reference v načinu keyref (pogodbe/računi)">
<input
type="checkbox"
v-model="showOnlyKeyrefSkipped"
class="rounded border-gray-300"
/>
Samo preskočene (keyref)
</label>
<button
type="button"
class="text-[11px] px-2 py-1 rounded bg-gray-800 text-white hover:bg-gray-700"
resources/js/Pages/Notifications/Unread.vue
+102
View File
@@ -0,0 +1,102 @@
<script setup>
import AppLayout from '@/Layouts/AppLayout.vue'
import SectionTitle from '@/Components/SectionTitle.vue'
import DataTableServer from '@/Components/DataTable/DataTableServer.vue'
import { Link, router } from '@inertiajs/vue3'
const props = defineProps({
activities: { type: Object, required: true },
today: { type: String, required: true },
})
function fmtDate(d) {
if (!d) return ''
try { return new Date(d).toLocaleDateString('sl-SI') } catch { return String(d) }
}
function fmtEUR(value) {
if (value === null || value === undefined) return '—'
const num = typeof value === 'string' ? Number(value) : value
if (Number.isNaN(num)) return String(value)
const formatted = new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR', minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(num)
return formatted.replace('\u00A0', ' ')
}
async function markRead(id) {
try {
await window.axios.post(route('notifications.activity.read'), { activity_id: id })
router.reload({ only: ['activities'] })
} catch (e) {}
}
</script>
<template>
<AppLayout title="Obvestila">
<template #header></template>
<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">
<div class="pb-3">
<SectionTitle>
<template #title>Neprikazana obvestila</template>
<template #description>Do danes: {{ fmtDate(today) }}</template>
</SectionTitle>
</div>
<DataTableServer
:columns="[
{ key: 'what', label: 'Kaj', sortable: false },
{ key: 'balance', label: 'Stanje', sortable: false, align: 'right', class: 'w-40' },
{ key: 'due', label: 'Zapadlost', sortable: true, class: 'w-28' },
]"
:rows="activities.data || []"
:meta="{
current_page: activities.current_page,
per_page: activities.per_page,
total: activities.total,
last_page: activities.last_page,
}"
route-name="notifications.unread"
page-param-name="unread-page"
:only-props="['activities']"
>
<template #cell-what="{ row }">
<div class="font-medium text-gray-800 truncate">
<template v-if="row.contract?.uuid">
Pogodba:
<Link v-if="row.contract?.client_case?.uuid" :href="route('clientCase.show', { client_case: row.contract.client_case.uuid })" class="text-indigo-600 hover:underline">
{{ row.contract?.reference || '—' }}
</Link>
<span v-else>{{ row.contract?.reference || '—' }}</span>
</template>
<template v-else>
Primer:
<Link v-if="row.client_case?.uuid" :href="route('clientCase.show', { client_case: row.client_case.uuid })" class="text-indigo-600 hover:underline">
{{ row.client_case?.person?.full_name || '—' }}
</Link>
<span v-else>{{ row.client_case?.person?.full_name || '—' }}</span>
</template>
</div>
</template>
<template #cell-balance="{ row }">
<div class="text-right">
<span v-if="row.contract">{{ fmtEUR(row.contract?.account?.balance_amount) }}</span>
<span v-else>—</span>
</div>
</template>
<template #cell-due="{ row }">
{{ fmtDate(row.due_date) }}
</template>
<template #actions="{ row }">
<button type="button" class="text-[12px] text-gray-500 hover:text-gray-700" @click="markRead(row.id)">Označi kot prikazano</button>
</template>
<template #empty>
<div class="p-6 text-center text-gray-500">Trenutno ni neprikazanih obvestil.</div>
</template>
</DataTableServer>
</div>
</div>
</div>
</div>
</AppLayout>
</template>
resources/js/Pages/Testing/Index.vue
+85 -8
View File
@@ -1,21 +1,98 @@
<script setup>
import AppLayout from '@/Layouts/AppLayout.vue'
import { ref } from "vue";
import AppLayout from "@/Layouts/AppLayout.vue";
import DataTableClient from "@/Components/DataTable/DataTableClient.vue";
const props = defineProps({
example: { type: String, default: 'Demo' },
})
example: { type: String, default: "Demo" },
});
// Dummy columns
const columns = [
{ key: "id", label: "ID", sortable: true, class: "w-16" },
{ key: "name", label: "Ime", sortable: true },
{ key: "email", label: "Email", sortable: true },
{
key: "balance",
label: "Stanje",
sortable: true,
align: "right",
formatter: (row) =>
new Intl.NumberFormat("de-DE", { style: "currency", currency: "EUR" }).format(
row.balance
),
},
{ key: "created_at", label: "Ustvarjeno", sortable: true },
];
// Generate some dummy rows
function makeRow(i) {
const bal = Math.round((Math.random() * 5000 - 1000) * 100) / 100;
const dt = new Date(Date.now() - Math.floor(Math.random() * 1000 * 60 * 60 * 24 * 90));
const iso = dt.toISOString().slice(0, 10);
return {
id: i + 1,
name: `Uporabnik ${i + 1}`,
email: `user${i + 1}@example.com`,
balance: bal,
created_at: iso,
};
}
// Increase dataset to visualize multi-page pagination (e.g., 100 pages at size 10)
const rows = ref(Array.from({ length: 1000 }, (_, i) => makeRow(i)));
// Controls (two-way bound)
const sort = ref({ key: null, direction: null });
const search = ref("");
const page = ref(1);
const pageSize = ref(10);
const searchKeys = ["name", "email"];
function onRowClick(row) {
// no-op demo; could show toast or details
console.debug("Row clicked:", row);
}
</script>
<template>
<AppLayout title="Testing Sandbox">
<div class="space-y-6">
<div class="space-y-6 p-6">
<div class="prose dark:prose-invert max-w-none">
<h1 class="text-2xl font-semibold">Testing Page</h1>
<p>This page is for quick UI or component experiments. Remove or adapt as needed.</p>
<p>
This page is for quick UI or component experiments. Remove or adapt as needed.
</p>
<p class="text-slate-700 dark:text-slate-200 text-sm">
Prop example value: <span class="font-mono">{{ props.example }}</span>
</p>
</div>
<div class="rounded-lg border border-slate-200 dark:border-slate-700 bg-white/70 dark:bg-slate-800/60 p-4 shadow-sm">
<h2 class="text-sm font-semibold tracking-wide uppercase text-slate-500 dark:text-slate-400 mb-3">Example Area</h2>
<p class="text-slate-700 dark:text-slate-200 text-sm">Prop example value: <span class="font-mono">{{ props.example }}</span></p>
<div
class="rounded-lg border border-slate-200 dark:border-slate-700 bg-white/70 dark:bg-slate-800/60 p-4 shadow-sm"
>
<h2
class="text-sm font-semibold tracking-wide uppercase text-slate-500 dark:text-slate-400 mb-3"
>
DataTable (Client-side)
</h2>
<DataTableClient
:columns="columns"
:rows="rows"
v-model:sort="sort"
v-model:search="search"
v-model:page="page"
v-model:pageSize="pageSize"
:search-keys="searchKeys"
@row:click="onRowClick"
>
<template #actions="{ row }">
<button
class="px-2 py-1 rounded border border-gray-300 hover:bg-gray-50 text-xs"
>
Akcija
</button>
</template>
</DataTableClient>
</div>
</div>
</AppLayout>