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] 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" />