diff --git a/Services/client/package-lock.json b/Services/client/package-lock.json index ced1699..fba6281 100644 --- a/Services/client/package-lock.json +++ b/Services/client/package-lock.json @@ -1,12 +1,12 @@ { - "name": "ehr_portfolio", - "version": "0.0.0", + "name": "edm-frontend", + "version": "0.1.0", "lockfileVersion": 3, "requires": true, "packages": { "": { - "name": "ehr_portfolio", - "version": "0.0.0", + "name": "edm-frontend", + "version": "0.1.0", "dependencies": { "@fullcalendar/core": "^6.1.8", "@fullcalendar/daygrid": "^6.1.8", @@ -14,6 +14,8 @@ "@fullcalendar/list": "^6.1.8", "@fullcalendar/timegrid": "^6.1.8", "@fullcalendar/vue3": "^6.1.8", + "@johmun/vue-tags-input": "^2.1.0", + "@mayank1513/vue-tag-input": "^1.2.0", "@quasar/extras": "^1.15.8", "@vuepic/vue-datepicker": "^5.2.1", "axios": "^1.6.2", @@ -22,7 +24,8 @@ "quasar": "^2.11.1", "vite-plugin-pwa": "^0.16.7", "vue": "^3.2.45", - "vue-router": "^4.1.6" + "vue-router": "^4.1.6", + "vue3-tags-input": "^1.0.12" }, "devDependencies": { "@quasar/vite-plugin": "^1.6.0", @@ -31,6 +34,7 @@ "@types/node": "^18.11.12", "@vitejs/plugin-vue": "^4.0.0", "@vitejs/plugin-vue-jsx": "^3.0.0", + "@voerro/vue-tagsinput": "^2.7.1", "@vue/eslint-config-prettier": "^7.0.0", "@vue/eslint-config-typescript": "^11.0.0", "@vue/test-utils": "^2.2.6", @@ -44,6 +48,8 @@ "prettier": "^2.7.1", "sass": "^1.32.12", "start-server-and-test": "^1.15.2", + "typedoc": "^0.25.3", + "typedoc-plugin-vue": "^1.1.0", "typescript": "~4.7.4", "vite": "^4.0.0", "vitest": "^0.25.6", @@ -2237,6 +2243,36 @@ "integrity": "sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==", "dev": true }, + "node_modules/@johmun/vue-tags-input": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@johmun/vue-tags-input/-/vue-tags-input-2.1.0.tgz", + "integrity": "sha512-Fdwfss/TqCqMJbGAkmlzKbcG/ia1MstYjhqPBj+zG7h/166tIcE1TIftUxhT9LZ+RWjRSG0EFA1UyaHQSr3k3Q==", + "dependencies": { + "vue": "^2.6.10" + }, + "peerDependencies": { + "vue": "2.x" + } + }, + "node_modules/@johmun/vue-tags-input/node_modules/@vue/compiler-sfc": { + "version": "2.7.15", + "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.15.tgz", + "integrity": "sha512-FCvIEevPmgCgqFBH7wD+3B97y7u7oj/Wr69zADBf403Tui377bThTjBvekaZvlRr4IwUAu3M6hYZeULZFJbdYg==", + "dependencies": { + "@babel/parser": "^7.18.4", + "postcss": "^8.4.14", + "source-map": "^0.6.1" + } + }, + "node_modules/@johmun/vue-tags-input/node_modules/vue": { + "version": "2.7.15", + "resolved": "https://registry.npmjs.org/vue/-/vue-2.7.15.tgz", + "integrity": "sha512-a29fsXd2G0KMRqIFTpRgpSbWaNBK3lpCTOLuGLEDnlHWdjB8fwl6zyYZ8xCrqkJdatwZb4mGHiEfJjnw0Q6AwQ==", + "dependencies": { + "@vue/compiler-sfc": "2.7.15", + "csstype": "^3.1.0" + } + }, "node_modules/@jridgewell/gen-mapping": { "version": "0.3.3", "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz", @@ -2289,6 +2325,18 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, + "node_modules/@mayank1513/vue-tag-input": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@mayank1513/vue-tag-input/-/vue-tag-input-1.2.0.tgz", + "integrity": "sha512-COWPFJ4MsPVy84Z+RIC2nzu188AwkJZJQ021Jz04uLfgxbmLrCXhrNfCIrjMD7bb6/Fb2kgybQILIiPqcNJc9w==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/mayank1513" + }, + "peerDependencies": { + "vue": "^3" + } + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -2826,6 +2874,12 @@ "vue": "^3.0.0" } }, + "node_modules/@voerro/vue-tagsinput": { + "version": "2.7.1", + "resolved": "https://registry.npmjs.org/@voerro/vue-tagsinput/-/vue-tagsinput-2.7.1.tgz", + "integrity": "sha512-G7ClILHgtc/D1vEw9qp6dlsAstlhwLDkPvEp6w1iY/dmSzu4hhxaMk8jyahjxQRDgiLlrAikESOsfkVhy18YwQ==", + "dev": true + }, "node_modules/@volar/language-core": { "version": "1.10.10", "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-1.10.10.tgz", @@ -3246,6 +3300,12 @@ "node": ">=8" } }, + "node_modules/ansi-sequence-parser": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/ansi-sequence-parser/-/ansi-sequence-parser-1.1.1.tgz", + "integrity": "sha512-vJXt3yiaUL4UU546s3rPXlsry/RnM730G1+HkpKE012AN0sx1eOrxSu95oKDIonskeLTijMgqWZ3uDEe3NFvyg==", + "dev": true + }, "node_modules/ansi-styles": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", @@ -3873,6 +3933,14 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/click-outside-vue3": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/click-outside-vue3/-/click-outside-vue3-4.0.1.tgz", + "integrity": "sha512-sbplNecrup5oGqA3o4bo8XmvHRT6q9fvw21Z67aDbTqB9M6LF7CuYLTlLvNtOgKU6W3zst5H5zJuEh4auqA34g==", + "engines": { + "node": ">=6" + } + }, "node_modules/color-convert": { "version": "1.9.3", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", @@ -6667,6 +6735,12 @@ "node": ">=6" } }, + "node_modules/jsonc-parser": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.0.tgz", + "integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==", + "dev": true + }, "node_modules/jsonfile": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz", @@ -7039,6 +7113,12 @@ "yallist": "^3.0.2" } }, + "node_modules/lunr": { + "version": "2.3.9", + "resolved": "https://registry.npmjs.org/lunr/-/lunr-2.3.9.tgz", + "integrity": "sha512-zTU3DaZaF3Rt9rhN3uBMGQD3dD2/vFQqnvZCDv4dl5iOzq2IZQqTxu90r4E5J+nP70J3ilqVCrbho2eWaeW8Ow==", + "dev": true + }, "node_modules/magic-string": { "version": "0.30.5", "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.5.tgz", @@ -7056,6 +7136,18 @@ "integrity": "sha512-CkYQrPYZfWnu/DAmVCpTSX/xHpKZ80eKh2lAkyA6AJTef6bW+6JpbQZN5rofum7da+SyN1bi5ctTm+lTfcCW3g==", "dev": true }, + "node_modules/marked": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/marked/-/marked-4.3.0.tgz", + "integrity": "sha512-PRsaiG84bK+AMvxziE/lCFss8juXjNaWzVbN5tXAm4XjeaS9NAHhop+PjQxz2A9h8Q4M/xGmzP8vqNwy6JeK0A==", + "dev": true, + "bin": { + "marked": "bin/marked.js" + }, + "engines": { + "node": ">= 12" + } + }, "node_modules/memorystream": { "version": "0.3.1", "resolved": "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz", @@ -8337,6 +8429,18 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/shiki": { + "version": "0.14.5", + "resolved": "https://registry.npmjs.org/shiki/-/shiki-0.14.5.tgz", + "integrity": "sha512-1gCAYOcmCFONmErGTrS1fjzJLA7MGZmKzrBNX7apqSwhyITJg2O102uFzXUeBxNnEkDA9vHIKLyeKq0V083vIw==", + "dev": true, + "dependencies": { + "ansi-sequence-parser": "^1.1.0", + "jsonc-parser": "^3.2.0", + "vscode-oniguruma": "^1.7.0", + "vscode-textmate": "^8.0.0" + } + }, "node_modules/side-channel": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz", @@ -9096,6 +9200,60 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/typedoc": { + "version": "0.25.4", + "resolved": "https://registry.npmjs.org/typedoc/-/typedoc-0.25.4.tgz", + "integrity": "sha512-Du9ImmpBCw54bX275yJrxPVnjdIyJO/84co0/L9mwe0R3G4FSR6rQ09AlXVRvZEGMUg09+z/usc8mgygQ1aidA==", + "dev": true, + "dependencies": { + "lunr": "^2.3.9", + "marked": "^4.3.0", + "minimatch": "^9.0.3", + "shiki": "^0.14.1" + }, + "bin": { + "typedoc": "bin/typedoc" + }, + "engines": { + "node": ">= 16" + }, + "peerDependencies": { + "typescript": "4.6.x || 4.7.x || 4.8.x || 4.9.x || 5.0.x || 5.1.x || 5.2.x || 5.3.x" + } + }, + "node_modules/typedoc-plugin-vue": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/typedoc-plugin-vue/-/typedoc-plugin-vue-1.1.0.tgz", + "integrity": "sha512-zbc2jFH3K2e/rRerV8crWY16M2MfZAze5bV6s2Ti0c8De+MjBn7K0EuK3eGoJXkY1n22flYgBz65j0pYu+ffmA==", + "dev": true, + "peerDependencies": { + "typedoc": "0.25.x" + } + }, + "node_modules/typedoc/node_modules/brace-expansion": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", + "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", + "dev": true, + "dependencies": { + "balanced-match": "^1.0.0" + } + }, + "node_modules/typedoc/node_modules/minimatch": { + "version": "9.0.3", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz", + "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==", + "dev": true, + "dependencies": { + "brace-expansion": "^2.0.1" + }, + "engines": { + "node": ">=16 || 14 >=14.17" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, "node_modules/typescript": { "version": "4.7.4", "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.4.tgz", @@ -9430,6 +9588,18 @@ } } }, + "node_modules/vscode-oniguruma": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/vscode-oniguruma/-/vscode-oniguruma-1.7.0.tgz", + "integrity": "sha512-L9WMGRfrjOhgHSdOYgCt/yRMsXzLDJSL7BPrOZt73gU0iWO4mpqzqQzOz5srxqTvMBaR0XZTSrVWo4j55Rc6cA==", + "dev": true + }, + "node_modules/vscode-textmate": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/vscode-textmate/-/vscode-textmate-8.0.0.tgz", + "integrity": "sha512-AFbieoL7a5LMqcnOF04ji+rpXadgOXnZsxQr//r83kLPr7biP7am3g9zbaZIaBGwBRWeSvoMD4mgPdX3e4NWBg==", + "dev": true + }, "node_modules/vue": { "version": "3.3.8", "resolved": "https://registry.npmjs.org/vue/-/vue-3.3.8.tgz", @@ -9612,6 +9782,20 @@ "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", "dev": true }, + "node_modules/vue3-tags-input": { + "version": "1.0.12", + "resolved": "https://registry.npmjs.org/vue3-tags-input/-/vue3-tags-input-1.0.12.tgz", + "integrity": "sha512-s5rG+1W3M8+be0nd9H1nv/8WLjJOO6pShgVz8ALAqOiz3tDH5QhGrDH6fzD14ZjJNRWSa3bRBSXQwHEXffPQ6g==", + "dependencies": { + "click-outside-vue3": "^4.0.1" + }, + "engines": { + "node": ">=12" + }, + "peerDependencies": { + "vue": "^3.0.5" + } + }, "node_modules/w3c-xmlserializer": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz", diff --git a/Services/client/package.json b/Services/client/package.json index b8955f5..e560f9e 100644 --- a/Services/client/package.json +++ b/Services/client/package.json @@ -23,6 +23,7 @@ "@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", "axios": "^1.6.2", diff --git a/Services/client/src/components/FormUpload.vue b/Services/client/src/components/FormUpload.vue index daff78a..5a10dcc 100644 --- a/Services/client/src/components/FormUpload.vue +++ b/Services/client/src/components/FormUpload.vue @@ -2,7 +2,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() @@ -44,8 +44,8 @@ async function handleSubmit(continueUpload: boolean = false) { await uploadFile(currentPath.value, inputFile.value, { title: fileTitle.value, description: fileDesc.value, - keyword: [fileKeyword.value], - category: [fileCategory.value], + keyword: fileKeyword.value, + category: fileCategory.value, }) } else notification.value = true } @@ -112,57 +112,8 @@ async function handleSubmit(continueUpload: boolean = false) { placeholder="เลือกกลุ่ม/หมวดหมู่" dense /> - คำสำคัญ - - - - - + diff --git a/Services/client/src/components/ListView.vue b/Services/client/src/components/ListView.vue index 5041dc1..956ae91 100644 --- a/Services/client/src/components/ListView.vue +++ b/Services/client/src/components/ListView.vue @@ -4,24 +4,25 @@ 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 FromEdit from '@/components/FromEdit.vue' import FileIcon from '@/components/FileIcon.vue' -import FormUpload from '@/components/FormUpload.vue' -import DialogDelete from '@/components/DialogDelete.vue' +import FileForm from './FileForm.vue' +import FolderForm from './FolderForm.vue' -const { deleteFolder } = useTreeDataStore() const { getFormatDate, getSize, getType } = useFileInfoStore() -const { listDataFile, listDataFolder, currentDept } = storeToRefs( +const { listDataFile, listDataFolder, currentDept, currentPath } = storeToRefs( useTreeDataStore() ) -const { getFolder } = useTreeDataStore() -const DEPT_NAME = ['ตู้เอกสาร', 'ลิ้นชัก', 'แฟ้ม', 'แฟ้มย่อย'] -const drawer = ref(false) -const drawerFile = ref(false) -const drawerStatus = ref<'edit' | 'create'>('create') -const editPathname = ref('') -const confirmDelete = ref(false) -const currentPathDelete = ref('') +const { + createFolder, + editFolder, + getFolder, + deleteFolder, + uploadFile, + updateFile, + deleteFile, +} = useTreeDataStore() + +const DEPT_NAME = ['ตู้เอกสาร', 'ลิ้นชัก', 'แฟ้ม', 'แฟ้มย่อย'] as const const props = defineProps<{ mode: 'admin' | 'user' @@ -44,6 +45,105 @@ const currentIcon = computed(() => ? 'inbox' : 'o_folder_open' ) + +const folderFormState = ref(false) +const folderFormPath = ref('') +const folderFormData = ref<{ + name?: string +}>({}) +const folderFormType = ref<'edit' | 'create'>('create') +const fileFormState = ref(false) +const fileFormPath = ref('') +const fileFormData = ref<{ + file?: File + title?: string + description?: string + keyword?: string + category?: string +}>({}) +const fileFormType = 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 +} + +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.keyword, + } +} + +async function submitFileForm(value: { + mode: 'create' | 'edit' + file: File + title: string + description: string + keyword: string + category: string +}) { + if (value.mode === 'create') { + await uploadFile(currentPath.value, 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 +} + const columnsFolder: QTableProps['columns'] = [ { name: 'name', @@ -144,16 +244,11 @@ const onRowClick = (evt: Event, row: TreeDataFolder, index: number) => { color="primary" dense icon="add" - @click=" - () => { - drawer = !drawer - drawerStatus = 'create' - drawerFile = false - } - " + @click="() => triggerFolderCreate()" /> + { dense icon="edit" @click.stop=" - () => { - drawer = !drawer - drawerStatus = 'edit' - editPathname = actionsRow.row.pathname - } + triggerFolderEdit( + actionsRow.row.name, + actionsRow.row.pathname + ) " /> { color="negative" dense icon="delete" - @click.stop=" - () => { - confirmDelete = !confirmDelete - currentPathDelete = actionsRow.row.pathname - } - " + @click.stop="deleteFolder(actionsRow.row.pathname)" /> @@ -240,12 +329,7 @@ const onRowClick = (evt: Event, row: TreeDataFolder, index: number) => { color="primary" dense icon="add" - @click=" - () => { - drawerFile = !drawerFile - drawer = false - } - " + @click="() => triggerFileCreate()" /> @@ -294,8 +378,22 @@ const onRowClick = (evt: Event, row: TreeDataFolder, index: number) => {
- - + +
@@ -303,23 +401,23 @@ const onRowClick = (evt: Event, row: TreeDataFolder, index: number) => { - - - diff --git a/Services/client/src/components/PageLayout.vue b/Services/client/src/components/PageLayout.vue index 3b9103a..6f5ae94 100644 --- a/Services/client/src/components/PageLayout.vue +++ b/Services/client/src/components/PageLayout.vue @@ -10,19 +10,14 @@ import SearchBar from '@/modules/01_user/components/SearchBar.vue' import FileSearched from '@/components/FileSearched.vue' import FileDownload from '@/modules/01_user/components/FileDownload.vue' import ListView from '@/components/ListView.vue' -import FromEdit from '@/components/FromEdit.vue' +import FolderForm from './FolderForm.vue' - -const DEPT_NAME = ['ตู้เอกสาร', 'ลิ้นชัก', 'แฟ้ม', 'แฟ้มย่อย', 'ไฟล์'] +const DEPT_NAME = ['ตู้เอกสาร', 'ลิ้นชัก', 'แฟ้ม', 'แฟ้มย่อย'] as const const { isPreview } = storeToRefs(useFileInfoStore()) const { isSearch } = storeToRefs(useSearchDataStore()) const { data, currentDept } = storeToRefs(useTreeDataStore()) -const { getCabinet, gotoParent } = useTreeDataStore() - -const drawer = ref(false) -const drawerFile = ref(false) -const drawerStatus = ref<'create'>('create') +const { createFolder, getCabinet, gotoParent } = useTreeDataStore() const viewMode = ref<'view_list' | 'view_module'>('view_list') const inputSearch = ref() @@ -30,6 +25,27 @@ const props = defineProps<{ mode: 'admin' | 'user' }>() +const folderFormState = ref(false) +const folderFormType = ref<'edit' | 'create'>('create') +const folderFormData = ref<{ + name?: string +}>({}) + +function triggerFolderCreate() { + folderFormType.value = 'create' + folderFormData.value = {} + folderFormState.value = !folderFormState.value +} + +async function submitFolderForm(value: { + mode: 'create' | 'edit' + name: string +}) { + if (value.mode === 'create') { + await createFolder(value.name) + } +} + onMounted(getCabinet) diff --git a/Services/client/src/components/TagInput.vue b/Services/client/src/components/TagInput.vue new file mode 100644 index 0000000..5532f02 --- /dev/null +++ b/Services/client/src/components/TagInput.vue @@ -0,0 +1,40 @@ + + + \ No newline at end of file