Merge pull request #195 from upendraTekdi/shiksha-2.0

Issue #PS-314 feat:Learner View profile,learner popup ,learner details
tekdi · May 31, 2024 · 3095e0b · 3095e0b
2 parents bcdf2a8 + d90ec9b
commit 3095e0b
Show file tree

Hide file tree

Showing 15 changed files with 788 additions and 1,103 deletions.
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
@@ -48,6 +48,7 @@
     "SELECT_AN_OPTION": "Select an option",
     "AND": "and",
     "MORE": "more",
+    "CLOSE": "Close",
     "CANCEL":"Cancel",
     "OK":"OK",
     "FROM_TO_DATE":"From - To dates"
@@ -84,7 +85,8 @@
     "MY_TEACHING_CENTERS": "My Teaching Centers",
     "UPCOMING_EXTRA_SESSION": "Upcoming Extra Sessions",
     "BACK_TO_TOP": "Back to Top",
-    "LAST_SEVEN_DAYS_RANGE": "Last 7 Days {{date_range}})"
+    "LAST_SEVEN_DAYS_RANGE": "Last 7 Days {{date_range}})",
+    "LEARNER": "Learners"
   },
   "ATTENDANCE": {
     "TOTAL_STUDENTS": "Total Number of Learners: {{count}}",
@@ -131,6 +133,7 @@
     "VIEW_DAY_WISE": "View Day-Wise",
     "SUBMITTED_ON": "Submitted On",
     "MARK_OBTAINED": "Mark Obtained",
-    "TOTAL_QUESTIONS": "Total Questions"
+    "TOTAL_QUESTIONS": "Total Questions",
+    "VIEW_FULL_PROFILE": "View Full Profile"
   }
 }
diff --git a/public/locales/hi/common.json b/public/locales/hi/common.json
@@ -47,6 +47,7 @@
     "SELECT_AN_OPTION": "कोई विकल्प चुनें",
     "AND": "और",
     "MORE": "अधिक",
+    "CLOSE": "बंद करना",
     "CANCEL":"रद्द करना",
     "OK":"ठीक है",
     "FROM_TO_DATE":"से - दिनांक तक"
@@ -82,7 +83,8 @@
     "MY_TEACHING_CENTERS": "मेरे शिक्षण केंद्र",
     "UPCOMING_EXTRA_SESSION": "आगामी अतिरिक्त सत्र",
     "BACK_TO_TOP": "वापस शीर्ष पर",
-    "LAST_SEVEN_DAYS_RANGE": "पिछले 7 दिन {{date_range}}"
+    "LAST_SEVEN_DAYS_RANGE": "पिछले 7 दिन {{date_range}}",
+    "LEARNER": "शिक्षार्थियों"
   },
   "ATTENDANCE": {
     "TOTAL_STUDENTS": "कुल छात्रों की संख्या: {{count}}",
@@ -131,6 +133,7 @@
     "VIEW_DAY_WISE": "दिन-वार देखें",
     "SUBMITTED_ON": "प्रस्तुत किया गया",
     "MARK_OBTAINED": "प्राप्त अंक",
-    "TOTAL_QUESTIONS": "कुल प्रश्न"
+    "TOTAL_QUESTIONS": "कुल प्रश्न",
+    "VIEW_FULL_PROFILE": "पूरा प्रोफाइल देखें"
   }
 }
diff --git a/public/locales/mr/common.json b/public/locales/mr/common.json
@@ -46,6 +46,7 @@
     "SELECT_AN_OPTION": "एक पर्याय निवडा",
     "AND": "आणि",
     "MORE": "अधिक",
+    "CLOSE": "बंद",
     "CANCEL":"रद्द करा",
     "OK":"ठीक आहे",
     "FROM_TO_DATE":"पासून - तारखा"
@@ -82,7 +83,8 @@
     "MY_TEACHING_CENTERS": "माझे शिक्षण केंद्र",
     "UPCOMING_EXTRA_SESSION": "आगामी अतिरिक्त सत्रे",
     "BACK_TO_TOP": "परत वर जा",
-    "LAST_SEVEN_DAYS_RANGE": "शेवटचे 7 दिवस {{date_range}}"
+    "LAST_SEVEN_DAYS_RANGE": "शेवटचे 7 दिवस {{date_range}}",
+    "LEARNER": "शिकणारे"
   },
   "ATTENDANCE": {
     "TOTAL_STUDENTS": "एकूण विद्यार्थी: {{count}}",
@@ -126,6 +128,7 @@
     "VIEW_DAY_WISE": "दिवस-निहाय पहा",
     "SUBMITTED_ON": "सादर केलेले",
     "MARK_OBTAINED": "प्राप्त गुण",
-    "TOTAL_QUESTIONS": "एकूण प्रश्न"
+    "TOTAL_QUESTIONS": "एकूण प्रश्न",
+    "VIEW_FULL_PROFILE": "पूर्ण प्रोफाइल पहा"
   }
 }
