@openmrs/esm-form-builder-app 1.0.0

package/src/components/form-renderer/form-renderer.component.tsx

@@ -0,0 +1,123 @@
+import React, { useEffect, useState } from "react";
+import { ErrorBoundary } from "react-error-boundary";
+import { useTranslation } from "react-i18next";
+import { Button, InlineLoading, Tile } from "@carbon/react";
+import { OHRIFormSchema, OHRIForm } from "@ohri/openmrs-ohri-form-engine-lib";
+import { useConfig } from "@openmrs/esm-framework";
+
+import ActionButtons from "../action-buttons/action-buttons.component";
+import styles from "./form-renderer.scss";
+
+type FormRendererProps = {
+  isLoading: boolean;
+  onSchemaChange?: (schema: OHRIFormSchema) => void;
+  schema: OHRIFormSchema;
+};
+
+const FormRenderer: React.FC<FormRendererProps> = ({ isLoading, schema }) => {
+  const { t } = useTranslation();
+  const { patientUuid } = useConfig();
+
+  const dummySchema: OHRIFormSchema = {
+    encounterType: "",
+    name: "Test Form",
+    pages: [
+      {
+        label: "Test Page",
+        sections: [
+          {
+            label: "Test Section",
+            isExpanded: "true",
+            questions: [
+              {
+                label: "Test Question",
+                type: "obs",
+                questionOptions: {
+                  rendering: "text",
+                  concept: "xxxx",
+                },
+                id: "testQuestion",
+              },
+            ],
+          },
+        ],
+      },
+    ],
+    processor: "EncounterFormProcessor",
+    referencedForms: [],
+    uuid: "xxx",
+  };
+
+  const [schemaToRender, setSchemaToRender] =
+    useState<OHRIFormSchema>(dummySchema);
+
+  useEffect(() => {
+    if (schema) {
+      setSchemaToRender(schema);
+    }
+  }, [schema]);
+
+  if (isLoading) {
+    return (
+      <div className={styles.loadingContainer}>
+        <InlineLoading
+          className={styles.loader}
+          description={t("loading", "Loading") + "..."}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <ActionButtons schema={schema} t={t} />
+
+      <div className={styles.container}>
+        {!schema && (
+          <Tile className={styles.emptyStateTile}>
+            <h4 className={styles.heading}>
+              {t("noSchemaLoaded", "No schema loaded")}
+            </h4>
+            <p className={styles.helperText}>
+              {t(
+                "formRendererHelperText",
+                "Load a form schema in the Schema Editor to the left to see it rendered here by the Form Engine."
+              )}
+            </p>
+          </Tile>
+        )}
+        {schema === schemaToRender && (
+          <ErrorBoundary FallbackComponent={ErrorFallback} onReset={() => {}}>
+            <OHRIForm
+              formJson={schemaToRender}
+              mode={"enter"}
+              patientUUID={patientUuid}
+            />
+          </ErrorBoundary>
+        )}
+      </div>
+    </>
+  );
+};
+
+function ErrorFallback({ error, resetErrorBoundary }) {
+  const { t } = useTranslation();
+  return (
+    <Tile className={styles.errorStateTile}>
+      <h4 className={styles.heading}>
+        {t(
+          "problemLoadingPreview",
+          "There was a problem loading the schema preview"
+        )}
+      </h4>
+      <p className={styles.helperText}>
+        <pre>{error.message}</pre>
+      </p>
+      <Button kind="primary" onClick={resetErrorBoundary}>
+        {t("tryAgain", "Try again")}
+      </Button>
+    </Tile>
+  );
+}
+
+export default FormRenderer;

package/src/components/form-renderer/form-renderer.scss

@@ -0,0 +1,57 @@
+@use '@carbon/styles/scss/colors';
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.container {
+  background-color: white;
+  padding: 1rem;
+  overflow-y: scroll;
+  height: 100vh;
+}
+
+.loadingContainer {
+  @extend .container;
+  background-color: $ui-01;
+  margin-top: 5rem;
+}
+
+.loader {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: inherit;
+}
+
+.emptyStateTile {
+  width: 80%;
+  margin: 1.25rem auto;
+  display: flex;
+  flex-flow: column wrap;
+  align-items: center;
+  justify-content: center;
+  padding: 1.5rem;
+}
+
+.errorStateTile {
+  @extend .emptyStateTile;
+
+  .helperText {
+    margin: 0.75rem 0;
+  }
+
+  button {
+    margin-top: 0.25rem;
+  }
+}
+
+.heading {
+  @include type.type-style('heading-compact-02');
+  color: colors.$gray-100;
+}
+
+.helperText {
+  margin-top: 0.5rem;
+  @include type.type-style('body-01');
+  color: colors.$gray-90;
+}

package/src/components/interactive-builder/add-question-modal.component.tsx

@@ -0,0 +1,427 @@
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  Button,
+  ComposedModal,
+  Form,
+  FormGroup,
+  FormLabel,
+  Layer,
+  InlineLoading,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  MultiSelect,
+  RadioButton,
+  RadioButtonGroup,
+  Search,
+  Select,
+  SelectItem,
+  Stack,
+  Tag,
+  TextInput,
+  Tile,
+} from "@carbon/react";
+import flattenDeep from "lodash-es/flattenDeep";
+import { showNotification, showToast, useConfig } from "@openmrs/esm-framework";
+import {
+  Answer,
+  Concept,
+  ConceptMapping,
+  FieldTypes,
+  Question,
+  Schema,
+} from "../../types";
+import { useConceptLookup } from "../../hooks/useConceptLookup";
+import styles from "./question-modal.scss";
+
+type AddQuestionModalProps = {
+  onModalChange: (showModal: boolean) => void;
+  onQuestionEdit: (question: Question) => void;
+  onSchemaChange: (schema: Schema) => void;
+  pageIndex: number;
+  questionIndex: number;
+  questionToEdit: Question;
+  resetIndices: () => void;
+  schema: Schema;
+  sectionIndex: number;
+  showModal: boolean;
+};
+
+const AddQuestionModal: React.FC<AddQuestionModalProps> = ({
+  schema,
+  onSchemaChange,
+  pageIndex,
+  sectionIndex,
+  questionIndex,
+  resetIndices,
+  showModal,
+  onModalChange,
+  questionToEdit,
+  onQuestionEdit,
+}) => {
+  const { t } = useTranslation();
+  const { fieldTypes, questionTypes } = useConfig();
+  const [max, setMax] = useState("");
+  const [min, setMin] = useState("");
+  const [questionLabel, setQuestionLabel] = useState("");
+  const [questionType, setQuestionType] = useState("");
+  const [isQuestionRequired, setIsQuestionRequired] = useState(false);
+  const [fieldType, setFieldType] = useState<FieldTypes>(null);
+  const [questionId, setQuestionId] = useState("");
+  const [answers, setAnswers] = useState<Answer[]>([]);
+  const [selectedConcept, setSelectedConcept] = useState(null);
+  const [conceptMappings, setConceptMappings] = useState<ConceptMapping[]>([]);
+  const [rows, setRows] = useState(2);
+  const [conceptToLookup, setConceptToLookup] = useState("");
+  const [selectedAnswers, setSelectedAnswers] = useState([]);
+  const { concepts, isLoadingConcepts } = useConceptLookup(conceptToLookup);
+
+  const handleConceptChange = (event) => {
+    setConceptToLookup(event.target.value);
+  };
+
+  const handleConceptSelect = (concept: Concept) => {
+    setConceptToLookup("");
+    setSelectedConcept(concept);
+    setAnswers(
+      concept?.answers?.map((answer) => ({
+        concept: answer?.uuid,
+        label: answer?.display,
+      }))
+    );
+    setConceptMappings(
+      concept?.mappings?.map((conceptMapping) => {
+        let data = conceptMapping.display.split(": ");
+        return { type: data[0], value: data[1] };
+      })
+    );
+  };
+
+  const questionIdExists = (idToTest) => {
+    if (questionToEdit?.id === idToTest) {
+      return false;
+    }
+
+    const nestedIds = schema?.pages?.map((page) => {
+      return page?.sections?.map((section) => {
+        return section?.questions?.map((question) => {
+          return question.id;
+        });
+      });
+    });
+
+    const questionIds = flattenDeep(nestedIds);
+
+    return questionIds.includes(idToTest);
+  };
+
+  const handleCreateQuestion = () => {
+    createQuestion();
+    onModalChange(false);
+  };
+
+  const createQuestion = () => {
+    try {
+      const computedQuestionId = `question-${questionIndex + 1}-section-${
+        sectionIndex + 1
+      }-page-${pageIndex + 1}`;
+
+      schema.pages[pageIndex]?.sections?.[sectionIndex]?.questions?.push({
+        label: questionLabel,
+        type: questionType,
+        required: isQuestionRequired,
+        id: questionId ?? computedQuestionId,
+        questionOptions: {
+          rendering: fieldType,
+          concept: selectedConcept.uuid,
+          conceptMappings: conceptMappings,
+          answers: selectedAnswers.map((answer) => ({
+            concept: answer.id,
+            label: answer.text,
+          })),
+        },
+        validators: [],
+      });
+
+      onSchemaChange({ ...schema });
+
+      resetIndices();
+      setQuestionLabel("");
+      setQuestionId("");
+      setIsQuestionRequired(false);
+      setQuestionType(null);
+      setFieldType(null);
+      setSelectedConcept(null);
+      setConceptMappings([]);
+      setAnswers([]);
+      setSelectedAnswers([]);
+
+      showToast({
+        title: t("success", "Success!"),
+        kind: "success",
+        critical: true,
+        description: t("questionCreated", "New question created"),
+      });
+    } catch (error) {
+      showNotification({
+        title: t("errorCreatingQuestion", "Error creating question"),
+        kind: "error",
+        critical: true,
+        description: error?.message,
+      });
+    }
+  };
+
+  return (
+    <ComposedModal open={showModal} onClose={() => onModalChange(false)}>
+      <ModalHeader title={t("createNewQuestion", "Create a new question")} />
+      <Form onSubmit={(event) => event.preventDefault()}>
+        <ModalBody hasScrollingContent>
+          <FormGroup legendText={""}>
+            <Stack gap={5}>
+              <TextInput
+                id="questionLabel"
+                labelText={t("questionLabel", "Label")}
+                placeholder={t("labelPlaceholder", "e.g. Type of Anaesthesia")}
+                value={questionLabel}
+                onChange={(event) => setQuestionLabel(event.target.value)}
+                required
+              />
+              <RadioButtonGroup
+                defaultSelected="optional"
+                name="isQuestionRequired"
+                legendText={t(
+                  "isQuestionRequiredOrOptional",
+                  "Is this question a required or optional field? Required fields must be answered before the form can be submitted."
+                )}
+              >
+                <RadioButton
+                  id="questionIsNotRequired"
+                  defaultChecked={true}
+                  labelText={t("optional", "Optional")}
+                  onClick={() => setIsQuestionRequired(false)}
+                  value="optional"
+                />
+                <RadioButton
+                  id="questionIsRequired"
+                  defaultChecked={false}
+                  labelText={t("required", "Required")}
+                  onClick={() => setIsQuestionRequired(true)}
+                  value="required"
+                />
+              </RadioButtonGroup>
+              <Select
+                value={questionType}
+                onChange={(event) => setQuestionType(event.target.value)}
+                id="questionType"
+                invalidText={t("typeRequired", "Type is required")}
+                labelText={t("questionType", "Question type")}
+                required
+              >
+                {!questionType && (
+                  <SelectItem
+                    text={t("chooseQuestionType", "Choose a question type")}
+                    value=""
+                  />
+                )}
+                {questionTypes.map((questionType, key) => (
+                  <SelectItem
+                    text={questionType}
+                    value={questionType}
+                    key={key}
+                  />
+                ))}
+              </Select>
+              <Select
+                value={fieldType}
+                onChange={(event) => setFieldType(event.target.value)}
+                id="renderingType"
+                invalidText={t(
+                  "validFieldTypeRequired",
+                  "A valid field type value is required"
+                )}
+                labelText={t("fieldType", "Field type")}
+                required
+              >
+                {!fieldType && (
+                  <SelectItem
+                    text={t("chooseFieldType", "Choose a field type")}
+                    value=""
+                  />
+                )}
+                {fieldTypes.map((fieldType, key) => (
+                  <SelectItem text={fieldType} value={fieldType} key={key} />
+                ))}
+              </Select>
+              {fieldType === FieldTypes.Number ? (
+                <>
+                  <TextInput
+                    id="min"
+                    labelText="Min"
+                    value={min || ""}
+                    onChange={(event) => setMin(event.target.value)}
+                    required
+                  />
+                  <TextInput
+                    id="max"
+                    labelText="Max"
+                    value={max || ""}
+                    onChange={(event) => setMax(event.target.value)}
+                    required
+                  />
+                </>
+              ) : fieldType === FieldTypes.TextArea ? (
+                <TextInput
+                  id="textAreaRows"
+                  labelText={t("rows", "Rows")}
+                  value={rows || ""}
+                  onChange={(event) => setRows(event.target.value)}
+                  required
+                />
+              ) : null}
+              <TextInput
+                id="questionId"
+                invalid={questionIdExists(questionId)}
+                invalidText={t(
+                  "questionIdExists",
+                  "This question ID already exists in your schema"
+                )}
+                labelText={t(
+                  "questionId",
+                  "Question ID (prefer camel-case for IDs)"
+                )}
+                value={questionId}
+                onChange={(event) => {
+                  setQuestionId(event.target.value);
+                }}
+                placeholder={t(
+                  "questionIdPlaceholder",
+                  'Enter a unique ID e.g. "anaesthesiaType" for a question asking about the type of anaesthesia.'
+                )}
+                required
+              />
+              {fieldType !== FieldTypes.UiSelectExtended && (
+                <div>
+                  <FormLabel className={styles.label}>
+                    {t("selectBackingConcept", "Select backing concept")}
+                  </FormLabel>
+                  <Search
+                    size="md"
+                    id="conceptLookup"
+                    labelText={t("enterConceptName", "Enter concept name")}
+                    placeholder={t("searchConcept", "Search concept")}
+                    onClear={() => setSelectedConcept(null)}
+                    onChange={handleConceptChange}
+                    value={(() => {
+                      if (conceptToLookup) {
+                        return conceptToLookup;
+                      }
+                      if (selectedConcept) {
+                        return selectedConcept.display;
+                      }
+                      return "";
+                    })()}
+                    required
+                  />
+                  {(() => {
+                    if (!conceptToLookup) return null;
+                    if (isLoadingConcepts)
+                      return (
+                        <InlineLoading
+                          className={styles.loader}
+                          description={t("searching", "Searching") + "..."}
+                        />
+                      );
+                    if (concepts && concepts?.length && !isLoadingConcepts) {
+                      return (
+                        <ul className={styles.conceptList}>
+                          {concepts?.map((concept, index) => (
+                            <li
+                              role="menuitem"
+                              className={styles.concept}
+                              key={index}
+                              onClick={() => handleConceptSelect(concept)}
+                            >
+                              {concept.display}
+                            </li>
+                          ))}
+                        </ul>
+                      );
+                    }
+                    return (
+                      <Layer>
+                        <Tile className={styles.emptyResults}>
+                          <span>
+                            {t(
+                              "noMatchingConcepts",
+                              "No concepts were found that match"
+                            )}{" "}
+                            <strong>"{conceptToLookup}".</strong>
+                          </span>
+                        </Tile>
+                      </Layer>
+                    );
+                  })()}
+                </div>
+              )}
+
+              {/* Handle Concept Mappings */}
+              {/* {conceptMappings && conceptMappings.length ? (
+            <div>{JSON.stringify(conceptMappings)}</div>
+          ) : null} */}
+
+              {selectedAnswers.length ? (
+                <div>
+                  {selectedAnswers.map((answer) => (
+                    <Tag className={styles.tag} key={answer.id} type={"blue"}>
+                      {answer.text}
+                    </Tag>
+                  ))}
+                </div>
+              ) : null}
+
+              {answers && answers.length ? (
+                <MultiSelect
+                  id="selectAnswers"
+                  itemToString={(item) => item.text}
+                  items={answers.map((answer) => ({
+                    id: answer.concept,
+                    text: answer.label,
+                  }))}
+                  onChange={({ selectedItems }) =>
+                    setSelectedAnswers(selectedItems.sort())
+                  }
+                  size="md"
+                  titleText={t(
+                    "selectAnswersToDisplay",
+                    "Select answers to display"
+                  )}
+                />
+              ) : null}
+            </Stack>
+          </FormGroup>
+        </ModalBody>
+      </Form>
+      <ModalFooter>
+        <Button onClick={() => onModalChange(false)} kind="secondary">
+          {t("cancel", "Cancel")}
+        </Button>
+        <Button
+          disabled={
+            !questionLabel ||
+            !questionId ||
+            questionIdExists(questionId) ||
+            !fieldType ||
+            (fieldType !== FieldTypes.UiSelectExtended && !selectedConcept)
+          }
+          onClick={handleCreateQuestion}
+        >
+          <span>{t("save", "Save")}</span>
+        </Button>
+      </ModalFooter>
+    </ComposedModal>
+  );
+};
+
+export default AddQuestionModal;

