@openmrs/esm-appointments-app 4.1.1-pre.996 → 4.2.0

package/src/appointment-forms/useInitialFormValues.tsx

@@ -0,0 +1,49 @@
+import { OpenmrsResource, useSession } from '@openmrs/esm-framework';
+import dayjs from 'dayjs';
+import { amPm } from '../helpers';
+import { MappedAppointment } from '../types';
+
+export interface PatientAppointment {
+  appointmentKind: string;
+  status: string;
+  serviceUuid: string;
+  startDateTime: string;
+  endDateTime: string;
+  providerUuid: string;
+  providers: Array<OpenmrsResource>;
+  comments: string;
+  locationUuid: string;
+  patientUuid: string;
+  appointmentNumber: string;
+  uuid?: string;
+  frequency: string;
+  visitDate: Date;
+  timeFormat: amPm;
+  isFullDay: boolean;
+  day: any;
+}
+
+export const useInitialAppointmentFormValue = (appointment: MappedAppointment, patientUuid: string) => {
+  const session = useSession();
+  const patientAppointment: PatientAppointment = {
+    appointmentKind: appointment?.appointmentKind ?? 'Scheduled',
+    status: appointment?.status ?? 'Scheduled',
+    serviceUuid: appointment?.serviceUuid ?? '',
+    startDateTime: dayjs(new Date()).format('hh:mm'),
+    endDateTime: dayjs(new Date()).format('hh:mm'),
+    providers: appointment?.providers ?? [],
+    providerUuid: appointment?.providers[0]?.uuid ?? session?.currentProvider?.uuid,
+    comments: appointment?.comments ?? '',
+    locationUuid: appointment?.location ? appointment.location['uuid'] : session?.sessionLocation?.uuid,
+    frequency: '',
+    uuid: appointment?.id ?? '',
+    appointmentNumber: appointment?.appointmentNumber ?? '',
+    patientUuid: appointment?.patientUuid ? appointment.patientUuid : patientUuid,
+    visitDate: appointment?.dateTime ? new Date(appointment.dateTime) : new Date(),
+    timeFormat: new Date().getHours() >= 12 ? 'PM' : 'AM',
+    isFullDay: true,
+    day: appointment?.dateTime,
+  };
+
+  return patientAppointment;
+};

package/src/appointment-forms/workload-helper.ts

@@ -1,11 +1,14 @@
 import dayjs from 'dayjs';
+import { useAppointmentDate } from '../helpers';
+import { useAppointmentSummary } from './appointment-forms.resource';
+interface AppointmentCount {
+  date: string;
+  count: number;
+}
 
