Skip to content

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

fix: update 

Desc : update project
parent 91e900ea
Hide whitespace changes
Inline Side-by-side
Showing with 373 additions and 14 deletions
.vscode/settings.json
View file @ a248a8bd
{
"cSpell.words": [
"formik",
"Janith",
"leaderboard",
"SLIIT"
......
Project/Frontend/SignConnectPlus/src/pages/parameter/curriculum-management/list/list.tsx
View file @ a248a8bd
......@@ -3,6 +3,7 @@ import { MouseEvent, useMemo, useState } from 'react';
// material-ui
import {
Button,
Dialog,
IconButton,
Stack,
Table,
......@@ -32,7 +33,9 @@ import {
import { DeleteTwoTone, EditTwoTone, EyeTwoTone, PlusOutlined } from '@ant-design/icons';
//types
import AlertTutorialDelete from 'sections/parameters/tutorial-management/AlertTutorialDelete';
import { PopupTransition } from 'components/@extended/Transitions';
import AddEditCurriculum from 'sections/parameters/curriculum-management/AddEditCurriculum';
import AlertCurriculumDelete from 'sections/parameters/curriculum-management/AlertCurriculumDelete';
import { ReactTableProps, curriculumProps, dataProps } from './types/types';
// ==============================|| REACT TABLE ||============================== //
......@@ -205,8 +208,8 @@ const List = () => {
color="error"
onClick={(e: MouseEvent<HTMLButtonElement>) => {
e.stopPropagation();
// setTutorialId(row.values.id)
// setOpenAlert(true)
setCurriculumId(row.values._id)
setOpenAlert(true)
}}
>
<DeleteTwoTone twoToneColor={theme.palette.error.main} />
......@@ -232,9 +235,7 @@ const List = () => {
//alert model
const [openAlert, setOpenAlert] = useState(false);
// const [curriculumId, setCurriculumId] = useState<number | null>(null)
const curriculumId : number | null = null
const [curriculumId, setCurriculumId] = useState<number | string | undefined>(undefined)
const handleAlertClose = () => {
setOpenAlert(!openAlert);
......@@ -246,8 +247,21 @@ const List = () => {
<ScrollX>
<ReactTable columns={columns} data={data} handleAddEdit={handleAddEdit} />
</ScrollX>
{/* add / edit curriculum dialog */}
<Dialog
maxWidth="sm"
TransitionComponent={PopupTransition}
keepMounted
fullWidth
onClose={handleAddEdit}
open={addEdit}
sx={{ '& .MuiDialog-paper': { p: 0 }, transition: 'transform 225ms' }}
aria-describedby="alert-dialog-slide-description"
>
<AddEditCurriculum curriculum={curriculum} onCancel={handleAddEdit} />
</Dialog>
{/* alert model */}
{!curriculum && <AlertTutorialDelete title={""} open={openAlert} handleClose={handleAlertClose} deleteId={curriculumId} />}
{!curriculum && <AlertCurriculumDelete title={""} open={openAlert} handleClose={handleAlertClose} deleteId={curriculumId} />}
</MainCard>
</>
)
......
Project/Frontend/SignConnectPlus/src/pages/parameter/tutorial-management/list/list.tsx
View file @ a248a8bd
......@@ -3,6 +3,7 @@ import { MouseEvent, useMemo, useState } from 'react';
// material-ui
import {
Button,
Dialog,
IconButton,
Stack,
Table,
......@@ -18,6 +19,7 @@ import {
import { Cell, Column, HeaderGroup, Row, useFilters, useGlobalFilter, usePagination, useTable } from 'react-table';
// project import
import { PopupTransition } from 'components/@extended/Transitions';
import MainCard from 'components/MainCard';
import ScrollX from 'components/ScrollX';
import { CSVExport, EmptyTable, TablePagination } from 'components/third-party/ReactTable';
......@@ -32,6 +34,7 @@ import {
import { DeleteTwoTone, EditTwoTone, EyeTwoTone, PlusOutlined } from '@ant-design/icons';
//types
import AddEditTutorial from 'sections/parameters/tutorial-management/AddEditTutorial';
import AlertTutorialDelete from 'sections/parameters/tutorial-management/AlertTutorialDelete';
import { ReactTableProps, dataProps, tutorialProps } from './types/types';
......@@ -201,8 +204,8 @@ const List = () => {
color="error"
onClick={(e: MouseEvent<HTMLButtonElement>) => {
e.stopPropagation();
// setTutorialId(row.values.id)
// setOpenAlert(true)
setTutorialId(row.values._id)
setOpenAlert(true)
}}
>
<DeleteTwoTone twoToneColor={theme.palette.error.main} />
......@@ -228,9 +231,7 @@ const List = () => {
//alert model
const [openAlert, setOpenAlert] = useState(false);
// const [tutorialId, setTutorialId] = useState<number | null>(null)
const tutorialId: number | null = null
const [tutorialId, setTutorialId] = useState<number | string | undefined>(undefined)
const handleAlertClose = () => {
setOpenAlert(!openAlert);
......@@ -242,6 +243,19 @@ const List = () => {
<ScrollX>
<ReactTable columns={columns} data={data} handleAddEdit={handleAddEdit} />
</ScrollX>
{/* add / edit tutorial dialog */}
<Dialog
maxWidth="sm"
TransitionComponent={PopupTransition}
keepMounted
fullWidth
onClose={handleAddEdit}
open={addEdit}
sx={{ '& .MuiDialog-paper': { p: 0 }, transition: 'transform 225ms' }}
aria-describedby="alert-dialog-slide-description"
>
<AddEditTutorial tutorial={tutorial} onCancel={handleAddEdit} />
</Dialog>
{/* alert model */}
{!tutorial && <AlertTutorialDelete title={""} open={openAlert} handleClose={handleAlertClose} deleteId={tutorialId} />}
</MainCard>
......
Project/Frontend/SignConnectPlus/src/sections/parameters/curriculum-management/AddEditCurriculum.tsx 0 → 100644
View file @ a248a8bd
import { useState } from 'react';
// material-ui
import {
Button,
DialogActions,
DialogContent,
DialogTitle,
Divider,
Grid,
Stack,
Tooltip
} from '@mui/material';
// import { useTheme } from '@mui/material/styles';
import { LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
// third-party
import { Form, FormikProvider, FormikValues, useFormik } from 'formik';
import _ from 'lodash';
import * as Yup from 'yup';
// project imports
import IconButton from 'components/@extended/IconButton';
// assets
import { DeleteFilled } from '@ant-design/icons';
import AlertCurriculumDelete from './AlertCurriculumDelete';
// types
// constant
const getInitialValues = (curriculum: FormikValues | null) => {
const newCurriculum = {
_id: undefined,
}
if (curriculum) {
return _.merge({}, newCurriculum, curriculum);
}
return newCurriculum;
};
// ==============================|| CUSTOMER ADD / EDIT ||============================== //
export interface Props {
curriculum?: {
_id: number | string | undefined;
curriculumCode: String;
curriculumLevel: String;
curriculumName: String;
curriculumImage: String;
tutorials: tutorialItemProps[];
status: Number;
createdBy: String;
updatedBy: String;
createdAt: Date;
updatedAt: Date;
};
onCancel: () => void;
}
export interface tutorialItemProps {
_id: number | string | undefined;
tutorialCode: String;
tutorialTitle: 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;
}
const AddEditCurriculum = ({ curriculum, onCancel }: Props) => {
// const theme = useTheme();
const isCreating = !curriculum;
const CurriculumSchema = Yup.object().shape({});
const [openAlert, setOpenAlert] = useState(false);
const handleAlertClose = () => {
setOpenAlert(!openAlert);
onCancel();
};
const formik = useFormik({
initialValues: getInitialValues(curriculum!),
validationSchema: CurriculumSchema,
enableReinitialize: true,
onSubmit: (values, { setSubmitting, resetForm }) => {
try {
if (curriculum) {
// PUT API
} else {
// POST API
}
resetForm()
setSubmitting(false);
onCancel();
} catch (error) {
console.error(error);
}
}
});
// const { errors, touched, handleSubmit, isSubmitting, getFieldProps } = formik;
const { handleSubmit, isSubmitting } = formik;
return (
<>
<FormikProvider value={formik}>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<Form autoComplete="off" noValidate onSubmit={handleSubmit}>
<DialogTitle>{curriculum ? 'Edit Curriculum' : 'New Curriculum'}</DialogTitle>
<Divider />
<DialogContent sx={{ p: 2.5 }}>
<Grid container spacing={3}>
<Grid item xs={12} md={12}>
<Grid container spacing={3}>
</Grid>
</Grid>
</Grid>
</DialogContent>
<Divider />
<DialogActions sx={{ p: 2.5 }}>
<Grid container justifyContent="space-between" alignItems="center">
<Grid item>
{!isCreating && (
<Tooltip title="Delete Tutorial" placement="top">
<IconButton onClick={() => setOpenAlert(true)} size="large" color="error">
<DeleteFilled />
</IconButton>
</Tooltip>
)}
</Grid>
<Grid item>
<Stack direction="row" spacing={2} alignItems="center">
<Button color="error" onClick={onCancel}>
Cancel
</Button>
<Button type="submit" variant="contained" disabled={isSubmitting}>
{curriculum ? 'Edit' : 'Add'}
</Button>
</Stack>
</Grid>
</Grid>
</DialogActions>
</Form>
</LocalizationProvider>
</FormikProvider>
{!isCreating && <AlertCurriculumDelete title={""} open={openAlert} handleClose={handleAlertClose} deleteId={curriculum._id} />}
</>
);
};
export default AddEditCurriculum;
Project/Frontend/SignConnectPlus/src/sections/parameters/curriculum-management/AlertCurriculumDelete.tsx
View file @ a248a8bd
......@@ -13,7 +13,7 @@ interface Props {
title: string;
open: boolean;
handleClose: (status: boolean) => void;
deleteId: number | null;
deleteId: number | string | undefined;
}
// ==============================|| Curriculum - DELETE ||============================== //
......
Project/Frontend/SignConnectPlus/src/sections/parameters/tutorial-management/AddEditTutorial.tsx 0 → 100644
View file @ a248a8bd
import { useState } from 'react';
// material-ui
import {
Button,
DialogActions,
DialogContent,
DialogTitle,
Divider,
Grid,
Stack,
Tooltip
} from '@mui/material';
// import { useTheme } from '@mui/material/styles';
import { LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
// third-party
import { Form, FormikProvider, FormikValues, useFormik } from 'formik';
import _ from 'lodash';
import * as Yup from 'yup';
// project imports
import IconButton from 'components/@extended/IconButton';
// assets
import { DeleteFilled } from '@ant-design/icons';
import AlertTutorialDelete from './AlertTutorialDelete';
// types
// constant
const getInitialValues = (tutorial: FormikValues | null) => {
const newTutorial = {
_id: undefined,
}
if (tutorial) {
return _.merge({}, newTutorial, tutorial);
}
return newTutorial;
};
// ==============================|| CUSTOMER ADD / EDIT ||============================== //
export interface Props {
tutorial?: {
_id: number | string | undefined
tutorialCode: String;
tutorialTitle: String;
tutorialImage: String;
status: Number;
createdBy: String;
updatedBy: String;
createdAt: Date;
updatedAt: Date;
taskItems: taskItemProps[]
};
onCancel: () => void;
}
export interface taskItemProps {
_id: number | string | undefined;
title: String;
description: String;
howToDo: String;
referenceImage: String;
referenceVideo: String;
}
const AddEditTutorial = ({ tutorial, onCancel }: Props) => {
// const theme = useTheme();
const isCreating = !tutorial;
const TutorialSchema = Yup.object().shape({});
const [openAlert, setOpenAlert] = useState(false);
const handleAlertClose = () => {
setOpenAlert(!openAlert);
onCancel();
};
const formik = useFormik({
initialValues: getInitialValues(tutorial!),
validationSchema: TutorialSchema,
enableReinitialize: true,
onSubmit: (values, { setSubmitting, resetForm }) => {
try {
if (tutorial) {
// PUT API
} else {
// POST API
}
resetForm()
setSubmitting(false);
onCancel();
} catch (error) {
console.error(error);
}
}
});
// const { errors, touched, handleSubmit, isSubmitting, getFieldProps } = formik;
const { handleSubmit, isSubmitting} = formik;
return (
<>
<FormikProvider value={formik}>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<Form autoComplete="off" noValidate onSubmit={handleSubmit}>
<DialogTitle>{tutorial ? 'Edit Tutorial' : 'New Tutorial'}</DialogTitle>
<Divider />
<DialogContent sx={{ p: 2.5 }}>
<Grid container spacing={3}>
<Grid item xs={12} md={12}>
<Grid container spacing={3}>
</Grid>
</Grid>
</Grid>
</DialogContent>
<Divider />
<DialogActions sx={{ p: 2.5 }}>
<Grid container justifyContent="space-between" alignItems="center">
<Grid item>
{!isCreating && (
<Tooltip title="Delete Tutorial" placement="top">
<IconButton onClick={() => setOpenAlert(true)} size="large" color="error">
<DeleteFilled />
</IconButton>
</Tooltip>
)}
</Grid>
<Grid item>
<Stack direction="row" spacing={2} alignItems="center">
<Button color="error" onClick={onCancel}>
Cancel
</Button>
<Button type="submit" variant="contained" disabled={isSubmitting}>
{tutorial ? 'Edit' : 'Add'}
</Button>
</Stack>
</Grid>
</Grid>
</DialogActions>
</Form>
</LocalizationProvider>
</FormikProvider>
{!isCreating && <AlertTutorialDelete title={""} open={openAlert} handleClose={handleAlertClose} deleteId={tutorial._id} />}
</>
);
};
export default AddEditTutorial;
Project/Frontend/SignConnectPlus/src/sections/parameters/tutorial-management/AlertTutorialDelete.tsx
View file @ a248a8bd
......@@ -13,7 +13,7 @@ interface Props {
title: string;
open: boolean;
handleClose: (status: boolean) => void;
deleteId: number | null;
deleteId: number | string | undefined;
}
// ==============================|| Tutorial - DELETE ||============================== //
......
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