From 52b8410f14c4e522b0d7bbdbfb64d8fdbd5c3023 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Wed, 15 May 2024 22:26:42 -0400
Subject: columheader editing working!! (kinda hacky using readonly input
 revisit)

---
 .../collectionSchema/CollectionSchemaView.scss     |  2 +-
 .../collectionSchema/CollectionSchemaView.tsx      | 49 +++++++++-------------
 .../collectionSchema/SchemaColumnHeader.tsx        | 22 ++++++----
 3 files changed, 36 insertions(+), 37 deletions(-)

(limited to 'src/client/views/collections')

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 } : {}}>
-- 
cgit v1.2.3-70-g09d2