diff --git a/SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_utils.scss b/SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_utils.scss
index 2a37da7437e2d182dea31fb4cc0da9ea3cb67c29..7e9a5a18fc310b48a2932387f6544021cd10012f 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_utils.scss
+++ b/SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_utils.scss
@@ -36,3 +36,6 @@ h2 {
.p-g {
-ms-flex-wrap: wrap;
}
+.p-inputtext {
+ border-color: #a6a6a6 !important;
+}
\ No newline at end of file
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/reservation.create.js b/SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/reservation.create.js
index d2dd681743dceb1dbe3a6944b81e63ebf508c291..0fa2128e007f127e5b823b03ff45e3b5895bfdd8 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/reservation.create.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/reservation.create.js
@@ -1,6 +1,5 @@
import React, {Component} from 'react';
import { Redirect } from 'react-router-dom';
-import _ from 'lodash';
import {Growl} from 'primereact/components/growl/Growl';
import AppLoader from '../../layout/components/AppLoader';
@@ -29,9 +28,7 @@ export class ReservationCreate extends Component {
redirect: null,
paramsSchema: null, // JSON Schema to be generated from strategy template to pass to JSON editor
dialog: { header: '', detail: ''}, // Dialog properties
- errors: {
- name: '',
- },
+
touched: {
name: '',
},
@@ -55,7 +52,7 @@ export class ReservationCreate extends Component {
this.formRules = {
name: {required: true, message: "Name can not be empty"},
description: {required: true, message: "Description can not be empty"},
- project: {required: true, message: "Project can not be empty"},
+ // project: {required: true, message: "Project can not be empty"},
start_time: {required: true, message: "From Date can not be empty"},
};
this.tooltipOptions = UIConstants.tooltipOptions;
@@ -180,9 +177,7 @@ export class ReservationCreate extends Component {
validFields[fieldName] = true;
}
}
- } else {
-
- }
+ }
} else {
errors = {};
validFields = {};
@@ -218,7 +213,7 @@ export class ReservationCreate extends Component {
let reservation = this.state.reservation;
let project = this.projects.find(project => project.name === reservation.project);
reservation['duration'] = ( reservation['duration'] === ''? null: UnitService.getHHmmssToSecs(reservation['duration']));
- reservation['project']= project.url;
+ reservation['project']= project ? project.url: '';
reservation['specifications_template']= this.reservationTemplates[0].url;
reservation['specifications_doc']= this.paramsOutput;
reservation = ReservationService.saveReservation(reservation);
@@ -354,7 +349,7 @@ export class ReservationCreate extends Component {
</div>
<div className="p-field p-grid">
- <label htmlFor="project" className="col-lg-2 col-md-2 col-sm-12">Project <span style={{color:'red'}}>*</span></label>
+ <label htmlFor="project" className="col-lg-2 col-md-2 col-sm-12">Project</label>
<div className="col-lg-3 col-md-3 col-sm-12" data-testid="project" >
<Dropdown inputId="project" optionLabel="name" optionValue="name"
tooltip="Project" tooltipOptions={this.tooltipOptions}
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/view.js b/SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/view.js
index 54e06cba83c4febac4b20941a895ed53b5a5abee..78f16a7deae9399dbb3f8c4968c2c56ff7417161 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/view.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/view.js
@@ -20,6 +20,7 @@ import SchedulingUnitSummary from '../Scheduling/summary';
import { Dropdown } from 'primereact/dropdown';
import { OverlayPanel } from 'primereact/overlaypanel';
import { RadioButton } from 'primereact/radiobutton';
+import { TieredMenu } from 'primereact/tieredmenu';
// Color constant for SU status
const SU_STATUS_COLORS = { "ERROR": "FF0000", "CANCELLED": "#00FF00", "DEFINED": "#00BCD4",
@@ -67,7 +68,12 @@ export class TimelineView extends Component {
this.mainStationGroups = {}; // To group the stations under CS,RS,IS to show the count in Popover
this.reservations = [];
this.reservationReasons = [];
-
+ this.optionsMenu = React.createRef();
+ this.menuOptions = [ {label:'Add Reservation', icon: "fa fa-", command: () => {this.selectOptionMenu('Add Reservation')}},
+ ];
+
+ this.showOptionMenu = this.showOptionMenu.bind(this);
+ this.selectOptionMenu = this.selectOptionMenu.bind(this);
this.onItemClick = this.onItemClick.bind(this);
this.onItemMouseOver = this.onItemMouseOver.bind(this);
this.onItemMouseOut = this.onItemMouseOut.bind(this);
@@ -604,6 +610,21 @@ export class TimelineView extends Component {
this.setState({stationView: e.value});
}
+ showOptionMenu(event) {
+ this.optionsMenu.toggle(event);
+ }
+
+ selectOptionMenu(menuName) {
+ switch(menuName) {
+ case 'Add Reservation': {
+ this.setState({redirect: `/su/timelineview/reservation/create`});
+ break;
+ }
+ default: {
+ break;
+ }
+ }
+ }
render() {
if (this.state.redirect) {
return <Redirect to={ {pathname: this.state.redirect} }></Redirect>
@@ -619,9 +640,12 @@ export class TimelineView extends Component {
let mouseOverItem = this.state.mouseOverItem;
return (
<React.Fragment>
+ <TieredMenu className="app-header-menu" model={this.menuOptions} popup ref={el => this.optionsMenu = el} />
<PageHeader location={this.props.location} title={'Scheduling Units - Timeline View'}
actions={[
- {icon: 'fa-plus-square',title:'Add Reservation', props : { pathname: `/su/timelineview/reservation/create`}},
+ {icon:'fa-bars',title: '', type:'button',
+ actOn:'mouseOver', props : { callback: this.showOptionMenu},
+ },
{icon: 'fa-calendar-alt',title:'Week View', props : { pathname: `/su/timelineview/week`}},
]}/>
{ this.state.isLoading ? <AppLoader /> :
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/week.view.js b/SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/week.view.js
index 481bd5453e307a9e6aaef5eff6474e0f97730043..8cbd0d9aab0d69adbec3ec49373919ba5628eee1 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/week.view.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/week.view.js
@@ -19,6 +19,7 @@ import UnitConverter from '../../utils/unit.converter';
import SchedulingUnitSummary from '../Scheduling/summary';
import UIConstants from '../../utils/ui.constants';
import { OverlayPanel } from 'primereact/overlaypanel';
+import { TieredMenu } from 'primereact/tieredmenu';
// Color constant for status
const STATUS_COLORS = { "ERROR": "FF0000", "CANCELLED": "#00FF00", "DEFINED": "#00BCD4",
@@ -50,7 +51,12 @@ export class WeekTimelineView extends Component {
}
this.STATUS_BEFORE_SCHEDULED = ['defining', 'defined', 'schedulable']; // Statuses before scheduled to get station_group
this.mainStationGroups = {};
-
+ this.optionsMenu = React.createRef();
+ this.menuOptions = [ {label:'Add Reservation', icon: "fa fa-", command: () => {this.selectOptionMenu('Add Reservation')}},
+ ];
+
+ this.showOptionMenu = this.showOptionMenu.bind(this);
+ this.selectOptionMenu = this.selectOptionMenu.bind(this);
this.onItemClick = this.onItemClick.bind(this);
this.closeSUDets = this.closeSUDets.bind(this);
this.onItemMouseOver = this.onItemMouseOver.bind(this);
@@ -409,6 +415,21 @@ export class WeekTimelineView extends Component {
this.setState({selectedProject: project});
}
+ showOptionMenu(event) {
+ this.optionsMenu.toggle(event);
+ }
+
+ selectOptionMenu(menuName) {
+ switch(menuName) {
+ case 'Add Reservation': {
+ this.setState({redirect: `/su/timelineview/reservation/create`});
+ break;
+ }
+ default: {
+ break;
+ }
+ }
+ }
render() {
if (this.state.redirect) {
return <Redirect to={ {pathname: this.state.redirect} }></Redirect>
@@ -423,9 +444,12 @@ export class WeekTimelineView extends Component {
const mouseOverItem = this.state.mouseOverItem;
return (
<React.Fragment>
+ <TieredMenu className="app-header-menu" model={this.menuOptions} popup ref={el => this.optionsMenu = el} />
<PageHeader location={this.props.location} title={'Scheduling Units - Week View'}
actions={[
- {icon: 'fa-plus-square',title:'Add Reservation', props : { pathname: `/su/timelineview/reservation/create`}},
+ {icon:'fa-bars',title: '', type:'button',
+ actOn:'mouseOver', props : { callback: this.showOptionMenu},
+ },
{icon: 'fa-clock',title:'View Timeline', props : { pathname: `/su/timelineview`}}]}/>
{ this.state.isLoading ? <AppLoader /> :
<>