Skip to content

Commit

Permalink
[#2011] Add loading icons for locking and unlocking a period
Browse files Browse the repository at this point in the history
  • Loading branch information
@KasperBrandt
KasperBrandt committed Mar 31, 2016
1 parent 77cba9a commit 247c45f
Show file tree
Hide file tree
Showing 4 changed files with 102 additions and 36 deletions.
68 changes: 50 additions & 18 deletions akvo/rsr/static/scripts-src/my-results.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -977,7 +977,8 @@ function initReact() {
var IndicatorPeriodMain = React.createClass({displayName: 'IndicatorPeriodMain',
getInitialState: function() {
return {
actualValueHover: false
actualValueHover: false,
unLocking: false
};
},

Expand All @@ -996,9 +997,14 @@ function initReact() {
this.props.addNewUpdate(this.props.selectedPeriod.id);
},

finishUnlocking: function() {
this.setState({unLocking: false});
},

unlockPeriod: function() {
// Unlock this period.
this.props.unlockPeriod(this.props.selectedPeriod.id);
this.setState({unLocking: true});
this.props.unlockPeriod(this.props.selectedPeriod.id, this.finishUnlocking);
},

renderNewUpdate: function() {
Expand Down Expand Up @@ -1036,11 +1042,19 @@ function initReact() {
} else if (isAdmin) {
// In case the period is locked, in the 'MyRSR' view, and the user is an admin,
// then show a button to unlock the period.
return (
React.DOM.div( {className:"new-update"},
React.DOM.a( {onClick:this.unlockPeriod, className:"btn btn-sm btn-default"}, React.DOM.i( {className:"fa fa-unlock-alt"} ), " ", i18nResults.unlock_period)
)
);
if (this.state.unLocking) {
return (
React.DOM.div( {className:"new-update"},
React.DOM.a( {className:"btn btn-sm btn-default"}, React.DOM.i( {className:"fa fa-spin fa-spinner"} ), " ", i18nResults.unlocking_period,"...")
)
);
} else {
return (
React.DOM.div( {className:"new-update"},
React.DOM.a( {onClick:this.unlockPeriod, className:"btn btn-sm btn-default"}, React.DOM.i( {className:"fa fa-unlock-alt"} ), " ", i18nResults.unlock_period)
)
);
}
} else {
// In all other cases, show nothing.
return (
Expand Down Expand Up @@ -1162,7 +1176,8 @@ function initReact() {
var IndicatorPeriodEntry = React.createClass({displayName: 'IndicatorPeriodEntry',
getInitialState: function() {
return {
hover: false
hover: false,
lockingOrUnlocking: false
};
},

Expand Down Expand Up @@ -1199,14 +1214,20 @@ function initReact() {
this.setState({hover: false});
},

finishLocking: function() {
this.setState({lockingOrUnlocking: false});
},

lockPeriod: function() {
// Lock this period.
this.props.lockPeriod(this.props.period.id);
this.setState({lockingOrUnlocking: true});
this.props.lockPeriod(this.props.period.id, this.finishLocking);
},

unlockPeriod: function() {
// Unlock this period.
this.props.unlockPeriod(this.props.period.id);
this.setState({lockingOrUnlocking: true});
this.props.unlockPeriod(this.props.period.id, this.finishLocking);
},

switchPeriod: function() {
Expand Down Expand Up @@ -1279,7 +1300,7 @@ function initReact() {
case false:
return (
React.DOM.td( {className:"actions-td"},
React.DOM.i( {className:"fa fa-unlock"} ), " ", i18nResults.period_unlocked
React.DOM.i( {className:"fa fa-unlock-alt"} ), " ", i18nResults.period_unlocked
)
);
default:
Expand All @@ -1292,10 +1313,16 @@ function initReact() {
} else {
// In the 'MyRSR' view as an admin:
// Show the buttons to lock or unlock a period.
if (this.props.period.locked) {
if (this.state.lockingOrUnlocking) {
return (
React.DOM.td( {className:"actions-td"},
React.DOM.a( {onClick:this.unlockPeriod, className:"btn btn-sm btn-default"}, React.DOM.i( {className:"fa fa-unlock"} ), " ", i18nResults.unlock_period)
React.DOM.a( {className:"btn btn-sm btn-default"}, React.DOM.i( {className:"fa fa-spin fa-spinner"} ), " ", i18nResults.loading)
)
);
} else if (this.props.period.locked) {
return (
React.DOM.td( {className:"actions-td"},
React.DOM.a( {onClick:this.unlockPeriod, className:"btn btn-sm btn-default"}, React.DOM.i( {className:"fa fa-unlock-alt"} ), " ", i18nResults.unlock_period)
)
);
} else {
Expand Down Expand Up @@ -1528,26 +1555,31 @@ function initReact() {
apiCall('POST', url, data, success);
},

basePeriodSave: function(periodId, data) {
basePeriodSave: function(periodId, data, callback) {
// Base function for saving a period with a data Object.
var url = endpoints.base_url + endpoints.period_framework.replace('{period}', periodId);
var thisApp = this;
var success = function(response) {
var period = response;
var indicatorId = period.indicator;
thisApp.props.savePeriodToIndicator(period, indicatorId);

// Call the callback, if not undefined.
if (callback !== undefined) {
callback();
}
};
apiCall('PATCH', url, JSON.stringify(data), success);
},

lockPeriod: function(periodId) {
lockPeriod: function(periodId, callback) {
// Lock a period.
this.basePeriodSave(periodId, {locked: true});
this.basePeriodSave(periodId, {locked: true}, callback);
},

unlockPeriod: function(periodId) {
unlockPeriod: function(periodId, callback) {
// Unlock a period.
this.basePeriodSave(periodId, {locked: false});
this.basePeriodSave(periodId, {locked: false}, callback);
},

showMeasure: function() {
Expand Down
68 changes: 50 additions & 18 deletions akvo/rsr/static/scripts-src/my-results.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -977,7 +977,8 @@ function initReact() {
var IndicatorPeriodMain = React.createClass({
getInitialState: function() {
return {
actualValueHover: false
actualValueHover: false,
unLocking: false
};
},

Expand All @@ -996,9 +997,14 @@ function initReact() {
this.props.addNewUpdate(this.props.selectedPeriod.id);
},

finishUnlocking: function() {
this.setState({unLocking: false});
},

unlockPeriod: function() {
// Unlock this period.
this.props.unlockPeriod(this.props.selectedPeriod.id);
this.setState({unLocking: true});
this.props.unlockPeriod(this.props.selectedPeriod.id, this.finishUnlocking);
},

renderNewUpdate: function() {
Expand Down Expand Up @@ -1036,11 +1042,19 @@ function initReact() {
} else if (isAdmin) {
// In case the period is locked, in the 'MyRSR' view, and the user is an admin,
// then show a button to unlock the period.
return (
<div className="new-update">
<a onClick={this.unlockPeriod} className="btn btn-sm btn-default"><i className="fa fa-unlock-alt" /> {i18nResults.unlock_period}</a>
</div>
);
if (this.state.unLocking) {
return (
<div className="new-update">
<a className="btn btn-sm btn-default"><i className="fa fa-spin fa-spinner" /> {i18nResults.unlocking_period}...</a>
</div>
);
} else {
return (
<div className="new-update">
<a onClick={this.unlockPeriod} className="btn btn-sm btn-default"><i className="fa fa-unlock-alt" /> {i18nResults.unlock_period}</a>
</div>
);
}
} else {
// In all other cases, show nothing.
return (
Expand Down Expand Up @@ -1162,7 +1176,8 @@ function initReact() {
var IndicatorPeriodEntry = React.createClass({
getInitialState: function() {
return {
hover: false
hover: false,
lockingOrUnlocking: false
};
},

Expand Down Expand Up @@ -1199,14 +1214,20 @@ function initReact() {
this.setState({hover: false});
},

finishLocking: function() {
this.setState({lockingOrUnlocking: false});
},

lockPeriod: function() {
// Lock this period.
this.props.lockPeriod(this.props.period.id);
this.setState({lockingOrUnlocking: true});
this.props.lockPeriod(this.props.period.id, this.finishLocking);
},

unlockPeriod: function() {
// Unlock this period.
this.props.unlockPeriod(this.props.period.id);
this.setState({lockingOrUnlocking: true});
this.props.unlockPeriod(this.props.period.id, this.finishLocking);
},

switchPeriod: function() {
Expand Down Expand Up @@ -1279,7 +1300,7 @@ function initReact() {
case false:
return (
<td className="actions-td">
<i className="fa fa-unlock" /> {i18nResults.period_unlocked}
<i className="fa fa-unlock-alt" /> {i18nResults.period_unlocked}
</td>
);
default:
Expand All @@ -1292,10 +1313,16 @@ function initReact() {
} else {
// In the 'MyRSR' view as an admin:
// Show the buttons to lock or unlock a period.
if (this.props.period.locked) {
if (this.state.lockingOrUnlocking) {
return (
<td className="actions-td">
<a onClick={this.unlockPeriod} className="btn btn-sm btn-default"><i className="fa fa-unlock" /> {i18nResults.unlock_period}</a>
<a className="btn btn-sm btn-default"><i className="fa fa-spin fa-spinner" /> {i18nResults.loading}</a>
</td>
);
} else if (this.props.period.locked) {
return (
<td className="actions-td">
<a onClick={this.unlockPeriod} className="btn btn-sm btn-default"><i className="fa fa-unlock-alt" /> {i18nResults.unlock_period}</a>
</td>
);
} else {
Expand Down Expand Up @@ -1528,26 +1555,31 @@ function initReact() {
apiCall('POST', url, data, success);
},

basePeriodSave: function(periodId, data) {
basePeriodSave: function(periodId, data, callback) {
// Base function for saving a period with a data Object.
var url = endpoints.base_url + endpoints.period_framework.replace('{period}', periodId);
var thisApp = this;
var success = function(response) {
var period = response;
var indicatorId = period.indicator;
thisApp.props.savePeriodToIndicator(period, indicatorId);

// Call the callback, if not undefined.
if (callback !== undefined) {
callback();
}
};
apiCall('PATCH', url, JSON.stringify(data), success);
},

lockPeriod: function(periodId) {
lockPeriod: function(periodId, callback) {
// Lock a period.
this.basePeriodSave(periodId, {locked: true});
this.basePeriodSave(periodId, {locked: true}, callback);
},

unlockPeriod: function(periodId) {
unlockPeriod: function(periodId, callback) {
// Unlock a period.
this.basePeriodSave(periodId, {locked: false});
this.basePeriodSave(periodId, {locked: false}, callback);
},

showMeasure: function() {
Expand Down
1 change: 1 addition & 0 deletions akvo/templates/myrsr/my_results.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,7 @@ <h4 class="resultProjectTitle">
"number_of_pending_updates": "{% trans 'Number of pending updates' %}",
"lock_period": "{% trans 'Lock period' %}",
"unlock_period": "{% trans 'Unlock period' %}",
"unlocking_period": "{% trans 'Unlocking period' %}",
"period_locked": "{% trans 'Period locked' %}",
"period_unlocked": "{% trans 'Period unlocked' %}",
"parent_project": "{% trans 'Parent project' %}",
Expand Down
1 change: 1 addition & 0 deletions akvo/templates/project_main.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -155,6 +155,7 @@
"number_of_pending_updates": "{% trans 'Number of pending updates' %}",
"lock_period": "{% trans 'Lock period' %}",
"unlock_period": "{% trans 'Unlock period' %}",
"unlocking_period": "{% trans 'Unlocking period' %}",
"period_locked": "{% trans 'Period locked' %}",
"period_unlocked": "{% trans 'Period unlocked' %}",
"parent_project": "{% trans 'Parent project' %}",
Expand Down

0 comments on commit 247c45f

Please sign in to comment.