93 lines
3.7 KiB
JavaScript
93 lines
3.7 KiB
JavaScript
import ConfirmModal from './ConfirmModal';
|
||
import {useState} from "react";
|
||
import {showToast} from "../utils/appUtils.js"
|
||
|
||
export default function Table({handleOpen, tableData, onDelete}){
|
||
|
||
const [showConfirm, setShowConfirm] = useState(false);
|
||
const [selectedId, setSelectedId] = useState(null);
|
||
|
||
const confirmDelete = () => {
|
||
setShowConfirm(false);
|
||
onDelete(selectedId);
|
||
showToast("ลบข้อมูลเรียบร้อยแล้ว", "success");
|
||
};
|
||
|
||
const cancelDelete = () => {
|
||
setShowConfirm(false);
|
||
showToast("ยกเลิกการลบ", "info");
|
||
};
|
||
|
||
const employees = tableData;
|
||
|
||
const handleDelete = (id)=>{
|
||
setSelectedId(id);
|
||
setShowConfirm(true);
|
||
}
|
||
|
||
return(
|
||
<>
|
||
<div className="overflow-x-auto mt-5">
|
||
<table className="table">
|
||
{/* head */}
|
||
<thead>
|
||
<tr>
|
||
<th>Id</th>
|
||
<th>Name</th>
|
||
<th>Email</th>
|
||
<th>Job</th>
|
||
<th>Department</th>
|
||
<th>Status</th>
|
||
<th className="text-center">Actions</th>
|
||
</tr>
|
||
</thead>
|
||
|
||
<tbody>
|
||
{/* row */}
|
||
{employees.map((employee)=>(
|
||
<tr className="hover:bg-base-300" key={employee.id}>
|
||
<td>{employee.id}</td>
|
||
<td>{employee.name}</td>
|
||
<td>{employee.mail}</td>
|
||
<td>{employee.job}</td>
|
||
<td>{employee.department}</td>
|
||
<td>
|
||
<button className={`btn rounded-full w-20 ${employee.active ? `btn-primary`: `btn-outline btn-primary`}`}>
|
||
{employee.active ? 'Active' : 'Inactive'}
|
||
</button>
|
||
</td>
|
||
<td>
|
||
<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>
|
||
{/* Confirm Dialog */}
|
||
<ConfirmModal
|
||
message="คุณแน่ใจหรือไม่ว่าต้องการลบข้อมูลนี้?"
|
||
isOpen={showConfirm}
|
||
onConfirm={confirmDelete}
|
||
onCancel={cancelDelete}
|
||
/>
|
||
</>
|
||
)
|
||
} |