editable text in header

4 files changed, 59 insertions, 21 deletions

diff --git a/src/client/views/collections/CollectionSchemaHeaders.tsx b/src/client/views/collections/CollectionSchemaHeaders.tsx
index b84b75172..8494f3dca 100644
--- a/src/client/views/collections/CollectionSchemaHeaders.tsx
+++ b/src/client/views/collections/CollectionSchemaHeaders.tsx
@@ -285,6 +285,7 @@ export interface KeysDropdownProps {
     addNew: boolean;
     onSelect: (oldKey: string, newKey: string, addnew: boolean) => void;
     setIsEditing: (isEditing: boolean) => void;
+    width?: string;
 }
 @observer
 export class KeysDropdown extends React.Component<KeysDropdownProps> {
@@ -357,12 +358,13 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> {
             this.props.existingKeys.findIndex(key => key.toUpperCase() === this._searchTerm.toUpperCase()) > -1;
 
         const options = keyOptions.map(key => {
-            return <div key={key} className="key-option" onPointerDown={e => e.stopPropagation()} onClick={() => { this.onSelect(key); this.setSearchTerm(""); }}>{key}</div>;
+            return <div key={key} className="key-option" style={{ border: "1px solid lightgray" }}
+                onPointerDown={e => e.stopPropagation()} onClick={() => { this.onSelect(key); this.setSearchTerm(""); }}>{key}</div>;
         });
 
         // if search term does not already exist as a group type, give option to create new group type
         if (!exactFound && this._searchTerm !== "" && this.props.canAddNew) {
-            options.push(<div key={""} className="key-option"
+            options.push(<div key={""} className="key-option" style={{ border: "1px solid lightgray" }}
                 onClick={() => { this.onSelect(this._searchTerm); this.setSearchTerm(""); }}>
                 Create "{this._searchTerm}" key</div>);
         }
@@ -373,13 +375,15 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> {
     render() {
         return (
             <div className="keys-dropdown">
-                <input className="keys-search" ref={this._inputRef} type="text" value={this._searchTerm} placeholder="Column key" onKeyDown={this.onKeyDown}
+                <input className="keys-search" style={{ width: this.props.width }}
+                    ref={this._inputRef} type="text" value={this._searchTerm} placeholder="Column key" onKeyDown={this.onKeyDown}
                     onChange={e => this.onChange(e.target.value)}
                     onClick={(e) => {
                         //this._inputRef.current!.select();
                         e.stopPropagation();
                     }} onFocus={this.onFocus} onBlur={this.onBlur}></input>
-                <div className="keys-options-wrapper" onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerOut}>
+                <div className="keys-options-wrapper" style={{ backgroundColor: "white" }}
+                    onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerOut}>
                     {this.renderOptions()}
                 </div>
             </div >
diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss
index a21249c58..5608cb7ab 100644
--- a/src/client/views/collections/CollectionSchemaView.scss
+++ b/src/client/views/collections/CollectionSchemaView.scss
@@ -266,6 +266,7 @@ button.add-column {
     .keys-dropdown {
         position: relative;
         width: 100%;
+        background-color: white;
 
         input {
             border: 2px solid $light-color-secondary;
@@ -285,9 +286,11 @@ button.add-column {
             position: absolute;
             top: 28px;
             box-shadow: 0 10px 16px rgba(0, 0, 0, 0.1);
+            background-color: white;
 
             .key-option {
-                background-color: $light-color;
+                //background-color: $light-color;
+                background-color: white;
                 border: 1px solid lightgray;
                 padding: 2px 3px;
 
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 900949b94..a9c599e0e 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -60,7 +60,6 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
     @computed get borderWidth() { return Number(COLLECTION_BORDER_WIDTH); }
 
     @observable _menuWidth = 0;
-    @observable _menuContent: any = "";
     @observable _headerOpen = false;
     @observable _isOpen = false;
     @observable _node: HTMLDivElement | null = null;
@@ -288,8 +287,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
     }
 
     @action
-    openHeader = (col: any, menu: any, screenx: number, screeny: number) => {
-        this._menuContent = menu;
+    openHeader = (col: any, screenx: number, screeny: number) => {
         this._col = col;
         this._headerOpen = !this._headerOpen;
         this._pointerX = screenx;
@@ -363,8 +361,8 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
     onWheel(e: React.WheelEvent) {
         const scale = this.props.ScreenToLocalTransform().Scale;
         this.props.active(true) && e.stopPropagation();
-        this.menuCoordinates[0] -= e.screenX / scale;
-        this.menuCoordinates[1] -= e.screenY / scale;
+        //this.menuCoordinates[0] -= e.screenX / scale;
+        //this.menuCoordinates[1] -= e.screenY / scale;
     }
 
     @computed get renderMenu() {
@@ -505,6 +503,8 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
             onResizedChange={this.onResizedChange}
             setColumns={this.setColumns}
             reorderColumns={this.reorderColumns}
+            changeColumns={this.changeColumns}
+            setHeaderIsEditing={this.setHeaderIsEditing}
         />;
     }
 
diff --git a/src/client/views/collections/SchemaTable.tsx b/src/client/views/collections/SchemaTable.tsx
index b9df2fe6b..5df0a676e 100644
--- a/src/client/views/collections/SchemaTable.tsx
+++ b/src/client/views/collections/SchemaTable.tsx
@@ -20,12 +20,13 @@ import { COLLECTION_BORDER_WIDTH } from '../../views/globalCssVariables.scss';
 import { ContextMenu } from "../ContextMenu";
 import '../DocumentDecorations.scss';
 import { CellProps, CollectionSchemaCell, CollectionSchemaCheckboxCell, CollectionSchemaDocCell, CollectionSchemaNumberCell, CollectionSchemaStringCell, CollectionSchemaImageCell, CollectionSchemaListCell } from "./CollectionSchemaCells";
-import { CollectionSchemaAddColumnHeader } from "./CollectionSchemaHeaders";
+import { CollectionSchemaAddColumnHeader, KeysDropdown } from "./CollectionSchemaHeaders";
 import { MovableColumn, MovableRow } from "./CollectionSchemaMovableTableHOC";
 import "./CollectionSchemaView.scss";
 import { CollectionView } from "./CollectionView";
 import { ContentFittingDocumentView } from "../nodes/ContentFittingDocumentView";
 import { emptyFunction, returnZero, returnOne, returnFalse, returnEmptyFilter, emptyPath } from "../../../Utils";
+import { TouchScrollableMenuItem } from "../TouchScrollableMenu";
 
 
 enum ColumnType {
@@ -72,11 +73,13 @@ export interface SchemaTableProps {
     columns: SchemaHeaderField[];
     documentKeys: any[];
     headerIsEditing: boolean;
-    openHeader: (column: any, menu: any, screenx: number, screeny: number) => void;
+    openHeader: (column: any, screenx: number, screeny: number) => void;
     onPointerDown: (e: React.PointerEvent) => void;
     onResizedChange: (newResized: Resize[], event: any) => void;
     setColumns: (columns: SchemaHeaderField[]) => void;
     reorderColumns: (toMove: SchemaHeaderField, relativeTo: SchemaHeaderField, before: boolean, columnsValues: SchemaHeaderField[]) => void;
+    changeColumns: (oldKey: string, newKey: string, addNew: boolean) => void;
+    setHeaderIsEditing: (isEditing: boolean) => void;
 }
 
 @observer
@@ -91,6 +94,8 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
     @observable _showDataDoc: any = "";
     @observable _showDocPos: number[] = [];
 
+    @observable _showTitleDropdown: boolean = false;
+
     @computed get previewWidth() { return () => NumCast(this.props.Document.schemaPreviewWidth); }
     @computed get previewHeight() { return () => this.props.PanelHeight() - 2 * this.borderWidth; }
     @computed get tableWidth() { return this.props.PanelWidth() - 2 * this.borderWidth - this.DIVIDER_WIDTH - this.previewWidth(); }
@@ -126,6 +131,9 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
         }, [] as SortingRule[]);
     }
 
+    @action
+    changeDropdown = () => { console.log("header clicked"); this._showTitleDropdown = !this._showTitleDropdown; }
+
     @computed get borderWidth() { return Number(COLLECTION_BORDER_WIDTH); }
     @computed get tableColumns(): Column<Doc>[] {
 
@@ -156,26 +164,48 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
 
         const cols = this.props.columns.map(col => {
 
+            const keysDropdown = <KeysDropdown
+                keyValue={col.heading}
+                possibleKeys={possibleKeys}
+                existingKeys={this.props.columns.map(c => c.heading)}
+                canAddNew={true}
+                addNew={false}
+                // i think issue is with these two props
+                onSelect={this.props.changeColumns}
+                setIsEditing={this.props.setHeaderIsEditing}
+                width={"100%"}
+            />;
+
             const icon: IconProp = this.getColumnType(col) === ColumnType.Number ? "hashtag" : this.getColumnType(col) === ColumnType.String ? "font" :
                 this.getColumnType(col) === ColumnType.Boolean ? "check-square" : this.getColumnType(col) === ColumnType.Doc ? "file" :
                     this.getColumnType(col) === ColumnType.Image ? "image" : this.getColumnType(col) === ColumnType.List ? "list-ul" : "align-justify";
 
+            const headerText = this._showTitleDropdown ? keysDropdown : col.heading;
 
-
-            const menuContent = <div><FontAwesomeIcon icon={icon} size="sm" />  {col.heading}</div>;
+            const menuContent = <div style={{
+                display: "flex", justifyContent: "space-between", width: "90%"
+            }}>
+                <FontAwesomeIcon icon={icon} size="lg" style={{ display: "inline", paddingLeft: "7px" }} />
+                <div className="keys-dropdown"
+                    style={{ display: "inline", zIndex: 10000 }}>
+                    {keysDropdown}
+                </div>
+            </div>;
 
             const header =
-                <div className="collectionSchemaView-header"
+                <div //className="collectionSchemaView-header"
                     //onClick={e => this.props.openHeader(col, menuContent, e.clientX, e.clientY)}
+                    className="collectionSchemaView-menuOptions"
                     style={{
-                        background: col.color, padding: "4px",
-                        letterSpacing: "2px",
-                        textTransform: "uppercase"
+                        background: col.color, padding: "2px",
+                        // letterSpacing: "2px",
+                        // textTransform: "uppercase",
+                        display: "flex"
                     }}>
                     {menuContent}
-                    <div onClick={e => this.props.openHeader(col, menuContent, e.clientX, e.clientY)}
-                        style={{ float: "right" }}>
-                        <FontAwesomeIcon icon={"caret-down"} size="2x" />
+                    <div onClick={e => this.props.openHeader(col, e.clientX, e.clientY)}
+                        style={{ float: "right", paddingRight: "6px" }}>
+                        <FontAwesomeIcon icon={"caret-down"} id={"down arrow"} size="2x" />
                     </div>
                 </div>;
 
@@ -342,6 +372,7 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
         this.props.columns.push(new SchemaHeaderField(`New field ${index ? "(" + index + ")" : ""}`, "#f1efeb"));
     }
 
+    @action
     getColumnType = (column: SchemaHeaderField): ColumnType => {
         // added functionality to convert old column type stuff to new column type stuff -syip
         if (column.type && column.type !== 0) {