refactor: Folder size

Services/client/src/components/ListView.vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
 import type { QTableProps } from 'quasar'
-import { computed, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { storeToRefs } from 'pinia'
+import api from '@/services/HttpService'
 
 import FileIcon from '@/components/FileIcon.vue'
 import DialogDelete from '@/components/DialogDelete.vue'
@@ -13,7 +14,8 @@ import useStorage from '@/stores/storage'
 
 const storageStore = useStorage()
 const { folder, file, currentInfo } = storeToRefs(storageStore)
-const { goto, deleteFolder, deleteFile } = storageStore
+const { goto, deleteFolder, deleteFile, constructUrl, consistantPath } =
+  storageStore
 
 const { getFormatDate, getSize, getType, getFileInfo } = useFileInfoStore()
 
@@ -33,7 +35,14 @@ const props = defineProps<{
   mode: 'admin' | 'user'
 }>()
 
+interface ApiResponse {
+  size: string
+}
+
 const deleteState = ref<boolean>(false)
+const open = ref<boolean>(false)
+const sizefolder = ref<string>()
+
 const deletePath = ref<string>('')
 const deleteTarget = ref<'deleteFolder' | 'deleteFile'>()
 const deleteMap = { deleteFolder, deleteFile }
@@ -50,6 +59,37 @@ function triggerFileDelete(pathname: string) {
   deleteState.value = !deleteState.value
 }
 
+function getSizeFolder(constructFolder: string) {
+  const src = constructFolder.split('/').filter(Boolean)
+  const path = src.join('/') + '/'
+  const res = async () => {
+    const response = await api.get(constructUrl(src, false) + '/size')
+    sizefolder.value = response.data.size
+  }
+
+  if (folder.value[currentInfo.value.path]) {
+    const idx = folder.value[currentInfo.value.path].findIndex(
+      (v) => v.pathname === path,
+    )
+
+    if (idx !== -1) {
+      res()
+      if (folder.value[currentInfo.value.path][idx].folderSize) {
+        if (
+          folder.value[currentInfo.value.path][idx].folderSize !=
+          sizefolder.value
+        ) {
+          folder.value[currentInfo.value.path][idx].folderSize =
+            sizefolder.value
+        }
+      } else {
+        folder.value[currentInfo.value.path][idx].folderSize = sizefolder.value
+      }
+    }
+    return getSize(folder.value[currentInfo.value.path][idx].folderSize)
+  }
+}
+
 const colFolder = [
   {
     name: 'name',
@@ -186,18 +226,23 @@ const onRowClick = ((_, row) => {
           <q-td class="justify-center">
             <div>
               <q-icon
-                @click.stop
+                @click.stop="
+                  () => {
+                    open = !open
+                  }
+                "
                 class="q-ma-sm"
                 name="o_info"
                 size="2em"
                 color="primary"
               />
               <q-tooltip
+                :delay="1000"
                 anchor="center left"
                 self="center right"
                 :offset="[5, 1]"
               >
-                {{ data.row.name }}
+                {{ getSizeFolder(data.row.pathname) }}
               </q-tooltip>
             </div>
             <div v-if="props.mode === 'admin'">
@@ -312,7 +357,6 @@ const onRowClick = ((_, row) => {
                     fileFormComponent?.triggerFileEdit(
                       data.row,
                       data.row.pathname,
-                      data.row.fileName,
                     )
                 "
                 id="listViewFileEdit"