From db14c868722f20a60a3cd27b04db92a69104ce1f Mon Sep 17 00:00:00 2001 From: Arif Date: Tue, 16 Jul 2024 12:45:02 +0530 Subject: [PATCH 1/5] Issue #PS-1389 feat: UI for displaying center wise attendance report as per Figma --- src/components/AttendanceComparison.tsx | 34 +++++++++++++++++++++-- src/components/CohortSelectionSection.tsx | 33 ++++++++++++---------- src/services/AttendanceService.ts | 15 ++++++++++ src/utils/Interfaces.ts | 12 ++++++++ 4 files changed, 78 insertions(+), 16 deletions(-) diff --git a/src/components/AttendanceComparison.tsx b/src/components/AttendanceComparison.tsx index 38019347..7eadba6f 100644 --- a/src/components/AttendanceComparison.tsx +++ b/src/components/AttendanceComparison.tsx @@ -21,12 +21,18 @@ import { import { useTranslation } from 'next-i18next'; import useStore from '../store/store'; import { useTheme } from '@mui/material/styles'; +import { + attendanceInPercentageStatusList, + attendanceStatusList, + overallAttendanceInPercentageStatusList, +} from '@/services/AttendanceService'; const AttendanceComparison: React.FC = () => { const { t } = useTranslation(); const [centerType, setCenterType] = useState('Regular'); const store = useStore(); const theme = useTheme(); + const scope = 'student'; const handleCenterTypeChange = ( event: React.ChangeEvent @@ -34,7 +40,26 @@ const AttendanceComparison: React.FC = () => { setCenterType(event.target.value); }; - const data = store?.pairs?.filter((pair: { cohortType: string }) => pair?.cohortType === centerType) + useEffect(() => { + const data = store?.pairs?.map((pair: { cohortId: any }) => pair?.cohortId); + const fetchData = async () => { + data.map((pair: { cohortId: any }) => pair.cohortId); + const promises = data.map((cohortId: any) => + overallAttendanceInPercentageStatusList({ + limit: 0, + page: 0, + filters: { contextId: cohortId, scope }, + facets: ['contextId'], + }) + ); + const results = await Promise.all(promises); + console.log(results); + }; + fetchData(); + }, []); + + const data = store?.pairs + ?.filter((pair: { cohortType: string }) => pair?.cohortType === centerType) .map((pair: { name: any }) => ({ name: pair.name, Attendance: Math.floor(Math.random() * 100), @@ -101,7 +126,12 @@ const AttendanceComparison: React.FC = () => { `${value}`} /> - + diff --git a/src/components/CohortSelectionSection.tsx b/src/components/CohortSelectionSection.tsx index 4112e2a1..cdfd8172 100644 --- a/src/components/CohortSelectionSection.tsx +++ b/src/components/CohortSelectionSection.tsx @@ -19,7 +19,6 @@ import { useTheme } from '@mui/material/styles'; import { useTranslation } from 'next-i18next'; import useStore from '@/store/store'; - interface CohortSelectionSectionProps { classId: string; setClassId: React.Dispatch>; @@ -52,11 +51,11 @@ interface ChildData { childData: ChildData[]; } interface NameTypePair { + cohortId: string; name: string; cohortType: string; } - const CohortSelectionSection: React.FC = ({ classId, setClassId, @@ -107,15 +106,23 @@ const CohortSelectionSection: React.FC = ({ }); console.log('Response:', response); if (response && response?.length > 0) { - - const extractNamesAndCohortTypes = (data: ChildData[]): NameTypePair[] => { + const extractNamesAndCohortTypes = ( + data: ChildData[] + ): NameTypePair[] => { let nameTypePairs: NameTypePair[] = []; - + const recursiveExtract = (items: ChildData[]) => { - items.forEach(item => { - const cohortType = item?.customField?.find(field => field.label === "Type of Cohort")?.value || "Unknown"; - if (item && item?.name) { - nameTypePairs.push({ name: item?.name, cohortType }); + items.forEach((item) => { + const cohortType = + item?.customField?.find( + (field) => field.label === 'Type of Cohort' + )?.value || 'Unknown'; + if (item?.cohortId && item && item?.name) { + nameTypePairs.push({ + cohortId: item?.cohortId, + name: item?.name, + cohortType, + }); } if (item?.childData && item?.childData?.length > 0) { recursiveExtract(item?.childData); @@ -125,23 +132,21 @@ const CohortSelectionSection: React.FC = ({ recursiveExtract(data); return nameTypePairs; }; - + if (response && response?.length > 0) { const nameTypePairs = extractNamesAndCohortTypes(response); - setPairs(nameTypePairs); - console.log("HELLO", nameTypePairs); + setPairs(nameTypePairs); } } if (response && response.length > 0) { if (response[0].type === cohortHierarchy.COHORT) { - const filteredData = response ?.map((item: any) => ({ cohortId: item?.cohortId, parentId: item?.parentId, name: item?.cohortName || item?.name, })) - ?.filter(Boolean); + ?.filter(Boolean); setCohortsData(filteredData); if (filteredData.length > 0) { if (typeof window !== 'undefined' && window.localStorage) { diff --git a/src/services/AttendanceService.ts b/src/services/AttendanceService.ts index 34713df1..c3dc0d4d 100644 --- a/src/services/AttendanceService.ts +++ b/src/services/AttendanceService.ts @@ -7,6 +7,7 @@ import { LearnerAttendanceProps, MarkAttendanceParams, allCenterAttendancePercentParam, + OverallAttendancePercentageProps, } from '../utils/Interfaces'; export const bulkAttendance = async ({ @@ -89,6 +90,20 @@ export const attendanceInPercentageStatusList = async ({ }); }; +export const overallAttendanceInPercentageStatusList = async ({ + limit, + page, + filters: { contextId, scope }, + facets, +}: OverallAttendancePercentageProps): Promise => { + return postAttendanceList({ + limit, + page, + filters: { contextId, scope }, + facets, + }); +}; + export const getLearnerAttendanceStatus = async ({ limit, page, diff --git a/src/utils/Interfaces.ts b/src/utils/Interfaces.ts index 7fc73711..8c8855d3 100644 --- a/src/utils/Interfaces.ts +++ b/src/utils/Interfaces.ts @@ -159,6 +159,18 @@ export interface AttendancePercentageProps { facets: Array; } + +export interface OverallAttendancePercentageProps { + limit: number; + page: number; + filters: { + contextId: string; + scope: string; + }; + facets: Array; +} + + export interface LearnerAttendanceProps { limit: number; page: number; From 02a04139aeacd278a4c0c7ddd41a16060159bfbd Mon Sep 17 00:00:00 2001 From: Arif Date: Tue, 16 Jul 2024 14:12:50 +0530 Subject: [PATCH 2/5] Issue #PS-1389 feat: UI for displaying center wise attendance report as per Figma within a Block with API integration --- src/components/AttendanceComparison.tsx | 7 ++++--- src/components/CohortSelectionSection.tsx | 4 ++-- src/store/store.js | 4 ++-- src/utils/app.constant.ts | 5 +++++ 4 files changed, 13 insertions(+), 7 deletions(-) diff --git a/src/components/AttendanceComparison.tsx b/src/components/AttendanceComparison.tsx index 7eadba6f..31bc2cdc 100644 --- a/src/components/AttendanceComparison.tsx +++ b/src/components/AttendanceComparison.tsx @@ -26,13 +26,14 @@ import { attendanceStatusList, overallAttendanceInPercentageStatusList, } from '@/services/AttendanceService'; +import { cohortConstant } from '@/utils/app.constant'; const AttendanceComparison: React.FC = () => { const { t } = useTranslation(); const [centerType, setCenterType] = useState('Regular'); const store = useStore(); const theme = useTheme(); - const scope = 'student'; + const scope = cohortConstant.STUDENT; const handleCenterTypeChange = ( event: React.ChangeEvent @@ -41,7 +42,7 @@ const AttendanceComparison: React.FC = () => { }; useEffect(() => { - const data = store?.pairs?.map((pair: { cohortId: any }) => pair?.cohortId); + const data = store?.cohorts?.map((pair: { cohortId: any }) => pair?.cohortId); const fetchData = async () => { data.map((pair: { cohortId: any }) => pair.cohortId); const promises = data.map((cohortId: any) => @@ -58,7 +59,7 @@ const AttendanceComparison: React.FC = () => { fetchData(); }, []); - const data = store?.pairs + const data = store?.cohorts ?.filter((pair: { cohortType: string }) => pair?.cohortType === centerType) .map((pair: { name: any }) => ({ name: pair.name, diff --git a/src/components/CohortSelectionSection.tsx b/src/components/CohortSelectionSection.tsx index cdfd8172..7499d28c 100644 --- a/src/components/CohortSelectionSection.tsx +++ b/src/components/CohortSelectionSection.tsx @@ -80,7 +80,7 @@ const CohortSelectionSection: React.FC = ({ const theme = useTheme(); const pathname = usePathname(); // Get the current pathname const { t } = useTranslation(); - const setPairs = useStore((state) => state.setPairs); + const setCohorts = useStore((state) => state.setCohorts); useEffect(() => { if (typeof window !== 'undefined' && window.localStorage) { @@ -135,7 +135,7 @@ const CohortSelectionSection: React.FC = ({ if (response && response?.length > 0) { const nameTypePairs = extractNamesAndCohortTypes(response); - setPairs(nameTypePairs); + setCohorts(nameTypePairs); } } if (response && response.length > 0) { diff --git a/src/store/store.js b/src/store/store.js index 72285c19..7753fd1d 100644 --- a/src/store/store.js +++ b/src/store/store.js @@ -6,10 +6,10 @@ const useStore = create( (set) => ({ value: '', role: '', - pairs: [], + cohorts: [], setValue: (newValue) => set((state) => ({ value: newValue })), setUserRole: (newRole) => set((state) => ({ userRole: newRole })), - setPairs: (newPairs) => set(() => ({ pairs: newPairs })), + setCohorts: (newCohorts) => set(() => ({ cohorts: newCohorts })), }), { name: 'teacherApp', diff --git a/src/utils/app.constant.ts b/src/utils/app.constant.ts index 147174ee..7b0f6757 100644 --- a/src/utils/app.constant.ts +++ b/src/utils/app.constant.ts @@ -32,3 +32,8 @@ export enum sessionModeConstant { ONLINE = 'online', OFFLINE = 'offline', } + +export enum cohortConstant { + STUDENT = 'Student', + +} From b89f49d0e3d18f5f00a168017d2415d160d099cd Mon Sep 17 00:00:00 2001 From: Arif Date: Tue, 16 Jul 2024 14:25:15 +0530 Subject: [PATCH 3/5] Issue #PS-1389 feat: UI for displaying center wise attendance report as per Figma within a Block with API integration --- src/components/AttendanceComparison.tsx | 4 ++-- src/utils/app.constant.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/AttendanceComparison.tsx b/src/components/AttendanceComparison.tsx index 31bc2cdc..2d8f675e 100644 --- a/src/components/AttendanceComparison.tsx +++ b/src/components/AttendanceComparison.tsx @@ -33,8 +33,8 @@ const AttendanceComparison: React.FC = () => { const [centerType, setCenterType] = useState('Regular'); const store = useStore(); const theme = useTheme(); - const scope = cohortConstant.STUDENT; - + const scope = cohortConstant?.STUDENT; + const handleCenterTypeChange = ( event: React.ChangeEvent ) => { diff --git a/src/utils/app.constant.ts b/src/utils/app.constant.ts index 7b0f6757..67ba03e1 100644 --- a/src/utils/app.constant.ts +++ b/src/utils/app.constant.ts @@ -34,6 +34,6 @@ export enum sessionModeConstant { } export enum cohortConstant { - STUDENT = 'Student', + STUDENT = 'student', } From 7171e1e0866db5df81d299619f5b9d1c764a77ac Mon Sep 17 00:00:00 2001 From: Arif Date: Tue, 16 Jul 2024 14:40:44 +0530 Subject: [PATCH 4/5] comments resolved --- src/components/AttendanceComparison.tsx | 4 ++-- src/utils/app.constant.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/AttendanceComparison.tsx b/src/components/AttendanceComparison.tsx index 2d8f675e..64f0ea51 100644 --- a/src/components/AttendanceComparison.tsx +++ b/src/components/AttendanceComparison.tsx @@ -33,8 +33,8 @@ const AttendanceComparison: React.FC = () => { const [centerType, setCenterType] = useState('Regular'); const store = useStore(); const theme = useTheme(); - const scope = cohortConstant?.STUDENT; - + const scope = cohortConstant?.COHORT_PRIVILEGES; + const handleCenterTypeChange = ( event: React.ChangeEvent ) => { diff --git a/src/utils/app.constant.ts b/src/utils/app.constant.ts index 67ba03e1..97ce5aa0 100644 --- a/src/utils/app.constant.ts +++ b/src/utils/app.constant.ts @@ -34,6 +34,6 @@ export enum sessionModeConstant { } export enum cohortConstant { - STUDENT = 'student', + COHORT_PRIVILEGES = 'student', } From 5d3a98ebaed73e858a0220ea65bb1f4ca43658db Mon Sep 17 00:00:00 2001 From: Arif Date: Tue, 16 Jul 2024 14:42:36 +0530 Subject: [PATCH 5/5] comments --- src/components/AttendanceComparison.tsx | 6 +++--- src/utils/app.constant.ts | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/AttendanceComparison.tsx b/src/components/AttendanceComparison.tsx index 64f0ea51..7add8088 100644 --- a/src/components/AttendanceComparison.tsx +++ b/src/components/AttendanceComparison.tsx @@ -26,15 +26,15 @@ import { attendanceStatusList, overallAttendanceInPercentageStatusList, } from '@/services/AttendanceService'; -import { cohortConstant } from '@/utils/app.constant'; +import { cohortPrivileges } from '@/utils/app.constant'; const AttendanceComparison: React.FC = () => { const { t } = useTranslation(); const [centerType, setCenterType] = useState('Regular'); const store = useStore(); const theme = useTheme(); - const scope = cohortConstant?.COHORT_PRIVILEGES; - + const scope = cohortPrivileges?.STUDENT; + const handleCenterTypeChange = ( event: React.ChangeEvent ) => { diff --git a/src/utils/app.constant.ts b/src/utils/app.constant.ts index 97ce5aa0..905201ff 100644 --- a/src/utils/app.constant.ts +++ b/src/utils/app.constant.ts @@ -33,7 +33,7 @@ export enum sessionModeConstant { OFFLINE = 'offline', } -export enum cohortConstant { - COHORT_PRIVILEGES = 'student', +export enum cohortPrivileges { + STUDENT = 'student', }