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

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

@@ -0,0 +1,246 @@
+import React, { 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, Delete } from "@carbon/react/icons";
+import {
+  isDesktop as desktopLayout,
+  useLayoutType,
+} from "@openmrs/esm-framework";
+import { CardHeader, ErrorState } from "@openmrs/esm-patient-common-lib";
+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 EditBedTypeForm from "./edit-bed-type.component";
+import DeleteBedType from "./delete-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] = useState(false);
+  const [showBedTypeModal, setAddBedTypeModal] = useState(false);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [editData, setEditData] = useState<BedTypeData>();
+  const [showDeleteBedTypeModal, setDeleteBedTypeModal] = useState(false);
+  const [pageSize] = useState(10);
+  const { bedTypeData, isError, loading, validate, mutate } = useBedType();
+  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);
+              setDeleteBedTypeModal(false);
+            }}
+            kind={"ghost"}
+            iconDescription={t("editBedType", "Edit Bed Type")}
+            hasIconOnly
+            size={responsiveSize}
+            tooltipAlignment="start"
+          />
+          <Button
+            enterDelayMs={300}
+            renderIcon={Delete}
+            onClick={(e) => {
+              e.preventDefault();
+              setEditData(entry);
+              setShowEditBedModal(false);
+              setAddBedTypeModal(false);
+              setDeleteBedTypeModal(true);
+            }}
+            kind={"ghost"}
+            iconDescription={t("deleteBedTag", "Delete Bed Tag")}
+            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}
+        {showDeleteBedTypeModal ? (
+          <DeleteBedType
+            onModalChange={setDeleteBedTypeModal}
+            showModal={showDeleteBedTypeModal}
+            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);
+                  pageSize(pageSize);
+                }}
+              />
+            </TableContainer>
+          )}
+        </DataTable>
+      </div>
+    </>
+  );
+};
+export default BedTypeAdministrationTable;

package/src/bed-admission/bed-type/delete-bed-type.component.tsx

