Skip to content
Snippets Groups Projects
Commit 8b131255 authored by Ramesh Kumar's avatar Ramesh Kumar
Browse files

TMSS-243: Project Create and edit forms are made compact with toottips for the fields

parent fb23135d
Branches
Tags
1 merge request!191Resolve TMSS-243
Show whitespace changes
Inline Side-by-side
Showing
with 90 additions and 36 deletions
SAS/TMSS/frontend/tmss_webapp/src/App.css
+ 18
− 0
View file @ 8b131255
...@@ -45,6 +45,10 @@ h3, .h3 { ...@@ -45,6 +45,10 @@ h3, .h3 {
font-size: 1.25rem; font-size: 1.25rem;
} }
h5, .h5 {
font-size: 15px !important;
}
a{ a{
margin-bottom: 10px; margin-bottom: 10px;
} }
...@@ -86,6 +90,20 @@ p { ...@@ -86,6 +90,20 @@ p {
margin-bottom: 5px; margin-bottom: 5px;
} }
.p-field {
margin-bottom: 0.5rem;
}
.p-inputtext {
padding-top: 0.25em !important;
padding-bottom: 0.25em !important;
padding-left: 0.25em !important;
}
.act-btn-grp {
margin-top: 20px;
}
.task-list { .task-list {
padding-inline-start: 0px; padding-inline-start: 0px;
} }
......
SAS/TMSS/frontend/tmss_webapp/src/components/ViewTable.js
+ 2
− 0
View file @ 8b131255
...@@ -199,6 +199,8 @@ function Table({ columns, data, defaultheader, optionalheader }) { ...@@ -199,6 +199,8 @@ function Table({ columns, data, defaultheader, optionalheader }) {
{row.cells.map(cell => { {row.cells.map(cell => {
if(cell.column.id !== 'actionpath') if(cell.column.id !== 'actionpath')
return <td {...cell.getCellProps()} >{cell.render('Cell')}</td> return <td {...cell.getCellProps()} >{cell.render('Cell')}</td>
else
return "";
})} })}
</tr> </tr>
) )
......
SAS/TMSS/frontend/tmss_webapp/src/routes/Project/ResourceInputList.js
+ 2
− 1
View file @ 8b131255
...@@ -36,7 +36,7 @@ export class ResourceInputList extends Component { ...@@ -36,7 +36,7 @@ export class ResourceInputList extends Component {
<> <>
{this.props.list.length>0 && this.props.list.map((item, index) => ( {this.props.list.length>0 && this.props.list.map((item, index) => (
<React.Fragment key={index+10}> <React.Fragment key={index+10}>
<label key={'label1-'+ index} className="col-lg-3 col-md-3 col-sm-12">{item.name}</label> <label key={'label1-'+ index} className="col-lg-2 col-md-2 col-sm-12">{item.name}</label>
<div key={'div1-'+ index} className="col-lg-3 col-md-3 col-sm-12"> <div key={'div1-'+ index} className="col-lg-3 col-md-3 col-sm-12">
<InputNumber key={'item1-'+ index} id={'item1-'+ index} name={'item1-'+ index} <InputNumber key={'item1-'+ index} id={'item1-'+ index} name={'item1-'+ index}
suffix={` ${this.props.unitMap[item.quantity_value]?this.props.unitMap[item.quantity_value].display:''}`} suffix={` ${this.props.unitMap[item.quantity_value]?this.props.unitMap[item.quantity_value].display:''}`}
...@@ -49,6 +49,7 @@ export class ResourceInputList extends Component { ...@@ -49,6 +49,7 @@ export class ResourceInputList extends Component {
<button className="p-link" data-testid={`${item.name}-btn`} onClick={(e) => this.removeInput(item.name)}> <button className="p-link" data-testid={`${item.name}-btn`} onClick={(e) => this.removeInput(item.name)}>
<i className="fa fa-trash pi-error"></i></button> <i className="fa fa-trash pi-error"></i></button>
</div> </div>
<div className="col-lg-1 col-md-1 col-sm-12"></div>
</React.Fragment> </React.Fragment>
))} ))}
</> </>
......
SAS/TMSS/frontend/tmss_webapp/src/routes/Project/create.js
+ 22
− 15
View file @ 8b131255
...@@ -18,6 +18,7 @@ import AppLoader from '../../layout/components/AppLoader'; ...@@ -18,6 +18,7 @@ import AppLoader from '../../layout/components/AppLoader';
import CycleService from '../../services/cycle.service'; import CycleService from '../../services/cycle.service';
import ProjectService from '../../services/project.service'; import ProjectService from '../../services/project.service';
import UnitConverter from '../../utils/unit.converter'; import UnitConverter from '../../utils/unit.converter';
import UIConstants from '../../utils/ui.constants';
/** /**
* Component to create a new Project * Component to create a new Project
...@@ -61,7 +62,7 @@ export class ProjectCreate extends Component { ...@@ -61,7 +62,7 @@ export class ProjectCreate extends Component {
this.projectResourceDefaults = {}; // Default values for default resources this.projectResourceDefaults = {}; // Default values for default resources
this.resourceUnitMap = UnitConverter.resourceUnitMap; // Resource unit conversion factor and constraints this.resourceUnitMap = UnitConverter.resourceUnitMap; // Resource unit conversion factor and constraints
this.cycleOptionTemplate = this.cycleOptionTemplate.bind(this); // Template for cycle multiselect this.cycleOptionTemplate = this.cycleOptionTemplate.bind(this); // Template for cycle multiselect
this.tooltipOptions = {position: 'left', event: 'hover', className:"p-tooltip-custom"}; this.tooltipOptions = UIConstants.tooltipOptions;
this.setProjectQuotaDefaults = this.setProjectQuotaDefaults.bind(this); this.setProjectQuotaDefaults = this.setProjectQuotaDefaults.bind(this);
this.setProjectParams = this.setProjectParams.bind(this); this.setProjectParams = this.setProjectParams.bind(this);
...@@ -349,13 +350,13 @@ export class ProjectCreate extends Component { ...@@ -349,13 +350,13 @@ export class ProjectCreate extends Component {
<div className="p-fluid"> <div className="p-fluid">
<div className="p-field p-grid" style={{display: 'none'}}> <div className="p-field p-grid" style={{display: 'none'}}>
<label htmlFor="projectId" className="col-lg-2 col-md-2 col-sm-12">URL </label> <label htmlFor="projectId" className="col-lg-2 col-md-2 col-sm-12">URL </label>
<div className="col-lg-4 col-md-4 col-sm-12"> <div className="col-lg-3 col-md-3 col-sm-12">
<input id="projectId" data-testid="projectId" value={this.state.project.url} /> <input id="projectId" data-testid="projectId" value={this.state.project.url} />
</div> </div>
</div> </div>
<div className="p-field p-grid"> <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> <label htmlFor="projectName" className="col-lg-2 col-md-2 col-sm-12">Name <span style={{color:'red'}}>*</span></label>
<div className="col-lg-4 col-md-4 col-sm-12"> <div className="col-lg-3 col-md-3 col-sm-12">
<InputText className={this.state.errors.name ?'input-error':''} id="projectName" data-testid="name" <InputText className={this.state.errors.name ?'input-error':''} id="projectName" data-testid="name"
tooltip="Enter name of the project" tooltipOptions={this.tooltipOptions} maxLength="128" tooltip="Enter name of the project" tooltipOptions={this.tooltipOptions} maxLength="128"
value={this.state.project.name} value={this.state.project.name}
...@@ -365,8 +366,9 @@ export class ProjectCreate extends Component { ...@@ -365,8 +366,9 @@ export class ProjectCreate extends Component {
{this.state.errors.name ? this.state.errors.name : "Max 128 characters"} {this.state.errors.name ? this.state.errors.name : "Max 128 characters"}
</label> </label>
</div> </div>
<div className="col-lg-1 col-md-1 col-sm-12"></div>
<label htmlFor="description" className="col-lg-2 col-md-2 col-sm-12">Description <span style={{color:'red'}}>*</span></label> <label htmlFor="description" className="col-lg-2 col-md-2 col-sm-12">Description <span style={{color:'red'}}>*</span></label>
<div className="col-lg-4 col-md-4 col-sm-12"> <div className="col-lg-3 col-md-3 col-sm-12">
<InputTextarea className={this.state.errors.description ?'input-error':''} rows={3} cols={30} <InputTextarea className={this.state.errors.description ?'input-error':''} rows={3} cols={30}
tooltip="Short description of the project" tooltipOptions={this.tooltipOptions} maxLength="128" tooltip="Short description of the project" tooltipOptions={this.tooltipOptions} maxLength="128"
data-testid="description" value={this.state.project.description} data-testid="description" value={this.state.project.description}
...@@ -379,9 +381,9 @@ export class ProjectCreate extends Component { ...@@ -379,9 +381,9 @@ export class ProjectCreate extends Component {
</div> </div>
<div className="p-field p-grid"> <div className="p-field p-grid">
<label htmlFor="triggerPriority" className="col-lg-2 col-md-2 col-sm-12">Trigger Priority </label> <label htmlFor="triggerPriority" className="col-lg-2 col-md-2 col-sm-12">Trigger Priority </label>
<div className="col-lg-4 col-md-4 col-sm-12" data-testid="trig_prio"> <div className="col-lg-3 col-md-3 col-sm-12" data-testid="trig_prio">
<InputNumber inputId="trig_prio" name="trig_prio" value={this.state.project.trigger_priority} <InputNumber inputId="trig_prio" name="trig_prio" value={this.state.project.trigger_priority}
tooltip="Priority of this project w.r.t. triggers" tooltipOptions={this.tooltipOptions} tooltip="Priority of this project with respect to triggers" tooltipOptions={this.tooltipOptions}
mode="decimal" showButtons min={0} max={1001} step={10} useGrouping={false} mode="decimal" showButtons min={0} max={1001} step={10} useGrouping={false}
onChange={(e) => this.setProjectParams('trigger_priority', e.value)} onChange={(e) => this.setProjectParams('trigger_priority', e.value)}
onBlur={(e) => this.setProjectParams('trigger_priority', e.target.value, 'NUMBER')} /> onBlur={(e) => this.setProjectParams('trigger_priority', e.target.value, 'NUMBER')} />
...@@ -390,8 +392,9 @@ export class ProjectCreate extends Component { ...@@ -390,8 +392,9 @@ export class ProjectCreate extends Component {
{this.state.errors.trigger_priority ? this.state.errors.trigger_priority : ""} {this.state.errors.trigger_priority ? this.state.errors.trigger_priority : ""}
</label> </label>
</div> </div>
<div className="col-lg-1 col-md-1 col-sm-12"></div>
<label htmlFor="trigger" className="col-lg-2 col-md-2 col-sm-12">Allows Trigger Submission</label> <label htmlFor="trigger" className="col-lg-2 col-md-2 col-sm-12">Allows Trigger Submission</label>
<div className="col-lg-4 col-md-4 col-sm-12" data-testid="trigger"> <div className="col-lg-3 col-md-3 col-sm-12" data-testid="trigger">
<Checkbox inputId="trigger" role="trigger" <Checkbox inputId="trigger" role="trigger"
tooltip="Is this project allowed to supply observation requests on the fly, possibly interrupting currently running observations (responsive telescope)?" tooltip="Is this project allowed to supply observation requests on the fly, possibly interrupting currently running observations (responsive telescope)?"
tooltipOptions={this.tooltipOptions} tooltipOptions={this.tooltipOptions}
...@@ -400,7 +403,7 @@ export class ProjectCreate extends Component { ...@@ -400,7 +403,7 @@ export class ProjectCreate extends Component {
</div> </div>
<div className="p-field p-grid"> <div className="p-field p-grid">
<label htmlFor="projCat" className="col-lg-2 col-md-2 col-sm-12">Project Category </label> <label htmlFor="projCat" className="col-lg-2 col-md-2 col-sm-12">Project Category </label>
<div className="col-lg-4 col-md-4 col-sm-12" data-testid="projCat" > <div className="col-lg-3 col-md-3 col-sm-12" data-testid="projCat" >
<Dropdown inputId="projCat" optionLabel="value" optionValue="url" <Dropdown inputId="projCat" optionLabel="value" optionValue="url"
tooltip="Project Category" tooltipOptions={this.tooltipOptions} tooltip="Project Category" tooltipOptions={this.tooltipOptions}
value={this.state.project.project_category} value={this.state.project.project_category}
...@@ -408,8 +411,9 @@ export class ProjectCreate extends Component { ...@@ -408,8 +411,9 @@ export class ProjectCreate extends Component {
onChange={(e) => {this.setProjectParams('project_category', e.value)}} onChange={(e) => {this.setProjectParams('project_category', e.value)}}
placeholder="Select Project Category" /> placeholder="Select Project Category" />
</div> </div>
<div className="col-lg-1 col-md-1 col-sm-12"></div>
<label htmlFor="periodCategory" className="col-lg-2 col-md-2 col-sm-12">Period Category</label> <label htmlFor="periodCategory" className="col-lg-2 col-md-2 col-sm-12">Period Category</label>
<div className="col-lg-4 col-md-4 col-sm-12"> <div className="col-lg-3 col-md-3 col-sm-12">
<Dropdown data-testid="period-cat" id="period-cat" optionLabel="value" optionValue="url" <Dropdown data-testid="period-cat" id="period-cat" optionLabel="value" optionValue="url"
tooltip="Period Category" tooltipOptions={this.tooltipOptions} tooltip="Period Category" tooltipOptions={this.tooltipOptions}
value={this.state.project.period_category} value={this.state.project.period_category}
...@@ -420,7 +424,7 @@ export class ProjectCreate extends Component { ...@@ -420,7 +424,7 @@ export class ProjectCreate extends Component {
</div> </div>
<div className="p-field p-grid"> <div className="p-field p-grid">
<label htmlFor="triggerPriority" className="col-lg-2 col-md-2 col-sm-12">Cycle(s)</label> <label htmlFor="triggerPriority" className="col-lg-2 col-md-2 col-sm-12">Cycle(s)</label>
<div className="col-lg-4 col-md-4 col-sm-12"> <div className="col-lg-3 col-md-3 col-sm-12">
<MultiSelect data-testid="cycle" id="cycle" optionLabel="name" optionValue="url" filter={true} <MultiSelect data-testid="cycle" id="cycle" optionLabel="name" optionValue="url" filter={true}
tooltip="Cycle(s) to which this project belongs" tooltipOptions={this.tooltipOptions} tooltip="Cycle(s) to which this project belongs" tooltipOptions={this.tooltipOptions}
value={this.state.project.cycles} value={this.state.project.cycles}
...@@ -429,10 +433,11 @@ export class ProjectCreate extends Component { ...@@ -429,10 +433,11 @@ export class ProjectCreate extends Component {
/> />
</div> </div>
<div className="col-lg-1 col-md-1 col-sm-12"></div>
<label htmlFor="projRank" className="col-lg-2 col-md-2 col-sm-12">Project Rank <span style={{color:'red'}}>*</span></label> <label htmlFor="projRank" className="col-lg-2 col-md-2 col-sm-12">Project Rank <span style={{color:'red'}}>*</span></label>
<div className="col-lg-4 col-md-4 col-sm-12" data-testid="proj-rank" > <div className="col-lg-3 col-md-3 col-sm-12" data-testid="proj-rank" >
<InputNumber inputId="proj-rank" name="rank" data-testid="rank" value={this.state.project.priority_rank} <InputNumber inputId="proj-rank" name="rank" data-testid="rank" value={this.state.project.priority_rank}
tooltip="Priority of this project w.r.t. other projects. Projects can interrupt observations of lower-priority projects." tooltip="Priority of this project with respect to other projects. Projects can interrupt observations of lower-priority projects."
tooltipOptions={this.tooltipOptions} tooltipOptions={this.tooltipOptions}
mode="decimal" showButtons min={0} max={100} mode="decimal" showButtons min={0} max={100}
onChange={(e) => this.setProjectParams('priority_rank', e.value)} onChange={(e) => this.setProjectParams('priority_rank', e.value)}
...@@ -446,18 +451,20 @@ export class ProjectCreate extends Component { ...@@ -446,18 +451,20 @@ export class ProjectCreate extends Component {
{this.defaultResourcesEnabled && this.state.resourceList && {this.defaultResourcesEnabled && this.state.resourceList &&
<div className="p-fluid"> <div className="p-fluid">
<div className="p-field p-grid"> <div className="p-field p-grid">
<div className="col-lg-3 col-md-3 col-sm-112"> <div className="col-lg-2 col-md-2 col-sm-112">
<h5 data-testid="resource_alloc">Resource Allocations</h5> <h5 data-testid="resource_alloc">Resource Allocations</h5>
</div> </div>
<div className="col-lg-3 col-md-3 col-sm-10"> <div className="col-lg-3 col-md-3 col-sm-10">
<Dropdown optionLabel="name" optionValue="name" <Dropdown optionLabel="name" optionValue="name"
tooltip="Resources to be allotted for the project"
tooltipOptions={this.tooltipOptions}
value={this.state.newResource} value={this.state.newResource}
options={this.state.resourceList} options={this.state.resourceList}
onChange={(e) => {this.setState({'newResource': e.value})}} onChange={(e) => {this.setState({'newResource': e.value})}}
placeholder="Add Resources" /> placeholder="Add Resources" />
</div> </div>
<div className="col-lg-2 col-md-2 col-sm-2"> <div className="col-lg-2 col-md-2 col-sm-2">
<Button label="" className="p-button-primary" icon="pi pi-plus" onClick={this.addNewResource} data-testid="add_res_btn" /> <Button label="" className="p-button-primary" icon="pi pi-plus" onClick={this.addNewResource} disabled={!this.state.newResource} data-testid="add_res_btn" />
</div> </div>
</div> </div>
<div className="p-field p-grid resource-input-grid"> <div className="p-field p-grid resource-input-grid">
...@@ -469,7 +476,7 @@ export class ProjectCreate extends Component { ...@@ -469,7 +476,7 @@ export class ProjectCreate extends Component {
} }
</div> </div>
</div> </div>
<div className="p-grid p-justify-start"> <div className="p-grid p-justify-start act-btn-grp">
<div className="col-lg-1 col-md-2 col-sm-6"> <div className="col-lg-1 col-md-2 col-sm-6">
<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} /> <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>
......
SAS/TMSS/frontend/tmss_webapp/src/routes/Project/edit.js
+ 39
− 19
View file @ 8b131255
...@@ -18,6 +18,7 @@ import AppLoader from '../../layout/components/AppLoader'; ...@@ -18,6 +18,7 @@ import AppLoader from '../../layout/components/AppLoader';
import CycleService from '../../services/cycle.service'; import CycleService from '../../services/cycle.service';
import ProjectService from '../../services/project.service'; import ProjectService from '../../services/project.service';
import UnitConverter from '../../utils/unit.converter'; import UnitConverter from '../../utils/unit.converter';
import UIConstants from '../../utils/ui.constants';
export class ProjectEdit extends Component { export class ProjectEdit extends Component {
constructor(props) { constructor(props) {
...@@ -57,6 +58,7 @@ export class ProjectEdit extends Component { ...@@ -57,6 +58,7 @@ export class ProjectEdit extends Component {
{name:'LOFAR Support hours'} ]; {name:'LOFAR Support hours'} ];
this.projectResourceDefaults = {}; this.projectResourceDefaults = {};
this.resourceUnitMap = UnitConverter.resourceUnitMap; this.resourceUnitMap = UnitConverter.resourceUnitMap;
this.tooltipOptions = UIConstants.tooltipOptions;
this.getProjectDetails = this.getProjectDetails.bind(this); this.getProjectDetails = this.getProjectDetails.bind(this);
this.cycleOptionTemplate = this.cycleOptionTemplate.bind(this); this.cycleOptionTemplate = this.cycleOptionTemplate.bind(this);
...@@ -156,8 +158,9 @@ export class ProjectEdit extends Component { ...@@ -156,8 +158,9 @@ export class ProjectEdit extends Component {
if (this.state.newResource) { if (this.state.newResource) {
let resourceList = this.state.resourceList; let resourceList = this.state.resourceList;
const newResource = _.remove(resourceList, {'name': this.state.newResource}); const newResource = _.remove(resourceList, {'name': this.state.newResource});
let resources = this.state.resources; let resources = this.state.resources?this.state.resources:[];
resources.push(newResource[0]); resources.push(newResource[0]);
console.log(resources);
this.setState({resources: resources, resourceList: resourceList, newResource: null}); this.setState({resources: resources, resourceList: resourceList, newResource: null});
} }
} }
...@@ -372,30 +375,34 @@ export class ProjectEdit extends Component { ...@@ -372,30 +375,34 @@ export class ProjectEdit extends Component {
<div className="p-fluid"> <div className="p-fluid">
<div className="p-field p-grid"> <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> <label htmlFor="projectName" className="col-lg-2 col-md-2 col-sm-12">Name <span style={{color:'red'}}>*</span></label>
<div className="col-lg-4 col-md-4 col-sm-12"> <div className="col-lg-3 col-md-3 col-sm-12">
<InputText className={this.state.errors.name ?'input-error':''} id="projectName" data-testid="name" <InputText className={this.state.errors.name ?'input-error':''} id="projectName" data-testid="name"
tooltip="Enter name of the project" tooltipOptions={this.tooltipOptions} maxLength="128"
value={this.state.project.name} value={this.state.project.name}
onChange={(e) => this.setProjectParams('name', e.target.value)} onChange={(e) => this.setProjectParams('name', e.target.value)}
onBlur={(e) => this.setProjectParams('name', e.target.value)}/> onBlur={(e) => this.setProjectParams('name', e.target.value)}/>
<label className="error"> <label className={this.state.errors.name?"error":"info"}>
{this.state.errors.name ? this.state.errors.name : ""} {this.state.errors.name ? this.state.errors.name : "Max 128 characters"}
</label> </label>
</div> </div>
<div className="col-lg-1 col-md-1 col-sm-12"></div>
<label htmlFor="description" className="col-lg-2 col-md-2 col-sm-12">Description <span style={{color:'red'}}>*</span></label> <label htmlFor="description" className="col-lg-2 col-md-2 col-sm-12">Description <span style={{color:'red'}}>*</span></label>
<div className="col-lg-4 col-md-4 col-sm-12"> <div className="col-lg-3 col-md-3 col-sm-12">
<InputTextarea className={this.state.errors.description ?'input-error':''} rows={3} cols={30} <InputTextarea className={this.state.errors.description ?'input-error':''} rows={3} cols={30}
tooltip="Short description of the project" tooltipOptions={this.tooltipOptions} maxLength="128"
data-testid="description" value={this.state.project.description} data-testid="description" value={this.state.project.description}
onChange={(e) => this.setProjectParams('description', e.target.value)} onChange={(e) => this.setProjectParams('description', e.target.value)}
onBlur={(e) => this.setProjectParams('description', e.target.value)}/> onBlur={(e) => this.setProjectParams('description', e.target.value)}/>
<label className="error"> <label className={this.state.errors.description ?"error":"info"}>
{this.state.errors.description ? this.state.errors.description : ""} {this.state.errors.description ? this.state.errors.description : "Max 255 characters"}
</label> </label>
</div> </div>
</div> </div>
<div className="p-field p-grid"> <div className="p-field p-grid">
<label htmlFor="triggerPriority" className="col-lg-2 col-md-2 col-sm-12">Trigger Priority </label> <label htmlFor="triggerPriority" className="col-lg-2 col-md-2 col-sm-12">Trigger Priority </label>
<div className="col-lg-4 col-md-4 col-sm-12"> <div className="col-lg-3 col-md-3 col-sm-12">
<InputNumber inputId="trig_prio" name="trig_prio" className={this.state.errors.name ?'input-error':''} <InputNumber inputId="trig_prio" name="trig_prio" className={this.state.errors.name ?'input-error':''}
tooltip="Priority of this project with respect to triggers" tooltipOptions={this.tooltipOptions}
value={this.state.project.trigger_priority} showButtons value={this.state.project.trigger_priority} showButtons
min={0} max={1001} step={10} useGrouping={false} min={0} max={1001} step={10} useGrouping={false}
onChange={(e) => this.setProjectParams('trigger_priority', e.value)} onChange={(e) => this.setProjectParams('trigger_priority', e.value)}
...@@ -404,23 +411,30 @@ export class ProjectEdit extends Component { ...@@ -404,23 +411,30 @@ export class ProjectEdit extends Component {
{this.state.errors.trigger_priority ? this.state.errors.trigger_priority : ""} {this.state.errors.trigger_priority ? this.state.errors.trigger_priority : ""}
</label> </label>
</div> </div>
<div className="col-lg-1 col-md-1 col-sm-12"></div>
<label htmlFor="trigger" className="col-lg-2 col-md-2 col-sm-12">Allows Trigger Submission</label> <label htmlFor="trigger" className="col-lg-2 col-md-2 col-sm-12">Allows Trigger Submission</label>
<div className="col-lg-4 col-md-4 col-sm-12"> <div className="col-lg-3 col-md-3 col-sm-12">
<Checkbox inputId="trigger" role="trigger" checked={this.state.project.can_trigger} onChange={e => this.setProjectParams('can_trigger', e.target.checked)}></Checkbox> <Checkbox inputId="trigger" role="trigger"
tooltip="Is this project allowed to supply observation requests on the fly, possibly interrupting currently running observations (responsive telescope)?"
tooltipOptions={this.tooltipOptions}
checked={this.state.project.can_trigger} onChange={e => this.setProjectParams('can_trigger', e.target.checked)}></Checkbox>
</div> </div>
</div> </div>
<div className="p-field p-grid"> <div className="p-field p-grid">
<label htmlFor="projCategory" className="col-lg-2 col-md-2 col-sm-12">Project Category </label> <label htmlFor="projCategory" className="col-lg-2 col-md-2 col-sm-12">Project Category </label>
<div className="col-lg-4 col-md-4 col-sm-12"> <div className="col-lg-3 col-md-3 col-sm-12">
<Dropdown inputId="projCat" optionLabel="value" optionValue="url" <Dropdown inputId="projCat" optionLabel="value" optionValue="url"
tooltip="Project Category" tooltipOptions={this.tooltipOptions}
value={this.state.project.project_category} value={this.state.project.project_category}
options={this.state.projectCategories} options={this.state.projectCategories}
onChange={(e) => {this.setProjectParams('project_category', e.value)}} onChange={(e) => {this.setProjectParams('project_category', e.value)}}
placeholder="Select Project Category" /> placeholder="Select Project Category" />
</div> </div>
<div className="col-lg-1 col-md-1 col-sm-12"></div>
<label htmlFor="periodCategory" className="col-lg-2 col-md-2 col-sm-12">Period Category</label> <label htmlFor="periodCategory" className="col-lg-2 col-md-2 col-sm-12">Period Category</label>
<div className="col-lg-4 col-md-4 col-sm-12"> <div className="col-lg-3 col-md-3 col-sm-12">
<Dropdown data-testid="period-cat" id="period-cat" optionLabel="value" optionValue="url" <Dropdown data-testid="period-cat" id="period-cat" optionLabel="value" optionValue="url"
tooltip="Period Category" tooltipOptions={this.tooltipOptions}
value={this.state.project.period_category} value={this.state.project.period_category}
options={this.state.periodCategories} options={this.state.periodCategories}
onChange={(e) => {this.setProjectParams('period_category',e.value)}} onChange={(e) => {this.setProjectParams('period_category',e.value)}}
...@@ -429,17 +443,21 @@ export class ProjectEdit extends Component { ...@@ -429,17 +443,21 @@ export class ProjectEdit extends Component {
</div> </div>
<div className="p-field p-grid"> <div className="p-field p-grid">
<label htmlFor="triggerPriority" className="col-lg-2 col-md-2 col-sm-12">Cycle(s)</label> <label htmlFor="triggerPriority" className="col-lg-2 col-md-2 col-sm-12">Cycle(s)</label>
<div className="col-lg-4 col-md-4 col-sm-12"> <div className="col-lg-3 col-md-3 col-sm-12">
<MultiSelect data-testid="cycle" id="cycle" optionLabel="name" optionValue="url" filter={true} <MultiSelect data-testid="cycle" id="cycle" optionLabel="name" optionValue="url" filter={true}
tooltip="Cycle(s) to which this project belongs" tooltipOptions={this.tooltipOptions}
value={this.state.project.cycles} value={this.state.project.cycles}
options={this.state.cycles} options={this.state.cycles}
onChange={(e) => {this.setProjectParams('cycles',e.value)}} onChange={(e) => {this.setProjectParams('cycles',e.value)}}
/> />
</div> </div>
<div className="col-lg-1 col-md-1 col-sm-12"></div>
<label htmlFor="projRank" className="col-lg-2 col-md-2 col-sm-12">Project Rank <span style={{color:'red'}}>*</span></label> <label htmlFor="projRank" className="col-lg-2 col-md-2 col-sm-12">Project Rank <span style={{color:'red'}}>*</span></label>
<div className="col-lg-4 col-md-4 col-sm-12"> <div className="col-lg-3 col-md-3 col-sm-12">
<InputNumber inputId="proj-rank" name="rank" data-testid="rank" value={this.state.project.priority_rank} <InputNumber inputId="proj-rank" name="rank" data-testid="rank" value={this.state.project.priority_rank}
tooltip="Priority of this project with respect to other projects. Projects can interrupt observations of lower-priority projects."
tooltipOptions={this.tooltipOptions}
mode="decimal" showButtons min={0} max={100} mode="decimal" showButtons min={0} max={100}
onChange={(e) => this.setProjectParams('priority_rank', e.value)} onChange={(e) => this.setProjectParams('priority_rank', e.value)}
onBlur={(e) => this.setProjectParams('priority_rank', e.target.value, 'NUMBER')} /> onBlur={(e) => this.setProjectParams('priority_rank', e.target.value, 'NUMBER')} />
...@@ -451,32 +469,34 @@ export class ProjectEdit extends Component { ...@@ -451,32 +469,34 @@ export class ProjectEdit extends Component {
{this.state.resourceList && {this.state.resourceList &&
<div className="p-fluid"> <div className="p-fluid">
<div className="p-field p-grid"> <div className="p-field p-grid">
<div className="col-lg-3 col-md-3 col-sm-112"> <div className="col-lg-2 col-md-2 col-sm-12">
<h5>Resource Allocations:</h5> <h5>Resource Allocations:</h5>
</div> </div>
<div className="col-lg-3 col-md-3 col-sm-10"> <div className="col-lg-3 col-md-3 col-sm-10">
<Dropdown optionLabel="name" optionValue="name" <Dropdown optionLabel="name" optionValue="name"
tooltip="Resources to be allotted for the project"
tooltipOptions={this.tooltipOptions}
value={this.state.newResource} value={this.state.newResource}
options={_.sortBy(this.state.resourceList, ['name'])} options={_.sortBy(this.state.resourceList, ['name'])}
onChange={(e) => {this.setState({'newResource': e.value})}} onChange={(e) => {this.setState({'newResource': e.value})}}
placeholder="Add Resources" /> placeholder="Add Resources" />
</div> </div>
<div className="col-lg-2 col-md-2 col-sm-2"> <div className="col-lg-2 col-md-2 col-sm-2">
<Button label="" className="p-button-primary" icon="pi pi-plus" onClick={this.addNewResource} data-testid="add_res_btn" /> <Button label="" className="p-button-primary" icon="pi pi-plus" onClick={this.addNewResource} disabled={!this.state.newResource} data-testid="add_res_btn" />
</div> </div>
</div> </div>
{_.keys(this.state.projectQuota).length>0 && {/* {_.keys(this.state.projectQuota).length>0 && */}
<div className="p-field p-grid resource-input-grid"> <div className="p-field p-grid resource-input-grid">
<ResourceInputList list={this.state.resources} unitMap={this.resourceUnitMap} <ResourceInputList list={this.state.resources} unitMap={this.resourceUnitMap}
projectQuota={this.state.projectQuota} callback={this.setProjectQuotaParams} projectQuota={this.state.projectQuota} callback={this.setProjectQuotaParams}
removeInputCallback={this.removeResource} /> removeInputCallback={this.removeResource} />
</div> </div>
} {/* } */}
</div> </div>
} }
</div> </div>
</div> </div>
<div className="p-grid p-justify-start"> <div className="p-grid p-justify-start act-btn-grp">
<div className="p-col-1"> <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} /> <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>
......
SAS/TMSS/frontend/tmss_webapp/src/services/project.service.js
+ 2
− 1
View file @ 8b131255
...@@ -183,7 +183,8 @@ const ProjectService = { ...@@ -183,7 +183,8 @@ const ProjectService = {
project['actionpath']= '/project/view'; project['actionpath']= '/project/view';
projects[index] = project; projects[index] = project;
} }
}) return pro;
});
} }
}); });
results.projects = projects; results.projects = projects;
......
SAS/TMSS/frontend/tmss_webapp/src/utils/ui.constants.js 0 → 100644
+ 5
− 0
View file @ 8b131255
const UIConstants = {
tooltipOptions: {position: 'left', event: 'hover', className:"p-tooltip-custom"}
}
export default UIConstants;
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment