@openmrs/esm-appointments-app 9.2.1-pre.7356 → 9.2.1-pre.7362

package/src/patient-appointments/patient-appointments-table.component.tsx

@@ -46,7 +46,7 @@ const PatientAppointmentsTable: React.FC<AppointmentTableProps> = ({
     }
   }, [switchedView, goTo, currentPage]);
 
-  const tableHeaders: Array<typeof DataTableHeader> = useMemo(
+  const tableHeaders: Array<DataTableHeader> = useMemo(
     () => [
       { key: 'date', header: t('date', 'Date') },
       { key: 'location', header: t('location', 'Location') },
@@ -87,9 +87,8 @@ const PatientAppointmentsTable: React.FC<AppointmentTableProps> = ({
                       className={classNames(styles.productiveHeading01, styles.text02)}
                       {...getHeaderProps({
                         header,
-                        isSortable: header.isSortable,
                       })}>
-                      {header.header?.content ?? header.header}
+                      {header.header}
                     </TableHeader>
                   ))}
                   <TableHeader />

package/translations/en.json

@@ -58,7 +58,6 @@
   "countMore_other": "{{count}} more",
   "createNewAppointment": "Create new appointment",
   "date": "Date",
-  "date&Time": "Date & time",
   "dateAppointmentIssued": "Date appointment issued",
   "dateAppointmentIssuedCannotBeAfterAppointmentDate": "Date appointment issued cannot be after the appointment date",
   "dateAppointmentScheduled": "Date appointment scheduled",
@@ -74,8 +73,6 @@
   "edit": "Edit",
   "editAppointment": "Edit appointment",
   "emptyStateText": "There are no <1>{{displayText}}</1> to display",
-  "encounters": "Encounters",
-  "encounterType": "Encounter type",
   "endAppointmentAndVisitConfirmationMessage": "Checking the patient out will mark the appointment as complete, and close out the active visit for this patient.",
   "endAppointmentConfirmation": "Are you sure you want to check the patient out for this appointment?",
   "endAppointmentConfirmationMessage": "Checking the patient out will mark the appointment as complete.",
@@ -94,7 +91,6 @@
   "itemsPerPage": "Items per page",
   "loading": "Loading",
   "location": "Location",
-  "medications": "Medications",
   "metricLoadErrorMessage": "Please contact your system administrator if the problem persists.",
   "missed": "Missed",
   "MON": "MON",
@@ -105,10 +101,8 @@
   "noAppointmentsToDisplay": "No appointments to display",
   "noContent": "No Content",
   "noCurrentAppointments": "There are no appointments scheduled for today to display for this patient",
-  "noEncountersFound": "No encounters found",
   "noMatchingAppointments": "No matching appointments found",
   "noPastAppointments": "There are no past appointments to display for this patient",
-  "noPreviousVisitFound": "No previous visit found",
   "notArrived": "Not arrived",
   "note": "Note",
   "notes": "Notes",
@@ -160,7 +154,6 @@
   "upcoming": "Upcoming",
   "upcomingAppointments": "Upcoming appointments",
   "updateError": "Error updating upcoming appointment",
-  "vitals": "Vitals",
   "WED": "WED",
   "week": "Week",
   "yes": "Yes"

package/src/past-visit/encounter-list.component.tsx

@@ -1,54 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-import {
-  StructuredListHead,
-  StructuredListCell,
-  StructuredListRow,
-  StructuredListBody,
-  StructuredListWrapper,
-} from '@carbon/react';
-import { useTranslation } from 'react-i18next';
-import { formatDatetime, parseDate } from '@openmrs/esm-framework';
-import { type FormattedEncounter } from './past-visit.component';
-import styles from './past-visit.scss';
-
-interface EncounterListProps {
-  encounters: Array<FormattedEncounter>;
-}
-
-const EncounterList: React.FC<EncounterListProps> = ({ encounters }) => {
-  const { t } = useTranslation();
-
-  const structuredListBodyRowGenerator = () => {
-    return encounters.map((encounter, i) => (
-      <StructuredListRow label key={`row-${i}`}>
-        <StructuredListCell>{formatDatetime(parseDate(encounter.datetime), { mode: 'wide' })}</StructuredListCell>
-        <StructuredListCell className={styles.textColor}>{encounter.encounterType}</StructuredListCell>
-        <StructuredListCell>{encounter.provider}</StructuredListCell>
-      </StructuredListRow>
-    ));
-  };
-
-  if (encounters?.length) {
-    return (
-      <div className={styles.encounterListContainer}>
-        <StructuredListWrapper>
-          <StructuredListHead>
-            <StructuredListRow head>
-              <StructuredListCell head>{t('date&Time', 'Date & time')}</StructuredListCell>
-              <StructuredListCell head>{t('encounterType', 'Encounter type')}</StructuredListCell>
-              <StructuredListCell head>{t('provider', 'Provider')}</StructuredListCell>
-            </StructuredListRow>
-          </StructuredListHead>
-          <StructuredListBody>{structuredListBodyRowGenerator()}</StructuredListBody>
-        </StructuredListWrapper>
-      </div>
-    );
-  }
-
-  return (
-    <p className={classNames(styles.bodyLong01, styles.text02)}>{t('noEncountersFound', 'No encounters found')}</p>
-  );
-};
-
-export default EncounterList;

package/src/past-visit/past-visit.component.tsx

@@ -1,106 +0,0 @@
-import React, { useState } from 'react';
-import classNames from 'classnames';
-import { useTranslation } from 'react-i18next';
-import { StructuredListSkeleton, Tab, Tabs } from '@carbon/react';
-import { formatDate, type OpenmrsResource, parseDate, useLayoutType } from '@openmrs/esm-framework';
-import { type Observation } from '../types';
-import { usePastVisits } from './past-visit.resource';
-import EncounterList from './encounter-list.component';
-import styles from './past-visit.scss';
-
-interface PastVisitProps {
-  patientUuid: string;
-}
-
-export interface FormattedEncounter {
-  id: string;
-  datetime: string;
-  encounterType: string;
-  form: OpenmrsResource;
-  obs: Array<Observation>;
-  provider: string;
-  visitType: string;
-  visitUuid: string;
-}
-
-const PastVisit: React.FC<PastVisitProps> = ({ patientUuid }) => {
-  const { t } = useTranslation();
-  const { data: pastVisits, error, isLoading } = usePastVisits(patientUuid);
-  const [selectedTabIndex, setSelectedTabIndex] = useState(0);
-  const isTablet = useLayoutType() === 'tablet';
-
-  if (isLoading) {
-    return <StructuredListSkeleton role="progressbar" />;
-  }
-
-  if (pastVisits?.length) {
-    const encounters = mapEncounters(pastVisits[0]);
-
-    const tabsClasses = classNames(styles.verticalTabs, {
-      [styles.tabletTabs]: isTablet,
-      [styles.desktopTabs]: !isTablet,
-    });
-
-    const tabClass = (index) =>
-      classNames(styles.tab, styles.bodyLong01, {
-        [styles.selectedTab]: selectedTabIndex === index,
-      });
-
-    return (
-      <div className={styles.wrapper}>
-        <div className={styles.visitType}>
-          <span> {pastVisits?.length ? pastVisits[0]?.visitType.display : '--'}</span>
-          <p className={styles.date}>
-            {pastVisits?.length ? formatDate(parseDate(pastVisits[0]?.startDatetime)) : '--'}
-          </p>
-        </div>
-        <div className={styles.visitContainer}>
-          <Tabs className={tabsClasses}>
-            <Tab
-              className={tabClass[0]}
-              id="vitals-tab"
-              onClick={() => setSelectedTabIndex(0)}
-              label={t('vitals', 'Vitals')}></Tab>
-
-            <Tab
-              className={tabClass[1]}
-              id="notes-tab"
-              onClick={() => setSelectedTabIndex(1)}
-              label={t('notes', 'Notes')}></Tab>
-
-            <Tab
-              className={tabClass[2]}
-              id="medications-tab"
-              onClick={() => setSelectedTabIndex(2)}
-              label={t('medications', 'Medications')}></Tab>
-
-            <Tab
-              className={tabClass[3]}
-              id="encounters-tab"
-              onClick={() => setSelectedTabIndex(3)}
-              label={t('encounters', 'Encounters')}>
-              <EncounterList encounters={encounters} />
-            </Tab>
-          </Tabs>
-        </div>
-      </div>
-    );
-  }
-  return <p className={styles.bodyLong01}>{t('noPreviousVisitFound', 'No previous visit found')}</p>;
-};
-
-export function mapEncounters(visit) {
-  return visit?.encounters?.map((encounter) => ({
-    id: encounter?.uuid,
-    datetime: encounter?.encounterDatetime,
-    encounterType: encounter?.encounterType?.display,
-    form: encounter?.form,
-    obs: encounter?.obs,
-    provider:
-      encounter?.encounterProviders?.length > 0 ? encounter.encounterProviders[0].provider?.person?.display : '--',
-    visitUuid: visit?.visitType.uuid,
-    visitType: visit?.visitType?.name,
-  }));
-}
-
-export default PastVisit;

package/src/past-visit/past-visit.resource.ts

@@ -1,25 +0,0 @@
-import useSWR from 'swr';
-import { openmrsFetch, restBaseUrl, type Visit } from '@openmrs/esm-framework';
-
-export function usePastVisits(patientUuid: string) {
-  const customRepresentation =
-    'custom:(uuid,encounters:(uuid,encounterDatetime,' +
-    'form:(uuid,name),location:ref,' +
-    'encounterType:ref,encounterProviders:(uuid,display,' +
-    'provider:(uuid,display))),patient:(uuid,uuid),' +
-    'visitType:(uuid,name,display),attributes:(uuid,display,value),location:(uuid,name,display),startDatetime,' +
-    'stopDatetime)';
-
-  const apiUrl = `${restBaseUrl}/visit?patient=${patientUuid}&v=${customRepresentation}`;
-  const { data, error, isLoading, isValidating } = useSWR<{ data: { results: Array<Visit> } }, Error>(
-    patientUuid ? apiUrl : null,
-    openmrsFetch,
-  );
-
-  return {
-    data: data ? data.data.results : null,
-    error,
-    isLoading,
-    isValidating,
-  };
-}

package/src/past-visit/past-visit.scss

@@ -1,111 +0,0 @@
-@use '@carbon/layout';
-@use '@carbon/type';
-@use '@openmrs/esm-styleguide/src/vars' as *;
-
-.wrapper {
-  margin-top: layout.$spacing-03;
-}
-
-.bodyShort02 {
-  @include type.type-style('body-compact-02');
-}
-
-.bodyLong01 {
-  @include type.type-style('body-01');
-}
-
-.date {
-  @include type.type-style('label-01');
-  color: $text-02;
-  margin: layout.$spacing-03 0 layout.$spacing-02;
-}
-
-.visitType {
-  @include type.type-style('heading-compact-02');
-}
-
-.container {
-  background-color: $ui-background;
-  border: 1px solid $grey-2;
-  padding: layout.$spacing-05;
-  margin: layout.$spacing-05 0 layout.$spacing-05;
-  width: 100%;
-}
-
-.tabs > :global(.cds--tab-content) {
-  padding: layout.$spacing-05 0 !important;
-}
-
-.header::after {
-  content: '';
-  display: block;
-  width: layout.$spacing-07;
-  padding-top: 0.188rem;
-  border-bottom: 0.375rem solid var(--brand-03);
-}
-
-.visitContainer {
-  background-color: $ui-background;
-  display: grid;
-  grid-template-columns: max-content auto;
-}
-
-.flexSections {
-  display: flex;
-}
-
-.verticalTabs {
-  margin: layout.$spacing-04 0;
-
-  &:global(.cds--tabs--scrollable .cds--tabs--scrollable__nav-item + .cds--tabs--scrollable__nav-item) {
-    margin-left: 0;
-  }
-}
-
-.verticalTabs > ul {
-  flex-direction: column !important;
-}
-
-.desktopTabs {
-  button {
-    height: layout.$spacing-07;
-  }
-}
-
-.tabletTabs {
-  button {
-    height: layout.$spacing-09;
-  }
-}
-
-.tab > button {
-  border-bottom: 0 !important;
-  border-left: 3px solid $ui-03 !important;
-}
-
-.tab > button,
-.tab > button:focus,
-.tab > button:active {
-  outline: 0 !important;
-  outline-offset: 0 !important;
-}
-
-.selectedTab > button {
-  border-left: 3px solid var(--brand-03) !important;
-  border-bottom: 0 !important;
-  font-weight: 600 !important;
-}
-
-.tabContent {
-  border-top: 1px solid $ui-03;
-  padding: layout.$spacing-05 0;
-  width: 70%;
-}
-
-.textColor {
-  color: $color-blue-60-2;
-}
-
-.text02 {
-  color: $text-02;
-}