TMSS-243: Breadcrumb style updated. Loading spinner added to Project Create, View and Edit pages

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>

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;

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">

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"

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">