Merge pull request #18194 from ahmedhamidawan/replace_multiselect_lab…

…el_with_icon [24.0] Replace `Multiselect` `selectLabel` with icons in `FormSelect`
galaxyproject · May 23, 2024 · 3a89e74 · 3a89e74
2 parents 825a045 + 659c2fa
commit 3a89e74
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 12 deletions.
diff --git a/client/src/components/Form/Elements/FormSelect.test.js b/client/src/components/Form/Elements/FormSelect.test.js
@@ -25,7 +25,7 @@ const defaultOptions = [
 
 function testDefaultOptions(wrapper) {
     const target = wrapper.findComponent(MountTarget);
-    const options = target.findAll("li > span > span");
+    const options = target.findAll("li > span > div");
     expect(options.length).toBe(4);
     for (let i = 0; i < options.length; i++) {
         expect(options.at(i).text()).toBe(`label_${i + 1}`);
@@ -52,7 +52,7 @@ describe("FormSelect", () => {
             optional: true,
         });
         const target = wrapper.findComponent(MountTarget);
-        const options = target.findAll("li > span > span");
+        const options = target.findAll("li > span > div");
         expect(options.length).toBe(5);
         expect(options.at(0).text()).toBe("Nothing selected");
         const selectedDefault = wrapper.find(".multiselect__option--selected");

diff --git a/client/src/components/Form/Elements/FormSelect.vue b/client/src/components/Form/Elements/FormSelect.vue
@@ -1,10 +1,15 @@
 <script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faCheckSquare, faSquare } from "@fortawesome/free-regular-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { computed, type ComputedRef, onMounted, type PropType, watch } from "vue";
 import Multiselect from "vue-multiselect";
 
 import { useMultiselect } from "@/composables/useMultiselect";
 import { uid } from "@/utils/utils";
 
+library.add(faCheckSquare, faSquare);
+
 const { ariaExpanded, onOpen, onClose } = useMultiselect();
 
 type SelectValue = Record<string, unknown> | string | number | null;
@@ -70,13 +75,6 @@ const reorderedOptions = computed(() => {
     }
 });
 
-/**
- * Configure deselect label
- */
-const deselectLabel: ComputedRef<string> = computed(() => {
-    return props.multiple ? "Click to remove" : "";
-});
-
 /**
  * Tracks if the select field has options
  */
@@ -163,16 +161,24 @@ onMounted(() => {
             :aria-expanded="ariaExpanded"
             :close-on-select="!multiple"
             :disabled="disabled"
-            :deselect-label="deselectLabel"
+            :deselect-label="null"
             label="label"
             :multiple="multiple"
             :options="reorderedOptions"
             :placeholder="placeholder"
             :selected-label="selectedLabel"
-            select-label="Click to select"
+            :select-label="null"
             track-by="value"
             @open="onOpen"
-            @close="onClose" />
+            @close="onClose">
+            <template v-slot:option="{ option }">
+                <div class="d-flex align-items-center justify-content-between">
+                    <span>{{ option.label }}</span>
+                    <FontAwesomeIcon v-if="selectedValues.includes(option.value)" :icon="faCheckSquare" />
+                    <FontAwesomeIcon v-else :icon="faSquare" />
+                </div>
+            </template>
+        </Multiselect>
         <slot v-else name="no-options">
             <b-alert v-localize class="w-100" variant="warning" show> No options available. </b-alert>
         </slot>