Showing
7 changed files
with
143 additions
and
38 deletions
... | @@ -9,6 +9,7 @@ | ... | @@ -9,6 +9,7 @@ |
9 | <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"> | 9 | <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"> |
10 | <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css"> | 10 | <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css"> |
11 | <meta name="viewport" content="width=device-width,initial-scale=1.0"> | 11 | <meta name="viewport" content="width=device-width,initial-scale=1.0"> |
12 | + <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css" integrity="본인 api키" crossorigin="anonymous"> | ||
12 | </head> | 13 | </head> |
13 | <body> | 14 | <body> |
14 | <noscript> | 15 | <noscript> | ... | ... |
... | @@ -3,19 +3,35 @@ | ... | @@ -3,19 +3,35 @@ |
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 | ||
7 | + v-model="search" | ||
8 | + append-icon="mdi-magnify" | ||
9 | + label="검색" | ||
10 | + single-line | ||
11 | + hide-details | ||
12 | + ></v-text-field> | ||
6 | </v-toolbar> | 13 | </v-toolbar> |
7 | <v-list two-line subheader> | 14 | <v-list two-line subheader> |
8 | <!-- <v-subheader inset>Folders</v-subheader> --> | 15 | <!-- <v-subheader inset>Folders</v-subheader> --> |
9 | <!-- Folder view --> | 16 | <!-- Folder view --> |
10 | - <v-list-item v-if="this.$store.state.cur !== '/'" @click="moveParent" | 17 | + <v-list-item |
18 | + v-if="this.$route.path !== '/fav'" | ||
19 | + @click="" | ||
20 | + @dblclick="$router.go(-1)" | ||
11 | >...</v-list-item | 21 | >...</v-list-item |
12 | > | 22 | > |
13 | <v-list-item | 23 | <v-list-item |
14 | v-for="item in this.$store.getters.favFolderL" | 24 | v-for="item in this.$store.getters.favFolderL" |
15 | - :key="item.title" | 25 | + :key="item.folder_id" |
26 | + :search="search" | ||
16 | @click.right="show(item, $event)" | 27 | @click.right="show(item, $event)" |
17 | @click="" | 28 | @click="" |
18 | - @dblclick="$router.push(`/file/${item.folder_id}`)" | 29 | + @dblclick=" |
30 | + $router.push({ | ||
31 | + name: 'Folder', | ||
32 | + params: { id: item.folder_id }, | ||
33 | + }) | ||
34 | + " | ||
19 | > | 35 | > |
20 | <v-list-item-avatar> | 36 | <v-list-item-avatar> |
21 | <v-icon>mdi-folder</v-icon> | 37 | <v-icon>mdi-folder</v-icon> |
... | @@ -34,7 +50,7 @@ | ... | @@ -34,7 +50,7 @@ |
34 | </v-list-item> | 50 | </v-list-item> |
35 | <!-- File view --> | 51 | <!-- File view --> |
36 | <v-list-item | 52 | <v-list-item |
37 | - v-for="item in this.$store.getters.favFileL" | 53 | + v-for="item in this.$store.getters.faveFileL" |
38 | :key="item.title" | 54 | :key="item.title" |
39 | @click.right="showF(item, $event)" | 55 | @click.right="showF(item, $event)" |
40 | @dblclick=" | 56 | @dblclick=" |
... | @@ -264,18 +280,21 @@ import { | ... | @@ -264,18 +280,21 @@ import { |
264 | getFavoriteList, | 280 | getFavoriteList, |
265 | } from '../api/index'; | 281 | } from '../api/index'; |
266 | import Axios from 'axios'; | 282 | import Axios from 'axios'; |
283 | + | ||
267 | export default { | 284 | export default { |
268 | props: { | 285 | props: { |
269 | - folderId: Object, | 286 | + folderId: Number, |
270 | }, | 287 | }, |
271 | data() { | 288 | data() { |
272 | return { | 289 | return { |
290 | + folder_id: this.$route.params.id, | ||
273 | uploadedfile: null, | 291 | uploadedfile: null, |
274 | foldername: '', | 292 | foldername: '', |
275 | curfName: {}, | 293 | curfName: {}, |
276 | cfilename: {}, | 294 | cfilename: {}, |
277 | folders: [], | 295 | folders: [], |
278 | files: [], | 296 | files: [], |
297 | + search: '', | ||
279 | id: '', | 298 | id: '', |
280 | current_filename: null, //파일 상세정보 (이름) | 299 | current_filename: null, //파일 상세정보 (이름) |
281 | current_filedata: null, //파일 상세정보 (내용) | 300 | current_filedata: null, //파일 상세정보 (내용) |
... | @@ -297,7 +316,14 @@ export default { | ... | @@ -297,7 +316,14 @@ export default { |
297 | }, | 316 | }, |
298 | }; | 317 | }; |
299 | }, | 318 | }, |
300 | - async created() { | 319 | + created() { |
320 | + this.fetchData(); | ||
321 | + }, | ||
322 | + watch: { | ||
323 | + $route: 'fetchData', | ||
324 | + }, | ||
325 | + methods: { | ||
326 | + async fetchData() { | ||
301 | try { | 327 | try { |
302 | const response = await getFavoriteList(this.$store.state.id); | 328 | const response = await getFavoriteList(this.$store.state.id); |
303 | console.log(response.data); | 329 | console.log(response.data); |
... | @@ -308,7 +334,6 @@ export default { | ... | @@ -308,7 +334,6 @@ export default { |
308 | console.log(error); | 334 | console.log(error); |
309 | } | 335 | } |
310 | }, | 336 | }, |
311 | - methods: { | ||
312 | handleFileUpload() { | 337 | handleFileUpload() { |
313 | this.uploadedfile = this.$refs.uploadedfile.files[0]; | 338 | this.uploadedfile = this.$refs.uploadedfile.files[0]; |
314 | console.log(this.uploadedfile); | 339 | console.log(this.uploadedfile); |
... | @@ -322,18 +347,38 @@ export default { | ... | @@ -322,18 +347,38 @@ export default { |
322 | this.dialog2 = false; | 347 | this.dialog2 = false; |
323 | this.dialog3 = false; | 348 | this.dialog3 = false; |
324 | }, | 349 | }, |
325 | - async moveF(folder_name, location) { | 350 | + async makeF() { |
351 | + try { | ||
352 | + const folderData = { | ||
353 | + user_id: this.$store.state.id, | ||
354 | + cur: this.$store.state.cur, | ||
355 | + folder_name: this.foldername, | ||
356 | + }; | ||
357 | + const response = await makeFolder(folderData); | ||
358 | + console.log(response.data); | ||
359 | + console.log('폴더 생성 완료'); | ||
360 | + this.$store.commit('setFolder', response.data.folders); | ||
361 | + this.folders = response.data.folders; | ||
362 | + } catch (error) { | ||
363 | + console.log('에러'); | ||
364 | + console.log(error.response.data); | ||
365 | + } finally { | ||
366 | + this.initFolderName(); | ||
367 | + this.dialog = false; | ||
368 | + } | ||
369 | + }, | ||
370 | + async moveF(move_folder_name) { | ||
326 | try { | 371 | try { |
327 | const curData = { | 372 | const curData = { |
328 | id: this.$store.state.id, | 373 | id: this.$store.state.id, |
329 | - cur: location, | 374 | + cur: this.$store.state.cur + move_folder_name + '/', |
330 | }; | 375 | }; |
331 | const response = await folder(curData); | 376 | const response = await folder(curData); |
332 | const file_response = await file(curData); | 377 | const file_response = await file(curData); |
333 | console.log(response.data); | 378 | console.log(response.data); |
334 | - this.$store.commit('setfavFolderList', response.data.folders); | 379 | + this.$store.commit('setFolder', response.data.folders); |
335 | - this.$store.commit('setfavFileList', file_response.data.files); | 380 | + this.$store.commit('setFile', file_response.data.files); |
336 | - this.$store.commit('setCur', location); | 381 | + this.$store.commit('setCur', response.data.cur); |
337 | this.$store.commit('setParent', response.data.parentPath); | 382 | this.$store.commit('setParent', response.data.parentPath); |
338 | this.folders = this.$store.getters.folderL; | 383 | this.folders = this.$store.getters.folderL; |
339 | this.files = this.$store.getters.fileL; | 384 | this.files = this.$store.getters.fileL; |
... | @@ -380,6 +425,77 @@ export default { | ... | @@ -380,6 +425,77 @@ export default { |
380 | this.curfName = ''; | 425 | this.curfName = ''; |
381 | } | 426 | } |
382 | }, | 427 | }, |
428 | + async transferF(folderName) { | ||
429 | + try { | ||
430 | + const cData = { | ||
431 | + id: this.$store.state.id, | ||
432 | + cur: this.$store.state.cur, | ||
433 | + name: this.curfName.folder_name, | ||
434 | + isfolder: true, | ||
435 | + newPath: this.$store.state.cur + folderName + '/', | ||
436 | + }; | ||
437 | + const response = await moveFolder(cData); | ||
438 | + console.log(response); | ||
439 | + this.$store.commit('setFolder', response.data.folders); | ||
440 | + this.folders = this.$store.getters.folderL; | ||
441 | + } catch (error) { | ||
442 | + console.log('에러'); | ||
443 | + console.log(error.response.data); | ||
444 | + } finally { | ||
445 | + this.curfName = {}; | ||
446 | + this.dialog2 = false; | ||
447 | + } | ||
448 | + }, | ||
449 | + async upload_file() { | ||
450 | + try { | ||
451 | + const formData = new FormData(); | ||
452 | + formData.append('file', this.uploadedfile); | ||
453 | + formData.append('user_id', this.$store.state.id); | ||
454 | + formData.append('cur', this.$store.state.cur); | ||
455 | + const currentData = { | ||
456 | + id: this.$store.state.id, | ||
457 | + cur: this.$store.state.cur, | ||
458 | + }; | ||
459 | + console.log(currentData); | ||
460 | + const response = await uploadFile(formData); | ||
461 | + const filelist = await file(currentData); | ||
462 | + console.log(filelist.data.files); | ||
463 | + this.$store.commit('setFile', filelist.data.files); | ||
464 | + console.log(this.$store.getters.fileL); | ||
465 | + this.files = this.$store.getters.fileL; | ||
466 | + } catch (error) { | ||
467 | + console.log('에러'); | ||
468 | + console.log(error); | ||
469 | + } | ||
470 | + }, | ||
471 | + async delete_file() { | ||
472 | + try { | ||
473 | + var itemlist = this.$store.getters.fileL; | ||
474 | + const currentData = { | ||
475 | + fileName: null, | ||
476 | + user_id: null, | ||
477 | + cur: this.$store.state.cur, | ||
478 | + }; | ||
479 | + for (var i = 0; i < itemlist.length; i++) { | ||
480 | + if (itemlist[i].file_name == this.cfilename.file_name) { | ||
481 | + currentData.fileName = itemlist[i].file_name; | ||
482 | + currentData.user_id = itemlist[i].user_id; | ||
483 | + } | ||
484 | + } | ||
485 | + const filelistData = { | ||
486 | + id: currentData.user_id, | ||
487 | + cur: currentData.cur, | ||
488 | + }; | ||
489 | + const response = await deleteFile(currentData); | ||
490 | + setTimeout(function() {}, 500); | ||
491 | + const filelist = await file(filelistData); | ||
492 | + this.$store.commit('setFile', filelist.data.files); | ||
493 | + this.files = this.$store.getters.fileL; | ||
494 | + } catch (error) { | ||
495 | + console.log('에러'); | ||
496 | + console.log(error); | ||
497 | + } | ||
498 | + }, | ||
383 | async download_file() { | 499 | async download_file() { |
384 | try { | 500 | try { |
385 | const currentData = { | 501 | const currentData = { | ... | ... |
... | @@ -259,7 +259,7 @@ | ... | @@ -259,7 +259,7 @@ |
259 | v-on:change="handleFileUpload()" | 259 | v-on:change="handleFileUpload()" |
260 | /> | 260 | /> |
261 | <br /> | 261 | <br /> |
262 | - <v-btn color="blue" @click="upload_file">upload</v-btn> | 262 | + <v-btn @click="upload_file"><v-icon>fas fa-upload</v-icon></v-btn> |
263 | <v-btn bottom color="blue" dark fab fixed right @click="dialog = !dialog"> | 263 | <v-btn bottom color="blue" dark fab fixed right @click="dialog = !dialog"> |
264 | <v-icon>mdi-plus</v-icon> | 264 | <v-icon>mdi-plus</v-icon> |
265 | </v-btn> | 265 | </v-btn> | ... | ... |
... | @@ -31,6 +31,14 @@ | ... | @@ -31,6 +31,14 @@ |
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: 'Fav' }" exact> | ||
35 | + <v-list-item-action> | ||
36 | + <v-icon>fas fa-share-alt</v-icon> | ||
37 | + </v-list-item-action> | ||
38 | + <v-list-item-content> | ||
39 | + <v-list-item-title>공유</v-list-item-title> | ||
40 | + </v-list-item-content> | ||
41 | + </v-list-item> | ||
34 | <v-list-item router :to="{ name: 'Quick' }" exact> | 42 | <v-list-item router :to="{ name: 'Quick' }" exact> |
35 | <v-list-item-action> | 43 | <v-list-item-action> |
36 | <v-icon>mdi-history</v-icon> | 44 | <v-icon>mdi-history</v-icon> |
... | @@ -47,14 +55,6 @@ | ... | @@ -47,14 +55,6 @@ |
47 | <v-list-item-title>연락처</v-list-item-title> | 55 | <v-list-item-title>연락처</v-list-item-title> |
48 | </v-list-item-content> | 56 | </v-list-item-content> |
49 | </v-list-item> | 57 | </v-list-item> |
50 | - <v-list-item router :to="{ name: 'Main' }" exact> | ||
51 | - <v-list-item-action> | ||
52 | - <v-icon>mdi-settings</v-icon> | ||
53 | - </v-list-item-action> | ||
54 | - <v-list-item-content> | ||
55 | - <v-list-item-title>설정</v-list-item-title> | ||
56 | - </v-list-item-content> | ||
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> | ... | ... |
... | @@ -14,10 +14,7 @@ | ... | @@ -14,10 +14,7 @@ |
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 | <!-- Folder view --> |
17 | - <v-list-item | 17 | + <v-list-item @click="" @dblclick="$router.go(-1)">...</v-list-item> |
18 | - @click="" | ||
19 | - @dblclick="$router.go(-1)" | ||
20 | - >...</v-list-item> | ||
21 | <v-list-item | 18 | <v-list-item |
22 | v-for="item in this.$store.getters.folderL" | 19 | v-for="item in this.$store.getters.folderL" |
23 | :key="item.folder_id" | 20 | :key="item.folder_id" | ... | ... |
1 | <template lang="html"> | 1 | <template lang="html"> |
2 | <v-container> | 2 | <v-container> |
3 | - <div> | ||
4 | - <h2>안녕하세요!</h2> | ||
5 | - <br /><br /> | ||
6 | - </div> | ||
7 | <v-layout column> | 3 | <v-layout column> |
8 | <v-flex> | 4 | <v-flex> |
9 | - <v-layout row wrap> | 5 | + <v-layout column> |
10 | - <v-flex lg6> | ||
11 | - <v-flex> | ||
12 | - <Filecard></Filecard> | ||
13 | - </v-flex> | ||
14 | - <v-flex><br /><br /></v-flex> | ||
15 | - </v-flex> | ||
16 | <v-flex><br /><br /></v-flex> | 6 | <v-flex><br /><br /></v-flex> |
17 | - <v-flex lg6> | 7 | + <v-flex> |
18 | - <Favlist></Favlist> | 8 | + <FileList></FileList> |
19 | </v-flex> | 9 | </v-flex> |
20 | </v-layout> | 10 | </v-layout> |
21 | </v-flex> | 11 | </v-flex> |
22 | </v-layout> | 12 | </v-layout> |
13 | + <v-flex><br /><br /></v-flex> | ||
23 | <v-divider></v-divider> | 14 | <v-divider></v-divider> |
24 | <v-layout column> | 15 | <v-layout column> |
25 | <v-flex> | 16 | <v-flex> | ... | ... |
-
Please register or login to post a comment