@kenyaemr/esm-bed-management-app 1.0.1-pre.7 → 8.0.2

package/src/bed-administration/bed-administration-table.component.tsx

@@ -1,5 +1,5 @@
-import React, { useEffect, useMemo, useState } from "react";
-import { useTranslation } from "react-i18next";
+import React, { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import {
   Button,
   DataTable,
@@ -16,39 +16,36 @@ import {
   TableRow,
   Tag,
   Tile,
-} from "@carbon/react";
-import { Add, Edit } from "@carbon/react/icons";
-import {
-  isDesktop as desktopLayout,
-  useConfig,
-  useLayoutType,
-  usePagination,
-} from "@openmrs/esm-framework";
-import { CardHeader, ErrorState } from "@openmrs/esm-patient-common-lib";
-import type { InitialData, Location } from "../types";
-import { findBedByLocation, useWards } from "../summary/summary.resource";
-import EditBedForm from "./edit-bed-form.component";
-import Header from "../header/header.component";
-import NewBedForm from "./new-bed-form.component";
-import styles from "./bed-administration-table.scss";
+} from '@carbon/react';
+import { Add, Edit } from '@carbon/react/icons';
+import { ErrorState, isDesktop as desktopLayout, useLayoutType, usePagination } from '@openmrs/esm-framework';
+import type { BedFormData } from '../types';
+import { useBedsGroupedByLocation } from '../summary/summary.resource';
+import EditBedForm from './edit-bed-form.component';
+import Header from '../header/header.component';
+import NewBedForm from './new-bed-form.component';
+import styles from './bed-administration-table.scss';
+import { CardHeader } from '../card-header/card-header.component';
 
 const BedAdministrationTable: React.FC = () => {
   const { t } = useTranslation();
-  const headerTitle = t("wardAllocation", "Ward Allocation");
+  const headerTitle = t('wardAllocation', 'Ward Allocation');
   const layout = useLayoutType();
-  const isTablet = layout === "tablet";
-  const responsiveSize = isTablet ? "lg" : "sm";
+  const isTablet = layout === 'tablet';
+  const responsiveSize = isTablet ? 'lg' : 'sm';
   const isDesktop = desktopLayout(layout);
-  const { admissionLocationTagUuid } = useConfig();
 
-  const [wardsGroupedByLocations, setWardsGroupedByLocation] = useState<
-    Array<Location>
-  >([]);
-  const [isBedDataLoading, setIsBedDataLoading] = useState(false);
+  const {
+    data: wardsGroupedByLocations,
+    isLoading: isLoadingBeds,
+    isValidating,
+    mutate,
+    error,
+  } = useBedsGroupedByLocation();
   const [showAddBedModal, setShowAddBedModal] = useState(false);
   const [showEditBedModal, setShowEditBedModal] = useState(false);
-  const [editData, setEditData] = useState<InitialData>();
-  const [filterOption, setFilterOption] = useState("ALL");
+  const [editData, setEditData] = useState<BedFormData>();
+  const [filterOption, setFilterOption] = useState('ALL');
 
   function CustomTag({ condition }: { condition: boolean }) {
     const { t } = useTranslation();
@@ -56,14 +53,14 @@ const BedAdministrationTable: React.FC = () => {
     if (condition) {
       return (
         <Tag type="green" size="md">
-          {t("yes", "Yes")}
+          {t('yes', 'Yes')}
         </Tag>
       );
     }
 
     return (
       <Tag type="red" size="md">
-        {t("no", "No")}
+        {t('no', 'No')}
       </Tag>
     );
   }
@@ -71,76 +68,44 @@ const BedAdministrationTable: React.FC = () => {
   const handleBedStatusChange = ({ selectedItem }: { selectedItem: string }) =>
     setFilterOption(selectedItem.trim().toUpperCase());
 
-  const bedsMappedToLocation = wardsGroupedByLocations?.length
-    ? [].concat(...wardsGroupedByLocations)
-    : [];
-
-  const { data, isLoading, error, isValidating, mutate } = useWards(
-    admissionLocationTagUuid
-  );
-
-  const [currentPageSize, setPageSize] = useState(10);
-  const pageSizes = [10, 20, 30, 40, 50];
+  const [pageSize, setPageSize] = useState(10);
   const { results, currentPage, totalPages, goTo } = usePagination(
-    filterOption === "ALL"
-      ? bedsMappedToLocation
-      : bedsMappedToLocation.filter((bed) => bed.status === filterOption) ?? [],
-    currentPageSize
+    filterOption === 'ALL'
+      ? wardsGroupedByLocations
+      : wardsGroupedByLocations.filter((bed) => bed.status === filterOption) ?? [],
+    pageSize,
   );
 
-  useEffect(() => {
-    if (!isLoading && data) {
-      setIsBedDataLoading(true);
-      const fetchData = async () => {
-        const promises = data.data.results.map(async (ward) => {
-          const bedLocations = await findBedByLocation(ward.uuid);
-          if (bedLocations.data.results.length) {
-            return bedLocations.data.results.map((bed) => ({
-              ...bed,
-              location: ward,
-            }));
-          }
-          return null;
-        });
-
-        const updatedWards = (await Promise.all(promises)).filter(Boolean);
-        setWardsGroupedByLocation(updatedWards);
-        setIsBedDataLoading(false);
-      };
-      fetchData().finally(() => setIsBedDataLoading(false));
-    }
-  }, [data, isLoading, wardsGroupedByLocations.length]);
-
   const tableHeaders = [
     {
-      key: "bedNumber",
-      header: t("bedId", "Bed ID"),
+      key: 'bedNumber',
+      header: t('bedId', 'Bed ID'),
     },
     {
-      key: "location",
-      header: t("location", "Location"),
+      key: 'location',
+      header: t('location', 'Location'),
     },
     {
-      key: "occupancyStatus",
-      header: t("occupancyStatus", "Occupied"),
+      key: 'occupancyStatus',
+      header: t('occupancyStatus', 'Occupied'),
     },
     {
-      key: "allocationStatus",
-      header: t("allocationStatus", "Allocated"),
+      key: 'allocationStatus',
+      header: t('allocationStatus', 'Allocated'),
     },
     {
-      key: "actions",
-      header: t("actions", "Actions"),
+      key: 'actions',
+      header: t('actions', 'Actions'),
     },
   ];
 
   const tableRows = useMemo(() => {
-    return results.map((ward) => ({
-      id: ward.uuid,
-      bedNumber: ward.bedNumber,
-      location: ward.location.display,
-      occupancyStatus: <CustomTag condition={ward?.status === "OCCUPIED"} />,
-      allocationStatus: <CustomTag condition={ward.location?.uuid} />,
+    return results.flat().map((bed) => ({
+      id: bed.uuid,
+      bedNumber: bed.bedNumber,
+      location: bed.location.display,
+      occupancyStatus: <CustomTag condition={bed?.status === 'OCCUPIED'} />,
+      allocationStatus: <CustomTag condition={Boolean(bed.location?.uuid)} />,
       actions: (
         <>
           <Button
@@ -148,12 +113,12 @@ const BedAdministrationTable: React.FC = () => {
             renderIcon={Edit}
             onClick={(e) => {
               e.preventDefault();
-              setEditData(ward);
+              setEditData(bed);
               setShowEditBedModal(true);
               setShowAddBedModal(false);
             }}
-            kind={"ghost"}
-            iconDescription={t("editBed", "Edit Bed")}
+            kind={'ghost'}
+            iconDescription={t('editBed', 'Edit Bed')}
             hasIconOnly
             size={responsiveSize}
             tooltipAlignment="start"
@@ -163,7 +128,7 @@ const BedAdministrationTable: React.FC = () => {
     }));
   }, [responsiveSize, results, t]);
 
-  if ((isBedDataLoading || isLoading) && !wardsGroupedByLocations.length) {
+  if (isLoadingBeds && !wardsGroupedByLocations.length) {
     return (
       <>
         <Header route="Ward Allocation" />
@@ -193,13 +158,11 @@ const BedAdministrationTable: React.FC = () => {
           <div className={styles.filterContainer}>
             <Dropdown
               id="occupancyStatus"
-              initialSelectedItem={"All"}
+              initialSelectedItem={'All'}
               label=""
-              titleText={
-                t("filterByOccupancyStatus", "Filter by occupancy status") + ":"
-              }
+              titleText={t('filterByOccupancyStatus', 'Filter by occupancy status') + ':'}
               type="inline"
-              items={["All", "Available", "Occupied"]}
+              items={['All', 'Available', 'Occupied']}
               onChange={handleBedStatusChange}
             />
           </div>
@@ -207,11 +170,7 @@ const BedAdministrationTable: React.FC = () => {
       </div>
       <div className={styles.widgetCard}>
         {showAddBedModal ? (
-          <NewBedForm
-            onModalChange={setShowAddBedModal}
-            showModal={showAddBedModal}
-            mutate={mutate}
-          />
+          <NewBedForm onModalChange={setShowAddBedModal} showModal={showAddBedModal} mutate={mutate} />
         ) : null}
         {showEditBedModal ? (
           <EditBedForm
@@ -229,28 +188,19 @@ const BedAdministrationTable: React.FC = () => {
             <Button
               kind="ghost"
               renderIcon={(props) => <Add size={16} {...props} />}
-              onClick={() => setShowAddBedModal(true)}
-            >
-              {t("addBed", "Add bed")}
+              onClick={() => setShowAddBedModal(true)}>
+              {t('addBed', 'Add bed')}
             </Button>
           ) : null}
         </CardHeader>
-        <DataTable
-          rows={tableRows}
-          headers={tableHeaders}
-          isSortable
-          size={isTablet ? "lg" : "sm"}
-          useZebraStyles
-        >
+        <DataTable rows={tableRows} headers={tableHeaders} isSortable size={isTablet ? 'lg' : 'sm'} useZebraStyles>
           {({ rows, headers, getTableProps }) => (
             <TableContainer>
               <Table {...getTableProps()}>
                 <TableHead>
                   <TableRow>
                     {headers.map((header) => (
-                      <TableHeader>
-                        {header.header?.content ?? header.header}
-                      </TableHeader>
+                      <TableHeader>{header.header?.content ?? header.header}</TableHeader>
                     ))}
                   </TableRow>
                 </TableHead>
@@ -258,9 +208,7 @@ const BedAdministrationTable: React.FC = () => {
                   {rows.map((row) => (
                     <TableRow key={row.id}>
                       {row.cells.map((cell) => (
-                        <TableCell key={cell.id}>
-                          {cell.value?.content ?? cell.value}
-                        </TableCell>
+                        <TableCell key={cell.id}>{cell.value?.content ?? cell.value}</TableCell>
                       ))}
                     </TableRow>
                   ))}
@@ -270,21 +218,16 @@ const BedAdministrationTable: React.FC = () => {
                 <div className={styles.tileContainer}>
                   <Tile className={styles.tile}>
                     <div className={styles.tileContent}>
-                      <p className={styles.content}>
-                        {t("No data", "No data to display")}
-                      </p>
-                      <p className={styles.helper}>
-                        {t("checkFilters", "Check the filters above")}
-                      </p>
+                      <p className={styles.content}>{t('No data', 'No data to display')}</p>
+                      <p className={styles.helper}>{t('checkFilters', 'Check the filters above')}</p>
                     </div>
-                    <p className={styles.separator}>{t("or", "or")}</p>
+                    <p className={styles.separator}>{t('or', 'or')}</p>
                     <Button
                       kind="ghost"
                       size="sm"
                       renderIcon={(props) => <Add size={16} {...props} />}
-                      onClick={() => setShowAddBedModal(true)}
-                    >
-                      {t("addBed", "Add bed")}
+                      onClick={() => setShowAddBedModal(true)}>
+                      {t('addBed', 'Add bed')}
                     </Button>
                   </Tile>
                 </div>
@@ -295,12 +238,10 @@ const BedAdministrationTable: React.FC = () => {
                 page={currentPage}
                 pageNumberText="Page Number"
                 pageSize={totalPages}
-                pageSizes={pageSizes?.length > 0 ? pageSizes : [10]}
-                totalItems={bedsMappedToLocation.length ?? 0}
+                pageSizes={[10, 20, 30, 40, 50]}
+                totalItems={wardsGroupedByLocations.length}
                 onChange={({ pageSize, page }) => {
-                  if (pageSize !== currentPageSize) {
-                    setPageSize(pageSize);
-                  }
+                  setPageSize(pageSize);
                   if (page !== currentPage) {
                     goTo(page);
                   }

package/src/bed-administration/bed-administration-table.scss

@@ -1,13 +1,10 @@
 @use '@carbon/colors';
+@use '@carbon/layout';
 @use '@carbon/type';
 
 .widgetCard {
   border: 1px solid colors.$gray-20;
-  margin: 1.5rem;
-
-  :global(.cds--modal-content) {
-    margin-bottom: unset;
-  }
+  margin: layout.$spacing-06;
 
   @media (min-width: 66rem) {
     :global(.cds--modal-container) {
@@ -20,16 +17,15 @@
     :global(.cds--modal-container) {
       max-height: 100%;
     }
-
   }
 }
 
 .flexContainer {
   display: flex;
   justify-content: space-between;
-  padding: 0 1rem;
-  margin-top: 2rem;
-  margin-left: 0.5rem;
+  padding: 0 layout.$spacing-05;
+  margin-top: layout.$spacing-07;
+  margin-left: layout.$spacing-03;
 }
 
 .filterContainer {
@@ -40,7 +36,7 @@
   }
 
   :global(.cds--list-box__menu-icon) {
-    height: 1rem;
+    height: layout.$spacing-05;
   }
 }
 
@@ -53,7 +49,7 @@
 .tileContainer {
   background-color: colors.$white-0;
   border-top: 1px solid colors.$gray-20;
-  padding: 3rem 0;
+  padding: layout.$spacing-09 0;
 }
 
 .tile {
@@ -73,7 +69,7 @@
 .content {
   @include type.type-style('heading-compact-02');
   color: colors.$gray-70;
-  margin-bottom: 0.5rem;
+  margin-bottom: layout.$spacing-03;
 }
 
 .helper {
@@ -85,7 +81,7 @@
   @include type.type-style('body-compact-02');
   color: colors.$gray-70;
   width: 80%;
-  margin: 1.5rem auto;
+  margin: layout.$spacing-06 auto;
   overflow: hidden;
   text-align: center;
 
@@ -101,12 +97,12 @@
   }
 
   &::before {
-    right: 0.5rem;
+    right: layout.$spacing-03;
     margin-left: -50%;
   }
 
   &::after {
-    left: 0.5rem;
+    left: layout.$spacing-03;
     margin-right: -50%;
   }
-}
+}

package/src/bed-administration/bed-administration.resource.ts

@@ -1,6 +1,7 @@
-import { useMemo } from "react";
-import useSWR from "swr";
-import { FetchResponse, openmrsFetch } from "@openmrs/esm-framework";
+import { useMemo } from 'react';
+import useSWR from 'swr';
+import { type FetchResponse, openmrsFetch } from '@openmrs/esm-framework';
+import { type BedPostPayload } from '../types';
 
 interface BedForm {
   bedNumber: string;
@@ -11,10 +12,10 @@ interface BedForm {
   locationUuid: string;
 }
 
-export async function saveBed({ bedPayload }): Promise<FetchResponse<BedForm>> {
+export async function saveBed({ bedPayload }: { bedPayload: BedPostPayload }): Promise<FetchResponse<BedForm>> {
   const response: FetchResponse = await openmrsFetch(`/ws/rest/v1/bed`, {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
     body: bedPayload,
   });
   return response;
@@ -22,10 +23,7 @@ export async function saveBed({ bedPayload }): Promise<FetchResponse<BedForm>> {
 
 export function useBedType() {
   const locationsUrl = `/ws/rest/v1/bedtype`;
-  const { data, error, isLoading } = useSWR<{ data }>(
-    locationsUrl,
-    openmrsFetch
-  );
+  const { data, error, isLoading } = useSWR<{ data }>(locationsUrl, openmrsFetch);
 
   const bedTypes = useMemo(() => {
     const rawData = data?.data?.results ?? [];
@@ -46,14 +44,14 @@ export function useBedType() {
 export async function editBed({
   bedPayload,
   bedId,
+}: {
+  bedPayload: BedPostPayload;
+  bedId: string;
 }): Promise<FetchResponse<BedForm>> {
-  const response: FetchResponse = await openmrsFetch(
-    `/ws/rest/v1/bed/${bedId}`,
-    {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: bedPayload,
-    }
-  );
+  const response: FetchResponse = await openmrsFetch(`/ws/rest/v1/bed/${bedId}`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: bedPayload,
+  });
   return response;
 }

package/src/bed-administration/edit-bed-form.component.tsx

@@ -1,34 +1,26 @@
-import React, { useCallback } from "react";
-import { useTranslation } from "react-i18next";
-import { showToast, showNotification, useConfig } from "@openmrs/esm-framework";
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { showToast, showNotification } from '@openmrs/esm-framework';
 
-import type { InitialData, Mutator } from "../types";
-import { useBedType, editBed } from "./bed-administration.resource";
-import BedAdministrationForm from "./bed-administration-form.component";
-import { BedAdministrationData } from "./bed-administration-types";
-import { useLocationsByTag } from "../summary/summary.resource";
+import type { BedFormData } from '../types';
+import { useBedType, editBed } from './bed-administration.resource';
+import BedAdministrationForm from './bed-administration-form.component';
+import { type BedAdministrationData } from './bed-administration-types';
+import { useLocationsWithAdmissionTag } from '../summary/summary.resource';
 
 interface EditBedFormProps {
   showModal: boolean;
   onModalChange: (showModal: boolean) => void;
-  editData: InitialData;
-  mutate: Mutator;
+  editData: BedFormData;
+  mutate: () => any;
 }
 
-const EditBedForm: React.FC<EditBedFormProps> = ({
-  showModal,
-  onModalChange,
-  editData,
-  mutate,
-}) => {
+const EditBedForm: React.FC<EditBedFormProps> = ({ showModal, onModalChange, editData, mutate }) => {
   const { t } = useTranslation();
-  const { admissionLocationTagUuid } = useConfig();
-  const { data: admissionLocations } = useLocationsByTag(
-    admissionLocationTagUuid
-  );
+  const { data: admissionLocations } = useLocationsWithAdmissionTag();
 
-  const headerTitle = t("editBed", "Edit bed");
-  const occupancyStatuses = ["Available", "Occupied"];
+  const headerTitle = t('editBed', 'Edit bed');
+  const occupancyStatuses = ['Available', 'Occupied'];
   const { bedTypes } = useBedType();
   const availableBedTypes = bedTypes ? bedTypes : [];
   const handleCreateQuestion = useCallback(
@@ -55,13 +47,10 @@ const EditBedForm: React.FC<EditBedFormProps> = ({
       editBed({ bedPayload, bedId: bedUuid })
         .then(() => {
           showToast({
-            title: t("formSaved", "Bed saved"),
-            kind: "success",
+            title: t('formSaved', 'Bed saved'),
+            kind: 'success',
             critical: true,
-            description:
-              bedPayload.bedNumber +
-              " " +
-              t("saveSuccessMessage", "was saved successfully."),
+            description: bedPayload.bedNumber + ' ' + t('saveSuccessMessage', 'was saved successfully.'),
           });
 
           mutate();
@@ -69,8 +58,8 @@ const EditBedForm: React.FC<EditBedFormProps> = ({
         })
         .catch((error) => {
           showNotification({
-            title: t("errorCreatingForm", "Error creating bed"),
-            kind: "error",
+            title: t('errorCreatingForm', 'Error creating bed'),
+            kind: 'error',
             critical: true,
             description: error?.message,
           });
@@ -78,7 +67,7 @@ const EditBedForm: React.FC<EditBedFormProps> = ({
         });
       onModalChange(false);
     },
-    [onModalChange, mutate, editData, t]
+    [onModalChange, mutate, editData, t],
   );
 
   return (

package/src/bed-administration/new-bed-form.component.tsx

@@ -1,61 +1,45 @@
-import React, { useCallback } from "react";
-import { useTranslation } from "react-i18next";
-import { showToast, showNotification, useConfig } from "@openmrs/esm-framework";
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { showToast, showNotification } from '@openmrs/esm-framework';
 
-import type { InitialData, Mutator } from "../types";
-import { useBedType, saveBed } from "./bed-administration.resource";
-import BedAdministrationForm from "./bed-administration-form.component";
-import { useLocationsByTag } from "../summary/summary.resource";
-import { BedAdministrationData } from "./bed-administration-types";
+import type { BedFormData } from '../types';
+import { useBedType, saveBed } from './bed-administration.resource';
+import BedAdministrationForm from './bed-administration-form.component';
+import { useLocationsWithAdmissionTag } from '../summary/summary.resource';
+import { type BedAdministrationData } from './bed-administration-types';
 
 interface NewBedFormProps {
   showModal: boolean;
   onModalChange: (showModal: boolean) => void;
-  mutate: Mutator;
+  mutate: () => any;
 }
 
-const NewBedForm: React.FC<NewBedFormProps> = ({
-  showModal,
-  onModalChange,
-  mutate,
-}) => {
+const NewBedForm: React.FC<NewBedFormProps> = ({ showModal, onModalChange, mutate }) => {
   const { t } = useTranslation();
-  const { admissionLocationTagUuid } = useConfig();
-  const { data: admissionLocations } = useLocationsByTag(
-    admissionLocationTagUuid
-  );
-  const headerTitle = t("createNewBed", "Create a new bed");
-  const occupancyStatuses = ["Available", "Occupied"];
+  const { data: admissionLocations } = useLocationsWithAdmissionTag();
+  const headerTitle = t('createNewBed', 'Create a new bed');
+  const occupancyStatuses = ['Available', 'Occupied'];
   const { bedTypes } = useBedType();
   const availableBedTypes = bedTypes ? bedTypes : [];
 
-  const initialData: InitialData = {
-    uuid: "",
-    bedNumber: "",
-    status: "",
-    description: "",
+  const initialData: BedFormData = {
+    id: 0,
+    uuid: '',
+    bedNumber: '',
+    status: null,
+    description: '',
     row: 0,
     column: 0,
     location: {
-      display: "",
-      uuid: "",
-    },
-    bedType: {
-      name: "",
+      display: '',
+      uuid: '',
     },
+    bedType: null,
   };
 
   const handleCreateQuestion = useCallback(
     (formData: BedAdministrationData) => {
-      const {
-        bedId,
-        description,
-        occupancyStatus,
-        bedRow,
-        bedColumn,
-        location,
-        bedType,
-      } = formData;
+      const { bedId, description, occupancyStatus, bedRow, bedColumn, location, bedType } = formData;
 
       const bedObject = {
         bedNumber: bedId,
@@ -70,8 +54,8 @@ const NewBedForm: React.FC<NewBedFormProps> = ({
       saveBed({ bedPayload: bedObject })
         .then(() => {
           showToast({
-            title: t("formCreated", "New bed created"),
-            kind: "success",
+            title: t('formCreated', 'New bed created'),
+            kind: 'success',
             critical: true,
             description: `Bed ${bedId} was created successfully.`,
           });
@@ -81,8 +65,8 @@ const NewBedForm: React.FC<NewBedFormProps> = ({
         })
         .catch((error) => {
           showNotification({
-            title: t("errorCreatingForm", "Error creating bed"),
-            kind: "error",
+            title: t('errorCreatingForm', 'Error creating bed'),
+            kind: 'error',
             critical: true,
             description: error?.message,
           });
@@ -90,7 +74,7 @@ const NewBedForm: React.FC<NewBedFormProps> = ({
         });
       onModalChange(false);
     },
-    [onModalChange, mutate, t]
+    [onModalChange, mutate, t],
   );
 
   return (