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

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

@@ -0,0 +1,193 @@
+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,
+  TextInput,
+  InlineNotification,
+  ComboBox,
+  Dropdown,
+} from "@carbon/react";
+import { useTranslation } from "react-i18next";
+import { Location } from "@openmrs/esm-framework";
+import type { LocationTagData } from "../../types";
+import { useLocationTags } from "../../summary/summary.resource";
+
+const WardAdministrationSchema = z.object({
+  name: z.string().max(255),
+  tagLocation: z
+    .object({ display: z.string(), uuid: z.string() })
+    .refine(
+      (value) => value.display != "",
+      "Please select a valid location Tag"
+    ),
+});
+
+interface WardAdministrationFormProps {
+  showModal: boolean;
+  onModalChange: (showModal: boolean) => void;
+  allLocations: Location[];
+  handleCreateQuestion?: (formData: LocationTagData) => void;
+  handleDeleteBedTag?: () => void;
+  headerTitle: string;
+  initialData: LocationTagData;
+}
+interface ErrorType {
+  message: string;
+}
+const WardAdministrationForm: React.FC<WardAdministrationFormProps> = ({
+  showModal,
+  onModalChange,
+  handleCreateQuestion,
+  headerTitle,
+  initialData,
+}) => {
+  const { t } = useTranslation();
+  const { tagList, tagError, tagLoading, tagValidate, tagMutate } =
+    useLocationTags();
+  const [showErrorNotification, setShowErrorNotification] = useState(false);
+  const [formStateError, setFormStateError] = useState("");
+
+  const filterLocationNames = (tagLocation) => {
+    return (
+      tagLocation.display
+        ?.toLowerCase()
+        .includes(tagLocation?.inputValue?.toLowerCase()) ?? []
+    );
+  };
+  const {
+    handleSubmit,
+    control,
+    formState: { isDirty },
+  } = useForm<LocationTagData>({
+    mode: "all",
+    resolver: zodResolver(WardAdministrationSchema),
+    defaultValues: {
+      name: initialData.name || "",
+      tagLocation: initialData.tagLocation || {},
+    },
+  });
+
+  const onSubmit = (formData: LocationTagData) => {
+    const result = WardAdministrationSchema.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="ward"
+                      labelText={t("ward", "Ward Name")}
+                      placeholder={t("wardPlaceholder", "")}
+                      invalidText={fieldState.error?.message}
+                      {...field}
+                    />
+                  </>
+                )}
+              />
+            </FormGroup>
+            {/* <FormGroup>
+              <Controller
+                name="tagLocation"
+                control={control}
+                rules={{ required: true }}
+                render={({ field }) => (
+                  <Dropdown
+                    label={t("selectTag", "Select a Tag...")}
+                    onChange={({ selectedItem }) =>
+                      field.onChange(selectedItem?.uuid)
+                    }
+                    id="locationTags"
+                    items={tagList}
+                    itemToString={(item) => (item ? `${item.display}` : "")}
+                  />
+                )}
+              />
+            </FormGroup> */}
+            <FormGroup>
+              <Controller
+                name="tagLocation"
+                control={control}
+                render={({
+                  fieldState,
+                  field: { onChange, onBlur, value, ref },
+                }) => (
+                  <ComboBox
+                    aria-label={t("selectTag", "Select location Tag")}
+                    shouldFilterItem={filterLocationNames}
+                    id="locationTags"
+                    label={t("selectTag", "Select location Tag...")}
+                    invalidText={fieldState?.error?.message}
+                    items={tagList}
+                    onBlur={onBlur}
+                    ref={ref}
+                    selectedItem={value}
+                    onChange={({ selectedItem }) => onChange(selectedItem)}
+                    itemToString={(location) => location?.display ?? ""}
+                    placeholder={t(
+                      "selectBedLocation",
+                      "Select a bed location Tag"
+                    )}
+                    titleText={t("bedLocation", "Location")}
+                  />
+                )}
+              />
+            </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 WardAdministrationForm;

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

