From 623b002f3ccb96d3bed00fb2d3fa4818a432a567 Mon Sep 17 00:00:00 2001 From: ttpl-rt-099 Date: Tue, 6 Aug 2024 12:04:44 +0530 Subject: [PATCH 1/8] Issue #PS-1534 feat: Foundation Course detail view UI implementation --- public/locales/en/common.json | 5 + src/components/MenuDrawer.tsx | 33 ++++++ src/pages/assessments.tsx | 193 ++++++++++++++++++++++++++++++++++ 3 files changed, 231 insertions(+) create mode 100644 src/pages/assessments.tsx diff --git a/public/locales/en/common.json b/public/locales/en/common.json index 459e08da..ed5746b9 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -448,5 +448,10 @@ "COLLAPSE_ALL": "Collapse All", "EXPAND_ALL": "Expand All", "RESOURCES": "Resources" + }, + "ASSESSMENTS":{ + "ASSESSMENTS":"Assessments", + "CENTER":"Center", + "ASSESSMENT_TYPE":"Assessment Type" } } diff --git a/src/components/MenuDrawer.tsx b/src/components/MenuDrawer.tsx index a2f6d44c..92a65ffa 100644 --- a/src/components/MenuDrawer.tsx +++ b/src/components/MenuDrawer.tsx @@ -78,6 +78,8 @@ const MenuDrawer: React.FC = ({ 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 = ({ {t('COMMON.OBSERVATIONS_FORMS')} + + + + + + + + + {assessmentList.map((assessment: any) => ( + handleAssesmentDetails(assessment.userId)} > - shreyas shinde - arrow + + + + + + + + {assessment.studentName} + + + + {assessment.progress === 'Overall score' + ? 'Overall score:' + : assessment.progress} + + {assessment.score !== undefined && ( + + {assessment.score}% + + )} + + + + + - - - + + ))} + + ); }; diff --git a/src/pages/assessments/[userId].tsx b/src/pages/assessments/[userId].tsx new file mode 100644 index 00000000..eb870293 --- /dev/null +++ b/src/pages/assessments/[userId].tsx @@ -0,0 +1,231 @@ +import { useEffect, useState } from 'react'; +import Header from '@/components/Header'; +import { useTheme, Theme } from '@mui/material/styles'; +import { + Box, + FormControl, + Grid, + InputLabel, + Select, + Typography, +} from '@mui/material'; +import { useTranslation } from 'react-i18next'; +import { logEvent } from '@/utils/googleAnalytics'; +import KeyboardBackspaceOutlinedIcon from '@mui/icons-material/KeyboardBackspaceOutlined'; +import { serverSideTranslations } from 'next-i18next/serverSideTranslations'; +import CheckCircleIcon from '@mui/icons-material/CheckCircle'; +import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord'; +import { getAssessmentSubjects } from '@/services/UpdateAssesmentService'; + +interface Assessment { + id: string; + subject: string; + score: string; + date: string; +} + +interface AssessmentSubject { + userId: number; + subject: string; + score: string; + date: string; +} + +function AssessmentsDetails() { + const theme = useTheme(); + const { t } = useTranslation(); + const [assessmentListSubject, setAssessmentListSubject] = useState< + Assessment[] + >([]); + + const handleBackEvent = () => { + window.history.back(); + logEvent({ + action: 'back-button-clicked-attendance-overview', + category: 'Attendance Overview Page', + label: 'Back Button Clicked', + }); + }; + + useEffect(() => { + logEvent({ + action: 'page-loaded-attendance-overview', + category: 'Attendance Overview Page', + label: 'Page Loaded', + }); + }, []); + + useEffect(() => { + const fetchData = async () => { + try { + const res: AssessmentSubject[] = await getAssessmentSubjects(); // Await the promise + setAssessmentListSubject(res); + } catch (error) { + console.error('Error fetching assessment subjects:', error); + } + }; + fetchData(); + }, []); + + return ( + <> +
+ + + + + userName + + + + + + + + + {t('ASSESSMENTS.ASSESSMENT_TYPE')} + + + + + + + + + + + Completed + + + + + Overall Score : 420/475 (88%) + + + + {assessmentListSubject.map((assessment) => ( + + + + {assessment.subject} + + + + {assessment.score} + + + + {assessment.date} + + + + + ))} + + + + ); +} + +export async function getStaticPaths() { + const paths = [ + { params: { userId: '1' } }, + { params: { userId: '2' } }, + { params: { userId: '3' } }, + ]; + + return { + paths, + fallback: false, + }; +} + +export async function getStaticProps({ + params, + locale, +}: { + params: any; + locale: string; +}) { + return { + props: { + ...(await serverSideTranslations(locale, ['common'])), + }, + }; +} + +export default AssessmentsDetails; diff --git a/src/services/UpdateAssesmentService.ts b/src/services/UpdateAssesmentService.ts new file mode 100644 index 00000000..3be1fe60 --- /dev/null +++ b/src/services/UpdateAssesmentService.ts @@ -0,0 +1,54 @@ +import { Assessment, AssessmentSubject } from "@/utils/Interfaces"; + +export const updateAssessment = (): Assessment[] => { + return [ + { + userId: 1, + studentName: 'Aanya Gupta', + progress: 'Overall score', + score: 89 + }, + { + userId: 2, + studentName: 'Aisha Bhatt', + progress: 'Not Started', + score: 0 + }, + { + userId: 3, + studentName: 'Ankita Kulkarni', + progress: 'In Progress', + score: 0 + }, + ]; +}; + +export const getAssessmentSubjects = (): AssessmentSubject[] => { + return [ + { + userId: 1, + subject: 'Reading', + score: '210/250', + date:'2 Feb, 2024' + }, + { + userId: 2, + subject: 'Writing', + score: '60/75', + date:'2 Feb, 2024' + + }, + { + userId: 3, + subject: 'Basic Mathematics', + score: '60/75', + date:'2 Feb, 2024' + }, + { + userId: 4, + subject: 'General Knowledge', + score: '60/75', + date:'2 Feb, 2024' + }, + ]; +}; \ No newline at end of file diff --git a/src/utils/Interfaces.ts b/src/utils/Interfaces.ts index ddb8c7ea..c8c3af2e 100644 --- a/src/utils/Interfaces.ts +++ b/src/utils/Interfaces.ts @@ -461,3 +461,18 @@ export interface OverallAttendance { absent_percentage: any; present_percentage: any; } + + +export interface Assessment { + userId: number; + studentName: string; + progress: string; + score?: number; +} + +export interface AssessmentSubject { + userId: number; + subject: string; + score: string; + date :string; +} \ No newline at end of file From b491bca4df766d7a02f33cd8a3c5c0dfeaa092f9 Mon Sep 17 00:00:00 2001 From: ttpl-rt-099 Date: Wed, 7 Aug 2024 20:31:37 +0530 Subject: [PATCH 3/8] Issue #PS-1534 feat: Foundation Course detail view UI implementation --- src/components/DynamicForm.tsx | 2 +- src/components/FormButtons.tsx | 25 +++++++----- src/components/SimpleModal.tsx | 4 +- src/pages/assessments/[userId].tsx | 40 +++++++------------ .../assessments/subjectDetail/[userId].tsx | 22 ++++++++++ src/styles/globals.css | 9 +++++ src/utils/Interfaces.ts | 6 +++ 7 files changed, 68 insertions(+), 40 deletions(-) create mode 100644 src/pages/assessments/subjectDetail/[userId].tsx diff --git a/src/components/DynamicForm.tsx b/src/components/DynamicForm.tsx index 073aafe0..2f1e6aa4 100644 --- a/src/components/DynamicForm.tsx +++ b/src/components/DynamicForm.tsx @@ -177,7 +177,7 @@ const DynamicForm: React.FC = ({ } return ( -
+
= ({ console.log(isCreateCentered); return ( -
- <> + <> + + {!isCreateCentered && !isCreatedFacilitator && ( - -
+ + ); }; diff --git a/src/components/SimpleModal.tsx b/src/components/SimpleModal.tsx index e4cfff41..fdefb511 100644 --- a/src/components/SimpleModal.tsx +++ b/src/components/SimpleModal.tsx @@ -91,9 +91,7 @@ const SimpleModal: React.FC = ({ - - {children} - + {children} {showFooter ? ( diff --git a/src/pages/assessments/[userId].tsx b/src/pages/assessments/[userId].tsx index eb870293..530827f8 100644 --- a/src/pages/assessments/[userId].tsx +++ b/src/pages/assessments/[userId].tsx @@ -16,26 +16,15 @@ import { serverSideTranslations } from 'next-i18next/serverSideTranslations'; import CheckCircleIcon from '@mui/icons-material/CheckCircle'; import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord'; import { getAssessmentSubjects } from '@/services/UpdateAssesmentService'; - -interface Assessment { - id: string; - subject: string; - score: string; - date: string; -} - -interface AssessmentSubject { - userId: number; - subject: string; - score: string; - date: string; -} +import { Assessments } from '@/utils/Interfaces'; +import { useRouter } from 'next/router'; function AssessmentsDetails() { const theme = useTheme(); const { t } = useTranslation(); + const router = useRouter(); const [assessmentListSubject, setAssessmentListSubject] = useState< - Assessment[] + Assessments[] >([]); const handleBackEvent = () => { @@ -56,16 +45,14 @@ function AssessmentsDetails() { }, []); useEffect(() => { - const fetchData = async () => { - try { - const res: AssessmentSubject[] = await getAssessmentSubjects(); // Await the promise - setAssessmentListSubject(res); - } catch (error) { - console.error('Error fetching assessment subjects:', error); - } - }; - fetchData(); + const res: any = getAssessmentSubjects(); + setAssessmentListSubject(res); }, []); + const handleAssessmentSubjectDetails = (userId: string) => { + router.push(`./subjectDetail/${userId}`); + + console.log(); + }; return ( <> @@ -148,7 +135,7 @@ function AssessmentsDetails() { {assessmentListSubject.map((assessment) => ( - + + handleAssessmentSubjectDetails(assessment?.userId) + } > +
+ + ); +} + +export async function getStaticProps({ locale }: any) { + return { + props: { + ...(await serverSideTranslations(locale, ['common'])), + // Will be passed to the page component as props + }, + }; +} + +export default SubjectDetail; diff --git a/src/styles/globals.css b/src/styles/globals.css index bf911ea4..b8eccce0 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -987,3 +987,12 @@ input[type='number']::-webkit-outer-spin-button { legend.Mui-focused { color: inherit !important; } + + +.form-parent .rjsf .field-object{ + min-height: 100%; + max-height: 55vh; + overflow-y: auto; + padding-left: 16px; + padding-right: 16px; +} \ No newline at end of file diff --git a/src/utils/Interfaces.ts b/src/utils/Interfaces.ts index ebab6bbd..a4c11c6a 100644 --- a/src/utils/Interfaces.ts +++ b/src/utils/Interfaces.ts @@ -474,4 +474,10 @@ export interface AssessmentSubject { subject: string; score: string; date :string; +} +export interface Assessments { + userId: string; + subject: string; + score: string; + date: string; } \ No newline at end of file From 8998e16ab3987c380a61088f8ac31c44eefc09d9 Mon Sep 17 00:00:00 2001 From: ttpl-rt-099 Date: Thu, 8 Aug 2024 10:42:54 +0530 Subject: [PATCH 4/8] Issue #PS-1534 feat: Foundation Course detail view UI implementation --- src/pages/assessments/[userId].tsx | 18 +-- .../assessments/subjectDetail/[userId].tsx | 140 +++++++++++++++++- src/services/UpdateAssesmentService.ts | 27 +++- src/utils/Interfaces.ts | 6 + 4 files changed, 178 insertions(+), 13 deletions(-) diff --git a/src/pages/assessments/[userId].tsx b/src/pages/assessments/[userId].tsx index 530827f8..1ad14b15 100644 --- a/src/pages/assessments/[userId].tsx +++ b/src/pages/assessments/[userId].tsx @@ -1,6 +1,10 @@ -import { useEffect, useState } from 'react'; import Header from '@/components/Header'; -import { useTheme, Theme } from '@mui/material/styles'; +import { getAssessmentSubjects } from '@/services/UpdateAssesmentService'; +import { logEvent } from '@/utils/googleAnalytics'; +import { Assessments } from '@/utils/Interfaces'; +import CheckCircleIcon from '@mui/icons-material/CheckCircle'; +import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord'; +import KeyboardBackspaceOutlinedIcon from '@mui/icons-material/KeyboardBackspaceOutlined'; import { Box, FormControl, @@ -9,15 +13,11 @@ import { Select, Typography, } from '@mui/material'; -import { useTranslation } from 'react-i18next'; -import { logEvent } from '@/utils/googleAnalytics'; -import KeyboardBackspaceOutlinedIcon from '@mui/icons-material/KeyboardBackspaceOutlined'; +import { useTheme } from '@mui/material/styles'; import { serverSideTranslations } from 'next-i18next/serverSideTranslations'; -import CheckCircleIcon from '@mui/icons-material/CheckCircle'; -import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord'; -import { getAssessmentSubjects } from '@/services/UpdateAssesmentService'; -import { Assessments } from '@/utils/Interfaces'; import { useRouter } from 'next/router'; +import { useEffect, useState } from 'react'; +import { useTranslation } from 'react-i18next'; function AssessmentsDetails() { const theme = useTheme(); diff --git a/src/pages/assessments/subjectDetail/[userId].tsx b/src/pages/assessments/subjectDetail/[userId].tsx index 13e69957..22b45831 100644 --- a/src/pages/assessments/subjectDetail/[userId].tsx +++ b/src/pages/assessments/subjectDetail/[userId].tsx @@ -1,20 +1,154 @@ import Header from '@/components/Header'; -import React from 'react'; +import React, { useEffect, useState } from 'react'; import { serverSideTranslations } from 'next-i18next/serverSideTranslations'; +import { Box, Divider, Typography } from '@mui/material'; +import { logEvent } from '@/utils/googleAnalytics'; +import KeyboardBackspaceOutlinedIcon from '@mui/icons-material/KeyboardBackspaceOutlined'; +import { useTheme } from '@mui/material/styles'; +import { useTranslation } from 'react-i18next'; +import { getAssessmentQuestion } from '@/services/UpdateAssesmentService'; + +// Define types for the assessment question data +interface AssessmentQuestion { + question: string; + score: number; +} function SubjectDetail() { + const theme = useTheme(); + const { t } = useTranslation(); + const [assessmentQuestions, setAssessmentQuestions] = useState< + AssessmentQuestion[] + >([]); + + const handleBackEvent = () => { + window.history.back(); + logEvent({ + action: 'back-button-clicked-attendance-overview', + category: 'Attendance Overview Page', + label: 'Back Button Clicked', + }); + }; + + useEffect(() => { + const fetchAssessmentQuestions = async () => { + const res = await getAssessmentQuestion(); // Assume this returns a promise + setAssessmentQuestions(res); + }; + + fetchAssessmentQuestions(); + }, []); + return ( <>
+ + + + + userName {/* Replace with dynamic username */} + + + Subject + + + + + + + Submitted On : 2 Feb, 2024 + + + 210/250 + + + + + 42 out of 50 correct answers + + + {assessmentQuestions.map((questionItem, index) => ( + + + {questionItem.question} + + + {questionItem.score} + + + ))} + ); } -export async function getStaticProps({ locale }: any) { +export async function getStaticPaths() { + const paths = [ + { params: { userId: '1' } }, + { params: { userId: '2' } }, + { params: { userId: '3' } }, + ]; + + return { + paths, + fallback: false, + }; +} + +export async function getStaticProps({ + params, + locale, +}: { + params: any; + locale: string; +}) { return { props: { ...(await serverSideTranslations(locale, ['common'])), - // Will be passed to the page component as props }, }; } diff --git a/src/services/UpdateAssesmentService.ts b/src/services/UpdateAssesmentService.ts index 3be1fe60..333ad333 100644 --- a/src/services/UpdateAssesmentService.ts +++ b/src/services/UpdateAssesmentService.ts @@ -1,4 +1,4 @@ -import { Assessment, AssessmentSubject } from "@/utils/Interfaces"; +import { Assessment, AssessmentQuestion, AssessmentSubject } from "@/utils/Interfaces"; export const updateAssessment = (): Assessment[] => { return [ @@ -51,4 +51,29 @@ export const getAssessmentSubjects = (): AssessmentSubject[] => { date:'2 Feb, 2024' }, ]; +}; +export const getAssessmentQuestion = (): AssessmentQuestion[] => { + return [ + { + userId: 1, + question: 'Q1. If we minus 712 from 1500, how much do we get?', + score: 78, + }, + { + userId: 2, + question: 'Q2. Find the missing terms in multiple of 3: 3, 6, 9, __, 15', + score: 98, + + }, + { + userId: 3, + question: 'Q3. Solve 24÷8+2', + score: 30, + }, + { + userId: 4, + question: 'Q4. If we minus 712 from 1500, how much do we get?', + score: 13, + }, + ]; }; \ No newline at end of file diff --git a/src/utils/Interfaces.ts b/src/utils/Interfaces.ts index a4c11c6a..5319dc79 100644 --- a/src/utils/Interfaces.ts +++ b/src/utils/Interfaces.ts @@ -480,4 +480,10 @@ export interface Assessments { subject: string; score: string; date: string; +} + +export interface AssessmentQuestion { + userId: number; + question: string; + score: number; } \ No newline at end of file From 99f6a0c45366d9029a45a72afaa4f188ac9e8ce2 Mon Sep 17 00:00:00 2001 From: ttpl-rt-099 Date: Thu, 8 Aug 2024 12:30:15 +0530 Subject: [PATCH 5/8] Issue #PS-1534 feat: Foundation Course detail view UI implementation --- public/locales/en/common.json | 3 +- src/pages/assessments.tsx | 37 +++++++++++++------ src/pages/assessments/[userId].tsx | 37 +++++++++++++------ .../assessments/subjectDetail/[userId].tsx | 26 ++++++++----- src/services/UpdateAssesmentService.ts | 2 +- 5 files changed, 72 insertions(+), 33 deletions(-) diff --git a/public/locales/en/common.json b/public/locales/en/common.json index 46343eaa..a315008b 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -459,6 +459,7 @@ "ASSESSMENTS":{ "ASSESSMENTS":"Assessments", "CENTER":"Center", - "ASSESSMENT_TYPE":"Assessment Type" + "ASSESSMENT_TYPE":"Assessment Type", + "COMPLETED_ASSESSMENT":"completed the assessment" } } diff --git a/src/pages/assessments.tsx b/src/pages/assessments.tsx index 1fdaa915..5339c0dc 100644 --- a/src/pages/assessments.tsx +++ b/src/pages/assessments.tsx @@ -22,6 +22,8 @@ import ArrowDropDownSharpIcon from '@mui/icons-material/ArrowDropDownSharp'; import SortingModal from '@/components/SortingModal'; import { updateAssessment } from '../services/UpdateAssesmentService'; import { useRouter } from 'next/router'; +import RemoveIcon from '@mui/icons-material/Remove'; +import RadioButtonUncheckedIcon from '@mui/icons-material/RadioButtonUnchecked'; const Assessments = () => { const theme = useTheme(); @@ -70,7 +72,7 @@ const Assessments = () => { display: 'flex', justifyContent: 'left', alignItems: 'center', - color: '#4D4639', + color: theme?.palette?.warning['A200'], padding: '20px 20px 5px', }} width="100%" @@ -173,9 +175,13 @@ const Assessments = () => { - 20/24 completed the assessment + 20/24 {t('ASSESSMENTS.COMPLETED_ASSESSMENT')}