feat: notify staff on task complete (#72)

* feat: notify staff on task complete

* fix: logic

Author: hmbanan666

apps/web-app/app/app.vue

@@ -59,7 +59,6 @@ await Promise.all([
   menu.update(),
   product.update(),
   chat.update(),
-  notification.update(),
   post.update(),
   print.update(),
   activity.update(),
@@ -74,6 +73,7 @@ onMounted(async () => {
     user.update(),
     task.update(),
     ticket.update(),
+    notification.update(),
   ])
 
   interval = setInterval(async () => {
@@ -82,6 +82,7 @@ onMounted(async () => {
       user.update(),
       task.update(),
       ticket.update(),
+      notification.update(),
     ])
   }, 30000)
 })

apps/web-app/app/components/Header.vue

@@ -11,6 +11,23 @@
     <div class="flex items-center shrink-0 gap-3">
       <slot />
 
+      <UTooltip text="Уведомления" :shortcuts="['N']">
+        <UButton
+          color="neutral"
+          variant="ghost"
+          square
+          @click="isNotificationsOpened = true"
+        >
+          <UChip
+            color="error"
+            inset
+            :show="haveNotifications"
+          >
+            <UIcon name="i-lucide-bell" class="size-5 shrink-0" />
+          </UChip>
+        </UButton>
+      </UTooltip>
+
       <UsersOnline />
     </div>
   </div>
@@ -24,4 +41,9 @@
 
 <script setup lang="ts">
 defineProps<{ title: string }>()
+
+const { isNotificationsOpened } = useApp()
+
+const notificationStore = useNotificationStore()
+const haveNotifications = computed(() => notificationStore.notifications.filter((notification) => !notification.viewedAt).length > 0)
 </script>

apps/web-app/app/components/HeaderMenuButton.vue

@@ -3,6 +3,7 @@
     icon="i-lucide-menu"
     color="neutral"
     variant="outline"
+    square
     @click="isNavbarOpened = true"
   />
 </template>

apps/web-app/app/components/NotificationsDrawer.vue

@@ -0,0 +1,60 @@
+<template>
+  <UDrawer v-model:open="isNotificationsOpened" direction="right">
+    <template #content>
+      <div class="p-4 min-w-80 max-w-120 min-h-96 size-full overflow-auto">
+        <div class="flex flex-col gap-2.5">
+          <UCard
+            v-for="notification in notificationStore.notifications"
+            :key="notification.id"
+          >
+            <div class="flex flex-col gap-3">
+              <div class="flex flex-row gap-3 items-center">
+                <UChip
+                  color="error"
+                  :show="!notification.viewedAt"
+                  inset
+                >
+                  <UAvatar
+                    :src="notification.author.avatarUrl ?? undefined"
+                    size="lg"
+                  />
+                </UChip>
+
+                <div class="flex flex-col gap-0.5">
+                  <h3 class="text-lg/6 font-semibold">
+                    {{ notification.author.name }} {{ notification.author.surname }}
+                  </h3>
+
+                  <time
+                    :datetime="notification.createdAt"
+                    class="text-sm text-muted"
+                    v-text="format(new Date(notification.createdAt), 'd MMMM в HH:mm', { locale: ru })"
+                  />
+                </div>
+              </div>
+
+              <div class="flex flex-col gap-2">
+                <p class="text-base/5 font-medium whitespace-pre-wrap">
+                  {{ notification.title }}
+                </p>
+
+                <p class="text-sm text-dimmed">
+                  {{ notification.description }}
+                </p>
+              </div>
+            </div>
+          </UCard>
+        </div>
+      </div>
+    </template>
+  </UDrawer>
+</template>
+
+<script setup lang="ts">
+import { format } from 'date-fns'
+import { ru } from 'date-fns/locale/ru'
+
+const { isNotificationsOpened } = useApp()
+
+const notificationStore = useNotificationStore()
+</script>

apps/web-app/app/composables/useApp.ts

@@ -2,17 +2,20 @@ function _useApp() {
   const route = useRoute()
 
   const isNavbarOpened = ref(false)
+  const isNotificationsOpened = ref(false)
   const imagesMode = ref<'color' | 'grayscale'>('color')
 
   watch(
     () => route.fullPath,
     () => {
       isNavbarOpened.value = false
+      isNotificationsOpened.value = false
     },
   )
 
   return {
     isNavbarOpened,
+    isNotificationsOpened,
     imagesMode,
   }
 }

apps/web-app/app/layouts/default.vue

@@ -5,6 +5,8 @@
     </main>
   </div>
 
+  <NotificationsDrawer />
+
   <USlideover
     v-model:open="isNavbarOpened"
     side="left"

apps/web-app/app/stores/notification.ts

@@ -1,19 +1,17 @@
 import type { Notification, Task, User } from '@roll-stack/database'
 
-type NotificationWithEntities = Notification & {
-  task: Task | null
+type TaskWithPerformer = Task & {
+  performer: User | null
 }
 
-type NotificationWithTask = Notification & {
-  task: (Task & {
-    performer: User
-  })
+type NotificationWithEntities = Notification & {
+  task: TaskWithPerformer | null
+  author: User
 }
 
 export const useNotificationStore = defineStore('notification', () => {
   const notifications = ref<NotificationWithEntities[]>([])
 
-  const interval = ref<NodeJS.Timeout | undefined>(undefined)
   const toastContext = useToast()
 
   async function update() {
@@ -36,13 +34,13 @@ export const useNotificationStore = defineStore('notification', () => {
     }
   }
 
-  function showCompletedTaskToast(notification: NotificationWithTask) {
+  function _showCompletedTaskToast(notification: NotificationWithEntities) {
     toastContext.add({
       id: notification.id,
       title: notification.title,
-      description: notification.description,
+      description: notification.description ?? '',
       avatar: {
-        src: notification.task.performer.avatarUrl ?? undefined,
+        src: notification.task?.performer?.avatarUrl ?? undefined,
         alt: '',
       },
       color: 'info',
@@ -97,26 +95,18 @@ export const useNotificationStore = defineStore('notification', () => {
     // }, 3000)
   }
 
-  watch(notifications, () => {
-    for (const notification of notifications.value) {
-      // already shown?
-      if (toastContext.toasts.value.find((toast) => toast.id === notification.id)) {
-        continue
-      }
-
-      if (notification.type === 'task_completed') {
-        showCompletedTaskToast(notification as NotificationWithTask)
-      }
-    }
-  })
-
-  onMounted(() => {
-    interval.value = setInterval(() => update(), 30000)
-  })
+  // watch(notifications, () => {
+  //   for (const notification of notifications.value) {
+  //     // already shown?
+  //     if (toastContext.toasts.value.find((toast) => toast.id === notification.id)) {
+  //       continue
+  //     }
 
-  onUnmounted(() => {
-    clearInterval(interval.value)
-  })
+  //     if (notification.type === 'task_completed') {
+  //       showCompletedTaskToast(notification)
+  //     }
+  //   }
+  // })
 
   return {
     notifications,

apps/web-app/server/api/task/id/[taskId]/complete.post.ts

@@ -94,6 +94,23 @@ export default defineEventHandler(async (event) => {
       }
     }
 
+    // Notify all staff
+    if (user.type === 'staff') {
+      const users = await repository.user.list()
+      const allStaffExceptUser = users.filter((u) => u.type === 'staff' && u.id !== user.id)
+
+      for (const staff of allStaffExceptUser) {
+        await repository.notification.create({
+          authorId: user.id,
+          userId: staff.id,
+          taskId: updatedTask.id,
+          type: 'task_completed',
+          title: `${suffixByGender(['Завершил', 'Завершила'], user.gender)} задачу «${updatedTask.name}»`,
+          description: updatedTask.report ? updatedTask.report : 'Без отчета',
+        })
+      }
+    }
+
     return { ok: true }
   } catch (error) {
     throw errorResolver(error)

packages/database/src/repository/notification.ts

@@ -1,5 +1,5 @@
 import type { NotificationDraft } from '../types'
-import { eq } from 'drizzle-orm'
+import { eq, sql } from 'drizzle-orm'
 import { useDatabase } from '../database'
 import { notifications } from '../tables'
 
@@ -13,7 +13,10 @@ export class Notification {
   static async listByUser(userId: string) {
     return useDatabase().query.notifications.findMany({
       where: (notifications, { eq }) => eq(notifications.userId, userId),
+      orderBy: (notifications, { desc }) => desc(notifications.createdAt),
+      limit: 250,
       with: {
+        author: true,
         task: {
           with: {
             performer: true,
@@ -31,7 +34,10 @@ export class Notification {
   static async update(id: string, data: Partial<NotificationDraft>) {
     const [notification] = await useDatabase()
       .update(notifications)
-      .set(data)
+      .set({
+        ...data,
+        updatedAt: sql`now()`,
+      })
       .where(eq(notifications.id, id))
       .returning()
     return notification

packages/database/src/tables.ts

@@ -368,9 +368,14 @@ export const notifications = pgTable('notifications', {
   id: cuid2('id').defaultRandom().primaryKey(),
   createdAt: timestamp('created_at', { precision: 3, withTimezone: true, mode: 'string' }).notNull().defaultNow(),
   updatedAt: timestamp('updated_at', { precision: 3, withTimezone: true, mode: 'string' }).notNull().defaultNow(),
+  viewedAt: timestamp('viewed_at', { precision: 3, withTimezone: true, mode: 'string' }),
   type: varchar('type').notNull().$type<NotificationType>(),
   title: varchar('title').notNull(),
-  description: varchar('description').notNull(),
+  description: varchar('description'),
+  authorId: cuid2('author_id').notNull().references(() => users.id, {
+    onDelete: 'cascade',
+    onUpdate: 'cascade',
+  }),
   userId: cuid2('user_id').notNull().references(() => users.id, {
     onDelete: 'cascade',
     onUpdate: 'cascade',
@@ -859,7 +864,8 @@ export const mediaItemRelations = relations(mediaItems, ({ one }) => ({
   }),
 }))
 
-export const taskRelations = relations(tasks, ({ one }) => ({
+export const taskRelations = relations(tasks, ({ one, many }) => ({
+  notifications: many(notifications),
   performer: one(users, {
     fields: [tasks.performerId],
     references: [users.id],
@@ -879,6 +885,10 @@ export const taskListRelations = relations(taskLists, ({ many, one }) => ({
 }))
 
 export const notificationRelations = relations(notifications, ({ one }) => ({
+  author: one(users, {
+    fields: [notifications.authorId],
+    references: [users.id],
+  }),
   user: one(users, {
     fields: [notifications.userId],
     references: [users.id],