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

package/src/procedure.component.tsx

@@ -0,0 +1,24 @@
+import React, { useState } from 'react';
+import { ProcedureHeader } from './header/procedure-header.component';
+import ProcedureSummaryTiles from './summary-tiles/procedure-summary-tiles.component';
+import ProcedureOrdersList from './procedures-ordered/procedure-tabs.component';
+import Overlay from './components/overlay/overlay.component';
+import { useDefineAppContext } from '@openmrs/esm-framework';
+import { type DateFilterContext } from './types';
+import dayjs from 'dayjs';
+
+const Procedure: React.FC = () => {
+  const [dateRange, setDateRange] = useState<Date[]>([dayjs().startOf('day').toDate(), new Date()]);
+  useDefineAppContext<DateFilterContext>('procedures-date-filter', { dateRange, setDateRange });
+
+  return (
+    <div className={`omrs-main-content`}>
+      <ProcedureHeader />
+      <ProcedureSummaryTiles />
+      <ProcedureOrdersList />
+      <Overlay />
+    </div>
+  );
+};
+
+export default Procedure;

package/src/procedures-ordered/_pick-procedure-request-menu.component.tsx

@@ -0,0 +1,33 @@
+import { OverflowMenuItem } from '@carbon/react';
+import { showModal } from '@openmrs/esm-framework';
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { type Order } from '../types/patient-queue';
+
+interface PickLabRequestActionMenuProps {
+  order: Order;
+  closeModal: () => void;
+}
+
+const PickProcedureRequestActionMenu: React.FC<PickLabRequestActionMenuProps> = ({ order }) => {
+  const { t } = useTranslation();
+
+  const launchSelectProcedureRequestModal = useCallback(() => {
+    const dispose = showModal('add-procedure-to-worklist-dialog', {
+      closeModal: () => dispose(),
+      order,
+    });
+  }, [order]);
+
+  return (
+    <OverflowMenuItem
+      itemText={t('pickProcedureRequest', 'Pick Procedure Request')}
+      onClick={launchSelectProcedureRequestModal}
+      style={{
+        maxWidth: '100vw',
+      }}
+    />
+  );
+};
+
+export default PickProcedureRequestActionMenu;

package/src/procedures-ordered/pick-procedure-order/add-to-worklist-dialog.component.tsx

@@ -0,0 +1,105 @@
+import React, { useState } from 'react';
+import { Button, Form, ModalBody, ModalFooter, ModalHeader, Checkbox, TextInput } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import styles from './add-to-worklist-dialog.scss';
+import { showNotification, showSnackbar } from '@openmrs/esm-framework';
+import { updateOrder } from './add-to-worklist-dialog.resource';
+import { mutate } from 'swr';
+import { type Result } from '../../types';
+import capitalize from 'lodash-es/capitalize';
+
+interface AddProcedureToWorklistDialogProps {
+  queueId;
+  order: Result;
+  closeModal: () => void;
+}
+
+const AddProcedureToWorklistDialog: React.FC<AddProcedureToWorklistDialogProps> = ({ queueId, order, closeModal }) => {
+  const { t } = useTranslation();
+
+  const [isReferredChecked, setIsReferredChecked] = useState(false);
+  const [referredLocation, setReferredLocation] = useState('');
+
+  const pickProcedureRequestQueue = async (event) => {
+    event.preventDefault();
+
+    const body = {
+      fulfillerComment: '',
+      fulfillerStatus: isReferredChecked ? 'EXCEPTION' : 'IN_PROGRESS',
+      // referralLocation: isReferredChecked ? referredLocation : "",
+    };
+
+    updateOrder(order.uuid, body)
+      .then(() => {
+        showSnackbar({
+          isLowContrast: true,
+          title: t('pickedAnOrder', 'Picked an order'),
+          kind: 'success',
+          subtitle: t('pickSuccessfully', 'You have successfully picked an Order'),
+        });
+        closeModal();
+        mutate((key) => typeof key === 'string' && key.startsWith('/ws/rest/v1/order'), undefined, {
+          revalidate: true,
+        });
+      })
+      .catch((error) => {
+        showNotification({
+          title: t(`errorPicking an order', 'Error Picking an Order`),
+          kind: 'error',
+          critical: true,
+          description: error?.message,
+        });
+      });
+  };
+
+  const handleCheckboxChange = () => {
+    setIsReferredChecked(!isReferredChecked);
+  };
+  const orderName = capitalize(order?.concept?.display);
+  const orderNumber = order?.orderNumber;
+
+  return (
+    <div>
+      <Form onSubmit={pickProcedureRequestQueue}>
+        <div className="cds--modal-header">
+          <h3 className="cds--modal-header__heading">{t('pickRequest', 'Pick Request')}</h3>
+        </div>
+        <div className="cds--modal-content">
+          <p>
+            {t('confirmationPickupMessages', `Do you want to pick this order: {{orderName}} - {{orderNumber}}?`, {
+              orderName,
+              orderNumber,
+            })}
+          </p>
+          <section className={styles.section}>
+            <Checkbox
+              checked={isReferredChecked}
+              onChange={handleCheckboxChange}
+              labelText={'Referred'}
+              id="test-referred"
+            />
+            {isReferredChecked && (
+              <TextInput
+                type="text"
+                id="referredLocation"
+                labelText={'Enter Referred Location'}
+                value={referredLocation}
+                onChange={(e) => setReferredLocation(e.target.value)}
+              />
+            )}
+          </section>
+        </div>
+        <ModalFooter>
+          <Button kind="secondary" onClick={closeModal}>
+            {t('cancel', 'Cancel')}
+          </Button>
+          <Button type="submit" onClick={pickProcedureRequestQueue}>
+            {t('pickRequest', 'Pick Request')}
+          </Button>
+        </ModalFooter>
+      </Form>
+    </div>
+  );
+};
+
+export default AddProcedureToWorklistDialog;

