[DEV-188] add loading (#1117)

* fix coding issues

* improve coding

* add loading when updating my departments
This commit is contained in:
Joel Elias Méndez 2021-12-15 15:17:57 -03:00 committed by GitHub
parent 8d7b178fa1
commit 4bd8df1d5e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 10 additions and 6 deletions

View File

@ -55,6 +55,7 @@ class StaffEditor extends React.Component {
sendEmailOnNewTicket: this.props.sendEmailOnNewTicket, sendEmailOnNewTicket: this.props.sendEmailOnNewTicket,
loadingReInviteStaff: false, loadingReInviteStaff: false,
reInviteStaff: "", reInviteStaff: "",
loadingStats: true,
rawForm: { rawForm: {
dateRange: statsUtils.getInitialDateRange(), dateRange: statsUtils.getInitialDateRange(),
departments: [], departments: [],
@ -76,7 +77,7 @@ class StaffEditor extends React.Component {
}).then(({data}) => { }).then(({data}) => {
this.setState({ this.setState({
ticketData: data, ticketData: data,
loading: false loadingStats: false
}); });
}).catch((error) => { }).catch((error) => {
if (showLogs) console.error('ERROR: ', error); if (showLogs) console.error('ERROR: ', error);
@ -293,12 +294,12 @@ class StaffEditor extends React.Component {
} }
renderStaffStats() { renderStaffStats() {
const { loading, ticketData } = this.state; const { loadingStats, ticketData } = this.state;
return ( return (
<div className="admin-panel-stats"> <div className="admin-panel-stats">
{ {
loading ? loadingStats ?
<div className="admin-panel-stats__loading"><Loading backgrounded size="large" /></div> : <div className="admin-panel-stats__loading"><Loading backgrounded size="large" /></div> :
statsUtils.renderStatistics({showStatCards: true, showStatsByHours: true, ticketData}) statsUtils.renderStatistics({showStatCards: true, showStatsByHours: true, ticketData})
} }
@ -426,24 +427,27 @@ class StaffEditor extends React.Component {
} }
}).then(() => { }).then(() => {
this.retrieveStaffMembers(); this.retrieveStaffMembers();
window.scrollTo(0,0); window.scrollTo(0,250);
this.setState({message: eventType}); this.setState({message: eventType});
const departmentsAssigned = SessionStore.getDepartments().filter((_department, index) => this.state.departments.includes(index)); const departmentsAssigned = SessionStore.getDepartments().filter((_department, index) => this.state.departments.includes(index));
const departmentsAssignedId = departmentsAssigned.map(department => department.id); const departmentsAssignedId = departmentsAssigned.map(department => department.id);
this.setState({loadingStats: true});
statsUtils.retrieveStats({ statsUtils.retrieveStats({
rawForm: this.state.rawForm, rawForm: this.state.rawForm,
departments: departmentsAssignedId departments: departmentsAssignedId
}).then(({data}) => { }).then(({data}) => {
this.setState({ticketData: data, loading: false}); this.setState({ticketData: data, loadingStats: false});
}).catch((error) => { }).catch((error) => {
if (showLogs) console.error('ERROR: ', error); if (showLogs) console.error('ERROR: ', error);
this.setState({loadingStats: false});
}); });
onChange && onChange(); onChange && onChange();
}).catch(() => { }).catch(() => {
window.scrollTo(0,0); window.scrollTo(0,250);
this.setState({message: 'FAIL'}); this.setState({message: 'FAIL'});
}); });
} }