(fix) O3-4358: Remove bed description and fix location change bug

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

@@ -17,21 +17,26 @@ import {
   Select,
   SelectItem,
   Stack,
-  TextArea,
   TextInput,
 } from '@carbon/react';
-import { useTranslation } from 'react-i18next';
+import { type TFunction, useTranslation } from 'react-i18next';
 import { getCoreTranslation, type Location } from '@openmrs/esm-framework';
 import { type BedAdministrationData } from './bed-administration-types';
-import { type BedType, type BedFormData } from '../types';
+import type { BedType, BedWithLocation } from '../types';
 import styles from '../modals.scss';
 
+/**
+ * Adds translation for occupancy status options
+ * t('occupancyStatusAvailable', 'Available')
+ * t('occupancyStatusOccupied', 'Occupied')
+ */
+
 interface BedAdministrationFormProps {
   allLocations: Location[];
   availableBedTypes: Array<BedType>;
   handleCreateBed?: (formData: BedAdministrationData) => void;
   headerTitle: string;
-  initialData: BedFormData;
+  initialData: BedWithLocation;
   occupancyStatuses: string[];
   onModalChange: (showModal: boolean) => void;
   showModal: boolean;
@@ -41,30 +46,39 @@ interface ErrorType {
   message: string;
 }
 
-const numberInString = z.string().transform((val, ctx) => {
-  const parsed = parseInt(val);
-  if (isNaN(parsed) || parsed < 1) {
-    ctx.addIssue({
-      code: z.ZodIssueCode.custom,
-      // TODO: Translate this message
-      message: 'Please enter a valid number',
-    });
-    return z.NEVER;
-  }
-  return val;
-});
+const createSchema = (t: TFunction) => {
+  const numberInString = z.string().transform((val, ctx) => {
+    const parsed = parseInt(val);
+    if (isNaN(parsed) || parsed < 1) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: t('invalidNumber', 'Please enter a valid number'),
+      });
+      return z.NEVER;
+    }
+    return val;
+  });
 
