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

Merge branch 'dev/front-methapon' into dev/front

Browse source
This commit is contained in:
Methapon2001 2023-11-29 15:28:36 +07:00
commit 171ddc4295
No known key found for this signature in database
GPG key ID: 849924FEF46BD132
14 changed files with 1590 additions and 1099 deletions
Download patch file Download diff file Expand all files Collapse all files

68
Services/client/package.json
View file

@ -17,48 +17,42 @@
"docs:typedoc": "typedoc && scp -r fe-typedoc projects-doc:~/projects/project-docs/edm/ && rm -r fe-typedoc"
},
"dependencies": {
"@fullcalendar/core": "^6.1.8",
"@fullcalendar/daygrid": "^6.1.8",
"@fullcalendar/interaction": "^6.1.8",
"@fullcalendar/list": "^6.1.8",
"@fullcalendar/timegrid": "^6.1.8",
"@fullcalendar/vue3": "^6.1.8",
"@mayank1513/vue-tag-input": "^1.2.0",
"@quasar/extras": "^1.15.8",
"@vuepic/vue-datepicker": "^5.2.1",
"@quasar/extras": "^1.16.8",
"@tsconfig/node18": "^18.2.2",
"axios": "^1.6.2",
"keycloak-js": "^22.0.5",
"pinia": "^2.1.4",
"quasar": "^2.11.1",
"vite-plugin-pwa": "^0.16.7",
"vue": "^3.2.45",
"vue-router": "^4.1.6"
"keycloak-js": "^23.0.0",
"pinia": "^2.1.7",
"quasar": "^2.14.0",
"vite-plugin-pwa": "^0.17.2",
"vue": "^3.3.9",
"vue-router": "^4.2.5"
},
"devDependencies": {
"@mayank1513/vue-tag-input": "^1.2.0",
"@quasar/vite-plugin": "^1.6.0",
"@rushstack/eslint-patch": "^1.1.4",
"@types/jsdom": "^20.0.1",
"@types/node": "^18.11.12",
"@vitejs/plugin-vue": "^4.0.0",
"@vitejs/plugin-vue-jsx": "^3.0.0",
"@vue/eslint-config-prettier": "^7.0.0",
"@vue/eslint-config-typescript": "^11.0.0",
"@vue/test-utils": "^2.2.6",
"@vue/tsconfig": "^0.1.3",
"cypress": "^12.0.2",
"eslint": "^8.22.0",
"eslint-plugin-cypress": "^2.12.1",
"eslint-plugin-vue": "^9.3.0",
"jsdom": "^20.0.3",
"@rushstack/eslint-patch": "^1.6.0",
"@types/jsdom": "^21.1.6",
"@types/node": "^20.10.0",
"@vitejs/plugin-vue": "^4.5.0",
"@vitejs/plugin-vue-jsx": "^3.1.0",
"@vue/eslint-config-prettier": "^8.0.0",
"@vue/eslint-config-typescript": "^12.0.0",
"@vue/test-utils": "^2.4.2",
"@vue/tsconfig": "^0.4.0",
"cypress": "^13.6.0",
"eslint": "^8.54.0",
"eslint-plugin-cypress": "^2.15.1",
"eslint-plugin-vue": "^9.18.1",
"jsdom": "^23.0.0",
"npm-run-all": "^4.1.5",
"prettier": "^2.7.1",
"sass": "^1.32.12",
"start-server-and-test": "^1.15.2",
"typedoc": "^0.25.3",
"prettier": "^3.1.0",
"sass": "^1.69.5",
"start-server-and-test": "^2.0.3",
"typedoc": "^0.25.4",
"typedoc-plugin-vue": "^1.1.0",
"typescript": "~4.7.4",
"vite": "^4.0.0",
"vitest": "^0.25.6",
"vue-tsc": "^1.0.12"
"typescript": "~5.3.2",
"vite": "^5.0.2",
"vitest": "^0.34.6",
"vue-tsc": "^1.8.22"
}
}

1986
Services/client/pnpm-lock.yaml generated
View file

File diff suppressed because it is too large Load diff

11
Services/client/src/components/FileForm.vue
View file

