@openmrs/esm-form-builder-app 1.0.0

package/src/forms.resource.ts

@@ -0,0 +1,178 @@
+import { openmrsFetch, FetchResponse } from "@openmrs/esm-framework";
+import axios from "axios";
+import { Schema } from "./types";
+
+export const deleteClobData = async (valueReference: string) => {
+  const request: FetchResponse = await openmrsFetch(
+    `/ws/rest/v1/clobdata/${valueReference}`,
+    {
+      method: "DELETE",
+      headers: { "Content-Type": "application/json" },
+    }
+  );
+  return request;
+};
+
+export const deleteResource = async (
+  formUUID: string,
+  resourceUUID: string
+) => {
+  const request: FetchResponse = await openmrsFetch(
+    `/ws/rest/v1/form/${formUUID}/resource/${resourceUUID}`,
+    {
+      method: "DELETE",
+      headers: { "Content-Type": "application/json" },
+    }
+  );
+  return request;
+};
+
+export const uploadSchema = async (schema: Schema) => {
+  const schemaBlob = new Blob([JSON.stringify(schema)], {
+    type: "application/json",
+  });
+  const body = new FormData();
+  body.append("file", schemaBlob);
+  const headers = {
+    Accept: "application/json",
+    "Content-Type": undefined,
+  };
+  const request = axios
+    .post(`${window.origin}/openmrs/ws/rest/v1/clobdata`, body, {
+      headers: headers,
+    })
+    .then((response) => {
+      return response.data;
+    });
+  return request;
+};
+
+export const getResourceUUID = async (
+  formUUID: string,
+  valueReference: any
+) => {
+  const body = {
+    name: "JSON schema",
+    dataType: "AmpathJsonSchema",
+    valueReference: valueReference,
+  };
+  const request: FetchResponse = await openmrsFetch(
+    `/ws/rest/v1/form/${formUUID}/resource`,
+    {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: body,
+    }
+  );
+  return request;
+};
+
+export const saveNewForm = async (
+  name: any,
+  version: any,
+  published?: any,
+  description?: any,
+  encounterType?: any
+) => {
+  const abortController = new AbortController();
+
+  const body = {
+    name: name,
+    version: version,
+    published: published || false,
+    description: description || "",
+  };
+  if (encounterType) {
+    body["encounterType"] = encounterType;
+  }
+  const headers = {
+    "Content-Type": "application/json",
+  };
+
+  const response: FetchResponse = await openmrsFetch(`/ws/rest/v1/form`, {
+    method: "POST",
+    headers: headers,
+    body: body,
+    signal: abortController.signal,
+  });
+
+  return response.data;
+};
+
+export const publishForm = async (uuid) => {
+  const body = { published: true };
+  const request: FetchResponse = await openmrsFetch(
+    `/ws/rest/v1/form/${uuid}`,
+    {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: body,
+    }
+  );
+  return request;
+};
+
+export const unpublishForm = async (uuid) => {
+  const body = { published: false };
+  const request: FetchResponse = await openmrsFetch(
+    `/ws/rest/v1/form/${uuid}`,
+    {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: body,
+    }
+  );
+  return request;
+};
+
+export const updateName = async (name: string, uuid) => {
+  const body = { name: name };
+  const request: FetchResponse = await openmrsFetch(
+    `/ws/rest/v1/form/${uuid}`,
+    {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: body,
+    }
+  );
+  return request;
+};
+
+export const updateVersion = async (version: string, uuid) => {
+  const body = { version: version };
+  const request: FetchResponse = await openmrsFetch(
+    `/ws/rest/v1/form/${uuid}`,
+    {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: body,
+    }
+  );
+  return request;
+};
+
+export const updateDescription = async (description: string, uuid) => {
+  const body = { description: description };
+  const request: FetchResponse = await openmrsFetch(
+    `/ws/rest/v1/form/${uuid}`,
+    {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: body,
+    }
+  );
+  return request;
+};
+
+export const updateEncounterType = async (encounterTypeUUID: any, uuid) => {
+  const body = { encounterType: encounterTypeUUID };
+  const request: FetchResponse = await openmrsFetch(
+    `/ws/rest/v1/form/${uuid}`,
+    {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: body,
+    }
+  );
+  return request;
+};

