@palladium-ethiopia/esm-clinical-workflow-app 5.4.2-pre.20 → 5.4.2-pre.26

package/src/patient-chart/visit/visits-widget/encounter-observations/styles.scss

@@ -0,0 +1,22 @@
+@use '@carbon/layout';
+
+.observation {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: layout.$spacing-03;
+  margin-block: layout.$spacing-05;
+  margin-inline: 0 layout.$spacing-05;
+}
+
+.observation > span {
+  align-self: center;
+  justify-self: start;
+}
+
+.parentConcept {
+  font-weight: bold;
+}
+
+.childConcept {
+  padding-inline-start: layout.$spacing-04;
+}

package/src/patient-chart/visit/visits-widget/past-visits-components/encounters-table/all-encounters-table.component.tsx

@@ -0,0 +1,44 @@
+import React, { useState } from 'react';
+import { type EncounterType } from '@openmrs/esm-framework';
+import { type EncountersTableProps, usePaginatedEncounters } from './encounters-table.resource';
+import EncountersTable from './encounters-table.component';
+
+interface AllEncountersTableProps {
+  patientUuid: string;
+}
+
+/**
+ * This component shows a table of all encounters (across all visits) of a patient
+ */
+const AllEncountersTable: React.FC<AllEncountersTableProps> = ({ patientUuid }) => {
+  const [encounterTypeToFilter, setEncounterTypeToFilter] = useState<EncounterType>(null);
+  const [pageSize, setPageSize] = useState(20);
+
+  const {
+    data: paginatedEncounters,
+    currentPage,
+    isLoading,
+    totalCount,
+    goTo,
+    mutate,
+  } = usePaginatedEncounters(patientUuid, encounterTypeToFilter?.uuid, pageSize);
+
+  const encountersTableProps: EncountersTableProps = {
+    currentPage,
+    encounterTypeToFilter,
+    goTo,
+    isLoading,
+    pageSize,
+    paginatedEncounters,
+    patientUuid,
+    setEncounterTypeToFilter,
+    setPageSize,
+    showEncounterTypeFilter: true,
+    showVisitType: true,
+    totalCount,
+  };
+
+  return <EncountersTable {...encountersTableProps} />;
+};
+
+export default AllEncountersTable;

package/src/patient-chart/visit/visits-widget/past-visits-components/encounters-table/encounters-table.component.tsx

