diff options
Diffstat (limited to 'src')
3 files changed, 72 insertions, 4 deletions
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index 29b22c0d5..4fb3f68c1 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -1,12 +1,12 @@ import React = require('react'); import { action, computed, observable, ObservableMap, ObservableSet, untracked } from 'mobx'; import { observer } from 'mobx-react'; -import { Doc, DocListCast, Opt } from '../../../../fields/Doc'; +import { Doc, DocListCast, Field, Opt } from '../../../../fields/Doc'; import { Id } from '../../../../fields/FieldSymbols'; import { List } from '../../../../fields/List'; import { RichTextField } from '../../../../fields/RichTextField'; import { listSpec } from '../../../../fields/Schema'; -import { BoolCast, Cast, StrCast } from '../../../../fields/Types'; +import { BoolCast, Cast, NumCast, StrCast } from '../../../../fields/Types'; import { ImageField } from '../../../../fields/URLField'; import { emptyFunction, returnEmptyString, setupMoveUpEvents, Utils } from '../../../../Utils'; import { Docs, DocUtils } from '../../../documents/Documents'; @@ -89,6 +89,31 @@ export class CollectionSchemaView extends CollectionSubView() { return this._displayColumnWidths ?? this.storedColumnWidths; } + @computed get sortField() { + return StrCast(this.layoutDoc.sortField, 'creationDate'); + } + + @computed get sortDesc() { + return BoolCast(this.layoutDoc.sortDesc); + } + + @undoBatch + @action + setSort = (field: string, desc: boolean) => { + this.layoutDoc.sortField = field; + this.layoutDoc.sortDesc = desc; + + this.childDocs.sort((docA, docB) => { + const aStr = Field.toString(docA[field] as Field); + const bStr = Field.toString(docB[field] as Field); + var out = 0; + if (aStr < bStr) out = -1; + if (aStr > bStr) out = 1; + if (desc) out *= -1; + return out; + }); + }; + @undoBatch @action changeColumnKey = (index: number, newKey: string, defaultVal?: any) => { @@ -430,6 +455,9 @@ export class CollectionSchemaView extends CollectionSubView() { columnKeys={this.columnKeys} columnWidths={this.displayColumnWidths} possibleKeys={this.documentKeys} + sortField={this.sortField} + sortDesc={this.sortDesc} + setSort={this.setSort} changeColumnKey={this.changeColumnKey} addColumn={this.addColumn} removeColumn={this.removeColumn} diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx index 8e6d3d78a..9d5dfe507 100644 --- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx +++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx @@ -11,6 +11,9 @@ export interface SchemaColumnHeaderProps { columnWidths: number[]; columnIndex: number; possibleKeys: string[]; + sortField: string; + sortDesc: boolean; + setSort: (field: string, desc: boolean) => void; changeColumnKey: (index: number, newKey: string, defaultVal?: any) => void; addColumn: (index: number, key: string, defaultVal?: any) => void; removeColumn: (index: number) => void; @@ -27,12 +30,24 @@ export class SchemaColumnHeader extends React.Component<SchemaColumnHeaderProps> @observable _newFieldWarning: string = ''; @observable _menuValue: string = ''; @observable _menuOptions: string[] = []; + @observable _filterVisible: boolean = false; private _makeNewColumn = false; @computed get fieldKey() { return this.props.columnKeys[this.props.columnIndex]; } + @action + sortClicked = (e: React.PointerEvent) => { + e.stopPropagation(); + e.preventDefault(); + if (this.props.sortField == this.fieldKey) { + this.props.setSort(this.fieldKey, !this.props.sortDesc); + } else { + this.props.setSort(this.fieldKey, false); + } + }; + @computed get fieldDefaultInput() { switch (this._newFieldType) { case ColumnType.Number: @@ -138,6 +153,14 @@ export class SchemaColumnHeader extends React.Component<SchemaColumnHeaderProps> ); } + @computed get columnFilterMenu() { + return ( + <div className="schema-column-menu"> + <input className="schema-key-search-input" type="text" value={this._menuValue} onKeyDown={this.onSearchKeyDown} onChange={this.updateKeySearch} onPointerDown={e => e.stopPropagation()} /> + </div> + ); + } + onSearchKeyDown = (e: React.KeyboardEvent) => { switch (e.key) { case 'Enter': @@ -178,6 +201,7 @@ export class SchemaColumnHeader extends React.Component<SchemaColumnHeaderProps> if (this._menuVisible) { this._menuVisible = false; } else { + this._filterVisible = false; this._menuVisible = true; this._menuValue = ''; this._menuOptions = this.props.possibleKeys; @@ -190,6 +214,17 @@ export class SchemaColumnHeader extends React.Component<SchemaColumnHeaderProps> } }; + @action + toggleFilterMenu = () => { + console.log(this._filterVisible); + if (this._filterVisible) { + this._filterVisible = false; + } else { + this._filterVisible = true; + this._menuVisible = false; + } + }; + render() { return ( <div className="schema-column-header" style={{ width: this.props.columnWidths[this.props.columnIndex] }}> @@ -218,11 +253,18 @@ export class SchemaColumnHeader extends React.Component<SchemaColumnHeaderProps> }}> <FontAwesomeIcon icon="trash" /> </div> + <div className="schema-header-button" onPointerDown={this.sortClicked}> + <FontAwesomeIcon icon="caret-right" style={this.props.sortField == this.fieldKey ? { transform: `rotate(${this.props.sortDesc ? '270deg' : '90deg'})` } : {}} /> + </div> + <div className="schema-header-button" onPointerDown={e => this.toggleFilterMenu()}> + <FontAwesomeIcon icon="filter" /> + </div> </div> <div className="schema-column-resizer right" onPointerDown={e => this.props.resizeColumn(e, this.props.columnIndex, false)}></div> {this._menuVisible && this.renderColumnMenu} + {this._filterVisible && this.columnFilterMenu} </div> ); } diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx index 7e2fa1f6f..5d9474173 100644 --- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx +++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx @@ -14,8 +14,6 @@ export class SchemaTableCell extends React.Component<SchemaTableCellProps> { render() { return ( <div className="schema-table-cell" style={{ width: this.props.columnWidth }}> - {/* {StrCast(this.props.Document[this.props.fieldKey])} */} - {/* Field.toKeyValueString(this.props.Document, this.props.fieldKey) */} {Field.toString(this.props.Document[this.props.fieldKey] as Field)} </div> ); |