editable column header started

4 files changed, 88 insertions, 8 deletions

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index f0974f5dd..3cc0d5604 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -87,6 +87,7 @@ class DocInfo extends FInfo {
     constructor(d: string, filterable?: boolean, values?: Doc[]) {
         super(d, true);
         this.values = values;
+        console.log(this.values);
         this.filterable = filterable;
     }
     override searchable = () => false;
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index e493b2e5d..c9d5307c9 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -312,9 +312,8 @@ export class CollectionSchemaView extends CollectionSubView() {
         let matches;
         let results = new Map<string, string>();
         while ((matches = idPattern.exec(field)) !== null) {
-            results.set(matches[0], matches[1].replace(/"/g, '')); 
+            results.set(matches[0], matches[1]); 
         }
-        console.log(results);
         results.forEach((id, funcId) => {
             modField = modField.replace(funcId, 'd' + (this.rowIndex(IdToDoc(id)) + 1).toString());
         })
diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
index 6b5a34ec0..dad0c214b 100644
--- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
@@ -1,14 +1,20 @@
 /* eslint-disable react/no-unused-prop-types */
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { action } from 'mobx';
+import { action, computed, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { setupMoveUpEvents } from '../../../../ClientUtils';
+import { returnEmptyDoclist, returnEmptyFilter, returnFalse, setupMoveUpEvents } from '../../../../ClientUtils';
 import { emptyFunction } from '../../../../Utils';
 import { Colors } from '../../global/globalEnums';
 import './CollectionSchemaView.scss';
+import { EditableView } from '../../EditableView';
+import { DefaultStyleProvider, returnEmptyDocViewList } from '../../StyleProvider';
+import { FieldViewProps } from '../../nodes/FieldView';
 
 export interface SchemaColumnHeaderProps {
+    autoFocus?: boolean;
+    oneLine?: boolean; // whether all input should fit on one line vs allowing textare multiline inputs
+    allowCRs?: boolean; // allow carriage returns in text input (othewrise CR ends the edit)
     columnKeys: string[];
     columnWidths: number[];
     columnIndex: number;
@@ -26,6 +32,9 @@ export interface SchemaColumnHeaderProps {
 
 @observer
 export class SchemaColumnHeader extends React.Component<SchemaColumnHeaderProps> {
+
+    @observable _editing: boolean = false;
+
     get fieldKey() {
         return this.props.columnKeys[this.props.columnIndex];
     }
@@ -44,10 +53,81 @@ export class SchemaColumnHeader extends React.Component<SchemaColumnHeaderProps>
     };
 
     @action
-    onPointerDown = (e: React.PointerEvent) => {
+    setupDrag = (e: React.PointerEvent) => {
         this.props.isContentActive(true) && setupMoveUpEvents(this, e, moveEv => this.props.dragColumn(moveEv, this.props.columnIndex), emptyFunction, emptyFunction);
     };
 
+    public static renderProps(props: SchemaColumnHeaderProps) {
+        const { Document, fieldKey, getFinfo, columnWidth, isContentActive } = props;
+        let protoCount = 0;
+        let doc: Doc | undefined = Document;
+        while (doc) {
+            if (Object.keys(doc).includes(fieldKey.replace(/^_/, ''))) {
+                break;
+            }
+            protoCount++;
+            doc = DocCast(doc.proto);
+        }
+        const parenCount = Math.max(0, protoCount - 1);
+        const color = protoCount === 0 || (fieldKey.startsWith('_') && Document[fieldKey] === undefined) ? 'black' : 'blue'; // color of text in cells
+        const textDecoration = color !== 'black' && parenCount ? 'underline' : '';
+        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, textDecoration, fieldProps, cursor, pointerEvents };
+    }
+
+    @computed get editableView() {
+        const { color, textDecoration, fieldProps, pointerEvents } = SchemaColumnHeader.renderProps(this.props); 
+
+        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._props.fieldKey, SnappingManager.MetaKey)).replace(/[";]/g, '')} //TODO: feed this into parser that handles idToDoc
+                    SetValue={undoable((value: string, shiftDown?: boolean, enterKey?: boolean) => {
+                        if (shiftDown && enterKey) {
+                            this._props.setColumnValues(this._props.fieldKey.replace(/^_/, ''), value);
+                            this._props.finishEdit?.();
+                            return true;
+                        }
+                        const hasNoLayout =  Doc.IsDataProto(fieldProps.Document) ? true : undefined; // the "delegate" is a a data document so never write to it's proto
+                        const ret = Doc.SetField(fieldProps.Document, this._props.fieldKey.replace(/^_/, ''), value, hasNoLayout);
+                        this._props.finishEdit?.();
+                        return ret;
+                    }, 'edit schema cell')}
+                />
+    }
+
     render() {
         return (
             <div
@@ -55,14 +135,14 @@ export class SchemaColumnHeader extends React.Component<SchemaColumnHeaderProps>
                 style={{
                     width: this.props.columnWidths[this.props.columnIndex],
                 }}
-                onPointerDown={this.onPointerDown}
+                onPointerDown={this.setupDrag}
                 ref={col => {
                     if (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">{this.fieldKey}</div>
+                <div className="schema-column-title" onPointerDown={e => {this._editing = true; console.log(this._editing)}}>{this.fieldKey}</div>
 
                 <div className="schema-header-menu">
                     <div className="schema-header-button" onPointerDown={e => this.props.openContextMenu(e.clientX, e.clientY, this.props.columnIndex)}>
diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
index d11af6b3c..733cf3722 100644
--- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
@@ -142,7 +142,7 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
                     contents={undefined}
                     fieldContents={fieldProps}
                     editing={selectedCell(this._props) ? undefined : false}
-                    GetValue={() => this._props.cleanupField(Field.toKeyValueString(fieldProps.Document, this._props.fieldKey, SnappingManager.MetaKey))} //TODO: feed this into parser that handles idToDoc
+                    GetValue={() => this._props.cleanupField(Field.toKeyValueString(fieldProps.Document, this._props.fieldKey, SnappingManager.MetaKey)).replace(/[";]/g, '')} //TODO: feed this into parser that handles idToDoc
                     SetValue={undoable((value: string, shiftDown?: boolean, enterKey?: boolean) => {
                         if (shiftDown && enterKey) {
                             this._props.setColumnValues(this._props.fieldKey.replace(/^_/, ''), value);