Updates local storage when removing group index.
This commit is contained in:
parent
aef918107c
commit
e09c2d3641
|
@ -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
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
@ -394,6 +394,7 @@
|
|||
section.field {
|
||||
padding: 0.5em 1em 0 1em;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
.children-icon {
|
||||
position: absolute;
|
||||
|
|
|
@ -9,7 +9,7 @@
|
|||
lang="en"
|
||||
:step="getStep"/>
|
||||
</template>
|
||||
|
||||
itemMetadatum
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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 = [];
|
||||
}
|
||||
|
|
|
@ -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');
|
||||
};
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue