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

Merge branch 'feat/overhaul-storage' into feat/storage-endpoint

Browse source
This commit is contained in:
Methapon2001 2023-12-11 19:18:02 +07:00
commit e0c60eb241
No known key found for this signature in database
GPG key ID: 849924FEF46BD132
26 changed files with 1276 additions and 1055 deletions
Download patch file Download diff file Expand all files Collapse all files

136
Services/client/src/components/FileFormWrapper.vue Normal file
View file

@ -0,0 +1,136 @@
<script lang="ts" setup>
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)
const { createFile, updateFile } = storageStore
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 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,
}
}
defineExpose({
triggerFileCreate,
triggerFileEdit,
})
const currentParam = ref<Parameters<typeof submitFileForm>[0]>()
function checkFileExist(name: string) {
return Boolean(
file.value[currentInfo.value.path].find((v) => v.fileName === name),
)
}
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 &&
file.value[currentInfo.value.path].find(
(v) => v.fileName === value.file?.name,
) &&
!force
) {
fileExistNotification.value = true
return
}
if (value.mode === 'create' && value.file) {
await createFile(value.file, {
title: value.title,
description: value.description,
keyword: value.keyword,
category: value.category,
})
} else {
await updateFile(
fileFormPath.value,
{
title: value.title,
description: value.description,
keyword: value.keyword,
category: value.category,
},
value.file,
)
}
fileFormData.value = {}
fileFormState.value = false
currentParam.value = undefined
fileFormComponent.value?.reset()
}
</script>
<template>
<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 = checkFileExist(name))
"
@submit="submitFileForm"
/>
<upload-exist-dialog
v-model:notification="fileExistNotification"
@confirm="() => currentParam && submitFileForm(currentParam, true)"
@cancel="() => (currentParam = undefined)"
/>
</template>

43
Services/client/src/components/FileIcon.vue
View file

