Showing
4 changed files
with
158 additions
and
32 deletions
This diff is collapsed. Click to expand it.
... | @@ -27,20 +27,14 @@ function makeFolder(folderData) { | ... | @@ -27,20 +27,14 @@ 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 file(userData){ | 30 | +function deleteFolder(folderData) { |
31 | - return axios.get('/api/file', userData, { | 31 | + return axios.post('/api/folder/delfolder', folderData); |
32 | - params: { | ||
33 | - user_id: userData.user_id | ||
34 | - } | ||
35 | - }) | ||
36 | } | 32 | } |
37 | 33 | ||
34 | +function moveFolder(folderData) { | ||
35 | + return axios.post('/api/folder/move', folderData); | ||
36 | +} | ||
38 | 37 | ||
39 | -export { registerUser, loginUser, folder, makeFolder, file}; | ||
40 | 38 | ||
41 | - | ||
42 | -function dropbox(userData){ | ||
43 | - return axios.get(`/api/folder/show/${userData}`); | ||
44 | -} | ||
45 | 39 | ||
46 | -// export { registerUser, loginUser, dropbox, makeFolder }; | 40 | +export { registerUser, loginUser, folder, makeFolder, deleteFolder, moveFolder }; | ... | ... |
... | @@ -14,26 +14,76 @@ | ... | @@ -14,26 +14,76 @@ |
14 | </v-toolbar> | 14 | </v-toolbar> |
15 | <v-list two-line subheader> | 15 | <v-list two-line subheader> |
16 | <v-subheader inset>Folders</v-subheader> | 16 | <v-subheader inset>Folders</v-subheader> |
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 | - @click="moveF(item.folder_name)" | 21 | + :search="search" |
22 | + @click.right="show(item.folder_name,$event)" | ||
23 | + @click.left="moveF(item.folder_name)" | ||
21 | > | 24 | > |
22 | - <v-list-item-avatar> | 25 | + <v-list-item-avatar > |
23 | <v-icon>mdi-folder</v-icon> | 26 | <v-icon>mdi-folder</v-icon> |
24 | </v-list-item-avatar> | 27 | </v-list-item-avatar> |
25 | - <v-list-item-content> | 28 | + <v-list-item-content > |
26 | <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> |
27 | </v-list-item-content> | 30 | </v-list-item-content> |
28 | - <v-list-item-action> | 31 | + |
29 | - <v-btn icon> | 32 | + |
30 | - <v-icon color="grey lighten-1">mdi-information</v-icon> | 33 | + |
31 | - </v-btn> | 34 | + <v-menu |
32 | - <v-btn icon> | 35 | + v-model="showMenu" |
33 | - <v-icon color="grey lighten-1">mdi-delete</v-icon> | 36 | + :position-x="x" |
34 | - </v-btn> | 37 | + :position-y="y" |
35 | - </v-list-item-action> | 38 | + absolute |
39 | + offset-y | ||
40 | + > | ||
41 | + <v-list dense> | ||
42 | + <v-list-item @click.prevent="dialog2 = !dialog2"> | ||
43 | + <v-list-item-title>이동</v-list-item-title> | ||
44 | + </v-list-item> | ||
45 | + <v-list-item @click.prevent="deleteF"> | ||
46 | + <v-list-item-title>삭제</v-list-item-title> | ||
47 | + </v-list-item> | ||
48 | + </v-list> | ||
49 | + </v-menu> | ||
36 | </v-list-item> | 50 | </v-list-item> |
51 | +<v-dialog | ||
52 | + v-model="dialog2" | ||
53 | + width="500px" | ||
54 | + > | ||
55 | + <v-card> | ||
56 | + <v-card-title class="grey darken-2"> | ||
57 | + Move Folder | ||
58 | + </v-card-title> | ||
59 | + <v-container> | ||
60 | + <v-list-item-group | ||
61 | + v-for="item2 in folders" | ||
62 | + :key="item2.folder_id" | ||
63 | + > | ||
64 | + <template v-if="!(item2.folder_name === curfName)"> | ||
65 | + <v-hover @click.left="transferF(item2.folder_name)"> | ||
66 | + <v-list-item-avatar> | ||
67 | + <v-icon>mdi-folder</v-icon> | ||
68 | + </v-list-item-avatar> | ||
69 | + <v-list-item-content> | ||
70 | + <v-list-item-title v-text="item2.folder_name"></v-list-item-title> | ||
71 | + </v-list-item-content> | ||
72 | + </v-hover> | ||
73 | + </template> | ||
74 | + <!-- <template v-else></template> --> | ||
75 | + </v-list-item-group> | ||
76 | + </v-container> | ||
77 | + <v-card-actions> | ||
78 | + <v-spacer></v-spacer> | ||
79 | + <v-btn | ||
80 | + text | ||
81 | + color="primary" | ||
82 | + @click="cancelMove" | ||
83 | + >Cancel</v-btn> | ||
84 | + </v-card-actions> | ||
85 | + </v-card> | ||
86 | + </v-dialog> | ||
37 | <v-divider inset></v-divider> | 87 | <v-divider inset></v-divider> |
38 | <v-subheader inset>Files</v-subheader> | 88 | <v-subheader inset>Files</v-subheader> |
39 | <v-list-item | 89 | <v-list-item |
... | @@ -98,7 +148,7 @@ | ... | @@ -98,7 +148,7 @@ |
98 | </v-btn> | 148 | </v-btn> |
99 | <v-dialog | 149 | <v-dialog |
100 | v-model="dialog" | 150 | v-model="dialog" |
101 | - width="800px" | 151 | + width="500px" |
102 | > | 152 | > |
103 | <v-card> | 153 | <v-card> |
104 | <v-card-title class="grey darken-2"> | 154 | <v-card-title class="grey darken-2"> |
... | @@ -127,16 +177,24 @@ | ... | @@ -127,16 +177,24 @@ |
127 | </div> | 177 | </div> |
128 | </template> | 178 | </template> |
129 | <script> | 179 | <script> |
130 | -import { folder, makeFolder } from '../api/index'; | 180 | +import { folder, makeFolder, deleteFolder, moveFolder } from '../api/index'; |
181 | +import Axios from 'axios'; | ||
131 | export default { | 182 | export default { |
132 | data() { | 183 | data() { |
133 | return { | 184 | return { |
134 | foldername:'', | 185 | foldername:'', |
186 | + curfName:'', | ||
135 | folders: [], | 187 | folders: [], |
136 | files: [], | 188 | files: [], |
137 | search:'', | 189 | search:'', |
138 | id: '', | 190 | id: '', |
139 | - dialog:false | 191 | + dialog:false, |
192 | + search: '', | ||
193 | + howMenu: false, | ||
194 | + showMenu: false, | ||
195 | + x: 0, | ||
196 | + y: 0, | ||
197 | + dialog2:false | ||
140 | } | 198 | } |
141 | }, | 199 | }, |
142 | async created(){ | 200 | async created(){ |
... | @@ -150,6 +208,7 @@ import { folder, makeFolder } from '../api/index'; | ... | @@ -150,6 +208,7 @@ import { folder, makeFolder } from '../api/index'; |
150 | this.$store.commit('setFolder', response.data.folders); | 208 | this.$store.commit('setFolder', response.data.folders); |
151 | this.$store.commit('setCur', response.data.cur); | 209 | this.$store.commit('setCur', response.data.cur); |
152 | this.$store.commit('setParent', response.data.parentPath); | 210 | this.$store.commit('setParent', response.data.parentPath); |
211 | + this.folders = this.$store.getters.folderL; | ||
153 | } catch (error) { | 212 | } catch (error) { |
154 | console.log("에러"); | 213 | console.log("에러"); |
155 | console.log(error.response.data); | 214 | console.log(error.response.data); |
... | @@ -159,6 +218,10 @@ import { folder, makeFolder } from '../api/index'; | ... | @@ -159,6 +218,10 @@ import { folder, makeFolder } from '../api/index'; |
159 | initFolderName(){ | 218 | initFolderName(){ |
160 | this.foldername = ''; | 219 | this.foldername = ''; |
161 | }, | 220 | }, |
221 | + cancelMove(){ | ||
222 | + this.curfName = ''; | ||
223 | + this.dialog2 = false; | ||
224 | + }, | ||
162 | async makeF(){ | 225 | async makeF(){ |
163 | try { | 226 | try { |
164 | const folderData = { | 227 | const folderData = { |
... | @@ -170,6 +233,7 @@ import { folder, makeFolder } from '../api/index'; | ... | @@ -170,6 +233,7 @@ import { folder, makeFolder } from '../api/index'; |
170 | console.log(response.data) | 233 | console.log(response.data) |
171 | console.log("폴더 생성 완료"); | 234 | console.log("폴더 생성 완료"); |
172 | this.$store.commit('setFolder', response.data.folders); | 235 | this.$store.commit('setFolder', response.data.folders); |
236 | + this.folders = respons.data.folders; | ||
173 | } catch (error) { | 237 | } catch (error) { |
174 | console.log("에러"); | 238 | console.log("에러"); |
175 | console.log(error.response.data); | 239 | console.log(error.response.data); |
... | @@ -183,17 +247,85 @@ import { folder, makeFolder } from '../api/index'; | ... | @@ -183,17 +247,85 @@ import { folder, makeFolder } from '../api/index'; |
183 | const curData = { | 247 | const curData = { |
184 | id : this.$store.state.id, | 248 | id : this.$store.state.id, |
185 | cur: this.$store.state.cur + move_folder_name + '/' | 249 | cur: this.$store.state.cur + move_folder_name + '/' |
186 | - } | 250 | + } |
187 | const response = await folder(curData); | 251 | const response = await folder(curData); |
188 | console.log(response.data); | 252 | console.log(response.data); |
189 | this.$store.commit('setFolder', response.data.folders); | 253 | this.$store.commit('setFolder', response.data.folders); |
190 | this.$store.commit('setCur', response.data.cur); | 254 | this.$store.commit('setCur', response.data.cur); |
191 | this.$store.commit('setParent', response.data.parentPath); | 255 | this.$store.commit('setParent', response.data.parentPath); |
192 | - } catch (error) { | 256 | + this.folders = this.$store.getters.folderL; |
257 | + } catch (error) { | ||
193 | console.log("에러"); | 258 | console.log("에러"); |
194 | console.log(error.response.data); | 259 | console.log(error.response.data); |
195 | - } | 260 | + } |
196 | - } | 261 | + }, |
262 | + async moveParent(){ | ||
263 | + try { | ||
264 | + const cData = { | ||
265 | + id : this.$store.state.id, | ||
266 | + cur : this.$store.state.parent | ||
267 | + }; | ||
268 | + const response= await folder(cData); | ||
269 | + console.log(response.data); | ||
270 | + this.$store.commit('setFolder', response.data.folders); | ||
271 | + this.$store.commit('setCur', response.data.cur); | ||
272 | + this.$store.commit('setParent', response.data.parentPath); | ||
273 | + this.folders = this.$store.getters.folderL; | ||
274 | + } catch (error) { | ||
275 | + console.log("에러"); | ||
276 | + console.log(error.response.data); | ||
277 | + } | ||
278 | + }, | ||
279 | + async deleteF(){ | ||
280 | + try { | ||
281 | + const cData = { | ||
282 | + id: this.$store.state.id, | ||
283 | + cur : this.$store.state.cur, | ||
284 | + folder_name: this.curfName | ||
285 | + } | ||
286 | + const response = await deleteFolder(cData); | ||
287 | + console.log(response); | ||
288 | + this.$store.commit('setFolder', response.data.folders); | ||
289 | + this.folders = this.$store.getters.folderL; | ||
290 | + } catch (error) { | ||
291 | + console.log("에러"); | ||
292 | + console.log(error.response.data); | ||
293 | + } finally{ | ||
294 | + this.curfName = ''; | ||
295 | + } | ||
296 | + }, | ||
297 | + async transferF(folderName){ | ||
298 | + try { | ||
299 | + const cData = { | ||
300 | + id: this.$store.state.id, | ||
301 | + cur : this.$store.state.cur, | ||
302 | + folder_name: this.curfName, | ||
303 | + isfolder: true, | ||
304 | + newPath: this.$store.state.cur + folderName + '/' | ||
305 | + } | ||
306 | + const response = await moveFolder(cData); | ||
307 | + console.log(response); | ||
308 | + this.$store.commit('setFolder', response.data.folders); | ||
309 | + this.folders = this.$store.getters.folderL; | ||
310 | + } catch (error) { | ||
311 | + console.log("에러"); | ||
312 | + console.log(error.response.data); | ||
313 | + } finally{ | ||
314 | + this.initFolderName(); | ||
315 | + this.curfName = ''; | ||
316 | + this.dialog2 = false; | ||
317 | + } | ||
318 | + }, | ||
319 | + show (folderN, e) { | ||
320 | + e.preventDefault() | ||
321 | + this.curfName = folderN; | ||
322 | + this.showMenu = false | ||
323 | + this.x = e.clientX | ||
324 | + this.y = e.clientY | ||
325 | + this.$nextTick(() => { | ||
326 | + this.showMenu = true | ||
327 | + }) | ||
328 | + } | ||
197 | } | 329 | } |
198 | } | 330 | } |
199 | </script> | 331 | </script> |
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
... | @@ -6,8 +6,8 @@ Vue.use(Vuex) | ... | @@ -6,8 +6,8 @@ Vue.use(Vuex) |
6 | export default new Vuex.Store({ | 6 | export default new Vuex.Store({ |
7 | state: { | 7 | state: { |
8 | id: '', | 8 | id: '', |
9 | - folders: {}, | 9 | + folders: [], |
10 | - files: {}, | 10 | + files: [], |
11 | cur: '/', | 11 | cur: '/', |
12 | parent: '/' | 12 | parent: '/' |
13 | }, | 13 | }, | ... | ... |
-
Please register or login to post a comment