refactor: support icon for another file and unknow

Services/client/package.json

@@ -20,6 +20,7 @@
     "@tsconfig/node18": "^18.2.2",
     "axios": "^1.6.2",
     "keycloak-js": "^23.0.0",
+    "mime": "^4.0.0",
     "nanoid": "^5.0.4",
     "pinia": "^2.1.7",
     "quasar": "^2.14.0",
@@ -32,6 +33,7 @@
     "@quasar/vite-plugin": "^1.6.0",
     "@rushstack/eslint-patch": "^1.6.0",
     "@types/jsdom": "^21.1.6",
+    "@types/mime-types": "^2.1.4",
     "@types/node": "^20.10.0",
     "@vitejs/plugin-vue": "^4.5.0",
     "@vitejs/plugin-vue-jsx": "^3.1.0",

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) {
+function getIcon(mimeType: string | undefined, fileName: string | undefined) {
-  return mimeType && mimeFileMapping.hasOwnProperty(mimeType)
+  if (mimeType === undefined) {
-    ? mimeFileMapping[mimeType].icon
+    return 'mdi-file-question-outline'
-    : '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)
+function getColor(mimeType: string | undefined, fileName: string | undefined) {
-    ? mimeFileMapping[mimeType].color
+  if (mimeType === undefined) {
-    : 'blue-11'
+    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)"
+    :name="fileMimeType && getIcon(fileMimeType, fileName)"
-    :color="fileMimeType && getColor(fileMimeType)"
+    :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
+      :pagination="{
-      :rows-per-page-options="[0]"
+        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>

Services/client/src/modules/01_user/components/FileDownload.vue

@@ -91,8 +91,9 @@ async function downloadSubmit(path: string | undefined) {
               <div class="q-px-md flex items-center justify-center">
                 <file-icon
                   size="preview"
+                  :fileName="fileInfo?.fileName ? fileInfo.fileName : undefined"
                   :fileMimeType="
-                    fileInfo?.fileType ? fileInfo?.fileType : 'unknow'
+                    fileInfo?.fileType ? fileInfo.fileType : undefined
                   "
                 />
               </div>
@@ -176,7 +177,9 @@ async function downloadSubmit(path: string | undefined) {
               <span>ประเภทไฟล์</span>
             </div>
             <div class="col-grow">
-              <span class="text-grey">{{ getType(fileInfo?.fileType) }}</span>
+              <span class="text-grey">{{
+                getType(fileInfo?.fileType, fileInfo?.fileName)
+              }}</span>
             </div>
           </div>
           <q-separator />

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

@@ -1,5 +1,6 @@
 import { ref } from 'vue'
 import { defineStore } from 'pinia'
+import mime from 'mime'
 
 import type { EhrFile } from '@/stores/tree-data'
 
@@ -13,7 +14,7 @@ export interface TypeSetting {
 export const useFileInfoStore = defineStore('info', () => {
   const fileInfo = ref<EhrFile>()
   const isFilePreview = ref<Boolean>(false)
-  const file: TypeSetting = {
+  const fileIcon: TypeSetting = {
     word: { icon: 'mdi-file-word-outline', color: 'blue-11' },
     excel: { icon: 'mdi-file-excel-outline', color: 'green-4' },
     powerpoint: { icon: 'mdi-file-powerpoint-outline', color: 'orange-4' },
@@ -23,119 +24,108 @@ export const useFileInfoStore = defineStore('info', () => {
   }
   const mimeFileMapping: MimeMap = {
     'application/msword': {
-      ...file.word,
+      ...fileIcon.word,
-      type: '.doc',
     },
     'application/vnd.openxmlformats-officedocument.wordprocessingml.document': {
-      ...file.word,
+      ...fileIcon.word,
-      type: '.docx',
     },
     'application/vnd.openxmlformats-officedocument.wordprocessingml.template': {
-      ...file.word,
+      ...fileIcon.word,
-      type: '.dotx',
     },
     'application/vnd.ms-word.document.macroEnabled.12': {
-      ...file.word,
+      ...fileIcon.word,
-      type: '.docm',
     },
     'application/vnd.ms-word.template.macroEnabled.12': {
-      ...file.word,
+      ...fileIcon.word,
-      type: '.dotm',
     },
 
     'application/vnd.ms-excel': {
-      ...file.excel,
+      ...fileIcon.excel,
-      type: '.xls',
     },
     'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': {
-      ...file.excel,
+      ...fileIcon.excel,
-      type: '.xlsx',
     },
     'application/vnd.openxmlformats-officedocument.spreadsheetml.template': {
-      ...file.excel,
+      ...fileIcon.excel,
-      type: '.xltx',
     },
     'application/vnd.ms-excel.sheet.macroEnabled.12': {
-      ...file.excel,
+      ...fileIcon.excel,
-      type: '.xlsm',
     },
     'application/vnd.ms-excel.template.macroEnabled.12': {
-      ...file.excel,
+      ...fileIcon.excel,
-      type: '.xltm',
     },
     'application/vnd.ms-excel.addin.macroEnabled.12': {
-      ...file.excel,
+      ...fileIcon.excel,
-      type: '.xlam',
     },
     'application/vnd.ms-excel.sheet.binary.macroEnabled.12': {
-      ...file.excel,
+      ...fileIcon.excel,
-      type: '.xlsb',
     },
 
     'application/vnd.ms-powerpoint': {
-      ...file.powerpoint,
+      ...fileIcon.powerpoint,
-      type: '.ppt',
     },
     'application/vnd.openxmlformats-officedocument.presentationml.presentation':
       {
-        ...file.powerpoint,
+        ...fileIcon.powerpoint,
-        type: '.pptx',
       },
     'application/vnd.openxmlformats-officedocument.presentationml.template': {
-      ...file.powerpoint,
+      ...fileIcon.powerpoint,
-      type: '.potx',
     },
     'application/vnd.openxmlformats-officedocument.presentationml.slideshow': {
-      ...file.powerpoint,
+      ...fileIcon.powerpoint,
-      type: '.ppsx',
     },
     'application/vnd.ms-powerpoint.addin.macroEnabled.12': {
-      ...file.powerpoint,
+      ...fileIcon.powerpoint,
-      type: '.ppam',
     },
     'application/vnd.ms-powerpoint.presentation.macroEnabled.12': {
-      ...file.powerpoint,
+      ...fileIcon.powerpoint,
-      type: '.pptm',
     },
     'application/vnd.ms-powerpoint.template.macroEnabled.12': {
-      ...file.powerpoint,
+      ...fileIcon.powerpoint,
-      type: '.potm',
     },
     'application/vnd.ms-powerpoint.slideshow.macroEnabled.12': {
-      ...file.powerpoint,
+      ...fileIcon.powerpoint,
-      type: '.ppsm',
     },
 
     'application/pdf': {
-      ...file.pdf,
+      ...fileIcon.pdf,
-      type: '.pdf',
     },
 
     'text/plain': {
-      ...file.txt,
+      ...fileIcon.txt,
-      type: '.txt',
     },
 
     'image/png': {
-      ...file.image,
+      ...fileIcon.image,
-      type: '.png',
     },
     'image/jpeg': {
-      ...file.image,
+      ...fileIcon.image,
-      type: '.jpg, jpeg',
     },
   }
 
-  function getType(mimeType: string | undefined): string {
+  function getType(
-    if (!!mimeType && mimeFileMapping.hasOwnProperty(mimeType)) {
+    mimeType: string | undefined,
-      return mimeFileMapping[mimeType].type
+    fileName: string | undefined,
+  ): string {
+    if (mimeType === undefined) {
+      return 'ไม่ทราบประเภท'
     }
-    return 'unknown type'
+
+    const extFomMime = mime.getExtension(mimeType)
+    if (extFomMime) {
+      return '.' + extFomMime
+    }
+    if (fileName && fileName.includes('.')) {
+      const dotIndex = fileName.lastIndexOf('.')
+      const extension = fileName.substring(dotIndex)
+      return extension
+    }
+    return 'ไม่ทราบประเภท'
   }
 
   function getFormatDate(dateTime: string | undefined): string {
     if (dateTime === undefined) {
-      return 'unknown date'
+      return 'ไม่ทราบวันที่'
     }
     const date = new Date(dateTime)
     return date.toLocaleDateString('th-TH', {
@@ -145,19 +135,9 @@ export const useFileInfoStore = defineStore('info', () => {
     })
   }
 
-  function getFileNameFormat(fileName: string | undefined): string {
-    if (fileName === undefined) {
-      return 'unknow name'
-    }
-    const dotIndex = fileName.lastIndexOf('.')
-    const fileNameOnly = fileName.substring(0, dotIndex)
-
-    return fileNameOnly
-  }
-
   function getSize(size: string | undefined): string {
     if (size === undefined) {
-      return 'unknow size'
+      return 'ไม่ทราบขนาด'
     }
     const units = ['B', 'KB', 'MB', 'GB', 'TB']
     let i = 0
@@ -169,7 +149,7 @@ export const useFileInfoStore = defineStore('info', () => {
     return sizeNumber.toFixed(2) + ' ' + units[i]
   }
 
-  async function getFileInfo(data: EhrFile) {
+  function getFileInfo(data: EhrFile) {
     isFilePreview.value = true
     fileInfo.value = data
   }
@@ -180,7 +160,6 @@ export const useFileInfoStore = defineStore('info', () => {
     fileInfo,
     getType,
     getFormatDate,
-    getFileNameFormat,
     getSize,
     getFileInfo,
   }