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

package/src/{bed-admission/bed-tag → bed-tag}/bed-tag-administration-table.component.tsx

@@ -1,5 +1,5 @@
-import React, { useMemo, useState } from "react";
-import { useTranslation } from "react-i18next";
+import React, { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import {
   Button,
   DataTable,
@@ -14,49 +14,44 @@ import {
   TableHeader,
   TableRow,
   Tile,
-} from "@carbon/react";
-import { Add, Edit } from "@carbon/react/icons";
-import {
-  isDesktop as desktopLayout,
-  useLayoutType,
-} from "@openmrs/esm-framework";
-import { CardHeader, ErrorState } from "@openmrs/esm-patient-common-lib";
-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 BedTagForm from "./new-tag-form.component";
-import EditBedTagForm from "./edit-tag-form.component";
+} from '@carbon/react';
+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 BedTagForm from './new-tag-form.component';
+import EditBedTagForm from './edit-tag-form.component';
 
 const BedTagAdministrationTable: React.FC = () => {
   const { t } = useTranslation();
-  const headerTitle = t("bedTag", "Bed Tag");
+  const headerTitle = t('bedTag', 'Bed Tag');
   const layout = useLayoutType();
-  const isTablet = layout === "tablet";
-  const responsiveSize = isTablet ? "lg" : "sm";
+  const isTablet = layout === 'tablet';
+  const responsiveSize = isTablet ? 'lg' : 'sm';
   const isDesktop = desktopLayout(layout);
   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 [pageSize] = useState(10);
   const { bedTypeData, isError, loading, validate, mutate } = useBedTag();
-  const [currentPageSize, setPageSize] = useState(10);
-  const pageSizes = [10, 20, 30, 40, 50];
+  const [pageSize, setPageSize] = useState(10);
 
   const tableHeaders = [
     {
-      header: t("ids", "Id"),
-      key: "ids",
+      header: t('ids', 'Id'),
+      key: 'ids',
     },
     {
-      header: t("name", "Name"),
-      key: "name",
+      header: t('name', 'Name'),
+      key: 'name',
     },
     {
-      header: t("actions", "Actions"),
-      key: "actions",
+      header: t('actions', 'Actions'),
+      key: 'actions',
     },
   ];
 
@@ -76,8 +71,8 @@ const BedTagAdministrationTable: React.FC = () => {
               setShowEditBedModal(true);
               setAddBedTagsModal(false);
             }}
-            kind={"ghost"}
-            iconDescription={t("editBedTag", "Edit Bed Tag")}
+            kind={'ghost'}
+            iconDescription={t('editBedTag', 'Edit Bed Tag')}
             hasIconOnly
             size={responsiveSize}
             tooltipAlignment="start"
@@ -115,11 +110,7 @@ const BedTagAdministrationTable: React.FC = () => {
 
       <div className={styles.widgetCard}>
         {showBedTagsModal ? (
-          <BedTagForm
-            onModalChange={setAddBedTagsModal}
-            showModal={showBedTagsModal}
-            mutate={mutate}
-          />
+          <BedTagForm onModalChange={setAddBedTagsModal} showModal={showBedTagsModal} mutate={mutate} />
         ) : null}
         {showEditBedModal ? (
           <EditBedTagForm
@@ -137,28 +128,19 @@ const BedTagAdministrationTable: React.FC = () => {
             <Button
               kind="ghost"
               renderIcon={(props) => <Add size={16} {...props} />}
-              onClick={() => setAddBedTagsModal(true)}
-            >
-              {t("addBedTag", "Add Bed Tag")}
+              onClick={() => setAddBedTagsModal(true)}>
+              {t('addBedTag', 'Add Bed Tag')}
             </Button>
           ) : null}
         </CardHeader>
-        <DataTable
-          rows={tableRows}
-          headers={tableHeaders}
-          isSortable
-          size={isTablet ? "lg" : "sm"}
-          useZebraStyles
-        >
+        <DataTable rows={tableRows} headers={tableHeaders} isSortable size={isTablet ? 'lg' : 'sm'} useZebraStyles>
           {({ rows, headers, getTableProps }) => (
             <TableContainer>
               <Table {...getTableProps()}>
                 <TableHead>
                   <TableRow>
                     {headers.map((header) => (
-                      <TableHeader>
-                        {header.header?.content ?? header.header}
-                      </TableHeader>
+                      <TableHeader>{header.header?.content ?? header.header}</TableHeader>
                     ))}
                   </TableRow>
                 </TableHead>
@@ -166,9 +148,7 @@ const BedTagAdministrationTable: React.FC = () => {
                   {rows.map((row) => (
                     <TableRow key={row.id}>
                       {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>
                   ))}
@@ -178,21 +158,16 @@ const BedTagAdministrationTable: React.FC = () => {
                 <div className={styles.tileContainer}>
                   <Tile className={styles.tile}>
                     <div className={styles.tileContent}>
-                      <p className={styles.content}>
-                        {t("No data", "No data to display")}
-                      </p>
-                      <p className={styles.helper}>
-                        {t("checkFilters", "Check the filters above")}
-                      </p>
+                      <p className={styles.content}>{t('No data', 'No data to display')}</p>
+                      <p className={styles.helper}>{t('checkFilters', 'Check the filters above')}</p>
                     </div>
-                    <p className={styles.separator}>{t("or", "or")}</p>
+                    <p className={styles.separator}>{t('or', 'or')}</p>
                     <Button
                       kind="ghost"
                       size="sm"
                       renderIcon={(props) => <Add size={16} {...props} />}
-                      onClick={() => setAddBedTagsModal(true)}
-                    >
-                      {t("bedTag", "Add Bed Tag")}
+                      onClick={() => setAddBedTagsModal(true)}>
+                      {t('bedTag', 'Add Bed Tag')}
                     </Button>
                   </Tile>
                 </div>

package/src/{bed-admission/bed-tag → bed-tag}/bed-tags-admin-form.component.tsx

@@ -1,7 +1,7 @@
-import React, { useState } from "react";
-import { z } from "zod";
-import { useForm, Controller } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
+import React, { useState } from 'react';
+import { z } from 'zod';
+import { useForm, Controller } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
 import {
   Button,
   ComposedModal,
@@ -13,10 +13,10 @@ import {
   Stack,
   TextInput,
   InlineNotification,
-} from "@carbon/react";
-import { useTranslation } from "react-i18next";
-import { Location } from "@openmrs/esm-framework";
-import type { BedTagData } from "../../types";
+} from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { getCoreTranslation, type Location } from '@openmrs/esm-framework';
+import type { BedTagData } from '../types';
 
 const BedTagAdministrationSchema = z.object({
   name: z.string().max(255),
@@ -47,17 +47,17 @@ const BedTagsAdministrationForm: React.FC<BedTagAdministrationFormProps> = ({
   const { t } = useTranslation();
 
   const [showErrorNotification, setShowErrorNotification] = useState(false);
-  const [formStateError, setFormStateError] = useState("");
+  const [formStateError, setFormStateError] = useState('');
 
   const {
     handleSubmit,
     control,
     formState: { isDirty },
   } = useForm<BedTagData>({
-    mode: "all",
+    mode: 'all',
     resolver: zodResolver(BedTagAdministrationSchema),
     defaultValues: {
-      name: initialData.name || "",
+      name: initialData.name || '',
     },
   });
 
@@ -75,16 +75,12 @@ const BedTagsAdministrationForm: React.FC<BedTagAdministrationFormProps> = ({
   };
 
   return (
-    <ComposedModal
-      open={showModal}
-      onClose={() => onModalChange(false)}
-      preventCloseOnClickOutside
-    >
+    <ComposedModal open={showModal} onClose={() => onModalChange(false)} preventCloseOnClickOutside>
       <ModalHeader title={headerTitle} />
-      <Form onSubmit={handleSubmit(onSubmit, onError)}>
-        <ModalBody hasScrollingContent>
+      <ModalBody hasScrollingContent>
+        <Form>
           <Stack gap={3}>
-            <FormGroup legendText={""}>
+            <FormGroup legendText={''}>
               <Controller
                 name="name"
                 control={control}
@@ -92,8 +88,8 @@ const BedTagsAdministrationForm: React.FC<BedTagAdministrationFormProps> = ({
                   <>
                     <TextInput
                       id="bedTag"
-                      labelText={t("bedTag", "Bed Tag Name")}
-                      placeholder={t("bedTagPlaceholder", "")}
+                      labelText={t('bedTag', 'Bed Tag Name')}
+                      placeholder={t('bedTagPlaceholder', '')}
                       invalidText={fieldState.error?.message}
                       {...field}
                     />
@@ -105,25 +101,25 @@ const BedTagsAdministrationForm: React.FC<BedTagAdministrationFormProps> = ({
             {showErrorNotification && (
               <InlineNotification
                 lowContrast
-                title={t("error", "Error")}
-                style={{ minWidth: "100%", margin: "0rem", padding: "0rem" }}
+                title={t('error', 'Error')}
+                style={{ minWidth: '100%', margin: '0', padding: '0' }}
                 role="alert"
                 kind="error"
-                subtitle={t("pleaseFillField", formStateError) + "."}
+                subtitle={t('pleaseFillField', formStateError) + '.'}
                 onClose={() => setShowErrorNotification(false)}
               />
             )}
           </Stack>
-        </ModalBody>
-        <ModalFooter>
-          <Button onClick={() => onModalChange(false)} kind="secondary">
-            {t("cancel", "Cancel")}
-          </Button>
-          <Button disabled={!isDirty} type="submit">
-            <span>{t("save", "Save")}</span>
-          </Button>
-        </ModalFooter>
-      </Form>
+        </Form>
+      </ModalBody>
+      <ModalFooter>
+        <Button onClick={() => onModalChange(false)} kind="secondary">
+          {getCoreTranslation('cancel', 'Cancel')}
+        </Button>
+        <Button disabled={!isDirty} onClick={handleSubmit(onSubmit, onError)}>
+          <span>{t('save', 'Save')}</span>
+        </Button>
+      </ModalFooter>
     </ComposedModal>
   );
 };

package/src/{bed-admission/bed-tag → bed-tag}/edit-tag-form.component.tsx

@@ -1,11 +1,11 @@
-import React, { useCallback } from "react";
-import { useTranslation } from "react-i18next";
-import { showToast, showNotification, useConfig } from "@openmrs/esm-framework";
+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 { BedTagDataAdministration } from "../../bed-administration/bed-administration-types";
-import BedTagsAdministrationForm from "./bed-tags-admin-form.component";
-import { BedTagData, Mutator } from "../../types";
+import { editBedTag, useBedTag } from '../summary/summary.resource';
+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;
@@ -14,15 +14,10 @@ interface EditBedTagFormProps {
   mutate: Mutator;
 }
 
-const EditBedTagForm: React.FC<EditBedTagFormProps> = ({
-  showModal,
-  onModalChange,
-  editData,
-  mutate,
-}) => {
+const EditBedTagForm: React.FC<EditBedTagFormProps> = ({ showModal, onModalChange, editData, mutate }) => {
   const { t } = useTranslation();
 
-  const headerTitle = t("editBed", "Edit Tag");
+  const headerTitle = t('editBed', 'Edit Tag');
   const { bedTypeData } = useBedTag();
   const availableBedTypes = bedTypeData ? bedTypeData : [];
 
@@ -30,19 +25,16 @@ const EditBedTagForm: React.FC<EditBedTagFormProps> = ({
     (formData: BedTagDataAdministration) => {
       const bedUuid = editData.uuid;
       const { name } = formData;
-      const bedPayload = {
+      const bedTagPayload = {
         name,
       };
-      editBedTag({ bedPayload, bedTagId: bedUuid })
+      editBedTag({ bedTagPayload, bedTagId: bedUuid })
         .then(() => {
           showToast({
-            title: t("formSaved", "Bed Tag"),
-            kind: "success",
+            title: t('formSaved', 'Bed Tag'),
+            kind: 'success',
             critical: true,
-            description:
-              bedPayload.name +
-              " " +
-              t("saveSuccessMessage", "was saved successfully."),
+            description: bedTagPayload.name + ' ' + t('saveSuccessMessage', 'was saved successfully.'),
           });
 
           mutate();
@@ -50,8 +42,8 @@ const EditBedTagForm: React.FC<EditBedTagFormProps> = ({
         })
         .catch((error) => {
           showNotification({
-            title: t("errorCreatingForm", "Error creating bed"),
-            kind: "error",
+            title: t('errorCreatingForm', 'Error creating bed'),
+            kind: 'error',
             critical: true,
             description: error?.message,
           });
@@ -59,7 +51,7 @@ const EditBedTagForm: React.FC<EditBedTagFormProps> = ({
         });
       onModalChange(false);
     },
-    [onModalChange, mutate, editData, t]
+    [onModalChange, mutate, editData, t],
   );
 
   return (

package/src/{bed-admission/bed-tag → bed-tag}/new-tag-form.component.tsx

@@ -1,49 +1,42 @@
-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 BedTagsAdministrationForm from "./bed-tags-admin-form.component";
-import { saveBedTag, useLocationsByTag } from "../../summary/summary.resource";
-import { BedTagData, Mutator } from "../../types";
+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 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;
   onModalChange: (showModal: boolean) => void;
-  mutate: Mutator;
+  mutate: () => any;
 }
 
-const NewTagForm: React.FC<BedTagFormProps> = ({
-  showModal,
-  onModalChange,
-  mutate,
-}) => {
+const NewTagForm: React.FC<BedTagFormProps> = ({ showModal, onModalChange, mutate }) => {
   const { t } = useTranslation();
-  const { admissionLocationTagUuid } = useConfig();
-  const { data: admissionLocations } = useLocationsByTag(
-    admissionLocationTagUuid
-  );
-  const headerTitle = t("addBedTag", "Create Bed Tag");
+  const { data: admissionLocations } = useLocationsWithAdmissionTag();
+  const headerTitle = t('addBedTag', 'Create Bed Tag');
   const { bedTypes } = useBedType();
   const availableBedTypes = bedTypes ? bedTypes : [];
 
   const initialData: BedTagData = {
-    uuid: "",
-    name: "",
+    uuid: '',
+    name: '',
   };
 
   const handleCreateQuestion = useCallback(
     (formData: BedTagData) => {
       const { name } = formData;
 
-      const bedObject = {
+      const bedTagPayload = {
         name,
       };
 
-      saveBedTag({ bedPayload: bedObject })
+      saveBedTag({ bedTagPayload })
         .then(() => {
           showToast({
-            title: t("formCreated", "Add Bed Tag"),
-            kind: "success",
+            title: t('formCreated', 'Add Bed Tag'),
+            kind: 'success',
             critical: true,
             description: `Tag ${name} was created successfully.`,
           });
@@ -53,8 +46,8 @@ const NewTagForm: React.FC<BedTagFormProps> = ({
         })
         .catch((error) => {
           showNotification({
-            title: t("errorCreatingForm", "Error creating bed"),
-            kind: "error",
+            title: t('errorCreatingForm', 'Error creating bed'),
+            kind: 'error',
             critical: true,
             description: error?.message,
           });
@@ -62,7 +55,7 @@ const NewTagForm: React.FC<BedTagFormProps> = ({
         });
       onModalChange(false);
     },
-    [onModalChange, mutate, t]
+    [onModalChange, mutate, t],
   );
 
   return (

package/src/{bed-admission/bed-type → bed-type}/bed-type-admin-form.component.tsx

@@ -1,7 +1,7 @@
-import React, { useState } from "react";
-import { z } from "zod";
-import { useForm, Controller } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
+import React, { useState } from 'react';
+import { z } from 'zod';
+import { useForm, Controller } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
 import {
   Button,
   ComposedModal,
@@ -14,10 +14,10 @@ import {
   TextArea,
   TextInput,
   InlineNotification,
-} from "@carbon/react";
-import { useTranslation } from "react-i18next";
-import { Location } from "@openmrs/esm-framework";
-import type { BedType, BedTypeData } from "../../types";
+} from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { getCoreTranslation, type Location } from '@openmrs/esm-framework';
+import type { BedType, BedTypeData } from '../types';
 
 const BedTypeAdministrationSchema = z.object({
   name: z.string().max(255),
@@ -49,19 +49,19 @@ const BedTypeAdministrationForm: React.FC<BedAdministrationFormProps> = ({
   const { t } = useTranslation();
 
   const [showErrorNotification, setShowErrorNotification] = useState(false);
-  const [formStateError, setFormStateError] = useState("");
+  const [formStateError, setFormStateError] = useState('');
 
   const {
     handleSubmit,
     control,
     formState: { isDirty },
   } = useForm<BedTypeData>({
-    mode: "all",
+    mode: 'all',
     resolver: zodResolver(BedTypeAdministrationSchema),
     defaultValues: {
-      name: initialData.name || "",
-      displayName: initialData.displayName || "",
-      description: initialData.description || "",
+      name: initialData.name || '',
+      displayName: initialData.displayName || '',
+      description: initialData.description || '',
     },
   });
 
@@ -79,16 +79,12 @@ const BedTypeAdministrationForm: React.FC<BedAdministrationFormProps> = ({
   };
 
   return (
-    <ComposedModal
-      open={showModal}
-      onClose={() => onModalChange(false)}
-      preventCloseOnClickOutside
-    >
+    <ComposedModal open={showModal} onClose={() => onModalChange(false)} preventCloseOnClickOutside>
       <ModalHeader title={headerTitle} />
-      <Form onSubmit={handleSubmit(onSubmit, onError)}>
-        <ModalBody hasScrollingContent>
+      <ModalBody hasScrollingContent>
+        <Form>
           <Stack gap={3}>
-            <FormGroup legendText={""}>
+            <FormGroup legendText={''}>
               <Controller
                 name="name"
                 control={control}
@@ -96,8 +92,8 @@ const BedTypeAdministrationForm: React.FC<BedAdministrationFormProps> = ({
                   <>
                     <TextInput
                       id="bedName"
-                      labelText={t("bedName", "Bed Name")}
-                      placeholder={t("bedTypePlaceholder", "")}
+                      labelText={t('bedName', 'Bed Name')}
+                      placeholder={t('bedTypePlaceholder', '')}
                       invalidText={fieldState.error?.message}
                       {...field}
                     />
@@ -105,7 +101,7 @@ const BedTypeAdministrationForm: React.FC<BedAdministrationFormProps> = ({
                 )}
               />
             </FormGroup>
-            <FormGroup legendText={""}>
+            <FormGroup legendText={''}>
               <Controller
                 name="displayName"
                 control={control}
@@ -113,8 +109,8 @@ const BedTypeAdministrationForm: React.FC<BedAdministrationFormProps> = ({
                   <>
                     <TextInput
                       id="displayName"
-                      labelText={t("displayName", "Display Name")}
-                      placeholder={t("displayNamePlaceholder", "")}
+                      labelText={t('displayName', 'Display Name')}
+                      placeholder={t('displayNamePlaceholder', '')}
                       invalidText={fieldState.error?.message}
                       {...field}
                     />
@@ -132,12 +128,9 @@ const BedTypeAdministrationForm: React.FC<BedAdministrationFormProps> = ({
                       rows={2}
                       id="description"
                       invalidText={fieldState?.error?.message}
-                      labelText={t("description", "Description")}
+                      labelText={t('description', 'Description')}
                       {...field}
-                      placeholder={t(
-                        "description",
-                        "Enter the bed description"
-                      )}
+                      placeholder={t('description', 'Enter the bed description')}
                     />
                   </>
                 )}
@@ -147,25 +140,25 @@ const BedTypeAdministrationForm: React.FC<BedAdministrationFormProps> = ({
             {showErrorNotification && (
               <InlineNotification
                 lowContrast
-                title={t("error", "Error")}
-                style={{ minWidth: "100%", margin: "0rem", padding: "0rem" }}
+                title={t('error', 'Error')}
+                style={{ minWidth: '100%', margin: '0', padding: '0' }}
                 role="alert"
                 kind="error"
-                subtitle={t("pleaseFillField", formStateError) + "."}
+                subtitle={t('pleaseFillField', formStateError) + '.'}
                 onClose={() => setShowErrorNotification(false)}
               />
             )}
           </Stack>
-        </ModalBody>
-        <ModalFooter>
-          <Button onClick={() => onModalChange(false)} kind="secondary">
-            {t("cancel", "Cancel")}
-          </Button>
-          <Button disabled={!isDirty} type="submit">
-            <span>{t("save", "Save")}</span>
-          </Button>
-        </ModalFooter>
-      </Form>
+        </Form>
+      </ModalBody>
+      <ModalFooter>
+        <Button onClick={() => onModalChange(false)} kind="secondary">
+          {getCoreTranslation('cancel', 'Cancel')}
+        </Button>
+        <Button disabled={!isDirty} onClick={handleSubmit(onSubmit, onError)}>
+          <span>{t('save', 'Save')}</span>
+        </Button>
+      </ModalFooter>
     </ComposedModal>
   );
 };