From 8228f9791c48269a2c087dc6f1e1b2e2cb77e944 Mon Sep 17 00:00:00 2001
From: chiayin <chiayin.kuo@dsp.im>
Date: Fri, 17 Feb 2023 14:48:34 +0800
Subject: [PATCH] Files: if data length is 0, layout

---
 src/stores/files.js       |  1 +
 src/views/Files/index.vue | 26 ++++++++++++++++++--------
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/stores/files.js b/src/stores/files.js
index 8f7275d..58cb2bc 100644
--- a/src/stores/files.js
+++ b/src/stores/files.js
@@ -51,6 +51,7 @@ export default defineStore('filesStore', {
     let filesTag = state.filesTag;
 
     result = result.filter(file => data[filesTag].includes(file.fileType));
+
     return result;
     },
   },
diff --git a/src/views/Files/index.vue b/src/views/Files/index.vue
index 2bb699d..d3c6706 100644
--- a/src/views/Files/index.vue
+++ b/src/views/Files/index.vue
@@ -4,7 +4,7 @@
     <section class="mb-4">
       <h2 class="font-bold py-4 mb-4 border-b border-neutral-500">Recently Used</h2>
       <!-- card group 最多六個-->
-      <ul class="flex justify-start items-center gap-4 overflow-x-auto w-full scrollbar whitespace-nowrap pb-4">
+      <ul class="flex justify-start items-center gap-4 overflow-x-auto w-full h-[192px] scrollbar whitespace-nowrap pb-4">
         <!-- card item v-for -->
         <li class="min-w-[216px] h-[168px] p-4 border rounded border-neutral-300 hover:text-primary hover:bg-primary/50 hover:border-primary duration-300" v-for="(file, index) in recentlyUsedFiles.slice(0, 6)" :key="file.id">
           <a href="" class="h-full flex flex-col justify-between">
@@ -149,16 +149,18 @@
       /**
        * Read allFiles
        */
-      allFiles: function(value) {
-        let sortFiles = Array.from(this.store.allFiles);
+      allFiles: function() {
+        if(this.store.allFiles.length !== 0){
+          let sortFiles = Array.from(this.store.allFiles);
 
-        let dataSortOrder = sortFiles.sort((x,y) => x.updated_at - y.updated_at);
-        let dataSort = this.sortReverseOrder === false? dataSortOrder: dataSortOrder.reverse();
+          let dataSortOrder = sortFiles.sort((x,y) => x.updated_at - y.updated_at);
+          let dataSort = this.sortReverseOrder === false? dataSortOrder: dataSortOrder.reverse();
 
-        let strSortOrder = sortFiles.sort((x, y)=> x[this.sortKey].localeCompare(y[this.sortKey], 'en'));
-        let strSort = this.sortReverseOrder === false? strSortOrder: strSortOrder.reverse();
+          let strSortOrder = sortFiles.sort((x, y)=> x[this.sortKey].localeCompare(y[this.sortKey], 'en'));
+          let strSort = this.sortReverseOrder === false? strSortOrder: strSortOrder.reverse();
 
-        return this.sortKey !== 'updated_at'? strSort: dataSort;
+          return this.sortKey !== 'updated_at'? strSort: dataSort;
+        }
       },
       /**
        * 時間排序，如果沒有 accessed_at 就不加入 data
@@ -169,6 +171,14 @@
         return recentlyUsedFiles.sort((x, y) => y.updated_at - x.updated_at);
       },
     },
+    watch:{
+      allFiles:{
+        handler:function(val,oldVal){
+          this.allFiles;
+        },
+        deep:true,
+      }
+    },
     methods: {
       /**
        * switch sort