From 40379b88b8b8df28888ff21d1d4d05efad37af6a Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Wed, 21 Aug 2024 17:53:32 -0500
Subject: [PATCH] use a computed to track changed history for drag drop

---
 .../History/CurrentHistory/HistoryPanel.vue    |  3 ++-
 client/src/composables/historyDragDrop.ts      | 18 +++++++++++++-----
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/client/src/components/History/CurrentHistory/HistoryPanel.vue b/client/src/components/History/CurrentHistory/HistoryPanel.vue
index 1e233e7f1404..a218ed720a69 100644
--- a/client/src/components/History/CurrentHistory/HistoryPanel.vue
+++ b/client/src/components/History/CurrentHistory/HistoryPanel.vue
@@ -88,7 +88,8 @@ const historyStore = useHistoryStore();
 const historyItemsStore = useHistoryItemsStore();
 const { currentUser } = storeToRefs(useUserStore());
 
-const { showDropZone, onDragEnter, onDragLeave, onDragOver, onDrop } = useHistoryDragDrop(props.history.id);
+const historyIdComputed = computed(() => props.history.id);
+const { showDropZone, onDragEnter, onDragLeave, onDragOver, onDrop } = useHistoryDragDrop(historyIdComputed);
 
 const currentUserOwnsHistory = computed(() => {
     return userOwnsHistory(currentUser.value, props.history);
diff --git a/client/src/composables/historyDragDrop.ts b/client/src/composables/historyDragDrop.ts
index 966c4a4fa42c..fc17157161bf 100644
--- a/client/src/composables/historyDragDrop.ts
+++ b/client/src/composables/historyDragDrop.ts
@@ -9,7 +9,14 @@ import { useHistoryStore } from "@/stores/historyStore";
 type DraggableHistoryItem = HistoryItemSummary | DCEDataset; // TODO: DCESummary instead of DCEDataset
 
 export function useHistoryDragDrop(targetHistoryId?: Ref<string> | string, createNew = false, pinHistories = false) {
-    const destinationHistoryId = unref(targetHistoryId);
+    // convert destinationHistoryId to a ref if it's not already
+    const destinationHistoryId = computed(() => {
+        if (typeof targetHistoryId === "string") {
+            return targetHistoryId;
+        }
+        return unref(targetHistoryId);
+    });
+
     const eventStore = useEventStore();
     const historyStore = useHistoryStore();
 
@@ -29,8 +36,8 @@ export function useHistoryDragDrop(targetHistoryId?: Ref<string> | string, creat
     const operationDisabled = computed(
         () =>
             !fromHistoryId.value ||
-            (destinationHistoryId && fromHistoryId.value === destinationHistoryId) ||
-            (!createNew && !destinationHistoryId) ||
+            (destinationHistoryId.value && fromHistoryId.value === destinationHistoryId.value) ||
+            (!createNew && !destinationHistoryId.value) ||
             !getDragItems().length ||
             processingDrop.value
     );
@@ -44,6 +51,7 @@ export function useHistoryDragDrop(targetHistoryId?: Ref<string> | string, creat
     }
 
     function onDragEnter(e: DragEvent) {
+        console.log("onDragEnter", fromHistoryId.value, destinationHistoryId.value);
         if (operationDisabled.value) {
             return;
         }
@@ -83,8 +91,8 @@ export function useHistoryDragDrop(targetHistoryId?: Ref<string> | string, creat
             const originalHistoryId = fromHistoryId.value as string;
 
             let historyId;
-            if (destinationHistoryId) {
-                historyId = destinationHistoryId;
+            if (destinationHistoryId.value) {
+                historyId = destinationHistoryId.value;
             } else if (createNew) {
                 await historyStore.createNewHistory();
                 historyId = historyStore.currentHistoryId;