refactor: folder size

Services/client/src/components/ListView.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { QTableProps } from 'quasar'
-import { computed, onMounted, ref } from 'vue'
+import { computed, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import api from '@/services/HttpService'
 
@@ -13,7 +13,7 @@ import useStorage from '@/stores/storage'
 
 const storageStore = useStorage()
 const { folder, file, currentInfo } = storeToRefs(storageStore)
-const { goto, deleteFolder, deleteFile, constructUrl } = storageStore
+const { goto, deleteFolder, deleteFile } = storageStore
 
 const { getFormatDate, getSize, getType, getFileInfo } = useFileInfoStore()
 
@@ -33,13 +33,8 @@ 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'>()
@@ -57,34 +52,29 @@ 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
-  }
-
+function getFolderSize(pathname: string) {
   if (folder.value[currentInfo.value.path]) {
-    const idx = folder.value[currentInfo.value.path].findIndex(
-      (v) => v.pathname === path,
+    const value = folder.value[currentInfo.value.path].find(
+      (v) => v.pathname === pathname,
     )
 
-    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
-      }
+    if (value && !value.size) {
+      const arr = pathname.split('/').filter(Boolean)
+
+      api
+        .post<{ size: number }>(
+          `${import.meta.env.VITE_API_ENDPOINT}storage/folder/size`,
+          {
+            path: arr.slice(0, -1),
+            name: arr[arr.length - 1],
+          },
+        )
+        .then((res) => {
+          if (res.status === 200 && res.data.size) value.size = res.data.size
+        })
     }
-    return getSize(folder.value[currentInfo.value.path][idx].folderSize)
+
+    return getSize(value?.size)
   }
 }
 
@@ -235,12 +225,12 @@ const onRowClick = ((_, row) => {
                 color="primary"
               />
               <q-tooltip
-                :delay="1000"
                 anchor="center left"
                 self="center right"
+                :delay="data.row.size ? 0 : 1000"
                 :offset="[5, 1]"
               >
-                {{ getSizeFolder(data.row.pathname) }}
+                {{ getFolderSize(data.row.pathname) }}
               </q-tooltip>
             </div>
             <div v-if="props.mode === 'admin'">

Services/client/src/stores/file-info-data.ts

@@ -87,13 +87,13 @@ export const useFileInfoStore = defineStore('info', () => {
     })
   }
 
-  function getSize(size: string | undefined): string {
+  function getSize(size: number | string | undefined): string {
     if (size === undefined) return 'ไม่ทราบขนาด'
 
     const units = ['B', 'KB', 'MB', 'GB', 'TB']
 
     let i = 0
-    let sizeNumber = parseFloat(size)
+    let sizeNumber = typeof size === 'string' ? parseFloat(size) : size
     while (sizeNumber >= 1024 && i++ < units.length - 1) {
       sizeNumber /= 1024
     }

Services/client/src/stores/storage.ts

@@ -13,7 +13,7 @@ type Path = string
 export interface StorageFolder {
   pathname: string
   name: string
-  folderSize?: string
+  size?: number
   createdAt: string
   createdBy: string
 }
@@ -22,7 +22,7 @@ export interface StorageFile {
   pathname: string
   path: string
   fileName: string
-  fileSize: string
+  fileSize: number
   fileType: string
   title: string
   description: string