package/src/procedures-ordered/pick-procedure-order/add-to-worklist-dialog.resource.ts

@@ -0,0 +1,106 @@
+import { type FetchResponse, openmrsFetch, restBaseUrl, useConfig } from '@openmrs/esm-framework';
+import useSWRImmutable from 'swr/immutable';
+
+export interface QueueRoomsResponse {
+  uuid: string;
+  display: string;
+  name: string;
+  description: string;
+  address1: string;
+  address2: string;
+  cityvillage: string;
+  stateprovince: string;
+  country: string;
+  postalcode: string;
+  latitude: string;
+  longitude: string;
+  countydistrict: string;
+  address3: string;
+  address4: string;
+  address5: string;
+  address6: string;
+  parentLocation: ParentLocation;
+  childLocations: string[];
+  retired: boolean;
+  attributes: string[];
+  address7: string;
+  address8: string;
+  address9: string;
+  address10: string;
+  address11: string;
+  address12: string;
+  address13: string;
+  address14: string;
+  address15: string;
+  resourceVersion: string;
+}
+
+export interface ParentLocation {
+  uuid: string;
+  display: string;
+  name: string;
+  description: string;
+  address1: string;
+  address2: string;
+  cityVillage: string;
+  stateProvince: string;
+  country: string;
+  postalcode: string;
+  latitude: string;
+  longitude: string;
+  countydistrict: string;
+  address3: string;
+  address4: string;
+  address5: string;
+  address6: string;
+  parentLocation: ParentLocation;
+  childLocations: ChildLocations[];
+  retired: boolean;
+  attributes: string[];
+  address7: string;
+  address8: string;
+  address9: string;
+  address10: string;
+  address11: string;
+  address12: string;
+  address13: string;
+  address14: string;
+  address15: string;
+  resourceversion: string;
+}
+
+export interface ChildLocations {
+  uuid: string;
+  display: string;
+}
+
+export interface ParentLocation {
+  uuid: string;
+  display: string;
+}
+
+// get referral locations
+export function useReferralLocations() {
+  const config = useConfig();
+  const { laboratoryReferalDestinationUuid } = config;
+  const apiUrl = `${restBaseUrl}/concept/${laboratoryReferalDestinationUuid}`;
+  const { data, isLoading } = useSWRImmutable<FetchResponse>(apiUrl, openmrsFetch);
+
+  return {
+    referrals: data ? data?.data?.answers : [],
+    isLoading,
+  };
+}
+
+// update Order
+export async function updateOrder(uuid: string, body: any) {
+  const abortController = new AbortController();
+  return openmrsFetch(`${restBaseUrl}/order/${uuid}/fulfillerdetails`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    signal: abortController.signal,
+    body: body,
+  });
+}

package/src/procedures-ordered/pick-procedure-order/add-to-worklist-dialog.scss

@@ -0,0 +1,38 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+
+.radioButton {
+  padding: spacing.$spacing-02 spacing.$spacing-02;
+  margin: spacing.$spacing-03 0;
+}
+
+.section {
+  margin: spacing.$spacing-03;
+}
+
+.sectionTitle {
+  margin-bottom: spacing.$spacing-04;
+}
+
+.modalBody {
+  padding-bottom: spacing.$spacing-05;
+}
+
+.container {
+  display: 'flex';
+  align-items: 'center';
+  justify-content: 'space-between';
+  align-content: 'stretch';
+}
+
+.specimenContainer {
+  display: 'flex';
+  align-items: 'center';
+  justify-content: 'space-between';
+  column-gap: '10px';
+}
+
+.inputText {
+  display: 'flex';
+  align-items: 'center';
+}

package/src/procedures-ordered/pick-procedure-request-menu.component.tsx

