@openmrs/esm-form-builder-app 2.0.2-pre.597 → 2.0.2-pre.608

package/dist/openmrs-esm-form-builder-app.js.buildmanifest.json

@@ -48,31 +48,6 @@
       "hash": "518ae82066d81c40",
       "childrenByOrder": {}
     },
-    {
-      "rendered": true,
-      "initial": false,
-      "entry": false,
-      "recorded": false,
-      "size": 307479,
-      "sizes": {
-        "javascript": 307437,
-        "consume-shared": 42
-      },
-      "names": [],
-      "idHints": [],
-      "runtime": [
-        "@openmrs/esm-form-builder-app",
-        "main"
-      ],
-      "files": [
-        "150.js"
-      ],
-      "auxiliaryFiles": [
-        "150.js.map"
-      ],
-      "hash": "b0c38df30153db0d",
-      "childrenByOrder": {}
-    },
     {
       "rendered": true,
       "initial": false,
@@ -94,7 +69,7 @@
       "auxiliaryFiles": [
         "153.js.map"
       ],
-      "hash": "4c3669926dfc101e",
+      "hash": "81bedc3c2549a3e7",
       "childrenByOrder": {}
     },
     {
@@ -149,7 +124,34 @@
       "auxiliaryFiles": [
         "main.js.map"
       ],
-      "hash": "5017531543c2a903",
+      "hash": "1931359d73ad55fb",
+      "childrenByOrder": {}
+    },
+    {
+      "rendered": true,
+      "initial": false,
+      "entry": false,
+      "recorded": false,
+      "reason": "split chunk (cache group: defaultVendors)",
+      "size": 2552869,
+      "sizes": {
+        "javascript": 2552869
+      },
+      "names": [],
+      "idHints": [
+        "vendors"
+      ],
+      "runtime": [
+        "@openmrs/esm-form-builder-app",
+        "main"
+      ],
+      "files": [
+        "237.js"
+      ],
+      "auxiliaryFiles": [
+        "237.js.map"
+      ],
+      "hash": "7b13d49ee394f8a7",
       "childrenByOrder": {}
     },
     {
@@ -173,7 +175,32 @@
       "auxiliaryFiles": [
         "256.js.map"
       ],
-      "hash": "d05d1cc708e34e7d",
+      "hash": "4b2d5a5e281c752d",
+      "childrenByOrder": {}
+    },
+    {
+      "rendered": true,
+      "initial": false,
+      "entry": false,
+      "recorded": false,
+      "size": 313707,
+      "sizes": {
+        "javascript": 313665,
+        "consume-shared": 42
+      },
+      "names": [],
+      "idHints": [],
+      "runtime": [
+        "@openmrs/esm-form-builder-app",
+        "main"
+      ],
+      "files": [
+        "291.js"
+      ],
+      "auxiliaryFiles": [
+        "291.js.map"
+      ],
+      "hash": "9e83c8e871a8093e",
       "childrenByOrder": {}
     },
     {
@@ -205,9 +232,9 @@
       "initial": false,
       "entry": false,
       "recorded": false,
-      "size": 9107,
+      "size": 9188,
       "sizes": {
-        "javascript": 9107
+        "javascript": 9188
       },
       "names": [],
       "idHints": [],
@@ -219,7 +246,7 @@
         "319.js"
       ],
       "auxiliaryFiles": [],
-      "hash": "7caddfa130c8366d",
+      "hash": "c2788be2e894ba4e",
       "childrenByOrder": {}
     },
     {
@@ -243,7 +270,7 @@
       "auxiliaryFiles": [
         "447.js.map"
       ],
-      "hash": "0bbd10673697a3b4",
+      "hash": "f0c5d5a564137698",
       "childrenByOrder": {}
     },
     {
@@ -713,7 +740,7 @@
         "ffb6d262efb0718a20d60b5fecb76ea6.js",
         "ffd3b83e8b5878f4785591ff54b1dfff.js"
       ],
