Fix bug on inventory details status filter

onaio · Jul 31, 2024 · 08880bc · 08880bc
1 parent b7d289c
commit 08880bc
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 18 deletions.
diff --git a/packages/fhir-location-management/src/components/AllLocationListFlat/base.css b/packages/fhir-location-management/src/components/AllLocationListFlat/base.css
@@ -2,3 +2,7 @@
   width: 45%;
   min-width: 192px;
 }
+
+.filter-row {
+  margin-bottom: 16px;
+}
diff --git a/packages/fhir-location-management/src/components/AllLocationListFlat/dataGridFilterRow.tsx b/packages/fhir-location-management/src/components/AllLocationListFlat/dataGridFilterRow.tsx
@@ -21,8 +21,8 @@ export const LocationGridFilterRowRender = (props: LocationGridFilterRowRenderPr
   return (
     <div className="filter-row" data-testid="filter-row">
       <Space>
-        <Space>
-          <Trans t={t} i18nKey="parentLocationFilter">
+        <Trans t={t} i18nKey="parentLocationFilter">
+          <Space>
             Parent Location:
             <PaginatedAsyncSelect<ILocation>
               allowClear={true}
@@ -50,10 +50,10 @@ export const LocationGridFilterRowRender = (props: LocationGridFilterRowRenderPr
                 }
               }}
             />
-          </Trans>
-        </Space>
-        <Space>
-          <Trans t={t} i18nKey="locationStatusFilter">
+          </Space>
+        </Trans>
+        <Trans t={t} i18nKey="locationStatusFilter">
+          <Space>
             Status:
             <Select
               id="location-status-filter"
@@ -78,8 +78,8 @@ export const LocationGridFilterRowRender = (props: LocationGridFilterRowRenderPr
                 { value: '*', label: t('Show all') },
               ]}
             />
-          </Trans>
-        </Space>
+          </Space>
+        </Trans>
       </Space>
     </div>
   );

diff --git a/packages/fhir-location-management/src/components/ViewDetails/DetailsTabs/Inventory.tsx b/packages/fhir-location-management/src/components/ViewDetails/DetailsTabs/Inventory.tsx
@@ -318,14 +318,6 @@ export const InventoryView = ({ fhirBaseUrl, locationId }: InventoryViewProps) =
   const activeValue = 'active';
   const inactiveValue = 'inactive';
 
-  const radioOptions = [
-    {
-      value: activeValue,
-      label: t('Active'),
-    },
-    { value: inactiveValue, label: t('Inactive') },
-  ];
-
   return (
     <Row data-testid="inventory-tab" className="list-view">
       <Col style={{ width: '100%' }}>
@@ -335,8 +327,33 @@ export const InventoryView = ({ fhirBaseUrl, locationId }: InventoryViewProps) =
             <Radio.Group
               value={filterRegistry[accEndDateFilterKey].value}
               buttonStyle="solid"
-              options={radioOptions}
-            ></Radio.Group>
+              onChange={(event) => {
+                const val = event.target.value;
+                switch (val) {
+                  case activeValue:
+                    registerFilter(
+                      accEndDateFilterKey,
+                      (el) => {
+                        return activeInventoryByAccEndDate(el);
+                      },
+                      val
+                    );
+                    break;
+                  case inactiveValue:
+                    registerFilter(
+                      accEndDateFilterKey,
+                      (el) => {
+                        return !activeInventoryByAccEndDate(el);
+                      },
+                      val
+                    );
+                    break;
+                }
+              }}
+            >
+              <Radio.Button value={activeValue}>{t('Active')}</Radio.Button>
+              <Radio.Button value={inactiveValue}>{t('Inactive')}</Radio.Button>
+            </Radio.Group>
           </Space>
           <RbacCheck permissions={['Group.create']}>
             <Button type="primary" onClick={() => history.push(baseInventoryPath)}>