เพิ่มข้อมูลทดสอบ ปรับการทำงาน Pagination และเพิ่มปุ่มสลับธีม

2025-04-14 04:39:22 +07:00 · 2025-04-14 04:39:22 +07:00 · 8aaca9dcab
commit 8aaca9dcab
parent 56290b6745
5 changed files with 368 additions and 32 deletions
--- a/src/App.jsx
+++ b/src/App.jsx
@ -14,7 +14,7 @@ function App() {
    const [employee, setEmployee] = useState(null);
    const [searchTerm, setSearchTerm] = useState('');
    const [page, setPage] = useState(1);
-    const [limit, setLimit] = useState(2);
+    const [limit, setLimit] = useState(5);
    const [totalPage, setTotalPage] = useState(1);
    const [allEmployeeData, setAllEmployeeData] = useState([]);

@ -86,8 +86,7 @@ function App() {
    }

    // เมื่อกดปุ่มเปลี่ยนหน้า
-    const handlePageChange = (value)=>{
-        console.log(value);
+    const handlePageChange = (value, index, paginationArray)=>{
        if(value === "&laquo"){
            setPage(1);
        }
@ -105,7 +104,9 @@ function App() {
            setPage(totalPage);
        }
        else if(value === "..."){
-            if(page < totalPage){
+            // หาว่าหน้าปัจจุบันอยู่ตรง index ไหนใน paginationArray เปรียบเทียบกับ index ของ "..." ที่กด
+            const currentIndex = paginationArray.findIndex(p => p === page);
+            if(index > currentIndex){
                setPage(page + 1);
            }
            else{
--- a/src/api/employee.js
+++ b/src/api/employee.js
@ -1,4 +1,4 @@
-const  employees = [
+const employees = [
    {
        id: 1,
        name: "Cy Ganderton",
@ -22,8 +22,312 @@ const  employees = [
        job: "Tax Accountant",
        department: "Desktop Support Department",
        active: false
+    },
+    {
+        id: 4,
+        name: "Grace Lee",
+        mail: "grace.lee@example.com",
+        job: "Software Engineer",
+        department: "Data Analysis Department",
+        active: false
+    },
+    {
+        id: 5,
+        name: "Frank Miller",
+        mail: "frank.miller@example.com",
+        job: "Project Manager",
+        department: "Data Analysis Department",
+        active: true
+    },
+    {
+        id: 6,
+        name: "Alice Johnson",
+        mail: "alice.johnson@company.com",
+        job: "HR Specialist",
+        department: "HR Department",
+        active: false
+    },
+    {
+        id: 7,
+        name: "Charlie Davis",
+        mail: "charlie.davis@business.com",
+        job: "Software Engineer",
+        department: "Data Analysis Department",
+        active: true
+    },
+    {
+        id: 8,
+        name: "Emily Wilson",
+        mail: "emily.wilson@company.com",
+        job: "Marketing Coordinator",
+        department: "Marketing Department",
+        active: false
+    },
+    {
+        id: 9,
+        name: "Henry Clark",
+        mail: "henry.clark@business.com",
+        job: "HR Specialist",
+        department: "HR Department",
+        active: true
+    },
+    {
+        id: 10,
+        name: "Ivy Lewis",
+        mail: "ivy.lewis@example.com",
+        job: "Software Engineer",
+        department: "Engineering Department",
+        active: false
+    },
+    {
+        id: 11,
+        name: "John Doe",
+        mail: "john.doe@company.com",
+        job: "Marketing Coordinator",
+        department: "Marketing Department",
+        active: true
+    },
+    {
+        id: 12,
+        name: "Jane Smith",
+        mail: "jane.smith@business.com",
+        job: "Data Analyst",
+        department: "Data Analysis Department",
+        active: false
+    },
+    {
+        id: 13,
+        name: "Alice Johnson",
+        mail: "alice.johnson@example.com",
+        job: "Project Manager",
+        department: "Project Management Department",
+        active: true
+    },
+    {
+        id: 14,
+        name: "Bob Brown",
+        mail: "bob.brown@company.com",
+        job: "HR Specialist",
+        department: "HR Department",
+        active: false
+    },
+    {
+        id: 15,
+        name: "Charlie Davis",
+        mail: "charlie.davis@business.com",
+        job: "Software Engineer",
+        department: "Data Analysis Department",
+        active: true
+    },
+    {
+        id: 16,
+        name: "Emily Wilson",
+        mail: "emily.wilson@company.com",
+        job: "Marketing Coordinator",
+        department: "Marketing Department",
+        active: false
+    },
+    {
+        id: 17,
+        name: "Frank Miller",
+        mail: "frank.miller@business.com",
+        job: "Project Manager",
+        department: "Project Management Department",
+        active: true
+    },
+    {
+        id: 18,
+        name: "Grace Lee",
+        mail: "grace.lee@example.com",
+        job: "Data Analyst",
+        department: "Data Analysis Department",
+        active: false
+    },
+    {
+        id: 19,
+        name: "Henry Clark",
+        mail: "henry.clark@company.com",
+        job: "Software Engineer",
+        department: "Engineering Department",
+        active: true
+    },
+    {
+        id: 20,
+        name: "Ivy Lewis",
+        mail: "ivy.lewis@business.com",
+        job: "HR Specialist",
+        department: "HR Department",
+        active: false
+    },
+    {
+        id: 21,
+        name: "John Doe",
+        mail: "john.doe@example.com",
+        job: "Marketing Coordinator",
+        department: "Marketing Department",
+        active: true
+    },
+    {
+        id: 22,
+        name: "Jane Smith",
+        mail: "jane.smith@company.com",
+        job: "Data Analyst",
+        department: "Data Analysis Department",
+        active: false
+    },
+    {
+        id: 23,
+        name: "Alice Johnson",
+        mail: "alice.johnson@business.com",
+        job: "Project Manager",
+        department: "Project Management Department",
+        active: true
+    },
+    {
+        id: 24,
+        name: "Bob Brown",
+        mail: "bob.brown@example.com",
+        job: "HR Specialist",
+        department: "HR Department",
+        active: false
+    },
+    {
+        id: 25,
+        name: "Charlie Davis",
+        mail: "charlie.davis@company.com",
+        job: "Software Engineer",
+        department: "Data Analysis Department",
+        active: true
+    },
+    {
+        id: 26,
+        name: "Emily Wilson",
+        mail: "emily.wilson@business.com",
+        job: "Marketing Coordinator",
+        department: "Marketing Department",
+        active: false
+    },
+    {
+        id: 27,
+        name: "Frank Miller",
+        mail: "frank.miller@company.com",
+        job: "Project Manager",
+        department: "Project Management Department",
+        active: true
+    },
+    {
+        id: 28,
+        name: "Grace Lee",
+        mail: "grace.lee@business.com",
+        job: "Data Analyst",
+        department: "Data Analysis Department",
+        active: false
+    },
+    {
+        id: 29,
+        name: "Henry Clark",
+        mail: "henry.clark@example.com",
+        job: "Software Engineer",
+        department: "Engineering Department",
+        active: true
+    },
+    {
+        id: 30,
+        name: "Ivy Lewis",
+        mail: "ivy.lewis@company.com",
+        job: "HR Specialist",
+        department: "HR Department",
+        active: false
+    },
+    {
+        id: 31,
+        name: "John Doe",
+        mail: "john.doe@business.com",
+        job: "Marketing Coordinator",
+        department: "Marketing Department",
+        active: true
+    },
+    {
+        id: 32,
+        name: "Jane Smith",
+        mail: "jane.smith@example.com",
+        job: "Data Analyst",
+        department: "Data Analysis Department",
+        active: false
+    },
+    {
+        id: 33,
+        name: "Alice Johnson",
+        mail: "alice.johnson@company.com",
+        job: "Project Manager",
+        department: "Project Management Department",
+        active: true
+    },
+    {
+        id: 34,
+        name: "Bob Brown",
+        mail: "bob.brown@business.com",
+        job: "HR Specialist",
+        department: "HR Department",
+        active: false
+    },
+    {
+        id: 35,
+        name: "Charlie Davis",
+        mail: "charlie.davis@example.com",
+        job: "Software Engineer",
+        department: "Data Analysis Department",
+        active: true
+    },
+    {
+        id: 36,
+        name: "Emily Wilson",
+        mail: "emily.wilson@company.com",
+        job: "Marketing Coordinator",
+        department: "Marketing Department",
+        active: false
+    },
+    {
+        id: 37,
+        name: "Frank Miller",
+        mail: "frank.miller@business.com",
+        job: "Project Manager",
+        department: "Project Management Department",
+        active: true
+    },
+    {
+        id: 38,
+        name: "Grace Lee",
+        mail: "grace.lee@company.com",
+        job: "Data Analyst",
+        department: "Data Analysis Department",
+        active: false
+    },
+    {
+        id: 39,
+        name: "Henry Clark",
+        mail: "henry.clark@business.com",
+        job: "Software Engineer",
+        department: "Engineering Department",
+        active: true
+    },
+    {
+        id: 40,
+        name: "Ivy Lewis",
+        mail: "ivy.lewis@example.com",
+        job: "HR Specialist",
+        department: "HR Department",
+        active: false
+    },
+    {
+        id: 41,
+        name: "John Doe",
+        mail: "john.doe@company.com",
+        job: "Marketing Coordinator",
+        department: "Marketing Department",
+        active: true
    }
-]
+];

 export const getEmployees = ()=>{
    return employees;
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@ -1,24 +1,49 @@
+import {useEffect, useState} from "react";
+
 export default function Navbar ({onOpen, setSearchTerm}){
+    // ใช้ state สำหรับเก็บ theme และให้ React จัดการ render ใหม่
+    const [theme, setTheme] = useState("light");
+
+    useEffect(() => {
+        document.documentElement.setAttribute("data-theme", theme);
+    }, [theme]);

    const handleSearch = (e) =>{
        setSearchTerm(e.target.value);
    }

+    const handleSwitchTheme = () => {
+        setTheme(prev=>(prev === "light" ? "dark" : "light"));
+    }
+
    return(<>
-        <div className="navbar bg-base-100 shadow-sm">
+        <div className="navbar bg-base-100 shadow-md px-4 md:px-8 ">
            <div className="navbar-start">
-                <a className="btn btn-ghost text-xl">CRUD APP</a>
+                <a className="btn btn-ghost text-lg hidden sm:flex md:text-2xl font-bold transition-all duration-300">CRUD APP</a>
            </div>
-            <div className="navbar-center">
+            <div className="navbar-center hidden sm:flex">
                <input
                    type="text"
                    placeholder="Search"
-                    className="input input-bordered w-48 md:w-auto"
+                    className="input input-bordered w-40 sm:w-50 md:w-70 text-black"
                    onChange={handleSearch}
                />
            </div>
-            <div className="navbar-end">
+            <div className="navbar-end gap-2">
+                {/* Mobile search (visible only on small screens) */}
+                <div className="sm:hidden">
+                    <input
+                        type="text"
+                        placeholder="Search"
+                        className="input input-bordered w-32 text-sm"
+                        onChange={handleSearch}
+                    />
+                </div>
                <a className="btn btn-primary" onClick={onOpen}>Add</a>
+                <a
+                    className="btn btn-info text-xl "
+                    onClick={handleSwitchTheme}>{theme === "dark" ? "🌞" : "🌙"}
+                </a>
            </div>
        </div>
    </>)
--- a/src/components/Pagination.jsx
+++ b/src/components/Pagination.jsx
@ -9,13 +9,14 @@ export default function Pagination({totalPage, page, limit, sibling, setPage}){
            <div className="join">
                <button className="join-item btn" onClick={() => setPage("&laquo")}>&laquo;</button>
                <button className="join-item btn" onClick={() => setPage("&lsaquo")}>&lsaquo;</button>
-                {paginationArray.map(pageNumber=> {
+                {paginationArray.map((pageNumber, index)=> {
+                    const key = `${pageNumber}-${index}`;
                    if(pageNumber === page){
                        return (
                            <button
-                                key={pageNumber}
-                                className="join-item btn active"
-                                onClick={() => setPage(pageNumber)}
+                                key={key}
+                                className="join-item btn btn-md bg-primary text-white font-bold"
+                                onClick={() => setPage(pageNumber, index, paginationArray)}
                            >{pageNumber}
                            </button>
                        )
@ -23,9 +24,9 @@ export default function Pagination({totalPage, page, limit, sibling, setPage}){
                    else{
                        return(
                            <button
-                                key={pageNumber}
+                                key={key}
                                className="join-item btn"
-                                onClick={() => setPage(pageNumber)}
+                                onClick={() => setPage(pageNumber, index, paginationArray)}
                            >{pageNumber}
                            </button>
                        )
--- a/src/components/Table.jsx
+++ b/src/components/Table.jsx
@ -38,8 +38,10 @@ export default function Table({handleOpen, tableData, onDelete}){
                        <th>Job</th>
                        <th>Department</th>
                        <th>Status</th>
+                        <th className="text-center">Actions</th>
                    </tr>
                    </thead>
+
                    <tbody>
                    {/* row */}
                    {employees.map((employee)=>(
@ -55,24 +57,27 @@ export default function Table({handleOpen, tableData, onDelete}){
                                </button>
                            </td>
                            <td>
-                                <button
-                                    className="btn btn-secondary"
-                                    onClick={()=>{handleOpen('edit',employee)}}
-                                >
-                                    Update
-                                </button>
-                            </td>
-                            <td>
-                                <button
-                                    className="btn btn-accent"
-                                    onClick={()=>handleDelete(employee.id)}
-                                >
-                                    Delete
-                                </button>
+                                <div className="flex justify-center gap-2">
+                                    {/* ปุ่ม Update พร้อมไอคอน */}
+                                    <button
+                                        className="btn btn-xs btn-accent flex items-center gap-1"
+                                        onClick={() => handleOpen('edit', employee)}
+                                        title="Update Employee"
+                                    >
+                                        ✏️
+                                    </button>
+                                    {/* ปุ่ม Delete แบบไอคอน */}
+                                    <button
+                                        className="btn btn-xs btn-secondary flex items-center gap-1"
+                                        onClick={() => handleDelete(employee.id)}
+                                        title="Delete Employee"
+                                    >
+                                        🗑️
+                                    </button>
+                                </div>
                            </td>
                        </tr>
                    ))}
-
                    </tbody>
                </table>
            </div>