sort

src/ts/@overflow/commons/react/component/SortTableHeaderRow.tsx

@@ -6,12 +6,13 @@ import {
 
 
 export interface Props {
-  columnList?: string[];
+  columnMap?: Map<string, string>;
   onHeaderColumnClick?(col:string, direction: string): void;
 }
 
 export interface State {
   column: string;
+  colvalue: string;
   direction: 'ascending' | 'descending';
 }
 
@@ -22,6 +23,7 @@ export class SortTableHeaderRow extends React.Component<Props, State> {
     super(props, context);
     this.state = {
       column: null,
+      colvalue: null,
       direction: null,
     };
   }
@@ -37,14 +39,12 @@ export class SortTableHeaderRow extends React.Component<Props, State> {
   private renderCell = (): (JSX.Element | JSX.Element[]) => {
     let arr = [];
     let idx:number = 0;
-
+    this.props.columnMap.forEach((val:string, key:string ) => {
-    for (let colValue of this.props.columnList) {
-
       arr.push(
         <Table.HeaderCell key={idx++} textAlign={'center'}
-          sorted={this.state.column === colValue ? this.state.direction : 'ascending'}
+                          sorted={this.state.column === key ? this.state.direction : null}
-          onClick={this.handleColumnSort(colValue)}>{colValue}</Table.HeaderCell>);
+                          onClick={this.handleColumnSort(key)}>{key}</Table.HeaderCell>);
-    }
+    });
 
     return arr;
   }
@@ -57,11 +57,13 @@ export class SortTableHeaderRow extends React.Component<Props, State> {
       });
     } else {
       this.setState({
+        column: col,
         direction: this.state.direction === 'ascending' ? 'descending' : 'ascending',
       });
     }
 
-    this.props.onHeaderColumnClick(this.state.column, this.state.direction);
+    console.log(this.state.column);
+    this.props.onHeaderColumnClick(this.props.columnMap.get(this.state.column), this.state.direction);
 
   }
 

src/ts/@overflow/history/react/components/HistoryList.tsx

@@ -118,16 +118,24 @@ export class HistoryList extends React.Component<Props, State> {
   }
 
   private handleSort = (col:string, direction:string):void => {
-    console.log(col + 'direction:' + direction);
+    console.log(col + ' || direction:' + direction);
   }
 
   public render(): JSX.Element {
-    let cols:string[] = ['No.', 'Probe', 'Type', 'Message', 'Created At', 'Created By'];
+    // let cols:string[] = ['No.', 'Probe', 'Type', 'Message', 'Created At', 'Created By'];
+    let colsmap:Map<string, string> = new Map();
+    colsmap.set('No.', 'id');
+    colsmap.set('Probe', 'probe.id');
+    colsmap.set('Type', ' type.id');
+    colsmap.set('Message', 'message');
+    colsmap.set('Created At', 'createDate');
+    colsmap.set('Created By', 'member.id');
+
     let historyList: JSX.Element = (
       <Container fluid>
         <Table celled selectable striped sortable fixed>
           <Table.Header>
-            <SortTableHeaderRow columnList={cols} onHeaderColumnClick={this.handleSort} />
+            <SortTableHeaderRow columnMap={colsmap} onHeaderColumnClick={this.handleSort} />
             {/*<Table.Row>*/}
               {/*<Table.HeaderCell textAlign={'center'}>No.</Table.HeaderCell>*/}
               {/*<Table.HeaderCell textAlign={'center'}>Probe</Table.HeaderCell>*/}