Automatically passes empty value to first time a group is created on single valued compound item metadata. #17.

This commit is contained in:
mateuswetah 2020-03-24 11:15:29 -03:00
parent 8c4415436f
commit 7ffedf6f01
3 changed files with 64 additions and 73 deletions

View File

@ -12,52 +12,48 @@
</a>
<transition name="filter-item">
<div v-if="childItemMetadataGroups.length > 0">
<tainacan-form-item
v-for="(childItemMetadatum, index) of childItemMetadataGroups[0]"
:key="index"
:item-metadatum="childItemMetadatum"
:is-collapsed="childItemMetadatum.collapse"
@changeCollapse="onChangeCollapse($event, 0, index)"/>
<template v-if="isMultiple && childItemMetadataGroups.length > 1">
<transition-group
name="filter-item"
class="multiple-inputs">
<template v-for="(childItemMetadata, groupIndex) of childItemMetadataGroups">
<hr
v-if="groupIndex > 0"
:key="groupIndex">
<tainacan-form-item
v-if="groupIndex > 0"
v-for="(childItemMetadatum, childIndex) of childItemMetadata"
:key="childIndex"
:item-metadatum="childItemMetadatum"
:is-collapsed="childItemMetadatum.collapse"
@changeCollapse="onChangeCollapse($event, groupIndex, childIndex)"/>
<a
v-if="groupIndex > 0"
@click="removeGroup(groupIndex)"
class="add-link"
:key="groupIndex">
<span class="icon is-small">
<i class="tainacan-icon has-text-secondary tainacan-icon-remove"/>
</span>
&nbsp;{{ $i18n.get('label_remove_value') }}
</a>
</template>
</transition-group>
</template>
<template v-if="isMultiple">
<a
@click="addGroup"
class="is-block add-link">
<span class="icon is-small">
<i class="tainacan-icon has-text-secondary tainacan-icon-add"/>
</span>
&nbsp;{{ $i18n.get('label_add_value') }}
</a>
</template>
</div>
<template v-if="childItemMetadataGroups.length > 0">
<transition-group
name="filter-item"
class="multiple-inputs">
<template v-for="(childItemMetadata, groupIndex) of childItemMetadataGroups">
<hr
v-if="groupIndex > 0"
:key="groupIndex">
<tainacan-form-item
v-for="(childItemMetadatum, childIndex) of childItemMetadata"
:key="childIndex"
:item-metadatum="childItemMetadatum"
:is-collapsed="childItemMetadatum.collapse"
@changeCollapse="onChangeCollapse($event, groupIndex, childIndex)"/>
<a
v-if="groupIndex > 0"
@click="removeGroup(groupIndex)"
class="add-link"
:key="groupIndex">
<span class="icon is-small">
<i class="tainacan-icon has-text-secondary tainacan-icon-remove"/>
</span>
&nbsp;{{ $i18n.get('label_remove_value') }}
</a>
</template>
</transition-group>
</template>
<template v-else>
<p class="empty-label">
{{ $i18n.get('info_no_value_compound_metadata') }}
</p>
</template>
<template v-if="isMultiple">
<a
@click="addGroup"
class="is-block add-link">
<span class="icon is-small">
<i class="tainacan-icon has-text-secondary tainacan-icon-add"/>
</span>
&nbsp;{{ $i18n.get('label_add_value') }}
</a>
</template>
</transition>
</div>
@ -105,13 +101,13 @@
for (let childItemMetadata of parentValues) {
let existingChildItemMetadata = [];
if (childItemMetadata && childItemMetadata.length) {
// Loads the existing values
for (let childItemMetadatum of childItemMetadata) {
const childMetadatum = this.itemMetadatum.metadatum.metadata_type_options.children_objects.find((aMetadatum) => aMetadatum.id == childItemMetadatum.metadatum_id);
existingChildItemMetadata.push({
item: this.itemMetadatum.item,
metadatum: childMetadatum,
@ -162,25 +158,6 @@
currentChildItemMetadataGroups.push(existingChildItemMetadata)
}
} else {
// In this situation, we simply create empty forms
let currentChildItemMetadata = [];
// A new input for each type of child metadatum
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: this.collapseAllChildren ? this.collapseAllChildren : false
};
currentChildItemMetadata.push(childObject)
}
currentChildItemMetadataGroups.push(currentChildItemMetadata);
}
}
@ -189,6 +166,10 @@
immediate: true
}
},
mounted() {
if (!this.isMultiple && this.itemMetadatum.value.length <= 0)
this.addGroup();
},
methods: {
toggleCollapseAllChildren() {
this.collapseAllChildren = !this.collapseAllChildren;
@ -221,15 +202,20 @@
newEmptyGroup.push(childObject)
}
}
this.childItemMetadataGroups.push(newEmptyGroup);
// Sends value to api so we can obtain the parent_meta_id
eventBusItemMetadata.$emit('input', {
itemId: this.itemMetadatum.item.id,
metadatumId: newEmptyGroup[newEmptyGroup.length - 1].metadatum.id,
values: newEmptyGroup[newEmptyGroup.length - 1].value,
parentMetaId: newEmptyGroup[newEmptyGroup.length - 1].parent_meta_id
});
},
removeGroup(groupIndex) {
console.log(JSON.parse(JSON.stringify(this.childItemMetadataGroups)))
this.childItemMetadataGroups.splice(groupIndex, 1);
let updatedItemMetadatumValue = JSON.parse(JSON.stringify(this.itemMetadatum.value))
updatedItemMetadatumValue.splice(groupIndex, 1);
console.log(JSON.parse(JSON.stringify(this.childItemMetadataGroups)))
// If none is the case, the value is update request is sent to the API
eventBusItemMetadata.$emit('input', {
itemId: this.itemMetadatum.item.id,
@ -272,5 +258,9 @@
width: calc(100% + 38px);
height: 1px;
}
.empty-label {
color: var(--tainacan-gray3);
font-style: italic;
}
}
</style>

View File

@ -31,11 +31,11 @@ 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,
values: values,
values: values[0] ? values[0] : values,
parent_meta_id: parentMetaId ? parentMetaId : null
})
.then(() => {

View File

@ -709,6 +709,7 @@ return apply_filters( 'tainacan-admin-i18n', [
'info_can_not_bulk_edit_items_collection' => __( 'You are not allowed to bulk edit items from this collection.', 'tainacan' ),
'info_not_allowed_change_order_metadata' => __( 'Can not change metadata order now.', 'tainacan' ),
'info_not_allowed_change_order_filters' => __( 'Can not change filters order now.', 'tainacan' ),
'info_no_value_compound_metadata' => __( 'No value has been added to this compound metadata.', 'tainacan' ),
// Datepicker months
'datepicker_month_january' => __( 'January', 'tainacan' ),