diff --git a/SAS/TMSS/frontend/tmss_webapp/src/App.js b/SAS/TMSS/frontend/tmss_webapp/src/App.js
index 41e07bed2d4a87f00d40d2c1dade10a4b0ca8543..54664437fd58522af9bfcb24ef007bba978f1b7c 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/App.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/App.js
@@ -59,6 +59,7 @@ class App extends Component {
this.validateAndLogout = this.validateAndLogout.bind(this);
this.setSearchField = this.setSearchField.bind(this);
this.toggleEditToggle = this.toggleEditToggle.bind(this);
+ this.setLocalStorageValue = this.setLocalStorageValue.bind(this);
this.menu = [
//{label: 'Dashboard', icon: 'pi pi-fw pi-home', to:'/dashboard',section: 'dashboard'},
@@ -82,31 +83,43 @@ class App extends Component {
this.menuClick = false;
}
+ /**
+ * Set key value in local storage
+ * @param {*} key
+ * @param {*} value
+ * @returns String value
+ */
+ setLocalStorageValue(key, value) {
+ localStorage.setItem(key, value);
+ return "done";
+ }
+
onToggleMenu(event) {
this.menuClick = true;
if (this.isDesktop()) {
if (this.state.layoutMode === 'overlay') {
this.setState({
overlayMenuActive: !this.state.overlayMenuActive
- }, () => {
+ }, async () => {
localStorage.setItem('overlayMenuActive', this.state.overlayMenuActive);
}
);
}
else if (this.state.layoutMode === 'static') {
+ const result = this.setLocalStorageValue('staticMenuInactive', !this.state.staticMenuInactive);
this.setState({
staticMenuInactive: !this.state.staticMenuInactive
- }, () => {
+ }/*, async () => {
localStorage.setItem('staticMenuInactive', this.state.staticMenuInactive);
- });
+ }*/);
}
}
else {
const mobileMenuActive = this.state.mobileMenuActive;
this.setState({
mobileMenuActive: !mobileMenuActive
- },() => {
- localStorage.setItem('mobileMenuActive', this.state.mobileMenuActive);
+ },async () => {
+ await localStorage.setItem('mobileMenuActive', this.state.mobileMenuActive);
}
);
}
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/components/FooterComponent.js b/SAS/TMSS/frontend/tmss_webapp/src/components/FooterComponent.js
new file mode 100644
index 0000000000000000000000000000000000000000..ee717b041de12327d5826d2d142b66319b2e2b1b
--- /dev/null
+++ b/SAS/TMSS/frontend/tmss_webapp/src/components/FooterComponent.js
@@ -0,0 +1,44 @@
+import React, { Component } from 'react';
+import { Button } from 'primereact/button';
+import { Checkbox } from 'primereact/checkbox';
+import UIConstants from '../utils/ui.constants';
+
+export default class FooterComponent extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ createAnother: false
+ }
+ this.callBack = this.callBack.bind(this);
+ this.tooltipOptions = UIConstants.tooltipOptions;
+ }
+
+ /**
+ *
+ * @param {*} e
+ */
+ callBack(e) {
+ this.props.createAnotherCallBack(e);
+ }
+
+ render() {
+ const manuExpand = localStorage.getItem('staticMenuInactive') === 'true' ? true : false;
+ return (
+ <>
+ <div className='footer-short-div' style={{width: manuExpand ? '94%':'80.75%'}}>
+ {this.props.createAnother !== undefined &&
+ <>
+ <Checkbox inputId="trigger" role="trigger" data-testid="createAnother" tooltip={this.props.tooltip} tooltipOptions={this.tooltipOptions}
+ checked={this.props.createAnother} onChange={e => this.callBack(e)} style={{marginRight: '0.25em'}} />
+ <label style={{display: 'inline', marginRight: '2em'}}> Create another? </label>
+ </>
+ }
+ <Button label="Save" className="p-button-primary act-btn-save" id="save-btn" data-testid="save-btn"
+ icon="pi pi-check" style={{marginRight: "1em", color: "white", marginTop: "5px", paddingBottom: "5px"}}
+ onClick={this.props.onSubmit} disabled={this.props.enableDisableSave}/>
+ <Button label="Cancel" className="act-btn-cancel" icon="pi pi-times" onClick={this.props.onCancel}/>
+ </div>
+ </>
+ );
+ }
+}
\ No newline at end of file
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_actionbar.scss b/SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_actionbar.scss
new file mode 100644
index 0000000000000000000000000000000000000000..1f61ed3020a18a204fc9b91c2eab10fb263f059a
--- /dev/null
+++ b/SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_actionbar.scss
@@ -0,0 +1,24 @@
+.footer-long-div {
+ margin-bottom: 24px !important;
+ z-index: 100;
+ position: fixed;
+ bottom: 0px;
+ width: 100%;
+ background-color: transparent !important;
+ box-shadow: none !important;
+ vertical-align: middle !important;
+ padding-left: 2px !important;
+ padding-bottom: 0.75em !important;
+}
+
+.footer-short-div {
+ background-color: #F1F1F1;
+ padding-left: 5px;
+ height: 2.75em;
+ min-width: max-content;
+ box-shadow: 2px 2px #d6d9d9;
+}
+
+.footer-short-div .pi-check{
+ color: white !important;
+}
\ No newline at end of file
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_layout.scss b/SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_layout.scss
index b6df9673214598a11da65aa64acd7a695c84a665..8477bb8ef04f3dbdc6f556a4ad95653732835f00 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_layout.scss
+++ b/SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_layout.scss
@@ -24,4 +24,5 @@
@import "./_report";
@import "./customdialog";
@import "./_buttongroups";
+@import "./_actionbar";
// @import "./splitpane";
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/routes/Cycle/create.js b/SAS/TMSS/frontend/tmss_webapp/src/routes/Cycle/create.js
index f06365b62dc82b786c2b6917ad7f271890c3629a..651f0574564f3081154efaa2451398e59bc978f1 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/routes/Cycle/create.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/routes/Cycle/create.js
@@ -19,6 +19,7 @@ import PageHeader from '../../layout/components/PageHeader';
import CycleService from '../../services/cycle.service';
import UnitConverter from '../../utils/unit.converter';
import UIConstants from '../../utils/ui.constants';
+import FooterComponent from '../../components/FooterComponent';
/**
* Component to create a new Cycle
@@ -79,6 +80,7 @@ export class CycleCreate extends Component {
this.reset = this.reset.bind(this);
this.checkIsDirty = this.checkIsDirty.bind(this);
this.close = this.close.bind(this);
+ this.setCreateAnother = this.setCreateAnother.bind(this);
}
componentDidMount() {
@@ -396,6 +398,14 @@ export class CycleCreate extends Component {
}
}
+ /**
+ * Select/Unselect the create another check box
+ * @param {*} e
+ */
+ setCreateAnother(e) {
+ this.setState({'createAnother': e.target.checked})
+ }
+
render() {
if (this.state.redirect) {
return <Redirect to={ {pathname: this.state.redirect} }></Redirect>
@@ -520,24 +530,11 @@ export class CycleCreate extends Component {
}
</div>
</div>
- <div className="p-col-1.5" style={{marginTop: '1em', marginLeft: '0.75em'}}>
- <Checkbox inputId="trigger" role="trigger" data-testid="createAnother"
- tooltip="Select checkbox to create another Cycle after saving this cycle"
- tooltipOptions={this.tooltipOptions}
- checked={this.state.createAnother}
- onChange={e => this.setState({'createAnother': e.target.checked})}
- style={{marginRight: '0.25em',}}></Checkbox>
- <label style={{display: 'inline'}}> Create another? </label>
-
- </div>
- <div className="p-grid p-justify-start act-btn-grp">
- <div className="p-col-1">
- <Button label="Save" className="p-button-primary" id="save-btn" data-testid="save-btn" icon="pi pi-check" onClick={this.saveCycle} disabled={!this.state.validForm} />
- </div>
- <div className="p-col-1">
- <Button label="Cancel" className="act-btn-cancel" icon="pi pi-times" onClick={this.checkIsDirty} />
- </div>
- </div>
+ <div className="footer-long-div p-breadcrumb" >
+ <FooterComponent createAnotherCallBack={this.setCreateAnother} createAnother={this.state.createAnother}
+ tooltip="Select checkbox to create another Cycle after saving this cycle"
+ onSubmit={this.saveCycle} enableDisableSave={!this.state.validForm} onCancel={this.checkIsDirty} />
+ </div>
</>
}
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/routes/Cycle/edit.js b/SAS/TMSS/frontend/tmss_webapp/src/routes/Cycle/edit.js
index 2ee83ace3b38ce85ee40d29d2d9cafdaf10fff89..ed5d138616195aa22dfc18e5ae2f3badf0f53000 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/routes/Cycle/edit.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/routes/Cycle/edit.js
@@ -20,6 +20,7 @@ import CycleService from '../../services/cycle.service';
import UnitConverter from '../../utils/unit.converter';
import UIConstants from '../../utils/ui.constants';
import { appGrowl } from '../../layout/components/AppGrowl';
+import FooterComponent from '../../components/FooterComponent';
export class CycleEdit extends Component {
constructor(props) {
@@ -298,10 +299,6 @@ export class CycleEdit extends Component {
}
}
}
-
- if (Object.keys(validFields).length === Object.keys(this.formRules).length) {
- validForm = true;
- }
if(this.state.cycle['start'] && this.state.cycle['stop']){
var isSameOrAfter = moment(this.state.cycle['stop']).isSameOrAfter(this.state.cycle['start']);
@@ -312,6 +309,10 @@ export class CycleEdit extends Component {
validForm = true;
}
}
+
+ if (validForm && Object.keys(validFields).length !== Object.keys(this.formRules).length) {
+ validForm = false;
+ }
this.setState({errors: errors, validFields: validFields, validForm: validForm});
return validForm;
@@ -528,15 +529,9 @@ export class CycleEdit extends Component {
}
</div>
</div>
- <div className="p-grid p-justify-start act-btn-grp">
- <div className="p-col-1">
- <Button label="Save" className="p-button-primary" id="save-btn" data-testid="save-btn" icon="pi pi-check" onClick={this.saveCycle} disabled={!this.state.validForm} />
- </div>
- <div className="p-col-1">
- <Button label="Cancel" className="act-btn-cancel" icon="pi pi-times" onClick={this.checkIsDirty} />
- </div>
- </div>
-
+ <div className="footer-long-div p-breadcrumb" >
+ <FooterComponent onSubmit={this.saveCycle}enableDisableSave={!this.state.validForm} onCancel={this.checkIsDirty} />
+ </div>
</>
}
{/* Dialog component to show messages and get input */}
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/routes/Project/create.js b/SAS/TMSS/frontend/tmss_webapp/src/routes/Project/create.js
index 05fa5f4bfd55754a223e54101833811730e01117..d29dc8b2db178d5394468a2cc5ba13b0bb2c9862 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/routes/Project/create.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/routes/Project/create.js
@@ -20,6 +20,7 @@ import ProjectService from '../../services/project.service';
import UnitConverter from '../../utils/unit.converter';
import UIConstants from '../../utils/ui.constants';
import ReactTooltip from "react-tooltip";
+import FooterComponent from '../../components/FooterComponent';
/**
* Component to create a new Project
@@ -32,7 +33,8 @@ export class ProjectCreate extends Component {
isDirty: false,
ltaStorage: [],
isLoading: true,
- dialog: { header: '', detail: ''},
+ dialog: { header: '', detail: ''},
+ createAnother: false,
project: {
archive_subdirectory: '',
name: '',
@@ -44,8 +46,7 @@ export class ProjectCreate extends Component {
auto_pin: false,
auto_ingest: false,
piggyback_allowed_tbb: false,
- piggyback_allowed_aartfaac: false,
- createAnother: false
+ piggyback_allowed_aartfaac: false
},
projectQuota: {}, // Resource Allocations
validFields: {}, // For Validation
@@ -89,6 +90,7 @@ export class ProjectCreate extends Component {
this.reset = this.reset.bind(this);
this.checkIsDirty = this.checkIsDirty.bind(this);
this.close = this.close.bind(this);
+ this.setCreateAnother = this.setCreateAnother.bind(this);
}
componentDidMount() {
@@ -455,6 +457,14 @@ export class ProjectCreate extends Component {
}
}
+ /**
+ * Select/Unselect the create another check box
+ * @param {*} e
+ */
+ setCreateAnother(e) {
+ this.setState({'createAnother': e.target.checked})
+ }
+
render() {
if (this.state.redirect) {
return <Redirect to={ {pathname: this.state.redirect} }></Redirect>
@@ -466,7 +476,7 @@ export class ProjectCreate extends Component {
type: 'button', actOn: 'click', props:{ callback: this.checkIsDirty }}]}/>
{ this.state.isLoading ? <AppLoader /> :
<>
- <div>
+ <div style={{marginBottom: '2em'}}>
<div className="p-fluid">
<div className="p-field p-grid" style={{display: 'none'}}>
<label htmlFor="projectId" className="col-lg-2 col-md-2 col-sm-12">URL </label>
@@ -644,23 +654,10 @@ export class ProjectCreate extends Component {
<ReactTooltip id="reacttooltip" place={'left'} type={'dark'} effect={'solid'} multiline={true} />
</div>
</div>
- <div className="p-col-1.5" style={{marginTop: '1em', marginLeft: '0.75em'}}>
- <Checkbox inputId="trigger" role="trigger" data-testid="createAnother"
- tooltip="Select checkbox to create another Project after saving this project"
- tooltipOptions={this.tooltipOptions}
- checked={this.state.createAnother}
- onChange={e => this.setState({'createAnother': e.target.checked})}
- style={{marginRight: '0.25em',}}></Checkbox>
- <label style={{display: 'inline'}}> Create another? </label>
-
- </div>
- <div className="p-grid p-justify-start act-btn-grp">
- <div className="p-col-1">
- <Button label="Save" className="p-button-primary" id="save-btn" data-testid="save-btn" icon="pi pi-check" onClick={this.saveProject} disabled={!this.state.validForm} />
- </div>
- <div className="p-col-1">
- <Button label="Cancel" className="act-btn-cancel" icon="pi pi-times" onClick={this.checkIsDirty} />
- </div>
+ <div className="footer-long-div p-breadcrumb" >
+ <FooterComponent createAnotherCallBack={this.setCreateAnother} createAnother={this.state.createAnother}
+ tooltip="Select checkbox to create another Project after saving this project"
+ onSubmit={this.saveProject} enableDisableSave={!this.state.validForm} onCancel={this.checkIsDirty} />
</div>
</>
}
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/routes/Project/edit.js b/SAS/TMSS/frontend/tmss_webapp/src/routes/Project/edit.js
index 41b300a7c5638d5dfd424002e77ef285922d8255..090063553e80debad74859894d0c42146fb815ac 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/routes/Project/edit.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/routes/Project/edit.js
@@ -25,6 +25,7 @@ import ReactTooltip from "react-tooltip";
import AuthUtil from '../../utils/auth.util';
import AccessDenied from '../../layout/components/AccessDenied';
import { appGrowl, setAppGrowl } from '../../layout/components/AppGrowl';
+import FooterComponent from '../../components/FooterComponent';
export class ProjectEdit extends Component {
constructor(props) {
@@ -528,7 +529,7 @@ export class ProjectEdit extends Component {
{ this.state.isLoading ? <AppLoader/> :
<>
- <div>
+ <div style={{marginBottom: "2em"}}>
<div className="p-fluid">
<div className="p-field p-grid">
<label htmlFor="projectName" className="col-lg-2 col-md-2 col-sm-12">Name <span style={{color:'red'}}>*</span></label>
@@ -702,15 +703,9 @@ export class ProjectEdit extends Component {
<ReactTooltip id="reacttooltip" place={'left'} type={'dark'} effect={'solid'} multiline={true} />
</div>
</div>
- <div className="p-grid p-justify-start act-btn-grp">
- <div className="p-col-1">
- <Button label="Save" className="p-button-primary" id="save-btn" data-testid="save-btn" icon="pi pi-check" onClick={this.saveProject} disabled={!this.state.validForm} />
- </div>
- <div className="p-col-1">
- <Button label="Cancel" className="act-btn-cancel" icon="pi pi-times" onClick={this.checkIsDirty} />
- </div>
+ <div className="footer-long-div p-breadcrumb" >
+ <FooterComponent onSubmit={this.saveProject} enableDisableSave={!this.state.validForm} onCancel={this.checkIsDirty} />
</div>
-
</>
}
{/* Dialog component to show messages and get input */}
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/routes/Reservation/reservation.create.js b/SAS/TMSS/frontend/tmss_webapp/src/routes/Reservation/reservation.create.js
index 796b3ba853afb48ac0630109409e4a474f5c1819..4b4f9489cfbabe105d0bb56029ce24ecefc40775 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/routes/Reservation/reservation.create.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/routes/Reservation/reservation.create.js
@@ -22,8 +22,8 @@ import Jeditor from '../../components/JSONEditor/JEditor';
import UtilService from '../../services/util.service';
import UnitConverter from '../../utils/unit.converter';
import { appGrowl } from '../../layout/components/AppGrowl';
-import { Checkbox } from 'primereact/checkbox';
-
+//import { Checkbox } from 'primereact/checkbox';
+import FooterComponent from '../../components/FooterComponent';
import "flatpickr/dist/flatpickr.css";
import ParserUtility from '../../utils/parser.utility';
@@ -83,6 +83,7 @@ export class ReservationCreate extends Component {
this.changeStrategy = this.changeStrategy.bind(this);
this.setEditorFunction = this.setEditorFunction.bind(this);
this.isValidDuration = this.isValidDuration.bind(this);
+ this.setCreateAnother = this.setCreateAnother.bind(this);
}
async componentDidMount() {
@@ -490,6 +491,14 @@ export class ReservationCreate extends Component {
return errors.duration?false:true;
}
+ /**
+ * Select/Unselect the create another check box
+ * @param {*} e
+ */
+ setCreateAnother(e) {
+ this.setState({'createAnother': e.target.checked})
+ }
+
render() {
if (this.state.redirect) {
return <Redirect to={{ pathname: this.state.redirect }}></Redirect>
@@ -668,26 +677,13 @@ export class ReservationCreate extends Component {
{this.state.paramsSchema ? jeditor : ""}
</div>
</div>
- </div>
- <div className="p-col-1.5" style={{marginTop: '1em', marginLeft: '0.75em'}}>
- <Checkbox inputId="trigger" role="trigger"
- tooltip="Select checkbox to create another reservation after saving this reservation"
- tooltipOptions={this.tooltipOptions}
- checked={this.state.createAnother}
- onChange={e => this.setState({'createAnother': e.target.checked})}
- style={{marginRight: '0.25em',}}></Checkbox>
- <label style={{display: 'inline'}}> Create another? </label>
- </div>
- <div className="p-grid p-justify-start act-btn-grp">
- <div className="p-col-1">
- <Button label="Save" className="p-button-primary" icon="pi pi-check" onClick={this.saveReservation}
- disabled={!this.state.validEditor || !this.state.validForm} data-testid="save-btn" />
- </div>
- <div className="p-col-1">
- <Button label="Cancel" className="act-btn-cancel" icon="pi pi-times" onClick={this.checkIsDirty} />
- </div>
- </div>
+ </div>
</div>
+ <div className="footer-long-div p-breadcrumb" >
+ <FooterComponent createAnotherCallBack={this.setCreateAnother} createAnother={this.state.createAnother}
+ tooltip="Select checkbox to create another reservation after saving this reservation"
+ onSubmit={this.saveReservation} enableDisableSave={!this.state.validEditor || !this.state.validForm} onCancel={this.checkIsDirty} />
+ </div>
</>
}
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/routes/Reservation/reservation.edit.js b/SAS/TMSS/frontend/tmss_webapp/src/routes/Reservation/reservation.edit.js
index fa51fd5df036ecede7a5439c73f9f3f8f037a611..381e4a7922cd8a5dc37553dd24b8312265bc0d94 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/routes/Reservation/reservation.edit.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/routes/Reservation/reservation.edit.js
@@ -23,6 +23,7 @@ import UtilService from '../../services/util.service';
import { InputMask } from 'primereact/inputmask';
import UnitConverter from '../../utils/unit.converter';
import ParserUtility from '../../utils/parser.utility';
+import FooterComponent from '../../components/FooterComponent';
export class ReservationEdit extends Component {
constructor(props) {
@@ -621,18 +622,10 @@ export class ReservationEdit extends Component {
</div>
</div>
</div>
-
- <div className="p-grid p-justify-start act-btn-grp">
- <div className="p-col-1">
- <Button label="Save" className="p-button-primary" icon="pi pi-check" onClick={this.saveReservation}
- disabled={!this.state.validEditor || !this.state.validForm} data-testid="save-btn" />
- </div>
- <div className="p-col-1">
- <Button label="Cancel" className="act-btn-cancel" icon="pi pi-times" onClick={this.checkIsDirty} />
- </div>
+ <div className="footer-long-div p-breadcrumb" >
+ <FooterComponent onSubmit={this.saveReservation}enableDisableSave={!this.state.validEditor || !this.state.validForm} onCancel={this.checkIsDirty} />
</div>
</div>
-
</React.Fragment>
}
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/routes/Scheduling/create.js b/SAS/TMSS/frontend/tmss_webapp/src/routes/Scheduling/create.js
index 6d2bad8239648d594c36bc50e2e362944c9e9385..cc128f4679f724c047f66fe51c6ba9bcee13a80e 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/routes/Scheduling/create.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/routes/Scheduling/create.js
@@ -31,6 +31,7 @@ import ReactTooltip from "react-tooltip";
import AuthUtil from '../../utils/auth.util';
import { MultiSelect } from 'primereact/multiselect';
import { appGrowl, setAppGrowl } from '../../layout/components/AppGrowl';
+import FooterComponent from '../../components/FooterComponent';
/**
* Component to create a new SchedulingUnit from Observation strategy template
@@ -117,6 +118,7 @@ export class SchedulingUnitCreate extends Component {
this.setSUSet = this.setSUSet.bind(this);
this.observOptionTemplate = this.observOptionTemplate.bind(this);
this.updateConstraintsParams = this.updateConstraintsParams.bind(this);
+ this.setCreateAnother = this.setCreateAnother.bind(this);
}
async componentDidMount() {
@@ -871,6 +873,14 @@ export class SchedulingUnitCreate extends Component {
this.setState({observStrategyFilters: observStrategyFilters, observStrategies: observStrategies, paramsSchema: null, observStrategy: {}})
}
+ /**
+ * Select/Unselect the create another check box
+ * @param {*} e
+ */
+ setCreateAnother(e) {
+ this.setState({'createAnother': e.target.checked})
+ }
+
render() {
if (this.state.redirect) {
return <Redirect to={ {pathname: this.state.redirect} }></Redirect>
@@ -1098,32 +1108,20 @@ export class SchedulingUnitCreate extends Component {
</div>
</div>
</fieldset>
- <div className="p-col-12" style={{marginLeft: '0.4em', marginTop: '-10px', paddingTop:'0px'}}>
+ <div className="p-col-12" style={{marginLeft: '0.4em', marginTop: '-10px', paddingTop:'0px', marginBottom: "2em"}}>
<label className={this.state.validSpecification ? "info" : "error"}>
{this.state.validSpecificationMessage ? this.state.validSpecificationMessage : ""}
</label>
</div>
</div>
- }
- <div className="p-col-1.5" style={{marginTop: '1em', marginLeft: '0.9em'}}>
- <Checkbox inputId="trigger" role="trigger" data-testid="createAnother"
- tooltip="Select checkbox to create another Scheduling Unit after saving this Scheduling Unit"
- tooltipOptions={this.tooltipOptions}
- checked={this.state.createAnother}
- onChange={e => this.setState({'createAnother': e.target.checked})}
- style={{marginRight: '0.25em',}}></Checkbox>
- <label style={{display: 'inline'}}> Create another? </label>
-
- </div>
- <div className="p-grid p-justify-start act-btn-grp">
- <div className="p-col-1" style={{marginLeft: '0.15em'}}>
- <Button label="Save" className="p-button-primary" icon="pi pi-check" onClick={this.saveSchedulingUnit}
- disabled={!this.state.constraintValidEditor || !this.state.validEditor || !this.state.validForm || !this.state.validConstraints || !this.state.validSpecification} data-testid="save-btn" />
- </div>
- <div className="p-col-1">
- <Button label="Cancel" className="act-btn-cancel" icon="pi pi-times" onClick={this.checkIsDirty} />
- </div>
- </div>
+ }
+ </div>
+ <div className="footer-long-div p-breadcrumb" >
+ <FooterComponent createAnotherCallBack={this.setCreateAnother} createAnother={this.state.createAnother}
+ tooltip="Select checkbox to create another Scheduling Unit after saving this Scheduling Unit"
+ onSubmit={this.saveSchedulingUnit}
+ enableDisableSave={!this.state.constraintValidEditor || !this.state.validEditor || !this.state.validForm || !this.state.validConstraints || !this.state.validSpecification}
+ onCancel={this.checkIsDirty} />
</div>
<ReactTooltip id="reacttooltip" place={'left'} type={'dark'} effect={'solid'} multiline={true} />
</>
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/routes/Scheduling/edit.js b/SAS/TMSS/frontend/tmss_webapp/src/routes/Scheduling/edit.js
index 65337a6e74bba91d1f492301d56732f0b11d2d00..305a31c38ced65e3b2a440158c1a92aecec272d5 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/routes/Scheduling/edit.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/routes/Scheduling/edit.js
@@ -30,6 +30,7 @@ import ReactTooltip from "react-tooltip";
import AuthUtil from '../../utils/auth.util';
import AccessDenied from '../../layout/components/AccessDenied';
import { appGrowl } from '../../layout/components/AppGrowl';
+import FooterComponent from '../../components/FooterComponent';
/**
* Compoenent to edit scheduling unit draft
@@ -862,7 +863,7 @@ export class EditSchedulingUnit extends Component {
{jeditor}
</div>
</fieldset>
- <div className="p-col-12" style={{marginLeft: '0.2em'}}>
+ <div className="p-col-12" style={{marginLeft: '0.2em', marginBottom: "2em"}}>
<label className={this.state.validSpecification ? "info" : "error"}>
{this.state.validSpecificationMessage ? this.state.validSpecificationMessage : ""}
</label>
@@ -870,14 +871,9 @@ export class EditSchedulingUnit extends Component {
</div>
}
<ReactTooltip id="reacttooltip" place={'left'} type={'dark'} effect={'solid'} multiline={true} />
- <div className="p-grid p-justify-start" >
- <div className="p-col-1" style={{paddingLeft: '0.5em !important'}}>
- <Button label="Save" className="p-button-primary" icon="pi pi-check" onClick={this.saveSchedulingUnit}
- disabled={!this.state.constraintValidEditor || !this.state.validEditor || !this.state.validForm || !this.state.validConstraints || !this.state.validSpecification} data-testid="save-btn" />
- </div>
- <div className="p-col-1">
- <Button label="Cancel" className="act-btn-cancel" icon="pi pi-times" onClick={this.checkIsDirty} />
- </div>
+ <div className="footer-long-div p-breadcrumb" >
+ <FooterComponent onSubmit={this.saveSchedulingUnit}
+ enableDisableSave={!this.state.constraintValidEditor || !this.state.validEditor || !this.state.validForm || !this.state.validConstraints || !this.state.validSpecification} onCancel={this.checkIsDirty} />
</div>
<div className="p-grid" data-testid="confirm_dialog">
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/routes/SystemEvent/system.event.create.js b/SAS/TMSS/frontend/tmss_webapp/src/routes/SystemEvent/system.event.create.js
index e9e7bd50bffac7f7d1ee022b1017b48ac4e524db..6f045279cd493b51175152c2dd53db2f4a585542 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/routes/SystemEvent/system.event.create.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/routes/SystemEvent/system.event.create.js
@@ -24,6 +24,8 @@ import { Chips } from 'primereact/chips';
import { Link } from 'react-router-dom';
import { publish } from '../../App';
import { Checkbox } from 'primereact/checkbox';
+import ParserUtility from '../../utils/parser.utility';
+import FooterComponent from '../../components/FooterComponent';
/**
* Component to create a new System Event
@@ -104,6 +106,7 @@ export class SystemEventCreate extends Component {
this.resetAffectedtasks = this.resetAffectedtasks.bind(this);
this.synchFilter = this.synchFilter.bind(this);
this.tagSorting = this.tagSorting.bind(this);
+ this.setCreateAnother = this.setCreateAnother.bind(this);
}
async componentDidMount() {
@@ -673,6 +676,14 @@ export class SystemEventCreate extends Component {
this.setState({dialogFilter: filters});
}
+ /**
+ * Select/Unselect the create another check box
+ * @param {*} e
+ */
+ setCreateAnother(e) {
+ this.setState({'createAnother': e.target.checked})
+ }
+
render() {
if (this.state.redirect) {
return <Redirect to={{ pathname: this.state.redirect }}></Redirect>
@@ -704,7 +715,7 @@ export class SystemEventCreate extends Component {
{ this.state.isLoading ? <AppLoader /> :
<>
<div className="addsystemevent" style={{width: this.props.systemevent?'100% !important':'auto'}}>
- <div className="p-fluid" style={{marginTop: this.props.systemevent? '40px':'0px' }}>
+ <div className="p-fluid" style={{marginTop: this.props.systemevent? '40px':'0px', marginBottom: "1em" }}>
<div className="p-field p-grid">
<label htmlFor="systemEventName" className="col-lg-2 col-md-2 col-sm-12">Name <span style={{ color: 'red' }}>*</span></label>
<div className="col-lg-3 col-md-3 col-sm-12">
@@ -921,24 +932,11 @@ export class SystemEventCreate extends Component {
{!this.props.systemevent &&
<>
- <div className="p-col-1.5" style={{marginTop: '1em', marginLeft: '0.9em'}}>
- <Checkbox inputId="trigger" role="trigger"
- tooltip="Select checkbox to create another system event after saving this system event"
- tooltipOptions={this.tooltipOptions}
- checked={this.state.createAnother}
- onChange={e => this.setState({'createAnother': e.target.checked})}
- style={{marginRight: '0.25em',}}></Checkbox>
- <label style={{display: 'inline'}}> Create another? </label>
- </div>
- <div className="p-grid p-justify-start act-btn-grp">
- <div className="p-col-1" style={{marginLeft: '0.15em'}}>
- <Button label="Save" className="p-button-primary" icon="pi pi-check" onClick={this.saveSystemEvent}
- disabled={!this.state.validEditor || !this.state.validForm} data-testid="save-btn" />
- </div>
- <div className="p-col-1">
- <Button label="Cancel" className="act-btn-cancel" icon="pi pi-times" onClick={this.checkIsDirty} />
- </div>
- </div>
+ <div className="footer-long-div p-breadcrumb" >
+ <FooterComponent createAnotherCallBack={this.setCreateAnother} createAnother={this.state.createAnother}
+ tooltip="Select checkbox to create another system event after saving this system event"
+ onSubmit={this.saveSystemEvent} enableDisableSave={!this.state.validEditor || !this.state.validForm} onCancel={this.checkIsDirty} />
+ </div>
</>
}
</div>
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/routes/SystemEvent/system.event.edit.js b/SAS/TMSS/frontend/tmss_webapp/src/routes/SystemEvent/system.event.edit.js
index cb573fd73574befacf509b4dcb4f5a51aff775a4..b4c357ff3caaa3f8d82919a6c03908865a91f5fe 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/routes/SystemEvent/system.event.edit.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/routes/SystemEvent/system.event.edit.js
@@ -24,6 +24,7 @@ import UnitConverter from '../../utils/unit.converter';
import {AffectedTasksSelector} from './affeted.tasks.selector';
import { Chips } from 'primereact/chips';
import { Dialog } from 'primereact/dialog';
+import FooterComponent from '../../components/FooterComponent';
export class SystemEventEdit extends Component {
TASK_BLUEPRINT_EXPAND = 'scheduling_unit_blueprint,subtasks';
@@ -573,7 +574,7 @@ export class SystemEventEdit extends Component {
{ this.state.isLoading ? <AppLoader /> : this.state.systemevent &&
<React.Fragment>
<div>
- <div className="p-fluid">
+ <div className="p-fluid" style={{marginBottom: "1em"}}>
<div className="p-field p-grid">
<label htmlFor="systemeventname" className="col-lg-2 col-md-2 col-sm-12">Name <span style={{ color: 'red' }}>*</span></label>
<div className="col-lg-3 col-md-3 col-sm-12">
@@ -783,15 +784,9 @@ export class SystemEventEdit extends Component {
</fieldset>
</div>
</div>
-
- <div className="p-grid p-justify-start">
- <div className="p-col-1" style={{marginLeft: '0.9em'}}>
- <Button label="Save" className="p-button-primary" icon="pi pi-check" onClick={this.updateSystemEvent}
- disabled={!this.state.validEditor || !this.state.validForm} data-testid="save-btn" />
- </div>
- <div className="p-col-1">
- <Button label="Cancel" className="act-btn-cancel" icon="pi pi-times" onClick={this.checkIsDirty} />
- </div>
+ <div className="footer-long-div p-breadcrumb" >
+ <FooterComponent onSubmit={this.updateSystemEvent}
+ enableDisableSave={!this.state.validEditor || !this.state.validForm} onCancel={this.checkIsDirty} />
</div>
</div>
</React.Fragment>
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/routes/Task/edit.js b/SAS/TMSS/frontend/tmss_webapp/src/routes/Task/edit.js
index 3cf8db2a8103f535369809bf2792cffc33e47caf..58431b52623b0039ea5c1edeb73c152a76939be0 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/routes/Task/edit.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/routes/Task/edit.js
@@ -18,6 +18,7 @@ import PageHeader from '../../layout/components/PageHeader';
import AuthUtil from '../../utils/auth.util';
import AccessDenied from '../../layout/components/AccessDenied';
import UIConstants from '../../utils/ui.constants';
+import FooterComponent from '../../components/FooterComponent';
export class TaskEdit extends Component {
templateOutput = {}; // id: selectedTemplateId, output: values enetered in the editor form
@@ -361,23 +362,27 @@ export class TaskEdit extends Component {
</div>
</div>
- <div className="p-grid p-justify-start act-btn-grp">
- <div className="col-lg-4 col-md-4 col-sm-12">
- <label className={this.state.validDocument ? "info" : "error"}>
- {this.state.validation_message ? this.state.validation_message : ""}
- </label>
- </div>
+ <div className="p-grid p-justify-start act-btn-grp" style={{marginBottom: "2em"}}>
+ <div className="col-lg-4 col-md-4 col-sm-12">
+ <label className={this.state.validDocument ? "info" : "error"}>
+ {this.state.validation_message ? this.state.validation_message : ""}
+ </label>
+ </div>
</div>
- <div className="p-grid p-justify-start act-btn-grp">
- <div className="p-col-1">
- <Button label="Save" className="p-button-primary" icon="pi pi-check" onClick={this.saveTask}
- data-testid="save-btn" disabled={!this.state.validEditor || !this.state.validForm} />
- </div>
- <div className="p-col-1">
- <Button label="Cancel" className="act-btn-cancel" icon="pi pi-times" onClick={this.checkIsDirty} />
- </div>
- </div>
+ {/*<div className="p-grid p-justify-start act-btn-grp">
+ <div className="p-col-1">
+ <Button label="Save" className="p-button-primary" icon="pi pi-check" onClick={this.saveTask}
+ data-testid="save-btn" disabled={!this.state.validEditor || !this.state.validForm} />
+ </div>
+ <div className="p-col-1">
+ <Button label="Cancel" className="act-btn-cancel" icon="pi pi-times" onClick={this.checkIsDirty} />
+ </div>
+ </div>*/}
+ <div className="footer-long-div p-breadcrumb" >
+ <FooterComponent onSubmit={this.saveTask}
+ enableDisableSave={!this.state.validEditor || !this.state.validForm} onCancel={this.checkIsDirty} />
+ </div>
<div className="p-grid" data-testid="confirm_dialog">
<CustomDialog type="confirmation" visible={this.state.showDialog} width="40vw"
header={'Edit Task'} message={'Do you want to discard your changes? Your changes to the Task will not be saved.'}