diff options
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 = ""; |