Updates local storage when removing group index.

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

@@ -1,6 +1,7 @@
 <template>
 <div class="child-metadata-inputs">
     <a
+            v-if="childItemMetadataGroups.length > 0"
             class="collapse-all"
             @click="toggleCollapseAllChildren()">
         {{ collapseAllChildren ? $i18n.get('label_collapse_all') : $i18n.get('label_expand_all') }}
@@ -29,7 +30,7 @@
                         @changeCollapse="onChangeCollapse($event, groupIndex, childIndex)"
                         :class="{ 'is-last-input': childIndex == childItemMetadata.length - 1}"/>
                 <a 
-                        v-if="groupIndex > 0" 
+                        v-if="isMultiple" 
                         @click="removeGroup(groupIndex)"
                         class="add-link"
                         :key="groupIndex">
@@ -78,7 +79,7 @@
         },
         computed: {
             isMultiple() {
-                return (this.itemMetadatum.metadatum && this.itemMetadatum.metadatum.multiple == 'yes') ? this.itemMetadatum.metadatum.multiple == 'yes' : false;
+                return (this.itemMetadatum && this.itemMetadatum.metadatum && this.itemMetadatum.metadatum.multiple == 'yes') ? this.itemMetadatum.metadatum.multiple == 'yes' : false;
             }
         },
         watch: {
@@ -92,7 +93,8 @@
 
                     const parentValues = this.isMultiple ? this.itemMetadatum.value : [ this.itemMetadatum.value ];
                     
-                    if (this.itemMetadatum.metadatum &&
+                    if (this.itemMetadatum &&
+                        this.itemMetadatum.metadatum &&
                         this.itemMetadatum.metadatum.metadata_type_options &&
                         this.itemMetadatum.metadatum.metadata_type_options.children_objects.length > 0 
                     ) {
@@ -170,7 +172,7 @@
             }
         },
         mounted() {
-            if (!this.isMultiple && this.itemMetadatum.value.length <= 0)
+            if (!this.isMultiple && this.itemMetadatum && this.itemMetadatum.value && this.itemMetadatum.value.length <= 0)
                 this.addGroup();
         },
         methods: {
@@ -188,7 +190,8 @@
                 // Create a new placeholder parent_meta_id group here.
                 let newEmptyGroup = [];
 
-                if (this.itemMetadatum.metadatum &&
+                if (this.itemMetadatum &&
+                    this.itemMetadatum.metadatum &&
                     this.itemMetadatum.metadatum.metadata_type_options &&
                     this.itemMetadatum.metadatum.metadata_type_options.children_objects.length > 0 
                 ) {
@@ -216,15 +219,11 @@
             },
             removeGroup(groupIndex) {
                 this.childItemMetadataGroups.splice(groupIndex, 1);
-                let updatedItemMetadatumValue = JSON.parse(JSON.stringify(this.itemMetadatum.value))
-                updatedItemMetadatumValue.splice(groupIndex, 1);
                 
-                // If none is the case, the value is update request is sent to the API
+                eventBusItemMetadata.$emit('remove_group', {
-                eventBusItemMetadata.$emit('input', {
                     itemId: this.itemMetadatum.item.id,
                     metadatumId: this.itemMetadatum.metadatum.id,
-                    values: updatedItemMetadatumValue,
+                    parentMetaId: this.itemMetadatum.value[groupIndex][0].parent_meta_id
-                    parentMetaId: this.itemMetadatum.parent_meta_id
                 });
             }
         }

src/views/admin/components/metadata-types/compound/child-metadata-list.vue

@@ -394,6 +394,7 @@
     section.field {
         padding: 0.5em 1em 0 1em;
         position: absolute;
+        width: 100%;
     }
     .children-icon {
         position: absolute;

src/views/admin/components/metadata-types/numeric/Numeric.vue

@@ -9,7 +9,7 @@
             lang="en"
             :step="getStep"/>
 </template>
-
+itemMetadatum
 <script>
     export default {
         props: {

src/views/admin/components/metadata-types/tainacan-form-item.vue

@@ -121,10 +121,10 @@
         },
         computed: {
             metadatumComponent() {
-                return (this.itemMetadatum.metadatum && this.itemMetadatum.metadatum.metadata_type_object.component) ? this.itemMetadatum.metadatum.metadata_type_object.component : '';
+                return (this.itemMetadatum && this.itemMetadatum.metadatum && this.itemMetadatum.metadatum.metadata_type_object.component) ? this.itemMetadatum.metadatum.metadata_type_object.component : '';
             },
             isMultiple() {
-                return (this.itemMetadatum.metadatum && this.itemMetadatum.metadatum.multiple == 'yes') ? this.itemMetadatum.metadatum.multiple == 'yes' : false;
+                return (this.itemMetadatum && this.itemMetadatum.metadatum && this.itemMetadatum.metadatum.multiple == 'yes') ? this.itemMetadatum.metadatum.multiple == 'yes' : false;
             },
             isTextInputComponent() {
                 const array = ['tainacan-relationship','tainacan-taxonomy', 'tainacan-compound'];
@@ -135,7 +135,7 @@
             this.setInitialValues();
             eventBusItemMetadata.$on('updateErrorMessageOf#' + this.itemMetadatum.metadatum.id, (errors) => {
                 let updatedErrorMessage = '';
-                if (errors && this.itemMetadatum.metadatum && this.itemMetadatum.metadatum.id == errors.metadatum_id && errors.errors) {
+                if (errors && this.itemMetadatum && this.itemMetadatum.metadatum && this.itemMetadatum.metadatum.id == errors.metadatum_id && errors.errors) {
                     for (let error of errors.errors) { 
                         for (let index of Object.keys(error))
                             updatedErrorMessage += error[index] + '\n';
@@ -145,15 +145,18 @@
             })
         },
         beforeDestroy() {
+            if (this.itemMetadatum && this.itemMetadatum.metadatum)
                 eventBusItemMetadata.$off('updateErrorMessageOf#' + this.itemMetadatum.metadatum.id);
         },
         methods: {
             // 'this.values' is always an array for this component, even if it is single valued.
             setInitialValues() {
+                if (this.itemMetadatum) {
                     if (this.itemMetadatum.value instanceof Array)
                         this.values = this.itemMetadatum.value.slice(0); // This way we garantee this.values is a copy of the contents of this.itemMetadatum.value, instead of a reference to it
                     else
                         this.itemMetadatum.value == null || this.itemMetadatum.value == undefined ? this.values = [] : this.values.push(this.itemMetadatum.value);
+                }
             },
             changeValue: _.debounce(function() {
                 this.performValueChange();

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

@@ -16,9 +16,11 @@ export const eventBusItemMetadata = new Vue({
     },
     created() {
         this.$on('input', this.updateValue);
+        this.$on('remove_group', this.removeItemMetadataGroup);
     },
     beforeUpdate() {
         this.$off('input', this.updateValue);
+        this.$on('remove_group', this.removeItemMetadataGroup);
     },
     methods : {
         updateValue({ itemId, metadatumId, values, parentMetaId }){
@@ -31,7 +33,7 @@ export const eventBusItemMetadata = new Vue({
                     let onlyValues = values.map((aValueObject) => aValueObject.value);
                     values = onlyValues;
                 }
-                console.log(values)
+                
                 this.$store.dispatch('item/updateItemMetadatum', { 
                     item_id: itemId, 
                     metadatum_id: metadatumId, 
@@ -66,6 +68,21 @@ export const eventBusItemMetadata = new Vue({
                 });
             }
         },
+        removeItemMetadataGroup({ itemId, metadatumId, parentMetaId }) {
+            
+            this.$emit('isUpdatingValue', true);
+            
+            if (itemId && metadatumId && parentMetaId) {
+                
+                this.$store.dispatch('item/deleteItemMetadataGroup', { 
+                    item_id: itemId, 
+                    metadatum_id: metadatumId,
+                    parent_meta_id: parentMetaId
+                })
+                    .then(() => this.$emit('isUpdatingValue', false))
+                    .catch(() => this.$emit('isUpdatingValue', false));
+            }
+        },
         clearAllErrors() {
            this.errors = [];
         }

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

@@ -36,6 +36,18 @@ export const fetchItemMetadata = ({ commit }, item_id) => {
     });
 };
 
+export const deleteItemMetadataGroup = ({ commit }, { item_id, metadatum_id, parent_meta_id }) => {
+        
+    return new Promise((resolve) => {
+        axios.tainacan.delete(`/item/${item_id}/metadata/${metadatum_id}`, { data: { parent_meta_id: parent_meta_id } })
+            .then( (res) => {
+                commit('deleteChildItemMetadata', { parentMetadatumId: metadatum_id, parentMetaId: parent_meta_id });
+                commit('setLastUpdated');
+                resolve(res.data.item_metadata_removed);
+            });
+    });
+};
+
 export const cleanItemMetadata = ({ commit }) => {
     commit('cleanItemMetadata');
 };

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

@@ -87,18 +87,18 @@ export const setSingleMetadatum = (state, itemMetadatum) => {
 
             if (currentParent.metadatum.multiple == 'yes') {
                 
-                let currrentChildMetadataGroupIndex = currentParentValues.findIndex((metadataGroup) => {
+                let currentChildMetadataGroupIndex = currentParentValues.findIndex((metadataGroup) => {
                     return metadataGroup.findIndex((metadatumValue) => {
                         return metadatumValue.parent_meta_id == itemMetadatum.parent_meta_id;
                     }) >= 0;
                 });
                 
-                if (currrentChildMetadataGroupIndex >= 0) {
+                if (currentChildMetadataGroupIndex >= 0) {
-                    let currrentChildMetadatumIndex = currentParentValues[currrentChildMetadataGroupIndex].findIndex((metadatumValue) => metadatumValue.parent_meta_id == itemMetadatum.parent_meta_id && metadatumValue.metadatum_id == itemMetadatum.metadatum.id);
+                    let currrentChildMetadatumIndex = currentParentValues[currentChildMetadataGroupIndex].findIndex((metadatumValue) => metadatumValue.parent_meta_id == itemMetadatum.parent_meta_id && metadatumValue.metadatum_id == itemMetadatum.metadatum.id);
                     if (currrentChildMetadatumIndex >= 0)
-                        currentParentValues[currrentChildMetadataGroupIndex].splice(currrentChildMetadatumIndex, 1, childMetadatumValue);
+                        currentParentValues[currentChildMetadataGroupIndex].splice(currrentChildMetadatumIndex, 1, childMetadatumValue);
                     else
-                        currentParentValues[currrentChildMetadataGroupIndex].push(childMetadatumValue);
+                        currentParentValues[currentChildMetadataGroupIndex].push(childMetadatumValue);
                 } else {
                     currentParentValues.push([childMetadatumValue])
                 }
@@ -116,6 +116,26 @@ export const setSingleMetadatum = (state, itemMetadatum) => {
     }
 }
 
+export const deleteChildItemMetadata = (state, { parentMetadatumId, parentMetaId }) => {
+    
+    let parentIndex = state.itemMetadata.findIndex(anItemMetadatum => anItemMetadatum.metadatum.id == parentMetadatumId);
+        
+    if (parentIndex >= 0) {
+        let currentParent = JSON.parse(JSON.stringify(state.itemMetadata[parentIndex]));
+        let currentParentValues = currentParent.value;
+
+        let currentChildMetadataGroupIndex = currentParentValues.findIndex((metadataGroup) => {
+            return metadataGroup.findIndex((metadatumValue) => metadatumValue.parent_meta_id == parentMetaId) >= 0;
+        });
+
+        if (currentChildMetadataGroupIndex >= 0)
+            currentParentValues.splice(currentChildMetadataGroupIndex, 1);
+        
+        currentParent.value = currentParentValues;
+        Vue.set(state.itemMetadata, parentIndex, currentParent);
+    }
+}
+
 export const setLastUpdated = (state, value) => {
     if (value != undefined)
         state.lastUpdated = value;