@kenyaemr/esm-bed-management-app 1.0.1-pre.4 → 8.0.2

package/src/bed-type/bed-type-admin-form.component.tsx

@@ -0,0 +1,166 @@
+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,
+  Form,
+  FormGroup,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  Stack,
+  TextArea,
+  TextInput,
+  InlineNotification,
+} 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),
+  displayName: z.string().max(255),
+  description: z.string().max(255),
+});
+
+interface BedAdministrationFormProps {
+  showModal: boolean;
+  onModalChange: (showModal: boolean) => void;
+  availableBedTypes: Array<BedType>;
+  allLocations: Location[];
+  handleCreateQuestion?: (formData: BedTypeData) => void;
+  headerTitle: string;
+  initialData: BedTypeData;
+}
+
+interface ErrorType {
+  message: string;
+}
+
+const BedTypeAdministrationForm: React.FC<BedAdministrationFormProps> = ({
+  showModal,
+  onModalChange,
+  handleCreateQuestion,
+  headerTitle,
+  initialData,
+}) => {
+  const { t } = useTranslation();
+
+  const [showErrorNotification, setShowErrorNotification] = useState(false);
+  const [formStateError, setFormStateError] = useState('');
+
+  const {
+    handleSubmit,
+    control,
+    formState: { isDirty },
+  } = useForm<BedTypeData>({
+    mode: 'all',
+    resolver: zodResolver(BedTypeAdministrationSchema),
+    defaultValues: {
+      name: initialData.name || '',
+      displayName: initialData.displayName || '',
+      description: initialData.description || '',
+    },
+  });
+
+  const onSubmit = (formData: BedTypeData) => {
+    const result = BedTypeAdministrationSchema.safeParse(formData);
+    if (result.success) {
+      setShowErrorNotification(false);
+      handleCreateQuestion(formData);
+    }
+  };
+
+  const onError = (error: { [key: string]: ErrorType }) => {
+    setFormStateError(Object.entries(error)[0][1].message);
+    setShowErrorNotification(true);
+  };
+
+  return (
+    <ComposedModal open={showModal} onClose={() => onModalChange(false)} preventCloseOnClickOutside>
+      <ModalHeader title={headerTitle} />
+      <ModalBody hasScrollingContent>
+        <Form>
+          <Stack gap={3}>
+            <FormGroup legendText={''}>
+              <Controller
+                name="name"
+                control={control}
+                render={({ field, fieldState }) => (
+                  <>
+                    <TextInput
+                      id="bedName"
+                      labelText={t('bedName', 'Bed Name')}
+                      placeholder={t('bedTypePlaceholder', '')}
+                      invalidText={fieldState.error?.message}
+                      {...field}
+                    />
+                  </>
+                )}
+              />
+            </FormGroup>
+            <FormGroup legendText={''}>
+              <Controller
+                name="displayName"
+                control={control}
+                render={({ field, fieldState }) => (
+                  <>
+                    <TextInput
+                      id="displayName"
+                      labelText={t('displayName', 'Display Name')}
+                      placeholder={t('displayNamePlaceholder', '')}
+                      invalidText={fieldState.error?.message}
+                      {...field}
+                    />
+                  </>
+                )}
+              />
+            </FormGroup>
+            <FormGroup>
+              <Controller
+                name="description"
+                control={control}
+                render={({ field, fieldState }) => (
+                  <>
+                    <TextArea
+                      rows={2}
+                      id="description"
+                      invalidText={fieldState?.error?.message}
+                      labelText={t('description', 'Description')}
+                      {...field}
+                      placeholder={t('description', 'Enter the bed description')}
+                    />
+                  </>
+                )}
+              />
+            </FormGroup>
+
+            {showErrorNotification && (
+              <InlineNotification
+                lowContrast
+                title={t('error', 'Error')}
+                style={{ minWidth: '100%', margin: '0', padding: '0' }}
+                role="alert"
+                kind="error"
+                subtitle={t('pleaseFillField', formStateError) + '.'}
+                onClose={() => setShowErrorNotification(false)}
+              />
+            )}
+          </Stack>
+        </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>
+  );
+};
+
+export default BedTypeAdministrationForm;

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