@ -4,6 +4,7 @@ import { onMounted, onUnmounted, ref } from 'vue'
const props = withDefaults(
defineProps<{
open: boolean
error: { fileExist?: boolean }
mode: 'create' | 'edit'
title?: string
description?: string
@ -12,7 +13,7 @@ const props = withDefaults(
}>(),
{
open: false,
}
},
)
const emit = defineEmits([
@ -21,6 +22,7 @@ const emit = defineEmits([
'update:description',
'update:keyword',
'update:category',
'filechange',
'submit',
])
@ -96,7 +98,12 @@ const file = ref<File | undefined>()
dense
outlined
v-model="file"
@update:model-value="(v) => $emit('filechange', v.name)"
:label="file?.name ? undefined : 'เลือกไฟล์'"
:error="!!error.fileExist"
:error-message="
error.fileExist ? 'พบไฟล์ในระบบ ข้อมูลในระบบจะถูกเขียนทับ' : ''
"
>
<template v-slot:prepend>
<q-icon name="attach_file" />
@ -168,7 +175,7 @@ const file = ref<File | undefined>()
</template>
<style scoped>
.no-resize >>> textarea {
.no-resize :deep(textarea) {
resize: none;
}
</style>

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

@ -6,6 +6,7 @@ import FileIcon from '@/components/FileIcon.vue'
import FileItemAction from '@/components/FileItemAction.vue'
import FileForm from './FileForm.vue'
import FolderForm from './FolderForm.vue'
import UploadExistDialog from './UploadExistDialog.vue'
import { useTreeDataStore } from '@/stores/tree-data'
import { useFileInfoStore } from '@/stores/file-info-data'
@ -13,13 +14,12 @@ const props = withDefaults(
defineProps<{ action: boolean; viewMode: 'view_list' | 'view_module' }>(),
{
action: false,
}
},
)
const DEPT_NAME = ['ตู้เอกสาร', 'ลิ้นชัก', 'แฟ้ม', 'แฟ้มย่อย'] as const
const { getFileInfo, getFileNameFormat } = useFileInfoStore()
const { currentFolder, currentFile, currentDept, currentPath } = storeToRefs(
useTreeDataStore()
)
const { currentFolder, currentFile, currentDept, currentPath } =
storeToRefs(useTreeDataStore())
const {
createFolder,
editFolder,
@ -28,14 +28,15 @@ const {
uploadFile,
updateFile,
deleteFile,
checkFile,
} = useTreeDataStore()
const currentIcon = computed(() =>
currentDept.value === 0
? 'mdi-file-cabinet'
: currentDept.value === 1
? 'inbox'
: 'o_folder_open'
? 'inbox'
: 'o_folder_open',
)
const folderFormState = ref<boolean>(false)
@ -54,6 +55,8 @@ const fileFormData = ref<{
category?: string
}>({})
const fileFormType = ref<'edit' | 'create'>('create')
const fileFormError = ref<{ fileExist?: boolean }>({})
const fileExistNotification = ref<boolean>(false)
function triggerFolderCreate() {
folderFormType.value = 'create'
@ -92,7 +95,7 @@ function triggerFileEdit(
keyword: string
category: string
},
pathname: string
pathname: string,
) {
fileFormState.value = true
fileFormType.value = 'edit'
@ -105,14 +108,26 @@ function triggerFileEdit(
}
}
async function submitFileForm(value: {
mode: 'create' | 'edit'
file: File
title: string
description: string
keyword: string
category: string
}) {
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 (checkFile(value.file.name) && !force) {
fileExistNotification.value = true
return
}
if (value.mode === 'create') {
await uploadFile(currentPath.value, value.file, {
title: value.title,
@ -129,207 +144,214 @@ async function submitFileForm(value: {
keyword: value.keyword,
category: value.category,
},
value.file
value.file,
)
}
fileFormData.value = {}
fileFormState.value = false
currentParam.value = undefined
}
</script>
<template>
<div class="q-my-md">
<span class="text-h6 text-weight-light" v-if="currentDept === 3">
แฟ้มย่อย
</span>
<div class="q-gutter-md" v-if="currentDept < 3">
<div class="text-h6 q-mt-md" v-if="currentDept > 2">
{{ DEPT_NAME[currentDept] }}
</div>
<div class="grid q-mt-md">
<div v-for="value in currentFolder">
<div
:key="value.name"
v-for="value in currentFolder"
class="inline-block"
:style="{
position: 'relative',
display: 'flex',
gap: '0.5rem',
flexDirection: currentDept > 2 ? 'row' : 'column',
alignItems: 'center',
padding: currentDept > 2 ? '.5rem 0' : '.5rem',
}"
class="box"
@click="() => getFolder(value.pathname)"
>
<div class="box border-radius-inherit">
<q-card flat @click="() => getFolder(value.pathname)">
<q-card-section
class="column justify-center relative q-px-xl"
style="max-width: 225px"
:title="value.name"
>
<q-icon
:name="currentIcon"
size="6em"
color="primary"
class="column justify-center relative q-px-lg"
/>
<div
class="absolute"
style="top: 0.5rem; right: 0.5rem"
v-if="props.action"
>
<file-item-action
@delete="() => deleteFolder(value.pathname)"
@edit="() => triggerFolderEdit(value.name, value.pathname)"
/>
</div>
<span
class="text-center q-pt-md text-overflow-handle"
style="max-width: 132px"
>
{{ value.name }}
</span>
</q-card-section>
</q-card>
<div class="q-px-md flex items-center justify-center">
<q-icon
:name="currentIcon"
:size="currentDept > 2 ? '3em' : '6em'"
color="primary"
class="col"
/>
</div>
</div>
<div
class="inline-block"
v-if="props.action && currentDept < 4"
tabindex="0"
>
<div class="dashed border-radius-inherit">
<q-card flat @click="() => triggerFolderCreate()">
<q-card-section class="column justify-center relative q-px-xl">
<q-icon
:name="currentIcon"
class="column justify-center relative q-px-lg"
size="6em"
color="primary"
/>
<q-btn round class="add-button" color="white" size="10px">
<q-icon name="add" color="primary" size="1.5rem"></q-icon>
</q-btn>
<span class="text-center q-pt-md"
>สร้าง{{ DEPT_NAME[currentDept] }}ใหม่</span
>
</q-card-section>
</q-card>
<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"
>
<file-item-action
@delete="() => deleteFolder(value.pathname)"
@edit="() => 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%"
>
{{ value.name }}
</div>
</div>
</div>
<div class="q-gutter-md q-mt-sm" v-if="currentDept === 3">
<div v-if="props.action && currentDept < 4">
<div
:key="value.name"
v-for="value in currentFolder"
class="inline-block"
class="dashed"
:style="{
position: 'relative',
display: 'flex',
gap: '0.5rem',
flexDirection: currentDept > 2 ? 'row' : 'column',
alignItems: 'center',
padding: currentDept > 2 ? '.5rem 0' : '.5rem',
}"
@click="() => triggerFolderCreate()"
>
<div class="box border-radius-inherit q-px-sm q-py-sm">
<q-card flat @click="() => getFolder(value.pathname)">
<q-td>
<q-icon
:name="currentIcon"
size="3em"
color="primary"
class="col"
/>
<span class="q-mx-md">{{ value.name }}</span>
<file-item-action
@delete="() => deleteFolder(value.pathname)"
@edit="() => triggerFolderEdit(value.name, value.pathname)"
/>
</q-td>
</q-card>
<div
class="q-px-md flex items-center justify-center"
style="position: relative"
>
<q-icon
:name="currentIcon"
:size="currentDept > 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' : '1.75rem' }"
>
<q-icon name="add" color="primary" size="1.5rem" />
</q-btn>
</div>
</div>
<div
class="inline-block"
v-if="props.action && currentDept < 4"
tabindex="0"
>
<div class="dashed border-radius-inherit q-px-lg q-py-sm">
<q-card flat @click="() => triggerFolderCreate()">
<q-td>
<q-icon
:name="currentIcon"
size="3em"
color="primary"
class="col"
/>
<q-btn
round
class="add-button-folder-level"
color="white"
size="6px"
>
<q-icon name="add" color="primary" size="1.2rem"></q-icon>
</q-btn>
<span class="q-mx-md">สร้าง{{ DEPT_NAME[currentDept] }}ใหม่</span>
</q-td>
</q-card>
<div
class="text-overflow-handle block text-center"
:class="{
'q-px-md': currentDept < 3,
'q-pr-xl': currentDept > 2,
}"
style="max-width: 100%"
>
สร้าง{{ DEPT_NAME[currentDept] }}ใหม่
</div>
</div>
</div>
</div>
<span class="text-h6 text-weight-light" v-if="currentDept > 2">เอกสาร</span>
<div class="q-gutter-md q-mt-xs">
<div
v-for="(value, index) in currentFile"
:key="value.title"
class="inline-block"
>
<div class="box border-radius-inherit">
<q-card flat @click="() => getFileInfo(currentFile[index])">
<q-card-section class="column justify-center relative q-px-xl">
<file-icon
size="preview"
:fileMimeType="value.fileType ? value.fileType : 'unknow'"
ref="fileIconComp"
/>
<div
class="absolute"
style="top: 0.5rem; right: 0.5rem"
v-if="props.action"
>
<file-item-action
@edit="
() =>
triggerFileEdit(
{
title: value.title,
description: value.description,
keyword: value.keyword.join(','),
category: value.category.join(','),
},
value.pathname
)
"
@delete="() => deleteFile(value.pathname)"
/>
</div>
<span class="text-center q-pt-md">{{
getFileNameFormat(value.fileName)
}}</span>
</q-card-section>
</q-card>
<div
style="grid-column: 1 / span 5"
class="text-h6 q-mt-md"
v-if="currentDept > 2"
>
เอกสาร
</div>
<div class="grid q-mt-md">
<div v-for="value in currentFile">
<div
:style="{
position: 'relative',
display: 'flex',
gap: '0.5rem',
flexDirection: 'column',
alignItems: 'center',
padding: '1rem',
maxWidth: '100%',
}"
class="box"
@click="() => getFileInfo(value)"
>
<div class="q-px-md flex items-center justify-center">
<file-icon
size="preview"
:fileMimeType="value.fileType ? value.fileType : 'unknow'"
/>
</div>
<div
class="absolute"
style="top: 0.5rem; right: 0.5rem"
v-if="props.action"
>
<file-item-action
@edit="
() =>
triggerFileEdit(
{
title: value.title,
description: value.description,
keyword: value.keyword.join(','),
category: value.category.join(','),
},
value.pathname,
)
"
@delete="() => deleteFile(value.pathname)"
/>
</div>
<div
class="text-overflow-handle block q-px-md text-center"
style="max-width: 100%"
>
{{ getFileNameFormat(value.fileName) }}
</div>
</div>
</div>
<div class="inline-block" v-if="props.action && currentDept > 2">
<div class="dashed border-radius-inherit">
<q-card flat @click="() => triggerFileCreate()">
<q-card-section class="column justify-center relative q-px-xl">
<q-icon
name="mdi-file"
class="add-icon"
size="6em"
color="primary"
/>
<q-btn round class="add-button" color="white" size="10px">
<q-icon name="add" color="primary" size="1.5rem"></q-icon>
</q-btn>
<span class="text-center q-pt-md">สร้างไฟล์ใหม่</span>
</q-card-section>
</q-card>
<div v-if="props.action && currentDept > 2">
<div
:style="{
display: 'flex',
gap: '0.5rem',
flexDirection: 'column',
alignItems: 'center',
padding: '1rem',
maxWidth: '100%',
}"
class="dashed"
@click="() => triggerFileCreate()"
>
<div
class="q-px-md flex items-center justify-center"
style="position: relative"
>
<q-icon name="mdi-file" class="add-icon" size="6em" color="primary" />
<q-btn
round
color="white"
size="10px"
style="position: absolute; right: 1.75rem; bottom: 0"
>
<q-icon name="add" color="primary" size="1.5rem" />
</q-btn>
</div>
<div
class="text-overflow-handle block q-px-md text-center"
style="max-width: 100%"
>
สร้างไฟล์ใหม่
</div>
</div>
</div>
</div>
<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"
/>
@ -341,11 +363,16 @@ async function submitFileForm(value: {
v-model:name="folderFormData.name"
@submit="submitFolderForm"
/>
<upload-exist-dialog
v-model:notification="fileExistNotification"
@confirm="() => currentParam && submitFileForm(currentParam, true)"
@cancel="() => (currentParam = undefined)"
/>
</template>
<style lang="scss" scoped>
.box {
display: inline-block;
border: 2px solid $separator-color;
border-radius: 8px;
cursor: pointer;
@ -366,8 +393,8 @@ async function submitFileForm(value: {
.add-button {
position: absolute;
top: 75px;
right: 70px;
top: 50%;
right: 40%;
background-color: white;
}
@ -383,4 +410,21 @@ async function submitFileForm(value: {
white-space: nowrap;
text-overflow: ellipsis;
}
.grid {
display: grid;
width: 100%;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
@media (min-width: $breakpoint-md-min) {
.grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.grid .box {
position: relative;
}
</style>

4
Services/client/src/components/FileItemAction.vue
View file

@ -7,7 +7,7 @@ defineEmits(['edit', 'delete'])
<q-menu auto-close>
<q-list dense>
<q-item clickable>
<q-item-section @click="() => $emit('edit')">
<q-item-section @click.prevent.stop="() => $emit('edit')">
<div class="row items-center">
<q-icon name="edit" color="positive" />
<span class="q-ml-sm">แก้ไข</span>
@ -15,7 +15,7 @@ defineEmits(['edit', 'delete'])
</q-item-section>
</q-item>
<q-item clickable>
<q-item-section @click="() => $emit('delete')">
<q-item-section @click.prevent.stop="() => $emit('delete')">
<div class="row items-center">
<q-icon name="delete" color="negative" />
<span class="q-ml-sm">ลบ</span>

4
Services/client/src/components/FormUpload.vue
View file

@ -3,6 +3,7 @@ import { ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useTreeDataStore } from '@/stores/tree-data'
import TagInput from '@/components/TagInput.vue'
const { currentPath } = storeToRefs(useTreeDataStore())
const { uploadFile, checkFile } = useTreeDataStore()
@ -39,7 +40,7 @@ function saveTag() {
async function handleSubmit(continueUpload: boolean = false) {
if (!inputFile.value) return
// getFile(p)
if (checkFile(inputFile.value.name) || continueUpload) {
await uploadFile(currentPath.value, inputFile.value, {
title: fileTitle.value,
@ -118,7 +119,6 @@ async function handleSubmit(continueUpload: boolean = false) {
<q-dialog
v-model="notification"
persistent
transition-show="scale"
transition-hide="scale"
>

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

@ -9,9 +9,8 @@ import FileForm from './FileForm.vue'
import FolderForm from './FolderForm.vue'
const { getFormatDate, getSize, getType, getFileInfo } = useFileInfoStore()
const { listDataFile, listDataFolder, currentDept, currentPath } = storeToRefs(
useTreeDataStore()
)
const { listDataFile, listDataFolder, currentDept, currentPath } =
storeToRefs(useTreeDataStore())
const {
createFolder,
editFolder,
@ -20,6 +19,7 @@ const {
uploadFile,
updateFile,
deleteFile,
checkFile,
} = useTreeDataStore()
const DEPT_NAME = ['ตู้เอกสาร', 'ลิ้นชัก', 'แฟ้ม', 'แฟ้มย่อย'] as const
@ -32,18 +32,18 @@ const currentLevel = computed(() =>
currentDept.value === 0
? 'ตู้จัดเก็บเอกสาร'
: currentDept.value === 1
? 'ลิ้นชัก'
: currentDept.value === 2
? 'แฟ้ม'
: 'แฟ้มย่อย'
? 'ลิ้นชัก'
: currentDept.value === 2
? 'แฟ้ม'
: 'แฟ้มย่อย',
)
const currentIcon = computed(() =>
currentDept.value === 0
? 'mdi-file-cabinet'
: currentDept.value === 1
? 'inbox'
: 'o_folder_open'
? 'inbox'
: 'o_folder_open',
)
const folderFormState = ref<boolean>(false)
@ -52,6 +52,7 @@ const folderFormData = ref<{
name?: string
}>({})
const folderFormType = ref<'edit' | 'create'>('create')
const fileFormError = ref<{ fileExist?: boolean }>({})
const fileFormState = ref<boolean>(false)
const fileFormPath = ref<string>('')
const fileFormData = ref<{
@ -100,7 +101,7 @@ function triggerFileEdit(
keyword: string
category: string
},
pathname: string
pathname: string,
) {
fileFormState.value = true
fileFormType.value = 'edit'
@ -137,7 +138,7 @@ async function submitFileForm(value: {
keyword: value.keyword,
category: value.category,
},
value.file
value.file,
)
}
fileFormData.value = {}
@ -294,7 +295,7 @@ const onRowClick = (evt: Event, row: TreeDataFolder, index: number) => {
@click.stop="
triggerFolderEdit(
actionsRow.row.name,
actionsRow.row.pathname
actionsRow.row.pathname,
)
"
/>
@ -348,7 +349,9 @@ const onRowClick = (evt: Event, row: TreeDataFolder, index: number) => {
style="width: 50%"
@click="
() => {
currentDept >= 3 ? getFileInfo(nameRow.row) : getFolder(nameRow.row.pathname);
currentDept >= 3
? getFileInfo(nameRow.row)
: getFolder(nameRow.row.pathname)
}
"
>
@ -403,11 +406,13 @@ const onRowClick = (evt: Event, row: TreeDataFolder, index: number) => {
<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"
/>

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

@ -16,8 +16,8 @@ const DEPT_NAME = ['ตู้เอกสาร', 'ลิ้นชัก', 'แ
const { isFilePreview } = storeToRefs(useFileInfoStore())
const { isSearch } = storeToRefs(useSearchDataStore())
const { data, currentDept } = storeToRefs(useTreeDataStore())
const { createFolder, getCabinet, gotoParent } = useTreeDataStore()
const { data, currentDept, currentPath } = storeToRefs(useTreeDataStore())
const { createFolder, getCabinet, gotoParent, getFolder } = useTreeDataStore()
const viewMode = ref<'view_list' | 'view_module'>('view_list')
const inputSearch = ref<string>()
@ -97,19 +97,29 @@ onMounted(getCabinet)
<search-bar v-if="mode === 'user'" />
<div class="bg-white q-pa-md">
<div class="row items-center justify-between">
<span class="text-h6">
<q-btn
flat
dense
class="q-mr-sm q-px-sm"
v-if="currentDept > 0 && isSearch === false"
@click="() => gotoParent()"
>
<q-icon name="arrow_back" size="1rem" color="primary"
/></q-btn>
<span v-if="isSearch === false">{{
DEPT_NAME[currentDept]
}}</span>
<span class="text-body1">
<div class="row items-center">
<q-btn
flat
dense
class="q-mr-sm q-px-sm"
v-if="currentDept > 0 && isSearch === false"
@click="() => gotoParent()"
>
<q-icon name="arrow_back" size="1rem" color="primary" />
</q-btn>
<q-breadcrumbs v-if="isSearch === false" active-color="primary">
<q-breadcrumbs-el
v-if="currentPath === '/' || !currentPath"
label="ตู้เอกสารทั้งหมด"
/>
<q-breadcrumbs-el
class="text-black"
v-for="fragments in currentPath.split('/').filter(Boolean)"
:label="fragments"
/>
</q-breadcrumbs>
</div>
<span v-if="isSearch === true">ผลการค้นหา</span>
<q-btn
v-if="
@ -123,20 +133,31 @@ onMounted(getCabinet)
color="primary"
dense
icon="add"
@click="()=> triggerFolderCreate()"
@click="() => triggerFolderCreate()"
/>
</span>
<q-btn
flat
color="blue-grey-2"
:icon="viewMode"
@click="
() => {
viewMode =
viewMode === 'view_list' ? 'view_module' : 'view_list'
}
"
/>
<div>
<q-btn
flat
dense
color="blue-grey-2"
icon="refresh"
class="q-mr-sm"
@click="() => getFolder(currentPath)"
/>
<q-btn
flat
dense
color="blue-grey-2"
:icon="viewMode"
@click="
() => {
viewMode =
viewMode === 'view_list' ? 'view_module' : 'view_list'
}
"
/>
</div>
</div>
<div>
<file-searched v-if="isSearch === true" />

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

@ -15,10 +15,8 @@ const props = withDefaults(
}>(),
{
level: 0,
}
},
)
const MAX_NAME_LENGTH = 20
</script>
<template>
@ -39,14 +37,10 @@ const MAX_NAME_LENGTH = 20
level === 1
? 'mdi-file-cabinet'
: level === 2
? 'inbox'
: 'o_folder_open'
"
:label="
folder.name.length > MAX_NAME_LENGTH
? folder.name.slice(0, MAX_NAME_LENGTH) + '...'
: folder.name
? 'inbox'
: 'o_folder_open'
"
:label="folder.name"
class="text-overflow-handle"
v-model="folder.status"
>
@ -60,16 +54,13 @@ const MAX_NAME_LENGTH = 20
</div>
</template>
<style lang="scss">
.q-item[aria-expanded='true'] {
<style lang="scss" scoped>
:deep(.q-item[aria-expanded='true']) {
color: $primary;
}
.q-item[aria-expanded='true'] .q-icon {
color: $primary;
}
.text-overflow-handle {
.text-overflow-handle,
:deep(.q-item__label) {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

49
Services/client/src/components/UploadExistDialog.vue Normal file
View file

@ -0,0 +1,49 @@
<script lang="ts" setup>
defineProps<{
notification: boolean
}>()
defineEmits(['update:notification', 'confirm', 'cancel'])
</script>
<template>
<q-dialog
:model-value="notification"
@update:model-value="(v) => $emit('update:notification', v)"
transition-show="scale"
transition-hide="scale"
>
<q-card style="width: 400px">
<q-card-section>
<div class="text-h6">
<q-icon
name="error"
color="warning"
size="2.5rem"
/>เตือนพบไฟล์ชื่อซ้ำในระบบ
</div>
</q-card-section>
<q-card-section class="q-pt-none">
หากดำเนินการต่อข้อมูลจะถูกเขียนทับ
</q-card-section>
<q-card-actions align="right" class="bg-white text-primary">
<q-space />
<q-btn
flat
label="ยกเลิก"
v-close-popup
@click="() => $emit('cancel')"
/>
<q-btn
flat
label="ดำเนินการต่อ"
v-close-popup
class="text-red"
@click="() => $emit('confirm')"
/>
</q-card-actions>
</q-card>
</q-dialog>
</template>

8
Services/client/src/main.ts
View file

@ -10,7 +10,6 @@ import quasarUserOptions from './quasar-user-options'
import router from './router'
import 'quasar/src/css/index.sass'
import '@vuepic/vue-datepicker/dist/main.css'
const app = createApp(App)
const pinia = createPinia()
@ -32,13 +31,6 @@ app.component(
defineAsyncComponent(() => import('@/components/FullLoader.vue'))
)
app.component(
'datepicker',
defineAsyncComponent(() => import('@vuepic/vue-datepicker'))
)
app.mount('#app')
HttpService.configureAxiosKeycloak()
console.log(import.meta.env)

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

@ -95,7 +95,7 @@ export const useTreeDataStore = defineStore('changeCabinet', () => {
currentPath.value = pathname
const res = await axiosClient.get<EhrFolder[]>(
`${apiEndpoint}${requestPath}`
`${apiEndpoint}${requestPath}`,
)
const list = res.data.map((v) => ({
@ -246,7 +246,7 @@ export const useTreeDataStore = defineStore('changeCabinet', () => {
description: string
keyword: string
category: string
}
},
) {
loader.show()
@ -266,7 +266,7 @@ export const useTreeDataStore = defineStore('changeCabinet', () => {
{
file: file.name,
...metadata,
}
},
)
if (res && res.data.upload) {
@ -295,7 +295,7 @@ export const useTreeDataStore = defineStore('changeCabinet', () => {
keyword: string
category: string
},
file?: File
file?: File,
) {
loader.show()
@ -310,7 +310,7 @@ export const useTreeDataStore = defineStore('changeCabinet', () => {
const res = await axiosClient.patch<{ upload: string }>(
`${apiEndpoint}${requestPath}`,
{ file: file?.name, ...metadata }
{ file: file?.name, ...metadata },
)
if (res && res.data.upload) {

2
Services/client/tsconfig.app.json
View file

@ -1,5 +1,5 @@
{
"extends": "@vue/tsconfig/tsconfig.web.json",
"extends": "@vue/tsconfig/tsconfig.dom.json",
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
"exclude": ["src/**/__tests__/*"],
"compilerOptions": {

2
Services/client/tsconfig.config.json
View file

@ -1,5 +1,5 @@
{
"extends": "@vue/tsconfig/tsconfig.node.json",
"extends": ["@tsconfig/node18/tsconfig.json", "@vue/tsconfig/tsconfig.json"],
"include": [
"vite.config.*",
"vitest.config.*",