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';
// material-ui
import {
Box,
Button,
Divider,
Fade,
Grid,
List,
ListItem,
ListItemAvatar,
ListItemText,
Menu,
MenuItem,
Stack,
Typography
} from '@mui/material';
// third-party
import { PDFDownloadLink } from '@react-pdf/renderer';
// project import
import IconButton from 'components/@extended/IconButton';
import MainCard from 'components/MainCard';
// assets
import { MoreOutlined } from '@ant-design/icons';
import Avatar from 'components/@extended/Avatar';
import curriculumLevels from 'data/curriculumLevels';
import CurriculumPreview from './CurriculumPreview';
import { PlusOutlined, SendOutlined } from '@ant-design/icons';
import AnimateButton from 'components/@extended/AnimateButton';
import { curriculumType } from 'types/curriculum';
import Animation from './Animation';
import CurriculumPreview from './CurriculumPreview';
// types
......@@ -45,169 +35,62 @@ const CurriculumCard = ({ curriculum }: { curriculum: curriculumType }) => {
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 (
<>
<MainCard sx={{ height: 1, '& .MuiCardContent-root': { height: 1, display: 'flex', flexDirection: 'column' } }}>
<Grid id="print" container spacing={2.25}>
<Grid item xs={12}>
<List sx={{ width: 1, p: 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
</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>
<Animation
variants={{
visible: { opacity: 1 },
hidden: { opacity: 0 }
}}
>
<MainCard contentSX={{ p: 3 }}>
<Grid container spacing={1.5}>
<Grid item xs={12}>
<Typography variant="h3" sx={{ fontWeight: 600, mt: 2 }}>
{curriculum.curriculumTitle}
</Typography>
</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) => (
<ListItem disablePadding key={index} sx={{ width: 'auto', pr: 0.75, pb: 0.75 }}>
<Chip color="secondary" variant="outlined" size="small" label={skill} />
</ListItem>
))}
<Grid item xs={12}>
<Typography variant="body1" color="secondary">
{curriculum.curriculumDescription}
</Typography>
</Grid>
<Grid md={3}>
<Box sx={{ display: 'inline-block' }}>
<AnimateButton>
<Button
variant="outlined"
endIcon={<PlusOutlined />}
sx={{ my: 2 }}
// onClick={handleClickOpen}
color='success'
>
Follow
</Button>
</AnimateButton>
</Box>
</Box>
</Grid> */}
</Grid>
<Stack
direction="row"
className="hideforPDf"
alignItems="center"
spacing={1}
justifyContent="space-between"
sx={{ mt: 'auto', mb: 0, pt: 2.25 }}
>
<Typography variant="caption" color="secondary">
Updated in {curriculum.createdAt?.toLocaleTimeString()}
</Typography>
<Button variant="outlined" size="small" onClick={() => {
handleClickOpen()
}}>
Preview
</Button>
<Button variant="outlined" size="small" color='success' onClick={() => {
// handleClickOpen()
}}>
Subscribe
</Button>
</Stack>
</MainCard>
</Grid>
<Grid md={3}>
<Box sx={{ display: 'inline-block' }}>
<AnimateButton>
<Button
variant="outlined"
endIcon={<SendOutlined />}
sx={{ my: 2 }}
onClick={handleClickOpen}
>
Preview
</Button>
</AnimateButton>
</Box>
</Grid>
<Grid md={6} />
<Grid item xs={12} sx={{ '& img': { mb: -3.75, width: `calc( 100% + 24px)` } }}>
<img src={curriculum.curriculumImage} alt="feature" />
</Grid>
</Grid>
</MainCard>
</Animation>
{/* edit curriculum dialog */}
<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
</List>
</DialogTitle>
<DialogContent dividers sx={{ px: 0 }}>
<SimpleBar sx={{ height: 'calc(100vh - 290px)' }}>
<SimpleBar sx={{ height: 'calc(100vh - 390px)' }}>
<Grid container spacing={3}>
<Grid item xs={12} sm={8} xl={12}>
<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