From 245a8f7f7f14496ff97acf7c376a572ca22ab042 Mon Sep 17 00:00:00 2001 From: NSUWAL123 Date: Tue, 25 Jun 2024 13:41:20 +0545 Subject: [PATCH 01/22] fix(submissionInfographics): update taskInfo type & message --- .../ProjectSubmissions/SubmissionsInfographics.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/frontend/src/components/ProjectSubmissions/SubmissionsInfographics.tsx b/src/frontend/src/components/ProjectSubmissions/SubmissionsInfographics.tsx index 0c7ee65893..5b59e61df3 100644 --- a/src/frontend/src/components/ProjectSubmissions/SubmissionsInfographics.tsx +++ b/src/frontend/src/components/ProjectSubmissions/SubmissionsInfographics.tsx @@ -119,7 +119,7 @@ const SubmissionsInfographics = ({ toggleView }) => { const validatedVsMappedLoading: boolean = CoreModules.useAppSelector( (state) => state.submission.validatedVsMappedLoading, ); - const taskInfo: taskSubmissionInfoType = CoreModules.useAppSelector((state) => state.task.taskInfo); + const taskInfo: taskSubmissionInfoType[] = CoreModules.useAppSelector((state) => state.task.taskInfo); const taskLoading: boolean = CoreModules.useAppSelector((state) => state.task.taskLoading); useEffect(() => { @@ -163,7 +163,6 @@ const SubmissionsInfographics = ({ toggleView }) => { const totalFeatureCount = taskInfo.reduce((total, task) => total + task.feature_count, 0); const totalSubmissionCount = taskInfo.reduce((total, task) => total + task.submission_count, 0); - const totalTaskCount = taskInfo.length; const projectProgressData = [ { names: 'Current', @@ -239,7 +238,7 @@ const SubmissionsInfographics = ({ toggleView }) => { /> ) : (
- No tasks validated or mapped yet! + No Tasks Validated or Mapped in the Last 30 Days
) } From 21871839e5dcfd1cf5c6f55c14dbd131e1b681ed Mon Sep 17 00:00:00 2001 From: NSUWAL123 Date: Tue, 25 Jun 2024 13:42:36 +0545 Subject: [PATCH 02/22] fix(taskSlice): increase submission count if status is not 0 --- src/frontend/src/store/slices/TaskSlice.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/frontend/src/store/slices/TaskSlice.ts b/src/frontend/src/store/slices/TaskSlice.ts index dda28ab5f2..9b634ce470 100644 --- a/src/frontend/src/store/slices/TaskSlice.ts +++ b/src/frontend/src/store/slices/TaskSlice.ts @@ -41,7 +41,7 @@ const TaskSlice = createSlice({ }, SetTaskSubmissionStates(state, action) { - const groupedPayload: Record = action.payload.reduce((acc, item) => { + const groupedPayload: Record = action.payload?.reduce((acc, item) => { if (!acc[item.task_id]) { acc[item.task_id] = []; } @@ -57,7 +57,7 @@ const TaskSlice = createSlice({ let submissionCount = 0; let lastSubmission: string | null = null; items.forEach((item) => { - if (item.status === task_status.MAPPED) { + if (item.status > 0) { submissionCount++; } if (item.updated_at && (!lastSubmission || item.updated_at > lastSubmission)) { From a86425487dafe82a1b456ef723209efc052f0d63 Mon Sep 17 00:00:00 2001 From: NSUWAL123 Date: Tue, 25 Jun 2024 14:00:00 +0545 Subject: [PATCH 03/22] fix(submissionInfographics): use useSelector from reduxTypes --- .../SubmissionsInfographics.tsx | 36 +++++-------------- 1 file changed, 9 insertions(+), 27 deletions(-) diff --git a/src/frontend/src/components/ProjectSubmissions/SubmissionsInfographics.tsx b/src/frontend/src/components/ProjectSubmissions/SubmissionsInfographics.tsx index 5b59e61df3..7200c36ffc 100644 --- a/src/frontend/src/components/ProjectSubmissions/SubmissionsInfographics.tsx +++ b/src/frontend/src/components/ProjectSubmissions/SubmissionsInfographics.tsx @@ -11,14 +11,8 @@ import { ProjectSubmissionInfographicsService, ValidatedVsMappedInfographicsService, } from '@/api/SubmissionService'; -import { - submissionContributorsTypes, - submissionInfographicsTypes, - validatedVsMappedInfographicsTypes, -} from '@/models/submission/submissionModel'; -import { taskSubmissionInfoType } from '@/models/task/taskModel'; - import useDocumentTitle from '@/utilfunctions/useDocumentTitle'; +import { useAppSelector } from '@/types/reduxTypes'; const lineKeyData = [ { @@ -100,27 +94,15 @@ const SubmissionsInfographics = ({ toggleView }) => { const params = CoreModules.useParams(); const projectId = params.projectId; - const submissionInfographicsData: submissionInfographicsTypes[] = CoreModules.useAppSelector( - (state) => state.submission.submissionInfographics, - ); - const submissionInfographicsLoading: boolean = CoreModules.useAppSelector( - (state) => state.submission.submissionInfographicsLoading, - ); - const submissionContributorsData: submissionContributorsTypes[] = CoreModules.useAppSelector( - (state) => state.submission.submissionContributors, - ); - const submissionContributorsLoading: boolean = CoreModules.useAppSelector( - (state) => state.submission.submissionContributorsLoading, - ); + const submissionInfographicsData = useAppSelector((state) => state.submission.submissionInfographics); + const submissionInfographicsLoading = useAppSelector((state) => state.submission.submissionInfographicsLoading); + const submissionContributorsData = useAppSelector((state) => state.submission.submissionContributors); + const submissionContributorsLoading = useAppSelector((state) => state.submission.submissionContributorsLoading); const [submissionProjection, setSubmissionProjection] = useState<10 | 30>(10); - const validatedVsMappedInfographics: validatedVsMappedInfographicsTypes[] = CoreModules.useAppSelector( - (state) => state.submission.validatedVsMappedInfographics, - ); - const validatedVsMappedLoading: boolean = CoreModules.useAppSelector( - (state) => state.submission.validatedVsMappedLoading, - ); - const taskInfo: taskSubmissionInfoType[] = CoreModules.useAppSelector((state) => state.task.taskInfo); - const taskLoading: boolean = CoreModules.useAppSelector((state) => state.task.taskLoading); + const validatedVsMappedInfographics = useAppSelector((state) => state.submission.validatedVsMappedInfographics); + const validatedVsMappedLoading = useAppSelector((state) => state.submission.validatedVsMappedLoading); + const taskInfo = useAppSelector((state) => state.task.taskInfo); + const taskLoading = useAppSelector((state) => state.task.taskLoading); useEffect(() => { dispatch( From 07eb49b8bb290ddcde2eab2d09db604b8579ba6e Mon Sep 17 00:00:00 2001 From: NSUWAL123 Date: Wed, 26 Jun 2024 12:02:10 +0545 Subject: [PATCH 04/22] feat(submissionsInfographics): calculate form submissions data on frontend replacing api call --- .../SubmissionsInfographics.tsx | 159 ++++++++++++++++-- 1 file changed, 146 insertions(+), 13 deletions(-) diff --git a/src/frontend/src/components/ProjectSubmissions/SubmissionsInfographics.tsx b/src/frontend/src/components/ProjectSubmissions/SubmissionsInfographics.tsx index 7200c36ffc..929c938712 100644 --- a/src/frontend/src/components/ProjectSubmissions/SubmissionsInfographics.tsx +++ b/src/frontend/src/components/ProjectSubmissions/SubmissionsInfographics.tsx @@ -8,11 +8,12 @@ import CoreModules from '@/shared/CoreModules'; import InfographicsCard from '@/components/ProjectSubmissions/InfographicsCard'; import { ProjectContributorsService, - ProjectSubmissionInfographicsService, + // ProjectSubmissionInfographicsService, ValidatedVsMappedInfographicsService, } from '@/api/SubmissionService'; import useDocumentTitle from '@/utilfunctions/useDocumentTitle'; import { useAppSelector } from '@/types/reduxTypes'; +// import { task_status } from '@/types/enums'; const lineKeyData = [ { @@ -83,6 +84,34 @@ const lineKeyData = [ }, ]; +type formSubmissionType = { date: string; count: number; label: string }; +// type validatedMappedType = { date: string; Validated: number; Mapped: number; label: string }; + +// get date N days ago +const dateNDaysAgo = (NDays: number) => { + return new Date(new Date().getTime() - NDays * 24 * 60 * 60 * 1000).toISOString(); +}; + +// extract month & day in MM/DD format for chart date labels +const getMonthDate = (date: string) => { + const splittedDate = date?.split('T')[0]?.split('-'); + return `${splittedDate[1]}/${splittedDate[2]}`; +}; + +// generates an array of date strings for last 30 days +// const generateLast30Days = (): string[] => { +// const last30Days: string[] = []; +// const today = new Date(); + +// for (let i = 0; i < 30; i++) { +// const date = new Date(); +// date.setDate(today.getDate() - i); +// last30Days.push(date.toISOString().split('T')[0]); +// } + +// return last30Days; +// }; + const SubmissionsInfographics = ({ toggleView }) => { useDocumentTitle('Submission Infographics'); const formSubmissionRef = useRef(null); @@ -94,8 +123,8 @@ const SubmissionsInfographics = ({ toggleView }) => { const params = CoreModules.useParams(); const projectId = params.projectId; - const submissionInfographicsData = useAppSelector((state) => state.submission.submissionInfographics); - const submissionInfographicsLoading = useAppSelector((state) => state.submission.submissionInfographicsLoading); + // const submissionInfographicsData = useAppSelector((state) => state.submission.submissionInfographics); + // const submissionInfographicsLoading = useAppSelector((state) => state.submission.submissionInfographicsLoading); const submissionContributorsData = useAppSelector((state) => state.submission.submissionContributors); const submissionContributorsLoading = useAppSelector((state) => state.submission.submissionContributorsLoading); const [submissionProjection, setSubmissionProjection] = useState<10 | 30>(10); @@ -103,14 +132,118 @@ const SubmissionsInfographics = ({ toggleView }) => { const validatedVsMappedLoading = useAppSelector((state) => state.submission.validatedVsMappedLoading); const taskInfo = useAppSelector((state) => state.task.taskInfo); const taskLoading = useAppSelector((state) => state.task.taskLoading); + const entityOsmMapLoading = useAppSelector((state) => state.project.entityOsmMapLoading); + + const entityList = useAppSelector((state) => state.project.entityOsmMap); + const updatedEntities = entityList?.filter((entity) => entity?.updated_at); + const today = new Date().toISOString(); + const [formSubmissionsData, setFormSubmissionsData] = useState([]); + // const [validatedVsMappedInfographics, setValidatedVsMappedInfographics] = useState([]); + // data for validated vs mapped graph useEffect(() => { - dispatch( - ProjectSubmissionInfographicsService( - `${import.meta.env.VITE_API_URL}/submission/submission_page/${projectId}?days=${submissionProjection}`, - ), - ); - }, [submissionProjection]); + if (updatedEntities?.length === 0) return; + + // get entities updated within the last 10 or 30 days + const updatedEntityLastNDays = updatedEntities?.filter((entity) => { + const updatedDate = new Date(entity?.updated_at).toISOString(); + return updatedDate >= dateNDaysAgo(submissionProjection) && updatedDate <= today; + }); + + // group entity submission according to date + const submissions: formSubmissionType[] = []; + updatedEntityLastNDays?.map((entity) => { + if (submissions?.find((submission) => submission.label === getMonthDate(entity.updated_at))) { + const index = submissions.findIndex((submission) => submission.label === getMonthDate(entity.updated_at)); + submissions[index].count += 1; + } else { + submissions.push({ + date: entity.updated_at?.split('T')[0], + label: getMonthDate(entity.updated_at), + count: 1, + }); + } + }); + + // sort submissions by ascending date + const sortedEntitySubmissions = submissions?.sort((a, b) => { + const dateA: any = new Date(a.date); + const dateB: any = new Date(b.date); + return dateA - dateB; + }); + + setFormSubmissionsData(sortedEntitySubmissions); + }, [entityList, submissionProjection]); + + // // data for planned vs actual graph + // useEffect(() => { + // if (updatedEntities?.length === 0) return; + + // // get entities updated within the last 30 days + // const mappedValidatedEntities = updatedEntities?.filter((entity) => { + // const updatedDate = new Date(entity?.updated_at).toISOString(); + // return ( + // updatedDate >= dateNDaysAgo(30) && + // updatedDate <= today && + // (entity?.status === task_status['MAPPED'] || entity?.status === task_status['VALIDATED']) + // ); + // }); + + // // group entities by date with validated & mapped count + // const validatedMappedGroupedEntity: validatedMappedType[] = mappedValidatedEntities?.reduce( + // (acc: validatedMappedType[], entity) => { + // const date = entity?.updated_at.split('T')[0]; + // const index = acc.findIndex((submission) => submission.date === date); + // if (acc?.find((submission) => submission.date === date)) { + // if (entity?.status === task_status['MAPPED']) { + // acc[index].Mapped += 1; + // } + // if (entity?.status === task_status['VALIDATED']) { + // acc[index].Validated += 1; + // } + // } else { + // const splittedDate = date?.split('-'); + // const label = `${splittedDate[1]}/${splittedDate[2]}`; + // if (entity?.status === task_status['MAPPED']) { + // acc.push({ date: date, Validated: 0, Mapped: 1, label }); + // } + // if (entity?.status === task_status['VALIDATED']) { + // acc.push({ date: date, Validated: 1, Mapped: 0, label }); + // } + // } + // return acc; + // }, + // [], + // ); + + // // populate mapped & validated count if no mapped or validated count in the time frame + // const groupedEntityLast30Days = generateLast30Days()?.map((datex) => { + // const mappedValidatedValue = validatedMappedGroupedEntity.find((entity) => entity?.date === datex); + // if (mappedValidatedValue) { + // return mappedValidatedValue; + // } else { + // const splittedDate = datex?.split('-'); + // const label = `${splittedDate[1]}/${splittedDate[2]}`; + // return { date: datex, Validated: 0, Mapped: 0, label }; + // } + // }); + + // // sort grouped mapped & validated count by ascending date + // const sortedEntitySubmissions = groupedEntityLast30Days?.sort((a, b) => { + // const dateA: any = new Date(a.date); + // const dateB: any = new Date(b.date); + // return dateA - dateB; + // }); + // setValidatedVsMappedInfographics(sortedEntitySubmissions); + // }, [entityList]); + + // useEffect(() => { + // dispatch( + // ProjectSubmissionInfographicsService( + // `${import.meta.env.VITE_API_URL}/submission/submission_page/${projectId}?days=${submissionProjection}`, + // ), + // ); + // }, [submissionProjection]); useEffect(() => { dispatch( @@ -169,15 +302,15 @@ const SubmissionsInfographics = ({ toggleView }) => { header="Form Submissions" subHeader={} body={ - submissionInfographicsLoading ? ( + entityOsmMapLoading ? ( - ) : submissionInfographicsData.length > 0 ? ( + ) : formSubmissionsData.length > 0 ? ( ) : (
From efa943f471e45b85f344d71cb55a2f471f8e2c33 Mon Sep 17 00:00:00 2001 From: NSUWAL123 Date: Thu, 27 Jun 2024 10:33:42 +0545 Subject: [PATCH 05/22] fix(submissionsInfographics): remove data calculation for planned vs actual graph --- .../SubmissionsInfographics.tsx | 71 ++----------------- 1 file changed, 4 insertions(+), 67 deletions(-) diff --git a/src/frontend/src/components/ProjectSubmissions/SubmissionsInfographics.tsx b/src/frontend/src/components/ProjectSubmissions/SubmissionsInfographics.tsx index 929c938712..b249d732e4 100644 --- a/src/frontend/src/components/ProjectSubmissions/SubmissionsInfographics.tsx +++ b/src/frontend/src/components/ProjectSubmissions/SubmissionsInfographics.tsx @@ -138,7 +138,6 @@ const SubmissionsInfographics = ({ toggleView }) => { const updatedEntities = entityList?.filter((entity) => entity?.updated_at); const today = new Date().toISOString(); const [formSubmissionsData, setFormSubmissionsData] = useState([]); - // const [validatedVsMappedInfographics, setValidatedVsMappedInfographics] = useState([]); // data for validated vs mapped graph useEffect(() => { @@ -175,68 +174,6 @@ const SubmissionsInfographics = ({ toggleView }) => { setFormSubmissionsData(sortedEntitySubmissions); }, [entityList, submissionProjection]); - // // data for planned vs actual graph - // useEffect(() => { - // if (updatedEntities?.length === 0) return; - - // // get entities updated within the last 30 days - // const mappedValidatedEntities = updatedEntities?.filter((entity) => { - // const updatedDate = new Date(entity?.updated_at).toISOString(); - // return ( - // updatedDate >= dateNDaysAgo(30) && - // updatedDate <= today && - // (entity?.status === task_status['MAPPED'] || entity?.status === task_status['VALIDATED']) - // ); - // }); - - // // group entities by date with validated & mapped count - // const validatedMappedGroupedEntity: validatedMappedType[] = mappedValidatedEntities?.reduce( - // (acc: validatedMappedType[], entity) => { - // const date = entity?.updated_at.split('T')[0]; - // const index = acc.findIndex((submission) => submission.date === date); - // if (acc?.find((submission) => submission.date === date)) { - // if (entity?.status === task_status['MAPPED']) { - // acc[index].Mapped += 1; - // } - // if (entity?.status === task_status['VALIDATED']) { - // acc[index].Validated += 1; - // } - // } else { - // const splittedDate = date?.split('-'); - // const label = `${splittedDate[1]}/${splittedDate[2]}`; - // if (entity?.status === task_status['MAPPED']) { - // acc.push({ date: date, Validated: 0, Mapped: 1, label }); - // } - // if (entity?.status === task_status['VALIDATED']) { - // acc.push({ date: date, Validated: 1, Mapped: 0, label }); - // } - // } - // return acc; - // }, - // [], - // ); - - // // populate mapped & validated count if no mapped or validated count in the time frame - // const groupedEntityLast30Days = generateLast30Days()?.map((datex) => { - // const mappedValidatedValue = validatedMappedGroupedEntity.find((entity) => entity?.date === datex); - // if (mappedValidatedValue) { - // return mappedValidatedValue; - // } else { - // const splittedDate = datex?.split('-'); - // const label = `${splittedDate[1]}/${splittedDate[2]}`; - // return { date: datex, Validated: 0, Mapped: 0, label }; - // } - // }); - - // // sort grouped mapped & validated count by ascending date - // const sortedEntitySubmissions = groupedEntityLast30Days?.sort((a, b) => { - // const dateA: any = new Date(a.date); - // const dateB: any = new Date(b.date); - // return dateA - dateB; - // }); - // setValidatedVsMappedInfographics(sortedEntitySubmissions); - // }, [entityList]); - // useEffect(() => { // dispatch( // ProjectSubmissionInfographicsService( @@ -296,7 +233,7 @@ const SubmissionsInfographics = ({ toggleView }) => {
{toggleView}
-
+
{ } />
-
+
{
-
+
{ } />
-
+
Date: Thu, 27 Jun 2024 10:52:41 +0545 Subject: [PATCH 06/22] fix(submissionsInfographics): remove commented code --- .../ProjectSubmissions/SubmissionsInfographics.tsx | 14 -------------- 1 file changed, 14 deletions(-) diff --git a/src/frontend/src/components/ProjectSubmissions/SubmissionsInfographics.tsx b/src/frontend/src/components/ProjectSubmissions/SubmissionsInfographics.tsx index b249d732e4..9cca6cb355 100644 --- a/src/frontend/src/components/ProjectSubmissions/SubmissionsInfographics.tsx +++ b/src/frontend/src/components/ProjectSubmissions/SubmissionsInfographics.tsx @@ -98,20 +98,6 @@ const getMonthDate = (date: string) => { return `${splittedDate[1]}/${splittedDate[2]}`; }; -// generates an array of date strings for last 30 days -// const generateLast30Days = (): string[] => { -// const last30Days: string[] = []; -// const today = new Date(); - -// for (let i = 0; i < 30; i++) { -// const date = new Date(); -// date.setDate(today.getDate() - i); -// last30Days.push(date.toISOString().split('T')[0]); -// } - -// return last30Days; -// }; - const SubmissionsInfographics = ({ toggleView }) => { useDocumentTitle('Submission Infographics'); const formSubmissionRef = useRef(null); From be644b2719435089abae757a5dfc54fb1c7952f9 Mon Sep 17 00:00:00 2001 From: NSUWAL123 Date: Fri, 28 Jun 2024 12:03:36 +0545 Subject: [PATCH 07/22] fix(submissionsInfographics): only count entities with status greater than 1 --- .../components/ProjectSubmissions/SubmissionsInfographics.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/frontend/src/components/ProjectSubmissions/SubmissionsInfographics.tsx b/src/frontend/src/components/ProjectSubmissions/SubmissionsInfographics.tsx index 9cca6cb355..b0c1334d07 100644 --- a/src/frontend/src/components/ProjectSubmissions/SubmissionsInfographics.tsx +++ b/src/frontend/src/components/ProjectSubmissions/SubmissionsInfographics.tsx @@ -121,7 +121,7 @@ const SubmissionsInfographics = ({ toggleView }) => { const entityOsmMapLoading = useAppSelector((state) => state.project.entityOsmMapLoading); const entityList = useAppSelector((state) => state.project.entityOsmMap); - const updatedEntities = entityList?.filter((entity) => entity?.updated_at); + const updatedEntities = entityList?.filter((entity) => entity?.updated_at && entity?.status > 1); const today = new Date().toISOString(); const [formSubmissionsData, setFormSubmissionsData] = useState([]); From caeb8e8819e4a3665849d1a2a79baf4eb04453ab Mon Sep 17 00:00:00 2001 From: NSUWAL123 Date: Fri, 28 Jun 2024 12:04:07 +0545 Subject: [PATCH 08/22] fix(taskSlice): only count entities with status greater than 1 --- src/frontend/src/store/slices/TaskSlice.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/frontend/src/store/slices/TaskSlice.ts b/src/frontend/src/store/slices/TaskSlice.ts index 9b634ce470..a220c742aa 100644 --- a/src/frontend/src/store/slices/TaskSlice.ts +++ b/src/frontend/src/store/slices/TaskSlice.ts @@ -57,7 +57,7 @@ const TaskSlice = createSlice({ let submissionCount = 0; let lastSubmission: string | null = null; items.forEach((item) => { - if (item.status > 0) { + if (item.status > 1) { submissionCount++; } if (item.updated_at && (!lastSubmission || item.updated_at > lastSubmission)) { From 9c211936e2f6ad831c33eedd219cbb838aba0384 Mon Sep 17 00:00:00 2001 From: NSUWAL123 Date: Mon, 1 Jul 2024 12:07:25 +0545 Subject: [PATCH 09/22] fix(lineChart): remove dot from lines --- src/frontend/src/components/common/LineChart.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/frontend/src/components/common/LineChart.tsx b/src/frontend/src/components/common/LineChart.tsx index 28cddda77f..137a8142f5 100644 --- a/src/frontend/src/components/common/LineChart.tsx +++ b/src/frontend/src/components/common/LineChart.tsx @@ -49,8 +49,8 @@ const CustomLineChart = ({ data, xAxisDataKey, lineOneKey, lineTwoKey, xLabel, y )} - - + + ); From 2b313a126753a04bcf1141f3321ae2933727b09f Mon Sep 17 00:00:00 2001 From: NSUWAL123 Date: Mon, 1 Jul 2024 12:18:47 +0545 Subject: [PATCH 10/22] fix(submissionInfographics): calculate validated vs mapped task data on frontend --- .../SubmissionsInfographics.tsx | 206 ++++++++++-------- 1 file changed, 114 insertions(+), 92 deletions(-) diff --git a/src/frontend/src/components/ProjectSubmissions/SubmissionsInfographics.tsx b/src/frontend/src/components/ProjectSubmissions/SubmissionsInfographics.tsx index b0c1334d07..389899092a 100644 --- a/src/frontend/src/components/ProjectSubmissions/SubmissionsInfographics.tsx +++ b/src/frontend/src/components/ProjectSubmissions/SubmissionsInfographics.tsx @@ -9,83 +9,14 @@ import InfographicsCard from '@/components/ProjectSubmissions/InfographicsCard'; import { ProjectContributorsService, // ProjectSubmissionInfographicsService, - ValidatedVsMappedInfographicsService, + // ValidatedVsMappedInfographicsService, } from '@/api/SubmissionService'; import useDocumentTitle from '@/utilfunctions/useDocumentTitle'; import { useAppSelector } from '@/types/reduxTypes'; -// import { task_status } from '@/types/enums'; - -const lineKeyData = [ - { - name: '11/25', - Actual: 4000, - Planned: 2400, - amt: 2400, - }, - { - name: '11/26', - Actual: 3000, - Planned: 1398, - amt: 2210, - }, - { - name: '11/27', - Actual: 2000, - Planned: 9800, - amt: 2290, - }, - { - name: '11/28', - Actual: 2780, - Planned: 3908, - amt: 2000, - }, - { - name: '11/29', - Actual: 1890, - Planned: 4800, - amt: 2181, - }, - { - name: '11/30', - Actual: 2390, - Planned: 3800, - amt: 2500, - }, - { - name: '12/01', - Actual: 3490, - Planned: 4300, - amt: 2100, - }, - { - name: '12/02', - Actual: 2780, - Planned: 3908, - amt: 2000, - }, - { - name: '12/03', - Actual: 1890, - Planned: 4800, - amt: 2181, - }, - { - name: '12/04', - Actual: 2390, - Planned: 3800, - amt: 2500, - }, - { - name: '12/05', - Actual: 3490, - Planned: 4300, - amt: 2100, - }, -]; +import { taskHistoryTypes } from '@/models/project/projectModel'; type formSubmissionType = { date: string; count: number; label: string }; -// type validatedMappedType = { date: string; Validated: number; Mapped: number; label: string }; +type validatedMappedType = { date: string; Validated: number; Mapped: number; label: string }; // get date N days ago const dateNDaysAgo = (NDays: number) => { @@ -98,7 +29,21 @@ const getMonthDate = (date: string) => { return `${splittedDate[1]}/${splittedDate[2]}`; }; -const SubmissionsInfographics = ({ toggleView }) => { +// generates an array of date strings for last 30 days +const generateLast30Days = (): string[] => { + const last30Days: string[] = []; + const today = new Date(); + + for (let i = 0; i < 30; i++) { + const date = new Date(); + date.setDate(today.getDate() - i); + last30Days.push(date.toISOString().split('T')[0]); + } + + return last30Days; +}; + +const SubmissionsInfographics = ({ toggleView, entities }) => { useDocumentTitle('Submission Infographics'); const formSubmissionRef = useRef(null); const projectProgressRef = useRef(null); @@ -114,23 +59,101 @@ const SubmissionsInfographics = ({ toggleView }) => { const submissionContributorsData = useAppSelector((state) => state.submission.submissionContributors); const submissionContributorsLoading = useAppSelector((state) => state.submission.submissionContributorsLoading); const [submissionProjection, setSubmissionProjection] = useState<10 | 30>(10); - const validatedVsMappedInfographics = useAppSelector((state) => state.submission.validatedVsMappedInfographics); - const validatedVsMappedLoading = useAppSelector((state) => state.submission.validatedVsMappedLoading); + // const validatedVsMappedInfographics = useAppSelector((state) => state.submission.validatedVsMappedInfographics); + // const validatedVsMappedLoading = useAppSelector((state) => state.submission.validatedVsMappedLoading); const taskInfo = useAppSelector((state) => state.task.taskInfo); const taskLoading = useAppSelector((state) => state.task.taskLoading); const entityOsmMapLoading = useAppSelector((state) => state.project.entityOsmMapLoading); + const projectTaskList = useAppSelector((state) => state.project.projectTaskBoundries); + const projectDetailsLoading = useAppSelector((state) => state.project.projectDetailsLoading); - const entityList = useAppSelector((state) => state.project.entityOsmMap); - const updatedEntities = entityList?.filter((entity) => entity?.updated_at && entity?.status > 1); const today = new Date().toISOString(); const [formSubmissionsData, setFormSubmissionsData] = useState([]); + const [validatedVsMappedInfographics, setValidatedVsMappedInfographics] = useState([]); + + useEffect(() => { + if (!projectTaskList || (projectTaskList && projectTaskList?.length === 0)) return; + + const projectIndex = projectTaskList.findIndex((project) => project.id == +projectId); + // task activities history list + const taskActivities = projectTaskList?.[projectIndex]?.taskBoundries?.reduce((acc: taskHistoryTypes[], task) => { + return [...acc, ...task?.task_history]; + }, []); + + // filter activities for last 30 days + const taskActivities30Days = taskActivities?.filter((activity) => { + const actionDate = new Date(activity?.action_date).toISOString(); + return actionDate >= dateNDaysAgo(30) && actionDate <= today; + }); + + // only filter MAPPED & VALIDATED activities + const groupedData: validatedMappedType[] = taskActivities30Days?.reduce((acc: validatedMappedType[], activity) => { + const date = activity?.action_date.split('T')[0]; + const index = acc.findIndex((submission) => submission.date === date); + if (acc?.find((submission) => submission.date === date)) { + if (activity?.action_text?.includes('LOCKED_FOR_MAPPING to MAPPED')) { + acc[index].Mapped += 1; + } + if (activity?.action_text?.includes('LOCKED_FOR_VALIDATION to VALIDATED')) { + acc[index].Validated += 1; + } + } else { + const splittedDate = date?.split('-'); + const label = `${splittedDate[1]}/${splittedDate[2]}`; + if (activity?.action_text?.includes('LOCKED_FOR_MAPPING to MAPPED')) { + acc.push({ date: date, Validated: 0, Mapped: 1, label }); + } + if (activity?.action_text?.includes('LOCKED_FOR_VALIDATION to VALIDATED')) { + acc.push({ date: date, Validated: 1, Mapped: 0, label }); + } + } + return acc; + }, []); + + // generate validatedMapped data for last 30 days + const last30Days = generateLast30Days().map((datex) => { + const mappedVsValidatedValue = groupedData?.find((group) => { + return group?.date === datex; + }); + + if (mappedVsValidatedValue) { + return mappedVsValidatedValue; + } else { + // if no validated-mapped date - return count of 0 for both + const splittedDate = datex?.split('-'); + const label = `${splittedDate[1]}/${splittedDate[2]}`; + return { date: datex, Validated: 0, Mapped: 0, label: label }; + } + }); + + // sort by ascending date + const sortedValidatedMapped = last30Days?.sort((a, b) => { + const dateA: any = new Date(a.date); + const dateB: any = new Date(b.date); + return dateA - dateB; + }); + + const cumulativeCount = { + validated: 0, + mapped: 0, + }; + + // generate cumulative count data + const finalData = sortedValidatedMapped?.map((submission) => { + cumulativeCount.validated += submission.Validated; + cumulativeCount.mapped += submission.Mapped; + return { ...submission, Validated: cumulativeCount.validated, Mapped: cumulativeCount.mapped }; + }); + + setValidatedVsMappedInfographics(finalData); + }, [projectTaskList]); // data for validated vs mapped graph useEffect(() => { - if (updatedEntities?.length === 0) return; + if (entities?.length === 0) return; // get entities updated within the last 10 or 30 days - const updatedEntityLastNDays = updatedEntities?.filter((entity) => { + const updatedEntityLastNDays = entities?.filter((entity) => { const updatedDate = new Date(entity?.updated_at).toISOString(); return updatedDate >= dateNDaysAgo(submissionProjection) && updatedDate <= today; }); @@ -156,9 +179,8 @@ const SubmissionsInfographics = ({ toggleView }) => { const dateB: any = new Date(b.date); return dateA - dateB; }); - setFormSubmissionsData(sortedEntitySubmissions); - }, [entityList, submissionProjection]); + }, [entities, submissionProjection]); // useEffect(() => { // dispatch( @@ -168,11 +190,11 @@ const SubmissionsInfographics = ({ toggleView }) => { // ); // }, [submissionProjection]); - useEffect(() => { - dispatch( - ValidatedVsMappedInfographicsService(`${import.meta.env.VITE_API_URL}/tasks/activity/?project_id=${projectId}`), - ); - }, []); + // useEffect(() => { + // dispatch( + // ValidatedVsMappedInfographicsService(`${import.meta.env.VITE_API_URL}/tasks/activity/?project_id=${projectId}`), + // ); + // }, []); useEffect(() => { dispatch(ProjectContributorsService(`${import.meta.env.VITE_API_URL}/projects/contributors/${projectId}`)); @@ -263,14 +285,14 @@ const SubmissionsInfographics = ({ toggleView }) => { cardRef={plannedVsActualRef} header="Validated vs Mapped Task" body={ - validatedVsMappedLoading ? ( + projectDetailsLoading ? ( ) : validatedVsMappedInfographics.length > 0 ? ( @@ -331,7 +353,7 @@ const SubmissionsInfographics = ({ toggleView }) => { />
-
+ {/*
{ ) } /> -
+
*/}
From 7d67502e4de90db50e396921dfb2ecbc497bdcec Mon Sep 17 00:00:00 2001 From: NSUWAL123 Date: Mon, 1 Jul 2024 12:31:18 +0545 Subject: [PATCH 11/22] fix(projectSubmissions): comment /dashboard api call & pass entities list to child components --- src/frontend/src/views/ProjectSubmissions.tsx | 20 ++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/src/frontend/src/views/ProjectSubmissions.tsx b/src/frontend/src/views/ProjectSubmissions.tsx index e039044478..3c7996feb9 100644 --- a/src/frontend/src/views/ProjectSubmissions.tsx +++ b/src/frontend/src/views/ProjectSubmissions.tsx @@ -6,9 +6,9 @@ import SubmissionsTable from '@/components/ProjectSubmissions/SubmissionsTable.j import CoreModules from '@/shared/CoreModules'; import { ProjectActions } from '@/store/slices/ProjectSlice'; import { ProjectById, GetEntityInfo } from '@/api/Project'; -import { GetProjectDashboard } from '@/api/Project'; +// import { GetProjectDashboard } from '@/api/Project'; import { useSearchParams } from 'react-router-dom'; -import { projectInfoType } from '@/models/project/projectModel'; +import { useAppSelector } from '@/types/reduxTypes'; const ProjectSubmissions = () => { const dispatch = CoreModules.useAppDispatch(); @@ -17,8 +17,10 @@ const ProjectSubmissions = () => { const projectId = params.projectId; - const state = CoreModules.useAppSelector((state) => state.project); - const projectInfo: projectInfoType = CoreModules.useAppSelector((state) => state.project.projectInfo); + const state = useAppSelector((state) => state.project); + const projectInfo = useAppSelector((state) => state.project.projectInfo); + const entityList = useAppSelector((state) => state.project.entityOsmMap); + const updatedEntities = entityList?.filter((entity) => entity?.updated_at && entity?.status > 1); //Fetch project for the first time useEffect(() => { @@ -39,9 +41,9 @@ const ProjectSubmissions = () => { } }, [params.id]); - useEffect(() => { - dispatch(GetProjectDashboard(`${import.meta.env.VITE_API_URL}/projects/project_dashboard/${projectId}`)); - }, []); + // useEffect(() => { + // dispatch(GetProjectDashboard(`${import.meta.env.VITE_API_URL}/projects/project_dashboard/${projectId}`)); + // }, []); // for hot fix to display task-list and show option of task-list for submission table filter // better solution needs to be researched @@ -85,11 +87,11 @@ const ProjectSubmissions = () => { return (
- +
{searchParams.get('tab') === 'infographics' ? ( - } /> + } entities={updatedEntities} /> ) : ( } /> )} From fde3b9f55afe166ac543e3f7830cc625adee400e Mon Sep 17 00:00:00 2001 From: NSUWAL123 Date: Mon, 1 Jul 2024 12:34:31 +0545 Subject: [PATCH 12/22] fix(projectInfo): display projectInfo data replacing data from project dashboard api --- .../ProjectSubmissions/ProjectInfo.tsx | 36 +++++++++++++------ 1 file changed, 25 insertions(+), 11 deletions(-) diff --git a/src/frontend/src/components/ProjectSubmissions/ProjectInfo.tsx b/src/frontend/src/components/ProjectSubmissions/ProjectInfo.tsx index 83f9fd270b..b2152e1111 100644 --- a/src/frontend/src/components/ProjectSubmissions/ProjectInfo.tsx +++ b/src/frontend/src/components/ProjectSubmissions/ProjectInfo.tsx @@ -3,8 +3,9 @@ import CoreModules from '@/shared/CoreModules'; import AssetModules from '@/shared/AssetModules'; import { useNavigate } from 'react-router-dom'; import { projectDashboardDetailTypes, projectInfoType } from '@/models/project/projectModel'; +import { useAppSelector } from '@/types/reduxTypes'; -const ProjectInfo = () => { +const ProjectInfo = ({ entities }) => { const navigate = useNavigate(); const params = CoreModules.useParams(); const projectId = params.projectId; @@ -13,21 +14,37 @@ const ProjectInfo = () => { (state) => state.project.projectDashboardDetail, ); const projectDashboardLoading: boolean = CoreModules.useAppSelector((state) => state.project.projectDashboardLoading); + const submissionContributorsData = useAppSelector((state) => state.submission.submissionContributors); + + const projectTaskList = useAppSelector((state) => state.project.projectTaskBoundries); + const projectIndex = projectTaskList.findIndex((project) => project.id == +projectId); + const taskActivities = projectTaskList?.[projectIndex]?.taskBoundries; + const projectDetailsLoading = useAppSelector((state) => state.project.projectDetailsLoading); + const entityOsmMapLoading = useAppSelector((state) => state.project.entityOsmMapLoading); + + const latestDateSorted = entities + ?.map((entry) => new Date(entry?.updated_at)) // Convert to Date objects + .sort((a, b) => b - a)?.[0] + ?.toISOString(); + + const updatedDateTime = latestDateSorted + ? latestDateSorted?.split('T')[0] + ' ' + latestDateSorted?.split('T')[1] + : '-'; const dataCard = [ { title: 'Tasks', - count: projectDashboardDetail?.total_tasks, + count: taskActivities?.length, icon: , }, { title: 'Contributors', - count: projectDashboardDetail?.total_contributors, + count: submissionContributorsData?.length, icon: , }, { title: 'Submissions', - count: projectDashboardDetail?.total_submission, + count: entities?.length, icon: , }, ]; @@ -48,7 +65,7 @@ const ProjectInfo = () => { return (
- {projectDashboardLoading ? ( + {projectDetailsLoading ? ( ) : (
@@ -65,7 +82,7 @@ const ProjectInfo = () => {
)}
- {projectDashboardLoading ? ( + {projectDetailsLoading || entityOsmMapLoading ? ( ) : (
@@ -81,15 +98,12 @@ const ProjectInfo = () => { : '-'}

-

- Last active:{' '} - {projectDashboardDetail?.last_active ? projectDashboardDetail?.last_active : '-'} -

+

Last active: {updatedDateTime}

)}
- {projectDashboardLoading ? ( + {projectDetailsLoading ? (
{Array.from({ length: 3 }).map((i) => ( From 1d7a6d270b67a1a3805612b1dd9981d1709570b8 Mon Sep 17 00:00:00 2001 From: NSUWAL123 Date: Mon, 1 Jul 2024 12:44:34 +0545 Subject: [PATCH 13/22] fix(projectSusmissions): use useAppSelector for typed selector --- .../src/components/ProjectSubmissions/ProjectInfo.tsx | 9 +++------ .../components/ProjectSubmissions/SubmissionsTable.tsx | 2 +- 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/src/frontend/src/components/ProjectSubmissions/ProjectInfo.tsx b/src/frontend/src/components/ProjectSubmissions/ProjectInfo.tsx index b2152e1111..bd99fff579 100644 --- a/src/frontend/src/components/ProjectSubmissions/ProjectInfo.tsx +++ b/src/frontend/src/components/ProjectSubmissions/ProjectInfo.tsx @@ -2,18 +2,15 @@ import React from 'react'; import CoreModules from '@/shared/CoreModules'; import AssetModules from '@/shared/AssetModules'; import { useNavigate } from 'react-router-dom'; -import { projectDashboardDetailTypes, projectInfoType } from '@/models/project/projectModel'; import { useAppSelector } from '@/types/reduxTypes'; const ProjectInfo = ({ entities }) => { const navigate = useNavigate(); const params = CoreModules.useParams(); const projectId = params.projectId; - const projectInfo: projectInfoType = CoreModules.useAppSelector((state) => state.project.projectInfo); - const projectDashboardDetail: projectDashboardDetailTypes = CoreModules.useAppSelector( - (state) => state.project.projectDashboardDetail, - ); - const projectDashboardLoading: boolean = CoreModules.useAppSelector((state) => state.project.projectDashboardLoading); + const projectInfo = useAppSelector((state) => state.project.projectInfo); + const projectDashboardDetail = useAppSelector((state) => state.project.projectDashboardDetail); + const projectDashboardLoading = useAppSelector((state) => state.project.projectDashboardLoading); const submissionContributorsData = useAppSelector((state) => state.submission.submissionContributors); const projectTaskList = useAppSelector((state) => state.project.projectTaskBoundries); diff --git a/src/frontend/src/components/ProjectSubmissions/SubmissionsTable.tsx b/src/frontend/src/components/ProjectSubmissions/SubmissionsTable.tsx index ce30b2d91c..d63c9b2115 100644 --- a/src/frontend/src/components/ProjectSubmissions/SubmissionsTable.tsx +++ b/src/frontend/src/components/ProjectSubmissions/SubmissionsTable.tsx @@ -54,7 +54,7 @@ const SubmissionsTable = ({ toggleView }) => { const submissionTableDataLoading = useAppSelector((state) => state.submission.submissionTableDataLoading); const submissionTableRefreshing = useAppSelector((state) => state.submission.submissionTableRefreshing); const taskInfo = useAppSelector((state) => state.task.taskInfo); - const projectInfo: projectInfoType = CoreModules.useAppSelector((state) => state.project.projectInfo); + const projectInfo = useAppSelector((state) => state.project.projectInfo); const josmEditorError = useAppSelector((state) => state.task.josmEditorError); const downloadSubmissionLoading = useAppSelector((state) => state.task.downloadSubmissionLoading); const [numberOfFilters, setNumberOfFilters] = useState(0); From 6334a6e22bca5de02e31553e8678394318224d6e Mon Sep 17 00:00:00 2001 From: NSUWAL123 Date: Mon, 8 Jul 2024 17:55:26 +0545 Subject: [PATCH 14/22] feat(project): add created to projectInfo state --- src/frontend/src/api/Project.js | 3 ++- src/frontend/src/models/project/projectModel.ts | 1 + 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/frontend/src/api/Project.js b/src/frontend/src/api/Project.js index 7285cac28f..37287839a1 100755 --- a/src/frontend/src/api/Project.js +++ b/src/frontend/src/api/Project.js @@ -48,6 +48,7 @@ export const ProjectById = (existingProjectList, projectId) => { custom_tms_url: projectResp?.custom_tms_url, organisation_id: projectResp?.organisation_id, organisation_logo: projectResp?.organisation_logo, + created: projectResp?.created, }), ); dispatch(ProjectActions.SetProjectDetialsLoading(false)); @@ -183,7 +184,7 @@ export const DownloadTile = (url, payload, toOpfs = false) => { } const filename = response.headers['content-disposition'].split('filename=')[1]; - console.log(filename) + console.log(filename); // Create Blob from ArrayBuffer const blob = new Blob([tileData], { type: response.headers['content-type'] }); const downloadUrl = URL.createObjectURL(blob); diff --git a/src/frontend/src/models/project/projectModel.ts b/src/frontend/src/models/project/projectModel.ts index d9a3422ba2..f668fd087c 100644 --- a/src/frontend/src/models/project/projectModel.ts +++ b/src/frontend/src/models/project/projectModel.ts @@ -71,6 +71,7 @@ export type projectInfoType = { organisation_logo: string; instructions: string; custom_tms_url: string; + created: string; }; export type downloadProjectFormLoadingType = { type: 'form' | 'geojson' | 'csv' | 'json'; loading: boolean }; From deb756db09b79a5db9b0c57715c9853e77b122a7 Mon Sep 17 00:00:00 2001 From: NSUWAL123 Date: Mon, 8 Jul 2024 17:59:47 +0545 Subject: [PATCH 15/22] fix(projectInfo): use project creation date form project api --- .../ProjectSubmissions/ProjectInfo.tsx | 22 +++++++------------ 1 file changed, 8 insertions(+), 14 deletions(-) diff --git a/src/frontend/src/components/ProjectSubmissions/ProjectInfo.tsx b/src/frontend/src/components/ProjectSubmissions/ProjectInfo.tsx index bd99fff579..c06cdc2893 100644 --- a/src/frontend/src/components/ProjectSubmissions/ProjectInfo.tsx +++ b/src/frontend/src/components/ProjectSubmissions/ProjectInfo.tsx @@ -9,8 +9,8 @@ const ProjectInfo = ({ entities }) => { const params = CoreModules.useParams(); const projectId = params.projectId; const projectInfo = useAppSelector((state) => state.project.projectInfo); - const projectDashboardDetail = useAppSelector((state) => state.project.projectDashboardDetail); - const projectDashboardLoading = useAppSelector((state) => state.project.projectDashboardLoading); + // const projectDashboardDetail = useAppSelector((state) => state.project.projectDashboardDetail); + // const projectDashboardLoading = useAppSelector((state) => state.project.projectDashboardLoading); const submissionContributorsData = useAppSelector((state) => state.submission.submissionContributors); const projectTaskList = useAppSelector((state) => state.project.projectTaskBoundries); @@ -18,15 +18,15 @@ const ProjectInfo = ({ entities }) => { const taskActivities = projectTaskList?.[projectIndex]?.taskBoundries; const projectDetailsLoading = useAppSelector((state) => state.project.projectDetailsLoading); const entityOsmMapLoading = useAppSelector((state) => state.project.entityOsmMapLoading); + const projectCreationDate = projectInfo?.created ? projectInfo?.created?.split('T')[0] : '-'; + const submissionContributorsLoading = useAppSelector((state) => state.submission.submissionContributorsLoading); const latestDateSorted = entities ?.map((entry) => new Date(entry?.updated_at)) // Convert to Date objects .sort((a, b) => b - a)?.[0] ?.toISOString(); - const updatedDateTime = latestDateSorted - ? latestDateSorted?.split('T')[0] + ' ' + latestDateSorted?.split('T')[1] - : '-'; + const updatedDateTime = latestDateSorted ? latestDateSorted?.split('T')[0] : '-'; const dataCard = [ { @@ -86,21 +86,15 @@ const ProjectInfo = ({ entities }) => {

{projectInfo?.title}

- Created On:{' '} - - {projectDashboardDetail?.created - ? `${projectDashboardDetail?.created?.split('T')[0]} ${projectDashboardDetail?.created - ?.split('T')[1] - ?.split('.')[0]}` - : '-'} - + Created On: + {projectCreationDate}

Last active: {updatedDateTime}

)}
- {projectDetailsLoading ? ( + {projectDetailsLoading || submissionContributorsLoading || entityOsmMapLoading ? (
{Array.from({ length: 3 }).map((i) => ( From f03180750f54df2191509c50e48eb51532d4128f Mon Sep 17 00:00:00 2001 From: NSUWAL123 Date: Mon, 8 Jul 2024 18:14:26 +0545 Subject: [PATCH 16/22] fix(projectSubmmissions): call contributors api on parent component --- .../ProjectSubmissions/SubmissionsInfographics.tsx | 6 +++--- src/frontend/src/views/ProjectSubmissions.tsx | 5 +++++ 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/src/frontend/src/components/ProjectSubmissions/SubmissionsInfographics.tsx b/src/frontend/src/components/ProjectSubmissions/SubmissionsInfographics.tsx index 389899092a..55c5e891b4 100644 --- a/src/frontend/src/components/ProjectSubmissions/SubmissionsInfographics.tsx +++ b/src/frontend/src/components/ProjectSubmissions/SubmissionsInfographics.tsx @@ -196,9 +196,9 @@ const SubmissionsInfographics = ({ toggleView, entities }) => { // ); // }, []); - useEffect(() => { - dispatch(ProjectContributorsService(`${import.meta.env.VITE_API_URL}/projects/contributors/${projectId}`)); - }, []); + // useEffect(() => { + // dispatch(ProjectContributorsService(`${import.meta.env.VITE_API_URL}/projects/contributors/${projectId}`)); + // }, []); const FormSubmissionSubHeader = () => (
diff --git a/src/frontend/src/views/ProjectSubmissions.tsx b/src/frontend/src/views/ProjectSubmissions.tsx index 3c7996feb9..e126e2b050 100644 --- a/src/frontend/src/views/ProjectSubmissions.tsx +++ b/src/frontend/src/views/ProjectSubmissions.tsx @@ -9,6 +9,7 @@ import { ProjectById, GetEntityInfo } from '@/api/Project'; // import { GetProjectDashboard } from '@/api/Project'; import { useSearchParams } from 'react-router-dom'; import { useAppSelector } from '@/types/reduxTypes'; +import { ProjectContributorsService } from '@/api/SubmissionService'; const ProjectSubmissions = () => { const dispatch = CoreModules.useAppDispatch(); @@ -51,6 +52,10 @@ const ProjectSubmissions = () => { dispatch(GetEntityInfo(`${import.meta.env.VITE_API_URL}/projects/${projectId}/entities/statuses`)); }, []); + useEffect(() => { + dispatch(ProjectContributorsService(`${import.meta.env.VITE_API_URL}/projects/contributors/${projectId}`)); + }, []); + useEffect(() => { if (!searchParams.get('tab')) { setSearchParams({ tab: 'infographics' }); From dbd2464755a6fc6b53efc08757abb0393a07fa29 Mon Sep 17 00:00:00 2001 From: NSUWAL123 Date: Tue, 9 Jul 2024 09:25:57 +0545 Subject: [PATCH 17/22] fix(submissionsInfographics): rename to dateA, dataB to suitable names --- .../ProjectSubmissions/SubmissionsInfographics.tsx | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/src/frontend/src/components/ProjectSubmissions/SubmissionsInfographics.tsx b/src/frontend/src/components/ProjectSubmissions/SubmissionsInfographics.tsx index 55c5e891b4..e651f5a7f7 100644 --- a/src/frontend/src/components/ProjectSubmissions/SubmissionsInfographics.tsx +++ b/src/frontend/src/components/ProjectSubmissions/SubmissionsInfographics.tsx @@ -49,7 +49,6 @@ const SubmissionsInfographics = ({ toggleView, entities }) => { const projectProgressRef = useRef(null); const totalContributorsRef = useRef(null); const plannedVsActualRef = useRef(null); - const dispatch = CoreModules.useAppDispatch(); const params = CoreModules.useParams(); const projectId = params.projectId; @@ -128,9 +127,9 @@ const SubmissionsInfographics = ({ toggleView, entities }) => { // sort by ascending date const sortedValidatedMapped = last30Days?.sort((a, b) => { - const dateA: any = new Date(a.date); - const dateB: any = new Date(b.date); - return dateA - dateB; + const date1: any = new Date(a.date); + const date2: any = new Date(b.date); + return date1 - date2; }); const cumulativeCount = { @@ -175,9 +174,9 @@ const SubmissionsInfographics = ({ toggleView, entities }) => { // sort submissions by ascending date const sortedEntitySubmissions = submissions?.sort((a, b) => { - const dateA: any = new Date(a.date); - const dateB: any = new Date(b.date); - return dateA - dateB; + const date1: any = new Date(a.date); + const date2: any = new Date(b.date); + return date1 - date2; }); setFormSubmissionsData(sortedEntitySubmissions); }, [entities, submissionProjection]); From ee5c9e216ba538b8e9a5212417ea35e56e01ad3d Mon Sep 17 00:00:00 2001 From: NSUWAL123 Date: Tue, 9 Jul 2024 09:46:27 +0545 Subject: [PATCH 18/22] feat(commonUtils): add date functions to commonUtils --- src/frontend/src/utilfunctions/commonUtils.ts | 25 +++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/src/frontend/src/utilfunctions/commonUtils.ts b/src/frontend/src/utilfunctions/commonUtils.ts index cf04d93932..3df243017b 100644 --- a/src/frontend/src/utilfunctions/commonUtils.ts +++ b/src/frontend/src/utilfunctions/commonUtils.ts @@ -16,3 +16,28 @@ export const isStatusSuccess = (status: number) => { } return false; }; + +// get date N days ago +export const dateNDaysAgo = (NDays: number) => { + return new Date(new Date().getTime() - NDays * 24 * 60 * 60 * 1000).toISOString(); +}; + +// extract month & day in MM/DD format for chart date labels +export const getMonthDate = (date: string) => { + const splittedDate = date?.split('T')[0]?.split('-'); + return `${splittedDate[1]}/${splittedDate[2]}`; +}; + +// generates an array of date strings for last 30 days +export const generateLast30Days = (): string[] => { + const last30Days: string[] = []; + const today = new Date(); + + for (let i = 0; i < 30; i++) { + const date = new Date(); + date.setDate(today.getDate() - i); + last30Days.push(date.toISOString().split('T')[0]); + } + + return last30Days; +}; From 44b0d0da0cf64f6905656d64236812651609d410 Mon Sep 17 00:00:00 2001 From: NSUWAL123 Date: Tue, 9 Jul 2024 09:47:42 +0545 Subject: [PATCH 19/22] fix(submissionService): remove infographics chart api call service --- src/frontend/src/api/SubmissionService.ts | 34 ----------------------- 1 file changed, 34 deletions(-) diff --git a/src/frontend/src/api/SubmissionService.ts b/src/frontend/src/api/SubmissionService.ts index 9d6a6b18fc..ed070feea0 100644 --- a/src/frontend/src/api/SubmissionService.ts +++ b/src/frontend/src/api/SubmissionService.ts @@ -24,40 +24,6 @@ export const ProjectSubmissionService: Function = (url: string) => { }; }; -export const ProjectSubmissionInfographicsService: Function = (url: string) => { - return async (dispatch) => { - const fetchProjectSubmission = async (url: string) => { - try { - dispatch(SubmissionActions.SetSubmissionInfographicsLoading(true)); - const fetchSubmissionData = await CoreModules.axios.get(url); - const resp: any = fetchSubmissionData.data; - dispatch(SubmissionActions.SetSubmissionInfographicsLoading(false)); - dispatch(SubmissionActions.SetSubmissionInfographics(resp)); - } catch (error) {} - }; - - await fetchProjectSubmission(url); - }; -}; - -export const ValidatedVsMappedInfographicsService: Function = (url: string) => { - return async (dispatch) => { - const fetchProjectSubmission = async (url: string) => { - try { - dispatch(SubmissionActions.SetValidatedVsMappedLoading(true)); - const validatedVsMappedData = await CoreModules.axios.get(url); - const resp: any = validatedVsMappedData.data; - dispatch(SubmissionActions.SetValidatedVsMappedInfographics(resp)); - dispatch(SubmissionActions.SetValidatedVsMappedLoading(false)); - } catch (error) { - dispatch(SubmissionActions.SetValidatedVsMappedLoading(false)); - } - }; - - await fetchProjectSubmission(url); - }; -}; - export const ProjectContributorsService: Function = (url: string) => { return async (dispatch) => { const fetchProjectContributor = async (url: string) => { From f4155949eaeb6fb126dad44c10149c9b52f242fc Mon Sep 17 00:00:00 2001 From: NSUWAL123 Date: Tue, 9 Jul 2024 09:48:46 +0545 Subject: [PATCH 20/22] fix(submissionInfographics): remove commented service dispatch & shift date functions to utils --- .../SubmissionsInfographics.tsx | 57 +------------------ 1 file changed, 2 insertions(+), 55 deletions(-) diff --git a/src/frontend/src/components/ProjectSubmissions/SubmissionsInfographics.tsx b/src/frontend/src/components/ProjectSubmissions/SubmissionsInfographics.tsx index e651f5a7f7..ee91040d9a 100644 --- a/src/frontend/src/components/ProjectSubmissions/SubmissionsInfographics.tsx +++ b/src/frontend/src/components/ProjectSubmissions/SubmissionsInfographics.tsx @@ -6,42 +6,11 @@ import Table, { TableHeader } from '@/components/common/CustomTable'; import CustomLineChart from '@/components/common/LineChart'; import CoreModules from '@/shared/CoreModules'; import InfographicsCard from '@/components/ProjectSubmissions/InfographicsCard'; -import { - ProjectContributorsService, - // ProjectSubmissionInfographicsService, - // ValidatedVsMappedInfographicsService, -} from '@/api/SubmissionService'; import useDocumentTitle from '@/utilfunctions/useDocumentTitle'; import { useAppSelector } from '@/types/reduxTypes'; import { taskHistoryTypes } from '@/models/project/projectModel'; - -type formSubmissionType = { date: string; count: number; label: string }; -type validatedMappedType = { date: string; Validated: number; Mapped: number; label: string }; - -// get date N days ago -const dateNDaysAgo = (NDays: number) => { - return new Date(new Date().getTime() - NDays * 24 * 60 * 60 * 1000).toISOString(); -}; - -// extract month & day in MM/DD format for chart date labels -const getMonthDate = (date: string) => { - const splittedDate = date?.split('T')[0]?.split('-'); - return `${splittedDate[1]}/${splittedDate[2]}`; -}; - -// generates an array of date strings for last 30 days -const generateLast30Days = (): string[] => { - const last30Days: string[] = []; - const today = new Date(); - - for (let i = 0; i < 30; i++) { - const date = new Date(); - date.setDate(today.getDate() - i); - last30Days.push(date.toISOString().split('T')[0]); - } - - return last30Days; -}; +import { formSubmissionType, validatedMappedType } from '@/models/submission/submissionModel'; +import { dateNDaysAgo, generateLast30Days, getMonthDate } from '@/utilfunctions/commonUtils'; const SubmissionsInfographics = ({ toggleView, entities }) => { useDocumentTitle('Submission Infographics'); @@ -53,13 +22,9 @@ const SubmissionsInfographics = ({ toggleView, entities }) => { const params = CoreModules.useParams(); const projectId = params.projectId; - // const submissionInfographicsData = useAppSelector((state) => state.submission.submissionInfographics); - // const submissionInfographicsLoading = useAppSelector((state) => state.submission.submissionInfographicsLoading); const submissionContributorsData = useAppSelector((state) => state.submission.submissionContributors); const submissionContributorsLoading = useAppSelector((state) => state.submission.submissionContributorsLoading); const [submissionProjection, setSubmissionProjection] = useState<10 | 30>(10); - // const validatedVsMappedInfographics = useAppSelector((state) => state.submission.validatedVsMappedInfographics); - // const validatedVsMappedLoading = useAppSelector((state) => state.submission.validatedVsMappedLoading); const taskInfo = useAppSelector((state) => state.task.taskInfo); const taskLoading = useAppSelector((state) => state.task.taskLoading); const entityOsmMapLoading = useAppSelector((state) => state.project.entityOsmMapLoading); @@ -181,24 +146,6 @@ const SubmissionsInfographics = ({ toggleView, entities }) => { setFormSubmissionsData(sortedEntitySubmissions); }, [entities, submissionProjection]); - // useEffect(() => { - // dispatch( - // ProjectSubmissionInfographicsService( - // `${import.meta.env.VITE_API_URL}/submission/submission_page/${projectId}?days=${submissionProjection}`, - // ), - // ); - // }, [submissionProjection]); - - // useEffect(() => { - // dispatch( - // ValidatedVsMappedInfographicsService(`${import.meta.env.VITE_API_URL}/tasks/activity/?project_id=${projectId}`), - // ); - // }, []); - - // useEffect(() => { - // dispatch(ProjectContributorsService(`${import.meta.env.VITE_API_URL}/projects/contributors/${projectId}`)); - // }, []); - const FormSubmissionSubHeader = () => (
Date: Tue, 9 Jul 2024 09:50:03 +0545 Subject: [PATCH 21/22] fix(submission): remove unused submission state, types --- .../src/models/submission/submissionModel.ts | 14 +++----------- src/frontend/src/store/slices/SubmissionSlice.ts | 16 ---------------- src/frontend/src/store/types/ISubmissions.ts | 6 ------ 3 files changed, 3 insertions(+), 33 deletions(-) diff --git a/src/frontend/src/models/submission/submissionModel.ts b/src/frontend/src/models/submission/submissionModel.ts index b972cd89a9..f62ed1ade0 100644 --- a/src/frontend/src/models/submission/submissionModel.ts +++ b/src/frontend/src/models/submission/submissionModel.ts @@ -1,8 +1,3 @@ -export type submissionInfographicsTypes = { - date: string; - count: 1; -}; - export type submissionContributorsTypes = { user: string; contributions: number; @@ -16,12 +11,6 @@ export type submissionFormFieldsTypes = { selectMultiple: any; }; -export type validatedVsMappedInfographicsTypes = { - date: string; - validated: number; - mapped: number; -}; - export type submissionTableDataTypes = { results: any[]; pagination: { @@ -40,3 +29,6 @@ export type reviewListType = { className: string; hoverClass: string; }; + +export type formSubmissionType = { date: string; count: number; label: string }; +export type validatedMappedType = { date: string; Validated: number; Mapped: number; label: string }; diff --git a/src/frontend/src/store/slices/SubmissionSlice.ts b/src/frontend/src/store/slices/SubmissionSlice.ts index a4ad76d74e..a387261060 100644 --- a/src/frontend/src/store/slices/SubmissionSlice.ts +++ b/src/frontend/src/store/slices/SubmissionSlice.ts @@ -4,8 +4,6 @@ import { SubmissionStateTypes } from '@/store/types/ISubmissions'; const initialState: SubmissionStateTypes = { submissionDetailsLoading: true, submissionDetails: null, - submissionInfographics: [], - submissionInfographicsLoading: false, submissionContributors: [], submissionContributorsLoading: true, submissionFormFields: [], @@ -23,8 +21,6 @@ const initialState: SubmissionStateTypes = { submissionFormFieldsLoading: false, submissionTableDataLoading: false, submissionTableRefreshing: false, - validatedVsMappedInfographics: [], - validatedVsMappedLoading: false, updateReviewStatusModal: { toggleModalStatus: false, instanceId: null, @@ -45,18 +41,6 @@ const SubmissionSlice = createSlice({ SetSubmissionDetails(state, action) { state.submissionDetails = action.payload; }, - SetSubmissionInfographics(state, action) { - state.submissionInfographics = action.payload; - }, - SetSubmissionInfographicsLoading(state, action) { - state.submissionInfographicsLoading = action.payload; - }, - SetValidatedVsMappedInfographics(state, action) { - state.validatedVsMappedInfographics = action.payload; - }, - SetValidatedVsMappedLoading(state, action) { - state.validatedVsMappedLoading = action.payload; - }, SetSubmissionContributors(state, action) { state.submissionContributors = action.payload; }, diff --git a/src/frontend/src/store/types/ISubmissions.ts b/src/frontend/src/store/types/ISubmissions.ts index fcb6fdc98d..30b74a43ad 100644 --- a/src/frontend/src/store/types/ISubmissions.ts +++ b/src/frontend/src/store/types/ISubmissions.ts @@ -1,16 +1,12 @@ import { submissionContributorsTypes, submissionFormFieldsTypes, - submissionInfographicsTypes, submissionTableDataTypes, - validatedVsMappedInfographicsTypes, } from '@/models/submission/submissionModel'; export type SubmissionStateTypes = { submissionDetailsLoading: boolean; submissionDetails: Record | null; - submissionInfographics: submissionInfographicsTypes[]; - submissionInfographicsLoading: boolean; submissionContributors: submissionContributorsTypes[]; submissionContributorsLoading: boolean; submissionFormFields: submissionFormFieldsTypes[]; @@ -18,8 +14,6 @@ export type SubmissionStateTypes = { submissionFormFieldsLoading: boolean; submissionTableDataLoading: boolean; submissionTableRefreshing: boolean; - validatedVsMappedInfographics: validatedVsMappedInfographicsTypes[]; - validatedVsMappedLoading: boolean; updateReviewStatusModal: updateReviewStatusModal; updateReviewStateLoading: boolean; }; From a16ebac592d4902d239e0049aa886c3f6e0c5fe9 Mon Sep 17 00:00:00 2001 From: NSUWAL123 Date: Tue, 9 Jul 2024 09:51:00 +0545 Subject: [PATCH 22/22] remove commented getProjectDashboard call --- src/frontend/src/views/ProjectSubmissions.tsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/frontend/src/views/ProjectSubmissions.tsx b/src/frontend/src/views/ProjectSubmissions.tsx index e126e2b050..56ba67c078 100644 --- a/src/frontend/src/views/ProjectSubmissions.tsx +++ b/src/frontend/src/views/ProjectSubmissions.tsx @@ -6,7 +6,6 @@ import SubmissionsTable from '@/components/ProjectSubmissions/SubmissionsTable.j import CoreModules from '@/shared/CoreModules'; import { ProjectActions } from '@/store/slices/ProjectSlice'; import { ProjectById, GetEntityInfo } from '@/api/Project'; -// import { GetProjectDashboard } from '@/api/Project'; import { useSearchParams } from 'react-router-dom'; import { useAppSelector } from '@/types/reduxTypes'; import { ProjectContributorsService } from '@/api/SubmissionService'; @@ -42,10 +41,6 @@ const ProjectSubmissions = () => { } }, [params.id]); - // useEffect(() => { - // dispatch(GetProjectDashboard(`${import.meta.env.VITE_API_URL}/projects/project_dashboard/${projectId}`)); - // }, []); - // for hot fix to display task-list and show option of task-list for submission table filter // better solution needs to be researched useEffect(() => {