feat(web): wip query api for notifications

web/components/Notifications/Item.vue

@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import {
   ArchiveBoxIcon,
-  TrashIcon,
-  EllipsisVerticalIcon,
   ShieldExclamationIcon,
   CheckBadgeIcon,
   ExclamationTriangleIcon,
@@ -14,18 +12,18 @@ import type { NotificationItemProps } from '~/types/ui/notification';
 const props = defineProps<NotificationItemProps>();
 
 const icon = computed<{ component: Component, color: string } | null>(() => {
-  switch (props.type) {
-    case 'success':
+  switch (props.importance) {
+    case 'INFO':
       return {
         component: CheckBadgeIcon,
         color: 'text-green-500',
       };
-    case 'warning':
+    case 'WARNING':
       return {
         component: ExclamationTriangleIcon,
         color: 'text-yellow-500',
       };
-    case 'alert':
+    case 'ALERT':
       return {
         component: ShieldExclamationIcon,
         color: 'text-red-500',
@@ -40,11 +38,11 @@ const icon = computed<{ component: Component, color: string } | null>(() => {
     <header class="w-full flex flex-row items-start justify-between gap-2">
       <h3 class="text-16px font-semibold leading-2 flex flex-row items-start gap-2">
         <component :is="icon.component" v-if="icon" class="size-6 shrink-0" :class="icon.color" />
-        <span>{{ event }} • {{ subject }}</span>
+        <span>{{ title }} • {{ subject }}</span>
       </h3>
 
       <div class="shrink-0 flex flex-row items-center justify-end gap-2 mt-1">
-        <p class="text-12px opacity-75">{{ date }}</p>
+        <p class="text-12px opacity-75">{{ timestamp }}</p>
 
         <TooltipProvider>
           <Tooltip>
@@ -63,11 +61,11 @@ const icon = computed<{ component: Component, color: string } | null>(() => {
     </header>
 
     <div class="w-full flex flex-row items-center justify-between gap-2 opacity-75 group-hover/item:opacity-100 group-focus/item:opacity-100">
-      <p>{{ message }}</p>
+      <p>{{ description }}</p>
       <ChevronRightIcon class="size-4" />
     </div>
 
-    <a :href="view" class="absolute z-10 inset-0">
+    <a :href="link" class="absolute z-10 inset-0">
       <span class="sr-only">Take me there</span>
     </a>
   </div>

web/components/Notifications/Sidebar.vue

@@ -3,7 +3,6 @@ import { BellIcon } from "@heroicons/vue/24/solid";
 import {
   Sheet,
   SheetContent,
-  // SheetDescription,
   SheetFooter,
   SheetHeader,
   SheetTitle,
@@ -11,66 +10,47 @@ import {
 } from "@/components/shadcn/sheet";
 
 import type { NotificationItemProps } from "~/types/ui/notification";
+import { useUnraidApiStore } from "~/store/unraidApi";
+import gql from "graphql-tag";
 
-const unreadNotifications: NotificationItemProps[] = [
-  {
-    date: '2024-09-30 15:30',
-    event: 'Test Event Type',
-    id: "1",
-    message: "A new user has registered on your platform.",
-    subject: "New User Registration",
-    type: "success",
-    view: '#my-url',
-  },
-  {
-    date: '2024-09-30 15:30',
-    event: 'Test Event Type',
-    id: "2",
-    message: "Drive 1 has been detected as pre-failure.",
-    subject: "Drive Pre-Failure Detected",
-    type: "alert",
-    view: '#my-url',
-  },
-  {
-    date: '2024-09-30 15:30',
-    event: 'Test Event Type',
-    id: "3",
-    message: "Your server will be undergoing maintenance at 12:00 AM.",
-    subject: "Server Maintenance",
-    type: "warning",
-    view: '#my-url',
-  },
-];
+const getNotifications = gql`
+    query Notifications($filter: NotificationFilter!) {
+      notifications {
+        list(filter: $filter) {
+          id
+          title
+          subject
+          description
+          importance
+          link
+          type
+          timestamp
+        }
+      }
+    }
+`;
 
-const archiveNotifications: NotificationItemProps[] = [
-  {
-    date: '2024-09-30 15:30',
-    event: 'Test Event Type',
-    id: "1",
-    message: "A new user has registered on your platform.",
-    subject: "Archived New User Registration",
-    type: "success",
-    view: '#my-url',
-  },
-  {
-    date: '2024-09-30 15:30',
-    event: 'Test Event Type',
-    id: "2",
-    message: "Drive 1 has been detected as pre-failure.",
-    subject: "Archived Drive Pre-Failure Detected",
-    type: "alert",
-    view: '#my-url',
-  },
-  {
-    date: '2024-09-30 15:30',
-    event: 'Test Event Type',
-    id: "3",
-    message: "Your server will be undergoing maintenance at 12:00 AM.",
-    subject: "Archived Server Maintenance",
-    type: "warning",
-    view: '#my-url',
-  },
-];
+const notifications = ref<NotificationItemProps[]>([]);
+
+const { unraidApiClient } = storeToRefs(useUnraidApiStore());
+
+watch(unraidApiClient, async(newVal) => {
+  if (newVal) {
+    const apiResponse = await newVal.query({
+      query: getNotifications,
+      variables: {
+        filter: {
+          offset: 0,
+          limit: 10,
+          type: 'UNREAD',
+        },
+      },
+    });
+    console.log('[blah blah]', apiResponse);
+
+    notifications.value = apiResponse.data.notifications.list;
+  }
+});
 
 const { teleportTarget, determineTeleportTarget } = useTeleport();
 </script>
@@ -99,7 +79,7 @@ const { teleportTarget, determineTeleportTarget } = useTeleport();
 
         <TabsContent value="unread" class="divide-y divide-gray-200">
           <NotificationsItem
-            v-for="notification in unreadNotifications"
+            v-for="notification in notifications"
             :key="notification.id"
             v-bind="notification"
           />