@@ -0,0 +1,198 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Button,
+  DataTable,
+  DataTableSkeleton,
+  InlineLoading,
+  Pagination,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tile,
+} from '@carbon/react';
+import { Add, Edit } from '@carbon/react/icons';
+import { ErrorState, isDesktop as desktopLayout, useLayoutType } from '@openmrs/esm-framework';
+import type { BedTypeData } from '../types';
+import { useBedType } from '../summary/summary.resource';
+import Header from '../header/header.component';
+import BedTypeForm from './new-bed-type-form.component';
+import styles from '../bed-administration/bed-administration-table.scss';
+import { CardHeader } from '../card-header/card-header.component';
+import EditBedTypeForm from './edit-bed-type.component';
+
+const BedTypeAdministrationTable: React.FC = () => {
+  const { t } = useTranslation();
+  const headerTitle = t('bedType', 'Bed Type');
+  const layout = useLayoutType();
+  const isTablet = layout === 'tablet';
+  const responsiveSize = isTablet ? 'lg' : 'sm';
+  const isDesktop = desktopLayout(layout);
+  const [showEditBedModal, setShowEditBedModal] = useState(false);
+  const [isBedDataLoading, setIsBedDataLoading] = useState(false);
+  const [showBedTypeModal, setAddBedTypeModal] = useState(false);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [editData, setEditData] = useState<BedTypeData>();
+  const [pageSize] = useState(10);
+  const { bedTypeData, isError, loading, validate, mutate } = useBedType();
+  const [currentPageSize, setPageSize] = useState(10);
+  const pageSizes = [10, 20, 30, 40, 50];
+  const tableHeaders = [
+    {
+      header: t('name', 'Name'),
+      key: 'name',
+    },
+    {
+      header: t('displayName', 'Display Name'),
+      key: 'displayName',
+    },
+    {
+      header: t('description', 'Description'),
+      key: 'description',
+    },
+    {
+      key: 'actions',
+      header: t('actions', 'Actions'),
+    },
+  ];
+
+  const tableRows = useMemo(() => {
+    return bedTypeData?.map((entry) => ({
+      id: entry.uuid,
+      name: entry?.name,
+      displayName: entry?.displayName,
+      description: entry?.description,
+      actions: (
+        <>
+          <Button
+            enterDelayMs={300}
+            renderIcon={Edit}
+            onClick={(e) => {
+              e.preventDefault();
+              setEditData(entry);
+              setShowEditBedModal(true);
+              setAddBedTypeModal(false);
+            }}
+            kind={'ghost'}
+            iconDescription={t('editBedType', 'Edit Bed Type')}
+            hasIconOnly
+            size={responsiveSize}
+            tooltipAlignment="start"
+          />
+        </>
+      ),
+    }));
+  }, [responsiveSize, bedTypeData, t]);
+
+  if (isBedDataLoading || loading) {
+    return (
+      <>
+        <Header route="Bed Type" />
+        <div className={styles.widgetCard}>
+          <DataTableSkeleton role="progressbar" compact={isDesktop} zebra />
+        </div>
+      </>
+    );
+  }
+
+  if (isError) {
+    return (
+      <>
+        <Header route="Bed Type" />
+        <div className={styles.widgetCard}>
+          <ErrorState error={isError} headerTitle={headerTitle} />
+        </div>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <Header route="Bed Type" />
+
+      <div className={styles.widgetCard}>
+        {showBedTypeModal ? (
+          <BedTypeForm onModalChange={setAddBedTypeModal} showModal={showBedTypeModal} mutate={mutate} />
+        ) : null}
+        {showEditBedModal ? (
+          <EditBedTypeForm
+            onModalChange={setShowEditBedModal}
+            showModal={showEditBedModal}
+            editData={editData}
+            mutate={mutate}
+          />
+        ) : null}
+        <CardHeader title={headerTitle}>
+          <span className={styles.backgroundDataFetchingIndicator}>
+            <span>{validate ? <InlineLoading /> : null}</span>
+          </span>
+          {bedTypeData?.length ? (
+            <Button
+              kind="ghost"
+              renderIcon={(props) => <Add size={16} {...props} />}
+              onClick={() => setAddBedTypeModal(true)}>
+              {t('addBedtype', 'Add Bed Type')}
+            </Button>
+          ) : null}
+        </CardHeader>
+        <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>
+                    ))}
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {rows.map((row) => (
+                    <TableRow key={row.id}>
+                      {row.cells.map((cell) => (
+                        <TableCell key={cell.id}>{cell.value?.content ?? cell.value}</TableCell>
+                      ))}
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+              {rows.length === 0 ? (
+                <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>
+                    </div>
+                    <p className={styles.separator}>{t('or', 'or')}</p>
+                    <Button
+                      kind="ghost"
+                      size="sm"
+                      renderIcon={(props) => <Add size={16} {...props} />}
+                      onClick={() => setAddBedTypeModal(true)}>
+                      {t('bedType', 'Add Bed Type')}
+                    </Button>
+                  </Tile>
+                </div>
+              ) : null}
+              <Pagination
+                page={currentPage}
+                pageSize={pageSize}
+                pageSizes={[10, 20, 30, 40, 50]}
+                totalItems={bedTypeData.length}
+                onChange={({ page, pageSize }) => {
+                  setCurrentPage(page);
+                  setPageSize(pageSize);
+                }}
+              />
+            </TableContainer>
+          )}
+        </DataTable>
+      </div>
+    </>
+  );
+};
+export default BedTypeAdministrationTable;

