O3- 2998 monthly calender in appointment form fixed (#1072)

---------

Co-authored-by: Mark Goodrich <mgoodrich@pih.org>

packages/esm-appointments-app/src/form/appointments-form.component.tsx

@@ -51,7 +51,10 @@ import {
 } from '../constants';
 import styles from './appointments-form.scss';
 import SelectedDateContext from '../hooks/selectedDateContext';
+
+import uniqBy from 'lodash/uniqBy';
 import { moduleName } from '../constants';
+
 
 const time12HourFormatRegexPattern = '^(1[0-2]|0?[1-9]):[0-5][0-9]$';
 function isValidTime(timeStr) {
@@ -136,6 +139,7 @@ const AppointmentsForm: React.FC<AppointmentsFormProps> = ({
   const defaultRecurringPatternType = recurringPattern?.type || 'DAY';
   const defaultRecurringPatternPeriod = recurringPattern?.period || 1;
   const defaultRecurringPatternDaysOfWeek = recurringPattern?.daysOfWeek || [];
+  const [pickedDate, setPickedDate] = useState<Date | null>(null); // Added state for pickedDate
 
   const [isSubmitting, setIsSubmitting] = useState(false);
 
@@ -355,6 +359,13 @@ const AppointmentsForm: React.FC<AppointmentsFormProps> = ({
       <InlineLoading className={styles.loader} description={`${t('loading', 'Loading')} ...`} role="progressbar" />
     );
 
+  // const updateLocations = uniqBy(
+  //   [...locations, { uuid: session.sessionLocation.uuid, display: session.sessionLocation.display }],
+  //   'uuid',
+  // );
+
+  const minAllowedDate = new Date();
+
   return (
     <Form onSubmit={handleSubmit(handleSaveAppointment, onError)}>
       <Stack gap={4}>
@@ -480,33 +491,31 @@ const AppointmentsForm: React.FC<AppointmentsFormProps> = ({
                     control={control}
                     render={({ field: { onChange, value, ref } }) => (
                       <ResponsiveWrapper>
-                        <DatePicker
-                          datePickerType="range"
-                          dateFormat={datePickerFormat}
-                          value={[value.startDate, value.recurringPatternEndDate]}
-                          ref={ref}
-                          onChange={([startDate, endDate]) => {
-                            onChange({
-                              startDate: new Date(startDate),
-                              recurringPatternEndDate: new Date(endDate),
-                              recurringPatternEndDateText: dayjs(new Date(endDate)).format(dateFormat),
-                              startDateText: dayjs(new Date(startDate)).format(dateFormat),
-                            });
-                          }}>
-                          <DatePickerInput
-                            id="startDatePickerInput"
-                            labelText={t('startDate', 'Start date')}
-                            style={{ width: '100%' }}
-                            value={watch('appointmentDateTime').startDateText}
-                          />
-                          <DatePickerInput
-                            id="endDatePickerInput"
-                            labelText={t('endDate', 'End date')}
-                            style={{ width: '100%' }}
-                            placeholder={datePickerPlaceHolder}
-                            value={watch('appointmentDateTime').recurringPatternEndDateText}
-                          />
-                        </DatePicker>
+                        <Controller
+                          name="appointmentDateTime"
+                          control={control}
+                          render={({ field: { onChange, value, ref } }) => (
+                            <DatePicker
+                              datePickerType="single"
+                              dateFormat={datePickerFormat}
+                              value={pickedDate || value.startDate}
+                              onChange={([date]) => {
+                                if (date) {
+                                  onChange({ ...value, startDate: date });
+                                }
+                              }}
+                              minDate={minAllowedDate} // Set the minimum allowed date
+                            >
+                              <DatePickerInput
+                                id="datePickerInput"
+                                labelText={t('date', 'Date')}
+                                style={{ width: '100%' }}
+                                placeholder={datePickerPlaceHolder}
+                                ref={ref}
+                              />
+                            </DatePicker>
+                          )}
+                        />
                       </ResponsiveWrapper>
                     )}
                   />

packages/esm-appointments-app/src/workload/monthly-view-workload/monthly-view.component.tsx

@@ -1,5 +1,5 @@
 import dayjs from 'dayjs';
-import React, { useContext } from 'react';
+import React, { useContext, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import DaysOfWeekCard from '../../calendar/monthly/days-of-week.component';
 import { monthDays } from '../../helpers';
@@ -12,39 +12,72 @@ interface MonthlyCalendarViewProps {
   dateToDisplay?: string;
   onDateClick?: (pickedDate: Date) => void;
 }
+
 const monthFormat = 'MMMM, YYYY';
 const MonthlyCalendarView: React.FC<MonthlyCalendarViewProps> = ({
   calendarWorkload,
   dateToDisplay = '',
   onDateClick,
 }) => {
   const { selectedDate } = useContext(SelectedDateContext);
+  const [currentMonth, setCurrentMonth] = useState(dayjs(dateToDisplay === '' ? selectedDate : dateToDisplay));
+  const [selectedDateState, setSelectedDateState] = useState<Date | null>(null); // Rename selectedDate to selectedDateState
+
   const daysInWeek = ['SUN', 'MON', 'TUE', 'WED', 'THUR', 'FRI', 'SAT'];
-  const monthViewDate = dateToDisplay === '' ? selectedDate : dateToDisplay;
+
   const handleClick = (date: string) => {
-    const parsedDate = new Date(date);
-    if (onDateClick) {
-      onDateClick(parsedDate);
+    const pickedDate = dayjs(date);
+    const today = dayjs();
+    if ((pickedDate.isSame(today, 'day') || pickedDate.isAfter(today, 'day')) && onDateClick) {
+      onDateClick(pickedDate.toDate());
     }
+    setSelectedDateState(pickedDate.toDate()); // Update selectedDate to selectedDateState
+    // Check if the selected date belongs to a different month
+    if (pickedDate.month() !== currentMonth.month()) {
+      setCurrentMonth(pickedDate);
+    }
+  };
+
+  const handlePrevMonth = () => {
+    setCurrentMonth(currentMonth.subtract(1, 'month'));
   };
+
+  const handleNextMonth = () => {
+    setCurrentMonth(currentMonth.add(1, 'month'));
+  };
+
   const { t } = useTranslation();
   const daysInWeeks = daysInWeek.map((day) => t(day));
+
   return (
     <div className={styles.calendarViewContainer}>
       <>
-        <div className={styles.container}></div>
-        <span className={styles.headerContainer}>{dayjs(monthViewDate).format(monthFormat)}</span>
+        <div className={styles.container}>
+          <button
+            style={{ backgroundColor: 'transparent', border: 'none', cursor: 'pointer', fontSize: '25px' }}
+            type="button"
+            onClick={handlePrevMonth}>
+            «
+          </button>
+          <span className={styles.headerContainer}>{currentMonth.format(monthFormat)}</span>
+          <button
+            style={{ backgroundColor: 'transparent', border: 'none', cursor: 'pointer', fontSize: '25px' }}
+            type="button"
+            onClick={handleNextMonth}>
+            »
+          </button>
+        </div>
         <div className={styles.workLoadCard}>
           {daysInWeeks?.map((day, i) => <DaysOfWeekCard key={`${day}-${i}`} dayOfWeek={day} />)}
         </div>
         <div className={styles.wrapper}>
           <div className={styles.monthlyCalendar}>
-            {monthDays(dayjs(monthViewDate)).map((dateTime, i) => (
+            {monthDays(currentMonth).map((dateTime, i) => (
               <div
-                onClick={() => handleClick(dayjs(dateTime).format('YYYY-MM-DD'))}
+                onClick={() => handleClick(dateTime.format('YYYY-MM-DD'))}
                 key={i}
                 className={`${styles.monthlyWorkloadCard} ${
-                  dayjs(dateTime).format('YYYY-MM-DD') === dayjs(monthViewDate).format('YYYY-MM-DD')
+                  dayjs(dateTime).format('YYYY-MM-DD') === dayjs(currentMonth).format('YYYY-MM-DD')
                     ? styles.selectedDate
                     : ''
                 }`}>
@@ -67,3 +100,4 @@ const MonthlyCalendarView: React.FC<MonthlyCalendarViewProps> = ({
 };
 
 export default MonthlyCalendarView;
+

packages/esm-appointments-app/src/workload/monthly-view-workload/monthly-workload.scss

@@ -97,7 +97,11 @@
     }
   }
 }
-
+.selectedDate {
+  background-color: #005D5D; 
+  height:100%;
+  width:100%;
+}
 .currentData {
   margin: 2px;
   padding-top: 2px;

yarn.lock

@@ -6751,9 +6751,9 @@ __metadata:
   linkType: hard
 
 "caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001400, caniuse-lite@npm:^1.0.30001426":
-  version: 1.0.30001551
-  resolution: "caniuse-lite@npm:1.0.30001551"
-  checksum: 10/3ab880797f2a47ce5e2db38700283219faacbddb4382a730883657b2155240aedda1931aac456bc957f61a41c99e15b42f452e5f68e62272def026fd3bf474a7
+  version: 1.0.30001612
+  resolution: "caniuse-lite@npm:1.0.30001612"
+  checksum: 10/8fb95102aade9147694541a9e576ec16d8d455f37e1456f497403af45f1ddd24465a62057d619d57c052e9634e090e5115e383ab066f8f9f9b87d14f738f81df
   languageName: node
   linkType: hard