TMSS-915: Option to show and remeber latest logs in subtask status log dialog...

TMSS-915: Option to show and remeber latest logs in subtask status log dialog in task list and task view.

SAS/TMSS/frontend/tmss_webapp/src/routes/Task/state_logs.js

@@ -3,6 +3,8 @@ import _ from 'lodash';
 import TaskService from '../../services/task.service';
 import ViewTable from '../../components/ViewTable';
 import AppLoader from '../../layout/components/AppLoader';
+import { Button } from 'primereact/button';
+import UtilService from '../../services/util.service';
 
 /**
  * Component that list down the status change logs of subtasks
@@ -11,39 +13,66 @@ export class TaskStatusLogs extends Component {
 
     constructor(props) {
         super(props);
+        this.taskListAttribute = UtilService.localStore({ type: 'get', key: "TASK_LIST_ATTR" }) || {};
         this.state = {
             isLoading: true,
-            logs: []
+            logs: [],
+            showLatest: this.taskListAttribute["showLatestLogs"] || false
         }
+        this.setShowLatest = this.setShowLatest.bind(this);
     }
 
     async componentDidMount() {
         let logs = await TaskService.getTaskStatusLogs(this.props.taskId);
-        logs = _.sortBy(logs, ['subtask_id', 'updated_at']);
+        // logs = _.sortBy(logs, ['subtask_id', 'updated_at']);
         this.setState({logs: logs, isLoading: false});
     }
 
+    /**
+     * Function to show latest or all logs and store the option selected for rendering the same when opened again.
+     */
+    setShowLatest() {
+        let showLatest = !this.state.showLatest
+        this.taskListAttribute['showLatestLogs'] = showLatest;
+        this.setState({showLatest: showLatest});
+        UtilService.localStore({ type: 'set', key: 'TASK_LIST_ATTR', value: this.taskListAttribute });
+    }
+
     render() {
+        let logs = _.sortBy(this.state.logs, ['subtask_id', 'updated_at']);
+        if (this.state.showLatest) {
+            logs = _(logs).orderBy(['subtask_id', 'updated_at'], ['asc', 'desc']).uniqBy('subtask_id').value();
+        }
         return(
             <React.Fragment>
             { this.state.isLoading? <AppLoader /> : 
-                <ViewTable 
-                    data={this.state.logs} 
-                    defaultcolumns={[{subtask_id: "Subtask Id", subtask_type: "Type", updated_at: "Updated At", 
-                                        old_state_value: "From State", new_state_value: "To State", user: 'User'}]} 
-                    optionalcolumns={[{}]}
-                    columnclassname={[{"Subtask Id": "filter-input-75", "Type": "filter-input-75",
-                                        "Updated At": "filter-input-75", "From State": "filter-input-75",
-                                        "To State": "filter-input-75", "User": "filter-input-75"}]}
-                    defaultSortColumn={[{}]}
-                    showaction="false"
-                    keyaccessor="id"
-                    paths={this.state.paths}
-                    defaultpagesize={this.state.logs.length}
-                    showTopTotal={false}
-                    showGlobalFilter={false}
-                    allowColumnSelection={false}
-                />
+                <div className="p-grid" style={{marginTop: "auto"}}>
+                    <div className="col-lg-12" style={{zIndex:"1"}}>
+                        <Button className="dialog-btn" label={this.state.showLatest?"Show All":"Show Latest Only"} 
+                            style={{width:"150px"}} 
+                            // icon={`pi ${this.state.showLatest?"pi-angle-left":"pi-angle-right"}`} 
+                            // iconPos={`${this.state.showLatest?"left":"right"}`}
+                            onClick={(e) => this.setShowLatest()} />
+                    </div>
+                    <div className="col-lg-12" style={{marginTop:"-30px", zIndex:"0"}}>
+                        <ViewTable 
+                            data={logs} 
+                            defaultcolumns={[{subtask_id: "Subtask Id", subtask_type: "Type", updated_at: "Updated At", 
+                                                old_state_value: "From State", new_state_value: "To State", user: 'User'}]} 
+                            optionalcolumns={[{}]}
+                            columnclassname={[{"Subtask Id": "filter-input-75", "Type": "filter-input-75",
+                                                "Updated At": "filter-input-75", "From State": "filter-input-75",
+                                                "To State": "filter-input-75", "User": "filter-input-75"}]}
+                            defaultSortColumn={[{}]}
+                            showaction="false"
+                            keyaccessor="id"
+                            paths={this.state.paths}
+                            showTopTotal={false}
+                            showGlobalFilter={false}
+                            allowColumnSelection={false}
+                        />
+                    </div>
+                </div>
             }
             </React.Fragment>
         );