new columns display blank

5 files changed, 43 insertions, 55 deletions

diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index 4c4ef227a..5b691c507 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -56,6 +56,7 @@ export interface EditableProps {
     wrap?: string; // nowrap, pre-wrap, etc
 
     showKeyNotVal?: boolean;
+    updateAlt?: (newAlt: string) => void;
 }
 
 /**
@@ -182,6 +183,7 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
 
     @action
     onClick = (e: React.MouseEvent) => {
+        if (this._props.GetValue() == 'None' && this._props.updateAlt) this._props.updateAlt('.');
         if (this._props.editing !== false) {
             e.nativeEvent.stopPropagation();
             if (this._ref.current && this._props.showMenuOnLoad) {
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
index fd2e882d9..1dbe75a8d 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
@@ -50,13 +50,15 @@
 .schema-column-menu,
 .schema-filter-menu {
     background: $light-gray;
-    position: relative;
-    min-width: 200px;
-    max-width: 400px;
+    position: absolute;
+    min-width: 150px;
+    max-width: 300px;
+    max-height: 300px;
     display: flex;
+    overflow: hidden;
     flex-direction: column;
     align-items: flex-start;
-    z-index: 1;
+    z-index: 5;
 
     .schema-key-search-input {
         width: calc(100% - 20px);
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}
diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
index f404eb444..6e2f85cc0 100644
--- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
@@ -39,7 +39,7 @@ export interface SchemaColumnHeaderProps {
     rowHeight: () => number;
     resizeColumn: (e: any, index: number) => void;
     dragColumn: (e: any, index: number) => boolean;
-    openContextMenu: (x: number, y: number, index: number, fieldType: ColumnType) => void;
+    openContextMenu: (x: number, y: number, index: number) => void;
     setColRef: (index: number, ref: HTMLDivElement) => void;
     rootSelected?: () => boolean;
     columnWidth: () => number;
@@ -50,15 +50,21 @@ export interface SchemaColumnHeaderProps {
 @observer
 export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHeaderProps> {
 
-    @observable _editing: boolean | undefined = false;
-    @observable _fieldType: ColumnType = ColumnType.String;
+    @observable _altTitle: string | undefined = undefined;
 
     @computed get fieldKey() {
         return this._props.columnKeys[this._props.columnIndex];
     }
 
+    isDefaultTitle = (key: string) => {
+        const defaultPattern = /EmptyColumnKey/;
+        let isDefault: boolean = (defaultPattern.exec(key) != null);
+        return isDefault;
+    }
+
     getFinfo = computedFn((fieldKey: string) => this._props.schemaView?.fieldInfos.get(fieldKey));
     setColumnValues = (field: string, defaultValue: string) => {this._props.schemaView?.setKey(field, defaultValue, this._props.columnIndex);}
+    @action updateAlt = (newAlt: string) => {this._altTitle = newAlt;}
 
     @action
     sortClicked = (e: React.PointerEvent) => {
@@ -128,15 +134,21 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
                 contents={undefined}
                 fieldContents={fieldProps}
                 editing={undefined}  
+                updateAlt={this.updateAlt} // alternate title to display
                 showKeyNotVal={true} // tells the EditableView to display the fieldKey itself, and not its value
-                GetValue={() => this.fieldKey}
+                GetValue={() => {
+                    if (this.isDefaultTitle(this.fieldKey)) return '';
+                    else if (this._altTitle) return this._altTitle;
+                    else return this.fieldKey;
+                }}
                 SetValue={undoable((value: string, shiftKey?: boolean, enterKey?: boolean) => {
                     if (shiftKey && enterKey) { // if shift & enter, set value of each cell in column
-                        this.setColumnValues(value, value);
+                        this.setColumnValues(value, '');
+                        this._altTitle = undefined;
                         this._props.finishEdit?.();
                         return true;
-                    }
-                    this._props.finishEdit?.(); // else save new value to header field
+                    } else if (enterKey) this.updateAlt(value);
+                    this._props.finishEdit?.(); 
                     return true;
                 }, 'edit column header')}
             />
@@ -155,12 +167,6 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
                     width: this._props.columnWidths[this._props.columnIndex],
                 }}
                 onPointerDown={this.setupDrag}
-                // onPointerEnter={() => {
-                //     console.log(true);
-                //     this._editing = true}}
-                // onPointerLeave={() => {
-                //     console.log(false);
-                //     this._editing = false}}
                 ref={col => {
                     if (col) {
                         this._props.setColRef(this._props.columnIndex, col);
@@ -171,7 +177,7 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
                 <div>{this.editableView}</div>
 
                 <div className="schema-header-menu">
-                    <div className="schema-header-button" onPointerDown={e => this._props.openContextMenu(e.clientX, e.clientY, this._props.columnIndex, this._fieldType)}>
+                    <div className="schema-header-button" onPointerDown={e => this._props.openContextMenu(e.clientX, e.clientY, this._props.columnIndex)}>
                         <FontAwesomeIcon icon="ellipsis-h" />
                     </div>
                     <div className="schema-sort-button" onPointerDown={this.sortClicked} style={this._props.sortField === this.fieldKey ? { backgroundColor: Colors.MEDIUM_BLUE } : {}}>
diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
index 51a92ff35..4531f30a8 100644
--- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
@@ -142,7 +142,7 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
                     contents={undefined}
                     fieldContents={fieldProps}
                     editing={selectedCell(this._props) ? undefined : false}
-                    GetValue={() => this._props.cleanupField(Field.toKeyValueString(fieldProps.Document, this._props.fieldKey, SnappingManager.MetaKey)).replace(/[";]/g, '')} //TODO: feed this into parser that handles idToDoc
+                    GetValue={() => this._props.cleanupField(Field.toKeyValueString(fieldProps.Document, this._props.fieldKey, SnappingManager.MetaKey))} //TODO: feed this into parser that handles idToDoc
                     SetValue={undoable((value: string, shiftDown?: boolean, enterKey?: boolean) => {
                         if (shiftDown && enterKey) {
                             this._props.setColumnValues(this._props.fieldKey.replace(/^_/, ''), value);
@@ -150,7 +150,7 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
                             return true;
                         }
                         const hasNoLayout =  Doc.IsDataProto(fieldProps.Document) ? true : undefined; // the "delegate" is a a data document so never write to it's proto
-                        const ret = Doc.SetField(fieldProps.Document, this._props.fieldKey.replace(/^_/, ''), value, hasNoLayout);
+                        const ret = Doc.SetField(fieldProps.Document, this._props.fieldKey.replace(/^_/, ''), value, true);
                         this._props.finishEdit?.();
                         return ret;
                     }, 'edit schema cell')}