Add project activity history panel

src/components/specific/files/files-manager/FilesManager.vue

@@ -301,7 +301,7 @@ export default {
           if (selectedFileTab.value.id === "folders") {
             // WARNING displayedRows is name from DS, may change
             const folderFiles = filesTable.value.filesTable.displayedRows.map((row) => row.data);
-            documentList = folderFiles.filter(f => !isFolder(f));
+            documentList = folderFiles.filter((f) => !isFolder(f));
           }
           if (selectedFileTab.value.id === "files") {
             documentList = filesTable.value.displayedListFiles;
@@ -663,11 +663,13 @@ export default {
 
     onActivated(() => {
       const folderId = gedTargetFolder.get();
+
       if (folderId) {
-        jumpToTargetFolder(folderId);
+        jumpToTargetFolder(folderId, true);
       } else {
         jumpToTargetFolder(props.fileStructure.id);
       }
+
       gedTargetFolder.clear();
     });
 

src/components/specific/models/models-table/ModelsTable.vue

@@ -42,7 +42,7 @@
       <ModelTagsCell :model="model" :parent="modelsTable" />
     </template>
     <template #cell-location="{ row: model }">
-      <div class="visas-table__location">
+      <div class="models-table__location">
         <ModelPathCell
           :model="model"
           :allFolders="allFolders"

src/components/specific/models/models-table/model-path-cell/ModelPathCell.vue

@@ -11,7 +11,7 @@
           maxWidth="200px"
         />
       </div>
-  
+
       <transition name="fade">
         <div v-if="hovering || showFullPath" class="model-path-cell__location">
           <div
@@ -57,21 +57,15 @@
               <BIMDataIconChevron size="xxxs" fill color="default" />
             </div>
           </div>
-
-          <span
-            v-else
-            class="folder-name flex items-center"
-            @click.stop="goToGedRoot"
-          >
+
+          <span v-else class="folder-name flex items-center" @click.stop="goToGedRoot">
             <BIMDataIconFolderLocation fill color="primary" margin="0 6px 0 0" />
             {{ $t("t.rootFolder") }}
           </span>
         </div>
       </transition>
     </template>
-    <template v-else>
-      -
-    </template>
+    <template v-else> - </template>
   </div>
 </template>
 
@@ -102,7 +96,7 @@ export default {
     const hovering = ref(false);
     const showFullPath = ref(false);
     const hasLocation = computed(
-      () => ![MODEL_TYPE.META_BUILDING, MODEL_TYPE.PHOTOSPHERE_BUILDING].includes(props.model.type)
+      () => ![MODEL_TYPE.META_BUILDING, MODEL_TYPE.PHOTOSPHERE_BUILDING].includes(props.model.type),
     );
 
     const folderLocation = (model) => {

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

@@ -0,0 +1,31 @@
+.history-activity-panel {
+  height: calc(100vh - 44px - 40px - 12px - 12px);
+  overflow: auto;
+  .header {
+    h3 {
+      margin-bottom: 12px;
+      font-size: 18px;
+    }
+  }
+  .input-search {
+    border: 1px solid transparent;
+    border-radius: 3px;
+    &.focus {
+      background-color: var(--color-silver-light);
+      box-shadow: none;
+      border: 1px solid #efefef;
+    }
+  }
+  .day-group {
+    margin-top: 20px;
+    .day-title {
+      font-size: 13px;
+      color: var(--color-granite);
+      margin-bottom: 8px;
+      font-weight: 600;
+    }
+
+  }
+
+}
+

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

@@ -0,0 +1,146 @@
+<template>
+  <div class="history-activity-panel">
+    <div class="header">
+      <h3>{{ $t("ProjectOverview.activity.title") }}</h3>
+    </div>
+
+    <BIMDataSearch
+      class="input-search"
+      width="95%"
+      :placeholder="$t('t.search')"
+      v-model="searchText"
+      clear
+      color="primary"
+    />
+
+    <template v-if="hasDisplayedLogs">
+      <div v-for="(logs, day) in displayedGroupedLogs" :key="day" class="day-group">
+        <div class="day-title">{{ day }}</div>
+        <ActivityItem
+          v-for="log in logs"
+          :key="log.id"
+          :log="log"
+          :formatTimeAgo="formatTimeAgo"
+          @go-folder="$emit('go-folder', $event)"
+        />
+      </div>
+    </template>
+    <template v-else>
+      <p>{{ $t("ProjectOverview.activity.empty") }}</p>
+    </template>
+  </div>
+</template>
+
+<script>
+import { ref, onMounted, computed, watch } from "vue";
+import { useI18n } from "vue-i18n";
+
+import { getActivityFromLog } from "../../../../config/activity-config.js";
+import { useTimeAgo } from "../../../../composables/time.js";
+import ProjectService from "../../../../services/ProjectService.js";
+
+import ActivityItem from "./activity-item/ActivityItem.vue";
+
+export default {
+  props: {
+    project: Object,
+  },
+  components: {
+    ActivityItem,
+  },
+  emits: ["go-folder"],
+
+  setup(props) {
+    const { t, locale } = useI18n();
+
+    const logs = ref([]);
+    const searchText = ref("");
+
+    const { formatTimeAgo } = useTimeAgo();
+
+    const fetchLogs = async () => {
+      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);
+    };
+
+    onMounted(fetchLogs);
+
+    watch(() => props.project, fetchLogs);
+
+    const formatDay = (date) => {
+      const today = new Date();
+      const yesterday = new Date();
+
+      yesterday.setDate(today.getDate() - 1);
+
+      if (date.toDateString() === today.toDateString()) {
+        return t("t.today");
+      }
+
+      if (date.toDateString() === yesterday.toDateString()) {
+        return t("t.yesterday");
+      }
+
+      return date.toLocaleDateString(locale.value, {
+        day: "numeric",
+        month: "long",
+        year: "numeric",
+      });
+    };
+
+    const sortedLogs = computed(() => logs.value.slice().sort((a, b) => b.dateObj - a.dateObj));
+
+    const displayedGroupedLogs = computed(() => {
+      const search = searchText.value.trim().toLowerCase();
+
+      return sortedLogs.value
+        .filter((log) => !search || log._search.includes(search))
+        .reduce((groups, log) => {
+          const day = formatDay(log.dateObj);
+
+          groups[day] ??= [];
+          groups[day].push(log);
+
+          return groups;
+        }, {});
+    });
+    const hasDisplayedLogs = computed(() => Object.keys(displayedGroupedLogs.value).length > 0);
+
+    return {
+      displayedGroupedLogs,
+      hasDisplayedLogs,
+      searchText,
+      formatTimeAgo,
+    };
+  },
+};
+</script>
+
+<style scoped src="./ProjectHistoryActivity.css"></style>