From 7a82a7873ee0a6ada4210e1b217d4ffc366c43e4 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 18 Apr 2023 16:47:29 +0300
Subject: [PATCH] Use computed props to determine select all state, handle
 radio value

---
 .../Elements/FormDrilldown/FormDrilldown.vue  | 75 +++++++------------
 .../FormDrilldown/FormDrilldownList.vue       |  2 +-
 .../FormDrilldown/FormDrilldownOption.vue     | 30 +++++---
 .../Form/Elements/FormDrilldown/types.ts      |  5 --
 .../Form/Elements/FormDrilldown/utilities.ts  | 24 ++++++
 5 files changed, 72 insertions(+), 64 deletions(-)
 delete mode 100644 client/src/components/Form/Elements/FormDrilldown/types.ts
 create mode 100644 client/src/components/Form/Elements/FormDrilldown/utilities.ts

diff --git a/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue b/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue
index acbf567b73c..ca959d7a4cb 100644
--- a/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue
+++ b/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { computed, ref, watch, type ComputedRef } from "vue";
+import { computed, type ComputedRef } from "vue";
 import FormDrilldownList from "./FormDrilldownList.vue";
-import type { Option } from "./types.js";
+import { getAllValues, type Option, type Value } from "./utilities";
 
 export interface FormDrilldownProps {
     id: string;
-    value?: string | string[];
+    value?: Value;
     options: Array<Option>;
     multiple: boolean;
 }
@@ -16,55 +16,44 @@ const props = withDefaults(defineProps<FormDrilldownProps>(), {
 });
 
 const emit = defineEmits<{
-    (e: "input", value: string | string[] | null): void;
+    (e: "input", value: Value): void;
 }>();
 
-const selectAllIndeterminate = ref(false);
-const selectAll = ref(false);
-
 const hasOptions = computed(() => {
     return props.options.length > 0;
 });
 
 // Determine all available values
 const allValues: ComputedRef<string[]> = computed(() => {
-    let options = null;
-    const values: string[] = [];
-    const stack: Array<Array<Option>> = [props.options];
-    while ((options = stack.pop())) {
-        options.forEach((option) => {
-            if (option.value) {
-                values.push(option.value);
-            }
-            if (option.options.length > 0) {
-                stack.push(option.options);
-            }
-        });
-    }
-    return values;
+    return getAllValues(props.options);
 });
 
