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

refactor: migrate to storage

Browse source 
refactor: migrate to storage
This commit is contained in:
Methapon2001 2023-12-11 15:51:59 +07:00
parent 4bdf1f620b
commit cc87de5995
No known key found for this signature in database
GPG key ID: 849924FEF46BD132
12 changed files with 388 additions and 879 deletions
Download patch file Download diff file Expand all files Collapse all files

394
Services/client/src/components/FileItem.vue
View file

@ -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;