Skip to content
This repository has been archived by the owner on Mar 26, 2024. It is now read-only.

Commit

Permalink
feat: added the pagination to admin (#74)
Browse files Browse the repository at this point in the history
  • Loading branch information
@izam-mohammed
izam-mohammed authored Mar 10, 2024
2 parents 74f3cb1 + a155310 commit 00b1256
Show file tree
Hide file tree
Showing 4 changed files with 159 additions and 92 deletions.
4 changes: 2 additions & 2 deletions client/src/Services/bodyServices.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import thaliaAPI from "../API/thaliaAPI";

export const getTopics = async () => {
export const getTopics = async (page) => {
try {
const response = await thaliaAPI.get("/admin/my-body", { withCredentials: true });
const response = await thaliaAPI.get(`/admin/my-body?page=${page}`, { withCredentials: true });
return response.data;
} catch (error) {
return error;
Expand Down
75 changes: 43 additions & 32 deletions client/src/Services/rightServices.js
View file
Original file line number Diff line number Diff line change
@@ -1,37 +1,48 @@
import thaliaAPI from "../API/thaliaAPI";

export const createRight = async (rightDetails) => {
try {
const response = await thaliaAPI.post("/admin/rights", rightDetails, { withCredentials: true });
return response.data;
} catch (error) {
return error;
}
}
try {
const response = await thaliaAPI.post("/admin/rights", rightDetails, {
withCredentials: true,
});
return response.data;
} catch (error) {
return error;
}
};
export const editRight = async (rightDetails, rightId) => {
try {
const response = await thaliaAPI.put(`/admin/rights/${rightId}`, rightDetails, { withCredentials: true });
return response.data;
} catch (error) {
return error;
}
}
export const getRight = async () => {
try {
const response = await thaliaAPI.get('/admin/rights', {}, { withCredentials: true });
return response.data;
} catch (error) {
return error;
}
}
try {
const response = await thaliaAPI.put(
`/admin/rights/${rightId}`,
rightDetails,
{ withCredentials: true }
);
return response.data;
} catch (error) {
return error;
}
};
export const getRight = async (page) => {
try {
const response = await thaliaAPI.get(
`/admin/rights?page=${page}`,
{},
{ withCredentials: true }
);
return response.data;
} catch (error) {
return error;
}
};
export const getDelete = async (rightId) => {
try {
const response = await thaliaAPI.delete(`/admin/rights/${rightId}`, {}, { withCredentials: true });
return response.data;
} catch (error) {
return error;
}
}



try {
const response = await thaliaAPI.delete(
`/admin/rights/${rightId}`,
{},
{ withCredentials: true }
);
return response.data;
} catch (error) {
return error;
}
};
31 changes: 29 additions & 2 deletions client/src/pages/AdminPages/MyBody/MyBody.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,22 @@ import { getTopics } from "../../../Services/bodyServices";
import { deleteBody } from "../../../Services/bodyServices";
import timeFormat from "../../../utils/timeFormat";
import { toast } from "react-toastify";
import { Pagination } from "flowbite-react";
import Swal from "sweetalert2";

function MyBody() {
const [openModal, setOpenModal] = useState(false);
const [bodyDeatails, setBodyDetails] = useState([]);
const [currentPage, setCurrentPage] = useState(1);
const [count, setCount] = useState(0);

const [editBody, setEditBody] = useState();
const [editModal, setEditModal] = useState(false);

const handleModal = () => {
setOpenModal(true);
};
const onPageChange = (page) => setCurrentPage(page);
const handleEditModal = (bodyId) => {
setEditModal(true);
const bodyToEdit = bodyDeatails.find((body) => {
Expand All @@ -25,9 +30,10 @@ function MyBody() {
};
useEffect(() => {
const getData = async () => {
const response = await getTopics();
const response = await getTopics(currentPage);
if (response.success === true) {
setBodyDetails(response.contents);
setCount(response.count)
}
};
getData();
Expand All @@ -38,6 +44,7 @@ function MyBody() {
setEditModal,
editModal,
setEditBody,
currentPage
]);
const handleDelete = async (bodyId) => {
const response = await deleteBody(bodyId);
Expand Down Expand Up @@ -115,7 +122,18 @@ function MyBody() {
</button>
<button
className="border py-1 px-6 rounded ml-2 hover:bg-red-700"
onClick={() => handleDelete(data?._id)}
onClick={() => {
Swal.fire({
title: "Are you sure",
text: "are you sure wan't to delete this",
showCancelButton: true,
confirmButtonText:"delete"
}).then((result) => {
if (result.isConfirmed) {
handleDelete(data?._id);
}
});
}}
>
Delete
</button>
Expand All @@ -127,6 +145,15 @@ function MyBody() {
})}
</table>
</div>
<div className="flex z-20 mypage overflow-x-auto w-[80%] sm:justify-end">
{count > 10 && (
<Pagination
currentPage={currentPage}
totalPages={Math.ceil(count / 10)}
onPageChange={onPageChange}
/>
)}
</div>
</div>
</div>
</>
Expand Down
141 changes: 85 additions & 56 deletions client/src/pages/AdminPages/Rights/Rights.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,19 @@ import { getRight } from "../../../Services/rightServices";
import { getDelete } from "../../../Services/rightServices";
import timeFormat from "../../../utils/timeFormat";
import { toast } from "react-toastify";
import { Pagination } from "flowbite-react";
import Swal from "sweetalert2";

function Rights() {
const [openModal, setOpenModal] = useState(false);
const [rightDetails, setRightDetails] = useState([]);

const [editRight, setEditRight] = useState();
const [editModal, setEditModal] = useState(false);
const [currentPage, setCurrentPage] = useState(1);
const [count, setCount] = useState(0);

const onPageChange = (page) => setCurrentPage(page);

const handleModal = () => {
setOpenModal(true);
Expand All @@ -25,8 +31,11 @@ function Rights() {
};
useEffect(() => {
const getRights = async () => {
const response = await getRight();
setRightDetails(response.rights);
const response = await getRight(currentPage);
if (response.success) {
setRightDetails(response.rights);
setCount(response.count);
}
};
getRights();
}, [
Expand All @@ -36,6 +45,7 @@ function Rights() {
editModal,
setRightDetails,
setEditRight,
currentPage,
]);
const handleDelete = async (rightId) => {
const response = await getDelete(rightId);
Expand Down Expand Up @@ -72,60 +82,79 @@ function Rights() {
</div>
{/* Table Component */}
<div>
<>
<table className="w-full text-sm text-left rtl:text-right rounded">
<thead className="text-xs bg-secondary rounded">
<tr>
<th scope="col" className="px-6 py-3 text-primary">
No
</th>
<th scope="col" className="px-6 py-3 text-primary">
Name
</th>
<th scope="col" className="px-6 py-3 text-primary">
Date
</th>
<th
scope="col"
className="px-6 py-3 text-primary text-center"
>
Edit or Delete
</th>
</tr>
</thead>
{rightDetails.map((right, index) => {
return (
<>
<tbody className="text-text" key={index}>
<tr className="border-b border-gray-600">
<th scope="row" className="px-6 py-4 font-medium">
{index + 1}
</th>
<td className="px-6 py-4">{right?.name}</td>
<td className="px-6 py-4">
{timeFormat(right?.createdAt)}
</td>
<td className="px-6 py-4 flex justify-center">
<button
className="border py-1 px-6 rounded hover:bg-green-500"
onClick={() => handleEditModal(right?._id)}
>
Edit
</button>
<button
className="border py-1 px-6 rounded ml-2 hover:bg-red-700"
onClick={() => handleDelete(right?._id)}
>
Delete
</button>
</td>
</tr>
</tbody>
</>
);
})}
</table>
</>
<table className="w-full text-sm text-left rtl:text-right rounded">
<thead className="text-xs bg-secondary rounded">
<tr>
<th scope="col" className="px-6 py-3 text-primary">
No
</th>
<th scope="col" className="px-6 py-3 text-primary">
Name
</th>
<th scope="col" className="px-6 py-3 text-primary">
Date
</th>
<th
scope="col"
className="px-6 py-3 text-primary text-center"
>
Edit or Delete
</th>
</tr>
</thead>
{rightDetails.map((right, index) => {
return (
<>
<tbody className="text-text" key={index}>
<tr className="border-b border-gray-600">
<th scope="row" className="px-6 py-4 font-medium">
{index + 1}
</th>
<td className="px-6 py-4">{right?.name}</td>
<td className="px-6 py-4">
{timeFormat(right?.createdAt)}
</td>
<td className="px-6 py-4 flex justify-center">
<button
className="border py-1 px-6 rounded hover:bg-green-500"
onClick={() => handleEditModal(right?._id)}
>
Edit
</button>
<button
className="border py-1 px-6 rounded ml-2 hover:bg-red-700"
onClick={() => {
Swal.fire({
title: "Are you sure",
text: "are you sure wan't to delete this",
showCancelButton: true,
confirmButtonText:"delete"
}).then((result) => {
if (result.isConfirmed) {
handleDelete(right?._id);
}
});
}}
>
Delete
</button>
</td>
</tr>
</tbody>
</>
);
})}
</table>

<div className="flex z-20 mypage overflow-x-auto w-[80%] sm:justify-end">
{count > 0 && (
<Pagination
currentPage={currentPage}
totalPages={Math.ceil(count / 10)}
onPageChange={onPageChange}
/>
)}
</div>
</div>
</div>
</div>
Expand Down

0 comments on commit 00b1256

Please sign in to comment.