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 128 additions and 96 deletions
......@@ -108,6 +108,19 @@ function delFavoriteFile(fileData) {
function addFavoriteFile(fileData) {
return axios.post('api/favorites/addfile', fileData);
}
function uploadContact(contactData){
return axios.post('/api/contact/contact_upload', contactData);
}
function downloadContact(userID){
return axios.post('/api/contact/contact_download', userID);
}
function printContact(userID){
return axios.post('/api/contact/contact_list', userID, {
headers: {
'Content-Type': 'multipart/form-data',
},
});
}
export {
registerUser,
......@@ -127,5 +140,8 @@ export {
addFavoriteFile,
accessedList,
detailFile,
modifyFile
modifyFile,
uploadContact,
downloadContact,
printContact
};
......
<template>
<v-container fluid>
<v-card-title>
연락처
<v-spacer></v-spacer>
<v-text-field
v-model="search"
append-icon="mdi-magnify"
label="연락처 검색"
single-line
hide-details
></v-text-field>
</v-card-title>
<v-data-table
:headers="headers"
:items="desserts"
:items-per-page="10"
class="elevation-1"
></v-data-table>
</v-container>
<template lang="html">
<v-flex>
<h1>연락처</h1>
<v-simple-table>
<template v-slot:default>
<thead>
<tr>
<th class="text-left">Name</th>
<th class="text-left">Phone</th>
<th class="text-left">Email</th>
<th class="text-left">Date</th>
</tr>
</thead>
<tbody>
<tr v-for="item in contact_list" :key="item.name">
<td>{{ item.name }}</td>
<td>{{ item.phone}}</td>
<td>{{ item.email }}</td>
<td>{{ item.added_date}}</td>
</tr>
</tbody>
</template>
</v-simple-table>
<v-divider></v-divider>
<div v-cloak @drop.prevnet="addContact" @dragover.prevent>
<input
id="file-selector"
ref="uploadedfile"
type="file"
v-on:change="handleFileUpload()"
/>
</div>
<br />
<v-btn color="blue" @click="upload_contact">upload</v-btn>
<v-btn color="blud" @click = "download_contact">download</v-btn>
</v-flex>
</template>
<script>
import { uploadContact, downloadContact, printContact } from '../api/index';
import Axios from 'axios';
export default {
data () {
data() {
return {
headers: [
{
text: 'Name',
align: 'start',
sortable: false,
value: 'name',
},
{ text: 'Phone', value: 'Phone' },
{ text: 'E-mail', value: 'Email' },
{ text: 'Added date', value: 'date' }
],
desserts: [
{
name: 'Frozen Yogurt',
Phone: '010-1111-1111',
Email: 'asdf@asdf.com',
date: '2020-05-18'
},
{
name: 'Ice cream sandwich',
Phone: '010-1111-1111',
Email: 'asdf@asdf.com',
date: '2020-05-18'
},
{
name: 'Eclair',
Phone: '010-1111-1111',
Email: 'asdf@asdf.com',
date: '2020-05-18'
},
{
name: 'Cupcake',
Phone: '010-1111-1111',
Email: 'asdf@asdf.com',
date: '2020-05-18'
},
{
name: 'Gingerbread',
Phone: '010-1111-1111',
Email: 'asdf@asdf.com',
date: '2020-05-18'
},
{
name: 'Jelly bean',
Phone: '010-1111-1111',
Email: 'asdf@asdf.com',
date: '2020-05-18'
},
{
name: 'Lollipop',
Phone: '010-1111-1111',
Email: 'asdf@asdf.com',
date: '2020-05-18'
},
{
name: 'Honeycomb',
Phone: '010-1111-1111',
Email: 'asdf@asdf.com',
date: '2020-05-18'
},
{
name: 'Donut',
Phone: '010-1111-1111',
Email: 'asdf@asdf.com',
date: '2020-05-18'
},
{
name: 'KitKat',
Phone: '010-1111-1111',
Email: 'asdf@asdf.com',
date: '2020-05-18'
},
],
contact_list : [],
contact_file : null
}
},
async created(){
try {
const curData = {
id : this.$store.state.id,
}
console.log(curData);
const list_reponse = await printContact(curData);
this.$store.commit('setContactList', list_reponse);
this.contact_list = this.$store.getters.contact;
} catch (error) {
console.log("에러");
console.log(error);
}
},
methods:{
handleFileUpload() {
this.contact_file = this.$refs.uploadedfile.files[0];
console.log(this.contact_file);
},
addContact(event){
let droppedFiles = event.dataTransfer.files;
if(!droppedFiles) return;
console.log(droppedFiles);
},
async upload_conatct(){
try {
const formData = new FormData();
formData.append('file', this.contact_file);
formData.append('user_id', this.$store.state.id);
const currentData = {
id: this.$store.state.id
};
console.log(currentData);
const response = await uploadContact(formData);
const contact_response = await printContact(currentData);
console.log(contact_response);
this.$store.commit('setContactList', contact_response);
console.log(this.$store.getters.contact);
this.contact_list = contact_response;
} catch (error) {
console.log('에러');
console.log(error);
}
},
async download_contact(){
try{
const curData= {
id: this.$store.state.id
};
console.log(curData);
const response = await downloadContact(curData);
console.log(response);
}catch(error){
console.log('에러');
console.log(error);
}
}
}
}
</script>
<style lang="css" scoped>
</style>
......
......@@ -10,7 +10,8 @@ export default new Vuex.Store({
files: [],
cur: '/',
parent: '/',
recentList:[]
recentList:[],
contactList:[]
},
mutations: {
setId(state, userid) {
......@@ -33,6 +34,9 @@ export default new Vuex.Store({
},
setRecentList(state, list){
state.recentList = list;
},
setContactList(state, list){
state.contactList = list;
}
},
getters: {
......@@ -54,6 +58,9 @@ export default new Vuex.Store({
cur(state) {
return state.cur;
},
contact(state){
return state.contactList;
},
setFolder(state, folderlist) {
state.folders = folderlist;
},
......