@@ -0,0 +1,388 @@
+import React, { type ComponentProps, useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSWRConfig } from 'swr';
+import {
+  Button,
+  ComboBox,
+  DataTable,
+  DataTableSkeleton,
+  Layer,
+  OverflowMenu,
+  OverflowMenuItem,
+  Pagination,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableExpandedRow,
+  TableExpandHeader,
+  TableExpandRow,
+  TableHead,
+  TableHeader,
+  TableRow,
+  TableToolbar,
+  TableToolbarContent,
+  Tile,
+} from '@carbon/react';
+import {
+  EditIcon,
+  isDesktop,
+  launchWorkspace2,
+  showModal,
+  showSnackbar,
+  TrashCanIcon,
+  useConfig,
+  useLayoutType,
+  userHasAccess,
+  useSession,
+  type EncounterType,
+  ExtensionSlot,
+  useFeatureFlag,
+} from '@openmrs/esm-framework';
+import { invalidateVisitAndEncounterData, usePatientChartStore } from '@openmrs/esm-patient-common-lib';
+import { jsonSchemaResourceName } from '../../../../constants';
+import {
+  deleteEncounter,
+  mapEncounter,
+  useEncounterTypes,
+  type EncountersTableProps,
+  type MappedEncounter,
+} from './encounters-table.resource';
+import EncounterObservations from '../../encounter-observations';
+import styles from './encounters-table.scss';
+import { type ChartConfig } from '../../../../../config-schema';
+
+/**
+ * This components is used by the AllEncountersTable and VisitEncountersTable to display
+ * a table of encounters, with the actual data, pagination and filtering logic passed in
+ * as props.
+ */
+const EncountersTable: React.FC<EncountersTableProps> = ({
+  currentPage,
+  encounterTypeToFilter,
+  goTo,
+  isLoading,
+  pageSize,
+  paginatedEncounters,
+  patientUuid,
+  setEncounterTypeToFilter,
+  setPageSize,
+  showEncounterTypeFilter,
+  showVisitType,
+  totalCount,
+}) => {
+  const { t } = useTranslation();
+  const pageSizes = [10, 20, 30, 40, 50];
+  const desktopLayout = isDesktop(useLayoutType());
+  const session = useSession();
+  const { mutateVisitContext } = usePatientChartStore(patientUuid);
+  const { mutate } = useSWRConfig();
+  const responsiveSize = desktopLayout ? 'sm' : 'lg';
+  const { data: encounterTypes, isLoading: isLoadingEncounterTypes } = useEncounterTypes();
+  const enableEmbeddedFormView = useFeatureFlag('enable-embedded-form-view');
+  const { encounterEditableDuration, encounterEditableDurationOverridePrivileges } = useConfig<ChartConfig>();
+  const paginatedMappedEncounters = useMemo(
+    () => (paginatedEncounters ?? []).map(mapEncounter).filter(Boolean),
+    [paginatedEncounters],
+  );
+
+  const tableHeaders = [
+    {
+      header: t('dateAndTime', 'Date & time'),
+      key: 'datetime',
+    },
+    ...(showVisitType
+      ? [
+          {
+            header: t('visitType', 'Visit type'),
+            key: 'visitType',
+          },
+        ]
+      : []),
+    {
+      header: t('encounterType', 'Encounter type'),
+      key: 'encounterType',
+    },
+    {
+      header: t('form', 'Form name'),
+      key: 'formName',
+    },
+    {
+      header: t('provider', 'Provider'),
+      key: 'provider',
+    },
+  ];
+
+  const handleDeleteEncounter = useCallback(
+    (encounterUuid: string, encounterTypeName?: string) => {
+      const dispose = showModal('delete-encounter-modal', {
+        close: () => dispose(),
+        encounterTypeName: encounterTypeName || '',
+        onConfirmation: () => {
+          const abortController = new AbortController();
+          deleteEncounter(encounterUuid, abortController)
+            .then(() => {
+              // Update current visit data for critical components
+              mutateVisitContext?.();
+
+              // Also invalidate visit history and encounter tables since the encounter was deleted
+              invalidateVisitAndEncounterData(mutate, patientUuid);
+
+              showSnackbar({
+                isLowContrast: true,
+                title: t('encounterDeleted', 'Encounter deleted'),
+                subtitle: t('encounterSuccessfullyDeleted', 'The encounter has been deleted successfully'),
+                kind: 'success',
+              });
+            })
+            .catch(() => {
+              showSnackbar({
+                isLowContrast: false,
+                title: t('error', 'Error'),
+                subtitle: t(
+                  'encounterWithError',
+                  'The encounter could not be deleted successfully. If the error persists, please contact your system administrator.',
+                ),
+                kind: 'error',
+              });
+            });
+          dispose();
+        },
+      });
+    },
+    [mutate, mutateVisitContext, patientUuid, t],
+  );
+
+  if (isLoadingEncounterTypes || isLoading) {
+    return <DataTableSkeleton role="progressbar" zebra />;
+  }
+
+  return (
+    <div className={styles.container}>
+      <DataTable
+        headers={tableHeaders}
+        overflowMenuOnHover={desktopLayout}
+        rows={paginatedMappedEncounters ?? []}
+        size={responsiveSize}
+        useZebraStyles={totalCount > 1 ? true : false}>
+        {({
+          rows,
+          headers,
+          getHeaderProps,
+          getRowProps,
+          getExpandHeaderProps,
+          getToolbarProps,
+          getTableProps,
+        }: {
+          headers: Array<{ header: React.ReactNode; key: string }>;
+          rows: Array<{ isExpanded: boolean; cells: Array<{ id: string; value: React.ReactNode }> }>;
+          [key: string]: any;
+        }) => (
+          <>
+            <TableContainer className={styles.tableContainer}>
+              {showEncounterTypeFilter && (
+                <TableToolbar {...getToolbarProps()}>
+                  <TableToolbarContent>
+                    <div className={styles.filterContainer}>
+                      <ComboBox
+                        aria-label={t('filterByEncounterType', 'Filter by encounter type')}
+                        className={styles.substitutionType}
+                        id="encounterTypeFilter"
+                        items={encounterTypes}
+                        itemToString={(item: EncounterType) => item?.display}
+                        onChange={({ selectedItem }) => setEncounterTypeToFilter(selectedItem)}
+                        placeholder={t('filterByEncounterType', 'Filter by encounter type')}
+                        selectedItem={encounterTypeToFilter}
+                        size={responsiveSize}
+                      />
+                    </div>
+                  </TableToolbarContent>
+                </TableToolbar>
+              )}
+              <Table {...getTableProps()}>
+                <TableHead>
+                  <TableRow>
+                    <TableExpandHeader enableToggle {...getExpandHeaderProps()} />
+                    {headers.map((header, i) => (
+                      <TableHeader className={styles.tableHeader} key={i} {...getHeaderProps({ header })}>
+                        {header.header}
+                      </TableHeader>
+                    ))}
+                    <TableHeader aria-label={t('actions', 'Actions')} />
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {rows?.map((row, i) => {
+                    const encounter = paginatedMappedEncounters[i];
+
+                    if (!encounter) {
+                      return null;
+                    }
+
+                    const isVisitNoteEncounter = (encounter: MappedEncounter) =>
+                      encounter.encounterType === 'Visit Note' && !encounter.form;
+
+                    const supportsEmbeddedFormView = (encounter: MappedEncounter) =>
+                      encounter.form?.uuid &&
+                      encounter.form.resources?.some((resource) => resource.name === jsonSchemaResourceName);
+
+                    const encounterAgeInMinutes = (Date.now() - new Date(encounter.datetime).getTime()) / (1000 * 60);
+
+                    const canDeleteEncounter =
+                      userHasAccess(encounter.editPrivilege, session?.user) &&
+                      (encounterEditableDuration === 0 ||
+                        (encounterEditableDuration > 0 && encounterAgeInMinutes <= encounterEditableDuration) ||
+                        encounterEditableDurationOverridePrivileges.some((privilege) =>
+                          userHasAccess(privilege, session?.user),
+                        ));
+
+                    const canEditEncounter =
+                      canDeleteEncounter && (encounter.form?.uuid || isVisitNoteEncounter(encounter));
+
+                    return (
+                      <React.Fragment key={encounter.id}>
+                        <TableExpandRow {...getRowProps({ row })}>
+                          {row.cells.map((cell) => (
+                            <TableCell key={cell.id}>{cell.value}</TableCell>
+                          ))}
+                          <TableCell className="cds--table-column-menu">
+                            <Layer className={styles.layer}>
+                              {canDeleteEncounter && ( // equivalent to canDeleteEncounter || canEditEncounter
+                                <OverflowMenu
+                                  aria-label={t('encounterTableActionsMenu', 'Encounter table actions menu')}
+                                  flipped
+                                  size={responsiveSize}
+                                  align="left">
+                                  {canEditEncounter && (
+                                    <OverflowMenuItem
+                                      className={styles.menuItem}
+                                      itemText={t('editThisEncounter', 'Edit this encounter')}
+                                      onClick={() => {
+                                        if (isVisitNoteEncounter(encounter)) {
+                                          launchWorkspace2('visit-notes-form-shadow-workspace', {
+                                            encounter,
+                                            formContext: 'editing',
+                                            patientUuid,
+                                          });
+                                        } else {
+                                          launchWorkspace2('patient-form-entry-workspace', {
+                                            form: encounter.form,
+                                            encounterUuid: encounter.id,
+                                          });
+                                        }
+                                      }}
+                                    />
+                                  )}
+                                  {canDeleteEncounter && (
+                                    <OverflowMenuItem
+                                      className={styles.menuItem}
+                                      hasDivider
+                                      isDelete
+                                      itemText={t('deleteThisEncounter', 'Delete this encounter')}
+                                      onClick={() => handleDeleteEncounter(encounter.id, encounter.form?.display)}
+                                    />
+                                  )}
+                                </OverflowMenu>
+                              )}
+                            </Layer>
+                          </TableCell>
+                        </TableExpandRow>
+                        {row.isExpanded ? (
+                          <TableExpandedRow className={styles.expandedRow} colSpan={headers.length + 2}>
+                            <>
+                              {enableEmbeddedFormView && supportsEmbeddedFormView(encounter) ? (
+                                <ExtensionSlot
+                                  name="form-widget-slot"
+                                  state={{
+                                    additionalProps: { mode: 'embedded-view' },
+                                    patientUuid: patientUuid,
+                                    formUuid: encounter.form.uuid,
+                                    encounterUuid: encounter.id,
+                                    promptBeforeClosing: () => {},
+                                  }}
+                                />
+                              ) : (
+                                <EncounterObservations observations={encounter.obs} />
+                              )}
+                              <>
+                                {canEditEncounter && (
+                                  <Button
+                                    kind="ghost"
+                                    onClick={() => {
+                                      if (isVisitNoteEncounter(encounter)) {
+                                        launchWorkspace2('visit-notes-form-shadow-workspace', {
+                                          encounter,
+                                          formContext: 'editing',
+                                          patientUuid,
+                                        });
+                                      } else {
+                                        launchWorkspace2('patient-form-entry-workspace', {
+                                          form: encounter.form,
+                                          encounterUuid: encounter.id,
+                                        });
+                                      }
+                                    }}
+                                    renderIcon={(props: ComponentProps<typeof EditIcon>) => (
+                                      <EditIcon size={16} {...props} />
+                                    )}>
+                                    {t('editThisEncounter', 'Edit this encounter')}
+                                  </Button>
+                                )}
+                                {canDeleteEncounter && (
+                                  <Button
+                                    kind="danger--ghost"
+                                    onClick={() => handleDeleteEncounter(encounter.id, encounter.form?.display)}
+                                    renderIcon={(props: ComponentProps<typeof TrashCanIcon>) => (
+                                      <TrashCanIcon size={16} {...props} />
+                                    )}>
+                                    {t('deleteThisEncounter', 'Delete this encounter')}
+                                  </Button>
+                                )}
+                              </>
+                            </>
+                          </TableExpandedRow>
+                        ) : (
+                          <TableExpandedRow className={styles.hiddenRow} colSpan={headers.length + 2} />
+                        )}
+                      </React.Fragment>
+                    );
+                  })}
+                </TableBody>
+              </Table>
+              {rows?.length === 0 && (
+                <div className={styles.tileContainer}>
+                  <Tile className={styles.tile}>
+                    <div className={styles.tileContent}>
+                      <p className={styles.content}>{t('noEncountersToDisplay', 'No encounters to display')}</p>
+                      <p className={styles.helper}>{t('checkFilters', 'Check the filters above')}</p>
+                    </div>
+                  </Tile>
+                </div>
+              )}
+            </TableContainer>
+          </>
+        )}
+      </DataTable>
+      {
+        <Pagination
+          forwardText={t('nextPage', 'Next page')}
+          backwardText={t('previousPage', 'Previous page')}
+          page={currentPage}
+          pageSize={pageSize}
+          pageSizes={pageSizes}
+          totalItems={totalCount}
+          onChange={({ pageSize: newPageSize, page }) => {
+            if (newPageSize !== pageSize) {
+              setPageSize(newPageSize);
+            }
+            if (page !== currentPage) {
+              goTo(page);
+            }
+          }}
+        />
+      }
+    </div>
+  );
+};
+
+export default EncountersTable;

