Skip to content

2
2023-029
Commit fa01b9c3 authored by janithGamage's avatar janithGamage
Browse files
Options

fix: update 

Desc : SSL Translate
parent 9a47a3c4
Hide whitespace changes
Inline Side-by-side
Showing with 586 additions and 14 deletions
Project/Frontend/SignConnectPlus/src/menu-items/application.tsx
View file @ fa01b9c3
......@@ -11,6 +11,7 @@ import {
RocketOutlined,
ShoppingOutlined,
TeamOutlined,
TranslationOutlined,
UserOutlined
} from '@ant-design/icons';
......@@ -27,7 +28,8 @@ const icons = {
CreditCardOutlined,
LoginOutlined,
RocketOutlined,
BookOutlined
BookOutlined,
TranslationOutlined
};
// ==============================|| MENU ITEMS - SUPPORT ||============================== //
......@@ -65,6 +67,13 @@ const application: NavItemType = {
}
]
},
{
id: 'ssl-translate',
title: <FormattedMessage id="ssl-translate" />,
type: 'item',
icon: icons.TranslationOutlined,
url: '/ssl-translate/process',
},
{
id: 'learning-management',
title: <FormattedMessage id="learning-management" />,
......
Project/Frontend/SignConnectPlus/src/pages/member-management/list/list.tsx
View file @ fa01b9c3
import { MouseEvent, useMemo } from 'react';
// material-ui
import {
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
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 } from '@ant-design/icons';
//types
import { ReactTableProps, dataProps } from './types/types';
// ==============================|| REACT TABLE ||============================== //
function ReactTable({ columns, data }: 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 Nutrition
</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={5} />
)}
<TableRow>
<TableCell sx={{ p: 2 }} colSpan={5}>
<TablePagination gotoPage={gotoPage} rows={rows} setPageSize={setPageSize} pageIndex={pageIndex} pageSize={pageSize} />
</TableCell>
</TableRow>
</TableBody>
</Table>
</>
);
}
// ==============================|| List ||============================== //
const List = () => (
<>
</>
);
const List = () => {
const theme = useTheme();
// table
const data: dataProps[] = [
{
id: 1,
userName: "Nuwan Gamage",
userContactNumber: "0768523456",
userEmailAddress: "nuwangamage@gmail.com",
userType: "Member",
userStatus: "Active"
}
]
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: 'User Name',
accessor: 'userName',
className: 'cell-center',
},
{
Header: 'User Email',
accessor: 'userEmailAddress',
className: 'cell-center',
},
{
Header: 'User Contact Number',
accessor: 'userContactNumber',
className: 'cell-center',
},
{
Header: 'User Type',
accessor: 'userType',
className: 'cell-center',
},
{
Header: 'User Status',
accessor: 'userStatus',
className: 'cell-center',
},
{
id: "actions",
Header: 'Actions',
accessor: 'actions',
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>) => {
e.stopPropagation();
}}
>
<EditTwoTone twoToneColor={theme.palette.primary.main} />
</IconButton>
</Tooltip>
<Tooltip title="Delete">
<IconButton
color="error"
onClick={(e: MouseEvent<HTMLButtonElement>) => {
e.stopPropagation();
}}
>
<DeleteTwoTone twoToneColor={theme.palette.error.main} />
</IconButton>
</Tooltip>
</Stack>
</>
)
}
}
] as Column[],
[]
);
return (
<>
<MainCard content={false}>
<ScrollX>
<ReactTable columns={columns} data={data} />
</ScrollX>
</MainCard>
</>
)
}
export default List;
Project/Frontend/SignConnectPlus/src/pages/member-management/list/types/types.tsx 0 → 100644
View file @ fa01b9c3
import { Column } from 'react-table';
export interface dataProps {
id: number | string | undefined
userName: string
userContactNumber: string
userEmailAddress: string
userType: string
userStatus: string
}
export interface ReactTableProps {
columns: Column[]
data: dataProps[]
}
export interface userProps {
id: number | string | undefined
userName: string
userContactNumber: string
userEmailAddress: string
userType: string
userStatus: string
}
\ No newline at end of file
Project/Frontend/SignConnectPlus/src/pages/ssl-translate/process/process.tsx 0 → 100644
View file @ fa01b9c3
// material-ui
// third-party
// project import
import MainCard from 'components/MainCard';
import ScrollX from 'components/ScrollX';
// assets
//types
// ==============================|| Process ||============================== //
const Process = () => {
return (
<>
<MainCard content={false}>
<ScrollX>
{/* content here */}
</ScrollX>
</MainCard>
</>
)
}
export default Process;
\ No newline at end of file
Project/Frontend/SignConnectPlus/src/pages/user-management/list/list.tsx
View file @ fa01b9c3
import { MouseEvent, useMemo, useState } from 'react';
// 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
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, PlusOutlined } from '@ant-design/icons';
//types
import { ReactTableProps, dataProps, userProps } 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 User
</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={5} />
)}
<TableRow>
<TableCell sx={{ p: 2 }} colSpan={5}>
<TablePagination gotoPage={gotoPage} rows={rows} setPageSize={setPageSize} pageIndex={pageIndex} pageSize={pageSize} />
</TableCell>
</TableRow>
</TableBody>
</Table>
</>
);
}
// ==============================|| List ||============================== //
const List = () => (
<>
</>
);
const List = () => {
const theme = useTheme();
// table
const data: dataProps[] = [
{
id: 1,
userName: "Janith Gamage",
userContactNumber: "0768523525",
userEmailAddress: "janithgamage1.ed@gmail.com",
userType: "Admin",
userStatus: "Active"
},
{
id: 1,
userName: "Nuwan Gamage",
userContactNumber: "0768523456",
userEmailAddress: "nuwangamage@gmail.com",
userType: "Member",
userStatus: "Active"
}
]
//dialog model
const [addEdit, setAddEdit] = useState<boolean>(false);
const [user, setUser] = useState<userProps>();
const handleAddEdit = () => {
setAddEdit(!addEdit);
if (user && !addEdit) setUser(undefined);
};
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: 'User Name',
accessor: 'userName',
className: 'cell-center',
},
{
Header: 'User Email',
accessor: 'userEmailAddress',
className: 'cell-center',
},
{
Header: 'User Contact Number',
accessor: 'userContactNumber',
className: 'cell-center',
},
{
Header: 'User Type',
accessor: 'userType',
className: 'cell-center',
},
{
Header: 'User Status',
accessor: 'userStatus',
className: 'cell-center',
},
{
id: "actions",
Header: 'Actions',
accessor: 'actions',
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>) => {
e.stopPropagation();
}}
>
<EditTwoTone twoToneColor={theme.palette.primary.main} />
</IconButton>
</Tooltip>
<Tooltip title="Delete">
<IconButton
color="error"
onClick={(e: MouseEvent<HTMLButtonElement>) => {
e.stopPropagation();
}}
>
<DeleteTwoTone twoToneColor={theme.palette.error.main} />
</IconButton>
</Tooltip>
</Stack>
</>
)
}
}
] as Column[],
[]
);
return (
<>
<MainCard content={false}>
<ScrollX>
<ReactTable columns={columns} data={data} handleAddEdit={handleAddEdit} />
</ScrollX>
</MainCard>
</>
)
}
export default List;
Project/Frontend/SignConnectPlus/src/pages/user-management/list/types/types.tsx 0 → 100644
View file @ fa01b9c3
import { Column } from 'react-table';
export interface dataProps {
id: number | string | undefined
userName: string
userContactNumber: string
userEmailAddress: string
userType: string
userStatus: string
}
export interface ReactTableProps {
columns: Column[]
data: dataProps[]
handleAddEdit: () => void
}
export interface userProps {
id: number | string | undefined
userName: string
userContactNumber: string
userEmailAddress: string
userType: string
userStatus: string
}
\ No newline at end of file
Project/Frontend/SignConnectPlus/src/routes/MainRoutes.tsx
View file @ fa01b9c3
......@@ -24,10 +24,10 @@ const MaintenanceComingSoon = Loadable(lazy(() => import('pages/maintenance/comi
const Dashboard = Loadable(lazy(() => import('pages/home/dashboard')));
// render - member management page
// const MemberManagementList = Loadable(lazy(() => import('pages/member-management/list/list')));
const MemberManagementList = Loadable(lazy(() => import('pages/member-management/list/list')));
// render - user management page
// const UserManagementList = Loadable(lazy(() => import('pages/user-management/list/list')));
const UserManagementList = Loadable(lazy(() => import('pages/user-management/list/list')));
// render - learning management page
// const LearningManagementList = Loadable(lazy(() => import('pages/learning-management/list/list')));
......@@ -38,6 +38,9 @@ const CurriculumManagementList = Loadable(lazy(() => import('pages/parameter/cur
// render - parameter tutorial management page
const TutorialManagementList = Loadable(lazy(() => import('pages/parameter/tutorial-management/list/list')));
// render - ssl translate process page
const SSLTranslateProcess = Loadable(lazy(() => import('pages/ssl-translate/process/process')));
// ==============================|| MAIN ROUTING ||============================== //
const MainRoutes = {
......@@ -65,7 +68,7 @@ const MainRoutes = {
children: [
{
path: 'list',
element: <MaintenanceUnderConstruction />
element: <UserManagementList />
}
]
},
......@@ -74,7 +77,16 @@ const MainRoutes = {
children: [
{
path: 'list',
element: <MaintenanceUnderConstruction />
element: <MemberManagementList />
}
]
},
{
path: 'ssl-translate',
children: [
{
path: 'process',
element: <SSLTranslateProcess />
}
]
},
......
Project/Frontend/SignConnectPlus/src/utils/locales/en.json
View file @ fa01b9c3
......@@ -160,5 +160,6 @@
"learning-curriculums": "Course",
"learning-curriculums-subscribed": "My Courses",
"learning-lead-board": "Lead Board",
"learning-feedback": "Feedback"
"learning-feedback": "Feedback",
"ssl-translate": "SSL Translate"
}
\ 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