88 lines
2.9 KiB
TypeScript
88 lines
2.9 KiB
TypeScript
"use client";
|
|
|
|
import { deleteVorlageFlaechendruck } from "./action";
|
|
|
|
export default function Table({
|
|
data,
|
|
}: {
|
|
data: {
|
|
id: number;
|
|
printer: string;
|
|
product_type: string;
|
|
height: number;
|
|
width: number;
|
|
coordinates: {
|
|
x: number;
|
|
y: number;
|
|
rotation: number;
|
|
}[];
|
|
}[];
|
|
}) {
|
|
async function onDelete(id: number) {
|
|
try {
|
|
await deleteVorlageFlaechendruck(id);
|
|
|
|
window.location.reload();
|
|
} catch (error) {
|
|
console.error(error);
|
|
alert("An error occurred while deleting the item.");
|
|
}
|
|
}
|
|
return (
|
|
<div className="p-6 bg-gray-50 min-h-screen">
|
|
<div className="overflow-x-auto">
|
|
<table className="table-auto border-collapse border border-gray-300 w-full bg-white shadow-md rounded-lg">
|
|
<thead>
|
|
<tr className="bg-gray-100 text-gray-700">
|
|
<th className="border border-gray-300 px-4 py-2">Printer</th>
|
|
<th className="border border-gray-300 px-4 py-2">Product Type</th>
|
|
<th className="border border-gray-300 px-4 py-2">Height</th>
|
|
<th className="border border-gray-300 px-4 py-2">Width</th>
|
|
<th className="border border-gray-300 px-4 py-2">Coordinates</th>
|
|
<th className="border border-gray-300 px-4 py-2">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{data.map((item) => (
|
|
<tr
|
|
key={item.id}
|
|
className="hover:bg-gray-50 transition duration-200"
|
|
>
|
|
<td className="border border-gray-300 px-4 py-2 text-center">
|
|
{item.printer}
|
|
</td>
|
|
<td className="border border-gray-300 px-4 py-2 text-center">
|
|
{item.product_type}
|
|
</td>
|
|
<td className="border border-gray-300 px-4 py-2 text-center">
|
|
{item.height}
|
|
</td>
|
|
<td className="border border-gray-300 px-4 py-2 text-center">
|
|
{item.width}
|
|
</td>
|
|
<td className="border border-gray-300 px-4 py-2 text-center">
|
|
<ul className="list-disc list-inside">
|
|
{item.coordinates.map((coord, index) => (
|
|
<li key={index} className="text-sm text-gray-600">
|
|
X: {coord.x}, Y: {coord.y}, Rotation: {coord.rotation}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</td>
|
|
<td className="border border-gray-300 px-4 py-2 text-center">
|
|
<button
|
|
onClick={() => onDelete(item.id)}
|
|
className="bg-red-500 text-white px-3 py-1 rounded hover:bg-red-600 transition duration-200"
|
|
>
|
|
Delete
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|