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

package/src/summary/summary.resource.ts

@@ -1,14 +1,26 @@
-import useSWR from "swr";
-import { openmrsFetch } from "@openmrs/esm-framework";
-import type { AdmissionLocation, Bed, MappedBedData } from "../types";
-
-export const useLocationsByTag = (locationUuid: string) => {
-  const locationsUrl = `/ws/rest/v1/location?tag=${locationUuid}&v=full`;
-
-  const { data, error, isLoading, isValidating, mutate } = useSWR<
-    { data },
-    Error
-  >(locationUuid ? locationsUrl : null, openmrsFetch);
+import useSWR from 'swr';
+import { type FetchResponse, openmrsFetch, useConfig } from '@openmrs/esm-framework';
+import type {
+  AdmissionLocation,
+  Bed,
+  BedFetchResponse,
+  BedTagPayload,
+  BedTypePayload,
+  LocationFetchResponse,
+  MappedBedData,
+  Mutator,
+} from '../types';
+import { type BedManagementConfig } from '../config-schema';
+import { useCallback, useEffect, useState } from 'react';
+
+export const useLocationsWithAdmissionTag = () => {
+  const { admissionLocationTagName } = useConfig<BedManagementConfig>();
+  const locationsUrl = `/ws/rest/v1/location?tag=${admissionLocationTagName}&v=full`;
+
+  const { data, error, isLoading, isValidating, mutate } = useSWR<LocationFetchResponse, Error>(
+    admissionLocationTagName ? locationsUrl : null,
+    openmrsFetch,
+  );
 
   return {
     data: data?.data?.results ?? [],
@@ -19,33 +31,23 @@ export const useLocationsByTag = (locationUuid: string) => {
   };
 };
 
-export const getBedsForLocation = (locationUuid: string) => {
-  const locationsUrl = `/ws/rest/v1/bed?locationUuid=${locationUuid}`;
-
-  return openmrsFetch(locationsUrl, {
-    method: "GET",
-  }).then((res) => res?.data?.results ?? []);
-};
-
 export const useBedsForLocation = (locationUuid: string) => {
   const apiUrl = `/ws/rest/v1/bed?locationUuid=${locationUuid}&v=full`;
 
-  const { data, isLoading, error } = useSWR<
-    { data: { results: Array<Bed> } },
-    Error
-  >(locationUuid ? apiUrl : null, openmrsFetch);
-
-  const mappedBedData: MappedBedData = (data?.data?.results ?? []).map(
-    (bed) => ({
-      id: bed.id,
-      number: bed.bedNumber,
-      name: bed.bedType?.displayName,
-      description: bed.bedType?.description,
-      status: bed.status,
-      uuid: bed.uuid,
-    })
+  const { data, isLoading, error } = useSWR<{ data: { results: Array<Bed> } }, Error>(
+    locationUuid ? apiUrl : null,
+    openmrsFetch,
   );
 
+  const mappedBedData: MappedBedData = (data?.data?.results ?? []).map((bed) => ({
+    id: bed.id,
+    number: bed.bedNumber,
+    name: bed.bedType?.displayName,
+    description: bed.bedType?.description,
+    status: bed.status,
+    uuid: bed.uuid,
+  }));
+
   return {
     bedData: mappedBedData,
     isLoading,
@@ -54,41 +56,65 @@ export const useBedsForLocation = (locationUuid: string) => {
 };
 
 export const useLocationName = (locationUuid: string) => {
-  const apiUrl = `/ws/rest/v1/location/${locationUuid}`;
-
-  const { data, isLoading } = useSWR<{ data }, Error>(
-    locationUuid ? apiUrl : null,
-    openmrsFetch
-  );
+  const { data: allLocations, isLoading } = useLocationsWithAdmissionTag();
 
+  const location = allLocations.find((loc) => loc.uuid == locationUuid);
   return {
-    name: data?.data?.display ?? null,
+    name: location?.display ?? null,
     isLoadingLocationData: isLoading,
   };
 };
 
-export const findBedByLocation = (locationUuid: string) => {
-  const locationsUrl = `/ws/rest/v1/bed?locationUuid=${locationUuid}`;
-  return openmrsFetch(locationsUrl, {
-    method: "GET",
-  });
-};
-
-export const useWards = (locationUuid: string) => {
-  const locationsUrl = `/ws/rest/v1/location?tag=${locationUuid}&v=full`;
-  const { data, error, isLoading, isValidating, mutate } = useSWR<
-    { data },
-    Error
-  >(locationUuid ? locationsUrl : null, openmrsFetch);
+export function useBedsGroupedByLocation() {
+  const { data: locations, isLoading: isLoadingLocations } = useLocationsWithAdmissionTag();
+  const [isLoading, setIsLoading] = useState(true);
+  const [isValidating, setIsValidating] = useState(true);
+  const [error, setError] = useState(null);
+  const [result, setResult] = useState([]);
+
+  useEffect(() => {
+    if (!isLoadingLocations && locations && isValidating) {
+      const fetchData = async () => {
+        const promises = locations.map(async (location) => {
+          const bedsUrl = `/ws/rest/v1/bed?locationUuid=${location.uuid}`;
+          const bedsFetchResult = await openmrsFetch<BedFetchResponse>(bedsUrl, {
+            method: 'GET',
+          });
+          if (bedsFetchResult.data.results.length) {
+            return bedsFetchResult.data.results.map((bed) => ({
+              ...bed,
+              location: location,
+            }));
+          }
+          return null;
+        });
+
+        const updatedWards = (await Promise.all(promises)).filter(Boolean);
+        setResult(updatedWards);
+      };
+      fetchData()
+        .catch((e) => {
+          setError(e);
+        })
+        .finally(() => {
+          setIsLoading(false);
+          setIsValidating(false);
+        });
+    }
+  }, [locations, isLoading]);
+
+  const mutate = useCallback(() => {
+    setIsValidating(true);
+  }, []);
 
   return {
-    data,
+    data: result,
     error,
-    isLoading,
+    isLoading: isLoading || isLoadingLocations,
     isValidating,
     mutate,
   };
-};
+}
 
 export const useAdmissionLocations = () => {
   const locationsUrl = `/ws/rest/v1/admissionLocation?v=full`;
@@ -108,10 +134,10 @@ export const useAdmissionLocations = () => {
 
 export const useAdmissionLocationBedLayout = (locationUuid: string) => {
   const locationsUrl = `/ws/rest/v1/admissionLocation/${locationUuid}?v=full`;
-  const { data, error, isLoading, isValidating, mutate } = useSWR<
-    { data: AdmissionLocation },
-    Error
-  >(locationsUrl, openmrsFetch);
+  const { data, error, isLoading, isValidating, mutate } = useSWR<{ data: AdmissionLocation }, Error>(
+    locationsUrl,
+    openmrsFetch,
+  );
 
   return {
     data: data?.data?.bedLayouts ?? [],
@@ -121,3 +147,86 @@ export const useAdmissionLocationBedLayout = (locationUuid: string) => {
     mutate,
   };
 };
+
+export const useBedType = () => {
+  const url = `/ws/rest/v1/bedtype/`;
+  const { data, error, isLoading, isValidating, mutate } = useSWR<{ data }, Error>(url, openmrsFetch);
+  const results = data?.data?.results ? data?.data?.results : [];
+  return {
+    bedTypeData: results,
+    isError: error,
+    loading: isLoading,
+    validate: isValidating,
+    mutate,
+  };
+};
+
+export const useBedTag = () => {
+  const url = `/ws/rest/v1/bedTag/`;
+  const { data, error, isLoading, isValidating, mutate } = useSWR<{ data }, Error>(url, openmrsFetch);
+  const results = data?.data?.results ? data?.data?.results : [];
+  return {
+    bedTypeData: results,
+    isError: error,
+    loading: isLoading,
+    validate: isValidating,
+    mutate,
+  };
+};
+interface BedType {
+  name: string;
+  displayName: string;
+  description: string;
+}
+interface BedTag {
+  name: string;
+}
+export async function saveBedType({
+  bedTypePayload,
+}: {
+  bedTypePayload: BedTypePayload;
+}): Promise<FetchResponse<BedType>> {
+  const response: FetchResponse = await openmrsFetch(`/ws/rest/v1/bedtype`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: bedTypePayload,
+  });
+  return response;
+}
+
+export async function saveBedTag({ bedTagPayload }: { bedTagPayload: BedTagPayload }): Promise<FetchResponse<BedTag>> {
+  const response: FetchResponse = await openmrsFetch(`/ws/rest/v1/bedTag/`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: bedTagPayload,
+  });
+  return response;
+}
+export async function editBedType({
+  bedTypePayload,
+  bedTypeId,
+}: {
+  bedTypePayload: BedTypePayload;
+  bedTypeId: string;
+}): Promise<FetchResponse<BedType>> {
+  const response: FetchResponse = await openmrsFetch(`/ws/rest/v1/bedtype/${bedTypeId}`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: bedTypePayload,
+  });
+  return response;
+}
+export async function editBedTag({
+  bedTagPayload,
+  bedTagId,
+}: {
+  bedTagPayload: BedTagPayload;
+  bedTagId: string;
+}): Promise<FetchResponse<BedType>> {
+  const response: FetchResponse = await openmrsFetch(`/ws/rest/v1/bedTag/${bedTagId}`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: bedTagPayload,
+  });
+  return response;
+}

package/src/summary/summary.scss

@@ -2,58 +2,60 @@
 @use '@carbon/layout';
 
 .cardContainer {
-	background-color: colors.$white-0;
-	display: grid;
-	grid-template-columns: repeat(3, minmax(0, 1fr));
-	justify-content: space-between;
-	padding: 1rem;
+  background-color: colors.$white-0;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  justify-content: space-between;
+  padding: layout.$spacing-05;
 }
 
 .buttonMain {
-	background-color: colors.$white-0;
-	color: colors.$teal-60;
-	cursor: text;
+  background-color: colors.$white-0;
+  color: colors.$teal-60;
+  cursor: text;
 }
 
 .sectionLoader {
-	text-align: center;
+  text-align: center;
 }
 
 .buttonMain {
-	&:active, &:focus, &:hover {
-		color: colors.$teal-60 !important;
-		background-color: colors.$white-0 !important;
-	}
+  &:active,
+  &:focus,
+  &:hover {
+    color: colors.$teal-60 !important;
+    background-color: colors.$white-0 !important;
+  }
 }
 
 .inactiveMain {
-	margin-bottom: 4rem;
+  margin-bottom: layout.$spacing-10;
 }
 
 .buttonContainer {
-	display: flex;
+  display: flex;
 }
 
 .buttonItems {
-	flex: auto;
+  flex: auto;
 }
 
 .pageHeaderContainer {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	padding: layout.$spacing-05;
-	background-color: #ededed;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: layout.$spacing-05;
+  background-color: #ededed;
 }
 
 .pageHeader {
-	text-overflow: ellipsis;
-	overflow: hidden;
-	white-space: nowrap;
-	font-size: 1.25rem;
-	font-weight: 400;
-	line-height: 1.4;
-	letter-spacing: 0;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  font-size: 1.25rem;
+  font-weight: 400;
+  line-height: 1.4;
+  letter-spacing: 0;
 }
 
 .link {
@@ -68,5 +70,5 @@
 }
 
 .loader {
-	margin: 2rem;
+  margin: layout.$spacing-07;
 }

package/src/types.ts

@@ -1,4 +1,4 @@
-import type { KeyedMutator } from "swr";
+import type { KeyedMutator } from 'swr';
 
 export type Tag = {
   uuid: string;
@@ -14,6 +14,12 @@ export type Tag = {
   resourceVersion: string;
 };
 
+export type LocationFetchResponse = {
+  data: {
+    results: Array<Location>;
+  };
+};
+
 export type Location = {
   uuid: string;
   display: string;
@@ -68,22 +74,25 @@ export type Location = {
   beds: Bed[];
 };
 
+export type BedFetchResponse = {
+  results: Array<Bed>;
+};
+
 export interface Bed {
   id: number;
-  bedId: number;
   uuid: string;
   bedNumber: string;
-  bedType: {
-    uuid: string;
-    name: string;
-    displayName: string;
-    description: string;
-    resourceVersion: string;
-  };
+  bedType?: BedType;
   row: number;
   column: number;
-  status: "AVAILABLE" | string;
-  location: string;
+  status: 'AVAILABLE' | 'OCCUPIED';
+}
+
+export interface BedWithLocation extends Bed {
+  location: {
+    display: string;
+    uuid: string;
+  };
 }
 
 export interface BedType {
@@ -91,22 +100,42 @@ export interface BedType {
   name: string;
   displayName: string;
   description: string;
+  resourceVersion: string;
+}
+
+export interface BedFormData extends BedWithLocation {
+  description: string;
 }
 
-export interface InitialData {
+export interface BedTypeData {
   uuid: string;
-  bedNumber: string;
-  status: string;
+  name: string;
+  displayName: string;
   description: string;
+}
+
+export interface BedTagData {
+  uuid: string;
+  name: string;
+}
+
+export interface BedPostPayload {
+  bedNumber: string;
+  bedType: string;
   row: number;
   column: number;
-  location: {
-    display: string;
-    uuid: string;
-  };
-  bedType: {
-    name: string;
-  };
+  status: string;
+  locationUuid: string;
+}
+
+export interface BedTagPayload {
+  name: string;
+}
+
+export interface BedTypePayload {
+  name: string;
+  displayName: string;
+  description: string;
 }
 
 export type Mutator = KeyedMutator<{
@@ -139,14 +168,6 @@ export type MappedBedData = Array<{
 export interface BedDetails extends Bed {
   patient: null | {
     uuid: string;
-    person: {
-      gender: string;
-      age: number;
-      preferredName: {
-        givenName: string;
-        familyName: string;
-      };
-    };
     identifiers: Array<{ identifier: string }>;
   };
 }

package/src/ward-card/ward-card.component.tsx

@@ -1,6 +1,6 @@
-import React from "react";
-import { Layer, Tile } from "@carbon/react";
-import styles from "./ward-card.scss";
+import React from 'react';
+import { Layer, Tile } from '@carbon/react';
+import styles from './ward-card.scss';
 
 interface WardCardProps {
   label: string;
@@ -12,16 +12,9 @@ interface WardCardProps {
   locationUuid?: string;
 }
 
-const WardCard: React.FC<WardCardProps> = ({
-  children,
-  headerLabel,
-  label,
-  value,
-}) => {
+const WardCard: React.FC<WardCardProps> = ({ children, headerLabel, label, value }) => {
   return (
-    <Layer
-      className={`${children && styles.cardWithChildren} ${styles.container}`}
-    >
+    <Layer className={`${children && styles.cardWithChildren} ${styles.container}`}>
       <Tile className={styles.tileContainer}>
         <div className={styles.tileHeader}>
           <div className={styles.headerLabelContainer}>

package/src/ward-card/ward-card.scss

@@ -1,6 +1,6 @@
 @use '@carbon/colors';
 @use '@carbon/layout';
-@use "@carbon/type";
+@use '@carbon/type';
 
 .container {
   flex-grow: 1;
@@ -36,7 +36,7 @@
 }
 
 .headerLabelContainer {
-  margin-bottom: 1rem;
+  margin-bottom: layout.$spacing-05;
 }
 
 .link {

package/src/ward-with-beds/ward-with-beds.component.tsx

@@ -1,6 +1,6 @@
-import React, { useMemo, useState } from "react";
-import { useParams } from "react-router-dom";
-import { useTranslation } from "react-i18next";
+import React, { useMemo, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
 import {
   Button,
   DataTable,
@@ -14,15 +14,12 @@ import {
   TableBody,
   TableCell,
   Tag,
-} from "@carbon/react";
-import { ArrowLeft } from "@carbon/react/icons";
-import { navigate, usePagination } from "@openmrs/esm-framework";
-import Header from "../header/header.component";
-import {
-  useBedsForLocation,
-  useLocationName,
-} from "../summary/summary.resource";
-import styles from "./ward-with-beds.scss";
+} from '@carbon/react';
+import { ArrowLeft } from '@carbon/react/icons';
+import { navigate, usePagination } from '@openmrs/esm-framework';
+import Header from '../header/header.component';
+import { useBedsForLocation, useLocationName } from '../summary/summary.resource';
+import styles from './ward-with-beds.scss';
 
 type RouteParams = { location: string };
 
@@ -33,11 +30,7 @@ const WardWithBeds: React.FC = () => {
   const { name } = useLocationName(location);
 
   const [pageSize, setPageSize] = useState(10);
-  const {
-    results: paginatedData,
-    goTo,
-    currentPage,
-  } = usePagination(bedData, pageSize);
+  const { results: paginatedData, goTo, currentPage } = usePagination(bedData, pageSize);
 
   if (isLoading) {
     <p>Loading...</p>;
@@ -46,28 +39,28 @@ const WardWithBeds: React.FC = () => {
   const tableHeaders = [
     {
       id: 0,
-      header: "ID",
-      key: "id",
+      header: 'ID',
+      key: 'id',
     },
     {
       id: 1,
-      header: "Number",
-      key: "number",
+      header: 'Number',
+      key: 'number',
     },
     {
       id: 2,
-      header: "Name",
-      key: "name",
+      header: 'Name',
+      key: 'name',
     },
     {
       id: 3,
-      header: "Description",
-      key: "description",
+      header: 'Description',
+      key: 'description',
     },
     {
       id: 4,
-      header: "Occupied",
-      key: "occupied",
+      header: 'Occupied',
+      key: 'occupied',
     },
   ];
 
@@ -77,14 +70,14 @@ const WardWithBeds: 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>
     );
   };
@@ -95,13 +88,13 @@ const WardWithBeds: React.FC = () => {
       number: bed.number,
       name: bed.name,
       description: bed.description,
-      occupied: <CustomTag condition={bed?.status === "OCCUPIED"} />,
+      occupied: <CustomTag condition={bed?.status === 'OCCUPIED'} />,
     }));
   }, [paginatedData]);
 
   return (
     <>
-      <Header route={name ? name : "--"} />
+      <Header route={name ? name : '--'} />
       {isLoading && (
         <div className={styles.container}>
           <DataTableSkeleton role="progressbar" zebra />
@@ -119,29 +112,19 @@ const WardWithBeds: React.FC = () => {
                 navigate({
                   to: `${window.getOpenmrsSpaBase()}bed-management`,
                 })
-              }
-            >
+              }>
               <span>Return to summary</span>
             </Button>
           </div>
           <div className={styles.container}>
             <DataTable rows={tableRows} headers={tableHeaders} useZebraStyles>
-              {({
-                rows,
-                headers,
-                getHeaderProps,
-                getRowProps,
-                getTableProps,
-              }) => (
+              {({ rows, headers, getHeaderProps, getRowProps, getTableProps }) => (
                 <TableContainer>
                   <Table {...getTableProps()}>
                     <TableHead>
                       <TableRow>
                         {headers.map((header) => (
-                          <TableHeader
-                            key={header.key}
-                            {...getHeaderProps({ header })}
-                          >
+                          <TableHeader key={header.key} {...getHeaderProps({ header })}>
                             {header.header}
                           </TableHeader>
                         ))}
@@ -151,9 +134,7 @@ const WardWithBeds: React.FC = () => {
                       {rows.map((row) => (
                         <TableRow key={row.id} {...getRowProps({ row })}>
                           {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>
                       ))}