@kenyaemr/esm-bed-management-app 1.0.1-pre.11 → 1.0.1-pre.13

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import {
   Button,
@@ -15,10 +15,9 @@ import {
   TableRow,
   Tile,
 } from "@carbon/react";
-import { Add, Edit } from "@carbon/react/icons";
+import { Add, Edit, Delete } from "@carbon/react/icons";
 import {
   isDesktop as desktopLayout,
-  useConfig,
   useLayoutType,
 } from "@openmrs/esm-framework";
 import { CardHeader, ErrorState } from "@openmrs/esm-patient-common-lib";
@@ -28,6 +27,7 @@ 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();
@@ -37,14 +37,13 @@ const BedTypeAdministrationTable: React.FC = () => {
   const responsiveSize = isTablet ? "lg" : "sm";
   const isDesktop = desktopLayout(layout);
   const [showEditBedModal, setShowEditBedModal] = useState(false);
-  const [isBedDataLoading, setIsBedDataLoading] = 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 [currentPageSize, setPageSize] = useState(10);
-  const pageSizes = [10, 20, 30, 40, 50];
   const tableHeaders = [
     {
       header: t("name", "Name"),
@@ -80,6 +79,7 @@ const BedTypeAdministrationTable: React.FC = () => {
               setEditData(entry);
               setShowEditBedModal(true);
               setAddBedTypeModal(false);
+              setDeleteBedTypeModal(false);
             }}
             kind={"ghost"}
             iconDescription={t("editBedType", "Edit Bed Type")}
@@ -87,6 +87,22 @@ const BedTypeAdministrationTable: React.FC = () => {
             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"
+          />
         </>
       ),
     }));