@@ -0,0 +1,32 @@
+import { OverflowMenuItem } from '@carbon/react';
+import { showModal } from '@openmrs/esm-framework';
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+interface PickProcedureRequestActionMenuProps {
+  order: any;
+  closeModal: () => void;
+}
+
+const PickProcedureRequestActionMenu: React.FC<PickProcedureRequestActionMenuProps> = ({ order }) => {
+  const { t } = useTranslation();
+
+  const launchPickProcedureRequestModal = useCallback(() => {
+    const dispose = showModal('add-procedure-to-worklist-dialog', {
+      closeModal: () => dispose(),
+      order,
+    });
+  }, [order]);
+
+  return (
+    <OverflowMenuItem
+      itemText={t('pickRequest', 'Pick Request')}
+      onClick={launchPickProcedureRequestModal}
+      style={{
+        maxWidth: '100vw',
+      }}
+    />
+  );
+};
+
+export default PickProcedureRequestActionMenu;

package/src/procedures-ordered/procedure-dialogs/add-to-worklist-dialog.component.tsx

@@ -0,0 +1,300 @@
+import React, { useEffect, useState } from 'react';
+import {
+  Button,
+  Form,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  Select,
+  SelectItem,
+  Checkbox,
+  TextInput,
+} from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import styles from './add-to-worklist-dialog.scss';
+import { showNotification, showSnackbar, useConfig } from '@openmrs/esm-framework';
+import { Renew } from '@carbon/react/icons';
+import {
+  GenerateSpecimenId,
+  UpdateOrder,
+  useReferralLocations,
+  useSpecimenTypes,
+} from './add-to-worklist-dialog.resource';
+import { type Order } from '../../types';
+
+interface AddToWorklistDialogProps {
+  queueId;
+  order: Order;
+  closeModal: () => void;
+}
+
+const AddToWorklistDialog: React.FC<AddToWorklistDialogProps> = ({ queueId, order, closeModal }) => {
+  const { t } = useTranslation();
+
+  const [preferred, setPreferred] = useState(false);
+
+  const [specimenID, setSpecimenID] = useState('');
+
+  const { specimenTypes } = useSpecimenTypes();
+
+  const { referrals } = useReferralLocations();
+
+  const [specimenType, setSpecimenType] = useState();
+
+  const [selectedReferral, setSelectedReferral] = useState('');
+
+  const [barcode, setBarcode] = useState('');
+
+  const [confirmBarcode, setConfirmBarcode] = useState('');
+
+  const [externalReferralName, setExternalReferralName] = useState('');
+
+  const config = useConfig();
+
+  const pickProcedureRequestQueue = async (event) => {
+    event.preventDefault();
+    // pick procedure
+    const body = {
+      sampleId: specimenID,
+      specimenSourceId: specimenType,
+      unProcessedOrders: '',
+      patientQueueId: queueId,
+    };
+
+    UpdateOrder(order.uuid, body).then(
+      () => {
+        showSnackbar({
+          isLowContrast: true,
+          title: t('pickedAnOrder', 'Picked an order'),
+          kind: 'success',
+          subtitle: t('pickSuccessfully', 'You have successfully picked an Order'),
+        });
+        closeModal();
+      },
+      (error) => {
+        showNotification({
+          title: t(`errorPicking an order', 'Error Picking an Order`),
+          kind: 'error',
+          critical: true,
+          description: error?.message,
+        });
+      },
+    );
+  };
+
+  const onChecked = () => {
+    setPreferred(!preferred);
+  };
+
+  const generateId = async (e) => {
+    e.preventDefault();
+    // generate sample Id
+    GenerateSpecimenId(order.uuid).then(
+      (resp) => {
+        setSpecimenID(resp.data.results[0].sampleId);
+        showSnackbar({
+          isLowContrast: true,
+          title: t('generatesampleID', 'Generate Sample Id'),
+          kind: 'success',
+          subtitle: t('generateSuccessfully', 'You have successfully generated a Sample Id'),
+        });
+      },
+      (err) => {
+        showNotification({
+          title: t(`errorGeneratingId', 'Error Generating Sample Id`),
+          kind: 'error',
+          critical: true,
+          description: err?.message,
+        });
+      },
+    );
+  };
+
+  useEffect(() => {
+    if (barcode !== '' && confirmBarcode !== '' && barcode == confirmBarcode) {
+      setSpecimenID(barcode);
+    }
+  }, [barcode, confirmBarcode]);
+
+  return (
+    <div>
+      <Form onSubmit={pickProcedureRequestQueue}>
+        <ModalHeader closeModal={closeModal} title={t('pickRequest', 'Pick Request')} />
+        <ModalBody>
+          <div className={styles.modalBody}>
+            <section className={styles.section}>
+              <div
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                  alignContent: 'stretch',
+                }}>
+                <div className={styles.sectionTitle}>
+                  {preferred ? t('barcode', 'Barcode') : t('specimenID', 'Procedure Id')}
+                </div>
+
+                <div
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    columnGap: '10px',
+                  }}>
+                  <div style={{ width: '430px' }}>
+                    <TextInput
+                      type="text"
+                      id="specimentId"
+                      value={specimenID}
+                      readOnly={
+                        config.enableSpecimenIdAutoGeneration ? config.enableSpecimenIdAutoGeneration : preferred
+                      }
+                      hideReadOnly={preferred}
+                      onChange={(e) => setSpecimenID(e.target.value)}
+                    />
+                  </div>
+
+                  <div style={{ width: '50px' }}>
+                    {config.enableSpecimenIdAutoGeneration && (
+                      <Button
+                        hasIconOnly
+                        onClick={(e) => generateId(e)}
+                        renderIcon={(props) => <Renew size={16} {...props} />}
+                        disabled={preferred}
+                      />
+                    )}
+                  </div>
+                </div>
+              </div>
+            </section>
+            <section className={styles.section}>
+              <div
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                  alignContent: 'stretch',
+                }}>
+                <div className={styles.sectionTitle}>{t('specimenType', 'Specimen Type')}</div>
+                <div style={{ width: '500px' }}>
+                  <section className={styles.section}>
+                    <Select
+                      labelText=""
+                      id="speciment-types"
+                      name="specimen-types"
+                      value={specimenType}
+                      onChange={(event) => setSpecimenType(event.target.value)}>
+                      {!specimenType ? <SelectItem text={t('specimenType', 'Select Specimen Type')} value="" /> : null}
+                      {specimenTypes.map((type) => (
+                        <SelectItem key={type.uuid} text={type.display} value={type.uuid}>
+                          {type.display}
+                        </SelectItem>
+                      ))}
+                    </Select>
+                  </section>
+                </div>
+              </div>
+            </section>
+            <section
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                alignContent: 'stretch',
+              }}>
+              <div>
+                <Checkbox checked={preferred} onChange={onChecked} labelText={'Referred'} id="test-referred" />
+              </div>
+              {preferred && (
+                <div style={{ width: '500px' }}>
+                  <section className={styles.section}>
+                    <Select
+                      labelText={t('locationReferral', 'Referral Location ')}
+                      id="nextQueueLocation"
+                      name="nextQueueLocation"
+                      invalidText="Required"
+                      value={selectedReferral}
+                      onChange={(event) => setSelectedReferral(event.target.value)}>
+                      {referrals.map((referral) => (
+                        <SelectItem key={referral.uuid} text={referral.display} value={referral.uuid}>
+                          {referral.display}
+                        </SelectItem>
+                      ))}
+                    </Select>
+                  </section>
+
+                  <section className={styles.section}>
+                    {selectedReferral === '3476fd97-71da-4e9c-bf57-2b6318dc0c9f' && (
+                      <div
+                        style={{
+                          display: 'flex',
+                          alignItems: 'center',
+                        }}>
+                        <div style={{ width: '500px' }}>
+                          <TextInput
+                            type="text"
+                            id="locationName"
+                            labelText={'Enter Name'}
+                            value={externalReferralName}
+                            required={true}
+                            onChange={(e) => setExternalReferralName(e.target.value)}
+                          />
+                        </div>
+                      </div>
+                    )}
+                    <div
+                      style={{
+                        display: 'flex',
+                        alignItems: 'center',
+                      }}>
+                      <div style={{ width: '500px' }}>
+                        <TextInput
+                          type="text"
+                          id="enterBarcode"
+                          labelText={'Enter Barcode'}
+                          value={barcode}
+                          required={true}
+                          onChange={(e) => {
+                            setBarcode(e.target.value);
+                          }}
+                        />
+                      </div>
+                    </div>
+                    <div
+                      style={{
+                        display: 'flex',
+                        alignItems: 'center',
+                      }}>
+                      <div style={{ width: '500px' }}>
+                        <TextInput
+                          type="text"
+                          id="confirmBarcode"
+                          labelText={'Confirm Barcode'}
+                          value={confirmBarcode}
+                          required={true}
+                          onChange={(e) => {
+                            setConfirmBarcode(e.target.value);
+                          }}
+                        />
+                      </div>
+                    </div>
+                  </section>
+                </div>
+              )}
+            </section>
+          </div>
+        </ModalBody>
+        <ModalFooter>
+          <Button kind="secondary" onClick={closeModal}>
+            {t('cancel', 'Cancel')}
+          </Button>
+          <Button type="submit" onClick={pickProcedureRequestQueue}>
+            {t('pickPatient', 'Pick Order Request')}
+          </Button>
+        </ModalFooter>
+      </Form>
+    </div>
+  );
+};
+
+export default AddToWorklistDialog;