PrintAuftrag-Portfolio/frontend/app/dashboard/vorlagenRollendruck/page.tsx

"use client";

import { useEffect, useState } from "react";
import { Ellipsis } from "lucide-react"
import { getTableData, deleteVorlageRollendruck, getTableDataDupli, deleteDupliEntry } from "./action";
import {
    Table,
    TableBody,
    TableCaption,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from "@/components/ui/table"
import { Button } from "@/components/ui/button"

import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import {
    AlertDialog,
    AlertDialogAction,
    AlertDialogCancel,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogTitle,
    AlertDialogTrigger,
} from "@/components/ui/alert-dialog"

import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
} from "@/components/ui/dialog"

import AddDialog from "./components/addDialog";
import AlterDialog from "./components/alterDialog";
import AddDialogDupli from "./components/addDialogDupli";

type TableData = {
    id: number;
    printer: string;
    height: number;
    width: number;
    articleTypes: string;
};
export default function Page() {
    const [data, setData] = useState<TableData[]>([]);
    const [dupliData, setDupliData] = useState<{ id: number; product_type: string }[]>([]);
    useEffect(() => {
        async function fetchData() {
            try {
                const result = await getTableData();
                setData(result || []);
                const dupliResult = await getTableDataDupli();
                setDupliData(Array.isArray(dupliResult) ? dupliResult : []);
            } catch (error) {
                console.error("Fehler beim Laden der Daten:", error);
            }
        }
        fetchData();
    }, []);

    const handleNewEntry = async () => {
        try {
            const result = await getTableData(); // Daten erneut abrufen
            setData(result); // Tabelle aktualisieren
        } catch (error) {
            console.error("Fehler beim Aktualisieren der Daten:", error);
        }
    };

    const handleNewEntry2 = async () => {
        try {
            const result = await getTableDataDupli(); // Daten erneut abrufen
            setDupliData(result) // Tabelle aktualisieren
        } catch (error) {
            console.error("Fehler beim Aktualisieren der Daten:", error);
        }
    };

    const deleteEntry = async (id: number) => {
        try {
            await deleteVorlageRollendruck(id);
            await handleNewEntry();
        }
        catch (error) {
            console.error("Fehler beim Löschen der Daten:", error);
        }
    };

    const deleteEntryDupli = async (id: number) => {
        try {
            await deleteDupliEntry(id);
            await handleNewEntry2();
        }
        catch (error) {
            console.error("Fehler beim Löschen der Daten:", error);
        }
    }


    return (
        <div className="min-h-screen bg-gray-50 p-6">
            <div className="flex w-full max-w-6xl mx-auto gap-2">
                <div className="w-1/3 flex-shrink-0">
                    <Table className="bg-white shadow-md border border-gray-300">
                        <TableCaption>Artikel für Duplizierung</TableCaption>
                        <TableHeader>
                            <TableRow>
                                <TableHead className="w-[100px]">Artikel Typ</TableHead>
                                <TableHead className="text-right">
                                    <AddDialogDupli onNewEntry={handleNewEntry2} />
                                </TableHead>
                            </TableRow>
                        </TableHeader>
                        <TableBody>
                            {dupliData.map((item) => (
                                <TableRow key={item.id}>
                                    <TableCell>{item.product_type}</TableCell>
                                    <TableCell className="text-right">
                                        <Button onClick={() => {
                                            deleteEntryDupli(item.id); // Eintrag löschen
                                        }} variant={"outline"} className="border-red-700 text-red-700 h-6">Entfernen</Button>
                                    </TableCell>
                                </TableRow>
                            ))}
                        </TableBody>
                    </Table>
                </div>

                <div className="flex-1">
                    <Table className="bg-white shadow-md border border-gray-300">
                        <TableCaption>Vorlagen Rollendruck</TableCaption>
                        <TableHeader>
                            <TableRow>
                                <TableHead className="w-[100px]">Drucker</TableHead>
                                <TableHead>Höhe</TableHead>
                                <TableHead>Breite</TableHead>
                                <TableHead>Artikel Typen</TableHead>
                                <TableHead className="text-right">
                                    <AddDialog onNewEntry={handleNewEntry} />
                                </TableHead>
                            </TableRow>
                        </TableHeader>
                        <TableBody>
                            {data.map((item) => (
                                <TableRow key={item.id}>
                                    <TableCell>{item.printer}</TableCell>
                                    <TableCell>{item.height}</TableCell>
                                    <TableCell>{item.width}</TableCell>
                                    <TableCell>
                                        <Dialog>
                                            <DialogTrigger asChild>
                                                <Button variant="outline">Anzeigen</Button>
                                            </DialogTrigger>
                                            <DialogContent>
                                                <DialogHeader>
                                                    <DialogTitle>Artikel Typen</DialogTitle>
                                                    <DialogDescription>
                                                        Hier sind die Artikel Typen gelistet, die von der Vorlage unterstützt werden.
                                                    </DialogDescription>
                                                </DialogHeader>
                                                {item.articleTypes}
                                            </DialogContent>
                                        </Dialog>
                                    </TableCell>
                                    <TableCell className="text-right">
                                        <DropdownMenu>
                                            <DropdownMenuTrigger asChild>
                                                <Button variant="ghost" size="icon">
                                                    <Ellipsis />
                                                </Button>
                                            </DropdownMenuTrigger>
                                            <DropdownMenuContent align="end">
                                                <AlterDialog onNewEntry={handleNewEntry} data={item} />
                                                <DropdownMenuSeparator />
                                                <DropdownMenuItem variant="destructive">
                                                    <AlertDialog>
                                                        <AlertDialogTrigger
                                                            onClick={(event) => {
                                                                event.stopPropagation(); // Verhindert das Schließen des Dropdown-Menüs
                                                            }}
                                                        >
                                                            Eintrag Löschen
                                                        </AlertDialogTrigger>
                                                        <AlertDialogContent>
                                                            <AlertDialogHeader>
                                                                <AlertDialogTitle>Sind Sie sich sicher?</AlertDialogTitle>
                                                                <AlertDialogDescription>
                                                                    Diese Aktion ist permanent und kann nicht rückgängig gemacht werden.
                                                                </AlertDialogDescription>
                                                            </AlertDialogHeader>
                                                            <AlertDialogFooter>
                                                                <AlertDialogCancel>Abbrechen</AlertDialogCancel>
                                                                <AlertDialogAction
                                                                    onClick={() => {
                                                                        deleteEntry(item.id); // Eintrag löschen
                                                                    }}
                                                                >
                                                                    Löschen
                                                                </AlertDialogAction>
                                                            </AlertDialogFooter>
                                                        </AlertDialogContent>
                                                    </AlertDialog>
                                                </DropdownMenuItem>
                                            </DropdownMenuContent>
                                        </DropdownMenu>
                                    </TableCell>
                                </TableRow>
                            ))}
                        </TableBody>
                    </Table>
                </div>
            </div>
        </div>
    );
}