OH2-281 | add filter functionality to table component (#582)

* feature(OH2-276): Implement main menu + sidemenu navigation * update: Update routes paths * update: Apply requested/suggested changes * update: Add hospital infos * update: Update admin sidemenu responsiveness * styles: Update admin sidebar styles * styles: Update MenuItem styles * feature: Add ward list * styles: Update component styles * feature: Add ward edit/new form * feature: Implement ward crud operations * update: Update form field values formatting * update: Add filter button component and update table component * styles: Update admin content width and remove unused import * update: Optimize import and sync permissionList fixtures * update: Add filter functionality to table component * fix: Fix number filter * update: Update table filter and add props doc * fix: Fix filter for select fields * update: Update table header * update: Prevent filter change dispatch when the filter is automatic * update: Remove unused file and update filter props doc * update: Update ward form cancel action * update: Update filter menu * fix(ADMIN): Fix admin side menu active section --------- Co-authored-by: SteveGT96 <[email protected]>
informatici · May 21, 2024 · 62829fc · 62829fc
1 parent e0a4890
commit 62829fc
Show file tree

Hide file tree

Showing 19 changed files with 537 additions and 229 deletions.
diff --git a/src/components/accessories/admin/wards/Wards.module.scss b/src/components/accessories/admin/wards/Wards.module.scss
@@ -2,7 +2,3 @@
   display: flex;
   flex-direction: column;
 }
-.actions {
-  display: flex;
-  justify-content: end;
-}
diff --git a/src/components/accessories/admin/wards/Wards.tsx b/src/components/accessories/admin/wards/Wards.tsx
@@ -28,19 +28,22 @@ export const Wards = () => {
 
   return (
     <div className={classes.wards}>
-      <div className={classes.actions}>
-        <Button
-          onClick={() => {
-            navigate("./new");
-          }}
-          type="button"
-          variant="contained"
-          color="primary"
-        >
-          {t("ward.addWard")}
-        </Button>
-      </div>
-      <WardTable onEdit={handleEdit} onDelete={handleDelete} />
+      <WardTable
+        onEdit={handleEdit}
+        onDelete={handleDelete}
+        headerActions={
+          <Button
+            onClick={() => {
+              navigate("./new");
+            }}
+            type="button"
+            variant="contained"
+            color="primary"
+          >
+            {t("ward.addWard")}
+          </Button>
+        }
+      />
     </div>
   );
 };
