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

project table api data, pagination

Browse Source
This commit is contained in:
Sonika 2023-12-11 08:55:05 +05:30
parent 5cd3e50485
commit f0877effa1
2 changed files with 46 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/projects/Projects.js
View File

@ -1,10 +1,14 @@
import React from "react";
import ProjectList from "./ProjectsList";
import { useGetProjectData } from "APIs/getProject";
export default function Projects(){
const { data: getProjectDataList } = useGetProjectData();
return(
<>
<ProjectList/>
<ProjectList projectData={getProjectDataList}/>
</>
)
}

76
src/components/projects/ProjectsList.js
View File

@ -7,57 +7,60 @@ 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: 'name', label: 'Name', minWidth: 170 },
// { id: 'code', label: 'ISO\u00a0Code', minWidth: 100 },
{
id: 'population',
label: 'Population',
id: 'project_title',
label: 'Title',
minWidth: 170,
align: 'right',
format: (value) => value.toLocaleString('en-US'),
// format: (value) => value.toLocaleString('en-US'),
},
{
id: 'size',
label: 'Size\u00a0(km\u00b2)',
id: 'cms_contract_no',
label: 'Contract No',
minWidth: 170,
align: 'right',
format: (value) => value.toLocaleString('en-US'),
// format: (value) => value.toLocaleString('en-US'),
},
{
id: 'density',
label: 'Density',
id: 'ticket_title',
label: 'Project Title',
minWidth: 170,
align: 'right',
format: (value) => value.toFixed(2),
// format: (value) => value.toFixed(2),
},
{
id: 'term',
label: 'Term',
Cell: ({ row }) => (
(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 }) => (
(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',
},
];
function createData(name, code, population, size) {
const density = population / size;
return { name, code, population, size, density };
}
const rows = [
createData('India', 'IN', 1324171354, 3287263),
createData('China', 'CN', 1403500365, 9596961),
createData('Italy', 'IT', 60483973, 301340),
createData('United States', 'US', 327167434, 9833520),
createData('Canada', 'CA', 37602103, 9984670),
createData('Australia', 'AU', 25475400, 7692024),
createData('Germany', 'DE', 83019200, 357578),
createData('Ireland', 'IE', 4857000, 70273),
createData('Mexico', 'MX', 126577691, 1972550),
createData('Japan', 'JP', 126317000, 377973),
createData('France', 'FR', 67022000, 640679),
createData('United Kingdom', 'GB', 67545757, 242495),
createData('Russia', 'RU', 146793744, 17098246),
createData('Nigeria', 'NG', 200962417, 923768),
createData('Brazil', 'BR', 210147125, 8515767),
];
export default function ProjectList() {
export default function ProjectList({projectData}) {
const [page, setPage] = React.useState(0);
const [rowsPerPage, setRowsPerPage] = React.useState(10);
@ -70,6 +73,7 @@ export default function ProjectList() {
setPage(0);
};
return (
<Paper sx={{ width: '100%', overflow: 'hidden' }}>
<TableContainer sx={{ maxHeight: 440}}>
@ -88,7 +92,7 @@ export default function ProjectList() {
</TableRow>
</TableHead>
<TableBody>
{rows
{projectData && projectData
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
.map((row) => {
return (
@ -114,7 +118,7 @@ export default function ProjectList() {
<TablePagination
rowsPerPageOptions={[10, 25, 100]}
component="div"
count={rows.length}
count={projectData && projectData.length}
rowsPerPage={rowsPerPage}
page={page}
onPageChange={handleChangePage}