Merge pull request #649 from shreyas1434shinde/YouthNet

Issue task PS-3327 : Implement the Generic UI components for Surveys and reports
tekdi · Jan 28, 2025 · 13d228b · 13d228b
2 parents f5c0f09 + 41f33a1
commit 13d228b
Show file tree

Hide file tree

Showing 12 changed files with 414 additions and 75 deletions.
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
@@ -742,5 +742,11 @@
   "YOUTHNET_CAMP_DETAILS": {
     "SUBMISSION": "Submission",
     "SUMMARY": "Summary"
+  },
+  "SURVEYS": {
+    "SURVEYS" :"Surveys",
+    "ACTIVE_SURVEYS" :"Active Surveys",
+    "PREVIOUS_SURVEYS" :"Previous Surveys",
+    "VILLAGES":"Villages"
   }
 }
diff --git a/src/components/CohortFacilitatorList.tsx b/src/components/CohortFacilitatorList.tsx
@@ -1,7 +1,7 @@
 import LearnersListItem from '@/components/LearnersListItem';
 import { getMyCohortFacilitatorList } from '@/services/MyClassDetailsService';
 import useStore from '@/store/store';
-import { Status, limit } from '@/utils/app.constant';
+import { Status, pagesLimit } from '@/utils/app.constant';
 import {
   toPascalCase
 } from '@/utils/Helper';
