Skip to content

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

fix : update 

Desc : update project
parent 5dbca9e9
Hide whitespace changes
Inline Side-by-side
Showing with 713 additions and 8 deletions
Project/Frontend/SignConnectPlus/src/pages/parameter/curriculum-management/list/list.tsx
View file @ 56189894
import { MouseEvent, useMemo, useState } from 'react';
// material-ui // material-ui
import {
Button,
IconButton,
Stack,
Table,
TableBody,
TableCell,
TableHead,
TableRow,
Tooltip,
useTheme
} from '@mui/material';
// third-party
import { Cell, Column, HeaderGroup, Row, useFilters, useGlobalFilter, usePagination, useTable } from 'react-table';
// project import // project import
import MainCard from 'components/MainCard';
import ScrollX from 'components/ScrollX';
import { CSVExport, EmptyTable, TablePagination } from 'components/third-party/ReactTable';
import {
DefaultColumnFilter,
GlobalFilter,
renderFilterTypes
} from 'utils/react-table';
// assets
import { DeleteTwoTone, EditTwoTone, EyeTwoTone, PlusOutlined } from '@ant-design/icons';
//types
import AlertTutorialDelete from 'sections/parameters/tutorial-management/AlertTutorialDelete';
import { ReactTableProps, curriculumProps, dataProps } from './types/types';
// ==============================|| REACT TABLE ||============================== //
function ReactTable({ columns, data, handleAddEdit }: ReactTableProps) {
const filterTypes = useMemo(() => renderFilterTypes, []);
const defaultColumn = useMemo(() => ({ Filter: DefaultColumnFilter }), []);
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow,
preGlobalFilteredRows,
setGlobalFilter,
globalFilter,
page,
gotoPage,
setPageSize,
state: { pageIndex, pageSize }
} = useTable(
{
columns,
data,
defaultColumn,
filterTypes,
initialState: { pageIndex: 0, pageSize: 10 }
},
useGlobalFilter,
useFilters,
usePagination
);
return (
<>
<Stack direction="row" spacing={2} justifyContent="space-between" sx={{ padding: 2 }}>
<GlobalFilter preGlobalFilteredRows={preGlobalFilteredRows} globalFilter={globalFilter} setGlobalFilter={setGlobalFilter} />
<Stack direction="row" alignItems="center" spacing={1}>
<CSVExport data={rows.map((d: Row) => d.original)} filename={'filtering-table.csv'} />
<Button variant="contained" startIcon={<PlusOutlined />} onClick={handleAddEdit}>
Add New Curriculum
</Button>
</Stack>
</Stack>
<Table {...getTableProps()}>
<TableHead sx={{ borderTopWidth: 2 }}>
{headerGroups.map((headerGroup) => (
<TableRow {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column: HeaderGroup) => (
<TableCell {...column.getHeaderProps([{ className: column.className }])}>{column.render('Header')}</TableCell>
))}
</TableRow>
))}
</TableHead>
<TableBody {...getTableBodyProps()}>
{page.length > 0 ? (
page.map((row, i) => {
prepareRow(row);
return (
<TableRow {...row.getRowProps()}>
{row.cells.map((cell: Cell) => (
<TableCell {...cell.getCellProps([{ className: cell.column.className }])}>{cell.render('Cell')}</TableCell>
))}
</TableRow>
);
})
) : (
<EmptyTable msg="No Data" colSpan={10} />
)}
<TableRow>
<TableCell sx={{ p: 2 }} colSpan={10}>
<TablePagination gotoPage={gotoPage} rows={rows} setPageSize={setPageSize} pageIndex={pageIndex} pageSize={pageSize} />
</TableCell>
</TableRow>
</TableBody>
</Table>
</>
);
}
// ==============================|| List ||============================== // // ==============================|| List ||============================== //
const List = () => {
const theme = useTheme();
// table
const data: dataProps[] = []
const columns = useMemo(
() =>
[
{
Header: '#',
accessor: 'id',
className: 'cell-center',
Cell: ({ row }: { row: Row }) => {
if (row.id === undefined || row.id === null || row.id === '') {
return <>-</>
}
if (typeof row.id === 'string') {
return <>{(parseInt(row.id) + 1).toString()}</>;
}
if (typeof row.id === 'number') {
return <>{row.id + 1}</>;
}
// Handle any other data types if necessary
return <>-</>;
}
},
{
Header: 'Curriculum Code',
accessor: 'curriculumCode'
},
{
Header: 'Curriculum LVL',
accessor: 'curriculumLevel'
},
{
Header: 'Curriculum Name',
accessor: 'curriculumName'
},
{
Header: 'Status',
accessor: 'status'
},
{
Header: 'Created By',
accessor: 'createdBy'
},
{
id: "actions",
Header: 'Actions',
accessor: 'actions',
className: 'cell-center',
Cell: ({ row }: { row: Row }) => {
return (
<>
<Stack direction="row" alignItems="center" justifyContent="center" spacing={0}>
<Tooltip title="View">
<IconButton
color="secondary"
onClick={(e: MouseEvent<HTMLButtonElement>) => {
e.stopPropagation();
}}
>
<EyeTwoTone twoToneColor={theme.palette.secondary.main} />
</IconButton>
</Tooltip>
<Tooltip title="Edit">
<IconButton
color="primary"
onClick={(e: MouseEvent<HTMLButtonElement>) => {
// handleAddEdit()
// setTutorial({
// id: row.values.id,
// nutritionName: row.values.nutritionName,
// nutritionCategory: row.values.nutritionCategory.id,
// nutritionUnitOfMeasure: row.values.nutritionUnitOfMeasure.id
// })
e.stopPropagation();
}}
>
<EditTwoTone twoToneColor={theme.palette.primary.main} />
</IconButton>
</Tooltip>
<Tooltip title="Delete">
<IconButton
color="error"
onClick={(e: MouseEvent<HTMLButtonElement>) => {
e.stopPropagation();
// setTutorialId(row.values.id)
// setOpenAlert(true)
}}
>
<DeleteTwoTone twoToneColor={theme.palette.error.main} />
</IconButton>
</Tooltip>
</Stack>
</>
)
}
}
] as Column[],
[]
);
//dialog model
const [addEdit, setAddEdit] = useState<boolean>(false);
const [curriculum, setCurriculum] = useState<curriculumProps>();
const handleAddEdit = () => {
setAddEdit(!addEdit);
if (curriculum && !addEdit) setCurriculum(undefined);
};
//alert model
const [openAlert, setOpenAlert] = useState(false);
// const [curriculumId, setCurriculumId] = useState<number | null>(null)
const curriculumId : number | null = null
const handleAlertClose = () => {
setOpenAlert(!openAlert);
};
const List = () => ( return (
<> <>
</> <MainCard content={false}>
); <ScrollX>
<ReactTable columns={columns} data={data} handleAddEdit={handleAddEdit} />
</ScrollX>
{/* alert model */}
{!curriculum && <AlertTutorialDelete title={""} open={openAlert} handleClose={handleAlertClose} deleteId={curriculumId} />}
</MainCard>
</>
)
}
export default List; export default List;
Project/Frontend/SignConnectPlus/src/pages/parameter/curriculum-management/list/types/types.tsx 0 → 100644
View file @ 56189894
import { Column } from 'react-table';
export interface dataProps {
_id: number | string | undefined;
curriculumCode: String;
curriculumLevel: String;
curriculumName: String;
curriculumImage: String;
tutorials: tutorialItemProps[];
status: Number;
createdBy: String;
updatedBy: String;
createdAt: Date;
updatedAt: Date;
}
export interface ReactTableProps {
columns: Column[]
data: dataProps[]
handleAddEdit: () => void
}
export interface curriculumProps {
_id: number | string | undefined;
curriculumCode: String;
curriculumLevel: String;
curriculumName: 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;
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
Project/Frontend/SignConnectPlus/src/pages/parameter/tutorial-management/list/list.tsx
View file @ 56189894
import { MouseEvent, useMemo, useState } from 'react';
// material-ui // material-ui
import {
Button,
IconButton,
Stack,
Table,
TableBody,
TableCell,
TableHead,
TableRow,
Tooltip,
useTheme
} from '@mui/material';
// third-party
import { Cell, Column, HeaderGroup, Row, useFilters, useGlobalFilter, usePagination, useTable } from 'react-table';
// project import // project import
import MainCard from 'components/MainCard';
import ScrollX from 'components/ScrollX';
import { CSVExport, EmptyTable, TablePagination } from 'components/third-party/ReactTable';
import {
DefaultColumnFilter,
GlobalFilter,
renderFilterTypes
} from 'utils/react-table';
// assets
import { DeleteTwoTone, EditTwoTone, EyeTwoTone, PlusOutlined } from '@ant-design/icons';
//types
import AlertTutorialDelete from 'sections/parameters/tutorial-management/AlertTutorialDelete';
import { ReactTableProps, dataProps, tutorialProps } from './types/types';
// ==============================|| REACT TABLE ||============================== //
function ReactTable({ columns, data, handleAddEdit }: ReactTableProps) {
const filterTypes = useMemo(() => renderFilterTypes, []);
const defaultColumn = useMemo(() => ({ Filter: DefaultColumnFilter }), []);
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow,
preGlobalFilteredRows,
setGlobalFilter,
globalFilter,
page,
gotoPage,
setPageSize,
state: { pageIndex, pageSize }
} = useTable(
{
columns,
data,
defaultColumn,
filterTypes,
initialState: { pageIndex: 0, pageSize: 10 }
},
useGlobalFilter,
useFilters,
usePagination
);
return (
<>
<Stack direction="row" spacing={2} justifyContent="space-between" sx={{ padding: 2 }}>
<GlobalFilter preGlobalFilteredRows={preGlobalFilteredRows} globalFilter={globalFilter} setGlobalFilter={setGlobalFilter} />
<Stack direction="row" alignItems="center" spacing={1}>
<CSVExport data={rows.map((d: Row) => d.original)} filename={'filtering-table.csv'} />
<Button variant="contained" startIcon={<PlusOutlined />} onClick={handleAddEdit}>
Add New Tutorial
</Button>
</Stack>
</Stack>
<Table {...getTableProps()}>
<TableHead sx={{ borderTopWidth: 2 }}>
{headerGroups.map((headerGroup) => (
<TableRow {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column: HeaderGroup) => (
<TableCell {...column.getHeaderProps([{ className: column.className }])}>{column.render('Header')}</TableCell>
))}
</TableRow>
))}
</TableHead>
<TableBody {...getTableBodyProps()}>
{page.length > 0 ? (
page.map((row, i) => {
prepareRow(row);
return (
<TableRow {...row.getRowProps()}>
{row.cells.map((cell: Cell) => (
<TableCell {...cell.getCellProps([{ className: cell.column.className }])}>{cell.render('Cell')}</TableCell>
))}
</TableRow>
);
})
) : (
<EmptyTable msg="No Data" colSpan={10} />
)}
<TableRow>
<TableCell sx={{ p: 2 }} colSpan={10}>
<TablePagination gotoPage={gotoPage} rows={rows} setPageSize={setPageSize} pageIndex={pageIndex} pageSize={pageSize} />
</TableCell>
</TableRow>
</TableBody>
</Table>
</>
);
}
// ==============================|| List ||============================== // // ==============================|| List ||============================== //
const List = () => {
const theme = useTheme();
// table
const data: dataProps[] = []
const columns = useMemo(
() =>
[
{
Header: '#',
accessor: 'id',
className: 'cell-center',
Cell: ({ row }: { row: Row }) => {
if (row.id === undefined || row.id === null || row.id === '') {
return <>-</>
}
if (typeof row.id === 'string') {
return <>{(parseInt(row.id) + 1).toString()}</>;
}
if (typeof row.id === 'number') {
return <>{row.id + 1}</>;
}
// Handle any other data types if necessary
return <>-</>;
}
},
{
Header: 'Tutorial Code',
accessor: 'tutorialCode'
},
{
Header: 'Tutorial Title',
accessor: 'tutorialTitle'
},
{
Header: 'Status',
accessor: 'status'
},
{
Header: 'Created By',
accessor: 'createdBy'
},
{
id: "actions",
Header: 'Actions',
accessor: 'actions',
className: 'cell-center',
Cell: ({ row }: { row: Row }) => {
return (
<>
<Stack direction="row" alignItems="center" justifyContent="center" spacing={0}>
<Tooltip title="View">
<IconButton
color="secondary"
onClick={(e: MouseEvent<HTMLButtonElement>) => {
e.stopPropagation();
}}
>
<EyeTwoTone twoToneColor={theme.palette.secondary.main} />
</IconButton>
</Tooltip>
<Tooltip title="Edit">
<IconButton
color="primary"
onClick={(e: MouseEvent<HTMLButtonElement>) => {
// handleAddEdit()
// setTutorial({
// id: row.values.id,
// nutritionName: row.values.nutritionName,
// nutritionCategory: row.values.nutritionCategory.id,
// nutritionUnitOfMeasure: row.values.nutritionUnitOfMeasure.id
// })
e.stopPropagation();
}}
>
<EditTwoTone twoToneColor={theme.palette.primary.main} />
</IconButton>
</Tooltip>
<Tooltip title="Delete">
<IconButton
color="error"
onClick={(e: MouseEvent<HTMLButtonElement>) => {
e.stopPropagation();
// setTutorialId(row.values.id)
// setOpenAlert(true)
}}
>
<DeleteTwoTone twoToneColor={theme.palette.error.main} />
</IconButton>
</Tooltip>
</Stack>
</>
)
}
}
] as Column[],
[]
);
//dialog model
const [addEdit, setAddEdit] = useState<boolean>(false);
const [tutorial, setTutorial] = useState<tutorialProps>();
const handleAddEdit = () => {
setAddEdit(!addEdit);
if (tutorial && !addEdit) setTutorial(undefined);
};
//alert model
const [openAlert, setOpenAlert] = useState(false);
// const [tutorialId, setTutorialId] = useState<number | null>(null)
const tutorialId: number | null = null
const handleAlertClose = () => {
setOpenAlert(!openAlert);
};
const List = () => ( return (
<> <>
</> <MainCard content={false}>
); <ScrollX>
<ReactTable columns={columns} data={data} handleAddEdit={handleAddEdit} />
</ScrollX>
{/* alert model */}
{!tutorial && <AlertTutorialDelete title={""} open={openAlert} handleClose={handleAlertClose} deleteId={tutorialId} />}
</MainCard>
</>
)
}
export default List; export default List;
Project/Frontend/SignConnectPlus/src/pages/parameter/tutorial-management/list/types/types.tsx 0 → 100644
View file @ 56189894
import { Column } from 'react-table';
export interface dataProps {
_id: number | string | undefined;
tutorialCode: String;
tutorialTitle: String;
tutorialImage: String;
status: Number;
createdBy: String;
updatedBy: String;
createdAt: Date;
updatedAt: Date;
taskItems: taskItemProps[]
}
export interface ReactTableProps {
columns: Column[]
data: dataProps[]
handleAddEdit: () => void
}
export interface tutorialProps {
_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;
}
\ No newline at end of file
Project/Frontend/SignConnectPlus/src/sections/parameters/curriculum-management/AlertCurriculumDelete.tsx 0 → 100644
View file @ 56189894
// material-ui
import { Button, Dialog, DialogContent, Stack, Typography } from '@mui/material';
// project import
import Avatar from 'components/@extended/Avatar';
import { PopupTransition } from 'components/@extended/Transitions';
// assets
import { DeleteFilled } from '@ant-design/icons';
// types
interface Props {
title: string;
open: boolean;
handleClose: (status: boolean) => void;
deleteId: number | null;
}
// ==============================|| Curriculum - DELETE ||============================== //
export default function AlertCurriculumDelete({ title, open, handleClose, deleteId }: Props) {
// const dispatch = useDispatch();
return (
<Dialog
open={open}
onClose={() => handleClose(false)}
keepMounted
TransitionComponent={PopupTransition}
maxWidth="xs"
aria-labelledby="column-delete-title"
aria-describedby="column-delete-description"
>
<DialogContent sx={{ mt: 2, my: 1 }}>
<Stack alignItems="center" spacing={3.5}>
<Avatar color="error" sx={{ width: 72, height: 72, fontSize: '1.75rem' }}>
<DeleteFilled />
</Avatar>
<Stack spacing={2}>
<Typography variant="h4" align="center">
Are you sure you want to delete?
</Typography>
</Stack>
<Stack direction="row" spacing={2} sx={{ width: 1 }}>
<Button fullWidth onClick={() => handleClose(false)} color="secondary" variant="outlined">
Cancel
</Button>
<Button fullWidth color="error" variant="contained" onClick={() => {
// dispatch(deleteNutrition(deleteId!))
handleClose(true)
}} autoFocus>
Delete
</Button>
</Stack>
</Stack>
</DialogContent>
</Dialog >
);
}
Project/Frontend/SignConnectPlus/src/sections/parameters/tutorial-management/AlertTutorialDelete.tsx 0 → 100644
View file @ 56189894
// material-ui
import { Button, Dialog, DialogContent, Stack, Typography } from '@mui/material';
// project import
import Avatar from 'components/@extended/Avatar';
import { PopupTransition } from 'components/@extended/Transitions';
// assets
import { DeleteFilled } from '@ant-design/icons';
// types
interface Props {
title: string;
open: boolean;
handleClose: (status: boolean) => void;
deleteId: number | null;
}
// ==============================|| Tutorial - DELETE ||============================== //
export default function AlertTutorialDelete({ title, open, handleClose, deleteId }: Props) {
// const dispatch = useDispatch();
return (
<Dialog
open={open}
onClose={() => handleClose(false)}
keepMounted
TransitionComponent={PopupTransition}
maxWidth="xs"
aria-labelledby="column-delete-title"
aria-describedby="column-delete-description"
>
<DialogContent sx={{ mt: 2, my: 1 }}>
<Stack alignItems="center" spacing={3.5}>
<Avatar color="error" sx={{ width: 72, height: 72, fontSize: '1.75rem' }}>
<DeleteFilled />
</Avatar>
<Stack spacing={2}>
<Typography variant="h4" align="center">
Are you sure you want to delete?
</Typography>
</Stack>
<Stack direction="row" spacing={2} sx={{ width: 1 }}>
<Button fullWidth onClick={() => handleClose(false)} color="secondary" variant="outlined">
Cancel
</Button>
<Button fullWidth color="error" variant="contained" onClick={() => {
// dispatch(deleteNutrition(deleteId!))
handleClose(true)
}} autoFocus>
Delete
</Button>
</Stack>
</Stack>
</DialogContent>
</Dialog >
);
}
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