basic key selection menu created

1 files changed, 96 insertions, 9 deletions

diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
index bee76bb24..a6140bafd 100644
--- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
@@ -1,39 +1,124 @@
 import React = require('react');
-import { computed } from 'mobx';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { action, computed, observable } from 'mobx';
 import { observer } from 'mobx-react';
-import { EditableView } from '../../EditableView';
+import { emptyFunction, setupMoveUpEvents } from '../../../../Utils';
 import './CollectionSchemaView.scss';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 export interface SchemaColumnHeaderProps {
     columnKeys: string[];
     columnWidths: number[];
     columnIndex: number;
+    possibleKeys: string[];
     changeColumnKey: (index: number, newKey: string) => boolean;
-    addColumn: (index: number) => void;
+    addColumn: (index: number, key: string) => void;
     removeColumn: (index: number) => void;
     resizeColumn: (e: any, index: number, left: boolean) => void;
+    dragColumn: (e: any, index: number) => boolean;
 }
 
 @observer
 export class SchemaColumnHeader extends React.Component<SchemaColumnHeaderProps> {
+    @observable _menuVisible: boolean = false;
+    @observable _menuValue: string = '';
+    @observable _menuOptions: string[] = [];
+    private _makeNewColumn = false;
+
     @computed get fieldKey() {
         return this.props.columnKeys[this.props.columnIndex];
     }
 
+    @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}
+                    </div>
+                ))}
+                <div
+                    onPointerDown={e => {
+                        e.stopPropagation();
+                        this.setKey(this._menuValue);
+                    }}>
+                    + new field
+                </div>
+            </div>
+        );
+    }
+
+    onSearchKeyDown = (e: React.KeyboardEvent) => {
+        switch (e.key) {
+            case 'Enter':
+                this.setKey(this._menuOptions.length > 0 ? this._menuOptions[0] : this._menuValue);
+                break;
+            case 'Escape':
+                this.toggleColumnMenu();
+                break;
+        }
+    };
+
+    @action
+    setKey = (key: string) => {
+        if (this._makeNewColumn) {
+            this.props.addColumn(this.props.columnIndex, key);
+        } else {
+            this.props.changeColumnKey(this.props.columnIndex, key);
+        }
+        this.toggleColumnMenu();
+    };
+
+    @action
+    updateKeySearch = (e: React.ChangeEvent<HTMLInputElement>) => {
+        this._menuValue = e.target.value;
+        this._menuOptions = this.props.possibleKeys.filter(value => value.toLowerCase().includes(this._menuValue.toLowerCase()));
+    };
+
+    @action
+    onPointerDown = (e: React.PointerEvent) => {
+        e.stopPropagation();
+
+        setupMoveUpEvents(this, e, e => this.props.dragColumn(e, this.props.columnIndex), emptyFunction, emptyFunction);
+    };
+
+    @action
+    toggleColumnMenu = (newCol?: boolean) => {
+        this._makeNewColumn = false;
+        if (this._menuVisible) {
+            this._menuVisible = false;
+        } else {
+            this._menuVisible = true;
+            this._menuValue = this.fieldKey;
+            this._menuOptions = this.props.possibleKeys;
+            if (newCol) {
+                this._makeNewColumn = true;
+            }
+        }
+    };
+
     render() {
         return (
-            <div className="schema-column-header" style={{ width: this.props.columnWidths[this.props.columnIndex] }}>
+            <div className="schema-column-header" style={{ width: this.props.columnWidths[this.props.columnIndex] }} onPointerDown={this.onPointerDown}>
                 <div className="schema-column-resizer left" onPointerDown={e => this.props.resizeColumn(e, this.props.columnIndex, true)}></div>
-                <div className="schema-column-title">
-                    <EditableView SetValue={(newKey: string) => this.props.changeColumnKey(this.props.columnIndex, newKey)} GetValue={() => this.fieldKey} contents={this.fieldKey} />
-                </div>
+                <div className="schema-column-title">{this.fieldKey}</div>
 
                 <div className="schema-header-menu">
                     <div
                         className="schema-header-button"
                         onPointerDown={e => {
-                            this.props.addColumn(this.props.columnIndex + 1);
+                            this.toggleColumnMenu();
+                        }}>
+                        <FontAwesomeIcon icon="pencil-alt" />
+                    </div>
+                    <div
+                        className="schema-header-button"
+                        onPointerDown={e => {
+                            this.toggleColumnMenu(true);
                         }}>
                         <FontAwesomeIcon icon="plus" />
                     </div>
@@ -47,6 +132,8 @@ export class SchemaColumnHeader extends React.Component<SchemaColumnHeaderProps>
                 </div>
 
                 <div className="schema-column-resizer right" onPointerDown={e => this.props.resizeColumn(e, this.props.columnIndex, false)}></div>
+
+                {this._menuVisible && this.renderColumnMenu}
             </div>
         );
     }