From ad7e15d7393a1f34696abdcef6dcb4766e20ae55 Mon Sep 17 00:00:00 2001 From: TTPL-RT-52 Date: Mon, 22 Jul 2024 10:57:02 +0530 Subject: [PATCH 1/6] Issue #PS-1333 fix: Select Topic Sub-topic modal UI Implementation --- src/components/PlannedSession.tsx | 3 +- src/components/SimpleModal.tsx | 19 ++++++------ src/pages/centers/[cohortId].tsx | 48 +++++++++++++++++++++++-------- 3 files changed, 48 insertions(+), 22 deletions(-) diff --git a/src/components/PlannedSession.tsx b/src/components/PlannedSession.tsx index 1aec6cb4..8c7343a6 100644 --- a/src/components/PlannedSession.tsx +++ b/src/components/PlannedSession.tsx @@ -31,7 +31,7 @@ import { useTranslation } from 'next-i18next'; type mode = (typeof sessionMode)[keyof typeof sessionMode]; -const PlannedSession = () => { +const PlannedSession = ({ removeModal }) => { const [mode, setMode] = useState(sessionMode.OFFLINE); const handleSessionModeChange = (event: ChangeEvent) => { @@ -242,6 +242,7 @@ const PlannedSession = () => { color: theme?.palette?.secondary.main, fontWeight: '500', }} + onClick={removeModal} > {t('CENTER_SESSION.REMOVE_THIS_SESSION')} diff --git a/src/components/SimpleModal.tsx b/src/components/SimpleModal.tsx index f77d2a21..35bad16b 100644 --- a/src/components/SimpleModal.tsx +++ b/src/components/SimpleModal.tsx @@ -12,13 +12,14 @@ import { Typography, } from '@mui/material'; import React, { ReactNode, useState } from 'react'; -import { useTheme } from '@mui/material/styles'; -import { useTranslation } from 'next-i18next'; + import CloseIcon from '@mui/icons-material/Close'; -import { showToastMessage } from './Toastify'; -import manageUserStore from '@/store/manageUserStore'; -import { getCohortList } from '@/services/CohortServices'; import CloseSharpIcon from '@mui/icons-material/CloseSharp'; +import { getCohortList } from '@/services/CohortServices'; +import manageUserStore from '@/store/manageUserStore'; +import { showToastMessage } from './Toastify'; +import { useTheme } from '@mui/material/styles'; +import { useTranslation } from 'next-i18next'; interface SimpleModalProps { secondaryActionHandler?: () => void; @@ -47,10 +48,10 @@ const SimpleModal: React.FC = ({ const theme = useTheme(); const modalStyle = { - paddingTop: '0', - paddingLeft: theme.spacing(2), - paddingRight: theme.spacing(2), - paddingBottom: theme.spacing(2), + paddingTop: '0', + paddingLeft: theme.spacing(2), + paddingRight: theme.spacing(2), + paddingBottom: theme.spacing(2), position: 'absolute', top: '50%', left: '50%', diff --git a/src/pages/centers/[cohortId].tsx b/src/pages/centers/[cohortId].tsx index 9ba11eb6..45220fd1 100644 --- a/src/pages/centers/[cohortId].tsx +++ b/src/pages/centers/[cohortId].tsx @@ -14,10 +14,12 @@ import AddLearnerModal from '@/components/AddLeanerModal'; import ArrowForwardIcon from '@mui/icons-material/ArrowForward'; import Box from '@mui/material/Box'; import CenterSessionModal from '@/components/CenterSessionModal'; +import CohortFacilitatorList from '@/components/CohortFacilitatorList'; import CohortLearnerList from '@/components/CohortLearnerList'; import { CustomField } from '@/utils/Interfaces'; import DeleteCenterModal from '@/components/center/DeleteCenterModal'; import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined'; +import DeleteSession from '@/components/DeleteSession'; import { GetStaticPaths } from 'next'; import Header from '@/components/Header'; import KeyboardBackspaceOutlinedIcon from '@mui/icons-material/KeyboardBackspaceOutlined'; @@ -38,7 +40,6 @@ import { serverSideTranslations } from 'next-i18next/serverSideTranslations'; import { useRouter } from 'next/router'; import { useTheme } from '@mui/material/styles'; import { useTranslation } from 'next-i18next'; -import CohortFacilitatorList from '@/components/CohortFacilitatorList'; const TeachingCenterDetails = () => { const [value, setValue] = React.useState(1); @@ -64,6 +65,13 @@ const TeachingCenterDetails = () => { const [openAddLearnerModal, setOpenAddLearnerModal] = React.useState(false); const [openSchedule, setOpenSchedule] = React.useState(false); + const [deleteModal, setDeleteModal] = React.useState(false); + + const removeModal = () => { + setDeleteModal(true); + console.log('hello'); + }; + const handleCentermodel = () => { setOpenSchedule(true); }; @@ -298,17 +306,33 @@ const TeachingCenterDetails = () => { {t('COMMON.SCHEDULE_NEW')} - - {openSchedule ? : } - + {!deleteModal ? ( + + {openSchedule ? ( + + ) : ( + + )} + + ) : ( + + + + )} Date: Mon, 22 Jul 2024 11:52:46 +0530 Subject: [PATCH 2/6] Issue #PS-1333 fix: Select Topic Sub-topic modal UI Implementation --- src/components/CenterSessionModal.tsx | 86 ++++++++++++++++++++------- src/components/DeleteSession.tsx | 60 ++++++++++++------- src/utils/Interfaces.ts | 3 +- 3 files changed, 102 insertions(+), 47 deletions(-) diff --git a/src/components/CenterSessionModal.tsx b/src/components/CenterSessionModal.tsx index cd3c9675..1fc36477 100644 --- a/src/components/CenterSessionModal.tsx +++ b/src/components/CenterSessionModal.tsx @@ -18,6 +18,7 @@ const CenterSessionModal: React.FC = ({ primary, center, date, + secondary, handlePrimaryModel, }) => { const theme = useTheme(); @@ -104,30 +105,69 @@ const CenterSessionModal: React.FC = ({ {children} - {primary && ( - <> - - - + + + + {secondary && ( + + + + - - )} + )} + {primary && ( + + + + + + )} + diff --git a/src/components/DeleteSession.tsx b/src/components/DeleteSession.tsx index 8d3973c7..fb33889f 100644 --- a/src/components/DeleteSession.tsx +++ b/src/components/DeleteSession.tsx @@ -6,39 +6,53 @@ import { Radio, RadioGroup, } from '@mui/material'; +import React, { useState } from 'react'; -import React from 'react'; import { useTheme } from '@mui/material/styles'; import { useTranslation } from 'react-i18next'; const DeleteSession = () => { const theme = useTheme(); const { t } = useTranslation(); + const [selectedValue, setSelectedValue] = useState('thisSession'); + + const handleChange = (event: React.ChangeEvent) => { + setSelectedValue(event.target.value); + }; + return ( <> - - {t('CENTER_SESSION.THIS_SESSION')} - - - - {t('CENTER_SESSION.FOLLOWING_SESSIONS')} - - + + + {t('CENTER_SESSION.THIS_SESSION')} + + + + {t('CENTER_SESSION.FOLLOWING_SESSIONS')} + + + ); diff --git a/src/utils/Interfaces.ts b/src/utils/Interfaces.ts index 09727850..eec64923 100644 --- a/src/utils/Interfaces.ts +++ b/src/utils/Interfaces.ts @@ -138,6 +138,7 @@ export interface SessionsModalProps { center?: string; date?: string; handlePrimaryModel?: () => void; + secondary?: string; } export interface AttendanceStatusListProps { limit: number; @@ -384,4 +385,4 @@ export interface createUserParam { password: string; tenantCohortRoleMapping: TenantCohortRoleMapping[]; customFields: CustomField[]; -} \ No newline at end of file +} From be58f1c22936514ae8265c5a19596c64048c69f9 Mon Sep 17 00:00:00 2001 From: TTPL-RT-52 Date: Mon, 22 Jul 2024 12:06:00 +0530 Subject: [PATCH 3/6] Issue #PS-1333 fix: Select Topic Sub-topic modal UI Implementation --- src/pages/centers/[cohortId].tsx | 68 ++++++++++++++++---------------- 1 file changed, 33 insertions(+), 35 deletions(-) diff --git a/src/pages/centers/[cohortId].tsx b/src/pages/centers/[cohortId].tsx index 45220fd1..7cd5dded 100644 --- a/src/pages/centers/[cohortId].tsx +++ b/src/pages/centers/[cohortId].tsx @@ -290,7 +290,7 @@ const TeachingCenterDetails = () => { {value === 1 && ( <> - + - {!deleteModal ? ( - - {openSchedule ? ( - - ) : ( - - )} - - ) : ( - + + + {deleteModal ? ( - - )} + ) : openSchedule ? ( + + ) : ( + + )} + - + { {t('COMMON.NO_SESSIONS_SCHEDULED')} + + - {sessions && - sessions.map((item: Session, index: number) => ( - - - - ))} + {sessions?.map((item) => ( + + + + ))} )} + {value === 2 && ( <> From 7cf1c798d8f67f9c5733987c3048a20cfe1e88cf Mon Sep 17 00:00:00 2001 From: TTPL-RT-52 Date: Mon, 22 Jul 2024 12:42:29 +0530 Subject: [PATCH 4/6] Issue #PS-1333 fix: Select Topic Sub-topic modal UI Implementation --- src/components/CenterSessionModal.tsx | 4 ++-- src/pages/centers/[cohortId].tsx | 18 ++++++++++++++---- 2 files changed, 16 insertions(+), 6 deletions(-) diff --git a/src/components/CenterSessionModal.tsx b/src/components/CenterSessionModal.tsx index 1fc36477..35b59bd6 100644 --- a/src/components/CenterSessionModal.tsx +++ b/src/components/CenterSessionModal.tsx @@ -142,7 +142,7 @@ const CenterSessionModal: React.FC = ({ )} {primary && ( - +