Fix for recursive drill-down for selecting-all/unselecting-all infini…

…te descendants
hujambo-dunia · May 8, 2024 · 5b50caa · 5b50caa
1 parent 0192501
commit 5b50caa
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 13 deletions.
diff --git 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,29 +53,41 @@ 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);
     }
 }
 
 // Handle click on select all checkbox to either select or unselect all values
 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
@@ -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
@@ -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;
+}