basic sorting

1 files changed, 42 insertions, 0 deletions

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>
         );
     }