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
Show 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={
<IconButton edge="end" aria-label="comments" color="secondary" onClick={handleMenuClick}>
<MoreOutlined style={{ fontSize: '1.15rem' }} />
</IconButton>
}
>
<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 <MainCard contentSX={{ p: 3 }}>
</PDFDownloadLink> <Grid container spacing={1.5}>
</MenuItem>
</Menu>
</Grid>
<Grid item xs={12}> <Grid item xs={12}>
<Divider /> <Typography variant="h3" sx={{ fontWeight: 600, mt: 2 }}>
{curriculum.curriculumTitle}
</Typography>
</Grid> </Grid>
<Grid item xs={12}> <Grid item xs={12}>
<Typography>{curriculum.curriculumDescription}</Typography> <Typography variant="body1" color="secondary">
</Grid> {curriculum.curriculumDescription}
{/* <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> </Typography>
}
/>
</ListItem>
</List>
</Grid> </Grid>
<Grid item xs={6}> <Grid md={3}>
<List sx={{ p: 0, overflow: 'hidden', '& .MuiListItem-root': { px: 0, py: 0.5 } }}> <Box sx={{ display: 'inline-block' }}>
<ListItem> <AnimateButton>
<ListItemIcon> <Button
<EnvironmentOutlined /> variant="outlined"
</ListItemIcon> endIcon={<PlusOutlined />}
<ListItemText primary={<Typography color="secondary">{customer.country}</Typography>} /> sx={{ my: 2 }}
</ListItem> // onClick={handleClickOpen}
<ListItem> color='success'
<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 item xs={12}>
<Box>
<Box
sx={{
display: 'flex',
flexWrap: 'wrap',
listStyle: 'none',
p: 0.5,
m: 0
}}
component="ul"
> >
{customer.skills.map((skill: string, index: number) => ( Follow
<ListItem disablePadding key={index} sx={{ width: 'auto', pr: 0.75, pb: 0.75 }}> </Button>
<Chip color="secondary" variant="outlined" size="small" label={skill} /> </AnimateButton>
</ListItem>
))}
</Box>
</Box> </Box>
</Grid> */}
</Grid> </Grid>
<Stack <Grid md={3}>
direction="row" <Box sx={{ display: 'inline-block' }}>
className="hideforPDf" <AnimateButton>
alignItems="center" <Button
spacing={1} variant="outlined"
justifyContent="space-between" endIcon={<SendOutlined />}
sx={{ mt: 'auto', mb: 0, pt: 2.25 }} sx={{ my: 2 }}
onClick={handleClickOpen}
> >
<Typography variant="caption" color="secondary">
Updated in {curriculum.createdAt?.toLocaleTimeString()}
</Typography>
<Button variant="outlined" size="small" onClick={() => {
handleClickOpen()
}}>
Preview Preview
</Button> </Button>
<Button variant="outlined" size="small" color='success' onClick={() => { </AnimateButton>
// handleClickOpen() </Box>
}}> </Grid>
Subscribe <Grid md={6} />
</Button> <Grid item xs={12} sx={{ '& img': { mb: -3.75, width: `calc( 100% + 24px)` } }}>
</Stack> <img src={curriculum.curriculumImage} alt="feature" />
</Grid>
</Grid>
</MainCard> </MainCard>
</Animation>
{/* 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