Skip to content
Snippets Groups Projects
Commit 03f99b61 authored by Nithya Santhanam's avatar Nithya Santhanam
Browse files

TMSS-630 

Updated based on review comments except commentNo.4
parent a1730f24
No related branches found
No related tags found
1 merge request!397Resolve TMSS-630
Hide whitespace changes
Inline Side-by-side
SAS/TMSS/frontend/tmss_webapp/src/routes/Task/list.js
+ 112
− 35
View file @ 03f99b61
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>
);
}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment