feat: :sparkles: feat (modulo-de-notificação) Foi finalizado a parte de notificação do cliente

Foi finalziado a parte de notificação que o cliente recebe, quando o prestado aceita ou recusa

fase:dev | origin:escopo

src/pages/notifications/NotificationsPage.vue

@@ -46,14 +46,14 @@
         clickable
         class="notification-card"
         :class="{ unread: !item.read }"
-        @click="markAsRead(item.id)"
+       @click="handleNotification(item)"
       >
 
         <div class="notification-wrapper">
 
           <!-- AVATAR -->
           <q-avatar size="44px" class="notification-avatar">
-            <img :src="logoDiaria" />
+          <img :src="getNotificationIcon(item.type)" />
           </q-avatar>
 
           <!-- CONTENT -->
@@ -94,42 +94,109 @@
 
 <script setup>
 import { computed, ref, onMounted } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+import { useRouter } from 'vue-router'
+
+import { api } from 'boot/axios'
 
 import logoDiaria from 'src/assets/logo_diaria_colorido_sem_texto.svg'
 
 const router = useRouter()
 
-const route = useRoute()
-
 const notifications = ref([])
 
 onMounted(() => {
-  notifications.value = JSON.parse(route.query.notifications || '[]')
+  loadNotifications()
 })
 
 const unreadCount = computed(() => {
   return notifications.value.filter((n) => !n.read).length
 })
 
-const markAsRead = (id) => {
-  notifications.value = notifications.value.map((notification) => {
-    if (notification.id === id) {
-      return {
-        ...notification,
-        read: true
+const loadNotifications = async () => {
+  try {
+
+    const response = await api.get('/notifications')
+
+    notifications.value = response.data.payload || []
+
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+const markAsRead = async (id) => {
+  try {
+
+    await api.put(`/notifications/${id}/read`)
+
+    notifications.value = notifications.value.map((notification) => {
+
+      if (notification.id === id) {
+        return {
+          ...notification,
+          read: true
+        }
       }
-    }
 
-    return notification
-  })
+      return notification
+    })
+
+  } catch (error) {
+    console.error(error)
+  }
 }
 
-const markAllAsRead = () => {
-  notifications.value = notifications.value.map((notification) => ({
-    ...notification,
-    read: true
-  }))
+const markAllAsRead = async () => {
+  try {
+
+    await api.put('/notifications/read-all')
+
+    notifications.value = notifications.value.map((notification) => ({
+      ...notification,
+      read: true
+    }))
+
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+const handleNotification = async (notification) => {
+
+  if (!notification.read) {
+    await markAsRead(notification.id)
+  }
+
+  if (
+    notification.origin === 'schedule'
+    && notification.origin_id
+  ) {
+    router.push(`/schedule/${notification.origin_id}`)
+  }
+}
+
+const getNotificationIcon = (type) => {
+
+  switch (type) {
+
+    case 'schedule_client_provider_accepted':
+      return logoDiaria
+
+    case 'schedule_client_provider_refused':
+      return logoDiaria
+
+    case 'schedule_client_provider_cancelled':
+      return logoDiaria
+
+    case 'schedule_client_provider_coming':
+      return logoDiaria
+
+    case 'schedule_client_provider_finished':
+      return logoDiaria
+
+    default:
+      return logoDiaria
+  }
 }
 </script>