Skip to content

Commit

Permalink
Merge pull request #652 from Aar-if/subzero
Browse files Browse the repository at this point in the history
Issue #PS-3384 feat: UI component for pop up of youth profile
  • Loading branch information
itsvick authored Jan 29, 2025
2 parents 75e08c5 + df4e550 commit ab79e5c
Show file tree
Hide file tree
Showing 9 changed files with 242 additions and 44 deletions.
2 changes: 1 addition & 1 deletion src/components/Header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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()
Expand Down
2 changes: 1 addition & 1 deletion src/components/youthNet/BackHeader.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
39 changes: 39 additions & 0 deletions src/components/youthNet/DropDown.tsx
Original file line number Diff line number Diff line change
@@ -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;
31 changes: 22 additions & 9 deletions src/components/youthNet/UserCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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> = ({
Expand All @@ -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={{
Expand All @@ -56,6 +54,7 @@ const UserCard: React.FC<UserCardProps> = ({
},
}),
}}
onClick={() => onClick && onClick(name)}
>
<ListItem>
{showAvtar && (
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
))}
Expand Down
12 changes: 12 additions & 0 deletions src/components/youthNet/tempConfigs.ts
Original file line number Diff line number Diff line change
Expand Up @@ -246,6 +246,17 @@ export const villageList = [
},
];

export const DROPDOWN_NAME = 'Village';
export const VILLAGE_OPTIONS = ['Shivare', 'Pune', 'Mumbai'];

export const studentListDetails = [
{
name: 'Ananya Gupta',
age: 'Shivare (Bhor, Pune, Maharashtra)',
showMore: true,
showAvtar: true,
},



// surveys UI data
Expand Down Expand Up @@ -340,4 +351,5 @@ export const surveysData = [
actionRequired: "Finalize List of Attendees"
}
}

];
96 changes: 96 additions & 0 deletions src/pages/youthboard/student/[id].tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
import withRole from '@/components/withRole';
import React, { useEffect, useState } from 'react';
import { TENANT_DATA } from '../../../../app.config';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
import { useRouter } from 'next/router';
import { useTranslation } from 'react-i18next';
import { GetStaticPaths } from 'next';
import Header from '@/components/Header';
import BackHeader from '@/components/youthNet/BackHeader';
import { Box, Typography } from '@mui/material';
import { UserList } from '@/components/youthNet/UserCard';
import Profile from '@/components/youthNet/Profile';
import { useTheme } from '@mui/material/styles';

const StudentDetails = () => {
const theme = useTheme<any>();
const { t } = useTranslation();
const router = useRouter();
const { id } = router.query;

const [studentName, setStudentName] = useState<string | undefined>(undefined);

useEffect(() => {
if (Array.isArray(id)) {
setStudentName(id[0]);
} else {
setStudentName(id);
}
}, [id]);

const handleBack = () => {
router.back();
};

return (
<Box minHeight="100vh">
<Box>
<Header />
</Box>
<Box ml={2} display={'flex'} flexDirection={'row'}>
<Box sx={{ width: 30 }}>
<BackHeader showBackButton={true} onBackClick={handleBack} />
</Box>
<Box sx={{ width: '100%' }}>
<UserList
layout="list"
users={[
{
name: studentName || '',
village: 'Shivare (Bhor, Pune, Maharashtra)',
showMore: true,
showAvtar: true,
},
]}
/>
</Box>
</Box>
<Box
sx={{
background: theme.palette.info.gradient,
padding: '24px 16px 24px 16px',
}}
>
<Typography
variant="h6"
sx={{
fontSize: '14px',
fontWeight: 500,
color: theme.palette.info.black,
}}
>
{t('YOUTHNET_PROFILE.PROFILE_DETAILS')}
</Typography>
<Profile fullName={studentName || ''} emailId={''} />
</Box>
</Box>
);
};

export async function getStaticProps({ locale }: any) {
return {
props: {
...(await serverSideTranslations(locale, ['common'])),
// Will be passed to the page component as props
},
};
}

export const getStaticPaths: GetStaticPaths<{ slug: string }> = async () => {
return {
paths: [], //indicates that no page needs be created at build time
fallback: 'blocking', //indicates the type of fallback
};
};

export default withRole(TENANT_DATA.YOUTHNET)(StudentDetails);
19 changes: 0 additions & 19 deletions src/pages/youthboard/villageDetails.tsx

This file was deleted.

Loading

0 comments on commit ab79e5c

Please sign in to comment.