diff --git a/SAS/TMSS/frontend/tmss_webapp/src/routes/Task/list.js b/SAS/TMSS/frontend/tmss_webapp/src/routes/Task/list.js
index 3a91777c1549fdb40574edf3d48a337e4317338c..be44e5c44e11a7f078748aebb34701af5ce04242 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/routes/Task/list.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/routes/Task/list.js
@@ -1,6 +1,9 @@
import React, {Component} from 'react';
import {Redirect} from 'react-router-dom'
import moment from 'moment';
+import { Dialog } from 'primereact/dialog';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
import _ from 'lodash';
import TaskService from '../../services/task.service';
import AppLoader from '../../layout/components/AppLoader';
@@ -8,7 +11,8 @@ import PageHeader from '../../layout/components/PageHeader';
import ViewTable from '../../components/ViewTable';
import UIConstants from '../../utils/ui.constants';
import TaskStatusLogs from './state_logs';
-import { Dialog } from 'primereact/dialog';
+import { appGrowl } from '../../layout/components/AppGrowl';
+import { CustomDialog } from '../../layout/components/CustomDialog';
export class TaskList extends Component {
constructor(props) {
@@ -45,6 +49,7 @@ export class TaskList extends Component {
"Created at",
"Updated at"
],
+ dialog: {},
defaultcolumns: [ {
status_logs: "Status Logs",
status:{
@@ -63,11 +68,13 @@ export class TaskList extends Component {
description:"Description",
start_time:{
name:"Start Time",
- filter: "date"
+ filter: "date",
+ format:UIConstants.CALENDAR_DATETIME_FORMAT
},
stop_time:{
name:"End Time",
- filter: "date"
+ filter: "date",
+ format:UIConstants.CALENDAR_DATETIME_FORMAT
},
duration:"Duration (HH:mm:ss)",
relative_start_time:"Relative Start Time (HH:mm:ss)",
@@ -87,11 +94,13 @@ export class TaskList extends Component {
url:"API URL",
created_at:{
name: "Created at",
- filter: "date"
+ filter: "date",
+ format:UIConstants.CALENDAR_DATETIME_FORMAT
},
updated_at:{
name: "Updated at",
- filter: "date"
+ filter: "date",
+ format:UIConstants.CALENDAR_DATETIME_FORMAT
},
actionpath:"actionpath"
}],
@@ -116,6 +125,13 @@ export class TaskList extends Component {
"BluePrint / Task Draft link":"filter-input-50",
}]
};
+ this.selectedRows = [];
+
+ this.confirmDeleteTasks = this.confirmDeleteTasks.bind(this);
+ this.onRowSelection = this.onRowSelection.bind(this);
+ this.deleteTasks = this.deleteTasks.bind(this);
+ this.closeDialog = this.closeDialog.bind(this);
+ this.getTaskDialogContent = this.getTaskDialogContent.bind(this);
}
subtaskComponent = (task)=> {
@@ -134,7 +150,6 @@ export class TaskList extends Component {
getFormattedTaskBlueprints(tasks) {
let taskBlueprintsList = [];
for(const taskBlueprint of tasks) {
- const template = this.subTaskTemplate.find(template => taskBlueprint.specifications_template_id === template.id);
taskBlueprint['status_logs'] = this.subtaskComponent(taskBlueprint);
taskBlueprint['tasktype'] = 'Blueprint';
taskBlueprint['actionpath'] = '/task/view/blueprint/'+taskBlueprint['id'];
@@ -145,7 +160,6 @@ export class TaskList extends Component {
taskBlueprint.subTasks = taskBlueprint.subtasks;
taskBlueprint.schedulingUnitId = taskBlueprint.scheduling_unit_blueprint_id;
taskBlueprint.schedulingUnitName = taskBlueprint.scheduling_unit_blueprint_name;
- taskBlueprint.subTaskID = template ? template.id : '';
taskBlueprintsList.push(taskBlueprint);
}
return taskBlueprintsList;
@@ -170,8 +184,6 @@ export class TaskList extends Component {
for(const key of commonkeys){
scheduletask[key] = task[key];
}
- scheduletask['created_at'] = moment(task['created_at'],moment.ISO_8601).format(UIConstants.CALENDAR_DATETIME_FORMAT);
- scheduletask['updated_at'] = moment(task['updated_at'],moment.ISO_8601).format(UIConstants.CALENDAR_DATETIME_FORMAT);
scheduletask['specifications_doc'] = task['specifications_doc'];
scheduletask.duration = moment.utc((scheduletask.duration || 0)*1000).format(UIConstants.CALENDAR_TIME_FORMAT);
scheduletask.relative_start_time = moment.utc(scheduletask.relative_start_time*1000).format(UIConstants.CALENDAR_TIME_FORMAT);
@@ -182,30 +194,7 @@ export class TaskList extends Component {
scheduletask.produced_by_ids = task.produced_by_ids;
scheduletask.schedulingUnitId = task.scheduling_unit_draft_id;
scheduletask.schedulingUnitName = task.scheduling_unit_draft_name;
- for(const blueprint of task['task_blueprints']){
- let taskblueprint = {};
- const template = this.subTaskTemplate.find(template => blueprint.specifications_template_id === template.id);
- taskblueprint['tasktype'] = 'Blueprint';
- taskblueprint['actionpath'] = '/task/view/blueprint/'+blueprint['id'];
- taskblueprint['blueprint_draft'] = blueprint['draft'];
- taskblueprint['status'] = blueprint['status'];
-
- for(const key of commonkeys){
- taskblueprint[key] = blueprint[key];
- }
- taskblueprint['created_at'] = moment(blueprint['created_at'], moment.ISO_8601).format(UIConstants.CALENDAR_DATETIME_FORMAT);
- taskblueprint['updated_at'] = moment(blueprint['updated_at'], moment.ISO_8601).format(UIConstants.CALENDAR_DATETIME_FORMAT);
- taskblueprint.duration = moment.utc((taskblueprint.duration || 0)*1000).format(UIConstants.CALENDAR_TIME_FORMAT);
- taskblueprint.relative_start_time = moment.utc(taskblueprint.relative_start_time*1000).format(UIConstants.CALENDAR_TIME_FORMAT);
- taskblueprint.relative_stop_time = moment.utc(taskblueprint.relative_stop_time*1000).format(UIConstants.CALENDAR_TIME_FORMAT);
- taskblueprint.template = scheduletask.template;
- taskblueprint.schedulingUnitId = task.scheduling_unit_draft_id;
- taskblueprint.subTaskID = template ? template.id : '';
- taskblueprint.subTasks = blueprint.subtasks;
- //Add Blue print details to array
- scheduletasklist.push(taskblueprint);
- }
- //Add Task Draft details to array
+ //Add Task Draft details to array
scheduletasklist.push(scheduletask);
}
return scheduletasklist;
@@ -215,14 +204,85 @@ export class TaskList extends Component {
const promises = [
TaskService.getTaskDraftList(),
TaskService.getTaskBlueprintList(),
- TaskService.getSubtaskTemplates()
];
Promise.all(promises).then((responses) => {
- this.subTaskTemplate = responses[2];
+ // this.subTaskTemplates = responses[2];
this.setState({ tasks: [...this.getFormattedTaskDrafts(responses[0]), ...this.getFormattedTaskBlueprints(responses[1])], isLoading: false});
});
}
+ /**
+ * Prepare Task(s) details to show on confirmation dialog
+ */
+ getTaskDialogContent() {
+ let selectedTasks = [];
+ for(const obj of this.selectedRows) {
+ debugger
+ selectedTasks.push({id:obj.id, suId: obj.schedulingUnitId, suName: obj.schedulingUnitName,
+ taskId: obj.id, controlId: obj.subTaskID, taskName: obj.name, status: obj.status});
+ }
+ return <>
+ <DataTable value={selectedTasks} resizableColumns columnResizeMode="expand" className="card" style={{paddingLeft: '0em'}}>
+ <Column field="suId" header="Scheduling Unit Id"></Column>
+ <Column field="taskId" header="Task Id"></Column>
+ <Column field="taskName" header="Task Name"></Column>
+ <Column field="status" header="Status"></Column>
+ </DataTable>
+ </>
+ }
+
+ confirmDeleteTasks() {
+ debugger
+ if(this.selectedRows.length === 0) {
+ appGrowl.show({severity: 'info', summary: 'Select Row', detail: 'Select Task to delete.'});
+ } else {
+ let dialog = {};
+ dialog.type = "confirmation";
+ dialog.header= "Confirm to Delete Task(s)";
+ dialog.detail = "Do you want to delete the selected Task(s)?";
+ dialog.content = this.getTaskDialogContent;
+ dialog.actions = [{id: 'yes', title: 'Yes', callback: this.deleteTasks},
+ {id: 'no', title: 'No', callback: this.closeDialog}];
+ dialog.onSubmit = this.deleteTasks;
+ dialog.width = '55vw';
+ dialog.showIcon = false;
+ this.setState({dialog: dialog, dialogVisible: true});
+ }
+ }
+
+ /**
+ * Delete Task(s)
+ */
+ async deleteTasks() {
+ let hasError = false;
+ for(const task of this.selectedRows) {
+ if(!await TaskService.deleteTask(task.tasktype, task.id)) {
+ hasError = true;
+ }
+ }
+ if(hasError){
+ appGrowl.show({severity: 'error', summary: 'error', detail: 'Error while deleting Task(s)'});
+ this.setState({dialogVisible: false});
+ } else {
+ this.selectedRows = [];
+ this.setState({dialogVisible: false});
+ this.componentDidMount();
+ appGrowl.show({severity: 'success', summary: 'Success', detail: 'Task(s) deleted successfully'});
+ }
+ }
+
+ /**
+ * Callback function to close the dialog prompted.
+ */
+ closeDialog() {
+ this.setState({dialogVisible: false});
+ }
+
+ onRowSelection(selectedRows) {
+ this.selectedRows = selectedRows;
+ }
+
+
render() {
if (this.state.redirect) {
return <Redirect to={ {pathname: this.state.redirect} }></Redirect>
@@ -232,6 +292,16 @@ export class TaskList extends Component {
<React.Fragment>
<PageHeader location={this.props.location} title={'Task - List'} />
{this.state.isLoading? <AppLoader /> :
+ <>
+ <div className="delete-option">
+ <div >
+ <span className="p-float-label">
+ <a href="#" onClick={this.confirmDeleteTasks} title="Delete selected Task(s)">
+ <i class="fa fa-trash" aria-hidden="true" ></i>
+ </a>
+ </span>
+ </div>
+ </div>
<ViewTable
data={this.state.tasks}
defaultcolumns={this.state.defaultcolumns}
@@ -244,7 +314,10 @@ export class TaskList extends Component {
paths={this.state.paths}
unittest={this.state.unittest}
tablename="scheduleunit_task_list"
+ allowRowSelection={true}
+ onRowSelection = {this.onRowSelection}
/>
+ </>
}
{this.state.showStatusLogs &&
<Dialog header={`Status change logs - ${this.state.task?this.state.task.name:""}`}
@@ -253,6 +326,10 @@ export class TaskList extends Component {
<TaskStatusLogs taskId={this.state.task.id}></TaskStatusLogs>
</Dialog>
}
+ <CustomDialog type="confirmation" visible={this.state.dialogVisible}
+ header={this.state.dialog.header} message={this.state.dialog.detail} actions={this.state.dialog.actions}
+ content={this.state.dialog.content} width={this.state.dialog.width} showIcon={this.state.dialog.showIcon}
+ onClose={this.closeDialog} onCancel={this.closeDialog} onSubmit={this.state.dialog.onSubmit}/>
</React.Fragment>
);
}