Updates Actions to reflect API endpoint changes. Edits heavily Text.vue logic to provide and example of multiple values inside custom component (this needs more discussion).

This commit is contained in:
mateuswetah 2018-01-30 16:07:41 -02:00
parent 60bd3753c4
commit fcc97960d5
4 changed files with 48 additions and 18 deletions

View File

@ -36,7 +36,8 @@
:name="metadata.metadata.name" :name="metadata.metadata.name"
:item_id="metadata.item.id" :item_id="metadata.item.id"
:metadata_id="metadata.metadata.id" :metadata_id="metadata.metadata.id"
:value="metadata.value"></component> :value="metadata.value"
:multiple="metadata.metadata.multiple"></component>
<el-form-item> <el-form-item>
<el-button type="primary" @click="onSubmit">Criar</el-button> <el-button type="primary" @click="onSubmit">Criar</el-button>
<el-button>Cancelar</el-button> <el-button>Cancelar</el-button>
@ -92,6 +93,7 @@ export default {
'getMetadata' 'getMetadata'
]), ]),
onSubmit() { onSubmit() {
this.getMetadata();
let data = {item_id: this.itemId, title: this.form.title, description: this.form.description, status: this.form.status}; let data = {item_id: this.itemId, title: this.form.title, description: this.form.description, status: this.form.status};
this.updateItem(data); this.updateItem(data);
}, },

View File

@ -1,7 +1,15 @@
<template> <template>
<div>
<el-form-item :label="name" :prop="validateObject()"> <el-form-item :label="name" :prop="validateObject()">
<el-input v-model="valueInput" @blur="changeValue"></el-input> <el-input v-model="inputs[0]" @blur="changeValue"></el-input>
<div v-if="multiple == 'yes'">
<div v-if="index > 0" v-for="(input, index) in inputsList " v-bind:key="index" class="multiple-inputs">
<el-input v-model="inputs[index]" @blur="changeValue()"></el-input><el-button v-if="index > 0" @click="removeInput(index)">-</el-button>
</div>
<el-button @click="addInput">+</el-button>
</div>
</el-form-item> </el-form-item>
</div>
</template> </template>
<script> <script>
@ -13,12 +21,18 @@
required: { type: Boolean }, required: { type: Boolean },
item_id: { type: Number }, item_id: { type: Number },
metadata_id: { type: Number }, metadata_id: { type: Number },
value: { type: [ String,Number ] }, value: { },
message: { type: [ String,Number ] }, message: { type: [ String,Number ] },
multiple: { type: String }
}, },
data(){ data(){
return { return {
valueInput:'' inputs: []
}
},
computed: {
inputsList() {
return this.inputs;
} }
}, },
created(){ created(){
@ -26,15 +40,16 @@
}, },
methods: { methods: {
changeValue(){ changeValue(){
this.$emit('changeValues', { item_id: this.item_id, metadata_id: this.metadata_id, values: this.valueInput } ); this.$emit('changeValues', { item_id: this.item_id, metadata_id: this.metadata_id, values: this.inputs } );
eventBus.$emit('input', { item_id: this.item_id, metadata_id: this.metadata_id, values: this.valueInput, instance: this } ); eventBus.$emit('input', { item_id: this.item_id, metadata_id: this.metadata_id, values: this.inputs, instance: this } );
}, },
getValue(){ getValue(){
try{ if (this.value instanceof Array) {
let val = JSON.parse( this.value ); this.inputs = this.value;
this.valueDate = val; if (this.inputs.length == 0)
}catch(e){ this.inputs.push('');
console.log('invalid json value'); } else {
this.value == null || this.value == undefined ? this.inputs.push('') : this.inputs.push(this.value);
} }
}, },
validateObject () { validateObject () {
@ -50,7 +65,21 @@
console.log('invalid json error'); console.log('invalid json error');
} }
return this.errorsMsg; return this.errorsMsg;
},
addInput(){
this.inputs.push('');
this.changeValue();
},
removeInput(index) {
this.inputs.splice(index, 1);
this.changeValue();
} }
} }
} }
</script> </script>
<style scoped>
.multiple-inputs {
display: flex;
}
</style>

View File

@ -3,8 +3,7 @@ import axios from '../../../axios/axios';
// Actions related to Item's metadata // Actions related to Item's metadata
export const sendMetadata = ( { commit }, { item_id, metadata_id, values }) => { export const sendMetadata = ( { commit }, { item_id, metadata_id, values }) => {
return new Promise( (resolve, reject) => { return new Promise( (resolve, reject) => {
axios.post('/item/'+item_id+'/metadata/', { axios.post('/item/'+item_id+'/metadata/'+metadata_id, {
metadata_id: metadata_id,
values: values values: values
}) })
.then( res => { .then( res => {
@ -25,8 +24,8 @@ export const sendMetadata = ( { commit }, { item_id, metadata_id, values }) => {
export const updateMetadata = ({ commit }, { item_id, metadata_id, values }) => { export const updateMetadata = ({ commit }, { item_id, metadata_id, values }) => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
axios.patch(`/item/${item_id}/metadata/`, { console.log(metadata_id);
metadata_id: metadata_id, axios.patch(`/item/${item_id}/metadata/${metadata_id}`, {
values: values values: values
}) })
.then( res => { .then( res => {