package/src/hooks/useClobdata.ts

@@ -0,0 +1,20 @@
+import useSWRImmutable from "swr/immutable";
+import { openmrsFetch } from "@openmrs/esm-framework";
+import { Form, Schema } from "../types";
+
+export const useClobdata = (form?: Form) => {
+  const valueReference = form?.resources?.[0].valueReference;
+  const formHasResources = form?.resources.length > 0 && valueReference;
+  const CLOBDATA_URL = `/ws/rest/v1/clobdata/${valueReference}`;
+
+  const { data, error } = useSWRImmutable<{ data: Schema }, Error>(
+    formHasResources ? CLOBDATA_URL : null,
+    openmrsFetch
+  );
+
+  return {
+    clobdata: data?.data,
+    clobdataError: error || null,
+    isLoadingClobdata: (!data && !error) || false,
+  };
+};

package/src/hooks/useConceptLookup.ts

@@ -0,0 +1,18 @@
+import useSWR from "swr";
+import { openmrsFetch } from "@openmrs/esm-framework";
+import { Concept } from "../types";
+
+export function useConceptLookup(conceptId: string) {
+  const CONCEPT_LOOKUP_URL = `/ws/rest/v1/concept?q=${conceptId}&v=full`;
+
+  const { data, error } = useSWR<{ data: { results: Array<Concept> } }, Error>(
+    conceptId ? CONCEPT_LOOKUP_URL : null,
+    openmrsFetch
+  );
+
+  return {
+    concepts: data?.data?.results ?? [],
+    conceptLookupError: error || null,
+    isLoadingConcepts: (!data && !error) || false,
+  };
+}

package/src/hooks/useConceptName.ts

@@ -0,0 +1,18 @@
+import useSWR from "swr";
+import { openmrsFetch } from "@openmrs/esm-framework";
+
+export function useConceptName(conceptId: string) {
+  const customRepresentation = "custom:(name:(display))";
+  const CONCEPT_LOOKUP_URL = `/ws/rest/v1/concept/${conceptId}?v=${customRepresentation}`;
+
+  const { data, error } = useSWR<
+    { data: { name: { display: string } } },
+    Error
+  >(conceptId ? CONCEPT_LOOKUP_URL : null, openmrsFetch);
+
+  return {
+    conceptName: data?.data?.name?.display ?? null,
+    conceptNameLookupError: error || null,
+    isLoadingConceptName: (!data && !error) || false,
+  };
+}

package/src/hooks/useEncounterTypes.ts

@@ -0,0 +1,18 @@
+import useSWRImmutable from "swr/immutable";
+import { openmrsFetch } from "@openmrs/esm-framework";
+import { EncounterType } from "../types";
+
+export const useEncounterTypes = () => {
+  const ENCOUNTER_TYPES_URL = `/ws/rest/v1/encountertype?v=custom:(uuid,name)`;
+
+  const { data, error } = useSWRImmutable<
+    { data: { results: Array<EncounterType> } },
+    Error
+  >(ENCOUNTER_TYPES_URL, openmrsFetch);
+
+  return {
+    encounterTypes: data?.data?.results ?? [],
+    encounterTypesError: error || null,
+    isEncounterTypesLoading: (!data && !error) || false,
+  };
+};

package/src/hooks/useForm.ts

@@ -0,0 +1,18 @@
+import useSWR from "swr/immutable";
+import { openmrsFetch } from "@openmrs/esm-framework";
+import { Form } from "../types";
+
+export const useForm = (uuid: string) => {
+  const FORM_URL = `/ws/rest/v1/form/${uuid}?v=full`;
+
+  const { data, error } = useSWR<{ data: Form }, Error>(
+    uuid ? FORM_URL : null,
+    openmrsFetch
+  );
+
+  return {
+    form: data?.data,
+    formError: error || null,
+    isLoadingForm: (!data && !error) || false,
+  };
+};

