Merge pull request #16644 from ahmedhamidawan/multi_history_drag_create

History MultiView drag-drop on history picker creates new history

client/src/components/History/Multiple/MultipleViewList.vue

@@ -3,12 +3,19 @@ import { computed, type Ref, ref } from "vue";
 //@ts-ignore missing typedefs
 import VirtualList from "vue-virtual-scroll-list";
 
+import { copyDataset } from "@/components/Dataset/services";
 import { useAnimationFrameResizeObserver } from "@/composables/sensors/animationFrameResizeObserver";
 import { useAnimationFrameScroll } from "@/composables/sensors/animationFrameScroll";
+import { Toast } from "@/composables/toast";
 import type { HistorySummary } from "@/stores/historyStore";
+import { useHistoryStore } from "@/stores/historyStore";
+import localize from "@/utils/localization";
 
+import HistoryDropZone from "../CurrentHistory/HistoryDropZone.vue";
 import MultipleViewItem from "./MultipleViewItem.vue";
 
+const historyStore = useHistoryStore();
+
 const props = withDefaults(
     defineProps<{
         histories: HistorySummary[];
@@ -30,6 +37,47 @@ useAnimationFrameResizeObserver(scrollContainer, ({ clientSize, scrollSize }) =>
 
 const scrolledLeft = computed(() => !isScrollable.value || arrived.left);
 const scrolledRight = computed(() => !isScrollable.value || arrived.right);
+
+const showDropZone = ref(false);
+const historyPickerText = computed(() =>
+    showDropZone.value ? localize("Create new history with this item") : localize("Select histories")
+);
+const processingDrop = ref(false);
+async function onDrop(evt: any) {
+    if (processingDrop.value) {
+        showDropZone.value = false;
+        return;
+    }
+    processingDrop.value = true;
+    showDropZone.value = false;
+    let data: any;
+    try {
+        data = JSON.parse(evt.dataTransfer.getData("text"))[0];
+    } catch (error) {
+        // this was not a valid object for this dropzone, ignore
+    }
+    if (data) {
+        await historyStore.createNewHistory();
+        const currentHistoryId = historyStore.currentHistoryId;
+        const dataSource = data.history_content_type === "dataset" ? "hda" : "hdca";
+        if (currentHistoryId) {
+            await copyDataset(data.id, currentHistoryId, data.history_content_type, dataSource)
+                .then(() => {
+                    if (data.history_content_type === "dataset") {
+                        Toast.info(localize("Dataset copied to new history"));
+                    } else {
+                        Toast.info(localize("Collection copied to new history"));
+                    }
+                    historyStore.loadHistoryById(currentHistoryId);
+                })
+                .catch((error) => {
+                    Toast.error(error);
+                });
+            historyStore.pinHistory(currentHistoryId);
+        }
+        processingDrop.value = false;
+    }
+}
 </script>
 
 <template>
@@ -50,9 +98,14 @@ const scrolledRight = computed(() => !isScrollable.value || arrived.right);
             </VirtualList>
 
             <div
-                class="history-picker text-primary d-flex m-3 p-5 align-items-center text-nowrap"
-                @click.stop="$emit('update:show-modal', true)">
-                Select histories
+                class="history-picker text-primary d-flex m-3 align-items-center text-nowrap"
+                @click.stop="$emit('update:show-modal', true)"
+                @drop.prevent="onDrop"
+                @dragenter.prevent="showDropZone = true"
+                @dragover.prevent
+                @dragleave.prevent="showDropZone = false">
+                {{ historyPickerText }}
+                <HistoryDropZone v-if="showDropZone" style="left: 0" />
             </div>
         </div>
     </div>
@@ -63,6 +116,9 @@ const scrolledRight = computed(() => !isScrollable.value || arrived.right);
     .history-picker {
         border: dotted lightgray;
         cursor: pointer;
+        width: 15rem;
+        position: relative;
+        justify-content: center;
     }
 
     position: relative;