From 5b50caace2274f5dad8f37c13a0d82e67c307e8b Mon Sep 17 00:00:00 2001
From: hujambo-dunia <michelle.savage.1@gmail.com>
Date: Wed, 8 May 2024 15:48:58 -0400
Subject: [PATCH] Fix for recursive drill-down for
 selecting-all/unselecting-all infinite descendants

---
 .../Elements/FormDrilldown/FormDrilldown.vue  | 36 ++++++++++------
 .../FormDrilldown/FormDrilldownOption.vue     |  2 +-
 .../Form/Elements/FormDrilldown/utilities.ts  | 41 +++++++++++++++++++
 3 files changed, 66 insertions(+), 13 deletions(-)

diff --git a/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue b/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue
index 7421184cc728..f023dcebc84d 100644
--- a/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue
+++ b/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, type ComputedRef } from "vue";
 
-import { getAllValues, type Option, type Value } from "./utilities";
+import { findDescendants, flattenValues, getAllValues, type Option, type Value } from "./utilities";
 
 import FormDrilldownList from "./FormDrilldownList.vue";
 
@@ -53,22 +53,17 @@ const selectAllIndeterminate: ComputedRef<boolean> = computed(() => {
 });
 
 // Handle click on individual check/radio element
-function handleClick(value: string): void {
+function handleClick(clickedElement: string, value: string): void {
     if (props.multiple) {
-        const newValue: string[] = currentValue.value.slice();
-        const index: number = newValue.indexOf(value);
-        if (index !== -1) {
-            newValue.splice(index, 1);
-        } else {
-            newValue.push(value);
-        }
-        if (newValue.length === 0) {
+        const clickedElements: string[] = addDescendants(props.options, clickedElement);
+        const selectedElements: string[] = setElementValues(currentValue.value, clickedElements, value);
+        if (selectedElements.length === 0) {
             emit("input", null);
         } else {
-            emit("input", newValue);
+            emit("input", selectedElements);
         }
     } else {
-        emit("input", value);
+        emit("input", clickedElement);
     }
 }
 
@@ -76,6 +71,23 @@ function handleClick(value: string): void {
 function onSelectAll(selected: boolean): void {
     emit("input", selected ? allValues.value : null);
 }
+
+// Returns the descendant values and the selected/parent value (regardless of unselected or selected)
+function addDescendants(selectOptions: any[], selectedValue: string): string[] {
+    const descendants: any[] | null = findDescendants(selectOptions, selectedValue);
+    const allValues = flattenValues(descendants);
+    allValues.unshift(selectedValue);
+    return allValues;
+}
+
+function setElementValues(oldArray: string[], newArray: string[], value: string): string[] {
+    if (value) {
+        return Array.from(new Set([...oldArray, ...newArray]));
+    } else {
+        const newSet = new Set(newArray);
+        return oldArray.filter((item) => !newSet.has(item));
+    }
+}
 </script>
 
 <template>
diff --git a/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue b/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue
index c3c3c88fee02..f689f30de78f 100644
--- a/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue
+++ b/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue
@@ -60,7 +60,7 @@ onMounted(() => {
             class="drilldown-option d-inline"
             value="true"
             :checked="isChecked"
-            @change="handleClick(option.value)">
+            @change="handleClick(option.value, $event)">
             {{ option.name }}
         </component>
         <FormDrilldownList
diff --git a/client/src/components/Form/Elements/FormDrilldown/utilities.ts b/client/src/components/Form/Elements/FormDrilldown/utilities.ts
index 887f6375cdce..22db204189ee 100644
--- a/client/src/components/Form/Elements/FormDrilldown/utilities.ts
+++ b/client/src/components/Form/Elements/FormDrilldown/utilities.ts
@@ -27,3 +27,44 @@ export function getAllValues(headOptions: Array<Option>): string[] {
     }
     return values;
 }
+
+/**
+ * Returns all types of "decendants" (child, grandchild, and so forth) in nested array (or null).
+ * @param objects Array of Option objects with all keys intact
+ * @returns values: string[]
+ */
+export function findDescendants(objects: Array<Option>, search: string): any[] | null {
+    const stack: Array<Option> = [...objects];
+    while (stack.length > 0) {
+        const current = stack.pop();
+        if (current === undefined) {
+            return null;
+        } else {
+            if (current.value === search) {
+                return current.options;
+            }
+            if (current.options && Array.isArray(current.options)) {
+                stack.push(...current.options);
+            }
+        }
+    }
+
+    return null;
+}
+
+export function flattenValues(objects: any): string[] {
+    const newArray = [];
+    const stack = [...objects];
+
+    while (stack.length > 0) {
+        const current = stack.pop();
+        if (current.value) {
+            newArray.push(current.value);
+        }
+        if (current.options && Array.isArray(current.options)) {
+            stack.push(...current.options);
+        }
+    }
+
+    return newArray;
+}