hrms-bangkok/hrms-edm
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

refactor: file info store (Mime type) color & icon

Browse source
This commit is contained in:
puri-ph4tt 2023-11-23 17:59:17 +07:00
parent 04b87f6b74
commit 37b8f64027
2 changed files with 196 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

35
Services/client/src/components/FileIcon.vue Normal file
View file

@ -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>

161
Services/client/src/stores/file-info-data.ts Normal file
View file

@ -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,
}
})