diff options
| -rw-r--r-- | src/client/views/collections/CollectionSchemaHeaders.tsx | 18 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionSchemaView.tsx | 33 | ||||
| -rw-r--r-- | src/new_fields/SchemaHeaderField.ts | 22 |
3 files changed, 45 insertions, 28 deletions
diff --git a/src/client/views/collections/CollectionSchemaHeaders.tsx b/src/client/views/collections/CollectionSchemaHeaders.tsx index 62762962e..4f0681f6c 100644 --- a/src/client/views/collections/CollectionSchemaHeaders.tsx +++ b/src/client/views/collections/CollectionSchemaHeaders.tsx @@ -24,8 +24,7 @@ export interface HeaderProps { setIsEditing: (isEditing: boolean) => void; deleteColumn: (column: string) => void; setColumnType: (column: SchemaHeaderField, type: ColumnType) => void; - setColumnSort: (key: string, desc: boolean) => void; - removeColumnSort: (key: string) => void; + setColumnSort: (column: SchemaHeaderField, desc: boolean | undefined) => void; setColumnColor: (column: SchemaHeaderField, color: string) => void; } @@ -51,7 +50,6 @@ export class CollectionSchemaHeader extends React.Component<HeaderProps> { onlyShowOptions={false} setColumnType={this.props.setColumnType} setColumnSort={this.props.setColumnSort} - removeColumnSort={this.props.removeColumnSort} setColumnColor={this.props.setColumnColor} /> </div> @@ -87,8 +85,7 @@ export interface ColumnMenuProps { deleteColumn: (column: string) => void; onlyShowOptions: boolean; setColumnType: (column: SchemaHeaderField, type: ColumnType) => void; - setColumnSort: (key: string, desc: boolean) => void; - removeColumnSort: (key: string) => void; + setColumnSort: (column: SchemaHeaderField, desc: boolean | undefined) => void; anchorPoint?: any; setColumnColor: (column: SchemaHeaderField, color: string) => void; } @@ -123,6 +120,10 @@ export class CollectionSchemaColumnMenu extends React.Component<ColumnMenuProps> this.props.setColumnType(this.props.columnField, type); } + changeColumnSort = (desc: boolean | undefined): void => { + this.props.setColumnSort(this.props.columnField, desc); + } + changeColumnColor = (color: string): void => { this.props.setColumnColor(this.props.columnField, color); } @@ -168,19 +169,20 @@ export class CollectionSchemaColumnMenu extends React.Component<ColumnMenuProps> } renderSorting = () => { + let sort = this.props.columnField.desc; return ( <div className="collectionSchema-headerMenu-group"> <label>Sort by:</label> <div className="columnMenu-sort"> - <div className="columnMenu-option" onClick={() => this.props.setColumnSort(this.props.columnField.heading, true)}> + <div className={"columnMenu-option" + (sort === true ? " active" : "")} onClick={() => this.changeColumnSort(true)}> <FontAwesomeIcon icon="sort-amount-down" size="sm" /> Sort descending </div> - <div className="columnMenu-option" onClick={() => this.props.setColumnSort(this.props.columnField.heading, false)}> + <div className={"columnMenu-option" + (sort === false ? " active" : "")} onClick={() => this.changeColumnSort(false)}> <FontAwesomeIcon icon="sort-amount-up" size="sm" /> Sort ascending </div> - <div className="columnMenu-option" onClick={() => this.props.removeColumnSort(this.props.columnField.heading)}> + <div className="columnMenu-option" onClick={() => this.changeColumnSort(undefined)}> <FontAwesomeIcon icon="times" size="sm" /> Clear sorting </div> diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 86d3d01ef..84f8ec505 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -275,7 +275,6 @@ export class SchemaTable extends React.Component<SchemaTableProps> { @observable _headerIsEditing: boolean = false; @observable _cellIsEditing: boolean = false; @observable _focusedCell: { row: number, col: number } = { row: 0, col: 0 }; - @observable _sortedColumns: Map<string, { id: string, desc: boolean }> = new Map(); @observable _openCollections: Array<string> = []; @computed get previewWidth() { return () => NumCast(this.props.Document.schemaPreviewWidth); } @@ -308,8 +307,7 @@ export class SchemaTable extends React.Component<SchemaTableProps> { } @computed get resized(): { "id": string, "value": number }[] { - let columns = this.columns; - return columns.reduce((resized, shf) => { + return this.columns.reduce((resized, shf) => { if (shf.width > -1) { resized.push({ "id": shf.heading, "value": shf.width }); } @@ -317,6 +315,15 @@ export class SchemaTable extends React.Component<SchemaTableProps> { }, [] as { "id": string, "value": number }[]); } + @computed get sorted(): { "id": string, "desc": boolean }[] { + return this.columns.reduce((sorted, shf) => { + if (shf.desc) { + sorted.push({ "id": shf.heading, "desc": shf.desc }); + } + return sorted; + }, [] as { "id": string, "desc": boolean }[]); + } + @computed get borderWidth() { return Number(COLLECTION_BORDER_WIDTH); } @computed get tableColumns(): Column<Doc>[] { let possibleKeys = this.documentKeys.filter(key => this.columns.findIndex(existingKey => existingKey.heading.toUpperCase() === key.toUpperCase()) === -1); @@ -358,7 +365,6 @@ export class SchemaTable extends React.Component<SchemaTableProps> { deleteColumn={this.deleteColumn} setColumnType={this.setColumnType} setColumnSort={this.setColumnSort} - removeColumnSort={this.removeColumnSort} setColumnColor={this.setColumnColor} />; @@ -689,13 +695,13 @@ export class SchemaTable extends React.Component<SchemaTableProps> { } @action - setColumnSort = (column: string, descending: boolean) => { - this._sortedColumns.set(column, { id: column, desc: descending }); - } - - @action - removeColumnSort = (column: string) => { - this._sortedColumns.delete(column); + setColumnSort = (columnField: SchemaHeaderField, descending: boolean | undefined) => { + let columns = this.columns; + let index = columns.findIndex(c => c.heading === columnField.heading); + let column = columns[index]; + column.setDesc(descending); + columns[index] = column; + this.columns = columns; } get documentKeys() { @@ -750,7 +756,7 @@ export class SchemaTable extends React.Component<SchemaTableProps> { getTdProps={this.getTdProps} sortable={false} TrComponent={MovableRow} - sorted={Array.from(this._sortedColumns.values())} + sorted={this.sorted} expanded={expanded} resized={this.resized} onResizedChange={this.onResizedChange} @@ -770,7 +776,8 @@ export class SchemaTable extends React.Component<SchemaTableProps> { newResized.forEach(resized => { let index = columns.findIndex(c => c.heading === resized.id); let column = columns[index]; - column.width = resized.value; + column.setWidth(resized.value); + columns[index] = column; }); this.columns = columns; } diff --git a/src/new_fields/SchemaHeaderField.ts b/src/new_fields/SchemaHeaderField.ts index bccf82a9e..0c19d211a 100644 --- a/src/new_fields/SchemaHeaderField.ts +++ b/src/new_fields/SchemaHeaderField.ts @@ -51,19 +51,17 @@ export class SchemaHeaderField extends ObjectField { type: number; @serializable(primitive()) width: number; + @serializable(primitive()) + desc: boolean | undefined; // boolean determines sort order, undefined when no sort - constructor(heading: string = "", color: string = RandomPastel(), type?: ColumnType, width?: number) { + constructor(heading: string = "", color: string = RandomPastel(), type?: ColumnType, width?: number, desc?: boolean) { super(); this.heading = heading; this.color = color; - if (type) { - this.type = type; - } - else { - this.type = 0; - } + this.type = type ? type : 0; this.width = width ? width : -1; + this.desc = desc; } setHeading(heading: string) { @@ -81,6 +79,16 @@ export class SchemaHeaderField extends ObjectField { this[OnUpdate](); } + setWidth(width: number) { + this.width = width; + this[OnUpdate](); + } + + setDesc(desc: boolean | undefined) { + this.desc = desc; + this[OnUpdate](); + } + [Copy]() { return new SchemaHeaderField(this.heading, this.color, this.type); } |