sonika/sony_intranet_remake2023
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

project screen code optimization

Browse Source
This commit is contained in:
Sonika 2023-12-22 22:02:27 +05:30
parent 6e58c4ed38
commit 5d0bba824f
1 changed files with 69 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
src/components/projects/ProjectsList.tsx
View File

@ -9,30 +9,26 @@ import TablePagination from '@mui/material/TablePagination';
import TableRow from '@mui/material/TableRow'; import TableRow from '@mui/material/TableRow';
import { Button } from '@mui/material'; import { Button } from '@mui/material';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { useState } from 'react';
const columns = [ const columns = [
// { id: 'name', label: 'Name', minWidth: 170 },
// { id: 'code', label: 'ISO\u00a0Code', minWidth: 100 },
{ {
id: 'project_title', id: 'project_title',
label: 'Title', label: 'Title',
minWidth: 170, minWidth: 170,
align: 'right', align: 'right',
// format: (value) => value.toLocaleString('en-US'),
}, },
{ {
id: 'cms_contract_no', id: 'cms_contract_no',
label: 'Contract No', label: 'Contract No',
minWidth: 170, minWidth: 170,
align: 'right', align: 'right',
// format: (value) => value.toLocaleString('en-US'),
}, },
{ {
id: 'ticket_title', id: 'ticket_title',
label: 'Project Title', label: 'Project Title',
minWidth: 170, minWidth: 170,
align: 'right', align: 'right',
// format: (value) => value.toFixed(2),
}, },
{ {
id: 'term', id: 'term',
@ -59,37 +55,14 @@ const columns = [
}, },
]; ];
type Props={
projectData:any
}
const ProjectTableHead = () => (
export default function ProjectList({projectData}:Props) {
const [page, setPage] = React.useState(0);
const [rowsPerPage, setRowsPerPage] = React.useState(10);
const handleChangePage = (event:any, newPage:any) => {
setPage(newPage);
};
const handleChangeRowsPerPage = (event:any) => {
setRowsPerPage(+event.target.value);
setPage(0);
};
return (
<Paper square className='projectScreen-background' sx={{ width: '100%', overflow: 'hidden',backgroundColor:'rgb(13 13 13)' }}>
<Paper className='projectScreen-background' sx={{ margin:'1%', width: '100%', overflow: 'hidden' }}>
<TableContainer sx={{ maxHeight: '600px'}}>
<Table stickyHeader aria-label="sticky table">
<TableHead> <TableHead>
<TableRow> <TableRow>
{columns.map((column) => ( {columns.map((column) => (
<TableCell <TableCell
sx={{ bgcolor: '#171716', color: 'white', borderBottom: '#171716' }} sx={{ bgcolor: '#171716', color: 'white', borderBottom: '#171716' }}
key={column.id} key={column.id}
// align={column.align}
style={{ minWidth: column.minWidth }} style={{ minWidth: column.minWidth }}
> >
{column.label} {column.label}
@ -97,29 +70,53 @@ export default function ProjectList({projectData}:Props) {
))} ))}
</TableRow> </TableRow>
</TableHead> </TableHead>
);
type Props = {
projectData: any;
page:any;
rowsPerPage:any
};
const ProjectTable = ({ projectData, page, rowsPerPage }:Props) => (
<Table stickyHeader aria-label="sticky table">
<TableBody> <TableBody>
{projectData && projectData {projectData &&
projectData
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
.map((row:any) => { .map((row:any) => (
return (
<TableRow hover role="checkbox" tabIndex={-1} key={row.code}> <TableRow hover role="checkbox" tabIndex={-1} key={row.code}>
{columns.map((column:any) => { {columns.map((column) => (
const value = row[column.id]; <TableCell key={column.id}>{ typeof row[column.id] === 'number' ? (row[column.id]) : row[column.id]}</TableCell>
return ( ))}
<TableCell key={column.id}
// align={column.align}
>
{column.format && typeof value === 'number'
? column.format(value)
: value}
</TableCell>
);
})}
</TableRow> </TableRow>
); ))}
})}
</TableBody> </TableBody>
</Table> </Table>
);
const ProjectList = ({ projectData}: any) => {
const [page, setPage] = useState(0);
const [rowsPerPage, setRowsPerPage] = useState(10);
const handleChangePage = (event: any, newPage: React.SetStateAction<number>) => {
setPage(newPage);
};
const handleChangeRowsPerPage = (event: { target: { value: string | number; }; }) => {
setRowsPerPage(+event.target.value);
setPage(0);
};
return (
<Paper square className="projectScreen-background" sx={{ width: '100%', overflow: 'hidden', backgroundColor: 'rgb(13 13 13)' }}>
<Paper className="projectScreen-background" sx={{ margin: '1%', width: '100%', overflow: 'hidden' }}>
<TableContainer sx={{ maxHeight: '600px' }}>
<ProjectTableHead />
<ProjectTable projectData={projectData} page={page} rowsPerPage={rowsPerPage} />
</TableContainer> </TableContainer>
<TablePagination <TablePagination
sx={{ bgcolor: '#171716', color: 'white' }} sx={{ bgcolor: '#171716', color: 'white' }}
@ -134,4 +131,6 @@ export default function ProjectList({projectData}:Props) {
</Paper> </Paper>
</Paper> </Paper>
); );
} };
export default ProjectList;