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:
parent
60bd3753c4
commit
fcc97960d5
|
@ -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);
|
||||
},
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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 => {
|
||||
|
|
Loading…
Reference in New Issue