Skip to content
Snippets Groups Projects
Commit ac7fc7ef authored by Muthukrishnan's avatar Muthukrishnan
Browse files

TMSS-370 - code changes for SU constraint 

Implemented the the SU constraint in Excel  sheet view
parent c56a3e39
No related branches found
No related tags found
1 merge request!294Sprint-16 Front End Demo Merge
Expand all Show whitespace changes
Inline Side-by-side
Showing
with 560 additions and 384 deletions
SAS/TMSS/frontend/tmss_webapp/src/components/Spreadsheet/BetweenEditor.js
+ 142
− 130
View file @ ac7fc7ef
import React, { Component } from 'react'; import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { AgGridReact } from 'ag-grid-react'; import {Calendar} from 'primereact/calendar';
import DateTimePicker from './DateTimePicker'; import { Dialog } from 'primereact/dialog';
import 'ag-grid-community/dist/styles/ag-grid.css'; import { Button } from 'primereact/button';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';
import CustomDateComponent from '../../components/Spreadsheet/CustomDateComponent';
import moment from 'moment'; import moment from 'moment';
import _ from 'lodash'; import _ from 'lodash';
const DATE_TIME_FORMAT = 'DD-MMM-YYYY HH:mm:SS'; const DATE_TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss';
export default class BetweenEditor extends Component { export default class BetweenEditor extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.gridApi = '' this.tmpRowData = [];
this.gridColumnApi = ''
this.state = { this.state = {
columnDefs: [ showDialog: false,
{headerName: "From", field: "from",editable: true, cellEditor: 'agDateInput', valueSetter: 'newValueSetter' }, dialogTitle: '',
{headerName: "Until", field: "until",editable: true, cellEditor: 'agDateInput', valueSetter: 'newValueSetter'},
],
frameworkComponents: {
datePicker: DateTimePicker,
agDateInput: CustomDateComponent
},
context: { componentParent: this },
}; };
this.onGridReady = this.onGridReady.bind(this);
this.newValueSetter = this.newValueSetter(this);
this.rowData= [
{from: "12-Oct-2020 10:10:12", until: "22-Oct-2020 10:10:12"},
{from: "13-Oct-2020 10:10:12", until: "23-Oct-2020 10:10:12"},
{from: "14-Oct-2020 10:10:12", until: "24-Oct-2020 10:10:12"},
{from: "", until: ""}
];
}
newValueSetter(params){ this.copyDateValue = this.copyDateValue.bind(this);
console.log('newValueSetter',params)
return true;
} }
getConsolidateDate(){ isPopup() {
let consolidateDateValue = ''; return true;
this.state.rowData.forEach(rowDate =>{
if(rowDate['from'] !== '' || rowDate['until'] !== '')
consolidateDateValue += moment(rowDate['from']).format(DATE_TIME_FORMAT)+','+moment(rowDate['fruntilom']).format(DATE_TIME_FORMAT)+'|'
})
return consolidateDateValue;
} }
async updateTime(rowIndex, field, value){ /**
console.log('value',value); * Init the date value if exists
value = moment(value).format(DATE_TIME_FORMAT); */
let row = this.state.rowData[rowIndex]; async componentDidMount(){
row[field] = value; let parentRows = this.props.agGridReact.props.rowData[this.props.node.rowIndex];
let tmpRowData =this.state.rowData; let parentCellData = parentRows[this.props.colDef.field];
tmpRowData[rowIndex]= row; this.tmpRowData = [];
let tmpRow = this.state.rowData[this.state.rowData.length-1]; if(parentCellData){
if(tmpRow['from'] !== '' || tmpRow['until'] !== '' ){ let cellDataArray = _.split(parentCellData, '|');
await cellDataArray.forEach(dataVal =>{
let line = {}; let line = {};
line['from'] = ''; let dataValue = _.split(dataVal, ',');
line['until'] = ''; line['from'] = (dataValue[0])? moment(dataValue[0]).toDate():'';
tmpRowData.push(line); line['until'] = ( dataValue[1])? moment(dataValue[1]).toDate():'';
this.tmpRowData.push(line);
});
} }
if(this.tmpRowData.length>0){
let row = this.tmpRowData[this.tmpRowData.length-1];
if((row['from'] !== '' && row['from'] !== 'undefined') && (row['until'] !== '' && row['until'] !== 'undefined')){
let line = {'from': '', 'until': ''};
this.tmpRowData.push(line);
}
}else{
let line = {'from': '', 'until': ''};
this.tmpRowData.push(line);
}
await this.setState({ await this.setState({
rowData: tmpRowData rowData: this.tmpRowData,
dialogTitle: (this.props.colDef.field === 'between') ? this.props.colDef.field : 'Not-Between',
showDialog: true,
}); });
this.state.gridApi.setRowData(this.state.rowData); }
this.state.gridApi.redrawRows();
let parentRow = this.props.agGridReact.props.rowData[this.props.node.rowIndex]; /*isCancelAfterEnd(){console.log('after')
parentRow[this.props.colDef.field] = this.getConsolidateDate(); console.log('called')
// this.props.agGridReact.props.rowData[this.props.node.rowIndex] = parentRow; this.copyDateValue();
/* this.props.agGridReact.props.setState({ }*/
rowData: this.props.agGridReact.props.rowData
}) */
/* /**
await this.props.context.componentParent.updateTimeValue( * Call the function on click Esc or Close the dialog
this.props.node.rowIndex,this.props.colDef.field,this.getConsolidateDate()
);
*/ */
async copyDateValue(){
let consolidateDates = '';
this.state.rowData.map(row =>{
if((row['from'] !== '' && row['from'] !== 'undefined') && (row['until'] !== '' && row['until'] !== 'undefined')){
consolidateDates += ((row['from'] !== '')?moment(row['from']).format(DATE_TIME_FORMAT):'' )+","+((row['until'] !== '')?moment(row['until']).format(DATE_TIME_FORMAT):'')+"|";
} }
})
await this.props.context.componentParent.updateTime(
this.props.node.rowIndex,this.props.colDef.field, consolidateDates
);
this.setState({ showDialog: false});
isPopup() {
return true;
} }
componentDidMount(){ /*
let row = this.props.agGridReact.props.rowData[this.props.node.rowIndex]; Set value in relevant field
let cellData = row[this.props.colDef.field]; */
let rowDataTmp = []; updateDateChanges(rowIndex, field, e){
if(cellData){ let tmpRows = this.state.rowData;
let cellDataArray = _.split(cellData, '|'); let row = tmpRows[rowIndex];
cellDataArray.forEach(dataVal =>{ row[field] = e.value;
let line = {}; tmpRows[rowIndex] = row;
let dataValue = _.split(dataVal, ','); if(this.state.rowData.length === rowIndex+1){
line['from'] = (dataValue[0])? moment(dataValue[0]).format(DATE_TIME_FORMAT):''; let line = {'from': '', 'until': ''};
line['until'] = ( dataValue[1])? moment(dataValue[1]).format(DATE_TIME_FORMAT):''; tmpRows.push(line);
rowDataTmp.push(line);
});
} }
let line = {};
line['from'] = '';
line['until'] = '';
rowDataTmp.push(line);
this.setState({ this.setState({
rowData: rowDataTmp rowData: tmpRows
// rowData: this.rowData
}) })
} }
async onGridReady (params) {
await this.setState({ /*
gridApi:params.api, Remove the the row from dialog
gridColumnApi:params.columnApi, */
removeInput(rowIndex){
let tmpRows = this.state.rowData;
delete tmpRows[rowIndex];
this.setState({
rowData: tmpRows
}) })
this.state.gridApi.hideOverlay();
} }
render() { render() {
return ( return (
<> <>
{this.state.rowData && {this.state.rowData && this.state.rowData.length > 0 &&
<div <Dialog header={_.startCase(this.state.dialogTitle)} visible={this.state.showDialog} maximized={false}
className="ag-theme-balham" onHide={() => {this.copyDateValue()}} inputId="confirm_dialog"
style={{ height: '200px', width: '430px' }} footer={<div>
> <Button key="back" label="Close" onClick={() => {this.copyDateValue()}} />
<AgGridReact </div>
columnDefs={this.state.columnDefs} } >
frameworkComponents={this.state.frameworkComponents} <div className="ag-theme-balham" style={{ height: '500px', width: '560px', paddingLeft: '20px' }}>
rowData={this.state.rowData} <div className="p-field p-grid" >
context={this.state.context} <React.Fragment>
onGridReady={this.onGridReady} <label key={'labelFrom'} className="col-lg-6 col-md-6 col-sm-12">From</label>
> <label key={'labelUntil'} className="col-lg-4 col-md-5 col-sm-12">Until</label>
</AgGridReact> <label key={'labelRemove'} className="col-lg-2 col-md-2 col-sm-12">Remove</label>
</React.Fragment>
</div>
{this.state.rowData.map((bdate, index) => (
<React.Fragment key={index}>
<div className="p-field p-grid" >
<Calendar
d dateFormat="dd-M-yy"
value= {this.state.rowData[index].from}
onChange= {e => {this.updateDateChanges(index, 'from', e)}}
// onBlur= {e => {this.updateDateChanges(index, 'from', e)}}
showTime={true}
showSeconds={true}
hourFormat="24"
showIcon={true}
/>
<Calendar
d dateFormat="dd-M-yy"
value= {this.state.rowData[index].until}
onChange= {e => {this.updateDateChanges(index, 'until', e)}}
// onBlur= {e => {this.updateDateChanges(index, 'until', e)}}
showTime={true}
showSeconds={true}
hourFormat="24"
showIcon={true}
style={{marginLeft:'60px'}}
/>
{this.state.rowData.length !== (index+1) &&
<button className="p-link" style={{marginLeft: '6vw'}} onClick={(e) => this.removeInput(index)} >
<i className="fa fa-trash pi-error"></i></button>
}
</div>
</React.Fragment>
))}
</div> </div>
</Dialog>
} }
</> </>
); );
} }
processRowPostCreate(params){
console.log('-----------------------------------------')
if (params) {
const eRow = params.eRow;
console.dir(eRow); // no error
console.log(eRow.innerHTML); // innerHTML undefined
}
}
processCellFromClipboard(params){
console.log('-----------------------------------------')
}
} }
\ No newline at end of file
SAS/TMSS/frontend/tmss_webapp/src/components/Spreadsheet/BetweenRenderer.js
+ 5
− 15
View file @ ac7fc7ef
import React, { Component } from 'react'; import React, { Component } from 'react';
import moment from 'moment'; import moment from 'moment';
const DATE_TIME_FORMAT = 'DD-MMM-YYYY HH:mm:SS';
export default class BetweenRenderer extends Component { export default class BetweenRenderer extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
} }
render() {
let row = this.props.agGridReact.props.rowData[this.props.node.rowIndex];
// console.log('row',row)
// console.log('CDM:', this.props.node.rowIndex,this.props.colDef.field, row[this.props.colDef.field]);
//console.log('>>', console.log('CDM:', this.props.node.rowIndex,this.props.colDef.field, this.props.agGridReact.props.rowData))
/** /**
* Get relevant cell value an set here Show cell value in grid
*/ */
render() {
let row = this.props.agGridReact.props.rowData[this.props.node.rowIndex];
let datavalue = row[this.props.colDef.field]; let datavalue = row[this.props.colDef.field];
if(datavalue){
datavalue = moment(datavalue).format(DATE_TIME_FORMAT)
}
//console.log('datavalue ',datavalue)
return <> {datavalue && return <> {datavalue &&
datavalue datavalue
}</>; }</>;
......
SAS/TMSS/frontend/tmss_webapp/src/components/Spreadsheet/CustomDateComp.js 0 → 100644
+ 78
− 0
View file @ ac7fc7ef
import React, { Component } from 'react';
import {Calendar} from 'primereact/calendar';
import moment from 'moment';
const DATE_TIME_FORMAT = 'YYYY-MM-DD HH:mm:SS';
export default class CustomDateComp extends Component {
constructor(props) {
super(props);
this.state = {
date: '',
};
}
isPopup() {
return true;
}
isCancelAfterEnd(){
let date = (this.state.date !== '' && this.state.date !== 'undefined')? moment(this.state.date).format(DATE_TIME_FORMAT) :'';
this.props.context.componentParent.updateTime(
this.props.node.rowIndex,this.props.colDef.field, date
);
}
render() {
return (
<Calendar
d dateFormat="dd-M-yy"
value= {this.state.date}
onChange= {e => {this.updateDateChanges(e)}}
onBlur= {e => {this.updateDateChanges(e)}}
//data-testid="start"
showTime= {true}
showSeconds= {true}
hourFormat= "24"
showIcon= {true}
/>
);
}
updateDateChanges(e){
if(e.value){
this.setState({date : e.value});
}
}
ondatechange(e){
this.setState({date : e.value});
}
getDate() {
return this.state.date;
}
setDate(date) {
this.setState({ date });
this.picker.setDate(date);
}
updateAndNotifyAgGrid(date) {
this.setState(
{
date,
},
this.props.onDateChanged
);
}
onDateChanged = (selectedDates) => {
this.props.context.componentParent.updateTime(
this.props.node.rowIndex,this.props.colDef.field,selectedDates[0]
);
};
}
\ No newline at end of file
SAS/TMSS/frontend/tmss_webapp/src/components/Spreadsheet/DateTimePicker.js deleted 100644 → 0
+ 0
− 47
View file @ c56a3e39
import React, { Component } from 'react';
import Flatpickr from 'flatpickr';
import "flatpickr/dist/flatpickr.css";
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';
export default class BetweenEditor extends Component {
constructor(props) {
super(props);
this.state ={
date:'',
}
}
isPopup() {
return true;
}
render() {
return (
<div
className="ag-theme-balham"
style={{ height: '300px', width: '300px' }}
>
<Flatpickr
data-enable-time={true}
value={this.state.date}
wrap={true}
showClearButton= {true}
inlineHideInput= {true}
defaultHour= {0}
defaultMinute= {1}
enableSeconds= {true}
defaultSecond= {0}
hourIncrement= {1}
minuteIncrement= {1}
secondIncrement= {5}
time_24hr= {true}
allowInput= {true}
/>
</div>
);
}
}
SAS/TMSS/frontend/tmss_webapp/src/components/Spreadsheet/DegreeInputmask.js
+ 1
− 0
View file @ ac7fc7ef
...@@ -2,6 +2,7 @@ import React, { Component } from 'react'; ...@@ -2,6 +2,7 @@ import React, { Component } from 'react';
import { InputMask } from 'primereact/inputmask'; import { InputMask } from 'primereact/inputmask';
import Validator from '../../utils/validator'; import Validator from '../../utils/validator';
export default class DegreeInputMask extends Component { export default class DegreeInputMask extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
......
SAS/TMSS/frontend/tmss_webapp/src/components/Spreadsheet/MultiSelector.js
+ 20
− 6
View file @ ac7fc7ef
...@@ -7,9 +7,9 @@ export default class SkySllector extends Component { ...@@ -7,9 +7,9 @@ export default class SkySllector extends Component {
super(props); super(props);
this.dailyOptions= [ this.dailyOptions= [
{name: 'Day', code: 'Day'}, {name: 'require_day', code: 'require_day'},
{name: 'Night', code: 'Night'}, {name: 'require_night', code: 'require_night'},
{name: 'Twilight', code: 'Twilight'}, {name: 'avoid_twilight', code: 'avoid_twilight'},
]; ];
this.state= { this.state= {
daily: '', daily: '',
...@@ -19,6 +19,20 @@ export default class SkySllector extends Component { ...@@ -19,6 +19,20 @@ export default class SkySllector extends Component {
this.callbackUpdateDailyCell = this.callbackUpdateDailyCell.bind(this); this.callbackUpdateDailyCell = this.callbackUpdateDailyCell.bind(this);
} }
async componentDidMount(){
let selectedValues = this.props.data['daily'];
if(selectedValues){
}
console.log('this.props.props',this.props.data['daily'])
// this.props.props.
/* console.log('---',this.props.data['daily'])
await this.setState({
daily: this.props.data['daily']
})*/
}
async callbackUpdateDailyCell(e) { async callbackUpdateDailyCell(e) {
let isValid = false; let isValid = false;
this.setState({ this.setState({
...@@ -31,7 +45,7 @@ export default class SkySllector extends Component { ...@@ -31,7 +45,7 @@ export default class SkySllector extends Component {
}) })
dailyValue = _.trim(dailyValue) dailyValue = _.trim(dailyValue)
dailyValue = dailyValue.replace(/,([^,]*)$/, '' + '$1') dailyValue = dailyValue.replace(/,([^,]*)$/, '' + '$1')
console.log('dailyValue',dailyValue)
this.props.context.componentParent.updateDailyCell( this.props.context.componentParent.updateDailyCell(
this.props.node.rowIndex,this.props.colDef.field,dailyValue this.props.node.rowIndex,this.props.colDef.field,dailyValue
); );
......
SAS/TMSS/frontend/tmss_webapp/src/components/Spreadsheet/RenderTimeInputmask.js deleted 100644 → 0
+ 0
− 60
View file @ c56a3e39
import React, { Component } from 'react';
import { InputMask } from 'primereact/inputmask';
import Validator from '../../utils/validator';
export default class RenderTimeInputmask extends Component{
constructor(props) {
super(props);
this.callbackUpdateAngle = this.callbackUpdateAngle.bind(this);
}
callbackUpdateAngle(e) {
let isValid = false;
if(Validator.validateTime(e.value)){
e.originalEvent.target.style.backgroundColor = '';
isValid = true;
}else{
e.originalEvent.target.style.backgroundColor = 'orange';
}
this.props.context.componentParent.updateAngle(
this.props.node.rowIndex,this.props.colDef.field,e.value,false,isValid
);
}
/*
isPopup(){}
isCancelBeforeStart(){}
focusIn(){}
focusOut(){}
destroy(){}
*/
isCancelAfterEnd(){
// console.log('params', this.props);
// return false;
}
afterGuiAttached(){
//this.input.input.focus();
}
getValue(){
// console.log(this.input.value)
}
render() {
return (
<InputMask
value={this.props.value}
mask="99:99:99"
placeholder="HH:mm:ss"
className="inputmask"
onComplete={this.callbackUpdateAngle}
ref={input =>{this.input = input}}
/>
);
}
}
\ No newline at end of file
SAS/TMSS/frontend/tmss_webapp/src/components/Spreadsheet/numericEditor.js
+ 0
− 2
View file @ ac7fc7ef
...@@ -12,9 +12,7 @@ export default class NumericEditor extends Component { ...@@ -12,9 +12,7 @@ export default class NumericEditor extends Component {
this.cancelBeforeStart = this.cancelBeforeStart =
this.props.charPress && '1234567890'.indexOf(this.props.charPress) < 0; this.props.charPress && '1234567890'.indexOf(this.props.charPress) < 0;
this.state = this.createInitialState(props); this.state = this.createInitialState(props);
this.onKeyDown = this.onKeyDown.bind(this); this.onKeyDown = this.onKeyDown.bind(this);
this.handleChange = this.handleChange.bind(this); this.handleChange = this.handleChange.bind(this);
} }
......
SAS/TMSS/frontend/tmss_webapp/src/layout/_overrides.scss
+ 6
− 0
View file @ ac7fc7ef
...@@ -22,6 +22,12 @@ ...@@ -22,6 +22,12 @@
border-top: none; border-top: none;
} }
} }
.ag-root-wrapper{
/*
calendar is overlaped by AG-grid table, so table props update to show calendar
*/
overflow: inherit;
}
.tmss-table { .tmss-table {
overflow:auto; overflow:auto;
// since calendar getting inserted to table, because of above overflow, not getting visible // since calendar getting inserted to table, because of above overflow, not getting visible
......
SAS/TMSS/frontend/tmss_webapp/src/services/schedule.service.js
+ 0
− 1
View file @ ac7fc7ef
...@@ -281,7 +281,6 @@ const ScheduleService = { ...@@ -281,7 +281,6 @@ const ScheduleService = {
}, },
updateSchedulingUnitDraft: async function(schedulingUnit) { updateSchedulingUnitDraft: async function(schedulingUnit) {
try { try {
// console.log(schedulingUnit);
schedulingUnit.scheduling_constraints_doc = ( schedulingUnit.scheduling_constraints_doc == null)?"": schedulingUnit.scheduling_constraints_doc; schedulingUnit.scheduling_constraints_doc = ( schedulingUnit.scheduling_constraints_doc == null)?"": schedulingUnit.scheduling_constraints_doc;
const suUpdateResponse = await axios.put(`/api/scheduling_unit_draft/${schedulingUnit.id}/`, schedulingUnit); const suUpdateResponse = await axios.put(`/api/scheduling_unit_draft/${schedulingUnit.id}/`, schedulingUnit);
return suUpdateResponse.data; return suUpdateResponse.data;
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment