@openmrs/esm-form-builder-app 1.0.1-pre.126

package/src/components/interactive-builder/section-modal.component.tsx

@@ -0,0 +1,94 @@
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  Button,
+  ComposedModal,
+  Form,
+  FormGroup,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  TextInput,
+} from "@carbon/react";
+import { showToast, showNotification } from "@openmrs/esm-framework";
+import { Schema } from "../../types";
+
+type SectionModalProps = {
+  schema: Schema;
+  onSchemaChange: (schema: Schema) => void;
+  pageIndex: number;
+  resetIndices: () => void;
+  showModal: boolean;
+  onModalChange: (showModal: boolean) => void;
+};
+
+const SectionModal: React.FC<SectionModalProps> = ({
+  schema,
+  onSchemaChange,
+  pageIndex,
+  resetIndices,
+  showModal,
+  onModalChange,
+}) => {
+  const { t } = useTranslation();
+  const [sectionTitle, setSectionTitle] = useState("");
+
+  const handleUpdatePageSections = () => {
+    updateSections();
+    onModalChange(false);
+  };
+
+  const updateSections = () => {
+    try {
+      schema.pages[pageIndex]?.sections?.push({
+        label: sectionTitle,
+        isExpanded: "true",
+        questions: [],
+      });
+      onSchemaChange({ ...schema });
+      setSectionTitle("");
+      resetIndices();
+
+      showToast({
+        title: t("success", "Success!"),
+        kind: "success",
+        critical: true,
+        description: t("sectionCreated", "New section created"),
+      });
+    } catch (error) {
+      showNotification({
+        title: t("errorCreatingSection", "Error creating section"),
+        kind: "error",
+        critical: true,
+        description: error?.message,
+      });
+    }
+  };
+
+  return (
+    <ComposedModal open={showModal} onClose={() => onModalChange(false)}>
+      <ModalHeader title={t("createNewSection", "Create a new section")} />
+      <Form onSubmit={(event) => event.preventDefault()}>
+        <ModalBody>
+          <FormGroup legendText={""}>
+            <TextInput
+              id="sectionTitle"
+              labelText={t("enterSectionTitle", "Enter a section title")}
+              value={sectionTitle}
+              onChange={(event) => setSectionTitle(event.target.value)}
+            />
+          </FormGroup>
+        </ModalBody>
+      </Form>
+      <ModalFooter>
+        <Button onClick={() => onModalChange(false)} kind="secondary">
+          {t("cancel", "Cancel")}
+        </Button>
+        <Button disabled={!sectionTitle} onClick={handleUpdatePageSections}>
+          <span>{t("save", "Save")}</span>
+        </Button>
+      </ModalFooter>
+    </ComposedModal>
+  );
+};
+export default SectionModal;

package/src/components/interactive-builder/value-editor.component.tsx

@@ -0,0 +1,55 @@
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Button, TextInput } from "@carbon/react";
+import { Close, Save } from "@carbon/react/icons";
+import styles from "./value-editor.scss";
+
+type ValueEditorProps = {
+  id: string;
+  handleCancel: () => void;
+  handleSave: (value: string) => void;
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  value: string;
+};
+
+const ValueEditor: React.FC<ValueEditorProps> = ({
+  id,
+  handleCancel,
+  handleSave,
+  onChange,
+  value,
+}) => {
+  const { t } = useTranslation();
+  const [tmpValue, setTmpValue] = useState(value);
+
+  return (
+    <>
+      <TextInput
+        id={id}
+        labelText=""
+        value={tmpValue}
+        onChange={(event) => setTmpValue(event.target.value)}
+      />
+      <div className={styles.actionButtons}>
+        <Button
+          size="md"
+          renderIcon={(props) => <Save {...props} size={16} />}
+          kind="primary"
+          onClick={() => handleSave(tmpValue)}
+        >
+          {t("saveButtonText", "Save")}
+        </Button>
+        <Button
+          size="md"
+          renderIcon={(props) => <Close {...props} size={16} />}
+          kind="secondary"
+          onClick={handleCancel}
+        >
+          {t("cancelButtonText", "Cancel")}
+        </Button>
+      </div>
+    </>
+  );
+};
+
+export default ValueEditor;

package/src/components/interactive-builder/value-editor.scss

@@ -0,0 +1,10 @@
+.actionButtons {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin: 1rem 0;
+
+  button {
+    margin-left: 1rem
+  }
+}

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,190 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import AceEditor from "react-ace";
+import "ace-builds/webpack-resolver";
+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.errorMessage}>
+          <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: false,
+          enableSnippets: false,
+          showLineNumbers: true,
+          tabSize: 2,
+        }}
+      />
+    </>
+  );
+};
+
+export default SchemaEditor;

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

@@ -0,0 +1,30 @@
+@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;
+}
+
+.errorMessage {
+  @include type.type-style('body-compact-01');
+}
+
+.heading {
+  @include type.type-style('heading-compact-02');
+  margin-bottom: 1rem;
+}