From fad45dae2480dd6a2949ce7d90c70ddcc8bd0fbc Mon Sep 17 00:00:00 2001
From: Ramesh Kumar <r.kumar@redkarma.eu>
Date: Tue, 4 Aug 2020 22:14:18 +0530
Subject: [PATCH] TMSS-243: Breadcrumb style updated. Loading spinner added to
Project Create, View and Edit pages
---
.../src/layout/components/AppBreadcrumb.js | 8 +++++---
.../tmss_webapp/src/layout/sass/_breadcrumb.scss | 12 ++++++++++--
.../tmss_webapp/src/routes/Project/create.js | 8 +++++++-
.../frontend/tmss_webapp/src/routes/Project/edit.js | 10 +++++++++-
.../frontend/tmss_webapp/src/routes/Project/view.js | 5 ++++-
5 files changed, 35 insertions(+), 8 deletions(-)
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/layout/components/AppBreadcrumb.js b/SAS/TMSS/frontend/tmss_webapp/src/layout/components/AppBreadcrumb.js
index 370f657d16d..0abba394b1c 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/layout/components/AppBreadcrumb.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/layout/components/AppBreadcrumb.js
@@ -54,12 +54,14 @@ export class AppBreadcrumb extends Component {
render() {
const { breadcrumbs } = this.state;
return (
- <div className="p-breadcrumb" style={{border : "none"}} >
+ <div className="p-breadcrumb" >
<span className="pi b-home"><Link className="b-link pi pi-home" to="/"/></span>
{breadcrumbs.map((item, index) => (
- <span key={"bc_" + index} className="pi">
+ <span key={"bc_" + index} >
<li className="pi pi-chevron-right b-separator"></li>
- {index !== breadcrumbs.length - 1 ? <span className="b-link" onClick={() => this.onNavigate(item)}>{item.name}</span> : item.name}
+ {index !== breadcrumbs.length - 1 ?
+ <span className="b-link" onClick={() => this.onNavigate(item)}>{item.name}</span>
+ : <span className="b-text">{item.name}</span>}
</span>
))}
</div>
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_breadcrumb.scss b/SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_breadcrumb.scss
index e59a812a0ff..8c27dd9432d 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_breadcrumb.scss
+++ b/SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_breadcrumb.scss
@@ -2,8 +2,11 @@
body .p-breadcrumb{
background-color: #F1F1F1;
padding: 0em;
- padding-left: 2px;
+ padding-left: 5px;
+ padding-top: 5px;
margin-bottom: 5px;
+ box-shadow: 2px 2px #d6d9d9;
+ border: none;
}
.p-breadcrumb .pi{
color: #535252;
@@ -11,7 +14,7 @@ body .p-breadcrumb{
}
.b-link {
- font-size: large;
+ font-size: 14px;
color:#007bff;
cursor: pointer;
&:hover {
@@ -19,6 +22,11 @@ body .p-breadcrumb{
}
}
+.b-text {
+ font-size: 14px;
+ columns: #464748;
+}
+
.b-separator {
font-size: 0.9rem !important;
margin: 0 5px;
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 894e903506e..01160674db3 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/routes/Project/create.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/routes/Project/create.js
@@ -14,6 +14,7 @@ import {Growl} from 'primereact/components/growl/Growl';
import {ResourceInputList} from './ResourceInputList';
+import AppLoader from '../../layout/components/AppLoader';
import CycleService from '../../services/cycle.service';
import ProjectService from '../../services/project.service';
import UnitConverter from '../../utils/unit.converter';
@@ -25,6 +26,7 @@ export class ProjectCreate extends Component {
constructor(props) {
super(props);
this.state = {
+ isLoading: true,
dialog: { header: '', detail: ''},
project: {
trigger_priority: 1000,
@@ -93,7 +95,7 @@ export class ProjectCreate extends Component {
resourceList = _.sortBy(resourceList, "name");
const resources = _.remove(resourceList, function(resource) { return _.find(defaultResources, {'name': resource.name})!=null });
const projectQuota = this.setProjectQuotaDefaults(resources);
- this.setState({resourceList: resourceList, resources: resources, projectQuota: projectQuota});
+ this.setState({resourceList: resourceList, resources: resources, projectQuota: projectQuota, isLoading: false});
});
// ProjectService.getProjects().then(projects => {
// console.log(projects);
@@ -340,6 +342,8 @@ export class ProjectCreate extends Component {
</Link>
</div>
</div>
+ { this.state.isLoading ? <AppLoader /> :
+ <>
<div>
<div className="p-fluid">
<div className="p-field p-grid" style={{display: 'none'}}>
@@ -461,6 +465,8 @@ export class ProjectCreate extends Component {
<Button label="Cancel" className="p-button-danger" icon="pi pi-times" onClick={this.cancelCreate} />
</div>
</div>
+ </>
+ }
{/* Dialog component to show messages and get input */}
<div className="p-grid" data-testid="confirm_dialog">
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 e81114ef1fa..2429356d437 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/routes/Project/edit.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/routes/Project/edit.js
@@ -14,6 +14,7 @@ import {Growl} from 'primereact/components/growl/Growl';
import {ResourceInputList} from './ResourceInputList';
+import AppLoader from '../../layout/components/AppLoader';
import CycleService from '../../services/cycle.service';
import ProjectService from '../../services/project.service';
import UnitConverter from '../../utils/unit.converter';
@@ -22,6 +23,7 @@ export class ProjectEdit extends Component {
constructor(props) {
super(props);
this.state = {
+ isLoading: true,
dialog: { header: '', detail: ''},
project: {
trigger_priority: 1000,
@@ -113,7 +115,8 @@ export class ProjectEdit extends Component {
};
// Remove the already assigned resources from the resoureList
const resources = _.remove(resourceList, (resource) => { return _.find(this.projectQuota, {'resource_type_id': resource.name})!=null });
- this.setState({project: project, resourceList: resourceList, resources: resources, projectQuota: projectQuota});
+ this.setState({project: project, resourceList: resourceList, resources: resources,
+ projectQuota: projectQuota, isLoading: false});
// Validate form if all values are as per the form rules and enable Save button
this.validateForm();
@@ -362,6 +365,9 @@ export class ProjectEdit extends Component {
</Link>
</div>
</div>
+
+ { this.state.isLoading ? <AppLoader/> :
+ <>
<div>
<div className="p-fluid">
<div className="p-field p-grid">
@@ -479,6 +485,8 @@ export class ProjectEdit extends Component {
</div>
</div>
+ </>
+ }
{/* Dialog component to show messages and get input */}
<div className="p-grid" data-testid="confirm_dialog">
<Dialog header={this.state.dialog.header} visible={this.state.dialogVisible} style={{width: '30vw'}} inputId="confirm_dialog"
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/routes/Project/view.js b/SAS/TMSS/frontend/tmss_webapp/src/routes/Project/view.js
index 599568731d4..313ac805901 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/routes/Project/view.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/routes/Project/view.js
@@ -7,6 +7,7 @@ import { Chips } from 'primereact/chips';
import ResourceDisplayList from './ResourceDisplayList';
+import AppLoader from '../../layout/components/AppLoader';
import ProjectService from '../../services/project.service';
import UnitConverter from '../../utils/unit.converter';
@@ -18,6 +19,7 @@ export class ProjectView extends Component {
constructor(props) {
super(props);
this.state = {
+ isLoading: true,
redirect: this.props.match.params.id?"":'/project/list' // If no project id is passed, redirect to Project list page
};
if (this.props.match.params.id) {
@@ -57,7 +59,7 @@ export class ProjectView extends Component {
quota.resource = resource;
projectQuota.push(quota);
};
- this.setState({project: project, projectQuota: projectQuota});
+ this.setState({project: project, projectQuota: projectQuota, isLoading: false});
} else {
this.setState({redirect: "../../not-found"})
}
@@ -83,6 +85,7 @@ export class ProjectView extends Component {
</div>
}
</div>
+ { this.state.isLoading && <AppLoader /> }
{ this.state.project &&
<React.Fragment>
<div className="main-content">
--
GitLab