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).

src/admin/pages/item-creation-page.vue

@@ -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);
         },

src/classes/field-types/text/Text.vue

@@ -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');
+            getValue(){            
+                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>
+</script>
+
+<style scoped>
+    .multiple-inputs {
+        display: flex;
+    }
+</style>

src/js/event-bus-web-components.js

@@ -22,7 +22,7 @@ export const eventBus = new Vue({
         listener(){
             const components = this.getAllComponents();
             for (let eventElement of components){
-                eventElement.addEventListener('changeValues', (event) => {
+                eventElement.addEventListener('changeValues', (event) => {                    
                     if ( event.detail[0] ){
                         const promisse = this.$store.dispatch('item/updateMetadata', event.detail[0] );
                         promisse.then( response => {

src/js/store/modules/item/actions.js

@@ -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 => {