use a computed to track changed history for drag drop

ahmedhamidawan · Aug 21, 2024 · 40379b8 · 40379b8
1 parent d7560df
commit 40379b8
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 6 deletions.
diff --git 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
@@ -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;