From 4b3758323c5689ba734cbe764263f6f5b4f6a85a Mon Sep 17 00:00:00 2001
From: EwelinaSkrzypacz <ewelina.skrzypacz@blumilk.pl>
Date: Tue, 3 Dec 2024 12:09:50 +0100
Subject: [PATCH] - fix last update

---
 resources/js/Shared/LastUpdate.vue       | 19 +++++++------------
 resources/js/Shared/Layout/AppLayout.vue | 18 +++++++-----------
 resources/js/Shared/MainMenu.vue         |  8 ++------
 3 files changed, 16 insertions(+), 29 deletions(-)
diff --git a/resources/js/Shared/LastUpdate.vue b/resources/js/Shared/LastUpdate.vue
index 1cef1491..2137c2da 100644
--- a/resources/js/Shared/LastUpdate.vue
+++ b/resources/js/Shared/LastUpdate.vue
@@ -1,30 +1,25 @@
 <script setup>
-import { onMounted } from 'vue'
+import { onMounted, onUnmounted } from 'vue'
 import axios from 'axios'
-import { updateFavicon } from '@/Shared/updateFavicon'
-
-const props = defineProps({
-  lastUpdate: String,
-})
 
 const emit = defineEmits(['lastUpdateUpdated'])
 
+let interval = undefined
+
 const fetchLastUpdate = async () => {
   try {
     const response = await axios.get('/api/last-update')
-    if (response.data.lastUpdate !== props.lastUpdate) {
-      emit('lastUpdateUpdated')
-      updateFavicon('/images/icon-alert.png')
-    }
+    emit('lastUpdateUpdated', response.data.lastUpdate)
   } catch (error) {
     console.error('Failed to fetch last update.')
   }
 }
 
 onMounted(() => {
-  fetchLastUpdate()
-  setInterval(fetchLastUpdate, import.meta.env.VITE_LAST_UPDATE_TIMEOUT)
+  interval = setInterval(fetchLastUpdate, import.meta.env.VITE_LAST_UPDATE_TIMEOUT)
 })
+
+onUnmounted(() => clearInterval(interval))
 </script>
 
 <template>
diff --git a/resources/js/Shared/Layout/AppLayout.vue b/resources/js/Shared/Layout/AppLayout.vue
index aab135f1..d4db35d3 100644
--- a/resources/js/Shared/Layout/AppLayout.vue
+++ b/resources/js/Shared/Layout/AppLayout.vue
@@ -2,7 +2,7 @@
 import MainMenu from '@/Shared/MainMenu.vue'
 import LastUpdate from '@/Shared/LastUpdate.vue'
 import { useToast } from 'vue-toastification'
-import { ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import DeployInfo from '@/Shared/DeployInfo.vue'
 import { updateFavicon } from '@/Shared/updateFavicon'
 import { Head } from '@inertiajs/vue3'
@@ -21,6 +21,8 @@ const {
   lastUpdate,
 } = useGlobalProps()
 
+const lastUpdateValue = ref(lastUpdate.value)
+
 watch(flash, value => {
   if (value.success) {
     toast.success(value.success)
@@ -35,26 +37,20 @@ watch(flash, value => {
   }
 }, { immediate: true })
 
-const isUpdated = ref(false)
+const isUpdated = computed(() => lastUpdate.value !== lastUpdateValue.value)
 
-function vacationPageOpened() {
-  isUpdated.value = false
-  updateFavicon('/images/icon.png')
-}
+watch(isUpdated, (value) => updateFavicon(value ? '/images/icon-alert.png' : '/images/icon.png'), { immediate: true })
 </script>
 
 <template>
   <Head :title="title" />
   <LastUpdate
     v-if="auth.can.listAllRequests"
-    :is-updated="isUpdated"
-    :last-update="lastUpdate"
-    @last-update-updated="isUpdated = true"
+    @last-update-updated="lastUpdateValue = $event"
   />
   <div class="relative min-h-screen">
     <MainMenu
-      :show-refresh-button="isUpdated"
-      @open="vacationPageOpened"
+      :show-refresh-button="isUpdated && auth.can.listAllRequests"
     />
     <main class="flex flex-col flex-1 py-8 lg:ml-60">
       <div class="lg:px-4">
diff --git a/resources/js/Shared/MainMenu.vue b/resources/js/Shared/MainMenu.vue
index 10d540e1..2aea7cee 100644
--- a/resources/js/Shared/MainMenu.vue
+++ b/resources/js/Shared/MainMenu.vue
@@ -187,9 +187,6 @@ const miscNavigation = computed(() => [
   },
 ].filter(item => item.can))
 
-const refreshablePages = ['Dashboard', 'Calendar', 'VacationRequest/IndexForApprovers']
-const refreshableHrefs = ['/vacation/requests', '/calendar']
-
 const reloadPage = () => {
   window.location.reload()
 }
@@ -302,7 +299,7 @@ const emit = defineEmits(['open'])
                 :key="item.name"
                 :class="[$page.component.startsWith(item.section) ? 'bg-blumilk-800 text-white' : 'text-blumilk-100 hover:text-white hover:bg-blumilk-600', 'group flex items-center p-2 text-base font-medium rounded-md']"
                 :href="item.href"
-                @click="sidebarOpen = false;refreshableHrefs.includes(item.href) ? emit('open') : null"
+                @click="sidebarOpen = false"
               >
                 <component
                   :is="item.icon"
@@ -353,7 +350,6 @@ const emit = defineEmits(['open'])
             :key="item.name"
             :class="[$page.component.startsWith(item.section) ? 'bg-blumilk-800 text-white' : 'text-blumilk-100 hover:text-white hover:bg-blumilk-600', 'group flex items-center p-2 text-sm leading-6 font-medium rounded-md']"
             :href="item.href"
-            @click="refreshableHrefs.includes(item.href) ? emit('open') : null"
           >
             <component
               :is="item.icon"
@@ -407,7 +403,7 @@ const emit = defineEmits(['open'])
       <div class="flex flex-1 justify-between items-center px-4 sm:px-6 lg:px-8">
         <div>
           <button
-            v-if="showRefreshButton && refreshablePages.includes($page.component)"
+            v-if="showRefreshButton"
             class="inline-flex items-center py-2.5 px-4 text-sm font-medium leading-4 text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm ml-3"
             @click="reloadPage"
           >
