@kenyaemr/esm-bed-management-app 8.1.1-pre.129 → 8.1.2-pre.154

package/src/header/header.scss

@@ -13,34 +13,36 @@
   border-bottom: 1px solid colors.$gray-20;
 }
 
-.left-justified-items {
+.leftJustifiedItems {
   display: flex;
   flex-direction: row;
   align-items: center;
   cursor: pointer;
-}
 
-.right-justified-items {
-  @include type.type-style('body-compact-02');
-  color: colors.$gray-70;
-  margin: layout.$spacing-03;
-  padding-top: layout.$spacing-04;
-}
+  & > div:nth-child(2) {
+    margin: layout.$spacing-05;
 
-.page-name {
-  white-space: nowrap;
-  @include type.type-style('heading-04');
+    & > p:last-child {
+      white-space: nowrap;
+      @include type.type-style('heading-04');
+    }
+  }
 }
 
-.page-labels {
-  margin: layout.$spacing-05;
+.inPatientPictogram {
+  width: 4.5rem;
+  height: 4.5rem;
+  fill: var(--brand-03);
 }
 
-.middot {
-  margin: 0 layout.$spacing-03;
+.rightJustifiedItems {
+  @include type.type-style('body-compact-02');
+  color: colors.$gray-70;
+  margin: layout.$spacing-03;
+  padding-top: layout.$spacing-04;
 }
 
-.date-and-location {
+.dateAndLocation {
   display: flex;
   justify-content: flex-end;
   align-items: center;
@@ -54,19 +56,3 @@
 .middot {
   margin: 0 layout.$spacing-03;
 }
-
-.view {
-  @include type.type-style('label-01');
-}
-
-svg.iconOverrides {
-  width: 72 !important;
-  height: 72 !important;
-  fill: var(--brand-03);
-}
-
-.svgContainer svg {
-  width: 4.5rem;
-  height: 4.5rem;
-  fill: var(--brand-03);
-}

package/src/home.component.tsx

@@ -1,12 +1,15 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import BedManagementSummary from './summary/summary.component';
 import Header from './header/header.component';
 import styles from './home.scss';
 
 const Home: React.FC = () => {
+  const { t } = useTranslation();
+
   return (
     <section className={styles.section}>
-      <Header route="Summary" />
+      <Header title={t('bedManagement', 'Bed management')} />
       <BedManagementSummary />
     </section>
   );

package/src/index.ts

@@ -2,7 +2,7 @@ import { getAsyncLifecycle, defineConfigSchema, getSyncLifecycle } from '@openmr
 import { configSchema } from './config-schema';
 import { createLeftPanelLink } from './left-panel-link.component';
 
-const moduleName = '@ugandaemr/esm-bed-management-app';
+const moduleName = '@openmrs/esm-bed-management-app';
 
 const options = {
   featureName: 'bed-management',
@@ -22,6 +22,7 @@ export const adminCardLink = getAsyncLifecycle(() => import('./admin-card-link.c
 export const summaryLeftPanelLink = getSyncLifecycle(
   createLeftPanelLink({
     name: 'bed-management',
+    // t('summary', 'Summary')
     title: 'Summary',
   }),
   options,
@@ -29,23 +30,27 @@ export const summaryLeftPanelLink = getSyncLifecycle(
 
 export const adminLeftPanelLink = getSyncLifecycle(
   createLeftPanelLink({
-    name: 'administration',
-    title: 'Ward Allocation',
+    name: 'bed-administration',
+    // t('wardAllocation', 'Ward allocation')
+    title: 'Ward allocation',
   }),
   options,
 );
 
 export const bedTypeLeftPanelLink = getSyncLifecycle(
   createLeftPanelLink({
-    name: 'bed-type',
-    title: 'Bed Type',
+    name: 'bed-types',
+    // t('bedTypes', 'Bed types')
+    title: 'Bed types',
   }),
   options,
 );
+
 export const bedTagLeftPanelLink = getSyncLifecycle(
   createLeftPanelLink({
-    name: 'bed-tag',
-    title: 'Bed Tag',
+    name: 'bed-tags',
+    // t('bedTags', 'Bed tags')
+    title: 'Bed tags',
   }),
   options,
 );

package/src/left-panel/left-panel.component.tsx

@@ -1,19 +1,21 @@
-import React, { useEffect } from 'react';
-import { attach, detach, ExtensionSlot, isDesktop, useLayoutType } from '@openmrs/esm-framework';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
 import { SideNav } from '@carbon/react';
+import { attach, ExtensionSlot, isDesktop, useLayoutType } from '@openmrs/esm-framework';
 import styles from './left-panel.scss';
 
+attach('nav-menu-slot', 'bed-management-left-panel');
+
 const LeftPanel: React.FC = () => {
+  const { t } = useTranslation();
   const layout = useLayoutType();
 
-  useEffect(() => {
-    attach('nav-menu-slot', 'bed-management-left-panel');
-    return () => detach('nav-menu-slot', 'bed-management-left-panel');
-  }, []);
-
   return (
     isDesktop(layout) && (
-      <SideNav aria-label="Bed management left panel" className={styles.leftPanel} expanded>
+      <SideNav
+        aria-label={t('bedManagementLeftPanel', 'Bed management left panel')}
+        className={styles.leftPanel}
+        expanded>
         <ExtensionSlot name="bed-management-left-panel-slot" />
       </SideNav>
     )

package/src/modals.scss

@@ -0,0 +1,29 @@
+@use '@carbon/layout';
+
+.modalHeader {
+  :global {
+    .cds--modal-close-button {
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-end: 0;
+      margin: 0;
+      margin-top: calc(-1 * #{layout.$spacing-05});
+    }
+
+    .cds--modal-close {
+      background-color: rgba(0, 0, 0, 0);
+
+      &:hover {
+        background-color: var(--cds-layer-hover);
+      }
+    }
+
+    .cds--popover--left > .cds--popover > .cds--popover-content {
+      transform: translate(-4rem, 0.85rem);
+    }
+
+    .cds--popover--left > .cds--popover > .cds--popover-caret {
+      transform: translate(-3.75rem, 1.25rem);
+    }
+  }
+}

package/src/root.component.tsx

@@ -1,16 +1,17 @@
 import React, { useEffect } from 'react';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import { setLeftNav, unsetLeftNav } from '@openmrs/esm-framework';
-import Home from './home.component';
-import LeftPanel from './left-panel/left-panel.component';
-import WardWithBeds from './ward-with-beds/ward-with-beds.component';
 import BedAdministrationTable from './bed-administration/bed-administration-table.component';
 import BedTagAdministrationTable from './bed-tag/bed-tag-administration-table.component';
 import BedTypeAdministrationTable from './bed-type/bed-type-administration-table.component';
+import Home from './home.component';
+import LeftPanel from './left-panel/left-panel.component';
+import WardWithBeds from './ward-with-beds/ward-with-beds.component';
 import styles from './root.scss';
 
 const Root: React.FC = () => {
   const spaBasePath = window.spaBase;
+  const bedManagementBasename = window.getOpenmrsSpaBase() + 'bed-management';
 
   useEffect(() => {
     setLeftNav({
@@ -21,15 +22,15 @@ const Root: React.FC = () => {
   }, [spaBasePath]);
 
   return (
-    <BrowserRouter basename={`${window.getOpenmrsSpaBase()}bed-management`}>
+    <BrowserRouter basename={bedManagementBasename}>
       <LeftPanel />
       <main className={styles.container}>
         <Routes>
           <Route path="/" element={<Home />} />
           <Route path="/location/:location" element={<WardWithBeds />} />
-          <Route path="/administration" element={<BedAdministrationTable />} />
-          <Route path="/bed-tag" element={<BedTagAdministrationTable />} />
-          <Route path="/bed-type" element={<BedTypeAdministrationTable />} />
+          <Route path="/bed-administration" element={<BedAdministrationTable />} />
+          <Route path="/bed-tags" element={<BedTagAdministrationTable />} />
+          <Route path="/bed-types" element={<BedTypeAdministrationTable />} />
         </Routes>
       </main>
     </BrowserRouter>

package/src/routes.json

@@ -36,21 +36,6 @@
       "name": "bed-management-home-dashboard-link",
       "slot": "bed-management-left-panel-slot",
       "order": 0
-    },
-    {
-      "component": "bedAdmission",
-      "name": "bed-admission-dashboard",
-      "slot": "bed-admission-dashboard-slot"
-    },
-    {
-      "name": "bed-admission-dashboard-link",
-      "component": "bedAdmissionDashboardLink",
-      "slot": "homepage-dashboard-slot",
-      "meta": {
-        "name": "bed-admission",
-        "slot": "bed-admission-dashboard-slot",
-        "title": "Bed-admission"
-      }
     }
   ]
 }

package/src/summary/summary.resource.ts

@@ -1,38 +1,44 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import useSWR from 'swr';
-import { type FetchResponse, openmrsFetch, useConfig } from '@openmrs/esm-framework';
+import { type FetchResponse, openmrsFetch, restBaseUrl, useConfig } from '@openmrs/esm-framework';
 import type {
   AdmissionLocation,
   Bed,
   BedFetchResponse,
+  BedTagData,
   BedTagPayload,
+  BedType,
   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 locationsUrl = `${restBaseUrl}/location?tag=${admissionLocationTagName}&v=full`;
 
   const { data, error, isLoading, isValidating, mutate } = useSWR<LocationFetchResponse, Error>(
     admissionLocationTagName ? locationsUrl : null,
     openmrsFetch,
   );
 
-  return {
-    data: data?.data?.results ?? [],
-    error,
-    isLoading,
-    isValidating,
-    mutate,
-  };
+  const results = useMemo(
+    () => ({
+      admissionLocations: data?.data?.results ?? [],
+      errorLoadingAdmissionLocations: error,
+      isLoadingAdmissionLocations: isLoading,
+      isValidatingAdmissionLocations: isValidating,
+      mutateAdmissionLocations: mutate,
+    }),
+    [data, error, isLoading, isValidating, mutate],
+  );
+
+  return results;
 };
 
 export const useBedsForLocation = (locationUuid: string) => {
-  const apiUrl = `/ws/rest/v1/bed?locationUuid=${locationUuid}&v=full`;
+  const apiUrl = `${restBaseUrl}/bed?locationUuid=${locationUuid}&v=full`;
 
   const { data, isLoading, error } = useSWR<{ data: { results: Array<Bed> } }, Error>(
     locationUuid ? apiUrl : null,
@@ -40,43 +46,55 @@ export const useBedsForLocation = (locationUuid: string) => {
   );
 
   const mappedBedData: MappedBedData = (data?.data?.results ?? []).map((bed) => ({
+    description: bed.bedType?.description,
     id: bed.id,
-    number: bed.bedNumber,
     name: bed.bedType?.displayName,
-    description: bed.bedType?.description,
+    number: bed.bedNumber,
     status: bed.status,
     uuid: bed.uuid,
   }));
 
-  return {
-    bedData: mappedBedData,
-    isLoading,
-    error,
-  };
+  const results = useMemo(
+    () => ({
+      bedsData: mappedBedData,
+      errorLoadingBeds: error,
+      isLoadingBeds: isLoading,
+    }),
+    [mappedBedData, isLoading, error],
+  );
+
+  return results;
 };
 
 export const useLocationName = (locationUuid: string) => {
-  const { data: allLocations, isLoading } = useLocationsWithAdmissionTag();
+  const { admissionLocations, isLoadingAdmissionLocations } = useLocationsWithAdmissionTag();
+  const matchingLocation = admissionLocations.find((location) => location.uuid === locationUuid);
+
+  const results = useMemo(
+    () => ({
+      name: matchingLocation?.display ?? null,
+      isLoadingLocationData: isLoadingAdmissionLocations,
+    }),
+    [matchingLocation, isLoadingAdmissionLocations],
+  );
 
-  const location = allLocations.find((loc) => loc.uuid == locationUuid);
-  return {
-    name: location?.display ?? null,
-    isLoadingLocationData: isLoading,
-  };
+  return results;
 };
 
 export function useBedsGroupedByLocation() {
-  const { data: locations, isLoading: isLoadingLocations } = useLocationsWithAdmissionTag();
+  const { admissionLocations, isLoadingAdmissionLocations } = useLocationsWithAdmissionTag();
+
+  const [error, setError] = useState<Error | null>(null);
   const [isLoading, setIsLoading] = useState(true);
   const [isValidating, setIsValidating] = useState(true);
-  const [error, setError] = useState(null);
   const [result, setResult] = useState([]);
 
   useEffect(() => {
-    if (!isLoadingLocations && locations && isValidating) {
+    let isSubscribed = true;
+    if (!isLoadingAdmissionLocations && admissionLocations && isValidating) {
       const fetchData = async () => {
-        const promises = locations.map(async (location) => {
-          const bedsUrl = `/ws/rest/v1/bed?locationUuid=${location.uuid}`;
+        const promises = admissionLocations.map(async (location) => {
+          const bedsUrl = `${restBaseUrl}/bed?locationUuid=${location.uuid}`;
           const bedsFetchResult = await openmrsFetch<BedFetchResponse>(bedsUrl, {
             method: 'GET',
           });
@@ -90,103 +108,136 @@ export function useBedsGroupedByLocation() {
         });
 
         const updatedWards = (await Promise.all(promises)).filter(Boolean);
-        setResult(updatedWards);
+        if (isSubscribed) {
+          setResult(updatedWards);
+        }
       };
       fetchData()
-        .catch((e) => {
-          setError(e);
+        .catch((error) => {
+          if (isSubscribed) {
+            setError(error);
+          }
         })
         .finally(() => {
-          setIsLoading(false);
-          setIsValidating(false);
+          if (isSubscribed) {
+            setIsLoading(false);
+            setIsValidating(false);
+          }
         });
     }
-  }, [locations, isLoading]);
+    return () => {
+      isSubscribed = false;
+    };
+  }, [admissionLocations, isLoadingAdmissionLocations, isValidating]);
 
   const mutate = useCallback(() => {
     setIsValidating(true);
   }, []);
 
-  return {
-    data: result,
-    error,
-    isLoading: isLoading || isLoadingLocations,
-    isValidating,
-    mutate,
-  };
+  const results = useMemo(
+    () => ({
+      bedsGroupedByLocation: result,
+      errorFetchingBedsGroupedByLocation: error,
+      isLoadingBedsGroupedByLocation: isLoading || isLoadingAdmissionLocations,
+      isValidatingBedsGroupedByLocation: isValidating,
+      mutateBedsGroupedByLocation: mutate,
+    }),
+    [error, isLoading, isLoadingAdmissionLocations, isValidating, mutate, result],
+  );
+
+  return results;
 }
 
 export const useAdmissionLocations = () => {
-  const locationsUrl = `/ws/rest/v1/admissionLocation?v=full`;
+  const locationsUrl = `${restBaseUrl}/admissionLocation?v=full`;
   const { data, error, isLoading, isValidating, mutate } = useSWR<
     { data: { results: Array<AdmissionLocation> } },
     Error
   >(locationsUrl, openmrsFetch);
 
-  return {
-    data: data?.data?.results ?? [],
-    error,
-    isLoading,
-    isValidating,
-    mutate,
-  };
+  const results = useMemo(
+    () => ({
+      data: data?.data?.results ?? [],
+      error,
+      isLoading,
+      isValidating,
+      mutate,
+    }),
+    [data, error, isLoading, isValidating, mutate],
+  );
+
+  return results;
 };
 
 export const useAdmissionLocationBedLayout = (locationUuid: string) => {
-  const locationsUrl = `/ws/rest/v1/admissionLocation/${locationUuid}?v=full`;
+  const locationsUrl = `${restBaseUrl}/admissionLocation/${locationUuid}?v=full`;
   const { data, error, isLoading, isValidating, mutate } = useSWR<{ data: AdmissionLocation }, Error>(
     locationsUrl,
     openmrsFetch,
   );
 
-  return {
-    data: data?.data?.bedLayouts ?? [],
-    error,
-    isLoading,
-    isValidating,
-    mutate,
-  };
+  const results = useMemo(
+    () => ({
+      data: data?.data?.bedLayouts ?? [],
+      error,
+      isLoading,
+      isValidating,
+      mutate,
+    }),
+    [data, error, isLoading, isValidating, mutate],
+  );
+
+  return results;
 };
 
-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 useBedTypes = () => {
+  const url = `${restBaseUrl}/bedtype/`;
+  const { data, error, isLoading, isValidating, mutate } = useSWR<{ data: { results: Array<BedType> } }, Error>(
+    url,
+    openmrsFetch,
+  );
+
+  const results = useMemo(
+    () => ({
+      bedTypes: data?.data?.results ?? [],
+      errorLoadingBedTypes: error,
+      isLoadingBedTypes: isLoading,
+      isValidatingBedTypes: isValidating,
+      mutateBedTypes: mutate,
+    }),
+    [data, error, isLoading, isValidating, mutate],
+  );
+
+  return results;
 };
 
-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,
-  };
+export const useBedTags = () => {
+  const url = `${restBaseUrl}/bedTag/`;
+  const { data, error, isLoading, isValidating, mutate } = useSWR<{ data: { results: Array<BedTagData> } }, Error>(
+    url,
+    openmrsFetch,
+  );
+
+  const results = useMemo(
+    () => ({
+      bedTags: data?.data?.results ?? [],
+      errorLoadingBedTags: error,
+      isLoadingBedTags: isLoading,
+      isValidatingBedTags: isValidating,
+      mutateBedTags: mutate,
+    }),
+    [data, error, isLoading, isValidating, mutate],
+  );
+
+  return results;
 };
-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`, {
+  const response: FetchResponse = await openmrsFetch(`${restBaseUrl}/bedtype`, {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
     body: bedTypePayload,
@@ -194,39 +245,42 @@ export async function saveBedType({
   return response;
 }
 
-export async function saveBedTag({ bedTagPayload }: { bedTagPayload: BedTagPayload }): Promise<FetchResponse<BedTag>> {
-  const response: FetchResponse = await openmrsFetch(`/ws/rest/v1/bedTag/`, {
+export async function saveBedTag({
+  bedTagPayload,
+}: {
+  bedTagPayload: BedTagPayload;
+}): Promise<FetchResponse<BedTagData>> {
+  return await openmrsFetch(`${restBaseUrl}/bedTag/`, {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
     body: bedTagPayload,
   });
-  return response;
 }
+
 export async function editBedType({
   bedTypePayload,
   bedTypeId,
 }: {
-  bedTypePayload: BedTypePayload;
   bedTypeId: string;
+  bedTypePayload: BedTypePayload;
 }): Promise<FetchResponse<BedType>> {
-  const response: FetchResponse = await openmrsFetch(`/ws/rest/v1/bedtype/${bedTypeId}`, {
+  return await openmrsFetch(`${restBaseUrl}/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}`, {
+  bedTagPayload: BedTagPayload;
+}): Promise<FetchResponse<BedTagData>> {
+  return await openmrsFetch(`${restBaseUrl}/bedTag/${bedTagId}`, {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
     body: bedTagPayload,
   });
-  return response;
 }

package/src/types.ts

@@ -138,9 +138,9 @@ export interface BedTypePayload {
   description: string;
 }
 
-export type Mutator = KeyedMutator<{
+export type Mutator<T> = KeyedMutator<{
   data: {
-    results: Array<Location>;
+    results: Array<T>;
   };
 }>;