Skip to content

2
2023-029
Commit 603a830f authored by janithgamage1.ed's avatar janithgamage1.ed
Browse files
Options

fix: update 

desc : update project
parent dec84279
Hide whitespace changes
Inline Side-by-side
Showing with 98 additions and 175 deletions
Project/Frontend/SignConnectPlus/src/sections/learning-management/learning-curriculums/Animation.tsx 0 → 100644
View file @ 603a830f
import React, { useEffect } from 'react';
// third party
import { useInView } from 'react-intersection-observer';
import { motion, useAnimation } from 'framer-motion';
// =============================|| LANDING - FADE IN ANIMATION ||============================= //
function Animation({ children, variants }: { children: React.ReactElement; variants: any }) {
const controls = useAnimation();
const [ref, inView] = useInView();
useEffect(() => {
if (inView) {
controls.start('visible');
}
}, [controls, inView]);
return (
<motion.div
ref={ref}
animate={controls}
initial="hidden"
transition={{
x: {
type: 'spring',
stiffness: 150,
damping: 30,
duration: 0.5
},
opacity: { duration: 1 }
}}
variants={variants}
>
{children}
</motion.div>
);
}
export default Animation;
Project/Frontend/SignConnectPlus/src/sections/learning-management/learning-curriculums/CurriculumCard.tsx
View file @ 603a830f
...@@ -2,33 +2,23 @@ import { useState } from 'react'; ...@@ -2,33 +2,23 @@ import { useState } from 'react';
// material-ui // material-ui
import { import {
Box,
Button, Button,
Divider,
Fade,
Grid, Grid,
List,
ListItem,
ListItemAvatar,
ListItemText,
Menu,
MenuItem,
Stack,
Typography Typography
} from '@mui/material'; } from '@mui/material';
// third-party // third-party
import { PDFDownloadLink } from '@react-pdf/renderer';
// project import // project import
import IconButton from 'components/@extended/IconButton';
import MainCard from 'components/MainCard'; import MainCard from 'components/MainCard';
// assets // assets
import { MoreOutlined } from '@ant-design/icons'; import { PlusOutlined, SendOutlined } from '@ant-design/icons';
import Avatar from 'components/@extended/Avatar'; import AnimateButton from 'components/@extended/AnimateButton';
import curriculumLevels from 'data/curriculumLevels';
import CurriculumPreview from './CurriculumPreview';
import { curriculumType } from 'types/curriculum'; import { curriculumType } from 'types/curriculum';
import Animation from './Animation';
import CurriculumPreview from './CurriculumPreview';
// types // types
...@@ -45,169 +35,62 @@ const CurriculumCard = ({ curriculum }: { curriculum: curriculumType }) => { ...@@ -45,169 +35,62 @@ const CurriculumCard = ({ curriculum }: { curriculum: curriculumType }) => {
setOpen(false); setOpen(false);
}; };
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
const openMenu = Boolean(anchorEl);
const handleMenuClick = (event: React.MouseEvent<HTMLElement>) => {
setAnchorEl(event.currentTarget);
};
const handleMenuClose = () => {
setAnchorEl(null);
};
return ( return (
<> <>
<MainCard sx={{ height: 1, '& .MuiCardContent-root': { height: 1, display: 'flex', flexDirection: 'column' } }}> <Animation
<Grid id="print" container spacing={2.25}> variants={{
<Grid item xs={12}> visible: { opacity: 1 },
<List sx={{ width: 1, p: 0 }}> hidden: { opacity: 0 }
<ListItem }}
disablePadding >
secondaryAction={ <MainCard contentSX={{ p: 3 }}>
<IconButton edge="end" aria-label="comments" color="secondary" onClick={handleMenuClick}> <Grid container spacing={1.5}>
<MoreOutlined style={{ fontSize: '1.15rem' }} /> <Grid item xs={12}>
</IconButton> <Typography variant="h3" sx={{ fontWeight: 600, mt: 2 }}>
} {curriculum.curriculumTitle}
> </Typography>
<ListItemAvatar>
<Avatar alt={curriculum.curriculumTitle!} src={curriculum.curriculumImage!} />
</ListItemAvatar>
<ListItemText
primary={<Typography variant="subtitle1">{curriculum.curriculumTitle}</Typography>}
secondary={
<Typography variant="caption" color="secondary">
{curriculumLevels.find(level => level.id === curriculum.curriculumLevel)?.description || ""}
</Typography>
}
/>
</ListItem>
</List>
<Menu
id="fade-menu"
MenuListProps={{
'aria-labelledby': 'fade-button'
}}
anchorEl={anchorEl}
open={openMenu}
onClose={handleMenuClose}
TransitionComponent={Fade}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'right'
}}
transformOrigin={{
vertical: 'top',
horizontal: 'right'
}}
>
<MenuItem sx={{ a: { textDecoration: 'none', color: 'inherit' } }}>
<PDFDownloadLink
document={<></>} fileName={`${curriculum.curriculumCode}-${curriculum.curriculumTitle}.pdf`}
// document={<ListSmallCard customer={customer} />} fileName={`Customer-${customer.fatherName}.pdf`}
>
Export PDF
</PDFDownloadLink>
</MenuItem>
</Menu>
</Grid>
<Grid item xs={12}>
<Divider />
</Grid>
<Grid item xs={12}>
<Typography>{curriculum.curriculumDescription}</Typography>
</Grid>
{/* <Grid item xs={12}>
<Grid container spacing={1}>
<Grid item xs={6}>
<List sx={{ p: 0, overflow: 'hidden', '& .MuiListItem-root': { px: 0, py: 0.5 } }}>
<ListItem>
<ListItemIcon>
<MailOutlined />
</ListItemIcon>
<ListItemText primary={<Typography color="secondary">{customer.email}</Typography>} />
</ListItem>
<ListItem>
<ListItemIcon>
<PhoneOutlined />
</ListItemIcon>
<ListItemText
primary={
<Typography color="secondary">
<PatternFormat displayType="text" format="+1 (###) ###-####" mask="_" defaultValue={customer.contact} />
</Typography>
}
/>
</ListItem>
</List>
</Grid>
<Grid item xs={6}>
<List sx={{ p: 0, overflow: 'hidden', '& .MuiListItem-root': { px: 0, py: 0.5 } }}>
<ListItem>
<ListItemIcon>
<EnvironmentOutlined />
</ListItemIcon>
<ListItemText primary={<Typography color="secondary">{customer.country}</Typography>} />
</ListItem>
<ListItem>
<ListItemIcon>
<LinkOutlined />
</ListItemIcon>
<ListItemText
primary={
<Link href="https://google.com" target="_blank" sx={{ textTransform: 'lowercase' }}>
https://{customer.firstName}.en
</Link>
}
/>
</ListItem>
</List>
</Grid>
</Grid> </Grid>
</Grid> <Grid item xs={12}>
<Grid item xs={12}> <Typography variant="body1" color="secondary">
<Box> {curriculum.curriculumDescription}
<Box </Typography>
sx={{ </Grid>
display: 'flex', <Grid md={3}>
flexWrap: 'wrap', <Box sx={{ display: 'inline-block' }}>
listStyle: 'none', <AnimateButton>
p: 0.5, <Button
m: 0 variant="outlined"
}} endIcon={<PlusOutlined />}
component="ul" sx={{ my: 2 }}
> // onClick={handleClickOpen}
{customer.skills.map((skill: string, index: number) => ( color='success'
<ListItem disablePadding key={index} sx={{ width: 'auto', pr: 0.75, pb: 0.75 }}> >
<Chip color="secondary" variant="outlined" size="small" label={skill} /> Follow
</ListItem> </Button>
))} </AnimateButton>
</Box> </Box>
</Box> </Grid>
</Grid> */} <Grid md={3}>
</Grid> <Box sx={{ display: 'inline-block' }}>
<Stack <AnimateButton>
direction="row" <Button
className="hideforPDf" variant="outlined"
alignItems="center" endIcon={<SendOutlined />}
spacing={1} sx={{ my: 2 }}
justifyContent="space-between" onClick={handleClickOpen}
sx={{ mt: 'auto', mb: 0, pt: 2.25 }} >
> Preview
<Typography variant="caption" color="secondary"> </Button>
Updated in {curriculum.createdAt?.toLocaleTimeString()} </AnimateButton>
</Typography> </Box>
</Grid>
<Button variant="outlined" size="small" onClick={() => { <Grid md={6} />
handleClickOpen() <Grid item xs={12} sx={{ '& img': { mb: -3.75, width: `calc( 100% + 24px)` } }}>
}}> <img src={curriculum.curriculumImage} alt="feature" />
Preview </Grid>
</Button> </Grid>
<Button variant="outlined" size="small" color='success' onClick={() => { </MainCard>
// handleClickOpen() </Animation>
}}>
Subscribe
</Button>
</Stack>
</MainCard>
{/* edit curriculum dialog */} {/* edit curriculum dialog */}
<CurriculumPreview curriculum={curriculum} open={open} onClose={handleClose} /> <CurriculumPreview curriculum={curriculum} open={open} onClose={handleClose} />
......
Project/Frontend/SignConnectPlus/src/sections/learning-management/learning-curriculums/CurriculumPreview.tsx
View file @ 603a830f
...@@ -99,7 +99,7 @@ export default function CurriculumPreview({ curriculum, open, onClose }: { curri ...@@ -99,7 +99,7 @@ export default function CurriculumPreview({ curriculum, open, onClose }: { curri
</List> </List>
</DialogTitle> </DialogTitle>
<DialogContent dividers sx={{ px: 0 }}> <DialogContent dividers sx={{ px: 0 }}>
<SimpleBar sx={{ height: 'calc(100vh - 290px)' }}> <SimpleBar sx={{ height: 'calc(100vh - 390px)' }}>
<Grid container spacing={3}> <Grid container spacing={3}>
<Grid item xs={12} sm={8} xl={12}> <Grid item xs={12} sm={8} xl={12}>
<Grid container spacing={2.25}> <Grid container spacing={2.25}>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment