fix: update

Desc : update project

.vscode/settings.json

 {
     "cSpell.words": [
+        "formik",
         "Janith",
         "leaderboard",
         "SLIIT"

Project/Frontend/SignConnectPlus/src/pages/parameter/curriculum-management/list/list.tsx

@@ -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

@@ -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

+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

@@ -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

+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

@@ -13,7 +13,7 @@ interface Props {
   title: string;
   open: boolean;
   handleClose: (status: boolean) => void;
-  deleteId: number | null;
+  deleteId: number | string | undefined;
 }
 
 // ==============================|| Tutorial - DELETE ||============================== //