columnheader editing progress

4 files changed, 88 insertions, 71 deletions

diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index 684b948af..05c926399 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -155,7 +155,7 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
             case 'ArrowDown':
             case 'ArrowLeft':
             case 'ArrowRight':
-                e.stopPropagation();
+                //e.stopPropagation();
                 break;
             case 'Shift':
             case 'Alt':
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index d844fdefc..d74cb56cf 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -275,6 +275,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     changeColumnKey = (index: number, newKey: string, defaultVal?: any) => {
         if (!this.documentKeys.includes(newKey)) {
             this.addNewKey(newKey, defaultVal);
+            console.log("added")
         }
 
         const currKeys = this.columnKeys.slice(); // copy the column key array first, then change it.
@@ -745,15 +746,23 @@ export class CollectionSchemaView extends CollectionSubView() {
 
     @action
     setKey = (key: string, defaultVal?: any) => {
+        console.log("setKey called with" + key)
         if (this._makeNewColumn) {
             this.addColumn(key, defaultVal);
+            this._makeNewColumn = false;
         } else {
             this.changeColumnKey(this._columnMenuIndex!, key, defaultVal);
+            console.log("changed")
         }
         this.closeColumnMenu();
     };
 
-    setColumnValues = (key: string, value: string) => {
+    setColumnValue = () => {
+
+    }
+
+    setCellValues = (key: string, value: string) => {
+        console.log("field: " + key + " vale: " + value);
         const selectedDocs: Doc[] = [];
         this.childDocs.forEach(doc => {
             const docIsSelected = this._selectedCells && !(this._selectedCells?.filter(d => d === doc).length === 0);
diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
index b498a4850..b74b2ace9 100644
--- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
@@ -8,11 +8,12 @@ import { emptyFunction } from '../../../../Utils';
 import { Colors } from '../../global/globalEnums';
 import './CollectionSchemaView.scss';
 import { EditableView } from '../../EditableView';
+import { ObservableReactComponent } from '../../ObservableReactComponent';
 import { DefaultStyleProvider, returnEmptyDocViewList } from '../../StyleProvider';
 import { FieldViewProps } from '../../nodes/FieldView';
 import { Doc, Field } from '../../../../fields/Doc';
 import { dropActionType } from '../../../util/DropActionTypes';
-import { Transform } from 'prosemirror-transform';
+import { Transform } from '../../../util/Transform';
 import { SchemaTableCell } from './SchemaTableCell';
 import { DocCast } from '../../../../fields/Types';
 import { computedFn } from 'mobx-utils';
@@ -48,110 +49,117 @@ export interface SchemaColumnHeaderProps {
 }
 
 @observer
-export class SchemaColumnHeader extends React.Component<SchemaColumnHeaderProps> {
+export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHeaderProps> {
 
     @observable _editing: boolean = false;
 
     get fieldKey() {
-        return this.props.columnKeys[this.props.columnIndex];
+        return this._props.columnKeys[this._props.columnIndex];
     }
 
-    // getFinfo = computedFn((fieldKey: string) => this.props.schemaView?.fieldInfos.get(fieldKey));
-    // setColumnValues = (field: string, value: string) => this.props.schemaView?.setColumnValues(field, value);
+    getFinfo = computedFn((fieldKey: string) => this._props.schemaView?.fieldInfos.get(fieldKey));
+    setColumnValues = (field: string, defaultValue: string) => {this._props.schemaView?.setKey(field, defaultValue);}
 
     @action
     sortClicked = (e: React.PointerEvent) => {
         e.stopPropagation();
         e.preventDefault();
-        if (this.props.sortField === this.fieldKey && this.props.sortDesc) {
-            this.props.setSort(undefined);
-        } else if (this.props.sortField === this.fieldKey) {
-            this.props.setSort(this.fieldKey, true);
+        if (this._props.sortField === this.fieldKey && this._props.sortDesc) {
+            this._props.setSort(undefined);
+        } else if (this._props.sortField === this.fieldKey) {
+            this._props.setSort(this.fieldKey, true);
         } else {
-            this.props.setSort(this.fieldKey, false);
+            this._props.setSort(this.fieldKey, false);
         }
     };
 
     @action
     setupDrag = (e: React.PointerEvent) => {
-        this.props.isContentActive(true) && setupMoveUpEvents(this, e, moveEv => this.props.dragColumn(moveEv, this.props.columnIndex), emptyFunction, emptyFunction);
+        this._props.isContentActive(true) && setupMoveUpEvents(this, e, moveEv => this._props.dragColumn(moveEv, this._props.columnIndex), emptyFunction, emptyFunction);
     };
 
-    // public static renderProps(props: SchemaColumnHeaderProps) {
-    //     const { columnKeys, columnWidth, isContentActive, Document } = props;
-    //     const fieldKey = columnKeys[props.columnIndex];
-    //     const color = 'black'; // color of text in cells
-    //     const fieldProps: FieldViewProps = {
-    //         childFilters: returnEmptyFilter,
-    //         childFiltersByRanges: returnEmptyFilter,
-    //         docViewPath: returnEmptyDocViewList,
-    //         searchFilterDocs: returnEmptyDoclist,
-    //         styleProvider: DefaultStyleProvider,
-    //         isSelected: returnFalse,
-    //         setHeight: returnFalse,
-    //         select: emptyFunction,
-    //         dragAction: dropActionType.move,
-    //         renderDepth: 1,
-    //         noSidebar: true,
-    //         isContentActive: returnFalse,
-    //         whenChildContentsActiveChanged: emptyFunction,
-    //         ScreenToLocalTransform: Transform.Identity,
-    //         focus: emptyFunction,
-    //         addDocTab: SchemaTableCell.addFieldDoc,
-    //         pinToPres: returnZero,
-    //         Document: DocCast(Document.rootDocument, Document),
-    //         fieldKey: fieldKey,
-    //         PanelWidth: columnWidth,
-    //         PanelHeight: props.rowHeight,
-    //         rootSelected: props.rootSelected,
-    //     };
-    //     const readOnly = getFinfo(fieldKey)?.readOnly ?? false;
-    //     const cursor = !readOnly ? 'text' : 'default';
-    //     const pointerEvents = 'all';
-    //     return { color, fieldProps, cursor, pointerEvents };
-    // }
+    renderProps = (props: SchemaColumnHeaderProps) => {
+        const { columnKeys, columnWidth, Document } = props;
+        const fieldKey = columnKeys[props.columnIndex];
+        const color = 'black'; // color of text in cells
+        const fieldProps: FieldViewProps = {
+            childFilters: returnEmptyFilter,
+            childFiltersByRanges: returnEmptyFilter,
+            docViewPath: returnEmptyDocViewList,
+            searchFilterDocs: returnEmptyDoclist,
+            styleProvider: DefaultStyleProvider,
+            isSelected: returnFalse,
+            setHeight: returnFalse,
+            select: emptyFunction,
+            dragAction: dropActionType.move,
+            renderDepth: 1,
+            noSidebar: true,
+            isContentActive: returnFalse,
+            whenChildContentsActiveChanged: emptyFunction,
+            ScreenToLocalTransform: Transform.Identity,
+            focus: emptyFunction,
+            addDocTab: SchemaTableCell.addFieldDoc,
+            pinToPres: returnZero,
+            Document: DocCast(Document.rootDocument, Document),
+            fieldKey: fieldKey,
+            PanelWidth: columnWidth,
+            PanelHeight: props.rowHeight,
+            rootSelected: props.rootSelected,
+        };
+        const readOnly = this.getFinfo(fieldKey)?.readOnly ?? false;
+        const cursor = !readOnly ? 'text' : 'default';
+        const pointerEvents = 'all';
+        return { color, fieldProps, cursor, pointerEvents };
+    }
+
+    @computed get editableView() {
+        const { color, fieldProps, pointerEvents } = this.renderProps(this._props); 
 
-    // @computed get editableView() {
-    //     const { color, fieldProps, pointerEvents } = SchemaColumnHeader.renderProps(this.props); 
+        return <div className='column-header-edit-wrapper'>
+            <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);
+                    this._props.finishEdit?.();
+                    return true;
+                }, 'edit column header')}
+            />
+            </div>
+    }
 
-    //     return <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={() => this.props.cleanupField(Field.toKeyValueString(fieldProps.Document, this.fieldKey, SnappingManager.MetaKey)).replace(/[";]/g, '')} //TODO: feed this into parser that handles idToDoc
-    //             SetValue={undoable((value: string, enterKey?: boolean) => {
-    //                 if (enterKey) this.setColumnValues(this.fieldKey.replace(/^_/, ''), value);
-    //                 this.props.finishEdit?.();
-    //                 return true;
-    //             }, 'edit schema cell')}
-    //         />
-    // }
+    staticView = () => {
+        return <div className="schema-column-title" onPointerDown={e => {this._editing = true; console.log(this._editing)}}>{this.fieldKey}</div>
+    }
 
     render() {
         return (
             <div
                 className="schema-column-header"
                 style={{
-                    width: this.props.columnWidths[this.props.columnIndex],
+                    width: this._props.columnWidths[this._props.columnIndex],
                 }}
                 onPointerDown={this.setupDrag}
                 ref={col => {
                     if (col) {
-                        this.props.setColRef(this.props.columnIndex, col);
+                        this._props.setColRef(this._props.columnIndex, col);
                     }
                 }}>
-                <div className="schema-column-resizer left" onPointerDown={e => this.props.resizeColumn(e, this.props.columnIndex)} />
-                <div className="schema-column-title" onPointerDown={e => {this._editing = true; console.log(this._editing)}}>{this.fieldKey}</div>
+                <div className="schema-column-resizer left" onPointerDown={e => this._props.resizeColumn(e, this._props.columnIndex)} />
+
+                <div>{this._editing ? this.editableView : this.staticView()}</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)}>
                         <FontAwesomeIcon icon="ellipsis-h" />
                     </div>
-                    <div className="schema-sort-button" onPointerDown={this.sortClicked} style={this.props.sortField === this.fieldKey ? { backgroundColor: Colors.MEDIUM_BLUE } : {}}>
-                        <FontAwesomeIcon icon="caret-right" style={this.props.sortField === this.fieldKey ? { transform: `rotate(${this.props.sortDesc ? '270deg' : '90deg'})` } : {}} />
+                    <div className="schema-sort-button" onPointerDown={this.sortClicked} style={this._props.sortField === this.fieldKey ? { backgroundColor: Colors.MEDIUM_BLUE } : {}}>
+                        <FontAwesomeIcon icon="caret-right" style={this._props.sortField === this.fieldKey ? { transform: `rotate(${this._props.sortDesc ? '270deg' : '90deg'})` } : {}} />
                     </div>
                 </div>
             </div>
diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
index 3295c9ab1..908939ecc 100644
--- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
@@ -59,7 +59,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
     selectCell = (doc: Doc, col: number, shift: boolean, ctrl: boolean) => this.schemaView?.selectCell(doc, col, shift, ctrl);
     deselectCell = () => this.schemaView?.deselectAllCells();
     selectedCells = () => this.schemaView?._selectedDocs;
-    setColumnValues = (field: any, value: any) => this.schemaView?.setColumnValues(field, value) ?? false;
+    setColumnValues = (field: any, value: any) => this.schemaView?.setCellValues(field, value) ?? false;
     setSelectedColumnValues = (field: any, value: any) => this.schemaView?.setSelectedColumnValues(field, value) ?? false;
     columnWidth = computedFn((index: number) => () => this.schemaView?.displayColumnWidths[index] ?? CollectionSchemaView._minColWidth);
     render() {