changed add col button to immediately add new column

4 files changed, 67 insertions, 43 deletions

diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx
index 5b40032eb..0307bb83e 100644
--- a/src/client/views/collections/CollectionSchemaCells.tsx
+++ b/src/client/views/collections/CollectionSchemaCells.tsx
@@ -31,7 +31,7 @@ export interface CellProps {
     renderDepth: number;
     addDocTab: (document: Doc, dataDoc: Doc | undefined, where: string) => void;
     moveDocument: (document: Doc, targetCollection: Doc, addDocument: (document: Doc) => boolean) => boolean;
-    isFocused: boolean;
+    isFocused: boolean; 
     changeFocusedCellByDirection: (direction: string) => void;
     changeFocusedCellByIndex: (row: number, col: number) => void;
     setIsEditing: (isEditing: boolean) => void;
@@ -229,4 +229,4 @@ export class CollectionSchemaDocCell extends CollectionSchemaCell {
             </div>
         );
     }
-}
\ No newline at end of file
+}
diff --git a/src/client/views/collections/CollectionSchemaHeaders.tsx b/src/client/views/collections/CollectionSchemaHeaders.tsx
index 316b3f0ff..5f8037fbf 100644
--- a/src/client/views/collections/CollectionSchemaHeaders.tsx
+++ b/src/client/views/collections/CollectionSchemaHeaders.tsx
@@ -29,7 +29,7 @@ export interface HeaderProps {
 export class CollectionSchemaHeader extends React.Component<HeaderProps> {
     render() {
         let icon: IconProp = this.props.keyType === ColumnType.Number ? "hashtag" : this.props.keyType === ColumnType.String ? "font" :
-            this.props.keyType === ColumnType.Checkbox ? "check-square" : this.props.keyType === ColumnType.Boolean ? "toggle-on" : "align-justify";
+            this.props.keyType === ColumnType.Boolean ? "check-square" : "align-justify";
 
         return (
             <div className="collectionSchemaView-header" >
@@ -56,10 +56,11 @@ export class CollectionSchemaHeader extends React.Component<HeaderProps> {
 
 
 export interface AddColumnHeaderProps {
-    possibleKeys: string[];
-    existingKeys: string[];
-    onSelect: (oldKey: string, newKey: string, addnew: boolean) => void;
-    setIsEditing: (isEditing: boolean) => void;
+    // possibleKeys: string[];
+    // existingKeys: string[];
+    // onSelect: (oldKey: string, newKey: string, addnew: boolean) => void;
+    // setIsEditing: (isEditing: boolean) => void;
+    createColumn: () => void;
 }
 
 @observer
@@ -67,24 +68,26 @@ export class CollectionSchemaAddColumnHeader extends React.Component<AddColumnHe
     render() {
         let addButton = <button><FontAwesomeIcon icon="plus" size="sm" /></button>;
         return (
-            <div className="collectionSchemaView-header-addColumn" >
-                <CollectionSchemaColumnMenu
-                    keyValue=""
-                    possibleKeys={this.props.possibleKeys}
-                    existingKeys={this.props.existingKeys}
-                    keyType={ColumnType.Any}
-                    typeConst={true}
-                    menuButtonContent={addButton}
-                    addNew={true}
-                    onSelect={this.props.onSelect}
-                    setIsEditing={this.props.setIsEditing}
-                    deleteColumn={action(emptyFunction)}
-                    onlyShowOptions={true}
-                    setColumnType={action(emptyFunction)}
-                    setColumnSort={action(emptyFunction)}
-                    removeColumnSort={action(emptyFunction)}
-                />
-            </div>
+            <button onClick={() => this.props.createColumn()}><FontAwesomeIcon icon="plus" size="sm" /></button>
+            // <div className="collectionSchemaView-header-addColumn" >
+            //     <CollectionSchemaColumnMenu
+            //         keyValue=""
+            //         possibleKeys={this.props.possibleKeys}
+            //         existingKeys={this.props.existingKeys}
+            //         keyType={ColumnType.Any}
+            //         typeConst={true}
+            //         menuButtonContent={addButton}
+            //         addNew={true}
+            //         onSelect={this.props.onSelect}
+            //         setIsEditing={this.props.setIsEditing}
+            //         deleteColumn={action(emptyFunction)}
+            //         onlyShowOptions={true}
+            //         setColumnType={action(emptyFunction)}
+            //         setColumnSort={action(emptyFunction)}
+            //         removeColumnSort={action(emptyFunction)}
+            //         anchorPoint={anchorPoints.TOP_RIGHT}
+            //     />
+            // </div>
         );
     }
 }
@@ -106,6 +109,7 @@ export interface ColumnMenuProps {
     setColumnType: (key: string, type: ColumnType) => void;
     setColumnSort: (key: string, desc: boolean) => void;
     removeColumnSort: (key: string) => void;
+    anchorPoint?: any;
 }
 @observer
 export class CollectionSchemaColumnMenu extends React.Component<ColumnMenuProps> {
@@ -116,7 +120,6 @@ export class CollectionSchemaColumnMenu extends React.Component<ColumnMenuProps>
 
     componentDidMount() {
         document.addEventListener("pointerdown", this.detectClick);
-        console.log("did mount", this._node);
     }
 
     componentWillUnmount() {
@@ -124,7 +127,6 @@ export class CollectionSchemaColumnMenu extends React.Component<ColumnMenuProps>
     }
 
     detectClick = (e: PointerEvent): void => {
-        console.log("click", this);
         if (this._node && this._node.contains(e.target as Node)) {
         } else {
             this._isOpen = false;
@@ -148,7 +150,6 @@ export class CollectionSchemaColumnMenu extends React.Component<ColumnMenuProps>
     setNode = (node: HTMLDivElement): void => {
         if (node) {
             this._node = node;
-            console.log("set node to ", this._node);
         }
     }
 
@@ -167,10 +168,10 @@ export class CollectionSchemaColumnMenu extends React.Component<ColumnMenuProps>
                     <button title="String" className={this.props.keyType === ColumnType.String ? "active" : ""} onClick={() => this.props.setColumnType(this.props.keyValue, ColumnType.String)}>
                         <FontAwesomeIcon icon={"font"} size="sm" />
                         </button>
-                    <button title="Boolean" className={this.props.keyType === ColumnType.Boolean ? "active" : ""} onClick={() => this.props.setColumnType(this.props.keyValue, ColumnType.Boolean)}>
+                    {/* <button title="Boolean" className={this.props.keyType === ColumnType.Boolean ? "active" : ""} onClick={() => this.props.setColumnType(this.props.keyValue, ColumnType.Boolean)}>
                         <FontAwesomeIcon icon={"toggle-on"} size="sm" />
-                        </button>
-                    <button title="Checkbox" className={this.props.keyType === ColumnType.Checkbox ? "active" : ""} onClick={() => this.props.setColumnType(this.props.keyValue, ColumnType.Checkbox)}>
+                        </button> */}
+                    <button title="Checkbox" className={this.props.keyType === ColumnType.Boolean ? "active" : ""} onClick={() => this.props.setColumnType(this.props.keyValue, ColumnType.Boolean)}>
                         <FontAwesomeIcon icon={"check-square"} size="sm" />
                         </button>
                 </div>
@@ -220,10 +221,9 @@ export class CollectionSchemaColumnMenu extends React.Component<ColumnMenuProps>
     }
 
     render() {
-        console.log("render", this._node);
         return (
             <div className="collectionSchema-header-menu" ref={this.setNode}>
-                <Flyout anchorPoint={anchorPoints.TOP_CENTER} content={this.renderContent()}>
+                <Flyout anchorPoint={this.props.anchorPoint ? this.props.anchorPoint : anchorPoints.TOP_CENTER} content={this.renderContent()}>
                     <div className="collectionSchema-header-toggler" onClick={() => this.toggleIsOpen()}>{this.props.menuButtonContent}</div>
                 </ Flyout >
             </div>
diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss
index 4ae9628a9..47947829e 100644
--- a/src/client/views/collections/CollectionSchemaView.scss
+++ b/src/client/views/collections/CollectionSchemaView.scss
@@ -95,6 +95,10 @@
         padding: 3px 7px;
         font-size: 13px;
         text-align: center;
+        
+        &:last-child {
+            overflow: visible;
+        }
     }
 
     .rt-tbody {
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index ffc9d7d09..02c1ec082 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -32,7 +32,7 @@ import { CollectionView } from "./CollectionView";
 import { undoBatch } from "../../util/UndoManager";
 import { timesSeries } from "async";
 import { CollectionSchemaHeader, CollectionSchemaAddColumnHeader } from "./CollectionSchemaHeaders";
-import { CellProps, CollectionSchemaCell, CollectionSchemaNumberCell, CollectionSchemaStringCell, CollectionSchemaBooleanCell, CollectionSchemaCheckboxCell } from "./CollectionSchemaCells";
+import { CellProps, CollectionSchemaCell, CollectionSchemaNumberCell, CollectionSchemaStringCell, CollectionSchemaBooleanCell, CollectionSchemaCheckboxCell, CollectionSchemaDocCell } from "./CollectionSchemaCells";
 import { MovableColumn, MovableRow } from "./CollectionSchemaMovableTableHOC";
 
 library.add(faCog);
@@ -44,8 +44,8 @@ export enum ColumnType {
     Number,
     String,
     Boolean,
-    // Doc,
-    Checkbox
+    Doc,
+    // Checkbox
 }
 // this map should be used for keys that should have a const type of value
 const columnTypes: Map<string, ColumnType> = new Map([
@@ -125,23 +125,28 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
                     let colType = this.getColumnType(col);
                     if (colType === ColumnType.Number) return <CollectionSchemaNumberCell {...props}/>;
                     if (colType === ColumnType.String) return <CollectionSchemaStringCell {...props}/>;
-                    if (colType === ColumnType.Boolean) return <CollectionSchemaBooleanCell {...props} />;
-                    if (colType === ColumnType.Checkbox) return <CollectionSchemaCheckboxCell {...props} />;
+                    // if (colType === ColumnType.Boolean) return <CollectionSchemaBooleanCell {...props} />;
+                    // if (colType === ColumnType.Checkbox) return <CollectionSchemaCheckboxCell {...props} />;
+                    if (colType === ColumnType.Boolean) return <CollectionSchemaCheckboxCell {...props} />;
+                    if (colType === ColumnType.Doc) return <CollectionSchemaDocCell {...props} />;
                     return <CollectionSchemaCell {...props}/>;
                 }
             };
-        }) as {Header: TableCellRenderer, accessor: (doc: Doc) => FieldResult<Field>, id: string, Cell: (rowProps: CellInfo) => JSX.Element}[];
+        }) as {Header: TableCellRenderer, accessor: (doc: Doc) => FieldResult<Field>, id: string, Cell: (rowProps: CellInfo) => JSX.Element, width?: number, resizable?: boolean}[];
 
         cols.push({
             Header: <CollectionSchemaAddColumnHeader
-                possibleKeys={possibleKeys}
-                existingKeys={this.columns}
-                onSelect={this.changeColumns}
-                setIsEditing={this.setHeaderIsEditing}
+                createColumn={this.createColumn}
+                // possibleKeys={possibleKeys}
+                // existingKeys={this.columns}
+                // onSelect={this.changeColumns}
+                // setIsEditing={this.setHeaderIsEditing}
             />,
             accessor: (doc: Doc) => 0,
             id: "add",
             Cell: (rowProps: CellInfo) => <></>,
+            width: 45,
+            resizable: false
         });
 
         return cols;
@@ -312,6 +317,21 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
     }
 
     @action
+    createColumn = () => {  
+        let index = 0;
+        let found = this.columns.findIndex(col => col.toUpperCase() === "New field".toUpperCase()) > -1;
+        if (!found) {
+            this.columns.push("New field");
+            return;
+        }
+        while (found) {
+            index ++;
+            found = this.columns.findIndex(col => col.toUpperCase() === ("New field (" + index + ")").toUpperCase()) > -1;
+        }
+        this.columns.push("New field (" + index + ")");
+    }
+
+    @action
     addColumn = () => {
         this.columns.push(this._newKeyName);
         this._newKeyName = "";