From 23580769145a638327d2fba3d86fa4fb286dae29 Mon Sep 17 00:00:00 2001
From: Quentin Guillemin <quentin.guillemin@recia.fr>
Date: Fri, 29 Sep 2023 12:56:38 +0200
Subject: [PATCH] feat: files requested automatic and files refresh

---
 src/main/webapp/src/App.vue                   |  9 ++--
 .../src/components/BottomNavigation.vue       | 12 +++--
 .../components/drawers/NavigationDrawer.vue   |  5 ++
 .../src/components/layouts/FilesLayout.vue    |  1 -
 src/main/webapp/src/router/index.ts           | 17 +++---
 .../webapp/src/stores/configurationStore.ts   | 52 +++++++++++++++++++
 src/main/webapp/src/types/enums/Navigation.ts |  6 +++
 .../webapp/src/views/home/FavoritesView.vue   | 14 ++---
 .../webapp/src/views/home/ProjectsView.vue    | 14 ++---
 src/main/webapp/src/views/home/PublicView.vue | 14 ++---
 src/main/webapp/src/views/home/SharedView.vue | 14 ++---
 11 files changed, 102 insertions(+), 56 deletions(-)
 create mode 100644 src/main/webapp/src/types/enums/Navigation.ts

diff --git a/src/main/webapp/src/App.vue b/src/main/webapp/src/App.vue
index bb21e80c..d5c923c6 100644
--- a/src/main/webapp/src/App.vue
+++ b/src/main/webapp/src/App.vue
@@ -12,13 +12,15 @@ import { useRouter } from 'vue-router';
 import { useTheme } from 'vuetify';
 
 const configurationStore = useConfigurationStore();
-const { resetState } = configurationStore;
-const { selectedFile, isSelectedFile, isConfirmation } = storeToRefs(configurationStore);
+const { refresh, resetState } = configurationStore;
+const { lastNavigation, selectedFile, isSelectedFile, isConfirmation } = storeToRefs(configurationStore);
 
 const router = useRouter();
 
