diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditBooleanMapModal.vue b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditBooleanMapModal.vue
index 2cbdded597..d949cc576b 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditBooleanMapModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditBooleanMapModal.vue
@@ -1,10 +1,8 @@
-
- {{ hasMixedCategoriesMessage }} -
entry[1].length === this.nodeIds.length) .map(([key]) => key); + if ( + this.expanded && + Object.values(this.selected).some(value => value.length < this.nodeIds.length) + ) { + selectedValues.push(MIXED); + } return selectedValues; }, nested() { @@ -195,6 +216,9 @@ this.selected = {}; }, tooltipText(optionId) { + if (optionId === MIXED) { + return this.$tr('mixedLabel'); + } const option = this.categoriesList.find(option => option.value === optionId); if (!option) { return ''; @@ -258,6 +282,15 @@ }); return nodeIds.size === this.nodeIds.length; }, + isCheckboxIndeterminate(optionId) { + if (this.selected[optionId] && this.selected[optionId].length < this.nodeIds.length) { + return true; + } + return ( + Object.keys(this.selected).some(selectedValue => selectedValue.startsWith(optionId)) && + !this.isSelected(optionId) + ); + }, onChange(optionId) { if (this.isSelected(optionId)) { this.remove(optionId); @@ -268,6 +301,7 @@ }, $trs: { noCategoryFoundText: 'Category not found', + mixedLabel: 'Mixed', }, }; diff --git a/contentcuration/contentcuration/frontend/shared/views/form/ExpandableSelect.vue b/contentcuration/contentcuration/frontend/shared/views/form/ExpandableSelect.vue index cdeea8ee22..127eeabd7a 100644 --- a/contentcuration/contentcuration/frontend/shared/views/form/ExpandableSelect.vue +++ b/contentcuration/contentcuration/frontend/shared/views/form/ExpandableSelect.vue @@ -50,6 +50,7 @@ :key="option.value" :label="option.text" :checked="isSelected(option.value)" + :indeterminate="isIndeterminate(option.value)" data-test="option-checkbox" @change="value => setOption(option.value, value)" /> @@ -187,6 +188,12 @@ } return this.valueModel[value].length === this.availableItems.length; }, + isIndeterminate(value) { + if (!this.valueModel[value]) { + return false; + } + return this.valueModel[value].length < this.availableItems.length; + }, setOption(optionId, value) { if (value) { this.valueModel = { @@ -209,4 +216,4 @@ pointer-events: none; opacity: 0.5; } - + \ No newline at end of file