Merge pull request #101 from shreyas1434shinde/Assessments

Issue #PS-1640 feat: Subject detail page UI implementation

public/locales/en/common.json

@@ -456,5 +456,15 @@
  "COLLAPSE_ALL": "Collapse All",
  "EXPAND_ALL": "Expand All",
  "RESOURCES": "Resources"
+ },
+ "ASSESSMENTS":{
+ "ASSESSMENTS":"Assessments",
+ "CENTER":"Center",
+ "ASSESSMENT_TYPE":"Assessment Type",
+ "COMPLETED_THE_ASSESSMENT":"completed the assessment",
+ "SUBMITTED_ON":"Submitted On",
+ "CORRECT_ANSWER":"correct answers",
+ "NO_DATA_FOUND":"No data found",
+ "SEARCH_STUDENT":"search student"
  }
 }

src/components/DynamicForm.tsx

@@ -219,7 +219,7 @@ const DynamicForm: React.FC<DynamicFormProps> = ({
  }
 
  return (
- <div>
+ <div className="form-parent">
  <FormWithMaterialUI
  schema={schema}
  uiSchema={uiSchema}

src/components/FormButtons.tsx

@@ -1,4 +1,4 @@
-import { Button, useTheme } from '@mui/material';
+import { Box, Button, Divider, useTheme } from '@mui/material';
 import { useTranslation } from 'next-i18next';
 import React from 'react';
 
@@ -33,16 +33,39 @@ const FormButtons: React.FC<FormButtons> = ({
  console.log(isCreateCentered);
 
  return (
- <div
- style={{
- marginTop: '16px',
- display: 'flex',
- justifyContent: isSingleButton ? 'center' : 'space-between',
- }}
- >
- {!isSingleButton && !isCreateCentered && !isCreatedFacilitator && (
+ <>
+ <Divider />
+ <Box
+ sx={{
+ padding: '16px',
+ background: '#fff',
+ display: 'flex',
+ justifyContent: isSingleButton ? 'center' : 'space-between',
+ gap: '15px',
+ }}
+ >
+ {!isSingleButton && !isCreateCentered && !isCreatedFacilitator && (
+ <Button
+ variant="outlined"
+ color="primary"
+ sx={{
+ '&.Mui-disabled': {
+ backgroundColor: theme?.palette?.primary?.main,
+ },
+ minWidth: '84px',
+ height: '2.5rem',
+ padding: theme.spacing(1),
+ fontWeight: '500',
+ width: '48%',
+ }}
+ type="submit"
+ onClick={() => actions.back()}
+ >
+ {t('COMMON.BACK')}
+ </Button>
+ )}
  <Button
- variant="outlined"
+ variant="contained"
  color="primary"
  sx={{
  '&.Mui-disabled': {
@@ -52,33 +75,15 @@ const FormButtons: React.FC<FormButtons> = ({
  height: '2.5rem',
  padding: theme.spacing(1),
  fontWeight: '500',
- width: '48%',
+ width: isSingleButton ? '100%' : '48%',
  }}
  type="submit"
- onClick={() => actions.back()}
+ onClick={() => onClick(formData)}
  >
- {t('COMMON.BACK')}
+ {buttonText}
  </Button>
- )}
- <Button
- variant="contained"
- color="primary"
- sx={{
- '&.Mui-disabled': {
- backgroundColor: theme?.palette?.primary?.main,
- },
- minWidth: '84px',
- height: '2.5rem',
- padding: theme.spacing(1),
- fontWeight: '500',
- width: isSingleButton ? '100%' : '48%',
- }}
- type="submit"
- onClick={() => onClick(formData)}
- >
- {buttonText}
- </Button>
- </div>
+ </Box>
+ </>
  );
 };
 

src/components/MenuDrawer.tsx

@@ -78,6 +78,8 @@ const MenuDrawer: React.FC<DrawerProps> = ({
  const isDashboard = router.pathname === '/dashboard';
  const isTeacherCenter = router.pathname === '/centers';
  const isCoursePlanner = router.pathname === '/course-planner';
+ const isAssessments = router.pathname === '/assessments';
+
  // const isManageUser = router.pathname === '/manageUser';
 
  return (
@@ -251,6 +253,37 @@ const MenuDrawer: React.FC<DrawerProps> = ({
  {t('COMMON.OBSERVATIONS_FORMS')}
  </Button>
  </Box>
+ <Box sx={{ marginTop: '12px' }}>
+ <Button
+ className="fs-14"
+ sx={{
+ width: '100%',
+ display: 'flex',
+ justifyContent: 'flex-start',
+ background: isAssessments
+ ? theme.palette.primary.main
+ : 'transparent',
+
+ padding: isAssessments
+ ? '16px 18px !important'
+ : '0px 18px !important',
+ color: isAssessments ? '#2E1500' : theme.palette.warning.A200,
+ fontWeight: isAssessments ? '600' : 500,
+ '&:hover': {
+ background: isAssessments
+ ? theme.palette.primary.main
+ : 'transparent',
+ },
+ marginTop: '15px',
+ }}
+ startIcon={<EventAvailableOutlinedIcon />}
+ onClick={() => {
+ router.push(`/assessments`);
+ }}
+ >
+ {t('ASSESSMENTS.ASSESSMENTS')}
+ </Button>
+ </Box>
 
  <Box sx={{ marginTop: '12px' }}>
  <Button

src/components/SimpleModal.tsx

@@ -91,9 +91,7 @@ const SimpleModal: React.FC<SimpleModalProps> = ({
  </Box>
  </Box>
  <Divider />
- <Box sx={{ height: '60vh', overflowY: 'auto', px: '16px' }}>
- {children}
- </Box>
+ <Box>{children}</Box>
  <Divider />
 
  {showFooter ? (

src/components/SortingModal.tsx

@@ -16,15 +16,15 @@ import { useTranslation } from 'react-i18next';
 import ModalComponent from './Modal';
 
 interface sortCardProps {
- handleSorting: (
+ handleSorting?: (
  sortByName: string,
  sortByAttendance: string,
  sortByClassesMissed: string,
  sortByAttendanceNumber: string
  ) => void;
  handleCloseModal: () => void;
  isModalOpen: boolean;
- routeName: string;
+ routeName?: string;
 }
 
 const SortingModal: React.FC<sortCardProps> = ({
@@ -46,12 +46,7 @@ const SortingModal: React.FC<sortCardProps> = ({
  setSortByAttendance('');
  setSortByClassesMissed('');
  setSortByAttendanceNumber('');
- // if (event.target.value === 'asc' || event.target.value === 'desc') {
  setSortByName(event.target.value);
- // }
- // else {
- // setSortByAttendance(event.target.value);
- // }
  };
 
  const handleSortByAttendance = (
@@ -82,20 +77,22 @@ const SortingModal: React.FC<sortCardProps> = ({
  };
 
  const handleApplySort = () => {
- handleSorting(
- sortByName,
- sortByAttendance,
- sortByClassesMissed,
- sortByAttendanceNumber
- );
- ReactGA.event('sort-by-applied', {
- sortingBasis: [
+ if (handleSorting) {
+ handleSorting(
  sortByName,
  sortByAttendance,
  sortByClassesMissed,
- sortByAttendanceNumber,
- ],
- });
+ sortByAttendanceNumber
+ );
+ ReactGA.event('sort-by-applied', {
+ sortingBasis: [
+ sortByName,
+ sortByAttendance,
+ sortByClassesMissed,
+ sortByAttendanceNumber,
+ ],
+ });
+ }
  handleCloseModal();
  };
 
@@ -197,6 +194,7 @@ const SortingModal: React.FC<sortCardProps> = ({
  {t('COMMON.ATTENDANCE')}
  </FormLabel>
  <RadioGroup
+ aria-labelledby="demo-controlled-radio-buttons-group"
  aria-label="sortByAttendance"
  name="sortByAttendance"
  value={sortByAttendance}