refactor: file info preview mime type, icon, type

This commit is contained in:
puri-ph4tt 2023-11-28 09:22:44 +07:00 committed by Methapon2001
parent 0666a60741
commit b10679b53c
No known key found for this signature in database
GPG key ID: 849924FEF46BD132
4 changed files with 85 additions and 69 deletions

View file

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