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

feat: added the pagination to admin #74

Merged
merged 1 commit into from
Mar 10, 2024
Merged

feat: added the pagination to admin #74

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions client/src/Services/bodyServices.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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