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

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

@@ -0,0 +1,317 @@
+import React, { useEffect, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  Button,
+  DataTable,
+  DataTableSkeleton,
+  Dropdown,
+  InlineLoading,
+  Pagination,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tag,
+  Tile,
+} from "@carbon/react";
+import { Add, Edit } from "@carbon/react/icons";
+import {
+  isDesktop as desktopLayout,
+  useConfig,
+  useLayoutType,
+  usePagination,
+} from "@openmrs/esm-framework";
+import { CardHeader, ErrorState } from "@openmrs/esm-patient-common-lib";
+import type { InitialData, Location } from "../types";
+import { findBedByLocation, useWards } from "../summary/summary.resource";
+import EditBedForm from "./edit-bed-form.component";
+import Header from "../header/header.component";
+import NewBedForm from "./new-bed-form.component";
+import styles from "./bed-administration-table.scss";
+
+const BedAdministrationTable: React.FC = () => {
+  const { t } = useTranslation();
+  const headerTitle = t("wardAllocation", "Ward Allocation");
+  const layout = useLayoutType();
+  const isTablet = layout === "tablet";
+  const responsiveSize = isTablet ? "lg" : "sm";
+  const isDesktop = desktopLayout(layout);
+  const { admissionLocationTagUuid } = useConfig();
+
+  const [wardsGroupedByLocations, setWardsGroupedByLocation] = useState<
+    Array<Location>
+  >([]);
+  const [isBedDataLoading, setIsBedDataLoading] = useState(false);
+  const [showAddBedModal, setShowAddBedModal] = useState(false);
+  const [showEditBedModal, setShowEditBedModal] = useState(false);
+  const [editData, setEditData] = useState<InitialData>();
+  const [filterOption, setFilterOption] = useState("ALL");
+
+  function CustomTag({ condition }: { condition: boolean }) {
+    const { t } = useTranslation();
+
+    if (condition) {
+      return (
+        <Tag type="green" size="md">
+          {t("yes", "Yes")}
+        </Tag>
+      );
+    }
+
+    return (
+      <Tag type="red" size="md">
+        {t("no", "No")}
+      </Tag>
+    );
+  }
+
+  const handleBedStatusChange = ({ selectedItem }: { selectedItem: string }) =>
+    setFilterOption(selectedItem.trim().toUpperCase());
+
+  const bedsMappedToLocation = wardsGroupedByLocations?.length
+    ? [].concat(...wardsGroupedByLocations)
+    : [];
+
+  const { data, isLoading, error, isValidating, mutate } = useWards(
+    admissionLocationTagUuid
+  );
+
+  const [currentPageSize, setPageSize] = useState(10);
+  const pageSizes = [10, 20, 30, 40, 50];
+  const { results, currentPage, totalPages, goTo } = usePagination(
+    filterOption === "ALL"
+      ? bedsMappedToLocation
+      : bedsMappedToLocation.filter((bed) => bed.status === filterOption) ?? [],
+    currentPageSize
+  );
+
+  useEffect(() => {
+    if (!isLoading && data) {
+      setIsBedDataLoading(true);
+      const fetchData = async () => {
+        const promises = data.data.results.map(async (ward) => {
+          const bedLocations = await findBedByLocation(ward.uuid);
+          if (bedLocations.data.results.length) {
+            return bedLocations.data.results.map((bed) => ({
+              ...bed,
+              location: ward,
+            }));
+          }
+          return null;
+        });
+
+        const updatedWards = (await Promise.all(promises)).filter(Boolean);
+        setWardsGroupedByLocation(updatedWards);
+        setIsBedDataLoading(false);
+      };
+      fetchData().finally(() => setIsBedDataLoading(false));
+    }
+  }, [data, isLoading, wardsGroupedByLocations.length]);
+
+  const tableHeaders = [
+    {
+      key: "bedNumber",
+      header: t("bedId", "Bed ID"),
+    },
+    {
+      key: "location",
+      header: t("location", "Location"),
+    },
+    {
+      key: "occupancyStatus",
+      header: t("occupancyStatus", "Occupied"),
+    },
+    {
+      key: "allocationStatus",
+      header: t("allocationStatus", "Allocated"),
+    },
+    {
+      key: "actions",
+      header: t("actions", "Actions"),
+    },
+  ];
+
+  const tableRows = useMemo(() => {
+    return results.map((ward) => ({
+      id: ward.uuid,
+      bedNumber: ward.bedNumber,
+      location: ward.location.display,
+      occupancyStatus: <CustomTag condition={ward?.status === "OCCUPIED"} />,
+      allocationStatus: <CustomTag condition={ward.location?.uuid} />,
+      actions: (
+        <>
+          <Button
+            enterDelayMs={300}
+            renderIcon={Edit}
+            onClick={(e) => {
+              e.preventDefault();
+              setEditData(ward);
+              setShowEditBedModal(true);
+              setShowAddBedModal(false);
+            }}
+            kind={"ghost"}
+            iconDescription={t("editBed", "Edit Bed")}
+            hasIconOnly
+            size={responsiveSize}
+            tooltipAlignment="start"
+          />
+        </>
+      ),
+    }));
+  }, [responsiveSize, results, t]);
+
+  if ((isBedDataLoading || isLoading) && !wardsGroupedByLocations.length) {
+    return (
+      <>
+        <Header route="Ward Allocation" />
+        <div className={styles.widgetCard}>
+          <DataTableSkeleton role="progressbar" compact={isDesktop} zebra />
+        </div>
+      </>
+    );
+  }
+
+  if (error) {
+    return (
+      <>
+        <Header route="Ward Allocation" />
+        <div className={styles.widgetCard}>
+          <ErrorState error={error} headerTitle={headerTitle} />
+        </div>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <Header route="Ward Allocation" />
+      <div className={styles.flexContainer}>
+        {results?.length ? (
+          <div className={styles.filterContainer}>
+            <Dropdown
+              id="occupancyStatus"
+              initialSelectedItem={"All"}
+              label=""
+              titleText={
+                t("filterByOccupancyStatus", "Filter by occupancy status") + ":"
+              }
+              type="inline"
+              items={["All", "Available", "Occupied"]}
+              onChange={handleBedStatusChange}
+            />
+          </div>
+        ) : null}
+      </div>
+      <div className={styles.widgetCard}>
+        {showAddBedModal ? (
+          <NewBedForm
+            onModalChange={setShowAddBedModal}
+            showModal={showAddBedModal}
+            mutate={mutate}
+          />
+        ) : null}
+        {showEditBedModal ? (
+          <EditBedForm
+            onModalChange={setShowEditBedModal}
+            showModal={showEditBedModal}
+            editData={editData}
+            mutate={mutate}
+          />
+        ) : null}
+        <CardHeader title={headerTitle}>
+          <span className={styles.backgroundDataFetchingIndicator}>
+            <span>{isValidating ? <InlineLoading /> : null}</span>
+          </span>
+          {results?.length ? (
+            <Button
+              kind="ghost"
+              renderIcon={(props) => <Add size={16} {...props} />}
+              onClick={() => setShowAddBedModal(true)}
+            >
+              {t("addBed", "Add bed")}
+            </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={() => setShowAddBedModal(true)}
+                    >
+                      {t("addBed", "Add bed")}
+                    </Button>
+                  </Tile>
+                </div>
+              ) : null}
+              <Pagination
+                backwardText="Previous page"
+                forwardText="Next page"
+                page={currentPage}
+                pageNumberText="Page Number"
+                pageSize={totalPages}
+                pageSizes={pageSizes?.length > 0 ? pageSizes : [10]}
+                totalItems={bedsMappedToLocation.length ?? 0}
+                onChange={({ pageSize, page }) => {
+                  if (pageSize !== currentPageSize) {
+                    setPageSize(pageSize);
+                  }
+                  if (page !== currentPage) {
+                    goTo(page);
+                  }
+                }}
+              />
+            </TableContainer>
+          )}
+        </DataTable>
+      </div>
+    </>
+  );
+};
+
+export default BedAdministrationTable;

