mediahub-fe/components/table/task-plan/expand-list-view.tsx

"use client";
import { Button } from "@/components/ui/button";
import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { close, loading } from "@/config/swal";
import { Link } from "@/i18n/routing";
import {
  getPlanningDailyByTypeId,
  getPlanningPagination,
} from "@/service/agenda-setting/agenda-setting";
import { htmlToString, textEllipsis } from "@/utils/globals";
import { MoreVertical } from "lucide-react";
import { useEffect, useState } from "react";

export default function ExpandedData(props: { datas: any }) {
  const { datas } = props;
  const [isOpen, setIsOpen] = useState("");
  const [getData, setGetData] = useState<any>();

  const handleIsOpen = (id: string) => {
    setIsOpen(id);
  };

  useEffect(() => {
    if (isOpen !== "") {
      fetchData();
    }
  }, [isOpen]);

  async function fetchData() {
    loading();
    const response = await getPlanningPagination(0, "", 10, 1, 1, isOpen);

    close();
    setupData(response?.data?.data);
  }

  function setupData(rawData: any) {
    if (rawData != undefined) {
      const dataContent = rawData?.content;
      const data = [];

      for (const [i, element] of dataContent.entries()) {
        element.no = i + 1;
        data.push(element);
      }

      setGetData(data);
    }
  }
  return (
    <table>
      <tr>
        <th className="text-left">Judul Perencanaan</th>
        <th>Batas Waktu</th>
        <th>Status</th>
        <th>Aksi</th>
      </tr>
      {datas?.map((data: any) => (
        <>
          <tr key={data.id}>
            <th className="text-left font-normal text-sm">
              <a onClick={() => handleIsOpen(data.id)}>{data.title}</a>
            </th>
            <th
              className="font-normal text-sm"
              onClick={() =>
                `disinni igninn membuat state untuk mennyimpan data isOpen`
              }
            >
              {data.date}
            </th>
            <th className="font-normal text-sm">{data.status}</th>
            <th className="flex justify-center text-sm">
              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <Button
                    size="icon"
                    className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
                  >
                    <MoreVertical className="h-4 w-4 text-default-800" />
                  </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent className="p-0" align="end">
                  <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
                    <Link
                      href={`/curator/task-plan/mediahub/create-daily/detail/${data.id}`}
                    >
                      Detail
                    </Link>
                  </DropdownMenuItem>
                  <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
                    <Link
                      href={`/curator/task-plan/mediahub/create-daily/edit/${data.id}`}
                    >
                      Edit
                    </Link>
                  </DropdownMenuItem>
                  <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
                    <a className="text-red-600">Delete</a>
                  </DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            </th>
          </tr>
          <Collapsible
            open={isOpen === data.id}
            onOpenChange={() => handleIsOpen(data.id)}
          >
            <CollapsibleContent className="space-y-2 w-full text-xs">
              <tr className="space-x-2">
                <th className="px-3">No</th>
                <th className="text-left">Judul Perencanaan</th>
                <th className="text-left px-3">Nama Pembuat</th>
                <th className="text-left px-3">Batas Waktu</th>
                <th className="text-left px-3">Status</th>
                <th>Aksi</th>
              </tr>
              {getData?.map((row: any) => (
                <tr key={row.id}>
                  <td className="px-3">{row.no}</td>
                  <td>{row.title}</td>
                  <td className="text-left px-3">{row.createdByName}</td>
                  <td className="text-left px-3">{row.date}</td>
                  <td className="text-left px-3">{row.status}</td>
                  <td className="flex justify-center text-sm">
                    <DropdownMenu>
                      <DropdownMenuTrigger asChild>
                        <Button
                          size="icon"
                          className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
                        >
                          <MoreVertical className="h-4 w-4 text-default-800" />
                        </Button>
                      </DropdownMenuTrigger>
                      <DropdownMenuContent className="p-0" align="end">
                        <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
                          <Link
                            href={`/curator/task-plan/mediahub/create-weekly/detail/${data.id}`}
                          >
                            Detail
                          </Link>
                        </DropdownMenuItem>
                        <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
                          <Link
                            href={`/curator/task-plan/mediahub/create-weekly/edit/${data.id}`}
                          >
                            Edit
                          </Link>
                        </DropdownMenuItem>
                        <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
                          <a className="text-red-600">Delete</a>
                        </DropdownMenuItem>
                      </DropdownMenuContent>
                    </DropdownMenu>
                  </td>
                </tr>
              ))}
            </CollapsibleContent>
          </Collapsible>
        </>
      ))}
    </table>
  );
}