@@ -0,0 +1,69 @@
+import React, { useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { showToast, showNotification } from "@openmrs/esm-framework";
+import { deleteBedType } from "../../summary/summary.resource";
+import { BedTagDataAdministration } from "../../bed-administration/bed-administration-types";
+import { BedTagData, Mutator } from "../../types";
+import DeleteBedTypesForm from "./deleteBedtypeForm.component";
+
+interface DeleteBedTypeFormProps {
+  showModal: boolean;
+  onModalChange: (showModal: boolean) => void;
+  editData: BedTagData;
+  mutate: Mutator;
+}
+
+const DeleteBedType: React.FC<DeleteBedTypeFormProps> = ({
+  showModal,
+  onModalChange,
+  editData,
+  mutate,
+}) => {
+  const { t } = useTranslation();
+  const headerTitle = t("deleteBedType", "Delete bed Type");
+  const handleDeleteQuestion = useCallback(
+    (formData: BedTagDataAdministration) => {
+      const bedUuid = editData.uuid;
+      const { name } = formData;
+      deleteBedType(bedUuid)
+        .then(() => {
+          showToast({
+            title: t("bedTypeDeleted", "Bed Type Deleted"),
+            kind: "success",
+            critical: true,
+            description:
+              name +
+              " " +
+              t("bedTypeDeleteSuccessMessage", "was deleted successfully."),
+          });
+
+          mutate();
+          onModalChange(false);
+        })
+        .catch((error) => {
+          showNotification({
+            title: t("errorDeletingBedType", "Error deleting bed type"),
+            kind: "error",
+            critical: true,
+            description: error?.message,
+          });
+          onModalChange(false);
+        });
+      onModalChange(false);
+    },
+    [onModalChange, mutate, editData, t]
+  );
+  return (
+    <>
+      <DeleteBedTypesForm
+        onModalChange={onModalChange}
+        showModal={showModal}
+        handleDeleteBedTag={handleDeleteQuestion}
+        headerTitle={headerTitle}
+        initialData={editData}
+      />
+    </>
+  );
+};
+
+export default DeleteBedType;

package/src/bed-admission/bed-type/deleteBedtypeForm.component.tsx

@@ -0,0 +1,108 @@
+import React, { useState } from "react";
+import { z } from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+  Button,
+  ComposedModal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  Stack,
+  InlineNotification,
+} from "@carbon/react";
+import { useTranslation } from "react-i18next";
+import styles from "../../bed-administration/bed-administration-table.scss";
+interface BedTagData {
+  name: string;
+}
+
+const BedTagAdministrationSchema = z.object({
+  name: z.string().max(255),
+});
+
+interface BedTagAdministrationFormProps {
+  showModal: boolean;
+  onModalChange: (showModal: boolean) => void;
+  handleDeleteBedTag?: (formData: BedTagData) => void;
+  headerTitle: string;
+  initialData: BedTagData;
+}
+
+interface ErrorType {
+  message: string;
+}
+
+const DeleteBedTypesForm: React.FC<BedTagAdministrationFormProps> = ({
+  showModal,
+  onModalChange,
+  handleDeleteBedTag,
+  headerTitle,
+  initialData,
+}) => {
+  const { t } = useTranslation();
+
+  const [showErrorNotification, setShowErrorNotification] = useState(false);
+  const [formStateError, setFormStateError] = useState("");
+
+  const { handleSubmit } = useForm<BedTagData>({
+    mode: "all",
+    resolver: zodResolver(BedTagAdministrationSchema),
+    defaultValues: {
+      name: initialData.name || "",
+    },
+  });
+
+  const onSubmit = (formData: BedTagData) => {
+    const result = BedTagAdministrationSchema.safeParse(formData);
+    if (result.success) {
+      setShowErrorNotification(false);
+      if (handleDeleteBedTag) {
+        handleDeleteBedTag(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} />
+      <form onSubmit={handleSubmit(onSubmit, onError)}>
+        <ModalBody hasScrollingContent>
+          <Stack gap={3}>
+            <ModalBody>Are you sure you want to delete this bed tag?</ModalBody>
+            {showErrorNotification && (
+              <InlineNotification
+                lowContrast
+                title={t("error", "Error")}
+                style={{ minWidth: "100%", margin: "0rem", padding: "0rem" }}
+                role="alert"
+                kind="error"
+                subtitle={t("pleaseFillField", formStateError) + "."}
+                onClose={() => setShowErrorNotification(false)}
+              />
+            )}
+          </Stack>
+        </ModalBody>
+        <ModalFooter>
+          <Button onClick={() => onModalChange(false)} kind="secondary">
+            {t("cancel", "Cancel")}
+          </Button>
+          <Button type="submit" className={styles.deleteButton}>
+            <span>{t("delete", "Delete")}</span>
+          </Button>
+        </ModalFooter>
+      </form>
+    </ComposedModal>
+  );
+};
+
+export default DeleteBedTypesForm;

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

@@ -0,0 +1,80 @@
+import React, { useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { showToast, showNotification } from "@openmrs/esm-framework";
+
+import { editBedType, useBedType } from "../../summary/summary.resource";
+import { BedTypeDataAdministration } from "../../bed-administration/bed-administration-types";
+import { BedTypeData, 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 bedPayload = {
+        name,
+        displayName,
+        description,
+      };
+      editBedType({ bedPayload, bedTypeId: bedUuid })
+        .then(() => {
+          showToast({
+            title: t("formSaved", "Bed Type"),
+            kind: "success",
+            critical: true,
+            description:
+              bedPayload.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-admission/bed-type/new-bed-type-form.component.tsx

@@ -0,0 +1,87 @@
+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, useLocationsByTag } 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 { admissionLocationTagUuid } = useConfig();
+  const { data: admissionLocations } = useLocationsByTag(
+    admissionLocationTagUuid
+  );
+  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 bedObject = {
+        name,
+        displayName,
+        description,
+      };
+
+      saveBedType({ bedPayload: bedObject })
+        .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/bed-admission/types.ts

@@ -123,9 +123,7 @@ export interface UuidDisplay {
 export interface patientDetailsProps {
   name: string;
   patientUuid: string;
-  encounter: {
-    uuid: string;
-  };
+  encounter: string;
   locationUuid: string;
   locationTo: string;
   locationFrom: string;

package/src/bed-admission/ward/new-ward-form.component.tsx

@@ -0,0 +1,81 @@
+import React, { useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { showToast, showNotification, useConfig } from "@openmrs/esm-framework";
+import { saveWard, useLocationsByTag } from "../../summary/summary.resource";
+import { LocationTagData, Mutator } from "../../types";
+import WardAdministrationForm from "./ward-admin-form.component";
+
+interface WardFormProps {
+  showModal: boolean;
+  onModalChange: (showModal: boolean) => void;
+  mutate: Mutator;
+}
+const NewWardForm: React.FC<WardFormProps> = ({
+  showModal,
+  onModalChange,
+  mutate,
+}) => {
+  const { t } = useTranslation();
+  const { admissionLocationTagUuid } = useConfig();
+  const { data: admissionLocations } = useLocationsByTag(
+    admissionLocationTagUuid
+  );
+  const headerTitle = t("addWard", "Create new Ward");
+  const initialData: LocationTagData = {
+    uuid: "",
+    name: "",
+    tagLocation: {
+      display: "",
+      uuid: "",
+    },
+  };
+
+  const handleCreateQuestion = useCallback(
+    (formData: LocationTagData) => {
+      const { name, tagLocation } = formData;
+      const wardObject = {
+        name,
+        tags: [tagLocation.uuid],
+      };
+
+      saveWard({ wardPayload: wardObject })
+        .then(() => {
+          showToast({
+            title: t("formCreated", "Add Ward"),
+            kind: "success",
+            critical: true,
+            description: `Ward ${name} was created successfully.`,
+          });
+
+          mutate();
+          onModalChange(false);
+        })
+        .catch((error) => {
+          showNotification({
+            title: t("errorCreatingForm", "Error creating ward"),
+            kind: "error",
+            critical: true,
+            description: error?.message,
+          });
+          onModalChange(false);
+        });
+      onModalChange(false);
+    },
+    [onModalChange, mutate, t]
+  );
+
+  return (
+    <>
+      <WardAdministrationForm
+        onModalChange={onModalChange}
+        allLocations={admissionLocations}
+        showModal={showModal}
+        handleCreateQuestion={handleCreateQuestion}
+        headerTitle={headerTitle}
+        initialData={initialData}
+      />
+    </>
+  );
+};
+
+export default NewWardForm;