package/src/bed-administration/bed-administration-table.scss

@@ -0,0 +1,112 @@
+@use '@carbon/colors';
+@use '@carbon/type';
+
+.widgetCard {
+  border: 1px solid colors.$gray-20;
+  margin: 1.5rem;
+
+  :global(.cds--modal-content) {
+    margin-bottom: unset;
+  }
+
+  @media (min-width: 66rem) {
+    :global(.cds--modal-container) {
+      max-height: 100%;
+      width: 60%;
+    }
+  }
+
+  @media (min-width: 42rem) {
+    :global(.cds--modal-container) {
+      max-height: 100%;
+    }
+
+  }
+}
+
+.flexContainer {
+  display: flex;
+  justify-content: space-between;
+  padding: 0 1rem;
+  margin-top: 2rem;
+  margin-left: 0.5rem;
+}
+
+.filterContainer {
+  flex: 1;
+
+  :global(.cds--dropdown__wrapper--inline) {
+    gap: 0;
+  }
+
+  :global(.cds--list-box__menu-icon) {
+    height: 1rem;
+  }
+}
+
+.backgroundDataFetchingIndicator {
+  align-items: center;
+  display: flex;
+  justify-content: end;
+}
+
+.tileContainer {
+  background-color: colors.$white-0;
+  border-top: 1px solid colors.$gray-20;
+  padding: 3rem 0;
+}
+
+.tile {
+  margin: auto;
+  width: fit-content;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.tileContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.content {
+  @include type.type-style('heading-compact-02');
+  color: colors.$gray-70;
+  margin-bottom: 0.5rem;
+}
+
+.helper {
+  @include type.type-style('body-compact-01');
+  color: colors.$gray-70;
+}
+
+.separator {
+  @include type.type-style('body-compact-02');
+  color: colors.$gray-70;
+  width: 80%;
+  margin: 1.5rem auto;
+  overflow: hidden;
+  text-align: center;
+
+  &::before,
+  &::after {
+    background-color: colors.$gray-40;
+    content: '';
+    display: inline-block;
+    height: 1px;
+    position: relative;
+    vertical-align: middle;
+    width: 50%;
+  }
+
+  &::before {
+    right: 0.5rem;
+    margin-left: -50%;
+  }
+
+  &::after {
+    left: 0.5rem;
+    margin-right: -50%;
+  }
+}

package/src/bed-administration/bed-administration-types.ts

@@ -0,0 +1,20 @@
+export interface BedAdministrationData {
+  bedId: string;
+  description: string;
+  bedRow: string;
+  bedColumn: string;
+  location: {
+    display: string;
+    uuid: string;
+  };
+  occupancyStatus: string;
+  bedType: string;
+}
+export interface BedTypeDataAdministration {
+  name: string;
+  displayName: string;
+  description: string;
+}
+export interface BedTagDataAdministration {
+  name: string;
+}

package/src/bed-administration/bed-administration.resource.ts

@@ -0,0 +1,59 @@
+import { useMemo } from "react";
+import useSWR from "swr";
+import { FetchResponse, openmrsFetch } from "@openmrs/esm-framework";
+
+interface BedForm {
+  bedNumber: string;
+  bedType: string;
+  row: number;
+  column: number;
+  status: string;
+  locationUuid: string;
+}
+
+export async function saveBed({ bedPayload }): Promise<FetchResponse<BedForm>> {
+  const response: FetchResponse = await openmrsFetch(`/ws/rest/v1/bed`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: bedPayload,
+  });
+  return response;
+}
+
+export function useBedType() {
+  const locationsUrl = `/ws/rest/v1/bedtype`;
+  const { data, error, isLoading } = useSWR<{ data }>(
+    locationsUrl,
+    openmrsFetch
+  );
+
+  const bedTypes = useMemo(() => {
+    const rawData = data?.data?.results ?? [];
+    const uniqueBedTypes = [];
+
+    rawData.forEach((response) => {
+      if (!uniqueBedTypes.some((bedType) => bedType.name === response.name)) {
+        uniqueBedTypes.push(response);
+      }
+    });
+
+    return uniqueBedTypes;
+  }, [data?.data?.results]);
+
+  return { bedTypes: bedTypes ? bedTypes : [], isLoading, error };
+}
+
+export async function editBed({
+  bedPayload,
+  bedId,
+}): Promise<FetchResponse<BedForm>> {
+  const response: FetchResponse = await openmrsFetch(
+    `/ws/rest/v1/bed/${bedId}`,
+    {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: bedPayload,
+    }
+  );
+  return response;
+}