-// Determine current value and set select all state
-const currentValue = computed({
-    get: (): string[] => {
-        if (props.value === null || props.value === "") {
-            return [];
-        } else if (Array.isArray(props.value)) {
-            return props.value;
-        } else {
-            return [props.value];
-        }
-    },
-    set: (newValue: string[]): void => {
-        emit("input", newValue);
-    },
+// Determine current value
+const currentValue: ComputedRef<string[]> = computed(() => {
+    if (props.value === null || props.value === "") {
+        return [];
+    } else if (Array.isArray(props.value)) {
+        return props.value;
+    } else {
+        return [props.value];
+    }
+});
+
+// Determine if select all is checked
+const selectAllChecked: ComputedRef<boolean> = computed(() => {
+    return allValues.value.length === currentValue.value.length;
+});
+
+// Determine if select all state undetermined
+const selectAllIndeterminate: ComputedRef<boolean> = computed(() => {
+    return ![0, allValues.value.length].includes(currentValue.value.length);
 });
 
 // Handle click on individual check/radio element
 function handleClick(value: string): void {
     if (props.multiple) {
-        const newValue = currentValue.value.slice();
-        const index = newValue.indexOf(value);
+        const newValue: string[] = currentValue.value.slice();
+        const index: number = newValue.indexOf(value);
         if (index !== -1) {
             newValue.splice(index, 1);
         } else {
@@ -84,24 +73,14 @@ function handleClick(value: string): void {
 function onSelectAll(selected: boolean): void {
     emit("input", selected ? allValues.value : null);
 }
-
-// Watch value and adjust select all state accordingly
-watch(
-    () => props.value,
-    () => {
-        const length = currentValue.value.length;
-        selectAll.value = allValues.value.length === length;
-        selectAllIndeterminate.value = ![0, allValues.value.length].includes(length);
-    }
-);
 </script>
 
 <template>
     <div v-if="hasOptions">
         <b-form-checkbox
             v-if="props.multiple"
-            v-model="selectAll"
             v-localize
+            :checked="selectAllChecked"
             :indeterminate="selectAllIndeterminate"
             class="d-inline select-all-checkbox"
             @change="onSelectAll">
diff --git a/client/src/components/Form/Elements/FormDrilldown/FormDrilldownList.vue b/client/src/components/Form/Elements/FormDrilldown/FormDrilldownList.vue
index 463ee271c6e..240f9ab0bb7 100644
--- a/client/src/components/Form/Elements/FormDrilldown/FormDrilldownList.vue
+++ b/client/src/components/Form/Elements/FormDrilldown/FormDrilldownList.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import FormDrilldownOption from "./FormDrilldownOption.vue";
-import type { Option } from "./types.js";
+import type { Option } from "./utilities";
 
 export interface Props {
     currentValue: string[];
diff --git a/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue b/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue
index 67ab8fac286..2e98c51bcda 100644
--- a/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue
+++ b/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed, ref } from "vue";
+import { computed, ref, type ComputedRef } from "vue";
 import FormDrilldownList from "./FormDrilldownList.vue";
-import type { Option } from "./types.js";
+import type { Option } from "./utilities";
 
 export interface Props {
     currentValue: string[];
@@ -14,16 +14,26 @@ const props = defineProps<Props>();
 
 const showChildren = ref(false);
 
-const hasOptions = computed(() => {
+const hasOptions: ComputedRef<boolean> = computed(() => {
     return props.option.options.length > 0;
 });
 
-const isChecked = computed(() => {
+// indicates if the value has been selected or not (required for checkbox display)
+const isChecked: ComputedRef<boolean> = computed(() => {
     const optionValue = props.option.value;
-    return props.currentValue.indexOf(optionValue) !== -1;
+    return props.currentValue.includes(optionValue);
 });
 
-function toggleChildren() {
+// provides a single value, which is either null or a non-empty string (required for radio display)
+const singleValue = computed({
+    get(): string | null {
+        const value: string[] = props.currentValue;
+        return value.length > 0 ? value[0] || null : null;
+    },
+    set() {},
+});
+
+function toggleChildren(): void {
     showChildren.value = !showChildren.value;
 }
 </script>
@@ -36,16 +46,16 @@ function toggleChildren() {
         </span>
         <b-form-checkbox
             v-if="multiple"
-            class="d-inline drilldown-option"
+            class="drilldown-option d-inline"
             :checked="isChecked"
             @change="handleClick(option.value)">
             {{ option.name }}
         </b-form-checkbox>
         <b-form-radio
             v-else
-            class="d-inline"
-            :selected="isChecked"
-            name="selectedOption"
+            v-model="singleValue"
+            class="drilldown-option d-inline"
+            :value="option.value"
             @change="handleClick(option.value)">
             {{ option.name }}
         </b-form-radio>
diff --git a/client/src/components/Form/Elements/FormDrilldown/types.ts b/client/src/components/Form/Elements/FormDrilldown/types.ts
deleted file mode 100644
index 0bc86499698..00000000000
--- a/client/src/components/Form/Elements/FormDrilldown/types.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export interface Option {
-    name: string;
-    value: string;
-    options: Array<Option>;
-}
diff --git a/client/src/components/Form/Elements/FormDrilldown/utilities.ts b/client/src/components/Form/Elements/FormDrilldown/utilities.ts
new file mode 100644
index 00000000000..efc99bcf285
--- /dev/null
+++ b/client/src/components/Form/Elements/FormDrilldown/utilities.ts
@@ -0,0 +1,24 @@
+export interface Option {
+    name: string;
+    value: string;
+    options: Array<Option>;
+}
+
+export type Value = string[] | string | null;
+
+export function getAllValues(headOptions: Array<Option>): string[] {
+    let options = null;
+    const values: string[] = [];
+    const stack: Array<Array<Option>> = [headOptions];
+    while ((options = stack.pop())) {
+        options.forEach((option) => {
+            if (option.value) {
+                values.push(option.value);
+            }
+            if (option.options.length > 0) {
+                stack.push(option.options);
+            }
+        });
+    }
+    return values;
+}