@@ -134,6 +150,14 @@ const BedTypeAdministrationTable: React.FC = () => {
             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>
@@ -209,7 +233,7 @@ const BedTypeAdministrationTable: React.FC = () => {
                 totalItems={bedTypeData.length}
                 onChange={({ page, pageSize }) => {
                   setCurrentPage(page);
-                  setPageSize(pageSize);
+                  pageSize(pageSize);
                 }}
               />
             </TableContainer>

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

@@ -1,6 +1,6 @@
 import React, { useCallback } from "react";
 import { useTranslation } from "react-i18next";
-import { showToast, showNotification, useConfig } from "@openmrs/esm-framework";
+import { showToast, showNotification } from "@openmrs/esm-framework";
 
 import { editBedType, useBedType } from "../../summary/summary.resource";
 import { BedTypeDataAdministration } from "../../bed-administration/bed-administration-types";

package/src/summary/summary.resource.ts

@@ -1,5 +1,5 @@
 import useSWR from "swr";
-import { FetchResponse, openmrsFetch } from "@openmrs/esm-framework";
+import { FetchResponse, openmrsFetch, showToast } from "@openmrs/esm-framework";
 import type { AdmissionLocation, Bed, MappedBedData } from "../types";
 
 export const useLocationsByTag = (locationUuid: string) => {
@@ -163,49 +163,157 @@ interface BedTag {
 export async function saveBedType({
   bedPayload,
 }): Promise<FetchResponse<BedType>> {
-  const response: FetchResponse = await openmrsFetch(`/ws/rest/v1/bedtype`, {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
-    body: bedPayload,
-  });
-  return response;
+  try {
+    const response: FetchResponse = await openmrsFetch(`/ws/rest/v1/bedtype`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: bedPayload,
+    });
+    return response;
+  } catch (error) {
+    const errorMessages = extractErrorMessagesFromResponse(error);
+    showToast({
+      description: errorMessages.join(", "),
+      title: "Error on saving form",
+      kind: "error",
+      critical: true,
+    });
+  }
 }
 
 export async function saveBedTag({
   bedPayload,
 }): Promise<FetchResponse<BedTag>> {
-  const response: FetchResponse = await openmrsFetch(`/ws/rest/v1/bedTag/`, {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
-    body: bedPayload,
-  });
-  return response;
+  try {
+    const response: FetchResponse = await openmrsFetch(`/ws/rest/v1/bedTag/`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: bedPayload,
+    });
+    return response;
+  } catch (error) {
+    const errorMessages = extractErrorMessagesFromResponse(error);
+    showToast({
+      description: errorMessages.join(", "),
+      title: "Error on saving form",
+      kind: "error",
+      critical: true,
+    });
+  }
 }
 export async function editBedType({
   bedPayload,
   bedTypeId,
 }): Promise<FetchResponse<BedType>> {
-  const response: FetchResponse = await openmrsFetch(
-    `/ws/rest/v1/bedtype/${bedTypeId}`,
-    {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: bedPayload,
-    }
-  );
-  return response;
+  try {
+    const response: FetchResponse = await openmrsFetch(
+      `/ws/rest/v1/bedtype/${bedTypeId}`,
+      {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: bedPayload,
+      }
+    );
+    return response;
+  } catch (error) {
+    const errorMessages = extractErrorMessagesFromResponse(error);
+    showToast({
+      description: errorMessages.join(", "),
+      title: "Error on saving form",
+      kind: "error",
+      critical: true,
+    });
+  }
 }
 export async function editBedTag({
   bedPayload,
   bedTagId,
 }): Promise<FetchResponse<BedType>> {
-  const response: FetchResponse = await openmrsFetch(
-    `/ws/rest/v1/bedTag/${bedTagId}`,
-    {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: bedPayload,
-    }
+  try {
+    const response: FetchResponse = await openmrsFetch(
+      `/ws/rest/v1/bedTag/${bedTagId}`,
+      {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: bedPayload,
+      }
+    );
+    return response;
+  } catch (error) {
+    const errorMessages = extractErrorMessagesFromResponse(error);
+    showToast({
+      description: errorMessages.join(", "),
+      title: "Error on saving form",
+      kind: "error",
+      critical: true,
+    });
+  }
+}
+
+export function extractErrorMessagesFromResponse(errorObject) {
+  const fieldErrors = errorObject?.responseBody?.error?.fieldErrors;
+
+  if (!fieldErrors) {
+    return [errorObject?.responseBody?.error?.message ?? errorObject?.message];
+  }
+
+  return Object.values(fieldErrors).flatMap((errors: Array<Error>) =>
+    errors.map((error) => error.message)
   );
-  return response;
+}
+
+export async function deleteBedTag(
+  bedTagId: string
+): Promise<FetchResponse<BedTag>> {
+  try {
+    const response: FetchResponse = await openmrsFetch(
+      `/ws/rest/v1/bedTag/${bedTagId}`,
+      {
+        method: "DELETE",
+        headers: { "Content-Type": "application/json" },
+      }
+    );
+
+    if (response.ok) {
+      return response;
+    } else {
+      throw new Error(`Failed to delete bed tag. Status: ${response.status}`);
+    }
+  } catch (error) {
+    const errorMessages = extractErrorMessagesFromResponse(error);
+    showToast({
+      description: errorMessages.join(", "),
+      title: "Error on deleting bed tag",
+      kind: "error",
+      critical: true,
+    });
+  }
+}
+
+export async function deleteBedType(
+  bedtype: string
+): Promise<FetchResponse<BedType>> {
+  try {
+    const response: FetchResponse = await openmrsFetch(
+      `/ws/rest/v1/bedtype/${bedtype}`,
+      {
+        method: "DELETE",
+        headers: { "Content-Type": "application/json" },
+      }
+    );
+
+    if (response.ok) {
+      return response;
+    } else {
+      throw new Error(`Failed to delete bed tag. Status: ${response.status}`);
+    }
+  } catch (error) {
+    const errorMessages = extractErrorMessagesFromResponse(error);
+    showToast({
+      description: errorMessages.join(", "),
+      title: "Error on saving form",
+      kind: "error",
+      critical: true,
+    });
+  }
 }