refactor: support icon for another file and unknow

Services/client/src/components/FileIcon.vue

@@ -1,20 +1,45 @@
 <script setup lang="ts">
 import { useFileInfoStore } from '@/stores/file-info-data'
+import mime from 'mime'
 
 const { mimeFileMapping } = useFileInfoStore()
 
-defineProps<{ fileMimeType: string | undefined; size: string }>()
+defineProps<{
+  fileMimeType: string | undefined
+  fileName: string | undefined
+  size: string
+}>()
 
-function getIcon(mimeType: string) {
-  return mimeType && mimeFileMapping.hasOwnProperty(mimeType)
-    ? mimeFileMapping[mimeType].icon
-    : 'mdi-file-question-outline'
+function getIcon(mimeType: string | undefined, fileName: string | undefined) {
+  if (mimeType === undefined) {
+    return 'mdi-file-question-outline'
+  }
+
+  const extFomMime = mime.getExtension(mimeType)
+  if (extFomMime) {
+    return mimeFileMapping[mimeType].icon
+  }
+  if (fileName && fileName.includes('.')) {
+    return 'mdi-file-outline'
+  }
+  return 'mdi-file-question-outline'
 }
-function getColor(mimeType: string) {
-  return mimeType && mimeFileMapping.hasOwnProperty(mimeType)
-    ? mimeFileMapping[mimeType].color
-    : 'blue-11'
+
+function getColor(mimeType: string | undefined, fileName: string | undefined) {
+  if (mimeType === undefined) {
+    return 'grey-5'
+  }
+
+  const extFomMime = mime.getExtension(mimeType)
+  if (extFomMime) {
+    return mimeFileMapping[mimeType].color
+  }
+  if (fileName && fileName.includes('.')) {
+    return 'blue-11'
+  }
+  return 'grey-5'
 }
+
 function getIconSize(s: string) {
   type SizeMapping = {
     [key: string]: string
@@ -29,8 +54,8 @@ function getIconSize(s: string) {
 
 <template>
   <q-icon
-    :name="fileMimeType && getIcon(fileMimeType)"
-    :color="fileMimeType && getColor(fileMimeType)"
+    :name="fileMimeType && getIcon(fileMimeType, fileName)"
+    :color="fileMimeType && getColor(fileMimeType, fileName)"
     :size="getIconSize(size)"
   />
 </template>

Services/client/src/components/FileItem.vue

@@ -340,7 +340,8 @@ async function submitFileForm(
         <div class="q-px-md flex items-center justify-center">
           <file-icon
             size="preview"
-            :fileMimeType="value.fileType ? value.fileType : 'unknow'"
+            :fileMimeType="value.fileType ? value.fileType : undefined"
+            :fileName="value.fileName ? value.fileName : undefined"
           />
         </div>
         <div

Services/client/src/components/FileSearched.vue

@@ -252,7 +252,8 @@ onMounted(() => {
           <div class="q-px-md flex items-center justify-center">
             <file-icon
               size="preview"
-              :fileMimeType="value.fileType ? value.fileType : 'unknow'"
+              :fileName="value?.fileName ? value.fileType : undefined"
+              :fileMimeType="value?.fileType ? value.fileType : undefined"
             />
           </div>
           <div
@@ -298,13 +299,18 @@ onMounted(() => {
       :rows="filterFoundFile"
       :columns="columns"
       row-key="name"
-      hide-bottom
-      :rows-per-page-options="[0]"
+      :pagination="{
+        rowsPerPage: 0,
+      }"
       class="cursor"
     >
       <template v-slot:body-cell-name="nameData">
         <q-td style="width: 50%" @click="() => getFileInfo(nameData.row)">
-          <file-icon size="list" :fileMimeType="nameData.row.fileType" />
+          <file-icon
+            size="list"
+            :fileMimeType="nameData.row.fileType"
+            :fileName="nameData.row.fileName"
+          />
           {{ nameData.row.fileName }}
         </q-td>
       </template>
@@ -312,7 +318,7 @@ onMounted(() => {
       <template v-slot:body-cell-fileType="typeData">
         <q-td>
           <div class="justify-center">
-            {{ getType(typeData.row.fileType) }}
+            {{ getType(typeData.row.fileType, typeData.row.fileName) }}
           </div>
         </q-td>
       </template>

Services/client/src/components/ListView.vue

@@ -411,7 +411,7 @@ const onRowClick = (evt: Event, row: TreeDataFolder, index: number) => {
             "
             id="listViewGetFileInfo"
           >
-            <file-icon size="list" :fileMimeType="nameRow.row.fileType" />
+            <file-icon size="list" :fileMimeType="nameRow.row.fileType" :fileName="nameRow.row.fileName" />
             {{ nameRow.row.fileName }}
           </q-td>
         </template>
@@ -419,7 +419,7 @@ const onRowClick = (evt: Event, row: TreeDataFolder, index: number) => {
         <template v-slot:body-cell-fileType="fileTypeRow">
           <q-td>
             <div class="justify-center">
-              {{ getType(fileTypeRow.row.fileType) }}
+              {{ getType(fileTypeRow.row.fileType, fileTypeRow.row.fileName) }}
             </div>
           </q-td>
         </template>