diff options
Diffstat (limited to 'src')
5 files changed, 70 insertions, 50 deletions
diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx index 42faedf9d..9471ae98a 100644 --- a/src/client/views/EditableView.tsx +++ b/src/client/views/EditableView.tsx @@ -79,7 +79,7 @@ export class EditableView extends React.Component<EditableProps> { if (!this.props.onClick || !this.props.onClick(e)) { this._editing = true; this.props.isEditingCallback && this.props.isEditingCallback(true); - } + } e.stopPropagation(); } diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx index ab027c425..91bd0453e 100644 --- a/src/client/views/collections/CollectionSchemaCells.tsx +++ b/src/client/views/collections/CollectionSchemaCells.tsx @@ -33,7 +33,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; @@ -78,6 +78,7 @@ export class CollectionSchemaCell extends React.Component<CellProps> { document.addEventListener("keydown", this.onKeyDown); this._isEditing = isEditing; this.props.setIsEditing(isEditing); + this.props.changeFocusedCellByIndex(this.props.row, this.props.col); } @action @@ -258,4 +259,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..df078eca5 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,35 +56,14 @@ 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; + createColumn: () => void; } @observer export class CollectionSchemaAddColumnHeader extends React.Component<AddColumnHeaderProps> { 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> ); } } @@ -106,17 +85,15 @@ 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> { @observable private _isOpen: boolean = false; @observable private _node : HTMLDivElement | null = null; - // @observable private _node = React.createRef<HTMLDivElement>(); - @observable private _test = "test"; componentDidMount() { document.addEventListener("pointerdown", this.detectClick); - console.log("did mount", this._node); } componentWillUnmount() { @@ -124,7 +101,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 +124,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 +142,7 @@ 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)}> - <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 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 +192,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..2134362ce 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 { @@ -104,6 +108,7 @@ .rt-tr-group { direction: ltr; max-height: $MAX_ROW_HEIGHT; + // for sub comp &:nth-child(even) { background-color: $light-color; @@ -122,13 +127,14 @@ .rt-tr { width: 100%; + height: $MAX_ROW_HEIGHT; } .rt-td { border-width: 1px; border-right-color: $intermediate-color; max-height: $MAX_ROW_HEIGHT; - padding: 3px 7px; + padding: 0; font-size: 13px; text-align: center; @@ -285,6 +291,10 @@ height: 100%; padding: 4px; + &:focus { + outline: none; + } + &.focused { // background-color: yellowgreen; border: 2px solid yellowgreen; diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index ffc9d7d09..7c7309a4a 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -4,7 +4,7 @@ import { faCog, faPlus } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { action, computed, observable, trace, untracked } from "mobx"; import { observer } from "mobx-react"; -import ReactTable, { CellInfo, ComponentPropsGetterR, ReactTableDefaults, TableCellRenderer, Column } from "react-table"; +import ReactTable, { CellInfo, ComponentPropsGetterR, ReactTableDefaults, TableCellRenderer, Column, RowInfo } from "react-table"; import "react-table/react-table.css"; import { emptyFunction, returnFalse, returnZero, returnOne } from "../../../Utils"; import { Doc, DocListCast, DocListCastAsync, Field, FieldResult } from "../../../new_fields/Doc"; @@ -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,25 +125,45 @@ 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, expander?: boolean, Expander?: (rowInfo: RowInfo) => JSX.Element | null}[]; + + cols.push({ + expander: true, + Header: "", + width: 45, + Expander: (rowInfo) => { + if (rowInfo.original.type === "collection") { + return <div>+</div>; + } else { + return null; + } + } + }); 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 }); + // SubComponent={row => row.original.type === "collection" && <div>SUB</div>} + return cols; } @@ -312,6 +332,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 = ""; @@ -433,7 +468,10 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { sortable={false} TrComponent={MovableRow} sorted={Array.from(this._sortedColumns.values())} + SubComponent={row => row.original.type === "collection" && <div>this is the sub component</div>} />; + + } @computed |