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

package/src/summary/summary.resource.ts

@@ -1,14 +1,26 @@
-import useSWR from "swr";
-import { FetchResponse, 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 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]);
 
-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);
+  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,12 +147,10 @@ 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 { data, error, isLoading, isValidating, mutate } = useSWR<{ data }, Error>(url, openmrsFetch);
   const results = data?.data?.results ? data?.data?.results : [];
   return {
     bedTypeData: results,
@@ -139,10 +163,7 @@ export const useBedType = () => {
 
 export const useBedTag = () => {
   const url = `/ws/rest/v1/bedTag/`;
-  const { data, error, isLoading, isValidating, mutate } = useSWR<
-    { data },
-    Error
-  >(url, openmrsFetch);
+  const { data, error, isLoading, isValidating, mutate } = useSWR<{ data }, Error>(url, openmrsFetch);
   const results = data?.data?.results ? data?.data?.results : [];
   return {
     bedTypeData: results,
@@ -161,51 +182,51 @@ interface BedTag {
   name: string;
 }
 export async function saveBedType({
-  bedPayload,
+  bedTypePayload,
+}: {
+  bedTypePayload: BedTypePayload;
 }): Promise<FetchResponse<BedType>> {
   const response: FetchResponse = await openmrsFetch(`/ws/rest/v1/bedtype`, {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
-    body: bedPayload,
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: bedTypePayload,
   });
   return response;
 }
 
-export async function saveBedTag({
-  bedPayload,
-}): Promise<FetchResponse<BedTag>> {
+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: bedPayload,
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: bedTagPayload,
   });
   return response;
 }
 export async function editBedType({
-  bedPayload,
+  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: bedPayload,
-    }
-  );
+  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({
-  bedPayload,
+  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: bedPayload,
-    }
-  );
+  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,25 +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 }>;
   };
 }
-export interface BedTypeData {
-  uuid: string;
-  name: string;
-  displayName: string;
-  description: string;
-}
-
-export interface BedTagData {
-  uuid: string;
-  name: 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 {