add icon for multiple collections to FormData

Author: ahmedhamidawan

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { faFolder } from "@fortawesome/free-regular-svg-icons";
 import { faCaretDown, faEye, faPlus, faSpinner, faUpload } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BButton, BButtonGroup, BDropdown, BDropdownItem } from "bootstrap-vue";
@@ -59,8 +60,13 @@ function createCollectionType(colType: string) {
                 v-b-tooltip.hover.bottom
                 :pressed="props.currentField === index"
                 :title="v.tooltip"
+                :style="v.icon === faFolder && v.multiple ? 'padding-bottom: 2px' : ''"
                 @click="emit('set-current-field', index)">
-                <FontAwesomeIcon :icon="['far', v.icon]" />
+                <span v-if="v.icon === faFolder && v.multiple" style="position: relative; display: inline-block">
+                    <FontAwesomeIcon :icon="faFolder" size="sm" style="position: absolute; left: 2px" />
+                    <FontAwesomeIcon :icon="faFolder" size="sm" />
+                </span>
+                <FontAwesomeIcon v-else :icon="v.icon" />
             </BButton>
             <BButton
                 v-if="props.canBrowse && !props.workflowRun"

client/src/components/Form/Elements/FormData/variants.ts

@@ -1,7 +1,10 @@
+import { faCopy, faFile, faFolder } from "@fortawesome/free-regular-svg-icons";
+import type { IconDefinition } from "font-awesome-6";
+
 /** Data input variations interface */
 export interface VariantInterface {
     batch: string;
-    icon: string;
+    icon: IconDefinition;
     library?: boolean;
     multiple: boolean;
     src: string;
@@ -19,22 +22,22 @@ export const VARIANTS: Record<string, Array<VariantInterface>> = {
     data: [
         {
             src: SOURCE.DATASET,
-            icon: "fa-file",
+            icon: faFile,
             tooltip: "Single dataset",
             library: true,
             multiple: false,
             batch: BATCH.DISABLED,
         },
         {
             src: SOURCE.DATASET,
-            icon: "fa-copy",
+            icon: faCopy,
             tooltip: "Multiple datasets",
             multiple: true,
             batch: BATCH.LINKED,
         },
         {
             src: SOURCE.COLLECTION,
-            icon: "fa-folder",
+            icon: faFolder,
             tooltip: "Dataset collection",
             multiple: false,
             batch: BATCH.LINKED,
@@ -43,15 +46,15 @@ export const VARIANTS: Record<string, Array<VariantInterface>> = {
     data_multiple: [
         {
             src: SOURCE.DATASET,
-            icon: "fa-copy",
+            icon: faCopy,
             tooltip: "Multiple datasets",
             library: true,
             multiple: true,
             batch: BATCH.DISABLED,
         },
         {
             src: SOURCE.COLLECTION,
-            icon: "fa-folder",
+            icon: faFolder,
             tooltip: "Dataset collection",
             multiple: true,
             batch: BATCH.DISABLED,
@@ -60,7 +63,7 @@ export const VARIANTS: Record<string, Array<VariantInterface>> = {
     data_collection: [
         {
             src: SOURCE.COLLECTION,
-            icon: "fa-folder",
+            icon: faFolder,
             tooltip: "Dataset collection",
             multiple: false,
             batch: BATCH.DISABLED,
@@ -69,7 +72,7 @@ export const VARIANTS: Record<string, Array<VariantInterface>> = {
     workflow_data: [
         {
             src: SOURCE.DATASET,
-            icon: "fa-file",
+            icon: faFile,
             tooltip: "Single dataset",
             multiple: false,
             batch: BATCH.DISABLED,
@@ -78,7 +81,7 @@ export const VARIANTS: Record<string, Array<VariantInterface>> = {
     workflow_data_multiple: [
         {
             src: SOURCE.DATASET,
-            icon: "fa-copy",
+            icon: faCopy,
             tooltip: "Multiple datasets",
             multiple: true,
             batch: BATCH.DISABLED,
@@ -87,7 +90,7 @@ export const VARIANTS: Record<string, Array<VariantInterface>> = {
     workflow_data_collection: [
         {
             src: SOURCE.COLLECTION,
-            icon: "fa-folder",
+            icon: faFolder,
             tooltip: "Dataset collection",
             multiple: false,
             batch: BATCH.DISABLED,
@@ -96,14 +99,14 @@ export const VARIANTS: Record<string, Array<VariantInterface>> = {
     module_data: [
         {
             src: SOURCE.DATASET,
-            icon: "fa-file",
+            icon: faFile,
             tooltip: "Single dataset",
             multiple: false,
             batch: BATCH.DISABLED,
         },
         {
             src: SOURCE.DATASET,
-            icon: "fa-copy",
+            icon: faCopy,
             tooltip: "Multiple datasets",
             multiple: true,
             batch: BATCH.ENABLED,
@@ -112,14 +115,14 @@ export const VARIANTS: Record<string, Array<VariantInterface>> = {
     module_data_collection: [
         {
             src: SOURCE.COLLECTION,
-            icon: "fa-folder",
+            icon: faFolder,
             tooltip: "Dataset collection",
             multiple: false,
             batch: BATCH.DISABLED,
         },
         {
             src: SOURCE.COLLECTION,
-            icon: "fa-folder",
+            icon: faFolder,
             tooltip: "Multiple collections",
             multiple: true,
             batch: BATCH.ENABLED,