Merge pull request #17990 from ahmedhamidawan/use_select_many_in_tool_form

[24.0] Use the new column-select component in `FormData` for multiple select

client/src/components/Form/Elements/FormData/FormData.vue

@@ -14,6 +14,7 @@ import { orList } from "@/utils/strings";
 import type { DataOption } from "./types";
 import { BATCH, SOURCE, VARIANTS } from "./variants";
 
+import FormSelection from "../FormSelection.vue";
 import FormSelect from "@/components/Form/Elements/FormSelect.vue";
 
 library.add(faCopy, faFile, faFolder, faCaretDown, faCaretUp, faExclamation, faLink, faUnlink);
@@ -502,7 +503,7 @@ const noOptionsWarningMessage = computed(() => {
         </div>
 
         <FormSelect
-            v-if="currentVariant"
+            v-if="currentVariant && !currentVariant.multiple"
             v-model="currentValue"
             class="align-self-start"
             :multiple="currentVariant.multiple"
@@ -515,6 +516,12 @@ const noOptionsWarningMessage = computed(() => {
                 </BAlert>
             </template>
         </FormSelect>
+        <FormSelection
+            v-else-if="currentVariant?.multiple"
+            v-model="currentValue"
+            :data="formattedOptions"
+            optional
+            multiple />
 
         <template v-if="currentVariant && currentVariant.batch !== BATCH.DISABLED">
             <BFormCheckbox

client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue

@@ -65,7 +65,13 @@ const searchRegex = computed(() => {
 /** Wraps value prop so it can be set, and always returns an array */
 const selected = computed({
     get() {
-        return Array.isArray(props.value) ? props.value : [props.value];
+        if (props.value === null) {
+            return [];
+        } else if (Array.isArray(props.value)) {
+            return props.value;
+        } else {
+            return [props.value];
+        }
     },
     set(value) {
         emit("input", value);
@@ -142,7 +148,15 @@ async function deselectOption(event: MouseEvent, index: number) {
         const [option] = selectedOptionsFiltered.value.splice(index, 1);
 
         if (option) {
-            const i = selected.value.indexOf(option.value);
+            const i = selected.value.findIndex((selectedValue) => {
+                if (typeof selectedValue === "string") {
+                    return selectedValue === option.value;
+                } else if (typeof selectedValue === "object" && typeof option.value === "object") {
+                    // in case values are objects, compare their ids (if they have the 'id' property)
+                    return selectedValue?.id === option.value?.id;
+                }
+                return false;
+            });
             selected.value = selected.value.flatMap((value, index) => (index === i ? [] : [value]));
         }
 

client/src/components/Form/Elements/FormSelection.vue

@@ -82,7 +82,10 @@ watch(
         }
 
         if (newValue === "none") {
-            if ((Array.isArray(props.value) && props.value.length >= 15) || props.options.length >= 500) {
+            if (
+                (Array.isArray(props.value) && props.value.length >= 15) ||
+                (props.options && props.options.length >= 500)
+            ) {
                 useMany.value = true;
             } else {
                 useMany.value = false;