From f0877effa19dc72ad2c8ab97d5b9b0ca485e1ef7 Mon Sep 17 00:00:00 2001
From: Sonika <kumari.sonika@seryfertsoft.com>
Date: Mon, 11 Dec 2023 08:55:05 +0530
Subject: [PATCH] project table api data, pagination

---
 src/components/projects/Projects.js     |  6 +-
 src/components/projects/ProjectsList.js | 78 +++++++++++++------------
 2 files changed, 46 insertions(+), 38 deletions(-)

diff --git a/src/components/projects/Projects.js b/src/components/projects/Projects.js
index ecd44de..39a301f 100644
--- a/src/components/projects/Projects.js
+++ b/src/components/projects/Projects.js
@@ -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}/>
         </>
     )
 }
\ No newline at end of file
diff --git a/src/components/projects/ProjectsList.js b/src/components/projects/ProjectsList.js
index 34bc16d..25a081f 100644
--- a/src/components/projects/ProjectsList.js
+++ b/src/components/projects/ProjectsList.js
@@ -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,9 +73,10 @@ export default function ProjectList() {
     setPage(0);
   };
 
+
   return (
     <Paper sx={{ width: '100%', overflow: 'hidden' }}>
-      <TableContainer sx={{ maxHeight: 440 }}>
+      <TableContainer sx={{ maxHeight: 440}}>
         <Table stickyHeader aria-label="sticky table">
           <TableHead>
             <TableRow>
@@ -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}