refactor: migrate to storage
refactor: migrate to storage
This commit is contained in:
Methapon2001
parent
4bdf1f620b
commit
cc87de5995
12 changed files with 388 additions and 879 deletions
|
|
@ -3,6 +3,7 @@ import { ref } from 'vue'
|
|||
import { storeToRefs } from 'pinia'
|
||||
import useStorage from '@/stores/storage'
|
||||
import FileForm from './FileForm.vue'
|
||||
import UploadExistDialog from './UploadExistDialog.vue'
|
||||
|
||||
const storageStore = useStorage()
|
||||
const { file, currentInfo } = storeToRefs(storageStore)
|
||||
|
|
|
|||
|
|
@ -2,233 +2,109 @@
|
|||
import { computed, ref } from 'vue'
|
||||
import { storeToRefs } from 'pinia'
|
||||
|
||||
import FileIcon from '@/components/FileIcon.vue'
|
||||
import FileItemAction from '@/components/FileItemAction.vue'
|
||||
import DialogDelete from '@/components/DialogDelete.vue'
|
||||
import FileForm from './FileForm.vue'
|
||||
import FolderForm from './FolderForm.vue'
|
||||
import UploadExistDialog from './UploadExistDialog.vue'
|
||||
import { useTreeDataStore } from '@/stores/tree-data'
|
||||
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,
|
||||
},
|
||||
{ action: false },
|
||||
)
|
||||
const DEPT_NAME = ['ตู้เอกสาร', 'ลิ้นชัก', 'แฟ้ม', 'แฟ้มย่อย'] as const
|
||||
const { getFileInfo } = useFileInfoStore()
|
||||
const { currentFolder, currentFile, currentDept, currentPath } =
|
||||
storeToRefs(useTreeDataStore())
|
||||
const {
|
||||
createFolder,
|
||||
editFolder,
|
||||
getFolder,
|
||||
deleteFolder,
|
||||
uploadFile,
|
||||
updateFile,
|
||||
deleteFile,
|
||||
checkFile,
|
||||
checkFileName,
|
||||
refaceFile,
|
||||
} = useTreeDataStore()
|
||||
|
||||
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(() =>
|
||||
currentDept.value === 0
|
||||
currentInfo.value.dept === 0
|
||||
? 'mdi-file-cabinet'
|
||||
: currentDept.value === 1
|
||||
: currentInfo.value.dept === 1
|
||||
? 'o_inbox'
|
||||
: 'o_folder_open',
|
||||
)
|
||||
|
||||
const dialogDeleteState = ref<boolean>(false)
|
||||
const deleteFormPath = ref<string>('')
|
||||
const deleteFormType = ref<'deleteFolder' | 'deleteFile'>()
|
||||
|
||||
const folderFormState = ref<boolean>(false)
|
||||
const folderFormPath = ref<string>('')
|
||||
const folderFormData = ref<{
|
||||
name?: string
|
||||
}>({})
|
||||
const folderFormType = ref<'edit' | 'create'>('create')
|
||||
const fileFormState = ref<boolean>(false)
|
||||
const fileFormPath = ref<string>('')
|
||||
const fileFormData = ref<{
|
||||
file?: File
|
||||
title?: string
|
||||
description?: string
|
||||
keyword?: string[]
|
||||
category?: string[]
|
||||
}>({})
|
||||
const fileFormType = ref<'edit' | 'create'>('create')
|
||||
const fileFormError = ref<{ fileExist?: boolean; fileName2Long?: boolean }>({})
|
||||
const fileExistNotification = ref<boolean>(false)
|
||||
const fileFormComponent = ref<InstanceType<typeof FileForm>>()
|
||||
|
||||
function triggerFolderDelete(pathname: string) {
|
||||
deleteFormType.value = 'deleteFolder'
|
||||
deleteFormPath.value = pathname
|
||||
dialogDeleteState.value = !dialogDeleteState.value
|
||||
deleteTarget.value = 'deleteFolder'
|
||||
deletePath.value = pathname
|
||||
deleteState.value = !deleteState.value
|
||||
}
|
||||
|
||||
function triggerFileDelete(pathname: string) {
|
||||
deleteFormType.value = 'deleteFile'
|
||||
deleteFormPath.value = pathname
|
||||
dialogDeleteState.value = !dialogDeleteState.value
|
||||
}
|
||||
|
||||
function triggerFolderCreate() {
|
||||
folderFormType.value = 'create'
|
||||
folderFormData.value = {}
|
||||
folderFormState.value = !folderFormState.value
|
||||
}
|
||||
|
||||
function triggerFolderEdit(name: string, pathname: string) {
|
||||
folderFormType.value = 'edit'
|
||||
folderFormPath.value = pathname
|
||||
folderFormData.value.name = name
|
||||
folderFormState.value = true
|
||||
}
|
||||
|
||||
async function submitFolderForm(value: {
|
||||
mode: 'create' | 'edit'
|
||||
name: string
|
||||
}) {
|
||||
if (value.mode === 'create') {
|
||||
await createFolder(value.name)
|
||||
} else {
|
||||
await editFolder(value.name, folderFormPath.value)
|
||||
}
|
||||
}
|
||||
|
||||
function triggerFileCreate() {
|
||||
fileFormType.value = 'create'
|
||||
fileFormData.value = {}
|
||||
fileFormState.value = !fileFormState.value
|
||||
}
|
||||
|
||||
function triggerFileEdit(
|
||||
value: {
|
||||
title: string
|
||||
description: string
|
||||
keyword: string[]
|
||||
category: string[]
|
||||
},
|
||||
pathname: string,
|
||||
) {
|
||||
fileFormState.value = true
|
||||
fileFormType.value = 'edit'
|
||||
fileFormPath.value = pathname
|
||||
fileFormData.value = {
|
||||
title: value.title,
|
||||
description: value.description,
|
||||
keyword: value.keyword,
|
||||
category: value.category,
|
||||
}
|
||||
}
|
||||
|
||||
const currentParam = ref<Parameters<typeof submitFileForm>[0]>()
|
||||
|
||||
async function submitFileForm(
|
||||
value: {
|
||||
mode: 'create' | 'edit'
|
||||
file?: File
|
||||
title: string
|
||||
description: string
|
||||
keyword: string[]
|
||||
category: string[]
|
||||
},
|
||||
force = false,
|
||||
) {
|
||||
currentParam.value = value
|
||||
|
||||
if (value.file && checkFile(value.file.name) && !force) {
|
||||
fileExistNotification.value = true
|
||||
return
|
||||
}
|
||||
|
||||
if (value.mode === 'create' && value.file) {
|
||||
await uploadFile(currentPath.value, value.file, {
|
||||
title: value.title,
|
||||
description: value.description,
|
||||
keyword: value.keyword,
|
||||
category: value.category,
|
||||
})
|
||||
setTimeout(() => {
|
||||
refaceFile(currentPath.value)
|
||||
}, 3000)
|
||||
|
||||
setTimeout(() => {
|
||||
refaceFile(currentPath.value)
|
||||
}, 10000)
|
||||
} else {
|
||||
await updateFile(
|
||||
fileFormPath.value,
|
||||
{
|
||||
title: value.title,
|
||||
description: value.description,
|
||||
keyword: value.keyword,
|
||||
category: value.category,
|
||||
},
|
||||
value.file,
|
||||
)
|
||||
setTimeout(() => {
|
||||
refaceFile(currentPath.value)
|
||||
}, 3000)
|
||||
|
||||
setTimeout(() => {
|
||||
refaceFile(currentPath.value)
|
||||
}, 10000)
|
||||
}
|
||||
fileFormData.value = {}
|
||||
fileFormState.value = false
|
||||
currentParam.value = undefined
|
||||
fileFormComponent.value?.reset()
|
||||
deleteTarget.value = 'deleteFile'
|
||||
deletePath.value = pathname
|
||||
deleteState.value = !deleteState.value
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="text-h6 q-mt-md" v-if="currentDept > 2 && currentDept < 4">
|
||||
<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>{{ DEPT_NAME[currentDept] }}</div>
|
||||
<div>{{ TREE_LEVEL_NAME[currentInfo.dept] }}</div>
|
||||
<q-btn
|
||||
v-if="action"
|
||||
outline
|
||||
push
|
||||
dense
|
||||
id="listViewFolderCreate"
|
||||
class="q-px-md q-ml-md"
|
||||
:label="'สร้าง' + DEPT_NAME[currentDept]"
|
||||
type="submit"
|
||||
color="primary"
|
||||
dense
|
||||
icon="add"
|
||||
@click.stop="() => triggerFolderCreate()"
|
||||
id="listViewFolderCreate"
|
||||
v-if="action"
|
||||
:label="'สร้าง' + TREE_LEVEL_NAME[currentInfo.dept]"
|
||||
@click.stop="() => folderFormComponent?.triggerFolderCreate()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid q-mt-md" v-if="currentDept < 4">
|
||||
<div v-for="value in currentFolder" :data-pathname="value.pathname">
|
||||
<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',
|
||||
flexDirection: currentDept > 2 ? 'row' : 'column',
|
||||
alignItems: 'center',
|
||||
padding: currentDept > 2 ? '.5rem 0' : '.5rem',
|
||||
flexDirection: currentInfo.dept > 2 ? 'row' : 'column',
|
||||
padding: currentInfo.dept > 2 ? '.5rem 0' : '.5rem',
|
||||
}"
|
||||
class="box"
|
||||
@click="
|
||||
() => {
|
||||
;(folderFormState = false), getFolder(value.pathname)
|
||||
}
|
||||
"
|
||||
@click="() => goto(value.pathname)"
|
||||
>
|
||||
<div class="q-px-md flex items-center justify-center">
|
||||
<q-icon
|
||||
:name="currentIcon"
|
||||
:size="currentDept > 2 ? '3em' : '6em'"
|
||||
:size="currentInfo.dept > 2 ? '3em' : '6em'"
|
||||
color="primary"
|
||||
class="col"
|
||||
/>
|
||||
|
|
@ -236,40 +112,46 @@ async function submitFileForm(
|
|||
<div
|
||||
class="absolute flex items-center justify-center"
|
||||
style="top: 0.5rem; right: 0.5rem"
|
||||
:style="{ bottom: currentDept > 2 ? '0.5rem' : 'unset' }"
|
||||
v-if="props.action"
|
||||
:style="{ bottom: currentInfo.dept > 2 ? '0.5rem' : 'unset' }"
|
||||
>
|
||||
<file-item-action
|
||||
:nameId="value.pathname"
|
||||
@delete="() => triggerFolderDelete(value.pathname)"
|
||||
@edit="() => triggerFolderEdit(value.name, value.pathname)"
|
||||
@edit="
|
||||
() =>
|
||||
folderFormComponent?.triggerFolderEdit(
|
||||
value.name,
|
||||
value.pathname,
|
||||
)
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="text-overflow-handle block text-center"
|
||||
:class="{
|
||||
'q-px-md': currentDept < 3,
|
||||
'q-pr-xl': currentDept > 2,
|
||||
}"
|
||||
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 && currentDept < 4">
|
||||
<div v-if="props.action && currentInfo.dept < 4">
|
||||
<div
|
||||
id="triggerFolderCreateFileItem"
|
||||
class="dashed"
|
||||
:style="{
|
||||
position: 'relative',
|
||||
display: 'flex',
|
||||
gap: '0.5rem',
|
||||
flexDirection: currentDept > 2 ? 'row' : 'column',
|
||||
alignItems: 'center',
|
||||
padding: currentDept > 2 ? '.5rem 0' : '.5rem',
|
||||
flexDirection: currentInfo.dept > 2 ? 'row' : 'column',
|
||||
padding: currentInfo.dept > 2 ? '.5rem 0' : '.5rem',
|
||||
}"
|
||||
@click.stop="() => triggerFolderCreate()"
|
||||
id="triggerFolderCreateFileItem"
|
||||
@click.stop="() => folderFormComponent?.triggerFolderCreate()"
|
||||
>
|
||||
<div
|
||||
class="q-px-md flex items-center justify-center"
|
||||
|
|
@ -277,17 +159,17 @@ async function submitFileForm(
|
|||
>
|
||||
<q-icon
|
||||
:name="currentIcon"
|
||||
:size="currentDept > 2 ? '3em' : '6em'"
|
||||
:size="currentInfo.dept > 2 ? '3em' : '6em'"
|
||||
color="primary"
|
||||
class="col"
|
||||
/>
|
||||
<q-btn
|
||||
round
|
||||
:dense="currentDept > 2"
|
||||
color="white"
|
||||
size="10px"
|
||||
style="position: absolute; bottom: 0"
|
||||
:style="{ right: currentDept > 2 ? '.5rem' : '1rem' }"
|
||||
:dense="currentInfo.dept > 2"
|
||||
:style="{ right: currentInfo.dept > 2 ? '.5rem' : '1rem' }"
|
||||
>
|
||||
<q-icon name="add" color="primary" size="1.5rem" />
|
||||
</q-btn>
|
||||
|
|
@ -295,60 +177,58 @@ async function submitFileForm(
|
|||
<div
|
||||
class="text-overflow-handle block text-center"
|
||||
:class="{
|
||||
'q-px-md': currentDept < 3,
|
||||
'q-pr-xl': currentDept > 2,
|
||||
'q-px-md': currentInfo.dept < 3,
|
||||
'q-pr-xl': currentInfo.dept > 2,
|
||||
}"
|
||||
style="max-width: 100%"
|
||||
>
|
||||
สร้าง{{ DEPT_NAME[currentDept] }}
|
||||
สร้าง{{ TREE_LEVEL_NAME[currentInfo.dept] }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="grid-column: 1 / span 5" class="q-mt-md" v-if="currentDept > 2">
|
||||
<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"
|
||||
>จำนวน {{ currentFile.length }} รายการ</span
|
||||
>จำนวน {{ file[currentInfo.path].length }} รายการ</span
|
||||
>
|
||||
</div>
|
||||
<q-btn
|
||||
outline
|
||||
push
|
||||
v-if="action"
|
||||
dense
|
||||
id="listViewFileCreate"
|
||||
class="q-px-md q-ml-md"
|
||||
label="สร้างเอกสาร"
|
||||
type="submit"
|
||||
color="primary"
|
||||
dense
|
||||
icon="add"
|
||||
@click.stop="() => triggerFileCreate()"
|
||||
id="listViewFileCreate"
|
||||
v-if="action"
|
||||
@click.stop="() => fileFormComponent?.triggerFileCreate()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid q-mt-md">
|
||||
<div v-for="(value, index) in currentFile" :data-pathname="value.pathname">
|
||||
<div
|
||||
v-for="(value, index) in file[currentInfo.path]"
|
||||
:data-pathname="value.pathname"
|
||||
>
|
||||
<div
|
||||
:style="{
|
||||
position: 'relative',
|
||||
display: 'flex',
|
||||
gap: '0.5rem',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
padding: '1rem',
|
||||
maxWidth: '100%',
|
||||
}"
|
||||
class="box"
|
||||
@click="() => getFileInfo(value)"
|
||||
: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 : 'unknow'"
|
||||
:fileName="value.fileName ? value.fileName : 'unknow'"
|
||||
:fileMimeType="value.fileType ? value.fileType : '-'"
|
||||
:fileName="value.fileName ? value.fileName : '-'"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
|
|
@ -360,7 +240,7 @@ async function submitFileForm(
|
|||
:nameId="value.pathname"
|
||||
@edit="
|
||||
() =>
|
||||
triggerFileEdit(
|
||||
fileFormComponent?.triggerFileEdit(
|
||||
{
|
||||
title: value.title,
|
||||
description: value.description,
|
||||
|
|
@ -381,8 +261,10 @@ async function submitFileForm(
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="props.action && currentDept > 2">
|
||||
<div v-if="props.action && currentInfo.dept > 2">
|
||||
<div
|
||||
id="triggerFileCreateFileItem"
|
||||
class="dashed"
|
||||
:style="{
|
||||
display: 'flex',
|
||||
gap: '0.5rem',
|
||||
|
|
@ -391,9 +273,7 @@ async function submitFileForm(
|
|||
padding: '1rem',
|
||||
maxWidth: '100%',
|
||||
}"
|
||||
class="dashed"
|
||||
@click.stop="() => triggerFileCreate()"
|
||||
id="triggerFileCreateFileItem"
|
||||
@click.stop="() => fileFormComponent?.triggerFileCreate()"
|
||||
>
|
||||
<div
|
||||
class="q-px-md flex items-center justify-center"
|
||||
|
|
@ -418,55 +298,19 @@ async function submitFileForm(
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<file-form
|
||||
ref="fileFormComponent"
|
||||
:mode="fileFormType"
|
||||
:error="fileFormError"
|
||||
v-model:open="fileFormState"
|
||||
v-model:title="fileFormData.title"
|
||||
v-model:description="fileFormData.description"
|
||||
v-model:keyword="fileFormData.keyword"
|
||||
v-model:category="fileFormData.category"
|
||||
@reset="() => (fileFormError = {})"
|
||||
@filechange="
|
||||
(name: string) => (
|
||||
(fileFormError.fileExist = checkFile(name)),
|
||||
(fileFormError.fileName2Long = checkFileName(name))
|
||||
)
|
||||
"
|
||||
@submit="submitFileForm"
|
||||
/>
|
||||
|
||||
<folder-form
|
||||
:mode="folderFormType"
|
||||
:tree="DEPT_NAME[currentDept]"
|
||||
v-if="currentDept < 4"
|
||||
v-model:open="folderFormState"
|
||||
v-model:name="folderFormData.name"
|
||||
@submit="submitFolderForm"
|
||||
/>
|
||||
|
||||
<upload-exist-dialog
|
||||
v-model:notification="fileExistNotification"
|
||||
@confirm="() => currentParam && submitFileForm(currentParam, true)"
|
||||
@cancel="() => (currentParam = undefined)"
|
||||
/>
|
||||
|
||||
<dialog-delete
|
||||
v-model:open="dialogDeleteState"
|
||||
@confirm="
|
||||
() =>
|
||||
deleteFormType &&
|
||||
{ deleteFolder, deleteFile }[deleteFormType](deleteFormPath)
|
||||
"
|
||||
/>
|
||||
</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;
|
||||
}
|
||||
|
||||
|
|
@ -483,20 +327,6 @@ async function submitFileForm(
|
|||
margin: auto auto;
|
||||
}
|
||||
|
||||
.add-button {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 30%;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.add-button-folder-level {
|
||||
position: absolute;
|
||||
left: 30px;
|
||||
top: 22px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.text-overflow-handle {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
|
|
|||
|
|
@ -1,17 +1,16 @@
|
|||
<script setup lang="ts">
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { useSearchDataStore } from '@/stores/searched-data'
|
||||
import { useFileInfoStore } from '@/stores/file-info-data'
|
||||
import { useTreeDataStore } from '@/stores/tree-data'
|
||||
|
||||
import DialogDelete from './DialogDelete.vue'
|
||||
import UploadExistDialog from './UploadExistDialog.vue'
|
||||
import FileForm from './FileForm.vue'
|
||||
import FileItemAction from '@/components/FileItemAction.vue'
|
||||
import FileIcon from '@/components/FileIcon.vue'
|
||||
|
||||
import type { QTableProps } from 'quasar'
|
||||
import { onMounted, ref, watch } from 'vue'
|
||||
import { storeToRefs } from 'pinia'
|
||||
|
||||
import { useSearchDataStore } from '@/stores/searched-data'
|
||||
import { useFileInfoStore } from '@/stores/file-info-data'
|
||||
import useStorage from '@/stores/storage'
|
||||
|
||||
import DialogDelete from './DialogDelete.vue'
|
||||
import FileFormWrapper from './FileFormWrapper.vue'
|
||||
import FileItemAction from '@/components/FileItemAction.vue'
|
||||
import FileIcon from '@/components/FileIcon.vue'
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
|
|
@ -24,30 +23,22 @@ const props = withDefaults(
|
|||
)
|
||||
const { foundFile, isActFoundFile } = storeToRefs(useSearchDataStore())
|
||||
const { getFileInfo, getSize, getType } = useFileInfoStore()
|
||||
const { updateFile, deleteFile, checkFile } = useTreeDataStore()
|
||||
|
||||
const storageStore = useStorage()
|
||||
const { deleteFile } = storageStore
|
||||
|
||||
const fileFormComponent = ref<InstanceType<typeof FileFormWrapper>>()
|
||||
|
||||
const keywordList = ref<string[]>([])
|
||||
const categoryList = ref<string[]>([])
|
||||
const selectKeyword = ref<string[]>([])
|
||||
const selectCategory = ref<string[]>([])
|
||||
const filterFoundFile = ref<any>()
|
||||
|
||||
const fileExistNotification = ref<boolean>(false)
|
||||
const fileFormError = ref<{ fileExist?: boolean }>({})
|
||||
const deleteFormType = ref<'deleteFile'>('deleteFile')
|
||||
const dialogDeleteState = ref<boolean>(false)
|
||||
const deleteFormPath = ref<string>('')
|
||||
|
||||
const fileFormType = ref<'edit'>('edit')
|
||||
const fileFormState = ref<boolean>(false)
|
||||
const fileFormPath = ref<string>('')
|
||||
const fileFormData = ref<{
|
||||
file?: File
|
||||
title?: string
|
||||
description?: string
|
||||
keyword?: string[]
|
||||
category?: string[]
|
||||
}>({})
|
||||
|
||||
const columns: QTableProps['columns'] = [
|
||||
{
|
||||
name: 'name',
|
||||
|
|
@ -84,66 +75,6 @@ const columns: QTableProps['columns'] = [
|
|||
},
|
||||
]
|
||||
|
||||
const currentParam = ref<Parameters<typeof submitFileForm>[0]>()
|
||||
|
||||
async function submitFileForm(
|
||||
value: {
|
||||
mode: 'create' | 'edit'
|
||||
file?: File
|
||||
title: string
|
||||
description: string
|
||||
keyword: string[]
|
||||
category: string[]
|
||||
},
|
||||
force = false,
|
||||
) {
|
||||
currentParam.value = value
|
||||
if (value.file && checkFile(value.file.name) && !force) {
|
||||
fileExistNotification.value = true
|
||||
return
|
||||
}
|
||||
|
||||
if (value.mode === 'edit') {
|
||||
await updateFile(
|
||||
fileFormPath.value,
|
||||
{
|
||||
title: value.title,
|
||||
description: value.description,
|
||||
keyword: value.keyword,
|
||||
category: value.category,
|
||||
},
|
||||
value.file,
|
||||
)
|
||||
setTimeout(() => {
|
||||
isActFoundFile.value = true
|
||||
}, 400)
|
||||
}
|
||||
|
||||
fileFormData.value = {}
|
||||
fileFormState.value = false
|
||||
currentParam.value = undefined
|
||||
}
|
||||
|
||||
function triggerFileEdit(
|
||||
value: {
|
||||
title: string
|
||||
description: string
|
||||
keyword: string[]
|
||||
category: string[]
|
||||
},
|
||||
pathname: string,
|
||||
) {
|
||||
fileFormState.value = true
|
||||
fileFormType.value = 'edit'
|
||||
fileFormPath.value = pathname
|
||||
fileFormData.value = {
|
||||
title: value.title,
|
||||
description: value.description,
|
||||
keyword: value.keyword,
|
||||
category: value.category,
|
||||
}
|
||||
}
|
||||
|
||||
function triggerFileDelete(pathname: string) {
|
||||
deleteFormType.value = 'deleteFile'
|
||||
deleteFormPath.value = pathname
|
||||
|
|
@ -161,36 +92,30 @@ function confirmDelete() {
|
|||
}
|
||||
|
||||
function filterSearch() {
|
||||
function updateList() {
|
||||
keywordList.value = []
|
||||
categoryList.value = []
|
||||
foundFile.value.forEach((obj) => {
|
||||
obj.keyword.forEach((keyword) => {
|
||||
if (!keywordList.value.includes(keyword)) {
|
||||
keywordList.value.push(keyword)
|
||||
}
|
||||
})
|
||||
obj.category.forEach((category) => {
|
||||
if (!categoryList.value.includes(category)) {
|
||||
categoryList.value.push(category)
|
||||
}
|
||||
})
|
||||
keywordList.value = []
|
||||
categoryList.value = []
|
||||
foundFile.value.forEach((obj) => {
|
||||
obj.keyword.forEach((keyword) => {
|
||||
if (!keywordList.value.includes(keyword)) {
|
||||
keywordList.value.push(keyword)
|
||||
}
|
||||
})
|
||||
}
|
||||
obj.category.forEach((category) => {
|
||||
if (!categoryList.value.includes(category)) {
|
||||
categoryList.value.push(category)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
function filterArray() {
|
||||
if (!(selectKeyword.value.length || selectCategory.value.length)) {
|
||||
filterFoundFile.value = foundFile.value
|
||||
} else {
|
||||
filterFoundFile.value = foundFile.value.filter(
|
||||
(entry) =>
|
||||
entry.keyword.some((kw) => selectKeyword.value.includes(kw)) ||
|
||||
entry.category.some((kw) => selectCategory.value.includes(kw)),
|
||||
)
|
||||
}
|
||||
if (!(selectKeyword.value.length || selectCategory.value.length)) {
|
||||
filterFoundFile.value = foundFile.value
|
||||
} else {
|
||||
filterFoundFile.value = foundFile.value.filter(
|
||||
(entry) =>
|
||||
entry.keyword.some((kw) => selectKeyword.value.includes(kw)) ||
|
||||
entry.category.some((kw) => selectCategory.value.includes(kw)),
|
||||
)
|
||||
}
|
||||
updateList()
|
||||
filterArray()
|
||||
}
|
||||
|
||||
watch(
|
||||
|
|
@ -208,6 +133,9 @@ onMounted(() => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<file-form-wrapper ref="fileFormComponent" />
|
||||
<dialog-delete v-model:open="dialogDeleteState" @confirm="confirmDelete" />
|
||||
|
||||
<div class="row grid q-py-md q-gutter-sm">
|
||||
<q-select
|
||||
outlined
|
||||
|
|
@ -265,7 +193,7 @@ onMounted(() => {
|
|||
:nameId="value.pathname"
|
||||
@edit="
|
||||
() =>
|
||||
triggerFileEdit(
|
||||
fileFormComponent?.triggerFileEdit(
|
||||
{
|
||||
title: value.title,
|
||||
description: value.description,
|
||||
|
|
@ -344,7 +272,11 @@ onMounted(() => {
|
|||
dense
|
||||
icon="o_edit"
|
||||
@click="
|
||||
() => triggerFileEdit(actionData.row, actionData.row.pathname)
|
||||
() =>
|
||||
fileFormComponent?.triggerFileEdit(
|
||||
actionData.row,
|
||||
actionData.row.pathname,
|
||||
)
|
||||
"
|
||||
id="listViewFileEdit"
|
||||
/>
|
||||
|
|
@ -365,26 +297,6 @@ onMounted(() => {
|
|||
<div class="q-mt-md" v-if="foundFile.length == 0">
|
||||
<span>ไม่พบรายการที่ค้นหา</span>
|
||||
</div>
|
||||
|
||||
<file-form
|
||||
:mode="fileFormType"
|
||||
:error="fileFormError"
|
||||
v-model:open="fileFormState"
|
||||
v-model:title="fileFormData.title"
|
||||
v-model:description="fileFormData.description"
|
||||
v-model:keyword="fileFormData.keyword"
|
||||
v-model:category="fileFormData.category"
|
||||
@filechange="(name: string) => (fileFormError.fileExist = checkFile(name))"
|
||||
@submit="submitFileForm"
|
||||
/>
|
||||
|
||||
<upload-exist-dialog
|
||||
v-model:notification="fileExistNotification"
|
||||
@confirm="() => currentParam && submitFileForm(currentParam, true)"
|
||||
@cancel="() => (currentParam = undefined)"
|
||||
/>
|
||||
|
||||
<dialog-delete v-model:open="dialogDeleteState" @confirm="confirmDelete" />
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
|
|
|||
|
|
@ -1,340 +1,188 @@
|
|||
<script lang="ts" setup>
|
||||
import type { QTableProps } from 'quasar'
|
||||
import { computed, ref } from 'vue'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import type { QTableProps } from 'quasar'
|
||||
import { useTreeDataStore, type TreeDataFolder } from '@/stores/tree-data'
|
||||
import { useFileInfoStore } from '@/stores/file-info-data'
|
||||
|
||||
import FileIcon from '@/components/FileIcon.vue'
|
||||
import DialogDelete from '@/components/DialogDelete.vue'
|
||||
import UploadExistDialog from './UploadExistDialog.vue'
|
||||
import FileForm from './FileForm.vue'
|
||||
import FolderForm from './FolderForm.vue'
|
||||
import FileFormWrapper from './FileFormWrapper.vue'
|
||||
import FolderFormWrapper from './FolderFormWrapper.vue'
|
||||
|
||||
import { useFileInfoStore } from '@/stores/file-info-data'
|
||||
import useStorage from '@/stores/storage'
|
||||
|
||||
const storageStore = useStorage()
|
||||
const { folder, file, currentInfo } = storeToRefs(storageStore)
|
||||
const { goto, deleteFolder, deleteFile } = storageStore
|
||||
|
||||
const { getFormatDate, getSize, getType, getFileInfo } = useFileInfoStore()
|
||||
const { listDataFile, listDataFolder, currentDept, currentPath } =
|
||||
storeToRefs(useTreeDataStore())
|
||||
const {
|
||||
createFolder,
|
||||
editFolder,
|
||||
getFolder,
|
||||
deleteFolder,
|
||||
uploadFile,
|
||||
updateFile,
|
||||
deleteFile,
|
||||
checkFile,
|
||||
refaceFile,
|
||||
} = useTreeDataStore()
|
||||
|
||||
const DEPT_NAME = ['ตู้เอกสาร', 'ลิ้นชัก', 'แฟ้ม', 'แฟ้มย่อย'] as const
|
||||
const fileFormComponent = ref<InstanceType<typeof FileFormWrapper>>()
|
||||
const folderFormComponent = ref<InstanceType<typeof FolderFormWrapper>>()
|
||||
|
||||
const currentIcon = computed(() =>
|
||||
currentInfo.value.dept === 0
|
||||
? 'mdi-file-cabinet'
|
||||
: currentInfo.value.dept === 1
|
||||
? 'inbox'
|
||||
: 'o_folder_open',
|
||||
)
|
||||
const TREE_LEVEL_NAME = ['ตู้เอกสาร', 'ลิ้นชัก', 'แฟ้ม', 'แฟ้มย่อย'] as const
|
||||
|
||||
const props = defineProps<{
|
||||
mode: 'admin' | 'user'
|
||||
}>()
|
||||
|
||||
const currentLevel = computed(() =>
|
||||
currentDept.value === 0
|
||||
? 'ตู้จัดเก็บเอกสาร'
|
||||
: currentDept.value === 1
|
||||
? 'ลิ้นชัก'
|
||||
: currentDept.value === 2
|
||||
? 'แฟ้ม'
|
||||
: 'แฟ้มย่อย',
|
||||
)
|
||||
|
||||
const currentIcon = computed(() =>
|
||||
currentDept.value === 0
|
||||
? 'mdi-file-cabinet'
|
||||
: currentDept.value === 1
|
||||
? 'inbox'
|
||||
: 'o_folder_open',
|
||||
)
|
||||
|
||||
const folderFormState = ref<boolean>(false)
|
||||
const folderFormPath = ref<string>('')
|
||||
const folderFormData = ref<{
|
||||
name?: string
|
||||
}>({})
|
||||
const folderFormType = ref<'edit' | 'create'>('create')
|
||||
const fileFormError = ref<{ fileExist?: boolean }>({})
|
||||
const fileExistNotification = ref<boolean>(false)
|
||||
|
||||
const fileFormState = ref<boolean>(false)
|
||||
const fileFormPath = ref<string>('')
|
||||
const fileFormData = ref<{
|
||||
file?: File
|
||||
title?: string
|
||||
description?: string
|
||||
keyword?: string[]
|
||||
category?: string[]
|
||||
}>({})
|
||||
const fileFormType = ref<'edit' | 'create'>('create')
|
||||
const fileFormComponent = ref<InstanceType<typeof FileForm>>()
|
||||
|
||||
const dialogDeleteState = ref<boolean>(false)
|
||||
const deleteFormPath = ref<string>('')
|
||||
const deleteFormType = ref<'deleteFolder' | 'deleteFile'>()
|
||||
const deleteState = ref<boolean>(false)
|
||||
const deletePath = ref<string>('')
|
||||
const deleteTarget = ref<'deleteFolder' | 'deleteFile'>()
|
||||
const deleteMap = { deleteFolder, deleteFile }
|
||||
|
||||
function triggerFolderDelete(pathname: string) {
|
||||
deleteFormType.value = 'deleteFolder'
|
||||
deleteFormPath.value = pathname
|
||||
dialogDeleteState.value = !dialogDeleteState.value
|
||||
deleteTarget.value = 'deleteFolder'
|
||||
deletePath.value = pathname
|
||||
deleteState.value = !deleteState.value
|
||||
}
|
||||
|
||||
function triggerFileDelete(pathname: string) {
|
||||
deleteFormType.value = 'deleteFile'
|
||||
deleteFormPath.value = pathname
|
||||
dialogDeleteState.value = !dialogDeleteState.value
|
||||
deleteTarget.value = 'deleteFile'
|
||||
deletePath.value = pathname
|
||||
deleteState.value = !deleteState.value
|
||||
}
|
||||
|
||||
function triggerFolderCreate() {
|
||||
folderFormType.value = 'create'
|
||||
folderFormData.value = {}
|
||||
folderFormState.value = !folderFormState.value
|
||||
}
|
||||
|
||||
function triggerFolderEdit(name: string, pathname: string) {
|
||||
folderFormType.value = 'edit'
|
||||
folderFormPath.value = pathname
|
||||
folderFormData.value.name = name
|
||||
folderFormState.value = true
|
||||
}
|
||||
|
||||
async function submitFolderForm(value: {
|
||||
mode: 'create' | 'edit'
|
||||
name: string
|
||||
}) {
|
||||
if (value.mode === 'create') {
|
||||
await createFolder(value.name)
|
||||
} else {
|
||||
await editFolder(value.name, folderFormPath.value)
|
||||
}
|
||||
}
|
||||
|
||||
function triggerFileCreate() {
|
||||
fileFormType.value = 'create'
|
||||
fileFormData.value = {}
|
||||
fileFormState.value = !fileFormState.value
|
||||
}
|
||||
|
||||
function triggerFileEdit(
|
||||
value: {
|
||||
title: string
|
||||
description: string
|
||||
keyword: string[]
|
||||
category: string[]
|
||||
},
|
||||
pathname: string,
|
||||
) {
|
||||
fileFormState.value = true
|
||||
fileFormType.value = 'edit'
|
||||
fileFormPath.value = pathname
|
||||
fileFormData.value = {
|
||||
title: value.title,
|
||||
description: value.description,
|
||||
keyword: value.keyword,
|
||||
category: value.category,
|
||||
}
|
||||
}
|
||||
|
||||
const currentParam = ref<Parameters<typeof submitFileForm>[0]>()
|
||||
|
||||
async function submitFileForm(
|
||||
value: {
|
||||
mode: 'create' | 'edit'
|
||||
file?: File
|
||||
title: string
|
||||
description: string
|
||||
keyword: string[]
|
||||
category: string[]
|
||||
},
|
||||
force = false,
|
||||
) {
|
||||
currentParam.value = value
|
||||
|
||||
if (value.file && checkFile(value.file.name) && !force) {
|
||||
fileExistNotification.value = true
|
||||
return
|
||||
}
|
||||
|
||||
if (value.mode === 'create' && value.file) {
|
||||
await uploadFile(currentPath.value, value.file, {
|
||||
title: value.title,
|
||||
description: value.description,
|
||||
keyword: value.keyword,
|
||||
category: value.category,
|
||||
})
|
||||
|
||||
setTimeout(() => {
|
||||
refaceFile(currentPath.value)
|
||||
}, 3000)
|
||||
|
||||
setTimeout(() => {
|
||||
refaceFile(currentPath.value)
|
||||
}, 10000)
|
||||
} else {
|
||||
await updateFile(
|
||||
fileFormPath.value,
|
||||
{
|
||||
title: value.title,
|
||||
description: value.description,
|
||||
keyword: value.keyword,
|
||||
category: value.category,
|
||||
},
|
||||
value.file,
|
||||
)
|
||||
|
||||
setTimeout(() => {
|
||||
refaceFile(currentPath.value)
|
||||
}, 3000)
|
||||
|
||||
setTimeout(() => {
|
||||
refaceFile(currentPath.value)
|
||||
}, 10000)
|
||||
}
|
||||
fileFormData.value = {}
|
||||
fileFormState.value = false
|
||||
currentParam.value = undefined
|
||||
fileFormComponent.value?.reset()
|
||||
}
|
||||
|
||||
const columnsFolder: QTableProps['columns'] = [
|
||||
const colFolder = [
|
||||
{
|
||||
name: 'name',
|
||||
required: true,
|
||||
label: 'ชื่อ',
|
||||
align: 'left',
|
||||
field: (row) => row.name,
|
||||
format: (val) => `${val}`,
|
||||
field: 'name',
|
||||
sortable: true,
|
||||
style: 'width: 1000px',
|
||||
},
|
||||
{
|
||||
name: 'createdBy',
|
||||
align: 'center',
|
||||
label: 'สร้างโดย',
|
||||
align: 'center',
|
||||
field: 'createdBy',
|
||||
style: 'width: 20px',
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
name: 'createdAt',
|
||||
align: 'center',
|
||||
label: 'วันที่สร้าง',
|
||||
align: 'center',
|
||||
field: 'createdAt',
|
||||
sortable: true,
|
||||
style: 'width: 20px',
|
||||
},
|
||||
{
|
||||
name: 'actions',
|
||||
align: 'center',
|
||||
label: '',
|
||||
field: '',
|
||||
style: 'width: 5px',
|
||||
},
|
||||
]
|
||||
] satisfies QTableProps['columns']
|
||||
|
||||
const columnsFile: QTableProps['columns'] = [
|
||||
const colFile = [
|
||||
{
|
||||
name: 'name',
|
||||
required: true,
|
||||
label: 'ชื่อไฟล์',
|
||||
align: 'left',
|
||||
field: (row) => row.fileName,
|
||||
format: (val) => `${val}`,
|
||||
field: 'fileName',
|
||||
sortable: true,
|
||||
style: 'width: 200px',
|
||||
},
|
||||
{
|
||||
name: 'title',
|
||||
align: 'center',
|
||||
label: 'ชื่อเรื่อง',
|
||||
align: 'center',
|
||||
field: 'title',
|
||||
style: 'width: 200px',
|
||||
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
name: 'fileType',
|
||||
align: 'center',
|
||||
label: 'ประเภทของไฟล์',
|
||||
align: 'center',
|
||||
field: 'fileType',
|
||||
sortable: true,
|
||||
style: 'width: 200px',
|
||||
},
|
||||
{
|
||||
name: 'actions',
|
||||
align: 'center',
|
||||
label: '',
|
||||
field: '',
|
||||
style: 'width: 20px',
|
||||
},
|
||||
]
|
||||
] satisfies QTableProps['columns']
|
||||
|
||||
const onRowClick = ((_evt, row) => {
|
||||
getFolder(row.pathname)
|
||||
const onRowClick = ((_, row) => {
|
||||
goto(row.pathname)
|
||||
}) satisfies QTableProps['onRowClick']
|
||||
</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="q-mt-md">
|
||||
<div class="q-gutter-sm">
|
||||
<div
|
||||
class="flex flex-break d justify-between space-between"
|
||||
v-if="currentDept >= 1 && props.mode == 'admin' && currentDept != 4"
|
||||
v-if="
|
||||
currentInfo.dept >= 1 &&
|
||||
currentInfo.dept < 4 &&
|
||||
props.mode === 'admin'
|
||||
"
|
||||
>
|
||||
<div>
|
||||
<span class="text-h6">{{ currentLevel }}</span>
|
||||
<span class="text-h6">{{ TREE_LEVEL_NAME[currentInfo.dept] }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<q-btn
|
||||
outline
|
||||
push
|
||||
dense
|
||||
class="q-px-md q-ml-md"
|
||||
:label="'สร้าง' + currentLevel"
|
||||
type="submit"
|
||||
color="primary"
|
||||
dense
|
||||
icon="add"
|
||||
@click.stop="() => triggerFolderCreate()"
|
||||
id="listViewFolderCreate"
|
||||
:label="'สร้าง' + TREE_LEVEL_NAME[currentInfo.dept]"
|
||||
@click.stop="() => folderFormComponent?.triggerFolderCreate()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-table
|
||||
flat
|
||||
bordered
|
||||
:rows="listDataFolder"
|
||||
:columns="columnsFolder"
|
||||
:pagination="{
|
||||
rowsPerPage: 20,
|
||||
}"
|
||||
@row-click="onRowClick"
|
||||
row-key="name"
|
||||
class="cursor"
|
||||
v-if="currentDept != 4"
|
||||
v-if="currentInfo.dept !== 4"
|
||||
:pagination="{ rowsPerPage: 20 }"
|
||||
:rows="folder[currentInfo.path]"
|
||||
:columns="colFolder"
|
||||
@row-click="onRowClick"
|
||||
>
|
||||
<template v-slot:body-cell-name="nameRow">
|
||||
<q-td style="width: 50%">
|
||||
<template v-slot:body-cell-name="data">
|
||||
<q-td>
|
||||
<q-icon :name="currentIcon" size="2em" color="primary" />
|
||||
{{ nameRow.row.name }}
|
||||
{{ data.row.name }}
|
||||
</q-td>
|
||||
</template>
|
||||
<template v-slot:body-cell-createdBy="createdByRow">
|
||||
<q-td>
|
||||
<div class="justify-center center-content">
|
||||
{{ createdByRow.row.createdBy }}
|
||||
</div>
|
||||
<template v-slot:body-cell-createdBy="data">
|
||||
<q-td class="text-center">
|
||||
<span class="sort-icon-offset-margin">
|
||||
{{ data.row.createdBy }}
|
||||
</span>
|
||||
</q-td>
|
||||
</template>
|
||||
<template v-slot:body-cell-createdAt="createdAtRow">
|
||||
<q-td>
|
||||
<div class="justify-center">
|
||||
{{ getFormatDate(createdAtRow.row.createdAt) }}
|
||||
</div>
|
||||
<template v-slot:body-cell-createdAt="data">
|
||||
<q-td class="text-center">
|
||||
<span class="sort-icon-offset-margin">
|
||||
{{ getFormatDate(data.row.createdAt) }}
|
||||
</span>
|
||||
</q-td>
|
||||
</template>
|
||||
<template v-slot:body-cell-actions="actionsRow">
|
||||
<template v-slot:body-cell-actions="data">
|
||||
<q-td class="justify-center">
|
||||
<div>
|
||||
<q-icon
|
||||
|
|
@ -349,32 +197,31 @@ const onRowClick = ((_evt, row) => {
|
|||
self="center right"
|
||||
:offset="[5, 1]"
|
||||
>
|
||||
{{ actionsRow.row.name }}
|
||||
{{ data.row.name }}
|
||||
</q-tooltip>
|
||||
</div>
|
||||
<div v-if="props.mode === 'admin'">
|
||||
<q-btn
|
||||
flat
|
||||
color="positive"
|
||||
dense
|
||||
id="listViewFolderEdit"
|
||||
icon="o_edit"
|
||||
color="positive"
|
||||
@click.stop="
|
||||
triggerFolderEdit(
|
||||
actionsRow.row.name,
|
||||
actionsRow.row.pathname,
|
||||
folderFormComponent?.triggerFolderEdit(
|
||||
data.row.name,
|
||||
data.row.pathname,
|
||||
)
|
||||
"
|
||||
id="listViewFolderEdit"
|
||||
/>
|
||||
|
||||
<q-btn
|
||||
flat
|
||||
color="negative"
|
||||
dense
|
||||
:data-testid="actionsRow.row.name"
|
||||
icon="mdi-trash-can-outline"
|
||||
@click.stop="triggerFolderDelete(actionsRow.row.pathname)"
|
||||
id="listViewFolderDelete"
|
||||
color="negative"
|
||||
icon="mdi-trash-can-outline"
|
||||
:data-testid="data.row.name"
|
||||
@click.stop="triggerFolderDelete(data.row.pathname)"
|
||||
/>
|
||||
</div>
|
||||
</q-td>
|
||||
|
|
@ -382,74 +229,62 @@ const onRowClick = ((_evt, row) => {
|
|||
</q-table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="q-mt-md" v-if="currentDept >= 3">
|
||||
<div class="q-mt-md" v-if="currentInfo.dept >= 3">
|
||||
<div class="q-gutter-sm">
|
||||
<div class="flex flex-break d justify-between space-between">
|
||||
<div>
|
||||
<span class="text-h6">เอกสาร</span>
|
||||
</div>
|
||||
<div class="flex flex-break justify-between space-between">
|
||||
<div><span class="text-h6">เอกสาร</span></div>
|
||||
<div>
|
||||
<q-btn
|
||||
v-if="props.mode == 'admin'"
|
||||
outline
|
||||
push
|
||||
dense
|
||||
id="listViewFileCreate"
|
||||
class="q-px-md q-ml-md"
|
||||
label="สร้างเอกสาร"
|
||||
type="submit"
|
||||
color="primary"
|
||||
dense
|
||||
icon="add"
|
||||
@click.stop="() => triggerFileCreate()"
|
||||
id="listViewFileCreate"
|
||||
v-if="props.mode == 'admin'"
|
||||
@click.stop="() => fileFormComponent?.triggerFileCreate()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<q-table
|
||||
flat
|
||||
bordered
|
||||
:rows="listDataFile"
|
||||
:columns="columnsFile"
|
||||
row-key="name"
|
||||
:pagination="{
|
||||
rowsPerPage: 20,
|
||||
}"
|
||||
class="cursor"
|
||||
row-key="name"
|
||||
:rows="file[currentInfo.path]"
|
||||
:columns="colFile"
|
||||
:pagination="{ rowsPerPage: 20 }"
|
||||
>
|
||||
<template v-slot:body-cell-name="nameRow">
|
||||
<template v-slot:body-cell-name="data">
|
||||
<q-td
|
||||
style="width: 50%"
|
||||
@click="
|
||||
() => {
|
||||
currentDept >= 3
|
||||
? getFileInfo(nameRow.row)
|
||||
: getFolder(nameRow.row.pathname)
|
||||
}
|
||||
"
|
||||
id="listViewGetFileInfo"
|
||||
style="width: 50%"
|
||||
@click="() => getFileInfo(data.row)"
|
||||
>
|
||||
<file-icon
|
||||
size="list"
|
||||
:fileMimeType="
|
||||
nameRow.row.fileType ? nameRow.row.fileType : 'unknown'
|
||||
"
|
||||
:fileName="
|
||||
nameRow.row.fileName ? nameRow.row.fileName : 'unknown'
|
||||
"
|
||||
:fileMimeType="data.row.fileType || '-'"
|
||||
:fileName="data.row.fileName || '-'"
|
||||
/>
|
||||
{{ nameRow.row.fileName }}
|
||||
{{ data.row.fileName }}
|
||||
</q-td>
|
||||
</template>
|
||||
|
||||
<template v-slot:body-cell-fileType="fileTypeRow">
|
||||
<q-td>
|
||||
<div class="justify-center">
|
||||
{{ getType(fileTypeRow.row.fileType, fileTypeRow.row.fileName) }}
|
||||
</div>
|
||||
<template v-slot:body-cell-title="data">
|
||||
<q-td class="text-center">
|
||||
<span class="sort-icon-offset-margin">{{ data.row.title }}</span>
|
||||
</q-td>
|
||||
</template>
|
||||
|
||||
<template v-slot:body-cell-actions="actionsRow">
|
||||
<template v-slot:body-cell-fileType="data">
|
||||
<q-td class="text-center">
|
||||
<span class="sort-icon-offset-margin">
|
||||
{{ getType(data.row.fileType, data.row.fileName) }}
|
||||
</span>
|
||||
</q-td>
|
||||
</template>
|
||||
<template v-slot:body-cell-actions="data">
|
||||
<q-td class="justify-center">
|
||||
<div>
|
||||
<q-icon
|
||||
|
|
@ -463,7 +298,7 @@ const onRowClick = ((_evt, row) => {
|
|||
self="center right"
|
||||
:offset="[5, 1]"
|
||||
>
|
||||
{{ getSize(actionsRow.row.fileSize) }}
|
||||
{{ getSize(data.row.fileSize) }}
|
||||
</q-tooltip>
|
||||
</div>
|
||||
<div v-if="props.mode === 'admin'">
|
||||
|
|
@ -473,17 +308,21 @@ const onRowClick = ((_evt, row) => {
|
|||
dense
|
||||
icon="o_edit"
|
||||
@click.stop="
|
||||
() => triggerFileEdit(actionsRow.row, actionsRow.row.pathname)
|
||||
() =>
|
||||
fileFormComponent?.triggerFileEdit(
|
||||
data.row,
|
||||
data.row.pathname,
|
||||
)
|
||||
"
|
||||
id="listViewFileEdit"
|
||||
/>
|
||||
<q-btn
|
||||
flat
|
||||
color="negative"
|
||||
dense
|
||||
icon="mdi-trash-can-outline"
|
||||
@click.stop="() => triggerFileDelete(actionsRow.row.pathname)"
|
||||
id="listViewFileDelete"
|
||||
color="negative"
|
||||
icon="mdi-trash-can-outline"
|
||||
@click.stop="() => triggerFileDelete(data.row.pathname)"
|
||||
/>
|
||||
</div>
|
||||
</q-td>
|
||||
|
|
@ -491,44 +330,6 @@ const onRowClick = ((_evt, row) => {
|
|||
</q-table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<file-form
|
||||
ref="fileFormComponent"
|
||||
:mode="fileFormType"
|
||||
:error="fileFormError"
|
||||
v-model:open="fileFormState"
|
||||
v-model:title="fileFormData.title"
|
||||
v-model:description="fileFormData.description"
|
||||
v-model:keyword="fileFormData.keyword"
|
||||
v-model:category="fileFormData.category"
|
||||
@reset="() => (fileFormError = {})"
|
||||
@filechange="(name: string) => (fileFormError.fileExist = checkFile(name))"
|
||||
@submit="submitFileForm"
|
||||
/>
|
||||
|
||||
<folder-form
|
||||
:mode="folderFormType"
|
||||
:tree="DEPT_NAME[currentDept]"
|
||||
v-if="currentDept < 4"
|
||||
v-model:open="folderFormState"
|
||||
v-model:name="folderFormData.name"
|
||||
@submit="submitFolderForm"
|
||||
/>
|
||||
|
||||
<upload-exist-dialog
|
||||
v-model:notification="fileExistNotification"
|
||||
@confirm="() => currentParam && submitFileForm(currentParam, true)"
|
||||
@cancel="() => (currentParam = undefined)"
|
||||
/>
|
||||
|
||||
<dialog-delete
|
||||
v-model:open="dialogDeleteState"
|
||||
@confirm="
|
||||
() =>
|
||||
deleteFormType &&
|
||||
(deleteFolder(deleteFormPath), deleteFile(deleteFormPath))
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
@ -538,7 +339,7 @@ const onRowClick = ((_evt, row) => {
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
.center-content {
|
||||
.sort-icon-offset-margin {
|
||||
margin-right: 18px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,67 +1,39 @@
|
|||
<script lang="ts" setup>
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { ref } from 'vue'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { useTreeDataStore } from '@/stores/tree-data'
|
||||
import { useSearchDataStore } from '@/stores/searched-data'
|
||||
import { useFileInfoStore } from '@/stores/file-info-data'
|
||||
import { useSocketStore } from '@/stores/socket'
|
||||
|
||||
import FileItem from './FileItem.vue'
|
||||
import TreeExplorer from './TreeExplorer.vue'
|
||||
import FileSearched from './FileSearched.vue'
|
||||
import ListView from './ListView.vue'
|
||||
import FolderForm from './FolderForm.vue'
|
||||
import FolderFormWrapper from './FolderFormWrapper.vue'
|
||||
import GlobalErrorDialog from './GlobalErrorDialog.vue'
|
||||
|
||||
import SearchBar from '@/modules/01_user/components/SearchBar.vue'
|
||||
import FileDownload from '@/modules/01_user/components/FileDownload.vue'
|
||||
import useStorage from '@/stores/storage'
|
||||
|
||||
const DEPT_NAME = ['ตู้เอกสาร', 'ลิ้นชัก', 'แฟ้ม', 'แฟ้มย่อย'] as const
|
||||
|
||||
const { isFilePreview } = storeToRefs(useFileInfoStore())
|
||||
const { isSearch } = storeToRefs(useSearchDataStore())
|
||||
const { data, currentDept, currentPath } = storeToRefs(useTreeDataStore())
|
||||
const { createFolder, getCabinet, gotoParent, getFolder } = useTreeDataStore()
|
||||
|
||||
useStorage()
|
||||
useSocketStore()
|
||||
|
||||
const viewMode = ref<'view_list' | 'view_module'>('view_list')
|
||||
const props = defineProps<{
|
||||
mode: 'admin' | 'user'
|
||||
}>()
|
||||
|
||||
const folderFormState = ref<boolean>(false)
|
||||
const folderFormType = ref<'edit' | 'create'>('create')
|
||||
const folderFormData = ref<{
|
||||
name?: string
|
||||
}>({})
|
||||
const { isFilePreview } = storeToRefs(useFileInfoStore())
|
||||
const { isSearch } = storeToRefs(useSearchDataStore())
|
||||
|
||||
function triggerFolderCreate() {
|
||||
folderFormType.value = 'create'
|
||||
folderFormData.value = {}
|
||||
folderFormState.value = !folderFormState.value
|
||||
}
|
||||
const storageStore = useStorage()
|
||||
const { tree, currentInfo } = storeToRefs(storageStore)
|
||||
const { goto, gotoParent } = storageStore
|
||||
|
||||
async function submitFolderForm(value: {
|
||||
mode: 'create' | 'edit'
|
||||
name: string
|
||||
}) {
|
||||
if (value.mode === 'create') {
|
||||
await createFolder(value.name)
|
||||
}
|
||||
}
|
||||
const viewMode = ref<'view_list' | 'view_module'>('view_list')
|
||||
|
||||
onMounted(async () => {
|
||||
await getCabinet()
|
||||
|
||||
const sessionCurrentPath = sessionStorage.getItem('currentPath')
|
||||
|
||||
if (sessionCurrentPath) await getFolder(sessionCurrentPath)
|
||||
})
|
||||
const folderFormComponent = ref<InstanceType<typeof FolderFormWrapper>>()
|
||||
</script>
|
||||
<template>
|
||||
<folder-form-wrapper ref="folderFormComponent" />
|
||||
<global-error-dialog />
|
||||
|
||||
<section id="header" class="q-px-md q-pt-md q-pb-none">
|
||||
<div class="q-my-md row items-center">
|
||||
<div class="col">
|
||||
|
|
@ -86,8 +58,7 @@ onMounted(async () => {
|
|||
class="block q-my-sm text-weight-bold pointer"
|
||||
@click="
|
||||
() => {
|
||||
currentPath = ''
|
||||
getFolder(currentPath)
|
||||
goto()
|
||||
isSearch = false
|
||||
isFilePreview = false
|
||||
}
|
||||
|
|
@ -100,13 +71,13 @@ onMounted(async () => {
|
|||
flat
|
||||
color="primary"
|
||||
icon="add"
|
||||
@click.stop="() => triggerFolderCreate()"
|
||||
data-testid="createFolder"
|
||||
@click.stop="() => folderFormComponent?.triggerFolderCreate()"
|
||||
/>
|
||||
</div>
|
||||
<q-separator />
|
||||
<div class="q-pa-md">
|
||||
<tree-explorer :data="data" :level="1" />
|
||||
<tree-explorer :data="tree" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -125,54 +96,57 @@ onMounted(async () => {
|
|||
flat
|
||||
dense
|
||||
class="q-mr-sm q-px-sm"
|
||||
v-if="isSearch == true || currentDept > 0"
|
||||
v-if="isSearch || currentInfo.dept > 0"
|
||||
@click="
|
||||
() => {
|
||||
isSearch
|
||||
? (isSearch = false)
|
||||
: ((folderFormState = false), gotoParent())
|
||||
isSearch ? (isSearch = false) : gotoParent()
|
||||
}
|
||||
"
|
||||
>
|
||||
<q-icon name="arrow_back" size="1rem" color="primary" />
|
||||
</q-btn>
|
||||
<span v-if="isSearch === true">ผลการค้นหา</span>
|
||||
<q-breadcrumbs v-if="isSearch === false" active-color="primary">
|
||||
<span v-if="isSearch">ผลการค้นหา</span>
|
||||
<q-breadcrumbs
|
||||
v-if="!isSearch"
|
||||
active-color="grey"
|
||||
separator-color="grey"
|
||||
>
|
||||
<q-breadcrumbs-el
|
||||
v-if="currentPath === '/' || !currentPath"
|
||||
v-if="currentInfo.path === '/' || !currentInfo.path"
|
||||
label="ตู้เอกสารทั้งหมด"
|
||||
/>
|
||||
<q-btn
|
||||
v-if="
|
||||
mode === 'admin' &&
|
||||
viewMode === 'view_module' &&
|
||||
currentDept === 0
|
||||
"
|
||||
dense
|
||||
id="createFolder"
|
||||
class="q-px-md q-ml-md al"
|
||||
label="สร้างตู้เก็บเอกสาร"
|
||||
type="submit"
|
||||
color="primary"
|
||||
dense
|
||||
icon="add"
|
||||
@click.stop="() => triggerFolderCreate()"
|
||||
id="createFolder"
|
||||
v-if="
|
||||
mode === 'admin' &&
|
||||
viewMode === 'view_module' &&
|
||||
currentInfo.dept === 0
|
||||
"
|
||||
@click.stop="
|
||||
() => folderFormComponent?.triggerFolderCreate()
|
||||
"
|
||||
/>
|
||||
<q-breadcrumbs-el
|
||||
class="text-primary pointer"
|
||||
v-for="(fragments, index) in currentPath
|
||||
class="pointer"
|
||||
v-for="(fragments, index) in currentInfo.path
|
||||
.split('/')
|
||||
.filter(Boolean)"
|
||||
:label="fragments"
|
||||
@click="
|
||||
() => {
|
||||
currentPath =
|
||||
currentPath
|
||||
goto(
|
||||
currentInfo.path
|
||||
.split('/')
|
||||
.filter(Boolean)
|
||||
.slice(0, index + 1)
|
||||
.join('/') + '/'
|
||||
|
||||
getFolder(currentPath)
|
||||
.join('/') + '/',
|
||||
)
|
||||
}
|
||||
"
|
||||
/>
|
||||
|
|
@ -183,15 +157,16 @@ onMounted(async () => {
|
|||
<q-btn
|
||||
flat
|
||||
dense
|
||||
id="getFolder"
|
||||
color="blue-grey-2"
|
||||
icon="refresh"
|
||||
class="q-mr-sm"
|
||||
@click="() => getFolder(currentPath)"
|
||||
id="getFolder"
|
||||
@click="() => goto(currentInfo.path, true)"
|
||||
/>
|
||||
<q-btn
|
||||
flat
|
||||
dense
|
||||
id="viewMode"
|
||||
color="blue-grey-2"
|
||||
:icon="viewMode"
|
||||
@click="
|
||||
|
|
@ -200,7 +175,6 @@ onMounted(async () => {
|
|||
viewMode === 'view_list' ? 'view_module' : 'view_list'
|
||||
}
|
||||
"
|
||||
id="viewMode"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -208,15 +182,15 @@ onMounted(async () => {
|
|||
<file-searched
|
||||
:viewMode="viewMode"
|
||||
:action="props.mode === 'admin'"
|
||||
v-if="isSearch === true"
|
||||
v-if="isSearch"
|
||||
/>
|
||||
<file-item
|
||||
:viewMode="viewMode"
|
||||
:action="props.mode === 'admin'"
|
||||
v-if="isSearch === false && viewMode === 'view_list'"
|
||||
v-if="!isSearch && viewMode === 'view_list'"
|
||||
/>
|
||||
<list-view
|
||||
v-if="isSearch === false && viewMode === 'view_module'"
|
||||
v-if="!isSearch && viewMode === 'view_module'"
|
||||
:mode="mode"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -224,17 +198,6 @@ onMounted(async () => {
|
|||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<folder-form
|
||||
:mode="folderFormType"
|
||||
:tree="DEPT_NAME[currentDept]"
|
||||
v-if="currentDept < 4"
|
||||
v-model:open="folderFormState"
|
||||
v-model:name="folderFormData.name"
|
||||
@submit="submitFolderForm"
|
||||
/>
|
||||
|
||||
<global-error-dialog />
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
<script setup lang="ts">
|
||||
import { getUsername, logout } from '@/services/KeyCloakService'
|
||||
import { ref } from 'vue'
|
||||
const dropdownOpen = ref<boolean>(false)
|
||||
const accountName = ref<string>(getUsername())
|
||||
const dropdown = ref<boolean>(false)
|
||||
const name = ref<string>(getUsername())
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
@click="() => (dropdownOpen = !dropdownOpen)"
|
||||
@click="() => (dropdown = !dropdown)"
|
||||
class="row q-px-xs cursor"
|
||||
id="app-toolbar-title"
|
||||
>
|
||||
|
|
@ -19,20 +19,28 @@ const accountName = ref<string>(getUsername())
|
|||
|
||||
<div>
|
||||
<div class="row q-pl-sm">
|
||||
<span class="text-body1" style="font-size:13px">
|
||||
{{ accountName }}
|
||||
<span class="text-body1" style="font-size: 13px">
|
||||
{{ name }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="row q-pl-sm">
|
||||
<span class="text-caption text-grey" style="font-size:10px"> เจ้าหน้าที่ </span>
|
||||
<span class="text-caption text-grey" style="font-size: 10px">
|
||||
เจ้าหน้าที่
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<q-btn-dropdown stretch flat v-model="dropdownOpen">
|
||||
<q-btn-dropdown stretch flat v-model="dropdown">
|
||||
<q-list>
|
||||
<q-item clickable v-close-popup tabindex="0" @click="() => logout()">
|
||||
<q-item-section avatar>
|
||||
<q-avatar icon="logout" color="primary" text-color="white" caption>
|
||||
<q-avatar
|
||||
caption
|
||||
icon="logout"
|
||||
color="primary"
|
||||
text-color="white"
|
||||
size="1.5rem"
|
||||
>
|
||||
</q-avatar>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
|
|
|
|||
|
|
@ -1,31 +1,31 @@
|
|||
<script setup lang="ts">
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { useTreeDataStore, type TreeDataFolder } from '@/stores/tree-data'
|
||||
import { useSearchDataStore } from '@/stores/searched-data'
|
||||
import { useFileInfoStore } from '@/stores/file-info-data'
|
||||
import useStorage from '@/stores/storage'
|
||||
|
||||
const { isSearch } = storeToRefs(useSearchDataStore())
|
||||
const { isFilePreview } = storeToRefs(useFileInfoStore())
|
||||
const { getFolder } = useTreeDataStore()
|
||||
const store = useStorage()
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
data: TreeDataFolder[]
|
||||
level: number
|
||||
data: typeof store.tree
|
||||
level?: number
|
||||
}>(),
|
||||
{
|
||||
level: 0,
|
||||
level: 1,
|
||||
},
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<q-list v-for="folder in data" class="rounded-borders">
|
||||
<q-list v-for="v in data" class="rounded-borders">
|
||||
<q-expansion-item
|
||||
@click="
|
||||
() => {
|
||||
getFolder(folder.pathname, false)
|
||||
store.goto(v.pathname)
|
||||
isSearch = false
|
||||
isFilePreview = false
|
||||
}
|
||||
|
|
@ -40,13 +40,12 @@ const props = withDefaults(
|
|||
? 'inbox'
|
||||
: 'o_folder_open'
|
||||
"
|
||||
:label="folder.name"
|
||||
class="text-overflow-handle"
|
||||
v-model="folder.status"
|
||||
:label="v.name"
|
||||
class="text-overflow-handle active"
|
||||
>
|
||||
<tree-explorer
|
||||
v-if="folder.folder"
|
||||
:data="folder.folder"
|
||||
v-if="v.folder"
|
||||
:data="v.folder"
|
||||
:level="props.level + 1"
|
||||
/>
|
||||
</q-expansion-item>
|
||||
|
|
@ -55,7 +54,7 @@ const props = withDefaults(
|
|||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(.q-item[aria-expanded='true']) {
|
||||
.active :deep(.q-item[aria-expanded='true']) {
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue