Unverified Commit 88dcb255 authored by Marius van den Beek's avatar Marius van den Beek Committed by GitHub
Browse files

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
parents 853a645a f6e19c39

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

+8 −1
Original line number Diff line number Diff line
@@ -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

+16 −2
Original line number Diff line number Diff line
@@ -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

+4 −1
Original line number Diff line number Diff line
@@ -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;