pagination to guides #574

backend/src/controllers/team.controller.js

@@ -53,8 +53,7 @@ const getServerUrl = async (req, res) => {
 
 const getTeamDetails = async (req, res) => {
   try {
-    const { page = 1, limit = 10 } = req.query;
-    const data = await teamService.getTeam(Number(page), Number(limit));
+    const data = await teamService.getTeam();
     if (!data?.team || !data.users) {
       throw new Error('Team data not found');
     }
@@ -67,13 +66,9 @@ const getTeamDetails = async (req, res) => {
         role: settings.user.roleName[user.role],
         createdAt: new Intl.DateTimeFormat('en-US').format(user.createdAt),
       })),
-      totalUsers: data.totalUsers,
-      totalPages: data.totalPages,
-      currentPage: data.currentPage,
     };
     return res.status(200).json(result);
   } catch (err) {
-    console.log(err);
     const { statusCode, payload } = internalServerError('GET_TEAM_ERROR', err.message);
     res.status(statusCode).json(payload);
   }
@@ -134,4 +129,4 @@ module.exports = {
   getServerUrl,
   setServerUrl,
   teamService,
-};
+};

backend/src/service/team.service.js

@@ -34,33 +34,15 @@ class TeamService {
     }
 
 
-    async getTeam(page = 1, limit = 10) {
+    async getTeam() {
         try {
-            page = Math.max(1, page);
-            limit = Math.max(1, limit);
-            const offset = (page - 1) * limit;
             const team = await Team.findOne({
                 limit: 1,
             });
-            if (!team) {
-              return null;
-            }
-            const { count, rows: users } = await User.findAndCountAll({
-              limit,
-              offset,
-              order: [['createdAt', 'DESC']],
-            });
-
-        return {
-            team,
-            users,
-            totalUsers: count,
-            totalPages: Math.ceil(count / limit),
-            currentPage: page,
-        };
+            const users = await User.findAll();
+            return { team, users };
         }
         catch (err) {
-            console.log(err);
             throw new Error("Failed to retrieve team");
         }
     }
@@ -185,4 +167,4 @@ class TeamService {
     }
 }
 
-module.exports = TeamService;
+module.exports = TeamService;

backend/src/test/unit/controllers/team.test.js

@@ -15,10 +15,7 @@ describe('Unit test team controller', () => {
     res.status = sinon.stub().returns(res);
     res.json = sinon.stub().returns(res);
   });
-  afterEach(async () => {
-    sinon.restore();
-    await db.Team.destroy({ where: {}, truncate: true, restartIdentity: true });
-  });
+  afterEach(sinon.restore);
 
   it('setOrganisation - should return status 400 if a team is already created', async () => {
     sinon.stub(Team, 'count').returns(1);
@@ -90,7 +87,6 @@ describe('Unit test team controller', () => {
     });
   });
   it('getTeamDetails - should return status 500 if no team was created', async () => {
-    const req = { query: { page: '1', limit: '10' } };
     sinon.stub(service, 'getTeam').returns(null);
     await controller.getTeamDetails(req, res);
     expect(res.status.args[0][0]).to.equal(500);
@@ -102,7 +98,6 @@ describe('Unit test team controller', () => {
     });
   });
   it('getTeamDetails - should return status 200 and the team and list of users if everything goes right', async () => {
-    const req = { query: { page: '1', limit: '10' } };
     sinon.stub(service, 'getTeam').resolves({
       team: {
         name: 'Test',
@@ -117,7 +112,6 @@ describe('Unit test team controller', () => {
     expect(body.users).not.to.be.deep.equal(userMocks.validList);
   });
   it('getTeamDetails - should return status 500 if something goes wrong', async () => {
-    const req = { query: { page: '1', limit: '10' } };
     sinon.stub(service, 'getTeam').rejects();
     await controller.getTeamDetails(req, res);
     expect(res.status.args[0][0]).to.equal(500);

backend/src/test/unit/services/team.test.js

@@ -27,10 +27,7 @@ describe("Test team service", () => {
       rollback,
     }));
   });
-  afterEach(async () => {
-    sinon.restore();
-    await db.Team.destroy({ where: {}, truncate: true, restartIdentity: true });
-  });
+  afterEach(sinon.restore);
   it("createTeam - should create the team", async () => {
     TeamMock.create = sinon
       .stub(Team, "create")
@@ -50,18 +47,14 @@ describe("Test team service", () => {
     }
   });
   it("getTeam - should return the team and the users on the team if every thing goes right", async () => {
-    const mockUsers = { count: validList.length, rows: validList };
     TeamMock.findOne = sinon
       .stub(Team, "findOne")
       .resolves({ id: 1, name: "team" });
-    UserMock.findAndCountAll = sinon.stub(User, 'findAndCountAll').resolves(mockUsers);
-    const team = await service.getTeam(1,10);
+    UserMock.findAll = sinon.stub(User, "findAll").resolves(validList);
+    const team = await service.getTeam();
     expect(team).to.deep.equal({
-      team: { id: 1, name: 'team' },
+      team: { id: 1, name: "team" },
       users: validList,
-      totalUsers: validList.length,
-      totalPages: Math.ceil(validList.length / 10),
-      currentPage: 1,
     });
   });
   it("getTeam - should throw an error if something goes wrong", async () => {

frontend/src/components/Pagination/TablePagination/PaginationTable.jsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import TablePagination from '@mui/material/TablePagination';
+import TablePaginationActions from './TablePaginationActions';
+import DropdownMenu from '../../DropdownMenu/DropdownMenu';
+
+const PaginationTable = ({
+  page,
+  setPage,
+  rowsPerPage,
+  setRowsPerPage,
+  rowsPerPageOptions = [5, 10, 25, { label: 'All', value: -1 }],
+  count,
+  colSpan,
+  labelRowsPerPage,
+  component = 'td',
+}) => {
+  const handleChangePage = (event, newPage) => {
+    setPage(newPage);
+  };
+
+  const handleChangeRowsPerPage = (event) => {
+    setRowsPerPage(parseInt(event.target.value, 10));
+    setPage(0);
+  };
+
+  return (
+    <TablePagination
+      component={component}
+      rowsPerPageOptions={rowsPerPageOptions}
+      colSpan={colSpan}
+      labelRowsPerPage={labelRowsPerPage}
+      slots={{
+        select: <DropdownMenu menuItems={rowsPerPageOptions} />,
+      }}
+      count={count}
+      rowsPerPage={rowsPerPage}
+      page={page}
+      onPageChange={handleChangePage}
+      onRowsPerPageChange={handleChangeRowsPerPage}
+      ActionsComponent={TablePaginationActions}
+    />
+  );
+};
+
+PaginationTable.propTypes = {
+  component: PropTypes.elementType,
+  page: PropTypes.number.isRequired,
+  rowsPerPage: PropTypes.number.isRequired,
+  rowsPerPageOptions: PropTypes.array,
+  labelRowsPerPage: PropTypes.string,
+  colSpan: PropTypes.number,
+  count: PropTypes.number.isRequired,
+  setRowsPerPage: PropTypes.func.isRequired,
+  setPage: PropTypes.func.isRequired,
+};
+
+export default PaginationTable;