diff --git a/src/components/AttendanceStatusListView.tsx b/src/components/AttendanceStatusListView.tsx
@@ -1,16 +1,23 @@
 import { Box, Typography } from '@mui/material';
 
 import { ATTENDANCE_ENUM } from '../utils/Helper';
-import { AttendanceStatusListViewProps } from '../utils/Interfaces';
+import {
+  AttendanceStatusListViewProps,
+  UserData,
+  updateCustomField,
+} from '../utils/Interfaces';
 import { BorderBottom } from '@mui/icons-material';
 import CancelIcon from '@mui/icons-material/Cancel'; //absent
 import CheckCircleIcon from '@mui/icons-material/CheckCircle'; //present
 import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
 import HighlightOffIcon from '@mui/icons-material/HighlightOff';
-import React from 'react';
+import React, { useState } from 'react';
 import { useTheme } from '@mui/material/styles';
 import { useTranslation } from 'next-i18next';
 import Link from 'next/link';
+import LearnerModal from './LearnerModal';
+import { getUserDetails } from '@/services/ProfileService';
+import Loader from './Loader';
 
 const AttendanceStatusListView: React.FC<AttendanceStatusListViewProps> = ({
   isDisabled = false,
@@ -48,8 +55,83 @@ const AttendanceStatusListView: React.FC<AttendanceStatusListViewProps> = ({
       handleBulkAction(isBulkAction, selectedAction, id);
     }
   };
+
+  // -----learner profile  details----
+  const [usersData, setUsersData] = React.useState<UserData | null>(null);
+  const [customFieldsData, setCustomFieldsData] = React.useState<
+    updateCustomField[]
+  >([]);
+  const [userName, setUserName] = React.useState('');
+  const [isModalOpenLearner, setIsModalOpenLearner] = useState(false);
+  const [loading, setLoading] = useState(false);
+  // const userId = '12345'; // Replace with the actual user ID you want to pass
+
+  const handleOpenModalLearner = (userId: string) => {
+    fetchUserDetails(userId);
+    setIsModalOpenLearner(true);
+  };
+
+  const handleCloseModalLearner = () => {
+    setIsModalOpenLearner(false);
+  };
+
+  const fetchUserDetails = async (userId: string) => {
+    try {
+      if (userId) {
+        setLoading(true);
+        const response = await getUserDetails(userId, true);
+        console.log('response for popup', response?.result);
+        if (response?.responseCode === 200) {
+          const data = response?.result;
+          if (data) {
+            const userData = data?.userData;
+            // setUsersData(userData);
+            setUserName(userData?.name);
+
+            const customDataFields = userData?.customFields;
+            if (customDataFields?.length > 0) {
+              console.log('customDataFields', customDataFields);
+              setCustomFieldsData(customDataFields);
+            }
+            setLoading(false);
+          } else {
+            console.log('No data Found');
+          }
+        } else {
+          console.log('No Response Found');
+        }
+      }
+    } catch (error) {
+      console.error('Error fetching user details:', error);
+    }
+  };
+  const names = [
+    'name',
+    'age',
+    'gender',
+    'student_type',
+    'enrollment_number',
+    'primary_work',
+  ];
+
+  const filteredFields = names
+    .map((label) => customFieldsData.find((field) => field.name === label))
+    .filter(Boolean);
+
   return (
     <Box>
+      {loading ? (
+        <Loader showBackdrop={true} loadingText={t('COMMON.LOADING')} />
+      ) : (
+        <LearnerModal
+          userId={userData?.userId}
+          open={isModalOpenLearner}
+          onClose={handleCloseModalLearner}
+          data={filteredFields}
+          userName={userName}
+        />
+      )}
+
       <Box sx={boxStyling}>
         <Typography
           variant="body1"
@@ -61,8 +143,17 @@ const AttendanceStatusListView: React.FC<AttendanceStatusListViewProps> = ({
             fontWeight: '400',
             color: '#1F1B13',
           }}
+          onClick={() => handleOpenModalLearner(userData?.userId!)}
         >
-          {isBulkAction ? t('ATTENDANCE.MARK_ALL') : (showLink ? <Link style={{color: theme.palette.secondary.main}} href={`/learner-profile/${userData?.userId}`}> {userData?.name}</Link> : userData?.name)}
+          {isBulkAction ? (
+            t('ATTENDANCE.MARK_ALL')
+          ) : showLink ? (
+            <Link style={{ color: theme.palette.secondary.main }} href={''}>
+              {userData?.name}
+            </Link>
+          ) : (
+            userData?.name
+          )}
         </Typography>
         <Box
           display="flex"