Skip to content

Commit

Permalink
Merge pull request #54 from zwenie-tech/development/mzl
Browse files Browse the repository at this point in the history 
pagination done
  • Loading branch information
@Rohith272
Rohith272 authored Aug 6, 2024
2 parents c4d1e8d + 629c56e commit 10d4133
Show file tree
Hide file tree
Showing 19 changed files with 1,066 additions and 154 deletions.
121 changes: 54 additions & 67 deletions src/app/dashboard/dashboard-PlantUploads/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,34 @@ const PlantuploadContent = () => {
const searchParams = useSearchParams();
const gid = searchParams.get("gid");
const token = Cookies.get('token');
const [currentPage, setCurrentPage] = useState(1);
const [totalPages, setTotalPages] = useState(1);
const itemsPerPage = 10;


useEffect(() => {
async function fetchfirstData(){
const responseall = await fetch(`${apiURL}/coordinator/our-uploads?limit=100000000000`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${token}`
},
body: JSON.stringify({ groupid: gid })
});
const dataall = await responseall.json();
console.log('length', dataall.data.length);
setTotalPages(Math.ceil(dataall.data.length / itemsPerPage));
}
fetchfirstData();
}, [token,gid]);

const handlePageChange = (newPage: number) => {
if (newPage > 0 && newPage <= totalPages) {
console.log('working')
setCurrentPage(newPage);
}
}
if (!token) {
// Redirect to the login page
router.push("/login");
Expand All @@ -37,7 +64,7 @@ const PlantuploadContent = () => {
useEffect(() => {
const fetchUploads = async () => {
try {
const response = await fetch(`${apiURL}/coordinator/our-uploads?page=1&limit=20`, {
const response = await fetch(`${apiURL}/coordinator/our-uploads?page=${currentPage}&limit=${itemsPerPage}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Expand All @@ -60,7 +87,7 @@ const PlantuploadContent = () => {
};

fetchUploads();
}, [gid,token]);
}, [gid,token,currentPage]);

return (
<>
Expand All @@ -81,71 +108,6 @@ const PlantuploadContent = () => {
<div className='text-center'>
<h1 className='text-xl mt-2 font-bold'>Our Plant Uploads</h1>
</div>
{/*buttons....*/}
{/* <div className="flex flex-wrap p-2 md:p-4">
<div className="w-1/2 mb-3 md:w-1/3 p-1 md:p-2 bg-white">
<label className="text-[#A09C9C] block font-bold ml-5 mb-1 text-sm md:text-lg ">Select Draw</label>
<select className="w-full p-1 md:p-2 border-0 text-sm md:text-lg rounded-xl bg-white focus:border-2 focus:border-[#3C6E1F]" style={{ boxShadow: "1px 4px 5px 3px #00000040" }}>
<option>Select Option 1</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
<div className="w-1/2 mb-3 md:w-1/3 p-1 md:p-2">
<label className="text-[#A09C9C] block font-bold ml-5 text-sm md:text-lg mb-1">Group leader list</label>
<select className="w-full p-1 md:p-2 text-sm md:text-lg border rounded-xl bg-white focus:border-2 focus:border-[#3C6E1F]" style={{ boxShadow: "1px 4px 5px 3px #00000040" }}>
<option>Select Option 2</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
<div className="w-1/2 mb-3 md:w-1/3 p-1 md:p-2">
<label className="text-[#A09C9C] block font-bold ml-5 text-sm md:text-lg mb-1">Select Page</label>
<select className="w-full p-1 md:p-2 border text-sm md:text-lg rounded-xl bg-white focus:border-2 focus:border-[#3C6E1F]" style={{ boxShadow: "1px 4px 5px 3px #00000040" }}>
<option>Select Option 3</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
<div className="w-1/2 mb-3 md:w-1/4 p-1 md:p-2">
<label className="text-[#A09C9C] block font-bold text-sm md:text-lg ml-5 mb-1">District</label>
<select className="w-full p-1 md:p-2 border text-sm md:text-lg rounded-xl bg-white focus:border-2 focus:border-[#3C6E1F]" style={{ boxShadow: "1px 4px 5px 3px #00000040" }}>
<option>Select Option 4</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
<div className="w-1/2 mb-3 md:w-1/4 p-1 md:p-2 bg-white">
<label className="text-[#A09C9C] block font-bold text-sm md:text-lg ml-5 mb-1">Assembly Constituency</label>
<select className="w-full p-1 md:p-2 border text-sm md:text-lg rounded-xl bg-white focus:border-2 focus:border-[#3C6E1F]" style={{ boxShadow: "1px 4px 5px 3px #00000040" }}>
<option>Select Option 5</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
<div className="w-1/2 md:mt-0 mb-3 md:w-1/4 p-1 md:p-2 bg-white">
<label className="text-[#A09C9C] block font-bold text-sm md:text-lg ml-5 mb-1">LSGD</label>
<select className="w-full p-1 md:p-2 border text-sm md:text-lg rounded-xl bg-white focus:border-2 focus:border-[#3C6E1F]" style={{ boxShadow: "1px 4px 5px 3px #00000040" }}>
<option>Select Option 5</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
<div className="w-full md:w-1/4 p-1 md:p-2 flex flex-col items-center md:items-start">
<label className="text-[#A09C9C] block text-sm font-bold md:text-lg text-sm md:text-lg mb-1">Ward No</label>
<input
type="text"
className="w-1/2 md:w-full p-1 md:p-2 border rounded-xl bg-white focus:border-2 focus:border-[#3C6E1F]"
placeholder="Enter ward number"
style={{ boxShadow: "1px 4px 5px 3px #00000040" }}
/>
</div>
</div>
<div className="w-full md:p-2 flex justify-center items-center mt-2 md:mt-0">
<button className="w-1/2 p-1 m-7 mt-2 md:p-2 bg-[#3C6E1F] text-white rounded-xl" style={{ boxShadow: "1px 4px 5px 3px #00000040" }}>
Submit
</button>
</div> */}
<div className="container mx-auto p-6">
<div className="overflow-x-auto">
<table className="min-w-full bg-white border-gray-200 rounded-t-lg">
Expand Down Expand Up @@ -215,6 +177,31 @@ const PlantuploadContent = () => {
</table>
</div>
</div>
<div className="flex justify-center items-center space-x-2 my-4">
<button
className={currentPage === 1 ?
"text-white text-sm py-2 px-4 bg-[#6b6767] rounded-xl shadow-lg"
: "text-white text-sm py-2 px-4 bg-[#3C6E1F] rounded-xl shadow-lg"
}
onClick={() => handlePageChange(currentPage - 1)}
disabled={currentPage === 1}
>
Previous
</button>
<span className="text-xl">{currentPage}</span>
<button
className={currentPage === totalPages ?
"text-white text-sm py-2 px-4 bg-[#6b6767] rounded-xl shadow-lg"
: "text-white text-sm py-2 px-4 bg-[#3C6E1F] rounded-xl shadow-lg"
}
onClick={() => {
handlePageChange(currentPage + 1)
}}
disabled={currentPage === totalPages}
>
Next
</button>
</div>
<Footer />
</>
);
Expand Down
91 changes: 58 additions & 33 deletions src/app/dashboard/dashboard-activities/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,17 +25,46 @@ const DashboardActivity = () => {
const [error, setError] = useState<string | null>(null);
const router = useRouter();
const token = Cookies.get('token');
const [currentPage, setCurrentPage] = useState(1);
const [totalPages, setTotalPages] = useState(1);
const itemsPerPage = 10;


useEffect(() => {
async function fetchfirstData(){
const responseall = await fetch(`${apiURL}/coordinator/our-activities?limit=100000000000`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${token}`
}
});
if(responseall.status===200){
const dataall = await responseall.json();
console.log('length', dataall.data.length);
setTotalPages(Math.ceil(dataall.data.length / itemsPerPage));

}
}
fetchfirstData();
}, [token]);

const handlePageChange = (newPage: number) => {
if (newPage > 0 && newPage <= totalPages) {
console.log('working')
setCurrentPage(newPage);
}
}
useEffect(() => {
if (!token) {
// Redirect to the login page if no token is found
router.push("/login");
router.push("/loginform");
return;
}

const fetchActivities = async () => {
try {
const response = await fetch(`${apiURL}/coordinator/our-activities?page=1&limit=20`, {
const response = await fetch(`${apiURL}/coordinator/our-activities?page=${currentPage}&limit=${itemsPerPage}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Expand All @@ -58,7 +87,7 @@ const DashboardActivity = () => {
};

fetchActivities();
}, [token, router]);
}, [token, router,currentPage]);

return (
<>
Expand All @@ -77,36 +106,7 @@ const DashboardActivity = () => {
<div className='text-center'>
<h1 className='text-xl mt-2 font-bold'>Our Activities</h1>
</div>
{/* Selection menu */}
{/* <div className="flex flex-wrap p-2 md:p-4">
<div className="w-1/2 mb-3 md:w-1/4 p-1 md:p-2 bg-white">
<label className="text-[#A09C9C] block font-bold ml-5 mb-1">Category</label>
<select className="w-full p-1 md:p-2 border text-sm md:text-lg rounded-xl bg-white focus:border-2 focus:border-[#3C6E1F]" style={{ boxShadow: "1px 4px 5px 3px #00000040" }}>
<option>Select Option 1</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
<div className="w-1/2 md:mt-0 mb-3 md:w-1/4 p-1 md:p-2 bg-white">
<label className="text-[#A09C9C] block font-bold ml-5 mb-1">Sub Category</label>
<select className="w-full p-1 md:p-2 border text-sm md:text-lg rounded-xl bg-white focus:border-2 focus:border-[#3C6E1F]" style={{ boxShadow: "1px 4px 5px 3px #00000040" }}>
<option>Select Option 2</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
<div className="w-full md:w-1/4 p-1 md:p-2 flex flex-col items-center md:items-start">
<label className="text-[#A09C9C] block font-bold md:text-lg mb-1">Club</label>
<select className="w-1/2 md:w-full p-1 md:p-2 border text-sm md:text-lg rounded-xl bg-white focus:border-2 focus:border-[#3C6E1F]" style={{ boxShadow: "1px 4px 5px 3px #00000040" }}>
<option>Select Option 2</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
<div className="w-full md:w-1/4 p-1 md:p-2 flex justify-center md:justify-start sm:items-center md:items-start">
<button className="w-1/2 md:w-full mt-7 p-1 md:p-2 bg-[#3C6E1F] text-white rounded-2xl" style={{ boxShadow: "1px 4px 5px 3px #00000040" }}>Submit</button>
</div>
</div> */}

{/* Table */}
<div className="container mx-auto p-6">
<div className="overflow-x-auto">
Expand Down Expand Up @@ -150,6 +150,31 @@ const DashboardActivity = () => {
</table>
</div>
</div>
<div className="flex justify-center items-center space-x-2 my-4">
<button
className={currentPage === 1 ?
"text-white text-sm py-2 px-4 bg-[#6b6767] rounded-xl shadow-lg"
: "text-white text-sm py-2 px-4 bg-[#3C6E1F] rounded-xl shadow-lg"
}
onClick={() => handlePageChange(currentPage - 1)}
disabled={currentPage === 1}
>
Previous
</button>
<span className="text-xl">{currentPage}</span>
<button
className={currentPage === totalPages ?
"text-white text-sm py-2 px-4 bg-[#6b6767] rounded-xl shadow-lg"
: "text-white text-sm py-2 px-4 bg-[#3C6E1F] rounded-xl shadow-lg"
}
onClick={() => {
handlePageChange(currentPage + 1)
}}
disabled={currentPage === totalPages}
>
Next
</button>
</div>
<Footer />
</>
);
Expand Down
57 changes: 55 additions & 2 deletions src/app/dashboard/dashboard-userlist/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,35 @@ const DashboardUserList = () => {
const [error, setError] = useState<string | null>(null);
const router = useRouter();
const token = Cookies.get('token');
const [currentPage, setCurrentPage] = useState(1);
const [totalPages, setTotalPages] = useState(1);
const itemsPerPage = 10;


useEffect(() => {
async function fetchfirstData(){
const responseall = await fetch(`${apiURL}/coordinator/members?limit=100000000000`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${token}`
}
});
if(responseall.status===200){
const dataall = await responseall.json();
console.log('length', dataall.Users.length);
setTotalPages(Math.ceil(dataall.Users.length / itemsPerPage));
}
}
fetchfirstData();
}, [token]);

const handlePageChange = (newPage: number) => {
if (newPage > 0 && newPage <= totalPages) {
console.log('working')
setCurrentPage(newPage);
}
}
useEffect(() => {
if (!token) {
// Redirect to the login page if no token is found
Expand All @@ -30,7 +58,7 @@ const DashboardUserList = () => {

const fetchUsers = async () => {
try {
const response = await fetch(`${apiURL}/coordinator/members?page=1&limit=20`, {
const response = await fetch(`${apiURL}/coordinator/members?page=${currentPage}&limit=${itemsPerPage}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Expand All @@ -51,7 +79,7 @@ const DashboardUserList = () => {
};

fetchUsers();
}, [token, router]);
}, [token, router,currentPage]);

return (
<>
Expand Down Expand Up @@ -96,6 +124,31 @@ const DashboardUserList = () => {
)}
</div>
</div>
<div className="flex justify-center items-center space-x-2 my-4">
<button
className={currentPage === 1 ?
"text-white text-sm py-2 px-4 bg-[#6b6767] rounded-xl shadow-lg"
: "text-white text-sm py-2 px-4 bg-[#3C6E1F] rounded-xl shadow-lg"
}
onClick={() => handlePageChange(currentPage - 1)}
disabled={currentPage === 1}
>
Previous
</button>
<span className="text-xl">{currentPage}</span>
<button
className={currentPage === totalPages ?
"text-white text-sm py-2 px-4 bg-[#6b6767] rounded-xl shadow-lg"
: "text-white text-sm py-2 px-4 bg-[#3C6E1F] rounded-xl shadow-lg"
}
onClick={() => {
handlePageChange(currentPage + 1)
}}
disabled={currentPage === totalPages}
>
Next
</button>
</div>
<Footer />
</>
);
Expand Down
Loading

0 comments on commit 10d4133

Please sign in to comment.