Updates local storage when removing group index.

This commit is contained in:
mateuswetah 2020-04-13 10:33:20 -03:00
parent aef918107c
commit e09c2d3641
7 changed files with 81 additions and 29 deletions

View File

@ -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') }}
@ -14,7 +15,7 @@
<transition name="filter-item">
<transition-group
v-if="childItemMetadataGroups.length > 0"
v-if="childItemMetadataGroups.length > 0"
name="filter-item"
class="multiple-inputs">
<template v-for="(childItemMetadata, groupIndex) of childItemMetadataGroups">
@ -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('input', {
eventBusItemMetadata.$emit('remove_group', {
itemId: this.itemMetadatum.item.id,
metadatumId: this.itemMetadatum.metadatum.id,
values: updatedItemMetadatumValue,
parentMetaId: this.itemMetadatum.parent_meta_id
parentMetaId: this.itemMetadatum.value[groupIndex][0].parent_meta_id
});
}
}

View File

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

View File

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

View File

@ -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() {
eventBusItemMetadata.$off('updateErrorMessageOf#' + this.itemMetadatum.metadatum.id);
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.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);
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();

View File

@ -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 = [];
}

View File

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

View File

@ -63,7 +63,7 @@ export const cleanItemMetadata = (state) => {
}
export const setSingleMetadatum = (state, itemMetadatum) => {
if (itemMetadatum.metadatum.parent <= 0) {
let index = state.itemMetadata.findIndex(anItemMetadatum => anItemMetadatum.metadatum.id == itemMetadatum.metadatum.id);
if (index >= 0)
@ -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) {
let currrentChildMetadatumIndex = currentParentValues[currrentChildMetadataGroupIndex].findIndex((metadatumValue) => metadatumValue.parent_meta_id == itemMetadatum.parent_meta_id && metadatumValue.metadatum_id == itemMetadatum.metadatum.id);
if (currentChildMetadataGroupIndex >= 0) {
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;