@ -1,6 +1,6 @@
<script setup lang="ts">
import { useFileInfoStore } from '@/stores/file-info-data'
import mime from 'mime'
import { useFileInfoStore } from '@/stores/file-info-data'
const { mimeFileMapping } = useFileInfoStore()
@ -11,44 +11,33 @@ defineProps<{
}>()
function getIcon(mimeType: string | undefined, fileName: string | undefined) {
if (mimeType === undefined) {
return 'mdi-file-question-outline'
}
if (!mimeType) return 'mdi-file-question-outline'
const extension = mime.getExtension(mimeType)
if (extension) return mimeFileMapping[mimeType].icon
if (fileName && fileName.includes('.')) return 'mdi-file-outline'
const extFomMime = mime.getExtension(mimeType)
if (extFomMime) {
return mimeFileMapping[mimeType].icon
}
if (fileName && fileName.includes('.')) {
return 'mdi-file-outline'
}
return 'mdi-file-question-outline'
}
function getColor(mimeType: string | undefined, fileName: string | undefined) {
if (mimeType === undefined) {
return 'grey-5'
}
if (mimeType === undefined) return 'grey-5'
const extension = mime.getExtension(mimeType)
if (extension) return mimeFileMapping[mimeType].color
if (fileName && fileName.includes('.')) return 'blue-11'
const extFomMime = mime.getExtension(mimeType)
if (extFomMime) {
return mimeFileMapping[mimeType].color
}
if (fileName && fileName.includes('.')) {
return 'blue-11'
}
return 'grey-5'
}
function getIconSize(s: string) {
type SizeMapping = {
[key: string]: string
}
const sizeMapping: SizeMapping = {
function getIconSize(size: string) {
const sizeMapping = {
preview: '6em',
list: '2em',
}
return sizeMapping[s]
return sizeMapping[size as keyof typeof sizeMapping]
}
</script>

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">
<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="currentDept != 4 && 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">
<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;

180
Services/client/src/components/FileSearched.vue
View file

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

59
Services/client/src/components/FolderFormWrapper.vue Normal file
View file

@ -0,0 +1,59 @@
<script lang="ts" setup>
import { ref } from 'vue'
import { storeToRefs } from 'pinia'
import useStorage from '@/stores/storage'
import FolderForm from './FolderForm.vue'
const storageStore = useStorage()
const { file, currentInfo } = storeToRefs(storageStore)
const { createFolder, editFolder } = storageStore
const folderFormState = ref<boolean>(false)
const folderFormPath = ref<string>('')
const folderFormData = ref<{
name?: string
}>({})
const folderFormType = ref<'edit' | 'create'>('create')
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
}
defineExpose({
triggerFolderCreate,
triggerFolderEdit,
})
async function submitFolderForm(value: {
mode: 'create' | 'edit'
name: string
}) {
if (value.mode === 'create') {
await createFolder(value.name)
} else {
await editFolder(value.name, folderFormPath.value)
}
}
</script>
<template>
<folder-form
:mode="folderFormType"
:tree="
(['ตู้เอกสาร', 'ลิ้นชัก', 'แฟ้ม', 'แฟ้มย่อย'] as const)[currentInfo.dept]
"
v-if="currentInfo.dept < 4"
v-model:open="folderFormState"
v-model:name="folderFormData.name"
@submit="submitFolderForm"
/>
</template>

18
Services/client/src/components/FullLoader.vue
View file

@ -1,22 +1,20 @@
<script setup lang="ts">
import { watch, ref } from 'vue'
const props = defineProps({
visibility: Boolean,
})
const props = defineProps({ visibility: Boolean })
const visible = ref<boolean>(props.visibility)
const loaderVisibility = ref<boolean>(props.visibility)
watch(props, () => (loaderVisibility.value = props.visibility))
watch(props, () => (visible.value = props.visibility))
</script>
<template>
<q-inner-loading :showing="loaderVisibility" class="loader">
<q-inner-loading :showing="visible" class="loader">
<q-spinner-cube size="80px" color="primary" />
</q-inner-loading>
</template>
<style lang="sass">
.loader
z-index: 1000
<style lang="scss">
.loader {
z-index: 1000;
}
</style>

453
Services/client/src/components/ListView.vue
View file

@ -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: Event, row: TreeDataFolder, index: number) => {
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: Event, row: TreeDataFolder, index: number) => {
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: Event, row: TreeDataFolder, index: number) => {
</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: Event, row: TreeDataFolder, index: number) => {
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: Event, row: TreeDataFolder, index: number) => {
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: Event, row: TreeDataFolder, index: number) => {
</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: Event, row: TreeDataFolder, index: number) => {
align-items: center;
}
.center-content {
.sort-icon-offset-margin {
margin-right: 18px;
}

126
Services/client/src/components/PageLayout.vue
View file

@ -1,7 +1,6 @@
<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'
@ -9,54 +8,32 @@ 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()
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">
@ -81,8 +58,7 @@ onMounted(async () => {
class="block q-my-sm text-weight-bold pointer"
@click="
() => {
currentPath = ''
getFolder(currentPath)
goto()
isSearch = false
isFilePreview = false
}
@ -95,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>
@ -120,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('/') + '/',
)
}
"
/>
@ -178,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="
@ -195,7 +175,6 @@ onMounted(async () => {
viewMode === 'view_list' ? 'view_module' : 'view_list'
}
"
id="viewMode"
/>
</div>
</div>
@ -203,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>
@ -219,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>

24
Services/client/src/components/Profile.vue
View file

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

25
Services/client/src/components/TreeExplorer.vue
View file

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

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

@ -3,7 +3,7 @@ import axios from 'axios'
import { storeToRefs } from 'pinia'
import axiosClient from '@/services/HttpService'
import type { EhrFile } from '@/stores/tree-data'
import type { StorageFile } from '@/stores/storage'
import { useFileInfoStore } from '@/stores/file-info-data'
import FileIcon from '@/components/FileIcon.vue'
@ -25,7 +25,7 @@ async function downloadSubmit(path: string | undefined) {
formatPath = `cabinet/${cabinet}/drawer/${drawer}/folder/${folder}/subfolder/${subfolder}/file/${file}`
}
const res = await axiosClient.get<EhrFile & { download: string }>(
const res = await axiosClient.get<StorageFile & { download: string }>(
`${import.meta.env.VITE_API_ENDPOINT}${formatPath}`,
)
await axios

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

@ -4,7 +4,7 @@ import { storeToRefs } from 'pinia'
import axiosClient from '@/services/HttpService'
import mime from 'mime'
import type { EhrFile } from '@/stores/tree-data'
import type { StorageFile } from '@/stores/storage'
import { useSearchDataStore } from '@/stores/searched-data'
import { useLoader } from '@/stores/loader'
@ -92,7 +92,7 @@ async function searchSubmit() {
try {
loaderStore.show()
const res = await axiosClient.post<EhrFile[]>(
const res = await axiosClient.post<StorageFile[]>(
`${import.meta.env.VITE_API_ENDPOINT}/search`,
submitSearchData.value,
)

3
Services/client/src/services/HttpService.ts
View file

@ -2,8 +2,6 @@ import axios from 'axios'
import { getToken } from './KeyCloakService'
import { useErrorStore } from '@/stores/error'
const error = useErrorStore()
const instance = axios.create()
instance.interceptors.request.use(async (config) => {
@ -14,6 +12,7 @@ instance.interceptors.request.use(async (config) => {
instance.interceptors.response.use(
(res) => res,
(err) => {
const error = useErrorStore()
const status = err.response.status
const data = err.response.data

21
Services/client/src/services/KeyCloakService.ts
View file

@ -2,15 +2,20 @@ import Keycloak from 'keycloak-js'
const keycloak = new Keycloak('/keycloak.json')
export async function login(cb?: (...args: any[]) => void) {
const auth = await keycloak
.init({
onLoad: 'login-required',
responseMode: 'query',
checkLoginIframe: false,
})
.catch((e) => console.dir(e))
let init = false
export async function login(cb?: (...args: any[]) => void) {
const auth = !init
? await keycloak
.init({
onLoad: 'login-required',
responseMode: 'query',
checkLoginIframe: false,
})
.catch((e) => console.dir(e))
: await keycloak.login().catch((e) => console.dir(e))
if (auth) init = true
if (auth && cb) cb()
}

147
Services/client/src/stores/file-info-data.ts
View file

@ -2,19 +2,19 @@ import { ref } from 'vue'
import { defineStore } from 'pinia'
import mime from 'mime'
import type { EhrFile } from '@/stores/tree-data'
import type { StorageFile } from '@/stores/storage'
export interface MimeMap {
[key: string]: { icon: string; color: string }
}
export interface TypeSetting {
export interface IconMap {
[key: string]: { icon: string; color: string }
}
export const useFileInfoStore = defineStore('info', () => {
const fileInfo = ref<EhrFile>()
const isFilePreview = ref<Boolean>(false)
const fileIcon: TypeSetting = {
const fileInfo = ref<StorageFile>()
const fileIcon: IconMap = {
word: { icon: 'mdi-file-word-outline', color: 'blue-11' },
excel: { icon: 'mdi-file-excel-outline', color: 'green-4' },
powerpoint: { icon: 'mdi-file-powerpoint-outline', color: 'orange-4' },
@ -23,103 +23,55 @@ export const useFileInfoStore = defineStore('info', () => {
image: { icon: 'mdi-file-image-outline', color: 'blue-11' },
}
const mimeFileMapping: MimeMap = {
'application/msword': {
...fileIcon.word,
},
'application/vnd.openxmlformats-officedocument.wordprocessingml.document': {
...fileIcon.word,
},
'application/vnd.openxmlformats-officedocument.wordprocessingml.template': {
...fileIcon.word,
},
'application/vnd.ms-word.document.macroEnabled.12': {
...fileIcon.word,
},
'application/vnd.ms-word.template.macroEnabled.12': {
...fileIcon.word,
},
'application/vnd.ms-excel': {
...fileIcon.excel,
},
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': {
...fileIcon.excel,
},
'application/vnd.openxmlformats-officedocument.spreadsheetml.template': {
...fileIcon.excel,
},
'application/vnd.ms-excel.sheet.macroEnabled.12': {
...fileIcon.excel,
},
'application/vnd.ms-excel.template.macroEnabled.12': {
...fileIcon.excel,
},
'application/vnd.ms-excel.addin.macroEnabled.12': {
...fileIcon.excel,
},
'application/vnd.ms-excel.sheet.binary.macroEnabled.12': {
...fileIcon.excel,
},
'application/vnd.ms-powerpoint': {
...fileIcon.powerpoint,
},
'application/msword': fileIcon.word,
'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
fileIcon.word,
'application/vnd.openxmlformats-officedocument.wordprocessingml.template':
fileIcon.word,
'application/vnd.ms-word.document.macroEnabled.12': fileIcon.word,
'application/vnd.ms-word.template.macroEnabled.12': fileIcon.word,
'application/vnd.ms-excel': fileIcon.excel,
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet':
fileIcon.excel,
'application/vnd.openxmlformats-officedocument.spreadsheetml.template':
fileIcon.excel,
'application/vnd.ms-excel.sheet.macroEnabled.12': fileIcon.excel,
'application/vnd.ms-excel.template.macroEnabled.12': fileIcon.excel,
'application/vnd.ms-excel.addin.macroEnabled.12': fileIcon.excel,
'application/vnd.ms-excel.sheet.binary.macroEnabled.12': fileIcon.excel,
'application/vnd.ms-powerpoint': fileIcon.powerpoint,
'application/vnd.openxmlformats-officedocument.presentationml.presentation':
{
...fileIcon.powerpoint,
},
'application/vnd.openxmlformats-officedocument.presentationml.template': {
...fileIcon.powerpoint,
},
'application/vnd.openxmlformats-officedocument.presentationml.slideshow': {
...fileIcon.powerpoint,
},
'application/vnd.ms-powerpoint.addin.macroEnabled.12': {
...fileIcon.powerpoint,
},
'application/vnd.ms-powerpoint.presentation.macroEnabled.12': {
...fileIcon.powerpoint,
},
'application/vnd.ms-powerpoint.template.macroEnabled.12': {
...fileIcon.powerpoint,
},
'application/vnd.ms-powerpoint.slideshow.macroEnabled.12': {
...fileIcon.powerpoint,
},
'application/pdf': {
...fileIcon.pdf,
},
'text/plain': {
...fileIcon.txt,
},
'image/png': {
...fileIcon.image,
},
'image/jpeg': {
...fileIcon.image,
},
fileIcon.powerpoint,
'application/vnd.openxmlformats-officedocument.presentationml.template':
fileIcon.powerpoint,
'application/vnd.openxmlformats-officedocument.presentationml.slideshow':
fileIcon.powerpoint,
'application/vnd.ms-powerpoint.addin.macroEnabled.12': fileIcon.powerpoint,
'application/vnd.ms-powerpoint.presentation.macroEnabled.12':
fileIcon.powerpoint,
'application/vnd.ms-powerpoint.template.macroEnabled.12':
fileIcon.powerpoint,
'application/vnd.ms-powerpoint.slideshow.macroEnabled.12':
fileIcon.powerpoint,
'application/pdf': fileIcon.pdf,
'text/plain': fileIcon.txt,
'image/png': fileIcon.image,
'image/jpeg': fileIcon.image,
}
function getType(
mimeType: string | undefined,
fileName: string | undefined,
): string {
if (mimeType === undefined) {
return 'ไม่ทราบประเภท'
if (mimeType === undefined) return 'ไม่ทราบประเภท'
const extension = mime.getExtension(mimeType)
if (extension) return '.' + extension
if (fileName && fileName.includes('.')) {
return fileName.substring(fileName.lastIndexOf('.'))
}
const extFomMime = mime.getExtension(mimeType)
if (extFomMime) {
return '.' + extFomMime
}
if (fileName && fileName.includes('.')) {
const dotIndex = fileName.lastIndexOf('.')
const extension = fileName.substring(dotIndex)
return extension
}
return 'ไม่ทราบประเภท'
}
@ -136,20 +88,19 @@ export const useFileInfoStore = defineStore('info', () => {
}
function getSize(size: string | undefined): string {
if (size === undefined) {
return 'ไม่ทราบขนาด'
}
if (size === undefined) return 'ไม่ทราบขนาด'
const units = ['B', 'KB', 'MB', 'GB', 'TB']
let i = 0
let sizeNumber = parseFloat(size)
while (sizeNumber >= 1024 && i < units.length - 1) {
while (sizeNumber >= 1024 && i++ < units.length - 1) {
sizeNumber /= 1024
i++
}
return sizeNumber.toFixed(2) + ' ' + units[i]
}
function getFileInfo(data: EhrFile) {
function getFileInfo(data: StorageFile) {
isFilePreview.value = true
fileInfo.value = data
}

18
Services/client/src/stores/searched-data.ts
View file

@ -1,45 +1,45 @@
import { ref } from 'vue'
import { defineStore } from 'pinia'
import type { EhrFile } from '@/stores/tree-data'
import type { StorageFile } from '@/stores/storage'
export interface searchData {
export interface Search {
field: string
value: string
}
export interface advSearchDataRow {
export interface AdvancedSearch {
op: 'AND' | 'OR'
field: 'title' | 'keyword'
value: string
}
export interface advSearchDataField {
export interface AdvancedSearchFields {
keyword: string[]
description: string
}
export const useSearchDataStore = defineStore('searched', () => {
const foundFile = ref<EhrFile[]>([])
const foundFile = ref<StorageFile[]>([])
const isAdvSearchCall = ref<boolean>(false)
const isSearch = ref<Boolean>(false)
const isActFoundFile = ref<Boolean>(false)
const searchData = ref<searchData>({
const searchData = ref<Search>({
field: 'title',
value: '',
})
const advSearchDataRow = ref<advSearchDataRow[]>([
const advSearchDataRow = ref<AdvancedSearch[]>([
{
op: 'AND',
field: 'title',
value: '',
},
])
const advSearchDataField = ref<advSearchDataField>({
const advSearchDataField = ref<AdvancedSearchFields>({
keyword: [],
description: '',
})
async function getFoundFile(data: EhrFile[]) {
async function getFoundFile(data: StorageFile[]) {
foundFile.value = data
}

362
Services/client/src/stores/storage.ts Normal file
View file

@ -0,0 +1,362 @@
import { computed, reactive, ref } from 'vue'
import { defineStore } from 'pinia'
import { io } from 'socket.io-client'
import axios from 'axios'
import api from '@/services/HttpService'
import { useLoader } from './loader'
type Path = string
export interface StorageFolder {
pathname: string
name: string
createdAt: string
createdBy: string
}
export interface StorageFile {
pathname: string
path: string
fileName: string
fileSize: string
fileType: string
title: string
description: string
category: string[]
keyword: string[]
updatedAt: string
updatedBy: string
createdAt: string
createdBy: string
}
export interface Structure extends StorageFolder {
folder: Structure[]
file: StorageFile[]
}
type Tree = Structure[]
function constructUrl(path: string | string[], append = true) {
const arr = Array.isArray(path) ? path : path.split('/').filter(Boolean)
const url =
import.meta.env.VITE_API_ENDPOINT +
arr.reduce<string>((a, v, i) => {
switch (String(i)) {
case '0':
return `cabinet/${v}`
case '1':
return `${a}/drawer/${v}`
case '2':
return `${a}/folder/${v}`
case '3':
return `${a}/subfolder/${v}`
default:
return a
}
}, '')
return append
? url + ['cabinet', '/drawer', '/folder', '/subfolder'][arr.length]
: url
}
function consistantPath(path: string | string[]) {
return Array.isArray(path)
? path.join('/') + '/'
: path.split('/').filter(Boolean).join('/') + '/'
}
const useStorage = defineStore('storageStore', () => {
const loader = useLoader()
const init = ref<boolean>(false)
const folder = ref<Record<Path, StorageFolder[]>>({})
const file = ref<Record<Path, StorageFile[]>>({})
const tree = computed(() => {
let structure: Tree = []
// parse list of folder and list of file into tree
Object.entries(folder.value).forEach(([key, value]) => {
const arr = key.split('/').filter(Boolean)
// Once run then it is init
if (!init.value) init.value = true
if (arr.length === 0) {
structure = value.map((v) => ({
pathname: v.pathname,
name: v.name,
createdAt: v.createdAt,
createdBy: v.createdBy,
folder: [],
file: [],
}))
} else {
let current: Structure | undefined
// traverse into tree
arr.forEach((v, i) => {
current =
i === 0
? structure.find((x) => x.name === v)
: current?.folder.find((x) => x.name === v)
})
// set data in tree (object is references to the same object)
if (current) {
current.folder = value.map((v) => ({
pathname: v.pathname,
name: v.name,
createdAt: v.createdAt,
createdBy: v.createdBy,
folder: [],
file: [],
}))
current.file = file.value[key] ?? []
}
}
})
console.log(structure, folder.value, file.value)
return structure
})
const currentInfo = reactive<{
path: string
dept: number
}>({
path: '',
dept: 0,
})
if (!init.value) goto(sessionStorage.getItem('path') || '')
async function getStorage(path: string = '') {
const arr = path.split('/').filter(Boolean)
if (arr.length >= 4) return // this system does not have more than 4 level
const res = await api.get<(typeof folder.value)[string]>(constructUrl(arr))
if (res.status === 200 && res.data && Array.isArray(res.data))
folder.value[consistantPath(path)] = res.data.sort((a, b) =>
a.pathname.localeCompare(b.pathname),
)
}
async function getStorageFile(path: string = '') {
const arr = path.split('/').filter(Boolean)
if (arr.length < 3) return // file in this system only lives in level 3 and 4
const res = await api.get<(typeof file.value)[string]>(
constructUrl(arr, false) + '/file',
)
if (res.status === 200 && res.data && Array.isArray(res.data))
file.value[consistantPath(path)] = res.data.sort((a, b) =>
a.pathname.localeCompare(b.pathname),
)
}
async function goto(path: string = '', force = false) {
loader.show()
const arr = path.split('/').filter(Boolean)
// get all parent to the root structure
// this will also triggher init structure as it get root structure
for (let i = 0; i < arr.length; i++) {
const current = consistantPath(arr.slice(0, i - arr.length))
if (!folder.value[current] || force) await getStorage(current)
}
path = consistantPath(path)
// only get this path once, after that will get from socket.io-client instead
if (!folder.value[path] || force) await getStorage(path)
if (!file.value[path] || force) await getStorageFile(path)
currentInfo.path = path
currentInfo.dept = path.split('/').filter(Boolean).length
sessionStorage.setItem('path', path)
loader.hide()
}
async function gotoParent() {
const arr = currentInfo.path.split('/').filter(Boolean)
await goto(consistantPath(arr.slice(0, -1)))
}
// socket.io zone
const socket = io('http://localhost:25565')
socket.on('connect', () => console.info('Socket.io connected.'))
socket.on('disconnect', () => console.info('Socket.io disconnected.'))
socket.on('CreateFolder', (data: { pathname: string }) => {
const arr = data.pathname.split('/').filter(Boolean)
const path = consistantPath(arr.slice(0, -1))
if (folder.value[path]) {
folder.value[path].push({
pathname: data.pathname,
name: arr[arr.length - 1],
createdAt: 'n/a',
createdBy: 'n/a',
})
folder.value[path].sort((a, b) => a.pathname.localeCompare(b.pathname))
}
})
// NOTE:
// API planned to make new endpoint that can move and rename in one go.
// Need to change if api handle move and rename file instead of just edit.
socket.on('EditFolder', (data: { from: string; to: string }) => {
const src = data.from.split('/').filter(Boolean)
const dst = data.to.split('/').filter(Boolean)
const path = consistantPath(src.slice(0, -1))
if (folder.value[path]) {
const val = folder.value[path].find((v) => v.pathname === data.from)
if (val) {
val.pathname = data.to
val.name = dst[dst.length - 1]
}
}
const regex = new RegExp(`^${data.from}`)
for (let key in folder.value) {
if (key.startsWith(data.from)) {
folder.value[key.replace(regex, data.to)] = folder.value[key].map(
(v) => {
v.pathname = v.pathname.replace(regex, data.to)
return v
},
)
delete folder.value[key]
}
}
for (let key in file.value) {
if (key.startsWith(data.from)) {
file.value[key.replace(regex, data.to)] = file.value[key].map((v) => {
v.pathname = v.pathname.replace(regex, data.to)
return v
})
delete file.value[key]
}
}
})
socket.on('DeleteFolder', (data: { pathname: string }) => {
for (let key in folder.value) {
if (key.startsWith(data.pathname)) {
delete folder.value[key]
}
}
const arr = data.pathname.split('/').filter(Boolean)
const path = consistantPath(arr.slice(0, -1))
if (folder.value[path]) {
folder.value[path] = folder.value[path].filter(
(v) => v.pathname !== data.pathname,
)
}
})
async function createFolder(name: string, path: string = currentInfo.path) {
loader.show()
await api.post(constructUrl(path, true), { name })
loader.hide()
}
async function editFolder(name: string, path: string) {
loader.show()
await api.put(constructUrl(path, false), { name })
loader.hide()
}
async function deleteFolder(path: string) {
loader.show()
await api.delete(constructUrl(path, false))
loader.hide()
}
type FileMetadata = {
title?: string
description?: string
keyword?: string[]
category?: string[]
}
async function createFile(
file: File,
data: FileMetadata,
path: string = currentInfo.path,
) {
if (path.split('/').filter(Boolean).length < 3) return // the system only allow file to live in level 3 and 4
loader.show()
const res = await api.post(constructUrl(path, false) + '/file', {
file: file.name,
...data,
})
if (res && res.status === 201 && res.data && res.data.upload) {
await axios
.put(res.data.upload, file, {
headers: { 'Content-Type': file.type },
onUploadProgress: (e) => console.log(e),
})
.catch((e) => console.error(e))
}
loader.hide()
}
async function updateFile(pathname: string, data: FileMetadata, file?: File) {
const arr = pathname.split('/')
if (arr.length < 4) return // the system only allow file to live in level 3 and 4
loader.show()
const res = await api.patch(
constructUrl(arr.slice(0, -1), false) + `/file/${arr[arr.length - 1]}`,
{ file: file?.name, ...data },
)
if (res && res.status === 201 && res.data && res.data.upload) {
await axios
.put(res.data.upload, file, {
headers: { 'Content-Type': file?.type },
onUploadProgress: (e) => console.log(e),
})
.catch((e) => console.error(e))
}
loader.hide()
}
async function deleteFile(pathname: string) {
const arr = pathname.split('/')
if (arr.length < 4) return // the system only allow file to live in level 3 and 4
loader.show()
await api.delete(
constructUrl(arr.slice(0, -1), false) + `/file/${arr[arr.length - 1]}`,
)
loader.hide()
}
return {
// information
currentInfo,
folder,
file,
tree,
// fetch
getStorage,
getStorageFile,
// traverse
goto,
gotoParent,
// operation
createFolder,
editFolder,
deleteFolder,
createFile,
updateFile,
deleteFile,
}
})
export default useStorage

138
Services/client/src/stores/tree-data.ts
View file

@ -45,8 +45,8 @@ export const useTreeDataStore = defineStore('changeCabinet', () => {
const currentFile = ref<EhrFile[]>([])
const currentPath = ref<string>('')
const currentDept = ref<number>(0)
const listDataFolder = ref<TreeDataFolder[]>()
const listDataFile = ref<EhrFile[]>()
const listDataFolder = ref<TreeDataFolder[]>([])
const listDataFile = ref<EhrFile[]>([])
async function getCabinet() {
const res = await axiosClient.get<EhrFolder[]>(`${apiEndpoint}cabinet`)
@ -242,7 +242,7 @@ export const useTreeDataStore = defineStore('changeCabinet', () => {
async function uploadFile(
pathname: string,
file: File,
metadata: {
newData: {
title: string
description: string
keyword: string[]
@ -266,7 +266,7 @@ export const useTreeDataStore = defineStore('changeCabinet', () => {
`${apiEndpoint}${requestPath}`,
{
file: file.name,
...metadata,
...newData,
},
)
@ -290,7 +290,7 @@ export const useTreeDataStore = defineStore('changeCabinet', () => {
async function updateFile(
pathname: string,
metadata: {
newData: {
title: string
description: string
keyword: string[]
@ -311,7 +311,7 @@ export const useTreeDataStore = defineStore('changeCabinet', () => {
const res = await axiosClient.patch<{ upload: string }>(
`${apiEndpoint}${requestPath}`,
{ file: file?.name, ...metadata },
{ file: file?.name, ...newData },
)
if (res && res.data.upload) {
@ -385,6 +385,127 @@ export const useTreeDataStore = defineStore('changeCabinet', () => {
listDataFile.value = currentFile.value
}
function updateEditFolder(
data: TreeDataFolder[],
targetPathname: string,
newPath: string,
): TreeDataFolder[] {
return data.map((item) => {
if (item.pathname === targetPathname) {
const pathArray: string[] = newPath.split('/').filter(Boolean)
item.pathname = newPath
item.name = pathArray[pathArray.length - 1]
}
if (item.folder) {
return {
...item,
folder: updateEditFolder(item.folder, targetPathname, newPath),
}
}
return item
})
}
function updateDeleteFolder(
data: TreeDataFolder[],
targetPathname: string,
): TreeDataFolder[] {
return data
.filter((item) => item.pathname !== targetPathname)
.map((item) => {
if (item.folder) {
item.folder = updateDeleteFolder(item.folder, targetPathname)
if (item.folder.length === 0) item.folder = []
}
return item
})
}
function updateCreateFolder(
data: TreeDataFolder[],
pathArrayLength: number,
pathfolder: string,
targetPathname: string,
newData: TreeDataFolder,
): TreeDataFolder[] {
let updatedData: TreeDataFolder[] = []
if (pathArrayLength === 1) {
updatedData.push(newData)
}
for (const item of data) {
if (item.pathname === pathfolder) {
updatedData.push({
...item,
folder: [...(item.folder || []), newData],
})
} else {
updatedData.push({
...item,
folder: item.folder
? updateCreateFolder(
item.folder,
pathArrayLength,
pathfolder,
targetPathname,
newData,
)
: [],
})
}
}
return updatedData
}
function updateDeleteFile(
data: EhrFile[],
targetPathname: string,
): EhrFile[] {
return data.filter((item) => item.pathname !== targetPathname)
}
function updateNewFile(
data: EhrFile[],
targetPathname: string,
newData: EhrFile,
): EhrFile[] {
let isUpdated = false
const updatedData = data.map((item) => {
if (item.pathname === targetPathname) {
isUpdated = true
return {
...item,
pathname: newData.pathname,
fileName: newData.fileName,
fileSize: newData.fileSize,
fileType: newData.fileType,
title: newData.title,
description: newData.description,
category: newData.category,
keyword: newData.keyword,
updatedAt: newData.updatedAt,
updatedBy: newData.updatedBy,
createdAt: newData.createdAt,
createdBy: newData.createdBy,
}
}
return item
})
if (!isUpdated) {
updatedData.push(newData)
}
return updatedData
}
return {
data,
currentFolder,
@ -405,5 +526,10 @@ export const useTreeDataStore = defineStore('changeCabinet', () => {
checkFile,
checkFileName,
refaceFile,
updateEditFolder,
updateDeleteFolder,
updateCreateFolder,
updateDeleteFile,
updateNewFile,
}
})

27
Services/client/src/views/MainLayout.vue
View file

@ -1,16 +1,17 @@
<script setup lang="ts">
import { useLoader } from '@/stores/loader'
import { storeToRefs } from 'pinia'
import { useLoader } from '@/stores/loader'
import { useSearchDataStore } from '@/stores/searched-data'
import { useFileInfoStore } from '@/stores/file-info-data'
import useStorage from '@/stores/storage'
import profile from '@/components/Profile.vue'
import { useTreeDataStore } from '@/stores/tree-data'
import { useSearchDataStore } from '@/stores/searched-data';
import { useFileInfoStore } from '@/stores/file-info-data';
const { currentPath } = storeToRefs(useTreeDataStore())
const { isFilePreview } = storeToRefs(useFileInfoStore())
const { isSearch } = storeToRefs(useSearchDataStore())
const { getFolder } = useTreeDataStore()
const loaderStore = useLoader()
const { loader } = storeToRefs(loaderStore)
const { loader } = storeToRefs(useLoader())
const { goto } = useStorage()
</script>
<template>
@ -22,20 +23,14 @@ const { loader } = storeToRefs(loaderStore)
src="@/assets/logo-edm.png"
spinner-color="white"
style="height: 45px; max-width: 45px"
@click="
() => {
currentPath = ''
getFolder(currentPath)
}
"
@click="() => goto()"
/>
<div
class="column q-px-md pointer"
id="app-toolbar-title"
@click="
() => {
currentPath = ''
getFolder(currentPath)
goto()
isSearch = false
isFilePreview = false
}

16
Services/server/src/controllers/cabinetController.ts
View file

@ -78,17 +78,23 @@ export class CabinetController extends Controller {
name: string;
},
) {
const meta = {
createdAt: new Date().toISOString(),
createdBy: request.user.preferred_username,
};
const created = await minioClient
.putObject(DEFAULT_BUCKET!, `${replaceIllegalChars(body.name)}/.keep`, "", 0, {
createdAt: new Date().toISOString(),
createdBy: request.user.preferred_username,
})
.putObject(DEFAULT_BUCKET!, `${replaceIllegalChars(body.name)}/.keep`, "", 0, meta)
.catch((e) => console.error(e));
if (!created) throw new Error("เกิดข้อผิดพลาดกับระบบจัดการไฟล์");
const io = getInstance();
io?.emit("CreateFolder", { pathname: `${replaceIllegalChars(body.name)}/` });
io?.emit("CreateFolder", {
pathname: `${replaceIllegalChars(body.name)}/`,
name: replaceIllegalChars(body.name),
...meta,
});
return this.setStatus(HttpStatusCode.CREATED);
}

16
Services/server/src/controllers/drawerController.ts
View file

@ -93,17 +93,23 @@ export class DrawerController extends Controller {
throw new HttpError(HttpStatusCode.NOT_FOUND, "ไม่พบตำแหน่งที่ต้องการสร้างลิ้นชัก");
}
const meta = {
createdAt: new Date().toISOString(),
createdBy: request.user.preferred_username,
};
const created = await minioClient
.putObject(DEFAULT_BUCKET!, `${basePath}${replaceIllegalChars(body.name)}/.keep`, "", 0, {
createdAt: new Date().toISOString(),
createdBy: request.user.preferred_username,
})
.putObject(DEFAULT_BUCKET!, `${basePath}${replaceIllegalChars(body.name)}/.keep`, "", 0, meta)
.catch((e) => console.error(e));
if (!created) throw new Error("เกิดข้อผิดพลาดกับระบบจัดการไฟล์");
const io = getInstance();
io?.emit("CreateFolder", { pathname: `${basePath}${replaceIllegalChars(body.name)}/` });
io?.emit("CreateFolder", {
pathname: `${basePath}${replaceIllegalChars(body.name)}/`,
name: replaceIllegalChars(body.name),
...meta,
});
return this.setStatus(HttpStatusCode.CREATED);
}

43
Services/server/src/controllers/fileController.ts
View file

@ -23,6 +23,7 @@ import { StorageFile } from "../interfaces/storage-fs";
import HttpError from "../interfaces/http-error";
import { copyCond, pathExist, replaceIllegalChars } from "../utils/minio";
import { getInstance } from "../lib/websocket";
const DEFAULT_BUCKET = process.env.MINIO_BUCKET;
const DEFAULT_INDEX = process.env.ELASTICSEARCH_INDEX;
@ -200,6 +201,9 @@ export class FileController extends Controller {
refresh: "wait_for",
});
const io = getInstance();
io?.emit("FileUploadRequest", metadata);
return {
...body,
createdAt: metadata.createdAt,
@ -288,6 +292,10 @@ export class FileController extends Controller {
if (search && search.hits.hits.length > 0 && search.hits.hits[0]._source) {
const { _index: index, _id: id } = search.hits.hits[0];
const meta = {
updatedAt: new Date().toISOString(),
updatedBy: request.user.preferred_username ?? "n/a",
};
await esClient
.update({
index,
@ -297,12 +305,24 @@ export class FileController extends Controller {
pathname: destination,
path: basePath,
fileName: replaceIllegalChars(file),
updatedAt: new Date().toISOString(),
updatedBy: request.user.preferred_username ?? "n/a",
...meta,
},
refresh: "wait_for",
})
.then(() => minioClient.removeObject(DEFAULT_BUCKET!, pathname));
const io = getInstance();
io?.emit("FileUpdateMove", {
from: search.hits.hits[0]._source,
to: {
...search.hits.hits[0]._source,
...metadata,
pathname: destination,
path: basePath,
fileName: replaceIllegalChars(file),
...meta,
},
});
} else {
await minioClient.removeObject(DEFAULT_BUCKET!, pathname);
}
@ -317,16 +337,25 @@ export class FileController extends Controller {
if (search && search.hits.hits.length > 0 && search.hits.hits[0]._source) {
const { _index: index, _id: id } = search.hits.hits[0];
const meta = {
updatedAt: new Date().toISOString(),
updatedBy: request.user.preferred_username ?? "n/a",
};
await esClient.update({
index,
id,
doc: {
...metadata,
updatedAt: new Date().toISOString(),
updatedBy: request.user.preferred_username ?? "n/a",
},
doc: { ...metadata, ...meta },
refresh: "wait_for",
});
const updated: StorageFile = {
...search.hits.hits[0]._source,
...metadata,
...meta,
};
const io = getInstance();
io?.emit("FileUpdate", updated);
}
}

18
Services/server/src/controllers/folderController.ts
View file

@ -98,17 +98,23 @@ export class FolderController extends Controller {
throw new HttpError(HttpStatusCode.NOT_FOUND, "ไม่พบตำแหน่งที่ต้องการสร้างลิ้นชัก");
}
const meta = {
createdAt: new Date().toISOString(),
createdBy: request.user.preferred_username,
};
const created = await minioClient
.putObject(DEFAULT_BUCKET!, `${basePath}${replaceIllegalChars(body.name)}/.keep`, "", 0, {
createdAt: new Date().toISOString(),
createdBy: request.user.preferred_username,
})
.putObject(DEFAULT_BUCKET!, `${basePath}${replaceIllegalChars(body.name)}/.keep`, "", 0, meta)
.catch((e) => console.error(e));
if (!created) throw new Error("เกิดข้อผิดพลาดกับระบบจัดการไฟล์");
const io = getInstance();
io?.emit("CreateFolder", { pathname: `${basePath}${replaceIllegalChars(body.name)}/` });
io?.emit("CreateFolder", {
pathname: `${basePath}${replaceIllegalChars(body.name)}/`,
name: replaceIllegalChars(body.name),
...meta,
});
return this.setStatus(HttpStatusCode.CREATED);
}
@ -185,7 +191,7 @@ export class FolderController extends Controller {
const io = getInstance();
io?.emit("EditFolder", {
from: `${cabinetName}/${drawerName}/${folderName}`,
from: `${cabinetName}/${drawerName}/${folderName}/`,
to: `${cabinetName}/${drawerName}/${replaceIllegalChars(body.name)}/`,
});

15
Services/server/src/controllers/subFolderController.ts
View file

@ -96,18 +96,23 @@ export class SubFolderController extends Controller {
if (!(await pathExist(DEFAULT_BUCKET!, basePath))) {
throw new HttpError(HttpStatusCode.NOT_FOUND, "ไม่พบตำแหน่งที่ต้องการสร้างลิ้นชัก");
}
const meta = {
createdAt: new Date().toISOString(),
createdBy: request.user.preferred_username,
};
const created = await minioClient
.putObject(DEFAULT_BUCKET!, `${basePath}${replaceIllegalChars(body.name)}/.keep`, "", 0, {
createdAt: new Date().toISOString(),
createdBy: request.user.preferred_username,
})
.putObject(DEFAULT_BUCKET!, `${basePath}${replaceIllegalChars(body.name)}/.keep`, "", 0, meta)
.catch((e) => console.error(e));
if (!created) throw new Error("เกิดข้อผิดพลาดกับระบบจัดการไฟล์");
const io = getInstance();
io?.emit("CreateFolder", { pathname: `${basePath}${replaceIllegalChars(body.name)}/` });
io?.emit("CreateFolder", {
pathname: `${basePath}${replaceIllegalChars(body.name)}/`,
name: replaceIllegalChars(body.name),
...meta,
});
return this.setStatus(HttpStatusCode.CREATED);
}

37
Services/server/src/controllers/subFolderFileController.ts
View file

@ -23,6 +23,7 @@ import { StorageFile } from "../interfaces/storage-fs";
import HttpError from "../interfaces/http-error";
import { copyCond, pathExist, replaceIllegalChars } from "../utils/minio";
import { getInstance } from "../lib/websocket";
const DEFAULT_BUCKET = process.env.MINIO_BUCKET;
const DEFAULT_INDEX = process.env.ELASTICSEARCH_INDEX;
@ -206,6 +207,9 @@ export class SubFolderFileController extends Controller {
refresh: "wait_for",
});
const io = getInstance();
io?.emit("FileUploadRequest", metadata);
return {
...body,
createdAt: metadata.createdAt,
@ -292,7 +296,10 @@ export class SubFolderFileController extends Controller {
query: { match: { pathname } },
})
.catch((e) => console.error(e));
const meta = {
updatedAt: new Date().toISOString(),
updatedBy: request.user.preferred_username ?? "n/a",
};
if (search && search.hits.hits.length > 0 && search.hits.hits[0]._source) {
const { _index: index, _id: id } = search.hits.hits[0];
await esClient
@ -304,12 +311,24 @@ export class SubFolderFileController extends Controller {
pathname: destination,
path: basePath,
fileName: replaceIllegalChars(file),
updatedAt: new Date().toISOString(),
updatedBy: request.user.preferred_username ?? "n/a",
...meta,
},
refresh: "wait_for",
})
.then(() => minioClient.removeObject(DEFAULT_BUCKET!, pathname));
const io = getInstance();
io?.emit("FileUpdateMove", {
from: search.hits.hits[0]._source,
to: {
...search.hits.hits[0]._source,
...metadata,
pathname: destination,
path: basePath,
fileName: replaceIllegalChars(file),
...meta,
},
});
} else {
await minioClient.removeObject(DEFAULT_BUCKET!, pathname);
}
@ -324,6 +343,10 @@ export class SubFolderFileController extends Controller {
if (search && search.hits.hits.length > 0 && search.hits.hits[0]._source) {
const { _index: index, _id: id } = search.hits.hits[0];
const meta = {
updatedAt: new Date().toISOString(),
updatedBy: request.user.preferred_username ?? "n/a",
};
await esClient.update({
index,
id,
@ -334,6 +357,14 @@ export class SubFolderFileController extends Controller {
},
refresh: "wait_for",
});
const updated: StorageFile = {
...search.hits.hits[0]._source,
...metadata,
...meta,
};
const io = getInstance();
io?.emit("FileUpdate", updated);
}
}

4
Services/server/src/rabbitmq/handler.ts
View file

@ -144,7 +144,7 @@ async function handleNotFoundRecord(
if (!result) return false;
const io = getInstance();
io?.emit("FileUpdate", metadata);
io?.emit("FileUpload", metadata);
return true;
}
@ -170,7 +170,7 @@ async function handleFoundRecord(
if (!result) return false;
const io = getInstance();
io?.emit("FileUpdate", metadata);
io?.emit("FileUpload", metadata);
return true;
}