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

package/src/form/post-procedures/post-procedure-form.component.tsx

@@ -0,0 +1,468 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import {
+  type DefaultWorkspaceProps,
+  OpenmrsDatePicker,
+  showSnackbar,
+  useConfig,
+  useDebounce,
+  useSession,
+} from '@openmrs/esm-framework';
+import {
+  Form,
+  Stack,
+  ComboBox,
+  TextArea,
+  Layer,
+  FormLabel,
+  ButtonSet,
+  Button,
+  Search,
+  InlineLoading,
+  Tile,
+  Tag,
+  DatePicker,
+  DatePickerInput,
+} from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import styles from './post-procedure-form.scss';
+import { Controller, useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { savePostProcedure, useConditionsSearch, useProvidersSearch } from './post-procedure.resource';
+import { type CodedProvider, type CodedCondition, ProcedurePayload, type Result } from '../../types';
+import dayjs from 'dayjs';
+import { closeOverlay } from '../../components/overlay/hook';
+import { type ConfigObject, StringPath } from '../../config-schema';
+import { updateOrder } from '../../procedures-ordered/pick-procedure-order/add-to-worklist-dialog.resource';
+import { mutate } from 'swr';
+
+const validationSchema = z.object({
+  startDatetime: z.date({
+    required_error: 'Start datetime is required',
+  }),
+  endDatetime: z.date({ required_error: 'End datetime is required', invalid_type_error: 'Please select a valid date' }),
+  outcome: z.string({ required_error: 'Outcome is required' }),
+  procedureReport: z.string({ required_error: 'Procedure report is required' }),
+  participants: z.string().optional(),
+  complications: z.string().optional(),
+});
+
+type PostProcedureFormSchema = z.infer<typeof validationSchema>;
+
+type PostProcedureFormProps = DefaultWorkspaceProps & {
+  patientUuid: string;
+  order: Result;
+};
+
+const PostProcedureForm: React.FC<PostProcedureFormProps> = ({
+  patientUuid,
+  order,
+  closeWorkspace,
+  closeWorkspaceWithSavedChanges,
+  promptBeforeClosing,
+}) => {
+  const { sessionLocation } = useSession();
+  const { t } = useTranslation();
+
+  const [providerSearchTerm, setProviderSearchTerm] = useState('');
+  const debouncedProviderSearchTerm = useDebounce(providerSearchTerm);
+  const { providerSearchResults, isProviderSearching } = useProvidersSearch(debouncedProviderSearchTerm);
+  const [selectedProvider, setSelectedProvider] = useState<CodedProvider>(null);
+  const handleProviderSearchTermChange = (event: React.ChangeEvent<HTMLInputElement>) =>
+    setProviderSearchTerm(event.target.value);
+
+  const [searchTerm, setSearchTerm] = useState('');
+  const debouncedSearchTerm = useDebounce(searchTerm);
+  const { searchResults, isSearching } = useConditionsSearch(debouncedSearchTerm);
+  const [selectedCondition, setSelectedCondition] = useState<CodedCondition>(null);
+
+  const handleParticipantSearchInputChange = (event) => {
+    const value = event.target.value;
+    setProviderSearchTerm(value);
+    if (!value) {
+      setSelectedProvider(null);
+      setShowParticipants(false);
+    } else {
+      setShowParticipants(true);
+    }
+  };
+
+  const handleSearchInputChange = (event) => {
+    const value = event.target.value;
+    setSearchTerm(value);
+    if (!value) {
+      setSelectedCondition(null);
+      setShowItems(false);
+    } else {
+      setShowItems(true);
+    }
+  };
+
+  const [showParticipants, setShowParticipants] = useState(false);
+  const [selectedParticipants, setSelectedParticipants] = useState([]);
+
+  const [showItems, setShowItems] = useState(false);
+  const [selectedItems, setSelectedItems] = useState([]);
+
+  const handleParticipantSelect = useCallback((item: CodedProvider) => {
+    setSelectedProvider(item);
+  }, []);
+
+  const handleSelect = useCallback((item: CodedCondition) => {
+    setSelectedCondition(item);
+  }, []);
+
+  const {
+    procedureComplicationGroupingConceptUuid,
+    procedureComplicationConceptUuid,
+    procedureResultEncounterType,
+    procedureResultEncounterRole,
+  } = useConfig<ConfigObject>();
+
+  const {
+    control,
+    formState: { errors, isSubmitting, isDirty },
+    handleSubmit,
+  } = useForm<PostProcedureFormSchema>({
+    defaultValues: {},
+    resolver: zodResolver(validationSchema),
+  });
+
+  const handleProviderChange = useCallback((selectedProvider: CodedProvider) => {
+    setSelectedProvider(selectedProvider);
+  }, []);
+
+  useEffect(() => {
+    if (promptBeforeClosing && isDirty) {
+      promptBeforeClosing(() => isDirty);
+    }
+  }, [promptBeforeClosing, isDirty, closeWorkspace]);
+
+  const onSubmit = async (data: PostProcedureFormSchema) => {
+    if (!data.startDatetime || !data.endDatetime) {
+      // Handle the error case when dates are invalid or missing
+      showSnackbar({
+        title: t('error', 'Error'),
+        subtitle: t('invalidDates', 'Invalid or missing dates'),
+        timeoutInMs: 5000,
+        isLowContrast: true,
+        kind: 'error',
+      });
+      return;
+    }
+    const participants = [];
+    selectedParticipants.forEach((p) => {
+      const provider = {
+        provider: p.uuid,
+        encounterRole: procedureResultEncounterRole,
+      };
+      participants.push(provider);
+    });
+    const complications = [];
+    selectedItems.forEach((p) => {
+      const complication = {
+        groupMembers: [
+          {
+            concept: procedureComplicationConceptUuid,
+            valueCoded: p.concept.uuid,
+          },
+        ],
+        concept: procedureComplicationGroupingConceptUuid,
+      };
+      complications.push(complication);
+    });
+
+    const reportPayload = {
+      patient: patientUuid,
+      procedureOrder: order?.uuid,
+      concept: order?.concept?.uuid,
+      procedureReason: order?.orderReason?.uuid,
+      category: order?.orderType?.uuid,
+      status: 'COMPLETED',
+      outcome: data.outcome,
+      location: sessionLocation?.uuid,
+      startDatetime: dayjs(data.startDatetime).format('YYYY-MM-DDTHH:mm:ss'),
+      endDatetime: dayjs(data.endDatetime).format('YYYY-MM-DDTHH:mm:ss'),
+      procedureReport: data.procedureReport,
+      encounters: [
+        {
+          encounterDatetime: new Date(),
+          patient: patientUuid,
+          encounterType: procedureResultEncounterType,
+          encounterProviders: participants,
+          obs: complications,
+        },
+      ],
+    };
+    try {
+      const response = await savePostProcedure(reportPayload);
+      if (response.ok) {
+        showSnackbar({
+          title: t('procedureSaved', 'Procedure saved'),
+          subtitle: t('procedureSavedSuccessfully', 'Procedure saved successfully'),
+          timeoutInMs: 5000,
+          isLowContrast: true,
+          kind: 'success',
+        });
+        mutate((key) => typeof key === 'string' && key.startsWith('/ws/rest/v1/order'), undefined, {
+          revalidate: true,
+        });
+        closeWorkspaceWithSavedChanges();
+      }
+    } catch (error) {
+      console.error(error);
+      showSnackbar({
+        title: t('error', 'Error'),
+        subtitle: t('errorSavingProcedure', 'Error saving procedure'),
+        timeoutInMs: 5000,
+        isLowContrast: true,
+        kind: 'error',
+      });
+      closeOverlay();
+    }
+  };
+
+  const onError = (error: any) => {
+    console.error(error);
+  };
+
+  return (
+    <Form onSubmit={handleSubmit(onSubmit, onError)} className={styles.formContainer}>
+      <Stack gap={4}>
+        <Layer>
+          <FormLabel className={styles.formLabel}>{t('date', 'Date')}</FormLabel>
+          <Controller
+            control={control}
+            name="startDatetime"
+            render={({ field, fieldState }) => (
+              <DatePicker
+                datePickerType="single"
+                className={styles.formDatePicker}
+                onChange={(event) => {
+                  field.onChange(event[0]);
+                }}
+                value={field.value}>
+                <DatePickerInput
+                  placeholder="mm/dd/yyyy"
+                  labelText={t('startDatetime', 'Start Datetime')}
+                  id="startDatetime"
+                  size="md"
+                  invalid={!!errors.startDatetime}
+                  invalidText={errors.startDatetime?.message}
+                />
+              </DatePicker>
+            )}
+          />
+        </Layer>
+        <Layer>
+          <Controller
+            control={control}
+            name="endDatetime"
+            render={({ field, fieldState }) => (
+              <DatePicker
+                datePickerType="single"
+                className={styles.formDatePicker}
+                onChange={(event) => {
+                  field.onChange(event[0]);
+                }}
+                value={field.value}>
+                <DatePickerInput
+                  placeholder="mm/dd/yyyy"
+                  labelText={t('endDatetime', 'End Datetime')}
+                  id="endDatetime"
+                  size="md"
+                  invalid={!!errors.endDatetime}
+                  invalidText={errors.endDatetime?.message}
+                />
+              </DatePicker>
+            )}
+          />
+        </Layer>
+
+        <Layer>
+          <FormLabel className={styles.formLabel}>{t('procedureOutcome', 'Procedure outcome')}</FormLabel>
+          <Controller
+            control={control}
+            name="outcome"
+            render={({ field: { onChange } }) => (
+              <ComboBox
+                onChange={({ selectedItem }) => onChange(selectedItem.id)}
+                id="outcome"
+                items={[
+                  { id: 'SUCCESSFUL', text: t('successful', 'Successful') },
+                  {
+                    id: 'PARTIALLY_SUCCESSFUL',
+                    text: t('partiallySuccessful', 'Partially success'),
+                  },
+                  {
+                    id: 'NOT_SUCCESSFUL',
+                    text: t('notSuccessfully', 'Not successful'),
+                  },
+                ]}
+                itemToString={(item) => (item ? item.text : '')}
+                placeholder={t('selectOutcome', 'Select outcome')}
+                invalid={!!errors.outcome}
+                invalidText={errors.outcome?.message}
+              />
+            )}
+          />
+        </Layer>
+        <Layer>
+          <FormLabel className={styles.formLabel}>{t('procedureReport', 'Procedure report')}</FormLabel>
+          <Controller
+            control={control}
+            name="procedureReport"
+            render={({ field: { onChange } }) => (
+              <TextArea
+                id="procedureReport"
+                rows={4}
+                onChange={onChange}
+                placeholder={t('procedureReportPlaceholder', 'Enter procedure report')}
+                invalid={!!errors.procedureReport}
+                invalidText={errors.procedureReport?.message}
+              />
+            )}
+          />
+        </Layer>
+        <Layer>
+          <FormLabel className={styles.formLabel}>{t('participants', 'Participants')}</FormLabel>
+          <div>
+            {selectedParticipants?.map((item) => (
+              <>
+                <Tag style={{ display: 'inline-flex', alignItems: 'center' }}>
+                  <span style={{ marginRight: '8px' }}>{item.display}</span>
+                  <svg
+                    focusable="false"
+                    fill="currentColor"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 32 32"
+                    aria-hidden="true"
+                    onClick={() => setSelectedParticipants((prevItems) => prevItems.filter((i) => i !== item))}>
+                    <path d={StringPath}></path>
+                  </svg>
+                </Tag>
+              </>
+            ))}
+          </div>
+          <div>
+            <Search
+              autoFocus
+              size="md"
+              id="participantsSearch"
+              placeholder={t('participants', 'Participants')}
+              labelText={t('enterParticipant', 'Enter Participant')}
+              onChange={handleParticipantSearchInputChange}
+              onClear={() => setProviderSearchTerm('')}
+            />
+            {providerSearchResults?.length === 0 ? (
+              <div className={styles.filterEmptyState}>
+                <Layer level={0}>
+                  <Tile className={styles.filterEmptyStateTile}>
+                    <span className={styles.filterEmptyStateContent}>
+                      <strong>{debouncedProviderSearchTerm}</strong>
+                    </span>
+                  </Tile>
+                </Layer>
+              </div>
+            ) : (
+              showParticipants && (
+                <ul className={styles.participantsList}>
+                  {providerSearchResults.map((item) => (
+                    <li
+                      key={item?.uuid}
+                      role="menuitem"
+                      tabIndex={0}
+                      className={styles.participantService}
+                      onClick={() => {
+                        handleParticipantSelect(item);
+                        setSelectedParticipants((prevItems) => [...prevItems, item]);
+                        setShowParticipants(false);
+                      }}>
+                      {item.display}
+                    </li>
+                  ))}
+                </ul>
+              )
+            )}
+            {isProviderSearching && <InlineLoading description="Loading participants..." />}
+          </div>
+        </Layer>
+        <Layer>
+          <FormLabel className={styles.formLabel}>{t('complications', 'Complications')}</FormLabel>
+          <div>
+            {selectedItems?.map((item) => (
+              <>
+                <Tag style={{ display: 'inline-flex', alignItems: 'center' }}>
+                  <span style={{ marginRight: '8px' }}>{item.display}</span>
+                  <svg
+                    focusable="false"
+                    fill="currentColor"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 32 32"
+                    aria-hidden="true"
+                    onClick={() => setSelectedItems((prevItems) => prevItems.filter((i) => i !== item))}>
+                    <path d={StringPath}></path>
+                  </svg>
+                </Tag>
+              </>
+            ))}
+          </div>
+          <div>
+            <Search
+              autoFocus
+              size="md"
+              id="conditionsSearch"
+              placeholder={t('complications', 'complications')}
+              labelText={t('enterCondition', 'Enter condition')}
+              onChange={handleSearchInputChange}
+              onClear={() => setSearchTerm('')}
+            />
+            {searchResults?.length === 0 ? (
+              <div className={styles.filterEmptyState}>
+                <Layer level={0}>
+                  <Tile className={styles.filterEmptyStateTile}>
+                    <span className={styles.filterEmptyStateContent}>
+                      <strong>{debouncedSearchTerm}</strong>
+                    </span>
+                  </Tile>
+                </Layer>
+              </div>
+            ) : (
+              showItems && (
+                <ul className={styles.complicationsList}>
+                  {searchResults.map((item) => (
+                    <li
+                      key={item?.concept?.uuid}
+                      role="menuitem"
+                      tabIndex={0}
+                      className={styles.complicationService}
+                      onClick={() => {
+                        handleSelect(item);
+                        setSelectedItems((prevItems) => [...prevItems, item]);
+                        setShowItems(false);
+                      }}>
+                      {item.display}
+                    </li>
+                  ))}
+                </ul>
+              )
+            )}
+            {isSearching && <InlineLoading description="Loading complications..." />}
+          </div>
+        </Layer>
+      </Stack>
+      <ButtonSet className={styles.buttonSetContainer}>
+        <Button onClick={closeWorkspace} size="md" kind="secondary">
+          {t('discard', 'Discard')}
+        </Button>
+        <Button type="submit" size="md" kind="primary">
+          {t('saveAndClose', 'Save & Close')}
+        </Button>
+      </ButtonSet>
+    </Form>
+  );
+};
+
+export default PostProcedureForm;

package/src/form/post-procedures/post-procedure-form.scss

@@ -0,0 +1,189 @@
+@use '@carbon/styles/scss/type';
+@use '@carbon/layout';
+@use '@carbon/colors';
+@use '@openmrs/esm-styleguide/src/vars' as vars;
+
+.formLabel {
+  color: colors.$cool-gray-90;
+  @include type.type-style('heading-compact-01');
+  margin-bottom: layout.$spacing-03;
+  margin-top: layout.$spacing-01;
+}
+
+/* Desktop */
+:global(.omrs-breakpoint-gt-tablet) {
+  .formContainer {
+    margin: layout.$spacing-03 layout.$spacing-05;
+    height: calc(100vh - 7rem);
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+}
+
+/* Tablet */
+:global(.omrs-breakpoint-lt-desktop) {
+  .formContainer {
+    margin: layout.$spacing-05 layout.$spacing-05;
+    height: calc(100vh - 4rem);
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+}
+
+.buttonSetContainer {
+  width: 100%;
+  margin-top: auto;
+
+  & > button {
+    max-width: 50% !important;
+    height: 4rem;
+  }
+}
+
+.condition {
+  padding: 0.75rem;
+  border-top: 0.0625rem solid vars.$grey-2;
+
+  &:first-of-type {
+    border-top: none;
+  }
+
+  &:last-of-type {
+    border-bottom: none;
+  }
+}
+
+.conditionsList {
+  background-color: vars.$ui-02;
+  max-height: 14rem;
+  overflow-y: auto;
+  border: 1px solid vars.$ui-03;
+
+  li:hover {
+    background-color: vars.$ui-03;
+  }
+}
+
+.emptyResults {
+  @include type.type-style('body-compact-01');
+  color: vars.$text-02;
+  min-height: 1rem;
+  border: 1px solid vars.$ui-03;
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: calc(100vh - 6rem);
+}
+
+.formContainer {
+  margin: 1rem;
+  position: relative;
+  z-index: 100;
+}
+
+.button {
+  height: 4rem;
+  display: flex;
+  align-content: flex-start;
+  align-items: baseline;
+  min-width: 50%;
+}
+
+.tablet {
+  padding: 1.5rem 1rem;
+  background-color: vars.$ui-02;
+}
+
+.desktop {
+  padding: 0rem;
+}
+
+.loader {
+  padding: 1rem 0.5rem;
+}
+
+.conditionLabel {
+  @include type.type-style('label-02');
+}
+
+.errorContainer {
+  margin: 1rem;
+}
+
+.conditionsError {
+  :global(.cds--search-input):focus {
+    outline: 2px solid vars.$danger;
+  }
+
+  :global(.cds--search-magnifier) {
+    svg {
+      fill: vars.$danger;
+    }
+  }
+}
+
+.errorMessage {
+  @include type.type-style('label-02');
+  color: vars.$danger;
+  margin-top: 0.5rem;
+}
+
+.radioGroup {
+  :global(.cds--radio-button-wrapper) {
+    margin-block-end: 0.375rem !important;
+  }
+
+  :global(.cds--radio-button__validation-msg) {
+    display: none;
+  }
+}
+
+.spinner {
+  &:global(.cds--inline-loading) {
+    min-height: 1rem;
+  }
+}
+
+.required {
+  color: colors.$red-60;
+  margin-left: 0.125rem;
+}
+
+.complicationService {
+  padding: 1rem 0.75rem;
+}
+
+.complicationsList {
+  background-color: vars.$ui-02;
+  max-height: 14rem;
+  overflow-y: auto;
+  border: 1px solid vars.$ui-03;
+
+  li:hover {
+    background-color: vars.$ui-03;
+  }
+}
+
+.participantService {
+  padding: 1rem 0.75rem;
+}
+
+.participantsList {
+  background-color: vars.$ui-02;
+  max-height: 14rem;
+  overflow-y: auto;
+  border: 1px solid vars.$ui-03;
+
+  li:hover {
+    background-color: vars.$ui-03;
+  }
+}
+
+.formDatePicker input {
+  min-width: 23rem;
+}