Showing
4 changed files
with
92 additions
and
130 deletions
| ... | @@ -15,7 +15,11 @@ function registerUser(userData) { | ... | @@ -15,7 +15,11 @@ function registerUser(userData) { |
| 15 | } | 15 | } |
| 16 | 16 | ||
| 17 | function dropbox(userData){ | 17 | function dropbox(userData){ |
| 18 | - return axios.get('/api/dropbox', userData); | 18 | + return axios.get(`/api/folder/${userData}`); |
| 19 | } | 19 | } |
| 20 | 20 | ||
| 21 | - export { registerUser, loginUser, dropbox }; | ||
| ... | \ No newline at end of file | ... | \ No newline at end of file |
| 21 | +function makeFolder(folderData){ | ||
| 22 | + return axios.post('/api/makefolder', folderData); | ||
| 23 | +} | ||
| 24 | + | ||
| 25 | + export { registerUser, loginUser, dropbox, makeFolder }; | ||
| ... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
| ... | @@ -41,7 +41,7 @@ | ... | @@ -41,7 +41,7 @@ |
| 41 | <v-subheader inset>Files</v-subheader> | 41 | <v-subheader inset>Files</v-subheader> |
| 42 | 42 | ||
| 43 | <v-list-item | 43 | <v-list-item |
| 44 | - v-for="item in items2" | 44 | + v-for="item in this.$store.getters.fileL" |
| 45 | :key="item.title" | 45 | :key="item.title" |
| 46 | @click="" | 46 | @click="" |
| 47 | > | 47 | > |
| ... | @@ -90,44 +90,107 @@ | ... | @@ -90,44 +90,107 @@ |
| 90 | </span> | 90 | </span> |
| 91 | </template> | 91 | </template> |
| 92 | </v-file-input> | 92 | </v-file-input> |
| 93 | + <template> | ||
| 94 | + <v-btn | ||
| 95 | + bottom | ||
| 96 | + color="blue" | ||
| 97 | + dark | ||
| 98 | + fab | ||
| 99 | + fixed | ||
| 100 | + right | ||
| 101 | + @click="dialog = !dialog" | ||
| 102 | + > | ||
| 103 | + <v-icon>mdi-plus</v-icon> | ||
| 104 | + </v-btn> | ||
| 105 | + </template> | ||
| 106 | + <v-dialog | ||
| 107 | + v-model="dialog" | ||
| 108 | + width="800px" | ||
| 109 | + > | ||
| 110 | + <v-card> | ||
| 111 | + <v-card-title class="grey darken-2"> | ||
| 112 | + Create Folder | ||
| 113 | + </v-card-title> | ||
| 114 | + <v-container> | ||
| 115 | + <div> | ||
| 116 | + <v-icon>mdi-folder</v-icon> | ||
| 117 | + <v-text-field placeholder="name" id="foldername" type="text" v-mode="foldername" @click="makeF"></v-text-field> | ||
| 118 | + </div> | ||
| 119 | + </v-container> | ||
| 120 | + <v-card-actions> | ||
| 121 | + <v-spacer></v-spacer> | ||
| 122 | + <v-btn | ||
| 123 | + text | ||
| 124 | + color="primary" | ||
| 125 | + @click="dialog = false" | ||
| 126 | + >Cancel</v-btn> | ||
| 127 | + <v-btn | ||
| 128 | + text | ||
| 129 | + @click="dialog = false" | ||
| 130 | + >Create</v-btn> | ||
| 131 | + </v-card-actions> | ||
| 132 | + </v-card> | ||
| 133 | + </v-dialog> | ||
| 93 | </div> | 134 | </div> |
| 94 | </template> | 135 | </template> |
| 95 | 136 | ||
| 96 | <script> | 137 | <script> |
| 97 | -import { dropbox } from '../api/index'; | 138 | +import { dropbox, makeFolder } from '../api/index'; |
| 98 | export default { | 139 | export default { |
| 99 | data() { | 140 | data() { |
| 100 | return { | 141 | return { |
| 142 | + foldername: '', | ||
| 101 | folders: [], | 143 | folders: [], |
| 102 | files: [], | 144 | files: [], |
| 103 | search:'', | 145 | search:'', |
| 146 | + id: '', | ||
| 147 | + dialog: false, | ||
| 104 | } | 148 | } |
| 105 | }, | 149 | }, |
| 106 | async created(){ | 150 | async created(){ |
| 107 | try { | 151 | try { |
| 108 | - const userData = { | 152 | + const userData = this.$store.state.id; |
| 109 | - user_id: this.$store.getters.userId, | 153 | + console.log(this.id); |
| 110 | - cur: '/', | 154 | + |
| 155 | + const response = await dropbox(userData); | ||
| 156 | + console.log(response); | ||
| 157 | + this.$store.commit('setFolder', response.data.folders); | ||
| 158 | + this.$store.commit('setFile', response.data.files); | ||
| 159 | + } catch (error) { | ||
| 160 | + console.log("에러"); | ||
| 161 | + console.log(error.response.data); | ||
| 162 | + } | ||
| 163 | + }, | ||
| 164 | + methods: { | ||
| 165 | + initFolderName(){ | ||
| 166 | + this.foldername = ''; | ||
| 167 | + }, | ||
| 168 | + async makeF(){ | ||
| 169 | + try { | ||
| 170 | + const folderData = { | ||
| 171 | + user_id : this.$store.state.id, | ||
| 172 | + cur : this.$store.state.id, | ||
| 173 | + folder_name : this.foldername | ||
| 111 | }; | 174 | }; |
| 112 | - const { data } = await dropbox(userData); | 175 | + const response = await makeFolder(folderData); |
| 113 | - console.log(data); | 176 | + if (reponse.status == 200){ |
| 114 | - this.$store.commit('setFolder', data.folders); | 177 | + try { |
| 115 | - this.$store.commit('setFile', data.files); | 178 | + const res = await deropbox(folderData.user_id); |
| 179 | + this.$store.commit('setFolder', response.data.folders); | ||
| 180 | + this.$store.commit('setFile', response.data.files); | ||
| 116 | } catch (error) { | 181 | } catch (error) { |
| 117 | console.log("에러"); | 182 | console.log("에러"); |
| 118 | console.log(error.response.data); | 183 | console.log(error.response.data); |
| 119 | } | 184 | } |
| 120 | } | 185 | } |
| 121 | - // data: () => ({ | 186 | + console.log("폴더 생성 완료"); |
| 122 | - // items: [ | 187 | + } catch (error) { |
| 123 | - // { icon: 'folder', iconClass: 'mdi-folder', title: 'Photos', subtitle: 'Jan 9, 2014' }, | 188 | + console.log("에러"); |
| 124 | - // { icon: 'folder', iconClass: 'mdi-folder', title: 'Recipes', subtitle: 'Jan 17, 2014' }, | 189 | + console.log(error.response.data); |
| 125 | - // { icon: 'folder', iconClass: 'mdi-folder', title: 'Work', subtitle: 'Jan 28, 2014' }, | 190 | + } finally{ |
| 126 | - // ], | 191 | + this.initFolderName(); |
| 127 | - // items2: [ | 192 | + } |
| 128 | - // { icon: 'assignment', iconClass: 'mdi-file', title: 'Vacation itinerary', subtitle: 'Jan 20, 2014' }, | 193 | + } |
| 129 | - // { icon: 'call_to_action', iconClass: 'mdi-PdfBox', title: 'Kitchen remodel', subtitle: 'Jan 10, 2014' }, | 194 | + } |
| 130 | - // ], | ||
| 131 | - // }), | ||
| 132 | } | 195 | } |
| 133 | </script> | 196 | </script> | ... | ... |
| ... | @@ -132,112 +132,6 @@ | ... | @@ -132,112 +132,6 @@ |
| 132 | <router-view></router-view> | 132 | <router-view></router-view> |
| 133 | </v-container> | 133 | </v-container> |
| 134 | </v-content> | 134 | </v-content> |
| 135 | - <template v-if="isUserLogin"> | ||
| 136 | - <v-btn | ||
| 137 | - bottom | ||
| 138 | - color="pink" | ||
| 139 | - dark | ||
| 140 | - fab | ||
| 141 | - fixed | ||
| 142 | - right | ||
| 143 | - @click="dialog = !dialog" | ||
| 144 | - > | ||
| 145 | - <v-icon>mdi-plus</v-icon> | ||
| 146 | - </v-btn> | ||
| 147 | - </template> | ||
| 148 | - <!-- <v-btn | ||
| 149 | - bottom | ||
| 150 | - color="pink" | ||
| 151 | - dark | ||
| 152 | - fab | ||
| 153 | - fixed | ||
| 154 | - right | ||
| 155 | - @click="dialog = !dialog" | ||
| 156 | - > | ||
| 157 | - <v-icon>mdi-plus</v-icon> | ||
| 158 | - </v-btn> --> | ||
| 159 | - <v-dialog | ||
| 160 | - v-model="dialog" | ||
| 161 | - width="800px" | ||
| 162 | - > | ||
| 163 | - <v-card> | ||
| 164 | - <v-card-title class="grey darken-2"> | ||
| 165 | - Create contact | ||
| 166 | - </v-card-title> | ||
| 167 | - <v-container> | ||
| 168 | - <v-row class="mx-2"> | ||
| 169 | - <v-col | ||
| 170 | - class="align-center justify-space-between" | ||
| 171 | - cols="12" | ||
| 172 | - > | ||
| 173 | - <v-row | ||
| 174 | - align="center" | ||
| 175 | - class="mr-0" | ||
| 176 | - > | ||
| 177 | - <v-avatar | ||
| 178 | - size="40px" | ||
| 179 | - class="mx-3" | ||
| 180 | - > | ||
| 181 | - <img | ||
| 182 | - src="//ssl.gstatic.com/s2/oz/images/sge/grey_silhouette.png" | ||
| 183 | - alt="" | ||
| 184 | - > | ||
| 185 | - </v-avatar> | ||
| 186 | - <v-text-field | ||
| 187 | - placeholder="Name" | ||
| 188 | - ></v-text-field> | ||
| 189 | - </v-row> | ||
| 190 | - </v-col> | ||
| 191 | - <v-col cols="6"> | ||
| 192 | - <v-text-field | ||
| 193 | - prepend-icon="mdi-account-card-details-outline" | ||
| 194 | - placeholder="Company" | ||
| 195 | - ></v-text-field> | ||
| 196 | - </v-col> | ||
| 197 | - <v-col cols="6"> | ||
| 198 | - <v-text-field | ||
| 199 | - placeholder="Job title" | ||
| 200 | - ></v-text-field> | ||
| 201 | - </v-col> | ||
| 202 | - <v-col cols="12"> | ||
| 203 | - <v-text-field | ||
| 204 | - prepend-icon="mdi-mail" | ||
| 205 | - placeholder="Email" | ||
| 206 | - ></v-text-field> | ||
| 207 | - </v-col> | ||
| 208 | - <v-col cols="12"> | ||
| 209 | - <v-text-field | ||
| 210 | - type="tel" | ||
| 211 | - prepend-icon="mdi-phone" | ||
| 212 | - placeholder="(000) 000 - 0000" | ||
| 213 | - ></v-text-field> | ||
| 214 | - </v-col> | ||
| 215 | - <v-col cols="12"> | ||
| 216 | - <v-text-field | ||
| 217 | - prepend-icon="mdi-text" | ||
| 218 | - placeholder="Notes" | ||
| 219 | - ></v-text-field> | ||
| 220 | - </v-col> | ||
| 221 | - </v-row> | ||
| 222 | - </v-container> | ||
| 223 | - <v-card-actions> | ||
| 224 | - <v-btn | ||
| 225 | - text | ||
| 226 | - color="primary" | ||
| 227 | - >More</v-btn> | ||
| 228 | - <v-spacer></v-spacer> | ||
| 229 | - <v-btn | ||
| 230 | - text | ||
| 231 | - color="primary" | ||
| 232 | - @click="dialog = false" | ||
| 233 | - >Cancel</v-btn> | ||
| 234 | - <v-btn | ||
| 235 | - text | ||
| 236 | - @click="dialog = false" | ||
| 237 | - >Save</v-btn> | ||
| 238 | - </v-card-actions> | ||
| 239 | - </v-card> | ||
| 240 | - </v-dialog> | ||
| 241 | </v-app> | 135 | </v-app> |
| 242 | </template> | 136 | </template> |
| 243 | 137 | ... | ... |
| ... | @@ -8,6 +8,7 @@ export default new Vuex.Store({ | ... | @@ -8,6 +8,7 @@ export default new Vuex.Store({ |
| 8 | id: '', | 8 | id: '', |
| 9 | folders: [], | 9 | folders: [], |
| 10 | files: [], | 10 | files: [], |
| 11 | + cur:'/', | ||
| 11 | }, | 12 | }, |
| 12 | mutations: { | 13 | mutations: { |
| 13 | setId(state, userid){ | 14 | setId(state, userid){ |
| ... | @@ -20,8 +21,8 @@ export default new Vuex.Store({ | ... | @@ -20,8 +21,8 @@ export default new Vuex.Store({ |
| 20 | state.folders = folderlist; | 21 | state.folders = folderlist; |
| 21 | }, | 22 | }, |
| 22 | setFile(state, filelist){ | 23 | setFile(state, filelist){ |
| 23 | - state.files = fileList; | 24 | + state.files = filelist; |
| 24 | - } | 25 | + }, |
| 25 | }, | 26 | }, |
| 26 | getters: { | 27 | getters: { |
| 27 | isLogin(state){ | 28 | isLogin(state){ | ... | ... |
-
Please register or login to post a comment