Skip to content

Commit

Permalink
Issue #PS-798 fix: Implementation of UI component as per figma to ass…
Browse files Browse the repository at this point in the history 
…ign facilitator to village/centre at district level
  • Loading branch information
@shreyas143shinde
shreyas143shinde committed Jun 19, 2024
1 parent a5b18ef commit aef04d4
Show file tree
Hide file tree
Showing 3 changed files with 95 additions and 194 deletions.
159 changes: 40 additions & 119 deletions src/components/ManageCentersModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,13 @@ import Typography from '@mui/material/Typography';
import { useTheme } from '@mui/material/styles';
import { useTranslation } from 'next-i18next';

export default function ManageCentersModal() {
interface ManageUsersModalProps {
centersName: string[];
}

const ManageCentersModal: React.FC<ManageUsersModalProps> = ({
centersName,
}) => {
const theme = useTheme<any>();
const { t } = useTranslation();
const [open, setOpen] = React.useState(false);
Expand Down Expand Up @@ -92,123 +98,36 @@ export default function ManageCentersModal() {
</Box>
<Box mx={'20px'}>
<Box sx={{ height: '37vh', mt: '10px', overflowY: 'auto' }}>
<Box
borderBottom={theme.palette.warning['A100']}
sx={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
}}
>
<Box
sx={{
fontSize: '16px',
color: theme.palette.warning['300'],
pb: '20px',
}}
>
Khapari Dharmu
</Box>
<Box>
<Checkbox sx={{ py: '20px' }} className="checkBox_svg" />
</Box>
</Box>

<Box
borderBottom={theme.palette.warning['A100']}
sx={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
}}
>
<Box
sx={{
fontSize: '16px',
color: theme.palette.warning['300'],
py: '20px',
}}
>
Kolara
</Box>
<Box>
<Checkbox sx={{ py: '20px' }} className="checkBox_svg" />
</Box>
</Box>

<Box
borderBottom={theme.palette.warning['A100']}
sx={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
}}
>
<Box
sx={{
fontSize: '16px',
color: theme.palette.warning['300'],
py: '20px',
}}
>
Madnapur
</Box>
<Box>
<Checkbox
sx={{ paddingBottom: '20px' }}
className="checkBox_svg"
/>
</Box>
</Box>

<Box
borderBottom={theme.palette.warning['A100']}
sx={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
}}
>
<Box
sx={{
fontSize: '16px',
color: theme.palette.warning['300'],
py: '20px',
}}
>
Piparda
</Box>
<Box>
<Checkbox
sx={{ paddingBottom: '20px' }}
className="checkBox_svg"
/>
</Box>
</Box>
<Box
borderBottom={theme.palette.warning['A100']}
sx={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
}}
>
<Box
sx={{
fontSize: '16px',
color: theme.palette.warning['300'],
py: '20px',
}}
>
Vihirgaon
</Box>
<Box>
<Checkbox
sx={{ paddingBottom: '20px' }}
className="checkBox_svg"
/>
</Box>
</Box>
{centersName?.map((name, index) => {
return (
<React.Fragment key={index}>
<Box
borderBottom={theme.palette.warning['A100']}
sx={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
}}
>
<Box
sx={{
fontSize: '16px',
color: theme.palette.warning['300'],
pb: '20px',
}}
>
{name}
</Box>
<Box>
<Checkbox
sx={{ pb: '20px' }}
className="checkBox_svg"
/>
</Box>
</Box>
</React.Fragment>
);
})}
</Box>
</Box>
<Divider />
Expand All @@ -225,4 +144,6 @@ export default function ManageCentersModal() {
</Modal>
</div>
);
}
};

export default ManageCentersModal;
106 changes: 31 additions & 75 deletions src/components/ManageUsersModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,15 @@ import Typography from '@mui/material/Typography';
import { useTheme } from '@mui/material/styles';
import { useTranslation } from 'next-i18next';

