@thrustdevs/esm-procedure-orders-app 1.0.2-pre.6

package/src/results/result-form.component.tsx

@@ -0,0 +1,120 @@
+import React, { useMemo, useState } from 'react';
+import styles from './result-form.scss';
+import { Button, InlineLoading, ModalBody, ModalFooter, TextArea, FormLabel } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { closeOverlay } from '../components/overlay/hook';
+import { ExtensionSlot, showNotification, showToast, usePatient } from '@openmrs/esm-framework';
+import { useGetOrderConceptByUuid, saveProcedureReport } from './result-form.resource';
+import { useForm } from 'react-hook-form';
+import { type Result } from '../types';
+
+interface ResultFormProps {
+  patientUuid: string;
+  order: Result;
+}
+
+const PostProcedureForm: React.FC<ResultFormProps> = ({ order, patientUuid }) => {
+  const [report, setProcedureReport] = useState('');
+  const { t } = useTranslation();
+  const {
+    formState: { isSubmitting, errors },
+    handleSubmit,
+  } = useForm<{ testResult: string }>({
+    defaultValues: {},
+  });
+
+  const { patient, isLoading } = usePatient(patientUuid);
+  const { concept, isLoading: isLoadingConcepts } = useGetOrderConceptByUuid(order.concept.uuid);
+
+  const bannerState = useMemo(() => {
+    if (patient) {
+      return {
+        patient,
+        patientUuid,
+        hideActionsOverflow: true,
+      };
+    }
+  }, [patient, patientUuid]);
+
+  if (isLoadingConcepts) {
+    return <div>Loading procedure details</div>;
+  }
+
+  const onSubmit = (data, e) => {
+    e.preventDefault();
+    // assign result to test order
+
+    const reportPayload = {
+      patient: patientUuid,
+      procedureOrder: order.uuid,
+      concept: order.concept.uuid,
+      status: 'IN_PROGRESS',
+      procedureReport: report,
+      participants: [],
+      procedureResults: [],
+      complications: [],
+    };
+
+    saveProcedureReport(reportPayload).then(
+      () => {
+        showToast({
+          critical: true,
+          title: t('saveReport', 'Report updated sucessful'),
+          kind: 'success',
+          description: t('generateSuccessfully', 'Report saved successfully'),
+        });
+        closeOverlay();
+      },
+      (err) => {
+        showNotification({
+          title: t(`errorSavingReport', 'Error occurred while saving the report`),
+          kind: 'error',
+          critical: true,
+          description: err?.message,
+        });
+      },
+    );
+  };
+  return (
+    <>
+      <div className="">
+        <ModalBody>
+          {isLoading && (
+            <InlineLoading
+              className={styles.bannerLoading}
+              iconDescription="Loading"
+              description="Loading banner"
+              status="active"
+            />
+          )}
+          {patient && <ExtensionSlot name="patient-header-slot" state={bannerState} />}
+          <section className={styles.section}>
+            <form>
+              <FormLabel className={styles.textArea}>{concept?.display}</FormLabel>
+              {Object.keys(errors).length > 0 && <div className={styles.errorDiv}>Procedure report is required</div>}
+              <TextArea
+                id="procedureReport"
+                name="procedureReport"
+                rules={{
+                  required: true,
+                }}
+                invalidText="Required"
+                autofocus
+                onChange={(e) => setProcedureReport(e.target.value)}
+              />
+            </form>
+          </section>
+        </ModalBody>
+
+        <ModalFooter>
+          <Button disabled={isSubmitting} onClick={() => closeOverlay()} kind="secondary">
+            {t('cancel', 'Cancel')}
+          </Button>
+          <Button onClick={handleSubmit(onSubmit)}>Save report</Button>
+        </ModalFooter>
+      </div>
+    </>
+  );
+};
+
+export default PostProcedureForm;

package/src/results/result-form.resource.ts

