Commit 529c1ff1 authored by Gamage B.G.J's avatar Gamage B.G.J

Merge branch 'feature/UI-API-Connect' into 'master'

Feature/ui api connect

See merge request !14
parents e8822483 c5ab8748
...@@ -2,22 +2,25 @@ import Curriculum from '../models/curriculum.model.js'; ...@@ -2,22 +2,25 @@ import Curriculum from '../models/curriculum.model.js';
export const getAllCurriculums = async (req, res) => { export const getAllCurriculums = async (req, res) => {
try { try {
const curriculums = await Curriculum.find(); const curriculums = await Curriculum.find().populate("tutorials");
res.status(200).json(curriculums); res.status(200).json(curriculums);
} catch (error) { } catch (error) {
res.status(500).json({ message: error.message }); res.status(500).json({ message: error.message });
} }
} };
export const getCurriculumById = async (req, res) => { export const getCurriculumById = async (req, res) => {
const { id } = req.params; const { id } = req.params;
try { try {
const curriculum = await Curriculum.findById(id); const curriculum = await Curriculum.findById(id).populate("tutorials");
if (!curriculum) {
return res.status(404).json({ message: 'Curriculum not found' });
}
res.status(200).json(curriculum); res.status(200).json(curriculum);
} catch (error) { } catch (error) {
res.status(404).json({ message: 'Curriculum not found' }); res.status(500).json({ message: error.message });
} }
} };
export const createCurriculum = async (req, res) => { export const createCurriculum = async (req, res) => {
const curriculumData = req.body; const curriculumData = req.body;
......
...@@ -84,9 +84,9 @@ const curriculums = [ ...@@ -84,9 +84,9 @@ const curriculums = [
}, },
{ {
"tutorialCode": "02", "tutorialCode": "02",
"tutorialTitle": "Learn the Basics of Sign Language", "tutorialTitle": "Everyday Vocabulary in Sign Language",
"tutorialImage": "https://drive.google.com/uc?export=view&id=1YACBlu7X-O7-DKv5DoW3AM9kgfT7Yhdc", "tutorialImage": "https://drive.google.com/uc?export=view&id=1YACBlu7X-O7-DKv5DoW3AM9kgfT7Yhdc",
"tutorialContent": "Introduce the concept of sign language and its importance.\nTeach basic greetings and expressions, such as hello, goodbye, thank you, and sorry.\nProvide visual demonstrations and practice exercises for learners to practice these basic signs." "tutorialContent": "Teach signs for everyday objects and activities, such as eat, drink, sleep, book, pen, etc.\nIntroduce signs for common words used in daily life.\nProvide visual demonstrations and interactive exercises for learners to practice using these signs."
}, },
{ {
"tutorialCode": "03", "tutorialCode": "03",
...@@ -96,12 +96,6 @@ const curriculums = [ ...@@ -96,12 +96,6 @@ const curriculums = [
}, },
{ {
"tutorialCode": "04", "tutorialCode": "04",
"tutorialTitle": "Everyday Vocabulary in Sign Language",
"tutorialImage": "https://drive.google.com/uc?export=view&id=1YACBlu7X-O7-DKv5DoW3AM9kgfT7Yhdc",
"tutorialContent": "Teach signs for everyday objects and activities, such as eat, drink, sleep, book, pen, etc.\nIntroduce signs for common words used in daily life.\nProvide visual demonstrations and interactive exercises for learners to practice using these signs."
},
{
"tutorialCode": "05",
"tutorialTitle": "Basic Conversational Phrases in Sign Language", "tutorialTitle": "Basic Conversational Phrases in Sign Language",
"tutorialImage": "https://drive.google.com/uc?export=view&id=1YACBlu7X-O7-DKv5DoW3AM9kgfT7Yhdc", "tutorialImage": "https://drive.google.com/uc?export=view&id=1YACBlu7X-O7-DKv5DoW3AM9kgfT7Yhdc",
"tutorialContent": "Teach simple conversational phrases, such as \"What is your name?\" or \"How are you?\"\nIntroduce signs for common question words and phrases.\nProvide visual demonstrations and practice exercises for learners to practice these conversational phrases." "tutorialContent": "Teach simple conversational phrases, such as \"What is your name?\" or \"How are you?\"\nIntroduce signs for common question words and phrases.\nProvide visual demonstrations and practice exercises for learners to practice these conversational phrases."
......
import mongoose from "mongoose"; import mongoose from "mongoose";
const tutorialSchema = new mongoose.Schema({ const commonFields = {
tutorialCode: String,
tutorialTitle: String,
tutorialImage: String,
// Additional fields for tutorial content
});
const curriculumSchema = new mongoose.Schema({
curriculumCode: String,
curriculumLevel: String,
curriculumName: String,
curriculumImage: String,
tutorials: [tutorialSchema], // Embed tutorials as subdocuments
// Additional fields for curriculum details
status: {
type: Number,
default: 1, // Default status as active (1)
},
createdBy: String, createdBy: String,
updatedBy: String, updatedBy: String,
createdAt: { createdAt: {
...@@ -28,6 +11,27 @@ const curriculumSchema = new mongoose.Schema({ ...@@ -28,6 +11,27 @@ const curriculumSchema = new mongoose.Schema({
type: Date, type: Date,
default: new Date(), default: new Date(),
}, },
};
const curriculumSchema = new mongoose.Schema({
curriculumCode: {
type: String,
unique: true, // Ensures unique values for curriculumCode
},
curriculumLevel: String,
curriculumTitle: String,
curriculumDescription: String,
curriculumImage: String,
tutorials: [{
type: mongoose.Schema.Types.ObjectId,
ref: "Tutorial",
}],
// Additional fields for curriculum details
status: {
type: Number,
default: 1, // Default status as active (1)
},
...commonFields
}); });
const Curriculum = mongoose.model("Curriculum", curriculumSchema); const Curriculum = mongoose.model("Curriculum", curriculumSchema);
......
import mongoose from "mongoose"; import mongoose from "mongoose";
const commonFields = {
createdBy: String,
updatedBy: String,
createdAt: {
type: Date,
default: new Date(),
},
updatedAt: {
type: Date,
default: new Date(),
},
};
const taskItemSchema = new mongoose.Schema({ const taskItemSchema = new mongoose.Schema({
title: String, title: String,
description: String, description: String,
...@@ -10,8 +23,12 @@ const taskItemSchema = new mongoose.Schema({ ...@@ -10,8 +23,12 @@ const taskItemSchema = new mongoose.Schema({
}); });
const tutorialSchema = new mongoose.Schema({ const tutorialSchema = new mongoose.Schema({
tutorialCode: String, tutorialCode: {
type: String,
unique: true, // Ensures unique values for tutorialCode
},
tutorialTitle: String, tutorialTitle: String,
tutorialDescription: String,
tutorialImage: String, tutorialImage: String,
taskItems: [taskItemSchema], // Embed task items as subdocuments taskItems: [taskItemSchema], // Embed task items as subdocuments
// Additional fields for tutorial details // Additional fields for tutorial details
...@@ -19,16 +36,7 @@ const tutorialSchema = new mongoose.Schema({ ...@@ -19,16 +36,7 @@ const tutorialSchema = new mongoose.Schema({
type: Number, type: Number,
default: 1, // Default status as active (1) default: 1, // Default status as active (1)
}, },
createdBy: String, ...commonFields
updatedBy: String,
createdAt: {
type: Date,
default: new Date(),
},
updatedAt: {
type: Date,
default: new Date(),
},
}); });
const Tutorial = mongoose.model("Tutorial", tutorialSchema); const Tutorial = mongoose.model("Tutorial", tutorialSchema);
......
This diff is collapsed.
export interface CurriculumLevelsType {
id: number
code: string
description: string
}
// ==============================|| DATA - CURRICULUM LEVELS ||============================== //
const curriculumLevels: readonly CurriculumLevelsType[] = [
{ id: 1, code: "Level 1", description: "Preliminary" },
{ id: 2, code: "Level 2", description: "Intermediate" },
{ id: 3, code: "Level 3", description: "Advance" },
];
export default curriculumLevels;
import { useEffect, useState } from 'react';
// material-ui // material-ui
import {
// third-party Box,
FormControl,
Grid,
MenuItem,
Pagination,
Select,
SelectChangeEvent,
Slide,
Stack,
Theme,
Typography,
useMediaQuery
} from '@mui/material';
// project import // project import
import MainCard from 'components/MainCard';
import ScrollX from 'components/ScrollX';
import usePagination from 'hooks/usePagination';
import CurriculumCard from 'sections/learning-management/learning-curriculums/CurriculumCard';
import EmptyCurriculumCard from 'sections/learning-management/learning-curriculums/skeleton/EmptyCurriculumCard';
import { GlobalFilter } from 'utils/react-table';
import { dataProps } from './types/types';
// assets // types
//types // assets
// ==============================|| List ||============================== // // ==============================|| List ||============================== //
const allColumns = [
{
id: 1,
header: 'Default'
},
{
id: 2,
header: 'Code'
},
{
id: 3,
header: 'Name'
},
{
id: 4,
header: 'Level'
},
{
id: 5,
header: 'Status'
}
];
const List = () => { const List = () => {
const data: dataProps[] = [
{
"_id": "1",
"curriculumCode": "01",
"curriculumLevel": 1,
"curriculumDescription": "This curriculum teaches basic sign language skills to help beginners communicate effectively using sign language.",
"curriculumName": "Learn Basic Sign Language Skills",
"curriculumImage": "https://drive.google.com/uc?export=view&id=1YACBlu7X-O7-DKv5DoW3AM9kgfT7Yhdc",
"tutorials": [],
"status": 1,
"createdAt": new Date("2023-08-30T12:00:00Z"),
},
{
"_id": "2",
"curriculumCode": "02",
"curriculumLevel": 2,
"curriculumName": "Learn Intermediate Sign Language Skills",
"curriculumDescription": "This curriculum focuses on building intermediate sign language skills, allowing learners to engage in more complex conversations and interactions using sign language.",
"curriculumImage": "https://drive.google.com/uc?export=view&id=1YACBlu7X-O7-DKv5DoW3AM9kgfT7Yhdc",
"tutorials": [],
"status": 1,
"createdAt": new Date("2023-08-30T12:00:00Z"),
},
{
"_id": "3",
"curriculumCode": "03",
"curriculumLevel": 3,
"curriculumName": "Learn Advance Sign Language Skills",
"curriculumDescription": "This curriculum is designed for those who already have a solid foundation in sign language. It covers advanced topics, nuances, and cultural aspects of sign language communication.",
"curriculumImage": "https://drive.google.com/uc?export=view&id=1YACBlu7X-O7-DKv5DoW3AM9kgfT7Yhdc",
"tutorials": [],
"status": 1,
"createdAt": new Date("2023-08-30T12:00:00Z"),
}
]
const matchDownSM = useMediaQuery((theme: Theme) => theme.breakpoints.down('sm'));
const [sortBy, setSortBy] = useState('Default');
const [globalFilter, setGlobalFilter] = useState('');
const [curriculumCard, setCurriculumCard] = useState<dataProps[]>([]);
const [page, setPage] = useState(1);
const handleChange = (event: SelectChangeEvent) => {
setSortBy(event.target.value as string);
};
// search
useEffect(() => {
const newData = data.filter((value: any) => {
if (globalFilter) {
return value.curriculumName.toLowerCase().includes(globalFilter.toLowerCase());
} else {
return value;
}
});
console.log(newData.length);
setCurriculumCard(newData);
}, [globalFilter]);
const PER_PAGE = 6;
const count = Math.ceil(curriculumCard.length / PER_PAGE);
const _DATA = usePagination(curriculumCard, PER_PAGE);
const handleChangePage = (e: any, p: any) => {
setPage(p);
_DATA.jump(p);
};
return (
<>
<Box sx={{ position: 'relative', marginBottom: 3 }}>
<Stack direction="row" alignItems="center">
<Stack
direction={matchDownSM ? 'column' : 'row'}
sx={{ width: '100%' }}
spacing={1}
justifyContent="space-between"
alignItems="center"
>
{/* @ts-ignore */}
<GlobalFilter preGlobalFilteredRows={data} globalFilter={globalFilter} setGlobalFilter={setGlobalFilter} />
<Stack direction={matchDownSM ? 'column' : 'row'} alignItems="center" spacing={1}>
<FormControl sx={{ m: 1, minWidth: 120 }}>
<Select
value={sortBy}
onChange={handleChange}
displayEmpty
inputProps={{ 'aria-label': 'Without label' }}
renderValue={(selected) => {
if (!selected) {
return <Typography variant="subtitle1">Sort By</Typography>;
}
return <Typography variant="subtitle2">Sort by ({sortBy})</Typography>;
}}
>
{allColumns.map((column) => {
return ( return (
<MainCard content={false}> <MenuItem key={column.id} value={column.header}>
<ScrollX> {column.header}
</ScrollX> </MenuItem>
</MainCard> );
})}
</Select>
</FormControl>
</Stack>
</Stack>
</Stack>
</Box>
<Grid container spacing={3}>
{curriculumCard.length > 0 ? (
_DATA
.currentData()
.sort(function (a: any, b: any) {
if (sortBy === 'Customer Name') return a.fatherName.localeCompare(b.fatherName);
if (sortBy === 'Email') return a.email.localeCompare(b.email);
if (sortBy === 'Contact') return a.contact.localeCompare(b.contact);
if (sortBy === 'Age') return b.age < a.age ? 1 : -1;
if (sortBy === 'Country') return a.country.localeCompare(b.country);
if (sortBy === 'Status') return a.status.localeCompare(b.status);
return a;
})
.map((curriculum: dataProps, index: number) => (
<Slide key={index} direction="up" in={true} timeout={50}>
<Grid item xs={12} sm={6} lg={4}>
<CurriculumCard curriculum={curriculum} />
</Grid>
</Slide>
))
) : (
<EmptyCurriculumCard title={'System have no curriculums yet.'} />
)}
</Grid>
<Stack spacing={2} sx={{ p: 2.5 }} alignItems="flex-end">
<Pagination
count={count}
size="medium"
page={page}
showFirstButton
showLastButton
variant="combined"
color="primary"
onChange={handleChangePage}
/>
</Stack>
</>
) )
} }
......
export interface dataProps {
_id: number | string | undefined;
curriculumCode: string;
curriculumLevel: number;
curriculumName: string;
curriculumDescription: string;
curriculumImage: string;
tutorials?: tutorialItemProps[];
status?: number;
createdBy?: string;
updatedBy?: string;
createdAt?: Date;
updatedAt?: Date;
}
export interface tutorialItemProps {
_id: number | string | undefined;
tutorialCode: string;
tutorialTitle: string;
tutorialDescription: string;
tutorialImage: string;
status?: number;
createdBy?: string;
updatedBy?: string;
createdAt?: Date;
updatedAt?: Date;
taskItems?: taskItemProps[]
}
export interface taskItemProps {
_id: number | string | undefined;
title: string;
description: string;
howToDo: string;
referenceImage: string;
referenceVideo: string;
}
\ No newline at end of file
...@@ -157,7 +157,7 @@ const List = () => { ...@@ -157,7 +157,7 @@ const List = () => {
}, },
{ {
Header: 'Curriculum Name', Header: 'Curriculum Name',
accessor: 'curriculumName' accessor: 'curriculumTitle'
}, },
{ {
Header: 'Status', Header: 'Status',
......
...@@ -2,14 +2,15 @@ import { Column } from 'react-table'; ...@@ -2,14 +2,15 @@ import { Column } from 'react-table';
export interface dataProps { export interface dataProps {
_id: number | string | undefined; _id: number | string | undefined;
curriculumCode: String; curriculumCode: string;
curriculumLevel: String; curriculumLevel: number;
curriculumName: String; curriculumName: string;
curriculumImage: String; curriculumDescription: string;
curriculumImage: string;
tutorials: tutorialItemProps[]; tutorials: tutorialItemProps[];
status: Number; status: number;
createdBy: String; createdBy: string;
updatedBy: String; updatedBy: string;
createdAt: Date; createdAt: Date;
updatedAt: Date; updatedAt: Date;
} }
...@@ -22,26 +23,28 @@ export interface ReactTableProps { ...@@ -22,26 +23,28 @@ export interface ReactTableProps {
export interface curriculumProps { export interface curriculumProps {
_id: number | string | undefined; _id: number | string | undefined;
curriculumCode: String; curriculumCode: string;
curriculumLevel: String; curriculumLevel: number;
curriculumName: String; curriculumTitle: string;
curriculumImage: String; curriculumDescription: string;
tutorials: tutorialItemProps[]; curriculumImage: string;
status: Number; tutorials: string[];
createdBy: String; status: number;
updatedBy: String; createdBy: string;
updatedBy: string;
createdAt: Date; createdAt: Date;
updatedAt: Date; updatedAt: Date;
} }
export interface tutorialItemProps { export interface tutorialItemProps {
_id: number | string | undefined; _id: number | string | undefined;
tutorialCode: String; tutorialCode: string;
tutorialTitle: String; tutorialTitle: string;
tutorialImage: String; tutorialDescription: string;
status: Number; tutorialImage: string;
createdBy: String; status: number;
updatedBy: String; createdBy: string;
updatedBy: string;
createdAt: Date; createdAt: Date;
updatedAt: Date; updatedAt: Date;
taskItems: taskItemProps[] taskItems: taskItemProps[]
...@@ -49,9 +52,9 @@ export interface tutorialItemProps { ...@@ -49,9 +52,9 @@ export interface tutorialItemProps {
export interface taskItemProps { export interface taskItemProps {
_id: number | string | undefined; _id: number | string | undefined;
title: String; title: string;
description: String; description: string;
howToDo: String; howToDo: string;
referenceImage: String; referenceImage: string;
referenceVideo: String; referenceVideo: string;
} }
\ No newline at end of file
...@@ -152,7 +152,7 @@ const List = () => { ...@@ -152,7 +152,7 @@ const List = () => {
accessor: 'tutorialCode' accessor: 'tutorialCode'
}, },
{ {
Header: 'Tutorial Title', Header: 'Tutorial Name',
accessor: 'tutorialTitle' accessor: 'tutorialTitle'
}, },
{ {
......
...@@ -2,12 +2,13 @@ import { Column } from 'react-table'; ...@@ -2,12 +2,13 @@ import { Column } from 'react-table';
export interface dataProps { export interface dataProps {
_id: number | string | undefined; _id: number | string | undefined;
tutorialCode: String; tutorialCode: string;
tutorialTitle: String; tutorialTitle: string;
tutorialImage: String; tutorialDescription: string;
status: Number; tutorialImage: string;
createdBy: String; status: number;
updatedBy: String; createdBy: string;
updatedBy: string;
createdAt: Date; createdAt: Date;
updatedAt: Date; updatedAt: Date;
taskItems: taskItemProps[] taskItems: taskItemProps[]
...@@ -21,12 +22,13 @@ export interface ReactTableProps { ...@@ -21,12 +22,13 @@ export interface ReactTableProps {
export interface tutorialProps { export interface tutorialProps {
_id: number | string | undefined; _id: number | string | undefined;
tutorialCode: String; tutorialCode: string;
tutorialTitle: String; tutorialTitle: string;
tutorialImage: String; tutorialDescription: string;
status: Number; tutorialImage: string;
createdBy: String; status: number;
updatedBy: String; createdBy: string;
updatedBy: string;
createdAt: Date; createdAt: Date;
updatedAt: Date; updatedAt: Date;
taskItems: taskItemProps[] taskItems: taskItemProps[]
...@@ -34,9 +36,9 @@ export interface tutorialProps { ...@@ -34,9 +36,9 @@ export interface tutorialProps {
export interface taskItemProps { export interface taskItemProps {
_id: number | string | undefined; _id: number | string | undefined;
title: String; title: string;
description: String; description: string;
howToDo: String; howToDo: string;
referenceImage: String; referenceImage: string;
referenceVideo: String; referenceVideo: string;
} }
\ No newline at end of file
import { useState } from 'react';
// material-ui
import {
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';
// types
export interface curriculumCardProps {
_id: number | string | undefined;
curriculumCode: string;
curriculumLevel: number;
curriculumName: string;
curriculumDescription: string;
curriculumImage: string;
tutorials?: tutorialItemProps[];
status?: number;
createdBy?: string;
updatedBy?: string;
createdAt?: Date;
updatedAt?: Date;
}
export interface tutorialItemProps {
_id: number | string | undefined;
tutorialCode: string;
tutorialTitle: string;
tutorialDescription: string;
tutorialImage: string;
status?: number;
createdBy?: string;
updatedBy?: string;
createdAt?: Date;
updatedAt?: Date;
taskItems?: taskItemProps[]
}
export interface taskItemProps {
_id: number | string | undefined;
title: string;
description: string;
howToDo: string;
referenceImage: string;
referenceVideo: string;
}
// ==============================|| CURRICULUM - CARD ||============================== //
const CurriculumCard = ({ curriculum }: { curriculum: curriculumCardProps }) => {
// const [open, setOpen] = useState(false);
// const handleClickOpen = () => {
// setOpen(true);
// };
// const handleClose = () => {
// 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.curriculumName!} src={curriculum.curriculumImage!} />
</ListItemAvatar>
<ListItemText
primary={<Typography variant="subtitle1">{curriculum.curriculumName}</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.curriculumName}.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 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>
))}
</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>
</Stack>
</MainCard>
{/* edit customer dialog */}
{/* <CustomerPreview customer={customer} open={open} onClose={handleClose} /> */}
</>
);
};
export default CurriculumCard;
// material-ui
import { CardContent, Grid, Skeleton, Stack, Avatar } from '@mui/material';
// project import
import MainCard from 'components/MainCard';
// assets
import { ContactsOutlined } from '@ant-design/icons';
// ===========================|| SKELETON - USER EMPTY CARD ||=========================== //
const UserCard = () => {
return (
<MainCard
border={false}
content={false}
boxShadow
sx={{ boxShadow: `rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px`, borderRadius: 2 }}
>
<CardContent sx={{ p: 2 }}>
<Grid container spacing={2}>
<Grid item xs={12}>
<Stack flexDirection="row" alignItems="center">
<Avatar>
<ContactsOutlined style={{ visibility: 'inherit' }} />
</Avatar>
<Stack sx={{ width: '100%', pl: 2.5 }}>
<Skeleton animation={false} height={20} width="80%" />
<Skeleton animation={false} height={20} width="40%" />
</Stack>
</Stack>
</Grid>
<Grid item xs={12}>
<Skeleton animation={false} height={20} width={45} />
<Skeleton animation={false} height={20} />
<Stack direction="row" alignItems="center" spacing={1}>
<Skeleton animation={false} height={20} width={90} />
<Skeleton animation={false} height={20} width={38} />
</Stack>
</Grid>
<Grid item xs={12}>
<Stack direction="row" justifyContent="space-between" alignItems="center">
<Grid container spacing={1}>
<Grid item>
<Skeleton animation={false} height={20} width={40} />
</Grid>
<Grid item>
<Skeleton animation={false} height={17} width={20} />
</Grid>
</Grid>
<Skeleton animation={false} height={32} width={47} />
</Stack>
</Grid>
</Grid>
</CardContent>
</MainCard>
);
};
export default UserCard;
// material-ui
import { Box, Grid, Stack, Typography } from '@mui/material';
// project import
import CurriculumCard from './CurriculumCard';
interface Props {
title: string;
}
// ==============================|| EMPTY STATE ||============================== //
const EmptyCurriculumCard = ({ title }: Props) => {
return (
<Grid container spacing={3}>
<Grid item xs={12}>
<Box
sx={{
p: { xs: 2.5, sm: 6 },
height: `calc(100vh - 192px)`,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
bgcolor: 'transparent'
}}
>
<Grid container direction="column" justifyContent="center" alignItems="center">
<Grid item>
<Box sx={{ ml: -9, mb: { xs: -8, sm: -5 } }}>
<Box sx={{ position: 'relative' }}>
<CurriculumCard />
</Box>
<Box sx={{ position: 'relative', top: -120, left: 72 }}>
<CurriculumCard />
</Box>
</Box>
</Grid>
<Grid item>
<Stack spacing={1}>
<Typography align="center" variant="h4">
{title}
</Typography>
</Stack>
</Grid>
</Grid>
</Box>
</Grid>
</Grid>
);
};
export default EmptyCurriculumCard;
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