diff --git a/src/components/accessories/admin/wards/editWard/EditWard.tsx b/src/components/accessories/admin/wards/editWard/EditWard.tsx
@@ -32,7 +32,7 @@ export const EditWard = () => {
       creationMode={false}
       onSubmit={handleSubmit}
       isLoading={!!update.isLoading}
-      resetButtonLabel={t("common.reset")}
+      resetButtonLabel={t("common.cancel")}
       submitButtonLabel={t("ward.updateWard")}
       fields={getInitialFields(state)}
     />

diff --git a/src/components/accessories/admin/wards/newWard/NewWard.tsx b/src/components/accessories/admin/wards/newWard/NewWard.tsx
@@ -24,7 +24,7 @@ export const NewWard = () => {
       creationMode
       onSubmit={handleSubmit}
       isLoading={!!create.isLoading}
-      resetButtonLabel={t("common.reset")}
+      resetButtonLabel={t("common.cancel")}
       submitButtonLabel={t("ward.saveWard")}
       fields={getInitialFields(undefined)}
     />

diff --git a/src/components/accessories/admin/wards/wardForm/WardForm.tsx b/src/components/accessories/admin/wards/wardForm/WardForm.tsx
@@ -102,7 +102,7 @@ const WardForm: FC<IWardProps> = ({
 
   const handleResetConfirmation = () => {
     setOpenResetConfirmation(false);
-    resetForm();
+    navigate(-1);
   };
 
   const handleCheckboxChange = useCallback(
@@ -299,7 +299,7 @@ const WardForm: FC<IWardProps> = ({
           title={resetButtonLabel.toUpperCase()}
           info={t("common.resetform")}
           icon={warningIcon}
-          primaryButtonLabel={resetButtonLabel}
+          primaryButtonLabel={t("common.ok")}
           secondaryButtonLabel={t("common.discard")}
           handlePrimaryButtonClick={handleResetConfirmation}
           handleSecondaryButtonClick={() => setOpenResetConfirmation(false)}

diff --git a/src/components/accessories/admin/wards/wardTable/WardTable.tsx b/src/components/accessories/admin/wards/wardTable/WardTable.tsx
@@ -1,4 +1,4 @@
-import React, { FunctionComponent, useRef } from "react";
+import React, { FunctionComponent, ReactNode, useRef } from "react";
 import Table from "../../../table/Table";
 import { useTranslation } from "react-i18next";
 import InfoBox from "../../../infoBox/InfoBox";
@@ -12,15 +12,18 @@ import classes from "./WardTable.module.scss";
 import ConfirmationDialog from "../../../confirmationDialog/ConfirmationDialog";
 import checkIcon from "../../../../../assets/check-icon.png";
 import { deleteWardReset } from "../../../../../state/ward/actions";
+import { TFilterField } from "../../../table/filter/types";
 
 interface IOwnProps {
   onEdit: (row: any) => void;
   onDelete: (row: any) => void;
+  headerActions?: ReactNode;
 }
 
 export const WardTable: FunctionComponent<IOwnProps> = ({
   onEdit,
   onDelete,
+  headerActions,
 }) => {
   const dispatch = useDispatch();
   const { t } = useTranslation();
@@ -53,16 +56,13 @@ export const WardTable: FunctionComponent<IOwnProps> = ({
     fax: t("ward.fax"),
     visitDuration: t("ward.visitDuration"),
   };
-  const order = [
-    "code",
-    "description",
-    "beds",
-    "nurs",
-    "docs",
-    "opd",
-    "pharmacy",
-    "male",
-    "female",
+  const order = ["code", "description", "beds", "nurs", "docs"];
+
+  const filters: TFilterField[] = [
+    { key: "pharmacy", label: t("ward.pharmacy"), type: "boolean" },
+    { key: "male", label: t("ward.male"), type: "boolean" },
+    { key: "female", label: t("ward.female"), type: "boolean" },
+    { key: "opd", label: t("ward.opd"), type: "boolean" },
   ];
 
   const { data, status, error } = useSelector<IState, IApiResponse<WardDTO[]>>(
@@ -127,6 +127,11 @@ export const WardTable: FunctionComponent<IOwnProps> = ({
                   onEdit={handleEdit}
                   onDelete={handleDelete}
                   showEmptyCell={false}
+                  filterColumns={filters}
+                  rawData={data}
+                  manualFilter={false}
+                  rowKey="code"
+                  headerActions={headerActions}
                 />
                 {deleteWard.status === "FAIL" && (
                   <div ref={infoBoxRef} className="info-box-container">

diff --git a/src/components/accessories/checkboxField/CheckboxField.tsx b/src/components/accessories/checkboxField/CheckboxField.tsx
@@ -8,6 +8,7 @@ const CheckboxField: FunctionComponent<IProps> = ({
   disabled,
   label,
   onChange,
+  indeterminate,
 }) => {
   const [value, setValue] = useState<boolean>(false);
 
@@ -28,6 +29,7 @@ const CheckboxField: FunctionComponent<IProps> = ({
           checked={value}
           onChange={handleChange}
           name={fieldName}
+          indeterminate={indeterminate}
         />
       }
       label={label}

diff --git a/src/components/accessories/checkboxField/types.ts b/src/components/accessories/checkboxField/types.ts
@@ -2,6 +2,7 @@ export interface IProps {
   fieldName: string;
   checked: boolean;
   disabled?: boolean;
+  indeterminate?: boolean;
   label: string;
   onChange: (value: boolean) => void;
 }