From 9039114ce4069b586ff9006bbf10375d59ba923d Mon Sep 17 00:00:00 2001
From: Assunta DeSanto <assuntad23@gmail.com>
Date: Tue, 7 Mar 2023 15:58:28 -0500
Subject: [PATCH 01/51] created FormDrilldown and FormDrilldownOption for
 recursive rendering

---
 .../Form/Elements/FormDrilldown.vue           | 38 +++++++++++++++++++
 .../Form/Elements/FormDrilldownOption.vue     | 21 ++++++++++
 client/src/components/Form/FormElement.vue    |  6 +++
 3 files changed, 65 insertions(+)
 create mode 100644 client/src/components/Form/Elements/FormDrilldown.vue
 create mode 100644 client/src/components/Form/Elements/FormDrilldownOption.vue

diff --git a/client/src/components/Form/Elements/FormDrilldown.vue b/client/src/components/Form/Elements/FormDrilldown.vue
new file mode 100644
index 00000000000..d04a11c98bc
--- /dev/null
+++ b/client/src/components/Form/Elements/FormDrilldown.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import FormDrilldownOption from "./FormDrilldownOption.vue"
+
+export interface Option {
+    name: string;
+    value: string;
+    options: Array<Option>;
+    selected: boolean;
+}
+
+export interface FormDrilldownProps {
+    value?: string | string[];
+    id: string;
+    options: Array<Option>;
+}
+
+const props = withDefaults(defineProps<FormDrilldownProps>(), {
+    value: "",
+});
+
+const hasOptions = computed(() => {
+    return props.options.length > 0;
+});
+//currentValue will be computed array of selected values
+//should I re-use FormCheck?
+//need to implement selectAll
+//need to implement is_expanded/drilldown function
+//need to implment iterator function
+</script>
+
+<template>
+    <div v-if="hasOptions">
+        <ul v-for="option in options" :key="option.name" class="options">
+            <form-drilldown-option :option="option"></form-drilldown-option>
+        </ul>
+    </div>
+</template>
diff --git a/client/src/components/Form/Elements/FormDrilldownOption.vue b/client/src/components/Form/Elements/FormDrilldownOption.vue
new file mode 100644
index 00000000000..ed3386b975b
--- /dev/null
+++ b/client/src/components/Form/Elements/FormDrilldownOption.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+export interface Option {
+    name: string;
+    value: string;
+    options: Array<Option>;
+    selected: boolean;
+}
+
+export interface FormDrilldownProps {
+    option: Option;
+}
+
+const props = defineProps<FormDrilldownProps>();
+</script>
+<template>
+    <li class="form-drilldown-option">
+        {{ props.option.name }}
+        <form-drilldown-option v-for="option in props.option.options" :key="option.name" :option="option">
+        </form-drilldown-option>
+    </li>
+</template>
diff --git a/client/src/components/Form/FormElement.vue b/client/src/components/Form/FormElement.vue
index 29b2b2b8e8e..de7ab458f5a 100644
--- a/client/src/components/Form/FormElement.vue
+++ b/client/src/components/Form/FormElement.vue
@@ -11,6 +11,7 @@ import FormText from "./Elements/FormText.vue";
 import FormOptionalText from "./Elements/FormOptionalText.vue";
 import FormRulesEdit from "./Elements/FormRulesEdit.vue";
 import FormUpload from "./Elements/FormUpload.vue";
+import FormDrilldown from "./Elements/FormDrilldown.vue";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { ref, computed, useAttrs } from "vue";
 import { library } from "@fortawesome/fontawesome-svg-core";
