Added Yearly Calendar Screens for admin and user portals (PalisadoesF…

…oundation#1911) * Yearly Calender Screens * updated user screen * user-calender-view * locales files updated * fixed linting errors * added tests and changed font
AdityaRaimec22 · Apr 21, 2024 · 59ac8d0 · 59ac8d0
1 parent 678a6a9
commit 59ac8d0
Show file tree

Hide file tree

Showing 11 changed files with 829 additions and 37 deletions.
diff --git a/public/locales/en.json b/public/locales/en.json
@@ -949,7 +949,9 @@
     "startDate": "Start Date",
     "endDate": "End Date",
     "publicEvent": "Is Public",
-    "registerable": "Is Registerable"
+    "registerable": "Is Registerable",
+    "monthlyCalendarView": "Monthly Calendar",
+    "yearlyCalendarView": "Yearly Calender"
   },
   "userEventCard": {
     "location": "Location",

diff --git a/public/locales/fr.json b/public/locales/fr.json
@@ -946,7 +946,9 @@
     "startDate": "Date de début",
     "endDate": "Date de fin",
     "publicEvent": "Est public",
-    "registerable": "Est enregistrable"
+    "registerable": "Est enregistrable",
+    "monthlyCalendarView": "Calendrier mensuel",
+    "yearlyCalendarView": "Calendrier annuel"
   },
   "userEventCard": {
     "location": "Emplacement",

diff --git a/public/locales/hi.json b/public/locales/hi.json
@@ -951,7 +951,9 @@
     "startDate": "प्रारंभ तिथि",
     "endDate": "अंतिम तिथि",
     "publicEvent": "सार्वजनिक है",
-    "registerable": "पंजीकृत करने योग्य है"
+    "registerable": "पंजीकृत करने योग्य है",
+    "monthlyCalendarView": "मासिक कैलेंडर",
+    "yearlyCalendarView": "वार्षिक कैलेंडर"
   },
   "userEventCard": {
     "location": "जगह",

diff --git a/public/locales/sp.json b/public/locales/sp.json
@@ -948,7 +948,9 @@
     "startDate": "Fecha de inicio",
     "endDate": "Fecha de finalización",
     "publicEvent": "Es público",
-    "registerable": "Es registrable"
+    "registerable": "Es registrable",
+    "monthlyCalendarView": "Calendario mensual",
+    "yearlyCalendarView": "Calendario anual"
   },
   "userEventCard": {
     "location": "Ubicación",

diff --git a/public/locales/zh.json b/public/locales/zh.json
@@ -949,7 +949,9 @@
     "startDate": "开始日期",
     "endDate": "结束日期",
     "publicEvent": "公开",
-    "registerable": "可注册"
+    "registerable": "可注册",
+    "monthlyCalendarView": "月历",
+    "yearlyCalendarView": "年度日历"
   },
   "userEventCard": {
     "location": "地點",

diff --git a/src/components/EventCalendar/EventCalendar.test.tsx b/src/components/EventCalendar/EventCalendar.test.tsx
@@ -12,6 +12,7 @@ import {
 import i18nForTest from 'utils/i18nForTest';
 import { StaticMockLink } from 'utils/StaticMockLink';
 import { weekdays } from './constants';
+import { months } from './constants';
 import { BrowserRouter as Router } from 'react-router-dom';
 
 const eventData = [
@@ -92,6 +93,14 @@ const MOCKS = [
 
 const link = new StaticMockLink(MOCKS, true);
 
+async function wait(ms = 200): Promise<void> {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+}
+
 describe('Calendar', () => {
   it('renders weekdays', () => {
     render(<Calendar eventData={eventData} viewType={ViewType.MONTH} />);
@@ -154,6 +163,27 @@ describe('Calendar', () => {
       fireEvent.click(prevButton);
     }
   });
+  it('Should show prev and next year on clicking < & > buttons when in year view', async () => {
+    //testing previous month button
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <I18nextProvider i18n={i18nForTest}>
+          <Calendar eventData={eventData} viewType={ViewType.YEAR} />
+        </I18nextProvider>
+      </MockedProvider>,
+    );
+    await wait();
+    const prevButtons = screen.getAllByTestId('prevYear');
+    prevButtons.forEach((button) => {
+      fireEvent.click(button);
+    });
+    await wait();
+    //testing next year button
+    const nextButton = screen.getAllByTestId('prevYear');
+    nextButton.forEach((button) => {
+      fireEvent.click(button);
+    });
+  });
   it('Should show prev and next date on clicking < & > buttons in the day view', async () => {
     render(
       <Router>
@@ -370,4 +400,15 @@ describe('Calendar', () => {
       window.dispatchEvent(new Event('resize'));
     });
   });
+  it('renders year view', async () => {
+    render(<Calendar eventData={eventData} viewType={ViewType.YEAR} />);
+
+    await wait();
+    months.forEach((month) => {
+      const elements = screen.getAllByText(month);
+      elements.forEach((element) => {
+        expect(element).toBeInTheDocument();
+      });
+    });
+  });
 });
diff --git a/src/components/EventCalendar/EventCalendar.tsx b/src/components/EventCalendar/EventCalendar.tsx
@@ -9,6 +9,7 @@ import { ViewType } from 'screens/OrganizationEvents/OrganizationEvents';
 import HolidayCard from '../HolidayCards/HolidayCard';
 import { holidays, hours, months, weekdays } from './constants';
 import type { InterfaceRecurrenceRule } from 'utils/recurrenceUtils';
+import YearlyEventCalender from './YearlyEventCalender';
 
 interface InterfaceEventListCardProps {
   userRole?: string;
@@ -563,41 +564,47 @@ const Calendar: React.FC<InterfaceCalendarProps> = ({
 
   return (
     <div className={styles.calendar}>
-      <div className={styles.calendar__header}>
-        <Button
-          variant="outlined"
-          className={styles.button}
-          onClick={viewType == ViewType.DAY ? handlePrevDate : handlePrevMonth}
-          data-testid="prevmonthordate"
-        >
-          <ChevronLeft />
-        </Button>
+      {viewType != ViewType.YEAR && (
+        <div className={styles.calendar__header}>
+          <Button
+            variant="outlined"
+            className={styles.button}
+            onClick={
+              viewType == ViewType.DAY ? handlePrevDate : handlePrevMonth
+            }
+            data-testid="prevmonthordate"
+          >
+            <ChevronLeft />
+          </Button>
 
-        <div
-          className={styles.calendar__header_month}
-          data-testid="current-date"
-        >
-          {viewType == ViewType.DAY ? `${currentDate}` : ``} {currentYear}{' '}
-          <div>{months[currentMonth]}</div>
-        </div>
-        <Button
-          variant="outlined"
-          className={styles.button}
-          onClick={viewType == ViewType.DAY ? handleNextDate : handleNextMonth}
-          data-testid="nextmonthordate"
-        >
-          <ChevronRight />
-        </Button>
-        <div>
+          <div
+            className={styles.calendar__header_month}
+            data-testid="current-date"
+          >
+            {viewType == ViewType.DAY ? `${currentDate}` : ``} {currentYear}{' '}
+            <div>{months[currentMonth]}</div>
+          </div>
           <Button
-            className={styles.btn__today}
-            onClick={handleTodayButton}
-            data-testid="today"
+            variant="outlined"
+            className={styles.button}
+            onClick={
+              viewType == ViewType.DAY ? handleNextDate : handleNextMonth
+            }
+            data-testid="nextmonthordate"
           >
-            Today
+            <ChevronRight />
           </Button>
+          <div>
+            <Button
+              className={styles.btn__today}
+              onClick={handleTodayButton}
+              data-testid="today"
+            >
+              Today
+            </Button>
+          </div>
         </div>
-      </div>
+      )}
       <div className={`${styles.calendar__scroll} customScroll`}>
         {viewType == ViewType.MONTH ? (
           <div>
@@ -611,8 +618,21 @@ const Calendar: React.FC<InterfaceCalendarProps> = ({
             <div className={styles.calendar__days}>{renderDays()}</div>
           </div>
         ) : (
-          /*istanbul ignore next*/
-          <div className={styles.clendar__hours}>{renderHours()}</div>
+          // <YearlyEventCalender eventData={eventData} />
+          <div>
+            {viewType == ViewType.YEAR ? (
+              <YearlyEventCalender eventData={eventData} />
+            ) : (
+              <div className={styles.calendar__hours}>{renderHours()}</div>
+            )}
+          </div>
+        )}
+      </div>
+      <div>
+        {viewType == ViewType.YEAR ? (
+          <YearlyEventCalender eventData={eventData} />
+        ) : (
+          <div className={styles.calendar__hours}>{renderHours()}</div>
         )}
       </div>
     </div>

diff --git a/src/components/EventCalendar/EventHeader.tsx b/src/components/EventCalendar/EventHeader.tsx
@@ -65,6 +65,12 @@ function eventHeader({
                 <Dropdown.Item eventKey={ViewType.DAY} data-testid="selectDay">
                   {ViewType.DAY}
                 </Dropdown.Item>
+                <Dropdown.Item
+                  eventKey={ViewType.YEAR}
+                  data-testid="selectYear"
+                >
+                  {ViewType.YEAR}
+                </Dropdown.Item>
               </Dropdown.Menu>
             </Dropdown>
           </div>