-export const getWeeklyCalendarDistribution = (
-  startDate: Date,
-  appointmentCount: Array<{ date: string; count: number }>,
-) => {
+export const getMonthlyCalendarDistribution = (startDate: Date, appointmentCount: Array<AppointmentCount>) => {
   const distributionHashTable = new Map<string, number>([]);
-  for (let i = 0; i <= 7; i++) {
+  for (let i = 0; i <= 35; i++) {
     distributionHashTable.set(dayjs(startDate).add(i, 'day').format('YYYY-MM-DD'), 0);
   }
   appointmentCount.map(({ date, count }) => {
@@ -16,19 +19,10 @@ export const getWeeklyCalendarDistribution = (
 
   return Array.from(distributionHashTable).flatMap(([date, value]) => ({ date: date, count: value }));
 };
-export const getMonthlyCalendarDistribution = (
-  startDate: Date,
-  appointmentCount: Array<{ date: string; count: number }>,
-) => {
-  const distributionHashTable = new Map<string, number>([]);
-  for (let i = 0; i <= 35; i++) {
-    distributionHashTable.set(dayjs(startDate).add(i, 'day').format('YYYY-MM-DD'), 0);
-  }
-  appointmentCount.map(({ date, count }) => {
-    if (distributionHashTable.has(date)) {
-      distributionHashTable.set(date, count);
-    }
-  });
 
-  return Array.from(distributionHashTable).flatMap(([date, value]) => ({ date: date, count: value }));
+export const useCalendarDistribution = (servieUuid: string, distributionType: 'month' | 'week') => {
+  const appointmentStartDate = useAppointmentDate();
+  const appointmentSummary = useAppointmentSummary(new Date(appointmentStartDate), servieUuid);
+  const monthlyData = getMonthlyCalendarDistribution(new Date(appointmentStartDate), appointmentSummary) ?? [];
+  return distributionType === 'month' ? monthlyData : monthlyData.slice(0, 7);
 };

package/src/appointments/appointment-list.component.tsx

@@ -10,7 +10,7 @@ import ScheduledAppointments from '../appointments-tabs/schedule-appointment.com
 import CheckInAppointments from '../appointments-tabs/checkedinappointments.component';
 import { useAppointmentDate } from '../helpers';
 import dayjs from 'dayjs';
-import UnScheduledAppointments from '../appointments-tabs/unscheduled-appointments.component';
+import UnscheduledAppointments from '../appointments-tabs/unscheduled-appointments.component';
 import PendingAppointments from '../appointments-tabs/pending-appointments.component';
 import { useAppointments } from '../appointments-tabs/appointments-table.resource';
 
@@ -63,9 +63,9 @@ const AppointmentList: React.FC = () => {
         className={styles.tabs}>
         <TabList style={{ paddingLeft: '1rem' }} aria-label="Appointment tabs" contained>
           <Tab>{t('scheduled', 'Scheduled')}</Tab>
-          <Tab>{t('unScheduled', 'UnScheduled')}</Tab>
+          <Tab>{t('unscheduled', 'Unscheduled')}</Tab>
           <Tab>{t('completed', 'Completed')}</Tab>
-          <Tab disabled={!isToday}>{t('checkedIn', 'CheckedIn')}</Tab>
+          <Tab disabled={!isToday}>{t('checkedIn', 'Checked in')}</Tab>
           <Tab>{t('pending', 'Pending')}</Tab>
           <Button
             className={styles.calendarButton}
@@ -73,8 +73,8 @@ const AppointmentList: React.FC = () => {
             onClick={() => navigate({ to: `${spaBasePath}/calendar` })}
             renderIcon={(props) => <Calendar size={16} {...props} />}
             data-floating-menu-primary-focus
-            iconDescription={t('viewCalendar', 'View Calendar')}>
-            {t('viewCalendar', 'View Calendar')}
+            iconDescription={t('viewCalendar', 'View calendar')}>
+            {t('viewCalendar', 'View calendar')}
           </Button>
         </TabList>
         <TabPanels>
@@ -82,7 +82,7 @@ const AppointmentList: React.FC = () => {
             <ScheduledAppointments status={AppointmentTypes.SCHEDULED} />
           </TabPanel>
           <TabPanel style={{ padding: 0 }}>
-            <UnScheduledAppointments />
+            <UnscheduledAppointments />
           </TabPanel>
           <TabPanel style={{ padding: 0 }}>{<CompletedAppointments status={AppointmentTypes.COMPLETED} />}</TabPanel>
           {isToday && (

package/src/appointments/appointment-list.test.tsx

@@ -22,8 +22,8 @@ describe('AppointmentList', () => {
 
     const scheduledAppointmentsTab = screen.getByRole('tab', { name: /^scheduled$/i });
     const completedAppointmentsTab = screen.getByRole('tab', { name: /completed/i });
-    const unsheduledAppointment = screen.getByRole('tab', { name: /^unScheduled$/i });
-    const pendingAppointments = screen.getByRole('tab', { name: /^unScheduled$/i });
+    const unsheduledAppointment = screen.getByRole('tab', { name: /^unscheduled$/i });
+    const pendingAppointments = screen.getByRole('tab', { name: /^unscheduled$/i });
 
     expect(scheduledAppointmentsTab).toBeInTheDocument();
     expect(completedAppointmentsTab).toBeInTheDocument();

package/src/appointments-tabs/unscheduled-appointments.component.tsx

@@ -21,12 +21,12 @@ import { ConfigurableLink, formatDatetime, usePagination } from '@openmrs/esm-fr
 import { EmptyState } from '../empty-state/empty-state.component';
 import isEmpty from 'lodash-es/isEmpty';
 
-const UnScheduledAppointments: React.FC = () => {
+const UnscheduledAppointments: React.FC = () => {
   const { t } = useTranslation();
   const { isLoading: isVisitLoading, visits } = useVisits();
   const { appointments, isLoading } = useAppointments();
   const patientUuids = appointments?.map(({ patientUuid }) => patientUuid);
-  const filteredAppointment = useMemo(
+  const filteredAppointments = useMemo(
     () => (!isVisitLoading ? visits?.filter((visit) => !patientUuids.includes(visit.patient.uuid)) : []),
     [isVisitLoading, patientUuids, visits],
   );
@@ -49,7 +49,7 @@ const UnScheduledAppointments: React.FC = () => {
     },
   ];
 
-  const { results, currentPage, goTo } = usePagination(filteredAppointment, 10);
+  const { results, currentPage, goTo } = usePagination(filteredAppointments, 10);
 
   const rowData = results?.map((visit) => ({
     id: `${visit.uuid}`,
@@ -66,25 +66,30 @@ const UnScheduledAppointments: React.FC = () => {
   }));
 
   const pageSizes = useMemo(() => {
-    const numberOfPages = Math.ceil(filteredAppointment.length / 10);
+    const numberOfPages = Math.ceil(filteredAppointments.length / 10);
     return [...Array(numberOfPages).keys()].map((x) => {
       return (x + 1) * 10;
     });
-  }, [filteredAppointment]);
+  }, [filteredAppointments]);
 
   if (isLoading && isVisitLoading) {
     return <DataTableSkeleton />;
   }
 
-  if (isEmpty(filteredAppointment)) {
-    return <EmptyState headerTitle="UnScheduled Appointments" displayText="UnScheduled Appointments" />;
+  if (isEmpty(filteredAppointments)) {
+    return (
+      <EmptyState
+        headerTitle={t('unscheduledAppointments', 'Unscheduled appointments')}
+        displayText={t('unscheduledAppointments_lower', 'unscheduled appointments')}
+      />
+    );
   }
 
   return (
     <div>
       <DataTable rows={rowData} headers={headerData} isSortable>
         {({ rows, headers, getHeaderProps, getTableProps, onInputChange }) => (
-          <TableContainer title={`${t('unScheduledAppointments', 'UnScheduled appointments')} ${rowData.length}`}>
+          <TableContainer title={`${t('UnscheduledAppointments', 'Unscheduled appointments')} ${rowData.length}`}>
             <TableToolbar>
               <TableToolbarContent>
                 <TableToolbarSearch style={{ backgroundColor: '#f4f4f4' }} tabIndex={0} onChange={onInputChange} />
@@ -126,4 +131,4 @@ const UnScheduledAppointments: React.FC = () => {
   );
 };
 
-export default UnScheduledAppointments;
+export default UnscheduledAppointments;

package/src/config-schema.ts

@@ -58,20 +58,10 @@ export const configSchema = {
     _description: 'Configurable alternative URL for the Appointments UI. Eg, the Bahmni Appointments UI URL',
     _default: `${spaBasePath}`,
   },
-  appointmentComments: {
+  hiddenFormFields: {
     _type: Type.Array,
-    _description: 'Reason for Changes',
-    _default: [
-      'Forgot Appoinment',
-      'Lack of Transport',
-      'Travelled',
-      'Work/Schedule/Busy',
-      'Had enough Medicine',
-      'Taking Herbal Medication',
-      'Spiritual Healed',
-      'Recieved Refill in another facility',
-      'Other',
-    ],
+    _description: 'Array of form controls to be hidden on form load',
+    _default: [],
   },
 };
 
@@ -87,4 +77,5 @@ export interface ConfigObject {
   useFullViewPrivilege: boolean;
   fullViewPrivilege: string;
   appointmentComments: Array<string>;
+  hiddenFormFields: Array<string>;
 }

package/src/patient-search/patient-search.scss

@@ -9,9 +9,7 @@
 [data-extension-id='patient-search-bar'] {
   & > div {
     width: 100%;
-    & form {
-      margin: 0.0125rem;
-    }
+
     & input {
       background-color: $ui-02;
       border-bottom: none;

package/translations/en.json

@@ -37,6 +37,7 @@
   "chooseProvider": "Select Provider",
   "chooseQueue": "Select a queue",
   "chooseService": "Select service",
+  "comment": "Comment",
   "community": "Community",
   "complete": "Complete",
   "completed": "Completed",
@@ -47,17 +48,14 @@
   "date": "Date",
   "dateAndTimeOfVisit": "Date and time of visit",
   "dateTime": "Date & time",
-  "day": "Day",
   "defaulters": "Defaulters",
   "discard": "Discard",
-  "doubleBooking": "Appointment double booking",
-  "doublePatientBooking": "There exist an appointment on the specified service and appointment date",
   "downloadAppointmentList": "Download appointment list",
   "durationMins": "Duration min",
   "editAppointment": "Edit Appointment",
   "editAppointments": "Edit Appointment",
   "emergency": "Emergency",
-  "emptyStateText": "There are no {displayText.toLowerCase()} to display",
+  "emptyStateText": "There are no {{displayText}} to display",
   "encounters": "Encounters",
   "encounterType": "Encounter type",
   "endTime": "End Time",
@@ -66,7 +64,6 @@
   "exitAndChangeStatus": "Change status",
   "facility": "Facility",
   "filter": "Filter",
-  "frequency": "Frequency",
   "futureScheduledVisits": " {count, plural, one{{count} visit} other{{count} visits}} scheduled for dates in the future",
   "futureScheduledVisits_plural": "",
   "getAppointmentReminder": "Would you like to get a reminder about this appointment?",
@@ -130,8 +127,10 @@
   "time": "Time",
   "todaysAppointments": "Today's Appointments",
   "total": "Total",
-  "unScheduled": "UnScheduled",
-  "unScheduledAppointments": "UnScheduled appointments",
+  "typeInComments": "Type in appointment comment",
+  "unscheduled": "Unscheduled",
+  "unscheduledAppointments": "Unscheduled appointments",
+  "unscheduledAppointments_lower": "unscheduled appointments",
   "upcomming": "Upcoming",
   "view": "View",
   "viewCalendar": "View Calendar",