columheader editing working!! (kinda hacky using readonly input revisit)

5 files changed, 70 insertions, 50 deletions

diff --git a/src/client/views/EditableView.scss b/src/client/views/EditableView.scss
index 27b260450..e492068c8 100644
--- a/src/client/views/EditableView.scss
+++ b/src/client/views/EditableView.scss
@@ -5,6 +5,7 @@
     hyphens: auto;
     overflow: hidden;
     height: 100%;
+    width: 100%;
     min-width: 20;
     text-overflow: ellipsis;
 }
@@ -33,6 +34,8 @@
     pointer-events: all;
 }
 
+
+
 .editableView-input:focus {
     border: none;
     outline: none;
diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index 011b6c77a..4c4ef227a 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
-import { action, IReactionDisposer, makeObservable, observable, reaction, runInAction } from 'mobx';
+import { action, computed, IReactionDisposer, makeObservable, observable, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import * as Autosuggest from 'react-autosuggest';
@@ -55,7 +55,7 @@ export interface EditableProps {
     placeholder?: string;
     wrap?: string; // nowrap, pre-wrap, etc
 
-    isColHeader?: boolean;
+    showKeyNotVal?: boolean;
 }
 
 /**
@@ -277,9 +277,35 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
         );
     }
 
+    display = () => {
+        let toDisplay;
+        const gval = this._props.GetValue()?.replace(/\n/g, '\\r\\n');
+        if (this._props.showKeyNotVal){
+            toDisplay = <input className="editableView-input"
+            value={this._props.GetValue()}
+            readOnly
+            style={{ display: this._props.display, overflow: 'auto', pointerEvents: 'none', fontSize: this._props.fontSize, width: '100%', margin: 0, background: this._props.background}}
+            // eslint-disable-next-line jsx-a11y/no-autofocus
+        />
+        } else {
+            toDisplay = (<span
+            style={{
+                fontStyle: this._props.fontStyle,
+                fontSize: this._props.fontSize,
+            }}>
+            {
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                this._props.fieldContents ? <FieldView {...this._props.fieldContents} /> : this.props.contents ? this._props.contents?.valueOf() : ''
+            }
+        </span>)
+        }
+
+        return toDisplay;
+    }
+
     render() {
         const gval = this._props.GetValue()?.replace(/\n/g, '\\r\\n');
-        if ((this._editing && gval !== undefined) || this._props.isColHeader) {
+        if ((this._editing && gval !== undefined)) {
             return this._props.sizeToContent ? (
                 <div style={{ display: 'grid', minWidth: 100 }}>
                     <div style={{ display: 'inline-block', position: 'relative', height: 0, width: '100%', overflow: 'hidden' }}>{gval}</div>
@@ -300,21 +326,13 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
                     minHeight: '10px',
                     whiteSpace: this._props.oneLine ? 'nowrap' : 'pre-line',
                     height: this._props.height,
+                    width: '100%',
                     maxHeight: this._props.maxHeight,
                     fontStyle: this._props.fontStyle,
                     fontSize: this._props.fontSize,
                 }}
                 onClick={this.onClick}>
-                <span
-                    style={{
-                        fontStyle: this._props.fontStyle,
-                        fontSize: this._props.fontSize,
-                    }}>
-                    {
-                        // eslint-disable-next-line react/jsx-props-no-spreading
-                        this._props.fieldContents ? <FieldView {...this._props.fieldContents} /> : this.props.contents ? this._props.contents?.valueOf() : ''
-                    }
-                </span>
+                {this.display()}
             </div>
         );
     }
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
index 269bb4de5..fd2e882d9 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
@@ -159,7 +159,7 @@
         flex-grow: 2;
         margin: 5px;
         overflow: hidden;
-        min-width: 20%;
+        min-width: 100%;
     }
 
     .schema-column-edit-wrapper {
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 3d7c7882e..db23f874e 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -331,7 +331,7 @@ export class CollectionSchemaView extends CollectionSubView() {
 
         const currKeys = this.columnKeys.slice();
         currKeys.splice(index, 1);
-        this.layoutDoc.schema_columnKeys = new List<string>(currKeys);
+        this.layoutDoc.schema_columnKeys = new List<string>(currKeys); 
     };
 
     @action
@@ -677,19 +677,6 @@ export class CollectionSchemaView extends CollectionSubView() {
                         })}
                     />
                 );
-            case ColumnType.Equation:
-                return (
-                    <input
-                        type="text"
-                        name=""
-                        id=""
-                        value={this._newFieldDefault ?? ''}
-                        onPointerDown={e => e.stopPropagation()}
-                        onChange={action((e: any) => {
-                            this._newFieldDefault = e.target.value;
-                        })}
-                    />
-                );
             default:
                 return undefined;
         }
@@ -714,7 +701,6 @@ export class CollectionSchemaView extends CollectionSubView() {
     @action
     setKey = (key: string, defaultVal?: any, index?: number) => {
         if (this.columnKeys.includes(key)){
-            this._newFieldWarning = 'Field already exists';
             return;
         }
 
@@ -798,12 +784,29 @@ export class CollectionSchemaView extends CollectionSubView() {
         this._filterColumnIndex = undefined;
     };
 
-    openContextMenu = (x: number, y: number, index: number) => {
+    openContextMenu = (x: number, y: number, index: number, fieldType: ColumnType) => {
         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: 'Change field',
+            description: `Field type: ${toDisplay}`,
             event: () => this.openColumnMenu(index, false),
             icon: 'pencil-alt',
         });
@@ -886,18 +889,6 @@ export class CollectionSchemaView extends CollectionSubView() {
                     />
                     string
                 </div>
-                <div className="schema-key-type-option">
-                    <input
-                        type="radio"
-                        name="newFieldType"
-                        checked={this._newFieldType === ColumnType.Equation}
-                        onChange={action(() => {
-                            this._newFieldType = ColumnType.Equation;
-                            this._newFieldDefault = '';
-                        })}
-                    />
-                    equation
-                </div>
                 <div className="schema-key-default-val">value: {this.fieldDefaultInput}</div>
                 <div className="schema-key-warning">{this._newFieldWarning}</div>
                 <div
diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
index 58ac4e45d..f404eb444 100644
--- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
@@ -21,6 +21,7 @@ import { CollectionSchemaView } from './CollectionSchemaView';
 import { SnappingManager } from '../../../util/SnappingManager';
 import { undoable } from '../../../util/UndoManager';
 import { FInfo } from '../../../documents/Documents';
+import { ColumnType } from '../../../../fields/SchemaHeaderField';
 
 export interface SchemaColumnHeaderProps {
     Document: Doc;
@@ -38,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) => void;
+    openContextMenu: (x: number, y: number, index: number, fieldType: ColumnType) => void;
     setColRef: (index: number, ref: HTMLDivElement) => void;
     rootSelected?: () => boolean;
     columnWidth: () => number;
@@ -49,7 +50,8 @@ export interface SchemaColumnHeaderProps {
 @observer
 export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHeaderProps> {
 
-    @observable _editing: boolean = false;
+    @observable _editing: boolean | undefined = false;
+    @observable _fieldType: ColumnType = ColumnType.String;
 
     @computed get fieldKey() {
         return this._props.columnKeys[this._props.columnIndex];
@@ -125,9 +127,9 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
                 allowCRs={false}
                 contents={undefined}
                 fieldContents={fieldProps}
-                editing={undefined}
-                isColHeader={true} // tells the EditableView to display the fieldKey itself, and not its value
-                GetValue={() => {console.log(this.fieldKey); return this.fieldKey}}
+                editing={undefined}  
+                showKeyNotVal={true} // tells the EditableView to display the fieldKey itself, and not its value
+                GetValue={() => 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);
@@ -142,7 +144,7 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
     }
 
     // staticView = () => {
-    //     return <div className="schema-column-title" onPointerDown={e => {this._editing = true; console.log(this._editing)}}>{this.fieldKey}</div>
+    //      return <div className="schema-column-title" onPointerDown={e => {this._editing = true; console.log(this._editing)}}>{this.fieldKey}</div>
     // }
 
     render() {
@@ -153,6 +155,12 @@ 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);
@@ -163,7 +171,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)}>
+                    <div className="schema-header-button" onPointerDown={e => this._props.openContextMenu(e.clientX, e.clientY, this._props.columnIndex, this._fieldType)}>
                         <FontAwesomeIcon icon="ellipsis-h" />
                     </div>
                     <div className="schema-sort-button" onPointerDown={this.sortClicked} style={this._props.sortField === this.fieldKey ? { backgroundColor: Colors.MEDIUM_BLUE } : {}}>