New group collapse strategy inside childItemMetadatum #17.

This commit is contained in:
mateuswetah 2020-03-20 13:38:13 -03:00
parent aa0451bba9
commit eeab34ce08
1 changed files with 20 additions and 14 deletions

View File

@ -17,8 +17,8 @@
v-for="(childItemMetadatum, index) of childItemMetadataGroups[0]" v-for="(childItemMetadatum, index) of childItemMetadataGroups[0]"
:key="index" :key="index"
:item-metadatum="childItemMetadatum" :item-metadatum="childItemMetadatum"
:is-collapsed="true" :is-collapsed="childItemMetadatum.collapse"
@changeCollapse="onChangeCollapse($event, index)"/> @changeCollapse="onChangeCollapse($event, 0, index)"/>
<template v-if="isMultiple && childItemMetadataGroups.length > 1"> <template v-if="isMultiple && childItemMetadataGroups.length > 1">
<transition-group <transition-group
name="filter-item" name="filter-item"
@ -29,8 +29,8 @@
v-for="(childItemMetadatum, index) of childItemMetadata" v-for="(childItemMetadatum, index) of childItemMetadata"
:key="groupIndex + '-' + index" :key="groupIndex + '-' + index"
:item-metadatum="childItemMetadatum" :item-metadatum="childItemMetadatum"
:is-collapsed="true" :is-collapsed="childItemMetadatum.collapse"
@changeCollapse="onChangeCollapse($event, index)"/> @changeCollapse="onChangeCollapse($event, groupIndex, index)"/>
<a <a
v-if="index > 0" v-if="index > 0"
@click="removeGroup(groupIndex)" @click="removeGroup(groupIndex)"
@ -62,6 +62,8 @@
</template> </template>
<script> <script>
import { eventBusItemMetadata } from '../../../js/event-bus-item-metadata';
export default { export default {
props: { props: {
itemMetadatum: Object, itemMetadatum: Object,
@ -72,8 +74,7 @@
return { return {
children: [], children: [],
collapseAllChildren: true, collapseAllChildren: true,
childItemMetadataGroups: [], childItemMetadataGroups: []
childrenMetadataCollapses: [],
} }
}, },
computed: { computed: {
@ -114,6 +115,7 @@
value: childItemMetadatum.value, value: childItemMetadatum.value,
value_as_html: childItemMetadatum.value_as_html, value_as_html: childItemMetadatum.value_as_html,
value_as_string: childItemMetadatum.value_as_string, value_as_string: childItemMetadatum.value_as_string,
collapse: this.collapseAllChildren ? this.collapseAllChildren : false
}) })
} }
// If some have empty childs, we need to creat their input // If some have empty childs, we need to creat their input
@ -128,7 +130,8 @@
parent_meta_id: existintParentMetaId ? existintParentMetaId : 0, parent_meta_id: existintParentMetaId ? existintParentMetaId : 0,
value: '', value: '',
value_as_html: '', value_as_html: '',
value_as_string: '' value_as_string: '',
collapse: this.collapseAllChildren ? this.collapseAllChildren : false
}); });
} }
} }
@ -149,7 +152,8 @@
parent_meta_id: '0', parent_meta_id: '0',
value: '', value: '',
value_as_html: '', value_as_html: '',
value_as_string: '' value_as_string: '',
collapse: this.collapseAllChildren ? this.collapseAllChildren : false
}; };
currentChildItemMetadata.push(childObject) currentChildItemMetadata.push(childObject)
} }
@ -166,11 +170,12 @@
toggleCollapseAllChildren() { toggleCollapseAllChildren() {
this.collapseAllChildren = !this.collapseAllChildren; this.collapseAllChildren = !this.collapseAllChildren;
for (let i = 0; i < this.childrenMetadataCollapses.length; i++) for (let i = 0; i < this.childItemMetadataGroups; i++)
this.childrenMetadataCollapses[i] = this.collapseAllChildren; for (let j = 0; j < this.childItemMetadataGroups[i]; j++)
this.childItemMetadataGroups[i][j].collapse = this.collapseAllChildren;
}, },
onChangeCollapse(event, index) { onChangeCollapse(event, groupIndex, index) {
this.childrenMetadataCollapses.splice(index, 1, event); this.childItemMetadataGroups[groupIndex][index].collapse = !event;
}, },
addGroup(){ addGroup(){
// Create a new placeholder parent_meta_id group here. // Create a new placeholder parent_meta_id group here.
@ -187,7 +192,8 @@
parent_meta_id: 0, parent_meta_id: 0,
value: '', value: '',
value_as_html: '', value_as_html: '',
value_as_string: '' value_as_string: '',
collapse: this.collapseAllChildren ? this.collapseAllChildren : false
}; };
newEmptyGroup.push(childObject) newEmptyGroup.push(childObject)
} }
@ -196,7 +202,7 @@
}, },
removeGroup(groupIndex) { removeGroup(groupIndex) {
this.currentChildItemMetadataGroups.splice(groupIndex, 1); this.currentChildItemMetadataGroups.splice(groupIndex, 1);
updatedItemMetadatum = JSON.parse(JSON.stringify(this.itemMetadatum)) let updatedItemMetadatum = JSON.parse(JSON.stringify(this.itemMetadatum))
updatedItemMetadatum.slice(groupIndex, 1); updatedItemMetadatum.slice(groupIndex, 1);
// If none is the case, the value is update request is sent to the API // If none is the case, the value is update request is sent to the API