TMSS-472 - update code for review comment

TMSS-472 - update code for review comment

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

SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/reservation.create.js

 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}

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 /> :

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 /> :
                     <>