Showing
8 changed files
with
735 additions
and
687 deletions
front-end/.eslintrc.js
0 → 100644
1 | +module.exports = { | ||
2 | + root: true, | ||
3 | + env: { | ||
4 | + node: true, | ||
5 | + }, | ||
6 | + extends: [ | ||
7 | + 'eslint:recommended', | ||
8 | + 'plugin:vue/essential', | ||
9 | + 'prettier', | ||
10 | + 'plugin:prettier/recommended', | ||
11 | + ], | ||
12 | + | ||
13 | + parserOptions: { | ||
14 | + parser: 'babel-eslint', | ||
15 | + }, | ||
16 | + rules: { | ||
17 | + 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', | ||
18 | + 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', | ||
19 | + 'prettier/prettier': [ | ||
20 | + 'error', | ||
21 | + { | ||
22 | + singleQuote: true, | ||
23 | + semi: true, | ||
24 | + useTabs: true, | ||
25 | + tabWidth: 2, | ||
26 | + trailingComma: 'all', | ||
27 | + printWidth: 80, | ||
28 | + bracketSpacing: true, | ||
29 | + arrowParens: 'avoid', | ||
30 | + }, | ||
31 | + ], | ||
32 | + }, | ||
33 | + overrides: [ | ||
34 | + { | ||
35 | + files: [ | ||
36 | + '**/__tests__/*.{j,t}s?(x)', | ||
37 | + '**/tests/unit/**/*.spec.{j,t}s?(x)', | ||
38 | + ], | ||
39 | + env: { | ||
40 | + jest: true, | ||
41 | + }, | ||
42 | + }, | ||
43 | + ], | ||
44 | +}; |
... | @@ -2147,6 +2147,20 @@ | ... | @@ -2147,6 +2147,20 @@ |
2147 | } | 2147 | } |
2148 | } | 2148 | } |
2149 | }, | 2149 | }, |
2150 | + "babel-eslint": { | ||
2151 | + "version": "10.1.0", | ||
2152 | + "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz", | ||
2153 | + "integrity": "sha512-ifWaTHQ0ce+448CYop8AdrQiBsGrnC+bMgfyKFdi6EsPLTAWG+QfyDeM6OH+FmWnKvEq5NnBMLvlBUPKQZoDSg==", | ||
2154 | + "dev": true, | ||
2155 | + "requires": { | ||
2156 | + "@babel/code-frame": "^7.0.0", | ||
2157 | + "@babel/parser": "^7.7.0", | ||
2158 | + "@babel/traverse": "^7.7.0", | ||
2159 | + "@babel/types": "^7.7.0", | ||
2160 | + "eslint-visitor-keys": "^1.0.0", | ||
2161 | + "resolve": "^1.12.0" | ||
2162 | + } | ||
2163 | + }, | ||
2150 | "babel-loader": { | 2164 | "babel-loader": { |
2151 | "version": "8.1.0", | 2165 | "version": "8.1.0", |
2152 | "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.1.0.tgz", | 2166 | "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.1.0.tgz", |
... | @@ -4422,9 +4436,9 @@ | ... | @@ -4422,9 +4436,9 @@ |
4422 | "dev": true | 4436 | "dev": true |
4423 | }, | 4437 | }, |
4424 | "cross-spawn": { | 4438 | "cross-spawn": { |
4425 | - "version": "7.0.2", | 4439 | + "version": "7.0.3", |
4426 | - "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.2.tgz", | 4440 | + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", |
4427 | - "integrity": "sha512-PD6G8QG3S4FK/XCGFbEQrDqO2AnMMsy0meR7lerlIOHAAbkuavGU/pOqprrlvfTNjvowivTeBsjebAL0NSoMxw==", | 4441 | + "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==", |
4428 | "dev": true, | 4442 | "dev": true, |
4429 | "requires": { | 4443 | "requires": { |
4430 | "path-key": "^3.1.0", | 4444 | "path-key": "^3.1.0", |
... | @@ -4596,14 +4610,14 @@ | ... | @@ -4596,14 +4610,14 @@ |
4596 | "dev": true | 4610 | "dev": true |
4597 | }, | 4611 | }, |
4598 | "espree": { | 4612 | "espree": { |
4599 | - "version": "7.0.0", | 4613 | + "version": "7.1.0", |
4600 | - "resolved": "https://registry.npmjs.org/espree/-/espree-7.0.0.tgz", | 4614 | + "resolved": "https://registry.npmjs.org/espree/-/espree-7.1.0.tgz", |
4601 | - "integrity": "sha512-/r2XEx5Mw4pgKdyb7GNLQNsu++asx/dltf/CI8RFi9oGHxmQFgvLbc5Op4U6i8Oaj+kdslhJtVlEZeAqH5qOTw==", | 4615 | + "integrity": "sha512-dcorZSyfmm4WTuTnE5Y7MEN1DyoPYy1ZR783QW1FJoenn7RailyWFsq/UL6ZAAA7uXurN9FIpYyUs3OfiIW+Qw==", |
4602 | "dev": true, | 4616 | "dev": true, |
4603 | "requires": { | 4617 | "requires": { |
4604 | - "acorn": "^7.1.1", | 4618 | + "acorn": "^7.2.0", |
4605 | "acorn-jsx": "^5.2.0", | 4619 | "acorn-jsx": "^5.2.0", |
4606 | - "eslint-visitor-keys": "^1.1.0" | 4620 | + "eslint-visitor-keys": "^1.2.0" |
4607 | }, | 4621 | }, |
4608 | "dependencies": { | 4622 | "dependencies": { |
4609 | "acorn": { | 4623 | "acorn": { |
... | @@ -4611,6 +4625,12 @@ | ... | @@ -4611,6 +4625,12 @@ |
4611 | "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.2.0.tgz", | 4625 | "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.2.0.tgz", |
4612 | "integrity": "sha512-apwXVmYVpQ34m/i71vrApRrRKCWQnZZF1+npOD0WV5xZFfwWOmKGQ2RWlfdy9vWITsenisM8M0Qeq8agcFHNiQ==", | 4626 | "integrity": "sha512-apwXVmYVpQ34m/i71vrApRrRKCWQnZZF1+npOD0WV5xZFfwWOmKGQ2RWlfdy9vWITsenisM8M0Qeq8agcFHNiQ==", |
4613 | "dev": true | 4627 | "dev": true |
4628 | + }, | ||
4629 | + "eslint-visitor-keys": { | ||
4630 | + "version": "1.2.0", | ||
4631 | + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.2.0.tgz", | ||
4632 | + "integrity": "sha512-WFb4ihckKil6hu3Dp798xdzSfddwKKU3+nGniKF6HfeW6OLd2OUDEPP7TcHtB5+QXOKg2s6B2DaMPE1Nn/kxKQ==", | ||
4633 | + "dev": true | ||
4614 | } | 4634 | } |
4615 | } | 4635 | } |
4616 | }, | 4636 | }, |
... | @@ -10644,9 +10664,9 @@ | ... | @@ -10644,9 +10664,9 @@ |
10644 | "dev": true | 10664 | "dev": true |
10645 | }, | 10665 | }, |
10646 | "v8-compile-cache": { | 10666 | "v8-compile-cache": { |
10647 | - "version": "2.1.0", | 10667 | + "version": "2.1.1", |
10648 | - "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.1.0.tgz", | 10668 | + "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.1.1.tgz", |
10649 | - "integrity": "sha512-usZBT3PW+LOjM25wbqIlZwPeJV+3OSz3M1k1Ws8snlW39dZyYL9lOGC5FgPVHfk0jKmjiDV8Z0mIbVQPiwFs7g==", | 10669 | + "integrity": "sha512-8OQ9CL+VWyt3JStj7HX7/ciTL2V3Rl1Wf5OL+SNTm0yK1KvtReVulksyeRnCANHHuUxHlQig+JJDlUhBt1NQDQ==", |
10650 | "dev": true | 10670 | "dev": true |
10651 | }, | 10671 | }, |
10652 | "validate-npm-package-license": { | 10672 | "validate-npm-package-license": { | ... | ... |
... | @@ -4,7 +4,8 @@ | ... | @@ -4,7 +4,8 @@ |
4 | "private": true, | 4 | "private": true, |
5 | "scripts": { | 5 | "scripts": { |
6 | "serve": "vue-cli-service serve", | 6 | "serve": "vue-cli-service serve", |
7 | - "build": "vue-cli-service build" | 7 | + "build": "vue-cli-service build", |
8 | + "lint": "vue-cli-service lint" | ||
8 | }, | 9 | }, |
9 | "dependencies": { | 10 | "dependencies": { |
10 | "axios": "^0.19.2", | 11 | "axios": "^0.19.2", |
... | @@ -19,6 +20,7 @@ | ... | @@ -19,6 +20,7 @@ |
19 | "@vue/cli-plugin-router": "~4.3.0", | 20 | "@vue/cli-plugin-router": "~4.3.0", |
20 | "@vue/cli-plugin-vuex": "~4.3.0", | 21 | "@vue/cli-plugin-vuex": "~4.3.0", |
21 | "@vue/cli-service": "~4.3.0", | 22 | "@vue/cli-service": "~4.3.0", |
23 | + "babel-eslint": "^10.1.0", | ||
22 | "eslint": "^7.1.0", | 24 | "eslint": "^7.1.0", |
23 | "eslint-config-prettier": "^6.11.0", | 25 | "eslint-config-prettier": "^6.11.0", |
24 | "eslint-plugin-prettier": "^3.1.3", | 26 | "eslint-plugin-prettier": "^3.1.3", | ... | ... |
1 | -import axios from 'axios' | 1 | +import axios from 'axios'; |
2 | 2 | ||
3 | const instance = axios.create({ | 3 | const instance = axios.create({ |
4 | - baseURL: process.env.VUE_APP_API_URL, | 4 | + baseURL: process.env.VUE_APP_API_URL, |
5 | }); | 5 | }); |
6 | 6 | ||
7 | function registerUser(userData) { | 7 | function registerUser(userData) { |
8 | - // const url = 'http://localhost:3000/api/signup' | 8 | + // const url = 'http://localhost:3000/api/signup' |
9 | - return axios.post('/api/RegistUser', userData); | 9 | + return axios.post('/api/RegistUser', userData); |
10 | } | 10 | } |
11 | 11 | ||
12 | function loginUser(userData) { | 12 | function loginUser(userData) { |
13 | - // const url = 'http://localhost:3000/api/login' | 13 | + // const url = 'http://localhost:3000/api/login' |
14 | - return axios.post('/api/login', userData); | 14 | + return axios.post('/api/login', userData); |
15 | } | 15 | } |
16 | 16 | ||
17 | function folder(curData) { | 17 | function folder(curData) { |
18 | - return axios.get('/api/folder/show', { | 18 | + return axios.get('/api/folder/show', { |
19 | - params: { | 19 | + params: { |
20 | - id: curData.id, | 20 | + id: curData.id, |
21 | - cur: curData.cur | 21 | + cur: curData.cur, |
22 | - } | 22 | + }, |
23 | - }); | 23 | + }); |
24 | } | 24 | } |
25 | 25 | ||
26 | function makeFolder(folderData) { | 26 | function makeFolder(folderData) { |
27 | - return axios.post('/api/folder/makefolder', folderData); | 27 | + return axios.post('/api/folder/makefolder', folderData); |
28 | } | 28 | } |
29 | 29 | ||
30 | function deleteFolder(folderData) { | 30 | function deleteFolder(folderData) { |
31 | - return axios.post('/api/folder/delfolder', folderData); | 31 | + return axios.post('/api/folder/delfolder', folderData); |
32 | } | 32 | } |
33 | 33 | ||
34 | function moveFolder(folderData) { | 34 | function moveFolder(folderData) { |
35 | - return axios.post('/api/folder/move', folderData); | 35 | + return axios.post('/api/folder/move', folderData); |
36 | } | 36 | } |
37 | 37 | ||
38 | -function file(curData){ | 38 | +function file(curData) { |
39 | - return axios.get('/api/file', { | 39 | + return axios.get('/api/file', { |
40 | - params: { | 40 | + params: { |
41 | - id: curData.id, | 41 | + id: curData.id, |
42 | - cur: curData.cur | 42 | + cur: curData.cur, |
43 | - } | 43 | + }, |
44 | - }); | 44 | + }); |
45 | } | 45 | } |
46 | 46 | ||
47 | - | 47 | +function uploadFile(fileData) { |
48 | -function uploadFile(fileData){ | 48 | + return axios.post('/api/file/upload', fileData, { |
49 | - return axios.post('/api/file/upload', fileData, { | 49 | + headers: { |
50 | - headers :{ | 50 | + 'Content-Type': 'multipart/form-data', |
51 | - 'Content-Type' : 'multipart/form-data' | 51 | + }, |
52 | - } | 52 | + }); |
53 | - }); | ||
54 | } | 53 | } |
55 | 54 | ||
56 | -function detailFile(fileData){ | 55 | +function detailFile(fileData) { |
57 | - return axios.get(`/api/file/${fileData.name}`, { | 56 | + return axios.get(`/api/file/${fileData.name}`, { |
58 | - params:{ | 57 | + params: { |
59 | - id: fileData.id, | 58 | + id: fileData.id, |
60 | - cur: fileData.cur | 59 | + cur: fileData.cur, |
61 | - } | 60 | + }, |
62 | - }) | 61 | + }); |
63 | } | 62 | } |
64 | -function deleteFile(fileData){ | 63 | + |
65 | - return axios.get(`/api/file/delete/${fileData.fileName}`, { | 64 | +function deleteFile(fileData) { |
66 | - params:{ | 65 | + return axios.get(`/api/file/delete/${fileData.fileName}`, { |
67 | - //현재 접속한 사람의 id와 삭제할 파일의 이름, 현재 폴더위치를 파라미터로 넘긴다. | 66 | + params: { |
68 | - id: fileData.user_id, | 67 | + //현재 접속한 사람의 id와 삭제할 파일의 이름, 현재 폴더위치를 파라미터로 넘긴다. |
69 | - cur: fileData.cur | 68 | + id: fileData.user_id, |
70 | - } | 69 | + cur: fileData.cur, |
71 | - }); | 70 | + }, |
71 | + }); | ||
72 | } | 72 | } |
73 | -function downloadFile(fileData){ | 73 | +function downloadFile(fileData) { |
74 | - return axios.get(`api/file/download/${fileData.fileName}`, { | 74 | + return axios.get(`api/file/download/${fileData.fileName}`, { |
75 | - params:{ | 75 | + params: { |
76 | - //현재 접속한 사람의 id와 다운로드를 위해 선택한 파일의 이름을 파라미터로 넘긴다. | 76 | + //현재 접속한 사람의 id와 다운로드를 위해 선택한 파일의 이름을 파라미터로 넘긴다. |
77 | - id: fileData.id, | 77 | + id: fileData.id, |
78 | - cur: fileData.cur | 78 | + cur: fileData.cur, |
79 | - } | 79 | + }, |
80 | - }); | 80 | + }); |
81 | } | 81 | } |
82 | 82 | ||
83 | - | 83 | +export { |
84 | - | 84 | + registerUser, |
85 | -export { registerUser, loginUser, folder, makeFolder, deleteFolder, moveFolder, | 85 | + loginUser, |
86 | - file, uploadFile, deleteFile, downloadFile }; | 86 | + folder, |
87 | + makeFolder, | ||
88 | + deleteFolder, | ||
89 | + moveFolder, | ||
90 | + file, | ||
91 | + uploadFile, | ||
92 | + deleteFile, | ||
93 | + downloadFile, | ||
94 | +}; | ... | ... |
1 | <template> | 1 | <template> |
2 | - <div> | 2 | + <div> |
3 | - <v-toolbar flat> | 3 | + <v-toolbar flat> |
4 | - <v-toolbar-title>파일 | 4 | + <v-toolbar-title>파일 </v-toolbar-title> |
5 | - </v-toolbar-title> | 5 | + <v-spacer></v-spacer> |
6 | - <v-spacer></v-spacer> | 6 | + <v-text-field |
7 | - <v-text-field | 7 | + v-model="search" |
8 | - v-model="search" | 8 | + append-icon="mdi-magnify" |
9 | - append-icon="mdi-magnify" | 9 | + label="파일 검색" |
10 | - label="파일 검색" | 10 | + single-line |
11 | - single-line | 11 | + hide-details |
12 | - hide-details | 12 | + ></v-text-field> |
13 | - ></v-text-field> | 13 | + </v-toolbar> |
14 | - </v-toolbar> | 14 | + <v-list two-line subheader> |
15 | - <v-list two-line subheader> | 15 | + <v-subheader inset>Folders</v-subheader> |
16 | - <v-subheader inset>Folders</v-subheader> | 16 | + <v-btn @click="moveParent">...</v-btn> |
17 | - <v-btn @click="moveParent">...</v-btn> | 17 | + <v-list-item |
18 | - <v-list-item | 18 | + v-for="item in this.$store.getters.folderL" |
19 | - v-for="item in this.$store.getters.folderL" | 19 | + :key="item.title" |
20 | - :key="item.title" | 20 | + :search="search" |
21 | - :search="search" | 21 | + @click.right="show(item.folder_name, $event)" |
22 | - @click.right="show(item.folder_name,$event)" | 22 | + @click.left="moveF(item.folder_name)" |
23 | - @click.left="moveF(item.folder_name)" | 23 | + > |
24 | - > | 24 | + <v-list-item-avatar> |
25 | - <v-list-item-avatar > | 25 | + <v-icon>mdi-folder</v-icon> |
26 | - <v-icon>mdi-folder</v-icon> | 26 | + </v-list-item-avatar> |
27 | - </v-list-item-avatar> | 27 | + <v-list-item-content> |
28 | - <v-list-item-content > | 28 | + <v-list-item-title v-text="item.folder_name"></v-list-item-title> |
29 | - <v-list-item-title v-text="item.folder_name"></v-list-item-title> | 29 | + </v-list-item-content> |
30 | - </v-list-item-content> | ||
31 | 30 | ||
32 | - | 31 | + <v-menu |
33 | - | 32 | + v-model="showMenu" |
34 | - <v-menu | 33 | + :position-x="x" |
35 | - v-model="showMenu" | 34 | + :position-y="y" |
36 | - :position-x="x" | 35 | + absolute |
37 | - :position-y="y" | 36 | + offset-y |
38 | - absolute | 37 | + > |
39 | - offset-y | 38 | + <v-list dense> |
40 | - > | 39 | + <v-list-item @click.prevent="dialog2 = !dialog2"> |
41 | - <v-list dense> | 40 | + <v-list-item-title>이동</v-list-item-title> |
42 | - <v-list-item @click.prevent="dialog2 = !dialog2"> | 41 | + </v-list-item> |
43 | - <v-list-item-title>이동</v-list-item-title> | 42 | + <v-list-item @click.prevent="deleteF"> |
44 | - </v-list-item> | 43 | + <v-list-item-title>삭제</v-list-item-title> |
45 | - <v-list-item @click.prevent="deleteF"> | 44 | + </v-list-item> |
46 | - <v-list-item-title>삭제</v-list-item-title> | 45 | + </v-list> |
47 | - </v-list-item> | 46 | + </v-menu> |
48 | - </v-list> | 47 | + </v-list-item> |
49 | - </v-menu> | 48 | + <v-dialog v-model="dialog2" width="500px"> |
50 | - </v-list-item> | 49 | + <v-card> |
51 | -<v-dialog | 50 | + <v-card-title class="grey darken-2"> |
52 | - v-model="dialog2" | 51 | + Move Folder |
53 | - width="500px" | 52 | + </v-card-title> |
54 | - > | 53 | + <v-container> |
55 | - <v-card> | 54 | + <v-list-item-group v-for="item2 in folders" :key="item2.folder_id"> |
56 | - <v-card-title class="grey darken-2"> | 55 | + <template v-if="!(item2.folder_name === curfName)"> |
57 | - Move Folder | 56 | + <v-hover @click.left="transferF(item2.folder_name)"> |
58 | - </v-card-title> | 57 | + <v-list-item-avatar> |
59 | - <v-container> | 58 | + <v-icon>mdi-folder</v-icon> |
60 | - <v-list-item-group | 59 | + </v-list-item-avatar> |
61 | - v-for="item2 in folders" | 60 | + <v-list-item-content> |
62 | - :key="item2.folder_id" | 61 | + <v-list-item-title |
63 | - > | 62 | + v-text="item2.folder_name" |
64 | - <template v-if="!(item2.folder_name === curfName)"> | 63 | + ></v-list-item-title> |
65 | - <v-hover @click.left="transferF(item2.folder_name)"> | 64 | + </v-list-item-content> |
66 | - <v-list-item-avatar> | 65 | + </v-hover> |
67 | - <v-icon>mdi-folder</v-icon> | 66 | + </template> |
68 | - </v-list-item-avatar> | 67 | + <!-- <template v-else></template> --> |
69 | - <v-list-item-content> | 68 | + </v-list-item-group> |
70 | - <v-list-item-title v-text="item2.folder_name"></v-list-item-title> | 69 | + </v-container> |
71 | - </v-list-item-content> | 70 | + <v-card-actions> |
72 | - </v-hover> | 71 | + <v-spacer></v-spacer> |
73 | - </template> | 72 | + <v-btn text color="primary" @click="cancelMove">Cancel</v-btn> |
74 | - <!-- <template v-else></template> --> | 73 | + </v-card-actions> |
75 | - </v-list-item-group> | 74 | + </v-card> |
76 | - </v-container> | 75 | + </v-dialog> |
77 | - <v-card-actions> | 76 | + <v-divider inset></v-divider> |
78 | - <v-spacer></v-spacer> | 77 | + <v-subheader inset>Files</v-subheader> |
79 | - <v-btn | 78 | + <v-list-item v-for="item in this.$store.getters.fileL" :key="item.title"> |
80 | - text | 79 | + <v-list-item-avatar> |
81 | - color="primary" | 80 | + <v-icon> mdi-file</v-icon> |
82 | - @click="cancelMove" | 81 | + </v-list-item-avatar> |
83 | - >Cancel</v-btn> | 82 | + <v-list-item-content> |
84 | - </v-card-actions> | 83 | + <v-list-item-title v-text="item.file_name"></v-list-item-title> |
85 | - </v-card> | 84 | + </v-list-item-content> |
86 | - </v-dialog> | 85 | + <v-list-item-action> |
87 | - <v-divider inset></v-divider> | 86 | + <v-btn icon @click="download_file(item.file_name)"> |
88 | - <v-subheader inset>Files</v-subheader> | 87 | + <v-icon color="grey lighten-1">mdi-download</v-icon> |
89 | - <v-list-item | 88 | + </v-btn> |
90 | - v-for="item in this.$store.getters.fileL" | 89 | + <v-btn icon @click="delete_file(item.file_name)"> |
91 | - :key="item.title" | 90 | + <v-icon color="grey lighten-1">mdi-delete</v-icon> |
92 | - > | 91 | + </v-btn> |
93 | - <v-list-item-avatar> | 92 | + </v-list-item-action> |
94 | - <v-icon> mdi-file</v-icon> | 93 | + </v-list-item> |
95 | - </v-list-item-avatar> | 94 | + </v-list> |
96 | - <v-list-item-content> | 95 | + <input |
97 | - <v-list-item-title v-text="item.file_name"></v-list-item-title> | 96 | + id="file-selector" |
98 | - </v-list-item-content> | 97 | + ref="uploadedfile" |
99 | - <v-list-item-action> | 98 | + type="file" |
100 | - <v-btn icon @click="download_file(item.file_name)"> | 99 | + v-on:change="handleFileUpload()" |
101 | - <v-icon color="grey lighten-1">mdi-download</v-icon> | 100 | + /> |
102 | - </v-btn> | 101 | + <br /> |
103 | - <v-btn icon @click="delete_file(item.file_name)"> | 102 | + <!-- |
104 | - <v-icon color="grey lighten-1">mdi-delete</v-icon> | ||
105 | - </v-btn> | ||
106 | - </v-list-item-action> | ||
107 | - </v-list-item> | ||
108 | - </v-list> | ||
109 | - <input id = "file-selector" ref='uploadedfile' type="file" | ||
110 | - v-on:change="handleFileUpload()"> | ||
111 | - <br> | ||
112 | - <!-- | ||
113 | <v-file-input | 103 | <v-file-input |
114 | v-model="files" | 104 | v-model="files" |
115 | color="deep-purple accent-4" | 105 | color="deep-purple accent-4" |
... | @@ -141,289 +131,282 @@ | ... | @@ -141,289 +131,282 @@ |
141 | 131 | ||
142 | </v-file-input> | 132 | </v-file-input> |
143 | --> | 133 | --> |
144 | - <v-btn color="blue" @click = "upload_file">upload</v-btn> | 134 | + <v-btn color="blue" @click="upload_file">upload</v-btn> |
145 | - <v-btn | 135 | + <v-btn bottom color="blue" dark fab fixed right @click="dialog = !dialog"> |
146 | - bottom | 136 | + <v-icon>mdi-plus</v-icon> |
147 | - color="blue" | 137 | + </v-btn> |
148 | - dark | 138 | + <v-dialog v-model="dialog" width="500px"> |
149 | - fab | 139 | + <v-card> |
150 | - fixed | 140 | + <v-card-title class="grey darken-2"> |
151 | - right | 141 | + Create Folder |
152 | - @click="dialog = !dialog" | 142 | + </v-card-title> |
153 | - > | 143 | + <v-container> |
154 | - <v-icon>mdi-plus</v-icon> | 144 | + <div> |
155 | - </v-btn> | 145 | + <v-icon>mdi-folder</v-icon> |
156 | - <v-dialog | 146 | + <v-text-field |
157 | - v-model="dialog" | 147 | + placeholder="name" |
158 | - width="500px" | 148 | + id="foldername" |
159 | - > | 149 | + type="text" |
160 | - <v-card> | 150 | + v-model="foldername" |
161 | - <v-card-title class="grey darken-2"> | 151 | + ></v-text-field> |
162 | - Create Folder | 152 | + </div> |
163 | - </v-card-title> | 153 | + </v-container> |
164 | - <v-container> | 154 | + <v-card-actions> |
165 | - <div> | 155 | + <v-spacer></v-spacer> |
166 | - <v-icon>mdi-folder</v-icon> | 156 | + <v-btn text color="primary" @click="dialog = false">Cancel</v-btn> |
167 | - <v-text-field placeholder="name" id="foldername" type="text" v-model="foldername" ></v-text-field> | 157 | + <v-btn text @click="makeF">Create</v-btn> |
168 | - </div> | 158 | + </v-card-actions> |
169 | - </v-container> | 159 | + </v-card> |
170 | - <v-card-actions> | 160 | + </v-dialog> |
171 | - <v-spacer></v-spacer> | 161 | + </div> |
172 | - <v-btn | ||
173 | - text | ||
174 | - color="primary" | ||
175 | - @click="dialog = false" | ||
176 | - >Cancel</v-btn> | ||
177 | - <v-btn | ||
178 | - text | ||
179 | - @click="makeF" | ||
180 | - >Create</v-btn> | ||
181 | - </v-card-actions> | ||
182 | - </v-card> | ||
183 | - </v-dialog> | ||
184 | - </div> | ||
185 | </template> | 162 | </template> |
186 | <script> | 163 | <script> |
187 | -import { folder, makeFolder, deleteFolder, moveFolder, file, uploadFile, deleteFile, downloadFile } from '../api/index'; | 164 | +import { |
165 | + folder, | ||
166 | + makeFolder, | ||
167 | + deleteFolder, | ||
168 | + moveFolder, | ||
169 | + file, | ||
170 | + uploadFile, | ||
171 | + deleteFile, | ||
172 | + downloadFile, | ||
173 | +} from '../api/index'; | ||
188 | import Axios from 'axios'; | 174 | import Axios from 'axios'; |
189 | - export default { | ||
190 | - data() { | ||
191 | - return { | ||
192 | - uploadedfile:null, | ||
193 | - foldername:'', | ||
194 | - curfName:'', | ||
195 | - folders: [], | ||
196 | - files: [], | ||
197 | - search:'', | ||
198 | - id: '', | ||
199 | - dialog:false, | ||
200 | - howMenu: false, | ||
201 | - showMenu: false, | ||
202 | - x: 0, | ||
203 | - y: 0, | ||
204 | - dialog2:false, | ||
205 | - detail : { | ||
206 | - dataname: null, | ||
207 | - date: null, | ||
208 | - owner_id:null, | ||
209 | - datasize:null, | ||
210 | - datatype:null | ||
211 | - } | ||
212 | - } | ||
213 | - }, | ||
214 | - async created(){ | ||
215 | - try { | ||
216 | - const curData = { | ||
217 | - id : this.$store.state.id, | ||
218 | - cur: '/' | ||
219 | - } | ||
220 | - console.log(curData); | ||
221 | - const response = await folder(curData); | ||
222 | - const file_response = await file(curData); | ||
223 | - this.$store.commit('setFolder', response.data.folders); | ||
224 | - this.$store.commit('setCur', response.data.cur); | ||
225 | - this.$store.commit('setParent', response.data.parentPath); | ||
226 | - this.folders = this.$store.getters.folderL; | ||
227 | - this.$store.commit('setFile', file_response.data.files); | ||
228 | - this.folders = this.$store.getters.folderL; | ||
229 | - console.log(this.$store.getters.fileL); | ||
230 | - this.files = this.$store.getters.fileL; | ||
231 | - | ||
232 | - } catch (error) { | ||
233 | - console.log("에러"); | ||
234 | - console.log(error); | ||
235 | - } | ||
236 | - }, | ||
237 | - methods: { | ||
238 | - handleFileUpload(){ | ||
239 | - this.uploadedfile= this.$refs.uploadedfile.files[0] | ||
240 | - console.log(this.uploadedfile) | ||
241 | - }, | ||
242 | - initFolderName(){ | ||
243 | - this.foldername = ''; | ||
244 | - }, | ||
245 | - cancelMove(){ | ||
246 | - this.curfName = ''; | ||
247 | - this.dialog2 = false; | ||
248 | - }, | ||
249 | - async makeF(){ | ||
250 | - try { | ||
251 | - const folderData = { | ||
252 | - user_id : this.$store.state.id, | ||
253 | - cur : this.$store.state.cur, | ||
254 | - folder_name : this.foldername | ||
255 | - }; | ||
256 | - const response = await makeFolder(folderData); | ||
257 | - console.log(response.data) | ||
258 | - console.log("폴더 생성 완료"); | ||
259 | - this.$store.commit('setFolder', response.data.folders); | ||
260 | - this.folders = respons.data.folders; | ||
261 | - } catch (error) { | ||
262 | - console.log("에러"); | ||
263 | - console.log(error.response.data); | ||
264 | - } finally{ | ||
265 | - this.initFolderName(); | ||
266 | - this.dialog = false; | ||
267 | - } | ||
268 | - }, | ||
269 | - async moveF(move_folder_name){ | ||
270 | - try { | ||
271 | - const curData = { | ||
272 | - id : this.$store.state.id, | ||
273 | - cur: this.$store.state.cur + move_folder_name + '/' | ||
274 | - } | ||
275 | - const response = await folder(curData); | ||
276 | - console.log(response.data); | ||
277 | - this.$store.commit('setFolder', response.data.folders); | ||
278 | - this.$store.commit('setCur', response.data.cur); | ||
279 | - this.$store.commit('setParent', response.data.parentPath); | ||
280 | - this.folders = this.$store.getters.folderL; | ||
281 | - } catch (error) { | ||
282 | - console.log("에러"); | ||
283 | - console.log(error.response.data); | ||
284 | - } | ||
285 | - }, | ||
286 | - async moveParent(){ | ||
287 | - try { | ||
288 | - const cData = { | ||
289 | - id : this.$store.state.id, | ||
290 | - cur : this.$store.state.parent | ||
291 | - }; | ||
292 | - const response= await folder(cData); | ||
293 | - console.log(response.data); | ||
294 | - this.$store.commit('setFolder', response.data.folders); | ||
295 | - this.$store.commit('setCur', response.data.cur); | ||
296 | - this.$store.commit('setParent', response.data.parentPath); | ||
297 | - this.folders = this.$store.getters.folderL; | ||
298 | - } catch (error) { | ||
299 | - console.log("에러"); | ||
300 | - console.log(error.response.data); | ||
301 | - } | ||
302 | - }, | ||
303 | - async deleteF(){ | ||
304 | - try { | ||
305 | - const cData = { | ||
306 | - id: this.$store.state.id, | ||
307 | - cur : this.$store.state.cur, | ||
308 | - folder_name: this.curfName | ||
309 | - } | ||
310 | - const response = await deleteFolder(cData); | ||
311 | - console.log(response); | ||
312 | - this.$store.commit('setFolder', response.data.folders); | ||
313 | - this.folders = this.$store.getters.folderL; | ||
314 | - } catch (error) { | ||
315 | - console.log("에러"); | ||
316 | - console.log(error.response.data); | ||
317 | - } finally{ | ||
318 | - this.curfName = ''; | ||
319 | - } | ||
320 | - }, | ||
321 | - async transferF(folderName){ | ||
322 | - try { | ||
323 | - const cData = { | ||
324 | - id: this.$store.state.id, | ||
325 | - cur : this.$store.state.cur, | ||
326 | - folder_name: this.curfName, | ||
327 | - isfolder: true, | ||
328 | - newPath: this.$store.state.cur + folderName + '/' | ||
329 | - } | ||
330 | - const response = await moveFolder(cData); | ||
331 | - console.log(response); | ||
332 | - this.$store.commit('setFolder', response.data.folders); | ||
333 | - this.folders = this.$store.getters.folderL; | ||
334 | - } catch (error) { | ||
335 | - console.log("에러"); | ||
336 | - console.log(error.response.data); | ||
337 | - } finally{ | ||
338 | - this.initFolderName(); | ||
339 | - this.curfName = ''; | ||
340 | - this.dialog2 = false; | ||
341 | - } | ||
342 | - }, | ||
343 | - async upload_file(){ | ||
344 | - try{ | ||
345 | - const formData = new FormData(); | ||
346 | - formData.append('file', this.uploadedfile); | ||
347 | - formData.append('user_id', this.$store.state.id); | ||
348 | - formData.append('cur', this.$store.state.cur); | ||
349 | - const currentData={ | ||
350 | - id: this.$store.state.id, | ||
351 | - cur: this.$store.state.cur | ||
352 | - } | ||
353 | - console.log(currentData) | ||
354 | - const response = await uploadFile(formData); | ||
355 | - const filelist = await file(currentData); | ||
356 | - console.log(filelist.data.files); | ||
357 | - this.$store.commit('setFile', filelist.data.files); | ||
358 | - console.log(this.$store.getters.fileL); | ||
359 | - this.files = this.$store.getters.fileL;; | ||
360 | - | ||
361 | - }catch(error){ | ||
362 | - console.log("에러"); | ||
363 | - console.log(error); | ||
364 | - } | ||
365 | - }, | ||
366 | - async delete_file(itemName){ | ||
367 | - try{ | ||
368 | - var itemlist = this.$store.getters.fileL; | ||
369 | - console.log(itemlist) | ||
370 | - console.log(itemName) | ||
371 | - const currentData={ | ||
372 | - fileName : null, | ||
373 | - user_id: null, | ||
374 | - cur: this.$store.state.cur | ||
375 | - } | ||
376 | - | ||
377 | - for(var i=0; i<itemlist.length; i++){ | ||
378 | - console.log(itemlist[i].file_name) | ||
379 | - if(itemlist[i].file_name == itemName){ | ||
380 | - currentData.fileName = itemlist[i].file_name; | ||
381 | - currentData.user_id = itemlist[i].user_id; | ||
382 | - } | ||
383 | - } | ||
384 | - const filelistData={ | ||
385 | - id: currentData.user_id, | ||
386 | - cur: currentData.cur | ||
387 | - } | ||
388 | - console.log(currentData) | ||
389 | - const response = await deleteFile(currentData); | ||
390 | - setTimeout(function(){}, 500); | ||
391 | - const filelist = await file(filelistData); | ||
392 | - console.log(filelist.data.files); | ||
393 | - this.$store.commit('setFile', filelist.data.files); | ||
394 | - console.log(this.$store.getters.fileL); | ||
395 | - this.files = this.$store.getters.fileL;; | ||
396 | - }catch(error){ | ||
397 | - console.log("에러"); | ||
398 | - console.log(error); | ||
399 | - } | ||
400 | - }, | ||
401 | - async download_file(namedata){ | ||
402 | - try{ | ||
403 | - const currentData={ | ||
404 | - fileName : namedata, | ||
405 | - id: this.$store.state.id, | ||
406 | - cur: this.$store.state.cur | ||
407 | - } | ||
408 | - const result = await downloadFile(currentData); | ||
409 | - console.log(result) | ||
410 | 175 | ||
411 | - }catch(error){ | 176 | +export default { |
412 | - console.log("에러"); | 177 | + data() { |
413 | - console.log(error); | 178 | + return { |
414 | - } | 179 | + uploadedfile: null, |
415 | - } | 180 | + foldername: '', |
416 | - }, | 181 | + curfName: '', |
417 | - show (folderN, e) { | 182 | + folders: [], |
418 | - e.preventDefault() | 183 | + files: [], |
419 | - this.curfName = folderN; | 184 | + search: '', |
420 | - this.showMenu = false | 185 | + id: '', |
421 | - this.x = e.clientX | 186 | + dialog: false, |
422 | - this.y = e.clientY | 187 | + howMenu: false, |
423 | - this.$nextTick(() => { | 188 | + showMenu: false, |
424 | - this.showMenu = true | 189 | + x: 0, |
425 | - }) | 190 | + y: 0, |
426 | - } | 191 | + dialog2: false, |
192 | + detail: { | ||
193 | + dataname: null, | ||
194 | + date: null, | ||
195 | + owner_id: null, | ||
196 | + datasize: null, | ||
197 | + datatype: null, | ||
198 | + }, | ||
199 | + }; | ||
200 | + }, | ||
201 | + async created() { | ||
202 | + try { | ||
203 | + const curData = { | ||
204 | + id: this.$store.state.id, | ||
205 | + cur: '/', | ||
206 | + }; | ||
207 | + console.log(curData); | ||
208 | + const response = await folder(curData); | ||
209 | + const file_response = await file(curData); | ||
210 | + this.$store.commit('setFolder', response.data.folders); | ||
211 | + this.$store.commit('setCur', response.data.cur); | ||
212 | + this.$store.commit('setParent', response.data.parentPath); | ||
213 | + this.folders = this.$store.getters.folderL; | ||
214 | + this.$store.commit('setFile', file_response.data.files); | ||
215 | + this.folders = this.$store.getters.folderL; | ||
216 | + console.log(this.$store.getters.fileL); | ||
217 | + this.files = this.$store.getters.fileL; | ||
218 | + } catch (error) { | ||
219 | + console.log('에러'); | ||
220 | + console.log(error); | ||
221 | + } | ||
222 | + }, | ||
223 | + methods: { | ||
224 | + handleFileUpload() { | ||
225 | + this.uploadedfile = this.$refs.uploadedfile.files[0]; | ||
226 | + console.log(this.uploadedfile); | ||
227 | + }, | ||
228 | + initFolderName() { | ||
229 | + this.foldername = ''; | ||
230 | + }, | ||
231 | + cancelMove() { | ||
232 | + this.curfName = ''; | ||
233 | + this.dialog2 = false; | ||
234 | + }, | ||
235 | + async makeF() { | ||
236 | + try { | ||
237 | + const folderData = { | ||
238 | + user_id: this.$store.state.id, | ||
239 | + cur: this.$store.state.cur, | ||
240 | + folder_name: this.foldername, | ||
241 | + }; | ||
242 | + const response = await makeFolder(folderData); | ||
243 | + console.log(response.data); | ||
244 | + console.log('폴더 생성 완료'); | ||
245 | + this.$store.commit('setFolder', response.data.folders); | ||
246 | + this.folders = response.data.folders; | ||
247 | + } catch (error) { | ||
248 | + console.log('에러'); | ||
249 | + console.log(error.response.data); | ||
250 | + } finally { | ||
251 | + this.initFolderName(); | ||
252 | + this.dialog = false; | ||
253 | + } | ||
254 | + }, | ||
255 | + async moveF(move_folder_name) { | ||
256 | + try { | ||
257 | + const curData = { | ||
258 | + id: this.$store.state.id, | ||
259 | + cur: this.$store.state.cur + move_folder_name + '/', | ||
260 | + }; | ||
261 | + const response = await folder(curData); | ||
262 | + console.log(response.data); | ||
263 | + this.$store.commit('setFolder', response.data.folders); | ||
264 | + this.$store.commit('setCur', response.data.cur); | ||
265 | + this.$store.commit('setParent', response.data.parentPath); | ||
266 | + this.folders = this.$store.getters.folderL; | ||
267 | + } catch (error) { | ||
268 | + console.log('에러'); | ||
269 | + console.log(error.response.data); | ||
270 | + } | ||
271 | + }, | ||
272 | + async moveParent() { | ||
273 | + try { | ||
274 | + const cData = { | ||
275 | + id: this.$store.state.id, | ||
276 | + cur: this.$store.state.parent, | ||
277 | + }; | ||
278 | + const response = await folder(cData); | ||
279 | + console.log(response.data); | ||
280 | + this.$store.commit('setFolder', response.data.folders); | ||
281 | + this.$store.commit('setCur', response.data.cur); | ||
282 | + this.$store.commit('setParent', response.data.parentPath); | ||
283 | + this.folders = this.$store.getters.folderL; | ||
284 | + } catch (error) { | ||
285 | + console.log('에러'); | ||
286 | + console.log(error.response.data); | ||
287 | + } | ||
288 | + }, | ||
289 | + async deleteF() { | ||
290 | + try { | ||
291 | + const cData = { | ||
292 | + id: this.$store.state.id, | ||
293 | + cur: this.$store.state.cur, | ||
294 | + folder_name: this.curfName, | ||
295 | + }; | ||
296 | + const response = await deleteFolder(cData); | ||
297 | + console.log(response); | ||
298 | + this.$store.commit('setFolder', response.data.folders); | ||
299 | + this.folders = this.$store.getters.folderL; | ||
300 | + } catch (error) { | ||
301 | + console.log('에러'); | ||
302 | + console.log(error.response.data); | ||
303 | + } finally { | ||
304 | + this.curfName = ''; | ||
305 | + } | ||
306 | + }, | ||
307 | + async transferF(folderName) { | ||
308 | + try { | ||
309 | + const cData = { | ||
310 | + id: this.$store.state.id, | ||
311 | + cur: this.$store.state.cur, | ||
312 | + folder_name: this.curfName, | ||
313 | + isfolder: true, | ||
314 | + newPath: this.$store.state.cur + folderName + '/', | ||
315 | + }; | ||
316 | + const response = await moveFolder(cData); | ||
317 | + console.log(response); | ||
318 | + this.$store.commit('setFolder', response.data.folders); | ||
319 | + this.folders = this.$store.getters.folderL; | ||
320 | + } catch (error) { | ||
321 | + console.log('에러'); | ||
322 | + console.log(error.response.data); | ||
323 | + } finally { | ||
324 | + this.initFolderName(); | ||
325 | + this.curfName = ''; | ||
326 | + this.dialog2 = false; | ||
327 | + } | ||
328 | + }, | ||
329 | + async upload_file() { | ||
330 | + try { | ||
331 | + const formData = new FormData(); | ||
332 | + formData.append('file', this.uploadedfile); | ||
333 | + formData.append('user_id', this.$store.state.id); | ||
334 | + formData.append('cur', this.$store.state.cur); | ||
335 | + const currentData = { | ||
336 | + id: this.$store.state.id, | ||
337 | + cur: this.$store.state.cur, | ||
338 | + }; | ||
339 | + console.log(currentData); | ||
340 | + const response = await uploadFile(formData); | ||
341 | + const filelist = await file(currentData); | ||
342 | + console.log(filelist.data.files); | ||
343 | + this.$store.commit('setFile', filelist.data.files); | ||
344 | + console.log(this.$store.getters.fileL); | ||
345 | + this.files = this.$store.getters.fileL; | ||
346 | + } catch (error) { | ||
347 | + console.log('에러'); | ||
348 | + console.log(error); | ||
349 | + } | ||
350 | + }, | ||
351 | + async delete_file(itemName) { | ||
352 | + try { | ||
353 | + var itemlist = this.$store.getters.fileL; | ||
354 | + console.log(itemlist); | ||
355 | + console.log(itemName); | ||
356 | + const currentData = { | ||
357 | + fileName: null, | ||
358 | + user_id: null, | ||
359 | + cur: this.$store.state.cur, | ||
360 | + }; | ||
427 | 361 | ||
428 | - } | 362 | + for (var i = 0; i < itemlist.length; i++) { |
363 | + console.log(itemlist[i].file_name); | ||
364 | + if (itemlist[i].file_name == itemName) { | ||
365 | + currentData.fileName = itemlist[i].file_name; | ||
366 | + currentData.user_id = itemlist[i].user_id; | ||
367 | + } | ||
368 | + } | ||
369 | + const filelistData = { | ||
370 | + id: currentData.user_id, | ||
371 | + cur: currentData.cur, | ||
372 | + }; | ||
373 | + console.log(currentData); | ||
374 | + const response = await deleteFile(currentData); | ||
375 | + setTimeout(function() {}, 500); | ||
376 | + const filelist = await file(filelistData); | ||
377 | + console.log(filelist.data.files); | ||
378 | + this.$store.commit('setFile', filelist.data.files); | ||
379 | + console.log(this.$store.getters.fileL); | ||
380 | + this.files = this.$store.getters.fileL; | ||
381 | + } catch (error) { | ||
382 | + console.log('에러'); | ||
383 | + console.log(error); | ||
384 | + } | ||
385 | + }, | ||
386 | + async download_file(namedata) { | ||
387 | + try { | ||
388 | + const currentData = { | ||
389 | + fileName: namedata, | ||
390 | + id: this.$store.state.id, | ||
391 | + cur: this.$store.state.cur, | ||
392 | + }; | ||
393 | + const result = await downloadFile(currentData); | ||
394 | + console.log(result); | ||
395 | + } catch (error) { | ||
396 | + console.log('에러'); | ||
397 | + console.log(error); | ||
398 | + } | ||
399 | + }, | ||
400 | + }, | ||
401 | + show(folderN, e) { | ||
402 | + e.preventDefault(); | ||
403 | + this.curfName = folderN; | ||
404 | + this.showMenu = false; | ||
405 | + this.x = e.clientX; | ||
406 | + this.y = e.clientY; | ||
407 | + this.$nextTick(() => { | ||
408 | + this.showMenu = true; | ||
409 | + }); | ||
410 | + }, | ||
411 | +}; | ||
429 | </script> | 412 | </script> | ... | ... |
1 | <template> | 1 | <template> |
2 | - <v-app id="inspire"> | 2 | + <v-app id="inspire"> |
3 | - <v-navigation-drawer | 3 | + <v-navigation-drawer |
4 | - v-model="drawer" | 4 | + v-model="drawer" |
5 | - :clipped="$vuetify.breakpoint.lgAndUp" | 5 | + :clipped="$vuetify.breakpoint.lgAndUp" |
6 | - app | 6 | + app |
7 | - v-if="isUserLogin" | 7 | + v-if="isUserLogin" |
8 | - > | 8 | + > |
9 | - <v-list dense> | 9 | + <v-list dense> |
10 | - <v-list-item router :to="{name: 'Main'}" exact> | 10 | + <v-list-item router :to="{ name: 'Main' }" exact> |
11 | - <v-list-item-action> | 11 | + <v-list-item-action> |
12 | - <v-icon>mdi-home</v-icon> | 12 | + <v-icon>mdi-home</v-icon> |
13 | - </v-list-item-action> | 13 | + </v-list-item-action> |
14 | - <v-list-item-content> | 14 | + <v-list-item-content> |
15 | - <v-list-item-title>홈</v-list-item-title> | 15 | + <v-list-item-title>홈</v-list-item-title> |
16 | - </v-list-item-content> | 16 | + </v-list-item-content> |
17 | - </v-list-item> | 17 | + </v-list-item> |
18 | - <v-list-item router :to="{name: 'File'}" exact> | 18 | + <v-list-item router :to="{ name: 'File' }" exact> |
19 | - <v-list-item-action> | 19 | + <v-list-item-action> |
20 | - <v-icon>mdi-file</v-icon> | 20 | + <v-icon>mdi-file</v-icon> |
21 | - </v-list-item-action> | 21 | + </v-list-item-action> |
22 | - <v-list-item-content> | 22 | + <v-list-item-content> |
23 | - <v-list-item-title>파일</v-list-item-title> | 23 | + <v-list-item-title>파일</v-list-item-title> |
24 | - </v-list-item-content> | 24 | + </v-list-item-content> |
25 | - </v-list-item> | 25 | + </v-list-item> |
26 | - <v-list-item router :to="{name: 'Fav'}" exact> | 26 | + <v-list-item router :to="{ name: 'Fav' }" exact> |
27 | - <v-list-item-action> | 27 | + <v-list-item-action> |
28 | - <v-icon>mdi-heart</v-icon> | 28 | + <v-icon>mdi-heart</v-icon> |
29 | - </v-list-item-action> | 29 | + </v-list-item-action> |
30 | - <v-list-item-content> | 30 | + <v-list-item-content> |
31 | - <v-list-item-title>즐겨찾기</v-list-item-title> | 31 | + <v-list-item-title>즐겨찾기</v-list-item-title> |
32 | - </v-list-item-content> | 32 | + </v-list-item-content> |
33 | - </v-list-item> | 33 | + </v-list-item> |
34 | - <v-list-item router :to="{name: 'Quick'}" exact> | 34 | + <v-list-item router :to="{ name: 'Quick' }" exact> |
35 | - <v-list-item-action> | 35 | + <v-list-item-action> |
36 | - <v-icon>mdi-history</v-icon> | 36 | + <v-icon>mdi-history</v-icon> |
37 | - </v-list-item-action> | 37 | + </v-list-item-action> |
38 | - <v-list-item-content> | 38 | + <v-list-item-content> |
39 | - <v-list-item-title>빠른 액세스</v-list-item-title> | 39 | + <v-list-item-title>빠른 액세스</v-list-item-title> |
40 | - </v-list-item-content> | 40 | + </v-list-item-content> |
41 | - </v-list-item> | 41 | + </v-list-item> |
42 | - <v-list-item router :to="{name: 'Contact'}" exact> | 42 | + <v-list-item router :to="{ name: 'Contact' }" exact> |
43 | - <v-list-item-action> | 43 | + <v-list-item-action> |
44 | - <v-icon>mdi-contacts</v-icon> | 44 | + <v-icon>mdi-contacts</v-icon> |
45 | - </v-list-item-action> | 45 | + </v-list-item-action> |
46 | - <v-list-item-content> | 46 | + <v-list-item-content> |
47 | - <v-list-item-title>연락처</v-list-item-title> | 47 | + <v-list-item-title>연락처</v-list-item-title> |
48 | - </v-list-item-content> | 48 | + </v-list-item-content> |
49 | - </v-list-item> | 49 | + </v-list-item> |
50 | - <v-list-item router :to="{name: 'Main'}" exact> | 50 | + <v-list-item router :to="{ name: 'Main' }" exact> |
51 | - <v-list-item-action> | 51 | + <v-list-item-action> |
52 | - <v-icon>mdi-settings</v-icon> | 52 | + <v-icon>mdi-settings</v-icon> |
53 | - </v-list-item-action> | 53 | + </v-list-item-action> |
54 | - <v-list-item-content> | 54 | + <v-list-item-content> |
55 | - <v-list-item-title>설정</v-list-item-title> | 55 | + <v-list-item-title>설정</v-list-item-title> |
56 | - </v-list-item-content> | 56 | + </v-list-item-content> |
57 | - </v-list-item> | 57 | + </v-list-item> |
58 | - <v-list-item> | 58 | + <v-list-item> |
59 | - <v-list-item-action> | 59 | + <v-list-item-action> |
60 | - <v-icon>mdi-delete</v-icon> | 60 | + <v-icon>mdi-delete</v-icon> |
61 | - </v-list-item-action> | 61 | + </v-list-item-action> |
62 | - <v-list-item-content> | 62 | + <v-list-item-content> |
63 | - <v-list-item-title>휴지통</v-list-item-title> | 63 | + <v-list-item-title>휴지통</v-list-item-title> |
64 | - </v-list-item-content> | 64 | + </v-list-item-content> |
65 | - </v-list-item> | 65 | + </v-list-item> |
66 | - <v-list-item router :to="{name: 'Feedback'}" exact> | 66 | + <v-list-item router :to="{ name: 'Feedback' }" exact> |
67 | - <v-list-item-action> | 67 | + <v-list-item-action> |
68 | - <v-icon>mdi-message</v-icon> | 68 | + <v-icon>mdi-message</v-icon> |
69 | - </v-list-item-action> | 69 | + </v-list-item-action> |
70 | - <v-list-item-content> | 70 | + <v-list-item-content> |
71 | - <v-list-item-title>피드백</v-list-item-title> | 71 | + <v-list-item-title>피드백</v-list-item-title> |
72 | - </v-list-item-content> | 72 | + </v-list-item-content> |
73 | - </v-list-item> | 73 | + </v-list-item> |
74 | - <v-list-item router :to="{name: 'Main'}" exact> | 74 | + <v-list-item router :to="{ name: 'Main' }" exact> |
75 | - <v-list-item-action> | 75 | + <v-list-item-action> |
76 | - <v-icon>mdi-help-circle</v-icon> | 76 | + <v-icon>mdi-help-circle</v-icon> |
77 | - </v-list-item-action> | 77 | + </v-list-item-action> |
78 | - <v-list-item-content> | 78 | + <v-list-item-content> |
79 | - <v-list-item-title>도움말</v-list-item-title> | 79 | + <v-list-item-title>도움말</v-list-item-title> |
80 | - </v-list-item-content> | 80 | + </v-list-item-content> |
81 | - </v-list-item> | 81 | + </v-list-item> |
82 | - </v-list> | 82 | + </v-list> |
83 | - </v-navigation-drawer> | 83 | + </v-navigation-drawer> |
84 | - | ||
85 | 84 | ||
86 | - <v-app-bar | 85 | + <v-app-bar |
87 | - :clipped-left="$vuetify.breakpoint.lgAndUp" | 86 | + :clipped-left="$vuetify.breakpoint.lgAndUp" |
88 | - app | 87 | + app |
89 | - color="blue darken-3" | 88 | + color="blue darken-3" |
90 | - dark | 89 | + dark |
91 | - > | 90 | + > |
92 | - | 91 | + <v-app-bar-nav-icon |
93 | - <v-app-bar-nav-icon @click.stop="drawer = !drawer" v-if="isUserLogin"></v-app-bar-nav-icon> | 92 | + @click.stop="drawer = !drawer" |
94 | - <v-toolbar-title | 93 | + v-if="isUserLogin" |
95 | - style="width: 300px" | 94 | + ></v-app-bar-nav-icon> |
96 | - class="ml-0 pl-4" | 95 | + <v-toolbar-title style="width: 300px" class="ml-0 pl-4"> |
97 | - > | 96 | + <span class="hidden-sm-and-down">KhuLoud</span> |
98 | - <span class="hidden-sm-and-down">KhuLoud</span> | 97 | + </v-toolbar-title> |
99 | - </v-toolbar-title> | 98 | + <template v-if="isUserLogin"> |
100 | - <template v-if="isUserLogin"> | 99 | + <v-text-field |
101 | - <v-text-field | 100 | + flat |
102 | - flat | 101 | + solo-inverted |
103 | - solo-inverted | 102 | + hide-details |
104 | - hide-details | 103 | + prepend-inner-icon="mdi-magnify" |
105 | - prepend-inner-icon="mdi-magnify" | 104 | + label="전체 검색" |
106 | - label="전체 검색" | 105 | + class="hidden-sm-and-down" |
107 | - class="hidden-sm-and-down" | 106 | + ></v-text-field> |
108 | - ></v-text-field> | 107 | + </template> |
109 | - </template> | 108 | + <template v-else> |
110 | - <template v-else> | 109 | + <div></div> |
111 | - <div></div> | 110 | + </template> |
112 | - </template> | 111 | + <v-spacer></v-spacer> |
113 | - <v-spacer></v-spacer> | 112 | + <template v-if="isUserLogin"> |
114 | - <template v-if="isUserLogin"> | 113 | + <v-btn icon @click="logoutUser"> |
115 | - <v-btn icon @click = "logoutUser"> | 114 | + <v-icon>mdi-login</v-icon> |
116 | - <v-icon>mdi-login</v-icon> | 115 | + </v-btn> |
117 | - </v-btn> | 116 | + </template> |
118 | - </template> | 117 | + <template v-else> |
119 | - <template v-else> | 118 | + <v-btn icon @click="$router.push({ name: 'Login' })"> |
120 | - <v-btn icon @click = "$router.push({name: 'Login'})"> | 119 | + <v-icon>mdi-login</v-icon> |
121 | - <v-icon>mdi-login</v-icon> | 120 | + </v-btn> |
122 | - </v-btn> | 121 | + <v-btn icon @click="$router.push({ name: 'RegistUser' })"> |
123 | - <v-btn icon @click = "$router.push({name: 'RegistUser'})"> | 122 | + <v-icon>mdi-account</v-icon> |
124 | - <v-icon>mdi-account</v-icon> | 123 | + </v-btn> |
125 | - </v-btn> | 124 | + </template> |
126 | - </template> | 125 | + </v-app-bar> |
127 | - </v-app-bar> | 126 | + <v-content> |
128 | - <v-content> | 127 | + <v-container> |
129 | - <v-container | 128 | + <router-view></router-view> |
130 | - | 129 | + </v-container> |
131 | - > | 130 | + </v-content> |
132 | - <router-view></router-view> | 131 | + </v-app> |
133 | - </v-container> | ||
134 | - </v-content> | ||
135 | - </v-app> | ||
136 | </template> | 132 | </template> |
137 | 133 | ||
138 | <script> | 134 | <script> |
139 | export default { | 135 | export default { |
140 | - data: () => ({ | 136 | + data: () => ({ |
141 | - dialog: false, | 137 | + dialog: false, |
142 | - drawer: null, | 138 | + drawer: null, |
143 | - items: [ | 139 | + items: [ |
144 | - { icon: 'mdi-home', text: '홈' }, | 140 | + { icon: 'mdi-home', text: '홈' }, |
145 | - { icon: 'mdi-file', text: '파일' }, | 141 | + { icon: 'mdi-file', text: '파일' }, |
146 | - { icon: 'mdi-heart', text: '즐겨찾기' }, | 142 | + { icon: 'mdi-heart', text: '즐겨찾기' }, |
147 | - { icon: 'mdi-history', text: '빠른 액세스'}, | 143 | + { icon: 'mdi-history', text: '빠른 액세스' }, |
148 | - { icon: 'mdi-contacts', text: '연락처' }, | 144 | + { icon: 'mdi-contacts', text: '연락처' }, |
149 | - { icon: 'mdi-settings', text: '설정' }, | 145 | + { icon: 'mdi-settings', text: '설정' }, |
150 | - { icon: 'mdi-message', text: '피드백' }, | 146 | + { icon: 'mdi-message', text: '피드백' }, |
151 | - { icon: 'mdi-help-circle', text: '도움말' }, | 147 | + { icon: 'mdi-help-circle', text: '도움말' }, |
152 | - ], | 148 | + ], |
153 | - }), | 149 | + }), |
154 | - computed: { | 150 | + computed: { |
155 | - isUserLogin(){ | 151 | + isUserLogin() { |
156 | - return this.$store.getters.isLogin; | 152 | + return this.$store.getters.isLogin; |
157 | - }, | 153 | + }, |
158 | - }, | 154 | + }, |
159 | - methods: { | 155 | + methods: { |
160 | - logoutUser(){ | 156 | + logoutUser() { |
161 | - this.$store.commit('clearid'); | 157 | + this.$store.commit('clearid'); |
162 | - this.$router.push('/'); | 158 | + this.$router.push('/'); |
163 | - } | 159 | + }, |
164 | - } | 160 | + }, |
165 | -} | 161 | +}; |
166 | </script> | 162 | </script> |
167 | 163 | ||
168 | -<style> | ||
169 | - | ||
170 | -</style> | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
164 | +<style></style> | ... | ... |
1 | -import Vue from 'vue' | 1 | +import Vue from 'vue'; |
2 | -import VueRouter from 'vue-router' | 2 | +import VueRouter from 'vue-router'; |
3 | // import Home from '../views/Home.vue' | 3 | // import Home from '../views/Home.vue' |
4 | // import Login from '../views/Login.vue' | 4 | // import Login from '../views/Login.vue' |
5 | // import Main from '../views/Main.vue' | 5 | // import Main from '../views/Main.vue' |
... | @@ -12,65 +12,64 @@ import VueRouter from 'vue-router' | ... | @@ -12,65 +12,64 @@ import VueRouter from 'vue-router' |
12 | // import RegistUser from '../views/RegistUser' | 12 | // import RegistUser from '../views/RegistUser' |
13 | Vue.use(VueRouter); | 13 | Vue.use(VueRouter); |
14 | 14 | ||
15 | +export default new VueRouter({ | ||
16 | + mode: 'history', | ||
15 | 17 | ||
16 | - | 18 | + base: process.env.BASE_URL, |
17 | -export default new VueRouter ({ | 19 | + routes: [ |
18 | - mode: 'history', | 20 | + { |
19 | - base: process.env.BASE_URL, | 21 | + path: '/', |
20 | - routes : [ | 22 | + redirect: '/Login', |
21 | - { | 23 | + }, |
22 | - path: '/', | 24 | + { |
23 | - redirect: '/Login' | 25 | + path: '/home', |
24 | - }, | 26 | + name: 'Home', |
25 | - { | 27 | + component: () => import('../views/Home.vue'), |
26 | - path: '/home', | 28 | + }, |
27 | - name: 'Home', | 29 | + { |
28 | - component: () => import('../views/Home.vue') | 30 | + path: '/main', |
29 | - }, | 31 | + name: 'Main', |
30 | - { | 32 | + component: () => import('../views/Main.vue'), |
31 | - path: '/main', | 33 | + }, |
32 | - name:'Main', | 34 | + { |
33 | - component: () => import('../views/Main.vue') | 35 | + path: '/contact', |
34 | - }, | 36 | + name: 'Contact', |
35 | - { | 37 | + component: () => import('../views/Contact.vue'), |
36 | - path: '/contact', | 38 | + }, |
37 | - name:'Contact', | 39 | + { |
38 | - component: () => import('../views/Contact.vue') | 40 | + path: '/registuser', |
39 | - }, | 41 | + name: 'RegistUser', |
40 | - { | 42 | + component: () => import('../views/SignupPage.vue'), |
41 | - path: '/registuser', | 43 | + }, |
42 | - name: 'RegistUser', | 44 | + { |
43 | - component: () => import('../views/SignupPage.vue') | 45 | + path: '/login', |
44 | - }, | 46 | + name: 'Login', |
45 | - { | 47 | + component: () => import('../views/LoginPage.vue'), |
46 | - path: '/login', | 48 | + }, |
47 | - name: 'Login', | 49 | + { |
48 | - component: () => import('../views/LoginPage.vue') | 50 | + path: '/file', |
49 | - }, | 51 | + name: 'File', |
50 | - { | 52 | + component: () => import('../views/File.vue'), |
51 | - path:'/file', | 53 | + }, |
52 | - name:'File', | 54 | + { |
53 | - component: () => import('../views/File.vue') | 55 | + path: '/fav', |
54 | - }, | 56 | + name: 'Fav', |
55 | - { | 57 | + component: () => import('../views/FavList.vue'), |
56 | - path:'/fav', | 58 | + }, |
57 | - name:'Fav', | 59 | + { |
58 | - component: () => import('../views/FavList.vue') | 60 | + path: '/quick', |
59 | - }, | 61 | + name: 'Quick', |
60 | - { | 62 | + component: () => import('../views/QuickList.vue'), |
61 | - path:'/quick', | 63 | + }, |
62 | - name:'Quick', | 64 | + { |
63 | - component : () => import('../views/QuickList.vue') | 65 | + path: '/feedback', |
64 | - }, | 66 | + name: 'Feedback', |
65 | - { | 67 | + component: () => import('../views/Feedback.vue'), |
66 | - path:'/feedback', | 68 | + }, |
67 | - name:'Feedback', | 69 | + { |
68 | - component: () => import('../views/Feedback.vue') | 70 | + path: '/folder', |
69 | - }, | 71 | + name: 'Folder', |
70 | - { | 72 | + component: () => import('../views/FolderPage.vue'), |
71 | - path: '/folder', | 73 | + }, |
72 | - name: 'Folder', | 74 | + ], |
73 | - component: () => import('../views/FolderPage.vue') | 75 | +}); |
74 | - }, | ||
75 | - ] | ||
76 | -}) | ... | ... |
-
Please register or login to post a comment