package/src/hooks/useForms.ts

@@ -0,0 +1,20 @@
+import useSWR from "swr";
+import { openmrsFetch } from "@openmrs/esm-framework";
+import { Form } from "../types";
+
+export function useForms() {
+  const FORMS_URL =
+    "/ws/rest/v1/form?v=custom:(uuid,name,encounterType:(uuid,name),version,published,retired,resources:(uuid,name,dataType,valueReference))";
+
+  const { data, error, isValidating } = useSWR<
+    { data: { results: Array<Form> } },
+    Error
+  >(FORMS_URL, openmrsFetch);
+
+  return {
+    forms: data?.data?.results ?? [],
+    error: error,
+    isLoading: (!data && !error) || false,
+    isValidating,
+  };
+}

package/src/index.ts

@@ -0,0 +1,70 @@
+import {
+  getAsyncLifecycle,
+  defineConfigSchema,
+  registerBreadcrumbs,
+} from "@openmrs/esm-framework";
+import { configSchema } from "./config-schema";
+
+const importTranslation = require.context(
+  "../translations",
+  false,
+  /.json$/,
+  "lazy"
+);
+
+const backendDependencies = {
+  fhir2: "^1.2.0",
+  "webservices.rest": "^2.2.0",
+};
+
+function setupOpenMRS() {
+  const moduleName = "@openmrs/esm-form-builder-app";
+
+  const options = {
+    featureName: "form-builder",
+    moduleName,
+  };
+
+  defineConfigSchema(moduleName, configSchema);
+
+  registerBreadcrumbs([
+    {
+      path: `${window.spaBase}/form-builder`,
+      title: "Form Builder",
+      parent: `${window.spaBase}/home`,
+    },
+    {
+      path: `${window.spaBase}/form-builder/new`,
+      title: "Form Editor",
+      parent: `${window.spaBase}/form-builder`,
+    },
+    {
+      path: `${window.spaBase}/form-builder/edit/:uuid`,
+      title: "Form Editor",
+      parent: `${window.spaBase}/form-builder`,
+    },
+  ]);
+
+  return {
+    pages: [
+      {
+        load: getAsyncLifecycle(() => import("./root.component"), options),
+        route: "form-builder",
+      },
+    ],
+    extensions: [
+      {
+        id: "form-builder-app-menu-link",
+        slot: "app-menu-slot",
+        load: getAsyncLifecycle(
+          () => import("./form-builder-app-menu-link.component"),
+          options
+        ),
+        online: true,
+        offline: true,
+      },
+    ],
+  };
+}
+
+export { backendDependencies, importTranslation, setupOpenMRS };

package/src/root.component.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+
+import Dashboard from "./components/dashboard/dashboard.component";
+import FormEditor from "./components/form-editor/form-editor.component";
+
+const RootComponent: React.FC = () => {
+  return (
+    <BrowserRouter basename={`${window.spaBase}/form-builder`}>
+      <Routes>
+        <Route path="/" element={<Dashboard />} />
+        <Route path="/new" element={<FormEditor />} />
+        <Route path="/edit/:formUuid" element={<FormEditor />} />
+      </Routes>
+    </BrowserRouter>
+  );
+};
+
+export default RootComponent;

package/src/setup-tests.ts

@@ -0,0 +1,11 @@
+import "@testing-library/jest-dom/extend-expect";
+
+declare global {
+  interface Window {
+    URL: {
+      createObjectURL: (blob: Blob) => string;
+    };
+  }
+}
+
+window.URL.createObjectURL = jest.fn();

