Unverified Commit 47c97fde authored by davelopez's avatar davelopez
Browse files

Use getter for options and refactor

parent dad749d4

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

+10 −5
Original line number Diff line number Diff line
@@ -2,6 +2,7 @@ 
import { library } from "@fortawesome/fontawesome-svg-core";

import { faCheckSquare, faSquare } from "@fortawesome/free-regular-svg-icons";

import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";

import { toValue } from "@vueuse/core";

import { computed, type ComputedRef, onMounted, type PropType, ref, watch } from "vue";

import Multiselect from "vue-multiselect";
@@ -56,8 +57,7 @@ const emit = defineEmits<{ 
}>();



const filter = ref("");

const options = computed(() => props.options);

const filteredOptions = useFilterObjectArray(options.value, filter, ["label", ["value", "tags"]]);

const filteredOptions = filterByLabelAndTag();



/**

 * When there are more options than this, push selected options to the end
@@ -87,7 +87,7 @@ const reorderedOptions = computed(() => { 
 * Tracks if the select field has options

 */

const hasOptions: ComputedRef<Boolean> = computed(() => {

    return options.value.length > 0;

    return props.options.length > 0;

});



/**
@@ -95,7 +95,7 @@ const hasOptions: ComputedRef<Boolean> = computed(() => { 
 */

const initialValue: ComputedRef<SelectValue> = computed(() => {

    if (props.value === null && !props.optional && hasOptions.value) {

        const v = options.value[0];

        const v = props.options[0];

        if (v) {

            return v.value;

        }
@@ -119,7 +119,7 @@ const selectedValues = computed(() => (Array.isArray(props.value) ? props.value 
 * Tracks current value and emits changes

 */

const currentValue = computed({

    get: () => options.value.filter((option: SelectOption) => selectedValues.value.includes(option.value)),

    get: () => props.options.filter((option: SelectOption) => selectedValues.value.includes(option.value)),

    set: (val: Array<SelectOption> | SelectOption): void => {

        if (Array.isArray(val)) {

            if (val.length > 0) {
@@ -149,6 +149,7 @@ function setInitialValue(): void { 
watch(

    () => props.options,

    () => {

        filteredOptions.value = toValue(filterByLabelAndTag());

        setInitialValue();

    }

);
@@ -160,6 +161,10 @@ onMounted(() => { 
    setInitialValue();

});



function filterByLabelAndTag() {

    return useFilterObjectArray(() => props.options, filter, ["label", ["value", "tags"]]);

}



function isValueWithTags(item: SelectValue): item is ValueWithTags {

    return item !== null && typeof item === "object" && (item as ValueWithTags).tags !== undefined;

}