@@ -263,6 +264,11 @@ const isOptional = computed(() => !isRequired.value && attrs.value["optional"] !
                 :options="attrs.options"
                 :optional="attrs.optional"
                 :multiple="attrs.multiple" />
+            <FormDrilldown
+                v-else-if="props.type === 'drill_down'"
+                :id="id"
+                v-model="currentValue"
+                :options="attrs.options" />
             <FormColor v-else-if="props.type === 'color'" :id="props.id" v-model="currentValue" />
             <FormDirectory v-else-if="props.type === 'directory_uri'" v-model="currentValue" />
             <FormUpload v-else-if="props.type === 'upload'" v-model="currentValue" />

From 3630ef41dc453b3af826cfaaff1f442f9958a7d3 Mon Sep 17 00:00:00 2001
From: Assunta DeSanto <assuntad23@gmail.com>
Date: Tue, 7 Mar 2023 16:20:37 -0500
Subject: [PATCH 02/51] adding selection checkbox, for each option
 individually, not tied to the parent component, yet

---
 .../components/Form/Elements/FormDrilldownOption.vue | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/client/src/components/Form/Elements/FormDrilldownOption.vue b/client/src/components/Form/Elements/FormDrilldownOption.vue
index ed3386b975b..eb959bae14c 100644
--- a/client/src/components/Form/Elements/FormDrilldownOption.vue
+++ b/client/src/components/Form/Elements/FormDrilldownOption.vue
@@ -13,9 +13,11 @@ export interface FormDrilldownProps {
 const props = defineProps<FormDrilldownProps>();
 </script>
 <template>
-    <li class="form-drilldown-option">
-        {{ props.option.name }}
-        <form-drilldown-option v-for="option in props.option.options" :key="option.name" :option="option">
-        </form-drilldown-option>
-    </li>
+    <div class="form-drilldown-option">
+        <b-form-checkbox v-model="props.option.selected">
+            {{ props.option.name }}
+            <form-drilldown-option v-for="option in props.option.options" :key="option.name" :option="option">
+            </form-drilldown-option>
+        </b-form-checkbox>
+    </div>
 </template>

From 65ec04d64a1ca273174e44b1a64c1b2d100d2520 Mon Sep 17 00:00:00 2001
From: Assunta DeSanto <assuntad23@gmail.com>
Date: Tue, 7 Mar 2023 22:31:04 -0500
Subject: [PATCH 03/51] added functionality for expanding to show nested
 options

---
 .../Form/Elements/FormDrilldown.vue           | 10 +++---
 .../Form/Elements/FormDrilldownOption.vue     | 31 ++++++++++++++++---
 2 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/client/src/components/Form/Elements/FormDrilldown.vue b/client/src/components/Form/Elements/FormDrilldown.vue
index d04a11c98bc..a44e296076a 100644
--- a/client/src/components/Form/Elements/FormDrilldown.vue
+++ b/client/src/components/Form/Elements/FormDrilldown.vue
@@ -23,16 +23,14 @@ const hasOptions = computed(() => {
     return props.options.length > 0;
 });
 //currentValue will be computed array of selected values
-//should I re-use FormCheck?
 //need to implement selectAll
-//need to implement is_expanded/drilldown function
-//need to implment iterator function
+
 </script>
 
 <template>
     <div v-if="hasOptions">
-        <ul v-for="option in options" :key="option.name" class="options">
-            <form-drilldown-option :option="option"></form-drilldown-option>
-        </ul>
+        <div v-for="option in options" :key="option.name" class="options">
+            <form-drilldown-option :option="option" :depth="0"></form-drilldown-option>
+        </div>
     </div>
 </template>
diff --git a/client/src/components/Form/Elements/FormDrilldownOption.vue b/client/src/components/Form/Elements/FormDrilldownOption.vue
index eb959bae14c..eaf5539b80d 100644
--- a/client/src/components/Form/Elements/FormDrilldownOption.vue
+++ b/client/src/components/Form/Elements/FormDrilldownOption.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { computed, ref } from "vue";
+
 export interface Option {
     name: string;
     value: string;
@@ -8,16 +10,35 @@ export interface Option {
 
 export interface FormDrilldownProps {
     option: Option;
+    depth: number;
+}
+function toggleChildren() {
+    showChildren.value = !showChildren.value;
 }
 
+const showChildren = ref(false);
+
 const props = defineProps<FormDrilldownProps>();
+
+const hasOptions = computed(() => {
+    return props.option.options.length > 0;
+});
 </script>
 <template>
     <div class="form-drilldown-option">
-        <b-form-checkbox v-model="props.option.selected">
-            {{ props.option.name }}
-            <form-drilldown-option v-for="option in props.option.options" :key="option.name" :option="option">
-            </form-drilldown-option>
-        </b-form-checkbox>
+        <span
+            v-if="hasOptions"
+            @click="toggleChildren"
+            class="ui-drilldown-button"
+            v-bind:class="{ 'fa fa-plus-square': !showChildren, 'fa fa-minus-square': showChildren }" />
+        <b-form-checkbox v-model="props.option.selected" style="display: inline-block"/>
+        {{ props.option.name }}
+        <form-drilldown-option
+            v-show="showChildren"
+            v-for="option in props.option.options"
+            :key="option.name"
+            :option="option"
+            :depth="depth + 1">
+        </form-drilldown-option>
     </div>
 </template>

From af3ed9c8729ea0eb392790999c24c09aacdaff9f Mon Sep 17 00:00:00 2001
From: Assunta DeSanto <assuntad23@gmail.com>
Date: Wed, 8 Mar 2023 21:41:42 -0500
Subject: [PATCH 04/51] indenting children options

---
 .../Form/Elements/FormDrilldown.vue           |  4 +--
 .../Form/Elements/FormDrilldownOption.vue     | 33 +++++++++++--------
 2 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/client/src/components/Form/Elements/FormDrilldown.vue b/client/src/components/Form/Elements/FormDrilldown.vue
index a44e296076a..ce59545ebbf 100644
--- a/client/src/components/Form/Elements/FormDrilldown.vue
+++ b/client/src/components/Form/Elements/FormDrilldown.vue
@@ -29,8 +29,8 @@ const hasOptions = computed(() => {
 
 <template>
     <div v-if="hasOptions">
-        <div v-for="option in options" :key="option.name" class="options">
+        <ul v-for="option in options" :key="option.name" class="options" >
             <form-drilldown-option :option="option" :depth="0"></form-drilldown-option>
-        </div>
+        </ul>
     </div>
 </template>
diff --git a/client/src/components/Form/Elements/FormDrilldownOption.vue b/client/src/components/Form/Elements/FormDrilldownOption.vue
index eaf5539b80d..692904cb43b 100644
--- a/client/src/components/Form/Elements/FormDrilldownOption.vue
+++ b/client/src/components/Form/Elements/FormDrilldownOption.vue
@@ -23,22 +23,27 @@ const props = defineProps<FormDrilldownProps>();
 const hasOptions = computed(() => {
     return props.option.options.length > 0;
 });
+const indent = computed(() => {
+    return {transform: `translate(${props.depth * 25}px)`, "list-style-type": "none"}
+});
 </script>
 <template>
     <div class="form-drilldown-option">
-        <span
-            v-if="hasOptions"
-            @click="toggleChildren"
-            class="ui-drilldown-button"
-            v-bind:class="{ 'fa fa-plus-square': !showChildren, 'fa fa-minus-square': showChildren }" />
-        <b-form-checkbox v-model="props.option.selected" style="display: inline-block"/>
-        {{ props.option.name }}
-        <form-drilldown-option
-            v-show="showChildren"
-            v-for="option in props.option.options"
-            :key="option.name"
-            :option="option"
-            :depth="depth + 1">
-        </form-drilldown-option>
+        <li :class="{ 'ui-drilldown-subgroup': depth > 0 }" :style="indent">
+            <span
+                v-if="hasOptions"
+                @click="toggleChildren"
+                class="ui-drilldown-button"
+                :class="{ 'fa fa-plus-square': !showChildren, 'fa fa-minus-square': showChildren }" />
+            <b-form-checkbox v-model="props.option.selected" style="display: inline-block" />
+            {{ props.option.name }}
+            </li>
+            <form-drilldown-option
+                v-show="showChildren"
+                v-for="option in props.option.options"
+                :key="option.name"
+                :option="option"
+                :depth="depth + 1">
+            </form-drilldown-option>
     </div>
 </template>

From 3aff98e42e6faaeed8f8e2b2ab9382ffdccdab8b Mon Sep 17 00:00:00 2001
From: Assunta DeSanto <assuntad23@gmail.com>
Date: Thu, 9 Mar 2023 16:22:36 -0500
Subject: [PATCH 05/51] adding functionality for selecting child options when
 parent is checked

---
 .../Form/Elements/FormDrilldownOption.vue         | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Form/Elements/FormDrilldownOption.vue b/client/src/components/Form/Elements/FormDrilldownOption.vue
index 692904cb43b..40fc8160efe 100644
--- a/client/src/components/Form/Elements/FormDrilldownOption.vue
+++ b/client/src/components/Form/Elements/FormDrilldownOption.vue
@@ -26,6 +26,19 @@ const hasOptions = computed(() => {
 const indent = computed(() => {
     return {transform: `translate(${props.depth * 25}px)`, "list-style-type": "none"}
 });
+
+const selected = computed({
+    get: () => {
+        return props.option.selected;
+    },
+    set: (newVal) => {
+        props.option.selected = newVal;
+        if (hasOptions){
+            props.option.options.forEach(element => element.selected = newVal);
+        }
+    }
+});
+
 </script>
 <template>
     <div class="form-drilldown-option">
@@ -35,7 +48,7 @@ const indent = computed(() => {
                 @click="toggleChildren"
                 class="ui-drilldown-button"
                 :class="{ 'fa fa-plus-square': !showChildren, 'fa fa-minus-square': showChildren }" />
-            <b-form-checkbox v-model="props.option.selected" style="display: inline-block" />
+            <b-form-checkbox v-model="selected" style="display: inline-block" />
             {{ props.option.name }}
             </li>
             <form-drilldown-option

From b8cfed4088c4f2c117bf3166d772e3384d7c82ac Mon Sep 17 00:00:00 2001
From: Assunta DeSanto <assuntad23@gmail.com>
Date: Tue, 14 Mar 2023 22:32:38 -0400
Subject: [PATCH 06/51] updates to FormDrilldown

---
 .../Form/Elements/FormDrilldown.vue           | 50 +++++++++++++++++--
 1 file changed, 47 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Form/Elements/FormDrilldown.vue b/client/src/components/Form/Elements/FormDrilldown.vue
index ce59545ebbf..3e2bb8e0423 100644
--- a/client/src/components/Form/Elements/FormDrilldown.vue
+++ b/client/src/components/Form/Elements/FormDrilldown.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from "vue";
-import FormDrilldownOption from "./FormDrilldownOption.vue"
+import FormDrilldownOption from "./FormDrilldownOption.vue";
 
 export interface Option {
     name: string;
@@ -14,6 +14,9 @@ export interface FormDrilldownProps {
     id: string;
     options: Array<Option>;
 }
+// export interface SelectedArray {
+//     selected: string[];
+// }
 
 const props = withDefaults(defineProps<FormDrilldownProps>(), {
     value: "",
@@ -22,15 +25,56 @@ const props = withDefaults(defineProps<FormDrilldownProps>(), {
 const hasOptions = computed(() => {
     return props.options.length > 0;
 });
+
+// let selected: SelectedArray = {
+//     selected: [],
+// };
+
+// function addToSelected(n: string, v: boolean) {
+//     if (v == true) {
+//         selected.selected.push(n);
+//     } else if (v == false) {
+//         const index = selected.selected.indexOf(n);
+
+//         const x = selected.selected.splice(index, 1);
+//     }
+//     console.log(":selectedArray:", selected.selected)
+// }
+
 //currentValue will be computed array of selected values
 //need to implement selectAll
 
+const emit = defineEmits<{
+    (e: "input", value: string[]): void;
+}>();
+
+const currentValue = computed({
+    get: () => {
+        
+    },
+    set: (newValue) => {
+        
+
+        // if (newValue.length === 0) {
+        //     selectAll.value = false;
+        //     indeterminate.value = false;
+        // } else if (newValue.length === props.options.length) {
+        //     selectAll.value = true;
+        //     indeterminate.value = false;
+        // } else {
+        //     indeterminate.value = true;
+        // }
+    },
+});
 </script>
 
 <template>
     <div v-if="hasOptions">
-        <ul v-for="option in options" :key="option.name" class="options" >
-            <form-drilldown-option :option="option" :depth="0"></form-drilldown-option>
+        <ul v-for="option in options" :key="option.name" class="options">
+            <form-drilldown-option
+                :option="option"
+                :depth="0"
+                @selected="currentValue.set"></form-drilldown-option>
         </ul>
     </div>
 </template>

From b1b4ae1c73387f11563417cd348a044f42075f5d Mon Sep 17 00:00:00 2001
From: Assunta DeSanto <assuntad23@gmail.com>
Date: Tue, 14 Mar 2023 22:34:17 -0400
Subject: [PATCH 07/51] updates to FormDrilldown

---
 .../Form/Elements/FormDrilldown.vue           | 69 +++++++++----------
 .../Form/Elements/FormDrilldownOption.vue     | 34 +++++----
 2 files changed, 55 insertions(+), 48 deletions(-)

diff --git a/client/src/components/Form/Elements/FormDrilldown.vue b/client/src/components/Form/Elements/FormDrilldown.vue
index 3e2bb8e0423..c7b0cce9401 100644
--- a/client/src/components/Form/Elements/FormDrilldown.vue
+++ b/client/src/components/Form/Elements/FormDrilldown.vue
@@ -14,10 +14,9 @@ export interface FormDrilldownProps {
     id: string;
     options: Array<Option>;
 }
-// export interface SelectedArray {
-//     selected: string[];
-// }
-
+export interface SelectedArray {
+    selected: string[];
+}
 const props = withDefaults(defineProps<FormDrilldownProps>(), {
     value: "",
 });
@@ -26,46 +25,46 @@ const hasOptions = computed(() => {
     return props.options.length > 0;
 });
 
-// let selected: SelectedArray = {
-//     selected: [],
-// };
+let selected: SelectedArray = {
+    selected: [],
+};
 
-// function addToSelected(n: string, v: boolean) {
-//     if (v == true) {
-//         selected.selected.push(n);
-//     } else if (v == false) {
-//         const index = selected.selected.indexOf(n);
+function addToSelected(n: string, v: boolean) {
+    if (v == true) {
+        selected.selected.push(n);
+    } else if (v == false) {
+        const index = selected.selected.indexOf(n);
 
-//         const x = selected.selected.splice(index, 1);
-//     }
-//     console.log(":selectedArray:", selected.selected)
-// }
+        const x = selected.selected.splice(index, 1);
+    }
+    console.log(":selectedArray:", selected.selected)
+}
 
 //currentValue will be computed array of selected values
 //need to implement selectAll
 
-const emit = defineEmits<{
-    (e: "input", value: string[]): void;
-}>();
+// const emit = defineEmits<{
+//     (e: "input", value: string[]): void;
+// }>();
 
-const currentValue = computed({
-    get: () => {
+// const currentValue = computed({
+//     get: () => {
         
-    },
-    set: (newValue) => {
+//     },
+//     set: (newValue) => {
         
 
-        // if (newValue.length === 0) {
-        //     selectAll.value = false;
-        //     indeterminate.value = false;
-        // } else if (newValue.length === props.options.length) {
-        //     selectAll.value = true;
-        //     indeterminate.value = false;
-        // } else {
-        //     indeterminate.value = true;
-        // }
-    },
-});
+//         // if (newValue.length === 0) {
+//         //     selectAll.value = false;
+//         //     indeterminate.value = false;
+//         // } else if (newValue.length === props.options.length) {
+//         //     selectAll.value = true;
+//         //     indeterminate.value = false;
+//         // } else {
+//         //     indeterminate.value = true;
+//         // }
+//     },
+// });
 </script>
 
 <template>
@@ -74,7 +73,7 @@ const currentValue = computed({
             <form-drilldown-option
                 :option="option"
                 :depth="0"
-                @selected="currentValue.set"></form-drilldown-option>
+                @selected="addToSelected"></form-drilldown-option>
         </ul>
     </div>
 </template>
diff --git a/client/src/components/Form/Elements/FormDrilldownOption.vue b/client/src/components/Form/Elements/FormDrilldownOption.vue
index 40fc8160efe..6cc67117c0f 100644
--- a/client/src/components/Form/Elements/FormDrilldownOption.vue
+++ b/client/src/components/Form/Elements/FormDrilldownOption.vue
@@ -24,21 +24,29 @@ const hasOptions = computed(() => {
     return props.option.options.length > 0;
 });
 const indent = computed(() => {
-    return {transform: `translate(${props.depth * 25}px)`, "list-style-type": "none"}
+    return { transform: `translate(${props.depth * 25}px)`, "list-style-type": "none" };
 });
 
+const emit = defineEmits<{
+    (e: "selected", name: string, selected: boolean): void;
+}>();
+
 const selected = computed({
     get: () => {
         return props.option.selected;
     },
     set: (newVal) => {
         props.option.selected = newVal;
-        if (hasOptions){
-            props.option.options.forEach(element => element.selected = newVal);
+        emit("selected", props.option.name, props.option.selected);
+        if (hasOptions) {
+            props.option.options.forEach((element) => {
+                element.selected = newVal;
+                console.log("name: ", element.name, ", value: ", element.selected);
+                // emit("selected", element.name, element.selected);
+            });
         }
-    }
+    },
 });
-
 </script>
 <template>
     <div class="form-drilldown-option">
@@ -50,13 +58,13 @@ const selected = computed({
                 :class="{ 'fa fa-plus-square': !showChildren, 'fa fa-minus-square': showChildren }" />
             <b-form-checkbox v-model="selected" style="display: inline-block" />
             {{ props.option.name }}
-            </li>
-            <form-drilldown-option
-                v-show="showChildren"
-                v-for="option in props.option.options"
-                :key="option.name"
-                :option="option"
-                :depth="depth + 1">
-            </form-drilldown-option>
+        </li>
+        <form-drilldown-option
+            v-show="showChildren"
+            v-for="option in props.option.options"
+            :key="option.name"
+            :option="option"
+            :depth="depth + 1">
+        </form-drilldown-option>
     </div>
 </template>

From 90dc2cf04502272f0fd17ebf1fb02e87b243784c Mon Sep 17 00:00:00 2001
From: Assunta DeSanto <assuntad23@gmail.com>
Date: Wed, 15 Mar 2023 09:43:15 -0400
Subject: [PATCH 08/51] using prop function to assist with emitting add/remove
 for recursive options

---
 .../Form/Elements/FormDrilldown.vue           | 39 +++++++++----------
 .../Form/Elements/FormDrilldownOption.vue     | 14 +++----
 2 files changed, 24 insertions(+), 29 deletions(-)

diff --git a/client/src/components/Form/Elements/FormDrilldown.vue b/client/src/components/Form/Elements/FormDrilldown.vue
index c7b0cce9401..5000fa9c9ba 100644
--- a/client/src/components/Form/Elements/FormDrilldown.vue
+++ b/client/src/components/Form/Elements/FormDrilldown.vue
@@ -37,34 +37,33 @@ function addToSelected(n: string, v: boolean) {
 
         const x = selected.selected.splice(index, 1);
     }
-    console.log(":selectedArray:", selected.selected)
 }
 
 //currentValue will be computed array of selected values
 //need to implement selectAll
 
-// const emit = defineEmits<{
-//     (e: "input", value: string[]): void;
-// }>();
+const emit = defineEmits<{
+    (e: "input", value: string[]): void;
+}>();
 
-// const currentValue = computed({
-//     get: () => {
+const currentValue = computed({
+    get: () => {
         
-//     },
-//     set: (newValue) => {
+    },
+    set: (newValue) => {
         
 
-//         // if (newValue.length === 0) {
-//         //     selectAll.value = false;
-//         //     indeterminate.value = false;
-//         // } else if (newValue.length === props.options.length) {
-//         //     selectAll.value = true;
-//         //     indeterminate.value = false;
-//         // } else {
-//         //     indeterminate.value = true;
-//         // }
-//     },
-// });
+        // if (newValue.length === 0) {
+        //     selectAll.value = false;
+        //     indeterminate.value = false;
+        // } else if (newValue.length === props.options.length) {
+        //     selectAll.value = true;
+        //     indeterminate.value = false;
+        // } else {
+        //     indeterminate.value = true;
+        // }
+    },
+});
 </script>
 
 <template>
@@ -73,7 +72,7 @@ function addToSelected(n: string, v: boolean) {
             <form-drilldown-option
                 :option="option"
                 :depth="0"
-                @selected="addToSelected"></form-drilldown-option>
+                :handle-click="addToSelected"></form-drilldown-option>
         </ul>
     </div>
 </template>
diff --git a/client/src/components/Form/Elements/FormDrilldownOption.vue b/client/src/components/Form/Elements/FormDrilldownOption.vue
index 6cc67117c0f..d5ef1a4e9b5 100644
--- a/client/src/components/Form/Elements/FormDrilldownOption.vue
+++ b/client/src/components/Form/Elements/FormDrilldownOption.vue
@@ -11,6 +11,8 @@ export interface Option {
 export interface FormDrilldownProps {
     option: Option;
     depth: number;
+    handleClick: Function;
+
 }
 function toggleChildren() {
     showChildren.value = !showChildren.value;
@@ -37,14 +39,7 @@ const selected = computed({
     },
     set: (newVal) => {
         props.option.selected = newVal;
-        emit("selected", props.option.name, props.option.selected);
-        if (hasOptions) {
-            props.option.options.forEach((element) => {
-                element.selected = newVal;
-                console.log("name: ", element.name, ", value: ", element.selected);
-                // emit("selected", element.name, element.selected);
-            });
-        }
+        props.handleClick(props.option.name, props.option.selected);
     },
 });
 </script>
@@ -64,7 +59,8 @@ const selected = computed({
             v-for="option in props.option.options"
             :key="option.name"
             :option="option"
-            :depth="depth + 1">
+            :depth="depth + 1"
+            :handle-click="handleClick">
         </form-drilldown-option>
     </div>
 </template>

From 2da22cb04f1200395c09534876c65622e1ad7f66 Mon Sep 17 00:00:00 2001
From: Assunta DeSanto <assuntad23@gmail.com>
Date: Wed, 15 Mar 2023 11:16:15 -0400
Subject: [PATCH 09/51] converting selected array to currentValue

---
 .../Form/Elements/FormDrilldown.vue           | 48 +++++++------------
 1 file changed, 16 insertions(+), 32 deletions(-)

diff --git a/client/src/components/Form/Elements/FormDrilldown.vue b/client/src/components/Form/Elements/FormDrilldown.vue
index 5000fa9c9ba..e477398b03b 100644
--- a/client/src/components/Form/Elements/FormDrilldown.vue
+++ b/client/src/components/Form/Elements/FormDrilldown.vue
@@ -14,9 +14,7 @@ export interface FormDrilldownProps {
     id: string;
     options: Array<Option>;
 }
-export interface SelectedArray {
-    selected: string[];
-}
+
 const props = withDefaults(defineProps<FormDrilldownProps>(), {
     value: "",
 });
@@ -25,18 +23,17 @@ const hasOptions = computed(() => {
     return props.options.length > 0;
 });
 
-let selected: SelectedArray = {
-    selected: [],
-};
+let currentValue: string[] = [];
 
 function addToSelected(n: string, v: boolean) {
     if (v == true) {
-        selected.selected.push(n);
+        currentValue.push(n);
     } else if (v == false) {
-        const index = selected.selected.indexOf(n);
-
-        const x = selected.selected.splice(index, 1);
+        const index = currentValue.indexOf(n);
+        currentValue.splice(index, 1);
     }
+    emit("input", currentValue);
+    console.log(":CV:", currentValue);
 }
 
 //currentValue will be computed array of selected values
@@ -46,33 +43,20 @@ const emit = defineEmits<{
     (e: "input", value: string[]): void;
 }>();
 
-const currentValue = computed({
-    get: () => {
-        
-    },
-    set: (newValue) => {
-        
-
-        // if (newValue.length === 0) {
-        //     selectAll.value = false;
-        //     indeterminate.value = false;
-        // } else if (newValue.length === props.options.length) {
-        //     selectAll.value = true;
-        //     indeterminate.value = false;
-        // } else {
-        //     indeterminate.value = true;
-        // }
-    },
-});
+// const currentValue =  computed({
+//     get: () => {
+//         return selected;
+//     },
+//     set: (selected) => {
+//         emit("input", selected);
+//     },
+// });
 </script>
 
 <template>
     <div v-if="hasOptions">
         <ul v-for="option in options" :key="option.name" class="options">
-            <form-drilldown-option
-                :option="option"
-                :depth="0"
-                :handle-click="addToSelected"></form-drilldown-option>
+            <form-drilldown-option :option="option" :depth="0" :handle-click="addToSelected"></form-drilldown-option>
         </ul>
     </div>
 </template>

From bac04c1187601a35d570dc72b71a63631cb6694b Mon Sep 17 00:00:00 2001
From: Assunta DeSanto <assuntad23@gmail.com>
Date: Wed, 15 Mar 2023 17:39:33 -0400
Subject: [PATCH 10/51] adding comments to get some focused help

---
 .../src/components/Form/Elements/FormDrilldown.vue   | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/client/src/components/Form/Elements/FormDrilldown.vue b/client/src/components/Form/Elements/FormDrilldown.vue
index e477398b03b..9f4cca238b8 100644
--- a/client/src/components/Form/Elements/FormDrilldown.vue
+++ b/client/src/components/Form/Elements/FormDrilldown.vue
@@ -23,7 +23,7 @@ const hasOptions = computed(() => {
     return props.options.length > 0;
 });
 
-let currentValue: string[] = [];
+let currentValue: string[] = []; //was called selected, when attempting to use computed currentValue
 
 function addToSelected(n: string, v: boolean) {
     if (v == true) {
@@ -32,17 +32,21 @@ function addToSelected(n: string, v: boolean) {
         const index = currentValue.indexOf(n);
         currentValue.splice(index, 1);
     }
-    emit("input", currentValue);
+    emit("input", currentValue); //HELP problem with this is that once a checkbox is checked, if you uncheck it no longer requires something is checked, and you're able to send an empty array
     console.log(":CV:", currentValue);
 }
 
-//currentValue will be computed array of selected values
-//need to implement selectAll
+//TODO implement selectAll
 
 const emit = defineEmits<{
     (e: "input", value: string[]): void;
 }>();
 
+// HELP:
+// can't use this computed as is, because, I can't push to computed (like I can with an array)
+// and when I simply set the currentValue to what's in the array I curated above
+// it dowesn't update and emit the changing values, and just remains an empty array
+
 // const currentValue =  computed({
 //     get: () => {
 //         return selected;

From 20d927dd19abd4498721af85020b3f45f7bf65ed Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 16 Mar 2023 09:24:16 +0300
Subject: [PATCH 11/51] Add computed current value

---
 .../Form/Elements/FormDrilldown.vue           | 27 +++++++++----------
 1 file changed, 12 insertions(+), 15 deletions(-)

diff --git a/client/src/components/Form/Elements/FormDrilldown.vue b/client/src/components/Form/Elements/FormDrilldown.vue
index 9f4cca238b8..4df51f474af 100644
--- a/client/src/components/Form/Elements/FormDrilldown.vue
+++ b/client/src/components/Form/Elements/FormDrilldown.vue
@@ -23,7 +23,18 @@ const hasOptions = computed(() => {
     return props.options.length > 0;
 });
 
-let currentValue: string[] = []; //was called selected, when attempting to use computed currentValue
+const currentValue = computed({
+    get: () : string[] => {
+        if (Array.isArray(props.value)) {
+            return props.value;
+        } else {
+            return [props.value];
+        }
+    },
+    set: (newValue: string[]) : void => {
+        emit("input", newValue);
+    },
+});
 
 function addToSelected(n: string, v: boolean) {
     if (v == true) {
@@ -41,20 +52,6 @@ function addToSelected(n: string, v: boolean) {
 const emit = defineEmits<{
     (e: "input", value: string[]): void;
 }>();
-
-// HELP:
-// can't use this computed as is, because, I can't push to computed (like I can with an array)
-// and when I simply set the currentValue to what's in the array I curated above
-// it dowesn't update and emit the changing values, and just remains an empty array
-
-// const currentValue =  computed({
-//     get: () => {
-//         return selected;
-//     },
-//     set: (selected) => {
-//         emit("input", selected);
-//     },
-// });
 </script>
 
 <template>

From 7e4d276221ad18debe1c23f8684ed9eebe0d8180 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 16 Mar 2023 09:25:20 +0300
Subject: [PATCH 12/51] Fix default, remove unused type declaration

---
 .../Form/Elements/FormDrilldown.vue           | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/client/src/components/Form/Elements/FormDrilldown.vue b/client/src/components/Form/Elements/FormDrilldown.vue
index 4df51f474af..abc3a71dff9 100644
--- a/client/src/components/Form/Elements/FormDrilldown.vue
+++ b/client/src/components/Form/Elements/FormDrilldown.vue
@@ -6,19 +6,22 @@ export interface Option {
     name: string;
     value: string;
     options: Array<Option>;
-    selected: boolean;
 }
 
 export interface FormDrilldownProps {
-    value?: string | string[];
     id: string;
+    value?: string | string[];
     options: Array<Option>;
 }
 
 const props = withDefaults(defineProps<FormDrilldownProps>(), {
-    value: "",
+    value: null,
 });
 
+const emit = defineEmits<{
+    (e: "input", value: string[]): void;
+}>();
+
 const hasOptions = computed(() => {
     return props.options.length > 0;
 });
@@ -37,27 +40,23 @@ const currentValue = computed({
 });
 
 function addToSelected(n: string, v: boolean) {
-    if (v == true) {
+    /*if (v == true) {
         currentValue.push(n);
     } else if (v == false) {
         const index = currentValue.indexOf(n);
         currentValue.splice(index, 1);
     }
     emit("input", currentValue); //HELP problem with this is that once a checkbox is checked, if you uncheck it no longer requires something is checked, and you're able to send an empty array
-    console.log(":CV:", currentValue);
+    console.log(":CV:", currentValue);*/
 }
 
 //TODO implement selectAll
-
-const emit = defineEmits<{
-    (e: "input", value: string[]): void;
-}>();
 </script>
 
 <template>
     <div v-if="hasOptions">
         <ul v-for="option in options" :key="option.name" class="options">
-            <form-drilldown-option :option="option" :depth="0" :handle-click="addToSelected"></form-drilldown-option>
+            <form-drilldown-option :option="option" :depth="0" :handle-click="addToSelected"/>
         </ul>
     </div>
 </template>

From 49fc91f4b165eb2ff9b5a33134f70d2bc2bd5d26 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 16 Mar 2023 15:32:07 +0300
Subject: [PATCH 13/51] Remove indent mechanism, move loop to option child
 class, remove template for now

---
 .../Form/Elements/FormDrilldown.vue           |  4 +-
 .../Form/Elements/FormDrilldownOption.vue     | 54 ++++---------------
 2 files changed, 12 insertions(+), 46 deletions(-)

diff --git a/client/src/components/Form/Elements/FormDrilldown.vue b/client/src/components/Form/Elements/FormDrilldown.vue
index abc3a71dff9..ba1b13a927b 100644
--- a/client/src/components/Form/Elements/FormDrilldown.vue
+++ b/client/src/components/Form/Elements/FormDrilldown.vue
@@ -55,8 +55,6 @@ function addToSelected(n: string, v: boolean) {
 
 <template>
     <div v-if="hasOptions">
-        <ul v-for="option in options" :key="option.name" class="options">
-            <form-drilldown-option :option="option" :depth="0" :handle-click="addToSelected"/>
-        </ul>
+        <form-drilldown-option :options="options" :handle-click="addToSelected"/>
     </div>
 </template>
diff --git a/client/src/components/Form/Elements/FormDrilldownOption.vue b/client/src/components/Form/Elements/FormDrilldownOption.vue
index d5ef1a4e9b5..5cfba3a0df6 100644
--- a/client/src/components/Form/Elements/FormDrilldownOption.vue
+++ b/client/src/components/Form/Elements/FormDrilldownOption.vue
@@ -5,62 +5,30 @@ export interface Option {
     name: string;
     value: string;
     options: Array<Option>;
-    selected: boolean;
 }
 
 export interface FormDrilldownProps {
-    option: Option;
-    depth: number;
+    options: Array<Option>;
     handleClick: Function;
-
 }
-function toggleChildren() {
-    showChildren.value = !showChildren.value;
-}
-
-const showChildren = ref(false);
 
 const props = defineProps<FormDrilldownProps>();
 
+const showChildren = ref(false);
+
 const hasOptions = computed(() => {
-    return props.option.options.length > 0;
-});
-const indent = computed(() => {
-    return { transform: `translate(${props.depth * 25}px)`, "list-style-type": "none" };
+    return props.options.length > 0;
 });
 
-const emit = defineEmits<{
-    (e: "selected", name: string, selected: boolean): void;
-}>();
-
-const selected = computed({
-    get: () => {
-        return props.option.selected;
-    },
-    set: (newVal) => {
-        props.option.selected = newVal;
-        props.handleClick(props.option.name, props.option.selected);
-    },
-});
+function toggleChildren() {
+    showChildren.value = !showChildren.value;
+}
 </script>
+
 <template>
     <div class="form-drilldown-option">
-        <li :class="{ 'ui-drilldown-subgroup': depth > 0 }" :style="indent">
-            <span
-                v-if="hasOptions"
-                @click="toggleChildren"
-                class="ui-drilldown-button"
-                :class="{ 'fa fa-plus-square': !showChildren, 'fa fa-minus-square': showChildren }" />
-            <b-form-checkbox v-model="selected" style="display: inline-block" />
-            {{ props.option.name }}
-        </li>
-        <form-drilldown-option
-            v-show="showChildren"
-            v-for="option in props.option.options"
-            :key="option.name"
-            :option="option"
-            :depth="depth + 1"
-            :handle-click="handleClick">
-        </form-drilldown-option>
+        <ul v-for="option in options" :key="option.name" class="options">
+            {{ option.name }}
+        </ul>
     </div>
 </template>

From 77a2b5adfb85c089cefb29941b0cb64c4478d647 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 16 Mar 2023 15:44:24 +0300
Subject: [PATCH 14/51] Rebuild preliminary modified template

---
 .../Form/Elements/FormDrilldown.vue           |  6 +++---
 .../Form/Elements/FormDrilldownOption.vue     | 20 ++++++++++++++++---
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/client/src/components/Form/Elements/FormDrilldown.vue b/client/src/components/Form/Elements/FormDrilldown.vue
index ba1b13a927b..ead180413aa 100644
--- a/client/src/components/Form/Elements/FormDrilldown.vue
+++ b/client/src/components/Form/Elements/FormDrilldown.vue
@@ -27,14 +27,14 @@ const hasOptions = computed(() => {
 });
 
 const currentValue = computed({
-    get: () : string[] => {
+    get: (): string[] => {
         if (Array.isArray(props.value)) {
             return props.value;
         } else {
             return [props.value];
         }
     },
-    set: (newValue: string[]) : void => {
+    set: (newValue: string[]): void => {
         emit("input", newValue);
     },
 });
@@ -55,6 +55,6 @@ function addToSelected(n: string, v: boolean) {
 
 <template>
     <div v-if="hasOptions">
-        <form-drilldown-option :options="options" :handle-click="addToSelected"/>
+        <form-drilldown-option :options="options" :handle-click="addToSelected" />
     </div>
 </template>
diff --git a/client/src/components/Form/Elements/FormDrilldownOption.vue b/client/src/components/Form/Elements/FormDrilldownOption.vue
index 5cfba3a0df6..c238e62338f 100644
--- a/client/src/components/Form/Elements/FormDrilldownOption.vue
+++ b/client/src/components/Form/Elements/FormDrilldownOption.vue
@@ -26,9 +26,23 @@ function toggleChildren() {
 </script>
 
 <template>
-    <div class="form-drilldown-option">
-        <ul v-for="option in options" :key="option.name" class="options">
-            {{ option.name }}
+    <div>
+        <ul v-for="option in options" :key="option.name" class="ui-drilldown">
+            <li>
+                <span
+                    v-if="hasOptions"
+                    @click="toggleChildren"
+                    :class="{ 'fa fa-plus-square': !showChildren, 'fa fa-minus-square': showChildren }" />
+                <b-form-checkbox class="d-inline" />
+                {{ option.name }}
+                <form-drilldown-option v-show="showChildren" :options="option.options" :handle-click="handleClick" />
+            </li>
         </ul>
     </div>
 </template>
+
+<style>
+    .ui-drilldown {
+        list-style-type: none;
+    }
+</style>
\ No newline at end of file

From acc46a25eee9a166aed0b5475a1883675a73f2ea Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 16 Mar 2023 17:01:56 +0300
Subject: [PATCH 15/51] Move drilldown component files to separate directory,
 add additional component

---
 .../{ => FormDrilldown}/FormDrilldown.vue     |  4 +-
 .../FormDrilldown/FormDrilldownList.vue       | 31 ++++++++++++
 .../FormDrilldown/FormDrilldownOption.vue     | 39 +++++++++++++++
 .../Form/Elements/FormDrilldownOption.vue     | 48 -------------------
 client/src/components/Form/FormElement.vue    |  2 +-
 5 files changed, 73 insertions(+), 51 deletions(-)
 rename client/src/components/Form/Elements/{ => FormDrilldown}/FormDrilldown.vue (90%)
 create mode 100644 client/src/components/Form/Elements/FormDrilldown/FormDrilldownList.vue
 create mode 100644 client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue
 delete mode 100644 client/src/components/Form/Elements/FormDrilldownOption.vue

diff --git a/client/src/components/Form/Elements/FormDrilldown.vue b/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue
similarity index 90%
rename from client/src/components/Form/Elements/FormDrilldown.vue
rename to client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue
index ead180413aa..9fce3f73cc7 100644
--- a/client/src/components/Form/Elements/FormDrilldown.vue
+++ b/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from "vue";
-import FormDrilldownOption from "./FormDrilldownOption.vue";
+import FormDrilldownList from "./FormDrilldownList.vue";
 
 export interface Option {
     name: string;
@@ -55,6 +55,6 @@ function addToSelected(n: string, v: boolean) {
 
 <template>
     <div v-if="hasOptions">
-        <form-drilldown-option :options="options" :handle-click="addToSelected" />
+        <form-drilldown-list :options="options" :handle-click="addToSelected" />
     </div>
 </template>
diff --git a/client/src/components/Form/Elements/FormDrilldown/FormDrilldownList.vue b/client/src/components/Form/Elements/FormDrilldown/FormDrilldownList.vue
new file mode 100644
index 00000000000..6be4ef6371d
--- /dev/null
+++ b/client/src/components/Form/Elements/FormDrilldown/FormDrilldownList.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import FormDrilldownOption from "./FormDrilldownOption.vue";
+
+export interface Option {
+    name: string;
+    value: string;
+    options: Array<Option>;
+}
+
+export interface Props {
+    options: Array<Option>;
+    handleClick: Function;
+}
+
+const props = defineProps<Props>();
+</script>
+
+<template>
+    <div>
+        <ul v-for="option in options" :key="option.name" class="ui-drilldown">
+            <form-drilldown-option :option="option" :handle-click="handleClick" />
+        </ul>
+    </div>
+</template>
+
+<style>
+.ui-drilldown {
+    list-style-type: none;
+}
+</style>
diff --git a/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue b/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue
new file mode 100644
index 00000000000..5718ccfa58b
--- /dev/null
+++ b/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import FormDrilldownList from "./FormDrilldownList.vue";
+
+export interface Option {
+    name: string;
+    value: string;
+    options: Array<Option>;
+}
+
+export interface Props {
+    option: Option;
+    handleClick: Function;
+}
+
+const props = defineProps<Props>();
+
+const showChildren = ref(false);
+
+const hasOptions = computed(() => {
+    return props.option.options.length > 0;
+});
+
+function toggleChildren() {
+    showChildren.value = !showChildren.value;
+}
+</script>
+
+<template>
+    <li>
+        <span v-if="hasOptions" @click="toggleChildren">
+            <span v-if="showChildren" class="fa fa-plus-square" />
+            <span v-else class="fa fa-minus-square" />
+        </span>
+        <b-form-checkbox class="d-inline" />
+        {{ option.name }}
+        <form-drilldown-list v-show="showChildren" :options="option.options" :handle-click="handleClick" />
+    </li>
+</template>
diff --git a/client/src/components/Form/Elements/FormDrilldownOption.vue b/client/src/components/Form/Elements/FormDrilldownOption.vue
deleted file mode 100644
index c238e62338f..00000000000
--- a/client/src/components/Form/Elements/FormDrilldownOption.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-<script setup lang="ts">
-import { computed, ref } from "vue";
-
-export interface Option {
-    name: string;
-    value: string;
-    options: Array<Option>;
-}
-
-export interface FormDrilldownProps {
-    options: Array<Option>;
-    handleClick: Function;
-}
-
-const props = defineProps<FormDrilldownProps>();
-
-const showChildren = ref(false);
-
-const hasOptions = computed(() => {
-    return props.options.length > 0;
-});
-
-function toggleChildren() {
-    showChildren.value = !showChildren.value;
-}
-</script>
-
-<template>
-    <div>
-        <ul v-for="option in options" :key="option.name" class="ui-drilldown">
-            <li>
-                <span
-                    v-if="hasOptions"
-                    @click="toggleChildren"
-                    :class="{ 'fa fa-plus-square': !showChildren, 'fa fa-minus-square': showChildren }" />
-                <b-form-checkbox class="d-inline" />
-                {{ option.name }}
-                <form-drilldown-option v-show="showChildren" :options="option.options" :handle-click="handleClick" />
-            </li>
-        </ul>
-    </div>
-</template>
-
-<style>
-    .ui-drilldown {
-        list-style-type: none;
-    }
-</style>
\ No newline at end of file
diff --git a/client/src/components/Form/FormElement.vue b/client/src/components/Form/FormElement.vue
index de7ab458f5a..ee243b9c55b 100644
--- a/client/src/components/Form/FormElement.vue
+++ b/client/src/components/Form/FormElement.vue
@@ -11,7 +11,7 @@ import FormText from "./Elements/FormText.vue";
 import FormOptionalText from "./Elements/FormOptionalText.vue";
 import FormRulesEdit from "./Elements/FormRulesEdit.vue";
 import FormUpload from "./Elements/FormUpload.vue";
-import FormDrilldown from "./Elements/FormDrilldown.vue";
+import FormDrilldown from "./Elements/FormDrilldown/FormDrilldown.vue";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { ref, computed, useAttrs } from "vue";
 import { library } from "@fortawesome/fontawesome-svg-core";

From aba62efa64032833fb70cab416eeaab9fbc23c05 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 16 Mar 2023 17:10:22 +0300
Subject: [PATCH 16/51] Place shared type into separate file

---
 .../Form/Elements/FormDrilldown/FormDrilldown.vue          | 7 +------
 .../Form/Elements/FormDrilldown/FormDrilldownList.vue      | 7 +------
 .../Form/Elements/FormDrilldown/FormDrilldownOption.vue    | 7 +------
 client/src/components/Form/Elements/FormDrilldown/types.ts | 5 +++++
 4 files changed, 8 insertions(+), 18 deletions(-)
 create mode 100644 client/src/components/Form/Elements/FormDrilldown/types.ts

diff --git a/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue b/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue
index 9fce3f73cc7..5453be0a20b 100644
--- a/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue
+++ b/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue
@@ -1,12 +1,7 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import FormDrilldownList from "./FormDrilldownList.vue";
-
-export interface Option {
-    name: string;
-    value: string;
-    options: Array<Option>;
-}
+import type { Option } from "./types.js";
 
 export interface FormDrilldownProps {
     id: string;
diff --git a/client/src/components/Form/Elements/FormDrilldown/FormDrilldownList.vue b/client/src/components/Form/Elements/FormDrilldown/FormDrilldownList.vue
index 6be4ef6371d..e0d1c0d2084 100644
--- a/client/src/components/Form/Elements/FormDrilldown/FormDrilldownList.vue
+++ b/client/src/components/Form/Elements/FormDrilldown/FormDrilldownList.vue
@@ -1,12 +1,7 @@
 <script setup lang="ts">
 import { computed, ref } from "vue";
 import FormDrilldownOption from "./FormDrilldownOption.vue";
-
-export interface Option {
-    name: string;
-    value: string;
-    options: Array<Option>;
-}
+import type { Option } from "./types.js";
 
 export interface Props {
     options: Array<Option>;
diff --git a/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue b/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue
index 5718ccfa58b..282963ed2e4 100644
--- a/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue
+++ b/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue
@@ -1,12 +1,7 @@
 <script setup lang="ts">
 import { computed, ref } from "vue";
 import FormDrilldownList from "./FormDrilldownList.vue";
-
-export interface Option {
-    name: string;
-    value: string;
-    options: Array<Option>;
-}
+import type { Option } from "./types.js";
 
 export interface Props {
     option: Option;
diff --git a/client/src/components/Form/Elements/FormDrilldown/types.ts b/client/src/components/Form/Elements/FormDrilldown/types.ts
new file mode 100644
index 00000000000..0bc86499698
--- /dev/null
+++ b/client/src/components/Form/Elements/FormDrilldown/types.ts
@@ -0,0 +1,5 @@
+export interface Option {
+    name: string;
+    value: string;
+    options: Array<Option>;
+}

From 247fafe7df38e5adad12022c24d3d336c5d80f0a Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 16 Mar 2023 17:24:36 +0300
Subject: [PATCH 17/51] Parse current value for drilldown element

---
 .../Form/Elements/FormDrilldown/FormDrilldown.vue  |  2 +-
 .../Elements/FormDrilldown/FormDrilldownList.vue   |  3 ++-
 .../Elements/FormDrilldown/FormDrilldownOption.vue | 14 ++++++++++++--
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue b/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue
index 5453be0a20b..b44d3a71292 100644
--- a/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue
+++ b/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue
@@ -50,6 +50,6 @@ function addToSelected(n: string, v: boolean) {
 
 <template>
     <div v-if="hasOptions">
-        <form-drilldown-list :options="options" :handle-click="addToSelected" />
+        <form-drilldown-list :current-value="currentValue" :options="options" :handle-click="addToSelected" />
     </div>
 </template>
diff --git a/client/src/components/Form/Elements/FormDrilldown/FormDrilldownList.vue b/client/src/components/Form/Elements/FormDrilldown/FormDrilldownList.vue
index e0d1c0d2084..419d790a9a5 100644
--- a/client/src/components/Form/Elements/FormDrilldown/FormDrilldownList.vue
+++ b/client/src/components/Form/Elements/FormDrilldown/FormDrilldownList.vue
@@ -4,6 +4,7 @@ import FormDrilldownOption from "./FormDrilldownOption.vue";
 import type { Option } from "./types.js";
 
 export interface Props {
+    currentValue: string[];
     options: Array<Option>;
     handleClick: Function;
 }
@@ -14,7 +15,7 @@ const props = defineProps<Props>();
 <template>
     <div>
         <ul v-for="option in options" :key="option.name" class="ui-drilldown">
-            <form-drilldown-option :option="option" :handle-click="handleClick" />
+            <form-drilldown-option :current-value="currentValue" :option="option" :handle-click="handleClick" />
         </ul>
     </div>
 </template>
diff --git a/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue b/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue
index 282963ed2e4..94a71144b99 100644
--- a/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue
+++ b/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue
@@ -4,6 +4,7 @@ import FormDrilldownList from "./FormDrilldownList.vue";
 import type { Option } from "./types.js";
 
 export interface Props {
+    currentValue: string[];
     option: Option;
     handleClick: Function;
 }
@@ -16,6 +17,11 @@ const hasOptions = computed(() => {
     return props.option.options.length > 0;
 });
 
+const isChecked = computed(() => {
+    const optionValue = props.option.value;
+    return props.currentValue.indexOf(optionValue) !== -1;
+});
+
 function toggleChildren() {
     showChildren.value = !showChildren.value;
 }
@@ -27,8 +33,12 @@ function toggleChildren() {
             <span v-if="showChildren" class="fa fa-plus-square" />
             <span v-else class="fa fa-minus-square" />
         </span>
-        <b-form-checkbox class="d-inline" />
+        <b-form-checkbox class="d-inline" :checked="isChecked"/>
         {{ option.name }}
-        <form-drilldown-list v-show="showChildren" :options="option.options" :handle-click="handleClick" />
+        <form-drilldown-list
+            v-show="showChildren"
+            :current-value="currentValue"
+            :options="option.options"
+            :handle-click="handleClick" />
     </li>
 </template>

From 04125e5679c42ba775c67081696017e2e4fd0540 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 16 Mar 2023 17:44:24 +0300
Subject: [PATCH 18/51] Add change event handler

---
 .../Elements/FormDrilldown/FormDrilldown.vue  | 19 ++++++++++---------
 .../FormDrilldown/FormDrilldownOption.vue     |  6 +++---
 2 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue b/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue
index b44d3a71292..f32a02fa23f 100644
--- a/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue
+++ b/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue
@@ -34,15 +34,16 @@ const currentValue = computed({
     },
 });
 
-function addToSelected(n: string, v: boolean) {
-    /*if (v == true) {
-        currentValue.push(n);
-    } else if (v == false) {
-        const index = currentValue.indexOf(n);
-        currentValue.splice(index, 1);
+function handleClick(value: string) {
+    console.log(value);
+    const newValue = currentValue.value.slice();
+    const index = newValue.indexOf(value);
+    if (index !== -1) {
+        newValue.splice(index, 1);
+    } else {
+        newValue.push(value);
     }
-    emit("input", currentValue); //HELP problem with this is that once a checkbox is checked, if you uncheck it no longer requires something is checked, and you're able to send an empty array
-    console.log(":CV:", currentValue);*/
+    emit("input", newValue);
 }
 
 //TODO implement selectAll
@@ -50,6 +51,6 @@ function addToSelected(n: string, v: boolean) {
 
 <template>
     <div v-if="hasOptions">
-        <form-drilldown-list :current-value="currentValue" :options="options" :handle-click="addToSelected" />
+        <form-drilldown-list :current-value="currentValue" :options="options" :handle-click="handleClick" />
     </div>
 </template>
diff --git a/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue b/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue
index 94a71144b99..6de858a2b4e 100644
--- a/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue
+++ b/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue
@@ -30,10 +30,10 @@ function toggleChildren() {
 <template>
     <li>
         <span v-if="hasOptions" @click="toggleChildren">
-            <span v-if="showChildren" class="fa fa-plus-square" />
-            <span v-else class="fa fa-minus-square" />
+            <span v-if="showChildren" class="fa fa-minus-square" />
+            <span v-else class="fa fa-plus-square" />
         </span>
-        <b-form-checkbox class="d-inline" :checked="isChecked"/>
+        <b-form-checkbox class="d-inline" :checked="isChecked" @change="handleClick(option.value)" />
         {{ option.name }}
         <form-drilldown-list
             v-show="showChildren"

From 3f03cfffee087ead63735429261d0a15025b9940 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 16 Mar 2023 17:53:14 +0300
Subject: [PATCH 19/51] Avoid child component if there are child options

---
 .../Form/Elements/FormDrilldown/FormDrilldownOption.vue          | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue b/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue
index 6de858a2b4e..d567426cf56 100644
--- a/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue
+++ b/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue
@@ -36,6 +36,7 @@ function toggleChildren() {
         <b-form-checkbox class="d-inline" :checked="isChecked" @change="handleClick(option.value)" />
         {{ option.name }}
         <form-drilldown-list
+            v-if="hasOptions"
             v-show="showChildren"
             :current-value="currentValue"
             :options="option.options"

From e67533317f7bc7a3be9a4007344aec5866a5bb3e Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sat, 18 Mar 2023 09:19:44 +0300
Subject: [PATCH 20/51] Ensure that value is set before appending

---
 .../components/Form/Elements/FormDrilldown/FormDrilldown.vue  | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue b/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue
index f32a02fa23f..414960fb80c 100644
--- a/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue
+++ b/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue
@@ -23,7 +23,9 @@ const hasOptions = computed(() => {
 
 const currentValue = computed({
     get: (): string[] => {
-        if (Array.isArray(props.value)) {
+        if (props.value === null || props.value === "") {
+            return [];
+        } else if (Array.isArray(props.value)) {
             return props.value;
         } else {
             return [props.value];

From 602586c36a2a270260399afb1adf0cbc4a0ec664 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sat, 18 Mar 2023 10:19:26 +0300
Subject: [PATCH 21/51] Add square plus/minus icons to icons plugin

---
 .../Form/Elements/FormDrilldown/FormDrilldownOption.vue       | 4 ++--
 client/src/components/plugins/icons.js                        | 4 ++++
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue b/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue
index d567426cf56..52c58710a13 100644
--- a/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue
+++ b/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue
@@ -30,8 +30,8 @@ function toggleChildren() {
 <template>
     <li>
         <span v-if="hasOptions" @click="toggleChildren">
-            <span v-if="showChildren" class="fa fa-minus-square" />
-            <span v-else class="fa fa-plus-square" />
+            <icon v-if="showChildren" fixed-width icon="minus-square" />
+            <icon v-else fixed-width icon="plus-square" />
         </span>
         <b-form-checkbox class="d-inline" :checked="isChecked" @change="handleClick(option.value)" />
         {{ option.name }}
diff --git a/client/src/components/plugins/icons.js b/client/src/components/plugins/icons.js
index ab5524e414e..35878727bbc 100644
--- a/client/src/components/plugins/icons.js
+++ b/client/src/components/plugins/icons.js
@@ -28,10 +28,12 @@ import {
     faList,
     faLink,
     faLock,
+    faMinusSquare,
     faPause,
     faPen,
     faPlay,
     faPlus,
+    faPlusSquare,
     faQuestion,
     faShareAlt,
     faSitemap,
@@ -73,10 +75,12 @@ library.add(
     faLink,
     faList,
     faLock,
+    faMinusSquare,
     faPause,
     faPen,
     faPlay,
     faPlus,
+    faPlusSquare,
     faQuestion,
     faShareAlt,
     faSitemap,

From 604663a43fb30783b3b6665e26003acb67e87092 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sat, 18 Mar 2023 12:35:47 +0300
Subject: [PATCH 22/51] Emit null if value array is empty

---
 .../Form/Elements/FormDrilldown/FormDrilldown.vue        | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue b/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue
index 414960fb80c..3173c0d7f49 100644
--- a/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue
+++ b/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue
@@ -14,7 +14,7 @@ const props = withDefaults(defineProps<FormDrilldownProps>(), {
 });
 
 const emit = defineEmits<{
-    (e: "input", value: string[]): void;
+    (e: "input", value: string[] | null): void;
 }>();
 
 const hasOptions = computed(() => {
@@ -37,7 +37,6 @@ const currentValue = computed({
 });
 
 function handleClick(value: string) {
-    console.log(value);
     const newValue = currentValue.value.slice();
     const index = newValue.indexOf(value);
     if (index !== -1) {
@@ -45,7 +44,11 @@ function handleClick(value: string) {
     } else {
         newValue.push(value);
     }
-    emit("input", newValue);
+    if (newValue.length === 0) {
+        emit("input", null);
+    } else {
+        emit("input", newValue);
+    }
 }
 
 //TODO implement selectAll

From 0f2b61fea22f7894253d97be9ef3576038605395 Mon Sep 17 00:00:00 2001
From: Assunta DeSanto <assuntad23@gmail.com>
Date: Tue, 28 Mar 2023 15:44:32 -0400
Subject: [PATCH 23/51] passing multiple as a prop through drilldown
 subcomponents, changing to radio button if multiple is not true, still
 currently allows multiple radio buttons to be selected

---
 .../Elements/FormDrilldown/FormDrilldown.vue  | 36 ++++++++++++-------
 .../FormDrilldown/FormDrilldownList.vue       | 10 ++++--
 .../FormDrilldown/FormDrilldownOption.vue     |  5 ++-
 client/src/components/Form/FormElement.vue    |  3 +-
 4 files changed, 37 insertions(+), 17 deletions(-)

diff --git a/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue b/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue
index 3173c0d7f49..858953ffc0c 100644
--- a/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue
+++ b/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue
@@ -7,14 +7,16 @@ export interface FormDrilldownProps {
     id: string;
     value?: string | string[];
     options: Array<Option>;
+    multiple: boolean;
 }
 
 const props = withDefaults(defineProps<FormDrilldownProps>(), {
     value: null,
+    multiple: false,
 });
 
 const emit = defineEmits<{
-    (e: "input", value: string[] | null): void;
+    (e: "input", value: string[] | null | string): void;
 }>();
 
 const hasOptions = computed(() => {
@@ -37,18 +39,24 @@ const currentValue = computed({
 });
 
 function handleClick(value: string) {
-    const newValue = currentValue.value.slice();
-    const index = newValue.indexOf(value);
-    if (index !== -1) {
-        newValue.splice(index, 1);
-    } else {
-        newValue.push(value);
+    if (props.multiple) {
+        const newValue = currentValue.value.slice();
+        const index = newValue.indexOf(value);
+        if (index !== -1) {
+            newValue.splice(index, 1);
+        } else {
+            newValue.push(value);
+        }
+        if (newValue.length === 0) {
+            emit("input", null);
+        } else {
+            emit("input", newValue);
+        }
     }
-    if (newValue.length === 0) {
-        emit("input", null);
-    } else {
-        emit("input", newValue);
+    if (!props.multiple) {
+        emit("input", value);
     }
+    
 }
 
 //TODO implement selectAll
@@ -56,6 +64,10 @@ function handleClick(value: string) {
 
 <template>
     <div v-if="hasOptions">
-        <form-drilldown-list :current-value="currentValue" :options="options" :handle-click="handleClick" />
+        <form-drilldown-list
+            :multiple="props.multiple"
+            :current-value="currentValue"
+            :options="options"
+            :handle-click="handleClick" />
     </div>
 </template>
diff --git a/client/src/components/Form/Elements/FormDrilldown/FormDrilldownList.vue b/client/src/components/Form/Elements/FormDrilldown/FormDrilldownList.vue
index 419d790a9a5..340551cfe87 100644
--- a/client/src/components/Form/Elements/FormDrilldown/FormDrilldownList.vue
+++ b/client/src/components/Form/Elements/FormDrilldown/FormDrilldownList.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { computed, ref } from "vue";
 import FormDrilldownOption from "./FormDrilldownOption.vue";
 import type { Option } from "./types.js";
 
@@ -7,6 +6,7 @@ export interface Props {
     currentValue: string[];
     options: Array<Option>;
     handleClick: Function;
+    multiple: boolean;
 }
 
 const props = defineProps<Props>();
@@ -14,8 +14,12 @@ const props = defineProps<Props>();
 
 <template>
     <div>
-        <ul v-for="option in options" :key="option.name" class="ui-drilldown">
-            <form-drilldown-option :current-value="currentValue" :option="option" :handle-click="handleClick" />
+        <ul v-for="option in props.options" :key="option.name" class="ui-drilldown">
+            <form-drilldown-option
+                :multiple="props.multiple"
+                :current-value="currentValue"
+                :option="option"
+                :handle-click="handleClick" />
         </ul>
     </div>
 </template>
diff --git a/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue b/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue
index 52c58710a13..a53c65ad0d1 100644
--- a/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue
+++ b/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue
@@ -7,6 +7,7 @@ export interface Props {
     currentValue: string[];
     option: Option;
     handleClick: Function;
+    multiple: boolean;
 }
 
 const props = defineProps<Props>();
@@ -33,12 +34,14 @@ function toggleChildren() {
             <icon v-if="showChildren" fixed-width icon="minus-square" />
             <icon v-else fixed-width icon="plus-square" />
         </span>
-        <b-form-checkbox class="d-inline" :checked="isChecked" @change="handleClick(option.value)" />
+        <b-form-checkbox v-if="multiple" class="d-inline" :checked="isChecked" @change="handleClick(option.value)" />
+        <b-form-radio v-else class="d-inline" :selected="isChecked" @change="handleClick(option.value)" />
         {{ option.name }}
         <form-drilldown-list
             v-if="hasOptions"
             v-show="showChildren"
             :current-value="currentValue"
+            :multiple="props.multiple"
             :options="option.options"
             :handle-click="handleClick" />
     </li>
diff --git a/client/src/components/Form/FormElement.vue b/client/src/components/Form/FormElement.vue
index ee243b9c55b..414cfb93425 100644
--- a/client/src/components/Form/FormElement.vue
+++ b/client/src/components/Form/FormElement.vue
@@ -268,7 +268,8 @@ const isOptional = computed(() => !isRequired.value && attrs.value["optional"] !
                 v-else-if="props.type === 'drill_down'"
                 :id="id"
                 v-model="currentValue"
-                :options="attrs.options" />
+                :options="attrs.options"
+                :multiple="attrs.multiple" />
             <FormColor v-else-if="props.type === 'color'" :id="props.id" v-model="currentValue" />
             <FormDirectory v-else-if="props.type === 'directory_uri'" v-model="currentValue" />
             <FormUpload v-else-if="props.type === 'upload'" v-model="currentValue" />

From ae1ac8041b21973a33c7cf60524b526efad9bfcf Mon Sep 17 00:00:00 2001
From: Assunta DeSanto <assuntad23@gmail.com>
Date: Tue, 28 Mar 2023 18:26:35 -0400
Subject: [PATCH 24/51] adding name to radiobutton ensures it's the only
 selected option

---
 .../Form/Elements/FormDrilldown/FormDrilldownOption.vue        | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue b/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue
index a53c65ad0d1..526e0728098 100644
--- a/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue
+++ b/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue
@@ -23,6 +23,7 @@ const isChecked = computed(() => {
     return props.currentValue.indexOf(optionValue) !== -1;
 });
 
+
 function toggleChildren() {
     showChildren.value = !showChildren.value;
 }
@@ -35,7 +36,7 @@ function toggleChildren() {
             <icon v-else fixed-width icon="plus-square" />
         </span>
         <b-form-checkbox v-if="multiple" class="d-inline" :checked="isChecked" @change="handleClick(option.value)" />
-        <b-form-radio v-else class="d-inline" :selected="isChecked" @change="handleClick(option.value)" />
+        <b-form-radio v-else class="d-inline" :selected="isChecked" name="selectedOption" @change="handleClick(option.value)" />
         {{ option.name }}
         <form-drilldown-list
             v-if="hasOptions"

From c7a90b9408b743bc49893bc6bfb42a71140ca4b9 Mon Sep 17 00:00:00 2001
From: Assunta DeSanto <assuntad23@gmail.com>
Date: Mon, 3 Apr 2023 16:38:35 -0400
Subject: [PATCH 25/51] adding select/deselect all function

---
 .../Elements/FormDrilldown/FormDrilldown.vue  | 21 +++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue b/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue
index 858953ffc0c..09110776e98 100644
--- a/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue
+++ b/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue
@@ -56,14 +56,31 @@ function handleClick(value: string) {
     if (!props.multiple) {
         emit("input", value);
     }
-    
 }
 
-//TODO implement selectAll
+function selectAll(selected: boolean) {
+    const newValue: string[] = [];
+    if (selected) {
+        props.options.forEach((option) => {
+            selectRecursively(option, newValue);
+        });
+    }
+    emit("input", newValue.length === 0 ? null : newValue);
+}
+
+function selectRecursively(option: Option, currentValue: string[]) {
+    currentValue.push(option.value);
+    if (option.options.length > 0) {
+        option.options.forEach((option) => {
+            selectRecursively(option, currentValue);
+        });
+    }
+}
 </script>
 
 <template>
     <div v-if="hasOptions">
+        <b-form-checkbox v-if="props.multiple" class="d-inline" :selected="false" @change="selectAll" />
         <form-drilldown-list
             :multiple="props.multiple"
             :current-value="currentValue"

From b485b347b6b69f420bfda7f1fe042f6f677f3935 Mon Sep 17 00:00:00 2001
From: Assunta DeSanto <assuntad23@gmail.com>
Date: Mon, 3 Apr 2023 16:39:39 -0400
Subject: [PATCH 26/51] running prettier

---
 .../Form/Elements/FormDrilldown/FormDrilldownOption.vue   | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue b/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue
index 526e0728098..0c731ef03fc 100644
--- a/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue
+++ b/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue
@@ -23,7 +23,6 @@ const isChecked = computed(() => {
     return props.currentValue.indexOf(optionValue) !== -1;
 });
 
-
 function toggleChildren() {
     showChildren.value = !showChildren.value;
 }
@@ -36,7 +35,12 @@ function toggleChildren() {
             <icon v-else fixed-width icon="plus-square" />
         </span>
         <b-form-checkbox v-if="multiple" class="d-inline" :checked="isChecked" @change="handleClick(option.value)" />
-        <b-form-radio v-else class="d-inline" :selected="isChecked" name="selectedOption" @change="handleClick(option.value)" />
+        <b-form-radio
+            v-else
+            class="d-inline"
+            :selected="isChecked"
+            name="selectedOption"
+            @change="handleClick(option.value)" />
         {{ option.name }}
         <form-drilldown-list
             v-if="hasOptions"

From 66289a4cf49153d59addcc12d2c0ac0cfdd92f24 Mon Sep 17 00:00:00 2001
From: Assunta DeSanto <assuntad23@gmail.com>
Date: Tue, 11 Apr 2023 18:46:50 -0400
Subject: [PATCH 27/51] adding error for assertion in assert_item_peek_includes

---
 lib/galaxy_test/selenium/framework.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/galaxy_test/selenium/framework.py b/lib/galaxy_test/selenium/framework.py
index d095399cec8..12c5db00fa6 100644
--- a/lib/galaxy_test/selenium/framework.py
+++ b/lib/galaxy_test/selenium/framework.py
@@ -504,7 +504,7 @@ class UsesHistoryItemAssertions(NavigatesGalaxyMixin):
     def assert_item_peek_includes(self, hid, expected):
         item_body = self.history_panel_item_component(hid=hid)
         peek_text = item_body.peek.wait_for_text()
-        assert expected in peek_text
+        assert expected in peek_text, f"Expected peek [{expected}] not found in peek [{peek_text}]"
 
     def assert_item_info_includes(self, hid, expected):
         item_body = self.history_panel_item_component(hid=hid)

From 7b476bace9cfb876b0c1515644493109019f4ac7 Mon Sep 17 00:00:00 2001
From: Assunta DeSanto <assuntad23@gmail.com>
Date: Tue, 11 Apr 2023 18:48:14 -0400
Subject: [PATCH 28/51] adding classes to Form Drilldown components, adding
 Select/Deselect All text to FormDrilldown

---
 .../Form/Elements/FormDrilldown/FormDrilldown.vue    | 12 ++++++++----
 .../Elements/FormDrilldown/FormDrilldownOption.vue   |  2 +-
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue b/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue
index 09110776e98..c22f417a24b 100644
--- a/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue
+++ b/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue
@@ -12,7 +12,7 @@ export interface FormDrilldownProps {
 
 const props = withDefaults(defineProps<FormDrilldownProps>(), {
     value: null,
-    multiple: false,
+    multiple: true,
 });
 
 const emit = defineEmits<{
@@ -52,8 +52,7 @@ function handleClick(value: string) {
         } else {
             emit("input", newValue);
         }
-    }
-    if (!props.multiple) {
+    } else if (!props.multiple) {
         emit("input", value);
     }
 }
@@ -80,7 +79,12 @@ function selectRecursively(option: Option, currentValue: string[]) {
 
 <template>
     <div v-if="hasOptions">
-        <b-form-checkbox v-if="props.multiple" class="d-inline" :selected="false" @change="selectAll" />
+        <b-form-checkbox
+            v-if="props.multiple"
+            class="d-inline select-all-checkbox"
+            :selected="false"
+            @change="selectAll" />
+        Select/Deselect All
         <form-drilldown-list
             :multiple="props.multiple"
             :current-value="currentValue"
diff --git a/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue b/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue
index 0c731ef03fc..19e8583c46e 100644
--- a/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue
+++ b/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue
@@ -34,7 +34,7 @@ function toggleChildren() {
             <icon v-if="showChildren" fixed-width icon="minus-square" />
             <icon v-else fixed-width icon="plus-square" />
         </span>
-        <b-form-checkbox v-if="multiple" class="d-inline" :checked="isChecked" @change="handleClick(option.value)" />
+        <b-form-checkbox v-if="multiple" class="d-inline drilldown-option" :checked="isChecked" @change="handleClick(option.value)" />
         <b-form-radio
             v-else
             class="d-inline"

From f35ce17e3300ec50ecf5a4b0a5307f30cab9c70c Mon Sep 17 00:00:00 2001
From: Assunta DeSanto <assuntad23@gmail.com>
Date: Tue, 11 Apr 2023 18:49:34 -0400
Subject: [PATCH 29/51] adding Selenium test and navigation for selenium test

---
 client/src/utils/navigation/navigation.yml |  4 ++++
 lib/galaxy_test/selenium/test_tool_form.py | 22 ++++++++++++++++++++++
 2 files changed, 26 insertions(+)

diff --git a/client/src/utils/navigation/navigation.yml b/client/src/utils/navigation/navigation.yml
index b1eab9f93bd..b841837037d 100644
--- a/client/src/utils/navigation/navigation.yml
+++ b/client/src/utils/navigation/navigation.yml
@@ -519,6 +519,10 @@ tool_form:
     reference: '.formatted-reference'
     about: '.tool-footer'
     storage_options: '.tool-storage'
+    drilldown_select_all: 'div.ui-form-element[id="form-element-${parameter}"] div.select-all-checkbox'
+    drilldown_option: '.drilldown-option'
+    drilldown_expand: '.fa-plus-square'
+
 
   labels:
     generate_tour: 'Generate Tour'
diff --git a/lib/galaxy_test/selenium/test_tool_form.py b/lib/galaxy_test/selenium/test_tool_form.py
index d8ee306cc0a..ae39cc0a222 100644
--- a/lib/galaxy_test/selenium/test_tool_form.py
+++ b/lib/galaxy_test/selenium/test_tool_form.py
@@ -74,6 +74,28 @@ class TestToolForm(SeleniumTestCase, UsesHistoryItemAssertions):
         generic_item.find_element(By.CSS_SELECTOR, "[title='Run Job Again']").click()
         self.components.tool_form.execute.wait_for_visible()
 
+    @selenium_test
+    def test_drilldown_tool(self):
+        self._open_drilldown_test_tool()
+        # click first option in first drilldown component
+        self.wait_for_and_click(self.components.tool_form.drilldown_expand)
+        self.wait_for_and_click(self.components.tool_form.drilldown_option)
+        # click select all in second drilldown component
+        self.wait_for_and_click(self.components.tool_form.drilldown_select_all(parameter="dd_recurse"))
+        self.tool_form_execute()
+        self.history_panel_wait_for_hid_ok(1)
+        # click hid 1 in history panel
+        self.history_panel_click_item_title(hid=1)
+        # assert that the dataset peek is d = a dd_recurse = a,b,c
+        self.assert_item_peek_includes(1, "dd a")
+        self.assert_item_peek_includes(1, "dd_recurse aa,aba,abb,ba,bba,bbb")
+
+    def _open_drilldown_test_tool(self):
+        self.home()
+        self.tool_open("drill_down")
+
+
+
     @staticmethod
     def click_menu_item(menu, text):
         for element in menu.find_elements(By.CSS_SELECTOR, "a"):

From c2df1817a02b72013c866e17ba3c01bd2343650c Mon Sep 17 00:00:00 2001
From: Assunta DeSanto <assuntad23@gmail.com>
Date: Tue, 11 Apr 2023 19:09:08 -0400
Subject: [PATCH 30/51] selecting all iteratively instead or recursively

---
 .../Form/Elements/FormDrilldown/FormDrilldown.vue   | 13 +++----------
 1 file changed, 3 insertions(+), 10 deletions(-)

diff --git a/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue b/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue
index c22f417a24b..92ecc0e2be0 100644
--- a/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue
+++ b/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue
@@ -61,20 +61,13 @@ function selectAll(selected: boolean) {
     const newValue: string[] = [];
     if (selected) {
         props.options.forEach((option) => {
-            selectRecursively(option, newValue);
+            if (option.value) {
+                newValue.push(option.value);
+            }
         });
     }
     emit("input", newValue.length === 0 ? null : newValue);
 }
-
-function selectRecursively(option: Option, currentValue: string[]) {
-    currentValue.push(option.value);
-    if (option.options.length > 0) {
-        option.options.forEach((option) => {
-            selectRecursively(option, currentValue);
-        });
-    }
-}
 </script>
 
 <template>

From 3ee5398206ba632de0726a256edbab0b2aff1a68 Mon Sep 17 00:00:00 2001
From: Assunta DeSanto <assuntad23@gmail.com>
Date: Tue, 11 Apr 2023 19:39:54 -0400
Subject: [PATCH 31/51] fixing formatting

---
 .../Form/Elements/FormDrilldown/FormDrilldownOption.vue     | 6 +++++-
 lib/galaxy_test/selenium/test_tool_form.py                  | 2 --
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue b/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue
index 19e8583c46e..8bab7c36bb4 100644
--- a/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue
+++ b/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue
@@ -34,7 +34,11 @@ function toggleChildren() {
             <icon v-if="showChildren" fixed-width icon="minus-square" />
             <icon v-else fixed-width icon="plus-square" />
         </span>
-        <b-form-checkbox v-if="multiple" class="d-inline drilldown-option" :checked="isChecked" @change="handleClick(option.value)" />
+        <b-form-checkbox
+            v-if="multiple"
+            class="d-inline drilldown-option"
+            :checked="isChecked"
+            @change="handleClick(option.value)" />
         <b-form-radio
             v-else
             class="d-inline"
diff --git a/lib/galaxy_test/selenium/test_tool_form.py b/lib/galaxy_test/selenium/test_tool_form.py
index ae39cc0a222..376231d0049 100644
--- a/lib/galaxy_test/selenium/test_tool_form.py
+++ b/lib/galaxy_test/selenium/test_tool_form.py
@@ -94,8 +94,6 @@ class TestToolForm(SeleniumTestCase, UsesHistoryItemAssertions):
         self.home()
         self.tool_open("drill_down")
 
-
-
     @staticmethod
     def click_menu_item(menu, text):
         for element in menu.find_elements(By.CSS_SELECTOR, "a"):

From 503498d583001426502a0229ab0139993749f7c5 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 18 Apr 2023 11:01:01 +0300
Subject: [PATCH 32/51] Remove duplicate if-statement

---
 .../components/Form/Elements/FormDrilldown/FormDrilldown.vue    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue b/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue
index 92ecc0e2be0..bd6ae89a234 100644
--- a/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue
+++ b/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue
@@ -52,7 +52,7 @@ function handleClick(value: string) {
         } else {
             emit("input", newValue);
         }
-    } else if (!props.multiple) {
+    } else {
         emit("input", value);
     }
 }

From fbd07c8743b89038282feaac2f6377ba6bfce9bd Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 18 Apr 2023 11:19:17 +0300
Subject: [PATCH 33/51] Account for nested options in select all helper

---
 .../Elements/FormDrilldown/FormDrilldown.vue  | 21 ++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue b/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue
index bd6ae89a234..194c635d442 100644
--- a/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue
+++ b/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue
@@ -38,7 +38,7 @@ const currentValue = computed({
     },
 });
 
-function handleClick(value: string) {
+function handleClick(value: string): void {
     if (props.multiple) {
         const newValue = currentValue.value.slice();
         const index = newValue.indexOf(value);
@@ -57,14 +57,21 @@ function handleClick(value: string) {
     }
 }
 
-function selectAll(selected: boolean) {
+function selectAll(selected: boolean): void {
     const newValue: string[] = [];
     if (selected) {
-        props.options.forEach((option) => {
-            if (option.value) {
-                newValue.push(option.value);
-            }
-        });
+        let options = null;
+        const stack: Array<Array<Option>> = [props.options];
+        while ((options = stack.pop())) {
+            options.forEach((option) => {
+                if (option.value) {
+                    newValue.push(option.value);
+                }
+                if (option.options.length > 0) {
+                    stack.push(option.options);
+                }
+            });
+        }
     }
     emit("input", newValue.length === 0 ? null : newValue);
 }

From bc59d1fd22bafb5e13e6496110cdf73c5276ef4e Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 18 Apr 2023 12:57:58 +0300
Subject: [PATCH 34/51] Add indeterminate select all option, use computed
 property to determine all values

---
 .../Elements/FormDrilldown/FormDrilldown.vue  | 73 ++++++++++++-------
 1 file changed, 46 insertions(+), 27 deletions(-)

diff --git a/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue b/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue
index 194c635d442..3c575df0bd9 100644
--- a/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue
+++ b/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, ref, type ComputedRef } from "vue";
 import FormDrilldownList from "./FormDrilldownList.vue";
 import type { Option } from "./types.js";
 
@@ -16,28 +16,58 @@ const props = withDefaults(defineProps<FormDrilldownProps>(), {
 });
 
 const emit = defineEmits<{
-    (e: "input", value: string[] | null | string): void;
+    (e: "input", value: string | string[] | null): 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;
+});
+
+// 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];
+        // determine current value
+        let value: string[] = [];
+        if (props.value !== null && props.value !== "") {
+            if (Array.isArray(props.value)) {
+                value = props.value;
+            } else {
+                value = [props.value];
+            }
         }
+        // set select all state
+        selectAll.value = allValues.value.length === value.length;
+        selectAllIndeterminate.value = ![0, allValues.value.length].includes(value.length);
+        // return current value
+        return value;
     },
     set: (newValue: string[]): void => {
         emit("input", newValue);
     },
 });
 
+// Handle click on individual check/radio element
 function handleClick(value: string): void {
     if (props.multiple) {
         const newValue = currentValue.value.slice();
@@ -57,23 +87,11 @@ function handleClick(value: string): void {
     }
 }
 
-function selectAll(selected: boolean): void {
-    const newValue: string[] = [];
-    if (selected) {
-        let options = null;
-        const stack: Array<Array<Option>> = [props.options];
-        while ((options = stack.pop())) {
-            options.forEach((option) => {
-                if (option.value) {
-                    newValue.push(option.value);
-                }
-                if (option.options.length > 0) {
-                    stack.push(option.options);
-                }
-            });
-        }
-    }
-    emit("input", newValue.length === 0 ? null : newValue);
+// Handle click on select all checkbox to either select or unselect all values
+function onSelectAll(selected: boolean): void {
+    emit("input", selected ? allValues.value : null);
+    selectAll.value = selected;
+    selectAllIndeterminate.value = false;
 }
 </script>
 
@@ -81,9 +99,10 @@ function selectAll(selected: boolean): void {
     <div v-if="hasOptions">
         <b-form-checkbox
             v-if="props.multiple"
+            v-model="selectAll"
+            :indeterminate="selectAllIndeterminate"
             class="d-inline select-all-checkbox"
-            :selected="false"
-            @change="selectAll" />
+            @change="onSelectAll" />
         Select/Deselect All
         <form-drilldown-list
             :multiple="props.multiple"

From 6d476b69928982c0ef00555957c41a61cad3965a Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 18 Apr 2023 13:00:08 +0300
Subject: [PATCH 35/51] Remove unnecessary explicit select all setting in click
 handler

---
 .../components/Form/Elements/FormDrilldown/FormDrilldown.vue    | 2 --
 1 file changed, 2 deletions(-)

diff --git a/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue b/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue
index 3c575df0bd9..4ebde7acace 100644
--- a/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue
+++ b/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue
@@ -90,8 +90,6 @@ function handleClick(value: string): void {
 // Handle click on select all checkbox to either select or unselect all values
 function onSelectAll(selected: boolean): void {
     emit("input", selected ? allValues.value : null);
-    selectAll.value = selected;
-    selectAllIndeterminate.value = false;
 }
 </script>
 

From 65f858bca3089388658dc269a202d6d93ad89680 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 18 Apr 2023 13:12:28 +0300
Subject: [PATCH 36/51] Watch value separately to avoid unexpected side effect

---
 .../Elements/FormDrilldown/FormDrilldown.vue  | 33 ++++++++++---------
 1 file changed, 18 insertions(+), 15 deletions(-)

diff --git a/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue b/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue
index 4ebde7acace..c39bb83607f 100644
--- a/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue
+++ b/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, type ComputedRef } from "vue";
+import { computed, ref, watch, type ComputedRef } from "vue";
 import FormDrilldownList from "./FormDrilldownList.vue";
 import type { Option } from "./types.js";
 
@@ -47,20 +47,13 @@ const allValues: ComputedRef<string[]> = computed(() => {
 // Determine current value and set select all state
 const currentValue = computed({
     get: (): string[] => {
-        // determine current value
-        let value: string[] = [];
-        if (props.value !== null && props.value !== "") {
-            if (Array.isArray(props.value)) {
-                value = props.value;
-            } else {
-                value = [props.value];
-            }
+        if (props.value === null || props.value === "") {
+            return [];
+        } else if (Array.isArray(props.value)) {
+            return props.value;
+        } else {
+            return [props.value];
         }
-        // set select all state
-        selectAll.value = allValues.value.length === value.length;
-        selectAllIndeterminate.value = ![0, allValues.value.length].includes(value.length);
-        // return current value
-        return value;
     },
     set: (newValue: string[]): void => {
         emit("input", newValue);
@@ -91,6 +84,16 @@ 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>
@@ -101,7 +104,7 @@ function onSelectAll(selected: boolean): void {
             :indeterminate="selectAllIndeterminate"
             class="d-inline select-all-checkbox"
             @change="onSelectAll" />
-        Select/Deselect All
+        Select/Unselect All
         <form-drilldown-list
             :multiple="props.multiple"
             :current-value="currentValue"

From ecdd091c0cafc2b62975b6bc32e26fabbf8053c4 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 18 Apr 2023 13:14:56 +0300
Subject: [PATCH 37/51] Only show select all label if actual checkbox is shown,
 add localization

---
 .../Form/Elements/FormDrilldown/FormDrilldown.vue           | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue b/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue
index c39bb83607f..b80f432edd6 100644
--- a/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue
+++ b/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue
@@ -103,8 +103,10 @@ watch(
             v-model="selectAll"
             :indeterminate="selectAllIndeterminate"
             class="d-inline select-all-checkbox"
-            @change="onSelectAll" />
-        Select/Unselect All
+            @change="onSelectAll"
+            v-localize>
+            Select/Unselect All
+        </b-form-checkbox>
         <form-drilldown-list
             :multiple="props.multiple"
             :current-value="currentValue"

From 951af865d9aaa28b84117b8b2a50f6e8068c94dd Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 18 Apr 2023 13:22:11 +0300
Subject: [PATCH 38/51] Reduce margin between blocks

---
 .../Form/Elements/FormDrilldown/FormDrilldownList.vue           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/Form/Elements/FormDrilldown/FormDrilldownList.vue b/client/src/components/Form/Elements/FormDrilldown/FormDrilldownList.vue
index 340551cfe87..463ee271c6e 100644
--- a/client/src/components/Form/Elements/FormDrilldown/FormDrilldownList.vue
+++ b/client/src/components/Form/Elements/FormDrilldown/FormDrilldownList.vue
@@ -14,7 +14,7 @@ const props = defineProps<Props>();
 
 <template>
     <div>
-        <ul v-for="option in props.options" :key="option.name" class="ui-drilldown">
+        <ul v-for="option in props.options" :key="option.name" class="ui-drilldown m-0">
             <form-drilldown-option
                 :multiple="props.multiple"
                 :current-value="currentValue"

From 03b462151866e132a46d9d8b1c905155da1d1984 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 18 Apr 2023 13:31:19 +0300
Subject: [PATCH 39/51] Fix linting

---
 .../components/Form/Elements/FormDrilldown/FormDrilldown.vue  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue b/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue
index b80f432edd6..acbf567b73c 100644
--- a/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue
+++ b/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue
@@ -101,10 +101,10 @@ watch(
         <b-form-checkbox
             v-if="props.multiple"
             v-model="selectAll"
+            v-localize
             :indeterminate="selectAllIndeterminate"
             class="d-inline select-all-checkbox"
-            @change="onSelectAll"
-            v-localize>
+            @change="onSelectAll">
             Select/Unselect All
         </b-form-checkbox>
         <form-drilldown-list

From ca7cad1d8981ccd3bc30df67e19ecb2fac1476b0 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 18 Apr 2023 13:38:26 +0300
Subject: [PATCH 40/51] Allow clicking on label to check items

---
 .../Form/Elements/FormDrilldown/FormDrilldownOption.vue  | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue b/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue
index 8bab7c36bb4..67ab8fac286 100644
--- a/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue
+++ b/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue
@@ -38,14 +38,17 @@ function toggleChildren() {
             v-if="multiple"
             class="d-inline drilldown-option"
             :checked="isChecked"
-            @change="handleClick(option.value)" />
+            @change="handleClick(option.value)">
+            {{ option.name }}
+        </b-form-checkbox>
         <b-form-radio
             v-else
             class="d-inline"
             :selected="isChecked"
             name="selectedOption"
-            @change="handleClick(option.value)" />
-        {{ option.name }}
+            @change="handleClick(option.value)">
+            {{ option.name }}
+        </b-form-radio>
         <form-drilldown-list
             v-if="hasOptions"
             v-show="showChildren"

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 41/51] 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;
+}

From 6963e680a5984415d33261e531e75067bb9c8ccb Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 19 Apr 2023 13:07:18 +0300
Subject: [PATCH 42/51] Add naive support to auto-expand selected values on
 initialization

---
 .../Elements/FormDrilldown/FormDrilldown.vue  |  4 ++--
 .../FormDrilldown/FormDrilldownList.vue       |  2 +-
 .../FormDrilldown/FormDrilldownOption.vue     | 19 ++++++++++++++++---
 3 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue b/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue
index ca959d7a4cb..cbb9f9d131a 100644
--- a/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue
+++ b/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue
@@ -78,7 +78,7 @@ function onSelectAll(selected: boolean): void {
 <template>
     <div v-if="hasOptions">
         <b-form-checkbox
-            v-if="props.multiple"
+            v-if="multiple"
             v-localize
             :checked="selectAllChecked"
             :indeterminate="selectAllIndeterminate"
@@ -87,7 +87,7 @@ function onSelectAll(selected: boolean): void {
             Select/Unselect All
         </b-form-checkbox>
         <form-drilldown-list
-            :multiple="props.multiple"
+            :multiple="multiple"
             :current-value="currentValue"
             :options="options"
             :handle-click="handleClick" />
diff --git a/client/src/components/Form/Elements/FormDrilldown/FormDrilldownList.vue b/client/src/components/Form/Elements/FormDrilldown/FormDrilldownList.vue
index 240f9ab0bb7..2b28326106a 100644
--- a/client/src/components/Form/Elements/FormDrilldown/FormDrilldownList.vue
+++ b/client/src/components/Form/Elements/FormDrilldown/FormDrilldownList.vue
@@ -14,7 +14,7 @@ const props = defineProps<Props>();
 
 <template>
     <div>
-        <ul v-for="option in props.options" :key="option.name" class="ui-drilldown m-0">
+        <ul v-for="(option, index) in props.options" :key="option.name" class="ui-drilldown m-0">
             <form-drilldown-option
                 :multiple="props.multiple"
                 :current-value="currentValue"
diff --git a/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue b/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue
index 2e98c51bcda..7585d9d2aef 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, type ComputedRef } from "vue";
+import { computed, onMounted, ref, type ComputedRef } from "vue";
 import FormDrilldownList from "./FormDrilldownList.vue";
-import type { Option } from "./utilities";
+import { getAllValues, type Option } from "./utilities";
 
 export interface Props {
     currentValue: string[];
@@ -36,6 +36,19 @@ const singleValue = computed({
 function toggleChildren(): void {
     showChildren.value = !showChildren.value;
 }
+
+function toggleInitialization(): void {
+    const childValues = getAllValues(props.option.options);
+    for (const childValue of childValues) {
+        if (props.currentValue.includes(childValue)) {
+            showChildren.value = true;
+            break;
+        }
+    }
+}
+onMounted(() => {
+    toggleInitialization();
+});
 </script>
 
 <template>
@@ -63,7 +76,7 @@ function toggleChildren(): void {
             v-if="hasOptions"
             v-show="showChildren"
             :current-value="currentValue"
-            :multiple="props.multiple"
+            :multiple="multiple"
             :options="option.options"
             :handle-click="handleClick" />
     </li>

From 733afb499fcdc896a59316ab4db472ee12b7d473 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 19 Apr 2023 13:19:17 +0300
Subject: [PATCH 43/51] Fix alignment, only pad nested lists

---
 .../Form/Elements/FormDrilldown/FormDrilldownList.vue  | 10 ++--------
 .../Elements/FormDrilldown/FormDrilldownOption.vue     |  5 +++--
 2 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/client/src/components/Form/Elements/FormDrilldown/FormDrilldownList.vue b/client/src/components/Form/Elements/FormDrilldown/FormDrilldownList.vue
index 2b28326106a..cff8f21c8a0 100644
--- a/client/src/components/Form/Elements/FormDrilldown/FormDrilldownList.vue
+++ b/client/src/components/Form/Elements/FormDrilldown/FormDrilldownList.vue
@@ -14,18 +14,12 @@ const props = defineProps<Props>();
 
 <template>
     <div>
-        <ul v-for="(option, index) in props.options" :key="option.name" class="ui-drilldown m-0">
+        <div v-for="(option, index) in props.options" :key="option.name" class="ui-drilldown">
             <form-drilldown-option
                 :multiple="props.multiple"
                 :current-value="currentValue"
                 :option="option"
                 :handle-click="handleClick" />
-        </ul>
+        </div>
     </div>
 </template>
-
-<style>
-.ui-drilldown {
-    list-style-type: none;
-}
-</style>
diff --git a/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue b/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue
index 7585d9d2aef..207e1452ae2 100644
--- a/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue
+++ b/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue
@@ -52,7 +52,7 @@ onMounted(() => {
 </script>
 
 <template>
-    <li>
+    <div>
         <span v-if="hasOptions" @click="toggleChildren">
             <icon v-if="showChildren" fixed-width icon="minus-square" />
             <icon v-else fixed-width icon="plus-square" />
@@ -75,9 +75,10 @@ onMounted(() => {
         <form-drilldown-list
             v-if="hasOptions"
             v-show="showChildren"
+            class="pl-5"
             :current-value="currentValue"
             :multiple="multiple"
             :options="option.options"
             :handle-click="handleClick" />
-    </li>
+    </div>
 </template>

From 30c26546050570574d04f848c1c2a718e23e5340 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 19 Apr 2023 13:26:49 +0300
Subject: [PATCH 44/51] Consolidate radio and checkbox handling in drilldown
 component

---
 .../FormDrilldown/FormDrilldownList.vue       |  2 +-
 .../FormDrilldown/FormDrilldownOption.vue     | 30 +++++++------------
 2 files changed, 11 insertions(+), 21 deletions(-)

diff --git a/client/src/components/Form/Elements/FormDrilldown/FormDrilldownList.vue b/client/src/components/Form/Elements/FormDrilldown/FormDrilldownList.vue
index cff8f21c8a0..04552b6080c 100644
--- a/client/src/components/Form/Elements/FormDrilldown/FormDrilldownList.vue
+++ b/client/src/components/Form/Elements/FormDrilldown/FormDrilldownList.vue
@@ -14,7 +14,7 @@ const props = defineProps<Props>();
 
 <template>
     <div>
-        <div v-for="(option, index) in props.options" :key="option.name" class="ui-drilldown">
+        <div v-for="option in props.options" :key="option.name" class="ui-drilldown">
             <form-drilldown-option
                 :multiple="props.multiple"
                 :current-value="currentValue"
diff --git a/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue b/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue
index 207e1452ae2..9d6f6c0b0e1 100644
--- a/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue
+++ b/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { computed, onMounted, ref, type ComputedRef } from "vue";
-import FormDrilldownList from "./FormDrilldownList.vue";
+import { BFormCheckbox, BFormRadio } from "bootstrap-vue";
 import { getAllValues, type Option } from "./utilities";
+import FormDrilldownList from "./FormDrilldownList.vue";
 
 export interface Props {
     currentValue: string[];
@@ -18,19 +19,15 @@ const hasOptions: ComputedRef<boolean> = computed(() => {
     return props.option.options.length > 0;
 });
 
-// indicates if the value has been selected or not (required for checkbox display)
+// indicates if the value has been selected or not
 const isChecked: ComputedRef<boolean> = computed(() => {
     const optionValue = props.option.value;
     return props.currentValue.includes(optionValue);
 });
 
-// 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() {},
+// determine required input element type
+const isComponent = computed(() => {
+    return props.multiple ? BFormCheckbox : BFormRadio;
 });
 
 function toggleChildren(): void {
@@ -57,21 +54,14 @@ onMounted(() => {
             <icon v-if="showChildren" fixed-width icon="minus-square" />
             <icon v-else fixed-width icon="plus-square" />
         </span>
-        <b-form-checkbox
-            v-if="multiple"
+        <component
+            :is="isComponent"
             class="drilldown-option d-inline"
+            value="true"
             :checked="isChecked"
             @change="handleClick(option.value)">
             {{ option.name }}
-        </b-form-checkbox>
-        <b-form-radio
-            v-else
-            v-model="singleValue"
-            class="drilldown-option d-inline"
-            :value="option.value"
-            @change="handleClick(option.value)">
-            {{ option.name }}
-        </b-form-radio>
+        </component>
         <form-drilldown-list
             v-if="hasOptions"
             v-show="showChildren"

From 8be0ab2d48f6ae345026613d0e39b630c01b3ffc Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 19 Apr 2023 15:28:25 +0300
Subject: [PATCH 45/51] Fix linting, remove unused export

---
 .../Elements/FormDrilldown/FormDrilldownList.vue | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/client/src/components/Form/Elements/FormDrilldown/FormDrilldownList.vue b/client/src/components/Form/Elements/FormDrilldown/FormDrilldownList.vue
index 04552b6080c..1607b2bad52 100644
--- a/client/src/components/Form/Elements/FormDrilldown/FormDrilldownList.vue
+++ b/client/src/components/Form/Elements/FormDrilldown/FormDrilldownList.vue
@@ -2,24 +2,22 @@
 import FormDrilldownOption from "./FormDrilldownOption.vue";
 import type { Option } from "./utilities";
 
-export interface Props {
+defineProps<{
     currentValue: string[];
-    options: Array<Option>;
     handleClick: Function;
     multiple: boolean;
-}
-
-const props = defineProps<Props>();
+    options: Array<Option>;
+}>();
 </script>
 
 <template>
     <div>
-        <div v-for="option in props.options" :key="option.name" class="ui-drilldown">
+        <div v-for="option in options" :key="option.name" class="ui-drilldown">
             <form-drilldown-option
-                :multiple="props.multiple"
                 :current-value="currentValue"
-                :option="option"
-                :handle-click="handleClick" />
+                :handle-click="handleClick"
+                :multiple="multiple"
+                :option="option" />
         </div>
     </div>
 </template>

From 33d07099118054cc828550d258ec546a3de69f5c Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 19 Apr 2023 18:24:22 +0300
Subject: [PATCH 46/51] Add test case for drilldown utility

---
 .../Elements/FormDrilldown/utilities.test.js  | 77 +++++++++++++++++++
 1 file changed, 77 insertions(+)
 create mode 100644 client/src/components/Form/Elements/FormDrilldown/utilities.test.js

diff --git a/client/src/components/Form/Elements/FormDrilldown/utilities.test.js b/client/src/components/Form/Elements/FormDrilldown/utilities.test.js
new file mode 100644
index 00000000000..768c89780cb
--- /dev/null
+++ b/client/src/components/Form/Elements/FormDrilldown/utilities.test.js
@@ -0,0 +1,77 @@
+import { getAllValues } from "./utilities";
+
+describe("drilldown component utilities", () => {
+    it("get all values", () => {
+        const options = [
+            {
+                value: "a",
+                options: [
+                    {
+                        value: "aa",
+                        options: [],
+                    },
+                    {
+                        value: "ab",
+                        options: [
+                            {
+                                value: "aba",
+                                options: [
+                                    {
+                                        value: "abaa",
+                                        options: [],
+                                    },
+                                ],
+                            },
+                            {
+                                value: "abb",
+                                options: [
+                                    {
+                                        value: "abba",
+                                        options: [],
+                                    },
+                                ],
+                            },
+                        ],
+                    },
+                ],
+            },
+            {
+                value: "b",
+                options: [
+                    {
+                        value: "ba",
+                        options: [],
+                    },
+                    {
+                        value: "bb",
+                        options: [
+                            {
+                                value: "bba",
+                                options: [
+                                    {
+                                        value: "bbaa",
+                                        options: [],
+                                    },
+                                ],
+                            },
+                        ],
+                    },
+                ],
+            },
+        ];
+        expect(String(getAllValues(options))).toBe(String([
+            "a",
+            "b",
+            "ba",
+            "bb",
+            "bba",
+            "bbaa",
+            "aa",
+            "ab",
+            "aba",
+            "abb",
+            "abba",
+            "abaa",
+        ]));
+    });
+});

From 460183d17b4c3b49605aecffd157d396fd726c6d Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 19 Apr 2023 19:12:20 +0300
Subject: [PATCH 47/51] Fix linting

---
 .../Elements/FormDrilldown/utilities.test.js    | 17 +++--------------
 1 file changed, 3 insertions(+), 14 deletions(-)

diff --git a/client/src/components/Form/Elements/FormDrilldown/utilities.test.js b/client/src/components/Form/Elements/FormDrilldown/utilities.test.js
index 768c89780cb..e7851d8db81 100644
--- a/client/src/components/Form/Elements/FormDrilldown/utilities.test.js
+++ b/client/src/components/Form/Elements/FormDrilldown/utilities.test.js
@@ -59,19 +59,8 @@ describe("drilldown component utilities", () => {
                 ],
             },
         ];
-        expect(String(getAllValues(options))).toBe(String([
-            "a",
-            "b",
-            "ba",
-            "bb",
-            "bba",
-            "bbaa",
-            "aa",
-            "ab",
-            "aba",
-            "abb",
-            "abba",
-            "abaa",
-        ]));
+        expect(String(getAllValues(options))).toBe(
+            String(["a", "b", "ba", "bb", "bba", "bbaa", "aa", "ab", "aba", "abb", "abba", "abaa"])
+        );
     });
 });

From 099d11ca039db97df5ee776a2a8e456c8069240e Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 21 Apr 2023 18:09:17 +0300
Subject: [PATCH 48/51] Specify props without intermediate interface

---
 .../Elements/FormDrilldown/FormDrilldown.vue  | 23 ++++++++++---------
 .../FormDrilldown/FormDrilldownOption.vue     |  6 ++---
 2 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue b/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue
index cbb9f9d131a..3bedbf123be 100644
--- a/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue
+++ b/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue
@@ -3,17 +3,18 @@ import { computed, type ComputedRef } from "vue";
 import FormDrilldownList from "./FormDrilldownList.vue";
 import { getAllValues, type Option, type Value } from "./utilities";
 
-export interface FormDrilldownProps {
-    id: string;
-    value?: Value;
-    options: Array<Option>;
-    multiple: boolean;
-}
-
-const props = withDefaults(defineProps<FormDrilldownProps>(), {
-    value: null,
-    multiple: true,
-});
+const props = withDefaults(
+    defineProps<{
+        id: string;
+        value?: Value;
+        options: Array<Option>;
+        multiple: boolean;
+    }>(),
+    {
+        value: null,
+        multiple: true,
+    }
+);
 
 const emit = defineEmits<{
     (e: "input", value: Value): void;
diff --git a/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue b/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue
index 9d6f6c0b0e1..62163a8b06b 100644
--- a/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue
+++ b/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue
@@ -4,14 +4,12 @@ import { BFormCheckbox, BFormRadio } from "bootstrap-vue";
 import { getAllValues, type Option } from "./utilities";
 import FormDrilldownList from "./FormDrilldownList.vue";
 
-export interface Props {
+const props = defineProps<{
     currentValue: string[];
     option: Option;
     handleClick: Function;
     multiple: boolean;
-}
-
-const props = defineProps<Props>();
+}>();
 
 const showChildren = ref(false);
 

From 205364cde59411d78a623b4b7e619c2b4db2ec39 Mon Sep 17 00:00:00 2001
From: Assunta DeSanto <assuntad23@gmail.com>
Date: Mon, 24 Apr 2023 11:37:28 -0400
Subject: [PATCH 49/51] using button instead of span to improve accessibility

---
 .../Form/Elements/FormDrilldown/FormDrilldownOption.vue   | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue b/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue
index 62163a8b06b..74fd7ef1f03 100644
--- a/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue
+++ b/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue
@@ -48,10 +48,10 @@ onMounted(() => {
 
 <template>
     <div>
-        <span v-if="hasOptions" @click="toggleChildren">
-            <icon v-if="showChildren" fixed-width icon="minus-square" />
-            <icon v-else fixed-width icon="plus-square" />
-        </span>
+        <b-button variant="link" v-if="hasOptions" @click="toggleChildren" class="btn p-0">
+            <i v-if="showChildren" class="fa fa-minus-square" />
+            <i v-else class="fa fa-plus-square" />
+        </b-button>
         <component
             :is="isComponent"
             class="drilldown-option d-inline"

From 8087be938d8ba211053e09b48d0cadfd6cb7d97c Mon Sep 17 00:00:00 2001
From: Assunta DeSanto <assuntad23@gmail.com>
Date: Mon, 24 Apr 2023 12:12:08 -0400
Subject: [PATCH 50/51] adding annotation to getAllValues method

---
 .../src/components/Form/Elements/FormDrilldown/utilities.ts  | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/client/src/components/Form/Elements/FormDrilldown/utilities.ts b/client/src/components/Form/Elements/FormDrilldown/utilities.ts
index efc99bcf285..e836a28c37b 100644
--- a/client/src/components/Form/Elements/FormDrilldown/utilities.ts
+++ b/client/src/components/Form/Elements/FormDrilldown/utilities.ts
@@ -6,6 +6,11 @@ export interface Option {
 
 export type Value = string[] | string | null;
 
+/**
+ * Returns an array of values from the list of (potentially nested) options provided.
+ * @param headOptions Array of options to get values from
+ * @returns values: string[]
+ */
 export function getAllValues(headOptions: Array<Option>): string[] {
     let options = null;
     const values: string[] = [];

From 521ccdd1244899f2537bcae235b4857f3d6711a3 Mon Sep 17 00:00:00 2001
From: Assunta DeSanto <assuntad23@gmail.com>
Date: Mon, 24 Apr 2023 12:25:36 -0400
Subject: [PATCH 51/51] cleaning up linting, modifying annotation text

---
 .../Form/Elements/FormDrilldown/FormDrilldownOption.vue         | 2 +-
 client/src/components/Form/Elements/FormDrilldown/utilities.ts  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue b/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue
index 74fd7ef1f03..16bbcd0571b 100644
--- a/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue
+++ b/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue
@@ -48,7 +48,7 @@ onMounted(() => {
 
 <template>
     <div>
-        <b-button variant="link" v-if="hasOptions" @click="toggleChildren" class="btn p-0">
+        <b-button v-if="hasOptions" variant="link" class="btn p-0" @click="toggleChildren">
             <i v-if="showChildren" class="fa fa-minus-square" />
             <i v-else class="fa fa-plus-square" />
         </b-button>
diff --git a/client/src/components/Form/Elements/FormDrilldown/utilities.ts b/client/src/components/Form/Elements/FormDrilldown/utilities.ts
index e836a28c37b..887f6375cdc 100644
--- a/client/src/components/Form/Elements/FormDrilldown/utilities.ts
+++ b/client/src/components/Form/Elements/FormDrilldown/utilities.ts
@@ -7,7 +7,7 @@ export interface Option {
 export type Value = string[] | string | null;
 
 /**
- * Returns an array of values from the list of (potentially nested) options provided.
+ * Returns an array of values from nested drill down options provided
  * @param headOptions Array of options to get values from
  * @returns values: string[]
  */