package/src/test-helpers.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { SWRConfig } from "swr";
+import {
+  render,
+  screen,
+  waitForElementToBeRemoved,
+} from "@testing-library/react";
+
+// This component wraps whatever component is passed to it with an SWRConfig context which provides a global configuration for all SWR hooks.
+const swrWrapper = ({ children }) => {
+  return (
+    <SWRConfig
+      value={{
+        // Sets the `dedupingInterval` to 0 - we don't need to dedupe requests in our test environment.
+        dedupingInterval: 0,
+        // Returns a new Map object, effectively wrapping our application with an empty cache provider. This is useful for resetting the SWR cache between test cases.
+        provider: () => new Map(),
+      }}
+    >
+      {children}
+    </SWRConfig>
+  );
+};
+
+// Render the provided component within the wrapper we created above
+export const renderWithSwr = (ui, options?) =>
+  render(ui, { wrapper: swrWrapper, ...options });
+
+// Helper function that waits for a loading state to disappear from the screen
+export function waitForLoadingToFinish() {
+  return waitForElementToBeRemoved(
+    () => [...screen.queryAllByRole(/progressbar/i)],
+    {
+      timeout: 4000,
+    }
+  );
+}

package/src/types.ts

@@ -0,0 +1,132 @@
+export interface Form {
+  uuid: string;
+  name: string;
+  encounterType: EncounterType;
+  version: string;
+  description: string;
+  published: boolean;
+  retired: boolean;
+  resources: Array<Resource>;
+}
+
+export type RouteParams = { formUuid: string };
+
+export interface FilterProps {
+  rowIds: Array<string>;
+  headers: Array<Record<string, string>>;
+  cellsById: any;
+  inputValue: string;
+  getCellId: (row, key) => string;
+}
+
+export interface EncounterType {
+  uuid: string;
+  name: string;
+}
+
+export interface Resource {
+  uuid: string;
+  name: string;
+  dataType: string;
+  valueReference: string;
+}
+
+export interface Schema {
+  name: string;
+  pages: any;
+  processor: string;
+  uuid: string;
+  encounterType: string;
+  referencedForms: any;
+}
+
+export interface ClobResponse {
+  body: any;
+  data: any;
+  headers: any;
+  statusText: any;
+  status: any;
+}
+
+export interface SchemaContextType {
+  schema: Schema;
+  setSchema: any;
+}
+
+export interface Page {
+  label: string;
+  sections: Array<Section>;
+}
+
+export interface Section {
+  label: string;
+  questions: Array<Question>;
+  isExpanded: string | boolean;
+}
+
+export interface Question {
+  label: string;
+  id: string;
+  type: string;
+  questionOptions: QuestionOptions;
+  required: string;
+}
+
+export interface QuestionOptions {
+  rendering: string;
+  answers: Array<Answer>;
+  max: string;
+  min: string;
+  concept: string;
+  conceptMappings: Array<ConceptMapping>;
+  weekList: [];
+  attributeType: string;
+  calculate: any;
+  rows: string;
+  orderSettingUuid: string;
+  orderType: string;
+  selectableOrders: Array<Answer>;
+}
+
+export interface Answer {
+  concept: string;
+  label: string;
+}
+
+export interface ConceptMapping {
+  type: string;
+  value: string;
+}
+
+export interface Concept {
+  uuid: string;
+  display: string;
+  mappings: Array<Mappings>;
+  answers: Array<ConceptAnswer>;
+}
+
+export interface ConceptAnswer {
+  uuid: string;
+  display: string;
+}
+
+export interface Mappings {
+  display: string;
+}
+
+export enum FieldTypes {
+  Date = "date",
+  Drug = "drug",
+  FieldSet = "field-set",
+  File = "file",
+  Group = "group",
+  MultiCheckbox = "multiCheckbox",
+  Number = "number",
+  Problem = "problem",
+  Radio = "radio",
+  Repeating = "repeating",
+  Select = "select",
+  Text = "text",
+  TextArea = "textarea",
+  UiSelectExtended = "ui-select-extended",
+}