Merge pull request #100 from suvarnakale/release-1.0.0

Issue #PS-1600 feat: API integration to show the list of events schedule against cohort
tekdi · Aug 8, 2024 · 09ab206 · 09ab206
2 parents dc704ab + 7d93d32
commit 09ab206
Show file tree

Hide file tree

Showing 8 changed files with 297 additions and 138 deletions.
diff --git a/app.config.ts b/app.config.ts
@@ -4,6 +4,7 @@ export const lowLearnerAttendanceLimit: number = 32;
 export const avgLearnerAttendanceLimit: number = 66;
 export const dashboardDaysLimit: number = 30;
 export const modifyAttendanceLimit: number = 6;
+export const eventDaysLimit: number = 7;
 export const toastAutoHideDuration: number = 5000; // 5 seconds
 export const tenantId: string = 'ef99949b-7f3a-4a5f-806a-e67e683e38f3';
 

diff --git a/public/locales/en/common.json b/public/locales/en/common.json
@@ -105,7 +105,7 @@
  "USER_CREDENTIAL_SEND_SUCCESSFULLY": "User Credentials Sent Successfully!",
  "CENTER_SESSIONS": "Center Sessions",
  "SCHEDULE_NEW": "Schedule New",
- "UPCOMING_EXTRA_SESSION": "Upcoming Extra Sessions",
+ "UPCOMING_EXTRA_SESSION": "Upcoming Extra Sessions (Next {{days}} days)",
  "NO_SESSIONS_SCHEDULED": "No sessions scheduled",
  "TO_BE_TAUGHT": "What is going to be taught:",
  "SELECT_TOPIC": "Select Topic, Sub-topic",

diff --git a/src/components/SessionCard.tsx b/src/components/SessionCard.tsx
@@ -5,13 +5,20 @@ import CenterSessionModal from './CenterSessionModal';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import EditOutlined from '@mui/icons-material/EditOutlined';
 import PlannedSession from './PlannedSession';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useTheme } from '@mui/material/styles';
+import { convertUTCToIST } from '@/utils/Helper';
+import { useTranslation } from 'next-i18next';
+import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
 
 const SessionsCard: React.FC<SessionsCardProps> = ({ data, children }) => {
  const theme = useTheme<any>();
+ const { t } = useTranslation();
  const [open, setOpen] = React.useState(false);
  const [snackbarOpen, setSnackbarOpen] = React.useState(false);
+ const [startTime, setStartTime] = React.useState('');
+ const [endTime, setEndTime] = React.useState('');
+ const [startDate, setStartDate] = React.useState('');
 
  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);
@@ -30,6 +37,21 @@ const SessionsCard: React.FC<SessionsCardProps> = ({ data, children }) => {
  }
  };
 
