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

View File

@ -1,7 +1,15 @@
<template>
<div>
<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>
</div>
</template>
<script>
@ -13,12 +21,18 @@
required: { type: Boolean },
item_id: { type: Number },
metadata_id: { type: Number },
value: { type: [ String,Number ] },
value: { },
message: { type: [ String,Number ] },
multiple: { type: String }
},
data(){
return {
valueInput:''
inputs: []
}
},
computed: {
inputsList() {
return this.inputs;
}
},
created(){
@ -26,15 +40,16 @@
},
methods: {
changeValue(){
this.$emit('changeValues', { item_id: this.item_id, metadata_id: this.metadata_id, values: this.valueInput } );
eventBus.$emit('input', { item_id: this.item_id, metadata_id: this.metadata_id, values: this.valueInput, instance: this } );
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.inputs, instance: this } );
},
getValue(){
try{
let val = JSON.parse( this.value );
this.valueDate = val;
}catch(e){
console.log('invalid json value');
if (this.value instanceof Array) {
this.inputs = this.value;
if (this.inputs.length == 0)
this.inputs.push('');
} else {
this.value == null || this.value == undefined ? this.inputs.push('') : this.inputs.push(this.value);
}
},
validateObject () {
@ -50,7 +65,21 @@
console.log('invalid json error');
}
return this.errorsMsg;
},
addInput(){
this.inputs.push('');
this.changeValue();
},
removeInput(index) {
this.inputs.splice(index, 1);
this.changeValue();
}
}
}
</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
export const sendMetadata = ( { commit }, { item_id, metadata_id, values }) => {
return new Promise( (resolve, reject) => {
axios.post('/item/'+item_id+'/metadata/', {
metadata_id: metadata_id,
axios.post('/item/'+item_id+'/metadata/'+metadata_id, {
values: values
})
.then( res => {
@ -25,8 +24,8 @@ export const sendMetadata = ( { commit }, { item_id, metadata_id, values }) => {
export const updateMetadata = ({ commit }, { item_id, metadata_id, values }) => {
return new Promise((resolve, reject) => {
axios.patch(`/item/${item_id}/metadata/`, {
metadata_id: metadata_id,
console.log(metadata_id);
axios.patch(`/item/${item_id}/metadata/${metadata_id}`, {
values: values
})
.then( res => {