package/src/bed-type/edit-bed-type.component.tsx

@@ -0,0 +1,72 @@
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { showToast, showNotification, useConfig } from '@openmrs/esm-framework';
+
+import { editBedType, useBedType } from '../summary/summary.resource';
+import { type BedTypeDataAdministration } from '../bed-administration/bed-administration-types';
+import { type BedTypeData, type Mutator } from '../types';
+import BedTypeAdministrationForm from './bed-type-admin-form.component';
+
+interface EditBedTypeFormProps {
+  showModal: boolean;
+  onModalChange: (showModal: boolean) => void;
+  editData: BedTypeData;
+  mutate: Mutator;
+}
+
+const EditBedTypeForm: React.FC<EditBedTypeFormProps> = ({ showModal, onModalChange, editData, mutate }) => {
+  const { t } = useTranslation();
+  const headerTitle = t('editBedType', 'Edit Bed Type');
+  const { bedTypeData } = useBedType();
+  const availableBedTypes = bedTypeData ? bedTypeData : [];
+  const handleCreateQuestion = useCallback(
+    (formData: BedTypeDataAdministration) => {
+      const bedUuid = editData.uuid;
+      const { name, displayName, description } = formData;
+      const bedTypePayload = {
+        name,
+        displayName,
+        description,
+      };
+      editBedType({ bedTypePayload, bedTypeId: bedUuid })
+        .then(() => {
+          showToast({
+            title: t('formSaved', 'Bed Type'),
+            kind: 'success',
+            critical: true,
+            description: bedTypePayload.name + ' ' + t('saveSuccessMessage', 'was saved successfully.'),
+          });
+
+          mutate();
+          onModalChange(false);
+        })
+        .catch((error) => {
+          showNotification({
+            title: t('errorCreatingForm', 'Error creating bed'),
+            kind: 'error',
+            critical: true,
+            description: error?.message,
+          });
+          onModalChange(false);
+        });
+      onModalChange(false);
+    },
+    [onModalChange, mutate, editData, t],
+  );
+
+  return (
+    <>
+      <BedTypeAdministrationForm
+        onModalChange={onModalChange}
+        availableBedTypes={availableBedTypes}
+        showModal={showModal}
+        handleCreateQuestion={handleCreateQuestion}
+        headerTitle={headerTitle}
+        initialData={editData}
+        allLocations={[]}
+      />
+    </>
+  );
+};
+
+export default EditBedTypeForm;

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

