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,34 +230,38 @@
                 this.childItemMetadataGroups[groupIndex][index].collapse = !event;
             },
             addGroup() {
-                // Create a new placeholder parent_meta_id group here.
-                let newEmptyGroup = [];
-
-                if (this.itemMetadatum &&
-                    this.itemMetadatum.metadatum &&
-                    this.itemMetadatum.metadatum.metadata_type_options &&
-                    this.itemMetadatum.metadatum.metadata_type_options.children_objects.length > 0 
-                ) {
-                    for (let child of this.itemMetadatum.metadatum.metadata_type_options.children_objects) {
-                        let childObject = {
-                            item: this.itemMetadatum.item,
-                            metadatum: child,
-                            parent_meta_id: 0,
-                            value: '',
-                            value_as_html: '',
-                            value_as_string: '',
-                            collapse: false
-                        };
-                        newEmptyGroup.push(childObject)
-                    }
-                }
 
+                this.isCreatingGroup = true;
+                
                 // Sends value to api so we can obtain the parent_meta_id
-                eventBusItemMetadata.$emit('input', {
+                eventBusItemMetadata.fetchCompoundFirstParentMetaId({
                     itemId: this.itemMetadatum.item.id,
-                    metadatumId: newEmptyGroup[0].metadatum.id,
-                    values: newEmptyGroup[0].value,
-                    parentMetaId: newEmptyGroup[0].parent_meta_id
+                    metadatumId: this.itemMetadatum.metadatum.id
+                }).then((parentMetaId) => {
+
+                    // Create a new placeholder parent_meta_id group here.
+                    let newEmptyGroup = [];
+
+                    if (this.itemMetadatum &&
+                        this.itemMetadatum.metadatum &&
+                        this.itemMetadatum.metadatum.metadata_type_options &&
+                        this.itemMetadatum.metadatum.metadata_type_options.children_objects.length > 0 
+                    ) {
+                        for (let child of this.itemMetadatum.metadatum.metadata_type_options.children_objects) {
+                            let childObject = {
+                                item: this.itemMetadatum.item,
+                                metadatum: child,
+                                parent_meta_id: parentMetaId,
+                                value: '',
+                                value_as_html: '',
+                                value_as_string: '',
+                                collapse: false
+                            };
+                            newEmptyGroup.push(childObject)
+                        }
+                    }   
+                    
+                    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) => {