diff options
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) => ( |