diff --git a/src/components/PlannedSession.tsx b/src/components/PlannedSession.tsx index b55d4f24..e19a1a7d 100644 --- a/src/components/PlannedSession.tsx +++ b/src/components/PlannedSession.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { getFormRead } from '@/services/CreateUserService'; -import { createEvent } from '@/services/EventService'; +import { createEvent, editEvent } from '@/services/EventService'; import { getMyCohortMemberList } from '@/services/MyClassDetailsService'; import { CreateEvent, PlannedModalProps } from '@/utils/Interfaces'; import { @@ -10,7 +10,7 @@ import { Role, Status, sessionMode, - sessionType + sessionType, } from '@/utils/app.constant'; import AddIcon from '@mui/icons-material/Add'; import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline'; @@ -83,8 +83,7 @@ const PlannedSession: React.FC = ({ cohortId, onCloseModal, editSession, - handleEditSelection, - editSelection + onEventDeleted, }) => { const [mode, setMode] = useState(sessionMode.OFFLINE); const [eventType, setEventType] = useState(sessionType.REPEATING); @@ -94,7 +93,7 @@ const PlannedSession: React.FC = ({ 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(); dayjs.extend(utc); const [startDate, setStartDate] = useState(dayjs()); @@ -126,10 +125,14 @@ const PlannedSession: React.FC = ({ const handleOpenModel = () => { setModalOpen(true); }; - const handleCloseModal =() => { + const handleCloseModal = () => { setModalOpen(false); - } + }; + const handleEditSelection = (selection: string, eventData: any) => { + setEditSelection(selection); + console.log(eventData); + }; useEffect(() => { const initialStartDateTime = combineDateAndTime(startDate, startTime); @@ -144,15 +147,15 @@ const PlannedSession: React.FC = ({ blocks.map((block) => block.id === selectedBlockId ? { - ...block, - startDatetime: startDatetime || '', - endDatetime: endDatetime || '', - endDateValue: endDateValue || '', - sessionStartDate: startDate, - sessionEndDate: endDate, - sessionStartTime: startTime, - sessionEndTime: endTime, - } + ...block, + startDatetime: startDatetime || '', + endDatetime: endDatetime || '', + endDateValue: endDateValue || '', + sessionStartDate: startDate, + sessionEndDate: endDate, + sessionStartTime: startTime, + sessionEndTime: endTime, + } : block ) ); @@ -241,9 +244,9 @@ const PlannedSession: React.FC = ({ sessionBlocks.map((block) => block.id === id ? { - ...block, - subject: newSubject, - } + ...block, + subject: newSubject, + } : block ) ); @@ -319,16 +322,16 @@ const PlannedSession: React.FC = ({ sessionBlocks.map((block) => block?.id === id ? { - ...block, - startDatetime: startDatetime, - endDatetime: endDatetime, - endDateValue: endDateValue, - isRecurring: isRecurringEvent, - sessionStartDate: startDate, - sessionEndDate: endDate, - sessionStartTime: startTime, - sessionEndTime: endTime, - } + ...block, + startDatetime: startDatetime, + endDatetime: endDatetime, + endDateValue: endDateValue, + isRecurring: isRecurringEvent, + sessionStartDate: startDate, + sessionEndDate: endDate, + sessionStartTime: startTime, + sessionEndTime: endTime, + } : block ) ); @@ -353,16 +356,16 @@ const PlannedSession: React.FC = ({ sessionBlocks.map((block) => block?.id === selectedBlockId ? { - ...block, - startDatetime: startDatetime, - endDatetime: endDatetime, - endDateValue: endDateValue, - isRecurring: isRecurringEvent, - sessionStartDate: startDate, - sessionEndDate: endDate, - sessionStartTime: startTime, - sessionEndTime: endTime, - } + ...block, + startDatetime: startDatetime, + endDatetime: endDatetime, + endDateValue: endDateValue, + isRecurring: isRecurringEvent, + sessionStartDate: startDate, + sessionEndDate: endDate, + sessionStartTime: startTime, + sessionEndTime: endTime, + } : block ) ); @@ -401,10 +404,10 @@ const PlannedSession: React.FC = ({ sessionBlocks.map((block) => block.id === id ? { - ...block, - meetingLink: value, - onlineProvider: onlineProvider, - } + ...block, + meetingLink: value, + onlineProvider: onlineProvider, + } : block ) ); @@ -420,9 +423,9 @@ const PlannedSession: React.FC = ({ sessionBlocks.map((block) => block.id === id ? { - ...block, - meetingPasscode: value, - } + ...block, + meetingPasscode: value, + } : block ) ); @@ -443,10 +446,10 @@ const PlannedSession: React.FC = ({ sessionBlocks.map((block) => block?.id === id ? { - ...block, - selectedWeekDays: newSelectedDays, - DaysOfWeek: mappedSelectedDays, - } + ...block, + selectedWeekDays: newSelectedDays, + DaysOfWeek: mappedSelectedDays, + } : block ) ); @@ -461,9 +464,9 @@ const PlannedSession: React.FC = ({ sessionBlocks.map((block) => block.id === id ? { - ...block, - subjectTitle: value, - } + ...block, + subjectTitle: value, + } : block ) ); @@ -553,13 +556,13 @@ const PlannedSession: React.FC = ({ } else if (clickedBox === 'EXTRA_SESSION') { title = eventType === t('CENTER_SESSION.JUST') && - mode === t('CENTER_SESSION.ONLINE') + mode === t('CENTER_SESSION.ONLINE') ? t('CENTER_SESSION.NON_RECURRING_ONLINE') : eventType === t('CENTER_SESSION.REAPEATING') && - mode === t('CENTER_SESSION.ONLINE') + mode === t('CENTER_SESSION.ONLINE') ? t('CENTER_SESSION.ONLINE') : eventType === t('CENTER_SESSION.JUST') && - mode === t('CENTER_SESSION.OFFLINE') + mode === t('CENTER_SESSION.OFFLINE') ? t('CENTER_SESSION.NON_RECURRING_OFFLINE') : t('CENTER_SESSION.RECURRING_ONLINE'); } @@ -639,10 +642,10 @@ const PlannedSession: React.FC = ({ try { const response = await createEvent(apiBody); console.log(response); - if (response) { + if (response?.responseCode === 'Created') { showToastMessage( t('COMMON.SESSION_SCHEDULED_SUCCESSFULLY'), - 'sucess' + 'success' ); ReactGA.event('event-created-successfully', { creatorId: userId, @@ -650,6 +653,8 @@ const PlannedSession: React.FC = ({ if (onCloseModal) { onCloseModal(); } + } else { + showToastMessage(t('COMMON.SOMETHING_WENT_WRONG'), 'error'); } } catch (error) { console.error('Error creating event:', error); @@ -675,12 +680,36 @@ const PlannedSession: React.FC = ({ setMode(event.target.value); }; + const handelDeleteEvent = async (eventData: any, deleteSelection: string) => { + try { + const isMainEvent = + !eventData?.isRecurring || deleteSelection !== 'EDIT_SESSION'; + + const eventRepetitionId = eventData?.eventRepetitionId; + + const apiBody = { + isMainEvent: isMainEvent, + status: 'archived', + }; + const response = await editEvent(eventRepetitionId, apiBody); + if (response?.responseCode === 'OK') { + showToastMessage(t('COMMON.SESSION_DELETED_SUCCESSFULLY'), 'success'); + } else { + showToastMessage(t('COMMON.SOMETHING_WENT_WRONG'), 'error'); + } + if (onEventDeleted) { + onEventDeleted(); + } + } catch (error) { + console.error('Error in deleting event:', error); + } + }; + return ( {sessionBlocks.map((block, index) => ( - - {editSession && ( + {editSession && editSession?.isRecurring && ( = ({ > handleEditSelection?.('EDIT_SESSION')} + onClick={() => + handleEditSelection?.('EDIT_SESSION', editSession) + } label={ = ({ {t('CENTER_SESSION.EDIT_THIS_SESSION')} } - control={} + control={ + + } labelPlacement="start" sx={{ display: 'flex', @@ -716,8 +749,12 @@ const PlannedSession: React.FC = ({ handleEditSelection?.('FOLLOWING_SESSION')} - control={} + onClick={() => + handleEditSelection?.('FOLLOWING_SESSION', editSession) + } + control={ + + } label={ = ({ )} - = ({ )} - {editSession && ( = ({ }} onClick={handleOpenModel} > - { - - editSelection === 'EDIT_SESSION' ? t('CENTER_SESSION.DELETE_THIS_SESSION') : t('CENTER_SESSION.DELETE_FOLLOWING_SESSION') - } + {editSelection === 'EDIT_SESSION' + ? t('CENTER_SESSION.DELETE_THIS_SESSION') + : t('CENTER_SESSION.DELETE_FOLLOWING_SESSION')} = ({ )} - - {sessionBlocks.length > 1 && ( = ({ )} - - {!editSession && ( <> @@ -1145,19 +1175,25 @@ const PlannedSession: React.FC = ({ )} - ))} - + {editSession && ( + handelDeleteEvent(editSession, editSelection)} + modalOpen={modalOpen} + /> + )} ); }; diff --git a/src/components/SessionCard.tsx b/src/components/SessionCard.tsx index 5da0477d..443c66c3 100644 --- a/src/components/SessionCard.tsx +++ b/src/components/SessionCard.tsx @@ -12,30 +12,40 @@ import { useTranslation } from 'next-i18next'; import CalendarMonthIcon from '@mui/icons-material/CalendarMonth'; import ConfirmationModal from './ConfirmationModal'; - -const SessionsCard: React.FC = ({ data, children }) => { +const SessionsCard: React.FC = ({ + data, + children, + isEventDeleted, +}) => { const theme = useTheme(); const { t } = useTranslation(); const [open, setOpen] = React.useState(false); const [snackbarOpen, setSnackbarOpen] = React.useState(false); + const [eventDeleted, setEventDeleted] = React.useState(false); const [startTime, setStartTime] = React.useState(''); const [endTime, setEndTime] = React.useState(''); const [startDate, setStartDate] = React.useState(''); - const [editSession, setEditSession] = React.useState(''); const [modalOpen, setModalOpen] = React.useState(false); const [editSelection, setEditSelection] = React.useState('EDIT_SESSION'); - - - + const [editSession, setEditSession] = React.useState(); const handleEditSelection = (selection: string) => { setEditSelection(selection); }; - - const handleOpen = (selection: string) => { - setOpen(true) - setEditSession(selection); + const handleOpen = (eventData: any) => { + setOpen(true); + setEditSession(eventData); }; + const handleClose = () => setOpen(false); + + const onEventDeleted = () => { + setOpen(false); + setEventDeleted(true); + if (isEventDeleted) { + isEventDeleted(); + } + }; + const handleSnackbarClose = () => setSnackbarOpen(false); const handleCopyUrl = () => { @@ -68,11 +78,11 @@ const SessionsCard: React.FC = ({ data, children }) => { const handleCloseModal = () => { setModalOpen(false); - } + }; const handleEditModal = () => { setModalOpen(true); - } + }; return ( = ({ data, children }) => { {data?.metadata?.framework?.teacherName} - handleOpen?.('EDIT_SESSION')} sx={{ cursor: 'pointer' }} /> + handleOpen?.(data)} + sx={{ cursor: 'pointer' }} + /> = ({ data, children }) => { open={open} handleClose={handleClose} title={'Home Science'} - primary={editSession === 'EDIT_SESSION' ? "Update" : 'Schedule'} + primary={editSession === 'EDIT_SESSION' ? 'Update' : 'Schedule'} handleEditModal={handleEditModal} > - + {children} @@ -181,7 +199,6 @@ const SessionsCard: React.FC = ({ data, children }) => { /> ); - }; export default SessionsCard; diff --git a/src/pages/centers/[cohortId]/index.tsx b/src/pages/centers/[cohortId]/index.tsx index 4b0f839b..be00635c 100644 --- a/src/pages/centers/[cohortId]/index.tsx +++ b/src/pages/centers/[cohortId]/index.tsx @@ -103,6 +103,7 @@ const CohortPage = () => { React.useState(false); const [openAddLearnerModal, setOpenAddLearnerModal] = React.useState(false); const [openSchedule, setOpenSchedule] = React.useState(false); + const [eventDeleted, setEventDeleted] = React.useState(false); const [deleteModal, setDeleteModal] = React.useState(false); const [cohortName, setCohortName] = React.useState(); @@ -220,7 +221,7 @@ const CohortPage = () => { }; getSessionsData(); - }, [selectedDate, eventCreated]); + }, [selectedDate, eventCreated, eventDeleted]); useEffect(() => { const getExtraSessionsData = async () => { @@ -255,7 +256,11 @@ const CohortPage = () => { }; getExtraSessionsData(); - }, [eventCreated]); + }, [eventCreated, eventDeleted]); + + const handleEventDeleted = () => { + setEventDeleted(true); + }; const handleChange = (event: React.SyntheticEvent, newValue: number) => { setValue(newValue); @@ -513,7 +518,10 @@ const CohortPage = () => { {extraSessions?.map((item) => ( - + @@ -580,7 +588,7 @@ const CohortPage = () => { {sessions?.map((item) => ( - + @@ -594,7 +602,6 @@ const CohortPage = () => { )} - )} diff --git a/src/services/EventService.ts b/src/services/EventService.ts index a8729a31..48f2e889 100644 --- a/src/services/EventService.ts +++ b/src/services/EventService.ts @@ -1,5 +1,5 @@ -import { scheduleEventParam, CreateEvent } from '@/utils/Interfaces'; -import { post } from './RestClient'; +import { scheduleEventParam, CreateEvent, EditEvent } from '@/utils/Interfaces'; +import { patch, post } from './RestClient'; export const getEventList = async ({ limit, @@ -20,7 +20,21 @@ export const createEvent = async (apiBody: CreateEvent): Promise => { const apiUrl: string = `${process.env.NEXT_PUBLIC_EVENT_BASE_URL}/create`; try { const response = await post(apiUrl, apiBody); - return response?.data?.result; + return response?.data; + } catch (error) { + console.error('error in getting event List Service list', error); + return error; + } +}; + +export const editEvent = async ( + eventRepetitionId: string, + apiBody: EditEvent +): Promise => { + const apiUrl: string = `${process.env.NEXT_PUBLIC_EVENT_BASE_URL}/${eventRepetitionId}`; + try { + const response = await patch(apiUrl, apiBody); + return response?.data; } catch (error) { console.error('error in getting event List Service list', error); return error; diff --git a/src/utils/Interfaces.ts b/src/utils/Interfaces.ts index 6cdc5937..145a7475 100644 --- a/src/utils/Interfaces.ts +++ b/src/utils/Interfaces.ts @@ -129,6 +129,7 @@ export interface ExtraSessionsCardProps { export interface SessionsCardProps { data: any; children?: React.ReactNode; + isEventDeleted?: () => void; } export interface SessionsModalProps { children?: React.ReactNode; @@ -140,19 +141,21 @@ export interface SessionsModalProps { date?: string; handlePrimaryModel?: () => void; secondary?: string; - handleEditModal?: () => void; + handleEditModal?: () => void; } export interface PlannedModalProps { removeModal?: () => void; clickedBox?: string | null; scheduleEvent?: boolean; + eventDeleted?: boolean; cohortName?: string; cohortId?: string; onCloseModal?: () => void | undefined; - editSelection: string; - handleEditSelection: (selection: string) => void; - editSession: string; + editSelection?: string; + handleEditSelection?: (selection: string) => void; + onEventDeleted?: () => void; + editSession?: any; } export interface ScheduleModalProps { @@ -588,7 +591,12 @@ export interface BottomDrawerProps { } export interface IAssessmentStatusOptions { - userId: string[], - contentId: string[], - batchId: string -} \ No newline at end of file + userId: string[]; + contentId: string[]; + batchId: string; +} + +export interface EditEvent { + isMainEvent: boolean; + status: string; +}