2020-1-CloudComputing / D_Team_Khuloud

Go to a project
Toggle navigation Toggle navigation pinning
박기범
8734c811 1 parent 9ac54559

연락처 기능 컴포넌트 작성 완료

Inline Side-by-side
Showing 3 changed files with 124 additions and 92 deletions
...@@ -108,6 +108,19 @@ function delFavoriteFile(fileData) { ...@@ -108,6 +108,19 @@ function delFavoriteFile(fileData) {
108 function addFavoriteFile(fileData) { 108 function addFavoriteFile(fileData) {
109 return axios.post('api/favorites/addfile', fileData); 109 return axios.post('api/favorites/addfile', fileData);
110 } 110 }
111 +function uploadContact(contactData){
112 + return axios.post('/api/contact/contact_upload', contactData);
113 +}
114 +function downloadContact(userID){
115 + return axios.post('/api/contact/contact_download', userID);
116 +}
117 +function printContact(userID){
118 + return axios.post('/api/contact/contact_list', userID, {
119 + headers: {
120 + 'Content-Type': 'multipart/form-data',
121 + },
122 + });
123 +}
111 124
112 export { 125 export {
113 registerUser, 126 registerUser,
...@@ -127,5 +140,8 @@ export { ...@@ -127,5 +140,8 @@ export {
127 addFavoriteFile, 140 addFavoriteFile,
128 accessedList, 141 accessedList,
129 detailFile, 142 detailFile,
130 - modifyFile 143 + modifyFile,
144 + uploadContact,
145 + downloadContact,
146 + printContact
131 }; 147 };
......
1 -<template> 1 +<template lang="html">
2 - <v-container fluid> 2 + <v-flex>
3 - <v-card-title> 3 + <h1>연락처</h1>
4 - 연락처 4 + <v-simple-table>
5 - <v-spacer></v-spacer> 5 + <template v-slot:default>
6 - <v-text-field 6 + <thead>
7 - v-model="search" 7 + <tr>
8 - append-icon="mdi-magnify" 8 + <th class="text-left">Name</th>
9 - label="연락처 검색" 9 + <th class="text-left">Phone</th>
10 - single-line 10 + <th class="text-left">Email</th>
11 - hide-details 11 + <th class="text-left">Date</th>
12 - ></v-text-field> 12 + </tr>
13 - </v-card-title> 13 + </thead>
14 - <v-data-table 14 + <tbody>
15 - :headers="headers" 15 + <tr v-for="item in contact_list" :key="item.name">
16 - :items="desserts" 16 + <td>{{ item.name }}</td>
17 - :items-per-page="10" 17 + <td>{{ item.phone}}</td>
18 - class="elevation-1" 18 + <td>{{ item.email }}</td>
19 - ></v-data-table> 19 + <td>{{ item.added_date}}</td>
20 - </v-container> 20 + </tr>
21 + </tbody>
22 + </template>
23 + </v-simple-table>
24 + <v-divider></v-divider>
25 + <div v-cloak @drop.prevnet="addContact" @dragover.prevent>
26 + <input
27 + id="file-selector"
28 + ref="uploadedfile"
29 + type="file"
30 + v-on:change="handleFileUpload()"
31 + />
32 + </div>
33 + <br />
34 + <v-btn color="blue" @click="upload_contact">upload</v-btn>
35 + <v-btn color="blud" @click = "download_contact">download</v-btn>
36 + </v-flex>
21 </template> 37 </template>
22 38
23 <script> 39 <script>
40 + import { uploadContact, downloadContact, printContact } from '../api/index';
41 + import Axios from 'axios';
24 export default { 42 export default {
25 - data () { 43 + data() {
26 return { 44 return {
27 - headers: [ 45 + contact_list : [],
28 - { 46 + contact_file : null
29 - text: 'Name', 47 + }
30 - align: 'start',
31 - sortable: false,
32 - 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 }, 48 },
81 - { 49 + async created(){
82 - name: 'Honeycomb', 50 + try {
83 - Phone: '010-1111-1111', 51 + const curData = {
84 - Email: 'asdf@asdf.com', 52 + id : this.$store.state.id,
85 - date: '2020-05-18' 53 + }
54 + console.log(curData);
55 + const list_reponse = await printContact(curData);
56 + this.$store.commit('setContactList', list_reponse);
57 + this.contact_list = this.$store.getters.contact;
58 + } catch (error) {
59 + console.log("에러");
60 + console.log(error);
61 + }
86 }, 62 },
87 - { 63 + methods:{
88 - name: 'Donut', 64 + handleFileUpload() {
89 - Phone: '010-1111-1111', 65 + this.contact_file = this.$refs.uploadedfile.files[0];
90 - Email: 'asdf@asdf.com', 66 + console.log(this.contact_file);
91 - date: '2020-05-18'
92 }, 67 },
93 - { 68 + addContact(event){
94 - name: 'KitKat', 69 + let droppedFiles = event.dataTransfer.files;
95 - Phone: '010-1111-1111', 70 + if(!droppedFiles) return;
96 - Email: 'asdf@asdf.com', 71 + console.log(droppedFiles);
97 - date: '2020-05-18'
98 }, 72 },
99 - ], 73 + async upload_conatct(){
74 + try {
75 + const formData = new FormData();
76 + formData.append('file', this.contact_file);
77 + formData.append('user_id', this.$store.state.id);
78 + const currentData = {
79 + id: this.$store.state.id
80 + };
81 + console.log(currentData);
82 + const response = await uploadContact(formData);
83 + const contact_response = await printContact(currentData);
84 + console.log(contact_response);
85 + this.$store.commit('setContactList', contact_response);
86 + console.log(this.$store.getters.contact);
87 + this.contact_list = contact_response;
88 + } catch (error) {
89 + console.log('에러');
90 + console.log(error);
100 } 91 }
101 }, 92 },
93 + async download_contact(){
94 + try{
95 + const curData= {
96 + id: this.$store.state.id
97 + };
98 + console.log(curData);
99 + const response = await downloadContact(curData);
100 + console.log(response);
101 + }catch(error){
102 + console.log('에러');
103 + console.log(error);
104 + }
105 + }
106 +
107 + }
102 } 108 }
103 </script> 109 </script>
110 +
111 +<style lang="css" scoped>
112 +</style>
......
...@@ -10,7 +10,8 @@ export default new Vuex.Store({ ...@@ -10,7 +10,8 @@ export default new Vuex.Store({
10 files: [], 10 files: [],
11 cur: '/', 11 cur: '/',
12 parent: '/', 12 parent: '/',
13 - recentList:[] 13 + recentList:[],
14 + contactList:[]
14 }, 15 },
15 mutations: { 16 mutations: {
16 setId(state, userid) { 17 setId(state, userid) {
...@@ -33,6 +34,9 @@ export default new Vuex.Store({ ...@@ -33,6 +34,9 @@ export default new Vuex.Store({
33 }, 34 },
34 setRecentList(state, list){ 35 setRecentList(state, list){
35 state.recentList = list; 36 state.recentList = list;
37 + },
38 + setContactList(state, list){
39 + state.contactList = list;
36 } 40 }
37 }, 41 },
38 getters: { 42 getters: {
...@@ -54,6 +58,9 @@ export default new Vuex.Store({ ...@@ -54,6 +58,9 @@ export default new Vuex.Store({
54 cur(state) { 58 cur(state) {
55 return state.cur; 59 return state.cur;
56 }, 60 },
61 + contact(state){
62 + return state.contactList;
63 + },
57 setFolder(state, folderlist) { 64 setFolder(state, folderlist) {
58 state.folders = folderlist; 65 state.folders = folderlist;
59 }, 66 },
......