Notifications change
This commit is contained in:
Simon Pocrnjič
@@ -95,9 +95,15 @@ async function markRead(item) {
|
||||
</template>
|
||||
|
||||
<template #content>
|
||||
<div class="px-3 py-2 text-xs text-gray-400 border-b sticky top-0 bg-white z-10 flex items-center justify-between">
|
||||
<div
|
||||
class="px-3 py-2 text-xs text-gray-400 border-b sticky top-0 bg-white z-10 flex items-center justify-between"
|
||||
>
|
||||
<span>Zapadejo danes</span>
|
||||
<Link :href="route('notifications.unread')" class="text-indigo-600 hover:text-indigo-700">Vsa obvestila</Link>
|
||||
<Link
|
||||
:href="route('notifications.unread')"
|
||||
class="text-indigo-600 hover:text-indigo-700"
|
||||
>Vsa obvestila</Link
|
||||
>
|
||||
</div>
|
||||
<!-- Scrollable content area with max height -->
|
||||
<div class="max-h-80 overflow-auto">
|
||||
@@ -141,6 +147,19 @@ async function markRead(item) {
|
||||
<span v-else>{{ item.client_case?.person?.full_name || "—" }}</span>
|
||||
</template>
|
||||
</div>
|
||||
<!-- Partner / Client full name (use contract.client when available; fallback to case.client) -->
|
||||
<div
|
||||
class="text-xs text-gray-500 truncate"
|
||||
v-if="item.contract?.client?.person?.full_name"
|
||||
>
|
||||
Partner: {{ item.contract.client.person.full_name }}
|
||||
</div>
|
||||
<div
|
||||
class="text-xs text-gray-500 truncate"
|
||||
v-else-if="item.client_case?.client?.person?.full_name"
|
||||
>
|
||||
Partner: {{ item.client_case.client.person.full_name }}
|
||||
</div>
|
||||
<div class="text-gray-600 truncate" v-if="item.contract">
|
||||
{{ fmtEUR(item.contract?.account?.balance_amount) }}
|
||||
</div>
|
||||
|
||||
@@ -3,10 +3,13 @@ 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";
|
||||
|
||||
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) {
|
||||
@@ -30,6 +33,39 @@ function fmtEUR(value) {
|
||||
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 cc = row.contract?.client_case || row.client_case;
|
||||
return cc ? { value: cc.uuid, label: cc.person?.full_name || "(neznana stranka)" } : null;
|
||||
})
|
||||
.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,
|
||||
});
|
||||
});
|
||||
|
||||
async function markRead(id) {
|
||||
try {
|
||||
await window.axios.post(route("notifications.activity.read"), { activity_id: id });
|
||||
@@ -52,9 +88,36 @@ async function markRead(id) {
|
||||
</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: 'what', label: 'Zadeva', sortable: false },
|
||||
{ key: 'partner', label: 'Partner', sortable: false },
|
||||
{
|
||||
key: 'balance',
|
||||
label: 'Stanje',
|
||||
@@ -74,6 +137,7 @@ async function markRead(id) {
|
||||
route-name="notifications.unread"
|
||||
page-param-name="unread-page"
|
||||
:only-props="['activities']"
|
||||
:query="{ client: selectedClient || undefined }"
|
||||
>
|
||||
<template #cell-what="{ row }">
|
||||
<div class="font-medium text-gray-800 truncate">
|
||||
@@ -107,6 +171,15 @@ async function markRead(id) {
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<template #cell-partner="{ row }">
|
||||
<div class="truncate">
|
||||
{{
|
||||
(row.contract?.client_case?.person?.full_name) ||
|
||||
(row.client_case?.person?.full_name) ||
|
||||
'—'
|
||||
}}
|
||||
</div>
|
||||
</template>
|
||||
<template #cell-balance="{ row }">
|
||||
<div class="text-right">
|
||||
<span v-if="row.contract">{{
|
||||
|
||||
Reference in New Issue
Block a user