@openmrs/esm-form-builder-app 1.0.0

package/src/components/modals/save-form.component.tsx

@@ -0,0 +1,310 @@
+import React, { useCallback, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useParams } from "react-router-dom";
+import {
+  Button,
+  ComposedModal,
+  Form,
+  FormGroup,
+  InlineLoading,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  Select,
+  SelectItem,
+  Stack,
+  TextArea,
+  TextInput,
+} from "@carbon/react";
+import { showNotification, showToast } from "@openmrs/esm-framework";
+import {
+  uploadSchema,
+  saveNewForm,
+  updateName,
+  updateVersion,
+  updateDescription,
+  getResourceUUID,
+  deleteClobData,
+  deleteResource,
+  updateEncounterType,
+} from "../../forms.resource";
+import { EncounterType, Resource, RouteParams, Schema } from "../../types";
+import { useEncounterTypes } from "../../hooks/useEncounterTypes";
+import styles from "./save-form.scss";
+
+type FormGroupData = {
+  name: string;
+  uuid: string;
+  version: string;
+  encounterType: EncounterType;
+  description: string;
+  resources: Array<Resource>;
+};
+type SaveFormModalProps = { form: FormGroupData; schema: Schema };
+
+const SaveForm: React.FC<SaveFormModalProps> = ({ form, schema }) => {
+  const { t } = useTranslation();
+  const { formUuid } = useParams<RouteParams>();
+  const isSavingNewForm = !formUuid;
+  const { encounterTypes } = useEncounterTypes();
+  const [openSaveFormModal, setOpenSaveFormModal] = useState(false);
+  const [openConfirmSaveModal, setOpenConfirmSaveModal] = useState(false);
+  const [saveState, setSaveState] = useState("");
+  const [isSavingForm, setIsSavingForm] = useState(false);
+
+  const openModal = useCallback((option) => {
+    if (option === "newVersion") {
+      setSaveState("newVersion");
+      setOpenConfirmSaveModal(false);
+      setOpenSaveFormModal(true);
+    } else if (option === "new") {
+      setSaveState("newVersion");
+      setOpenSaveFormModal(true);
+    } else if (option === "update") {
+      setSaveState("update");
+      setOpenConfirmSaveModal(false);
+      setOpenSaveFormModal(true);
+    }
+  }, []);
+
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    setIsSavingForm(true);
+    let name = event.target.name.value,
+      version = event.target.version.value,
+      encounterType = event.target.encounterType.value,
+      description = event.target.description.value,
+      encounterTypeUUID;
+
+    if (encounterType == "undefined") {
+      encounterTypeUUID = undefined;
+    } else {
+      encounterTypes.forEach((encType) => {
+        if (encounterType == encType.name) {
+          encounterTypeUUID = encType.uuid;
+        }
+      });
+    }
+
+    if (saveState === "new" || saveState === "newVersion") {
+      try {
+        const newForm = await saveNewForm(
+          name,
+          version,
+          false,
+          description,
+          encounterTypeUUID
+        );
+        const newValueReference = await uploadSchema(schema);
+        await getResourceUUID(newForm.uuid, newValueReference.toString());
+        showToast({
+          title: t("formCreated", "New form created"),
+          kind: "success",
+          critical: true,
+          description:
+            name +
+            " " +
+            t(
+              "saveSuccessMessage",
+              "was created successfully. It is now visible on the Forms dashboard."
+            ),
+        });
+        setOpenSaveFormModal(false);
+      } catch (error) {
+        showNotification({
+          title: t("errorCreatingForm", "Error creating form"),
+          kind: "error",
+          critical: true,
+          description: error?.message,
+        });
+      }
+    } else {
+      try {
+        if (form?.resources.length != 0) {
+          deleteClobData(form?.resources[0].valueReference);
+          deleteResource(form?.uuid, form?.resources[0].uuid);
+        }
+        const newValueReference = await uploadSchema(schema);
+        await getResourceUUID(form?.uuid, newValueReference.toString());
+
+        if (name !== form?.name) {
+          await updateName(name, form?.uuid);
+        }
+        if (version !== form?.version) {
+          await updateVersion(version, form?.uuid);
+        }
+        if (encounterTypeUUID !== form?.encounterType?.uuid) {
+          await updateEncounterType(encounterTypeUUID, form?.uuid);
+        }
+        if (description !== form?.description) {
+          await updateDescription(description, form?.uuid);
+        }
+        showToast({
+          title: t("success", "Success!"),
+          kind: "success",
+          critical: true,
+          description:
+            name + " " + t("saveSuccess", "was updated successfully"),
+        });
+        setOpenSaveFormModal(false);
+      } catch (error) {
+        showNotification({
+          title: t("errorUpdatingForm", "Error updating form"),
+          kind: "error",
+          critical: true,
+          description: error?.message,
+        });
+      }
+    }
+  };
+
+  return (
+    <div>
+      {!isSavingNewForm ? (
+        <ComposedModal
+          open={openConfirmSaveModal}
+          onClose={() => setOpenConfirmSaveModal(false)}
+        >
+          <ModalHeader title={t("saveConfirmation", "Save or Update form")} />
+          <ModalBody>
+            <p>
+              {t(
+                "saveAsModal",
+                "A version of the form you're working on already exists on the server. Do you want to update the form or to save it as a new version?"
+              )}
+            </p>
+          </ModalBody>
+          <ModalFooter>
+            <Button kind={"tertiary"} onClick={() => openModal("update")}>
+              {t("updateExistingForm", "Update existing version")}
+            </Button>
+            <Button kind={"primary"} onClick={() => openModal("newVersion")}>
+              {t("saveAsNewForm", "Save as a new")}
+            </Button>
+            <Button
+              kind={"secondary"}
+              onClick={() => setOpenConfirmSaveModal(false)}
+            >
+              {t("close", "Close")}
+            </Button>
+          </ModalFooter>
+        </ComposedModal>
+      ) : null}
+
+      <ComposedModal
+        open={openSaveFormModal}
+        onClose={() => setOpenSaveFormModal(false)}
+      >
+        <ModalHeader
+          title={t("saveFormToServer", "Save form to server")}
+        ></ModalHeader>
+        <Form onSubmit={handleSubmit}>
+          <ModalBody>
+            <p>
+              {t(
+                "saveExplainerText",
+                "Clicking the Save button saves your form schema to the database. To see your form in your frontend, you first need to publish it. Click the Publish button to publish your form."
+              )}
+            </p>
+            <FormGroup legendText={""}>
+              <Stack gap={5}>
+                <TextInput
+                  id="name"
+                  labelText={t("formName", "Form name")}
+                  defaultValue={saveState === "update" ? form?.name : ""}
+                  placeholder="e.g. OHRI Express Care Patient Encounter Form"
+                  required
+                />
+                {saveState === "update" ? (
+                  <TextInput
+                    id="uuid"
+                    labelText="UUID (auto-generated)"
+                    disabled
+                    defaultValue={saveState === "update" ? form?.uuid : ""}
+                  />
+                ) : null}
+                <TextInput
+                  id="version"
+                  labelText="Version"
+                  defaultValue={saveState === "update" ? form?.version : ""}
+                  placeholder="e.g. 1.0"
+                  required
+                />
+                <Select
+                  id="encounterType"
+                  defaultValue={
+                    form?.encounterType
+                      ? form?.encounterType?.name
+                      : "undefined"
+                  }
+                  labelText={t("encounterType", "Encounter Type")}
+                  required
+                >
+                  {!form?.encounterType ? (
+                    <SelectItem
+                      text={t(
+                        "chooseEncounterType",
+                        "Choose an encounter type to link your form to"
+                      )}
+                    />
+                  ) : null}
+                  {encounterTypes?.map((encounterType, key) => (
+                    <SelectItem
+                      key={key}
+                      value={encounterType.name}
+                      text={encounterType.name}
+                    />
+                  ))}
+                </Select>
+                <TextArea
+                  labelText={t("description", "Description")}
+                  defaultValue={saveState === "update" ? form?.description : ""}
+                  cols={6}
+                  rows={3}
+                  id="description"
+                  placeholder={t(
+                    "descriptionPlaceholderText",
+                    "e.g. A form used to collect encounter data for clients in the Express Care program."
+                  )}
+                  required
+                />
+              </Stack>
+            </FormGroup>
+          </ModalBody>
+          <ModalFooter>
+            <Button
+              kind={"secondary"}
+              onClick={() => setOpenSaveFormModal(false)}
+            >
+              {t("close", "Close")}
+            </Button>
+            <Button
+              disabled={isSavingForm}
+              className={styles.spinner}
+              type={"submit"}
+              kind={"primary"}
+            >
+              {isSavingForm ? (
+                <InlineLoading description={t("saving", "Saving") + "..."} />
+              ) : (
+                <span>{t("save", "Save")}</span>
+              )}
+            </Button>
+          </ModalFooter>
+        </Form>
+      </ComposedModal>
+
+      <Button
+        disabled={!schema}
+        kind="primary"
+        onClick={() =>
+          isSavingNewForm ? openModal("new") : setOpenConfirmSaveModal(true)
+        }
+      >
+        {t("saveForm", "Save form")}
+      </Button>
+    </div>
+  );
+};
+
+export default SaveForm;

