From f7987597c4cdf99ed5300d6aa9fa2a40e1b677b1 Mon Sep 17 00:00:00 2001 From: Eric Gauzens Date: Sat, 19 Aug 2023 18:20:20 -0400 Subject: [PATCH 1/4] Selection working --- .../src/DropdownMultiselect.vue | 63 +++++++++++++++---- 1 file changed, 52 insertions(+), 11 deletions(-) diff --git a/src/components/DropdownMultiselect/src/DropdownMultiselect.vue b/src/components/DropdownMultiselect/src/DropdownMultiselect.vue index d452df64..32ee126e 100644 --- a/src/components/DropdownMultiselect/src/DropdownMultiselect.vue +++ b/src/components/DropdownMultiselect/src/DropdownMultiselect.vue @@ -33,7 +33,6 @@ node-key="id" show-checkbox check-on-click-node - :default-expand-all="false" :default-checked-keys="defaultCheckedKeys" :expand-on-click-node="false" :filter-node-method="filterNodes" @@ -44,14 +43,14 @@
+ Expand
@@ -101,6 +100,7 @@ export default { return { showAll: true, treeProps: { + children: 'children', label: 'label' }, optionsExpanded: true, @@ -190,9 +190,7 @@ export default { }, mounted() { if (this.defaultCheckedKeys.length) { - this.$nextTick(() => { - this.onCheckChange() - }) + this.onCheckChange() } if (this.showExpandOptionsContainer || this.visibleData !== undefined) { this.numOptionsShown = 0; @@ -248,17 +246,60 @@ export default { // set the half checked nodes checked status based upon what facets are actually visible since navigating between tabs might // cause some to be hidden so the parent facet should now possibly be checked/unchecked instead of half checked halfCheckedNodes.forEach(halfCheckedNode => { + const visibleChildren = halfCheckedNode.children.filter((child) => { + return this.allVisibleDataIds.includes(child.label) + }) + const visibleCheckedChildren = halfCheckedNode.children.filter((child) => { + return this.visibleCheckedNodes.some(visibleNode => visibleNode.label == child.label) + }) + if (!this.allVisibleDataIds.includes(halfCheckedNode.label)) { + return + } if (this.visibleCheckedNodes.every(visibleNode => !halfCheckedNode.children.some(child => visibleNode.label == child.label))) { this.$refs.tree.setChecked(halfCheckedNode.id, false) } - else if (this.visibleCheckedNodes.every(visibleNode => halfCheckedNode.children.some(child => visibleNode.label == child.label))) { + // If number of visible checked nodes in halfCheckedNode is equal to number of children that are visible (number of children thast are visible is equal to allVisibleDataIds with halfCheckedNode label as a parent) + else if (visibleChildren.length == visibleCheckedChildren.length) { this.$refs.tree.setChecked(halfCheckedNode.id, true) } }) - // set any subfacets again so that their parent facets get updated to checked/half checked in case their parent selection was cleared - // by the previous tab navigation (i.e. show all was set automatically all the visible facets aviable in the new tab were selected) - this.visibleCheckedNodes.filter(node => node.label.includes('.')).forEach(subfacet => { - this.$refs.tree.setChecked(subfacet.id, true, true) + + const visibleCheckedParents = this.visibleCheckedNodes.filter(visibleNode => { + return !visibleNode.label.includes('.') + }) + const visibleCheckedChildren = this.visibleCheckedNodes.filter(visibleNode => { + return visibleNode.label.includes('.') + }) + + // Check for any subfacets that have a parent that is not set + visibleCheckedChildren.forEach(checkedChild => { + const parentLabel = checkedChild.label.split('.')[0] + if (!visibleCheckedParents.some(parent => parent.label == parentLabel)) { + this.$refs.tree.setChecked(checkedChild.id, true, true) + } + }) + + visibleCheckedParents.forEach(checkedParent => { + // If any children are unselected then select one deep so that the parent is half-checked + const visibleChildren = checkedParent.children.filter(child => this.allVisibleDataIds.includes(child.label)) + if (visibleChildren.some(visibleChild => { + let isChecked = false + visibleCheckedChildren.forEach(checkedChild => { + if (checkedChild.label == visibleChild.label) { + isChecked = true + return + } + }) + return !isChecked + })) { + const alreadyCheckedChild = visibleCheckedChildren.find(child => { + const childsParentLabel = child.label.split('.')[0] + return childsParentLabel == checkedParent.label + }) + if (alreadyCheckedChild != undefined) { + this.$refs.tree.setChecked(alreadyCheckedChild.id, true, true) + } + } }) }, setShowAll: function() { From 225e6592bb3e514fb553fb85cea6c00ef2a9961a Mon Sep 17 00:00:00 2001 From: Eric Gauzens Date: Sun, 20 Aug 2023 04:15:13 -0400 Subject: [PATCH 2/4] fixed auto expand issue --- .../DropdownMultiselect/src/DropdownMultiselect.vue | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/DropdownMultiselect/src/DropdownMultiselect.vue b/src/components/DropdownMultiselect/src/DropdownMultiselect.vue index 32ee126e..3f83b168 100644 --- a/src/components/DropdownMultiselect/src/DropdownMultiselect.vue +++ b/src/components/DropdownMultiselect/src/DropdownMultiselect.vue @@ -34,6 +34,7 @@ show-checkbox check-on-click-node :default-checked-keys="defaultCheckedKeys" + :auto-expand-parent="false" :expand-on-click-node="false" :filter-node-method="filterNodes" :props="treeProps" @@ -180,9 +181,9 @@ export default { }, }, watch: { - allVisibleDataIds(val) { + allVisibleDataIds() { this.numOptionsShown = 0; - this.$refs.tree.filter(val) + this.$refs.tree.filter() }, 'visibleData': function() { this.setShowAll(); From 2578b56e6d1fa167003ce36f90b48fe108b9e6d6 Mon Sep 17 00:00:00 2001 From: Eric Gauzens Date: Sun, 20 Aug 2023 05:10:59 -0400 Subject: [PATCH 3/4] fixed selection bug --- .../src/DropdownMultiselect.vue | 29 ++++++++++++------- 1 file changed, 19 insertions(+), 10 deletions(-) diff --git a/src/components/DropdownMultiselect/src/DropdownMultiselect.vue b/src/components/DropdownMultiselect/src/DropdownMultiselect.vue index 3f83b168..99dc6e8a 100644 --- a/src/components/DropdownMultiselect/src/DropdownMultiselect.vue +++ b/src/components/DropdownMultiselect/src/DropdownMultiselect.vue @@ -243,6 +243,21 @@ export default { this.$refs.tree.filter() }, updateParentFacetsSelectedStatus() { + let visibleCheckedParents = this.visibleCheckedNodes.filter(visibleNode => { + return !visibleNode.label.includes('.') + }) + let visibleCheckedChildren = this.visibleCheckedNodes.filter(visibleNode => { + return visibleNode.label.includes('.') + }) + + // First check for any subfacets that have a parent that is not set + visibleCheckedChildren.forEach(checkedChild => { + const parentLabel = checkedChild.label.split('.')[0] + if (!visibleCheckedParents.some(parent => parent.label == parentLabel)) { + this.$refs.tree.setChecked(checkedChild.id, true, true) + } + }) + const halfCheckedNodes = this.$refs.tree.getHalfCheckedNodes() // set the half checked nodes checked status based upon what facets are actually visible since navigating between tabs might // cause some to be hidden so the parent facet should now possibly be checked/unchecked instead of half checked @@ -265,21 +280,13 @@ export default { } }) - const visibleCheckedParents = this.visibleCheckedNodes.filter(visibleNode => { + visibleCheckedParents = this.visibleCheckedNodes.filter(visibleNode => { return !visibleNode.label.includes('.') }) - const visibleCheckedChildren = this.visibleCheckedNodes.filter(visibleNode => { + visibleCheckedChildren = this.visibleCheckedNodes.filter(visibleNode => { return visibleNode.label.includes('.') }) - // Check for any subfacets that have a parent that is not set - visibleCheckedChildren.forEach(checkedChild => { - const parentLabel = checkedChild.label.split('.')[0] - if (!visibleCheckedParents.some(parent => parent.label == parentLabel)) { - this.$refs.tree.setChecked(checkedChild.id, true, true) - } - }) - visibleCheckedParents.forEach(checkedParent => { // If any children are unselected then select one deep so that the parent is half-checked const visibleChildren = checkedParent.children.filter(child => this.allVisibleDataIds.includes(child.label)) @@ -299,6 +306,8 @@ export default { }) if (alreadyCheckedChild != undefined) { this.$refs.tree.setChecked(alreadyCheckedChild.id, true, true) + } else { + this.$refs.tree.setChecked(checkedParent.id, false) } } }) From 251efca339fa5f3c092ef833b629d15a296d8dc8 Mon Sep 17 00:00:00 2001 From: Eric Gauzens Date: Sun, 20 Aug 2023 05:12:03 -0400 Subject: [PATCH 4/4] bumped package version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 3cdb283d..e4a7b129 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@nih-sparc/sparc-design-system-components", - "version": "0.26.30", + "version": "0.27.0", "private": false, "scripts": { "serve": "vue-cli-service serve",