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,24 +13,50 @@ 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 /> : 
+                <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={this.state.logs} 
+                            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={[{}]}
@@ -39,11 +67,12 @@ export class TaskStatusLogs extends Component {
                             showaction="false"
                             keyaccessor="id"
                             paths={this.state.paths}
-                    defaultpagesize={this.state.logs.length}
                             showTopTotal={false}
                             showGlobalFilter={false}
                             allowColumnSelection={false}
                         />
+                    </div>
+                </div>
             }
             </React.Fragment>
         );