Updated Application icon and notifcation pagination items per page, and updated NotificationsBell
This commit is contained in:
Simon Pocrnjič
@@ -1,12 +1,12 @@
|
||||
<script setup>
|
||||
import { computed, onMounted, ref, watch } from "vue";
|
||||
import { usePage, Link, router } from "@inertiajs/vue3";
|
||||
import Dropdown from "@/Components/Dropdown.vue";
|
||||
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
|
||||
import { faBell } from "@fortawesome/free-solid-svg-icons";
|
||||
import { BellIcon } from "lucide-vue-next";
|
||||
import { Badge } from "@/Components/ui/badge";
|
||||
import { Button } from "@/Components/ui/button";
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "@/Components/ui/popover";
|
||||
import { ScrollArea } from "@/Components/ui/scroll-area";
|
||||
import { Separator } from "@/Components/ui/separator";
|
||||
|
||||
const page = usePage();
|
||||
const due = computed(
|
||||
@@ -83,12 +83,8 @@ function markRead(item) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Dropdown
|
||||
align="right"
|
||||
width="72"
|
||||
:content-classes="['p-0', 'bg-white', 'max-h-96', 'overflow-hidden']"
|
||||
>
|
||||
<template #trigger>
|
||||
<Popover>
|
||||
<PopoverTrigger as-child>
|
||||
<Button variant="ghost" size="default" class="relative">
|
||||
<BellIcon />
|
||||
|
||||
@@ -100,32 +96,30 @@ function markRead(item) {
|
||||
{{ count }}
|
||||
</Badge>
|
||||
</Button>
|
||||
</template>
|
||||
</PopoverTrigger>
|
||||
|
||||
<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"
|
||||
>
|
||||
<span>Zapadejo danes</span>
|
||||
<PopoverContent align="end" class="w-96 p-0">
|
||||
<div class="px-4 py-3 flex items-center justify-between border-b">
|
||||
<span class="text-sm font-medium">Zapadejo danes</span>
|
||||
<Link
|
||||
:href="route('notifications.unread')"
|
||||
class="text-indigo-600 hover:text-indigo-700"
|
||||
class="text-sm text-primary hover:underline"
|
||||
>Vsa obvestila</Link
|
||||
>
|
||||
</div>
|
||||
<!-- Scrollable content area with max height -->
|
||||
<div class="max-h-80 overflow-auto">
|
||||
<div v-if="!count" class="px-3 py-3 text-sm text-gray-500">
|
||||
Ni zapadlih aktivnosti danes.
|
||||
|
||||
<ScrollArea class="h-72">
|
||||
<div v-if="!count" class="px-4 py-8 text-center">
|
||||
<p class="text-sm text-muted-foreground">Ni zapadlih aktivnosti danes.</p>
|
||||
</div>
|
||||
<ul v-else class="divide-y">
|
||||
<li
|
||||
<div v-else class="divide-y">
|
||||
<div
|
||||
v-for="item in items"
|
||||
:key="item.id"
|
||||
class="px-3 py-2 text-sm flex items-start gap-2"
|
||||
class="px-4 py-3 flex items-start gap-3 hover:bg-accent/50 transition-colors"
|
||||
>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="font-medium text-gray-800 truncate">
|
||||
<div class="flex-1 min-w-0 space-y-1">
|
||||
<div class="font-medium truncate">
|
||||
<template v-if="item.contract?.uuid">
|
||||
Pogodba:
|
||||
<Link
|
||||
@@ -135,7 +129,7 @@ function markRead(item) {
|
||||
client_case: item.contract.client_case.uuid,
|
||||
})
|
||||
"
|
||||
class="text-indigo-600 hover:text-indigo-700 hover:underline"
|
||||
class="text-primary hover:underline"
|
||||
>
|
||||
{{ item.contract?.reference || "—" }}
|
||||
</Link>
|
||||
@@ -148,7 +142,7 @@ function markRead(item) {
|
||||
:href="
|
||||
route('clientCase.show', { client_case: item.client_case.uuid })
|
||||
"
|
||||
class="text-indigo-600 hover:text-indigo-700 hover:underline"
|
||||
class="text-primary hover:underline"
|
||||
>
|
||||
{{ item.client_case?.person?.full_name || "—" }}
|
||||
</Link>
|
||||
@@ -157,37 +151,38 @@ function markRead(item) {
|
||||
</div>
|
||||
<!-- Partner / Client full name (use contract.client when available; fallback to case.client) -->
|
||||
<div
|
||||
class="text-xs text-gray-500 truncate"
|
||||
class="text-xs text-muted-foreground 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"
|
||||
class="text-xs text-muted-foreground 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">
|
||||
<div class="text-sm truncate" v-if="item.contract">
|
||||
{{ fmtEUR(item.contract?.account?.balance_amount) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-end gap-1">
|
||||
<div class="text-xs text-gray-500 whitespace-nowrap">
|
||||
<div class="flex flex-col items-end gap-1.5 shrink-0">
|
||||
<div class="text-xs text-muted-foreground whitespace-nowrap">
|
||||
{{ fmtDate(item.due_date) }}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="text-[11px] text-gray-400 hover:text-gray-600"
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
class="h-6 px-2 text-xs"
|
||||
@click.stop="markRead(item)"
|
||||
title="Skrij obvestilo"
|
||||
>
|
||||
Skrij
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
</Dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user