Changes
This commit is contained in:
Simon Pocrnjič
@@ -1,15 +1,40 @@
|
||||
<script setup>
|
||||
import AppLayout from "@/Layouts/AppLayout.vue";
|
||||
import SectionTitle from "@/Components/SectionTitle.vue";
|
||||
import DataTableServer from "@/Components/DataTable/DataTableServer.vue";
|
||||
import DataTable from "@/Components/DataTable/DataTableNew2.vue";
|
||||
import { Link, router } from "@inertiajs/vue3";
|
||||
import { ref, computed, watch } from "vue";
|
||||
import Dropdown from "@/Components/Dropdown.vue";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/Components/ui/card";
|
||||
import { Button } from "@/Components/ui/button";
|
||||
import { Label } from "@/Components/ui/label";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/Components/ui/select";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/Components/ui/dropdown-menu";
|
||||
import { Checkbox } from "@/Components/ui/checkbox";
|
||||
import { Bell, BellOff, Check, ChevronDown, X, Inbox } from "lucide-vue-next";
|
||||
import TableActions from "@/Components/DataTable/TableActions.vue";
|
||||
import ActionMenuItem from "@/Components/DataTable/ActionMenuItem.vue";
|
||||
import { number } from "zod";
|
||||
import { toNumber } from "lodash";
|
||||
|
||||
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: () => [] },
|
||||
});
|
||||
|
||||
@@ -21,6 +46,7 @@ function fmtDate(d) {
|
||||
return String(d);
|
||||
}
|
||||
}
|
||||
|
||||
function fmtEUR(value) {
|
||||
if (value === null || value === undefined) return "—";
|
||||
const num = typeof value === "string" ? Number(value) : value;
|
||||
@@ -34,13 +60,12 @@ function fmtEUR(value) {
|
||||
return formatted.replace("\u00A0", " ");
|
||||
}
|
||||
|
||||
// --- Client filter (like Segments/Show.vue) ---
|
||||
// Client filter
|
||||
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
|
||||
@@ -72,43 +97,20 @@ watch(selectedClient, (val) => {
|
||||
});
|
||||
});
|
||||
|
||||
// Row selection - connected to DataTableNew2's built-in selection
|
||||
const selectedRows = ref([]);
|
||||
const dataTableRef = ref(null);
|
||||
|
||||
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 handleSelectionChange(selectedKeys) {
|
||||
selectedRows.value = selectedKeys.map((val, i) => {
|
||||
const nu = toNumber(val);
|
||||
return props.activities.data[val].id;
|
||||
});
|
||||
|
||||
console.log(selectedRows.value);
|
||||
}
|
||||
|
||||
// Mark as read actions
|
||||
function markRead(id) {
|
||||
router.patch(
|
||||
route("notifications.activity.read"),
|
||||
@@ -130,143 +132,131 @@ function markReadBulk() {
|
||||
preserveScroll: true,
|
||||
onSuccess: () => {
|
||||
selectedRows.value = [];
|
||||
// Clear the selection state in DataTable
|
||||
if (dataTableRef.value) {
|
||||
dataTableRef.value.clearSelection();
|
||||
}
|
||||
},
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
// Table columns definition (select column is auto-generated by enableRowSelection)
|
||||
const columns = [
|
||||
{ key: "what", label: "Zadeva", sortable: false },
|
||||
{ key: "partner", label: "Partner", sortable: false },
|
||||
{ key: "balance", label: "Stanje", sortable: false, align: "right" },
|
||||
{ key: "due", label: "Zapadlost", sortable: false },
|
||||
{ key: "actions", label: "", sortable: false, hideable: false, align: "center" },
|
||||
];
|
||||
|
||||
const rows = computed(() => props.activities?.data || []);
|
||||
</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="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div
|
||||
class="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10"
|
||||
>
|
||||
<Bell class="h-5 w-5 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<CardTitle>Neprikazana obvestila</CardTitle>
|
||||
<CardDescription>Do danes: {{ fmtDate(today) }}</CardDescription>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent class="p-0">
|
||||
<!-- Client Filter -->
|
||||
<div class="mb-6 px-6 flex items-end gap-3">
|
||||
<div class="flex-1 max-w-sm space-y-2">
|
||||
<Label for="client-filter">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
|
||||
<Select v-model="selectedClient">
|
||||
<SelectTrigger id="client-filter">
|
||||
<SelectValue placeholder="Vsi partnerji" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem
|
||||
v-for="opt in clientOptions"
|
||||
:key="opt.value || opt.label"
|
||||
:value="opt.value"
|
||||
>
|
||||
{{ opt.label }}
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Button
|
||||
v-if="selectedClient"
|
||||
type="button"
|
||||
class="text-sm text-gray-600 hover:text-gray-900"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
@click="selectedClient = ''"
|
||||
title="Počisti filter"
|
||||
>
|
||||
Počisti
|
||||
</button>
|
||||
<X class="h-4 w-4" />
|
||||
</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,
|
||||
}"
|
||||
<!-- Data Table -->
|
||||
<DataTable
|
||||
ref="dataTableRef"
|
||||
:columns="columns"
|
||||
:data="rows"
|
||||
:meta="activities"
|
||||
route-name="notifications.unread"
|
||||
page-param-name="unread-page"
|
||||
:only-props="['activities']"
|
||||
:query="{ client: selectedClient || undefined }"
|
||||
:page-size="15"
|
||||
:page-size-options="[10, 15, 25, 50]"
|
||||
:show-pagination="true"
|
||||
:show-toolbar="true"
|
||||
:hoverable="true"
|
||||
:enable-row-selection="true"
|
||||
row-key="id"
|
||||
empty-text="Trenutno ni neprikazanih obvestil."
|
||||
@selection:change="handleSelectionChange"
|
||||
>
|
||||
<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>
|
||||
<!-- Bulk Actions Toolbar -->
|
||||
<template #toolbar-filters>
|
||||
<div v-if="selectedRows.length" class="flex items-center gap-3">
|
||||
<div class="text-sm text-muted-foreground">
|
||||
Izbrano:
|
||||
<span class="font-medium text-foreground">{{
|
||||
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"
|
||||
>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger as-child>
|
||||
<Button variant="outline" size="sm" class="gap-2">
|
||||
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"
|
||||
>
|
||||
<ChevronDown class="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="start">
|
||||
<DropdownMenuItem @click="markReadBulk">
|
||||
<Check class="h-4 w-4" />
|
||||
Označi kot prebrano
|
||||
</button>
|
||||
</template>
|
||||
</Dropdown>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</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>
|
||||
|
||||
<!-- What Column -->
|
||||
<template #cell-what="{ row }">
|
||||
<div class="font-medium text-gray-800 truncate">
|
||||
<div class="font-medium truncate">
|
||||
<template v-if="row.contract?.uuid">
|
||||
Pogodba:
|
||||
<span class="text-muted-foreground">Pogodba:</span>
|
||||
<Link
|
||||
v-if="row.contract?.client_case?.uuid"
|
||||
:href="
|
||||
@@ -274,27 +264,31 @@ function markReadBulk() {
|
||||
client_case: row.contract.client_case.uuid,
|
||||
})
|
||||
"
|
||||
class="text-indigo-600 hover:underline"
|
||||
class="ml-1 text-primary hover:underline"
|
||||
>
|
||||
{{ row.contract?.reference || "—" }}
|
||||
</Link>
|
||||
<span v-else>{{ row.contract?.reference || "—" }}</span>
|
||||
<span v-else class="ml-1">{{ row.contract?.reference || "—" }}</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
Primer:
|
||||
<span class="text-muted-foreground">Primer:</span>
|
||||
<Link
|
||||
v-if="row.client_case?.uuid"
|
||||
:href="
|
||||
route('clientCase.show', { client_case: row.client_case.uuid })
|
||||
"
|
||||
class="text-indigo-600 hover:underline"
|
||||
class="ml-1 text-primary hover:underline"
|
||||
>
|
||||
{{ row.client_case?.person?.full_name || "—" }}
|
||||
</Link>
|
||||
<span v-else>{{ row.client_case?.person?.full_name || "—" }}</span>
|
||||
<span v-else class="ml-1">{{
|
||||
row.client_case?.person?.full_name || "—"
|
||||
}}</span>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Partner Column -->
|
||||
<template #cell-partner="{ row }">
|
||||
<div class="truncate">
|
||||
{{
|
||||
@@ -304,34 +298,51 @@ function markReadBulk() {
|
||||
}}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Balance Column -->
|
||||
<template #cell-balance="{ row }">
|
||||
<div class="text-right">
|
||||
<div class="text-right font-medium">
|
||||
<span v-if="row.contract">{{
|
||||
fmtEUR(row.contract?.account?.balance_amount)
|
||||
}}</span>
|
||||
<span v-else>—</span>
|
||||
<span v-else class="text-muted-foreground">—</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Due Date Column -->
|
||||
<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 class="text-sm">
|
||||
{{ fmtDate(row.due_date) }}
|
||||
</div>
|
||||
</template>
|
||||
</DataTableServer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions Column -->
|
||||
<template #cell-actions="{ row }">
|
||||
<TableActions>
|
||||
<ActionMenuItem @click="markRead(row.id)" label="Označi kot prebrano">
|
||||
<BellOff class="mr-2 h-4 w-4" />
|
||||
Označi kot prebrano
|
||||
</ActionMenuItem>
|
||||
</TableActions>
|
||||
</template>
|
||||
|
||||
<!-- Empty State -->
|
||||
<template #empty>
|
||||
<div class="flex flex-col items-center justify-center py-12 text-center">
|
||||
<div
|
||||
class="flex h-20 w-20 items-center justify-center rounded-full bg-muted"
|
||||
>
|
||||
<Inbox class="h-10 w-10 text-muted-foreground" />
|
||||
</div>
|
||||
<h3 class="mt-4 text-lg font-semibold">Ni neprikazanih obvestil</h3>
|
||||
<p class="mt-2 text-sm text-muted-foreground">
|
||||
Trenutno nimate nobenih neprikazanih obvestil.
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
</DataTable>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</AppLayout>
|
||||
|
||||
Reference in New Issue
Block a user