-      "hash": "57fea95d456af9a5",
+      "hash": "c8c2d33c9ff23548",
       "childrenByOrder": {}
     },
     {
@@ -748,9 +775,9 @@
       "initial": false,
       "entry": false,
       "recorded": false,
-      "size": 9023,
+      "size": 9135,
       "sizes": {
-        "javascript": 9023
+        "javascript": 9135
       },
       "names": [],
       "idHints": [],
@@ -762,7 +789,7 @@
         "574.js"
       ],
       "auxiliaryFiles": [],
-      "hash": "0c9ebd6bb2f45767",
+      "hash": "34e125a4b479b921",
       "childrenByOrder": {}
     },
     {
@@ -791,9 +818,9 @@
       "initial": false,
       "entry": false,
       "recorded": false,
-      "size": 9107,
+      "size": 9188,
       "sizes": {
-        "javascript": 9107
+        "javascript": 9188
       },
       "names": [],
       "idHints": [],
@@ -805,7 +832,7 @@
         "757.js"
       ],
       "auxiliaryFiles": [],
-      "hash": "fe461805cbbad007",
+      "hash": "8d80dcd5b3a90b3f",
       "childrenByOrder": {}
     },
     {
@@ -813,9 +840,9 @@
       "initial": false,
       "entry": false,
       "recorded": false,
-      "size": 9107,
+      "size": 9188,
       "sizes": {
-        "javascript": 9107
+        "javascript": 9188
       },
       "names": [],
       "idHints": [],
@@ -827,7 +854,7 @@
         "788.js"
       ],
       "auxiliaryFiles": [],
-      "hash": "ee94babaeb90fa66",
+      "hash": "41a3af594d0e5693",
       "childrenByOrder": {}
     },
     {
@@ -862,9 +889,9 @@
       "initial": false,
       "entry": false,
       "recorded": false,
-      "size": 9107,
+      "size": 9188,
       "sizes": {
-        "javascript": 9107
+        "javascript": 9188
       },
       "names": [],
       "idHints": [],
@@ -876,7 +903,7 @@
         "807.js"
       ],
       "auxiliaryFiles": [],
-      "hash": "b995440c53ba9222",
+      "hash": "5f695f32eac1cc15",
       "childrenByOrder": {}
     },
     {
@@ -884,9 +911,9 @@
       "initial": false,
       "entry": false,
       "recorded": false,
-      "size": 9107,
+      "size": 9188,
       "sizes": {
-        "javascript": 9107
+        "javascript": 9188
       },
       "names": [],
       "idHints": [],
@@ -898,34 +925,7 @@
         "833.js"
       ],
       "auxiliaryFiles": [],
-      "hash": "a862eee5f26646a6",
-      "childrenByOrder": {}
-    },
-    {
-      "rendered": true,
-      "initial": false,
-      "entry": false,
-      "recorded": false,
-      "reason": "split chunk (cache group: defaultVendors)",
-      "size": 2543067,
-      "sizes": {
-        "javascript": 2543067
-      },
-      "names": [],
-      "idHints": [
-        "vendors"
-      ],
-      "runtime": [
-        "@openmrs/esm-form-builder-app",
-        "main"
-      ],
-      "files": [
-        "878.js"
-      ],
-      "auxiliaryFiles": [
-        "878.js.map"
-      ],
-      "hash": "a5d256fd538979d3",
+      "hash": "34a9d9086ed3daac",
       "childrenByOrder": {}
     },
     {
@@ -952,7 +952,7 @@
       "auxiliaryFiles": [
         "openmrs-esm-form-builder-app.js.map"
       ],
-      "hash": "e94d5ee17e3e3108",
+      "hash": "d7f2a4529da75e13",
       "childrenByOrder": {}
     },
     {

package/dist/routes.json

@@ -1 +1 @@
-{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"fhir2":"^1.2.0","webservices.rest":"^2.2.0"},"pages":[{"component":"root","route":"form-builder","online":true,"offline":true,"order":1}],"extensions":[{"name":"system-administration-form-builder-card-link","slot":"system-admin-page-card-link-slot","component":"systemAdministrationFormBuilderCardLink","online":true,"offline":true}],"version":"2.0.2-pre.597"}
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"fhir2":"^1.2.0","webservices.rest":"^2.2.0"},"pages":[{"component":"root","route":"form-builder","online":true,"offline":true,"order":1}],"extensions":[{"name":"system-administration-form-builder-card-link","slot":"system-admin-page-card-link-slot","component":"systemAdministrationFormBuilderCardLink","online":true,"offline":true}],"version":"2.0.2-pre.608"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-form-builder-app",
-  "version": "2.0.2-pre.597",
+  "version": "2.0.2-pre.608",
   "license": "MPL-2.0",
   "description": "OpenMRS ESM Form Builder App",
   "browser": "dist/openmrs-esm-form-builder-app.js",

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