+ useEffect(() => {
+ const startDateTime = convertUTCToIST(data?.startDateTime);
+ const startDate = startDateTime.date;
+ const startTime = startDateTime.time;
+ setStartTime(startTime);
+ setStartDate(startDate);
+
+ const endDateTime = convertUTCToIST(data?.endDateTime);
+ const endDate = endDateTime.date;
+ const endTime = endDateTime.time;
+ setEndTime(endTime);
+
+ console.log(startDate, startTime, endDate, endTime);
+ }, [data]);
+
  return (
  <Box
  sx={{
@@ -52,14 +74,26 @@ const SessionsCard: React.FC<SessionsCardProps> = ({ data, children }) => {
  textAlign={'left'}
  fontSize={'16px'}
  >
- {data?.subject}
+ {data?.metadata?.framework?.subject}
  </Typography>
 
- <Typography fontWeight={'400'} textAlign={'left'} fontSize={'14px'}>
- {data?.time}
+ <Typography
+ fontWeight={'400'}
+ textAlign={'left'}
+ fontSize={'14px'}
+ display={'flex'}
+ alignItems={'center'}
+ gap={'4px'}
+ >
+ {data?.isRecurring === false && (
+ <>
+ <CalendarMonthIcon sx={{ fontSize: '18px' }} /> {startDate},{' '}
+ </>
+ )}
+ {startTime} - {endTime}
  </Typography>
  <Typography fontWeight={'400'} textAlign={'left'} fontSize={'14px'}>
- {data?.teacherName}
+ {data?.metadata?.framework?.createdBy}
  </Typography>
  </Box>
  <EditOutlined onClick={handleOpen} sx={{ cursor: 'pointer' }} />
@@ -85,7 +119,7 @@ const SessionsCard: React.FC<SessionsCardProps> = ({ data, children }) => {
  cursor: 'pointer',
  }}
  >
- {data?.url}
+ {data?.meetingDetails?.url}
  </Box>
  <ContentCopyIcon
  sx={{

diff --git a/src/components/WeekCalender.tsx b/src/components/WeekCalender.tsx
@@ -1,22 +1,16 @@
-import {
- addDays,
- format,
- getWeek,
- isSameDay,
- subDays
-} from 'date-fns';
+import { addDays, format, getWeek, isSameDay, subDays } from 'date-fns';
 import { CircularProgressbar, buildStyles } from 'react-circular-progressbar';
-
 import { Box } from '@mui/material';
 import { useEffect, useRef, useState } from 'react';
-import { dashboardDaysLimit } from '../../app.config';
+import { dashboardDaysLimit, eventDaysLimit } from '../../app.config';
 import useDeterminePathColor from '../hooks/useDeterminePathColor';
 
 const Calendar: React.FC<any> = ({
  showDetailsHandle,
  data,
  disableDays,
  classId,
+ showFromToday,
 }) => {
  const [currentMonth, setCurrentMonth] = useState(new Date());
  const [currentWeek, setCurrentWeek] = useState(getWeek(currentMonth));
@@ -51,12 +45,13 @@ const Calendar: React.FC<any> = ({
  const renderDays = () => {
  const dateFormat = 'EEEEE';
  const days = [];
- // const startDate = startOfWeek(currentMonth, { weekStartsOn: 1 });
  const today = new Date();
- const startDate = subDays(today, dashboardDaysLimit - 1);
- const endDate = subDays(today, 0);
+ const daysLimit = showFromToday ? eventDaysLimit : dashboardDaysLimit;
+ const startDate = showFromToday
+ ? subDays(today, 0)
+ : subDays(today, dashboardDaysLimit - 1);
 
- for (let i = 0; i < dashboardDaysLimit; i++) {
+ for (let i = 0; i < daysLimit; i++) {
  const day = addDays(startDate, i);
  const isToday = isSameDay(day, new Date());
 
@@ -71,100 +66,107 @@ const Calendar: React.FC<any> = ({
  );
  }
 
- return <div className="days row">{days}</div>;
+ return (
+ <div
+ className="days row"
+ style={{ width: showFromToday ? '90vw' : '100%' }}
+ >
+ {days}
+ </div>
+ );
  };
 
- const renderCells = () => {
- const today = new Date();
- const endDate = subDays(today, 0);
- const startDate = subDays(endDate, dashboardDaysLimit - 1);
+ const renderCell = (day: Date, i: number) => {
  const dateFormat = 'd';
- const rows = [];
- let days = [];
- let day = startDate;
- let formattedDate = '';
+ const formattedDate = format(day, dateFormat);
+ let percentage = 0;
+ let pathColor;
  let showCircularProgress = false;
 
- while (day <= endDate) {
- for (let i = 0; i < dashboardDaysLimit; i++) {
- formattedDate = format(day, dateFormat);
- const cloneDay = day;
- let percentage = 0;
- let pathColor;
-
- if (data !== null) {
- const dayData = data?.[format(cloneDay, 'yyyy-MM-dd')] || {};
- const presentPercentage = parseFloat(dayData.present_percentage) || 0;
- percentage = presentPercentage;
- pathColor = determinePathColor(presentPercentage);
-
- const dayDataValuesExist = Object.values(dayData).some(
- (value) => value !== null && value !== undefined && value !== ''
- );
- if (dayDataValuesExist) {
- showCircularProgress = true;
- } else {
- showCircularProgress = false;
- }
- }
+ if (data !== null) {
+ const dayData = data?.[format(day, 'yyyy-MM-dd')] || {};
+ const presentPercentage = parseFloat(dayData.present_percentage) || 0;
+ percentage = presentPercentage;
+ pathColor = determinePathColor(presentPercentage);
 
- days.push(
+ const dayDataValuesExist = Object.values(dayData).some(
+ (value) => value !== null && value !== undefined && value !== ''
+ );
+ showCircularProgress = dayDataValuesExist;
+ }
+
+ return (
+ <Box
+ key={i}
+ display={'flex'}
+ border={'1px solid red'}
+ width={'14%'}
+ height={'20%'}
+ overflow={'auto'}
+ className={`col cell ${
+ isSameDay(day, new Date()) && color
+ ? 'WeekToday'
+ : isSameDay(day, selectedDate)
+ ? 'selected'
+ : ''
+ }`}
+ onClick={() => {
+ if (!disableDays) {
+ const dayStr = format(day, 'ccc dd MMM yy');
+ onDateClickHandle(day, dayStr);
+ }
+ }}
+ >
+ <div className="circularProgress">
+ <div key={day + ''}>
+ <span className="number">{formattedDate}</span>
+ </div>
  <Box
- key={i}
+ width={'100%'}
  display={'flex'}
- border={'1px solid red'}
- width={'14%'}
- height={'20%'}
- overflow={'auto'}
- className={`col cell ${
- isSameDay(day, new Date()) && color
- ? 'WeekToday'
- : isSameDay(day, selectedDate)
- ? 'selected '
- : ''
- }`}
- onClick={() => {
- if (!disableDays) {
- const dayStr = format(cloneDay, 'ccc dd MMM yy');
- onDateClickHandle(cloneDay, dayStr);
- } else {
- null;
- }
- }}
+ alignItems={'center'}
+ justifyContent={'center'}
  >
- <div className="circularProgress">
- <div key={day + ''}>
- <span className="number">{formattedDate}</span>
- </div>
+ {showCircularProgress && (
  <Box
- width={'100%'}
- display={'flex'}
- alignItems={'center'}
- justifyContent={'center'}
+ width={'25px'}
+ height={'2rem'}
+ marginTop={'0.25rem'}
+ padding={0}
  >
- {showCircularProgress && (
- <Box
- width={'25px'}
- height={'2rem'}
- marginTop={'0.25rem'}
- padding={0}
- >
- <CircularProgressbar
- value={percentage}
- styles={buildStyles({
- textColor: pathColor,
- pathColor: pathColor,
- trailColor: '#E6E6E6',
- strokeLinecap: 'round',
- })}
- strokeWidth={20}
- />
- </Box>
- )}{' '}
+ <CircularProgressbar
+ value={percentage}
+ styles={buildStyles({
+ textColor: pathColor,
+ pathColor: pathColor,
+ trailColor: '#E6E6E6',
+ strokeLinecap: 'round',
+ })}
+ strokeWidth={20}
+ />
  </Box>
- </div>
+ )}
  </Box>
- );
+ </div>
+ </Box>
+ );
+ };
+
+ const renderCells = () => {
+ const today = new Date();
+ const endDate = subDays(today, 0);
+ const startDate = showFromToday
+ ? new Date(today.setDate(today.getDate() + 7))
+ : subDays(endDate, dashboardDaysLimit - 1);
+
+ const rows = [];
+ let day = startDate;
+ let endDay = endDate;
+ while (day <= endDate) {
+ const days = [];
+
+ for (let i = 0; i < dashboardDaysLimit; i++) {
+ days.push(renderCell(day, i));
  day = addDays(day, 1);
  }
 
@@ -173,9 +175,28 @@ const Calendar: React.FC<any> = ({
  {days}
  </div>
  );
- days = [];
  }
- return <div className="body">{rows}</div>;
+
+ if (showFromToday && endDay <= startDate) {
+ const days = [];
+
+ for (let i = 0; i < eventDaysLimit; i++) {
+ days.push(renderCell(endDay, i));
+ endDay = addDays(endDay, 1);
+ }
+
+ rows.push(
+ <div className="row" key={endDay + ''}>
+ {days}
+ </div>
+ );
+ }
+
+ return (
+ <div className="body" style={{ width: showFromToday ? '90vw' : '100%' }}>
+ {rows}
+ </div>
+ );
  };
 
  return (
@@ -184,7 +205,8 @@ const Calendar: React.FC<any> = ({
  ref={scrollContainerRef}
  style={{
  opacity: disableDays ? 0.5 : 1,
- overflow: classId === 'all' ? 'hidden' : 'auto',
+ overflow:
+ classId === 'all' ? 'hidden' : showFromToday ? 'clip' : 'auto',
  }}
  >
  <Box className="calender_body_width">