export default function ManageUsersModal() {
interface ManageUsersModalProps {
leanerName: string;
centerName: string[];
}

const ManageUsersModal: React.FC<ManageUsersModalProps> = ({
leanerName,
centerName,
}) => {
const theme = useTheme<any>();
const { t } = useTranslation();
const [open, setOpen] = React.useState(false);
Expand Down Expand Up @@ -53,7 +61,7 @@ export default function ManageUsersModal() {
}}
component="h2"
>
Aditi Patel
{leanerName}
</Typography>
</Box>
<CloseIcon
Expand Down Expand Up @@ -83,81 +91,29 @@ export default function ManageUsersModal() {
flexWrap: 'wrap',
}}
>
<Button
sx={{
padding: '6px 12px',
borderRadius: '8px',
fontSize: '14px',
fontWeight: 500,
borderBottom: `1px solid ${theme.palette.warning[900]}`,
}}
className="text-dark-grey"
>
Bhiwapur
</Button>
<Button
sx={{
borderBottom: `1px solid ${theme.palette.warning[900]}`,
padding: '6px, 12px 6px 12px',
borderRadius: '8px',
fontSize: '14px',
fontWeight: 500,
}}
className="text-dark-grey"
>
Jabarbodi
</Button>
<Button
sx={{
borderBottom: `1px solid ${theme.palette.warning[900]}`,
padding: '6px, 12px 6px 12px',
borderRadius: '8px',
fontSize: '14px',
fontWeight: 500,
}}
className="text-dark-grey"
>
Kargaon
</Button>
<Button
sx={{
borderBottom: `1px solid ${theme.palette.warning[900]}`,
padding: '6px, 12px 6px 12px',
borderRadius: '8px',
fontSize: '14px',
fontWeight: 500,
}}
className="text-dark-grey"
>
Katol
</Button>
<Button
sx={{
borderBottom: `1px solid ${theme.palette.warning[900]}`,
padding: '6px, 12px 6px 12px',
borderRadius: '8px',
fontSize: '14px',
fontWeight: 500,
}}
className="text-dark-grey"
>
Kondhali
</Button>
<Button
sx={{
borderBottom: `1px solid ${theme.palette.warning[900]}`,
padding: '6px, 12px 6px 12px',
borderRadius: '8px',
fontSize: '14px',
fontWeight: 500,
}}
className="text-dark-grey"
>
Metpanjara
</Button>
{centerName?.map((name, index) => {
return (
<React.Fragment key={index}>
<Button
sx={{
padding: '6px 12px',
borderRadius: '8px',
fontSize: '14px',
fontWeight: 500,
borderBottom: `1px solid ${theme.palette.warning[900]}`,
}}
className="text-dark-grey"
>
{name}
</Button>
</React.Fragment>
);
})}
</Box>
</Box>
</Modal>
</div>
);
}
};

export default ManageUsersModal;
24 changes: 24 additions & 0 deletions src/pages/manageUser.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ import { FormControl, Grid, MenuItem, Select, TextField } from '@mui/material';
import Box from '@mui/material/Box';
import Header from '@/components/Header';
import InputAdornment from '@mui/material/InputAdornment';
import ManageCentersModal from '@/components/ManageCentersModal';
import ManageUsersModal from '@/components/ManageUsersModal';
import MoreVertIcon from '@mui/icons-material/MoreVert';
import React from 'react';
import SearchIcon from '@mui/icons-material/Search';
Expand Down Expand Up @@ -180,6 +182,28 @@ const manageUser = () => {
/>
</Box>
</Box>
<ManageUsersModal
leanerName={'Aditi Patel'}
centerName={[
'Bhiwapur',
'Jabarbodi',
'Kargaon',
'Katol',
'Kondhali',
'Metpanjara',
]}
/>
use this after you integrate in bottom modal
<ManageCentersModal
centersName={[
'Khapari Dharmu',
'Kolara',
'Madnapur',
'Piparda',
'Kondhali',
'Vihirgaon',
]}
/>
</Box>
</>
)}
Expand Down

0 comments on commit aef04d4

Please sign in to comment.