103 lines
4.2 KiB
Vue
103 lines
4.2 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'
|
|
|
|
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>
|