Merge branch 'release-1.1.0' of github.com:tekdi/teachers-app into re…

…lease-1.1.0
tekdi · Jan 29, 2025 · 09bee26 · 09bee26
2 parents bb689dd + a740e3d
commit 09bee26
Show file tree

Hide file tree

Showing 14 changed files with 382 additions and 117 deletions.
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
@@ -597,6 +597,8 @@
     "MARATHI":"Marathi",
     "URDU":"Urdu",
     "DIVORCED/WIDOW":"Divorced/Widow",
+    "AVAILABLE_SUGGESTIONS":"Available suggestions:",
+    "USERNAME_ALREADY_EXIST":"This username already exists",
     "GRADUATE":"Graduate",
     "POST_GRADUATE":"Post Graduate"
   },

diff --git a/src/components/AddLeanerModal.tsx b/src/components/AddLeanerModal.tsx
@@ -19,7 +19,7 @@ import {
 import { telemetryFactory } from '@/utils/telemetry';
 import { IChangeEvent } from '@rjsf/core';
 import { RJSFSchema } from '@rjsf/utils';
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import ReactGA from 'react-ga4';
 import { useTranslation } from 'react-i18next';
 import { tenantId } from '../../app.config';
@@ -298,31 +298,26 @@ const AddLearnerModal: React.FC<AddLearnerModalProps> = ({
     }
   };
 
-  const handleChange = (event: IChangeEvent<any>) => {
+   const handleChange = (event: IChangeEvent<any>) => {
     const { formData } = event;
-
+  
     if (!isEditModal) {
       const { firstName, lastName, username } = formData;
+
       if (firstName && lastName) {
-        const updatedUsername = event.formData.username
-          ? username
-          : firstName && lastName
-            ? (firstName + lastName).toLowerCase()
-            : '';
-
-        const updatedFormData = {
+
+        setCustomFormData({
           ...formData,
-          username: updatedUsername,
-        };
-
-        setCustomFormData(updatedFormData);
+
+        });
       } else {
-        setCustomFormData({ ...event.formData });
+        setCustomFormData({ ...formData });
       }
     } else {
       setCustomFormData({ ...formData });
     }
   };
+
 
   const handleError = (errors: any) => {
     console.log('Form errors:', errors);
@@ -372,6 +367,7 @@ const AddLearnerModal: React.FC<AddLearnerModalProps> = ({
             customFields={customFields}
             formData={customFormData ?? undefined}
             setFormData={setCustomFormData}
+            isEdit={isEditModal}
           >
             <FormButtons
               formData={formData ?? learnerFormData}

diff --git a/src/components/DynamicForm.tsx b/src/components/DynamicForm.tsx
@@ -12,6 +12,7 @@ import MultiSelectDropdown from './MultiSelectDropdown';
 import CustomNumberWidget from './CustomNumberWidget';
 import UsernameWithSuggestions from './UsernameWithSuggestions';
 import { customValidation } from './FormValidation';
+import { userNameExist } from '@/services/CreateUserService';
 
 const FormWithMaterialUI = withTheme(MaterialUITheme);
 
@@ -38,6 +39,7 @@ interface DynamicFormProps {
     [key: string]: React.FC<RegistryFieldsType<any, RJSFSchema, any>>;
   };
   children?: ReactNode;
+  isEdit?: boolean;
 }
 
 const DynamicForm: React.FC<DynamicFormProps> = ({
@@ -50,6 +52,7 @@ const DynamicForm: React.FC<DynamicFormProps> = ({
   customFields,
   children,
   setFormData,
+  isEdit=false,
 }) => {
   const widgets = {
     MultiSelectCheckboxes: MultiSelectCheckboxes,
@@ -271,17 +274,64 @@ const DynamicForm: React.FC<DynamicFormProps> = ({
       return error;
     });
   }
-
-  function handleChange(event: any) {
+  const validateUsername = async (userData: { firstName: string; lastName: string; username: string }) => {
+    try {
+      const response = await userNameExist(userData);
+      setSuggestions([response?.suggestedUsername]);
+    } catch (error) {
+      setSuggestions([]);
+      console.error('Error validating username:', error);
+    }
+  };
+  const handleChange= async(event: any)=> {
     const sanitizedData = sanitizeFormData(event.formData);
+    if(formData?.username && formData?.firstName && formData?.lastName && formData?.username!== event.formData?.username) 
+    {
+      const userData = {
+        firstName: formData?.firstName,
+        lastName: formData?.lastName,
+        username: event.formData?.username,
+      }
+      //         const response = await userNameExist(userData);
+      // setSuggestions([response?.suggestedUsername]);
+      await validateUsername(userData);
+
+    }
     onChange({ ...event, formData: sanitizedData });
   }
   const handleUsernameBlur = async (username: string) => {
-    if (username) {
+
+    if (username && formData?.firstName && formData?.lastName) {
+      const userData = {
+        firstName: formData?.firstName,
+        lastName: formData?.lastName,
+        username: username,
+      }
+      await validateUsername(userData)     
+    }
+  };
+  const handleFirstLastNameBlur = async (lastName: string) => {
+    if (lastName && !isEdit) {
       try {
-        console.log('Username onblur called');
-        // setSuggestions(["1234"])
+        console.log('Username onblur called' ,formData);
+        if(formData?.firstName && formData?.lastName){
+          if( setFormData){
+            setFormData((prev: any) => ({
+              ...prev,
+              username: formData.username ? formData.username :`${formData?.firstName}${formData?.lastName}`.toLowerCase(),
+            }));
+            const userData = {
+              firstName: formData?.firstName,
+              lastName: formData?.lastName,
+              username: formData.username ? formData.username: `${formData?.firstName}${formData?.lastName}`.toLowerCase(),
+            }
+            await validateUsername(userData)  
+
+          }
+        }
       } catch (error) {
+        setSuggestions([]);
+
         console.error('Error validating username:', error);
       }
     }
@@ -321,6 +371,9 @@ const DynamicForm: React.FC<DynamicFormProps> = ({
           if (field === 'username') {
             handleUsernameBlur(value);
           }
+          if (field === 'root_lastName' || field === 'root_firstName') {
+            handleFirstLastNameBlur(value);
+          }
         }}
       >
         {children}

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -67,7 +67,7 @@ const Header: React.FC<HeaderProps> = ({ toggleDrawer, openDrawer }) => {
     const tenant = localStorage.getItem('tenantName');
     if (pathname !== `/user-profile/${userId}`) {
       if (tenant?.toLowerCase() === TENANT_DATA.YOUTHNET?.toLowerCase()) {
-        router.push(`youthboard/user-profile/${userId}`);
+        router.push(`/youthboard/user-profile/${userId}`);
       } else if (
         tenant?.toLowerCase() ===
         TENANT_DATA.SECOND_CHANCE_PROGRAM?.toLowerCase()

diff --git a/src/components/UsernameWithSuggestions.tsx b/src/components/UsernameWithSuggestions.tsx
@@ -6,6 +6,8 @@ import {
   Typography,
 } from '@mui/material';
 import { WidgetProps } from '@rjsf/utils';
+import { useTranslation } from 'next-i18next';
+
 import React from 'react';
 interface UsernameWidgetProps {
   formContext: {
@@ -24,6 +26,7 @@ const UsernameWithSuggestions: React.FC<UsernameWidgetProps> = ({
   ...rest
 }) => {
   const { suggestions, onSuggestionSelect } = formContext;
+  const { t } = useTranslation();
 
   const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {
     if (onBlur) {
@@ -56,8 +59,14 @@ const UsernameWithSuggestions: React.FC<UsernameWidgetProps> = ({
         <div>
           {suggestions?.map((suggestion: any, index: number) => (
             <Box>
-              {/* Availble suggestion :  */}
-              <Typography
+ <Typography variant="h6" color="error" gutterBottom>
+         {t('FORM.USERNAME_ALREADY_EXIST')}
+        </Typography>
+        <Typography variant="h6" color="textSecondary" gutterBottom>
+          {t('FORM.AVAILABLE_SUGGESTIONS')}
+
+        </Typography>             
+         <Typography
                 onClick={() => onSuggestionSelect(suggestion)}
                 sx={{ cursor: 'pointer', color: 'green' }}
               >

diff --git a/src/components/youthNet/BackHeader.tsx b/src/components/youthNet/BackHeader.tsx
@@ -3,7 +3,7 @@ import { Box, IconButton, Typography } from '@mui/material';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 
 interface BackHeaderProps {
-  headingOne: string;
+  headingOne?: string;
   headingTwo?: string;
   headingThree?: string;
   onBackClick?: () => void;

diff --git a/src/components/youthNet/DropDown.tsx b/src/components/youthNet/DropDown.tsx
@@ -0,0 +1,39 @@
+import { MenuItem, FormControl, Select, InputLabel } from '@mui/material';
+import { useState } from 'react';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+
+interface DropdownProps {
+  name: string;
+  values: string[];
+  onSelect: (value: string) => void;
+}
+
+const Dropdown: React.FC<DropdownProps> = ({ name, values, onSelect }) => {
+  const [selectedValue, setSelectedValue] = useState('');
+
+  const handleChange = (event: any) => {
+    const value = event.target.value;
+    setSelectedValue(value);
+    onSelect(value);
+  };
+
+  return (
+    <FormControl fullWidth>
+      <InputLabel>{name}</InputLabel>
+      <Select
+        value={selectedValue}
+        label={name}
+        onChange={handleChange}
+        IconComponent={KeyboardArrowDownIcon}
+      >
+        {values.map((value, index) => (
+          <MenuItem key={index} value={value}>
+            {value}
+          </MenuItem>
+        ))}
+      </Select>
+    </FormControl>
+  );
+};
+
+export default Dropdown;
diff --git a/src/components/youthNet/UserCard.tsx b/src/components/youthNet/UserCard.tsx
@@ -22,11 +22,7 @@ type UserCardProps = {
   showMore?: boolean;
   totalCount?: number;
   newRegistrations?: number;
-};
-
-type UserListProps = {
-  users: UserCardProps[];
-  layout?: 'list' | 'grid'; // Added layout prop
+  onClick?: (name: string) => void; // Add onClick prop
 };
 
 const UserCard: React.FC<UserCardProps> = ({
@@ -40,12 +36,14 @@ const UserCard: React.FC<UserCardProps> = ({
   showAvtar,
   totalCount,
   newRegistrations,
+  onClick,
 }) => {
   const theme = useTheme<any>();
+
   return (
     <Box
       display={'flex'}
-      borderBottom={`1px solid ${theme.palette.warning['A100']}`}
+      // borderBottom={`1px solid ${theme.palette.warning['A100']}`}
       width={'100%'}
       justifyContent={'space-between'}
       sx={{
@@ -56,6 +54,7 @@ const UserCard: React.FC<UserCardProps> = ({
           },
         }),
       }}
+      onClick={() => onClick && onClick(name)}
     >
       <ListItem>
         {showAvtar && (
@@ -99,10 +98,16 @@ const UserCard: React.FC<UserCardProps> = ({
           </Typography>
           <Box display={'flex'} justifyContent={'space-between'} width={'100%'}>
             <Box sx={{ display: 'flex', gap: '8px' }}>
-              {age && (
+              {age ? (
                 <Typography variant="body2" color="textSecondary">
                   {age} y/o • {village || joinOn}
                 </Typography>
+              ) : (
+                village && (
+                  <Typography variant="body2" color="textSecondary">
+                    {village || joinOn}
+                  </Typography>
+                )
               )}
               {isNew && (
                 <Typography
@@ -152,9 +157,16 @@ const UserCard: React.FC<UserCardProps> = ({
   );
 };
 
+type UserListProps = {
+  users: UserCardProps[];
+  layout?: 'list' | 'grid'; // Added layout prop
+  onUserClick?: (name: string) => void; // Add onUserClick prop
+};
+
 export const UserList: React.FC<UserListProps> = ({
   users,
   layout = 'grid',
+  onUserClick, // Receive onUserClick prop
 }) => {
   return layout === 'grid' ? (
     <List>
@@ -168,7 +180,8 @@ export const UserList: React.FC<UserListProps> = ({
               md={user.totalCount ? 12 : 6}
               lg={user.totalCount ? 12 : 4}
             >
-              <UserCard {...user} />
+              <UserCard {...user} onClick={onUserClick} />{' '}
+              {/* Pass onUserClick */}
             </Grid>
             {index < users.length - 1 && <Divider />}
           </React.Fragment>
@@ -179,7 +192,7 @@ export const UserList: React.FC<UserListProps> = ({
     <List>
       {users.map((user, index) => (
         <React.Fragment key={index}>
-          <UserCard {...user} />
+          <UserCard {...user} onClick={onUserClick} />
           {index < users.length - 1 && <Divider />}
         </React.Fragment>
       ))}