From 37b8f640277a85c029ad3f5094b2751de87959b1 Mon Sep 17 00:00:00 2001
From: puri-ph4tt <puriphat001@gmail.com>
Date: Thu, 23 Nov 2023 17:59:17 +0700
Subject: [PATCH] refactor: file info store (Mime type) color & icon

---
 Services/client/src/components/FileIcon.vue  |  35 ++++
 Services/client/src/stores/file-info-data.ts | 161 +++++++++++++++++++
 2 files changed, 196 insertions(+)
 create mode 100644 Services/client/src/components/FileIcon.vue
 create mode 100644 Services/client/src/stores/file-info-data.ts

diff --git a/Services/client/src/components/FileIcon.vue b/Services/client/src/components/FileIcon.vue
new file mode 100644
index 0000000..bf31845
--- /dev/null
+++ b/Services/client/src/components/FileIcon.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { useFileInfoStore } from '@/stores/file-info-data'
+
+const { mimeFileMapping } = useFileInfoStore()
+
+defineProps<{ fileMimeType: any; size: string }>()
+
+function getIcon(mimeType: string) {
+  if (mimeFileMapping.hasOwnProperty(mimeType)) {
+    return mimeFileMapping[mimeType].icon
+  } else {
+    return 'mdi-file-question-outline'
+  }
+}
+function getColor(mimeType: string) {
+  if (mimeFileMapping.hasOwnProperty(mimeType)) {
+    return mimeFileMapping[mimeType].color
+  } else {
+    return 'blue-11'
+  }
+}
+function getSize(s: string) {
+  if (s === 'preview') {
+    return '6em'
+  }
+}
+</script>
+
+<template>
+  <q-icon
+    :name="getIcon(fileMimeType)"
+    :color="getColor(fileMimeType)"
+    :size="getSize(size)"
+  />
+</template>
diff --git a/Services/client/src/stores/file-info-data.ts b/Services/client/src/stores/file-info-data.ts
new file mode 100644
index 0000000..414daf7
--- /dev/null
+++ b/Services/client/src/stores/file-info-data.ts
@@ -0,0 +1,161 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+
+import type { EhrFile } from '@/stores/tree-data'
+
+export interface MimeMap {
+  [key: string]: { icon: string; color: string; type: string }
+}
+
+export const useFileInfoStore = defineStore('info', () => {
+  const fileInfo = ref<EhrFile>()
+  const isPreview = ref<Boolean>(false)
+  const mimeFileMapping: MimeMap = {
+    'application/msword': {
+      icon: 'mdi-file-word-outline',
+      color: 'blue-11',
+      type: '.doc',
+    },
+    'application/vnd.openxmlformats-officedocument.wordprocessingml.document': {
+      icon: 'mdi-file-word-outline',
+      color: 'blue-11',
+      type: '.docx',
+    },
+    'application/vnd.openxmlformats-officedocument.wordprocessingml.template': {
+      icon: 'mdi-file-word-outline',
+      color: 'blue-11',
+      type: '.dotx',
+    },
+    'application/vnd.ms-word.document.macroEnabled.12': {
+      icon: 'mdi-file-word-outline',
+      color: 'blue-11',
+      type: '.docm',
+    },
+    'application/vnd.ms-word.template.macroEnabled.12': {
+      icon: 'mdi-file-word-outline',
+      color: 'blue-11',
+      type: '.dotm',
+    },
+
+    'application/vnd.ms-excel': {
+      icon: 'mdi-file-excel-outline',
+      color: 'green-12',
+      type: '.xls',
+    },
+    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': {
+      icon: 'mdi-file-excel-outline',
+      color: 'green-12',
+      type: '.xlsx',
+    },
+    'application/vnd.openxmlformats-officedocument.spreadsheetml.template': {
+      icon: 'mdi-file-excel-outline',
+      color: 'green-12',
+      type: '.xltx',
+    },
+    'application/vnd.ms-excel.sheet.macroEnabled.12': {
+      icon: 'mdi-file-excel-outline',
+      color: 'green-12',
+      type: '.xlsm',
+    },
+    'application/vnd.ms-excel.template.macroEnabled.12': {
+      icon: 'mdi-file-excel-outline',
+      color: 'green-12',
+      type: '.xltm',
+    },
+    'application/vnd.ms-excel.addin.macroEnabled.12': {
+      icon: 'mdi-file-excel-outline',
+      color: 'green-12',
+      type: '.xlam',
+    },
+    'application/vnd.ms-excel.sheet.binary.macroEnabled.12': {
+      icon: 'mdi-file-excel-outline',
+      color: 'green-12',
+      type: '.xlsb',
+    },
+
+    'application/vnd.ms-powerpoint': {
+      icon: 'mdi-file-powerpoint-outline',
+      color: 'orange-12',
+      type: '.ppt',
+    },
+    'application/vnd.openxmlformats-officedocument.presentationml.presentation':
+      {
+        icon: 'mdi-file-powerpoint-outline',
+        color: 'orange-12',
+        type: '.pptx',
+      },
+    'application/vnd.openxmlformats-officedocument.presentationml.template': {
+      icon: 'mdi-file-powerpoint-outline',
+      color: 'orange-12',
+      type: '.potx',
+    },
+    'application/vnd.openxmlformats-officedocument.presentationml.slideshow': {
+      icon: 'mdi-file-powerpoint-outline',
+      color: 'orange-12',
+      type: '.ppsx',
+    },
+    'application/vnd.ms-powerpoint.addin.macroEnabled.12': {
+      icon: 'mdi-file-powerpoint-outline',
+      color: 'orange-12',
+      type: '.ppam',
+    },
+    'application/vnd.ms-powerpoint.presentation.macroEnabled.12': {
+      icon: 'mdi-file-powerpoint-outline',
+      color: 'orange-12',
+      type: '.pptm',
+    },
+    'application/vnd.ms-powerpoint.template.macroEnabled.12': {
+      icon: 'mdi-file-powerpoint-outline',
+      color: 'orange-12',
+      type: '.potm',
+    },
+    'application/vnd.ms-powerpoint.slideshow.macroEnabled.12': {
+      icon: 'mdi-file-powerpoint-outline',
+      color: 'orange-12',
+      type: '.ppsm',
+    },
+
+    'application/pdf': {
+      icon: 'mdi-file-document-outline',
+      color: 'red-12',
+      type: '.pdf',
+    },
+
+    'text/plain': {
+      icon: 'mdi-file-document-outline',
+      color: 'blue-11',
+      type: '.txt',
+    },
+
+    'image/x-png': {
+      icon: 'mdi-file-image-outline',
+      color: 'blue-11',
+      type: '.png',
+    },
+    'image/x-citrix-jpeg': {
+      icon: 'mdi-file-image-outline',
+      color: 'blue-11',
+      type: '.jpg, jpeg',
+    },
+  }
+
+  function getType(mimeType: any) {
+    if (mimeFileMapping.hasOwnProperty(mimeType)) {
+      return mimeFileMapping[mimeType].type
+    } else {
+      return 'unknow type'
+    }
+  }
+
+  async function getFileInfo(data: EhrFile) {
+    fileInfo.value = data
+  }
+
+  return {
+    mimeFileMapping,
+    isPreview,
+    fileInfo,
+    getFileInfo,
+    getType,
+  }
+})