2020-1-CloudComputing / D_Team_Khuloud

Go to a project
Toggle navigation Toggle navigation pinning
Hong
19fc1500 2 parents 3cd95620 d88f6a1e

Merge branch 'share,favorite' of http://khuhub.khu.ac.kr/2020-1-CloudComputing/D… 

…_Team_Khuloud into share,favorite
Inline Side-by-side
Showing 8 changed files with 1271 additions and 144 deletions
...@@ -18,7 +18,7 @@ function folder(curData) { ...@@ -18,7 +18,7 @@ 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 + folder_id: curData.folder_id,
22 }, 22 },
23 }); 23 });
24 } 24 }
...@@ -39,7 +39,7 @@ function file(curData) { ...@@ -39,7 +39,7 @@ 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 + folder_id: curData.cur,
43 }, 43 },
44 }); 44 });
45 } 45 }
...@@ -109,6 +109,14 @@ function addFavoriteFile(fileData) { ...@@ -109,6 +109,14 @@ function addFavoriteFile(fileData) {
109 return axios.post('api/favorites/addfile', fileData); 109 return axios.post('api/favorites/addfile', fileData);
110 } 110 }
111 111
112 +function getFavoriteList(userId) {
113 + return axios.get('api/favorites/show', {
114 + params: {
115 + id: userId,
116 + },
117 + });
118 +}
119 +
112 export { 120 export {
113 registerUser, 121 registerUser,
114 loginUser, 122 loginUser,
...@@ -128,4 +136,5 @@ export { ...@@ -128,4 +136,5 @@ export {
128 accessedList, 136 accessedList,
129 detailFile, 137 detailFile,
130 modifyFile, 138 modifyFile,
139 + getFavoriteList,
131 }; 140 };
......
1 <template> 1 <template>
2 - <v-card max-width="98%" class="mx-auto"> 2 + <div>
3 - <v-toolbar color="light-blue" dark> 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-toolbar> 6 </v-toolbar>
7 <v-list two-line subheader> 7 <v-list two-line subheader>
8 - <v-list-item v-for="item in items" :key="item.title" @click=""> 8 + <!-- <v-subheader inset>Folders</v-subheader> -->
9 + <!-- Folder view -->
10 + <v-list-item v-if="this.$store.state.cur !== '/'" @click="moveParent"
11 + >...</v-list-item
12 + >
13 + <v-list-item
14 + v-for="item in this.$store.getters.favFolderL"
15 + :key="item.title"
16 + @click.right="show(item, $event)"
17 + @click=""
18 + @dblclick="$router.push(`/file/${item.folder_id}`)"
19 + >
9 <v-list-item-avatar> 20 <v-list-item-avatar>
10 - <v-icon :class="[item.iconClass]" v-text="item.icon"></v-icon> 21 + <v-icon>mdi-folder</v-icon>
11 </v-list-item-avatar> 22 </v-list-item-avatar>
12 <v-list-item-content> 23 <v-list-item-content>
13 - <v-list-item-title v-text="item.title"></v-list-item-title> 24 + <v-list-item-title v-text="item.folder_name"></v-list-item-title>
14 - <v-list-item-subtitle v-text="item.subtitle"></v-list-item-subtitle>
15 </v-list-item-content> 25 </v-list-item-content>
16 <v-list-item-action> 26 <v-list-item-action>
17 - <v-btn icon> 27 + <v-icon v-if="item.favorite === 0">
18 - <v-icon color="grey lighten-1">mdi-information</v-icon> 28 + mdi-star-outline
19 - </v-btn> 29 + </v-icon>
30 + <v-icon v-else>
31 + mdi-star
32 + </v-icon>
20 </v-list-item-action> 33 </v-list-item-action>
21 </v-list-item> 34 </v-list-item>
22 - <v-list-item v-for="item in items2" :key="item.title" @click=""> 35 + <!-- File view -->
36 + <v-list-item
37 + v-for="item in this.$store.getters.favFileL"
38 + :key="item.title"
39 + @click.right="showF(item, $event)"
40 + @dblclick="
41 + detailF(item, $event);
42 + file_detail(item);
43 + "
44 + @click=""
45 + >
23 <v-list-item-avatar> 46 <v-list-item-avatar>
24 - <v-icon :class="[item.iconClass]" v-text="item.icon"></v-icon> 47 + <v-icon> mdi-file</v-icon>
25 </v-list-item-avatar> 48 </v-list-item-avatar>
26 <v-list-item-content> 49 <v-list-item-content>
27 - <v-list-item-title v-text="item.title"></v-list-item-title> 50 + <v-list-item-title v-text="item.file_name"></v-list-item-title>
28 - <v-list-item-subtitle v-text="item.subtitle"></v-list-item-subtitle>
29 </v-list-item-content> 51 </v-list-item-content>
30 <v-list-item-action> 52 <v-list-item-action>
31 - <v-btn icon> 53 + <v-icon v-if="item.favorite === 0">
32 - <v-icon color="grey lighten-1">mdi-information</v-icon> 54 + mdi-star-outline
33 - </v-btn> 55 + </v-icon>
56 + <v-icon v-else>
57 + mdi-star
58 + </v-icon>
34 </v-list-item-action> 59 </v-list-item-action>
35 </v-list-item> 60 </v-list-item>
36 </v-list> 61 </v-list>
37 - </v-card> 62 + <!--file detial -->
63 + <v-dialog v-model="showdetailF" max-width="290">
64 + <v-card>
65 + <v-card-title class="headline">
66 + <v-text-field v-model="current_filename"></v-text-field>
67 + </v-card-title>
68 + <v-card-text>
69 + <v-text-field v-model="current_filedata"></v-text-field>
70 + </v-card-text>
71 + <v-card-actions>
72 + <v-spacer></v-spacer>
73 + <v-btn
74 + color="green darken-1"
75 + text
76 + @click="
77 + showdetailF = false;
78 + modify_file();
79 + "
80 + >
81 + save
82 + </v-btn>
83 + </v-card-actions>
84 + </v-card>
85 + </v-dialog>
86 + <!-- Move Folder -->
87 + <v-dialog v-model="dialog2" width="500px">
88 + <v-card>
89 + <v-card-title class="grey darken-2">
90 + Move Folder
91 + </v-card-title>
92 + <v-container>
93 + <v-list>
94 + <v-list-item
95 + v-for="item2 in folders"
96 + :key="item2.folder_id"
97 + @click.left="transferF(item2.folder_name)"
98 + v-if="item2.folder_name !== curfName.folder_name"
99 + >
100 + <v-list-item-avatar>
101 + <v-icon>mdi-folder</v-icon>
102 + </v-list-item-avatar>
103 + <v-list-item-content>
104 + <v-list-item-title
105 + v-text="item2.folder_name"
106 + ></v-list-item-title>
107 + </v-list-item-content>
108 + </v-list-item>
109 + </v-list>
110 + </v-container>
111 + <v-card-actions>
112 + <v-spacer></v-spacer>
113 + <v-btn text color="primary" @click="cancelMove">Cancel</v-btn>
114 + </v-card-actions>
115 + </v-card>
116 + </v-dialog>
117 + <!-- sub menu for folder -->
118 + <v-menu
119 + v-model="showMenu"
120 + :position-x="x"
121 + :position-y="y"
122 + absolute
123 + offset-y
124 + >
125 + <v-list dense>
126 + <v-list-item @click.prevent="dialog2 = !dialog2">
127 + <v-list-item-icon>
128 + <v-icon>mdi-send</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>
133 + </v-list-item>
134 + <v-list-item @click.prevent="deleteF">
135 + <v-list-item-icon>
136 + <v-icon>mdi-delete</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-item v-if="curfName.favorite === 1" @click="delete_favorite">
143 + <v-list-item-icon>
144 + <v-icon>mdi-star-outline</v-icon>
145 + </v-list-item-icon>
146 + <v-list-item-content>
147 + <v-list-item-title>즐겨 찾기 삭제</v-list-item-title>
148 + </v-list-item-content>
149 + </v-list-item>
150 + <v-list-item v-if="curfName.favorite === 0" @click="add_favorite">
151 + <v-list-item-icon>
152 + <v-icon>mdi-star</v-icon>
153 + </v-list-item-icon>
154 + <v-list-item-content>
155 + <v-list-item-title>즐겨 찾기 추가</v-list-item-title>
156 + </v-list-item-content>
157 + </v-list-item>
158 + </v-list>
159 + </v-menu>
160 + <!-- -->
161 + <!-- Move File -->
162 + <v-dialog v-model="dialog3" width="500px">
163 + <v-card>
164 + <v-card-title class="grey darken-2">
165 + Move File
166 + </v-card-title>
167 + <v-container>
168 + <v-list>
169 + <v-list-item
170 + v-for="item2 in folders"
171 + :key="item2.folder_id"
172 + @click.left="transferFile(item2.folder_name)"
173 + >
174 + <v-list-item-avatar>
175 + <v-icon>mdi-folder</v-icon>
176 + </v-list-item-avatar>
177 + <v-list-item-content>
178 + <v-list-item-title
179 + v-text="item2.folder_name"
180 + ></v-list-item-title>
181 + </v-list-item-content>
182 + </v-list-item>
183 + </v-list>
184 + </v-container>
185 + <v-card-actions>
186 + <v-spacer></v-spacer>
187 + <v-btn text color="primary" @click="cancelMove">Cancel</v-btn>
188 + </v-card-actions>
189 + </v-card>
190 + </v-dialog>
191 + <!-- sub menu for file -->
192 + <v-menu
193 + v-model="showMenuF"
194 + :position-x="x"
195 + :position-y="y"
196 + absolute
197 + offset-y
198 + >
199 + <v-list dense>
200 + <v-list-item @click.prevent="dialog3 = !dialog3">
201 + <v-list-item-icon>
202 + <v-icon>mdi-send</v-icon>
203 + </v-list-item-icon>
204 + <v-list-item-content>
205 + <v-list-item-title>이동</v-list-item-title>
206 + </v-list-item-content>
207 + </v-list-item>
208 + <v-list-item @click.prevent="delete_file">
209 + <v-list-item-icon>
210 + <v-icon>mdi-delete</v-icon>
211 + </v-list-item-icon>
212 + <v-list-item-content>
213 + <v-list-item-title>삭제</v-list-item-title>
214 + </v-list-item-content>
215 + </v-list-item>
216 + <v-list-item @click.prevent="download_file">
217 + <v-list-item-icon>
218 + <v-icon>mdi-download</v-icon>
219 + </v-list-item-icon>
220 + <v-list-item-content>
221 + <v-list-item-title>다운로드</v-list-item-title>
222 + </v-list-item-content>
223 + </v-list-item>
224 + <v-list-item
225 + v-if="cfilename.favorite === 1"
226 + @click="delete_favorite_file"
227 + >
228 + <v-list-item-icon>
229 + <v-icon>mdi-star-outline</v-icon>
230 + </v-list-item-icon>
231 + <v-list-item-content>
232 + <v-list-item-title>즐겨 찾기 삭제</v-list-item-title>
233 + </v-list-item-content>
234 + </v-list-item>
235 + <v-list-item v-if="cfilename.favorite === 0" @click="add_favorite_file">
236 + <v-list-item-icon>
237 + <v-icon>mdi-star</v-icon>
238 + </v-list-item-icon>
239 + <v-list-item-content>
240 + <v-list-item-title>즐겨 찾기 추가</v-list-item-title>
241 + </v-list-item-content>
242 + </v-list-item>
243 + </v-list>
244 + </v-menu>
245 + </div>
38 </template> 246 </template>
39 -
40 <script> 247 <script>
248 +import {
249 + folder,
250 + makeFolder,
251 + deleteFolder,
252 + moveFolder,
253 + file,
254 + uploadFile,
255 + deleteFile,
256 + downloadFile,
257 + delFavorite,
258 + addFavorite,
259 + moveFile,
260 + delFavoriteFile,
261 + addFavoriteFile,
262 + detailFile,
263 + modifyFile,
264 + getFavoriteList,
265 +} from '../api/index';
266 +import Axios from 'axios';
41 export default { 267 export default {
42 - data: () => ({ 268 + props: {
43 - items: [ 269 + folderId: Object,
44 - { 270 + },
45 - icon: 'folder', 271 + data() {
46 - iconClass: 'grey lighten-1 white--text', 272 + return {
47 - title: 'Photos', 273 + uploadedfile: null,
48 - subtitle: 'Jan 9, 2014', 274 + foldername: '',
49 - }, 275 + curfName: {},
50 - { 276 + cfilename: {},
51 - icon: 'folder', 277 + folders: [],
52 - iconClass: 'grey lighten-1 white--text', 278 + files: [],
53 - title: 'Recipes', 279 + id: '',
54 - subtitle: 'Jan 17, 2014', 280 + current_filename: null, //파일 상세정보 (이름)
55 - }, 281 + current_filedata: null, //파일 상세정보 (내용)
56 - { 282 + dialog: false,
57 - icon: 'folder', 283 + howMenu: false,
58 - iconClass: 'grey lighten-1 white--text', 284 + showMenu: false,
59 - title: 'Work', 285 + showMenuF: false, //파일 관련 메뉴
60 - subtitle: 'Jan 28, 2014', 286 + showdetailF: false, //txt 파일 상세정보 및 수정
61 - }, 287 + x: 0,
62 - ], 288 + y: 0,
63 - items2: [ 289 + dialog2: false,
64 - { 290 + dialog3: false, //파일 관련 메뉴
65 - icon: 'assignment', 291 + detail: {
66 - iconClass: 'blue white--text', 292 + dataname: null,
67 - title: 'Vacation itinerary', 293 + date: null,
68 - subtitle: 'Jan 20, 2014', 294 + owner_id: null,
69 - }, 295 + datasize: null,
70 - { 296 + datatype: null,
71 - icon: 'call_to_action',
72 - iconClass: 'amber white--text',
73 - title: 'Kitchen remodel',
74 - subtitle: 'Jan 10, 2014',
75 }, 297 },
76 - ], 298 + };
77 - }), 299 + },
300 + async created() {
301 + try {
302 + const response = await getFavoriteList(this.$store.state.id);
303 + console.log(response.data);
304 + this.$store.commit('setfavFolderList', response.data.folders);
305 + this.$store.commit('setfavFileList', response.data.files);
306 + } catch (error) {
307 + console.log('에러');
308 + console.log(error);
309 + }
310 + },
311 + methods: {
312 + handleFileUpload() {
313 + this.uploadedfile = this.$refs.uploadedfile.files[0];
314 + console.log(this.uploadedfile);
315 + },
316 + initFolderName() {
317 + this.foldername = '';
318 + },
319 + cancelMove() {
320 + this.curfName = {};
321 + this.cfilename = {};
322 + this.dialog2 = false;
323 + this.dialog3 = false;
324 + },
325 + async moveF(folder_name, location) {
326 + try {
327 + const curData = {
328 + id: this.$store.state.id,
329 + cur: location,
330 + };
331 + const response = await folder(curData);
332 + const file_response = await file(curData);
333 + console.log(response.data);
334 + this.$store.commit('setfavFolderList', response.data.folders);
335 + this.$store.commit('setfavFileList', file_response.data.files);
336 + this.$store.commit('setCur', location);
337 + this.$store.commit('setParent', response.data.parentPath);
338 + this.folders = this.$store.getters.folderL;
339 + this.files = this.$store.getters.fileL;
340 + } catch (error) {
341 + console.log('에러');
342 + console.log(error.response.data);
343 + }
344 + },
345 + async moveParent() {
346 + try {
347 + const cData = {
348 + id: this.$store.state.id,
349 + cur: this.$store.state.parent,
350 + };
351 + const response = await folder(cData);
352 + const file_response = await file(cData);
353 + console.log(response.data);
354 + this.$store.commit('setFolder', response.data.folders);
355 + this.$store.commit('setFile', file_response.data.files);
356 + this.$store.commit('setCur', response.data.cur);
357 + this.$store.commit('setParent', response.data.parentPath);
358 + this.folders = this.$store.getters.folderL;
359 + this.files = this.$store.getters.fileL;
360 + } catch (error) {
361 + console.log('에러');
362 + console.log(error.response.data);
363 + }
364 + },
365 + async deleteF() {
366 + try {
367 + const cData = {
368 + id: this.$store.state.id,
369 + cur: this.$store.state.cur,
370 + folder_name: this.curfName.folder_name,
371 + };
372 + const response = await deleteFolder(cData);
373 + console.log(response);
374 + this.$store.commit('setFolder', response.data.folders);
375 + this.folders = this.$store.getters.folderL;
376 + } catch (error) {
377 + console.log('에러');
378 + console.log(error.response.data);
379 + } finally {
380 + this.curfName = '';
381 + }
382 + },
383 + async download_file() {
384 + try {
385 + const currentData = {
386 + fileName: this.cfilename.file_name,
387 + id: this.$store.state.id,
388 + cur: this.$store.state.cur,
389 + };
390 + const result = await downloadFile(currentData);
391 + console.log(result);
392 + } catch (error) {
393 + console.log('에러');
394 + console.log(error);
395 + }
396 + },
397 + async delete_favorite() {
398 + try {
399 + const cData = {
400 + id: this.$store.state.id,
401 + cur: this.$store.state.cur,
402 + name: this.curfName.folder_name,
403 + };
404 + console.log(cData);
405 + const response = await delFavorite(cData);
406 + this.$store.commit('setFolder', response.data.folders);
407 + } catch (error) {
408 + console.log('에러');
409 + }
410 + },
411 + async add_favorite() {
412 + try {
413 + const cData = {
414 + id: this.$store.state.id,
415 + cur: this.$store.state.cur,
416 + name: this.curfName.folder_name,
417 + };
418 + console.log(cData);
419 + const response = await addFavorite(cData);
420 + this.$store.commit('setFolder', response.data.folders);
421 + } catch (error) {
422 + console.log('에러');
423 + }
424 + },
425 + async delete_favorite_file() {
426 + try {
427 + const fData = {
428 + id: this.$store.state.id,
429 + cur: this.$store.state.cur,
430 + name: this.cfilename.file_name,
431 + };
432 + console.log(fData);
433 + const response = await delFavoriteFile(fData);
434 + this.$store.commit('setFile', response.data.files);
435 + } catch (error) {
436 + console.log('에러');
437 + }
438 + },
439 + async add_favorite_file() {
440 + try {
441 + const fData = {
442 + id: this.$store.state.id,
443 + cur: this.$store.state.cur,
444 + name: this.cfilename.file_name,
445 + };
446 + console.log(fData);
447 + const response = await addFavoriteFile(fData);
448 + this.$store.commit('setFile', response.data.files);
449 + } catch (error) {
450 + console.log('에러');
451 + }
452 + },
453 + async transferFile(folderName) {
454 + try {
455 + const fData = {
456 + id: this.$store.state.id,
457 + cur: this.$store.state.cur,
458 + name: this.cfilename.file_name,
459 + isfolder: false,
460 + newPath: this.$store.state.cur + folderName + '/',
461 + };
462 + const response = await moveFile(fData);
463 + console.log(response);
464 + this.$store.commit('setFile', response.data.files);
465 + this.files = this.$store.getters.fileL;
466 + } catch (error) {
467 + console.log('에러');
468 + console.log(error.response.data);
469 + } finally {
470 + this.cfilename = {};
471 + this.dialog3 = false;
472 + }
473 + },
474 + async file_detail() {
475 + try {
476 + const currentData = {
477 + id: this.cfilename.user_id,
478 + cur: this.cfilename.location,
479 + fileName: this.cfilename.file_name,
480 + };
481 + const detailData = await detailFile(currentData);
482 + this.current_filename = detailData.data.file_name;
483 + this.current_filedata = detailData.data.content;
484 + console.log(this.current_filename);
485 + console.log(this.current_filedata);
486 + } catch (error) {
487 + console.log('에러');
488 + console.log(error);
489 + }
490 + },
491 + async modify_file() {
492 + try {
493 + const modifyData = {
494 + user_id: this.cfilename.user_id,
495 + cur: this.cfilename.location,
496 + name: this.current_filename,
497 + content: this.current_filedata,
498 + };
499 + const result = await modifyFile(modifyData);
500 + const after_data = {
501 + id: this.cfilename.user_id,
502 + cur: this.cfilename.location,
503 + fileName: this.current_filename,
504 + };
505 + const detailData = await detailFile(after_data);
506 + } catch (error) {
507 + console.log('에러');
508 + console.log(error);
509 + }
510 + },
511 + show(folderObj, e) {
512 + e.preventDefault();
513 + this.curfName = folderObj;
514 + this.showMenu = false;
515 + this.x = e.clientX;
516 + this.y = e.clientY;
517 + this.$nextTick(() => {
518 + this.showMenu = true;
519 + });
520 + },
521 + showF(fileObj, e) {
522 + e.preventDefault();
523 + this.cfilename = fileObj;
524 + this.showMenuF = false;
525 + this.x = e.clientX;
526 + this.y = e.clientY;
527 + this.$nextTick(() => {
528 + this.showMenuF = true;
529 + });
530 + },
531 + detailF(fileObj, e) {
532 + e.preventDefault();
533 + this.cfilename = fileObj;
534 + this.showdetailF = false;
535 + this.x = e.clientX;
536 + this.y = e.clientY;
537 + this.$nextTick(() => {
538 + this.showdetailF = true;
539 + });
540 + },
541 + },
78 }; 542 };
79 </script> 543 </script>
......
...@@ -19,11 +19,17 @@ ...@@ -19,11 +19,17 @@
19 > 19 >
20 <v-list-item 20 <v-list-item
21 v-for="item in this.$store.getters.folderL" 21 v-for="item in this.$store.getters.folderL"
22 - :key="item.title" 22 + :key="item.folder_id"
23 :search="search" 23 :search="search"
24 @click.right="show(item, $event)" 24 @click.right="show(item, $event)"
25 @click="" 25 @click=""
26 - @dblclick="moveF(item.folder_name)" 26 + @dblclick="
27 + $router.push({
28 + name: 'Folder',
29 + params: { id: item.folder_id },
30 + props: { folderId: item.id },
31 + })
32 + "
27 > 33 >
28 <v-list-item-avatar> 34 <v-list-item-avatar>
29 <v-icon>mdi-folder</v-icon> 35 <v-icon>mdi-folder</v-icon>
...@@ -341,7 +347,7 @@ export default { ...@@ -341,7 +347,7 @@ export default {
341 try { 347 try {
342 const curData = { 348 const curData = {
343 id: this.$store.state.id, 349 id: this.$store.state.id,
344 - cur: '/', 350 + folder_id: -1,
345 }; 351 };
346 console.log(curData); 352 console.log(curData);
347 const response = await folder(curData); 353 const response = await folder(curData);
......
1 +<template>
2 + <div>
3 + <v-toolbar flat>
4 + <v-toolbar-title>내 드라이브</v-toolbar-title>
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>
13 + </v-toolbar>
14 + <v-list two-line subheader>
15 + <!-- <v-subheader inset>Folders</v-subheader> -->
16 + <!-- Folder view -->
17 + <v-list-item v-if="this.$store.state.cur !== '/'" @click="moveParent"
18 + >...</v-list-item
19 + >
20 + <v-list-item
21 + v-for="item in this.$store.getters.folderL"
22 + :key="item.folder_id"
23 + :search="search"
24 + @click.right="show(item, $event)"
25 + @click=""
26 + @dblclick="
27 + $router.push({
28 + name: 'Folder',
29 + params: { id: item.folder_id },
30 + props: { folderId: item.folder_name },
31 + })
32 + "
33 + >
34 + <v-list-item-avatar>
35 + <v-icon>mdi-folder</v-icon>
36 + </v-list-item-avatar>
37 + <v-list-item-content>
38 + <v-list-item-title v-text="item.folder_name"></v-list-item-title>
39 + </v-list-item-content>
40 + <v-list-item-action>
41 + <v-icon v-if="item.favorite === 0">
42 + mdi-star-outline
43 + </v-icon>
44 + <v-icon v-else>
45 + mdi-star
46 + </v-icon>
47 + </v-list-item-action>
48 + </v-list-item>
49 + <!-- File view -->
50 + <v-list-item
51 + v-for="item in this.$store.getters.fileL"
52 + :key="item.title"
53 + @click.right="showF(item, $event)"
54 + @dblclick="
55 + detailF(item, $event);
56 + file_detail(item);
57 + "
58 + @click=""
59 + >
60 + <v-list-item-avatar>
61 + <v-icon> mdi-file</v-icon>
62 + </v-list-item-avatar>
63 + <v-list-item-content>
64 + <v-list-item-title v-text="item.file_name"></v-list-item-title>
65 + </v-list-item-content>
66 + <v-list-item-action>
67 + <v-icon v-if="item.favorite === 0">
68 + mdi-star-outline
69 + </v-icon>
70 + <v-icon v-else>
71 + mdi-star
72 + </v-icon>
73 + </v-list-item-action>
74 + </v-list-item>
75 + </v-list>
76 + <!--file detial -->
77 + <v-dialog v-model="showdetailF" max-width="290">
78 + <v-card>
79 + <v-card-title class="headline">
80 + <v-text-field v-model="current_filename"></v-text-field>
81 + </v-card-title>
82 + <v-card-text>
83 + <v-text-field v-model="current_filedata"></v-text-field>
84 + </v-card-text>
85 + <v-card-actions>
86 + <v-spacer></v-spacer>
87 + <v-btn
88 + color="green darken-1"
89 + text
90 + @click="
91 + showdetailF = false;
92 + modify_file();
93 + "
94 + >
95 + save
96 + </v-btn>
97 + </v-card-actions>
98 + </v-card>
99 + </v-dialog>
100 + <!-- Move Folder -->
101 + <v-dialog v-model="dialog2" width="500px">
102 + <v-card>
103 + <v-card-title class="grey darken-2">
104 + Move Folder
105 + </v-card-title>
106 + <v-container>
107 + <v-list>
108 + <v-list-item
109 + v-for="item2 in folders"
110 + :key="item2.folder_id"
111 + @click.left="transferF(item2.folder_name)"
112 + v-if="item2.folder_name !== curfName.folder_name"
113 + >
114 + <v-list-item-avatar>
115 + <v-icon>mdi-folder</v-icon>
116 + </v-list-item-avatar>
117 + <v-list-item-content>
118 + <v-list-item-title
119 + v-text="item2.folder_name"
120 + ></v-list-item-title>
121 + </v-list-item-content>
122 + </v-list-item>
123 + </v-list>
124 + </v-container>
125 + <v-card-actions>
126 + <v-spacer></v-spacer>
127 + <v-btn text color="primary" @click="cancelMove">Cancel</v-btn>
128 + </v-card-actions>
129 + </v-card>
130 + </v-dialog>
131 + <!-- sub menu for folder -->
132 + <v-menu
133 + v-model="showMenu"
134 + :position-x="x"
135 + :position-y="y"
136 + absolute
137 + offset-y
138 + >
139 + <v-list dense>
140 + <v-list-item @click.prevent="dialog2 = !dialog2">
141 + <v-list-item-icon>
142 + <v-icon>mdi-send</v-icon>
143 + </v-list-item-icon>
144 + <v-list-item-content>
145 + <v-list-item-title>이동</v-list-item-title>
146 + </v-list-item-content>
147 + </v-list-item>
148 + <v-list-item @click.prevent="deleteF">
149 + <v-list-item-icon>
150 + <v-icon>mdi-delete</v-icon>
151 + </v-list-item-icon>
152 + <v-list-item-content>
153 + <v-list-item-title>삭제</v-list-item-title>
154 + </v-list-item-content>
155 + </v-list-item>
156 + <v-list-item v-if="curfName.favorite === 1" @click="delete_favorite">
157 + <v-list-item-icon>
158 + <v-icon>mdi-star-outline</v-icon>
159 + </v-list-item-icon>
160 + <v-list-item-content>
161 + <v-list-item-title>즐겨 찾기 삭제</v-list-item-title>
162 + </v-list-item-content>
163 + </v-list-item>
164 + <v-list-item v-if="curfName.favorite === 0" @click="add_favorite">
165 + <v-list-item-icon>
166 + <v-icon>mdi-star</v-icon>
167 + </v-list-item-icon>
168 + <v-list-item-content>
169 + <v-list-item-title>즐겨 찾기 추가</v-list-item-title>
170 + </v-list-item-content>
171 + </v-list-item>
172 + </v-list>
173 + </v-menu>
174 + <!-- -->
175 + <!-- Move File -->
176 + <v-dialog v-model="dialog3" width="500px">
177 + <v-card>
178 + <v-card-title class="grey darken-2">
179 + Move File
180 + </v-card-title>
181 + <v-container>
182 + <v-list>
183 + <v-list-item
184 + v-for="item2 in folders"
185 + :key="item2.folder_id"
186 + @click.left="transferFile(item2.folder_name)"
187 + >
188 + <v-list-item-avatar>
189 + <v-icon>mdi-folder</v-icon>
190 + </v-list-item-avatar>
191 + <v-list-item-content>
192 + <v-list-item-title
193 + v-text="item2.folder_name"
194 + ></v-list-item-title>
195 + </v-list-item-content>
196 + </v-list-item>
197 + </v-list>
198 + </v-container>
199 + <v-card-actions>
200 + <v-spacer></v-spacer>
201 + <v-btn text color="primary" @click="cancelMove">Cancel</v-btn>
202 + </v-card-actions>
203 + </v-card>
204 + </v-dialog>
205 + <!-- sub menu for file -->
206 + <v-menu
207 + v-model="showMenuF"
208 + :position-x="x"
209 + :position-y="y"
210 + absolute
211 + offset-y
212 + >
213 + <v-list dense>
214 + <v-list-item @click.prevent="dialog3 = !dialog3">
215 + <v-list-item-icon>
216 + <v-icon>mdi-send</v-icon>
217 + </v-list-item-icon>
218 + <v-list-item-content>
219 + <v-list-item-title>이동</v-list-item-title>
220 + </v-list-item-content>
221 + </v-list-item>
222 + <v-list-item @click.prevent="delete_file">
223 + <v-list-item-icon>
224 + <v-icon>mdi-delete</v-icon>
225 + </v-list-item-icon>
226 + <v-list-item-content>
227 + <v-list-item-title>삭제</v-list-item-title>
228 + </v-list-item-content>
229 + </v-list-item>
230 + <v-list-item @click.prevent="download_file">
231 + <v-list-item-icon>
232 + <v-icon>mdi-download</v-icon>
233 + </v-list-item-icon>
234 + <v-list-item-content>
235 + <v-list-item-title>다운로드</v-list-item-title>
236 + </v-list-item-content>
237 + </v-list-item>
238 + <v-list-item
239 + v-if="cfilename.favorite === 1"
240 + @click="delete_favorite_file"
241 + >
242 + <v-list-item-icon>
243 + <v-icon>mdi-star-outline</v-icon>
244 + </v-list-item-icon>
245 + <v-list-item-content>
246 + <v-list-item-title>즐겨 찾기 삭제</v-list-item-title>
247 + </v-list-item-content>
248 + </v-list-item>
249 + <v-list-item v-if="cfilename.favorite === 0" @click="add_favorite_file">
250 + <v-list-item-icon>
251 + <v-icon>mdi-star</v-icon>
252 + </v-list-item-icon>
253 + <v-list-item-content>
254 + <v-list-item-title>즐겨 찾기 추가</v-list-item-title>
255 + </v-list-item-content>
256 + </v-list-item>
257 + </v-list>
258 + </v-menu>
259 + <input
260 + id="file-selector"
261 + ref="uploadedfile"
262 + type="file"
263 + v-on:change="handleFileUpload()"
264 + />
265 + <br />
266 + <v-btn color="blue" @click="upload_file">upload</v-btn>
267 + <v-btn bottom color="blue" dark fab fixed right @click="dialog = !dialog">
268 + <v-icon>mdi-plus</v-icon>
269 + </v-btn>
270 + <!-- Create Folder -->
271 + <v-dialog v-model="dialog" width="500px">
272 + <v-card>
273 + <v-card-title class="grey darken-2">
274 + Create Folder
275 + </v-card-title>
276 + <v-container>
277 + <div>
278 + <v-icon>mdi-folder</v-icon>
279 + <v-text-field
280 + placeholder="name"
281 + id="foldername"
282 + type="text"
283 + v-model="foldername"
284 + ></v-text-field>
285 + </div>
286 + </v-container>
287 + <v-card-actions>
288 + <v-spacer></v-spacer>
289 + <v-btn text color="primary" @click="dialog = false">Cancel</v-btn>
290 + <v-btn text @click="makeF">Create</v-btn>
291 + </v-card-actions>
292 + </v-card>
293 + </v-dialog>
294 + </div>
295 +</template>
296 +<script>
297 +import {
298 + folder,
299 + makeFolder,
300 + deleteFolder,
301 + moveFolder,
302 + file,
303 + uploadFile,
304 + deleteFile,
305 + downloadFile,
306 + delFavorite,
307 + addFavorite,
308 + moveFile,
309 + delFavoriteFile,
310 + addFavoriteFile,
311 + detailFile,
312 + modifyFile,
313 +} from '../api/index';
314 +import Axios from 'axios';
315 +export default {
316 + props: {
317 + folderId: Number,
318 + },
319 + data() {
320 + return {
321 + folder_id: this.folderId,
322 + uploadedfile: null,
323 + foldername: '',
324 + curfName: {},
325 + cfilename: {},
326 + folders: [],
327 + files: [],
328 + search: '',
329 + id: '',
330 + current_filename: null, //파일 상세정보 (이름)
331 + current_filedata: null, //파일 상세정보 (내용)
332 + dialog: false,
333 + howMenu: false,
334 + showMenu: false,
335 + showMenuF: false, //파일 관련 메뉴
336 + showdetailF: false, //txt 파일 상세정보 및 수정
337 + x: 0,
338 + y: 0,
339 + dialog2: false,
340 + dialog3: false, //파일 관련 메뉴
341 + detail: {
342 + dataname: null,
343 + date: null,
344 + owner_id: null,
345 + datasize: null,
346 + datatype: null,
347 + },
348 + };
349 + },
350 + async created() {
351 + try {
352 + const curData = {
353 + id: this.$store.state.id,
354 + folder_id: this.folder_id,
355 + };
356 + console.log(curData);
357 + const response = await folder(curData);
358 + // const file_response = await file(curData);
359 + this.$store.commit('setFolder', response.data.folders);
360 + this.$store.commit('setCur', response.data.cur);
361 + this.$store.commit('setParent', response.data.parentPath);
362 + this.$store.commit('setFile', response.data.files);
363 + this.folders = this.$store.getters.folderL;
364 + console.log(this.$store.getters.fileL);
365 + this.files = this.$store.getters.fileL;
366 + } catch (error) {
367 + console.log('에러');
368 + console.log(error);
369 + }
370 + },
371 + methods: {
372 + handleFileUpload() {
373 + this.uploadedfile = this.$refs.uploadedfile.files[0];
374 + console.log(this.uploadedfile);
375 + },
376 + initFolderName() {
377 + this.foldername = '';
378 + },
379 + cancelMove() {
380 + this.curfName = {};
381 + this.cfilename = {};
382 + this.dialog2 = false;
383 + this.dialog3 = false;
384 + },
385 + async makeF() {
386 + try {
387 + const folderData = {
388 + user_id: this.$store.state.id,
389 + cur: this.$store.state.cur,
390 + folder_name: this.foldername,
391 + };
392 + const response = await makeFolder(folderData);
393 + console.log(response.data);
394 + console.log('폴더 생성 완료');
395 + this.$store.commit('setFolder', response.data.folders);
396 + this.folders = response.data.folders;
397 + } catch (error) {
398 + console.log('에러');
399 + console.log(error.response.data);
400 + } finally {
401 + this.initFolderName();
402 + this.dialog = false;
403 + }
404 + },
405 + async moveF(move_folder_name) {
406 + try {
407 + const curData = {
408 + id: this.$store.state.id,
409 + cur: this.$store.state.cur + move_folder_name + '/',
410 + };
411 + const response = await folder(curData);
412 + const file_response = await file(curData);
413 + console.log(response.data);
414 + this.$store.commit('setFolder', response.data.folders);
415 + this.$store.commit('setFile', file_response.data.files);
416 + this.$store.commit('setCur', response.data.cur);
417 + this.$store.commit('setParent', response.data.parentPath);
418 + this.folders = this.$store.getters.folderL;
419 + this.files = this.$store.getters.fileL;
420 + } catch (error) {
421 + console.log('에러');
422 + console.log(error.response.data);
423 + }
424 + },
425 + async moveParent() {
426 + try {
427 + const cData = {
428 + id: this.$store.state.id,
429 + cur: this.$store.state.parent,
430 + };
431 + const response = await folder(cData);
432 + const file_response = await file(cData);
433 + console.log(response.data);
434 + this.$store.commit('setFolder', response.data.folders);
435 + this.$store.commit('setFile', file_response.data.files);
436 + this.$store.commit('setCur', response.data.cur);
437 + this.$store.commit('setParent', response.data.parentPath);
438 + this.folders = this.$store.getters.folderL;
439 + this.files = this.$store.getters.fileL;
440 + } catch (error) {
441 + console.log('에러');
442 + console.log(error.response.data);
443 + }
444 + },
445 + async deleteF() {
446 + try {
447 + const cData = {
448 + id: this.$store.state.id,
449 + cur: this.$store.state.cur,
450 + folder_name: this.curfName.folder_name,
451 + };
452 + const response = await deleteFolder(cData);
453 + console.log(response);
454 + this.$store.commit('setFolder', response.data.folders);
455 + this.folders = this.$store.getters.folderL;
456 + } catch (error) {
457 + console.log('에러');
458 + console.log(error.response.data);
459 + } finally {
460 + this.curfName = '';
461 + }
462 + },
463 + async transferF(folderName) {
464 + try {
465 + const cData = {
466 + id: this.$store.state.id,
467 + cur: this.$store.state.cur,
468 + name: this.curfName.folder_name,
469 + isfolder: true,
470 + newPath: this.$store.state.cur + folderName + '/',
471 + };
472 + const response = await moveFolder(cData);
473 + console.log(response);
474 + this.$store.commit('setFolder', response.data.folders);
475 + this.folders = this.$store.getters.folderL;
476 + } catch (error) {
477 + console.log('에러');
478 + console.log(error.response.data);
479 + } finally {
480 + this.curfName = {};
481 + this.dialog2 = false;
482 + }
483 + },
484 + async upload_file() {
485 + try {
486 + const formData = new FormData();
487 + formData.append('file', this.uploadedfile);
488 + formData.append('user_id', this.$store.state.id);
489 + formData.append('cur', this.$store.state.cur);
490 + const currentData = {
491 + id: this.$store.state.id,
492 + cur: this.$store.state.cur,
493 + };
494 + console.log(currentData);
495 + const response = await uploadFile(formData);
496 + const filelist = await file(currentData);
497 + console.log(filelist.data.files);
498 + this.$store.commit('setFile', filelist.data.files);
499 + console.log(this.$store.getters.fileL);
500 + this.files = this.$store.getters.fileL;
501 + } catch (error) {
502 + console.log('에러');
503 + console.log(error);
504 + }
505 + },
506 + async delete_file() {
507 + try {
508 + var itemlist = this.$store.getters.fileL;
509 + const currentData = {
510 + fileName: null,
511 + user_id: null,
512 + cur: this.$store.state.cur,
513 + };
514 + for (var i = 0; i < itemlist.length; i++) {
515 + if (itemlist[i].file_name == this.cfilename.file_name) {
516 + currentData.fileName = itemlist[i].file_name;
517 + currentData.user_id = itemlist[i].user_id;
518 + }
519 + }
520 + const filelistData = {
521 + id: currentData.user_id,
522 + cur: currentData.cur,
523 + };
524 + const response = await deleteFile(currentData);
525 + setTimeout(function() {}, 500);
526 + const filelist = await file(filelistData);
527 + this.$store.commit('setFile', filelist.data.files);
528 + this.files = this.$store.getters.fileL;
529 + } catch (error) {
530 + console.log('에러');
531 + console.log(error);
532 + }
533 + },
534 + async download_file() {
535 + try {
536 + const currentData = {
537 + fileName: this.cfilename.file_name,
538 + id: this.$store.state.id,
539 + cur: this.$store.state.cur,
540 + };
541 + const result = await downloadFile(currentData);
542 + console.log(result);
543 + } catch (error) {
544 + console.log('에러');
545 + console.log(error);
546 + }
547 + },
548 + async delete_favorite() {
549 + try {
550 + const cData = {
551 + id: this.$store.state.id,
552 + cur: this.$store.state.cur,
553 + name: this.curfName.folder_name,
554 + };
555 + console.log(cData);
556 + const response = await delFavorite(cData);
557 + this.$store.commit('setFolder', response.data.folders);
558 + } catch (error) {
559 + console.log('에러');
560 + }
561 + },
562 + async add_favorite() {
563 + try {
564 + const cData = {
565 + id: this.$store.state.id,
566 + cur: this.$store.state.cur,
567 + name: this.curfName.folder_name,
568 + };
569 + console.log(cData);
570 + const response = await addFavorite(cData);
571 + this.$store.commit('setFolder', response.data.folders);
572 + } catch (error) {
573 + console.log('에러');
574 + }
575 + },
576 + async delete_favorite_file() {
577 + try {
578 + const fData = {
579 + id: this.$store.state.id,
580 + cur: this.$store.state.cur,
581 + name: this.cfilename.file_name,
582 + };
583 + console.log(fData);
584 + const response = await delFavoriteFile(fData);
585 + this.$store.commit('setFile', response.data.files);
586 + } catch (error) {
587 + console.log('에러');
588 + }
589 + },
590 + async add_favorite_file() {
591 + try {
592 + const fData = {
593 + id: this.$store.state.id,
594 + cur: this.$store.state.cur,
595 + name: this.cfilename.file_name,
596 + };
597 + console.log(fData);
598 + const response = await addFavoriteFile(fData);
599 + this.$store.commit('setFile', response.data.files);
600 + } catch (error) {
601 + console.log('에러');
602 + }
603 + },
604 + async transferFile(folderName) {
605 + try {
606 + const fData = {
607 + id: this.$store.state.id,
608 + cur: this.$store.state.cur,
609 + name: this.cfilename.file_name,
610 + isfolder: false,
611 + newPath: this.$store.state.cur + folderName + '/',
612 + };
613 + const response = await moveFile(fData);
614 + console.log(response);
615 + this.$store.commit('setFile', response.data.files);
616 + this.files = this.$store.getters.fileL;
617 + } catch (error) {
618 + console.log('에러');
619 + console.log(error.response.data);
620 + } finally {
621 + this.cfilename = {};
622 + this.dialog3 = false;
623 + }
624 + },
625 + async file_detail() {
626 + try {
627 + const currentData = {
628 + id: this.cfilename.user_id,
629 + cur: this.cfilename.location,
630 + fileName: this.cfilename.file_name,
631 + };
632 + const detailData = await detailFile(currentData);
633 + this.current_filename = detailData.data.file_name;
634 + this.current_filedata = detailData.data.content;
635 + console.log(this.current_filename);
636 + console.log(this.current_filedata);
637 + } catch (error) {
638 + console.log('에러');
639 + console.log(error);
640 + }
641 + },
642 + async modify_file() {
643 + try {
644 + const modifyData = {
645 + user_id: this.cfilename.user_id,
646 + cur: this.cfilename.location,
647 + name: this.current_filename,
648 + content: this.current_filedata,
649 + };
650 + const result = await modifyFile(modifyData);
651 + const after_data = {
652 + id: this.cfilename.user_id,
653 + cur: this.cfilename.location,
654 + fileName: this.current_filename,
655 + };
656 + const detailData = await detailFile(after_data);
657 + } catch (error) {
658 + console.log('에러');
659 + console.log(error);
660 + }
661 + },
662 + show(folderObj, e) {
663 + e.preventDefault();
664 + this.curfName = folderObj;
665 + this.showMenu = false;
666 + this.x = e.clientX;
667 + this.y = e.clientY;
668 + this.$nextTick(() => {
669 + this.showMenu = true;
670 + });
671 + },
672 + showF(fileObj, e) {
673 + e.preventDefault();
674 + this.cfilename = fileObj;
675 + this.showMenuF = false;
676 + this.x = e.clientX;
677 + this.y = e.clientY;
678 + this.$nextTick(() => {
679 + this.showMenuF = true;
680 + });
681 + },
682 + detailF(fileObj, e) {
683 + e.preventDefault();
684 + this.cfilename = fileObj;
685 + this.showdetailF = false;
686 + this.x = e.clientX;
687 + this.y = e.clientY;
688 + this.$nextTick(() => {
689 + this.showdetailF = true;
690 + });
691 + },
692 + },
693 +};
694 +</script>
...@@ -67,9 +67,10 @@ export default new VueRouter({ ...@@ -67,9 +67,10 @@ export default new VueRouter({
67 component: () => import('../views/Feedback.vue'), 67 component: () => import('../views/Feedback.vue'),
68 }, 68 },
69 { 69 {
70 - path: '/folder', 70 + path: '/file/:id',
71 name: 'Folder', 71 name: 'Folder',
72 component: () => import('../views/FolderPage.vue'), 72 component: () => import('../views/FolderPage.vue'),
73 + props: true,
73 }, 74 },
74 ], 75 ],
75 }); 76 });
......
...@@ -11,6 +11,8 @@ export default new Vuex.Store({ ...@@ -11,6 +11,8 @@ export default new Vuex.Store({
11 cur: '/', 11 cur: '/',
12 parent: '/', 12 parent: '/',
13 recentList: [], 13 recentList: [],
14 + favFolderList: [],
15 + favFileList: [],
14 }, 16 },
15 mutations: { 17 mutations: {
16 setId(state, userid) { 18 setId(state, userid) {
...@@ -34,6 +36,12 @@ export default new Vuex.Store({ ...@@ -34,6 +36,12 @@ export default new Vuex.Store({
34 setRecentList(state, list) { 36 setRecentList(state, list) {
35 state.recentList = list; 37 state.recentList = list;
36 }, 38 },
39 + setfavFolderList(state, fflist) {
40 + state.favFolderList = fflist;
41 + },
42 + setfavFileList(state, fflist) {
43 + state.favFileList = fflist;
44 + },
37 }, 45 },
38 getters: { 46 getters: {
39 isLogin(state) { 47 isLogin(state) {
...@@ -60,5 +68,11 @@ export default new Vuex.Store({ ...@@ -60,5 +68,11 @@ export default new Vuex.Store({
60 setFile(state, filelist) { 68 setFile(state, filelist) {
61 state.files = filelist; 69 state.files = filelist;
62 }, 70 },
71 + favFolderL(state) {
72 + return state.favFolderList;
73 + },
74 + favFileL(state) {
75 + return state.favFileList;
76 + },
63 }, 77 },
64 }); 78 });
......
1 <template> 1 <template>
2 <div> 2 <div>
3 - <v-toolbar flat> 3 + <Fav_list></Fav_list>
4 - <v-toolbar-title>즐겨찾기</v-toolbar-title>
5 -
6 - <v-spacer></v-spacer>
7 - <v-text-field
8 - v-model="search"
9 - append-icon="mdi-magnify"
10 - label="즐겨찾기 검색"
11 - single-line
12 - hide-details
13 - ></v-text-field>
14 - </v-toolbar>
15 -
16 - <v-list two-line subheader>
17 - <v-list-item v-for="item in items" :key="item.title" @click="">
18 - <v-list-item-avatar>
19 - <v-icon>{{ item.iconClass }}</v-icon>
20 - </v-list-item-avatar>
21 -
22 - <v-list-item-content>
23 - <v-list-item-title v-text="item.title"></v-list-item-title>
24 - <v-list-item-subtitle v-text="item.subtitle"></v-list-item-subtitle>
25 - </v-list-item-content>
26 -
27 - <v-list-item-action>
28 - <v-btn icon>
29 - <v-icon color="grey lighten-1">mdi-information</v-icon>
30 - </v-btn>
31 - </v-list-item-action>
32 - </v-list-item>
33 -
34 - <v-list-item v-for="item in items2" :key="item.title" @click="">
35 - <v-list-item-avatar>
36 - <v-icon> {{ item.iconClass }}</v-icon>
37 - </v-list-item-avatar>
38 -
39 - <v-list-item-content>
40 - <v-list-item-title v-text="item.title"></v-list-item-title>
41 - <v-list-item-subtitle v-text="item.subtitle"></v-list-item-subtitle>
42 - </v-list-item-content>
43 -
44 - <v-list-item-action>
45 - <v-btn icon>
46 - <v-icon color="grey lighten-1">mdi-information</v-icon>
47 - </v-btn>
48 - </v-list-item-action>
49 - </v-list-item>
50 - </v-list>
51 </div> 4 </div>
52 </template> 5 </template>
53 6
54 <script> 7 <script>
8 +import Fav_list from '../components/Fav_list';
55 export default { 9 export default {
56 - data: () => ({ 10 + components: {
57 - items: [ 11 + Fav_list,
58 - { 12 + },
59 - icon: 'folder',
60 - iconClass: 'mdi-folder',
61 - title: 'Photos',
62 - subtitle: 'Jan 9, 2014',
63 - },
64 - {
65 - icon: 'folder',
66 - iconClass: 'mdi-folder',
67 - title: 'Recipes',
68 - subtitle: 'Jan 17, 2014',
69 - },
70 - {
71 - icon: 'folder',
72 - iconClass: 'mdi-folder',
73 - title: 'Work',
74 - subtitle: 'Jan 28, 2014',
75 - },
76 - ],
77 - items2: [
78 - {
79 - icon: 'assignment',
80 - iconClass: 'mdi-file',
81 - title: 'Vacation itinerary',
82 - subtitle: 'Jan 20, 2014',
83 - },
84 - {
85 - icon: 'call_to_action',
86 - iconClass: 'mdi-PdfBox',
87 - title: 'Kitchen remodel',
88 - subtitle: 'Jan 10, 2014',
89 - },
90 - ],
91 - }),
92 }; 13 };
93 </script> 14 </script>
15 +
16 +<style></style>
......
1 +<template>
2 + <div>
3 + <folderc></folderc>
4 + </div>
5 +</template>
6 +
7 +<script>
8 +import folderc from '../components/folderc';
9 +export default {
10 + components: {
11 + folderc,
12 + },
13 +};
14 +</script>
15 +
16 +<style></style>
......