359 lines
9.8 KiB
Vue
359 lines
9.8 KiB
Vue
<script setup lang="ts">
|
|
import { computed, ref } from 'vue'
|
|
import { storeToRefs } from 'pinia'
|
|
|
|
import FileIcon from './FileIcon.vue'
|
|
import FileItemAction from './FileItemAction.vue'
|
|
import DialogDelete from './DialogDelete.vue'
|
|
import FileFormWrapper from './FileFormWrapper.vue'
|
|
import FolderFormWrapper from './FolderFormWrapper.vue'
|
|
|
|
import { useFileInfoStore } from '@/stores/file-info-data'
|
|
import useStorage from '@/stores/storage'
|
|
|
|
const TREE_LEVEL_NAME = ['ตู้เอกสาร', 'ลิ้นชัก', 'แฟ้ม', 'แฟ้มย่อย'] as const
|
|
|
|
const props = withDefaults(
|
|
defineProps<{ action: boolean; viewMode: 'view_list' | 'view_module' }>(),
|
|
{ action: false },
|
|
)
|
|
const { getFileInfo } = useFileInfoStore()
|
|
|
|
const storageStore = useStorage()
|
|
const { folder, file, currentInfo } = storeToRefs(storageStore)
|
|
const { goto, deleteFolder, deleteFile } = storageStore
|
|
|
|
const fileFormComponent = ref<InstanceType<typeof FileFormWrapper>>()
|
|
const folderFormComponent = ref<InstanceType<typeof FolderFormWrapper>>()
|
|
|
|
const deleteState = ref<boolean>(false)
|
|
const deletePath = ref<string>('')
|
|
const deleteTarget = ref<'deleteFolder' | 'deleteFile'>()
|
|
const deleteMap = { deleteFolder, deleteFile }
|
|
|
|
const currentIcon = computed(() =>
|
|
currentInfo.value.dept === 0
|
|
? 'mdi-file-cabinet'
|
|
: currentInfo.value.dept === 1
|
|
? 'o_inbox'
|
|
: 'o_folder_open',
|
|
)
|
|
|
|
function triggerFolderDelete(pathname: string) {
|
|
deleteTarget.value = 'deleteFolder'
|
|
deletePath.value = pathname
|
|
deleteState.value = !deleteState.value
|
|
}
|
|
|
|
function triggerFileDelete(pathname: string) {
|
|
deleteTarget.value = 'deleteFile'
|
|
deletePath.value = pathname
|
|
deleteState.value = !deleteState.value
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<file-form-wrapper ref="fileFormComponent" />
|
|
<folder-form-wrapper ref="folderFormComponent" />
|
|
<dialog-delete
|
|
v-model:open="deleteState"
|
|
@confirm="() => deleteTarget && deleteMap[deleteTarget](deletePath)"
|
|
/>
|
|
|
|
<div
|
|
class="text-h6 q-mt-md"
|
|
v-if="currentInfo.dept > 2 && currentInfo.dept < 4"
|
|
>
|
|
<div class="flex justify-between items-center">
|
|
<div>{{ TREE_LEVEL_NAME[currentInfo.dept] }}</div>
|
|
<q-btn
|
|
outline
|
|
push
|
|
dense
|
|
id="listViewFolderCreate"
|
|
class="q-px-md q-ml-md"
|
|
type="submit"
|
|
color="primary"
|
|
icon="add"
|
|
v-if="action"
|
|
:label="'สร้าง' + TREE_LEVEL_NAME[currentInfo.dept]"
|
|
@click.stop="() => folderFormComponent?.triggerFolderCreate()"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="grid q-mt-md"
|
|
v-if="currentInfo.dept < 4 && folder[currentInfo.path]"
|
|
>
|
|
<div
|
|
v-for="value in folder[currentInfo.path]"
|
|
:data-pathname="value.pathname"
|
|
>
|
|
<div
|
|
class="box"
|
|
:style="{
|
|
position: 'relative',
|
|
display: 'flex',
|
|
gap: '0.5rem',
|
|
alignItems: 'center',
|
|
flexDirection: currentInfo.dept > 2 ? 'row' : 'column',
|
|
padding: currentInfo.dept > 2 ? '.5rem 0' : '.5rem',
|
|
}"
|
|
@click="() => goto(value.pathname)"
|
|
>
|
|
<div class="q-px-md flex items-center justify-center">
|
|
<q-icon
|
|
:name="currentIcon"
|
|
:size="currentInfo.dept > 2 ? '3em' : '6em'"
|
|
color="primary"
|
|
class="col"
|
|
/>
|
|
</div>
|
|
<div
|
|
class="absolute flex items-center justify-center"
|
|
style="top: 0.5rem; right: 0.5rem"
|
|
v-if="props.action"
|
|
:style="{ bottom: currentInfo.dept > 2 ? '0.5rem' : 'unset' }"
|
|
>
|
|
<file-item-action
|
|
:nameId="value.pathname"
|
|
:have-meta="false"
|
|
@delete="() => triggerFolderDelete(value.pathname)"
|
|
@edit="
|
|
() =>
|
|
folderFormComponent?.triggerFolderEdit(
|
|
value.name,
|
|
value.pathname,
|
|
)
|
|
"
|
|
/>
|
|
</div>
|
|
<div
|
|
class="text-overflow-handle block text-center"
|
|
style="max-width: 100%"
|
|
:class="{
|
|
'q-px-md': currentInfo.dept < 3,
|
|
'q-pr-xl': currentInfo.dept > 2,
|
|
}"
|
|
>
|
|
{{ value.name }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="props.action && currentInfo.dept < 4">
|
|
<div
|
|
id="triggerFolderCreateFileItem"
|
|
class="dashed"
|
|
:style="{
|
|
position: 'relative',
|
|
display: 'flex',
|
|
gap: '0.5rem',
|
|
alignItems: 'center',
|
|
flexDirection: currentInfo.dept > 2 ? 'row' : 'column',
|
|
padding: currentInfo.dept > 2 ? '.5rem 0' : '.5rem',
|
|
}"
|
|
@click.stop="() => folderFormComponent?.triggerFolderCreate()"
|
|
>
|
|
<div
|
|
class="q-px-md flex items-center justify-center"
|
|
style="position: relative"
|
|
>
|
|
<q-icon
|
|
:name="currentIcon"
|
|
:size="currentInfo.dept > 2 ? '3em' : '6em'"
|
|
color="primary"
|
|
class="col"
|
|
/>
|
|
<q-btn
|
|
round
|
|
color="white"
|
|
size="10px"
|
|
style="position: absolute; bottom: 0"
|
|
:dense="currentInfo.dept > 2"
|
|
:style="{ right: currentInfo.dept > 2 ? '.5rem' : '1rem' }"
|
|
>
|
|
<q-icon name="add" color="primary" size="1.5rem" />
|
|
</q-btn>
|
|
</div>
|
|
<div
|
|
class="text-overflow-handle block text-center"
|
|
:class="{
|
|
'q-px-md': currentInfo.dept < 3,
|
|
'q-pr-xl': currentInfo.dept > 2,
|
|
}"
|
|
style="max-width: 100%"
|
|
>
|
|
สร้าง{{ TREE_LEVEL_NAME[currentInfo.dept] }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
style="grid-column: 1 / span 5"
|
|
class="q-mt-md"
|
|
v-if="currentInfo.dept > 2 && file[currentInfo.path]"
|
|
>
|
|
<div class="flex justify-between">
|
|
<div>
|
|
<span class="text-h6 q-mr-md">เอกสาร</span>
|
|
<span class="text-body text-grey"
|
|
>จำนวน {{ file[currentInfo.path].length }} รายการ</span
|
|
>
|
|
</div>
|
|
<q-btn
|
|
outline
|
|
push
|
|
dense
|
|
id="listViewFileCreate"
|
|
class="q-px-md q-ml-md"
|
|
label="สร้างเอกสาร"
|
|
type="submit"
|
|
color="primary"
|
|
icon="add"
|
|
v-if="action"
|
|
@click.stop="() => fileFormComponent?.triggerFileCreate()"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="grid q-mt-md">
|
|
<div
|
|
v-for="(value, index) in file[currentInfo.path]"
|
|
:data-pathname="value.pathname"
|
|
>
|
|
<div
|
|
class="box"
|
|
:id="`getFileInfoFileItem${index}`"
|
|
@click="() => getFileInfo(value)"
|
|
>
|
|
<div class="q-px-md flex items-center justify-center">
|
|
<file-icon
|
|
size="preview"
|
|
:fileMimeType="value.fileType ? value.fileType : '-'"
|
|
:fileName="value.fileName ? value.fileName : '-'"
|
|
/>
|
|
</div>
|
|
<div
|
|
class="absolute"
|
|
style="top: 0.5rem; right: 0.5rem"
|
|
v-if="props.action"
|
|
>
|
|
<file-item-action
|
|
:nameId="value.pathname"
|
|
:have-meta="
|
|
!!(value.metadata && Object.keys(value.metadata).length > 0)
|
|
"
|
|
@edit="
|
|
() =>
|
|
fileFormComponent?.triggerFileEdit(
|
|
{
|
|
title: value.title,
|
|
description: value.description,
|
|
keyword: value.keyword,
|
|
category: value.category,
|
|
author: value.author,
|
|
metadata: value.metadata,
|
|
},
|
|
value.pathname,
|
|
value.fileName,
|
|
)
|
|
"
|
|
@delete="() => triggerFileDelete(value.pathname)"
|
|
/>
|
|
</div>
|
|
<div
|
|
class="text-overflow-handle block q-px-md text-center"
|
|
style="max-width: 100%"
|
|
>
|
|
{{ value.title }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="props.action && currentInfo.dept > 2">
|
|
<div
|
|
id="triggerFileCreateFileItem"
|
|
class="dashed"
|
|
:style="{
|
|
display: 'flex',
|
|
gap: '0.5rem',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
padding: '1rem',
|
|
maxWidth: '100%',
|
|
}"
|
|
@click.stop="() => fileFormComponent?.triggerFileCreate()"
|
|
>
|
|
<div
|
|
class="q-px-md flex items-center justify-center"
|
|
style="position: relative"
|
|
>
|
|
<q-icon name="mdi-file" class="add-icon" size="6em" color="primary" />
|
|
<q-btn
|
|
round
|
|
color="white"
|
|
size="10px"
|
|
style="position: absolute; right: 1rem; bottom: 0"
|
|
>
|
|
<q-icon name="add" color="primary" size="1.5rem" />
|
|
</q-btn>
|
|
</div>
|
|
<div
|
|
class="text-overflow-handle block q-px-md text-center"
|
|
style="max-width: 100%"
|
|
>
|
|
สร้างเอกสาร
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.box {
|
|
border: 2px solid $separator-color;
|
|
border-radius: 8px;
|
|
position: relative;
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 1rem;
|
|
max-width: 100%;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.dashed {
|
|
opacity: 0.4;
|
|
display: inline-block;
|
|
border: 2px solid #6985c2;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
border-style: dashed;
|
|
}
|
|
|
|
.add-icon {
|
|
margin: auto auto;
|
|
}
|
|
|
|
.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>
|