Refactor drag and drop logic to use getDragItems

This commit refactors the drag and drop logic in the HistoryPanel.vue and MultipleViewList.vue components to use the newly added getDragItems function in the eventStore. This function retrieves the drag items and filters out any non-history items, ensuring that only valid history items are processed during the drop event. This change improves code readability and reduces duplication.
galaxyproject · Jun 3, 2024 · ba01c12 · ba01c12
1 parent a9bc8c4
commit ba01c12
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 47 deletions.
diff --git a/client/src/api/index.ts b/client/src/api/index.ts
@@ -211,6 +211,10 @@ export function isHistorySummaryExtended(history: AnyHistory): history is Histor
     return "contents_active" in history && "user_id" in history;
 }
 
+export function isHistoryItem(item: object): item is HistoryItemSummary {
+    return item && "history_content_type" in item;
+}
+
 type QuotaUsageResponse = components["schemas"]["UserQuotaUsage"];
 
 /** Represents a registered user.**/

diff --git a/client/src/components/History/CurrentHistory/HistoryPanel.vue b/client/src/components/History/CurrentHistory/HistoryPanel.vue
@@ -3,7 +3,7 @@ import { BAlert } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, onMounted, type Ref, ref, set as VueSet, unref, watch } from "vue";
 
-import { type HistoryItemSummary, type HistorySummaryExtended, userOwnsHistory } from "@/api";
+import { type HistoryItemSummary, type HistorySummaryExtended, isHistoryItem, userOwnsHistory } from "@/api";
 import { copyDataset } from "@/api/datasets";
 import ExpandedItems from "@/components/History/Content/ExpandedItems";
 import SelectedItems from "@/components/History/Content/SelectedItems";
@@ -225,28 +225,11 @@ function dragSameHistory() {
 
 function getDragData() {
     const eventStore = useEventStore();
-    const multiple = eventStore.multipleDragData;
-    let data: HistoryItemSummary[] | undefined;
-    let historyId: string | undefined;
-    try {
-        if (multiple) {
-            const dragData = eventStore.getDragData() as Record<string, HistoryItemSummary>;
-            // set historyId to the first history_id in the multiple drag data
-            const firstItem = Object.values(dragData)[0];
-            if (firstItem) {
-                historyId = firstItem.history_id;
-            }
-            data = Object.values(dragData);
-        } else {
-            data = [eventStore.getDragData() as HistoryItemSummary];
-            if (data[0]) {
-                historyId = data[0].history_id;
-            }
-        }
-    } catch (error) {
-        // this was not a valid object for this dropzone, ignore
-    }
-    return { data, sameHistory: historyId === props.history.id, multiple };
+    const dragItems = eventStore.getDragItems();
+    // Filter out any non-history items
+    const historyItems = dragItems?.filter((item: any) => isHistoryItem(item)) as HistoryItemSummary[];
+    const historyId = historyItems?.[0]?.history_id;
+    return { data: historyItems, sameHistory: historyId === props.history.id, multiple: historyItems?.length > 1 };
 }
 
 function getHighlight(item: HistoryItemSummary) {

diff --git a/client/src/components/History/Multiple/MultipleViewList.vue b/client/src/components/History/Multiple/MultipleViewList.vue
@@ -6,7 +6,7 @@ import { computed, type Ref, ref } from "vue";
 //@ts-ignore missing typedefs
 import VirtualList from "vue-virtual-scroll-list";
 
-import { HistoryItemSummary } from "@/api";
+import { HistoryItemSummary, isHistoryItem } from "@/api";
 import { copyDataset } from "@/api/datasets";
 import { useAnimationFrameResizeObserver } from "@/composables/sensors/animationFrameResizeObserver";
 import { useAnimationFrameScroll } from "@/composables/sensors/animationFrameScroll";
@@ -75,37 +75,21 @@ async function onDrop(evt: any) {
     }
     processingDrop.value = true;
     showDropZone.value = false;
-    let data: HistoryItemSummary[] | undefined;
-    let originalHistoryId: string | undefined;
-    const multiple = eventStore.multipleDragData;
-    try {
-        if (multiple) {
-            const dragData = eventStore.getDragData() as Record<string, HistoryItemSummary>;
-            // set originalHistoryId to the first history_id in the multiple drag data
-            const firstItem = Object.values(dragData)[0];
-            if (firstItem) {
-                originalHistoryId = firstItem.history_id;
-            }
-            data = Object.values(dragData);
-        } else {
-            data = [eventStore.getDragData() as HistoryItemSummary];
-            if (data[0]) {
-                originalHistoryId = data[0].history_id;
-            }
-        }
-    } catch (error) {
-        // this was not a valid object for this dropzone, ignore
-    }
+    const dragItems = eventStore.getDragItems();
+    // Filter out any non-history items
+    const historyItems = dragItems?.filter((item: any) => isHistoryItem(item)) as HistoryItemSummary[];
+    const multiple = historyItems.length > 1;
+    const originalHistoryId = historyItems?.[0]?.history_id;
 
-    if (data && originalHistoryId) {
+    if (historyItems && originalHistoryId) {
         await historyStore.createNewHistory();
         const currentHistoryId = historyStore.currentHistoryId;
 
         let datasetCount = 0;
         let collectionCount = 0;
         if (currentHistoryId) {
             // iterate over the data array and copy each item to the new history
-            for (const item of data) {
+            for (const item of historyItems) {
                 const dataSource = item.history_content_type === "dataset" ? "hda" : "hdca";
                 await copyDataset(item.id, currentHistoryId, item.history_content_type, dataSource)
                     .then(() => {