editable columnheader progress; still not updating properly on adding new col

1 files changed, 22 insertions, 12 deletions

diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
index b74b2ace9..794d5d8ac 100644
--- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
@@ -53,12 +53,12 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
 
     @observable _editing: boolean = false;
 
-    get fieldKey() {
+    @computed get fieldKey() {
         return this._props.columnKeys[this._props.columnIndex];
     }
 
     getFinfo = computedFn((fieldKey: string) => this._props.schemaView?.fieldInfos.get(fieldKey));
-    setColumnValues = (field: string, defaultValue: string) => {this._props.schemaView?.setKey(field, defaultValue);}
+    setColumnValues = (field: string, defaultValue: string) => {this._props.schemaView?.setKey(field, defaultValue, this._props.columnIndex);}
 
     @action
     sortClicked = (e: React.PointerEvent) => {
@@ -108,24 +108,34 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
         };
         const readOnly = this.getFinfo(fieldKey)?.readOnly ?? false;
         const cursor = !readOnly ? 'text' : 'default';
-        const pointerEvents = 'all';
+        const pointerEvents: 'all' | 'none' = 'all';
         return { color, fieldProps, cursor, pointerEvents };
     }
 
     @computed get editableView() {
         const { color, fieldProps, pointerEvents } = this.renderProps(this._props); 
 
-        return <div className='column-header-edit-wrapper'>
+        return <div className='schema-column-edit-wrapper' 
+        style={{
+            color,
+            width: '100%',
+            pointerEvents,
+        }}>
             <EditableView
                 ref={r => this._props.autoFocus && r?.setIsFocused(true)}
                 oneLine={this._props.oneLine}
                 allowCRs={this._props.allowCRs}
                 contents={undefined}
                 fieldContents={fieldProps}
-                editing={this._editing ? undefined : false}
-                GetValue={() => Field.toKeyValueString(fieldProps.Document, this.fieldKey, SnappingManager.MetaKey).replace(/[";]/g, '')}
-                SetValue={undoable((value: string) => {
-                    this.setColumnValues(value, value);
+                editing={undefined}
+                isColHeader={true}
+                GetValue={() => {console.log(this.fieldKey); return this.fieldKey}}
+                SetValue={undoable((value: string, shiftKey?: boolean, enterKey?: boolean) => {
+                    if (shiftKey && enterKey) {
+                        this.setColumnValues(value, value);
+                        this._props.finishEdit?.();
+                        return true;
+                    }
                     this._props.finishEdit?.();
                     return true;
                 }, 'edit column header')}
@@ -133,9 +143,9 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
             </div>
     }
 
-    staticView = () => {
-        return <div className="schema-column-title" onPointerDown={e => {this._editing = true; console.log(this._editing)}}>{this.fieldKey}</div>
-    }
+    // staticView = () => {
+    //     return <div className="schema-column-title" onPointerDown={e => {this._editing = true; console.log(this._editing)}}>{this.fieldKey}</div>
+    // }
 
     render() {
         return (
@@ -152,7 +162,7 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
                 }}>
                 <div className="schema-column-resizer left" onPointerDown={e => this._props.resizeColumn(e, this._props.columnIndex)} />
 
-                <div>{this._editing ? this.editableView : this.staticView()}</div>
+                <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)}>