@@ -0,0 +1,361 @@
+import { openmrsFetch } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+import { updateOrder } from '../procedures-ordered/pick-procedure-order/add-to-worklist-dialog.resource';
+
+export interface ConceptResponse {
+  uuid: string;
+  display: string;
+  name: Name;
+  datatype: Datatype;
+  conceptClass: ConceptClass;
+  set: boolean;
+  version: string;
+  retired: boolean;
+  names: Name2[];
+  descriptions: Description[];
+  mappings: Mapping[];
+  answers: any[];
+  setMembers: ConceptReference[];
+  auditInfo: AuditInfo;
+  attributes: any[];
+  links: Link18[];
+  resourceVersion: string;
+  hiNormal?: number;
+  hiAbsolute?: number;
+  hiCritical?: number;
+  lowNormal?: number;
+  lowAbsolute?: number;
+  lowCritical?: number;
+  units?: string;
+}
+
+export interface Name {
+  display: string;
+  uuid: string;
+  name: string;
+  locale: string;
+  localePreferred: boolean;
+  conceptNameType: string;
+  links: Link[];
+  resourceVersion: string;
+}
+
+export interface Link {
+  rel: string;
+  uri: string;
+  resourceAlias: string;
+}
+
+export interface Datatype {
+  uuid: string;
+  display: string;
+  name: string;
+  description: string;
+  hl7Abbreviation: string;
+  retired: boolean;
+  links: Link2[];
+  resourceVersion: string;
+}
+
+export interface Link2 {
+  rel: string;
+  uri: string;
+  resourceAlias: string;
+}
+
+export interface ConceptClass {
+  uuid: string;
+  display: string;
+  name: string;
+  description: string;
+  retired: boolean;
+  links: Link3[];
+  resourceVersion: string;
+}
+
+export interface Link3 {
+  rel: string;
+  uri: string;
+  resourceAlias: string;
+}
+
+export interface Name2 {
+  display: string;
+  uuid: string;
+  name: string;
+  locale: string;
+  localePreferred: boolean;
+  conceptNameType?: string;
+  links: Link4[];
+  resourceVersion: string;
+}
+
+export interface Link4 {
+  rel: string;
+  uri: string;
+  resourceAlias: string;
+}
+
+export interface Description {
+  display: string;
+  uuid: string;
+  description: string;
+  locale: string;
+  links: Link5[];
+  resourceVersion: string;
+}
+
+export interface Link5 {
+  rel: string;
+  uri: string;
+  resourceAlias: string;
+}
+
+export interface Mapping {
+  display: string;
+  uuid: string;
+  conceptReferenceTerm: ConceptReferenceTerm;
+  conceptMapType: ConceptMapType;
+  links: Link8[];
+  resourceVersion: string;
+}
+
+export interface ConceptReferenceTerm {
+  uuid: string;
+  display: string;
+  links: Link6[];
+}
+
+export interface Link6 {
+  rel: string;
+  uri: string;
+  resourceAlias: string;
+}
+
+export interface ConceptMapType {
+  uuid: string;
+  display: string;
+  links: Link7[];
+}
+
+export interface Link7 {
+  rel: string;
+  uri: string;
+  resourceAlias: string;
+}
+
+export interface Link8 {
+  rel: string;
+  uri: string;
+  resourceAlias: string;
+}
+
+export interface ConceptReference {
+  uuid: string;
+  display: string;
+  name: Name3;
+  datatype: Datatype2;
+  conceptClass: ConceptClass2;
+  set: boolean;
+  version: string;
+  retired: boolean;
+  names: Name4[];
+  descriptions: any[];
+  mappings: Mapping2[];
+  answers: Answer[];
+  setMembers: any[];
+  attributes: any[];
+  links: Link15[];
+  resourceVersion: string;
+  hiNormal?: number;
+  hiAbsolute?: number;
+  hiCritical?: number;
+  lowNormal?: number;
+  lowAbsolute?: number;
+  lowCritical?: number;
+  units?: string;
+}
+
+export interface Name3 {
+  display: string;
+  uuid: string;
+  name: string;
+  locale: string;
+  localePreferred: boolean;
+  conceptNameType: string;
+  links: Link9[];
+  resourceVersion: string;
+}
+
+export interface Link9 {
+  rel: string;
+  uri: string;
+  resourceAlias: string;
+}
+
+export interface Datatype2 {
+  uuid: string;
+  display: string;
+  links: Link10[];
+}
+
+export interface Link10 {
+  rel: string;
+  uri: string;
+  resourceAlias: string;
+}
+
+export interface ConceptClass2 {
+  uuid: string;
+  display: string;
+  links: Link11[];
+}
+
+export interface Link11 {
+  rel: string;
+  uri: string;
+  resourceAlias: string;
+}
+
+export interface Name4 {
+  uuid: string;
+  display: string;
+  links: Link12[];
+}
+
+export interface Link12 {
+  rel: string;
+  uri: string;
+  resourceAlias: string;
+}
+
+export interface Mapping2 {
+  uuid: string;
+  display: string;
+  links: Link13[];
+}
+
+export interface Link13 {
+  rel: string;
+  uri: string;
+  resourceAlias: string;
+}
+
+export interface Answer {
+  uuid: string;
+  display: string;
+  links: Link14[];
+}
+
+export interface Link14 {
+  rel: string;
+  uri: string;
+  resourceAlias: string;
+}
+
+export interface Link15 {
+  rel: string;
+  uri: string;
+  resourceAlias: string;
+}
+
+export interface AuditInfo {
+  creator: Creator;
+  dateCreated: string;
+  changedBy: ChangedBy;
+  dateChanged: string;
+}
+
+export interface Creator {
+  uuid: string;
+  display: string;
+  links: Link16[];
+}
+
+export interface Link16 {
+  rel: string;
+  uri: string;
+  resourceAlias: string;
+}
+
+export interface ChangedBy {
+  uuid: string;
+  display: string;
+  links: Link17[];
+}
+
+export interface Link17 {
+  rel: string;
+  uri: string;
+  resourceAlias: string;
+}
+
+export interface Link18 {
+  rel: string;
+  uri: string;
+  resourceAlias: string;
+}
+
+export interface ObPayload {
+  concept: string;
+  order: string;
+  value: string | number;
+  status: string;
+}
+
+// get order concept
+export async function GetOrderConceptByUuid(uuid: string) {
+  const abortController = new AbortController();
+  return openmrsFetch(`/ws/rest/v1/concept/${uuid}?v=full`, {
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    signal: abortController.signal,
+  });
+}
+
+export function useGetOrderConceptByUuid(uuid: string) {
+  const apiUrl = `/ws/rest/v1/concept/${uuid}?v=custom:(uuid,display,name,datatype,set,answers,hiNormal,hiAbsolute,hiCritical,lowNormal,lowAbsolute,lowCritical,units,setMembers:(uuid,display,answers,datatype,hiNormal,hiAbsolute,hiCritical,lowNormal,lowAbsolute,lowCritical,units))`;
+
+  const { data, error, isLoading, isValidating, mutate } = useSWR<{ data: ConceptResponse }, Error>(
+    apiUrl,
+    openmrsFetch,
+  );
+  return {
+    concept: data?.data,
+    isLoading,
+    isError: error,
+    isValidating,
+    mutate,
+  };
+}
+
+export async function UpdateEncounter(uuid: string, payload: any) {
+  const abortController = new AbortController();
+  return openmrsFetch(`/ws/rest/v1/encounter/${uuid}`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    signal: abortController.signal,
+    body: payload,
+  });
+}
+
+export async function saveProcedureReport(reportPayload) {
+  const abortController = new AbortController();
+  const updateResults = await openmrsFetch(`/ws/rest/v1/procedure`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    signal: abortController.signal,
+    body: reportPayload,
+  });
+
+  if (updateResults.status === 201 || updateResults.status === 200) {
+    return await updateOrder(reportPayload.procedureOrder, {
+      fulfillerStatus: 'COMPLETED',
+    });
+  }
+}