-router.beforeEach(() => {
+router.beforeEach((to) => {
   resetState();
+  if (to.name != undefined && to.name != null) lastNavigation.value = to.name as string;
+  refresh(true, true);
 });
 
 const theme = useTheme();
@@ -52,6 +54,7 @@ const deleteItem = async (result: Response) => {
   if (result == Response.yes && isSelectedFile.value) {
     try {
       await deleteFile(selectedFile.value!);
+      refresh(true);
     } catch (e) {
       errorHandler(e);
     }
diff --git a/src/main/webapp/src/components/BottomNavigation.vue b/src/main/webapp/src/components/BottomNavigation.vue
index 8d2856a5..eb8065c8 100644
--- a/src/main/webapp/src/components/BottomNavigation.vue
+++ b/src/main/webapp/src/components/BottomNavigation.vue
@@ -1,26 +1,30 @@
 <script setup lang="ts">
+import { useConfigurationStore } from '@/stores/configurationStore';
 import { useI18n } from 'vue-i18n';
 import { useDisplay } from 'vuetify';
 
+const configurationStore = useConfigurationStore();
+const { refresh } = configurationStore;
+
 const { mobile } = useDisplay();
 const { t } = useI18n();
 </script>
 
 <template>
   <v-bottom-navigation v-if="mobile" grow color="primary" class="pa-2">
-    <v-btn :to="{ name: 'projects' }" rounded="xl">
+    <v-btn :to="{ name: 'projects' }" rounded="xl" @click="refresh">
       <v-icon icon="fas fa-folder" />
       {{ t('navigation.item.projects') }}
     </v-btn>
-    <v-btn :to="{ name: 'favorites' }" rounded="xl">
+    <v-btn :to="{ name: 'favorites' }" rounded="xl" @click="refresh">
       <v-icon icon="fas fa-star" />
       {{ t('navigation.item.favorites') }}
     </v-btn>
-    <v-btn :to="{ name: 'shared' }" rounded="xl">
+    <v-btn :to="{ name: 'shared' }" rounded="xl" @click="refresh">
       <v-icon icon="fas fa-share-nodes" />
       {{ t('navigation.item.shared') }}
     </v-btn>
-    <v-btn :to="{ name: 'public' }" rounded="xl">
+    <v-btn :to="{ name: 'public' }" rounded="xl" @click="refresh">
       <v-icon icon="fas fa-globe" />
       {{ t('navigation.item.public') }}
     </v-btn>
diff --git a/src/main/webapp/src/components/drawers/NavigationDrawer.vue b/src/main/webapp/src/components/drawers/NavigationDrawer.vue
index 193e246d..b5770ccc 100644
--- a/src/main/webapp/src/components/drawers/NavigationDrawer.vue
+++ b/src/main/webapp/src/components/drawers/NavigationDrawer.vue
@@ -4,6 +4,7 @@ import { storeToRefs } from 'pinia';
 import { useI18n } from 'vue-i18n';
 
 const configurationStore = useConfigurationStore();
+const { refresh } = configurationStore;
 const { isSettings } = storeToRefs(configurationStore);
 
 const { t } = useI18n();
@@ -20,6 +21,7 @@ const { t } = useI18n();
           :to="{ name: 'projects' }"
           rounded="xl"
           class="mb-2"
+          @click="refresh"
         />
         <v-list-item
           prepend-icon="fas fa-star"
@@ -27,6 +29,7 @@ const { t } = useI18n();
           :to="{ name: 'favorites' }"
           rounded="xl"
           class="mb-2"
+          @click="refresh"
         />
         <v-list-item
           prepend-icon="fas fa-share-nodes"
@@ -34,6 +37,7 @@ const { t } = useI18n();
           :to="{ name: 'shared' }"
           rounded="xl"
           class="mb-2"
+          @click="refresh"
         />
         <v-list-item
           prepend-icon="fas fa-globe"
@@ -41,6 +45,7 @@ const { t } = useI18n();
           :to="{ name: 'public' }"
           rounded="xl"
           class="mb-2"
+          @click="refresh"
         />
       </v-list>
       <div class="flex-grow-1"></div>
diff --git a/src/main/webapp/src/components/layouts/FilesLayout.vue b/src/main/webapp/src/components/layouts/FilesLayout.vue
index cda57448..ae194f8b 100644
--- a/src/main/webapp/src/components/layouts/FilesLayout.vue
+++ b/src/main/webapp/src/components/layouts/FilesLayout.vue
@@ -3,7 +3,6 @@ import FileCard from '@/components/FileCard.vue';
 
 defineProps<{
   files: Array<any> | undefined;
-  list?: boolean;
 }>();
 </script>
 
diff --git a/src/main/webapp/src/router/index.ts b/src/main/webapp/src/router/index.ts
index 2803a433..d1ee7e77 100644
--- a/src/main/webapp/src/router/index.ts
+++ b/src/main/webapp/src/router/index.ts
@@ -1,3 +1,4 @@
+import { Navigation } from '@/types/enums/Navigation';
 import { createRouter, createWebHistory } from 'vue-router';
 
 const router = createRouter({
@@ -9,23 +10,23 @@ const router = createRouter({
       component: () => import('@/views/HomeView.vue'),
       children: [
         {
-          path: 'projects',
-          name: 'projects',
+          path: Navigation.projects,
+          name: Navigation.projects,
           component: () => import('@/views/home/ProjectsView.vue'),
         },
         {
-          path: 'favorites',
-          name: 'favorites',
+          path: Navigation.favorites,
+          name: Navigation.favorites,
           component: () => import('@/views/home/FavoritesView.vue'),
         },
         {
-          path: 'shared',
-          name: 'shared',
+          path: Navigation.shared,
+          name: Navigation.shared,
           component: () => import('@/views/home/SharedView.vue'),
         },
         {
-          path: 'public',
-          name: 'public',
+          path: Navigation.public,
+          name: Navigation.public,
           component: () => import('@/views/home/PublicView.vue'),
         },
       ],
diff --git a/src/main/webapp/src/stores/configurationStore.ts b/src/main/webapp/src/stores/configurationStore.ts
index 11a73554..2778166a 100644
--- a/src/main/webapp/src/stores/configurationStore.ts
+++ b/src/main/webapp/src/stores/configurationStore.ts
@@ -1,6 +1,10 @@
 import { getConfiguration } from '@/services/configurationService';
+import { getFiles, getPublic, getShared, getStarred } from '@/services/fileService';
 import type { Configuration } from '@/types/configurationType';
+import { Navigation } from '@/types/enums/Navigation';
 import { errorHandler } from '@/utils/axiosUtils';
+import { differenceInMilliseconds } from 'date-fns';
+import debounce from 'lodash.debounce';
 import { defineStore } from 'pinia';
 import { computed, ref } from 'vue';
 
@@ -23,8 +27,52 @@ export const useConfigurationStore = defineStore('configuration', () => {
 
   const isInit = computed<boolean>(() => configuration.value != undefined);
 
+  /* -- Gestion de la navigation -- */
+
+  const lastNavigation = ref<string | undefined>();
+
   /* -- Gestion des fichier -- */
 
+  let lastUpdated = new Date();
+
+  const files = ref<Array<any> | undefined>();
+
+  const loadFiles = async (requestedFiles: Navigation | string) => {
+    try {
+      let response;
+      switch (requestedFiles) {
+        case Navigation.projects:
+          response = await getFiles();
+          break;
+        case Navigation.favorites:
+          response = await getStarred();
+          break;
+        case Navigation.shared:
+          response = await getShared();
+          break;
+        case Navigation.public:
+          response = await getPublic();
+          break;
+      }
+      files.value = response.data;
+    } catch (e) {
+      errorHandler(e);
+    }
+  };
+
+  const refresh = (instant?: boolean, loading?: boolean) => {
+    if (instant || differenceInMilliseconds(new Date(), lastUpdated) > 5000) {
+      if (loading) files.value = undefined;
+      const launch = debounce(() => {
+        if (lastNavigation.value != undefined) {
+          loadFiles(lastNavigation.value);
+          lastUpdated = new Date();
+        }
+      }, 200);
+      launch();
+    }
+  };
+
   const selectedFile = ref<number | undefined>();
   const isSelectedFile = computed<boolean>(() => selectedFile.value != undefined);
   const isShare = ref<boolean>(false);
@@ -45,6 +93,10 @@ export const useConfigurationStore = defineStore('configuration', () => {
   return {
     init,
     isInit,
+    lastNavigation,
+    files,
+    loadFiles,
+    refresh,
     selectedFile,
     isSelectedFile,
     isShare,
diff --git a/src/main/webapp/src/types/enums/Navigation.ts b/src/main/webapp/src/types/enums/Navigation.ts
new file mode 100644
index 00000000..5b7bfe35
--- /dev/null
+++ b/src/main/webapp/src/types/enums/Navigation.ts
@@ -0,0 +1,6 @@
+export enum Navigation {
+  projects = 'projects',
+  favorites = 'favorites',
+  shared = 'shared',
+  public = 'public',
+}
diff --git a/src/main/webapp/src/views/home/FavoritesView.vue b/src/main/webapp/src/views/home/FavoritesView.vue
index 5e73c81a..1b1b1f4e 100644
--- a/src/main/webapp/src/views/home/FavoritesView.vue
+++ b/src/main/webapp/src/views/home/FavoritesView.vue
@@ -1,16 +1,10 @@
 <script setup lang="ts">
 import FilesLayout from '@/components/layouts/FilesLayout.vue';
-import { getStarred } from '@/services/fileService';
-import { ref } from 'vue';
+import { useConfigurationStore } from '@/stores/configurationStore';
+import { storeToRefs } from 'pinia';
 
-const files = ref(undefined);
-
-const getData = async () => {
-  const result = await getStarred();
-  files.value = result.data;
-};
-
-getData();
+const configurationStore = useConfigurationStore();
+const { files } = storeToRefs(configurationStore);
 </script>
 
 <template>
diff --git a/src/main/webapp/src/views/home/ProjectsView.vue b/src/main/webapp/src/views/home/ProjectsView.vue
index 21f97624..1b1b1f4e 100644
--- a/src/main/webapp/src/views/home/ProjectsView.vue
+++ b/src/main/webapp/src/views/home/ProjectsView.vue
@@ -1,16 +1,10 @@
 <script setup lang="ts">
 import FilesLayout from '@/components/layouts/FilesLayout.vue';
-import { getFiles } from '@/services/fileService';
-import { ref } from 'vue';
+import { useConfigurationStore } from '@/stores/configurationStore';
+import { storeToRefs } from 'pinia';
 
-const files = ref(undefined);
-
-const getData = async () => {
-  const result = await getFiles();
-  files.value = result.data;
-};
-
-getData();
+const configurationStore = useConfigurationStore();
+const { files } = storeToRefs(configurationStore);
 </script>
 
 <template>
diff --git a/src/main/webapp/src/views/home/PublicView.vue b/src/main/webapp/src/views/home/PublicView.vue
index 2772eb3a..1b1b1f4e 100644
--- a/src/main/webapp/src/views/home/PublicView.vue
+++ b/src/main/webapp/src/views/home/PublicView.vue
@@ -1,16 +1,10 @@
 <script setup lang="ts">
 import FilesLayout from '@/components/layouts/FilesLayout.vue';
-import { getPublic } from '@/services/fileService';
-import { ref } from 'vue';
+import { useConfigurationStore } from '@/stores/configurationStore';
+import { storeToRefs } from 'pinia';
 
-const files = ref(undefined);
-
-const getData = async () => {
-  const result = await getPublic();
-  files.value = result.data;
-};
-
-getData();
+const configurationStore = useConfigurationStore();
+const { files } = storeToRefs(configurationStore);
 </script>
 
 <template>
diff --git a/src/main/webapp/src/views/home/SharedView.vue b/src/main/webapp/src/views/home/SharedView.vue
index 48bfcdc0..1b1b1f4e 100644
--- a/src/main/webapp/src/views/home/SharedView.vue
+++ b/src/main/webapp/src/views/home/SharedView.vue
@@ -1,16 +1,10 @@
 <script setup lang="ts">
 import FilesLayout from '@/components/layouts/FilesLayout.vue';
-import { getShared } from '@/services/fileService';
-import { ref } from 'vue';
+import { useConfigurationStore } from '@/stores/configurationStore';
+import { storeToRefs } from 'pinia';
 
-const files = ref(undefined);
-
-const getData = async () => {
-  const result = await getShared();
-  files.value = result.data;
-};
-
-getData();
+const configurationStore = useConfigurationStore();
+const { files } = storeToRefs(configurationStore);
 </script>
 
 <template>