From ae51e87874a714fdb46d4093fee513787b413ed8 Mon Sep 17 00:00:00 2001
From: Sam Wilkins <abdullah_ahmed@brown.edu>
Date: Fri, 19 Jul 2019 13:11:10 -0400
Subject: can sort columns by asc, desc

---
 .../views/collections/CollectionSchemaView.tsx     | 204 ++++++++-------------
 1 file changed, 81 insertions(+), 123 deletions(-)

(limited to 'src/client/views/collections/CollectionSchemaView.tsx')

diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index b9b299e13..10b1e895d 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -39,8 +39,6 @@ library.add(faCog);
 library.add(faPlus);
 // bcz: need to add drag and drop of rows and columns.  This seems like it might work for rows: https://codesandbox.io/s/l94mn1q657
 
-// const MovableTable = CollectionSchemaMovableSchemaHOC(ReactTable);
-
 export enum ColumnType {
     Any,
     Number,
@@ -62,7 +60,6 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
     private _startPreviewWidth = 0;
     private DIVIDER_WIDTH = 4;
 
-    // @observable _columns: Array<string> = ["title", "data", "author"];
     @observable _selectedIndex = 0;
     @observable _columnsPercentage = 0;
     @observable _keys: string[] = [];
@@ -71,6 +68,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
     @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();
 
     @computed get previewWidth() { return () => NumCast(this.props.Document.schemaPreviewWidth); }
     @computed get previewHeight() { return () => this.props.PanelHeight() - 2 * this.borderWidth; }
@@ -80,7 +78,6 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
     @computed get borderWidth() { return Number(COLLECTION_BORDER_WIDTH); }
     @computed get tableColumns(): Column<Doc>[] {
         let possibleKeys = this.documentKeys.filter(key => this.columns.findIndex(existingKey => existingKey.toUpperCase() === key.toUpperCase()) === -1);
-
         let cols = this.columns.map(col => {
             let focusedRow = this._focusedCell.row;
             let focusedCol = this._focusedCell.col;
@@ -95,6 +92,8 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
                 setIsEditing={this.setHeaderIsEditing}
                 deleteColumn={this.deleteColumn}
                 setColumnType={this.setColumnType}
+                setColumnSort={this.setColumnSort}
+                removeColumnSort={this.removeColumnSort}
             />;
 
             return {
@@ -148,37 +147,19 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
         return cols;
     }
 
-    @action
-    setColumns = (columns: string[]) => {
-        this.columns = columns;
-    }
-
-    reorderColumns = (toMove: string, relativeTo: string, before: boolean, columnsValues: string[]) => {
-        let columns = [...columnsValues];
-        let oldIndex = columns.indexOf(toMove);
-        let relIndex = columns.indexOf(relativeTo);
-        let newIndex = (oldIndex > relIndex && !before) ? relIndex + 1 : (oldIndex < relIndex && before) ? relIndex - 1 : relIndex;
-
-        if (oldIndex === newIndex) return;
-
-        columns.splice(newIndex, 0, columns.splice(oldIndex, 1)[0]);
-        this.setColumns(columns);
-    }
-
-
-    onHeaderDrag = (columnName: string) => {
-        let schemaDoc = Cast(this.props.Document.schemaDoc, Doc);
-        if (schemaDoc instanceof Doc) {
-            let columnDocs = DocListCast(schemaDoc.data);
-            if (columnDocs) {
-                let ddoc = columnDocs.find(doc => doc.title === columnName);
-                if (ddoc) {
-                    return ddoc;
-                }
-            }
-        }
-        return this.props.Document;
-    }
+    // onHeaderDrag = (columnName: string) => {
+    //     let schemaDoc = Cast(this.props.Document.schemaDoc, Doc);
+    //     if (schemaDoc instanceof Doc) {
+    //         let columnDocs = DocListCast(schemaDoc.data);
+    //         if (columnDocs) {
+    //             let ddoc = columnDocs.find(doc => doc.title === columnName);
+    //             if (ddoc) {
+    //                 return ddoc;
+    //             }
+    //         }
+    //     }
+    //     return this.props.Document;
+    // }
 
     componentDidMount() {
         document.addEventListener("keydown", this.onKeyDown);
@@ -213,37 +194,6 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
         this._mainCont = ele;
         super.CreateDropTarget(ele);
     }
-    @action
-    changeFocusedCellByDirection = (direction: string): void => {
-        switch (direction) {
-            case "tab":
-                if (this._focusedCell.col + 1 === this.columns.length && this._focusedCell.row + 1 === this.childDocs.length) {
-                    this._focusedCell = { row: 0, col: 0 };
-                } else if (this._focusedCell.col + 1 === this.columns.length) {
-                    this._focusedCell = { row: this._focusedCell.row + 1, col: 0 };
-                } else {
-                    this._focusedCell = { row: this._focusedCell.row, col: this._focusedCell.col + 1 };
-                }
-                break;
-            case "right":
-                this._focusedCell = { row: this._focusedCell.row, col: this._focusedCell.col + 1 === this.columns.length ? this._focusedCell.col : this._focusedCell.col + 1 };
-                break;
-            case "left":
-                this._focusedCell = { row: this._focusedCell.row, col: this._focusedCell.col === 0 ? this._focusedCell.col : this._focusedCell.col - 1 };
-                break;
-            case "up":
-                this._focusedCell = { row: this._focusedCell.row === 0 ? this._focusedCell.row : this._focusedCell.row - 1, col: this._focusedCell.col };
-                break;
-            case "down":
-                this._focusedCell = { row: this._focusedCell.row + 1 === this.childDocs.length ? this._focusedCell.row : this._focusedCell.row + 1, col: this._focusedCell.col };
-                break;
-        }
-    }
-
-    @action
-    changeFocusedCellByIndex = (row: number, col: number): void => {
-        this._focusedCell = { row: row, col: col };
-    }
 
     @action
     setCellIsEditing = (isEditing: boolean): void => {
@@ -255,21 +205,6 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
         this._headerIsEditing = isEditing;
     }
 
-    // @action
-    // toggleKey = (key: string) => {
-    //     let list = Cast(this.props.Document.schemaColumns, listSpec("string"));
-    //     if (list === undefined) {
-    //         this.props.Document.schemaColumns = list = new List<string>([key]);
-    //     } else {
-    //         const index = list.indexOf(key);
-    //         if (index === -1) {
-    //             list.push(key);
-    //         } else {
-    //             list.splice(index, 1);
-    //         }
-    //     }
-    // }
-
     //toggles preview side-panel of schema
     @action
     toggleExpander = () => {
@@ -323,6 +258,38 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
         }
     }
 
+    @action
+    changeFocusedCellByDirection = (direction: string): void => {
+        switch (direction) {
+            case "tab":
+                if (this._focusedCell.col + 1 === this.columns.length && this._focusedCell.row + 1 === this.childDocs.length) {
+                    this._focusedCell = { row: 0, col: 0 };
+                } else if (this._focusedCell.col + 1 === this.columns.length) {
+                    this._focusedCell = { row: this._focusedCell.row + 1, col: 0 };
+                } else {
+                    this._focusedCell = { row: this._focusedCell.row, col: this._focusedCell.col + 1 };
+                }
+                break;
+            case "right":
+                this._focusedCell = { row: this._focusedCell.row, col: this._focusedCell.col + 1 === this.columns.length ? this._focusedCell.col : this._focusedCell.col + 1 };
+                break;
+            case "left":
+                this._focusedCell = { row: this._focusedCell.row, col: this._focusedCell.col === 0 ? this._focusedCell.col : this._focusedCell.col - 1 };
+                break;
+            case "up":
+                this._focusedCell = { row: this._focusedCell.row === 0 ? this._focusedCell.row : this._focusedCell.row - 1, col: this._focusedCell.col };
+                break;
+            case "down":
+                this._focusedCell = { row: this._focusedCell.row + 1 === this.childDocs.length ? this._focusedCell.row : this._focusedCell.row + 1, col: this._focusedCell.col };
+                break;
+        }
+    }
+
+    @action
+    changeFocusedCellByIndex = (row: number, col: number): void => {
+        this._focusedCell = { row: row, col: col };
+    }
+
     @action
     makeDB = async () => {
         let csv: string = this.columns.reduce((val, col) => val + col + ",", "");
@@ -400,10 +367,32 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
         }
     }
 
-    // @action
-    // newKeyChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    //     this._newKeyName = e.currentTarget.value;
-    // }
+    @action
+    setColumns = (columns: string[]) => {
+        this.columns = columns;
+    }
+
+    reorderColumns = (toMove: string, relativeTo: string, before: boolean, columnsValues: string[]) => {
+        let columns = [...columnsValues];
+        let oldIndex = columns.indexOf(toMove);
+        let relIndex = columns.indexOf(relativeTo);
+        let newIndex = (oldIndex > relIndex && !before) ? relIndex + 1 : (oldIndex < relIndex && before) ? relIndex - 1 : relIndex;
+
+        if (oldIndex === newIndex) return;
+
+        columns.splice(newIndex, 0, columns.splice(oldIndex, 1)[0]);
+        this.setColumns(columns);
+    }
+
+    @action
+    setColumnSort = (column: string, descending: boolean) => {
+        this._sortedColumns.set(column, {id: column, desc: descending});
+    }
+
+    @action
+    removeColumnSort = (column: string) => {
+        this._sortedColumns.delete(column);
+    } 
 
     @computed
     get previewDocument(): Doc | undefined {
@@ -430,44 +419,6 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
         return Array.from(Object.keys(keys));
     }
 
-    // get documentKeysCheckList() {
-    //     const docs = DocListCast(this.props.Document[this.props.fieldKey]);
-    //     let keys: { [key: string]: boolean } = {};
-    //     // bcz: ugh.  this is untracked since otherwise a large collection of documents will blast the server for all their fields.
-    //     //  then as each document's fields come back, we update the documents _proxies.  Each time we do this, the whole schema will be
-    //     //  invalidated and re-rendered.   This workaround will inquire all of the document fields before the options button is clicked.
-    //     //  then by the time the options button is clicked, all of the fields should be in place.  If a new field is added while this menu
-    //     //  is displayed (unlikely) it won't show up until something else changes.
-    //     //TODO Types
-    //     untracked(() => docs.map(doc => Doc.GetAllPrototypes(doc).map(proto => Object.keys(proto).forEach(key => keys[key] = false))));
-
-    //     this.columns.forEach(key => keys[key] = true);
-    //     return Array.from(Object.keys(keys)).map(item =>
-    //         (<KeyToggle checked={keys[item]} key={item} keyName={item} toggle={this.toggleKey} />));
-    // }
-
-    // get tableOptionsPanel() {
-    //     return !this.props.active() ? (null) :
-    //         (<Flyout
-    //             anchorPoint={anchorPoints.RIGHT_TOP}
-    //             content={<div>
-    //                 <div id="schema-options-header"><h5><b>Options</b></h5></div>
-    //                 <div id="options-flyout-div">
-    //                     <h6 className="schema-options-subHeader">Preview Window</h6>
-    //                     <div id="preview-schema-checkbox-div"><input type="checkbox" key={"Show Preview"} checked={this.previewWidth() !== 0} onChange={this.toggleExpander} />  Show Preview </div>
-    //                     <h6 className="schema-options-subHeader" >Displayed Columns</h6>
-    //                     <ul id="schema-col-checklist" >
-    //                         {this.documentKeysCheckList}
-    //                     </ul>
-    //                     <input value={this._newKeyName} onChange={this.newKeyChange} />
-    //                     <button onClick={this.addColumn}><FontAwesomeIcon style={{ color: "white" }} icon="plus" size="lg" /></button>
-    //                 </div>
-    //             </div>
-    //             }>
-    //             <button id="schemaOptionsMenuBtn" ><FontAwesomeIcon style={{ color: "white" }} icon="cog" size="sm" /></button>
-    //         </Flyout>);
-    // }
-
     @computed
     get reactTable() {
         let previewWidth = this.previewWidth() + 2 * this.borderWidth + this.DIVIDER_WIDTH + 1;
@@ -481,6 +432,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
             getTrProps={this.getTrProps}
             sortable={false}
             TrComponent={MovableRow}
+            sorted={Array.from(this._sortedColumns.values())}
         />;
     }
 
@@ -614,7 +566,13 @@ export class CollectionSchemaPreview extends React.Component<CollectionSchemaPre
         }
         return undefined;
     }
+
+    
     render() {
+
+            //                     <div id="preview-schema-checkbox-div"><input type="checkbox" key={"Show Preview"} checked={this.previewWidth() !== 0} onChange={this.toggleExpander} />  Show Preview </div>
+
+
         let input = this.props.previewScript === undefined ? (null) :
             <div ref={this.createTarget}><input className="collectionSchemaView-input" value={this.props.previewScript} onChange={this.onPreviewScriptChange}
                 style={{ left: `calc(50% - ${Math.min(75, (this.props.Document ? this.PanelWidth() / 2 : 75))}px)` }} /></div>;
-- 
cgit v1.2.3-70-g09d2

