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
......@@ -45,6 +45,10 @@ h3, .h3 {
font-size: 1.25rem;
}
h5, .h5 {
font-size: 15px !important;
}
a{
margin-bottom: 10px;
}
......@@ -86,6 +90,20 @@ p {
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 {
padding-inline-start: 0px;
}
......
......@@ -199,6 +199,8 @@ function Table({ columns, data, defaultheader, optionalheader }) {
{row.cells.map(cell => {
if(cell.column.id !== 'actionpath')
return <td {...cell.getCellProps()} >{cell.render('Cell')}</td>
else
return "";
})}
</tr>
)
......
......@@ -36,7 +36,7 @@ export class ResourceInputList extends Component {
<>
{this.props.list.length>0 && this.props.list.map((item, index) => (
<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">
<InputNumber key={'item1-'+ index} id={'item1-'+ index} name={'item1-'+ index}
suffix={` ${this.props.unitMap[item.quantity_value]?this.props.unitMap[item.quantity_value].display:''}`}
......@@ -49,6 +49,7 @@ export class ResourceInputList extends Component {
<button className="p-link" data-testid={`${item.name}-btn`} onClick={(e) => this.removeInput(item.name)}>
<i className="fa fa-trash pi-error"></i></button>
</div>
<div className="col-lg-1 col-md-1 col-sm-12"></div>
</React.Fragment>
))}
</>
......
......@@ -18,6 +18,7 @@ import AppLoader from '../../layout/components/AppLoader';
import CycleService from '../../services/cycle.service';
import ProjectService from '../../services/project.service';
import UnitConverter from '../../utils/unit.converter';
import UIConstants from '../../utils/ui.constants';
/**
* Component to create a new Project
......@@ -61,7 +62,7 @@ export class ProjectCreate extends Component {
this.projectResourceDefaults = {}; // Default values for default resources
this.resourceUnitMap = UnitConverter.resourceUnitMap; // Resource unit conversion factor and constraints
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.setProjectParams = this.setProjectParams.bind(this);
......@@ -349,13 +350,13 @@ export class ProjectCreate extends Component {
<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>
<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} />
</div>
</div>
<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>
<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"
tooltip="Enter name of the project" tooltipOptions={this.tooltipOptions} maxLength="128"
value={this.state.project.name}
......@@ -365,8 +366,9 @@ export class ProjectCreate extends Component {
{this.state.errors.name ? this.state.errors.name : "Max 128 characters"}
</label>
</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>
<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}
tooltip="Short description of the project" tooltipOptions={this.tooltipOptions} maxLength="128"
data-testid="description" value={this.state.project.description}
......@@ -379,9 +381,9 @@ export class ProjectCreate extends Component {
</div>
<div className="p-field p-grid">
<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}
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}
onChange={(e) => this.setProjectParams('trigger_priority', e.value)}
onBlur={(e) => this.setProjectParams('trigger_priority', e.target.value, 'NUMBER')} />
......@@ -390,8 +392,9 @@ export class ProjectCreate extends Component {
{this.state.errors.trigger_priority ? this.state.errors.trigger_priority : ""}
</label>
</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>
<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"
tooltip="Is this project allowed to supply observation requests on the fly, possibly interrupting currently running observations (responsive telescope)?"
tooltipOptions={this.tooltipOptions}
......@@ -400,7 +403,7 @@ export class ProjectCreate extends Component {
</div>
<div className="p-field p-grid">
<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"
tooltip="Project Category" tooltipOptions={this.tooltipOptions}
value={this.state.project.project_category}
......@@ -408,8 +411,9 @@ export class ProjectCreate extends Component {
onChange={(e) => {this.setProjectParams('project_category', e.value)}}
placeholder="Select Project Category" />
</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>
<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"
tooltip="Period Category" tooltipOptions={this.tooltipOptions}
value={this.state.project.period_category}
......@@ -420,7 +424,7 @@ export class ProjectCreate extends Component {
</div>
<div className="p-field p-grid">
<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}
tooltip="Cycle(s) to which this project belongs" tooltipOptions={this.tooltipOptions}
value={this.state.project.cycles}
......@@ -429,10 +433,11 @@ export class ProjectCreate extends Component {
/>
</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>
<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}
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}
mode="decimal" showButtons min={0} max={100}
onChange={(e) => this.setProjectParams('priority_rank', e.value)}
......@@ -446,18 +451,20 @@ export class ProjectCreate extends Component {
{this.defaultResourcesEnabled && this.state.resourceList &&
<div className="p-fluid">
<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>
</div>
<div className="col-lg-3 col-md-3 col-sm-10">
<Dropdown optionLabel="name" optionValue="name"
tooltip="Resources to be allotted for the project"
tooltipOptions={this.tooltipOptions}
value={this.state.newResource}
options={this.state.resourceList}
onChange={(e) => {this.setState({'newResource': e.value})}}
placeholder="Add Resources" />
</div>
<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 className="p-field p-grid resource-input-grid">
......@@ -469,7 +476,7 @@ export class ProjectCreate extends Component {
}
</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">
<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>
......
......@@ -18,6 +18,7 @@ import AppLoader from '../../layout/components/AppLoader';
import CycleService from '../../services/cycle.service';
import ProjectService from '../../services/project.service';
import UnitConverter from '../../utils/unit.converter';
import UIConstants from '../../utils/ui.constants';
export class ProjectEdit extends Component {
constructor(props) {
......@@ -57,6 +58,7 @@ export class ProjectEdit extends Component {
{name:'LOFAR Support hours'} ];
this.projectResourceDefaults = {};
this.resourceUnitMap = UnitConverter.resourceUnitMap;
this.tooltipOptions = UIConstants.tooltipOptions;
this.getProjectDetails = this.getProjectDetails.bind(this);
this.cycleOptionTemplate = this.cycleOptionTemplate.bind(this);
......@@ -156,8 +158,9 @@ export class ProjectEdit extends Component {
if (this.state.newResource) {
let resourceList = this.state.resourceList;
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]);
console.log(resources);
this.setState({resources: resources, resourceList: resourceList, newResource: null});
}
}
......@@ -372,30 +375,34 @@ export class ProjectEdit extends Component {
<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>
<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"
tooltip="Enter name of the project" tooltipOptions={this.tooltipOptions} maxLength="128"
value={this.state.project.name}
onChange={(e) => this.setProjectParams('name', e.target.value)}
onBlur={(e) => this.setProjectParams('name', e.target.value)}/>
<label className="error">
{this.state.errors.name ? this.state.errors.name : ""}
<label className={this.state.errors.name?"error":"info"}>
{this.state.errors.name ? this.state.errors.name : "Max 128 characters"}
</label>
</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>
<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}
tooltip="Short description of the project" tooltipOptions={this.tooltipOptions} maxLength="128"
data-testid="description" value={this.state.project.description}
onChange={(e) => this.setProjectParams('description', e.target.value)}
onBlur={(e) => this.setProjectParams('description', e.target.value)}/>
<label className="error">
{this.state.errors.description ? this.state.errors.description : ""}
<label className={this.state.errors.description ?"error":"info"}>
{this.state.errors.description ? this.state.errors.description : "Max 255 characters"}
</label>
</div>
</div>
<div className="p-field p-grid">
<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':''}
tooltip="Priority of this project with respect to triggers" tooltipOptions={this.tooltipOptions}
value={this.state.project.trigger_priority} showButtons
min={0} max={1001} step={10} useGrouping={false}
onChange={(e) => this.setProjectParams('trigger_priority', e.value)}
......@@ -404,23 +411,30 @@ export class ProjectEdit extends Component {
{this.state.errors.trigger_priority ? this.state.errors.trigger_priority : ""}
</label>
</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>
<div className="col-lg-4 col-md-4 col-sm-12">
<Checkbox inputId="trigger" role="trigger" checked={this.state.project.can_trigger} onChange={e => this.setProjectParams('can_trigger', e.target.checked)}></Checkbox>
<div className="col-lg-3 col-md-3 col-sm-12">
<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 className="p-field p-grid">
<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"
tooltip="Project Category" tooltipOptions={this.tooltipOptions}
value={this.state.project.project_category}
options={this.state.projectCategories}
onChange={(e) => {this.setProjectParams('project_category', e.value)}}
placeholder="Select Project Category" />
</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>
<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"
tooltip="Period Category" tooltipOptions={this.tooltipOptions}
value={this.state.project.period_category}
options={this.state.periodCategories}
onChange={(e) => {this.setProjectParams('period_category',e.value)}}
......@@ -429,17 +443,21 @@ export class ProjectEdit extends Component {
</div>
<div className="p-field p-grid">
<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}
tooltip="Cycle(s) to which this project belongs" tooltipOptions={this.tooltipOptions}
value={this.state.project.cycles}
options={this.state.cycles}
onChange={(e) => {this.setProjectParams('cycles',e.value)}}
/>
</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>
<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}
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}
onChange={(e) => this.setProjectParams('priority_rank', e.value)}
onBlur={(e) => this.setProjectParams('priority_rank', e.target.value, 'NUMBER')} />
......@@ -451,32 +469,34 @@ export class ProjectEdit extends Component {
{this.state.resourceList &&
<div className="p-fluid">
<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>
</div>
<div className="col-lg-3 col-md-3 col-sm-10">
<Dropdown optionLabel="name" optionValue="name"
tooltip="Resources to be allotted for the project"
tooltipOptions={this.tooltipOptions}
value={this.state.newResource}
options={_.sortBy(this.state.resourceList, ['name'])}
onChange={(e) => {this.setState({'newResource': e.value})}}
placeholder="Add Resources" />
</div>
<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>
{_.keys(this.state.projectQuota).length>0 &&
{/* {_.keys(this.state.projectQuota).length>0 && */}
<div className="p-field p-grid resource-input-grid">
<ResourceInputList list={this.state.resources} unitMap={this.resourceUnitMap}
projectQuota={this.state.projectQuota} callback={this.setProjectQuotaParams}
removeInputCallback={this.removeResource} />
</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">
<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>
......
......@@ -183,7 +183,8 @@ const ProjectService = {
project['actionpath']= '/project/view';
projects[index] = project;
}
})
return pro;
});
}
});
results.projects = projects;
......
const UIConstants = {
tooltipOptions: {position: 'left', event: 'hover', className:"p-tooltip-custom"}
}
export default UIConstants;
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment