web-humas-fe/components/table/article-table.tsx

"use client";
import {
    AddIcon,
    CreateIconIon,
    DeleteIcon,
    DotsYIcon,
    EyeFilledIcon,
    EyeIcon,
    EyeIconMdi
} from "@/components/icons";
import { getListArticle } from "@/service/article";
import { Article } from "@/types/globals";
import { Button } from "@nextui-org/button";
import {
    Chip,
    ChipProps,
    Dropdown,
    DropdownItem,
    DropdownMenu,
    DropdownTrigger,
    Spinner,
    Table,
    TableBody,
    TableCell,
    TableColumn,
    TableHeader,
    TableRow,
    User
} from "@nextui-org/react";
import Link from "next/link";
import { Key, useCallback, useEffect, useState } from "react";

type UserObject = {
    id: number;
    user: string;
    status: string;
    projectName: string;
    avatar: string;
};

const statusColorMap = {
    active: "success",
    paused: "danger",
    vacation: "warning",
};


export default function ArticleTable() {
    const [article, setArticle] = useState<Article[]>([]);

    useEffect(() => {
        async function initState() {
            const res = await getListArticle();
            setArticle(res.data?.data);

            console.log("Data Aritcle", res.data.data);
        }

        initState();

    }, []);
    type TableRow = (typeof usersTable)[0];

    const columns = [

        { name: "No", uid: "no" },
        { name: "Judul", uid: "title" },
        { name: "Kategori", uid: "articleCategory" },
        { name: "Tanggal Unggah", uid: "createdDate" },
        { name: "Kreator", uid: "creator" },
        { name: "Sumber", uid: "source" },
        // { name: "Users", uid: "users" },
        { name: "Status", uid: "status" },
        { name: "Aksi", uid: "actions" },
    ];

    // const statusOptions = [
    //     { name: "Active", uid: "active" },
    //     { name: "Paused", uid: "paused" },
    //     { name: "Vacation", uid: "vacation" },
    // ];

    const usersTable = [
        {
            id: 1,
            user: "Olivia Rhya",
            status: "active",
            projectName: "Xtreme admin",
            avatar: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSa8Luglga9J2R3Bxt_PsWZISUHQWODD6_ZTAJ5mIQgxYCAE-YbkY81faTqp-hSA_jVPTs&usqp=CAU",
        },
        {
            id: 2,
            user: "Barbara Steele",
            status: "cancel",
            projectName: "Adminpro admin",
            avatar: "https://cdn.icon-icons.com/icons2/2859/PNG/512/avatar_face_man_boy_male_profile_smiley_happy_people_icon_181661.png",
        },
        {
            id: 3,
            user: "Leonardo Gordon",
            status: "pending",
            projectName: "Monster admin",
            avatar: "https://cdn.icon-icons.com/icons2/2859/PNG/512/avatar_face_man_boy_male_profile_smiley_happy_people_icon_181657.png",
        },
        {
            id: 4,
            user: "Evelyn Pope",
            status: "cancel",
            projectName: "Materialpro admin",
            avatar: "https://cdn.icon-icons.com/icons2/3708/PNG/512/man_person_people_avatar_icon_230017.png",
        },
        {
            id: 5,
            user: "Tommy Garza",
            status: "cancel",
            projectName: "Elegant admin",
            avatar: "https://cdn.icon-icons.com/icons2/1736/PNG/512/4043275-avatar-man-person-punk_113271.png",
        },


    ];

    const renderCell = useCallback(
        (article: Article, columnKey: Key) => {
            const cellValue = article[columnKey as keyof Article];
            const statusColorMap: Record<string, ChipProps["color"]> = {
                active: "primary",
                cancel: "danger",
                pending: "success",
            };

            switch (columnKey) {
                case "no":
                    return (
                        <div>{article.id}</div>
                    )

                case "status":
                    return (
                        <Chip
                            className="capitalize "
                            color={statusColorMap[article.status]}
                            size="lg"
                            variant="flat"
                        >
                            <div className="flex flex-row items-center gap-2 justify-center">
                                {cellValue}
                            </div>
                        </Chip>
                    );

                case "actions":
                    return (
                        <div className="relative flex justify-star items-center gap-2">
                            <Dropdown className="lg:min-w-[150px] bg-black text-white shadow border ">
                                <DropdownTrigger>
                                    <Button isIconOnly size="lg" variant="light">
                                        <DotsYIcon className="text-default-300" />
                                    </Button>
                                </DropdownTrigger>
                                <DropdownMenu>
                                    <DropdownItem

                                    >

                                        <Link
                                            href={`#`}
                                        >
                                            <EyeIconMdi className="inline mr-2 mb-1" />
                                            Detail
                                        </Link>

                                    </DropdownItem>
                                    <DropdownItem

                                    >

                                        <Link
                                            href={`#`}
                                        >
                                            <CreateIconIon className="inline mr-2 mb-1" />
                                            Edit
                                        </Link>

                                    </DropdownItem>
                                    <DropdownItem

                                    >

                                        <Link
                                            href={`#`}
                                        >
                                            <DeleteIcon
                                                color="red"
                                                width={20}
                                                height={16}
                                                className="inline mr-2 mb-1"
                                            />
                                            Delete
                                        </Link>

                                    </DropdownItem>

                                </DropdownMenu>
                            </Dropdown>
                        </div>
                    );

                default:
                    return cellValue;
            }
        }, []);

    return (
        <>

            <div className="mx-5 my-5">
                <div className="flex flex-col items-center rounded-2xl">
                    <Table
                        // selectionMode="multiple"
                        aria-label="micro issue table"
                        className="rounded-3xl"
                        classNames={{
                            th: "bg-white dark:bg-black text-black dark:text-white border-b-1 text-md",
                            base: "bg-white dark:bg-black border",
                            wrapper: "min-h-[50px] bg-transpararent text-black dark:text-white ",
                        }}
                    >
                        <TableHeader columns={columns}>
                            {(column) => (
                                <TableColumn key={column.uid}>{column.name}</TableColumn>
                            )}
                        </TableHeader>
                        <TableBody
                            items={article}
                            emptyContent={"No data to display."}
                            loadingContent={<Spinner label="Loading..." />}
                        >
                            {(item) => (
                                <TableRow key={item.id}>
                                    {(columnKey) => (
                                        <TableCell>{renderCell(item, columnKey)}</TableCell>
                                    )}
                                </TableRow>
                            )}
                        </TableBody>
                    </Table>
                </div>
            </div>

        </>
    );
}