From ed900a386edf92d5bb795b2e9a2db8018e51bac5 Mon Sep 17 00:00:00 2001 From: suvarnakale Date: Mon, 26 Aug 2024 14:06:35 +0530 Subject: [PATCH 1/2] Issue #PS-1625 feat: edit events data mapping for planned/extra/online and offline events --- src/components/PlannedSession.tsx | 122 ++++++++++++++++++++---------- src/components/SessionCard.tsx | 1 + src/utils/Interfaces.ts | 1 + 3 files changed, 84 insertions(+), 40 deletions(-) diff --git a/src/components/PlannedSession.tsx b/src/components/PlannedSession.tsx index ffeb98e3..6a9ae010 100644 --- a/src/components/PlannedSession.tsx +++ b/src/components/PlannedSession.tsx @@ -50,14 +50,17 @@ import SessionMode from './SessionMode'; import { showToastMessage } from './Toastify'; import WeekDays from './WeekDays'; import ConfirmationModal from './ConfirmationModal'; +import timezone from 'dayjs/plugin/timezone'; +dayjs.extend(utc); +dayjs.extend(timezone); type mode = (typeof sessionMode)[keyof typeof sessionMode]; -type type = (typeof sessionType)[keyof typeof sessionType]; +// type type = (typeof sessionType)[keyof typeof sessionType]; interface Session { id?: number | string; sessionMode?: string; - sessionType?: string; + // sessionType?: string; selectedWeekDays?: string[]; DaysOfWeek?: number[]; startDatetime?: string; @@ -84,17 +87,21 @@ const PlannedSession: React.FC = ({ onCloseModal, editSession, onEventDeleted, + eventData, }) => { const [mode, setMode] = useState(sessionMode.OFFLINE); - const [eventType, setEventType] = useState(sessionType.JUST); + // const [eventType, setEventType] = useState(sessionType.JUST); const [link, setLink] = useState(''); const [linkError, setLinkError] = useState(''); const [selectedWeekDays, setSelectedWeekDays] = useState(); + const [editEventData, setEditEventData] = useState(eventData); const [modalOpen, setModalOpen] = React.useState(false); const [selectedSubject, setSelectedSubject] = useState(); const [selectedBlockId, setSelectedBlockId] = useState(0); const [editSelection, setEditSelection] = React.useState('EDIT_SESSION'); const [subjects, setSubjects] = useState(); + const [shortDescription, setShortDescription] = useState(); + const [meetingPasscode, setMeetingPasscode] = useState(); dayjs.extend(utc); const [startDate, setStartDate] = useState(dayjs()); const [endDate, setEndDate] = useState(dayjs()); @@ -106,7 +113,7 @@ const PlannedSession: React.FC = ({ selectedWeekDays: [], DaysOfWeek: [], sessionMode: mode, - sessionType: eventType, + // sessionType: eventType, startDatetime: '', endDatetime: '', endDateValue: '', @@ -122,6 +129,40 @@ const PlannedSession: React.FC = ({ sessionEndTime: endTime, }, ]); + + useEffect(() => { + console.log(eventData); + console.log(eventData?.metadata?.framework?.subject); + + if (eventData) { + const mode = + eventData?.meetingDetails?.url !== undefined + ? sessionMode.ONLINE + : sessionMode.OFFLINE; + setMode(mode); + let sub = eventData?.metadata?.framework?.subject; + setSelectedSubject(sub); + let sessionTitle = eventData?.shortDescription; + setShortDescription(sessionTitle); + const url = eventData?.meetingDetails?.url; + setLink(url); + const passcode = eventData?.meetingDetails?.password; + setMeetingPasscode(passcode); + + const startDateTime = eventData?.startDateTime; + const endDateTime = eventData?.endDateTime; + + const localStartDateTime = dayjs.utc(startDateTime).tz('Asia/Kolkata'); + const localEndDateTime = dayjs.utc(endDateTime).tz('Asia/Kolkata'); + // const localEndDateValue = dayjs.utc(endDateValue).tz('Asia/Kolkata'); + + setStartDate(localStartDateTime.startOf('day')); + setStartTime(localStartDateTime); + setEndDate(localEndDateTime.startOf('day')); + setEndTime(localEndDateTime); + } + }, [eventData]); + const handleOpenModel = () => { setModalOpen(true); }; @@ -173,16 +214,16 @@ const PlannedSession: React.FC = ({ setSessionBlocks(updatedSessionBlocks); }; - const handleSessionTypeChange = ( - event: ChangeEvent, - id: string | number | undefined - ) => { - setEventType(event.target.value as type); - const updatedSessionBlocks = sessionBlocks.map((block) => - block.id === id ? { ...block, sessionType: event.target.value } : block - ); - setSessionBlocks(updatedSessionBlocks); - }; + // const handleSessionTypeChange = ( + // event: ChangeEvent, + // id: string | number | undefined + // ) => { + // setEventType(event.target.value as type); + // const updatedSessionBlocks = sessionBlocks.map((block) => + // block.id === id ? { ...block, sessionType: event.target.value } : block + // ); + // setSessionBlocks(updatedSessionBlocks); + // }; useEffect(() => { const getAddFacilitatorFormData = async () => { @@ -312,7 +353,7 @@ const PlannedSession: React.FC = ({ const startDatetime = convertToUTC(combinedStartDateTime); const endDatetime = convertToUTC(combinedEndDateTime); const endDateValue = - eventType && eventType === t('CENTER_SESSION.JUST_ONCE') + clickedBox === 'EXTRA_SESSION' ? endDatetime : convertToUTC(combinedEndDateValue); @@ -346,7 +387,7 @@ const PlannedSession: React.FC = ({ const startDatetime = convertToUTC(combinedStartDateTime); const endDatetime = convertToUTC(combinedEndDateTime); const endDateValue = - eventType && eventType === t('CENTER_SESSION.JUST_ONCE') + clickedBox === 'EXTRA_SESSION' ? endDatetime : convertToUTC(combinedEndDateValue); @@ -418,7 +459,7 @@ const PlannedSession: React.FC = ({ id: string | number | undefined ) => { const value = event?.target?.value; - + setMeetingPasscode(value); setSessionBlocks( sessionBlocks.map((block) => block.id === id @@ -460,6 +501,7 @@ const PlannedSession: React.FC = ({ id: string | number | undefined ) => { const value = event?.target?.value; + setShortDescription(value); setSessionBlocks( sessionBlocks.map((block) => block.id === id @@ -482,7 +524,7 @@ const PlannedSession: React.FC = ({ selectedWeekDays: [], DaysOfWeek: [], sessionMode: '', - sessionType: '', + // sessionType: '', startDatetime: '', endDatetime: '', subject: '', @@ -564,7 +606,7 @@ const PlannedSession: React.FC = ({ const apiBodies: CreateEvent[] = sessionBlocks.map((block) => { const baseBody: CreateEvent = { title, - shortDescription: '', + shortDescription: block?.subjectTitle || shortDescription, description: '', eventType: block?.sessionMode || mode, isRestricted: true, @@ -708,7 +750,7 @@ const PlannedSession: React.FC = ({ row aria-labelledby="session-mode-label" name="session-mode-group" - value={mode} + value={mode || editSelection} onChange={handleEditSession} > = ({ handleSessionModeChange(e, block?.id) } @@ -785,7 +827,7 @@ const PlannedSession: React.FC = ({ }} /> - {clickedBox === 'PLANNED_SESSION' && ( + {(clickedBox === 'PLANNED_SESSION' || editSession) && ( <> @@ -803,7 +845,11 @@ const PlannedSession: React.FC = ({ onChange={(event: any) => handleSubjectChange(block?.id, event) } - value={selectedSubject} + value={ + selectedSubject + ? selectedSubject + : t('CENTER_SESSION.SUBJECT') + } > {subjects?.map((subject: string) => ( @@ -822,7 +868,7 @@ const PlannedSession: React.FC = ({ id="outlined-basic" label={t('CENTER_SESSION.SESSION_TITLE_OPTIONAL')} variant="outlined" - value={block?.subjectTitle} + value={block?.subjectTitle || shortDescription} onChange={(e) => { handleSubjectTitleChange(e, block?.id); }} @@ -831,7 +877,8 @@ const PlannedSession: React.FC = ({ )} - {block?.sessionMode === sessionMode.ONLINE && ( + {(block?.sessionMode === sessionMode.ONLINE || + mode === sessionMode.ONLINE) && ( <> {/* = ({ label={t('CENTER_SESSION.MEETING_PASSCODE')} variant="outlined" onChange={(e: any) => handlePasscodeChange(block?.id, e)} + value={ + meetingPasscode + ? meetingPasscode + : t('CENTER_SESSION.MEETING_PASSCODE') + } /> @@ -926,22 +978,10 @@ const PlannedSession: React.FC = ({ )} - {clickedBox === 'EXTRA_SESSION' && ( + {(clickedBox === 'EXTRA_SESSION' || + (editSession && editSelection === 'EDIT_SESSION')) && ( <> - {/* - handleSessionTypeChange(e, block?.id) - } - sessions={{ - tile: t('CENTER_SESSION.TYPE_OF_SESSION'), - mode1: t('CENTER_SESSION.REPEATING'), - mode2: t('CENTER_SESSION.JUST_ONCE'), - }} - /> */} - {/* {block?.sessionType === sessionType.JUST && ( - )} */} @@ -991,7 +1031,9 @@ const PlannedSession: React.FC = ({ )} - {clickedBox !== 'EXTRA_SESSION' && ( + + {(clickedBox === 'PLANNED_SESSION' || + (editSession && editSelection === 'FOLLOWING_SESSION')) && ( diff --git a/src/components/SessionCard.tsx b/src/components/SessionCard.tsx index 9918609c..0468298f 100644 --- a/src/components/SessionCard.tsx +++ b/src/components/SessionCard.tsx @@ -178,6 +178,7 @@ const SessionsCard: React.FC = ({ handleEditSelection={handleEditSelection} onEventDeleted={onEventDeleted} eventDeleted={eventDeleted} + eventData={data} /> diff --git a/src/utils/Interfaces.ts b/src/utils/Interfaces.ts index 222aba39..df2ce199 100644 --- a/src/utils/Interfaces.ts +++ b/src/utils/Interfaces.ts @@ -156,6 +156,7 @@ export interface PlannedModalProps { handleEditSelection?: (selection: string) => void; onEventDeleted?: () => void; editSession?: any; + eventData?: any; } export interface ScheduleModalProps { From a249f1e57fb66d2e8fb78c93f05f7467910e4ac6 Mon Sep 17 00:00:00 2001 From: suvarnakale Date: Mon, 26 Aug 2024 15:27:14 +0530 Subject: [PATCH 2/2] Issue #PS-1625 chore: comments resolved --- app.config.ts | 1 + src/components/PlannedSession.tsx | 5 +++-- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/app.config.ts b/app.config.ts index b745c878..aaeaff03 100644 --- a/app.config.ts +++ b/app.config.ts @@ -8,6 +8,7 @@ export const eventDaysLimit: number = 7; export const toastAutoHideDuration: number = 5000; // 5 seconds export const tenantId: string = 'ef99949b-7f3a-4a5f-806a-e67e683e38f3'; export const idealTimeForSession: string = '120'; +export const timeZone: string = 'Asia/Kolkata'; export const dropoutReasons = [ { label: 'UNABLE_TO_COPE_WITH_STUDIES', diff --git a/src/components/PlannedSession.tsx b/src/components/PlannedSession.tsx index 6a9ae010..42136668 100644 --- a/src/components/PlannedSession.tsx +++ b/src/components/PlannedSession.tsx @@ -45,6 +45,7 @@ import { DaysOfWeek, eventDaysLimit, idealTimeForSession, + timeZone, } from '../../app.config'; import SessionMode from './SessionMode'; import { showToastMessage } from './Toastify'; @@ -152,8 +153,8 @@ const PlannedSession: React.FC = ({ const startDateTime = eventData?.startDateTime; const endDateTime = eventData?.endDateTime; - const localStartDateTime = dayjs.utc(startDateTime).tz('Asia/Kolkata'); - const localEndDateTime = dayjs.utc(endDateTime).tz('Asia/Kolkata'); + const localStartDateTime = dayjs.utc(startDateTime).tz(timeZone); + const localEndDateTime = dayjs.utc(endDateTime).tz(timeZone); // const localEndDateValue = dayjs.utc(endDateValue).tz('Asia/Kolkata'); setStartDate(localStartDateTime.startOf('day'));