Merge pull request #282 from Aar-if/status

Issue #PS-1623: Status update for topic-subtopic and progress update for subject API integration

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",

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<FacilitatorDrawerProps> = ({
  secondary,
  primary,
  toggleDrawer,
  drawerState,
+ onPrimaryClick,
+ selectedCount, 
 }) => {
  const theme = useTheme<any>();
-
+ const tStore = taxonomyStore();
+ const { t } = useTranslation();
+
  return (
  <div>
  <SwipeableDrawer
  anchor="bottom"
  open={drawerState.bottom}
- onClose={toggleDrawer(true)}
- onOpen={toggleDrawer(true)}
+ onClose={() => 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<FacilitatorDrawerProps> = ({
  },
  }}
  >
- Khapari Dharmu (Chimur, Chandrapur) {/* will come from API */}
+ {tStore?.center}
  </Box>
- <Box
- sx={{
- display: 'flex',
- width: '100%',
- justifyContent: 'center',
- gap: '10px',
- }}
- >
+ <Box sx={{ display: 'flex', justifyContent: 'center', gap: '10px' }}>
+ {/* Show selected count */}
+ <Box sx={{ color: '#fff' }}>
+ {selectedCount > 0
+ ? `${selectedCount} subtopics selected`
+ : `${t('ASSESSMENTS.NO_SUBTOPIC_SELECTED')}`}
+ </Box>
  {secondary && (
- <Box>
- <Box
- onClick={toggleDrawer(false)}
- sx={{ padding: '20px 16px 0' }}
- >
- <Button
- variant="outlined"
- sx={{
- '&.Mui-disabled': {
- backgroundColor: theme?.palette?.primary?.main,
- },
- minWidth: '84px',
- padding: theme.spacing(1),
- fontWeight: '500',
- width: '128px',
- height: '40px',
- color: theme?.palette?.warning['A400'],
- border: `1px solid ${theme?.palette?.warning['A400']}`,
- '@media (max-width: 430px)': {
- width: '100%',
- },
- }}
- // onClick={handleSecondaryModel} // Uncomment and implement this function if needed
- >
- {secondary}
- </Button>
- </Box>
+ <Box onClick={() => toggleDrawer(false)()}>
+ <Button variant="outlined">{secondary}</Button>
  </Box>
  )}
  {primary && (
- <Box sx={{ width: secondary ? 'unset' : '100%' }}>
- <Box sx={{ padding: '20px 16px 0' }}>
- <Button
- variant="contained"
- color="primary"
- sx={{
- '&.Mui-disabled': {
- backgroundColor: theme?.palette?.primary?.main,
- },
- minWidth: '84px',
- padding: theme.spacing(1),
- fontWeight: '500',
- width: secondary ? '199px' : '100%',
- height: '40px',
- '@media (max-width: 430px)': {
- width: '100%',
- },
- }}
- // onClick={handlePrimaryModel} // Uncomment and implement this function if needed
- onClick={toggleDrawer(false)}
- >
- {primary}
- </Button>
- </Box>
+ <Box>
+ <Button
+ variant="contained"
+ color="primary"
+ onClick={onPrimaryClick}
+ >
+ {primary}
+ </Button>
  </Box>
  )}
  </Box>

src/pages/course-planner-detail.tsx

@@ -62,6 +62,9 @@ const CoursePlannerDetail = () => {
  const [statusData, setStatusData] = useState<any>();
 
  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 (
  <>
  <Header />
@@ -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) => {
  <CheckCircleIcon
  onClick={() => {
  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) => {
  </div>
  <FacilitatorDrawer
  secondary={'Cancel'}
- primary={'Mark as Complete (2)'}
+ primary={`Mark as Complete (${selectedCount})`}
  toggleDrawer={toggleDrawer}
  drawerState={drawerState}
+ onPrimaryClick={() => {
+ if (selectedSubtopics.length > 0) {
+ // Mark all selected subtopics as complete
+ markMultipleStatuses(userProjectDetails, selectedSubtopics);
+ toggleDrawer(false)(); 
+ }
+ }}
+ selectedCount={selectedCount} 
  />
 
  {/* <ConfirmationModal

src/store/taxonomyStore.js

@@ -12,6 +12,7 @@ const taxonomyStore = create(
  type:"",
  taxonomySubject:"",
  stateassociations: [],
+ center:"",
  setState: (newState) => 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',

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;