opendesk

1<template>
2  <LayoutHeader>
3    <template #left-header>
4      <Breadcrumbs
5        :items="[
6          { label: __('Notifications'), route: { name: 'Notifications' } },
7        ]"
8      />
9    </template>
10    <template #right-header>
11      <Tooltip :text="__('Mark all as read')">
12        <div>
13          <Button
14            :label="__('Mark all as read')"
15            @click="() => controller.markAllAsRead()"
16          >
17            <template #prefix>
18              <LucideCheckCheck class="h-4 w-4" />
19            </template>
20          </Button>
21        </div>
22      </Tooltip>
23    </template>
24  </LayoutHeader>
25  <NotificationPanel
26    v-bind="controller"
27    @mark-as-read="handleNotificationClick"
28    @mark-all-as-read="controller.markAllAsRead"
29    @load-more="controller.loadMore"
30  >
31    <template #header><NotificationFilters /></template>
32    <template #empty>
33      <div class="flex flex-1 flex-col items-center gap-2 py-12">
34        <LucideBell class="h-20 w-20 text-ink-gray-2" />
35        <div class="text-md-medium text-ink-gray-4">
36          {{ __("No new notifications") }}
37        </div>
38      </div>
39    </template>
40  </NotificationPanel>
41</template>
42<script setup lang="ts">
43import LayoutHeader from "@/components/LayoutHeader.vue";
44import NotificationFilters from "@/components/notifications/NotificationFilters.vue";
45import { useNotificationStore } from "@/stores/notification";
46import { __ } from "@/translation";
47import { NotificationLog, NotificationPanel } from "@framework/ui";
48import { Breadcrumbs, Tooltip } from "frappe-ui";
49import { onUnmounted } from "vue";
50import { useRouter } from "vue-router";
51import LucideBell from "~icons/lucide/bell";
52
53const notificationStore = useNotificationStore();
54const controller = notificationStore.controller;
55const router = useRouter();
56
57function handleNotificationClick(n: NotificationLog) {
58  controller.markAsRead(n.name);
59  const route = notificationStore.routeFor(n);
60  if (route) router.push(route);
61}
62
63onUnmounted(notificationStore.resetFilters);
64</script>
65