Merge branch 'nathan-starter' of https://github.com/brown-dash/Dash-Web into nathan-starter

1 files changed, 72 insertions, 105 deletions

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 647986568..de38d0c56 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable no-restricted-syntax */
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Popup, PopupTrigger, Type } from 'browndash-components';
-import { ObservableMap, action, autorun, computed, makeObservable, observable, observe } from 'mobx';
+import { ObservableMap, action, autorun, computed, makeObservable, observable, observe, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { returnEmptyDoclist, returnEmptyString, returnFalse, returnIgnore, returnNever, returnTrue, setupMoveUpEvents, smoothScroll } from '../../../../ClientUtils';
@@ -10,9 +10,8 @@ import { Doc, DocListCast, Field, FieldType, NumListCast, Opt, StrListCast } fro
 import { DocData } from '../../../../fields/DocSymbols';
 import { Id } from '../../../../fields/FieldSymbols';
 import { List } from '../../../../fields/List';
-import { listSpec } from '../../../../fields/Schema';
 import { ColumnType } from '../../../../fields/SchemaHeaderField';
-import { BoolCast, Cast, NumCast, StrCast } from '../../../../fields/Types';
+import { BoolCast, NumCast, StrCast } from '../../../../fields/Types';
 import { DocUtils } from '../../../documents/DocUtils';
 import { Docs, DocumentOptions, FInfo } from '../../../documents/Documents';
 import { DragManager } from '../../../util/DragManager';
@@ -123,11 +122,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     }
 
     @computed get columnKeys() {
-        return Cast(this.layoutDoc.schema_columnKeys, listSpec('string'), defaultColumnKeys);
-    }
-
-    @computed get rowKeys() {
-        return Cast(this.layoutDoc.schema_rowKeys, listSpec('string'), []);
+        return StrListCast(this.layoutDoc.schema_columnKeys, defaultColumnKeys);
     }
 
     @computed get storedColumnWidths() {
@@ -137,7 +132,7 @@ export class CollectionSchemaView extends CollectionSubView() {
         );
 
         const totalWidth = widths.reduce((sum, width) => sum + width, 0);
-        //If the total width of all columns is not the width of the schema table minus the width of the row menu, resize them appropriately
+        // If the total width of all columns is not the width of the schema table minus the width of the row menu, resize them appropriately
         if (totalWidth !== this.tableWidth - CollectionSchemaView._rowMenuWidth) {
             return widths.map(w => (w / totalWidth) * (this.tableWidth - CollectionSchemaView._rowMenuWidth));
         }
@@ -145,8 +140,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     }
 
     @computed get rowHeights() {
-        const heights = this.childDocs.map(() => this.rowHeightFunc());
-        return heights;
+        return this.childDocs.map(() => this.rowHeightFunc());
     }
 
     @computed get displayColumnWidths() {
@@ -211,9 +205,7 @@ export class CollectionSchemaView extends CollectionSubView() {
                                 DocumentView.DeselectView(DocumentView.getFirstDocumentView(curDoc));
                                 this.deselectCell(curDoc);
                             } else {
-                                const shift: boolean = e.shiftKey;
-                                const ctrl: boolean = e.ctrlKey;
-                                this.selectCell(newDoc, this._selectedCol, shift, ctrl);
+                                this.selectCell(newDoc, this._selectedCol, e.shiftKey, e.ctrlKey);
                                 this.scrollToDoc(newDoc, {});
                             }
                         }
@@ -232,9 +224,7 @@ export class CollectionSchemaView extends CollectionSubView() {
                                 DocumentView.DeselectView(DocumentView.getFirstDocumentView(curDoc));
                                 this.deselectCell(curDoc);
                             } else {
-                                const shift: boolean = e.shiftKey;
-                                const ctrl: boolean = e.ctrlKey;
-                                this.selectCell(newDoc, this._selectedCol, shift, ctrl);
+                                this.selectCell(newDoc, this._selectedCol, e.shiftKey, e.ctrlKey);
                                 this.scrollToDoc(newDoc, {});
                             }
                         }
