2020-1-CloudComputing / D_Team_Khuloud

Go to a project
Toggle navigation Toggle navigation pinning
최동원
713ee350 1 parent 525538d2

make trashcan

Inline Side-by-side
Showing 8 changed files with 302 additions and 41 deletions
...@@ -89,6 +89,14 @@ function accessedList(curData) { ...@@ -89,6 +89,14 @@ function accessedList(curData) {
89 }); 89 });
90 } 90 }
91 91
92 +function showTrashcan(userId) {
93 + return axios.get('/api/trashcan/show', {
94 + params: {
95 + id: userId,
96 + },
97 + });
98 +}
99 +
92 function modifyFile(fileData) { 100 function modifyFile(fileData) {
93 return axios.post(`/api/file/modify/${fileData.name}`, fileData); 101 return axios.post(`/api/file/modify/${fileData.name}`, fileData);
94 } 102 }
...@@ -125,6 +133,32 @@ function shareFile(shareData) { ...@@ -125,6 +133,32 @@ function shareFile(shareData) {
125 return axios.post('/api/share', shareData); 133 return axios.post('/api/share', shareData);
126 } 134 }
127 135
136 +function tdelFolder(tData) {
137 + return axios.get('/api/trashcan/delfolder', {
138 + params: {
139 + id: tData.id,
140 + folder_id: tData.folder_id,
141 + },
142 + });
143 +}
144 +
145 +function tdelFile(tData) {
146 + return axios.get('/api/trashcan/delfile', {
147 + params: {
148 + id: tData.id,
149 + file_id: tData.file_id,
150 + },
151 + });
152 +}
153 +
154 +function tdelAll(userId) {
155 + return axios.get('/api/trashcan/all', {
156 + params: {
157 + id: userId,
158 + },
159 + });
160 +}
161 +
128 export { 162 export {
129 registerUser, 163 registerUser,
130 loginUser, 164 loginUser,
...@@ -146,4 +180,8 @@ export { ...@@ -146,4 +180,8 @@ export {
146 modifyFile, 180 modifyFile,
147 getFavoriteList, 181 getFavoriteList,
148 shareFile, 182 shareFile,
183 + tdelFolder,
184 + tdelFile,
185 + tdelAll,
186 + showTrashcan,
149 }; 187 };
......
...@@ -436,26 +436,6 @@ export default { ...@@ -436,26 +436,6 @@ export default {
436 this.dialog = false; 436 this.dialog = false;
437 } 437 }
438 }, 438 },
439 - async moveF(move_folder_name) {
440 - try {
441 - const curData = {
442 - id: this.$store.state.id,
443 - cur: this.$store.state.cur + move_folder_name + '/',
444 - };
445 - const response = await folder(curData);
446 - const file_response = await file(curData);
447 - console.log(response.data);
448 - this.$store.commit('setFolder', response.data.folders);
449 - this.$store.commit('setFile', file_response.data.files);
450 - this.$store.commit('setCur', response.data.cur);
451 - this.$store.commit('setParent', response.data.parentPath);
452 - this.folders = this.$store.getters.folderL;
453 - this.files = this.$store.getters.fileL;
454 - } catch (error) {
455 - console.log('에러');
456 - console.log(error.response.data);
457 - }
458 - },
459 async moveParent() { 439 async moveParent() {
460 try { 440 try {
461 const cData = { 441 const cData = {
......
...@@ -47,7 +47,7 @@ ...@@ -47,7 +47,7 @@
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> 50 + <v-list-item router :to="{ name: 'Trash' }" exact>
51 <v-list-item-action> 51 <v-list-item-action>
52 <v-icon>mdi-delete</v-icon> 52 <v-icon>mdi-delete</v-icon>
53 </v-list-item-action> 53 </v-list-item-action>
......
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
18 + v-for="item in this.$store.getters.trashFolderL"
19 + :key="item.folder_id"
20 + :search="search"
21 + @click.right="show(item, $event)"
22 + @click=""
23 + >
24 + <v-list-item-avatar>
25 + <v-icon>mdi-folder</v-icon>
26 + </v-list-item-avatar>
27 + <v-list-item-content>
28 + <v-list-item-title v-text="item.folder_name"></v-list-item-title>
29 + </v-list-item-content>
30 + </v-list-item>
31 + <!-- File view -->
32 + <v-list-item
33 + v-for="item in this.$store.getters.trashFileL"
34 + :key="item.title"
35 + @click.right="showF(item, $event)"
36 + >
37 + <v-list-item-avatar>
38 + <v-icon> mdi-file</v-icon>
39 + </v-list-item-avatar>
40 + <v-list-item-content>
41 + <v-list-item-title v-text="item.file_name"></v-list-item-title>
42 + </v-list-item-content>
43 + </v-list-item>
44 + </v-list>
45 + <v-menu
46 + v-model="showMenu"
47 + :position-x="x"
48 + :position-y="y"
49 + absolute
50 + offset-y
51 + >
52 + <v-list dense>
53 + <v-list-item @click.prevent="delFolder">
54 + <v-list-item-icon>
55 + <v-icon>mdi-delete</v-icon>
56 + </v-list-item-icon>
57 + <v-list-item-content>
58 + <v-list-item-title>삭제</v-list-item-title>
59 + </v-list-item-content>
60 + </v-list-item>
61 + <v-list-item @click.prevent="transferF">
62 + <v-list-item-icon>
63 + <v-icon>fas fa-trash-restore</v-icon>
64 + </v-list-item-icon>
65 + <v-list-item-content>
66 + <v-list-item-title>복원</v-list-item-title>
67 + </v-list-item-content>
68 + </v-list-item>
69 + </v-list>
70 + </v-menu>
71 + <v-menu
72 + v-model="showMenu"
73 + :position-x="x"
74 + :position-y="y"
75 + absolute
76 + offset-y
77 + >
78 + <v-list dense>
79 + <v-list-item @click.prevent="delFile">
80 + <v-list-item-icon>
81 + <v-icon>mdi-delete</v-icon>
82 + </v-list-item-icon>
83 + <v-list-item-content>
84 + <v-list-item-title>삭제</v-list-item-title>
85 + </v-list-item-content>
86 + </v-list-item>
87 + <v-list-item @click.prevent="transferFile">
88 + <v-list-item-icon>
89 + <v-icon>fas fa-trash-restore</v-icon>
90 + </v-list-item-icon>
91 + <v-list-item-content>
92 + <v-list-item-title>복원</v-list-item-title>
93 + </v-list-item-content>
94 + </v-list-item>
95 + </v-list>
96 + </v-menu>
97 + </div>
98 +</template>
99 +
100 +<script>
101 +import {
102 + tdelFolder,
103 + tdelFile,
104 + tdelAll,
105 + moveFolder,
106 + moveFile,
107 + showTrashcan,
108 +} from '../api/index';
109 +export default {
110 + data() {
111 + return {
112 + curfName: {},
113 + showMenu: false,
114 + cfilename: {},
115 + showMenuF: false,
116 + };
117 + },
118 + created() {
119 + this.fetchData();
120 + },
121 + watch: {
122 + $route: 'fetchData',
123 + },
124 + methods: {
125 + async fetchData() {
126 + try {
127 + const id = this.$store.state.id;
128 + const response = await showTrashcan(id);
129 + this.$store.commit('settrashFolderList', response.data.folders);
130 + this.$store.commit('settrashFileList', response.data.files);
131 + } catch (error) {
132 + console.log('에러');
133 + }
134 + },
135 + async delFolder() {
136 + try {
137 + const tData = {
138 + id: this.$store.state.id,
139 + folder_id: this.curfName.folder_id,
140 + };
141 + const response = await tdelFolder(tData);
142 + this.$store.commit('settrashFolderList', response.data.folders);
143 + } catch (error) {
144 + console.log('에러');
145 + alert('삭제 실패');
146 + }
147 + },
148 + async delFile() {
149 + try {
150 + const tData = {
151 + id: this.$store.state.id,
152 + folder_id: this.cfilename.file_id,
153 + };
154 + const response = await tdelFile(tData);
155 + this.$store.commit('settrashFileList', response.data.files);
156 + } catch (error) {
157 + console.log('에러');
158 + alert('삭제 실패');
159 + }
160 + },
161 + async delAll() {
162 + try {
163 + const id = this.$store.state.id;
164 + const response = await tdelAll(id);
165 + this.$store.commit('settrashFolderList', response.data.folders);
166 + this.$store.commit('settrashFileList', response.data.files);
167 + } catch (error) {
168 + console.log('에러');
169 + alert('삭제 실패');
170 + }
171 + },
172 + async transferF() {
173 + try {
174 + const cData = {
175 + id: this.$store.state.id,
176 + cur: '/trashcan/',
177 + name: this.curfName.folder_name,
178 + isfolder: true,
179 + newPath: '/',
180 + };
181 + const response = await moveFolder(cData);
182 + console.log(response);
183 + this.$store.commit('settrashFolderList', response.data.folders);
184 + } catch (error) {
185 + console.log('에러');
186 + console.log(error.response.data);
187 + }
188 + },
189 + async transferFile() {
190 + try {
191 + const fData = {
192 + id: this.$store.state.id,
193 + cur: '/trashcan/',
194 + name: this.cfilename.file_name,
195 + isfolder: false,
196 + newPath: '/',
197 + };
198 + const response = await moveFile(fData);
199 + console.log(response);
200 + this.$store.commit('settrashFileList', response.data.files);
201 + } catch (error) {
202 + console.log('에러');
203 + console.log(error.response.data);
204 + }
205 + },
206 + show(folderObj, e) {
207 + e.preventDefault();
208 + this.curfName = folderObj;
209 + this.showMenu = false;
210 + this.x = e.clientX;
211 + this.y = e.clientY;
212 + this.$nextTick(() => {
213 + this.showMenu = true;
214 + });
215 + },
216 + showF(fileObj, e) {
217 + e.preventDefault();
218 + this.cfilename = fileObj;
219 + this.showMenuF = false;
220 + this.x = e.clientX;
221 + this.y = e.clientY;
222 + this.$nextTick(() => {
223 + this.showMenuF = true;
224 + });
225 + },
226 + },
227 +};
228 +</script>
229 +
230 +<style></style>
...@@ -441,26 +441,6 @@ export default { ...@@ -441,26 +441,6 @@ export default {
441 this.dialog = false; 441 this.dialog = false;
442 } 442 }
443 }, 443 },
444 - async moveF(move_folder_name) {
445 - try {
446 - const curData = {
447 - id: this.$store.state.id,
448 - cur: this.$store.state.cur + move_folder_name + '/',
449 - };
450 - const response = await folder(curData);
451 - const file_response = await file(curData);
452 - console.log(response.data);
453 - this.$store.commit('setFolder', response.data.folders);
454 - this.$store.commit('setFile', file_response.data.files);
455 - this.$store.commit('setCur', response.data.cur);
456 - this.$store.commit('setParent', response.data.parentPath);
457 - this.folders = this.$store.getters.folderL;
458 - this.files = this.$store.getters.fileL;
459 - } catch (error) {
460 - console.log('에러');
461 - console.log(error.response.data);
462 - }
463 - },
464 async moveParent() { 444 async moveParent() {
465 try { 445 try {
466 const cData = { 446 const cData = {
......
...@@ -72,5 +72,10 @@ export default new VueRouter({ ...@@ -72,5 +72,10 @@ export default new VueRouter({
72 component: () => import('../components/folderc'), 72 component: () => import('../components/folderc'),
73 props: true, 73 props: true,
74 }, 74 },
75 + {
76 + path: '/trash',
77 + name: 'Trash',
78 + component: () => import('../views/TrashPage'),
79 + },
75 ], 80 ],
76 }); 81 });
......
...@@ -13,6 +13,8 @@ export default new Vuex.Store({ ...@@ -13,6 +13,8 @@ export default new Vuex.Store({
13 recentList: [], 13 recentList: [],
14 favFolderList: [], 14 favFolderList: [],
15 favFileList: [], 15 favFileList: [],
16 + trashFolderList: [],
17 + trashFileList: [],
16 }, 18 },
17 mutations: { 19 mutations: {
18 setId(state, userid) { 20 setId(state, userid) {
...@@ -42,6 +44,12 @@ export default new Vuex.Store({ ...@@ -42,6 +44,12 @@ export default new Vuex.Store({
42 setfavFileList(state, fflist) { 44 setfavFileList(state, fflist) {
43 state.favFileList = fflist; 45 state.favFileList = fflist;
44 }, 46 },
47 + settrashFolderList(state, tflist) {
48 + state.trashFolderList = tflist;
49 + },
50 + settrashFileList(state, tflist) {
51 + state.trashFileList = tflist;
52 + },
45 }, 53 },
46 getters: { 54 getters: {
47 isLogin(state) { 55 isLogin(state) {
...@@ -74,5 +82,11 @@ export default new Vuex.Store({ ...@@ -74,5 +82,11 @@ export default new Vuex.Store({
74 favFileL(state) { 82 favFileL(state) {
75 return state.favFileList; 83 return state.favFileList;
76 }, 84 },
85 + trashFolderL(state) {
86 + return state.trashFolderList;
87 + },
88 + trashFileL(state) {
89 + return state.trashFolderList;
90 + },
77 }, 91 },
78 }); 92 });
......
1 +<template>
2 + <TrashList></TrashList>
3 +</template>
4 +
5 +<script>
6 +import TrashList from '../components/TrashList';
7 +export default {
8 + components: {
9 + TrashList,
10 + },
11 +};
12 +</script>
13 +
14 +<style></style>