(feat) O3-3836: Added a 'Add bed' button on the summary page of each location.

packages/esm-bed-management-app/src/bed-administration/new-bed-form.component.tsx

@@ -11,9 +11,10 @@ interface NewBedFormProps {
   mutate: () => void;
   onModalChange: (showModal: boolean) => void;
   showModal: boolean;
+  defaultLocation?: { display: string; uuid: string };
 }
 
-const NewBedForm: React.FC<NewBedFormProps> = ({ showModal, onModalChange, mutate }) => {
+const NewBedForm: React.FC<NewBedFormProps> = ({ showModal, onModalChange, mutate, defaultLocation }) => {
   const { t } = useTranslation();
   const { admissionLocations } = useLocationsWithAdmissionTag();
   const { bedTypes } = useBedType();
@@ -28,10 +29,7 @@ const NewBedForm: React.FC<NewBedFormProps> = ({ showModal, onModalChange, mutat
     column: 0,
     description: '',
     id: 0,
-    location: {
-      display: '',
-      uuid: '',
-    },
+    location: defaultLocation || { display: '', uuid: '' },
     row: 0,
     status: null,
     uuid: '',

packages/esm-bed-management-app/src/summary/summary.resource.ts

@@ -40,7 +40,7 @@ export const useLocationsWithAdmissionTag = () => {
 export const useBedsForLocation = (locationUuid: string) => {
   const apiUrl = `${restBaseUrl}/bed?locationUuid=${locationUuid}&v=full`;
 
-  const { data, isLoading, error } = useSWR<{ data: { results: Array<Bed> } }, Error>(
+  const { data, isLoading, error, mutate, isValidating } = useSWR<{ data: { results: Array<Bed> } }, Error>(
     locationUuid ? apiUrl : null,
     openmrsFetch,
   );
@@ -59,8 +59,10 @@ export const useBedsForLocation = (locationUuid: string) => {
       bedsData: mappedBedData,
       errorLoadingBeds: error,
       isLoadingBeds: isLoading,
+      mutate,
+      isValidating,
     }),
-    [mappedBedData, isLoading, error],
+    [mappedBedData, isLoading, error, mutate, isValidating],
   );
 
   return results;

packages/esm-bed-management-app/src/ward-with-beds/ward-with-beds.component.tsx

@@ -14,21 +14,25 @@ import {
   TableBody,
   TableCell,
   Tag,
+  InlineLoading,
 } from '@carbon/react';
-import { ArrowLeft } from '@carbon/react/icons';
+import { ArrowLeft, Add } from '@carbon/react/icons';
 import { navigate, usePagination } from '@openmrs/esm-framework';
-import { useBedsForLocation, useLocationName } from '../summary/summary.resource';
+import { useBedsForLocation, useLocationName, useBedsGroupedByLocation } from '../summary/summary.resource';
+import NewBedForm from '../bed-administration/new-bed-form.component';
 import Header from '../header/header.component';
 import styles from './ward-with-beds.scss';
 
 type RouteParams = { location: string };
 
 const WardWithBeds: React.FC = () => {
+  const { t } = useTranslation();
   const { location } = useParams<RouteParams>();
-  const { bedsData, isLoadingBeds } = useBedsForLocation(location);
+  const { bedsData, isLoadingBeds, mutate, isValidating } = useBedsForLocation(location);
   const { name } = useLocationName(location);
 
   const [pageSize, setPageSize] = useState(10);
+  const [showAddBedModal, setShowAddBedModal] = useState(false);
   const { results: paginatedData, goTo, currentPage } = usePagination(bedsData, pageSize);
 
   if (isLoadingBeds) {
@@ -114,6 +118,25 @@ const WardWithBeds: React.FC = () => {
               }>
               <span>Return to summary</span>
             </Button>
+            <span className={styles.backgroundDataFetchingIndicator}>
+              <span>{isValidating ? <InlineLoading /> : null}</span>
+            </span>
+            <Button
+              kind="ghost"
+              renderIcon={(props) => <Add size={16} {...props} />}
+              onClick={() => setShowAddBedModal(true)}>
+              {t('addBed', 'Add bed')}
+            </Button>
+          </div>
+          <div className={styles.widgetCard}>
+            {showAddBedModal ? (
+              <NewBedForm
+                mutate={mutate}
+                onModalChange={setShowAddBedModal}
+                showModal={showAddBedModal}
+                defaultLocation={{ display: name, uuid: location }}
+              />
+            ) : null}
           </div>
           <div className={styles.container}>
             <DataTable rows={tableRows} headers={tableHeaders} useZebraStyles>

packages/esm-bed-management-app/src/ward-with-beds/ward-with-beds.scss

@@ -7,7 +7,7 @@
 .backButton {
   align-items: center;
   display: flex;
-  justify-content: flex-start;
+  justify-content: space-between;
   margin-left: layout.$spacing-05;
 
   button {