Merge pull request ECLK#323 from hsvikum/bug_fix_233

Bug Fix ECLK#233

Author: YujithIsura

client/src/modules/election/ActiveElectionForm.jsx

@@ -26,6 +26,7 @@ import { setCallElectionData, postCallElectionData, openSnackbar, getFieldOption
 import { getTeams } from '../nomination/state/NominationAction';
 import { connect } from 'react-redux';
 import moment from 'moment';
+import CircularProgress from '@material-ui/core/CircularProgress';
 
 const styles = theme => ({
   root: {
@@ -132,7 +133,8 @@ class ActiveElectionForm extends React.Component {
       errorTextApprovalStart: '',
       errorTextApprovalEnd: '',
       goNext: false,
-      errorTextElectorates: ''
+      errorTextElectorates: '',
+      stepInProgress: false
     };
   }
   componentWillMount(){
@@ -277,9 +279,12 @@ class ActiveElectionForm extends React.Component {
     }
 
     if (goNext) {
-      this.setState(state => ({
-        activeStep: state.activeStep + 1,
-      }));
+      this.setState({ stepInProgress: true });
+      setTimeout(() => {
+        this.setState(state => ({
+          activeStep: state.activeStep + 1,
+        }));
+      }, 500);
     }
 
     if (activeStep === 1) {
@@ -378,6 +383,12 @@ class ActiveElectionForm extends React.Component {
     this.setState({ open: false });
   };
 
+  onComponentLoaded = () => {
+    if (this.state.stepInProgress) {
+      this.setState({ stepInProgress: false });
+    }
+  }
+
   getStepContent(step, values) {
     const { CallElectionData,rowHeaders } = this.props;
     var rowHeadersForRpp = rowHeaders.filter(x => x.team_party_type === "RPP");
@@ -396,6 +407,7 @@ class ActiveElectionForm extends React.Component {
       case 1:
         return <AllowNomination
           handleChange={this.handleChange}
+          onComponentLoaded={this.onComponentLoaded}
           values={values}
           rowHeadersForRpp={rowHeadersForRpp}
           rowHeadersForIg={rowHeadersForIg}
@@ -452,6 +464,7 @@ class ActiveElectionForm extends React.Component {
                             {activeStep === steps.length - 1 ? 'Finish' : 'Next'}
                           </Button>
                         </div>
+                        { this.state.stepInProgress && <CircularProgress size={68} />}
                       </div>
                     </StepContent>
                   </Step>

client/src/modules/election/AllowNomination.jsx

@@ -37,6 +37,10 @@ class AllowNomination extends React.Component {
         e.preventDefault()
     }
 
+    componentWillReceiveProps() {
+        const { onComponentLoaded } = this.props;
+        onComponentLoaded();
+    }
 
     render() {
         const { classes,electionData,errorTextElectorates,rowHeadersForRpp,rowHeadersForIg } = this.props;

client/src/modules/election/Election_process_review_details.jsx

@@ -39,6 +39,7 @@ import AllowNomination from './AllowNominationView';
 import moment from 'moment';
 import { withRouter } from "react-router-dom";
 import { Redirect } from 'react-router-dom'
+import LinearProgress from '@material-ui/core/LinearProgress';
 
 
 const drawerWidth = 240;
@@ -191,7 +192,8 @@ class Dashboard extends React.Component {
         electionId: '',
         status: '',
         reviewNote: '',
-        errorTextModule: ''
+        errorTextModule: '',
+        loaderInProgress: true
     };
 
     componentDidMount() {
@@ -216,6 +218,10 @@ class Dashboard extends React.Component {
         this.setState({ open: false });
     };
 
+    componentWillReceiveProps() {
+        this.setState({ loaderInProgress: false });
+    }
+
     changeElectionStatus = () => {
         const { onChangeApproval, openSnackbar, ElectionReviewData } = this.props;
 
@@ -401,6 +407,9 @@ class Dashboard extends React.Component {
                 <div style={{ width: '100%' }}>
                     <Typography variant="h5" component="h2">{ElectionReviewData.name}</Typography>
                     <br />
+                    <div>
+                    { this.state.loaderInProgress && <LinearProgress/>}
+                    </div>
                     <div className={classes.container}>
                         <Card className={classes.card}>
                             <CardContent>

client/src/modules/nomination/state/NominationAction.js

@@ -32,6 +32,7 @@ import { openSnackbar } from '../../election/state/ElectionAction';
 import moment from "react-moment";
 import {saveAs} from 'file-saver';
 import { de } from "date-fns/locale";
+import store from '../../../state/store';
 
 const nominationLoaded = (getNominations) => {
   return {
@@ -726,6 +727,8 @@ export const createAndDownloadNominationPaySlipPdf = function createAndDownloadN
   templateData['file'] = {"template": "nomination_payslip.js"}
   templateData['file']['paymentData'] = paymentData;
 
+  store.dispatch(openSnackbar({ message:`Download will begin shortly`}));
+
   firstAPI.post(`/generate`, templateData)
     .then((res) => firstAPI.get(res.data.path, { responseType: 'blob' }))
     .then((res) => {