diff --git a/project/application/src/pages/ReportsPage/index.js b/project/application/src/pages/ReportsPage/index.js index b92d6dcf..b9b6565c 100644 --- a/project/application/src/pages/ReportsPage/index.js +++ b/project/application/src/pages/ReportsPage/index.js @@ -37,6 +37,8 @@ import { Loading } from '../../components/Loading'; import { UnitedReportsComponents } from './UnitedReportsComponents'; import { BlankListComponent } from '../../components/CommonComponents/BlankListcomponent/BlankListComponent'; import PageHeader from '../../components/PageHeader/index'; +import Spinner from '../../components/Spinner'; + // Actions import reportsPageAction from '../../actions/ReportsPageAction'; import { getClientsAction } from '../../actions/ClientsActions'; @@ -62,6 +64,7 @@ const localeMap = { class ReportsPage extends Component { state = { isInitialFetching: true, + isFetching: false, toggleBar: false, toggleChar: false, projectsArr: [], @@ -168,7 +171,7 @@ class ReportsPage extends Component { lang, } = vocabulary; - const { isInitialFetching } = this.state; + const { isInitialFetching, isFetching } = this.state; const customLocale = localeMap[lang.short]; customLocale.options.weekStartsOn = firstDayOfWeek; @@ -222,36 +225,39 @@ class ReportsPage extends Component { )} - {checkIsAdminByRole(currentTeam.data.role) && ( - this.applySearch()} - inputProjectData={this.props.inputProjectData} - inputUserData={this.props.inputUserData} - reportsPageAction={this.props.reportsPageAction} - inputClientData={this.props.clientsList} - /> - )} - {this.props.projectsArr.length > 0 ? ( - - ) : ( - BlankListComponent(this.props.vocabulary.v_no_report, null, { bottom: '-70px' }) - )} +
+ {isFetching && } + {checkIsAdminByRole(currentTeam.data.role) && ( + this.applySearch()} + inputProjectData={this.props.inputProjectData} + inputUserData={this.props.inputUserData} + reportsPageAction={this.props.reportsPageAction} + inputClientData={this.props.clientsList} + /> + )} + {this.props.projectsArr.length > 0 ? ( + + ) : ( + BlankListComponent(this.props.vocabulary.v_no_report, null, { bottom: '-70px' }) + )} +
@@ -515,7 +521,7 @@ class ReportsPage extends Component { } } ); - this.setState({ isInitialFetching: true }); + this.setState({ isFetching: true }); apiCall( AppConfig.apiURL + `timer/reports-list?startDate=${convertDateToISOString( @@ -546,7 +552,7 @@ class ReportsPage extends Component { this.setDataToGraph(this.props.dataBarChat, this.getLablesAndTime(datePeriod, sumTimeEntriesByDay)) ); this.setState({ toggleBar: true }); - this.setState({ isInitialFetching: false }); + this.setState({ isFetching: false }); }, err => { if (err instanceof Response) { diff --git a/project/application/src/pages/ReportsPage/style.scss b/project/application/src/pages/ReportsPage/style.scss index c295c45c..919e3718 100644 --- a/project/application/src/pages/ReportsPage/style.scss +++ b/project/application/src/pages/ReportsPage/style.scss @@ -5,6 +5,8 @@ overflow-y: auto; .data_container_reports_page { + display: flex; + flex-direction: column; height: 100%; width: 100%; background-color: #333333; @@ -25,6 +27,11 @@ font-weight: bold; } + .content_wrapper { + position: relative; + flex-grow: 1; + } + .line_chart_container { position: relative; top: 110px;