From d6ad264a940b4d3db87c10d9a872968d83d63b10 Mon Sep 17 00:00:00 2001
From: aidahosa1 <aisosa_idahosa@brown.edu>
Date: Mon, 17 Jun 2024 12:33:51 -0400
Subject: sigh

---
 .../views/collections/CollectionCardDeckView.tsx   | 33 +++++++++++++++++++++-
 1 file changed, 32 insertions(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/client/views/collections/CollectionCardDeckView.tsx b/src/client/views/collections/CollectionCardDeckView.tsx
index bf814cb31..7362a65ae 100644
--- a/src/client/views/collections/CollectionCardDeckView.tsx
+++ b/src/client/views/collections/CollectionCardDeckView.tsx
@@ -49,6 +49,8 @@ export class CollectionCardView extends CollectionSubView() {
     _draggerRef = React.createRef<HTMLDivElement>();
     @observable _maxRowCount = 10;
     @observable docsBeingDragged: number[] = [];
+    @observable draggedIndex: number = -1;
+    @observable overIndex: number = -1;
 
     static getButtonGroup(groupFieldKey: 'chat' | 'star' | 'idea' | 'like', doc: Doc): number | undefined {
         return Cast(doc[groupFieldKey], 'number', null);
@@ -491,6 +493,35 @@ export class CollectionCardView extends CollectionSubView() {
                 return <FontAwesomeIcon icon = 'star' size= 'lg' style = {{color: isActive ? '#4476f7' : '#323232'}}/>;
         }
     };
+
+    @action
+onDragStart = (index: number) => {
+    this.draggedIndex = index;
+};
+
+@action
+onDragOver = (index: number) => {
+    if (this.draggedIndex !== index) {
+        this.overIndex = index;
+    }
+};
+
+@action
+onDrop = () => {
+    if (this.draggedIndex !== -1 && this.overIndex !== -1) {
+        const draggedDoc = this.sortedDocs[this.draggedIndex];
+        this.sortedDocs.splice(this.draggedIndex, 1);
+        this.sortedDocs.splice(this.overIndex, 0, draggedDoc);
+        this.draggedIndex = -1;
+        this.overIndex = -1;
+    }
+};
+
+@action
+onDragEnd = () => {
+    this.draggedIndex = -1;
+    this.overIndex = -1;
+};
     /**
      * Actually renders all the cards
      */
@@ -523,7 +554,7 @@ export class CollectionCardView extends CollectionSubView() {
             return (
                 <div
                     key={doc[Id]}
-                    className={`card-item${isSelected ? '-active' : anySelected ? '-inactive' : ''}`}
+                    className={`card-item${isSelected ? '-active' : anySelected ? '-inactive' : ''}`}                    
                     onPointerUp={() => {
                         // this turns off documentDecorations during a transition, then turns them back on afterward.
                         SnappingManager.SetIsResizing(this.Document[Id]);
-- 
cgit v1.2.3-70-g09d2