Merge branch 'phatt' into development

2023-12-07 16:23:54 +07:00 · 2023-12-07 16:23:54 +07:00 · 8a9625c8c3
commit 8a9625c8c3
parent 17522c62be 87fb1e753a
7 changed files with 104 additions and 88 deletions
--- a/Services/client/package.json
+++ b/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",
--- a/Services/client/src/components/FileIcon.vue
+++ b/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>
--- a/Services/client/src/components/FileItem.vue
+++ b/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
--- a/Services/client/src/components/FileSearched.vue
+++ b/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>
--- a/Services/client/src/components/ListView.vue
+++ b/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>
--- a/Services/client/src/modules/01_user/components/FileDownload.vue
+++ b/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 />
--- a/Services/client/src/stores/file-info-data.ts
+++ b/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,
-      type: '.doc',
+      ...fileIcon.word,
    },
    'application/vnd.openxmlformats-officedocument.wordprocessingml.document': {
-      ...file.word,
-      type: '.docx',
+      ...fileIcon.word,
    },
    'application/vnd.openxmlformats-officedocument.wordprocessingml.template': {
-      ...file.word,
-      type: '.dotx',
+      ...fileIcon.word,
    },
    'application/vnd.ms-word.document.macroEnabled.12': {
-      ...file.word,
-      type: '.docm',
+      ...fileIcon.word,
    },
    'application/vnd.ms-word.template.macroEnabled.12': {
-      ...file.word,
-      type: '.dotm',
+      ...fileIcon.word,
    },

    'application/vnd.ms-excel': {
-      ...file.excel,
-      type: '.xls',
+      ...fileIcon.excel,
    },
    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': {
-      ...file.excel,
-      type: '.xlsx',
+      ...fileIcon.excel,
    },
    'application/vnd.openxmlformats-officedocument.spreadsheetml.template': {
-      ...file.excel,
-      type: '.xltx',
+      ...fileIcon.excel,
    },
    'application/vnd.ms-excel.sheet.macroEnabled.12': {
-      ...file.excel,
-      type: '.xlsm',
+      ...fileIcon.excel,
    },
    'application/vnd.ms-excel.template.macroEnabled.12': {
-      ...file.excel,
-      type: '.xltm',
+      ...fileIcon.excel,
    },
    'application/vnd.ms-excel.addin.macroEnabled.12': {
-      ...file.excel,
-      type: '.xlam',
+      ...fileIcon.excel,
    },
    'application/vnd.ms-excel.sheet.binary.macroEnabled.12': {
-      ...file.excel,
-      type: '.xlsb',
+      ...fileIcon.excel,
    },

    'application/vnd.ms-powerpoint': {
-      ...file.powerpoint,
-      type: '.ppt',
+      ...fileIcon.powerpoint,
    },
    'application/vnd.openxmlformats-officedocument.presentationml.presentation':
      {
-        ...file.powerpoint,
-        type: '.pptx',
+        ...fileIcon.powerpoint,
      },
    'application/vnd.openxmlformats-officedocument.presentationml.template': {
-      ...file.powerpoint,
-      type: '.potx',
+      ...fileIcon.powerpoint,
    },
    'application/vnd.openxmlformats-officedocument.presentationml.slideshow': {
-      ...file.powerpoint,
-      type: '.ppsx',
+      ...fileIcon.powerpoint,
    },
    'application/vnd.ms-powerpoint.addin.macroEnabled.12': {
-      ...file.powerpoint,
-      type: '.ppam',
+      ...fileIcon.powerpoint,
    },
    'application/vnd.ms-powerpoint.presentation.macroEnabled.12': {
-      ...file.powerpoint,
-      type: '.pptm',
+      ...fileIcon.powerpoint,
    },
    'application/vnd.ms-powerpoint.template.macroEnabled.12': {
-      ...file.powerpoint,
-      type: '.potm',
+      ...fileIcon.powerpoint,
    },
    'application/vnd.ms-powerpoint.slideshow.macroEnabled.12': {
-      ...file.powerpoint,
-      type: '.ppsm',
+      ...fileIcon.powerpoint,
    },

    'application/pdf': {
-      ...file.pdf,
-      type: '.pdf',
+      ...fileIcon.pdf,
    },

    'text/plain': {
-      ...file.txt,
-      type: '.txt',
+      ...fileIcon.txt,
    },

    'image/png': {
-      ...file.image,
-      type: '.png',
+      ...fileIcon.image,
    },
    'image/jpeg': {
-      ...file.image,
-      type: '.jpg, jpeg',
+      ...fileIcon.image,
    },
  }

-  function getType(mimeType: string | undefined): string {
-    if (!!mimeType && mimeFileMapping.hasOwnProperty(mimeType)) {
-      return mimeFileMapping[mimeType].type
+  function getType(
+    mimeType: string | undefined,
+    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,
  }