package/src/bed-administration/edit-bed-form.component.tsx

@@ -0,0 +1,100 @@
+import React, { useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { showToast, showNotification, useConfig } from "@openmrs/esm-framework";
+
+import type { InitialData, Mutator } from "../types";
+import { useBedType, editBed } from "./bed-administration.resource";
+import BedAdministrationForm from "./bed-administration-form.component";
+import { BedAdministrationData } from "./bed-administration-types";
+import { useLocationsByTag } from "../summary/summary.resource";
+
+interface EditBedFormProps {
+  showModal: boolean;
+  onModalChange: (showModal: boolean) => void;
+  editData: InitialData;
+  mutate: Mutator;
+}
+
+const EditBedForm: React.FC<EditBedFormProps> = ({
+  showModal,
+  onModalChange,
+  editData,
+  mutate,
+}) => {
+  const { t } = useTranslation();
+  const { admissionLocationTagUuid } = useConfig();
+  const { data: admissionLocations } = useLocationsByTag(
+    admissionLocationTagUuid
+  );
+
+  const headerTitle = t("editBed", "Edit bed");
+  const occupancyStatuses = ["Available", "Occupied"];
+  const { bedTypes } = useBedType();
+  const availableBedTypes = bedTypes ? bedTypes : [];
+  const handleCreateQuestion = useCallback(
+    (formData: BedAdministrationData) => {
+      const bedUuid = editData.uuid;
+      const {
+        bedId = editData.bedNumber,
+        description = editData.description,
+        occupancyStatus = editData.status,
+        bedRow = editData.row.toString(),
+        bedColumn = editData.column.toString(),
+        location: { uuid: bedLocation = editData.location.uuid },
+        bedType = editData.bedType.name,
+      } = formData;
+      const bedPayload = {
+        bedNumber: bedId,
+        bedType,
+        description,
+        status: occupancyStatus.toUpperCase(),
+        row: parseInt(bedRow),
+        column: parseInt(bedColumn),
+        locationUuid: bedLocation,
+      };
+      editBed({ bedPayload, bedId: bedUuid })
+        .then(() => {
+          showToast({
+            title: t("formSaved", "Bed saved"),
+            kind: "success",
+            critical: true,
+            description:
+              bedPayload.bedNumber +
+              " " +
+              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 (
+    <>
+      <BedAdministrationForm
+        onModalChange={onModalChange}
+        allLocations={admissionLocations}
+        availableBedTypes={availableBedTypes}
+        showModal={showModal}
+        handleCreateQuestion={handleCreateQuestion}
+        headerTitle={headerTitle}
+        occupancyStatuses={occupancyStatuses}
+        initialData={editData}
+      />
+    </>
+  );
+};
+
+export default EditBedForm;