[OSDEV-1152] Quickfix (backmerge): disable claim filter on data fetch (…

…#301) Quickfix for https://opensupplyhub.atlassian.net/browse/OSDEV-1152 Disable filters while fetching facility claims. Backmerge PR --------- Co-authored-by: Oleksandr Mazur <[email protected]>
opensupplyhub · Jul 25, 2024 · 3818cf7 · 3818cf7
1 parent 55de881
commit 3818cf7
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 5 deletions.
diff --git a/src/react/src/components/DashboardClaims.jsx b/src/react/src/components/DashboardClaims.jsx
@@ -126,7 +126,7 @@ const DashboardClaims = ({
         let finalStatuses = statuses;
 
         if (countriesData.length > 0) {
-            if (!statuses && claimStatuses.length > 0) {
+            if (!statuses && claimStatuses && claimStatuses.length > 0) {
                 finalStatuses = map(claimStatuses, 'value');
             }
         } else if (claimStatuses.length > 0) {
@@ -167,8 +167,9 @@ const DashboardClaims = ({
                     <ClaimStatusFilter
                         countriesData={countriesData}
                         handleClaimStatusUpdate={onClaimStatusUpdate}
+                        isDisabled={fetching}
                     />
-                    <CountryNameFilter />
+                    <CountryNameFilter isDisabled={fetching} />
                     <Grid item className={classes.numberResults}>
                         {claimsCount} results
                     </Grid>

diff --git a/src/react/src/components/DashboardClaimsListTable.jsx b/src/react/src/components/DashboardClaimsListTable.jsx
@@ -157,6 +157,8 @@ function DashboardClaimsListTable({
                 order={order}
                 orderBy={orderBy}
                 onRequestSort={handleRequestSort}
+                fetching={fetching}
+                loading={loading}
             />
             {loading || fetching ? (
                 <TableBody>

diff --git a/src/react/src/components/DashboardClaimsListTableHeader.jsx b/src/react/src/components/DashboardClaimsListTableHeader.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { func, string } from 'prop-types';
+import { func, string, bool } from 'prop-types';
 import TableHead from '@material-ui/core/TableHead';
 import TableSortLabel from '@material-ui/core/TableSortLabel';
 import TableRow from '@material-ui/core/TableRow';
@@ -57,7 +57,13 @@ const claimsListHeadCells = [
     },
 ];
 
-function DashboardClaimsListTableHeader({ order, orderBy, onRequestSort }) {
+function DashboardClaimsListTableHeader({
+    order,
+    orderBy,
+    onRequestSort,
+    fetching,
+    loading,
+}) {
     const createSortHandler = property => event => {
         onRequestSort(event, property);
     };
@@ -74,6 +80,7 @@ function DashboardClaimsListTableHeader({ order, orderBy, onRequestSort }) {
                             active={orderBy === headCell.id}
                             direction={orderBy === headCell.id ? order : 'asc'}
                             onClick={createSortHandler(headCell.id)}
+                            disabled={fetching || loading}
                         >
                             {headCell.label}
                         </TableSortLabel>
@@ -85,6 +92,8 @@ function DashboardClaimsListTableHeader({ order, orderBy, onRequestSort }) {
 }
 
 DashboardClaimsListTableHeader.propTypes = {
+    loading: bool.isRequired,
+    fetching: bool.isRequired,
     order: string.isRequired,
     orderBy: string.isRequired,
     onRequestSort: func.isRequired,

diff --git a/src/react/src/components/Filters/ClaimStatusFilter.jsx b/src/react/src/components/Filters/ClaimStatusFilter.jsx
@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import { func } from 'prop-types';
+import { func, bool } from 'prop-types';
 import { connect } from 'react-redux';
 
 import StyledSelect from './StyledSelect';
@@ -14,6 +14,7 @@ import {
 const CLAIM_STATUSES = 'CLAIM_STATUSES';
 
 function ClaimStatusFilter({
+    isDisabled,
     claimStatuses,
     countriesData,
     claimStatusesOptions,
@@ -36,12 +37,14 @@ function ClaimStatusFilter({
                 options={claimStatusesOptions.data || []}
                 value={claimStatuses}
                 onChange={onChangeClaimStatus}
+                isDisabled={isDisabled}
             />
         </div>
     );
 }
 
 ClaimStatusFilter.propTypes = {
+    isDisabled: bool.isRequired,
     updateClaimStatus: func.isRequired,
     claimStatuses: claimStatusOptionsPropType.isRequired,
     claimStatusesOptions: filterOptionsPropType.isRequired,

diff --git a/src/react/src/components/Filters/CountryNameFilter.jsx b/src/react/src/components/Filters/CountryNameFilter.jsx
@@ -11,6 +11,7 @@ import { countryOptionsPropType } from '../../util/propTypes';
 const COUNTRIES = 'COUNTRIES';
 
 function CountryNameFilter({
+    isDisabled,
     countryOptions,
     countries,
     updateCountry,
@@ -25,16 +26,19 @@ function CountryNameFilter({
                 value={countries}
                 onChange={updateCountry}
                 disabled={fetching}
+                isDisabled={isDisabled}
             />
         </div>
     );
 }
 
 CountryNameFilter.defaultProps = {
+    isDisabled: false,
     countryOptions: null,
 };
 
 CountryNameFilter.propTypes = {
+    isDisabled: bool,
     countryOptions: countryOptionsPropType,
     updateCountry: func.isRequired,
     countries: countryOptionsPropType.isRequired,