@@ -0,0 +1,97 @@
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { formatDatetime, parseDate } from '@openmrs/esm-framework';
+import { StructuredListWrapper, StructuredListRow, StructuredListCell, StructuredListBody } from '@carbon/react';
+import type { EncounterType } from '../../types';
+
+interface FormGroupData {
+  name: string;
+  uuid: string;
+  version: string;
+  encounterType: EncounterType;
+  description: string;
+  display?: string;
+  auditInfo: AuditInfo;
+}
+
+interface AuditFormProps {
+  form: FormGroupData;
+}
+
+export interface AuditInfo {
+  creator: Creator;
+  dateCreated: string;
+  changedBy: ChangedBy;
+  dateChanged: string;
+}
+
+interface Creator {
+  display: string;
+}
+
+interface ChangedBy {
+  uuid: string;
+  display: string;
+}
+
+const AuditForm: React.FC<AuditFormProps> = ({ form }) => {
+  const { t } = useTranslation();
+  const [name, setName] = useState('');
+  const [description, setDescription] = useState('');
+  const [encounterType, setEncounterType] = useState('');
+  const [version, setVersion] = useState('');
+
+  useEffect(() => {
+    if (form) {
+      setName(form.name);
+      setDescription(form.description);
+      setEncounterType(`${form.encounterType.display} - ${form.encounterType.uuid}`);
+      setVersion(form.version);
+    }
+  }, [form]);
+
+  return (
+    <>
+      <StructuredListWrapper>
+        <StructuredListBody>
+          <StructuredListRow>
+            <StructuredListCell>{t('formName')}</StructuredListCell>
+            <StructuredListCell>{name}</StructuredListCell>
+          </StructuredListRow>
+          <StructuredListRow>
+            <StructuredListCell>{t('description')}</StructuredListCell>
+            <StructuredListCell>{description}</StructuredListCell>
+          </StructuredListRow>
+          <StructuredListRow>
+            <StructuredListCell>{t('autogeneratedUuid')}</StructuredListCell>
+            <StructuredListCell>{form?.uuid}</StructuredListCell>
+          </StructuredListRow>
+          <StructuredListRow>
+            <StructuredListCell>{t('version')}</StructuredListCell>
+            <StructuredListCell>{version}</StructuredListCell>
+          </StructuredListRow>
+          <StructuredListRow>
+            <StructuredListCell>{t('encounterType')}</StructuredListCell>
+            <StructuredListCell>{encounterType}</StructuredListCell>
+          </StructuredListRow>
+          <StructuredListRow>
+            <StructuredListCell>{t('createdBy')}</StructuredListCell>
+            <StructuredListCell>
+              {`${form?.auditInfo?.creator?.display} on ${formatDatetime(parseDate(form?.auditInfo?.dateCreated))}`}
+            </StructuredListCell>
+          </StructuredListRow>
+          <StructuredListRow>
+            <StructuredListCell>{t('editedBy')}</StructuredListCell>
+            <StructuredListCell>
+              {form?.auditInfo?.changedBy?.display
+                ? `${form?.auditInfo?.changedBy?.display} on ${formatDatetime(parseDate(form?.auditInfo?.dateChanged))}`
+                : 'This form has never been editted'}
+            </StructuredListCell>
+          </StructuredListRow>
+        </StructuredListBody>
+      </StructuredListWrapper>
+    </>
+  );
+};
+
+export default AuditForm;

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