@@ -0,0 +1,80 @@
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { showToast, showNotification, useConfig } from '@openmrs/esm-framework';
+import type { BedTypeData, Mutator } from '../types';
+import { useBedType } from '../bed-administration/bed-administration.resource';
+import { saveBedType, useLocationsWithAdmissionTag } from '../summary/summary.resource';
+import BedTypeAdministrationForm from './bed-type-admin-form.component';
+
+interface BedTypeFormProps {
+  showModal: boolean;
+  onModalChange: (showModal: boolean) => void;
+  mutate: Mutator;
+}
+
+const NewBedTypeForm: React.FC<BedTypeFormProps> = ({ showModal, onModalChange, mutate }) => {
+  const { t } = useTranslation();
+  const { data: admissionLocations } = useLocationsWithAdmissionTag();
+  const headerTitle = t('addBedType', 'Create Bed type');
+  const { bedTypes } = useBedType();
+  const availableBedTypes = bedTypes ? bedTypes : [];
+
+  const initialData: BedTypeData = {
+    uuid: '',
+    name: '',
+    displayName: '',
+    description: '',
+  };
+
+  const handleCreateQuestion = useCallback(
+    (formData: BedTypeData) => {
+      const { name, displayName, description } = formData;
+
+      const bedTypePayload = {
+        name,
+        displayName,
+        description,
+      };
+
+      saveBedType({ bedTypePayload })
+        .then(() => {
+          showToast({
+            title: t('formCreated', 'Add bed Type'),
+            kind: 'success',
+            critical: true,
+            description: `Bed ${name} was created successfully.`,
+          });
+
+          mutate();
+          onModalChange(false);
+        })
+        .catch((error) => {
+          showNotification({
+            title: t('errorCreatingForm', 'Error creating bed'),
+            kind: 'error',
+            critical: true,
+            description: error?.message,
+          });
+          onModalChange(false);
+        });
+      onModalChange(false);
+    },
+    [onModalChange, mutate, t],
+  );
+
+  return (
+    <>
+      <BedTypeAdministrationForm
+        onModalChange={onModalChange}
+        allLocations={admissionLocations}
+        availableBedTypes={availableBedTypes}
+        showModal={showModal}
+        handleCreateQuestion={handleCreateQuestion}
+        headerTitle={headerTitle}
+        initialData={initialData}
+      />
+    </>
+  );
+};
+
+export default NewBedTypeForm;

package/src/card-header/card-header.component.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import classNames from 'classnames';
+import { useLayoutType } from '@openmrs/esm-framework';
+import styles from './card-header.scss';
+
+interface CardHeaderProps {
+  title: string;
+  children: React.ReactNode;
+}
+
+export function CardHeader({ title, children }: CardHeaderProps) {
+  const isTablet = useLayoutType() === 'tablet';
+
+  return (
+    <div className={classNames(isTablet ? styles.tabletHeader : styles.desktopHeader)}>
+      <h4>{title}</h4>
+      {children}
+    </div>
+  );
+}

package/src/card-header/card-header.scss

@@ -0,0 +1,45 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.desktopHeader,
+.tabletHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: layout.$spacing-04 0 layout.$spacing-04 layout.$spacing-05;
+  background-color: $ui-background;
+
+  h4:after {
+    content: '';
+    display: block;
+    width: layout.$spacing-07;
+    padding-top: 0.188rem;
+    border-bottom: 0.375rem solid var(--brand-03);
+  }
+}
+
+.desktopHeader {
+  height: layout.$spacing-09;
+  h4 {
+    @include type.type-style('heading-compact-02');
+    color: $text-02;
+  }
+}
+
+.tabletHeader {
+  height: 4.5rem;
+  h4 {
+    @include type.type-style('heading-03');
+    color: $text-02;
+  }
+}
+
+// Overriding styles for RTL support
+html[dir='rtl'] {
+  .desktopHeader,
+  .tabletHeader {
+    text-align: right;
+    padding: layout.$spacing-04 layout.$spacing-05 layout.$spacing-04 0;
+  }
+}

