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

refactor: click file 2 preview & clean search comp

Browse source
This commit is contained in:
puri-ph4tt 2023-11-23 18:00:43 +07:00
parent 37b8f64027
commit 43d009c35e
5 changed files with 191 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

148
Services/client/src/modules/01_user/components/FileDownload.vue Normal file
View file

@ -0,0 +1,148 @@
<script setup lang="ts">
import { ref } from 'vue'
import { storeToRefs } from 'pinia'
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>>()
</script>
<template>
<div class="bg-white rounded-borders shadow-5 relative">
<div class="bg-white q-pa-md">
<div class="row items-center justify-between">
<span class="text-h6">
<q-btn
flat
dense
class="q-mr-sm q-px-sm"
@click="() => (isPreview = false)"
>
<q-icon
class="pointer"
name="arrow_back"
size="1em"
color="primary"
/>
</q-btn>
{{ fileInfo?.title }}</span
>
</div>
<div class="row">
<div class="q-pa-sm">
<div class="col">
<div class="box border-radius-inherit">
<q-card flat>
<q-card-section class="column justify-center relative q-px-xl">
<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>
</q-card-section>
</q-card>
</div>
</div>
<div class="column q-py-md">
<q-btn
color="primary"
label="ดาวน์โหลด"
icon="mdi-download"
class="q-py-sm"
/>
</div>
</div>
<div class="col q-px-lg q-gutter-md">
<div class="row">
<div class="col-2">
<span>ชื่อไฟล์</span>
</div>
<div class="col-grow">
<span class="text-grey">{{ fileInfo?.fileName }}</span>
</div>
</div>
<q-separator />
<div class="row">
<div class="col-2">
<span>ชื่อเรื่อง</span>
</div>
<div class="col-grow">
<span class="text-grey">{{ fileInfo?.title }}</span>
</div>
</div>
<q-separator />
<div class="row">
<div class="col-2">
<span>รายละเอียด</span>
</div>
<div class="col-grow">
<span class="text-grey">{{ fileInfo?.description }}</span>
</div>
</div>
<q-separator />
<div class="row">
<div class="col-2">
<span>กลุ่ม/หมวดหมู่</span>
</div>
<div class="col-grow">
<span class="text-grey">{{ fileInfo?.category }}</span>
</div>
</div>
<q-separator />
<div class="row">
<div class="col-2">
<span>คำสำคัญ</span>
</div>
<div class="col-grow">
<span class="text-grey">{{ fileInfo?.keyword }}</span>
</div>
</div>
<q-separator />
<div class="row">
<div class="col-2">
<span>ขนาดไฟล์</span>
</div>
<div class="col-grow">
<span class="text-grey">{{ fileInfo?.fileSize }}</span>
</div>
</div>
<q-separator />
<div class="row">
<div class="col-2">
<span>ประเภทไฟล์</span>
</div>
<div class="col-grow">
<span class="text-grey">{{ getType(fileInfo?.fileType) }}</span>
</div>
</div>
<q-separator />
<div class="row">
<div class="col-2">
<span>วันที่อัปโหลด</span>
</div>
<div class="col-grow">
<span class="text-grey">{{ fileInfo?.createdAt }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.box {
border: 2px solid #f1f2f4;
border-radius: 8px;
}
</style>

2
Services/client/src/modules/01_user/components/SearchBar.vue
View file

@ -148,7 +148,7 @@ async function searchSubmit() {
color="primary"
label="ค้นหา"
icon="mdi-magnify"
@click="() => searchSubmit()"
@click="searchSubmit"
/>
</div>
</div>