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

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

@@ -1,88 +1,88 @@
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { showToast, showNotification } from '@openmrs/esm-framework';
-
-import type { BedFormData } from '../types';
-import { useBedType, editBed } from './bed-administration.resource';
-import BedAdministrationForm from './bed-administration-form.component';
+import { showSnackbar } from '@openmrs/esm-framework';
 import { type BedAdministrationData } from './bed-administration-types';
+import { type BedFormData } from '../types';
+import { editBed, useBedType } from './bed-administration.resource';
 import { useLocationsWithAdmissionTag } from '../summary/summary.resource';
+import BedAdministrationForm from './bed-administration-form.component';
 
 interface EditBedFormProps {
-  showModal: boolean;
-  onModalChange: (showModal: boolean) => void;
   editData: BedFormData;
-  mutate: () => any;
+  mutate: () => void;
+  onModalChange: (showModal: boolean) => void;
+  showModal: boolean;
 }
 
 const EditBedForm: React.FC<EditBedFormProps> = ({ showModal, onModalChange, editData, mutate }) => {
   const { t } = useTranslation();
-  const { data: admissionLocations } = useLocationsWithAdmissionTag();
-
-  const headerTitle = t('editBed', 'Edit bed');
-  const occupancyStatuses = ['Available', 'Occupied'];
+  const { admissionLocations } = useLocationsWithAdmissionTag();
   const { bedTypes } = useBedType();
   const availableBedTypes = bedTypes ? bedTypes : [];
-  const handleCreateQuestion = useCallback(
+  const headerTitle = t('editBed', 'Edit bed');
+  const occupancyStatuses = ['Available', 'Occupied'];
+
+  const handleCreateBed = useCallback(
     (formData: BedAdministrationData) => {
       const bedUuid = editData.uuid;
+
       const {
+        bedColumn = editData.column.toString(),
         bedId = editData.bedNumber,
-        description = editData.description,
-        occupancyStatus = editData.status,
         bedRow = editData.row.toString(),
-        bedColumn = editData.column.toString(),
-        location: { uuid: bedLocation = editData.location.uuid },
         bedType = editData.bedType.name,
+        description = editData.description,
+        location: { uuid: bedLocation = editData.location.uuid },
+        occupancyStatus = editData.status,
       } = formData;
+
       const bedPayload = {
         bedNumber: bedId,
         bedType,
-        description,
-        status: occupancyStatus.toUpperCase(),
-        row: parseInt(bedRow),
         column: parseInt(bedColumn),
+        description,
         locationUuid: bedLocation,
+        row: parseInt(bedRow),
+        status: occupancyStatus.toUpperCase(),
       };
+
       editBed({ bedPayload, bedId: bedUuid })
         .then(() => {
-          showToast({
-            title: t('formSaved', 'Bed saved'),
+          showSnackbar({
             kind: 'success',
-            critical: true,
-            description: bedPayload.bedNumber + ' ' + t('saveSuccessMessage', 'was saved successfully.'),
+            title: t('bedUpdated', 'Bed updated'),
+            subtitle: t('bedUpdatedSuccessfully', `${bedPayload.bedNumber} updated successfully`, {
+              bedNumber: bedPayload.bedNumber,
+            }),
           });
 
           mutate();
-          onModalChange(false);
         })
         .catch((error) => {
-          showNotification({
-            title: t('errorCreatingForm', 'Error creating bed'),
+          showSnackbar({
             kind: 'error',
-            critical: true,
-            description: error?.message,
+            title: t('errorCreatingForm', 'Error creating bed'),
+            subtitle: error?.message,
           });
+        })
+        .finally(() => {
           onModalChange(false);
         });
-      onModalChange(false);
     },
-    [onModalChange, mutate, editData, t],
+    [editData, mutate, onModalChange, t],
   );
 
   return (
-    <>
-      <BedAdministrationForm
-        onModalChange={onModalChange}
-        allLocations={admissionLocations}
-        availableBedTypes={availableBedTypes}
-        showModal={showModal}
-        handleCreateQuestion={handleCreateQuestion}
-        headerTitle={headerTitle}
-        occupancyStatuses={occupancyStatuses}
-        initialData={editData}
-      />
-    </>
+    <BedAdministrationForm
+      allLocations={admissionLocations}
+      availableBedTypes={availableBedTypes}
+      handleCreateBed={handleCreateBed}
+      headerTitle={headerTitle}
+      initialData={editData}
+      occupancyStatuses={occupancyStatuses}
+      onModalChange={onModalChange}
+      showModal={showModal}
+    />
   );
 };
 

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

@@ -1,43 +1,43 @@
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { showToast, showNotification } from '@openmrs/esm-framework';
-
-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 { showSnackbar } from '@openmrs/esm-framework';
+import { type BedFormData } from '../types';
 import { type BedAdministrationData } from './bed-administration-types';
+import { saveBed, useBedType } from './bed-administration.resource';
+import { useLocationsWithAdmissionTag } from '../summary/summary.resource';
+import BedAdministrationForm from './bed-administration-form.component';
 
 interface NewBedFormProps {
-  showModal: boolean;
+  mutate: () => void;
   onModalChange: (showModal: boolean) => void;
-  mutate: () => any;
+  showModal: boolean;
 }
 
 const NewBedForm: React.FC<NewBedFormProps> = ({ showModal, onModalChange, mutate }) => {
   const { t } = useTranslation();
-  const { data: admissionLocations } = useLocationsWithAdmissionTag();
+  const { admissionLocations } = useLocationsWithAdmissionTag();
+  const { bedTypes } = useBedType();
+
   const headerTitle = t('createNewBed', 'Create a new bed');
   const occupancyStatuses = ['Available', 'Occupied'];
-  const { bedTypes } = useBedType();
   const availableBedTypes = bedTypes ? bedTypes : [];
 
   const initialData: BedFormData = {
-    id: 0,
-    uuid: '',
     bedNumber: '',
-    status: null,
-    description: '',
-    row: 0,
+    bedType: null,
     column: 0,
+    description: '',
+    id: 0,
     location: {
       display: '',
       uuid: '',
     },
-    bedType: null,
+    row: 0,
+    status: null,
+    uuid: '',
   };
 
-  const handleCreateQuestion = useCallback(
+  const handleCreateBed = useCallback(
     (formData: BedAdministrationData) => {
       const { bedId, description, occupancyStatus, bedRow, bedColumn, location, bedType } = formData;
 
@@ -53,43 +53,39 @@ const NewBedForm: React.FC<NewBedFormProps> = ({ showModal, onModalChange, mutat
 
       saveBed({ bedPayload: bedObject })
         .then(() => {
-          showToast({
-            title: t('formCreated', 'New bed created'),
+          showSnackbar({
+            title: t('newBedCreated', 'New bed created'),
             kind: 'success',
-            critical: true,
-            description: `Bed ${bedId} was created successfully.`,
+            subtitle: `Bed ${bedId} created successfully`,
           });
 
           mutate();
-          onModalChange(false);
         })
         .catch((error) => {
-          showNotification({
+          showSnackbar({
             title: t('errorCreatingForm', 'Error creating bed'),
             kind: 'error',
-            critical: true,
-            description: error?.message,
+            subtitle: error?.message,
           });
+        })
+        .finally(() => {
           onModalChange(false);
         });
-      onModalChange(false);
     },
     [onModalChange, mutate, t],
   );
 
   return (
-    <>
-      <BedAdministrationForm
-        onModalChange={onModalChange}
-        allLocations={admissionLocations}
-        availableBedTypes={availableBedTypes}
-        showModal={showModal}
-        handleCreateQuestion={handleCreateQuestion}
-        headerTitle={headerTitle}
-        occupancyStatuses={occupancyStatuses}
-        initialData={initialData}
-      />
-    </>
+    <BedAdministrationForm
+      onModalChange={onModalChange}
+      allLocations={admissionLocations}
+      availableBedTypes={availableBedTypes}
+      showModal={showModal}
+      handleCreateBed={handleCreateBed}
+      headerTitle={headerTitle}
+      occupancyStatuses={occupancyStatuses}
+      initialData={initialData}
+    />
   );
 };
 

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

@@ -18,31 +18,32 @@ import {
 import { Add, Edit } from '@carbon/react/icons';
 import { ErrorState, isDesktop as desktopLayout, useLayoutType } from '@openmrs/esm-framework';
 import type { BedTagData } from '../types';
-import { useBedTag } from '../summary/summary.resource';
-import Header from '../header/header.component';
-import styles from '../bed-administration/bed-administration-table.scss';
-import { CardHeader } from '../card-header/card-header.component';
+import { useBedTags } from '../summary/summary.resource';
 import BedTagForm from './new-tag-form.component';
+import CardHeader from '../card-header/card-header.component';
 import EditBedTagForm from './edit-tag-form.component';
+import Header from '../header/header.component';
+import styles from '../bed-administration/bed-administration-table.scss';
 
 const BedTagAdministrationTable: React.FC = () => {
   const { t } = useTranslation();
-  const headerTitle = t('bedTag', 'Bed Tag');
+  const headerTitle = t('bedTags', 'Bed tags');
   const layout = useLayoutType();
   const isTablet = layout === 'tablet';
   const responsiveSize = isTablet ? 'lg' : 'sm';
   const isDesktop = desktopLayout(layout);
+  const { bedTags, errorLoadingBedTags, isLoadingBedTags, isValidatingBedTags, mutateBedTags } = useBedTags();
+
   const [isBedDataLoading] = useState(false);
   const [showBedTagsModal, setAddBedTagsModal] = useState(false);
   const [showEditBedModal, setShowEditBedModal] = useState(false);
   const [editData, setEditData] = useState<BedTagData>();
   const [currentPage, setCurrentPage] = useState(1);
-  const { bedTypeData, isError, loading, validate, mutate } = useBedTag();
   const [pageSize, setPageSize] = useState(10);
 
   const tableHeaders = [
     {
-      header: t('ids', 'Id'),
+      header: t('ids', 'ID'),
       key: 'ids',
     },
     {
@@ -56,9 +57,8 @@ const BedTagAdministrationTable: React.FC = () => {
   ];
 
   const tableRows = useMemo(() => {
-    return bedTypeData?.map((entry) => ({
+    return bedTags?.map((entry) => ({
       id: entry.uuid,
-      ids: entry.id,
       name: entry?.name,
       actions: (
         <>
@@ -80,12 +80,12 @@ const BedTagAdministrationTable: React.FC = () => {
         </>
       ),
     }));
-  }, [responsiveSize, bedTypeData, t]);
+  }, [responsiveSize, bedTags, t]);
 
-  if (isBedDataLoading || loading) {
+  if (isBedDataLoading || isLoadingBedTags) {
     return (
       <>
-        <Header route="Bed Tag" />
+        <Header title={t('bedTags', 'Bed tags')} />
         <div className={styles.widgetCard}>
           <DataTableSkeleton role="progressbar" compact={isDesktop} zebra />
         </div>
@@ -93,12 +93,12 @@ const BedTagAdministrationTable: React.FC = () => {
     );
   }
 
-  if (isError) {
+  if (errorLoadingBedTags) {
     return (
       <>
-        <Header route="Bed Tag" />
+        <Header title={t('bedTags', 'Bed tags')} />
         <div className={styles.widgetCard}>
-          <ErrorState error={isError} headerTitle={headerTitle} />
+          <ErrorState error={errorLoadingBedTags} headerTitle={headerTitle} />
         </div>
       </>
     );
@@ -106,30 +106,30 @@ const BedTagAdministrationTable: React.FC = () => {
 
   return (
     <>
-      <Header route="Bed Tag" />
+      <Header title={t('bedTags', 'Bed tags')} />
 
       <div className={styles.widgetCard}>
         {showBedTagsModal ? (
-          <BedTagForm onModalChange={setAddBedTagsModal} showModal={showBedTagsModal} mutate={mutate} />
+          <BedTagForm onModalChange={setAddBedTagsModal} showModal={showBedTagsModal} mutate={mutateBedTags} />
         ) : null}
         {showEditBedModal ? (
           <EditBedTagForm
             onModalChange={setShowEditBedModal}
             showModal={showEditBedModal}
             editData={editData}
-            mutate={mutate}
+            mutate={mutateBedTags}
           />
         ) : null}
         <CardHeader title={headerTitle}>
           <span className={styles.backgroundDataFetchingIndicator}>
-            <span>{validate ? <InlineLoading /> : null}</span>
+            <span>{isValidatingBedTags ? <InlineLoading /> : null}</span>
           </span>
-          {bedTypeData?.length ? (
+          {bedTags?.length ? (
             <Button
               kind="ghost"
               renderIcon={(props) => <Add size={16} {...props} />}
               onClick={() => setAddBedTagsModal(true)}>
-              {t('addBedTag', 'Add Bed Tag')}
+              {t('addBedTag', 'Add bed tag')}
             </Button>
           ) : null}
         </CardHeader>
@@ -167,7 +167,7 @@ const BedTagAdministrationTable: React.FC = () => {
                       size="sm"
                       renderIcon={(props) => <Add size={16} {...props} />}
                       onClick={() => setAddBedTagsModal(true)}>
-                      {t('bedTag', 'Add Bed Tag')}
+                      {t('addBedTag', 'Add bed tag')}
                     </Button>
                   </Tile>
                 </div>
@@ -176,7 +176,7 @@ const BedTagAdministrationTable: React.FC = () => {
                 page={currentPage}
                 pageSize={pageSize}
                 pageSizes={[10, 20, 30, 40, 50]}
-                totalItems={bedTypeData.length}
+                totalItems={bedTags.length}
                 onChange={({ page, pageSize }) => {
                   setCurrentPage(page);
                   setPageSize(pageSize);

package/src/bed-tag/bed-tags-admin-form.component.tsx

@@ -7,30 +7,31 @@ import {
   ComposedModal,
   Form,
   FormGroup,
+  InlineNotification,
   ModalBody,
   ModalFooter,
   ModalHeader,
   Stack,
   TextInput,
-  InlineNotification,
 } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
 import { getCoreTranslation, type Location } from '@openmrs/esm-framework';
 import type { BedTagData } from '../types';
+import styles from '../modals.scss';
 
 const BedTagAdministrationSchema = z.object({
   name: z.string().max(255),
 });
 
 interface BedTagAdministrationFormProps {
-  showModal: boolean;
-  onModalChange: (showModal: boolean) => void;
-  availableBedTypes: Array<BedTagData>;
   allLocations: Location[];
-  handleCreateQuestion?: (formData: BedTagData) => void;
+  availableBedTags: Array<BedTagData>;
+  handleCreateBedTag?: (formData: BedTagData) => void;
   handleDeleteBedTag?: () => void;
   headerTitle: string;
   initialData: BedTagData;
+  onModalChange: (showModal: boolean) => void;
+  showModal: boolean;
 }
 
 interface ErrorType {
@@ -38,11 +39,11 @@ interface ErrorType {
 }
 
 const BedTagsAdministrationForm: React.FC<BedTagAdministrationFormProps> = ({
-  showModal,
-  onModalChange,
-  handleCreateQuestion,
+  handleCreateBedTag,
   headerTitle,
   initialData,
+  onModalChange,
+  showModal,
 }) => {
   const { t } = useTranslation();
 
@@ -65,7 +66,7 @@ const BedTagsAdministrationForm: React.FC<BedTagAdministrationFormProps> = ({
     const result = BedTagAdministrationSchema.safeParse(formData);
     if (result.success) {
       setShowErrorNotification(false);
-      handleCreateQuestion(formData);
+      handleCreateBedTag(formData);
     }
   };
 
@@ -76,7 +77,7 @@ const BedTagsAdministrationForm: React.FC<BedTagAdministrationFormProps> = ({
 
   return (
     <ComposedModal open={showModal} onClose={() => onModalChange(false)} preventCloseOnClickOutside>
-      <ModalHeader title={headerTitle} />
+      <ModalHeader className={styles.modalHeader} title={headerTitle} />
       <ModalBody hasScrollingContent>
         <Form>
           <Stack gap={3}>
@@ -88,7 +89,7 @@ const BedTagsAdministrationForm: React.FC<BedTagAdministrationFormProps> = ({
                   <>
                     <TextInput
                       id="bedTag"
-                      labelText={t('bedTag', 'Bed Tag Name')}
+                      labelText={t('bedTags', 'Bed tags')}
                       placeholder={t('bedTagPlaceholder', '')}
                       invalidText={fieldState.error?.message}
                       {...field}

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

@@ -1,55 +1,53 @@
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { showToast, showNotification, useConfig } from '@openmrs/esm-framework';
-
-import { editBedTag, useBedTag } from '../summary/summary.resource';
+import { showSnackbar } from '@openmrs/esm-framework';
+import { editBedTag, useBedTags } from '../summary/summary.resource';
+import { type BedTagData, type Mutator } from '../types';
 import { type BedTagDataAdministration } from '../bed-administration/bed-administration-types';
 import BedTagsAdministrationForm from './bed-tags-admin-form.component';
-import { type BedTagData, type Mutator } from '../types';
 
 interface EditBedTagFormProps {
-  showModal: boolean;
-  onModalChange: (showModal: boolean) => void;
   editData: BedTagData;
-  mutate: Mutator;
+  mutate: Mutator<BedTagData>;
+  onModalChange: (showModal: boolean) => void;
+  showModal: boolean;
 }
 
-const EditBedTagForm: React.FC<EditBedTagFormProps> = ({ showModal, onModalChange, editData, mutate }) => {
+const EditBedTagForm: React.FC<EditBedTagFormProps> = ({ editData, mutate, onModalChange, showModal }) => {
   const { t } = useTranslation();
+  const { bedTags } = useBedTags();
+  const headerTitle = t('editTag', 'Edit Tag');
 
-  const headerTitle = t('editBed', 'Edit Tag');
-  const { bedTypeData } = useBedTag();
-  const availableBedTypes = bedTypeData ? bedTypeData : [];
-
-  const handleCreateQuestion = useCallback(
+  const handleUpdateBedTag = useCallback(
     (formData: BedTagDataAdministration) => {
       const bedUuid = editData.uuid;
       const { name } = formData;
+
       const bedTagPayload = {
         name,
       };
+
       editBedTag({ bedTagPayload, bedTagId: bedUuid })
         .then(() => {
-          showToast({
-            title: t('formSaved', 'Bed Tag'),
+          showSnackbar({
             kind: 'success',
-            critical: true,
-            description: bedTagPayload.name + ' ' + t('saveSuccessMessage', 'was saved successfully.'),
+            title: t('bedTagUpdated', 'Bed tag updated'),
+            subtitle: t('bedTagUpdatedSuccessfully', `${bedTagPayload.name} updated successfully`, {
+              bedTag: bedTagPayload.name,
+            }),
           });
-
           mutate();
-          onModalChange(false);
         })
         .catch((error) => {
-          showNotification({
-            title: t('errorCreatingForm', 'Error creating bed'),
+          showSnackbar({
             kind: 'error',
-            critical: true,
-            description: error?.message,
+            title: t('errorCreatingBedTag', 'Error creating bed tag'),
+            subtitle: error?.message,
           });
+        })
+        .finally(() => {
           onModalChange(false);
         });
-      onModalChange(false);
     },
     [onModalChange, mutate, editData, t],
   );
@@ -57,13 +55,13 @@ const EditBedTagForm: React.FC<EditBedTagFormProps> = ({ showModal, onModalChang
   return (
     <>
       <BedTagsAdministrationForm
-        onModalChange={onModalChange}
-        availableBedTypes={availableBedTypes}
-        showModal={showModal}
-        handleCreateQuestion={handleCreateQuestion}
+        allLocations={[]}
+        availableBedTags={bedTags}
+        handleCreateBedTag={handleUpdateBedTag}
         headerTitle={headerTitle}
         initialData={editData}
-        allLocations={[]}
+        onModalChange={onModalChange}
+        showModal={showModal}
       />
     </>
   );

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

@@ -1,30 +1,28 @@
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { showToast, showNotification, useConfig } from '@openmrs/esm-framework';
-import { useBedType } from '../bed-administration/bed-administration.resource';
+import { showSnackbar } from '@openmrs/esm-framework';
+import { saveBedTag, useBedTags, useLocationsWithAdmissionTag } from '../summary/summary.resource';
+import { type BedTagData } from '../types';
 import BedTagsAdministrationForm from './bed-tags-admin-form.component';
-import { saveBedTag, useLocationsWithAdmissionTag } from '../summary/summary.resource';
-import { type BedTagData, type Mutator } from '../types';
 
 interface BedTagFormProps {
-  showModal: boolean;
+  mutate: () => void;
   onModalChange: (showModal: boolean) => void;
-  mutate: () => any;
+  showModal: boolean;
 }
 
 const NewTagForm: React.FC<BedTagFormProps> = ({ showModal, onModalChange, mutate }) => {
   const { t } = useTranslation();
-  const { data: admissionLocations } = useLocationsWithAdmissionTag();
-  const headerTitle = t('addBedTag', 'Create Bed Tag');
-  const { bedTypes } = useBedType();
-  const availableBedTypes = bedTypes ? bedTypes : [];
+  const { admissionLocations } = useLocationsWithAdmissionTag();
+  const { bedTags } = useBedTags();
+  const headerTitle = t('createBedTag', 'Create bed tag');
 
   const initialData: BedTagData = {
-    uuid: '',
     name: '',
+    uuid: '',
   };
 
-  const handleCreateQuestion = useCallback(
+  const handleCreateBedTag = useCallback(
     (formData: BedTagData) => {
       const { name } = formData;
 
@@ -34,42 +32,39 @@ const NewTagForm: React.FC<BedTagFormProps> = ({ showModal, onModalChange, mutat
 
       saveBedTag({ bedTagPayload })
         .then(() => {
-          showToast({
-            title: t('formCreated', 'Add Bed Tag'),
+          showSnackbar({
             kind: 'success',
-            critical: true,
-            description: `Tag ${name} was created successfully.`,
+            title: t('bedTagCreated', 'Bed tag created'),
+            subtitle: t('bedTagCreatedSuccessfully', `${name} created successfully`, {
+              bedTag: name,
+            }),
           });
-
           mutate();
-          onModalChange(false);
         })
         .catch((error) => {
-          showNotification({
-            title: t('errorCreatingForm', 'Error creating bed'),
+          showSnackbar({
             kind: 'error',
-            critical: true,
-            description: error?.message,
+            title: t('errorCreatingForm', 'Error creating bed'),
+            subtitle: error?.message,
           });
+        })
+        .finally(() => {
           onModalChange(false);
         });
-      onModalChange(false);
     },
     [onModalChange, mutate, t],
   );
 
   return (
-    <>
-      <BedTagsAdministrationForm
-        onModalChange={onModalChange}
-        allLocations={admissionLocations}
-        availableBedTypes={availableBedTypes}
-        showModal={showModal}
-        handleCreateQuestion={handleCreateQuestion}
-        headerTitle={headerTitle}
-        initialData={initialData}
-      />
-    </>
+    <BedTagsAdministrationForm
+      allLocations={admissionLocations}
+      availableBedTags={bedTags}
+      handleCreateBedTag={handleCreateBedTag}
+      headerTitle={headerTitle}
+      initialData={initialData}
+      onModalChange={onModalChange}
+      showModal={showModal}
+    />
   );
 };