c

4 files changed, 45 insertions, 39 deletions

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
index 1dbe75a8d..3d89a479a 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
@@ -301,3 +301,8 @@
         width: 12px;
     }
 }
+
+.header-dropdown-container {
+    height: 0px;
+    width: 60px;
+}
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index ef1819120..92cc58f54 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -33,6 +33,7 @@ import { SchemaColumnHeader } from './SchemaColumnHeader';
 import { SchemaRowBox } from './SchemaRowBox';
 import { ActionButton } from '@adobe/react-spectrum';
 import { CollectionMasonryViewFieldRow } from '../CollectionMasonryViewFieldRow';
+import { Func } from 'mocha';
 
 const { SCHEMA_NEW_NODE_HEIGHT } = require('../../global/globalCssVariables.module.scss'); // prettier-ignore
 
@@ -706,7 +707,7 @@ export class CollectionSchemaView extends CollectionSubView() {
             this.addColumn(key, defaultVal);
             this._makeNewColumn = false;
         } else this.changeColumnKey(this._columnMenuIndex! | index!, key, defaultVal);
-        
+
         this.closeColumnMenu();
     };
 
@@ -884,11 +885,6 @@ export class CollectionSchemaView extends CollectionSubView() {
     @computed get keysDropdown() {
         return (
             <div className="schema-key-search">
-                <button 
-                    className="schema-column-menu-button" 
-                    onClick={() => this.toggleMenuKeyFilter()}>
-                        {this._colKeysFiltered ? "All keys" : "Active keys only"}
-                </button> 
                 <div
                     className="schema-key-list"
                     ref={r => {
@@ -1065,6 +1061,7 @@ export class CollectionSchemaView extends CollectionSubView() {
                             <SchemaColumnHeader
                                 // eslint-disable-next-line react/no-array-index-key
                                 //cleanupField={this.cleanupComputedField}
+                                keysDropdown={(this.keysDropdown)}
                                 schemaView={this}
                                 columnWidth={() => CollectionSchemaView._minColWidth} //TODO: update
                                 Document={this.Document}
diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
index 6e2f85cc0..4f9d53d18 100644
--- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
@@ -32,6 +32,7 @@ export interface SchemaColumnHeaderProps {
     sortField: string;
     sortDesc: boolean;
     schemaView: CollectionSchemaView;
+    keysDropdown: React.JSX.Element;
     //cleanupField: (s: string) => string;
     isContentActive: (outsideReaction?: boolean | undefined) => boolean | undefined;
     setSort: (field: string | undefined, desc?: boolean) => void;
@@ -51,17 +52,12 @@ export interface SchemaColumnHeaderProps {
 export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHeaderProps> {
 
     @observable _altTitle: string | undefined = undefined;
+    @observable _displayKeysDropdown: boolean = false;
 
     @computed get fieldKey() {
         return this._props.columnKeys[this._props.columnIndex];
     }
-
-    isDefaultTitle = (key: string) => {
-        const defaultPattern = /EmptyColumnKey/;
-        let isDefault: boolean = (defaultPattern.exec(key) != null);
-        return isDefault;
-    }
-
+    
     getFinfo = computedFn((fieldKey: string) => this._props.schemaView?.fieldInfos.get(fieldKey));
     setColumnValues = (field: string, defaultValue: string) => {this._props.schemaView?.setKey(field, defaultValue, this._props.columnIndex);}
     @action updateAlt = (newAlt: string) => {this._altTitle = newAlt;}
@@ -79,6 +75,11 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
         }
     };
 
+    openKeyDropdown = () => {
+        this._props.schemaView.openColumnMenu(this._props.columnIndex, false)
+        this._displayKeysDropdown = true;
+    }
+
     @action
     setupDrag = (e: React.PointerEvent) => {
         this._props.isContentActive(true) && setupMoveUpEvents(this, e, moveEv => this._props.dragColumn(moveEv, this._props.columnIndex), emptyFunction, emptyFunction);
@@ -121,7 +122,7 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
     @computed get editableView() {
         const { color, fieldProps, pointerEvents } = this.renderProps(this._props); 
 
-        return <div className='schema-column-edit-wrapper' 
+        return <div className='schema-column-edit-wrapper' onPointerUp={() => this._props.schemaView.openColumnMenu(this._props.columnIndex, false)}
         style={{
             color,
             width: '100%',
@@ -148,6 +149,7 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
                         this._props.finishEdit?.();
                         return true;
                     } else if (enterKey) this.updateAlt(value);
+                    
                     this._props.finishEdit?.(); 
                     return true;
                 }, 'edit column header')}
@@ -155,36 +157,38 @@ 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>
-    // }
+    isDefaultTitle = (key: string) => {
+        const defaultPattern = /EmptyColumnKey/;
+        let isDefault: boolean = (defaultPattern.exec(key) != null);
+        return isDefault;
+    }
 
     render() {
         return (
-            <div
-                className="schema-column-header"
-                style={{
-                    width: this._props.columnWidths[this._props.columnIndex],
-                }}
-                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-header"
+                    style={{
+                        width: this._props.columnWidths[this._props.columnIndex],
+                    }}
+                    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>{this.editableView}</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)}>
-                        <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-header-menu">
+                        <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>
                     </div>
                 </div>
-            </div>
         );
     }
 }
diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
index e6660f379..c3a58b505 100644
--- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
@@ -30,7 +30,7 @@ import { Colors } from '../../global/globalEnums';
 import { DocumentView } from '../../nodes/DocumentView';
 import { FieldViewProps } from '../../nodes/FieldView';
 import { FormattedTextBox } from '../../nodes/formattedText/FormattedTextBox';
-import { FInfotoColType } from './CollectionSchemaView';
+import { CollectionSchemaView, FInfotoColType } from './CollectionSchemaView';
 import './CollectionSchemaView.scss';
 
 export interface SchemaTableCellProps {
@@ -149,7 +149,7 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
                             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, true);
+                        const ret = Doc.SetField(fieldProps.Document, this._props.fieldKey.replace(/^_/, ''), value, hasNoLayout);
                         this._props.finishEdit?.();
                         return ret;
                     }, 'edit schema cell')}