refactor: list view icon, date, file type

Services/client/src/components/ListView.vue

@@ -3,9 +3,12 @@ import { computed, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import type { QTableProps } from 'quasar'
 import { useTreeDataStore } from '@/stores/tree-data'
+import { useFileInfoStore } from '@/stores/file-info-data'
 import FromEdit from '@/components/FromEdit.vue'
+import FileIcon from '@/components/FileIcon.vue'
 
 const { deleteFolder } = useTreeDataStore()
+const { getFormatDate, getSize, getType } = useFileInfoStore()
 const { listDataFile, listDataFolder, currentDept } = storeToRefs(
   useTreeDataStore()
 )
@@ -58,7 +61,7 @@ const columnsFolder: QTableProps['columns'] = [
     sortable: true,
   },
   {
-    name: 'createdBy',
+    name: 'createdAt',
     align: 'center',
     label: 'วันที่สร้าง',
     field: 'createdAt',
@@ -76,7 +79,7 @@ const columnsFolder: QTableProps['columns'] = [
 
 const columnsFile: QTableProps['columns'] = [
   {
-    name: 'fileName',
+    name: 'name',
     required: true,
     label: 'ชื่อไฟล์',
     align: 'left',
@@ -163,7 +166,13 @@ const columnsFile: QTableProps['columns'] = [
             {{ nameRow.row.name }}
           </q-td>
         </template>
-
+        <template v-slot:body-cell-createdAt="createdAtRow">
+          <q-td>
+            <div class="justify-center">
+              {{ getFormatDate(createdAtRow.row.createdAt) }}
+            </div>
+          </q-td>
+        </template>
         <template v-slot:body-cell-actions="actionsRow">
           <q-td class="justify-center">
             <div>
@@ -241,14 +250,16 @@ const columnsFile: QTableProps['columns'] = [
               }
             "
           >
-            <q-icon :name="currentIcon" size="2em" color="primary" />
-            {{ nameRow.row.name }}
+          <file-icon size="list" :fileMimeType="nameRow.row.fileType" />
+            {{ nameRow.row.fileName }}
           </q-td>
         </template>
 
         <template v-slot:body-cell-fileType="fileTypeRow">
           <q-td>
-            {{ fileTypeRow.row.fileType }}
+            <div class="justify-center">
+              {{ getType(fileTypeRow.row.fileType) }}
+            </div>
           </q-td>
         </template>
 
@@ -261,7 +272,7 @@ const columnsFile: QTableProps['columns'] = [
                 self="center right"
                 :offset="[5, 1]"
               >
-                {{ actionsRow.row.fileSize }}
+                {{ getSize(actionsRow.row.fileSize) }}
               </q-tooltip>
             </div>
             <div v-if="props.mode === 'admin'">