@openmrs/esm-fast-data-entry-app 1.0.0-pre.19 → 1.0.0-pre.25

package/src/forms/FormWorkflow.tsx

@@ -1,135 +0,0 @@
-import { Add20, Close20 } from "@carbon/icons-react";
-import { ExtensionSlot } from "@openmrs/esm-framework";
-import { Button } from "carbon-components-react";
-import React, { useState } from "react";
-import { useParams } from "react-router-dom";
-import FormEntry from "../FormEntry";
-import PatientCard from "./PatientCard";
-import PatientInfo from "./PatientInfo";
-import styles from "./styles.scss";
-
-const PatientSearchHeader = ({
-  patientUuids,
-  setPatientUuids,
-  setActivePatientUuid,
-}) => {
-  const handleSelectPatient = (uuid) => {
-    setPatientUuids([...patientUuids, uuid]), setActivePatientUuid(uuid);
-  };
-
-  return (
-    <div
-      style={{
-        display: "flex",
-        backgroundColor: "white",
-        padding: "2rem 1rem",
-      }}
-    >
-      <span style={{ padding: "1rem" }}>Next patient:</span>
-      <span style={{ minWidth: "35rem" }}>
-        <ExtensionSlot
-          extensionSlotName="patient-search-bar-slot"
-          state={{
-            selectPatientAction: handleSelectPatient,
-            buttonProps: {
-              kind: "primary",
-            },
-          }}
-        />
-      </span>
-      <span style={{ padding: "1rem" }}>or</span>
-      <span>
-        <Button disabled>
-          Create new patient <Add20 />
-        </Button>
-      </span>
-      <span style={{ flexGrow: 1 }} />
-      <span>
-        <Button kind="ghost" disabled>
-          Cancel <Close20 />
-        </Button>
-      </span>
-    </div>
-  );
-};
-
-interface ParamTypes {
-  formUuid: string;
-}
-
-const FormWorkflow = () => {
-  const { formUuid } = useParams() as ParamTypes;
-  const [patientUuids, setPatientUuids] = useState([]);
-  const [activePatientUuid, setActivePatientUuid] = useState(null);
-
-  return (
-    <div>
-      <div className={styles.breadcrumbsContainer}>
-        <ExtensionSlot extensionSlotName="breadcrumbs-slot" />
-      </div>
-      {!activePatientUuid && (
-        <PatientSearchHeader
-          {...{ patientUuids, setPatientUuids, setActivePatientUuid }}
-        />
-      )}
-      {activePatientUuid && <PatientInfo patientUuid={activePatientUuid} />}
-      <div style={{ display: "flex", justifyContent: "center" }}>
-        <div style={{ width: "1100px" }}>
-          {!patientUuids.length && (
-            <div style={{ margin: "2rem", textAlign: "center" }}>
-              Please select a patient first
-            </div>
-          )}
-          {!!patientUuids.length && (
-            <div className={styles.formContainer}>
-              <div style={{ flexGrow: 1 }}>
-                <FormEntry
-                  patientUuid={activePatientUuid}
-                  {...{
-                    formUuid,
-                  }}
-                />
-              </div>
-              <div style={{ width: "13rem", textAlign: "left" }}>
-                <h4>Forms filled</h4>
-                <div
-                  style={{
-                    margin: "1rem 0",
-                    borderBottom: "1px solid #f4f4f4",
-                  }}
-                >
-                  {patientUuids.map((patientUuid) => (
-                    <PatientCard patientUuid={patientUuid} key={patientUuid} />
-                  ))}
-                </div>
-                <div
-                  style={{
-                    display: "flex",
-                    flexDirection: "column",
-                    rowGap: "0.5rem",
-                  }}
-                >
-                  <Button
-                    kind="primary"
-                    onClick={() => setActivePatientUuid(null)}
-                    style={{ width: "100%" }}
-                  >
-                    Next Patient
-                  </Button>
-                  <Button kind="secondary" disabled style={{ width: "100%" }}>
-                    Review & Save
-                  </Button>
-                  <Button kind="tertiary" disabled style={{ width: "100%" }}>
-                    Cancel
-                  </Button>
-                </div>
-              </div>
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default FormWorkflow;

package/src/forms/FormsRoot.tsx

@@ -1,73 +0,0 @@
-import { openmrsFetch, useConfig } from "@openmrs/esm-framework";
-import { Tab, Tabs } from "carbon-components-react";
-import React from "react";
-import useSWR from "swr";
-import { Config } from "../config-schema";
-import FormsTable from "./FormsTable";
-
-export const customFormRepresentation =
-  "(uuid,name,display,encounterType:(uuid,name,viewPrivilege,editPrivilege),version,published,retired,resources:(uuid,name,dataType,valueReference))";
-
-export const formEncounterUrl = `/ws/rest/v1/form?v=custom:${customFormRepresentation}`;
-export const formEncounterUrlPoc = `/ws/rest/v1/form?v=custom:${customFormRepresentation}&q=poc`;
-
-export function useFormEncounters(cachedOfflineFormsOnly = false) {
-  const showHtmlFormEntryForms = true;
-  const url = showHtmlFormEntryForms ? formEncounterUrl : formEncounterUrlPoc;
-
-  return useSWR([url, cachedOfflineFormsOnly], async () => {
-    const res = await openmrsFetch(url);
-    // show published forms and hide component forms
-    const forms =
-      res.data?.results?.filter(
-        (form) => form.published && !/component/i.test(form.name)
-      ) ?? [];
-
-    return forms;
-  });
-}
-
-const cleanForms = (rawFormData) => {
-  if (rawFormData) {
-    return rawFormData?.map((form) => ({
-      ...form,
-      id: form.uuid,
-    }));
-  }
-};
-
-const FormsRoot = () => {
-  const config = useConfig() as Config;
-  const { formCategories, formCategoriesToShow } = config;
-  const { data: forms } = useFormEncounters();
-  const cleanRows = cleanForms(forms);
-
-  const categoryRows = formCategoriesToShow.map((name) => {
-    const category = formCategories.find((category) => category.name === name);
-    let rows = [];
-    if (category && cleanRows && cleanRows.length) {
-      const uuids = category.forms?.map((form) => form.formUUID);
-      rows = cleanRows.filter((row) => uuids.includes(row.uuid));
-    }
-    return { ...{ name, rows } };
-  });
-
-  return (
-    <div style={{ padding: "2rem" }}>
-      <h3 style={{ marginBottom: "1.5rem" }}>Forms</h3>
-      <Tabs type="container">
-        <Tab label="All Forms">
-          <FormsTable rows={cleanRows} />
-        </Tab>
-        {categoryRows?.map((category) => (
-          <Tab label={category.name}>
-            <FormsTable rows={category.rows} />
-          </Tab>
-        ))}
-      </Tabs>
-    </div>
-  );
-};
-
-export default FormsRoot;
-export { FormsRoot };

package/src/forms/PatientCard.tsx

@@ -1,37 +0,0 @@
-import { SkeletonText } from "carbon-components-react";
-import React from "react";
-import useGetPatient from "./useGetPatient";
-
-const CardContainer = ({ children }) => {
-  return <div style={{ padding: "1rem" }}>{children}</div>;
-};
-
-const PatientCard = ({ patientUuid }) => {
-  const patient = useGetPatient(patientUuid);
-  const givenName = patient?.name?.[0]?.given?.[0];
-  const familyName = patient?.name?.[0]?.family;
-  const identifier = patient?.identifier?.[0]?.value;
-
-  if (!patient) {
-    return (
-      <CardContainer>
-        <SkeletonText style={{ maxWidth: "8rem" }} />
-      </CardContainer>
-    );
-  }
-
-  return (
-    <CardContainer>
-      <div
-        style={{ fontWeight: 300, fontSize: "0.8rem", lineHeight: "0.9rem" }}
-      >
-        {identifier}
-      </div>
-      <div style={{ fontWeight: "bold" }}>
-        {givenName} {familyName}
-      </div>
-    </CardContainer>
-  );
-};
-
-export default PatientCard;

package/src/forms/mockData.ts

@@ -1,20 +0,0 @@
-const rows = [
-  {
-    id: "admission-form",
-    name: "Admission form",
-  },
-  {
-    id: "dass-form",
-    name: "DASS 21",
-  },
-  {
-    id: "follow-up-form",
-    name: "Follow-up form",
-  },
-  {
-    id: "closure-form",
-    name: "Closure form",
-  },
-];
-
-export const tableData = { ...{ rows } };

package/src/forms/styles.scss

@@ -1,13 +0,0 @@
-@import "~@openmrs/esm-styleguide/src/vars";
-
-.breadcrumbsContainer > div > div > nav {
-  background-color: white;
-  padding: 0.5rem;
-  border-bottom: 1px solid $openmrs-background-grey;
-}
-
-.formContainer {
-  display: flex;
-  text-align: center;
-  margin-top: 1rem;
-}

package/src/loader.scss

@@ -1,9 +0,0 @@
-@import "~@openmrs/esm-styleguide/src/vars";
-@import "~carbon-components/src/globals/scss/vars";
-
-.loading {
-  display: flex;
-  background-color: $openmrs-background-grey;
-  justify-content: center;
-  min-height: $spacing-09;
-}