package/src/results/result-form.scss

@@ -0,0 +1,22 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+
+.section {
+  margin: spacing.$spacing-03;
+}
+
+.sectionTitle {
+  margin-bottom: spacing.$spacing-04;
+}
+
+.modalBody {
+  padding-bottom: spacing.$spacing-05;
+}
+
+.textInput {
+  margin: 5px;
+}
+
+.errorDiv {
+  color: red;
+}

package/src/root.component.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import Procedure from './procedure.component';
+import { basePath } from './constants';
+
+const Root: React.FC = () => {
+  return (
+    <BrowserRouter basename={basePath}>
+      <Routes>
+        <Route path="/" element={<Procedure />} />
+      </Routes>
+    </BrowserRouter>
+  );
+};
+
+export default Root;

package/src/routes.json

@@ -0,0 +1,152 @@
+{
+  "$schema": "https://json.openmrs.org/routes.schema.json",
+  "backendDependencies": {
+    "fhir2": ">=1.2",
+    "webservices.rest": "^2.24.0"
+  },
+  "extensions": [
+    {
+      "component": "procedureDashboardLink",
+      "name": "procedure-dashboard-link",
+      "meta": {
+        "name": "procedure",
+        "title": "procedure",
+        "slot": "procedure-dashboard-slot"
+      }
+    },
+    {
+      "component": "root",
+      "name": "procedure-dashboard-root",
+      "slot": "procedure-dashboard-slot"
+    },
+    {
+        "name": "procedures-ordered-tile-component",
+        "slot": "procedure-tiles-slot",
+        "component": "OrderedTileComponent",
+        "meta": {
+            "name": "proceduresOrderedTileSlot",
+            "title": "Active Orders"
+        }
+    },
+    {
+      "name": "procedures-worklist-tile-component",
+      "slot": "procedure-tiles-slot",
+      "component": "worklistTileComponent",
+      "meta": {
+          "name": "worklisTileSlot",
+          "title": "Worklist"
+      }
+  },
+  {
+    "name": "procedures-referred-tile-component",
+    "slot": "procedure-tiles-slot",
+    "component": "referredOutTileComponent",
+    "meta": {
+      "name": "referredTileSlot",
+      "title": "Referred Out"
+    }
+  },
+  {
+    "name": "procedures-not-done-tile-component",
+    "slot": "procedure-tiles-slot",
+    "component": "notDoneTileComponent",
+    "meta": {
+      "name": "notDoneTileSlot",
+      "title": "Not Done"
+    }
+  },
+  {
+    "name": "procedures-completed-tile-component",
+    "slot": "procedure-tiles-slot",
+    "component": "completedTileComponent",
+    "meta": {
+        "name": "completedTileSlot",
+        "title": "Completed"
+    }
+},
+    {
+      "name": "procedures-worklist-tab-component",
+      "slot": "procedures-panels-slot",
+      "component": "worklistProceduresTabComponent",
+      "meta": {
+          "name": "proceduresPanelSlot",
+          "title": "Worklist"
+      }
+  },
+    {
+      "name": "procedures-referred-tab-component",
+      "slot": "procedures-panels-slot",
+      "component": "referredProceduresTabComponent",
+      "meta": {
+          "name": "proceduresPanelSlot",
+          "title": "Referred Out"
+      }
+  },
+  {
+    "name": "procedures-not-done-tab-component",
+    "slot": "procedures-panels-slot",
+    "component": "notDoneProceduresTabComponent",
+    "meta": {
+        "name": "proceduresPanelSlot",
+        "title": "Not Done"
+    }
+},
+  {
+    "name": "procedures-completed-tab-component",
+    "slot": "procedures-panels-slot",
+    "component": "completedProceduresTabComponent",
+    "meta": {
+        "name": "proceduresPanelSlot",
+        "title": "Completed"
+    }
+},
+    {
+      "name":"procedure-instructions-modal",
+      "component": "procedureInstructionsModalComponent"
+    },
+    {
+      "name":"procedure-reject-reason-modal",
+      "component": "procedureRejectModalComponent"
+    },
+    {
+      "name":"add-procedure-to-worklist-dialog",
+      "component": "addProcedureToWorklistDialogComponent"
+    },
+    {
+      "name": "reject-procedure-order-dialog",
+      "component": "rejectProcedureOrderDialogComponent"
+    },
+    {
+      "name": "procedures-order-panel",
+      "component": "proceduresOrderPanel",
+      "slot": "order-basket-slot",
+      "order": 4
+    }
+  ],
+  "workspaces": [
+    {
+      "name": "add-procedures-order",
+      "type": "order",
+      "title": "Add procedure order",
+      "component": "addProceduresOrderWorkspace"
+    },
+     {
+      "name": "procedure-report-form",
+      "component": "postProcedureResults",
+      "title": "Procedure Report Form",
+      "type": "form"
+    }
+  ],
+   "modals": [
+    {
+      "name": "print-procedure-report-modal",
+      "component": "printProcedureReportModal"
+    }
+  ],
+  "pages": [
+    {
+      "component": "root",
+      "route": "procedure"
+    }
+  ]
+}

package/src/setup-tests.ts

@@ -0,0 +1,7 @@
+import '@testing-library/jest-dom/extend-expect';
+
+window.URL.createObjectURL = jest.fn();
+global.openmrsBase = '/openmrs';
+global.spaBase = '/spa';
+global.getOpenmrsSpaBase = () => '/openmrs/spa/';
+global.Response = Object as any;