added menu for creating new keys

1 files changed, 83 insertions, 20 deletions

diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
index a6140bafd..cdae79d0c 100644
--- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
@@ -4,14 +4,15 @@ import { action, computed, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import { emptyFunction, setupMoveUpEvents } from '../../../../Utils';
 import './CollectionSchemaView.scss';
+import { ColumnType } from './CollectionSchemaView';
 
 export interface SchemaColumnHeaderProps {
     columnKeys: string[];
     columnWidths: number[];
     columnIndex: number;
     possibleKeys: string[];
-    changeColumnKey: (index: number, newKey: string) => boolean;
-    addColumn: (index: number, key: string) => void;
+    changeColumnKey: (index: number, newKey: string, defaultVal?: any) => void;
+    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;
@@ -20,6 +21,9 @@ export interface SchemaColumnHeaderProps {
 @observer
 export class SchemaColumnHeader extends React.Component<SchemaColumnHeaderProps> {
     @observable _menuVisible: boolean = false;
+    @observable _makeNewField: boolean = false;
+    @observable _newFieldType: ColumnType = ColumnType.Number;
+    @observable _newFieldDefault: any = 0;
     @observable _menuValue: string = '';
     @observable _menuOptions: string[] = [];
     private _makeNewColumn = false;
@@ -28,26 +32,85 @@ export class SchemaColumnHeader extends React.Component<SchemaColumnHeaderProps>
         return this.props.columnKeys[this.props.columnIndex];
     }
 
+    @computed get fieldDefaultInput() {
+        switch (this._newFieldType) {
+            case ColumnType.Number:
+                return <input type="number" name="" id="" value={this._newFieldDefault ?? 0} onPointerDown={e => e.stopPropagation()} onChange={action(e => (this._newFieldDefault = e.target.value))} />;
+            case ColumnType.Boolean:
+                return <input type="checkbox" name="" id="" value={this._newFieldDefault ?? false} onPointerDown={e => e.stopPropagation()} onChange={action(e => (this._newFieldDefault = e.target.value))} />;
+            case ColumnType.String:
+                return <input type="text" name="" id="" value={this._newFieldDefault ?? ''} onPointerDown={e => e.stopPropagation()} onChange={action(e => (this._newFieldDefault = e.target.value))} />;
+        }
+    }
+
     @computed get renderColumnMenu() {
         return (
             <div className="schema-column-menu">
                 <input type="text" value={this._menuValue} onKeyDown={this.onSearchKeyDown} onChange={this.updateKeySearch} onPointerDown={e => e.stopPropagation()} />
-                {this._menuOptions.map(key => (
-                    <div
-                        onPointerDown={e => {
-                            e.stopPropagation();
-                            this.setKey(key);
-                        }}>
-                        {key}
+                {this._makeNewField ? (
+                    <div className="schema-new-key-options">
+                        <input
+                            type="radio"
+                            name="newFieldType"
+                            id=""
+                            checked={this._newFieldType == ColumnType.Number}
+                            onChange={action(() => {
+                                this._newFieldType = ColumnType.Number;
+                                this._newFieldDefault = 0;
+                            })}
+                        />{' '}
+                        math
+                        <input
+                            type="radio"
+                            name="newFieldType"
+                            id=""
+                            checked={this._newFieldType == ColumnType.Boolean}
+                            onChange={action(() => {
+                                this._newFieldType = ColumnType.Boolean;
+                                this._newFieldDefault = false;
+                            })}
+                        />{' '}
+                        boolean
+                        <input
+                            type="radio"
+                            name="newFieldType"
+                            id=""
+                            checked={this._newFieldType == ColumnType.String}
+                            onChange={action(() => {
+                                this._newFieldType = ColumnType.String;
+                                this._newFieldDefault = '';
+                            })}
+                        />{' '}
+                        string
+                        {this.fieldDefaultInput}
+                        <div
+                            onPointerDown={action(e => {
+                                this.setKey(this._menuValue, this._newFieldDefault);
+                                this._makeNewField = false;
+                            })}>
+                            done
+                        </div>
                     </div>
-                ))}
-                <div
-                    onPointerDown={e => {
-                        e.stopPropagation();
-                        this.setKey(this._menuValue);
-                    }}>
-                    + new field
-                </div>
+                ) : (
+                    <div className="schema-key-search">
+                        <div
+                            onPointerDown={action(e => {
+                                e.stopPropagation();
+                                this._makeNewField = true;
+                            })}>
+                            + new field
+                        </div>
+                        {this._menuOptions.map(key => (
+                            <div
+                                onPointerDown={e => {
+                                    e.stopPropagation();
+                                    this.setKey(key);
+                                }}>
+                                {key}
+                            </div>
+                        ))}
+                    </div>
+                )}
             </div>
         );
     }
@@ -64,11 +127,11 @@ export class SchemaColumnHeader extends React.Component<SchemaColumnHeaderProps>
     };
 
     @action
-    setKey = (key: string) => {
+    setKey = (key: string, defaultVal?: any) => {
         if (this._makeNewColumn) {
-            this.props.addColumn(this.props.columnIndex, key);
+            this.props.addColumn(this.props.columnIndex, key, defaultVal);
         } else {
-            this.props.changeColumnKey(this.props.columnIndex, key);
+            this.props.changeColumnKey(this.props.columnIndex, key, defaultVal);
         }
         this.toggleColumnMenu();
     };