Uses value update to compound metadata endpoint to retrieve parent_meta_id of new groups

src/views/admin/components/metadata-types/compound/Compound.vue

@@ -84,7 +84,10 @@
         <span class="icon is-small">
             <i class="tainacan-icon has-text-secondary tainacan-icon-add"/>
         </span>
-        &nbsp;{{ $i18n.get('label_add_value') }}
+        &nbsp;{{ $i18n.get('label_add_value') }}&nbsp;
+        <span class="icon">
+            <i class="tainacan-icon has-text-secondary tainacan-icon-loading"/>
+        </span>
     </a>
 
 </div>
@@ -102,6 +105,7 @@
         data() {
             return {
                 isRemovingGroup: false,
+                isCreatingGroup: false,
                 children: [],
                 collapseAllChildren: true,
                 childItemMetadataGroups: []
@@ -226,6 +230,15 @@
                 this.childItemMetadataGroups[groupIndex][index].collapse = !event;
             },
             addGroup() {
+
+                this.isCreatingGroup = true;
+                
+                // Sends value to api so we can obtain the parent_meta_id
+                eventBusItemMetadata.fetchCompoundFirstParentMetaId({
+                    itemId: this.itemMetadatum.item.id,
+                    metadatumId: this.itemMetadatum.metadatum.id
+                }).then((parentMetaId) => {
+
                     // Create a new placeholder parent_meta_id group here.
                     let newEmptyGroup = [];
 
@@ -238,7 +251,7 @@
                             let childObject = {
                                 item: this.itemMetadatum.item,
                                 metadatum: child,
-                            parent_meta_id: 0,
+                                parent_meta_id: parentMetaId,
                                 value: '',
                                 value_as_html: '',
                                 value_as_string: '',
@@ -248,12 +261,7 @@
                         }
                     }   
                     
-                // Sends value to api so we can obtain the parent_meta_id
-                eventBusItemMetadata.$emit('input', {
-                    itemId: this.itemMetadatum.item.id,
-                    metadatumId: newEmptyGroup[0].metadatum.id,
-                    values: newEmptyGroup[0].value,
-                    parentMetaId: newEmptyGroup[0].parent_meta_id
+                    this.isCreatingGroup = true;
                 });
             },
             removeGroup(groupIndex) {   

src/views/admin/js/event-bus-item-metadata.js

@@ -87,6 +87,9 @@ export const eventBusItemMetadata = new Vue({
         },
         clearAllErrors() {
            this.errors = [];
+        },
+        fetchCompoundFirstParentMetaId({ itemId, metadatumId }) {
+            return this.$store.dispatch('item/fetchCompoundFirstParentMetaId', { item_id: itemId, metadatum_id: metadatumId });
         }
     }
 });

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

@@ -40,6 +40,27 @@ export const fetchItemMetadata = ({ commit }, item_id) => {
     });
 };
 
+
+// Actions related to Item's metadata
+export const fetchCompoundFirstParentMetaId = ({ commit }, { item_id, metadatum_id }) => {
+   
+    return new Promise((resolve, reject) => {
+        axios.tainacan.patch(`/item/${item_id}/metadata/${metadatum_id}`, { value: [] })
+            .then( res => {
+                const parentMetaId = res.data.parent_meta_id;
+                resolve(parentMetaId);
+            })
+            .catch( error => {
+                reject({
+                    error: error.response.data.errors,
+                    error_message: error.response.data.error_message,
+                    item_metadata: error.response.data.item_metadata
+                });
+            })
+    });
+};
+
+
 export const deleteItemMetadataGroup = ({ commit }, { item_id, metadatum_id, parent_meta_id }) => {
         
     return new Promise((resolve) => {