diff --git a/public/locales/en/common.json b/public/locales/en/common.json index f7caf2ef..a47f8e6f 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -555,7 +555,8 @@ "MARKS_OBTAINED": "Marks Obtained", "OVERALL_SCORE": "Overall Score", "ASSESSMENT_NOT_STARTED_YET": "Assessment not started yet", - "NUMBER_OUT_OF_COMPLETED": "{{completedCount}} out of {{totalCount}} completed" + "NUMBER_OUT_OF_COMPLETED": "{{completedCount}} out of {{totalCount}} completed", + "NO_SUBTOPIC_SELECTED": "No Subtopic selected" }, "BOARD_ENROLMENT": { "BOARD_ENROLLMENT": "Board Enrollment", diff --git a/src/components/FacilitatorDrawer.tsx b/src/components/FacilitatorDrawer.tsx index ce016629..3bcc0448 100644 --- a/src/components/FacilitatorDrawer.tsx +++ b/src/components/FacilitatorDrawer.tsx @@ -4,29 +4,33 @@ import SwipeableDrawer from '@mui/material/SwipeableDrawer'; import { Box } from '@mui/material'; import { useTheme } from '@mui/material/styles'; import { FacilitatorDrawerProps } from '@/utils/Interfaces'; +import taxonomyStore from '@/store/taxonomyStore'; +import { useTranslation } from 'next-i18next'; const FacilitatorDrawer: React.FC = ({ secondary, primary, toggleDrawer, drawerState, + onPrimaryClick, + selectedCount, }) => { const theme = useTheme(); - + const tStore = taxonomyStore(); + const { t } = useTranslation(); + return (
toggleDrawer(false)()} + onOpen={() => toggleDrawer(true)()} sx={{ position: 'unset', '@media (min-width: 900px)': { '& .MuiPaper-root': { marginLeft: '352px', - // bottom:'3rem', - // borderRadius:'16px' }, }, }} @@ -53,71 +57,29 @@ const FacilitatorDrawer: React.FC = ({ }, }} > - Khapari Dharmu (Chimur, Chandrapur) {/* will come from API */} + {tStore?.center} - + + {/* Show selected count */} + + {selectedCount > 0 + ? `${selectedCount} subtopics selected` + : `${t('ASSESSMENTS.NO_SUBTOPIC_SELECTED')}`} + {secondary && ( - - - - + toggleDrawer(false)()}> + )} {primary && ( - - - - + + )} diff --git a/src/pages/course-planner-detail.tsx b/src/pages/course-planner-detail.tsx index 40a83286..03dde731 100644 --- a/src/pages/course-planner-detail.tsx +++ b/src/pages/course-planner-detail.tsx @@ -62,6 +62,9 @@ const CoursePlannerDetail = () => { const [statusData, setStatusData] = useState(); const [completionPercentage, setCompletionPercentage] = useState(0); + const [currentSubtopic, setCurrentSubtopic] = useState<{ topid: any; subid: any } | null>(null); + const [selectedSubtopics, setSelectedSubtopics] = useState<{topid: string, subid: string}[]>([]); + const [selectedCount, setSelectedCount] = React.useState(0); const fetchCourseDetails = useCallback(async () => { @@ -184,19 +187,23 @@ const CoursePlannerDetail = () => { ); setExpandedPanels(newState); }; + const toggleDrawer = - (open: boolean) => (event: React.KeyboardEvent | React.MouseEvent) => { - if ( - event && - event.type === 'keydown' && - ((event as React.KeyboardEvent).key === 'Tab' || - (event as React.KeyboardEvent).key === 'Shift') - ) { - return; - } - setDrawerState({ ...drawerState, bottom: open }); - setIsDrawerOpen((prevIsDrawerOpen) => !prevIsDrawerOpen); - }; + (open: boolean, selectedCount: number = 0) => + (event?: React.KeyboardEvent | React.MouseEvent) => { + if ( + event && + event.type === 'keydown' && + ((event as React.KeyboardEvent).key === 'Tab' || + (event as React.KeyboardEvent).key === 'Shift') + ) { + return; + } + setDrawerState({ ...drawerState, bottom: open }); + setIsDrawerOpen(open); + setSelectedCount(selectedCount); + }; + const handleCloseModel = () => { setModalOpen(false); @@ -213,48 +220,47 @@ const CoursePlannerDetail = () => { return months[date.getMonth()]; }; - const markStatus = async (data: any, topid: any, subid: any) => { + const markMultipleStatuses = async (data: any, selectedSubtopics: {topid: string, subid: string}[]) => { const updatedData = { ...data }; - - updatedData.tasks = updatedData?.tasks.map( - (task: { status: AssessmentStatus; _id: any; children: any[] }) => { + + selectedSubtopics.forEach(({ topid, subid }) => { + updatedData.tasks = updatedData.tasks.map((task: { status: string; _id: string; children: any[] }) => { if (task._id === topid) { - task.children = task?.children?.map((child: { _id: any }) => { + task.children = task.children.map((child: { _id: string }) => { if (child._id === subid) { return { ...child, status: AssessmentStatus.COMPLETED_SMALL }; } return child; }); - + const allSubtasksCompleted = task.children.every( - (child: { status: string }) => - child.status === AssessmentStatus.COMPLETED_SMALL + (child: { status: string }) => child.status === AssessmentStatus.COMPLETED_SMALL ); - + + if (allSubtasksCompleted) { task.status = AssessmentStatus.COMPLETED_SMALL; } } return task; - } - ); - - - const lastDownloadedAt = updatedData?.lastDownloadedAt; - const id = updatedData?._id; + }); + }); + setStatusData(updatedData); + try { const response = await UserStatusDetails({ data: updatedData, - id, - lastDownloadedAt, + id: updatedData._id, + lastDownloadedAt: updatedData.lastDownloadedAt, }); console.log(response); } catch (err) { console.log(err); } }; - + + const isStatusCompleted = (taskId: any, isSubtask: boolean = true) => { if (isSubtask) { @@ -280,6 +286,7 @@ const isStatusCompleted = (taskId: any, isSubtask: boolean = true) => { return false; }; + return ( <>
@@ -403,7 +410,8 @@ const isStatusCompleted = (taskId: any, isSubtask: boolean = true) => { onChange={() => setExpandedPanels((prev) => ({ ...prev, - [`panel${index}-header`]: !prev[`panel${index}-header`], + [`panel${index}-header`]: + !prev[`panel${index}-header`], })) } sx={{ @@ -548,18 +556,47 @@ const isStatusCompleted = (taskId: any, isSubtask: boolean = true) => { { if (!isStatusCompleted(subTopic._id)) { - markStatus( - userProjectDetails, - topic._id, - subTopic._id - ); + const alreadySelected = + selectedSubtopics.find( + (s) => s.subid === subTopic._id + ); + + if (alreadySelected) { + setSelectedSubtopics( + selectedSubtopics.filter( + (s) => s.subid !== subTopic._id + ) + ); + + toggleDrawer( + true, + selectedSubtopics.length - 1 + )(); + } else { + setSelectedSubtopics([ + ...selectedSubtopics, + { + topid: topic._id, + subid: subTopic._id, + }, + ]); + + toggleDrawer( + true, + selectedSubtopics.length + 1 + )(); + } } }} sx={{ fontSize: '20px', - color: isStatusCompleted(subTopic._id) - ? '#4CAF50' - : '#7C766e', + color: selectedSubtopics.find( + (s) => s.subid === subTopic._id + ) + ? '#FF9800' + : isStatusCompleted(subTopic._id) + ? '#4CAF50' + : '#7C766e', cursor: isStatusCompleted(subTopic._id) ? 'default' : 'pointer', @@ -618,9 +655,17 @@ const isStatusCompleted = (taskId: any, isSubtask: boolean = true) => {
{ + if (selectedSubtopics.length > 0) { + // Mark all selected subtopics as complete + markMultipleStatuses(userProjectDetails, selectedSubtopics); + toggleDrawer(false)(); + } + }} + selectedCount={selectedCount} /> {/* set(() => ({ state: newState })), setBoard: (newBoard) => set(() => ({ board: newBoard })), setMedium: (newMedium) => set(() => ({ medium: newMedium })), @@ -20,6 +21,7 @@ const taxonomyStore = create( setTaxonomySubject: (newTaxonomySubject) => set(() => ({ taxonomySubject: newTaxonomySubject })), setStateassociations: (newStateassociations) => set((state) => ({ stateassociations: newStateassociations })), + setCenter: (newCenter) => set(() => ({ center: newCenter})), }), { name: 'taxonomyTeacher', diff --git a/src/utils/Interfaces.ts b/src/utils/Interfaces.ts index 61cb762d..5bb78930 100644 --- a/src/utils/Interfaces.ts +++ b/src/utils/Interfaces.ts @@ -480,9 +480,12 @@ export interface FacilitatorDrawerProps { primary?: string; toggleDrawer: ( open: boolean - ) => (event: React.KeyboardEvent | React.MouseEvent) => void; + ) => (event?: React.KeyboardEvent | React.MouseEvent) => void; drawerState: { bottom: boolean }; + onPrimaryClick?: () => void; + selectedCount?: any } + export interface CoursePlannerCardsProps { resources: any; type: string;