column deletion and new key menu fixes

1 files changed, 42 insertions, 31 deletions

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}