From f69b30b5ba9abcce764e3d7fa77d1750856b70ef Mon Sep 17 00:00:00 2001
From: flfeders <f.federspiel@federspiel.tech>
Date: Fri, 8 Nov 2024 20:17:56 +0100
Subject: [PATCH] Added Notifications Added Mentions in HistoryItems

---
 components/HistoryDisplay.vue              | 28 +++++++-
 components/NotificationsSlideover.vue      | 53 +++++++++++---
 pages/communication/historyItems/index.vue | 83 ++++++++++++++++++++++
 pages/index.vue                            |  8 ++-
 pages/plants/[mode]/[[id]].vue             |  2 +-
 pages/profiles/show/[id].vue               | 10 ++-
 6 files changed, 169 insertions(+), 15 deletions(-)
 create mode 100644 pages/communication/historyItems/index.vue

diff --git a/components/HistoryDisplay.vue b/components/HistoryDisplay.vue
index b1796d2..3b0f00a 100644
--- a/components/HistoryDisplay.vue
+++ b/components/HistoryDisplay.vue
@@ -69,6 +69,10 @@ setup()
 
 const addHistoryItemData = ref({
   text: "",
+  config: {
+    type: type,
+    id: elementId
+  }
 })
 
 const addHistoryItem = async () => {
@@ -120,6 +124,29 @@ const addHistoryItem = async () => {
   if(error) {
     console.log(error)
   } else {
+    if(addHistoryItemData.value.text.includes("@")){
+      let usernames = [...addHistoryItemData.value.text.matchAll(/@(\S*)/gm)]
+
+      const {data:profiles} = await supabase.from("profiles").select("id,username")
+
+      let notifications = usernames.map(i => {
+        let rawUsername = i[1]
+
+        return {
+          tenant: dataStore.currentTenant,
+          profile: profiles.find(x => x.username === rawUsername).id,
+          initiatingProfile: dataStore.activeProfile.id,
+          title: "Sie wurden im Logbuch erwähnt",
+          link: `/${type}s/show/${elementId}`,
+          message: addHistoryItemData.value.text
+        }
+      })
+
+      console.log(notifications)
+
+      const {error} = await supabase.from("notifications").insert(notifications)
+    }
+
     addHistoryItemData.value = {}
     toast.add({title: "Eintrag erfolgreich erstellt"})
     showAddHistoryItemModal.value = false
@@ -188,7 +215,6 @@ const renderText = (text) => {
   </div>
 
   <!-- ITEM LIST  -->
-
   <div style="height: 90%; overflow-y: scroll">
     <div
         v-if="items.length > 0"
diff --git a/components/NotificationsSlideover.vue b/components/NotificationsSlideover.vue
index c6b8592..a66d9bf 100644
--- a/components/NotificationsSlideover.vue
+++ b/components/NotificationsSlideover.vue
@@ -1,29 +1,60 @@
-<script setup lang="ts">
-import { formatTimeAgo } from '@vueuse/core'
-import type { Notification } from '~/types'
+<script setup>
+import {formatTimeAgo} from '@vueuse/core'
+
+const supabase = useSupabaseClient()
+
 
 const { isNotificationsSlideoverOpen } = useDashboard()
 
-//const { data: notifications } = await useFetch<Notification[]>('/api/notifications')
+watch(isNotificationsSlideoverOpen, async (newVal,oldVal) => {
+  if(newVal === true) {
+    await setup()
+  }
+})
+
+const notifications = ref([])
+
+const setup = async () => {
+  notifications.value = (await supabase.from("notifications").select()).data
+}
+
+setup()
+
+const setNotificationAsRead = async (notification) => {
+  console.log(notification)
+
+  const {data,error} = await supabase.from("notifications").update({read: true}).eq("id", notification.id)
+
+  console.log(error)
+
+  setup()
+
+}
 </script>
 
 <template>
   <UDashboardSlideover v-model="isNotificationsSlideoverOpen" title="Benachrichtigungen">
-<!--    <NuxtLink v-for="notification in notifications" :key="notification.id" :to="`/inbox?id=${notification.id}`" class="p-3 rounded-md hover:bg-gray-50 dark:hover:bg-gray-800/50 cursor-pointer flex items-center gap-3 relative">
-      <UChip color="red" :show="!!notification.unread" inset>
-        <UAvatar v-bind="notification.sender.avatar" :alt="notification.sender.name" size="md" />
+    <NuxtLink
+        v-for="notification in notifications"
+        :key="notification.id"
+        :to="notification.link"
+        class="p-3 rounded-md hover:bg-gray-50 dark:hover:bg-gray-800/50 cursor-pointer flex items-center gap-3 relative"
+        @click="setNotificationAsRead(notification)"
+    >
+      <UChip color="primary" :show="!notification.read" inset>
+        <UAvatar alt="FEDEO" size="md" />
       </UChip>
 
       <div class="text-sm flex-1">
         <p class="flex items-center justify-between">
-          <span class="text-gray-900 dark:text-white font-medium">{{ notification.sender.name }}</span>
+          <span class="text-gray-900 dark:text-white font-medium">{{notification.title}}</span>
 
-          <time :datetime="notification.date" class="text-gray-500 dark:text-gray-400 text-xs" v-text="formatTimeAgo(new Date(notification.date))" />
+          <time :datetime="notification.date" class="text-gray-500 dark:text-gray-400 text-xs" v-text="formatTimeAgo(new Date(notification.created_at))" />
         </p>
         <p class="text-gray-500 dark:text-gray-400">
-          {{ notification.body }}
+          {{ notification.message }}
         </p>
       </div>
-    </NuxtLink>-->
+    </NuxtLink>
   </UDashboardSlideover>
 </template>
diff --git a/pages/communication/historyItems/index.vue b/pages/communication/historyItems/index.vue
new file mode 100644
index 0000000..968cf1c
--- /dev/null
+++ b/pages/communication/historyItems/index.vue
@@ -0,0 +1,83 @@
+<script setup>
+import dayjs from "dayjs"
+
+const supabase = useSupabaseClient()
+const dataStore = useDataStore()
+const router = useRouter()
+
+
+const items = ref([])
+
+const setup = async () => {
+
+  items.value = (await supabase.from("historyitems").select().like('text',`%@${dataStore.activeProfile.username}%`)/*.textSearch("text", `'@${dataStore.activeProfile.username}'`)*/.order("created_at")).data
+}
+
+const navigateToHistoryItem = (item) => {
+  /*if(item.customer) {
+    router.push(`/customers/show/${item.customer}`)
+  } else if(item.vendor) {
+    router.push(`/vendors/show/${item.vendor}`)
+  } else if(item.project) {
+    router.push(`/projects/show/${item.project}`)
+  } else if(item.plant) {
+    router.push(`/plants/show/${item.plant}`)
+  } else if(item.incomingInvoice) {
+    router.push(`/incomingInvoices/show/${item.incomingInvoice}`)
+  }/!* else if(item.document) {
+    router.push(`/documents/show/${item.document}`)
+  }*!/ else if(item.contact) {
+    router.push(`/contacts/show/${item.contact}`)
+  } else if(item.inventoryitem) {
+    router.push(`/inventoryitems/show/${item.inventoryitem}`)
+  } else if(item.product) {
+    router.push(`/products/show/${item.product}`)
+  } else if(item.profile) {
+    router.push(`/profiles/show/${item.profile}`)
+  } else if(item.absenceRequest) {
+    router.push(`/absenceRequests/show/${item.absenceRequest}`)
+  } else if(item.event) {
+    router.push(`/events/show/${item.event}`)
+  } else if(item.task) {
+    router.push(`/tasks/show/${item.task}`)
+  } else if(item.vehicle) {
+    router.push(`/vehicle/show/${item.vehicle}`)
+  } else if(item.bankStatement) {
+    router.push(`/bankStatements/show/${item.bankStatement}`)
+  } else if(item.space) {
+    router.push(`/spaces/show/${item.space}`)
+  } else if(item.trackingtrip) {
+    router.push(`/trackingtrips/show/${item.trackingtrip}`)
+  }*/
+  if(item.config && item.config.type !== "document") {
+    router.push(`/${item.config.type}s/show/${item.config.id}`)
+  }
+}
+
+setup()
+</script>
+
+<template>
+  <UDashboardNavbar title="Erwähnungen in Logbüchern" :badge="items.length">
+
+  </UDashboardNavbar>
+  <UTable
+    :rows="items"
+    @select="navigateToHistoryItem"
+    :columns="[{key:'created_at',label:'Datum'},{key:'config',label:'Typ'},{key:'text',label:'Text'}]"
+    :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Erwähnungen anzuzeigen' }"
+    class="w-full"
+    :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
+  >
+    <template #config-data="{row}">
+      <span v-if="row.config">{{dataStore.dataTypes[row.config.type + "s"].labelSingle}}</span>
+    </template>
+    <template #created_at-data="{row}">
+      {{dayjs(row.created_at).format("HH:mm DD.MM.YYYY")}}
+    </template>
+  </UTable>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/pages/index.vue b/pages/index.vue
index 70e22a2..b9e1bd3 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -5,7 +5,7 @@
         <template #right>
           <UTooltip text="Notifications" :shortcuts="['N']">
             <UButton color="gray" variant="ghost" square @click="isNotificationsSlideoverOpen = true">
-              <UChip :show="false" color="red" inset>
+              <UChip :show="unreadMessages" color="primary" inset>
                 <UIcon name="i-heroicons-bell" class="w-5 h-5" />
               </UChip>
             </UButton>
@@ -88,6 +88,12 @@ const supabase = useSupabaseClient()
 
 const user = useSupabaseUser()
 
+const unreadMessages = ref(false)
+const setup = async () => {
+  unreadMessages.value = (await supabase.from("notifications").select("id,read").eq("read",false)).data.length > 0
+}
+
+setup()
 </script>
 
 <style scoped>
diff --git a/pages/plants/[mode]/[[id]].vue b/pages/plants/[mode]/[[id]].vue
index bacd1bd..c6c9110 100644
--- a/pages/plants/[mode]/[[id]].vue
+++ b/pages/plants/[mode]/[[id]].vue
@@ -152,7 +152,7 @@ setupPage()
         <UCard class="w-1/2">
           <HistoryDisplay
               type="plant"
-              v-if="itemInfo"
+              v-if="itemInfo.id"
               :element-id="itemInfo.id"
               render-headline
           />
diff --git a/pages/profiles/show/[id].vue b/pages/profiles/show/[id].vue
index fc0f5f0..a23cc88 100644
--- a/pages/profiles/show/[id].vue
+++ b/pages/profiles/show/[id].vue
@@ -265,7 +265,7 @@ const isLight = computed({
                 v-model="itemInfo.employeeNumber"
               />
             </UFormGroup>
-          <UFormGroup
+            <UFormGroup
               label="E-Mail"
               class="flex-auto"
             >
@@ -273,6 +273,14 @@ const isLight = computed({
                 v-model="itemInfo.email"
               />
             </UFormGroup>
+            <UFormGroup
+              label="Benutzername"
+              class="flex-auto"
+            >
+              <UInput
+                v-model="itemInfo.username"
+              />
+            </UFormGroup>
           </InputGroup>
           <InputGroup class="w-full">
             <UFormGroup