Fix/notifications settings panel

src/components/specific/projects/project-history-activity/ProjectHistoryActivity.vue

@@ -23,7 +23,10 @@
     </div>
 
     <div class="content">
-      <template v-if="hasDisplayedLogs">
+      <template v-if="loading">
+        <BIMDataSpinner class="flex items-center justify-center" style="height: 100%" />
+      </template>
+      <template v-else-if="hasDisplayedLogs">
         <div v-for="(logs, day) in displayedGroupedLogs" :key="day" class="day-group">
           <div class="day-title">{{ day }}</div>
           <ActivityItem
@@ -70,37 +73,40 @@ export default {
     const searchText = ref("");
 
     const { formatTimeAgo } = useTimeAgo();
-
+    const loading = ref(false);
     const fetchLogs = async () => {
+      loading.value = true;
       logs.value = [];
-
-      const fetchedLogs = await ProjectService.fetchLogs(props.project);
-
-      logs.value = fetchedLogs
-        .map((log) => {
-          const activity = getActivityFromLog(log);
-
-          if (!activity) return null;
-
-          return {
-            ...log,
-            activity,
-            dateObj: new Date(log.date),
-
-            _search: [
-              log.action,
-              log.user_email,
-              log.project_name,
-              activity?.target,
-              log.path,
-              t(activity?.actionKey ?? ""),
-            ]
-              .filter(Boolean)
-              .join(" ")
-              .toLowerCase(),
-          };
-        })
-        .filter(Boolean);
+      try {
+        const fetchedLogs = await ProjectService.fetchLogs(props.project);
+        logs.value = fetchedLogs
+          .map((log) => {
+            const activity = getActivityFromLog(log);
+
+            if (!activity) return null;
+
+            return {
+              ...log,
+              activity,
+              dateObj: new Date(log.date),
+
+              _search: [
+                log.action,
+                log.user_email,
+                log.project_name,
+                activity?.target,
+                log.path,
+                t(activity?.actionKey ?? ""),
+              ]
+                .filter(Boolean)
+                .join(" ")
+                .toLowerCase(),
+            };
+          })
+          .filter(Boolean);
+      } finally {
+        loading.value = false;
+      }
     };
 
     onMounted(fetchLogs);
@@ -178,6 +184,7 @@ export default {
     const availableActions = computed(() => new Set(logs.value.map((l) => l.action)));
 
     return {
+      loading,
       displayedGroupedLogs,
       hasDisplayedLogs,
       searchText,

src/views/project-board/project-overview/ProjectOverview.vue

@@ -50,6 +50,7 @@
       <Transition name="fade" mode="out-in">
         <div style="height: 100%">
           <BIMDataTabs
+            v-if="sidePanelView === 'settings'"
             width="100%"
             height="40px"
             :tabs="tabs"
@@ -62,33 +63,31 @@
               <span>{{ tab.label }}</span>
             </template>
           </BIMDataTabs>
-          <transition name="fade" mode="out-in">
-            <div style="height: 100%" v-if="isProjectAdmin(project)">
-              <!-- HISTORY -->
-              <ProjectHistoryActivity
-                v-if="currentTab === 'history'"
-                :project="project"
-                @go-folder="goToGEDView"
-              />
 
-              <!-- SETTINGS -->
-              <ProjectNotificationsSettings
-                v-else-if="currentTab === 'settings'"
-                :notification="notification"
-                :selectedRecipientsIds="selectedGroupIds"
-                v-model:notification-mode-activity="notificationModeActivity"
-                v-model:checked-days-activity="checkedDaysActivity"
-                v-model:checked-activity="checkedActivity"
-                @open-recipients-settings="switchToRecipients"
-                @open-timezone-choice="switchToTimezoneChoice"
-                @close="closeSidePanel"
-              />
-            </div>
-          </transition>
+          <template v-if="sidePanelView === 'settings' && isProjectAdmin(project)">
+            <!-- HISTORY -->
+            <ProjectHistoryActivity
+              v-if="currentTab === 'history'"
+              :project="project"
+              @go-folder="goToGEDView"
+            />
+            <!-- SETTINGS -->
+            <ProjectNotificationsSettings
+              v-else-if="currentTab === 'settings'"
+              :notification="notification"
+              :selectedRecipientsIds="selectedGroupIds"
+              v-model:notification-mode-activity="notificationModeActivity"
+              v-model:checked-days-activity="checkedDaysActivity"
+              v-model:checked-activity="checkedActivity"
+              @open-recipients-settings="switchToRecipients"
+              @open-timezone-choice="switchToTimezoneChoice"
+              @close="closeSidePanel"
+            />
+          </template>
 
           <!-- Recipients Panel -->
           <ProjectNotificationsRecipients
-            v-show="sidePanelView === 'recipients'"
+            v-if="sidePanelView === 'recipients'"
             :selectedRecipientsIds="selectedGroupIds"
             @back-to-settings="switchToSettings"
             @close="closeNotificationPanel"
@@ -99,9 +98,9 @@
             "
           />
 
-          <!-- Timezone Panel -->
+          <!-- Timezone Choice Panel -->
           <ProjectNotificationTimezoneChoice
-            v-show="sidePanelView === 'timezone'"
+            v-if="sidePanelView === 'timezone'"
             @close="closeNotificationPanel"
             @back-to-settings="switchToSettings"
           />