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

View File

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

View File

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

View File

@ -121,10 +121,10 @@
}, },
computed: { computed: {
metadatumComponent() { 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() { 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() { isTextInputComponent() {
const array = ['tainacan-relationship','tainacan-taxonomy', 'tainacan-compound']; const array = ['tainacan-relationship','tainacan-taxonomy', 'tainacan-compound'];
@ -135,7 +135,7 @@
this.setInitialValues(); this.setInitialValues();
eventBusItemMetadata.$on('updateErrorMessageOf#' + this.itemMetadatum.metadatum.id, (errors) => { eventBusItemMetadata.$on('updateErrorMessageOf#' + this.itemMetadatum.metadatum.id, (errors) => {
let updatedErrorMessage = ''; 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 error of errors.errors) {
for (let index of Object.keys(error)) for (let index of Object.keys(error))
updatedErrorMessage += error[index] + '\n'; updatedErrorMessage += error[index] + '\n';
@ -145,15 +145,18 @@
}) })
}, },
beforeDestroy() { beforeDestroy() {
eventBusItemMetadata.$off('updateErrorMessageOf#' + this.itemMetadatum.metadatum.id); if (this.itemMetadatum && this.itemMetadatum.metadatum)
eventBusItemMetadata.$off('updateErrorMessageOf#' + this.itemMetadatum.metadatum.id);
}, },
methods: { methods: {
// 'this.values' is always an array for this component, even if it is single valued. // 'this.values' is always an array for this component, even if it is single valued.
setInitialValues() { setInitialValues() {
if (this.itemMetadatum.value instanceof Array) if (this.itemMetadatum) {
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 if (this.itemMetadatum.value instanceof Array)
else 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
this.itemMetadatum.value == null || this.itemMetadatum.value == undefined ? this.values = [] : this.values.push(this.itemMetadatum.value); else
this.itemMetadatum.value == null || this.itemMetadatum.value == undefined ? this.values = [] : this.values.push(this.itemMetadatum.value);
}
}, },
changeValue: _.debounce(function() { changeValue: _.debounce(function() {
this.performValueChange(); this.performValueChange();

View File

@ -16,9 +16,11 @@ export const eventBusItemMetadata = new Vue({
}, },
created() { created() {
this.$on('input', this.updateValue); this.$on('input', this.updateValue);
this.$on('remove_group', this.removeItemMetadataGroup);
}, },
beforeUpdate() { beforeUpdate() {
this.$off('input', this.updateValue); this.$off('input', this.updateValue);
this.$on('remove_group', this.removeItemMetadataGroup);
}, },
methods : { methods : {
updateValue({ itemId, metadatumId, values, parentMetaId }){ updateValue({ itemId, metadatumId, values, parentMetaId }){
@ -31,7 +33,7 @@ export const eventBusItemMetadata = new Vue({
let onlyValues = values.map((aValueObject) => aValueObject.value); let onlyValues = values.map((aValueObject) => aValueObject.value);
values = onlyValues; values = onlyValues;
} }
console.log(values)
this.$store.dispatch('item/updateItemMetadatum', { this.$store.dispatch('item/updateItemMetadatum', {
item_id: itemId, item_id: itemId,
metadatum_id: metadatumId, 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() { clearAllErrors() {
this.errors = []; 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 }) => { export const cleanItemMetadata = ({ commit }) => {
commit('cleanItemMetadata'); commit('cleanItemMetadata');
}; };

View File

@ -63,7 +63,7 @@ export const cleanItemMetadata = (state) => {
} }
export const setSingleMetadatum = (state, itemMetadatum) => { export const setSingleMetadatum = (state, itemMetadatum) => {
if (itemMetadatum.metadatum.parent <= 0) { if (itemMetadatum.metadatum.parent <= 0) {
let index = state.itemMetadata.findIndex(anItemMetadatum => anItemMetadatum.metadatum.id == itemMetadatum.metadatum.id); let index = state.itemMetadata.findIndex(anItemMetadatum => anItemMetadatum.metadatum.id == itemMetadatum.metadatum.id);
if (index >= 0) if (index >= 0)
@ -87,18 +87,18 @@ export const setSingleMetadatum = (state, itemMetadatum) => {
if (currentParent.metadatum.multiple == 'yes') { if (currentParent.metadatum.multiple == 'yes') {
let currrentChildMetadataGroupIndex = currentParentValues.findIndex((metadataGroup) => { let currentChildMetadataGroupIndex = currentParentValues.findIndex((metadataGroup) => {
return metadataGroup.findIndex((metadatumValue) => { return metadataGroup.findIndex((metadatumValue) => {
return metadatumValue.parent_meta_id == itemMetadatum.parent_meta_id; return metadatumValue.parent_meta_id == itemMetadatum.parent_meta_id;
}) >= 0; }) >= 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) if (currrentChildMetadatumIndex >= 0)
currentParentValues[currrentChildMetadataGroupIndex].splice(currrentChildMetadatumIndex, 1, childMetadatumValue); currentParentValues[currentChildMetadataGroupIndex].splice(currrentChildMetadatumIndex, 1, childMetadatumValue);
else else
currentParentValues[currrentChildMetadataGroupIndex].push(childMetadatumValue); currentParentValues[currentChildMetadataGroupIndex].push(childMetadatumValue);
} else { } else {
currentParentValues.push([childMetadatumValue]) 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) => { export const setLastUpdated = (state, value) => {
if (value != undefined) if (value != undefined)
state.lastUpdated = value; state.lastUpdated = value;