Merge pull request #20442 from ahmedhamidawan/list_collection_creator_style_fixes

mvdbeek · web-flow · commit 514c169e0cb9 · 2025-06-13T21:19:01.000+02:00
[25.0] Fix inconsistent styling in List Collection Builder selector
diff --git a/client/src/components/Collections/ListCollectionCreator.vue b/client/src/components/Collections/ListCollectionCreator.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import "ui/hoverhighlight";
 
-import { faSquare } from "@fortawesome/free-regular-svg-icons";
-import { faMinus, faSortAlphaDown, faTimes, faUndo } from "@fortawesome/free-solid-svg-icons";
+import { faEdit, faSquare } from "@fortawesome/free-regular-svg-icons";
+import { faGripLines, faMinus, faSortAlphaDown, faTimes, faUndo } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BAlert } from "bootstrap-vue";
 import { computed, ref, watch } from "vue";
@@ -18,6 +18,7 @@ import { type Mode, useCollectionCreator } from "./common/useCollectionCreator";
 
 import GButton from "../BaseComponents/GButton.vue";
 import GButtonGroup from "../BaseComponents/GButtonGroup.vue";
+import GModal from "../BaseComponents/GModal.vue";
 import FormSelectMany from "../Form/Elements/FormSelectMany/FormSelectMany.vue";
 import HelpText from "../Help/HelpText.vue";
 import CollectionCreator from "@/components/Collections/common/CollectionCreator.vue";
@@ -343,12 +344,39 @@ function addUploadedFiles(files: HDASummary[]) {
     });
 }
 
