feat: improve submissions dynamic filtering (#1217)

* fix submissionTable: filterObj key name change, reviewStateData constant add

* feat: filters on submission table

* fix inputTextField: input label fix

* fix submissionTable: submitted by textField add

* feat customDatePicker: react-datepicker add

* fix projectSubmissions: datepicker add & payload add for api fetch

* fix projectSubmissions: submissionFilters UI enhancement

* fix projectSubmissions: toggle infographics/table view UI re-arrangement

* feat pieChart: legend add

* fix submissionInfographics: dynamic value for projectProgress pieChart

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

---------

Co-authored-by: sujanadh <sujanadh07@gmail.com>
Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

src/frontend/package.json

@@ -65,6 +65,7 @@
     "axios": "^1.2.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
+    "date-fns": "^3.3.1",
     "env-cmd": "^10.1.0",
     "eslint": "^8.44.0",
     "eslint-config-prettier": "^8.8.0",
@@ -79,6 +80,7 @@
     "pako": "^2.1.0",
     "qrcode-generator": "^1.4.4",
     "react": "^17.0.2",
+    "react-datepicker": "^6.1.0",
     "react-dom": "^17.0.2",
     "react-lazy-load-image-component": "^1.5.6",
     "react-loading-skeleton": "^3.1.0",

src/frontend/src/api/SubmissionService.ts

@@ -112,12 +112,12 @@ export const SubmissionFormFieldsService: Function = (url: string) => {
   };
 };
 
-export const SubmissionTableService: Function = (url: string) => {
+export const SubmissionTableService: Function = (url: string, payload) => {
   return async (dispatch) => {
-    const fetchSubmissionTable = async (url: string) => {
+    const fetchSubmissionTable = async (url: string, payload) => {
       try {
         dispatch(SubmissionActions.SetSubmissionTableLoading(true));
-        const response = await CoreModules.axios.get(url);
+        const response = await CoreModules.axios.get(url, { params: payload });
         const submissionTableData: any = response.data;
         dispatch(SubmissionActions.SetSubmissionTable(submissionTableData));
         dispatch(SubmissionActions.SetSubmissionTableLoading(false));
@@ -128,6 +128,6 @@ export const SubmissionTableService: Function = (url: string) => {
       }
     };
 
-    await fetchSubmissionTable(url);
+    await fetchSubmissionTable(url, payload);
   };
 };

src/frontend/src/components/ProjectSubmissions/ProjectInfo.tsx

@@ -43,10 +43,8 @@ const ProjectInfo = () => {
     </div>
   );
 
-  const widthStyle = window.innerWidth >= 640 ? { width: 'calc(100% - 80px)' } : { width: '100%' };
-
   return (
-    <div style={widthStyle} className="sm:fmtm-ml-2 fmtm-border-b-[1px] fmtm-border-gray-300 fmtm-pb-10">
+    <div className="fmtm-w-full sm:fmtm-ml-2 fmtm-border-b-[1px] fmtm-border-gray-300 fmtm-pb-10">
       <div className="fmtm-pb-4">
         <p className="fmtm-text-[#706E6E] fmtm-text-base">
           <span

src/frontend/src/components/ProjectSubmissions/SubmissionsInfographics.tsx

@@ -82,7 +82,7 @@ const lineKeyData = [
   },
 ];
 
-const SubmissionsInfographics = () => {
+const SubmissionsInfographics = ({ toggleView }) => {
   const formSubmissionRef = useRef(null);
   const projectProgressRef = useRef(null);
   const totalContributorsRef = useRef(null);
@@ -106,6 +106,8 @@ const SubmissionsInfographics = () => {
     (state) => state.submission.validatedVsMappedInfographics,
   );
   const validatedVsMappedLoading = CoreModules.useAppSelector((state) => state.submission.validatedVsMappedLoading);
+  const taskData = CoreModules.useAppSelector((state) => state.task.taskData);
+  const taskLoading = CoreModules.useAppSelector((state) => state.task.taskLoading);
 
   useEffect(() => {
     dispatch(
@@ -146,18 +148,25 @@ const SubmissionsInfographics = () => {
     </div>
   );
 
-  // Test data for project progress
-  const featCount = 500;
-  const current = 450;
-  const remaining = featCount - current;
-
-  const pieData = [
-    { names: 'Current Progress', value: current },
-    { names: 'Remaining', value: remaining },
+  const projectProgressData = [
+    {
+      names: 'Current',
+      value:
+        taskData?.submission_count > taskData?.feature_count ||
+        (taskData?.submission_count === 0 && taskData?.feature_count === 0)
+          ? 100
+          : taskData?.submission_count,
+    },
+    {
+      names: 'Remaining',
+      value:
+        taskData?.submission_count > taskData?.feature_count ? 0 : taskData?.feature_count - taskData?.submission_count,
+    },
   ];
 
   return (
     <div className="fmtm-flex fmtm-flex-col fmtm-gap-5">
+      {toggleView}
       <div className="fmtm-flex fmtm-flex-col lg:fmtm-flex-row fmtm-gap-5 lg:fmtm-gap-10">
         <div className="lg:fmtm-w-[70%]">
           <InfographicsCard
@@ -188,14 +197,10 @@ const SubmissionsInfographics = () => {
             cardRef={projectProgressRef}
             header="Project Progress"
             body={
-              false ? (
+              taskLoading ? (
                 <CoreModules.Skeleton className="!fmtm-w-full fmtm-h-full" />
-              ) : pieData.length > 0 ? (
-                <CustomPieChart data={pieData} dataKey="value" nameKey="names" />
               ) : (
-                <div className="fmtm-w-full fmtm-h-full fmtm-flex fmtm-justify-center fmtm-items-center fmtm-text-3xl fmtm-text-gray-400">
-                  No data available!
-                </div>
+                <CustomPieChart data={projectProgressData} dataKey="value" nameKey="names" />
               )
             }
           />
@@ -299,7 +304,6 @@ const SubmissionsInfographics = () => {
           }
         />
       </div>
-
       <div>
         <TaskSubmissions />
       </div>