137 lines
4.5 KiB
TypeScript
137 lines
4.5 KiB
TypeScript
import * as React from 'react';
|
|
import Paper from '@mui/material/Paper';
|
|
import Table from '@mui/material/Table';
|
|
import TableBody from '@mui/material/TableBody';
|
|
import TableCell from '@mui/material/TableCell';
|
|
import TableContainer from '@mui/material/TableContainer';
|
|
import TableHead from '@mui/material/TableHead';
|
|
import TablePagination from '@mui/material/TablePagination';
|
|
import TableRow from '@mui/material/TableRow';
|
|
import { Button } from '@mui/material';
|
|
import { Link } from 'react-router-dom';
|
|
|
|
const columns = [
|
|
// { id: 'name', label: 'Name', minWidth: 170 },
|
|
// { id: 'code', label: 'ISO\u00a0Code', minWidth: 100 },
|
|
{
|
|
id: 'project_title',
|
|
label: 'Title',
|
|
minWidth: 170,
|
|
align: 'right',
|
|
// format: (value) => value.toLocaleString('en-US'),
|
|
},
|
|
{
|
|
id: 'cms_contract_no',
|
|
label: 'Contract No',
|
|
minWidth: 170,
|
|
align: 'right',
|
|
// format: (value) => value.toLocaleString('en-US'),
|
|
},
|
|
{
|
|
id: 'ticket_title',
|
|
label: 'Project Title',
|
|
minWidth: 170,
|
|
align: 'right',
|
|
// format: (value) => value.toFixed(2),
|
|
},
|
|
{
|
|
id: 'term',
|
|
label: 'Term',
|
|
Cell: (row:any) => (
|
|
(row.perpetuity !== '' && row.perpetuity !== null)
|
|
? (row.perpetuity !== "Yes" ? <span>{row.effective_from1} - {row.effective_to1}</span> : `${row.effective_from1} - Perpetual`)
|
|
: ""
|
|
),
|
|
},
|
|
{
|
|
id: 'link',
|
|
label: 'Link',
|
|
Cell: (row:any) => (
|
|
(row.cid === null || row.cid === 0 || row.effective_from1 === null)
|
|
? <Button component={Link} to={{ pathname: `${process.env.PUBLIC_URL}/${row.id}/project-details` }} variant="contained" size="small">Link</Button>
|
|
: (row.published === 1
|
|
? <Button component={Link} to={{ pathname: `${process.env.PUBLIC_URL}/${row.id}/project-details` }} variant="contained" color="primary" size="small">View</Button>
|
|
: <Button component={Link} to={{ pathname: `${process.env.PUBLIC_URL}/${row.id}/project-details` }} variant="contained" color="primary" size="small">Publish</Button>
|
|
)
|
|
),
|
|
minWidth: 80,
|
|
align: 'right',
|
|
},
|
|
];
|
|
|
|
type Props={
|
|
projectData:any
|
|
}
|
|
|
|
|
|
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 >
|
|
<TableRow >
|
|
{columns.map((column) => (
|
|
<TableCell
|
|
sx={{bgcolor:'#171716',color:'white', borderBottom:'#171716'}}
|
|
key={column.id}
|
|
// align={column.align}
|
|
style={{ minWidth: column.minWidth }}
|
|
>
|
|
{column.label}
|
|
</TableCell>
|
|
))}
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{projectData && projectData
|
|
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
|
|
.map((row:any) => {
|
|
return (
|
|
<TableRow hover role="checkbox" tabIndex={-1} key={row.code}>
|
|
{columns.map((column:any) => {
|
|
const value = row[column.id];
|
|
return (
|
|
<TableCell key={column.id}
|
|
// align={column.align}
|
|
>
|
|
{column.format && typeof value === 'number'
|
|
? column.format(value)
|
|
: value}
|
|
</TableCell>
|
|
);
|
|
})}
|
|
</TableRow>
|
|
);
|
|
})}
|
|
</TableBody>
|
|
</Table>
|
|
</TableContainer>
|
|
<TablePagination
|
|
sx={{bgcolor:'#171716',color:'white'}}
|
|
rowsPerPageOptions={[10, 25, 100]}
|
|
component="div"
|
|
count={projectData && projectData.length}
|
|
rowsPerPage={rowsPerPage}
|
|
page={page}
|
|
onPageChange={handleChangePage}
|
|
onRowsPerPageChange={handleChangeRowsPerPage}
|
|
/>
|
|
</Paper>
|
|
</Paper>
|
|
);
|
|
} |