suvo
/
bs-school-manager
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

pagination

main2
Kar 2023-05-21 23:40:30 +05:30
parent e2b3a28f36
commit 23ef8d9803
5 changed files with 149 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
data/appUser.db
View File

Binary file not shown.

14
src/components/NavBar.tsx
View File

@ -11,13 +11,13 @@ export default function NavBar() {
<div>
<section className="container-fluid bg-[#FFF6F2]">
<div className="container mx-auto px-4">
<div className='flex flex-row gap-x-2 md:gap-x-16 p-4 justify-center whitespace-nowrap'>
<Link href="/add-school-form">Add School </Link>|
<Link href="/school-list">School List</Link>|
<Link href="/add-user-form">Add User </Link>|
<Link href="/upload-user">Upload User </Link>|
<Link href="/user-list">User List </Link>|
<button onClick={() => signOut()}>Sign out</button>
<div className='flex flex-row p-2 justify-center whitespace-nowrap'>
<Link href="/add-school-form" className='text-grey-400 hover:bg-blue-200 rounded-lg p-2 pt-1 pb-1 ml-2 mr-2'>Add School </Link>
<Link href="/school-list" className='text-grey-400 hover:bg-blue-200 rounded-lg p-2 pt-1 pb-1 ml-2 mr-2'>School List</Link>
<Link href="/add-user-form" className='text-grey-400 hover:bg-blue-200 rounded-lg p-2 pt-1 pb-1 ml-2 mr-2'>Add User </Link>
<Link href="/upload-user" className='text-grey-400 hover:bg-blue-200 rounded-lg p-2 pt-1 pb-1 ml-2 mr-2'>Upload User </Link>
<Link href="/user-list" className='text-grey-400 hover:bg-blue-200 rounded-lg p-2 pt-1 pb-1 ml-2 mr-2'> User List </Link>
<Link href="#" className='text-grey-400 hover:bg-blue-200 rounded-lg p-2 pt-1 pb-1 ml-2 mr-2' onClick={() => signOut()}>Sign out</Link>
</div>
</div>

91
src/pages/api/listUsers copy.js Normal file
View File

@ -0,0 +1,91 @@
import csv from 'csv-parser';
import fs from 'fs';
import sqlite3 from 'sqlite3';
export default function handler(req,res) {
console.log(req.body.school)
// const {
// query: { name, keyword },
// method,
// } = req;
// console.log(name, keyword, method);
const DB_NAME = 'data/appUser.db';
const TABLE_NAME = 'user';
// Open a connection to the SQLite database
const db = new sqlite3.Database(DB_NAME);
const query = `SELECT * FROM ${TABLE_NAME}`;
function getAllRows(tableName) {
return new Promise((resolve, reject) => {
db.get(`SELECT COUNT(*) AS count FROM ${tableName}`, (err, row) => {
if (err) {
console.error(err.message);
return;
}
// Access the row count
const rowCount = row.count;
// console.log(`Row count: ${rowCount}`);
const pageNo=0;
const perPage=5;
let noOfPage= Math.floor(rowCount/perPage); if((rowCount % perPage) !=0) noOfPage++;
console.log(`noOfPage: ${noOfPage}`);
const offset=(rowCount-5*perPage*pageNo)-1;
const sql = `SELECT * FROM ${tableName} ORDER BY id DESC LIMIT 5 OFFSET ${rowCount-1}`;
db.all(sql, [], (err, rows) => {
if (err) {
reject(err);
return;
}
const data = rows;
resolve(data);
});
});
});
};
async function doSomething() {
try {
const returnData = await getAllRows('user');
res.setHeader('Content-Type', 'application/json')
res.status(200).json(returnData)
// console.log(data);
} catch (err) {
console.error(err);
}
}
doSomething();
// const returnData = getAllRows('user');
// console.log(getAllRows('user'));
// const returnData= db.run('SELECT * FROM user');
// fs.createReadStream('data/user.csv')
// .pipe(csv())
// .on('data', (data) => {
// const values = Object.values(data);
// const placeholders = values.map(() => '?').join(',');
// const sql = `INSERT INTO ${TABLE_NAME} (${Object.keys(data).join(',')}) VALUES (${placeholders})`;
// db.run(sql, values, (err) => {
// if (err) {
// console.error(err);
// }
// });
// })
// .on('end', () => {
// console.log(`Data inserted successfully into table ${TABLE_NAME}`);
// // Close the database connection
// db.close();
// });
}

26
src/pages/api/listUsers.js
View File

@ -19,22 +19,40 @@ console.log(req.body.school)
const query = `SELECT * FROM ${TABLE_NAME}`;
function getAllRows(tableName) {
function getAllRows(tableName, pageNumber, pageSize) {
const offset = (pageNumber - 1) * pageSize;
const sql = `SELECT * FROM ${tableName} LIMIT ${pageSize} OFFSET ${offset}`;
return new Promise((resolve, reject) => {
const sql = `SELECT * FROM ${tableName}`;
db.all(sql, [], (err, rows) => {
if (err) {
reject(err);
return;
}
const data = rows;
db.get(`SELECT COUNT(*) AS count FROM ${tableName}`, (err, row) => {
if (err) {
console.error(err.message);
return;
}
// Access the row count
const rowCount = row.count;
console.log(`Row count: ${rowCount}`);
const maxPageNumber = Math.ceil(rowCount / pageSize);
const pages = Array.from({ length: maxPageNumber }, (_, index) => index + 1);
let tData={data:rows,maxPageNumber:pages}
const data = tData;
resolve(data);
});
// let tData={data:rows,page:7}
// const data = tData;
// resolve(data);
});
});
};
async function doSomething() {
try {
const returnData = await getAllRows('user');
const returnData = await getAllRows('user',4,10);
res.setHeader('Content-Type', 'application/json')
res.status(200).json(returnData)
// console.log(data);

40
src/pages/user-list.jsx
View File

@ -3,11 +3,13 @@ import Link from 'next/link'
import NavBar from '../components/NavBar'
export default function Modal() {
const [user, setUser] = useState([]);
const [maxPageNumber, setMaxPageNumber] = useState([]);
const fetchData = async () => {
const response = await fetch("/api/listUsers");
const data = await response.json();
// console.log(data)
return setUser(data);
console.log(data)
setMaxPageNumber(data.maxPageNumber);
return setUser(data.data);
}
// console.log(user)
@ -21,6 +23,28 @@ const fetchData = async () => {
<NavBar />
<section className='container mx-auto px-4 mt-16'>
<div className="flex flex-row justify-end bg-[#FFF6F2] p-2 gap-x-4 border-x-2 border-t-2 rounded-t-xl">
<nav aria-label="Page navigation example">
<ul class="inline-flex items-center -space-x-px">
<li>
<a href="#" class="block px-3 py-2 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700 ">
<span class="sr-only">Previous</span>
<svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
</a>
</li>
{maxPageNumber.map((number) => (
<li key={number}> <Link href={{ pathname: '/user-list', query: { page: number } }} class="px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 ">{number}</Link> </li>
))}
<li>
<a href="?page=6" class="block px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-100 hover:text-gray-700 ">
<span class="sr-only">Next</span>
<svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
</a>
</li>
</ul>
</nav>
<div className="flex flex-row justify-center place-items-center">
<input type="text" className="md:w-32 md:focus:w-96 duration-[1s] border-2 border-[#FE4501] w-full rounded-l-full p-2 focus:outline-none focus:border-[#F2B705] bg-[#FFF6F2] focus:bg-white text-center" placeholder="Search User" />
<a href="" className="bg-[#FE4501] rounded-r-full p-2 px-4 border-2 border-[#FE4501] text-white font-bold ">
@ -36,12 +60,12 @@ const fetchData = async () => {
<table className=" text-center border-2 p-2 w-full">
<thead className=''>
<tr className='bg-[#FFF6F2] text-[#1D1D1D] text-xl whitespace-nowrap'>
<th className="border-x-2 p-4">ID</th>
<th className="border-x-2 p-4">Name</th>
<th className="border-x-2 p-4">Mobile</th>
<th className="border-x-2 p-4">Email</th>
<th className="border-x-2 p-4">School Name</th>
<th className="border-x-2 p-4">School ID</th>
<th className="border-x-2 p-4">User Type</th>
<th className="border-x-2 p-4">Start Date</th>
<th className="border-x-2 p-4">End Date</th>
<th className="border-x-2 p-4">Action</th>
</tr>
@ -50,12 +74,12 @@ const fetchData = async () => {
{user.map
(data=>
<tr key={data.id} className="border-b-2 whitespace-normal text-left">
<td className="border-x-2 p-2 text-center">{data.id}</td>
<td className="border-x-2 p-2 text-center">{data.uname}</td>
<td className="border-x-2 p-2 text-center">{data.phone}</td>
<td className="border-x-2 p-2 text-center">{data.email}</td>
<td className="border-x-2 p-2 text-center">{data.school}</td>
<td className="border-x-2 p-2 text-center">{data.type}</td>
<td className="border-x-2 p-2 text-center">{data.start_date}</td>
<td className="border-x-2 p-2 text-center">{data.end_date}</td>
<td>
<div className="flex flex-row justify-center place-items-center">
@ -65,12 +89,6 @@ const fetchData = async () => {
{/* <p className="text-[16px] text-green-800">Edit</p> */}
</a>
</div>
<div className="flex justify-center">
<button className=" text-white px-2 py-1 rounded-md">
<svg width="35px" height="35px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#991b1b"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M10 12V17" stroke="#991b1b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M14 12V17" stroke="#991b1b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M4 7H20" stroke="#991b1b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M6 10V18C6 19.6569 7.34315 21 9 21H15C16.6569 21 18 19.6569 18 18V10" stroke="#991b1b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M9 5C9 3.89543 9.89543 3 11 3H13C14.1046 3 15 3.89543 15 5V7H9V5Z" stroke="#991b1b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
{/* <p className="text-[16px] text-red-800">Delete</p> */}
</button>
</div>
</div>
</td>
</tr>