drag and drop rows works, needs cleaning up

3 files changed, 54 insertions, 39 deletions

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
index 0f4053127..5ead99c02 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
@@ -2,6 +2,7 @@
 
 .collectionSchemaView {
     cursor: default;
+    height: 100%;
 
     .schema-table {
         background-color: $white;
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 9ca1644e3..dc0cd8eac 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -1,18 +1,15 @@
 import React = require('react');
-import { action, computed, observable, ObservableMap, ObservableSet } from 'mobx';
+import { action, computed, observable, ObservableSet } from 'mobx';
 import { observer } from 'mobx-react';
 import { Doc } from '../../../../fields/Doc';
 import { List } from '../../../../fields/List';
 import { listSpec } from '../../../../fields/Schema';
 import { Cast } from '../../../../fields/Types';
+import { DragManager } from '../../../util/DragManager';
 import { CollectionSubView } from '../CollectionSubView';
 import './CollectionSchemaView.scss';
 import { SchemaColumnHeader } from './SchemaColumnHeader';
 import { SchemaRowBox } from './SchemaRowBox';
-import { DragManager } from '../../../util/DragManager';
-import { PresBox } from '../../nodes/trails/PresBox';
-import { UndoManager } from '../../../util/UndoManager';
-import { returnFalse } from '../../../../Utils';
 
 export enum ColumnType {
     Number,
@@ -26,9 +23,12 @@ const defaultColumnKeys: string[] = ['title', 'type', 'author', 'text', 'data',
 
 @observer
 export class CollectionSchemaView extends CollectionSubView() {
+    private _ref: HTMLDivElement | null = null;
     private _lastSelectedRow: number | undefined;
+    private _selectedDocSortedArray: Doc[] = [];
+    private _closestDropIndex: number = 0;
 
-    @observable _rowMenuWidth: number = 60;
+    @observable _rowMenuWidth: number = 100;
     @observable _selectedDocs: ObservableSet = new ObservableSet<SchemaRowBox>();
     @observable _isDragging: boolean = false;
 
@@ -53,13 +53,12 @@ export class CollectionSchemaView extends CollectionSubView() {
     };
 
     @action
-    selectRow = (e: React.PointerEvent, doc: Doc) => {
+    selectRow = (e: React.PointerEvent, doc: Doc, index: number) => {
         const ctrl = e.ctrlKey || e.metaKey;
         const shift = e.shiftKey;
         if (shift && this._lastSelectedRow !== undefined) {
-            const currRowIndex = this.childDocs.indexOf(doc);
-            const startRow = Math.min(this._lastSelectedRow, currRowIndex);
-            const endRow = Math.max(this._lastSelectedRow, currRowIndex);
+            const startRow = Math.min(this._lastSelectedRow, index);
+            const endRow = Math.max(this._lastSelectedRow, index);
             for (let i = startRow; i <= endRow; i++) {
                 const currDoc: Doc = this.childDocs[i];
                 if (!this._selectedDocs.has(currDoc)) this._selectedDocs.add(currDoc);
@@ -68,14 +67,14 @@ export class CollectionSchemaView extends CollectionSubView() {
         } else if (ctrl) {
             if (!this._selectedDocs.has(doc)) {
                 this._selectedDocs.add(doc);
-                this._lastSelectedRow = this.childDocs.indexOf(doc);
+                this._lastSelectedRow = index;
             } else {
                 this._selectedDocs.delete(doc);
             }
         } else {
             this._selectedDocs.clear();
             this._selectedDocs.add(doc);
-            this._lastSelectedRow = this.childDocs.indexOf(doc);
+            this._lastSelectedRow = index;
         }
     };
 
@@ -84,17 +83,19 @@ export class CollectionSchemaView extends CollectionSubView() {
         return this.childDocs.filter(doc => this._selectedDocs.has(doc));
     };
 
-    @action.bound
-    moveDocument = (document: Doc | Doc[], targetCollection: Doc | undefined, addDocument: (document: Doc | Doc[]) => boolean) => {
-        console.log('hello');
-        console.log(targetCollection?.title);
-        if (Doc.AreProtosEqual(this.props.Document, targetCollection)) {
-            console.log('hi');
-            return true;
-        }
-        const first = document instanceof Doc ? document : document[0];
-        if (!first?._stayInCollection && addDocument !== returnFalse) {
-            UndoManager.RunInTempBatch(() => this.props.removeDocument?.(document) && addDocument(document));
+    setDropIndex = (index: number) => {
+        this._closestDropIndex = index;
+    };
+
+    @action
+    onInternalDrop = (e: Event, de: DragManager.DropEvent) => {
+        if (super.onInternalDrop(e, de)) {
+            this._isDragging = false;
+            const pushedDocs: Doc[] = this.childDocs.filter((doc: Doc, index: number) => index >= this._closestDropIndex && !this._selectedDocs.has(doc));
+            this.props.removeDocument?.(pushedDocs);
+            this.props.removeDocument?.(this._selectedDocSortedArray);
+            this.addDocument(this._selectedDocSortedArray);
+            this.addDocument(pushedDocs);
             return true;
         }
         return false;
@@ -102,14 +103,18 @@ export class CollectionSchemaView extends CollectionSubView() {
 
     @action
     startDrag = (e: React.PointerEvent, doc: Doc) => {
-        if (this._selectedDocs.size === 0) this._selectedDocs.add(doc);
+        if (!this._selectedDocs.has(doc)) {
+            this._selectedDocs.clear();
+            this._selectedDocs.add(doc);
+        }
         this._isDragging = true;
-        const dragData = new DragManager.DocumentDragData(this.sortedSelectedDocs(), 'move');
-        dragData.moveDocument = this.moveDocument;
+        this._selectedDocSortedArray = this.sortedSelectedDocs();
+        const dragData = new DragManager.DocumentDragData(this._selectedDocSortedArray, 'move');
+        dragData.moveDocument = this.props.moveDocument;
         const dragItem: HTMLElement[] = [];
         const dragDiv = document.createElement('div');
         dragDiv.className = 'presItem-multiDrag';
-        dragDiv.innerText = 'Move ' + this._selectedDocs.size + '  rows';
+        dragDiv.innerText = 'Move ' + this._selectedDocs.size + '  row' + (this._selectedDocs.size > 1 ? 's' : '');
         dragDiv.style.position = 'absolute';
         dragDiv.style.top = e.clientY + 'px';
         dragDiv.style.left = e.clientX - 50 + 'px';
@@ -122,18 +127,18 @@ export class CollectionSchemaView extends CollectionSubView() {
             e.clientY,
             undefined
         );
-        this._isDragging = false;
         return true;
     };
 
-    @action
-    endDrag = (e: React.PointerEvent) => {
-        // this._isDragging = false;
-    };
-
     render() {
         return (
-            <div className="collectionSchemaView">
+            <div
+                className="collectionSchemaView"
+                ref={(ele: HTMLDivElement | null) => {
+                    this._ref = ele;
+                    this.createDashEventsTarget(ele);
+                }}
+                onPointerDown={() => this._selectedDocs.clear()}>
                 <div className="schema-table">
                     <div className="schema-header-row">
                         {this.columnKeys.map((key, index) => (
@@ -141,20 +146,21 @@ export class CollectionSchemaView extends CollectionSubView() {
                         ))}
                     </div>
                     <div className="schema-table-content">
-                        {this.childDocs.map((doc: Doc) => (
+                        {this.childDocs.map((doc: Doc, index: number) => (
                             <SchemaRowBox
                                 {...this.props}
                                 Document={doc}
                                 ContainingCollectionDoc={this.props.CollectionView?.props.Document}
                                 ContainingCollectionView={this.props.CollectionView}
+                                rowIndex={index}
                                 columnKeys={this.columnKeys}
                                 columnWidths={this.columnWidths}
                                 rowMenuWidth={this._rowMenuWidth}
                                 selectedRows={this._selectedDocs}
                                 selectRow={this.selectRow}
                                 startDrag={this.startDrag}
-                                endDrag={this.endDrag}
                                 dragging={this._isDragging}
+                                dropIndex={this.setDropIndex}
                             />
                         ))}
                     </div>
diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
index 0065a0938..8b658d834 100644
--- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
@@ -13,14 +13,15 @@ import { emptyFunction, setupMoveUpEvents } from '../../../../Utils';
 import { DragManager } from '../../../util/DragManager';
 
 export interface SchemaRowBoxProps extends FieldViewProps {
+    rowIndex: number;
     columnKeys: string[];
     columnWidths: number[];
     rowMenuWidth: number;
     selectedRows: ObservableSet<Doc>;
-    selectRow: (e: any, doc: Doc) => void;
+    selectRow: (e: any, doc: Doc, index: number) => void;
     startDrag: (e: any, doc: Doc) => boolean;
-    endDrag: (e: any) => void
     dragging: boolean;
+    dropIndex: (index: number) => void;
 }
 
 @observer
@@ -38,16 +39,18 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
             this, e,
             (e) => this.props.startDrag(e, this.props.Document),
             emptyFunction,
-            (e) => this.props.selectRow(e, this.props.Document)
+            (e) => this.props.selectRow(e, this.props.Document, this.props.rowIndex)
         )
     }
 
     onPointerEnter = (e: any) => {
+        if (!this.props.dragging) return;
         document.removeEventListener('pointermove', this.onPointerMove);
         document.addEventListener('pointermove', this.onPointerMove);
     };
 
     onPointerMove = (e: any) => {
+        if (!this.props.dragging) return;
         let dragIsRow: boolean = true;
         DragManager.docsBeingDragged.forEach(doc => {
             dragIsRow = this.props.selectedRows.has(doc);
@@ -60,9 +63,11 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
             if (y <= halfLine) {
                 this._ref.style.borderTop = `solid 2px ${Colors.MEDIUM_BLUE}`;
                 this._ref.style.borderBottom = '0px';
+                this.props.dropIndex(this.props.rowIndex);
             } else if (y > halfLine) {
                 this._ref.style.borderTop = '0px';
                 this._ref.style.borderBottom = `solid 2px ${Colors.MEDIUM_BLUE}`;
+                this.props.dropIndex(this.props.rowIndex + 1);
             }
         }
     };
@@ -85,6 +90,9 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
                     <div className="row-button" onPointerDown={(e) => {e.stopPropagation(); this.props.addDocTab(this.props.Document, 'add:right')}}>
                         <FontAwesomeIcon icon="external-link-alt" />
                     </div>
+                    <div className="row-button">
+                        {this.props.rowIndex}
+                    </div>
                 </div>
                 <div className="row-cells">
                     {this.props.columnKeys.map((key, index) => (