166 lines
4 KiB
Vue
166 lines
4 KiB
Vue
<script setup lang="ts">
|
|
import { storeToRefs } from 'pinia'
|
|
import { useSearchDataStore } from '@/stores/searched-data'
|
|
import { useFileInfoStore } from '@/stores/file-info-data'
|
|
import FileIcon from '@/components/FileIcon.vue'
|
|
import type { QTableProps } from 'quasar'
|
|
|
|
defineProps<{
|
|
viewMode: 'view_list' | 'view_module'
|
|
}>()
|
|
|
|
const { foundFile } = storeToRefs(useSearchDataStore())
|
|
const { getFileInfo, getSize, getType, getFileNameFormat } = useFileInfoStore()
|
|
const columns: QTableProps['columns'] = [
|
|
{
|
|
name: 'name',
|
|
required: true,
|
|
label: 'ชื่อไฟล์',
|
|
align: 'left',
|
|
field: (row) => row.fileName,
|
|
format: (val) => `${val}`,
|
|
sortable: true,
|
|
style: 'width: 200px',
|
|
},
|
|
{
|
|
name: 'title',
|
|
align: 'center',
|
|
label: 'ชื่อเรื่อง',
|
|
field: 'title',
|
|
style: 'width: 200px',
|
|
sortable: true,
|
|
},
|
|
{
|
|
name: 'fileType',
|
|
align: 'center',
|
|
label: 'ประเภทของไฟล์',
|
|
field: 'fileType',
|
|
sortable: true,
|
|
style: 'width: 200px',
|
|
},
|
|
{
|
|
name: 'actions',
|
|
align: 'center',
|
|
label: '',
|
|
field: '',
|
|
style: 'width: 20px',
|
|
},
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="viewMode === 'view_list' && foundFile.length > 0">
|
|
<div class="grid q-mt-md">
|
|
<div v-for="(value, index) in foundFile" :key="value.title">
|
|
<div
|
|
:style="{
|
|
position: 'relative',
|
|
display: 'flex',
|
|
gap: '0.5rem',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
padding: '1rem',
|
|
maxWidth: '100%',
|
|
}"
|
|
class="box"
|
|
@click="() => getFileInfo(foundFile[index])"
|
|
>
|
|
<div class="q-px-md flex items-center justify-center">
|
|
<file-icon
|
|
size="preview"
|
|
:fileMimeType="value.fileType ? value.fileType : 'unknow'"
|
|
/>
|
|
</div>
|
|
<div
|
|
class="text-overflow-handle block q-px-md text-center"
|
|
style="max-width: 100%"
|
|
>
|
|
{{ getFileNameFormat(value.fileName) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="viewMode === 'view_module' && foundFile.length > 0">
|
|
<q-table
|
|
flat
|
|
bordered
|
|
:rows="foundFile"
|
|
:columns="columns"
|
|
row-key="name"
|
|
hide-bottom
|
|
:rows-per-page-options="[0]"
|
|
class="cursor"
|
|
>
|
|
<template v-slot:body-cell-name="nameData">
|
|
<q-td style="width: 50%" @click="() => getFileInfo(nameData.row)">
|
|
<file-icon size="list" :fileMimeType="nameData.row.fileType" />
|
|
{{ nameData.row.fileName }}
|
|
</q-td>
|
|
</template>
|
|
|
|
<template v-slot:body-cell-fileType="typeData">
|
|
<q-td>
|
|
<div class="justify-center">
|
|
{{ getType(typeData.row.fileType) }}
|
|
</div>
|
|
</q-td>
|
|
</template>
|
|
|
|
<template v-slot:body-cell-actions="sizeData">
|
|
<q-td class="justify-center">
|
|
<div>
|
|
<q-icon class="q-ma-sm" name="info" size="2em" color="primary" />
|
|
<q-tooltip
|
|
anchor="center left"
|
|
self="center right"
|
|
:offset="[5, 1]"
|
|
>
|
|
{{ getSize(sizeData.row.fileSize) }}
|
|
</q-tooltip>
|
|
</div>
|
|
</q-td>
|
|
</template>
|
|
</q-table>
|
|
</div>
|
|
|
|
<div class="q-mt-md" v-if="foundFile.length == 0">
|
|
<span>ไม่พบรายการที่ค้นหา</span>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.box {
|
|
border: 2px solid $separator-color;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.cursor {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.text-overflow-handle {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.grid {
|
|
display: grid;
|
|
width: 100%;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 1rem;
|
|
}
|
|
|
|
@media (min-width: $breakpoint-md-min) {
|
|
.grid {
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
}
|
|
}
|
|
|
|
.grid .box {
|
|
position: relative;
|
|
}
|
|
</style>
|