Files page Recently Used api done

src/main.js

@@ -3,8 +3,9 @@ import { createPinia } from "pinia";
 
 import App from "./App.vue";
 import router from "./router";
-import axios from 'axios'
+import axios from 'axios';
-import VueAxios from 'vue-axios'
+import VueAxios from 'vue-axios';
+import moment from 'moment';
 
 import "./assets/main.css";
 
@@ -15,6 +16,8 @@ pinia.use(({ store }) => {
   store.$router = markRaw(router)
 });
 
+// can use `this.$moment` in Vue.js
+app.config.globalProperties.$moment = moment;
 app.use(pinia);
 app.use(router);
 app.use(VueAxios, axios);

src/views/Files/index.vue

@@ -6,21 +6,21 @@
       <!-- card group 最多六個-->
       <ul class="flex justify-start items-center gap-4 overflow-x-auto w-full scrollbar whitespace-nowrap pb-4">
         <!-- card item v-for -->
-        <li class="w-[216px] h-[168px] p-4 border rounded border-neutral-300 hover:text-primary hover:bg-primary/50 hover:border-primary duration-300 ">
+        <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">
             <div>
               <figure class="mb-2">
                 <IconDataFormat class="w-8 h-8 hover:fill-primary"></IconDataFormat>
               </figure>
               <h3 class="text-sm font-medium mb-2">
-                File type
+                {{ file.name }}
               </h3>
               <p class="text-sm text-neutral-500 whitespace-nowrap break-keep text-ellipsis overflow-hidden">
-                Daily operation recggggggggggggly operation records of Daily operation records of Daily operation records of Daily operation records of
+                {{ file.parentLog }}
               </p>
             </div>
             <p class="text-sm text-neutral-500">
-              Edited just now
+              {{ file.accessed_at }}
             </p>
           </a>
         </li>
@@ -29,10 +29,14 @@
     <section>
       <div class="py-4 mb-4 border-b flex justify-between items-center border-neutral-500">
         <h2 class="font-bold">All Files</h2>
-        <figure class="flex items-center">
+        <ul class="flex items-center">
-          <IconList class="mr-4"></IconList>
+          <li class="mr-4">
-          <IconGrid></IconGrid>
+            <IconList></IconList>
-        </figure>
+          </li>
+          <li>
+            <IconGrid></IconGrid>
+          </li>
+        </ul>
       </div>
       <!-- All Files type of List -->
       <div style="margin-left: -16px; margin-right: -16px;" class="overflow-y-scroll overflow-x-hidden max-h-[calc(100vh_-_480px)]  scrollbar">
@@ -41,24 +45,34 @@
               <tr>
                 <th>
                   Name
-                  <IconVector class="inline-block ml-2 fill-neutral-500" ></IconVector>
+                  <span class="ml-2 cursor-pointer">
+                    <IconVector class="inline-block fill-neutral-500"></IconVector>
+                  </span>
               </th>
               <th>
                 Parent log
-                <IconVector class="inline-block ml-2 fill-neutral-500"></IconVector>
+                <span class="ml-2 cursor-pointer">
+                  <IconVector class="inline-block fill-neutral-500"></IconVector>
+                </span>
               </th>
               <th>
                 File type
-                <IconVector class="inline-block ml-2 fill-neutral-500"></IconVector>
+                <span class="ml-2 cursor-pointer">
+                  <IconVector class="inline-block fill-neutral-500"></IconVector>
+                </span>
               </th>
               <!-- 後端暫時沒做 Owner -->
               <!-- <th>
                 Owner
-                <IconVector class="inline-block ml-2 fill-neutral-500"></IconVector>
+                <span class="ml-2 cursor-pointer">
+                  <IconVector class="inline-block fill-neutral-500"></IconVector>
+                </span>
               </th> -->
               <th>
                 Last update
-                <IconVector class="inline-block ml-2 fill-neutral-500"></IconVector>
+                <span class="ml-2 cursor-pointer">
+                  <IconVector class="inline-block fill-neutral-500"></IconVector>
+                </span>
               </th>
             </tr>
           </thead>
@@ -142,6 +156,11 @@
             return { ...itemFilter, parentLog: itemFilter.log.name }
           })
         ]
+      },
+      // 時間排序，如果沒有 accessed_at 就不加入 data
+      recentlyUsedFiles: function() {
+        let recentlyUsedFiles = this.allFiles.filter(item => item.accessed_at !== null);
+        return recentlyUsedFiles.sort((n, o) => o - n);
       }
     },
     methods: {
@@ -155,7 +174,11 @@
           const response = await this.$http.get(api);
 
           this.allFilter = response.data;
-          this.allFilter.map(o => o.fileType = "Filter");
+          this.allFilter.map(o => {
+            o.fileType = "Filter";
+            o.updated_at = this.$moment(o.updated_at).format('YYYY-MM-DD HH:MM');
+            o.accessed_at = this.$moment(o.accessed_at).format('YYYY-MM-DD HH:MM');
+          });
         } catch(error) {
         } finally {};
       },
@@ -172,11 +195,16 @@
           this.allEventLog.map(o => {
             o.parentLog = "-";
             o.fileType = "Log";
+            o.updated_at = this.$moment(o.updated_at).format('YYYY-MM-DD HH:MM');
+            o.accessed_at = this.$moment(o.accessed_at).format('YYYY-MM-DD HH:MM');
             return this.allEventLog
           })
         } catch(error) {
         };
       },
+      /**
+       * Sort Files item
+       */
     },
     mounted() {
       this.fetchFilter();