+/** If we are creating a collection from a history (not a pre-selection of elements),
+ * once we have some selected elements, we provide an option to rename them in a modal.
+ */
+const canRenameElements = computed(() => {
+    return !props.fromSelection && inListElements.value.length > 0;
+});
+/** A toggle for the modal that allows renaming elements in the selected list */
+const renamingElements = ref(false);
 /** find the element in the workingElements array and update its name */
 function renameElement(element: any, name: string) {
+    // We do this whole process of removing and readding because inListElements
+    // might be reacting to changes in workingElements, and we want to
+    // prevent that from causing issues with producing duplicate elements in either list:
+
+    // first check at what index of inlistElements the element is
+    const index = inListElements.value.findIndex((e) => e.id === element.id);
+    if (index < 0) {
+        return;
+    }
+
+    // remove from inListElements
+    inListElements.value = inListElements.value.filter((e) => e.id !== element.id);
+
+    // then find the element in workingElements, and rename it
     element = workingElements.value.find((e) => e.id === element.id);
     if (element) {
         element.name = name;
     }
+
+    // now add again to inListElements at same index
+    if (index >= 0) {
+        inListElements.value.splice(index, 0, element);
+    }
 }
 
 function selectionAsHdaSummary(value: any): HDASummary {
@@ -413,11 +441,13 @@ function selectionAsHdaSummary(value: any): HDASummary {
                 :show-buttons="showButtonsForModal"
                 :collection-name="collectionName"
                 :mode="mode"
+                :can-rename-elements="canRenameElements"
                 @on-update-collection-name="onUpdateCollectionName"
                 @add-uploaded-files="addUploadedFiles"
                 @on-update-datatype-toggle="changeDatatypeFilter"
                 @onUpdateHideSourceItems="onUpdateHideSourceItems"
                 @remove-extensions-toggle="removeExtensionsToggle"
+                @clicked-rename="renamingElements = true"
                 @clicked-create="attemptCreate">
                 <template v-slot:help-content>
                     <p>
@@ -443,7 +473,7 @@ function selectionAsHdaSummary(value: any): HDASummary {
                         <li v-if="!fromSelection">
                             The filter textbox can be used to rapidly find the datasets of interest by name.
                         </li>
-                        <li>
+                        <li v-if="fromSelection">
                             {{ localize("Change the identifier of elements in the list by clicking on") }}
                             <i data-target=".collection-element .name">
                                 {{ localize("the existing name") }}
@@ -520,6 +550,24 @@ function selectionAsHdaSummary(value: any): HDASummary {
                         </i>
                         {{ localize(".") }}
                     </p>
+
+                    <p v-if="!fromSelection">
+                        <strong>
+                            {{ localize("Optional:") }}
+                        </strong>
+                        {{
+                            localize(
+                                [
+                                    "Once you have made your selection, if you wish to rename identifiers for elements in the list",
+                                    " or change/set the order in which they exist in the final list, you can click on ",
+                                ].join("")
+                            )
+                        }}
+                        <i data-target=".rename-elements">
+                            {{ localize("Rename/Reorder list elements") }}
+                        </i>
+                        {{ localize(". This opens a modal where you can perform these actions.") }}
+                    </p>
                 </template>
 
                 <template v-slot:middle-content>
@@ -646,6 +694,7 @@ function selectionAsHdaSummary(value: any): HDASummary {
                         <draggable
                             v-model="workingElements"
                             class="collection-elements scroll-container flex-row drop-zone"
+                            style="max-height: 400px"
                             chosen-class="bg-secondary">
                             <DatasetCollectionElementView
                                 v-for="element in workingElements"
@@ -669,14 +718,49 @@ function selectionAsHdaSummary(value: any): HDASummary {
                         :options="workingElements.map((e) => ({ label: e.name || '', value: e }))">
                         <template v-slot:label-area="{ value }">
                             <DatasetCollectionElementView
-                                class="w-100"
+                                text-only
+                                not-editable
                                 :element="selectionAsHdaSummary(value)"
-                                :hide-extension="!showElementExtension"
-                                @onRename="(name) => renameElement(value, name)" />
+                                :hide-extension="!showElementExtension" />
                         </template>
                     </FormSelectMany>
                 </template>
             </CollectionCreator>
+
+            <GModal
+                class="rename-elements-modal"
+                :show.sync="renamingElements"
+                fixed-height
+                size="small"
+                title="Rename and Reorder List Elements">
+                <div>
+                    <FontAwesomeIcon :icon="faEdit" fixed-width />
+                    {{ localize("Here, you can change the identifiers of the elements in the list.") }}
+                    {{
+                        localize(
+                            "The final list will then have these identifiers, and this does not modify the original datasets."
+                        )
+                    }}
+                </div>
+                <div>
+                    <FontAwesomeIcon :icon="faGripLines" fixed-width />
+                    {{ localize("Also, you can click and drag to reorder the elements in the list.") }}
+                </div>
+                <hr class="w-100 my-2" />
+                <draggable
+                    v-model="inListElements"
+                    class="collection-elements scroll-container flex-row"
+                    chosen-class="bg-secondary"
+                    @wheel.stop>
+                    <DatasetCollectionElementView
+                        v-for="value in inListElements"
+                        :key="value.id"
+                        class="w-100"
+                        :element="selectionAsHdaSummary(value)"
+                        :hide-extension="!showElementExtension"
+                        @onRename="(name) => renameElement(value, name)" />
+                </draggable>
+            </GModal>
         </div>
     </div>
 </template>
@@ -686,6 +770,15 @@ function selectionAsHdaSummary(value: any): HDASummary {
 @import "theme/blue.scss";
 
 .list-collection-creator {
+    .rename-elements-modal {
+        .collection-element {
+            cursor: grab;
+            &:focus {
+                cursor: grabbing;
+            }
+        }
+    }
+
     .footer {
         margin-top: 8px;
     }
@@ -709,7 +802,6 @@ function selectionAsHdaSummary(value: any): HDASummary {
     }
 
     .collection-elements {
-        max-height: 400px;
         border: 0px solid lightgrey;
         overflow-y: auto;
         overflow-x: hidden;
@@ -732,11 +824,6 @@ function selectionAsHdaSummary(value: any): HDASummary {
                 border-color: black;
             }
         }
-        &:not(.with-actions) {
-            &:hover {
-                border: none;
-            }
-        }
 
         &:last-of-type {
             margin-bottom: 2px;
diff --git a/client/src/components/Collections/ListDatasetCollectionElementView.vue b/client/src/components/Collections/ListDatasetCollectionElementView.vue
@@ -14,7 +14,8 @@ interface Props {
     hasActions?: boolean;
     notEditable?: boolean;
     hideExtension?: boolean;
-    showHid?: boolean;
+    hideHid?: boolean;
+    textOnly?: boolean;
 }
 
 const props = defineProps<Props>();
@@ -45,15 +46,16 @@ watch(
 
 <template>
     <div
-        class="collection-element d-flex justify-content-between"
+        class="d-flex justify-content-between"
         :data-hid="element.hid"
-        :class="{ 'with-actions': hasActions }"
+        :class="{ 'collection-element': !textOnly, 'with-actions': hasActions }"
         role="button"
+        data-description="list dataset collection element"
         tabindex="0"
         @keyup.enter="emit('element-is-selected', element)"
         @click="emit('element-is-selected', element)">
         <span class="d-flex flex-gapx-1">
-            <span v-if="element.hid ?? true">{{ element.hid }}:</span>
+            <span v-if="!hideHid && (element.hid ?? true)">{{ element.hid }}:</span>
             <strong>
                 <ClickToEdit v-if="!notEditable" v-model="elementName" :title="localize('Click to rename')" />
                 <span v-else>{{ elementName }}</span>
diff --git a/client/src/components/Collections/common/CollectionCreator.vue b/client/src/components/Collections/common/CollectionCreator.vue
@@ -36,6 +36,7 @@ interface Props {
     showButtons?: boolean;
     collectionName: string;
     mode: "wizard" | "modal";
+    canRenameElements?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -46,12 +47,14 @@ const props = withDefaults(defineProps<Props>(), {
     collectionType: undefined,
     showButtons: true,
     mode: "modal",
+    canRenameElements: false,
 });
 
 const emit = defineEmits<{
     (e: "on-update-collection-name", name: string): void;
     (e: "remove-extensions-toggle"): void;
     (e: "clicked-create", value: string): void;
+    (e: "clicked-rename"): void;
     (e: "onUpdateHideSourceItems", value: boolean): void;
     (e: "on-update-datatype-toggle", value: "all" | "datatype" | "ext"): void;
     (e: "add-uploaded-files", value: HDASummary[]): void;
@@ -196,9 +199,11 @@ watch(
                         <CollectionCreatorFooterButtons
                             v-if="showButtons"
                             :short-what-is-being-created="shortWhatIsBeingCreated"
+                            :can-rename-elements="props.canRenameElements"
                             :valid-input="validInput"
                             @clicked-cancel="cancelCreate"
-                            @clicked-create="emit('clicked-create', collectionName)" />
+                            @clicked-create="emit('clicked-create', collectionName)"
+                            @clicked-rename="emit('clicked-rename')" />
                     </div>
                 </div>
             </BTab>
diff --git a/client/src/components/Collections/common/CollectionCreatorFooterButtons.vue b/client/src/components/Collections/common/CollectionCreatorFooterButtons.vue
@@ -6,12 +6,14 @@ import GButton from "@/components/BaseComponents/GButton.vue";
 interface Props {
     validInput: boolean;
     shortWhatIsBeingCreated: string;
+    canRenameElements?: boolean;
 }
 
 defineProps<Props>();
 
 const emit = defineEmits<{
     (e: "clicked-create"): void;
+    (e: "clicked-rename"): void;
     (e: "clicked-cancel"): void;
 }>();
 </script>
@@ -22,8 +24,18 @@ const emit = defineEmits<{
             {{ localize("Cancel") }}
         </GButton>
 
-        <GButton class="create-collection" color="blue" :disabled="!validInput" @click="emit('clicked-create')">
-            {{ localize("Create " + shortWhatIsBeingCreated) }}
-        </GButton>
+        <span>
+            <GButton
+                v-if="canRenameElements"
+                class="rename-elements"
+                size="small"
+                :disabled="!validInput"
+                @click="emit('clicked-rename')">
+                {{ localize("Rename/Reorder " + shortWhatIsBeingCreated) + " elements" }}
+            </GButton>
+            <GButton class="create-collection" color="blue" :disabled="!validInput" @click="emit('clicked-create')">
+                {{ localize("Create " + shortWhatIsBeingCreated) }}
+            </GButton>
+        </span>
     </div>
 </template>
diff --git a/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue b/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
@@ -472,6 +472,7 @@ const selectedCount = computed(() => {
     }
 
     .toggle-button {
+        display: block;
         padding-left: 0;
         padding-right: 0;
     }
diff --git a/client/src/components/Form/utilities.js b/client/src/components/Form/utilities.js
@@ -154,7 +154,7 @@ export function validateInputs(index, values, allowEmptyValueOnRequiredInput = f
             } else if (batchN !== n) {
                 return [
                     inputId,
-                    `Please make sure that you select the same number of inputs for all batch mode fields. This field contains <b>${n}</b> selection(s) while a previous field contains <b>${batchN}</b>.`,
+                    `Please make sure that you select the same number of inputs for all batch mode fields. This field contains ${n} selection(s) while a previous field contains ${batchN}.`,
                 ];
             }
         }
diff --git a/client/src/utils/navigation/navigation.yml b/client/src/utils/navigation/navigation.yml
@@ -729,7 +729,7 @@ workflow_run:
         _: '[data-label="${label}"] .tabs'
         create: '${_} .create-collection'
         select_all: "${_} [data-description='select many select all']"
-        element_by_hid: "${_} .collection-element[data-hid='${hid}']"
+        element_by_hid: "${_} [data-description='list dataset collection element'][data-hid='${hid}']"
         <<: *upload_mixin
 
   form_element:

Original file line number	Diff line number	Diff line change
`@@ -472,6 +472,7 @@ const selectedCount = computed(() => {`
`472`	`472`	`}`
`473`	`473`
`474`	`474`	`.toggle-button {`
	`475`	`+ display: block;`
`475`	`476`	`padding-left: 0;`
`476`	`477`	`padding-right: 0;`
`477`	`478`	`}`
Original file line number	Diff line number	Diff line change
`@@ -154,7 +154,7 @@ export function validateInputs(index, values, allowEmptyValueOnRequiredInput = f`
`154`	`154`	`} else if (batchN !== n) {`
`155`	`155`	`return [`
`156`	`156`	`inputId,`
`157`		- `Please make sure that you select the same number of inputs for all batch mode fields. This field contains <b>${n}</b> selection(s) while a previous field contains <b>${batchN}</b>.`,
	`157`	+ `Please make sure that you select the same number of inputs for all batch mode fields. This field contains ${n} selection(s) while a previous field contains ${batchN}.`,
`158`	`158`	`];`
`159`	`159`	`}`
`160`	`160`	`}`