package/src/config-schema.ts

@@ -1,21 +1,13 @@
-import { Type } from "@openmrs/esm-framework";
-import { boolean } from "zod";
+import { Type } from '@openmrs/esm-framework';
 
 export const configSchema = {
-  admissionLocationTagUuid: {
-    _type: Type.UUID,
-    _description:
-      "UUID for the location tag of the `Admission Location`. Patients may only be admitted to inpatient care in a location with this tag",
-    _default: "839c65c7-9998-4b90-b80b-39727dfe9fa2",
-  },
-  inpatientVisitUuid: {
-    _type: Type.UUID,
-    _description: "UUID for the inpatient visit",
-    _default: "a73e2ac6-263b-47fc-99fc-e0f2c09fc914",
-  },
-  restrictWardAdministrationToLoginLocation: {
-    _type: boolean,
-    _description: "UUID for the inpatient visit",
-    _default: false,
+  admissionLocationTagName: {
+    _type: Type.String,
+    _description: 'Patients may only be admitted to inpatient care in a location with this tag',
+    _default: 'Admission Location',
   },
 };
+
+export interface BedManagementConfig {
+  admissionLocationTagName: string;
+}

package/src/declarations.d.ts

@@ -1,7 +1,7 @@
-declare module "@carbon/react";
-declare module "*.css";
-declare module "*.scss";
-declare module "*.png";
-declare module "*.svg";
+declare module '@carbon/react';
+declare module '*.css';
+declare module '*.scss';
+declare module '*.png';
+declare module '*.svg';
 
 declare type SideNavProps = object;

package/src/empty-state/empty-state.component.tsx

@@ -1,16 +1,13 @@
-import React from "react";
-import { Layer, Tile } from "@carbon/react";
-import styles from "./empty-state.scss";
+import React from 'react';
+import { Layer, Tile } from '@carbon/react';
+import styles from './empty-state.scss';
 
 type EmptyStateProps = {
   msg: string;
   helper: string;
 };
 
-const EmptyState: React.FC<EmptyStateProps> = ({
-  msg,
-  helper,
-}: EmptyStateProps) => {
+const EmptyState: React.FC<EmptyStateProps> = ({ msg, helper }: EmptyStateProps) => {
   return (
     <Layer className={styles.layer}>
       <Tile className={styles.tile}>
@@ -30,13 +27,7 @@ const EmptyState: React.FC<EmptyStateProps> = ({
               fill="#C6C6C6"
             />
             <circle fill="#C6C6C6" cx={17.636} cy={2.314} r={1.855} />
-            <circle
-              fill="#FFF"
-              fillRule="nonzero"
-              cx={17.636}
-              cy={2.314}
-              r={1.175}
-            />
+            <circle fill="#FFF" fillRule="nonzero" cx={17.636} cy={2.314} r={1.175} />
             <path
               d="M55.893 53.995H24.544a.79.79 0 01-.788-.789V15.644a.79.79 0 01.788-.788h31.349a.79.79 0 01.788.788v37.562a.79.79 0 01-.788.789z"
               fill="#F4F4F4"
@@ -50,13 +41,7 @@ const EmptyState: React.FC<EmptyStateProps> = ({
               fill="#C6C6C6"
             />
             <circle fill="#C6C6C6" cx={40.218} cy={9.755} r={1.855} />
-            <circle
-              fill="#FFF"
-              fillRule="nonzero"
-              cx={40.218}
-              cy={9.755}
-              r={1.13}
-            />
+            <circle fill="#FFF" fillRule="nonzero" cx={40.218} cy={9.755} r={1.13} />
           </g>
         </svg>
         <p className={styles.content}>{msg}</p>