Merge branch 'net' into dev/front
This commit is contained in:
somnetsak123
Methapon2001
commit
3e570b71aa
6 changed files with 419 additions and 164 deletions
194
Services/client/package-lock.json
generated
194
Services/client/package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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
|
||||
/>
|
||||
<span class="text-weight-bold">คำสำคัญ</span>
|
||||
<!-- <q-input
|
||||
class="q-my-md"
|
||||
outlined
|
||||
v-model="fileKeyword"
|
||||
placeholder="กรอกคำสำคัญ"
|
||||
dense
|
||||
/> -->
|
||||
|
||||
<q-input
|
||||
outlined
|
||||
v-model="tag"
|
||||
@keydown.delete="() => deleteTag()"
|
||||
@keydown.space="saveTag"
|
||||
label="กด space เพื่อเพิ่ม"
|
||||
class="q-mt-md"
|
||||
>
|
||||
<template #prepend>
|
||||
<div class="flex rounded-borders " style="gap: 0.5rem; max-width: 12rem overflow: visible;" >
|
||||
<q-badge
|
||||
rounded
|
||||
color="grey-3"
|
||||
class="q-p-px-md q-py-xs text-black"
|
||||
v-for="tag in tagList"
|
||||
:key="tag"
|
||||
>
|
||||
<div>
|
||||
{{ tag }}
|
||||
<q-btn round color="grey-5" size="4.5px">
|
||||
<q-icon class="cursor" name="close" @click="deleteTag(tag)" />
|
||||
</q-btn>
|
||||
</div>
|
||||
|
||||
|
||||
</q-badge>
|
||||
</div>
|
||||
</template>
|
||||
</q-input>
|
||||
<q-btn
|
||||
class="q-px-md"
|
||||
label="บันทึก"
|
||||
type="submit"
|
||||
color="primary"
|
||||
dense
|
||||
@click="
|
||||
() => {
|
||||
$emit('update:drawerFile')
|
||||
handleSubmit()
|
||||
}
|
||||
"
|
||||
/>
|
||||
<tag-input />
|
||||
</q-drawer>
|
||||
|
||||
<q-dialog
|
||||
|
|
@ -206,30 +157,4 @@ async function handleSubmit(continueUpload: boolean = false) {
|
|||
.cursor {
|
||||
cursor: pointer;
|
||||
}
|
||||
.box {
|
||||
display: inline-block;
|
||||
border: 2px solid #f1f2f4;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dashed {
|
||||
opacity: 0.4;
|
||||
display: inline-block;
|
||||
border: 2px solid #babdc3;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
border-style: dashed;
|
||||
}
|
||||
|
||||
.add-icon {
|
||||
margin: auto auto;
|
||||
}
|
||||
|
||||
.add-button {
|
||||
position: absolute;
|
||||
top: 75px;
|
||||
right: 45px;
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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<boolean>(false)
|
||||
const drawerFile = ref<boolean>(false)
|
||||
const drawerStatus = ref<'edit' | 'create'>('create')
|
||||
const editPathname = ref<string>('')
|
||||
const confirmDelete = ref<boolean>(false)
|
||||
const currentPathDelete = ref<string>('')
|
||||
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<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')
|
||||
|
||||
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()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-table
|
||||
flat
|
||||
bordered
|
||||
|
|
@ -197,11 +292,10 @@ const onRowClick = (evt: Event, row: TreeDataFolder, index: number) => {
|
|||
dense
|
||||
icon="edit"
|
||||
@click.stop="
|
||||
() => {
|
||||
drawer = !drawer
|
||||
drawerStatus = 'edit'
|
||||
editPathname = actionsRow.row.pathname
|
||||
}
|
||||
triggerFolderEdit(
|
||||
actionsRow.row.name,
|
||||
actionsRow.row.pathname
|
||||
)
|
||||
"
|
||||
/>
|
||||
<q-btn
|
||||
|
|
@ -209,12 +303,7 @@ const onRowClick = (evt: Event, row: TreeDataFolder, index: number) => {
|
|||
color="negative"
|
||||
dense
|
||||
icon="delete"
|
||||
@click.stop="
|
||||
() => {
|
||||
confirmDelete = !confirmDelete
|
||||
currentPathDelete = actionsRow.row.pathname
|
||||
}
|
||||
"
|
||||
@click.stop="deleteFolder(actionsRow.row.pathname)"
|
||||
/>
|
||||
</div>
|
||||
</q-td>
|
||||
|
|
@ -240,12 +329,7 @@ const onRowClick = (evt: Event, row: TreeDataFolder, index: number) => {
|
|||
color="primary"
|
||||
dense
|
||||
icon="add"
|
||||
@click="
|
||||
() => {
|
||||
drawerFile = !drawerFile
|
||||
drawer = false
|
||||
}
|
||||
"
|
||||
@click="() => triggerFileCreate()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -294,8 +378,22 @@ const onRowClick = (evt: Event, row: TreeDataFolder, index: number) => {
|
|||
</q-tooltip>
|
||||
</div>
|
||||
<div v-if="props.mode === 'admin'">
|
||||
<q-btn flat color="positive" dense icon="edit" @click="" />
|
||||
<q-btn flat color="negative" dense icon="delete" @click="" />
|
||||
<q-btn
|
||||
flat
|
||||
color="positive"
|
||||
dense
|
||||
icon="edit"
|
||||
@click="
|
||||
() => triggerFileEdit(actionsRow.row, actionsRow.row.pathname)
|
||||
"
|
||||
/>
|
||||
<q-btn
|
||||
flat
|
||||
color="negative"
|
||||
dense
|
||||
icon="delete"
|
||||
@click="() => deleteFile(actionsRow.row.pathname)"
|
||||
/>
|
||||
</div>
|
||||
</q-td>
|
||||
</template>
|
||||
|
|
@ -303,23 +401,23 @@ const onRowClick = (evt: Event, row: TreeDataFolder, index: number) => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<from-edit
|
||||
v-if="drawer"
|
||||
:drawer="drawer"
|
||||
:drawerStatus="drawerStatus"
|
||||
:DEPT_NAME="DEPT_NAME"
|
||||
:currentDept="currentDept"
|
||||
:editPathname="editPathname"
|
||||
@update:drawer="() => (drawer = false)"
|
||||
<file-form
|
||||
:mode="fileFormType"
|
||||
v-model:open="fileFormState"
|
||||
v-model:title="fileFormData.title"
|
||||
v-model:description="fileFormData.description"
|
||||
v-model:keyword="fileFormData.keyword"
|
||||
v-model:category="fileFormData.category"
|
||||
@submit="submitFileForm"
|
||||
/>
|
||||
<form-upload
|
||||
:drawerFile="drawerFile"
|
||||
@update:drawerFile="() => (drawerFile = false)"
|
||||
/>
|
||||
<dialog-delete
|
||||
:confirmDelete="confirmDelete"
|
||||
:pathname="currentPathDelete"
|
||||
@update:confirmDelete="() => (confirmDelete = false)"
|
||||
|
||||
<folder-form
|
||||
:mode="folderFormType"
|
||||
:tree="DEPT_NAME[currentDept]"
|
||||
v-if="currentDept < 4"
|
||||
v-model:open="folderFormState"
|
||||
v-model:name="folderFormData.name"
|
||||
@submit="submitFolderForm"
|
||||
/>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -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<boolean>(false)
|
||||
const drawerFile = ref<boolean>(false)
|
||||
const drawerStatus = ref<'create'>('create')
|
||||
const { createFolder, getCabinet, gotoParent } = useTreeDataStore()
|
||||
|
||||
const viewMode = ref<'view_list' | 'view_module'>('view_list')
|
||||
const inputSearch = ref<string>()
|
||||
|
|
@ -30,6 +25,27 @@ const props = defineProps<{
|
|||
mode: 'admin' | 'user'
|
||||
}>()
|
||||
|
||||
const folderFormState = ref<boolean>(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)
|
||||
</script>
|
||||
<template>
|
||||
|
|
@ -107,13 +123,7 @@ onMounted(getCabinet)
|
|||
color="primary"
|
||||
dense
|
||||
icon="add"
|
||||
@click="
|
||||
() => {
|
||||
drawer = !drawer
|
||||
drawerStatus = 'create'
|
||||
drawerFile = false
|
||||
}
|
||||
"
|
||||
@click="()=> triggerFolderCreate()"
|
||||
/>
|
||||
</span>
|
||||
<q-btn
|
||||
|
|
@ -142,16 +152,13 @@ onMounted(getCabinet)
|
|||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<from-edit
|
||||
v-if="currentDept === 0 && drawer "
|
||||
:drawer="drawer"
|
||||
:drawerStatus="drawerStatus"
|
||||
:DEPT_NAME="DEPT_NAME"
|
||||
:currentDept="currentDept"
|
||||
editPathname=""
|
||||
@update:drawer="() => (drawer = false)"
|
||||
<folder-form
|
||||
:mode="folderFormType"
|
||||
:tree="DEPT_NAME[currentDept]"
|
||||
v-if="currentDept < 4"
|
||||
v-model:open="folderFormState"
|
||||
v-model:name="folderFormData.name"
|
||||
@submit="submitFolderForm"
|
||||
/>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
40
Services/client/src/components/TagInput.vue
Normal file
40
Services/client/src/components/TagInput.vue
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
<script setup lang="ts">
|
||||
import { onMounted, ref } from "vue";
|
||||
import TagInput from "@mayank1513/vue-tag-input";
|
||||
import "@mayank1513/vue-tag-input/style.css";
|
||||
|
||||
const autocompleteItems = [
|
||||
"No dependencies",
|
||||
"Autocompletion",
|
||||
"Keep Focused",
|
||||
"Fast Settup",
|
||||
"Mini Sized",
|
||||
"Customizable",
|
||||
"Backspace/Delete to remove tag",
|
||||
"Turns red when backspace/delete is pressed",
|
||||
"Examples",
|
||||
"Docs",
|
||||
"Copy/Paste",
|
||||
]
|
||||
const tags = ref<string[]>([]);
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-btn @click="()=> {console.log(tags);
|
||||
}">test</q-btn>
|
||||
<tag-input tagBgColor="rgb(189, 184, 179)" :autocomplete-items="autocompleteItems" v-model="tags" />
|
||||
<!-- <q-btn
|
||||
class="q-px-md"
|
||||
label="บันทึก"
|
||||
type="submit"
|
||||
color="primary"
|
||||
dense
|
||||
@click="
|
||||
() => {
|
||||
$emit('update:drawerFile')
|
||||
|
||||
}
|
||||
"
|
||||
/> -->
|
||||
</template>
|
||||
Loading…
Add table
Add a link
Reference in a new issue