@@ -286,7 +276,7 @@ export class CollectionSchemaView extends CollectionSubView() {
             this.addNewKey(newKey, defaultVal, false);
         }
 
-        const currKeys = [...this.columnKeys];
+        const currKeys = this.columnKeys.slice(); // copy the column key array first, then change it.
         currKeys[index] = newKey;
         this.layoutDoc.schema_columnKeys = new List<string>(currKeys);
     };
@@ -397,7 +387,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     @undoBatch
     moveColumn = (fromIndex: number, toIndex: number) => {
         if (this._selectedCol === fromIndex) this._selectedCol = toIndex;
-        else if (toIndex === this._selectedCol) this._selectedCol = fromIndex; //keeps selected cell consistent
+        else if (toIndex === this._selectedCol) this._selectedCol = fromIndex; // keeps selected cell consistent
 
         const currKeys = this.columnKeys.slice();
         currKeys.splice(toIndex, 0, currKeys.splice(fromIndex, 1)[0]);
@@ -442,11 +432,11 @@ export class CollectionSchemaView extends CollectionSubView() {
      */
     @action
     setRelCursorIndex = (mouseY: number) => {
-        this._mouseCoordinates.y = mouseY; //updates this.rowDropIndex computed value to overwrite the old cached value
+        this._mouseCoordinates.y = mouseY; // updates this.rowDropIndex computed value to overwrite the old cached value
 
-        let rowHeight = CollectionSchemaView._rowHeight;
-        let adjInitMouseY = mouseY - rowHeight - 100; //rowHeight: height of the column menu cells | 100: height of the top menu
-        let yOffset = this._lowestSelectedIndex * rowHeight;
+        const rowHeight = CollectionSchemaView._rowHeight;
+        const adjInitMouseY = mouseY - rowHeight - 100; // rowHeight: height of the column menu cells | 100: height of the top menu
+        const yOffset = this._lowestSelectedIndex * rowHeight;
 
         const heights = this._selectedDocs.map(() => this.rowHeightFunc());
         let index: number = 0;
@@ -460,9 +450,8 @@ export class CollectionSchemaView extends CollectionSubView() {
         this._relCursorIndex = index;
     };
 
-    //Uses current mouse position to calculate the indexes of actively dragged docs
     findRowDropIndex = (mouseY: number) => {
-        let rowHeight = CollectionSchemaView._rowHeight;
+        const rowHeight = CollectionSchemaView._rowHeight;
         let index: number = 0;
         this.rowHeights.reduce((total, curr, i) => {
             if (total <= mouseY && total + curr >= mouseY) {
@@ -472,39 +461,31 @@ export class CollectionSchemaView extends CollectionSubView() {
             return total + curr;
         }, rowHeight);
 
-        //fix index if selected rows are dragged out of bounds
+        // fix index if selected rows are dragged out of bounds
         let adjIndex = index - this._relCursorIndex;
-        let maxY = this.rowHeights.reduce((total, curr) => total + curr, 0) + rowHeight;
+        const maxY = this.rowHeights.reduce((total, curr) => total + curr, 0) + rowHeight;
         if (mouseY > maxY) adjIndex = this.childDocs.length - 1;
         else if (adjIndex <= 0) adjIndex = 0;
 
         return adjIndex;
     };
 
-    @action
-    highlightDraggedColumn = (index: number) => {
+    highlightDraggedColumn = (index: number) =>
         this._colEles.forEach((colRef, i) => {
-            let edgeStyle = '';
-            if (i === index) edgeStyle = `solid 2px ${Colors.MEDIUM_BLUE}`;
-
-            //border styles of menu cell
-            colRef.style.borderLeft = edgeStyle;
-            colRef.style.borderRight = edgeStyle;
-            colRef.style.borderTop = edgeStyle;
-
-            for (let doc = 0; doc < this.childDocs.length; ++doc) {
-                if (i === this._selectedCol && this._selectedDocs.includes(this.childDocs[doc])) {
-                    continue;
-                } else {
-                    this._rowEles.get(this.childDocs[doc]).children[1].children[i].style.borderLeft = edgeStyle;
-                    this._rowEles.get(this.childDocs[doc]).children[1].children[i].style.borderRight = edgeStyle;
-                    if (doc === this.childDocs.length - 1) {
-                        this._rowEles.get(this.childDocs[doc]).children[1].children[i].style.borderBottom = edgeStyle;
-                    }
-                }
-            }
+            const edgeStyle = i === index ? `solid 2px ${Colors.MEDIUM_BLUE}` : '';
+            const cellEles = [
+                colRef,
+                ...this.childDocs //
+                    .filter(doc => i !== this._selectedCol || !this._selectedDocs.includes(doc))
+                    .map(doc => this._rowEles.get(doc).children[1].children[i]),
+            ];
+            cellEles[0].style.borderTop = edgeStyle;
+            cellEles.forEach(ele => {
+                ele.style.borderLeft = edgeStyle;
+                ele.style.borderRight = edgeStyle;
+            });
+            cellEles.slice(-1)[0].style.borderBottom = edgeStyle;
         });
-    };
 
     @action
     addRowRef = (doc: Doc, ref: HTMLDivElement) => this._rowEles.set(doc, ref);
@@ -548,7 +529,7 @@ export class CollectionSchemaView extends CollectionSubView() {
         if (!shiftKey && !ctrlKey) this.clearSelection();
         !this._selectedCells && (this._selectedCells = []);
         !shiftKey && this._selectedCells && this._selectedCells.push(doc);
-        let index = this.rowIndex(doc);
+        const index = this.rowIndex(doc);
 
         if (!this) return;
         const lastSelected = Array.from(this._selectedDocs).lastElement();
@@ -563,13 +544,13 @@ export class CollectionSchemaView extends CollectionSubView() {
 
         if (this._lowestSelectedIndex === -1 || index < this._lowestSelectedIndex) this._lowestSelectedIndex = index;
 
-        //let selectedIndexes: Array<Number> = this._selectedCells.map(doc => this.rowIndex(doc));
+        // let selectedIndexes: Array<Number> = this._selectedCells.map(doc => this.rowIndex(doc));
     };
 
     @action
     deselectCell = (doc: Doc) => {
         this._selectedCells && (this._selectedCells = this._selectedCells.filter(d => d !== doc));
-        if (this.rowIndex(doc) == this._lowestSelectedIndex) this._lowestSelectedIndex = Math.min(...this._selectedDocs.map(doc => this.rowIndex(doc)));
+        if (this.rowIndex(doc) === this._lowestSelectedIndex) this._lowestSelectedIndex = Math.min(...this._selectedDocs.map(d => this.rowIndex(d)));
     };
 
     @action
@@ -583,8 +564,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     @computed
     get rowDropIndex() {
         const mouseY = this.ScreenToLocalBoxXf().transformPoint(this._mouseCoordinates.x, this._mouseCoordinates.y)[1];
-        const index = this.findRowDropIndex(mouseY);
-        return index;
+        return this.findRowDropIndex(mouseY);
     }
 
     onInternalDrop = (e: Event, de: DragManager.DropEvent) => {
@@ -593,7 +573,7 @@ export class CollectionSchemaView extends CollectionSubView() {
             e.stopPropagation();
 
             this._colEles.forEach((colRef, i) => {
-                //style for menu cell
+                // style for menu cell
                 colRef.style.borderLeft = '';
                 colRef.style.borderRight = '';
                 colRef.style.borderTop = '';
@@ -611,7 +591,7 @@ export class CollectionSchemaView extends CollectionSubView() {
 
         const draggedDocs = de.complete.docDragData?.draggedDocuments;
         if (draggedDocs && super.onInternalDrop(e, de) && !this.sortField) {
-            let map = draggedDocs?.map(doc => this.rowIndex(doc));
+            const map = draggedDocs?.map(doc => this.rowIndex(doc));
             console.log(map);
             this.dataDoc[this.fieldKey ?? 'data'] = new List<Doc>([...this.sortedDocs.docs]);
             this.clearSelection();
@@ -619,16 +599,13 @@ export class CollectionSchemaView extends CollectionSubView() {
                 DocumentView.addViewRenderedCb(doc, dv => dv.select(true));
                 console.log(doc.x);
             });
-            this._lowestSelectedIndex = Math.min(...draggedDocs?.map(doc => this.rowIndex(doc)));
+            this._lowestSelectedIndex = Math.min(...(draggedDocs?.map(doc => this.rowIndex(doc)) ?? []));
             return true;
         }
         return false;
     };
 
-    onExternalDrop = async (e: React.DragEvent): Promise<void> => {
-        super.onExternalDrop(e, {}, undoBatch(action(docs => docs.map((doc: Doc) => this.addDocument(doc)))));
-    };
-
+    onExternalDrop = (e: React.DragEvent) => super.onExternalDrop(e, {}, docs => docs.map(doc => this.addDocument(doc)));
     onDividerDown = (e: React.PointerEvent) => setupMoveUpEvents(this, e, this.onDividerMove, emptyFunction, emptyFunction);
 
     @action
@@ -724,9 +701,9 @@ export class CollectionSchemaView extends CollectionSubView() {
             case 'Enter':
                 this._menuKeys.length > 0 && this._menuValue.length > 0
                     ? this.setKey(this._menuKeys[0])
-                    : action(() => {
+                    : runInAction(() => {
                           this._makeNewField = true;
-                      })();
+                      });
                 break;
             case 'Escape':
                 this.closeColumnMenu();
@@ -746,9 +723,9 @@ export class CollectionSchemaView extends CollectionSubView() {
     };
 
     setColumnValues = (key: string, value: string) => {
-        const selectedDocs: Doc[] = new Array();
+        const selectedDocs: Doc[] = [];
         this.childDocs.forEach(doc => {
-            let docIsSelected = this._selectedCells && !(this._selectedCells?.filter(d => d === doc).length === 0);
+            const docIsSelected = this._selectedCells && !(this._selectedCells?.filter(d => d === doc).length === 0);
             if (docIsSelected) {
                 selectedDocs.push(doc);
             }
@@ -763,7 +740,7 @@ export class CollectionSchemaView extends CollectionSubView() {
 
     setSelectedColumnValues = (key: string, value: string) => {
         this.childDocs.forEach(doc => {
-            let docIsSelected = this._selectedCells && !(this._selectedCells?.filter(d => d === doc).length === 0);
+            const docIsSelected = this._selectedCells && !(this._selectedCells?.filter(d => d === doc).length === 0);
             if (docIsSelected) {
                 Doc.SetField(doc, key, value);
             }
@@ -781,7 +758,7 @@ export class CollectionSchemaView extends CollectionSubView() {
             this._menuKeys = this.documentKeys;
         }
     }
-    
+
     childDocsInclude = (key: string) => {
         let keyExists: boolean = false;
         this.childDocs.forEach(doc => {if (Object.keys(doc).includes(key)) keyExists = true;})
@@ -1013,17 +990,11 @@ export class CollectionSchemaView extends CollectionSubView() {
             }
             return (
                 <div key={key} className="schema-filter-option">
-                    <input
+                    <input //
                         type="checkbox"
                         onPointerDown={e => e.stopPropagation()}
                         onClick={e => e.stopPropagation()}
-                        onChange={action((e: any) => {
-                            if (e.target.checked) {
-                                Doc.setDocFilter(this.Document, columnKey, key, 'check');
-                            } else {
-                                Doc.setDocFilter(this.Document, columnKey, key, 'remove');
-                            }
-                        })}
+                        onChange={e => Doc.setDocFilter(this.Document, columnKey, key, e.target.checked ? 'check' : 'remove')}
                         checked={bool}
                     />
                     <span style={{ paddingLeft: 4 }}>{key}</span>
@@ -1056,9 +1027,9 @@ export class CollectionSchemaView extends CollectionSubView() {
             this._mouseCoordinates = { x: e.clientX, y: e.clientY };
         }
         if (this._colBeingDragged) {
-            let newIndex = this.findColDropIndex(e.clientX);
-            if (newIndex != this._draggedColIndex) this.moveColumn(this._draggedColIndex, newIndex ?? this._draggedColIndex);
-            this._draggedColIndex = newIndex ? newIndex : this._draggedColIndex;
+            const newIndex = this.findColDropIndex(e.clientX);
+            if (newIndex !== this._draggedColIndex) this.moveColumn(this._draggedColIndex, newIndex ?? this._draggedColIndex);
+            this._draggedColIndex = newIndex || this._draggedColIndex;
             this.highlightDraggedColumn(newIndex ?? this._draggedColIndex);
         }
     };
@@ -1095,7 +1066,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     render() {
         return (
             <div className="collectionSchemaView" ref={(ele: HTMLDivElement | null) => this.createDashEventsTarget(ele)} onDrop={this.onExternalDrop.bind(this)} onPointerMove={e => this.onPointerMove(e)}>
-                <div ref={this._menuTarget} style={{ background: 'red', top: 0, left: 0, position: 'absolute', zIndex: 10000 }}></div>
+                <div ref={this._menuTarget} style={{ background: 'red', top: 0, left: 0, position: 'absolute', zIndex: 10000 }} />
                 <div
                     className="schema-table"
                     style={{ width: `calc(100% - ${this.previewWidth}px)` }}
@@ -1206,31 +1177,6 @@ export class CollectionSchemaView extends CollectionSubView() {
     }
 }
 
-interface CollectionSchemaViewDocsProps {
-    schema: CollectionSchemaView;
-    setRef: (ref: HTMLDivElement | null) => void;
-    childDocs: () => { docs: Doc[] };
-    rowHeight: () => number;
-}
-
-@observer
-class CollectionSchemaViewDocs extends React.Component<CollectionSchemaViewDocsProps> {
-    render() {
-        return (
-            <div className="schema-table-content" ref={this.props.setRef} style={{ height: `calc(100% - ${CollectionSchemaView._newNodeInputHeight + this.props.rowHeight()}px)` }}>
-                {this.props.childDocs().docs.map((doc: Doc, index: number) => (
-                    <div key={doc[Id]} className="schema-row-wrapper" style={{ height: this.props.rowHeight() }}>
-                        {
-                            // eslint-disable-next-line no-use-before-define
-                            <CollectionSchemaViewDoc doc={doc} schema={this.props.schema} index={index} rowHeight={this.props.rowHeight} />
-                        }
-                    </div>
-                ))}
-            </div>
-        );
-    }
-}
-
 interface CollectionSchemaViewDocProps {
     schema: CollectionSchemaView;
     index: number;
@@ -1284,8 +1230,29 @@ class CollectionSchemaViewDoc extends ObservableReactComponent<CollectionSchemaV
                 hideTitle
                 hideDocumentButtonBar
                 hideLinkAnchors
-                layout_fitWidth={returnTrue}
+                fitWidth={returnTrue}
             />
         );
     }
 }
+interface CollectionSchemaViewDocsProps {
+    schema: CollectionSchemaView;
+    setRef: (ref: HTMLDivElement | null) => void;
+    childDocs: () => { docs: Doc[] };
+    rowHeight: () => number;
+}
+
+@observer
+class CollectionSchemaViewDocs extends React.Component<CollectionSchemaViewDocsProps> {
+    render() {
+        return (
+            <div className="schema-table-content" ref={this.props.setRef} style={{ height: `calc(100% - ${CollectionSchemaView._newNodeInputHeight + this.props.rowHeight()}px)` }}>
+                {this.props.childDocs().docs.map((doc: Doc, index: number) => (
+                    <div key={doc[Id]} className="schema-row-wrapper" style={{ height: this.props.rowHeight() }}>
+                        <CollectionSchemaViewDoc doc={doc} schema={this.props.schema} index={index} rowHeight={this.props.rowHeight} />
+                    </div>
+                ))}
+            </div>
+        );
+    }
+}