column deletion and new key menu fixes

4 files changed, 74 insertions, 45 deletions

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
index 99f49eb0e..4fa5d80e2 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
@@ -78,6 +78,15 @@
                         align-items: flex-start;
                     }
 
+                    .schema-new-key-options {
+                        margin: 10px;
+                        .schema-key-warning {
+                            color: red;
+                            font-weight: normal;
+                            align-self: center;
+                        }
+                    }
+
                     .schema-key-list {
                         width: 100%;
                         max-height: 300px;
@@ -85,7 +94,7 @@
                     }
 
                     .schema-key-type-option {
-                        margin: 2px 10px;
+                        margin: 2px 0px;
 
                         input {
                             margin-right: 5px;
@@ -93,7 +102,7 @@
                     }
 
                     .schema-key-default-val {
-                        margin: 5px 10px;
+                        margin: 5px 0;
                     }
 
                     .schema-column-menu-button {
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 24008a21d..f7c68c803 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -1,5 +1,5 @@
 import React = require('react');
-import { action, computed, observable, ObservableMap, ObservableSet, untracked } from 'mobx';
+import { action, computed, observable, ObservableMap, ObservableSet, trace, untracked } from 'mobx';
 import { observer } from 'mobx-react';
 import { Doc, DocListCast, StrListCast } from '../../../../fields/Doc';
 import { Id } from '../../../../fields/FieldSymbols';
@@ -66,11 +66,22 @@ export class CollectionSchemaView extends CollectionSubView() {
     }
 
     @computed get storedColumnWidths() {
-        return Cast(
+        let widths = Cast(
             this.layoutDoc.columnWidths,
             listSpec('number'),
             this.columnKeys.map(() => (this.props.PanelWidth() - this._rowMenuWidth) / this.columnKeys.length)
         );
+
+        const totalWidth = widths.reduce((sum, width) => sum + width, 0);
+        if (totalWidth !== this.props.PanelWidth() - this._rowMenuWidth) {
+            widths = widths.map(w => {
+                const proportion = w / totalWidth;
+                return proportion * (this.props.PanelWidth() - this._rowMenuWidth);
+            });
+            // this.layoutDoc.columnWidths = new List<number>(widths);
+        }
+
+        return widths;
     }
 
     @computed get displayColumnWidths() {
@@ -84,7 +95,7 @@ export class CollectionSchemaView extends CollectionSubView() {
             this.addNewKey(newKey, defaultVal);
         }
 
-        let currKeys = this.columnKeys;
+        let currKeys = [...this.columnKeys];
         currKeys[index] = newKey;
         this.layoutDoc.columnKeys = new List<string>(currKeys);
     };
@@ -96,7 +107,7 @@ export class CollectionSchemaView extends CollectionSubView() {
             this.addNewKey(key, defaultVal);
         }
 
-        let currWidths = this.storedColumnWidths;
+        let currWidths = [...this.storedColumnWidths];
         const newColWidth = this.props.PanelWidth() / (currWidths.length + 1);
         currWidths = currWidths.map(w => {
             const proportion = w / (this.props.PanelWidth() - this._rowMenuWidth);
@@ -105,21 +116,21 @@ export class CollectionSchemaView extends CollectionSubView() {
         currWidths.splice(index + 1, 0, newColWidth);
         this.layoutDoc.columnWidths = new List<number>(currWidths);
 
-        let currKeys = this.columnKeys;
+        let currKeys = [...this.columnKeys];
         currKeys.splice(index + 1, 0, key);
         this.layoutDoc.columnKeys = new List<string>(currKeys);
     };
 
     @action
     addNewKey = (key: string, defaultVal: any) => {
-        console.log(defaultVal);
         this.childDocs.forEach(doc => (doc[key] = defaultVal));
     };
 
     @undoBatch
     @action
     removeColumn = (index: number) => {
-        let currWidths = this.storedColumnWidths;
+        if (this.columnKeys.length === 1) return;
+        let currWidths = [...this.storedColumnWidths];
         const removedColWidth = currWidths[index];
         currWidths = currWidths.map(w => {
             const proportion = w / (this.props.PanelWidth() - this._rowMenuWidth - removedColWidth);
@@ -128,9 +139,11 @@ export class CollectionSchemaView extends CollectionSubView() {
         currWidths.splice(index, 1);
         this.layoutDoc.columnWidths = new List<number>(currWidths);
 
-        let currKeys = this.columnKeys;
+        let currKeys = [...this.columnKeys];
         currKeys.splice(index, 1);
         this.layoutDoc.columnKeys = new List<string>(currKeys);
+        console.log([...this.storedColumnWidths]);
+        console.log([...this.columnKeys]);
     };
 
     @action
@@ -179,7 +192,6 @@ export class CollectionSchemaView extends CollectionSubView() {
     @undoBatch
     @action
     swapColumns = (index1: number, index2: number) => {
-        console.log(index1, index2);
         const tempKey = this.columnKeys[index1];
         const tempWidth = this.storedColumnWidths[index1];
 
@@ -194,27 +206,23 @@ export class CollectionSchemaView extends CollectionSubView() {
         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
+    // dragColumn = (e: any, index: number) => {
+    //     e.stopPropagation();
+    //     e.preventDefault();
+    //     const rect = e.target.getBoundingClientRect();
+    //     if (e.clientX < rect.x) {
+    //         if (index < 1) return true;
+    //         this.swapColumns(index - 1, index);
+    //         return true;
+    //     }
+    //     if (e.clientX > rect.x + rect.width) {
+    //         if (index === this.columnKeys.length) return true;
+    //         this.swapColumns(index, index + 1);
+    //         return true;
+    //     }
+    //     return false;
+    // };
 
     @action
     addRowRef = (doc: Doc, ref: HTMLDivElement) => {
@@ -405,9 +413,11 @@ export class CollectionSchemaView extends CollectionSubView() {
                 onDrop={this.onExternalDrop.bind(this)}>
                 <div className="schema-table">
                     <div className="schema-header-row">
+                        <div className="row-menu" style={{ width: this._rowMenuWidth }}></div>
                         {this.columnKeys.map((key, index) => {
                             return (
                                 <SchemaColumnHeader
+                                    key={index}
                                     columnIndex={index}
                                     columnKeys={this.columnKeys}
                                     columnWidths={this.displayColumnWidths}
@@ -416,7 +426,7 @@ export class CollectionSchemaView extends CollectionSubView() {
                                     addColumn={this.addColumn}
                                     removeColumn={this.removeColumn}
                                     resizeColumn={this.startResize}
-                                    dragColumn={this.dragColumn}
+                                    // dragColumn={this.dragColumn}
                                 />
                             );
                         })}
@@ -425,6 +435,7 @@ export class CollectionSchemaView extends CollectionSubView() {
                         {this.childDocs.map((doc: Doc, index: number) => (
                             <SchemaRowBox
                                 {...this.props}
+                                key={index}
                                 Document={doc}
                                 ContainingCollectionDoc={this.props.CollectionView?.props.Document}
                                 ContainingCollectionView={this.props.CollectionView}
diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
index b9e25a473..a6a5f66ab 100644
--- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
@@ -15,7 +15,7 @@ export interface SchemaColumnHeaderProps {
     addColumn: (index: number, key: string, defaultVal?: any) => void;
     removeColumn: (index: number) => void;
     resizeColumn: (e: any, index: number, left: boolean) => void;
-    dragColumn: (e: any, index: number) => boolean;
+    // dragColumn: (e: any, index: number) => boolean;
 }
 
 @observer
@@ -24,6 +24,7 @@ export class SchemaColumnHeader extends React.Component<SchemaColumnHeaderProps>
     @observable _makeNewField: boolean = false;
     @observable _newFieldType: ColumnType = ColumnType.Number;
     @observable _newFieldDefault: any = 0;
+    @observable _newFieldWarning: string = '';
     @observable _menuValue: string = '';
     @observable _menuOptions: string[] = [];
     private _makeNewColumn = false;
@@ -94,11 +95,17 @@ export class SchemaColumnHeader extends React.Component<SchemaColumnHeaderProps>
                             string
                         </div>
                         <div className="schema-key-default-val">value: {this.fieldDefaultInput}</div>
+                        <div className="schema-key-warning">{this._newFieldWarning}</div>
                         <div
                             className="schema-column-menu-button"
                             onPointerDown={action(e => {
-                                this.setKey(this._menuValue, this._newFieldDefault);
-                                this._makeNewField = false;
+                                if (this.props.possibleKeys.includes(this._menuValue)) {
+                                    this._newFieldWarning = 'Field already exists';
+                                } else if (this._menuValue.length === 0) {
+                                    this._newFieldWarning = 'Field cannot be an empty string';
+                                } else {
+                                    this.setKey(this._menuValue, this._newFieldDefault);
+                                }
                             })}>
                             done
                         </div>
@@ -134,7 +141,7 @@ export class SchemaColumnHeader extends React.Component<SchemaColumnHeaderProps>
     onSearchKeyDown = (e: React.KeyboardEvent) => {
         switch (e.key) {
             case 'Enter':
-                this.setKey(this._menuOptions.length > 0 ? this._menuOptions[0] : this._menuValue);
+                this.setKey(this._menuOptions.length > 0 && this._menuValue.length > 0 ? this._menuOptions[0] : this._menuValue);
                 break;
             case 'Escape':
                 this.toggleColumnMenu();
@@ -158,12 +165,12 @@ export class SchemaColumnHeader extends React.Component<SchemaColumnHeaderProps>
         this._menuOptions = this.props.possibleKeys.filter(value => value.toLowerCase().includes(this._menuValue.toLowerCase()));
     };
 
-    @action
-    onPointerDown = (e: React.PointerEvent) => {
-        e.stopPropagation();
+    // @action
+    // onPointerDown = (e: React.PointerEvent) => {
+    //     e.stopPropagation();
 
-        setupMoveUpEvents(this, e, e => this.props.dragColumn(e, this.props.columnIndex), emptyFunction, emptyFunction);
-    };
+    //     setupMoveUpEvents(this, e, e => this.props.dragColumn(e, this.props.columnIndex), emptyFunction, emptyFunction);
+    // };
 
     @action
     toggleColumnMenu = (newCol?: boolean) => {
@@ -172,9 +179,11 @@ export class SchemaColumnHeader extends React.Component<SchemaColumnHeaderProps>
             this._menuVisible = false;
         } else {
             this._menuVisible = true;
-            this._menuValue = this.fieldKey;
+            this._menuValue = '';
             this._menuOptions = this.props.possibleKeys;
             this._makeNewField = false;
+            this._newFieldWarning = '';
+            this._makeNewField = false;
             if (newCol) {
                 this._makeNewColumn = true;
             }
@@ -183,7 +192,7 @@ export class SchemaColumnHeader extends React.Component<SchemaColumnHeaderProps>
 
     render() {
         return (
-            <div className="schema-column-header" style={{ width: this.props.columnWidths[this.props.columnIndex] }} onPointerDown={this.onPointerDown}>
+            <div className="schema-column-header" style={{ width: this.props.columnWidths[this.props.columnIndex] }}>
                 <div className="schema-column-resizer left" onPointerDown={e => this.props.resizeColumn(e, this.props.columnIndex, true)}></div>
                 <div className="schema-column-title">{this.fieldKey}</div>
 
diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
index bfce61952..5c1f32565 100644
--- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
@@ -118,7 +118,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
                 </div>
                 <div className="row-cells">
                     {this.props.columnKeys.map((key, index) => (
-                        <SchemaTableCell Document={this.props.Document} fieldKey={key} columnWidth={this.props.columnWidths[index]} />
+                        <SchemaTableCell key={key} Document={this.props.Document} fieldKey={key} columnWidth={this.props.columnWidths[index]} />
                     ))}
                 </div>
             </div>