opendesk

1<template>
2  <div class="flex items-center justify-between gap-2 px-4 py-2">
3    <TabButtons v-model="notificationStore.readFilter" :options="readOptions" />
4    <Dropdown :options="categoryOptions" align="end">
5      <Button :label="categoryLabel">
6        <template #prefix>
7          <LucideList class="h-4 w-4" />
8        </template>
9        <template #suffix>
10          <LucideChevronDown class="h-4 w-4" />
11        </template>
12      </Button>
13    </Dropdown>
14  </div>
15</template>
16
17<script setup lang="ts">
18import { useNotificationStore } from "@/stores/notification";
19import { __ } from "@/translation";
20import { Button, Dropdown, TabButtons } from "frappe-ui";
21import { computed } from "vue";
22import LucideChevronDown from "~icons/lucide/chevron-down";
23import LucideList from "~icons/lucide/list";
24
25const notificationStore = useNotificationStore();
26
27const readOptions = [
28  { label: __("All"), value: "all" },
29  { label: __("Unread"), value: "unread" },
30];
31
32// Notification Log types opendesk produces; core writes Mention and Assignment
33const categories = [
34  { label: __("All categories"), value: "" },
35  { label: __("Mentions"), value: "Mention" },
36  { label: __("Assignments"), value: "Assignment" },
37  { label: __("Reactions"), value: "Reaction" },
38  { label: __("Reopened tickets"), value: "Ticket Reopened" },
39];
40const categoryOptions = categories.map((c) => ({
41  label: c.label,
42  onClick: () => (notificationStore.category = c.value),
43}));
44const categoryLabel = computed(
45  () => categories.find((c) => c.value === notificationStore.category)?.label
46);
47</script>
48