2020-1-CloudComputing / D_Team_Khuloud

Go to a project
Toggle navigation Toggle navigation pinning
박기범
6dd81712 1 parent 958014d3

merge contact

Inline Side-by-side
Showing 5 changed files with 179 additions and 87 deletions
...@@ -4,6 +4,7 @@ const XLSX = require('xlsx'); ...@@ -4,6 +4,7 @@ const XLSX = require('xlsx');
4 var multer = require('multer'); 4 var multer = require('multer');
5 var fs = require('fs'); 5 var fs = require('fs');
6 var xl = require('excel4node'); 6 var xl = require('excel4node');
7 +const path = require('path');
7 // var pool = require('./../routes/modules/database'); 8 // var pool = require('./../routes/modules/database');
8 9
9 //파일 저장위치와 파일이름 설정 10 //파일 저장위치와 파일이름 설정
......
...@@ -70,7 +70,6 @@ function deleteFile(fileData) { ...@@ -70,7 +70,6 @@ function deleteFile(fileData) {
70 }, 70 },
71 }); 71 });
72 } 72 }
73 -
74 function downloadFile(fileData) { 73 function downloadFile(fileData) {
75 return axios.get(`/api/file/download/${fileData.fileName}`, { 74 return axios.get(`/api/file/download/${fileData.fileName}`, {
76 params: { 75 params: {
...@@ -158,6 +157,26 @@ function tdelAll(userId) { ...@@ -158,6 +157,26 @@ function tdelAll(userId) {
158 }, 157 },
159 }); 158 });
160 } 159 }
160 +function uploadContact(contactData){
161 + return axios.post('/api/contact/contact_upload', contactData.file,{
162 + headers: {
163 + 'Content-Type': 'multipart/form-data',
164 + },
165 + params:{
166 + id: contactData.id,
167 + }
168 + });
169 +}
170 +function downloadContact(userID){
171 + return axios.post('/api/contact/contact_download', null, {params:{id:userID}});
172 +}
173 +function printContact(userID){
174 + console.log(String(userID));
175 + return axios.post('api/contact/contact_list', {id:userID}, {params:{id:userID},});
176 +}
177 +function deleteContact(userID){
178 + return axios.post('api/contact/contact_delete', {id:userID}, {params:{id:userID}});
179 +}
161 180
162 export { 181 export {
163 registerUser, 182 registerUser,
...@@ -184,4 +203,8 @@ export { ...@@ -184,4 +203,8 @@ export {
184 tdelFile, 203 tdelFile,
185 tdelAll, 204 tdelAll,
186 showTrashcan, 205 showTrashcan,
206 + uploadContact,
207 + downloadContact,
208 + printContact,
209 + deleteContact
187 }; 210 };
......
...@@ -285,12 +285,14 @@ ...@@ -285,12 +285,14 @@
285 </v-list-item> 285 </v-list-item>
286 </v-list> 286 </v-list>
287 </v-menu> 287 </v-menu>
288 - <input 288 + <div v-cloak @drop.prevnet="addFile" @dragover.prevent>
289 - id="file-selector" 289 + <input
290 - ref="uploadedfile" 290 + id="file-selector"
291 - type="file" 291 + ref="uploadedfile"
292 - v-on:change="handleFileUpload()" 292 + type="file"
293 - /> 293 + v-on:change="handleFileUpload()"
294 + />
295 + </div>
294 <br /> 296 <br />
295 <v-btn @click="upload_file"><v-icon>fas fa-upload</v-icon></v-btn> 297 <v-btn @click="upload_file"><v-icon>fas fa-upload</v-icon></v-btn>
296 <v-btn bottom color="blue" dark fab fixed right @click="dialog = !dialog"> 298 <v-btn bottom color="blue" dark fab fixed right @click="dialog = !dialog">
...@@ -404,6 +406,11 @@ export default { ...@@ -404,6 +406,11 @@ export default {
404 $route: 'fetchData', 406 $route: 'fetchData',
405 }, 407 },
406 methods: { 408 methods: {
409 + addFile(event){
410 + let droppedFiles = event.dataTransfer.files;
411 + if(!droppedFiles) return;
412 + console.log(droppedFiles);
413 + },
407 async fetchData() { 414 async fetchData() {
408 try { 415 try {
409 const curData = { 416 const curData = {
......
1 -<template> 1 +<template lang="html">
2 - <v-container fluid> 2 + <v-flex>
3 - <v-card-title> 3 + <h1>연락처</h1>
4 - 연락처
5 - <v-spacer></v-spacer>
6 <v-text-field 4 <v-text-field
7 v-model="search" 5 v-model="search"
8 append-icon="mdi-magnify" 6 append-icon="mdi-magnify"
9 - label="연락처 검색" 7 + label="Search"
10 single-line 8 single-line
11 hide-details 9 hide-details
12 ></v-text-field> 10 ></v-text-field>
13 - </v-card-title> 11 +<!--
12 + <v-simple-table>
13 + <template v-slot:default>
14 + <thead>
15 + <tr>
16 + <th class="text-left">Name</th>
17 + <th class="text-left">Phone</th>
18 + <th class="text-left">Email</th>
19 + </tr>
20 + </thead>
21 + <tbody>
22 + <tr v-for="item in contact_list" :key="item.name">
23 + <td>{{ item.name }}</td>
24 + <td>{{ item.phone}}</td>
25 + <td>{{ item.email }}</td>
26 + </tr>
27 + </tbody>
28 + </template>
29 + </v-simple-table>
30 +-->
14 <v-data-table 31 <v-data-table
15 :headers="headers" 32 :headers="headers"
16 - :items="desserts" 33 + :items="contact_list"
17 - :items-per-page="10" 34 + :search="search"
18 - class="elevation-1" 35 + >
19 - ></v-data-table> 36 + </v-data-table>
20 - </v-container> 37 + <v-divider></v-divider>
38 + <div v-cloak @drop.prevnet="addContact" @dragover.prevent>
39 + <input
40 + id="file-selector"
41 + ref="uploadedfile"
42 + type="file"
43 + v-on:change="handleFileUpload()"
44 + />
45 + </div>
46 + <br />
47 + <v-btn color="blue" @click="upload_contact">upload</v-btn>
48 + <v-btn color="green" @click = "download_contact">download</v-btn>
49 + <v-btn color="gray" @click = "delete_contact">delete</v-btn>
50 + </v-flex>
21 </template> 51 </template>
22 52
23 <script> 53 <script>
54 + import { uploadContact, downloadContact, printContact, deleteContact } from '../api/index';
55 + import Axios from 'axios';
24 export default { 56 export default {
25 - data () { 57 + data() {
26 return { 58 return {
27 - headers: [ 59 + search:'',
60 + headers:[
28 { 61 {
29 text: 'Name', 62 text: 'Name',
30 align: 'start', 63 align: 'start',
31 sortable: false, 64 sortable: false,
32 - value: 'name', 65 + value: 'name'
33 - },
34 - { text: 'Phone', value: 'Phone' },
35 - { text: 'E-mail', value: 'Email' },
36 - { text: 'Added date', value: 'date' }
37 - ],
38 - desserts: [
39 - {
40 - name: 'Frozen Yogurt',
41 - Phone: '010-1111-1111',
42 - Email: 'asdf@asdf.com',
43 - date: '2020-05-18'
44 - },
45 - {
46 - name: 'Ice cream sandwich',
47 - Phone: '010-1111-1111',
48 - Email: 'asdf@asdf.com',
49 - date: '2020-05-18'
50 - },
51 - {
52 - name: 'Eclair',
53 - Phone: '010-1111-1111',
54 - Email: 'asdf@asdf.com',
55 - date: '2020-05-18'
56 - },
57 - {
58 - name: 'Cupcake',
59 - Phone: '010-1111-1111',
60 - Email: 'asdf@asdf.com',
61 - date: '2020-05-18'
62 - },
63 - {
64 - name: 'Gingerbread',
65 - Phone: '010-1111-1111',
66 - Email: 'asdf@asdf.com',
67 - date: '2020-05-18'
68 - },
69 - {
70 - name: 'Jelly bean',
71 - Phone: '010-1111-1111',
72 - Email: 'asdf@asdf.com',
73 - date: '2020-05-18'
74 - },
75 - {
76 - name: 'Lollipop',
77 - Phone: '010-1111-1111',
78 - Email: 'asdf@asdf.com',
79 - date: '2020-05-18'
80 - },
81 - {
82 - name: 'Honeycomb',
83 - Phone: '010-1111-1111',
84 - Email: 'asdf@asdf.com',
85 - date: '2020-05-18'
86 - },
87 - {
88 - name: 'Donut',
89 - Phone: '010-1111-1111',
90 - Email: 'asdf@asdf.com',
91 - date: '2020-05-18'
92 - },
93 - {
94 - name: 'KitKat',
95 - Phone: '010-1111-1111',
96 - Email: 'asdf@asdf.com',
97 - date: '2020-05-18'
98 }, 66 },
67 + {text: 'phone', value:'email'},
68 + {text:'email', value:'phone'}
99 ], 69 ],
70 + contact_list : [],
71 + contact_file : null
100 } 72 }
101 }, 73 },
74 + async created(){
75 + try {
76 + const curData = {
77 + id : this.$store.state.id,
78 + }
79 + const list_reponse = await printContact(curData.id);
80 + this.$store.commit('setContactList', list_reponse.data.contact_list);
81 + this.contact_list = this.$store.getters.contact;
82 + console.log(list_reponse);
83 + } catch (error) {
84 + console.log("에러");
85 + console.log(error);
86 + }
87 + },
88 + methods:{
89 + handleFileUpload() {
90 + this.contact_file = this.$refs.uploadedfile.files[0];
91 + console.log(this.contact_file);
92 + },
93 + addContact(event){
94 + let droppedFiles = event.dataTransfer.files;
95 + if(!droppedFiles) return;
96 + console.log(droppedFiles);
97 + },
98 + async upload_contact(){
99 + try {
100 + const formData = new FormData();
101 + formData.append('file', this.contact_file);
102 + const currentData = {
103 + id: this.$store.state.id
104 + };
105 + const fileData = {
106 + id: this.$store.state.id,
107 + file: formData
108 + }
109 + console.log(fileData);
110 + const response = await uploadContact(fileData);
111 + const contact_response = await printContact(currentData.id);
112 + console.log(contact_response);
113 + this.$store.commit('setContactList', contact_response.data.contact_list);
114 + console.log(this.$store.getters.contact);
115 + this.contact_list = this.$store.getters.contact;
116 + } catch (error) {
117 + console.log('에러');
118 + console.log(error);
119 + }
120 + },
121 + async download_contact(){
122 + try{
123 + const curData= {
124 + id: this.$store.state.id
125 + };
126 + console.log(curData);
127 + const response = await downloadContact(curData.id);
128 + console.log(response);
129 + }catch(error){
130 + console.log('에러');
131 + console.log(error);
132 + }
133 + },
134 + async delete_contact(){
135 + try{
136 + const curData = {
137 + id: this.$store.state.id
138 + };
139 + const response_d = await deleteContact(curData.id);
140 +
141 + const contact_response = await printContact(curData.id);
142 +
143 + this.$store.commit('setContactList', contact_response.data.contact_list);
144 +
145 + this.contact_list = this.$store.getters.contact;
146 + }catch(error){
147 + console.log('에러');
148 + console.log(error);
149 + }
150 + }
151 +
152 + }
102 } 153 }
103 </script> 154 </script>
155 +
156 +<style lang="css" scoped>
157 +</style>
......
...@@ -15,6 +15,7 @@ export default new Vuex.Store({ ...@@ -15,6 +15,7 @@ export default new Vuex.Store({
15 favFileList: [], 15 favFileList: [],
16 trashFolderList: [], 16 trashFolderList: [],
17 trashFileList: [], 17 trashFileList: [],
18 + contactList:[]
18 }, 19 },
19 mutations: { 20 mutations: {
20 setId(state, userid) { 21 setId(state, userid) {
...@@ -50,6 +51,9 @@ export default new Vuex.Store({ ...@@ -50,6 +51,9 @@ export default new Vuex.Store({
50 settrashFileList(state, tflist) { 51 settrashFileList(state, tflist) {
51 state.trashFileList = tflist; 52 state.trashFileList = tflist;
52 }, 53 },
54 + setContactList(state, list){
55 + state.contactList = list;
56 + }
53 }, 57 },
54 getters: { 58 getters: {
55 isLogin(state) { 59 isLogin(state) {
...@@ -88,5 +92,8 @@ export default new Vuex.Store({ ...@@ -88,5 +92,8 @@ export default new Vuex.Store({
88 trashFileL(state) { 92 trashFileL(state) {
89 return state.trashFileList; 93 return state.trashFileList;
90 }, 94 },
95 + contact(state){
96 + return state.contactList;
97 + }
91 }, 98 },
92 }); 99 });
......