@openmrs/esm-form-builder-app 1.0.0

package/src/components/action-buttons/action-buttons.component.tsx

@@ -0,0 +1,185 @@
+import React, { useState } from "react";
+import {
+  Button,
+  ComposedModal,
+  InlineLoading,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+} from "@carbon/react";
+import { useParams } from "react-router-dom";
+import { useSWRConfig } from "swr";
+import { showToast, showNotification } from "@openmrs/esm-framework";
+
+import { RouteParams } from "../../types";
+import { publishForm, unpublishForm } from "../../forms.resource";
+import { useForm } from "../../hooks/useForm";
+import SaveForm from "../modals/save-form.component";
+import styles from "./action-buttons.scss";
+
+type Status =
+  | "idle"
+  | "publishing"
+  | "published"
+  | "unpublishing"
+  | "unpublished"
+  | "error";
+
+function ActionButtons({ schema, t }) {
+  const { cache, mutate }: { cache: any; mutate: Function } = useSWRConfig();
+  const { formUuid } = useParams<RouteParams>();
+  const { form } = useForm(formUuid);
+  const [status, setStatus] = useState<Status>("idle");
+  const [showUnpublishModal, setShowUnpublishModal] = useState(false);
+
+  const launchUnpublishModal = () => {
+    setShowUnpublishModal(true);
+  };
+
+  const revalidate = () => {
+    const apiUrlPattern = new RegExp("\\/ws\\/rest\\/v1\\/form");
+
+    // Find matching keys from SWR's cache and broadcast a revalidation message to their pre-bound SWR hooks
+    Array.from(cache.keys())
+      .filter((url: string) => apiUrlPattern.test(url))
+      .forEach((url: string) => mutate(url));
+  };
+
+  async function handlePublish() {
+    setStatus("publishing");
+    try {
+      await publishForm(form.uuid);
+
+      showToast({
+        title: t("formPublished", "Form published"),
+        kind: "success",
+        critical: true,
+        description:
+          `${form.name} ` +
+          t("formPublishedSuccessfully", "form was published successfully"),
+      });
+
+      setStatus("published");
+      revalidate();
+    } catch (error) {
+      showNotification({
+        title: t("errorPublishingForm", "Error publishing form"),
+        kind: "error",
+        critical: true,
+        description: error?.message,
+      });
+      setStatus("error");
+    }
+  }
+
+  async function handleUnpublish() {
+    setStatus("unpublishing");
+    try {
+      await unpublishForm(form.uuid);
+
+      showToast({
+        title: t("formUnpublished", "Form unpublished"),
+        kind: "success",
+        critical: true,
+        description:
+          `${form.name} ` +
+          t("formUnpublishedSuccessfully", "form was unpublished successfully"),
+      });
+
+      setStatus("unpublished");
+      revalidate();
+    } catch (error) {
+      showNotification({
+        title: t("errorUnpublishingForm", "Error unpublishing form"),
+        kind: "error",
+        critical: true,
+        description: error?.message,
+      });
+      setStatus("error");
+    }
+    setShowUnpublishModal(false);
+  }
+
+  return (
+    <div className={styles.actionButtons}>
+      <SaveForm form={form} schema={schema} />
+
+      <>
+        {form && !form.published ? (
+          <Button
+            kind="secondary"
+            onClick={handlePublish}
+            disabled={status === "publishing"}
+          >
+            {status === "publishing" && !form?.published ? (
+              <InlineLoading
+                className={styles.spinner}
+                description={t("publishing", "Publishing") + "..."}
+              />
+            ) : (
+              <span>{t("publishForm", "Publish form")}</span>
+            )}
+          </Button>
+        ) : null}
+
+        {form && form.published ? (
+          <Button
+            kind="danger"
+            onClick={launchUnpublishModal}
+            disabled={status === "unpublishing"}
+          >
+            {t("unpublishForm", "Unpublish form")}
+          </Button>
+        ) : null}
+
+        {showUnpublishModal ? (
+          <ComposedModal
+            open={true}
+            onClose={() => setShowUnpublishModal(false)}
+          >
+            <ModalHeader
+              title={t(
+                "unpublishConfirmation",
+                "Are you sure you want to unpublish this form?"
+              )}
+            ></ModalHeader>
+            <ModalBody>
+              <p>
+                {t(
+                  "unpublishExplainerText",
+                  "Unpublishing a form means you can no longer access it from your frontend. Unpublishing forms does not delete their associated schemas, it only affects whether or not you can access them in your frontend."
+                )}
+              </p>
+            </ModalBody>
+            <ModalFooter>
+              <Button
+                kind="secondary"
+                onClick={() => setShowUnpublishModal(false)}
+              >
+                {t("cancel", "Cancel")}
+              </Button>
+              <Button
+                disabled={status === "unpublishing"}
+                kind={status === "unpublishing" ? "secondary" : "danger"}
+                onClick={handleUnpublish}
+              >
+                {status === "unpublishing" ? (
+                  <InlineLoading
+                    className={styles.spinner}
+                    description={t("unpublishing", "Unpublishing") + "..."}
+                  />
+                ) : (
+                  <span>{t("unpublishForm", "Unpublish form")}</span>
+                )}
+              </Button>
+            </ModalFooter>
+          </ComposedModal>
+        ) : (
+          false
+        )}
+      </>
+    </div>
+  );
+}
+
+export default ActionButtons;

