2020-1-CloudComputing / D_Team_Khuloud

Go to a project
Toggle navigation Toggle navigation pinning
최동원
811461ef 2 parents e5b47bf8 2747f20c

Merge branch 'folder'

Expand all
Inline Side-by-side
Showing 4 changed files with 154 additions and 28 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
38 - 34 +function moveFolder(folderData) {
39 -export { registerUser, loginUser, folder, makeFolder, file}; 35 + return axios.post('/api/folder/move', folderData);
36 +}
40 37
41 38
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>
36 </v-list-item> 47 </v-list-item>
48 + </v-list>
49 + </v-menu>
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);
...@@ -189,10 +253,78 @@ import { folder, makeFolder } from '../api/index'; ...@@ -189,10 +253,78 @@ import { folder, makeFolder } from '../api/index';
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);
256 + this.folders = this.$store.getters.folderL;
257 + } catch (error) {
258 + console.log("에러");
259 + console.log(error.response.data);
260 + }
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;
192 } catch (error) { 274 } catch (error) {
193 console.log("에러"); 275 console.log("에러");
194 console.log(error.response.data); 276 console.log(error.response.data);
195 } 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 + })
196 } 328 }
197 } 329 }
198 } 330 }
......
...@@ -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 },
......