New group collapse strategy inside childItemMetadatum #17.
This commit is contained in:
parent
aa0451bba9
commit
eeab34ce08
|
@ -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
|
||||||
|
|
Loading…
Reference in New Issue