package/src/components/action-buttons/action-buttons.scss

@@ -0,0 +1,16 @@
+.actionButtons {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin: 1rem 0;
+
+  button {
+    margin-left: 1rem
+  }
+}
+
+.spinner {
+  &:global(.cds--inline-loading) {
+    min-height: 1rem;
+  }
+}

package/src/components/dashboard/dashboard.component.tsx

@@ -0,0 +1,309 @@
+import React, { useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  Button,
+  DataTable,
+  DataTableSkeleton,
+  Dropdown,
+  InlineLoading,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  TableToolbar,
+  TableToolbarContent,
+  TableToolbarSearch,
+  Tag,
+  Tile,
+} from "@carbon/react";
+import { Add, DocumentImport, Download, Edit } from "@carbon/react/icons";
+import { navigate, useLayoutType } from "@openmrs/esm-framework";
+
+import { FilterProps } from "../../types";
+import { useClobdata } from "../../hooks/useClobdata";
+import { useForms } from "../../hooks/useForms";
+import EmptyState from "../empty-state/empty-state.component";
+import ErrorState from "../error-state/error-state.component";
+import styles from "./dashboard.scss";
+
+function CustomTag({ condition }) {
+  const { t } = useTranslation();
+
+  return condition ? (
+    <Tag type="green" size="md" title="Clear Filter">
+      {t("yes", "Yes")}
+    </Tag>
+  ) : (
+    <Tag type="red" size="md" title="Clear Filter">
+      {t("no", "No")}
+    </Tag>
+  );
+}
+
+function ActionButtons({ form }) {
+  const { t } = useTranslation();
+  const { clobdata } = useClobdata(form);
+  const formResources = form?.resources;
+
+  const downloadableSchema = useMemo(
+    () =>
+      new Blob([JSON.stringify(clobdata, null, 2)], {
+        type: "application/json",
+      }),
+    [clobdata]
+  );
+
+  return formResources.length == 0 || !form?.resources[0] ? (
+    <Button
+      className={styles.importButton}
+      renderIcon={DocumentImport}
+      onClick={() => navigate({ to: `form-builder/edit/${form.uuid}` })}
+      kind={"ghost"}
+      iconDescription={t("import", "Import")}
+      hasIconOnly
+    />
+  ) : (
+    <>
+      <Button
+        className={styles.editButton}
+        enterDelayMs={300}
+        renderIcon={Edit}
+        onClick={() =>
+          navigate({
+            to: `${window.spaBase}/form-builder/edit/${form.uuid}`,
+          })
+        }
+        kind={"ghost"}
+        iconDescription={t("editSchema", "Edit schema")}
+        hasIconOnly
+        tooltipAlignment="start"
+      />
+      <a
+        className={styles.downloadLink}
+        download={`${form?.name}.json`}
+        href={window.URL.createObjectURL(downloadableSchema)}
+      >
+        <Button
+          className={styles.downloadButton}
+          enterDelayMs={300}
+          renderIcon={Download}
+          kind={"ghost"}
+          iconDescription={t("downloadSchema", "Download schema")}
+          hasIconOnly
+          tooltipAlignment="start"
+        ></Button>
+      </a>
+    </>
+  );
+}
+
+function FormsList({ forms, isValidating, t }) {
+  const isTablet = useLayoutType() === "tablet";
+  const [filter, setFilter] = useState("");
+
+  const filteredRows = useMemo(() => {
+    if (!filter) {
+      return forms;
+    }
+
+    if (filter === "Published") {
+      return forms.filter((form) => form.published);
+    }
+
+    if (filter === "Unpublished") {
+      return forms.filter((form) => !form.published);
+    }
+
+    return forms;
+  }, [filter, forms]);
+
+  const tableHeaders = [
+    {
+      header: t("name", "Name"),
+      key: "name",
+    },
+    {
+      header: t("version", "Version"),
+      key: "version",
+    },
+    {
+      header: t("published", "Published"),
+      key: "published",
+    },
+    {
+      header: t("retired", "Retired"),
+      key: "retired",
+    },
+    {
+      header: t("schemaActions", "Schema actions"),
+      key: "actions",
+    },
+  ];
+
+  const tableRows = useMemo(
+    () =>
+      (filteredRows ? filteredRows : forms)?.map((form) => ({
+        ...form,
+        id: form.uuid,
+        published: <CustomTag condition={form.published} />,
+        retired: <CustomTag condition={form.retired} />,
+        actions: <ActionButtons form={form} />,
+      })),
+    [filteredRows, forms]
+  );
+
+  const handlePublishStatusChange = ({ selectedItem }) =>
+    setFilter(selectedItem);
+
+  const handleFilter = ({
+    rowIds,
+    headers,
+    cellsById,
+    inputValue,
+    getCellId,
+  }: FilterProps): Array<string> => {
+    return rowIds.filter((rowId) =>
+      headers.some(({ key }) => {
+        const cellId = getCellId(rowId, key);
+        const filterableValue = cellsById[cellId].value;
+        const filterTerm = inputValue.toLowerCase();
+
+        return ("" + filterableValue).toLowerCase().includes(filterTerm);
+      })
+    );
+  };
+
+  return (
+    <>
+      <div className={styles.flexContainer}>
+        <div className={styles.filterContainer}>
+          <Dropdown
+            id="publishStatusFilter"
+            initialSelectedItem={"All"}
+            label=""
+            titleText={
+              t("filterByPublishedStatus", "Filter by publish status") + ":"
+            }
+            type="inline"
+            items={["All", "Published", "Unpublished"]}
+            onChange={handlePublishStatusChange}
+          />
+        </div>
+        <div className={styles.backgroundDataFetchingIndicator}>
+          <span>{isValidating ? <InlineLoading /> : null}</span>
+        </div>
+      </div>
+      <DataTable
+        filterRows={handleFilter}
+        rows={tableRows}
+        headers={tableHeaders}
+        size={isTablet ? "sm" : "lg"}
+        useZebraStyles
+      >
+        {({
+          rows,
+          headers,
+          getTableProps,
+          getHeaderProps,
+          getRowProps,
+          onInputChange,
+        }) => (
+          <>
+            <TableContainer className={styles.tableContainer}>
+              <div className={styles.toolbarWrapper}>
+                <TableToolbar className={styles.tableToolbar}>
+                  <TableToolbarContent>
+                    <TableToolbarSearch
+                      onChange={onInputChange}
+                      placeholder={t("searchThisList", "Search this list")}
+                    />
+                    <Button
+                      kind="primary"
+                      iconDescription={t("createNewForm", "Create a new form")}
+                      renderIcon={(props) => <Add size={16} {...props} />}
+                      onClick={() =>
+                        navigate({
+                          to: `${window.spaBase}/form-builder/new`,
+                        })
+                      }
+                    >
+                      {t("createNewForm", "Create a new form")}
+                    </Button>
+                  </TableToolbarContent>
+                </TableToolbar>
+              </div>
+              <Table {...getTableProps()} className={styles.table}>
+                <TableHead>
+                  <TableRow>
+                    {headers.map((header) => (
+                      <TableHeader {...getHeaderProps({ header })}>
+                        {header.header}
+                      </TableHeader>
+                    ))}
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {rows.map((row) => (
+                    <TableRow {...getRowProps({ row })}>
+                      {row.cells.map((cell) => (
+                        <TableCell key={cell.id}>{cell.value}</TableCell>
+                      ))}
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </TableContainer>
+            {rows.length === 0 ? (
+              <div className={styles.tileContainer}>
+                <Tile className={styles.tile}>
+                  <div className={styles.tileContent}>
+                    <p className={styles.content}>
+                      {t(
+                        "noMatchingFormsToDisplay",
+                        "No matching forms to display"
+                      )}
+                    </p>
+                    <p className={styles.helper}>
+                      {t("checkFilters", "Check the filters above")}
+                    </p>
+                  </div>
+                </Tile>
+              </div>
+            ) : null}
+          </>
+        )}
+      </DataTable>
+    </>
+  );
+}
+
+const Dashboard: React.FC = () => {
+  const { t } = useTranslation();
+  const { error, forms, isLoading, isValidating } = useForms();
+
+  return (
+    <div className={styles.container}>
+      <h3 className={styles.heading}>{t("formBuilder", "Form Builder")}</h3>
+      {(() => {
+        if (error) {
+          return <ErrorState error={error} />;
+        }
+
+        if (isLoading) {
+          return <DataTableSkeleton role="progressbar" />;
+        }
+
+        if (forms.length === 0) {
+          return <EmptyState />;
+        }
+
+        return <FormsList forms={forms} isValidating={isValidating} t={t} />;
+      })()}
+    </div>
+  );
+};
+
+export default Dashboard;

package/src/components/dashboard/dashboard.scss

@@ -0,0 +1,112 @@
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/spacing';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.container {
+  padding: 2rem;
+  background-color: $ui-01;
+}
+
+.backgroundDataFetchingIndicator {
+  flex: 1;
+}
+
+.flexContainer {
+  display: flex;
+  justify-content: space-between;
+}
+
+.toolbarWrapper {
+  position: relative;
+  display: flex;
+  height: spacing.$spacing-09;
+  justify-content: flex-end;
+}
+
+.tableToolbar {
+  width: 20%;
+  min-width: 12.5rem;
+}
+
+.table tr:last-of-type {
+  td {
+    border-bottom: none;
+  }
+}
+
+.heading {
+  margin-bottom: 1.5rem;
+}
+
+.toolbar {
+  position: relative;
+  display: flex;
+  width: 100%;
+  min-height: 3rem;
+  margin-bottom: 0.5rem;
+}
+
+.emptyContainer {
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  padding: 1rem;
+}
+
+.tableContainer {
+  padding: 0;
+
+  :global(.cds--data-table-content) {
+    border: 1px solid $ui-03;
+    border-bottom: none;
+    overflow: visible;
+  }
+
+  :global(.cds--table-toolbar) {
+    position: relative;
+    height: 2rem;
+    min-height: 0rem;
+    overflow: visible;
+    top: 0;
+  }
+
+  &:global(.cds--data-table-container) {
+    padding-top: 0rem;
+  }
+}
+
+.filterContainer {
+  flex: 1;
+
+  :global(.cds--dropdown__wrapper--inline) {
+    gap: 0;
+  }
+
+  :global(.cds--list-box__menu-icon) {
+    height: 1rem;
+  }
+}
+
+.content {
+  @include type.type-style('heading-compact-02');
+  color: $text-02;
+  margin-bottom: 0.5rem;
+}
+
+.tileContainer {
+  background-color: $ui-02;
+  border-top: 1px solid $ui-03;
+  padding: 5rem 0;
+}
+
+.tile {
+  margin: auto;
+  width: fit-content;
+}
+
+.tileContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+