refactor: file info preview mime type, icon, type
This commit is contained in:
parent
0666a60741
commit
b10679b53c
4 changed files with 85 additions and 69 deletions
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue