moved sorting into header

4 files changed, 58 insertions, 10 deletions

diff --git a/src/client/views/collections/CollectionSchemaHeaders.tsx b/src/client/views/collections/CollectionSchemaHeaders.tsx
index 8494f3dca..096b45bee 100644
--- a/src/client/views/collections/CollectionSchemaHeaders.tsx
+++ b/src/client/views/collections/CollectionSchemaHeaders.tsx
@@ -358,13 +358,19 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> {
             this.props.existingKeys.findIndex(key => key.toUpperCase() === this._searchTerm.toUpperCase()) > -1;
 
         const options = keyOptions.map(key => {
-            return <div key={key} className="key-option" style={{ border: "1px solid lightgray" }}
+            return <div key={key} className="key-option" style={{
+                border: "1px solid lightgray",
+                maxWidth: this.props.width, overflowX: "hidden"
+            }}
                 onPointerDown={e => e.stopPropagation()} onClick={() => { this.onSelect(key); this.setSearchTerm(""); }}>{key}</div>;
         });
 
         // if search term does not already exist as a group type, give option to create new group type
         if (!exactFound && this._searchTerm !== "" && this.props.canAddNew) {
-            options.push(<div key={""} className="key-option" style={{ border: "1px solid lightgray" }}
+            options.push(<div key={""} className="key-option" style={{
+                border: "1px solid lightgray",
+                maxWidth: this.props.width, overflowX: "hidden"
+            }}
                 onClick={() => { this.onSelect(this._searchTerm); this.setSearchTerm(""); }}>
                 Create "{this._searchTerm}" key</div>);
         }
@@ -382,7 +388,10 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> {
                         //this._inputRef.current!.select();
                         e.stopPropagation();
                     }} onFocus={this.onFocus} onBlur={this.onBlur}></input>
-                <div className="keys-options-wrapper" style={{ backgroundColor: "white" }}
+                <div className="keys-options-wrapper" style={{
+                    backgroundColor: "white",
+                    width: this.props.width, overflowX: "hidden"
+                }}
                     onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerOut}>
                     {this.renderOptions()}
                 </div>
diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss
index 5608cb7ab..9c5f2e8ac 100644
--- a/src/client/views/collections/CollectionSchemaView.scss
+++ b/src/client/views/collections/CollectionSchemaView.scss
@@ -293,6 +293,7 @@ button.add-column {
                 background-color: white;
                 border: 1px solid lightgray;
                 padding: 2px 3px;
+                overflow-x: hidden;
 
                 &:not(:first-child) {
                     border-top: 0;
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index a9c599e0e..61581aec1 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -505,6 +505,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
             reorderColumns={this.reorderColumns}
             changeColumns={this.changeColumns}
             setHeaderIsEditing={this.setHeaderIsEditing}
+            changeColumnSort={this.setColumnSort}
         />;
     }
 
diff --git a/src/client/views/collections/SchemaTable.tsx b/src/client/views/collections/SchemaTable.tsx
index 5df0a676e..5d1dcf199 100644
--- a/src/client/views/collections/SchemaTable.tsx
+++ b/src/client/views/collections/SchemaTable.tsx
@@ -80,6 +80,7 @@ export interface SchemaTableProps {
     reorderColumns: (toMove: SchemaHeaderField, relativeTo: SchemaHeaderField, before: boolean, columnsValues: SchemaHeaderField[]) => void;
     changeColumns: (oldKey: string, newKey: string, addNew: boolean) => void;
     setHeaderIsEditing: (isEditing: boolean) => void;
+    changeColumnSort: (columnField: SchemaHeaderField, descending: boolean | undefined) => void;
 }
 
 @observer
@@ -132,7 +133,22 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
     }
 
     @action
-    changeDropdown = () => { console.log("header clicked"); this._showTitleDropdown = !this._showTitleDropdown; }
+    changeSorting = (col: any) => {
+        console.log(col.heading);
+        if (col.desc === undefined) {
+            // no sorting
+            this.props.changeColumnSort(col, true);
+        } else if (col.desc === true) {
+            // descending sort
+            this.props.changeColumnSort(col, false);
+        } else if (col.desc === false) {
+            // ascending sort
+            this.props.changeColumnSort(col, undefined);
+        }
+    }
+
+    @action
+    changeTitleMode = () => { console.log("header clicked"); this._showTitleDropdown = !this._showTitleDropdown; }
 
     @computed get borderWidth() { return Number(COLLECTION_BORDER_WIDTH); }
     @computed get tableColumns(): Column<Doc>[] {
@@ -180,7 +196,17 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
                 this.getColumnType(col) === ColumnType.Boolean ? "check-square" : this.getColumnType(col) === ColumnType.Doc ? "file" :
                     this.getColumnType(col) === ColumnType.Image ? "image" : this.getColumnType(col) === ColumnType.List ? "list-ul" : "align-justify";
 
-            const headerText = this._showTitleDropdown ? keysDropdown : col.heading;
+            const headerText = this._showTitleDropdown ? keysDropdown : <div
+                onClick={this.changeTitleMode}
+                style={{
+                    background: col.color, padding: "2px",
+                    letterSpacing: "2px",
+                    textTransform: "uppercase",
+                    display: "flex"
+                }}>
+                {col.heading}</div>;
+
+            const sortIcon = col.desc === undefined ? "circle" : col.desc === true ? "caret-down" : "caret-up";
 
             const menuContent = <div style={{
                 display: "flex", justifyContent: "space-between", width: "90%"
@@ -195,17 +221,28 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
             const header =
                 <div //className="collectionSchemaView-header"
                     //onClick={e => this.props.openHeader(col, menuContent, e.clientX, e.clientY)}
-                    className="collectionSchemaView-menuOptions"
+                    className="collectionSchemaView-menuOptions-wrapper"
                     style={{
                         background: col.color, padding: "2px",
-                        // letterSpacing: "2px",
-                        // textTransform: "uppercase",
                         display: "flex"
                     }}>
-                    {menuContent}
+
+                    <div style={{
+                        display: "flex", justifyContent: "space-between", width: "90%"
+                    }}>
+                        <FontAwesomeIcon icon={icon} size="lg" style={{ display: "inline", paddingLeft: "7px" }} /></div>
+                    <div className="keys-dropdown"
+                        style={{ display: "inline", zIndex: 10000 }}>
+                        {keysDropdown}
+                    </div>
+
+                    <div onClick={e => this.changeSorting(col)}
+                        style={{ paddingRight: "6px" }}>
+                        <FontAwesomeIcon icon={sortIcon} size="sm" />
+                    </div>
                     <div onClick={e => this.props.openHeader(col, e.clientX, e.clientY)}
                         style={{ float: "right", paddingRight: "6px" }}>
-                        <FontAwesomeIcon icon={"caret-down"} id={"down arrow"} size="2x" />
+                        <FontAwesomeIcon icon={"compass"} size="sm" />
                     </div>
                 </div>;