@@ -45,6 +45,8 @@ const CohortLearnerList: React.FC<CohortLearnerListProp> = ({
 
 
   const [page, setPage] = useState(0);
+  const [offset, setOffset] = useState(0);
+
   const [infinitePage, setInfinitePage] = useState(1);
   const [infiniteData, setInfiniteData] = useState<any[]>([]);
   const [totalCount, setTotalCount] = useState<number>(0);
@@ -57,12 +59,14 @@ const CohortLearnerList: React.FC<CohortLearnerListProp> = ({
 
   useEffect(() => {
     const getCohortMemberList = async () => {
-      if (!isMobile) {
-        setLoading(true);
-      }
+      // if (!isMobile) {
+      // }
+      setLoading(true);
       try {
         if (cohortId) {
           const filters = { cohortId: cohortId };
+          const limit = pagesLimit
+          const page=offset
           const response = await getMyCohortFacilitatorList({
             limit,
             page,
@@ -128,22 +132,23 @@ const CohortLearnerList: React.FC<CohortLearnerListProp> = ({
   };
 
   const PAGINATION_CONFIG = {
-    ITEMS_PER_PAGE: 10,
-    INFINITE_SCROLL_INCREMENT: 10,
+    ITEMS_PER_PAGE: pagesLimit,
+    INFINITE_SCROLL_INCREMENT: pagesLimit,
   };
 
-  const fetchData = async () => {
-    try {
-      setInfinitePage(
-        (prev) => prev + PAGINATION_CONFIG.INFINITE_SCROLL_INCREMENT
-      );
-    } catch (error) {
-      console.error('Error fetching more data:', error);
-      showToastMessage(t('COMMON.SOMETHING_WENT_WRONG'), 'error');
-    }
-  };
+  // const fetchData = async () => {
+  //   try {
+  //     setInfinitePage(
+  //       (prev) => prev + PAGINATION_CONFIG.INFINITE_SCROLL_INCREMENT
+  //     );
+  //   } catch (error) {
+  //     console.error('Error fetching more data:', error);
+  //     showToastMessage(t('COMMON.SOMETHING_WENT_WRONG'), 'error');
+  //   }
+  // };
   const handlePageChange = (newPage: number) => {
-    setPage(newPage);
+    setPage(newPage-1);
+    setOffset((newPage - 1) * pagesLimit)
   };
 
 
@@ -203,13 +208,13 @@ const CohortLearnerList: React.FC<CohortLearnerListProp> = ({
                 }}
               >
                 {
-                  (isMobile ? infiniteData.length > 10 : (filteredData && filteredData?.length > 10)) && (
+                  (isMobile ? infiniteData.length > pagesLimit : (filteredData && filteredData?.length > pagesLimit)) && (
                     <CustomPagination
                       count={Math.ceil(totalCount / PAGINATION_CONFIG.ITEMS_PER_PAGE)}
                       page={page + 1}
                       onPageChange={handlePageChange}
-                      fetchMoreData={fetchData}
-                      hasMore={infinitePage * limit < totalCount}
+                      // fetchMoreData={fetchData}
+                      hasMore={infinitePage * pagesLimit < totalCount}
                       items={(infiniteData || []).map((user: UserDataProps) => (
                         <Box key={user.userId}></Box>
                       ))}

diff --git a/src/components/CustomPagination.tsx b/src/components/CustomPagination.tsx
@@ -30,23 +30,23 @@ const CustomPagination: React.FC<CustomPaginationProps> = ({
     const isMobile = useMediaQuery(theme.breakpoints.down('md'));
     const { t } = useTranslation();
 
-    if (isMobile) {
-        return (
-            <InfiniteScroll
-                dataLength={items.length}
-                next={fetchMoreData || (() => { 
-                    console.warn('fetchMoreData callback is required for infinite scroll');
-                })}
-                hasMore={hasMore}
-                loader={<h4>{t('COMMON.LOADING')}...</h4>}
-                // endMessage={
-                //     <p style={{ textAlign: 'center' }}>You have seen all data!</p>
-                // }
-            >
-                <></>
-            </InfiniteScroll>
-        );
-    }
+    // if (isMobile) {
+    //     return (
+    //         <InfiniteScroll
+    //             dataLength={items.length}
+    //             next={fetchMoreData || (() => { 
+    //                 console.warn('fetchMoreData callback is required for infinite scroll');
+    //             })}
+    //             hasMore={hasMore}
+    //             loader={<h4>{t('COMMON.LOADING')}...</h4>}
+    //             // endMessage={
+    //             //     <p style={{ textAlign: 'center' }}>You have seen all data!</p>
+    //             // }
+    //         >
+    //             <></>
+    //         </InfiniteScroll>
+    //     );
+    // }
 
     return (
         <Stack spacing={2} alignItems="center">

diff --git a/src/components/ManageUser.tsx b/src/components/ManageUser.tsx
@@ -96,6 +96,8 @@ const ManageUser: React.FC<ManageUsersProps> = ({
   const [centers, setCenters] = useState<any>([]);
   const [centerList, setCenterList] = useState<string[]>([]);
   const [page, setPage] = useState(1);
+
+  const [offset, setOffSet] = useState(0);
   const [infinitePage, setInfinitePage] = useState(1);
   const [infiniteData, setInfiniteData] = useState(users || []);
 
@@ -139,9 +141,9 @@ const ManageUser: React.FC<ManageUsersProps> = ({
 
   useEffect(() => {
     const getFacilitator = async () => {
-      if (!isMobile) {
-        setLoading(true);
-      }
+      // if (!isMobile) {
+      // }
+      setLoading(true);
       try {
         const cohortId = cohortData
           .map((block: any) => {
@@ -151,7 +153,7 @@ const ManageUser: React.FC<ManageUsersProps> = ({
 
         if (cohortId) {
           const limit = 10;
-          // const page = page;
+           const page = offset;
           const filters = {
             states: store.stateCode,
             districts: store.districtCode,
@@ -222,7 +224,7 @@ const ManageUser: React.FC<ManageUsersProps> = ({
           setUsers(extractedData);
           // setLoading(false);
           if (isMobile) {
-            setInfiniteData([...infiniteData, ...extractedData]);
+           setInfiniteData([...infiniteData, ...extractedData]);
           } else {
             setFilteredUsers(extractedData);
             setInfiniteData(extractedData);
@@ -537,21 +539,22 @@ const ManageUser: React.FC<ManageUsersProps> = ({
     );
   };
   const PAGINATION_CONFIG = {
-    ITEMS_PER_PAGE: 12,
+    ITEMS_PER_PAGE: 10,
     INFINITE_SCROLL_INCREMENT: 10
   };
 
 
   const fetchData = async () => {
     try {
-      setInfinitePage((prev) => prev + PAGINATION_CONFIG.INFINITE_SCROLL_INCREMENT);
+     setInfinitePage((prev) => prev + PAGINATION_CONFIG.INFINITE_SCROLL_INCREMENT);
     } catch (error) {
       console.error('Error fetching more data:', error);
       showToastMessage(t('COMMON.SOMETHING_WENT_WRONG'), 'error');
     }
   }
   const handlePageChange = (newPage: number) => {
     setPage(newPage);
+    setOffSet((newPage-1)*10)
   };
 
   return (

diff --git a/src/components/MenuDrawer.tsx b/src/components/MenuDrawer.tsx
@@ -197,6 +197,7 @@ const MenuDrawer: React.FC<DrawerProps> = ({
   const isBoard = router.pathname.includes('/board-enrollment');
   const isSupportRequest = router.pathname.includes('/support-request');
   const isVillagesAndYouths = router.pathname.includes('/youthboard/villages');
+  const isSurveys = router.pathname.includes('/youthboard/surveys');
 
   return (
     <Drawer
@@ -420,6 +421,38 @@ const MenuDrawer: React.FC<DrawerProps> = ({
             >
               {t('DASHBOARD.VILLAGES_AND_YOUTH')}
             </Button>
+
+            <Button
+              className="fs-14"
+              sx={{
+                gap: '10px',
+                width: '100%',
+                display: 'flex',
+                justifyContent: 'flex-start',
+                background: isSurveys
+                  ? theme.palette.primary.main
+                  : 'transparent',
+                padding: isSurveys
+                  ? '16px 18px !important'
+                  : '0px 18px !important',
+                marginTop: '25px',
+                color: isSurveys
+                  ? '#2E1500'
+                  : theme.palette.warning.A200,
+                fontWeight: isSurveys ? '600' : 500,
+                '&:hover': {
+                  background: isSurveys
+                    ? theme.palette.primary.main
+                    : 'transparent',
+                },
+              }}
+              startIcon={<GroupsIcon sx={{ fontSize: '24px !important' }} />}
+              onClick={() => {
+                router.push(`/youthboard/surveys`);
+              }}
+            >
+              Surveys
+            </Button>
           </Box>
         )}
         {!tenantName && (

diff --git a/src/components/youthNet/BackHeader.tsx b/src/components/youthNet/BackHeader.tsx
@@ -38,7 +38,7 @@ const BackHeader: React.FC<BackHeaderProps> = ({
         </IconButton>
       )}
       <Box>
-        <Typography textAlign="left" fontSize="22px">
+        <Typography color={'#1F1B13'} textAlign="left" fontSize="22px">
           {headingOne}
         </Typography>