basic key selection menu created

1 files changed, 111 insertions, 39 deletions

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 84a69d4b9..7516b95b8 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -1,7 +1,7 @@
 import React = require('react');
-import { action, computed, observable, ObservableMap, ObservableSet } from 'mobx';
+import { action, computed, observable, ObservableMap, ObservableSet, untracked } from 'mobx';
 import { observer } from 'mobx-react';
-import { Doc, DocListCast } from '../../../../fields/Doc';
+import { Doc, DocListCast, StrListCast } from '../../../../fields/Doc';
 import { Id } from '../../../../fields/FieldSymbols';
 import { List } from '../../../../fields/List';
 import { RichTextField } from '../../../../fields/RichTextField';
@@ -41,10 +41,26 @@ export class CollectionSchemaView extends CollectionSubView() {
     private _minColWidth: number = 120;
 
     @observable _rowMenuWidth: number = 100;
-    @observable _selectedDocs: ObservableMap = new ObservableMap<SchemaRowBox, HTMLDivElement>();
+    @observable _selectedDocs: ObservableSet = new ObservableSet<Doc>();
+    @observable _rowEles: ObservableMap = new ObservableMap<Doc, HTMLDivElement>();
     @observable _isDragging: boolean = false;
     @observable _displayColumnWidths: number[] | undefined;
 
+    get documentKeys() {
+        const docs = this.childDocs;
+        const keys: { [key: string]: boolean } = {};
+        // bcz: ugh.  this is untracked since otherwise a large collection of documents will blast the server for all their fields.
+        //  then as each document's fields come back, we update the documents _proxies.  Each time we do this, the whole schema will be
+        //  invalidated and re-rendered.   This workaround will inquire all of the document fields before the options button is clicked.
+        //  then by the time the options button is clicked, all of the fields should be in place.  If a new field is added while this menu
+        //  is displayed (unlikely) it won't show up until something else changes.
+        //TODO Types
+        untracked(() => docs.map(doc => Doc.GetAllPrototypes(doc).map(proto => Object.keys(proto).forEach(key => (keys[key] = false)))));
+
+        // this.columns.forEach(key => (keys[key.heading] = true));
+        return Array.from(Object.keys(keys));
+    }
+
     @computed get columnKeys() {
         return Cast(this.layoutDoc.columnKeys, listSpec('string'), defaultColumnKeys);
     }
@@ -64,6 +80,10 @@ export class CollectionSchemaView extends CollectionSubView() {
     @undoBatch
     @action
     changeColumnKey = (index: number, newKey: string) => {
+        if (!this.documentKeys.includes(newKey)) {
+            this.addNewKey(newKey);
+        }
+
         let currKeys = this.columnKeys;
         currKeys[index] = newKey;
         this.layoutDoc.columnKeys = new List<string>(currKeys);
@@ -72,10 +92,10 @@ export class CollectionSchemaView extends CollectionSubView() {
 
     @undoBatch
     @action
-    addColumn = (index: number) => {
-        let currKeys = this.columnKeys;
-        currKeys.splice(index, 0, 'title');
-        this.layoutDoc.columnKeys = new List<string>(currKeys);
+    addColumn = (index: number, key: string) => {
+        if (!this.documentKeys.includes(key)) {
+            this.addNewKey(key);
+        }
 
         const newColWidth = this._minColWidth;
         let currWidths = this.storedColumnWidths;
@@ -83,17 +103,22 @@ export class CollectionSchemaView extends CollectionSubView() {
             const proportion = w / (this.props.PanelWidth() - this._rowMenuWidth);
             return proportion * (this.props.PanelWidth() - this._rowMenuWidth - newColWidth);
         });
-        currWidths.splice(index, 0, newColWidth);
+        currWidths.splice(index + 1, 0, newColWidth);
         this.layoutDoc.columnWidths = new List<number>(currWidths);
+
+        let currKeys = this.columnKeys;
+        currKeys.splice(index + 1, 0, key);
+        this.layoutDoc.columnKeys = new List<string>(currKeys);
+    };
+
+    @action
+    addNewKey = (key: string) => {
+        this.childDocs.forEach(doc => (doc[key] = key + ' default val'));
     };
 
     @undoBatch
     @action
     removeColumn = (index: number) => {
-        let currKeys = this.columnKeys;
-        currKeys.splice(index, 1);
-        this.layoutDoc.columnKeys = new List<string>(currKeys);
-
         let currWidths = this.storedColumnWidths;
         const removedColWidth = currWidths[index];
         currWidths = currWidths.map(w => {
@@ -102,6 +127,10 @@ export class CollectionSchemaView extends CollectionSubView() {
         });
         currWidths.splice(index, 1);
         this.layoutDoc.columnWidths = new List<number>(currWidths);
+
+        let currKeys = this.columnKeys;
+        currKeys.splice(index, 1);
+        this.layoutDoc.columnKeys = new List<string>(currKeys);
     };
 
     @action
@@ -143,11 +172,55 @@ export class CollectionSchemaView extends CollectionSubView() {
 
     @action
     finishResize = () => {
-        console.log('finished');
         this.layoutDoc.columnWidths = new List<number>(this._displayColumnWidths);
         this._displayColumnWidths = undefined;
     };
 
+    @undoBatch
+    @action
+    swapColumns = (index1: number, index2: number) => {
+        console.log(index1, index2);
+        const tempKey = this.columnKeys[index1];
+        const tempWidth = this.storedColumnWidths[index1];
+
+        let currKeys = this.columnKeys;
+        currKeys[index1] = currKeys[index2];
+        currKeys[index2] = tempKey;
+        this.layoutDoc.columnKeys = new List<string>(currKeys);
+
+        let currWidths = this.storedColumnWidths;
+        currWidths[index1] = currWidths[index2];
+        currWidths[index2] = tempWidth;
+        this.layoutDoc.columnWidths = new List<number>(currWidths);
+    };
+
+    @action
+    dragColumn = (e: any, index: number) => {
+        console.log(index);
+        e.stopPropagation();
+        e.preventDefault();
+        const rect = e.target.getBoundingClientRect();
+        if (e.clientX < rect.x) {
+            console.log('left', e.clientX, rect.x);
+            if (index < 1) return true;
+            this.swapColumns(index - 1, index);
+            return true;
+        }
+        if (e.clientX > rect.x + rect.width) {
+            console.log('right', e.clientX, rect.x + rect.width);
+            if (index === this.columnKeys.length) return true;
+            console.log(index);
+            this.swapColumns(index, index + 1);
+            return true;
+        }
+        return false;
+    };
+
+    @action
+    addRowRef = (doc: Doc, ref: HTMLDivElement) => {
+        this._rowEles.set(doc, ref);
+    };
+
     @action
     selectRow = (e: React.PointerEvent, doc: Doc, ref: HTMLDivElement, index: number) => {
         const ctrl = e.ctrlKey || e.metaKey;
@@ -157,19 +230,19 @@ export class CollectionSchemaView extends CollectionSubView() {
             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.set(currDoc, ref);
+                if (!this._selectedDocs.has(currDoc)) this._selectedDocs.add(currDoc);
             }
             this._lastSelectedRow = endRow;
         } else if (ctrl) {
             if (!this._selectedDocs.has(doc)) {
-                this._selectedDocs.set(doc, ref);
+                this._selectedDocs.add(doc);
                 this._lastSelectedRow = index;
             } else {
                 this._selectedDocs.delete(doc);
             }
         } else {
             this._selectedDocs.clear();
-            this._selectedDocs.set(doc, ref);
+            this._selectedDocs.add(doc);
             this._lastSelectedRow = index;
         }
 
@@ -205,7 +278,6 @@ export class CollectionSchemaView extends CollectionSubView() {
 
     @action
     onExternalDrop = async (e: React.DragEvent): Promise<void> => {
-        console.log('hello');
         super.onExternalDrop(
             e,
             {},
@@ -222,7 +294,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     startDrag = (e: React.PointerEvent, doc: Doc, ref: HTMLDivElement, index: number) => {
         if (!this._selectedDocs.has(doc)) {
             this._selectedDocs.clear();
-            this._selectedDocs.set(doc, ref);
+            this._selectedDocs.add(doc);
             this._lastSelectedRow = index;
             SelectionManager.SelectSchemaViewDoc(doc);
         }
@@ -230,14 +302,7 @@ export class CollectionSchemaView extends CollectionSubView() {
         this._selectedDocSortedArray = this.sortedSelectedDocs();
         const dragData = new DragManager.DocumentDragData(this._selectedDocSortedArray, 'move');
         dragData.moveDocument = this.props.moveDocument;
-        const dragItem: HTMLElement[] = Array.from(this._selectedDocs.values());
-        // const dragDiv = document.createElement('div');
-        // dragDiv.className = 'presItem-multiDrag';
-        // 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';
-        // dragItem.push(dragDiv);
+        const dragItem: HTMLElement[] = Array.from(this._selectedDocs.values()).map((doc: Doc) => this._rowEles.get(doc));
 
         DragManager.StartDocumentDrag(
             dragItem.map(ele => ele),
@@ -334,21 +399,27 @@ export class CollectionSchemaView extends CollectionSubView() {
                     this._ref = ele;
                     this.createDashEventsTarget(ele);
                 }}
-                onPointerDown={() => this._selectedDocs.clear()}
+                onPointerDown={action(() => {
+                    this._selectedDocs.clear();
+                })}
                 onDrop={this.onExternalDrop.bind(this)}>
                 <div className="schema-table">
                     <div className="schema-header-row">
-                        {this.columnKeys.map((key, index) => (
-                            <SchemaColumnHeader
-                                columnIndex={index}
-                                columnKeys={this.columnKeys}
-                                columnWidths={this.displayColumnWidths}
-                                changeColumnKey={this.changeColumnKey}
-                                addColumn={this.addColumn}
-                                removeColumn={this.removeColumn}
-                                resizeColumn={this.startResize}
-                            />
-                        ))}
+                        {this.columnKeys.map((key, index) => {
+                            return (
+                                <SchemaColumnHeader
+                                    columnIndex={index}
+                                    columnKeys={this.columnKeys}
+                                    columnWidths={this.displayColumnWidths}
+                                    possibleKeys={this.documentKeys}
+                                    changeColumnKey={this.changeColumnKey}
+                                    addColumn={this.addColumn}
+                                    removeColumn={this.removeColumn}
+                                    resizeColumn={this.startResize}
+                                    dragColumn={this.dragColumn}
+                                />
+                            );
+                        })}
                     </div>
                     <div className="schema-table-content">
                         {this.childDocs.map((doc: Doc, index: number) => (
@@ -361,11 +432,12 @@ export class CollectionSchemaView extends CollectionSubView() {
                                 columnKeys={this.columnKeys}
                                 columnWidths={this.displayColumnWidths}
                                 rowMenuWidth={this._rowMenuWidth}
-                                selectedRows={this._selectedDocs}
+                                selectedDocs={this._selectedDocs}
                                 selectRow={this.selectRow}
                                 startDrag={this.startDrag}
                                 dragging={this._isDragging}
                                 dropIndex={this.setDropIndex}
+                                addRowRef={this.addRowRef}
                             />
                         ))}
                     </div>