package/src/components/modals/save-form.scss

@@ -0,0 +1,5 @@
+.spinner {
+  &:global(.cds--inline-loading) {
+    min-height: 1rem;
+  }
+}

package/src/components/schema-editor/schema-editor.component.tsx

@@ -0,0 +1,191 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import AceEditor from "react-ace";
+import "ace-builds/webpack-resolver";
+import "ace-builds/src-noconflict/ext-language_tools";
+import { Button, InlineLoading } from "@carbon/react";
+import { useTranslation } from "react-i18next";
+import { OHRIFormSchema } from "@ohri/openmrs-ohri-form-engine-lib";
+import { RouteParams, Schema } from "../../types";
+import styles from "./schema-editor.scss";
+
+type SchemaEditorProps = {
+  isLoading: boolean;
+  onSchemaChange: (schema: Schema) => void;
+  schema: Schema;
+};
+
+const SchemaEditor: React.FC<SchemaEditorProps> = ({
+  isLoading,
+  onSchemaChange,
+  schema,
+}) => {
+  const { t } = useTranslation();
+  const { formUuid } = useParams<RouteParams>();
+  const isNewSchema = !formUuid;
+
+  const [stringifiedSchema, setStringifiedSchema] = useState(
+    schema ? JSON.stringify(schema, null, 2) : ""
+  );
+  const [invalidJsonErrorMessage, setInvalidJsonErrorMessage] = useState("");
+  const [isRendering, setIsRendering] = useState(false);
+
+  const resetErrorMessage = useCallback(() => {
+    setInvalidJsonErrorMessage("");
+  }, []);
+
+  const handleSchemaChange = (updatedSchema: string) => {
+    setStringifiedSchema(updatedSchema);
+  };
+
+  const inputDummySchema = useCallback(() => {
+    const dummySchema: OHRIFormSchema = {
+      encounterType: "",
+      name: "Sample Form",
+      pages: [
+        {
+          label: "First Page",
+          sections: [
+            {
+              label: "A Section",
+              isExpanded: "true",
+              questions: [
+                {
+                  label: "A Question of type obs that renders a text input",
+                  type: "obs",
+                  questionOptions: {
+                    rendering: "text",
+                    concept: "a-system-defined-concept-uuid",
+                  },
+                  id: "sampleQuestion",
+                },
+              ],
+            },
+            {
+              label: "Another Section",
+              isExpanded: "true",
+              questions: [
+                {
+                  label:
+                    "Another Question of type obs whose answers get rendered as radio inputs",
+                  type: "obs",
+                  questionOptions: {
+                    rendering: "radio",
+                    concept: "system-defined-concept-uuid",
+                    answers: [
+                      {
+                        concept: "another-system-defined-concept-uuid",
+                        label: "Choice 1",
+                        conceptMappings: [],
+                      },
+                      {
+                        concept: "yet-another-system-defined-concept-uuid",
+                        label: "Choice 2",
+                        conceptMappings: [],
+                      },
+                      {
+                        concept: "yet-one-more-system-defined-concept-uuid",
+                        label: "Choice 3",
+                        conceptMappings: [],
+                      },
+                    ],
+                  },
+                  id: "anotherSampleQuestion",
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      processor: "EncounterFormProcessor",
+      referencedForms: [],
+      uuid: "xxx",
+    };
+
+    setStringifiedSchema(JSON.stringify(dummySchema, null, 2));
+    onSchemaChange({ ...dummySchema });
+  }, [onSchemaChange]);
+
+  const renderSchemaChanges = useCallback(() => {
+    setIsRendering(true);
+    resetErrorMessage();
+
+    try {
+      const parsedJson: Schema = JSON.parse(stringifiedSchema);
+      onSchemaChange(parsedJson);
+      setStringifiedSchema(JSON.stringify(parsedJson, null, 2));
+    } catch (error) {
+      setInvalidJsonErrorMessage(error.message);
+    }
+    setIsRendering(false);
+  }, [stringifiedSchema, onSchemaChange, resetErrorMessage]);
+
+  useEffect(() => {
+    setStringifiedSchema(JSON.stringify(schema, null, 2));
+  }, [schema]);
+
+  return (
+    <>
+      <div className={styles.actionButtons}>
+        {isLoading ? (
+          <InlineLoading
+            description={t("loadingSchema", "Loading schema") + "..."}
+          />
+        ) : null}
+
+        {isNewSchema ? (
+          <Button kind="secondary" onClick={inputDummySchema}>
+            {t("inputDummySchema", "Input dummy schema")}
+          </Button>
+        ) : null}
+
+        <Button
+          disabled={isRendering}
+          kind="primary"
+          onClick={renderSchemaChanges}
+        >
+          {isRendering ? (
+            <InlineLoading
+              className={styles.spinner}
+              description={t("rendering", "Rendering") + "..."}
+            />
+          ) : (
+            <span>{t("renderChanges", "Render changes")}</span>
+          )}
+        </Button>
+      </div>
+
+      {invalidJsonErrorMessage ? (
+        <div className={styles.errorContainer}>
+          <p className={styles.heading}>
+            {t("schemaError", "There's an error in your schema.")}
+          </p>
+          <p>{invalidJsonErrorMessage}</p>
+        </div>
+      ) : null}
+
+      <AceEditor
+        style={{ height: "100vh", width: "100%" }}
+        mode="json"
+        theme="textmate"
+        name="schemaEditor"
+        onChange={handleSchemaChange}
+        fontSize={15}
+        showPrintMargin={false}
+        showGutter={true}
+        highlightActiveLine={true}
+        value={stringifiedSchema}
+        setOptions={{
+          enableBasicAutocompletion: false,
+          enableLiveAutocompletion: false,
+          displayIndentGuides: true,
+          enableSnippets: false,
+          showLineNumbers: true,
+          tabSize: 2,
+        }}
+      />
+    </>
+  );
+};
+
+export default SchemaEditor;

package/src/components/schema-editor/schema-editor.scss

@@ -0,0 +1,26 @@
+@use '@carbon/styles/scss/colors';
+@use '@carbon/styles/scss/type';
+
+.actionButtons {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin: 1rem 0;
+
+  button {
+    margin-left: 1rem
+  }
+}
+
+.errorContainer {
+  @include type.type-style("body-compact-02");
+  background-color: colors.$red-20;
+  color: colors.$red-70;
+  padding: 1.5rem;
+  margin: 1rem 0;
+}
+
+.heading {
+  @include type.type-style('heading-compact-02');
+  margin-bottom: 1rem;
+}

package/src/config-schema.ts

@@ -0,0 +1,47 @@
+import { Type } from "@openmrs/esm-framework";
+
+export const configSchema = {
+  questionTypes: {
+    _type: Type.Array,
+    _description:
+      "Provides information that the processor uses to render a field",
+    _default: [
+      "complex-obs",
+      "control",
+      "encounterDatetime",
+      "encounterLocation",
+      "encounterProvider",
+      "obs",
+      "obsGroup",
+      "personAttribute",
+      "testOrder",
+    ],
+  },
+  fieldTypes: {
+    _type: Type.Array,
+    _description:
+      "An array of available field types. A question can have only one field type, and the field type determines how the question is rendered.",
+    _default: [
+      "date",
+      "drug",
+      "field-set",
+      "file",
+      "group",
+      "multiCheckbox",
+      "number",
+      "problem",
+      "radio",
+      "repeating",
+      "select",
+      "text",
+      "textarea",
+      "ui-select-extended",
+    ],
+  },
+  patientUuid: {
+    _type: "String",
+    _default: "88f1032f-adae-4ef2-9025-2c40b71dd897",
+    _description:
+      "UUID of the test patient whose information gets rendered in a patient banner within the form renderer",
+  },
+};

package/src/constants.ts

@@ -0,0 +1,3 @@
+export const spaRoot = window["getOpenmrsSpaBase"];
+export const basePath = "/form-builder";
+export const spaBasePath = `${window.spaBase}${basePath}`;

package/src/declarations.d.tsx

@@ -0,0 +1,2 @@
+declare module "*.css";
+declare module "*.scss";

package/src/form-builder-app-menu-link.component.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { ConfigurableLink } from "@openmrs/esm-framework";
+import { useTranslation } from "react-i18next";
+import { spaBasePath } from "./constants";
+
+export default function FormBuilderAppMenuLink() {
+  const { t } = useTranslation();
+  return (
+    <ConfigurableLink to={spaBasePath}>
+      {t("formBuilder", "Form Builder")}
+    </ConfigurableLink>
+  );
+}