package/src/components/interactive-builder/delete-page-modal.component.tsx

@@ -0,0 +1,89 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import {
+  Button,
+  ComposedModal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+} from "@carbon/react";
+import { showNotification, showToast } from "@openmrs/esm-framework";
+import { Schema } from "../../types";
+
+type DeletePageModalProps = {
+  onModalChange: (showModal: boolean) => void;
+  onSchemaChange: (schema: Schema) => void;
+  resetIndices: () => void;
+  pageIndex: number;
+  schema: Schema;
+  showModal: boolean;
+};
+
+const DeletePageModal: React.FC<DeletePageModalProps> = ({
+  onModalChange,
+  onSchemaChange,
+  resetIndices,
+  pageIndex,
+  schema,
+  showModal,
+}) => {
+  const { t } = useTranslation();
+
+  const deletePage = (pageIndex) => {
+    try {
+      schema.pages.splice(pageIndex, 1);
+
+      onSchemaChange({ ...schema });
+      resetIndices();
+
+      showToast({
+        title: t("success", "Success!"),
+        kind: "success",
+        critical: true,
+        description: t("pageDeleted", "Page deleted"),
+      });
+    } catch (error) {
+      showNotification({
+        title: t("errorDeletingPage", "Error deleting page"),
+        kind: "error",
+        critical: true,
+        description: error?.message,
+      });
+    }
+  };
+
+  return (
+    <ComposedModal open={showModal} onClose={() => onModalChange(false)}>
+      <ModalHeader
+        title={t(
+          "deletePageConfirmation",
+          "Are you sure you want to delete this page?"
+        )}
+      />
+      <ModalBody>
+        <p>
+          {t(
+            "deletePageExplainerText",
+            "Deleting this page will delete all the sections and questions associated with it. This action cannot be undone."
+          )}
+        </p>
+      </ModalBody>
+      <ModalFooter>
+        <Button kind="secondary" onClick={() => onModalChange(false)}>
+          {t("cancel", "Cancel")}
+        </Button>
+        <Button
+          kind="danger"
+          onClick={() => {
+            deletePage(pageIndex);
+            onModalChange(false);
+          }}
+        >
+          <span>{t("deletePage", "Delete page")}</span>
+        </Button>
+      </ModalFooter>
+    </ComposedModal>
+  );
+};
+
+export default DeletePageModal;