339 lines
12 KiB
Vue
339 lines
12 KiB
Vue
<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";
|
|
import { ref, computed, watch } from "vue";
|
|
import Dropdown from "@/Components/Dropdown.vue";
|
|
|
|
const props = defineProps({
|
|
activities: { type: Object, required: true },
|
|
today: { type: String, required: true },
|
|
// Optional: full list of clients with unread items to populate filter dropdown
|
|
clients: { type: Array, default: () => [] },
|
|
});
|
|
|
|
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", " ");
|
|
}
|
|
|
|
// --- Client filter (like Segments/Show.vue) ---
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const initialClient = urlParams.get("client") || urlParams.get("client_id") || "";
|
|
const selectedClient = ref(initialClient);
|
|
|
|
const clientOptions = computed(() => {
|
|
// Prefer server-provided clients list; fallback to deriving from rows
|
|
const list =
|
|
Array.isArray(props.clients) && props.clients.length
|
|
? props.clients
|
|
: (Array.isArray(props.activities?.data) ? props.activities.data : [])
|
|
.map((row) => {
|
|
const client = row.contract?.client_case?.client || row.client_case?.client;
|
|
if (!client?.uuid) return null;
|
|
return {
|
|
value: client.uuid,
|
|
label: client.person?.full_name || "(neznana stranka)",
|
|
};
|
|
})
|
|
.filter(Boolean)
|
|
.reduce((acc, cur) => {
|
|
if (!acc.find((x) => x.value === cur.value)) acc.push(cur);
|
|
return acc;
|
|
}, []);
|
|
return list.sort((a, b) => (a.label || "").localeCompare(b.label || ""));
|
|
});
|
|
|
|
watch(selectedClient, (val) => {
|
|
const query = {};
|
|
if (val) query.client = val;
|
|
router.get(route("notifications.unread"), query, {
|
|
preserveState: true,
|
|
preserveScroll: true,
|
|
only: ["activities"],
|
|
replace: true,
|
|
});
|
|
});
|
|
|
|
const selectedRows = ref([]);
|
|
|
|
function toggleSelectAll() {
|
|
if (selectedRows.value.length === (props.activities.data?.length || 0)) {
|
|
selectedRows.value = [];
|
|
} else {
|
|
selectedRows.value = (props.activities.data || []).map((row) => row.id);
|
|
}
|
|
}
|
|
|
|
function toggleRowSelection(id) {
|
|
const idx = selectedRows.value.indexOf(id);
|
|
if (idx > -1) {
|
|
selectedRows.value.splice(idx, 1);
|
|
} else {
|
|
selectedRows.value.push(id);
|
|
}
|
|
}
|
|
|
|
function isRowSelected(id) {
|
|
return selectedRows.value.includes(id);
|
|
}
|
|
|
|
function isAllSelected() {
|
|
return (
|
|
(props.activities.data?.length || 0) > 0 &&
|
|
selectedRows.value.length === (props.activities.data?.length || 0)
|
|
);
|
|
}
|
|
|
|
function isIndeterminate() {
|
|
return (
|
|
selectedRows.value.length > 0 &&
|
|
selectedRows.value.length < (props.activities.data?.length || 0)
|
|
);
|
|
}
|
|
|
|
function markRead(id) {
|
|
router.patch(
|
|
route("notifications.activity.read"),
|
|
{ activity_id: id },
|
|
{
|
|
only: ["activities"],
|
|
preserveScroll: true,
|
|
}
|
|
);
|
|
}
|
|
|
|
function markReadBulk() {
|
|
if (!selectedRows.value.length) return;
|
|
router.patch(
|
|
route("notifications.activity.read"),
|
|
{ activity_ids: selectedRows.value },
|
|
{
|
|
only: ["activities"],
|
|
preserveScroll: true,
|
|
onSuccess: () => {
|
|
selectedRows.value = [];
|
|
},
|
|
}
|
|
);
|
|
}
|
|
</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>
|
|
|
|
<!-- Filters -->
|
|
<div class="mb-4 flex items-center gap-3">
|
|
<div class="flex-1 max-w-sm">
|
|
<label class="block text-sm font-medium text-gray-700 mb-1"
|
|
>Partner</label
|
|
>
|
|
<div class="flex items-center gap-2">
|
|
<select
|
|
v-model="selectedClient"
|
|
class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm"
|
|
>
|
|
<option value="">Vsi partnerji</option>
|
|
<option
|
|
v-for="opt in clientOptions"
|
|
:key="opt.value || opt.label"
|
|
:value="opt.value"
|
|
>
|
|
{{ opt.label }}
|
|
</option>
|
|
</select>
|
|
<button
|
|
v-if="selectedClient"
|
|
type="button"
|
|
class="text-sm text-gray-600 hover:text-gray-900"
|
|
@click="selectedClient = ''"
|
|
>
|
|
Počisti
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<DataTableServer
|
|
:columns="[
|
|
{ key: 'select', label: '', sortable: false, width: '50px' },
|
|
{ key: 'what', label: 'Zadeva', sortable: false },
|
|
{ key: 'partner', label: 'Partner', 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']"
|
|
:query="{ client: selectedClient || undefined }"
|
|
>
|
|
<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="markReadBulk"
|
|
>
|
|
Označi kot prebrano
|
|
</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.id)"
|
|
@change="toggleRowSelection(row.id)"
|
|
class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
|
|
/>
|
|
</template>
|
|
<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-partner="{ row }">
|
|
<div class="truncate">
|
|
{{
|
|
row.contract?.client_case?.client?.person?.full_name ||
|
|
row.client_case?.client?.person?.full_name ||
|
|
"—"
|
|
}}
|
|
</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 prebrano
|
|
</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>
|