Skip to content

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

fix : update 

desc : update project
parent b7fdf769
Hide whitespace changes
Inline Side-by-side
Showing with 202 additions and 4 deletions
Project/Frontend/SignConnectPlus/src/pages/learning-management/learning-curriculums-subscribed/tutorial/tutorial.tsx
View file @ c7607e34
import { useEffect, useState } from "react";
// material-ui // material-ui
import { Box, Grid, LinearProgress, List, ListItemAvatar, ListItemButton, ListItemSecondaryAction, ListItemText, Stack, Typography } from "@mui/material";
import { useTheme } from '@mui/material/styles';
// project import // project import
import AntAvatar from 'components/@extended/Avatar';
import MainCard from "components/MainCard";
// types // types
import { tutorialTypeUserProgress } from "types/userProgress";
// assets // assets
import { ClockCircleOutlined, FileMarkdownFilled } from "@ant-design/icons";
import ReportCard from "components/cards/statistics/ReportCard";
import { userProgress } from "data/userProgress";
import { selectedCommonDataProps, selectedItemContentProps } from "./types/types";
// action style
const actionSX = {
mt: 0.75,
ml: 1,
top: 'auto',
right: 'auto',
alignSelf: 'flex-start',
transform: 'none'
};
function convertMinutesToHMS(minutes: number) {
const hours = Math.floor(minutes / 60);
const remainingMinutes = minutes % 60;
const seconds = Math.round((minutes % 1) * 60);
return `${hours} hr ${remainingMinutes} min ${seconds} sec`;
}
// ==============================|| Tutorial ||============================== // // ==============================|| Tutorial ||============================== //
const Tutorial = () => { const Tutorial = () => {
const theme = useTheme();
const [data, setData] = useState<tutorialTypeUserProgress>()
const [selectedItem, setSelectedItem] = useState<{ selectedCommonData: selectedCommonDataProps | null, backgroundColor: any | null }>({
selectedCommonData: null,
backgroundColor: 'white', // Initial background color
});
const [selectedItemContent, setSelectedItemContent] = useState<selectedItemContentProps | null>()
const handleItemClick = (item: selectedCommonDataProps, backgroundColor: any) => {
setSelectedItem({
selectedCommonData: {
userId: item.userId,
curriculumCode: item.curriculumCode,
tutorialCode: item.tutorialCode,
title: item.title
},
backgroundColor,
});
};
useEffect(() => {
// Set your data here
setData(userProgress.curriculums![0].tutorials[0]);
}, []);
const [desc, setDesc] = useState(data?.tutorialDescription?.slice(0, 100))
const [readMore, setReadMore] = useState(false)
useEffect(() => {
// Filter data based on selectedItem.title
if (selectedItem && data) {
const filteredItem = data.taskItems.find((item) => item.title === selectedItem.selectedCommonData?.title);
setSelectedItemContent({
userId: selectedItem.selectedCommonData?.userId!,
curriculumCode: selectedItem.selectedCommonData?.curriculumCode!,
tutorialCode: selectedItem.selectedCommonData?.tutorialCode!,
...filteredItem!
} || null)
} else {
setSelectedItemContent(null);
}
}, [selectedItem, data]);
return ( return (
<> <>
<Grid container spacing={2}>
<Grid item md={12}>
<MainCard title="Overview">
<Grid container spacing={2}>
<Grid
item
xs={7}
sm={7}
sx={{}}
>
<Stack>
<Typography variant="h3" sx={{ mb: 2 }}>
{data?.tutorialTitle}
</Typography>
<Typography variant="h5" sx={{ textAlign: "justify" }}>
{desc}
<span style={{ fontWeight: "bold", cursor: "pointer" }}
onClick={() => {
if (!readMore) {
setDesc(data?.tutorialDescription)
setReadMore(true)
} else {
setDesc(data?.tutorialDescription?.slice(0, 100))
setReadMore(false)
}
}} color="secondary">
{readMore ? "Show Less" : "...Read More"}
</span>
</Typography>
<Typography variant="h4" sx={{ pt: 3, pb: 1, zIndex: 1 }}>
{(data?.tutorialMarkUser! / data?.tutorialMark!) * 100}% Completed
</Typography>
<Box sx={{ maxWidth: '60%' }}>
<LinearProgress variant="determinate" color="success" value={(data?.tutorialMarkUser! / data?.tutorialMark!) * 100} />
</Box>
</Stack>
</Grid>
<Grid md={5} item>
<Grid container spacing={2}>
<Grid md={12} item>
<ReportCard primary={`${data?.tutorialMarkUser}`} secondary="Tutorial User Mark" color={theme.palette.error.main} iconPrimary={FileMarkdownFilled} />
</Grid>
<Grid md={12} item>
<ReportCard primary={`${convertMinutesToHMS(data?.tutorialSpentTime!)}`} secondary="Tutorial Time Spent On" color={theme.palette.success.dark} iconPrimary={ClockCircleOutlined} />
</Grid>
</Grid>
</Grid>
</Grid>
</MainCard>
</Grid>
<Grid item md={4}>
<MainCard title="Task List">
<List
component="nav"
sx={{
py: 0,
'& .MuiListItemButton-root': {
'& .MuiListItemSecondaryAction-root': { ...actionSX, position: 'relative' }
}
}}
>
{data?.taskItems.map((item, index) => {
const isSelected = selectedItem.selectedCommonData?.title === item.title;
const backgroundColor = isSelected ? theme.palette.primary.lighter : 'white';
const iconColor = isSelected ? 'warning' : 'success';
return (
<>
<ListItemButton
key={index}
divider
onClick={() => handleItemClick({
userId: "",
curriculumCode: "",
tutorialCode: data.tutorialCode!,
title: item.title
}, backgroundColor)}
sx={{ backgroundColor }}
>
<ListItemAvatar>
<AntAvatar alt="Basic" type="combined" color={iconColor}>
<ClockCircleOutlined />
</AntAvatar>
</ListItemAvatar>
<ListItemText primary={<Typography variant="subtitle1">{item.title}</Typography>} />
<ListItemSecondaryAction>
<Stack alignItems="flex-end">
<Typography variant="subtitle1" noWrap>User Mark : {item.taskItemMarkUser} </Typography>
<Typography variant="h6" color="secondary" noWrap> Mark : {item.taskItemMark} </Typography>
</Stack>
</ListItemSecondaryAction>
</ListItemButton>
</>
)
})}
</List>
</MainCard>
</Grid>
<Grid item md={8}>
<MainCard title="Task View">
<Grid container spacing={2}>
<Grid item md={12}>
{selectedItemContent?.title}
</Grid>
<Grid item md={8}></Grid>
<Grid item md={4}></Grid>
</Grid>
</MainCard>
</Grid>
</Grid>
</> </>
) )
} }
......
Project/Frontend/SignConnectPlus/src/pages/learning-management/learning-curriculums-subscribed/tutorial/types/types.tsx 0 → 100644
View file @ c7607e34
import { taskItemTypeUserProgress } from "types/userProgress";
export interface selectedItemContentProps extends taskItemTypeUserProgress {
userId: string
curriculumCode: string
tutorialCode: string
}
export interface selectedCommonDataProps {
userId: string
curriculumCode: string
tutorialCode: string
title: string
}
\ No newline at end of file
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