refactor: file info preview mime type, icon, type

2023-11-28 09:22:44 +07:00 · 2023-11-28 09:22:44 +07:00 · b10679b53c
commit b10679b53c
parent 0666a60741
4 changed files with 85 additions and 69 deletions
--- a/Services/client/src/components/FileIcon.vue
+++ b/Services/client/src/components/FileIcon.vue
@ -3,7 +3,7 @@ import { useFileInfoStore } from '@/stores/file-info-data'

 const { mimeFileMapping } = useFileInfoStore()

-defineProps<{ fileMimeType: any; size: string }>()
+defineProps<{ fileMimeType: string | undefined; size: string }>()

 function getIcon(mimeType: string) {
  if (mimeFileMapping.hasOwnProperty(mimeType)) {
@ -23,13 +23,16 @@ function getSize(s: string) {
  if (s === 'preview') {
    return '6em'
  }
+  if (s === 'list') {
+    return '2em'
+  }
 }
 </script>

 <template>
  <q-icon
-    :name="getIcon(fileMimeType)"
-    :color="getColor(fileMimeType)"
+    :name="fileMimeType && getIcon(fileMimeType)"
+    :color="fileMimeType && getColor(fileMimeType)"
    :size="getSize(size)"
  />
 </template>
--- a/Services/client/src/components/FileSearched.vue
+++ b/Services/client/src/components/FileSearched.vue
@ -2,6 +2,7 @@
 import { storeToRefs } from 'pinia'
 import { useSearchDataStore } from '@/stores/searched-data'
 import { useFileInfoStore } from '@/stores/file-info-data'
+import FileIcon from '@/components/FileIcon.vue'

 const { foundFile } = storeToRefs(useSearchDataStore())
 const { isPreview } = storeToRefs(useFileInfoStore())
@ -27,7 +28,11 @@ const { getFileInfo } = useFileInfoStore()
            "
          >
            <q-card-section class="column justify-center relative q-px-xl">
-              <q-icon name="description" size="6em" color="primary" />
+              <file-icon
+                size="preview"
+                :fileMimeType="value.fileType"
+                ref="fileIconComp"
+              />
              <span class="text-center q-pt-md">{{ value.title }}</span>
            </q-card-section>
          </q-card>
--- a/Services/client/src/modules/01_user/components/FileDownload.vue
+++ b/Services/client/src/modules/01_user/components/FileDownload.vue
@ -6,8 +6,7 @@ import { useFileInfoStore } from '@/stores/file-info-data'
 import FileIcon from '@/components/FileIcon.vue'

 const { isPreview, fileInfo } = storeToRefs(useFileInfoStore())
-const { getType } = useFileInfoStore()
-const fileIconComp = ref<InstanceType<typeof FileIcon>>()
+const { getType, getFormatDate, getSize } = useFileInfoStore()
 </script>

 <template>
@ -40,11 +39,7 @@ const fileIconComp = ref<InstanceType<typeof FileIcon>>()
                  <file-icon
                    size="preview"
                    :fileMimeType="fileInfo?.fileType"
-                    ref="fileIconComp"
                  />
-                  <div class="absolute" style="top: 0.5rem; right: 0.5rem">
-                    <file-item-action :edit="() => {}" :delete="() => {}" />
-                  </div>
                  <span class="text-center q-pt-md text-h6">{{
                    fileInfo?.title
                  }}</span>
@ -94,8 +89,8 @@ const fileIconComp = ref<InstanceType<typeof FileIcon>>()
            <div class="col-2">
              <span>กลุ่ม/หมวดหมู่</span>
            </div>
-            <div class="col-grow">
-              <span class="text-grey">{{ fileInfo?.category }}</span>
+            <div class="col-grow" v-for="category in fileInfo?.category" :key="category">
+              <span class="text-grey">{{ category }}</span>
            </div>
          </div>
          <q-separator />
@ -103,8 +98,8 @@ const fileIconComp = ref<InstanceType<typeof FileIcon>>()
            <div class="col-2">
              <span>คำสำคัญ</span>
            </div>
-            <div class="col-grow">
-              <span class="text-grey">{{ fileInfo?.keyword }}</span>
+            <div class="col-grow" v-for="keyword in fileInfo?.keyword" :key="keyword">
+              <span class="text-grey">{{ keyword }}</span>
            </div>
          </div>
          <q-separator />
@ -113,7 +108,7 @@ const fileIconComp = ref<InstanceType<typeof FileIcon>>()
              <span>ขนาดไฟล์</span>
            </div>
            <div class="col-grow">
-              <span class="text-grey">{{ fileInfo?.fileSize }}</span>
+              <span class="text-grey">{{ getSize(fileInfo?.fileSize) }}</span>
            </div>
          </div>
          <q-separator />
@ -131,7 +126,7 @@ const fileIconComp = ref<InstanceType<typeof FileIcon>>()
              <span>วันที่อัปโหลด</span>
            </div>
            <div class="col-grow">
-              <span class="text-grey">{{ fileInfo?.createdAt }}</span>
+              <span class="text-grey">{{ getFormatDate(fileInfo?.createdAt) }}</span>
            </div>
          </div>
        </div>
--- a/Services/client/src/stores/file-info-data.ts
+++ b/Services/client/src/stores/file-info-data.ts
@ -6,147 +6,158 @@ import type { EhrFile } from '@/stores/tree-data'
 export interface MimeMap {
  [key: string]: { icon: string; color: string; type: string }
 }
+export interface TypeSetting {
+  [key: string]: { icon: string; color: string }
+}

 export const useFileInfoStore = defineStore('info', () => {
  const fileInfo = ref<EhrFile>()
  const isPreview = ref<Boolean>(false)
+  const file: 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' },
+    pdf: { icon: 'mdi-file-document-outline', color: 'red-11' },
+    txt: { icon: 'mdi-file-document-outline', color: 'blue-11' },
+    image: { icon: 'mdi-file-image-outline', color: 'blue-11' },
+  }
  const mimeFileMapping: MimeMap = {
    'application/msword': {
-      icon: 'mdi-file-word-outline',
-      color: 'blue-11',
+      ...file.word,
      type: '.doc',
    },
    'application/vnd.openxmlformats-officedocument.wordprocessingml.document': {
-      icon: 'mdi-file-word-outline',
-      color: 'blue-11',
+      ...file.word,
      type: '.docx',
    },
    'application/vnd.openxmlformats-officedocument.wordprocessingml.template': {
-      icon: 'mdi-file-word-outline',
-      color: 'blue-11',
+      ...file.word,
      type: '.dotx',
    },
    'application/vnd.ms-word.document.macroEnabled.12': {
-      icon: 'mdi-file-word-outline',
-      color: 'blue-11',
+      ...file.word,
      type: '.docm',
    },
    'application/vnd.ms-word.template.macroEnabled.12': {
-      icon: 'mdi-file-word-outline',
-      color: 'blue-11',
+      ...file.word,
      type: '.dotm',
    },

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

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

    'application/pdf': {
-      icon: 'mdi-file-document-outline',
-      color: 'red-12',
+      ...file.pdf,
      type: '.pdf',
    },

    'text/plain': {
-      icon: 'mdi-file-document-outline',
-      color: 'blue-11',
+      ...file.txt,
      type: '.txt',
    },

    'image/x-png': {
-      icon: 'mdi-file-image-outline',
-      color: 'blue-11',
+      ...file.image,
      type: '.png',
    },
    'image/x-citrix-jpeg': {
-      icon: 'mdi-file-image-outline',
-      color: 'blue-11',
+      ...file.image,
      type: '.jpg, jpeg',
    },
  }

-  function getType(mimeType: any) {
-    if (mimeFileMapping.hasOwnProperty(mimeType)) {
-      return mimeFileMapping[mimeType].type
-    } else {
+  function getType(mimeType: any): string {
+    if (mimeType === undefined) {
      return 'unknow type'
+    } else {
+      if (mimeFileMapping.hasOwnProperty(mimeType)) {
+        return mimeFileMapping[mimeType].type
+      } else {
+        return 'unknow type'
+      }
    }
  }

+  function getFormatDate(dateTime: any): string {
+    const date = new Date(dateTime)
+    const result = date.toLocaleDateString('th-TH', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+    })
+    return result
+  }
+
+  function getSize(size: any): string {
+    const units = ['B', 'KB', 'MB', 'GB', 'TB']
+    let i = 0
+    while (size >= 1024 && i < units.length - 1) {
+      size /= 1024
+      i++
+    }
+    return size.toFixed(2) + ' ' + units[i]
+  }
+
  async function getFileInfo(data: EhrFile) {
    fileInfo.value = data
  }
@ -155,7 +166,9 @@ export const useFileInfoStore = defineStore('info', () => {
    mimeFileMapping,
    isPreview,
    fileInfo,
-    getFileInfo,
+    getSize,
    getType,
+    getFormatDate,
+    getFileInfo,
  }
 })