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

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

@@ -0,0 +1,69 @@
+import React, { useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { showToast, showNotification } from "@openmrs/esm-framework";
+import { deleteBedTag, useBedTag } from "../../summary/summary.resource";
+import { BedTagDataAdministration } from "../../bed-administration/bed-administration-types";
+import { BedTagData, Mutator } from "../../types";
+import DeleteBedTagsForm from "./delete-bedForm.component";
+
+interface DeleteBedTagFormProps {
+  showModal: boolean;
+  onModalChange: (showModal: boolean) => void;
+  editData: BedTagData;
+  mutate: Mutator;
+}
+
+const DeleteBedTag: React.FC<DeleteBedTagFormProps> = ({
+  showModal,
+  onModalChange,
+  editData,
+  mutate,
+}) => {
+  const { t } = useTranslation();
+  const headerTitle = t("deleteBedTag", "Delete bed Tag");
+  const handleDeleteQuestion = useCallback(
+    (formData: BedTagDataAdministration) => {
+      const bedUuid = editData.uuid;
+      const { name } = formData;
+      deleteBedTag(bedUuid)
+        .then(() => {
+          showToast({
+            title: t("bedTagDeleted", "Bed Tag Deleted"),
+            kind: "success",
+            critical: true,
+            description:
+              name +
+              " " +
+              t("bedTagDeleteSuccessMessage", "was deleted successfully."),
+          });
+
+          mutate();
+          onModalChange(false);
+        })
+        .catch((error) => {
+          showNotification({
+            title: t("errorDeletingBedTag", "Error deleting bed tag"),
+            kind: "error",
+            critical: true,
+            description: error?.message,
+          });
+          onModalChange(false);
+        });
+      onModalChange(false);
+    },
+    [onModalChange, mutate, editData, t]
+  );
+  return (
+    <>
+      <DeleteBedTagsForm
+        onModalChange={onModalChange}
+        showModal={showModal}
+        handleDeleteBedTag={handleDeleteQuestion}
+        headerTitle={headerTitle}
+        initialData={editData}
+      />
+    </>
+  );
+};
+
+export default DeleteBedTag;

package/src/bed-admission/bed-tag/delete-bedForm.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 styles from "../../bed-administration/bed-administration-table.scss";
+import {
+  Button,
+  ComposedModal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  Stack,
+  InlineNotification,
+} from "@carbon/react";
+import { useTranslation } from "react-i18next";
+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 DeleteBedTagsForm: 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 DeleteBedTagsForm;

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

@@ -0,0 +1,80 @@
+import React, { useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { showToast, showNotification } 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";
+
+interface EditBedTagFormProps {
+  showModal: boolean;
+  onModalChange: (showModal: boolean) => void;
+  editData: BedTagData;
+  mutate: Mutator;
+}
+
+const EditBedTagForm: React.FC<EditBedTagFormProps> = ({
+  showModal,
+  onModalChange,
+  editData,
+  mutate,
+}) => {
+  const { t } = useTranslation();
+
+  const headerTitle = t("editBed", "Edit Tag");
+  const { bedTypeData } = useBedTag();
+  const availableBedTypes = bedTypeData ? bedTypeData : [];
+
+  const handleCreateQuestion = useCallback(
+    (formData: BedTagDataAdministration) => {
+      const bedUuid = editData.uuid;
+      const { name } = formData;
+      const bedPayload = {
+        name,
+      };
+      editBedTag({ bedPayload, bedTagId: bedUuid })
+        .then(() => {
+          showToast({
+            title: t("formSaved", "Bed Tag"),
+            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 (
+    <>
+      <BedTagsAdministrationForm
+        onModalChange={onModalChange}
+        availableBedTypes={availableBedTypes}
+        showModal={showModal}
+        handleCreateQuestion={handleCreateQuestion}
+        headerTitle={headerTitle}
+        initialData={editData}
+        allLocations={[]}
+      />
+    </>
+  );
+};
+
+export default EditBedTagForm;

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

@@ -0,0 +1,83 @@
+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";
+
+interface BedTagFormProps {
+  showModal: boolean;
+  onModalChange: (showModal: boolean) => void;
+  mutate: Mutator;
+}
+
+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 { bedTypes } = useBedType();
+  const availableBedTypes = bedTypes ? bedTypes : [];
+
+  const initialData: BedTagData = {
+    uuid: "",
+    name: "",
+  };
+
+  const handleCreateQuestion = useCallback(
+    (formData: BedTagData) => {
+      const { name } = formData;
+
+      const bedObject = {
+        name,
+      };
+
+      saveBedTag({ bedPayload: bedObject })
+        .then(() => {
+          showToast({
+            title: t("formCreated", "Add Bed Tag"),
+            kind: "success",
+            critical: true,
+            description: `Tag ${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 (
+    <>
+      <BedTagsAdministrationForm
+        onModalChange={onModalChange}
+        allLocations={admissionLocations}
+        availableBedTypes={availableBedTypes}
+        showModal={showModal}
+        handleCreateQuestion={handleCreateQuestion}
+        headerTitle={headerTitle}
+        initialData={initialData}
+      />
+    </>
+  );
+};
+
+export default NewTagForm;

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

@@ -0,0 +1,203 @@
+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 { Location } from "@openmrs/esm-framework";
+import type { BedType, BedTypeData } from "../../types";
+
+const BedTypeAdministrationSchema = z.object({
+  name: z
+    .string()
+    .max(255)
+    .refine(
+      (value) => {
+        return (
+          typeof value === "string" &&
+          value.trim().length > 0 &&
+          !/\d/.test(value)
+        );
+      },
+      {
+        message: "Bed Name must be a non-empty string without numbers",
+      }
+    ),
+  displayName: z
+    .string()
+    .max(255)
+    .refine(
+      (value) => {
+        return (
+          typeof value === "string" &&
+          value.trim().length > 0 &&
+          !/\d/.test(value)
+        );
+      },
+      {
+        message: "Display name must be a non-empty string without numbers",
+      }
+    ),
+  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} />
+      <Form onSubmit={handleSubmit(onSubmit, onError)}>
+        <ModalBody hasScrollingContent>
+          <Stack gap={3}>
+            <FormGroup legendText={""}>
+              <Controller
+                name="name"
+                control={control}
+                rules={{ required: true }}
+                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}
+                rules={{ required: true }}
+                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}
+                rules={{ required: true }}
+                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: "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 disabled={!isDirty} type="submit">
+            <span>{t("save", "Save")}</span>
+          </Button>
+        </ModalFooter>
+      </Form>
+    </ComposedModal>
+  );
+};
+
+export default BedTypeAdministrationForm;