@@ -30,6 +30,7 @@ import FormRenderer from '../form-renderer/form-renderer.component';
 import InteractiveBuilder from '../interactive-builder/interactive-builder.component';
 import SchemaEditor from '../schema-editor/schema-editor.component';
 import styles from './form-editor.scss';
+import AuditForm from '../audit-form/audit-form.component';
 
 interface ErrorProps {
   error: Error;
@@ -310,6 +311,7 @@ const FormEditor: React.FC = () => {
               <TabList aria-label="Form previews">
                 <Tab>{t('preview', 'Preview')}</Tab>
                 <Tab>{t('interactiveBuilder', 'Interactive Builder')}</Tab>
+                {<Tab>{form && t('auditForm')}</Tab>}
               </TabList>
               <TabPanels>
                 <TabPanel>
@@ -318,6 +320,7 @@ const FormEditor: React.FC = () => {
                 <TabPanel>
                   <InteractiveBuilder schema={schema} onSchemaChange={updateSchema} isLoading={isLoadingFormOrSchema} />
                 </TabPanel>
+                <TabPanel>{form && <AuditForm form={form} />}</TabPanel>
               </TabPanels>
             </Tabs>
           </Column>

package/src/components/interactive-builder/draggable-question.component.tsx

@@ -45,8 +45,16 @@ export const DraggableQuestion: React.FC<DraggableQuestionProps> = ({
   return (
     <div className={dragStyles} style={style}>
       <div className={styles.iconAndName}>
-        <div className={styles.dragIconContainer} ref={setNodeRef} {...attributes} {...listeners}>
-          <Draggable className={styles.dragIcon} size={16} />
+        <div ref={setNodeRef} {...attributes} {...listeners}>
+          <Button
+            className={styles.dragIcon}
+            enterDelayMs={300}
+            hasIconOnly
+            iconDescription={t('reorderQuestion', 'Reorder question')}
+            kind="ghost"
+            renderIcon={(props) => <Draggable size={16} {...props} />}
+            size="md"
+          />
         </div>
         <p className={styles.questionLabel}>{question.label}</p>
       </div>

package/src/components/interactive-builder/draggable-question.scss

@@ -29,20 +29,10 @@
   background-color: rgba(255, 255, 255, 0.552);
 }
 
-.dragIconContainer {
-  cursor: pointer;
+.dragIcon {
+  margin-right: 0.5rem;
 
-  :hover {
-    background-color: colors.$gray-20;
+  :focus {
+    border: none !important;
   }
 }
-
-.dragIcon {
-  margin: 0 layout.$spacing-03;
-  padding: 0.25rem;
-  color: colors.$gray-80;
-  margin-top: 0.25rem;
-  width: 1.5rem;
-  height: 1.5rem;
-  border-radius: 0.25rem;
-}

package/src/types.ts

@@ -1,4 +1,5 @@
 import type { RenderType } from '@openmrs/openmrs-form-engine-lib';
+import type { AuditInfo } from './components/audit-form/audit-form.component';
 
 export interface Form {
   uuid: string;
@@ -11,6 +12,7 @@ export interface Form {
   retired?: boolean;
   formFields?: Array<string>;
   display?: string;
+  auditInfo: AuditInfo;
 }
 
 export interface FilterProps {
@@ -24,6 +26,7 @@ export interface FilterProps {
 export interface EncounterType {
   uuid: string;
   name: string;
+  display: string;
 }
 
 export interface Resource {