new columns display blank

1 files changed, 13 insertions, 35 deletions

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index db23f874e..c673f0e56 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -32,6 +32,7 @@ import './CollectionSchemaView.scss';
 import { SchemaColumnHeader } from './SchemaColumnHeader';
 import { SchemaRowBox } from './SchemaRowBox';
 import { ActionButton } from '@adobe/react-spectrum';
+import { CollectionMasonryViewFieldRow } from '../CollectionMasonryViewFieldRow';
 
 const { SCHEMA_NEW_NODE_HEIGHT } = require('../../global/globalCssVariables.module.scss'); // prettier-ignore
 
@@ -273,9 +274,7 @@ export class CollectionSchemaView extends CollectionSubView() {
 
     @undoBatch
     changeColumnKey = (index: number, newKey: string, defaultVal?: any) => {
-        if (!this.documentKeys.includes(newKey)) {
-            this.addNewKey(newKey, defaultVal);
-        }
+        if (!this.documentKeys.includes(newKey)) this.addNewKey(newKey, defaultVal);
 
         const currKeys = this.columnKeys.slice(); // copy the column key array first, then change it.
         currKeys[index] = newKey;
@@ -283,10 +282,8 @@ export class CollectionSchemaView extends CollectionSubView() {
     };
 
     @undoBatch
-    addColumn = (key: string, defaultVal?: any) => {
-        if (!this.documentKeys.includes(key)) {
-            this.addNewKey(key, defaultVal);
-        }
+    addColumn = (key?: string, defaultVal?: any) => {
+        if (key && !this.documentKeys.includes(key)) this.addNewKey(key, defaultVal);
         
         const newColWidth = this.tableWidth / (this.storedColumnWidths.length + 1);
         const currWidths = this.storedColumnWidths.slice();
@@ -295,7 +292,9 @@ export class CollectionSchemaView extends CollectionSubView() {
         this.layoutDoc.schema_columnWidths = new List<number>(currWidths.map(w => (w / newDesiredTableWidth) * (this.tableWidth - CollectionSchemaView._rowMenuWidth)));
 
         const currKeys = this.columnKeys.slice();
+        if (!key) key = 'EmptyColumnKey' + Math.floor(Math.random() * 1000000000000000).toString();
         currKeys.splice(0, 0, key);
+        this.changeColumnKey(0, 'EmptyColumnKey' + Math.floor(Math.random() * 1000000000000000).toString());
         this.layoutDoc.schema_columnKeys = new List<string>(currKeys);
     };
 
@@ -332,6 +331,7 @@ export class CollectionSchemaView extends CollectionSubView() {
         const currKeys = this.columnKeys.slice();
         currKeys.splice(index, 1);
         this.layoutDoc.schema_columnKeys = new List<string>(currKeys); 
+        console.log(...currKeys);
     };
 
     @action
@@ -784,29 +784,13 @@ export class CollectionSchemaView extends CollectionSubView() {
         this._filterColumnIndex = undefined;
     };
 
-    openContextMenu = (x: number, y: number, index: number, fieldType: ColumnType) => {
+    openContextMenu = (x: number, y: number, index: number) => {
         this.closeColumnMenu();
         this.closeFilterMenu();
 
-        let toDisplay: string = '';
-        switch (fieldType) {
-            case ColumnType.Number:
-                toDisplay = 'number';
-                break;
-            case ColumnType.String:
-                toDisplay = 'string';
-                break;
-            case ColumnType.Boolean:
-                toDisplay = 'boolean';
-                break;
-            default:
-                toDisplay = 'string';
-                break;
-        }
-
         ContextMenu.Instance.clearItems();
         ContextMenu.Instance.addItem({
-            description: `Field type: ${toDisplay}`,
+            description: `Change field`,
             event: () => this.openColumnMenu(index, false),
             icon: 'pencil-alt',
         });
@@ -924,14 +908,6 @@ export class CollectionSchemaView extends CollectionSubView() {
                         {this._colKeysFiltered ? "All keys" : "Active keys only"}
                 </button> 
                 <div
-                    className="schema-column-menu-button"
-                    onPointerDown={action((e: any) => {
-                        e.stopPropagation();
-                        this._makeNewField = true;
-                    })}>
-                    + new field
-                </div>
-                <div
                     className="schema-key-list"
                     ref={r => {
                         this._oldKeysWheel?.removeEventListener('wheel', this.onKeysPassiveWheel);
@@ -1077,7 +1053,9 @@ export class CollectionSchemaView extends CollectionSubView() {
     _oldWheel: any;
     render() {
         return (
-            <div className="collectionSchemaView" ref={(ele: HTMLDivElement | null) => this.createDashEventsTarget(ele)} onDrop={this.onExternalDrop.bind(this)} onPointerMove={e => this.onPointerMove(e)}>
+            <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
                     className="schema-table"
@@ -1094,7 +1072,7 @@ export class CollectionSchemaView extends CollectionSubView() {
                                 placement="right"
                                 background={SettingsManager.userBackgroundColor}
                                 color={SettingsManager.userColor}
-                                toggle={<FontAwesomeIcon onPointerDown={() => this.openColumnMenu(-1, true)} icon="plus" />}
+                                toggle={<FontAwesomeIcon onPointerDown={() => this.addColumn()} icon="plus" />} //here
                                 trigger={PopupTrigger.CLICK}
                                 type={Type.TERT}
                                 isOpen={this._columnMenuIndex !== -1 ? false : undefined}