-const BedAdministrationSchema = z.object({
-  bedColumn: numberInString,
-  bedId: z.string().max(255),
-  bedRow: numberInString,
-  bedType: z.string().refine((value) => value != '', 'Please select a valid bed type'),
-  description: z.string().max(255),
-  location: z
-    .object({ display: z.string(), uuid: z.string() })
-    .refine((value) => value.display != '', 'Please select a valid location'),
-  occupancyStatus: z.string().refine((value) => value != '', 'Please select a valid occupied status'),
-});
+  return z.object({
+    bedId: z
+      .string()
+      .max(255)
+      .refine((value) => value !== '', {
+        message: t('invalidBedId', 'Bed ID cannot be empty'),
+      }),
+    bedRow: numberInString,
+    bedColumn: numberInString,
+    location: z.object({ display: z.string(), uuid: z.string() }).refine((value) => value.display != '', {
+      message: t('invalidLocation', 'Please select a valid location'),
+    }),
+    occupancyStatus: z.string().refine((value) => value != '', {
+      message: t('invalidOccupancyStatus', 'Please select a valid occupied status'),
+    }),
+    bedType: z.string().refine((value) => value != '', {
+      message: t('invalidBedType', 'Please select a valid bed type'),
+    }),
+  });
+};
 
 const BedAdministrationForm: React.FC<BedAdministrationFormProps> = ({
   allLocations,
@@ -82,11 +96,13 @@ const BedAdministrationForm: React.FC<BedAdministrationFormProps> = ({
   const [showErrorNotification, setShowErrorNotification] = useState(false);
   const [formStateError, setFormStateError] = useState('');
 
+  const BedAdministrationSchema = createSchema(t);
+
   const {
     handleSubmit,
     control,
     formState: { isDirty },
-    setValue
+    setValue,
   } = useForm<BedAdministrationData>({
     mode: 'all',
     resolver: zodResolver(BedAdministrationSchema),
@@ -95,7 +111,6 @@ const BedAdministrationForm: React.FC<BedAdministrationFormProps> = ({
       bedId: initialData.bedNumber ?? '',
       bedRow: initialData.row.toString() ?? '0',
       bedType: initialData.bedType?.name ?? '',
-      description: initialData.bedType?.description ?? '',
       location: initialData.location ?? {},
       occupancyStatus: capitalize(initialData.status) ?? occupancyStatus,
     },
@@ -139,25 +154,6 @@ const BedAdministrationForm: React.FC<BedAdministrationFormProps> = ({
               />
             </FormGroup>
 
-            <FormGroup>
-              <Controller
-                name="description"
-                control={control}
-                render={({ field, fieldState }) => (
-                  <>
-                    <TextArea
-                      id="description"
-                      invalidText={fieldState?.error?.message}
-                      labelText={t('bedDescription', 'Bed description')}
-                      placeholder={t('enterBedDescription', 'Enter the bed description')}
-                      rows={2}
-                      {...field}
-                    />
-                  </>
-                )}
-              />
-            </FormGroup>
-
             <FormGroup>
               <Controller
                 name="bedRow"
@@ -167,8 +163,8 @@ const BedAdministrationForm: React.FC<BedAdministrationFormProps> = ({
                     hideSteppers
                     id="bedRow"
                     invalidText={fieldState?.error?.message}
-                    label="Bed row"
-                    labelText="Bed row"
+                    label={t('bedRow', 'Bed row')}
+                    labelText={t('bedRow', 'Bed row')}
                     {...field}
                   />
                 )}
@@ -183,8 +179,8 @@ const BedAdministrationForm: React.FC<BedAdministrationFormProps> = ({
                   <NumberInput
                     hideSteppers
                     id="bedColumn"
-                    label="Bed column"
-                    labelText="Bed column"
+                    label={t('bedColumn', 'Bed column')}
+                    labelText={t('bedColumn', 'Bed column')}
                     invalidText={fieldState.error?.message}
                     {...field}
                   />
@@ -210,7 +206,9 @@ const BedAdministrationForm: React.FC<BedAdministrationFormProps> = ({
                     */
                     onBlur={(event) => {
                       const selectedLocation = allLocations.find((element) => element.display === event.target.value);
-                      setValue('location', { display: selectedLocation.display, uuid: selectedLocation.uuid });
+                      if (selectedLocation)
+                        setValue('location', { display: selectedLocation.display, uuid: selectedLocation.uuid });
+                      else setValue('location', { display: '', uuid: '' });
                       onBlur();
                     }}
                     onChange={({ selectedItem }) => onChange(selectedItem)}

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

@@ -19,7 +19,7 @@ import {
 } from '@carbon/react';
 import { Add, Edit } from '@carbon/react/icons';
 import { ErrorState, isDesktop as desktopLayout, useLayoutType, usePagination } from '@openmrs/esm-framework';
-import type { BedFormData } from '../types';
+import type { BedWithLocation } from '../types';
 import { useBedsGroupedByLocation } from '../summary/summary.resource';
 import CardHeader from '../card-header/card-header.component';
 import EditBedForm from './edit-bed-form.component';
@@ -44,7 +44,7 @@ const BedAdministrationTable: React.FC = () => {
   } = useBedsGroupedByLocation();
   const [showAddBedModal, setShowAddBedModal] = useState(false);
   const [showEditBedModal, setShowEditBedModal] = useState(false);
-  const [editData, setEditData] = useState<BedFormData>();
+  const [editData, setEditData] = useState<BedWithLocation>();
   const [filterOption, setFilterOption] = useState('ALL');
 
   function CustomTag({ condition }: { condition: boolean }) {

packages/esm-bed-management-app/src/bed-administration/bed-administration-types.ts

@@ -3,7 +3,6 @@ export interface BedAdministrationData {
   bedId: string;
   bedRow: string;
   bedType: string;
-  description: string;
   location: {
     display: string;
     uuid: string;

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

@@ -2,13 +2,13 @@ import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { showSnackbar } from '@openmrs/esm-framework';
 import { type BedAdministrationData } from './bed-administration-types';
-import { type BedFormData } from '../types';
+import { type BedWithLocation } from '../types';
 import { editBed, useBedType } from './bed-administration.resource';
 import { useLocationsWithAdmissionTag } from '../summary/summary.resource';
 import BedAdministrationForm from './bed-administration-form.component';
 
 interface EditBedFormProps {
-  editData: BedFormData;
+  editData: BedWithLocation;
   mutate: () => void;
   onModalChange: (showModal: boolean) => void;
   showModal: boolean;
@@ -31,7 +31,6 @@ const EditBedForm: React.FC<EditBedFormProps> = ({ showModal, onModalChange, edi
         bedId = editData.bedNumber,
         bedRow = editData.row.toString(),
         bedType = editData.bedType.name,
-        description = editData.description,
         location: { uuid: bedLocation = editData.location.uuid },
         occupancyStatus = editData.status,
       } = formData;
@@ -40,7 +39,6 @@ const EditBedForm: React.FC<EditBedFormProps> = ({ showModal, onModalChange, edi
         bedNumber: bedId,
         bedType,
         column: parseInt(bedColumn),
-        description,
         locationUuid: bedLocation,
         row: parseInt(bedRow),
         status: occupancyStatus.toUpperCase(),

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

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { showSnackbar } from '@openmrs/esm-framework';
-import { type BedFormData } from '../types';
+import { type BedWithLocation } from '../types';
 import { type BedAdministrationData } from './bed-administration-types';
 import { saveBed, useBedType } from './bed-administration.resource';
 import { useLocationsWithAdmissionTag } from '../summary/summary.resource';
@@ -23,11 +23,10 @@ const NewBedForm: React.FC<NewBedFormProps> = ({ showModal, onModalChange, mutat
   const occupancyStatuses = ['Available', 'Occupied'];
   const availableBedTypes = bedTypes ? bedTypes : [];
 
-  const initialData: BedFormData = {
+  const initialData: BedWithLocation = {
     bedNumber: '',
     bedType: null,
     column: 0,
-    description: '',
     id: 0,
     location: defaultLocation || { display: '', uuid: '' },
     row: 0,
@@ -37,12 +36,11 @@ const NewBedForm: React.FC<NewBedFormProps> = ({ showModal, onModalChange, mutat
 
   const handleCreateBed = useCallback(
     (formData: BedAdministrationData) => {
-      const { bedId, description, occupancyStatus, bedRow, bedColumn, location, bedType } = formData;
+      const { bedId, occupancyStatus, bedRow, bedColumn, location, bedType } = formData;
 
       const bedObject = {
         bedNumber: bedId,
         bedType,
-        description,
         status: occupancyStatus.toUpperCase(),
         row: parseInt(bedRow.toString()),
         column: parseInt(bedColumn.toString()),

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

@@ -46,9 +46,8 @@ export const useBedsForLocation = (locationUuid: string) => {
   );
 
   const mappedBedData: MappedBedData = (data?.data?.results ?? []).map((bed) => ({
-    description: bed.bedType?.description,
     id: bed.id,
-    name: bed.bedType?.displayName,
+    type: bed.bedType?.displayName,
     number: bed.bedNumber,
     status: bed.status,
     uuid: bed.uuid,

packages/esm-bed-management-app/src/types.ts

@@ -103,10 +103,6 @@ export interface BedType {
   resourceVersion: string;
 }
 
-export interface BedFormData extends BedWithLocation {
-  description: string;
-}
-
 export interface BedTypeData {
   uuid: string;
   name: string;
@@ -159,8 +155,7 @@ export type AdmissionLocation = {
 export type MappedBedData = Array<{
   id: number;
   number: string;
-  name: string;
-  description: string;
+  type: string;
   status: string;
   uuid: string;
 }>;

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

@@ -36,33 +36,28 @@ const WardWithBeds: React.FC = () => {
   const { results: paginatedData, goTo, currentPage } = usePagination(bedsData, pageSize);
 
   if (isLoadingBeds) {
-    <p>Loading...</p>;
+    <p>{t('loading', 'Loading...')}</p>;
   }
 
   const tableHeaders = [
     {
       id: 0,
-      header: 'ID',
+      header: t('id', 'ID'),
       key: 'id',
     },
     {
       id: 1,
-      header: 'Number',
+      header: t('number', 'Number'),
       key: 'number',
     },
     {
       id: 2,
-      header: 'Name',
-      key: 'name',
+      header: t('type', 'Type'),
+      key: 'type',
     },
     {
       id: 3,
-      header: 'Description',
-      key: 'description',
-    },
-    {
-      id: 4,
-      header: 'Occupied',
+      header: t('occupied', 'Occupied'),
       key: 'occupied',
     },
   ];
@@ -89,8 +84,7 @@ const WardWithBeds: React.FC = () => {
     return paginatedData?.map((bed) => ({
       id: bed.id,
       number: bed.number,
-      name: bed.name,
-      description: bed.description,
+      type: bed.type,
       occupied: <CustomTag condition={bed?.status === 'OCCUPIED'} />,
     }));
   }, [paginatedData]);
@@ -116,7 +110,7 @@ const WardWithBeds: React.FC = () => {
                   to: `${window.getOpenmrsSpaBase()}bed-management`,
                 })
               }>
-              <span>Return to summary</span>
+              <span>{t('returnToSummary', 'Return to summary')}</span>
             </Button>
             <span>{isValidating ? <InlineLoading /> : null}</span>
             <Button
@@ -164,11 +158,11 @@ const WardWithBeds: React.FC = () => {
               )}
             </DataTable>
             <Pagination
-              backwardText="Previous page"
-              forwardText="Next page"
-              itemsPerPageText="Items per page:"
+              backwardText={t('previousPage', 'Previous page')}
+              forwardText={t('nextPage', 'Next page')}
+              itemsPerPageText={t('itemsPerPage', 'Items per page:')}
               page={currentPage}
-              pageNumberText="Page Number"
+              pageNumberText={t('pageNumber', 'Page Number')}
               pageSize={pageSize}
               onChange={({ page, pageSize }) => {
                 goTo(page);