2020-1-CloudComputing / D_Team_Khuloud

Go to a project
Toggle navigation Toggle navigation pinning
최동원
ea776bf5 1 parent 30a63a68

file transfer,favorite

Inline Side-by-side
Showing 3 changed files with 220 additions and 23 deletions
...@@ -139,7 +139,7 @@ router.post('/delfile', function(req, res, next) { ...@@ -139,7 +139,7 @@ router.post('/delfile', function(req, res, next) {
139 let cur = req.body.cur; 139 let cur = req.body.cur;
140 let checkfile = 'SELECT * FROM files WHERE location = ? AND user_id = ? AND file_name = ? AND favorite = 1;'; 140 let checkfile = 'SELECT * FROM files WHERE location = ? AND user_id = ? AND file_name = ? AND favorite = 1;';
141 141
142 - connection.query(checkfile, [user_id, file_name], function(err, rows, fields) { 142 + connection.query(checkfile, [cur,user_id, file_name], function(err, rows, fields) {
143 if (err) { 143 if (err) {
144 console.log('select error'); 144 console.log('select error');
145 res.status(400).send({ error: err }); 145 res.status(400).send({ error: err });
......
...@@ -88,6 +88,18 @@ function addFavorite(folderData) { ...@@ -88,6 +88,18 @@ function addFavorite(folderData) {
88 return axios.post('api/favorites/addfolder', folderData); 88 return axios.post('api/favorites/addfolder', folderData);
89 } 89 }
90 90
91 +function moveFile(fileData) {
92 + return axios.post('/api/folder/move', fileData);
93 +}
94 +
95 +function delFavoriteFile(fileData) {
96 + return axios.post('api/favorites/delfile', fileData);
97 +}
98 +
99 +function addFavoriteFile(fileData) {
100 + return axios.post('api/favorites/addfile', fileData);
101 +}
102 +
91 export { 103 export {
92 registerUser, 104 registerUser,
93 loginUser, 105 loginUser,
...@@ -101,4 +113,7 @@ export { ...@@ -101,4 +113,7 @@ export {
101 downloadFile, 113 downloadFile,
102 delFavorite, 114 delFavorite,
103 addFavorite, 115 addFavorite,
116 + moveFile,
117 + delFavoriteFile,
118 + addFavoriteFile,
104 }; 119 };
......
1 <template> 1 <template>
2 <div> 2 <div>
3 <v-toolbar flat> 3 <v-toolbar flat>
4 - <v-toolbar-title>파일 </v-toolbar-title> 4 + <v-toolbar-title>내 드라이브</v-toolbar-title>
5 <v-spacer></v-spacer> 5 <v-spacer></v-spacer>
6 <v-text-field 6 <v-text-field
7 v-model="search" 7 v-model="search"
8 append-icon="mdi-magnify" 8 append-icon="mdi-magnify"
9 - label="파일 검색" 9 + label="검색"
10 single-line 10 single-line
11 hide-details 11 hide-details
12 ></v-text-field> 12 ></v-text-field>
13 </v-toolbar> 13 </v-toolbar>
14 <v-list two-line subheader> 14 <v-list two-line subheader>
15 - <v-subheader inset>Folders</v-subheader> 15 + <!-- <v-subheader inset>Folders</v-subheader> -->
16 + <!-- Folder view -->
16 <v-list-item v-if="this.$store.state.cur !== '/'" @click="moveParent" 17 <v-list-item v-if="this.$store.state.cur !== '/'" @click="moveParent"
17 >...</v-list-item 18 >...</v-list-item
18 > 19 >
...@@ -21,7 +22,8 @@ ...@@ -21,7 +22,8 @@
21 :key="item.title" 22 :key="item.title"
22 :search="search" 23 :search="search"
23 @click.right="show(item, $event)" 24 @click.right="show(item, $event)"
24 - @click.left="moveF(item.folder_name)" 25 + @click=""
26 + @dblclick="moveF(item.folder_name)"
25 > 27 >
26 <v-list-item-avatar> 28 <v-list-item-avatar>
27 <v-icon>mdi-folder</v-icon> 29 <v-icon>mdi-folder</v-icon>
...@@ -30,19 +32,22 @@ ...@@ -30,19 +32,22 @@
30 <v-list-item-title v-text="item.folder_name"></v-list-item-title> 32 <v-list-item-title v-text="item.folder_name"></v-list-item-title>
31 </v-list-item-content> 33 </v-list-item-content>
32 <v-list-item-action> 34 <v-list-item-action>
33 - <v-icon v-if="item.favorite === 0" color="grey lighten-1"> 35 + <v-icon v-if="item.favorite === 0">
34 - mdi-star-border 36 + mdi-star-outline
35 </v-icon> 37 </v-icon>
36 38
37 - <v-icon v-else color="yellow"> 39 + <v-icon v-else>
38 mdi-star 40 mdi-star
39 </v-icon> 41 </v-icon>
40 </v-list-item-action> 42 </v-list-item-action>
41 </v-list-item> 43 </v-list-item>
42 - 44 + <!-- File view -->
43 - <v-divider inset></v-divider> 45 + <v-list-item
44 - <v-subheader inset>Files</v-subheader> 46 + v-for="item in this.$store.getters.fileL"
45 - <v-list-item v-for="item in this.$store.getters.fileL" :key="item.title"> 47 + :key="item.title"
48 + @click.right="showF(item, $event)"
49 + @click=""
50 + >
46 <v-list-item-avatar> 51 <v-list-item-avatar>
47 <v-icon> mdi-file</v-icon> 52 <v-icon> mdi-file</v-icon>
48 </v-list-item-avatar> 53 </v-list-item-avatar>
...@@ -50,16 +55,18 @@ ...@@ -50,16 +55,18 @@
50 <v-list-item-title v-text="item.file_name"></v-list-item-title> 55 <v-list-item-title v-text="item.file_name"></v-list-item-title>
51 </v-list-item-content> 56 </v-list-item-content>
52 <v-list-item-action> 57 <v-list-item-action>
53 - <v-btn icon @click="download_file(item.file_name)"> 58 + <v-icon v-if="item.favorite === 0">
54 - <v-icon color="grey lighten-1">mdi-download</v-icon> 59 + mdi-star-outline
55 - </v-btn> 60 + </v-icon>
56 - <v-btn icon @click="delete_file(item.file_name)"> 61 +
57 - <v-icon color="grey lighten-1">mdi-delete</v-icon> 62 + <v-icon v-else>
58 - </v-btn> 63 + mdi-star
64 + </v-icon>
59 </v-list-item-action> 65 </v-list-item-action>
60 </v-list-item> 66 </v-list-item>
61 </v-list> 67 </v-list>
62 68
69 + <!-- Move Folder -->
63 <v-dialog v-model="dialog2" width="500px"> 70 <v-dialog v-model="dialog2" width="500px">
64 <v-card> 71 <v-card>
65 <v-card-title class="grey darken-2"> 72 <v-card-title class="grey darken-2">
...@@ -91,6 +98,7 @@ ...@@ -91,6 +98,7 @@
91 </v-card> 98 </v-card>
92 </v-dialog> 99 </v-dialog>
93 100
101 + <!-- sub menu for folder -->
94 <v-menu 102 <v-menu
95 v-model="showMenu" 103 v-model="showMenu"
96 :position-x="x" 104 :position-x="x"
...@@ -100,16 +108,122 @@ ...@@ -100,16 +108,122 @@
100 > 108 >
101 <v-list dense> 109 <v-list dense>
102 <v-list-item @click.prevent="dialog2 = !dialog2"> 110 <v-list-item @click.prevent="dialog2 = !dialog2">
103 - <v-list-item-title>이동</v-list-item-title> 111 + <v-list-item-icon>
112 + <v-icon>mdi-send</v-icon>
113 + </v-list-item-icon>
114 + <v-list-item-content>
115 + <v-list-item-title>이동</v-list-item-title>
116 + </v-list-item-content>
104 </v-list-item> 117 </v-list-item>
105 <v-list-item @click.prevent="deleteF"> 118 <v-list-item @click.prevent="deleteF">
106 - <v-list-item-title>삭제</v-list-item-title> 119 + <v-list-item-icon>
120 + <v-icon>mdi-delete</v-icon>
121 + </v-list-item-icon>
122 + <v-list-item-content>
123 + <v-list-item-title>삭제</v-list-item-title>
124 + </v-list-item-content>
107 </v-list-item> 125 </v-list-item>
108 <v-list-item v-if="curfName.favorite === 1" @click="delete_favorite"> 126 <v-list-item v-if="curfName.favorite === 1" @click="delete_favorite">
109 - <v-list-item-title>즐겨 찾기 삭제</v-list-item-title> 127 + <v-list-item-icon>
128 + <v-icon>mdi-star-outline</v-icon>
129 + </v-list-item-icon>
130 + <v-list-item-content>
131 + <v-list-item-title>즐겨 찾기 삭제</v-list-item-title>
132 + </v-list-item-content>
110 </v-list-item> 133 </v-list-item>
111 <v-list-item v-if="curfName.favorite === 0" @click="add_favorite"> 134 <v-list-item v-if="curfName.favorite === 0" @click="add_favorite">
112 - <v-list-item-title>즐겨 찾기 추가</v-list-item-title> 135 + <v-list-item-icon>
136 + <v-icon>mdi-star</v-icon>
137 + </v-list-item-icon>
138 + <v-list-item-content>
139 + <v-list-item-title>즐겨 찾기 추가</v-list-item-title>
140 + </v-list-item-content>
141 + </v-list-item>
142 + </v-list>
143 + </v-menu>
144 + <!-- -->
145 + <!-- Move File -->
146 + <v-dialog v-model="dialog3" width="500px">
147 + <v-card>
148 + <v-card-title class="grey darken-2">
149 + Move File
150 + </v-card-title>
151 + <v-container>
152 + <v-list>
153 + <v-list-item
154 + v-for="item2 in folders"
155 + :key="item2.folder_id"
156 + @click.left="transferFile(item2.folder_name)"
157 + >
158 + <v-list-item-avatar>
159 + <v-icon>mdi-folder</v-icon>
160 + </v-list-item-avatar>
161 + <v-list-item-content>
162 + <v-list-item-title
163 + v-text="item2.folder_name"
164 + ></v-list-item-title>
165 + </v-list-item-content>
166 + </v-list-item>
167 + </v-list>
168 + </v-container>
169 + <v-card-actions>
170 + <v-spacer></v-spacer>
171 + <v-btn text color="primary" @click="cancelMove">Cancel</v-btn>
172 + </v-card-actions>
173 + </v-card>
174 + </v-dialog>
175 +
176 + <!-- sub menu for file -->
177 + <v-menu
178 + v-model="showMenuF"
179 + :position-x="x"
180 + :position-y="y"
181 + absolute
182 + offset-y
183 + >
184 + <v-list dense>
185 + <v-list-item @click.prevent="dialog3 = !dialog3">
186 + <v-list-item-icon>
187 + <v-icon>mdi-send</v-icon>
188 + </v-list-item-icon>
189 + <v-list-item-content>
190 + <v-list-item-title>이동</v-list-item-title>
191 + </v-list-item-content>
192 + </v-list-item>
193 + <v-list-item @click.prevent="deleteF">
194 + <v-list-item-icon>
195 + <v-icon>mdi-delete</v-icon>
196 + </v-list-item-icon>
197 + <v-list-item-content>
198 + <v-list-item-title>삭제</v-list-item-title>
199 + </v-list-item-content>
200 + </v-list-item>
201 + <v-list-item @click.prevent="deleteF">
202 + <v-list-item-icon>
203 + <v-icon>mdi-download</v-icon>
204 + </v-list-item-icon>
205 + <v-list-item-content>
206 + <v-list-item-title>다운로드</v-list-item-title>
207 + </v-list-item-content>
208 + </v-list-item>
209 + <v-list-item
210 + v-if="cfilename.favorite === 1"
211 + @click="delete_favorite_file"
212 + >
213 + <v-list-item-icon>
214 + <v-icon>mdi-star-outline</v-icon>
215 + </v-list-item-icon>
216 + <v-list-item-content>
217 + <v-list-item-title>즐겨 찾기 삭제</v-list-item-title>
218 + </v-list-item-content>
219 + </v-list-item>
220 + <v-list-item v-if="cfilename.favorite === 0" @click="add_favorite_file">
221 + <v-list-item-icon>
222 + <v-icon>mdi-star</v-icon>
223 + </v-list-item-icon>
224 + <v-list-item-content>
225 + <v-list-item-title>즐겨 찾기 추가</v-list-item-title>
226 + </v-list-item-content>
113 </v-list-item> 227 </v-list-item>
114 </v-list> 228 </v-list>
115 </v-menu> 229 </v-menu>
...@@ -125,6 +239,8 @@ ...@@ -125,6 +239,8 @@
125 <v-btn bottom color="blue" dark fab fixed right @click="dialog = !dialog"> 239 <v-btn bottom color="blue" dark fab fixed right @click="dialog = !dialog">
126 <v-icon>mdi-plus</v-icon> 240 <v-icon>mdi-plus</v-icon>
127 </v-btn> 241 </v-btn>
242 +
243 + <!-- Create Folder -->
128 <v-dialog v-model="dialog" width="500px"> 244 <v-dialog v-model="dialog" width="500px">
129 <v-card> 245 <v-card>
130 <v-card-title class="grey darken-2"> 246 <v-card-title class="grey darken-2">
...@@ -162,6 +278,9 @@ import { ...@@ -162,6 +278,9 @@ import {
162 downloadFile, 278 downloadFile,
163 delFavorite, 279 delFavorite,
164 addFavorite, 280 addFavorite,
281 + moveFile,
282 + delFavoriteFile,
283 + addFavoriteFile,
165 } from '../api/index'; 284 } from '../api/index';
166 import Axios from 'axios'; 285 import Axios from 'axios';
167 286
...@@ -171,6 +290,7 @@ export default { ...@@ -171,6 +290,7 @@ export default {
171 uploadedfile: null, 290 uploadedfile: null,
172 foldername: '', 291 foldername: '',
173 curfName: {}, 292 curfName: {},
293 + cfilename: {},
174 folders: [], 294 folders: [],
175 files: [], 295 files: [],
176 search: '', 296 search: '',
...@@ -178,9 +298,11 @@ export default { ...@@ -178,9 +298,11 @@ export default {
178 dialog: false, 298 dialog: false,
179 howMenu: false, 299 howMenu: false,
180 showMenu: false, 300 showMenu: false,
301 + showMenuF: false, //파일 관련 메뉴
181 x: 0, 302 x: 0,
182 y: 0, 303 y: 0,
183 dialog2: false, 304 dialog2: false,
305 + dialog3: false, //파일 관련 메뉴
184 detail: { 306 detail: {
185 dataname: null, 307 dataname: null,
186 date: null, 308 date: null,
...@@ -221,7 +343,9 @@ export default { ...@@ -221,7 +343,9 @@ export default {
221 }, 343 },
222 cancelMove() { 344 cancelMove() {
223 this.curfName = {}; 345 this.curfName = {};
346 + this.cfilename = {};
224 this.dialog2 = false; 347 this.dialog2 = false;
348 + this.dialog3 = false;
225 }, 349 },
226 async makeF() { 350 async makeF() {
227 try { 351 try {
...@@ -318,7 +442,6 @@ export default { ...@@ -318,7 +442,6 @@ export default {
318 console.log('에러'); 442 console.log('에러');
319 console.log(error.response.data); 443 console.log(error.response.data);
320 } finally { 444 } finally {
321 - this.initFolderName();
322 this.curfName = {}; 445 this.curfName = {};
323 this.dialog2 = false; 446 this.dialog2 = false;
324 } 447 }
...@@ -422,6 +545,55 @@ export default { ...@@ -422,6 +545,55 @@ export default {
422 console.log('에러'); 545 console.log('에러');
423 } 546 }
424 }, 547 },
548 + async delete_favorite_file() {
549 + try {
550 + const fData = {
551 + id: this.$store.state.id,
552 + cur: this.$store.state.cur,
553 + name: this.cfilename.file_name,
554 + };
555 + console.log(fData);
556 + const response = await delFavoriteFile(fData);
557 + this.$store.commit('setFile', response.data.files);
558 + } catch (error) {
559 + console.log('에러');
560 + }
561 + },
562 + async add_favorite_file() {
563 + try {
564 + const fData = {
565 + id: this.$store.state.id,
566 + cur: this.$store.state.cur,
567 + name: this.cfilename.file_name,
568 + };
569 + console.log(fData);
570 + const response = await addFavoriteFile(fData);
571 + this.$store.commit('setFile', response.data.files);
572 + } catch (error) {
573 + console.log('에러');
574 + }
575 + },
576 + async transferFile(folderName) {
577 + try {
578 + const fData = {
579 + id: this.$store.state.id,
580 + cur: this.$store.state.cur,
581 + name: this.cfilename.file_name,
582 + isfolder: false,
583 + newPath: this.$store.state.cur + folderName + '/',
584 + };
585 + const response = await moveFile(fData);
586 + console.log(response);
587 + this.$store.commit('setFile', response.data.files);
588 + this.files = this.$store.getters.fileL;
589 + } catch (error) {
590 + console.log('에러');
591 + console.log(error.response.data);
592 + } finally {
593 + this.cfilename = {};
594 + this.dialog3 = false;
595 + }
596 + },
425 show(folderObj, e) { 597 show(folderObj, e) {
426 e.preventDefault(); 598 e.preventDefault();
427 this.curfName = folderObj; 599 this.curfName = folderObj;
...@@ -432,6 +604,16 @@ export default { ...@@ -432,6 +604,16 @@ export default {
432 this.showMenu = true; 604 this.showMenu = true;
433 }); 605 });
434 }, 606 },
607 + showF(fileObj, e) {
608 + e.preventDefault();
609 + this.cfilename = fileObj;
610 + this.showMenuF = false;
611 + this.x = e.clientX;
612 + this.y = e.clientY;
613 + this.$nextTick(() => {
614 + this.showMenuF = true;
615 + });
616 + },
435 }, 617 },
436 }; 618 };
437 </script> 619 </script>
......