package/src/patient-chart/visit/visits-widget/past-visits-components/encounters-table/encounters-table.resource.ts

@@ -0,0 +1,97 @@
+import {
+  formatDatetime,
+  makeUrl,
+  openmrsFetch,
+  parseDate,
+  restBaseUrl,
+  type Diagnosis,
+  type Encounter,
+  type EncounterType,
+  type Obs,
+  useOpenmrsFetchAll,
+  useOpenmrsPagination,
+} from '@openmrs/esm-framework';
+import { type Form } from '@openmrs/esm-patient-common-lib';
+
+export interface EncountersTableProps {
+  patientUuid: string;
+  totalCount: number;
+  currentPage: number;
+  goTo(page: number): void;
+  isLoading: boolean;
+  showVisitType: boolean;
+  paginatedEncounters: Array<Encounter>;
+  showEncounterTypeFilter: boolean;
+  encounterTypeToFilter?: EncounterType;
+  setEncounterTypeToFilter?: React.Dispatch<React.SetStateAction<EncounterType>>;
+  pageSize: number;
+  setPageSize: React.Dispatch<React.SetStateAction<number>>;
+}
+
+export interface MappedEncounter {
+  datetime: string;
+  diagnoses: Array<Diagnosis>;
+  editPrivilege: string;
+  encounterType: string;
+  form: Form;
+  formName: string;
+  id: string;
+  obs: Array<Obs>;
+  provider: string;
+  visitStartDatetime?: string;
+  visitStopDatetime?: string;
+  visitType: string;
+  visitTypeUuid?: string;
+  visitUuid: string;
+}
+
+export function deleteEncounter(encounterUuid: string, abortController: AbortController) {
+  return openmrsFetch(`${restBaseUrl}/encounter/${encounterUuid}`, {
+    method: 'DELETE',
+    signal: abortController.signal,
+  });
+}
+
+export function usePaginatedEncounters(patientUuid: string, encounterType: string, pageSize: number) {
+  const customRep = `custom:(uuid,display,diagnoses:(uuid,display,rank,diagnosis,certainty,voided),encounterDatetime,form:(uuid,display,name,description,encounterType,version,resources:(uuid,display,name,valueReference)),encounterType,visit,patient,obs:(uuid,concept:(uuid,display,conceptClass:(uuid,display)),display,groupMembers:(uuid,concept:(uuid,display),value:(uuid,display),display),value,obsDatetime),encounterProviders:(provider:(person)))`;
+  const url = new URL(makeUrl(`${restBaseUrl}/encounter`), window.location.toString());
+  url.searchParams.set('patient', patientUuid);
+  url.searchParams.set('v', customRep);
+  url.searchParams.set('order', 'desc');
+  encounterType && url.searchParams.set('encounterType', encounterType);
+  return useOpenmrsPagination<Encounter>(patientUuid ? url : null, pageSize);
+}
+
+export function useEncounterTypes() {
+  return useOpenmrsFetchAll<EncounterType>(`${restBaseUrl}/encountertype`, {
+    immutable: true,
+  });
+}
+
+export function mapEncounter(encounter: Encounter): MappedEncounter {
+  return {
+    id: encounter.uuid,
+    datetime: formatDatetime(parseDate(encounter.encounterDatetime), {
+      noToday: true,
+    }),
+    diagnoses:
+      encounter.diagnoses
+        ?.filter((diagnosis) => !diagnosis.voided)
+        .map((diagnosis) => ({
+          ...diagnosis,
+          certainty: diagnosis.certainty || 'PROVISIONAL',
+        })) || [],
+    encounterType: encounter.encounterType?.display,
+    editPrivilege: encounter.encounterType?.editPrivilege?.display,
+    form: encounter.form as Form,
+    formName: encounter.form?.display ?? '--',
+    obs: encounter.obs,
+    provider:
+      encounter.encounterProviders?.length > 0 ? encounter.encounterProviders[0].provider?.person?.display : '--',
+    visitStartDatetime: encounter.visit?.startDatetime,
+    visitStopDatetime: encounter.visit?.stopDatetime,
+    visitType: encounter.visit?.visitType?.display,
+    visitTypeUuid: encounter.visit?.visitType?.uuid,
+    visitUuid: encounter.visit?.uuid,
+  };
+}