@@ -0,0 +1,173 @@
+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 } from "@carbon/react/icons";
+import {
+  isDesktop as desktopLayout,
+  useLayoutType,
+} from "@openmrs/esm-framework";
+import { CardHeader, ErrorState } from "@openmrs/esm-patient-common-lib";
+import Header from "../../header/header.component";
+import styles from "../../bed-administration/bed-administration-table.scss";
+import { useWard } from "../../summary/summary.resource";
+import NewWardForm from "./new-ward-form.component";
+
+const WardAdministrationTable: React.FC = () => {
+  const { t } = useTranslation();
+  const headerTitle = t("wardList", "List of Wards");
+  const layout = useLayoutType();
+  const isTablet = layout === "tablet";
+  const responsiveSize = isTablet ? "lg" : "sm";
+  const isDesktop = desktopLayout(layout);
+  const [isBedDataLoading] = useState(false);
+  const [showWardModal, setAddWardModal] = useState(false);
+
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize] = useState(100);
+  const { wardList, isError, loading, validate, mutate } = useWard();
+
+  const tableHeaders = [
+    {
+      header: t("display", "Name"),
+      key: "display",
+    },
+  ];
+  const tableRows = useMemo(() => {
+    return wardList?.map((entry) => ({
+      id: entry.uuid,
+      display: entry?.display,
+    }));
+  }, [wardList]);
+
+  if (isBedDataLoading || loading) {
+    return (
+      <>
+        <Header route="List of Wards" />
+        <div className={styles.widgetCard}>
+          <DataTableSkeleton role="progressbar" compact={isDesktop} zebra />
+        </div>
+      </>
+    );
+  }
+  if (isError) {
+    return (
+      <>
+        <Header route="List of Wards" />
+        <div className={styles.widgetCard}>
+          <ErrorState error={isError} headerTitle={headerTitle} />
+        </div>
+      </>
+    );
+  }
+  return (
+    <>
+      <Header route="List of Wards" />
+
+      <div className={styles.widgetCard}>
+        {showWardModal ? (
+          <NewWardForm
+            onModalChange={setAddWardModal}
+            showModal={showWardModal}
+            mutate={mutate}
+          />
+        ) : null}
+        <CardHeader title={headerTitle}>
+          <span className={styles.backgroundDataFetchingIndicator}>
+            <span>{validate ? <InlineLoading /> : null}</span>
+          </span>
+          {wardList?.length ? (
+            <Button
+              kind="ghost"
+              renderIcon={(props) => <Add size={16} {...props} />}
+              onClick={() => setAddWardModal(true)}
+            >
+              {t("createWard", "Create Ward")}
+            </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={() => setAddWardModal(true)}
+                    >
+                      {t("createWard", "Create Ward")}
+                    </Button>
+                  </Tile>
+                </div>
+              ) : null}
+              <Pagination
+                page={currentPage}
+                pageSize={pageSize}
+                pageSizes={[10, 20, 30, 40, 50]}
+                totalItems={wardList.length}
+                onChange={({ page, pageSize }) => {
+                  setCurrentPage(page);
+                  pageSize(pageSize);
+                }}
+              />
+            </TableContainer>
+          )}
+        </DataTable>
+      </div>
+    </>
+  );
+};
+export default WardAdministrationTable;

package/src/config-schema.ts

@@ -14,8 +14,14 @@ export const configSchema = {
     _default: "a73e2ac6-263b-47fc-99fc-e0f2c09fc914",
   },
   restrictWardAdministrationToLoginLocation: {
-    _type: boolean,
+    _type: Type.Boolean,
     _description: "UUID for the inpatient visit",
     _default: false,
   },
+  patientListForAdmissionUrl: {
+    _type: Type.String,
+    _description:
+      "Endpoint for fetching list of patients eligible for ward admission",
+    _default: "",
+  },
 };

package/src/index.ts

@@ -55,7 +55,28 @@ export const adminLeftPanelLink = getSyncLifecycle(
   }),
   options
 );
+export const wardLeftPanelLink = getSyncLifecycle(
+  createLeftPanelLink({
+    name: "ward",
+    title: "Wards",
+  }),
+  options
+);
 
+export const bedTypeLeftPanelLink = getSyncLifecycle(
+  createLeftPanelLink({
+    name: "bed-type",
+    title: "Bed Type",
+  }),
+  options
+);
+export const bedTagLeftPanelLink = getSyncLifecycle(
+  createLeftPanelLink({
+    name: "bed-tag",
+    title: "Bed Tag",
+  }),
+  options
+);
 export const bedAdmissionDashboardLink = getSyncLifecycle(
   createDashboardLink({
     name: "bed-admission",

package/src/root.component.tsx

@@ -6,6 +6,9 @@ import Home from "./home.component";
 import LeftPanel from "./left-panel/left-panel.component";
 import WardWithBeds from "./ward-with-beds/ward-with-beds.component";
 import styles from "./root.scss";
+import BedTagAdministrationTable from "./bed-admission/bed-tag/bed-tag-administration-table.component";
+import BedTypeAdministrationTable from "./bed-admission/bed-type/bed-type-administration-table.component";
+import WardAdministrationTable from "./bed-admission/ward/ward-administration-table.component";
 
 const Root: React.FC = () => {
   const spaBasePath = window.spaBase;
@@ -25,7 +28,10 @@ const Root: React.FC = () => {
         <Routes>
           <Route path="/" element={<Home />} />
           <Route path="/location/:location" element={<WardWithBeds />} />
+          <Route path="/ward" element={<WardAdministrationTable />} />
           <Route path="/administration" element={<BedAdministrationTable />} />
+          <Route path="/bed-tag" element={<BedTagAdministrationTable />} />
+          <Route path="/bed-type" element={<BedTypeAdministrationTable />} />
         </Routes>
       </main>
     </BrowserRouter>

package/src/routes.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.openmrs.org/routes.schema.json",
   "backendDependencies": {
-    "fhir2": "^1.2.0",
+    "fhir2": ">=1.2",
     "webservices.rest": "^2.24.0"
   },
   "pages": [
@@ -27,11 +27,26 @@
       "slot": "bed-management-left-panel-slot",
       "order": 0
     },
+    {
+      "component": "wardLeftPanelLink",
+      "name": "ward-left-panel-link",
+      "slot": "bed-management-left-panel-slot"
+    },
     {
       "component": "bedAdmission",
       "name": "bed-admission-dashboard",
       "slot": "bed-admission-dashboard-slot"
     },
+    {
+      "component": "bedTypeLeftPanelLink",
+      "name": "bed-type-left-panel-link",
+      "slot": "bed-management-left-panel-slot"
+    },
+    {
+      "component": "bedTagLeftPanelLink",
+      "name": "bed-tag-left-panel-link",
+      "slot": "bed-management-left-panel-slot"
+    },
     {
       "name": "bed-admission-dashboard-link",
       "component": "bedAdmissionDashboardLink",