package/src/patient-chart/visit/visits-widget/past-visits-components/encounters-table/encounters-table.scss

@@ -0,0 +1,113 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.container {
+  margin: layout.$spacing-05 0;
+  border: 1px solid $ui-03;
+}
+
+.tableContainer {
+  padding: 0;
+  border-bottom: none;
+
+  :global(.cds--data-table-header) {
+    padding: 0;
+  }
+
+  :global(.cds--table-toolbar) {
+    position: relative;
+    overflow: visible;
+    top: 0;
+  }
+
+  &:global(.cds--data-table-container) {
+    background: none !important;
+  }
+}
+
+.paginationContainer {
+  > div {
+    border: 1px solid $ui-03 !important;
+    border-top: none !important;
+  }
+}
+
+.filterContainer {
+  :global(.cds--dropdown__wrapper--inline) {
+    gap: 0;
+  }
+
+  :global(.cds--list-box__menu-icon) {
+    height: layout.$spacing-05;
+  }
+
+  label {
+    margin-right: layout.$spacing-05 !important;
+  }
+}
+
+.search {
+  max-width: 16rem;
+}
+
+.menuItem {
+  max-width: none;
+}
+
+.expandedRow {
+  padding-inline-start: 3.5rem;
+  padding-inline-end: 3.5rem;
+
+  > td {
+    padding: inherit !important;
+
+    > div {
+      max-height: max-content !important;
+    }
+  }
+
+  > div {
+    background-color: $ui-02;
+  }
+}
+
+.hiddenRow {
+  display: none;
+}
+
+.content {
+  @include type.type-style('heading-compact-02');
+  color: $text-02;
+  margin-bottom: layout.$spacing-03;
+}
+
+.tileContainer {
+  background-color: $ui-02;
+  border-top: 1px solid $ui-03;
+  padding: layout.$spacing-11 0;
+}
+
+.tile {
+  margin: auto;
+  width: fit-content;
+}
+
+.tileContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.helper {
+  @include type.type-style('body-compact-01');
+  color: $text-02;
+}
+
+.layer {
+  height: 100%;
+
+  :global(.cds--btn--primary) {
+    background-color: unset;
+  }
+}