create test case list table

frontend/app/projects/[projectId]/folders/[folderId]/cases/page.tsx

@@ -4,6 +4,7 @@ import Config from "@/config/config";
 const apiServer = Config.apiServer;
 import { Listbox, ListboxItem } from "@nextui-org/react";
 import { useRouter } from "next/navigation";
+import TestCaseTable from "./test-case-table";
 
 /**
  * fetch folder records
@@ -56,7 +57,7 @@ export default function Page({
 
   return (
     <>
-      <Listbox aria-label="Listbox Variants">
+      {/* <Listbox aria-label="Listbox Variants">
         {cases.map((testCase, index) => (
           <ListboxItem
             key={index}
@@ -69,7 +70,8 @@ export default function Page({
             {testCase.title}
           </ListboxItem>
         ))}
-      </Listbox>
+      </Listbox> */}
+      <TestCaseTable cases={cases}/>
     </>
   );
 }

frontend/app/projects/[projectId]/folders/[folderId]/cases/test-case-table.tsx

@@ -0,0 +1,239 @@
+import { useState, useMemo, useEffect, useCallback } from "react";
+import {
+  Table,
+  TableHeader,
+  TableColumn,
+  TableBody,
+  TableRow,
+  TableCell,
+  Button,
+  DropdownTrigger,
+  Dropdown,
+  DropdownMenu,
+  DropdownItem,
+  Selection,
+  SortDescriptor,
+} from "@nextui-org/react";
+import { Plus, MoreVertical, ChevronDown } from "lucide-react";
+
+function capitalize(str: string) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
+
+const columns = [
+  { name: "ID", uid: "id", sortable: true },
+  { name: "TITLE", uid: "title", sortable: true },
+  { name: "PRIORITY", uid: "priority", sortable: true },
+  { name: "ACTIONS", uid: "actions" },
+];
+
+const INITIAL_VISIBLE_COLUMNS = ["id", "title", "priority", "actions"];
+
+type Case = {
+  id: number;
+  title: string;
+  state: number;
+  priority: number;
+  type: number;
+  automationStatus: number;
+  description: string;
+  template: number;
+  preConditions: string;
+  expectedResults: string;
+  folderId: number;
+  createdAt: string;
+  updatedAt: string;
+};
+
+export default function TestCaseTable({ cases }) {
+  const [filterValue, setFilterValue] = useState("");
+  const [selectedKeys, setSelectedKeys] = useState<Selection>(new Set([]));
+  const [visibleColumns, setVisibleColumns] = useState<Selection>(
+    new Set(INITIAL_VISIBLE_COLUMNS)
+  );
+  const [statusFilter, setStatusFilter] = useState<Selection>("all");
+  const [sortDescriptor, setSortDescriptor] = useState<SortDescriptor>({
+    column: "id",
+    direction: "ascending",
+  });
+
+  const hasSearchFilter = Boolean(filterValue);
+
+  const headerColumns = useMemo(() => {
+    if (visibleColumns === "all") {
+      return columns;
+    }
+
+    return columns.filter((column) =>
+      Array.from(visibleColumns).includes(column.uid)
+    );
+  }, [visibleColumns]);
+
+  const filteredItems = useMemo(() => {
+    let filteredCases = [...cases];
+
+    if (hasSearchFilter) {
+      filteredCases = filteredCases.filter((itr) =>
+        itr.title.toLowerCase().includes(filterValue.toLowerCase())
+      );
+    }
+    if (statusFilter !== "all") {
+      filteredCases = filteredCases.filter((itr) =>
+        Array.from(statusFilter).includes(itr.state)
+      );
+    }
+
+    return filteredCases;
+  }, [cases, filterValue, statusFilter]);
+
+  const sortedItems = useMemo(() => {
+    return [...filteredItems].sort((a: Case, b: Case) => {
+      const first = a[sortDescriptor.column as keyof Case] as number;
+      const second = b[sortDescriptor.column as keyof Case] as number;
+      const cmp = first < second ? -1 : first > second ? 1 : 0;
+
+      return sortDescriptor.direction === "descending" ? -cmp : cmp;
+    });
+  }, [sortDescriptor, filteredItems]);
+
+  const renderCell = useCallback((testCase: Case, columnKey: Key) => {
+    const cellValue = testCase[columnKey as keyof Case];
+
+    switch (columnKey) {
+      case "id":
+        return <span>{cellValue}</span>;
+      case "title":
+        return <span>{cellValue}</span>;
+      case "actions":
+        return (
+          <div className="relative flex justify-end items-center gap-2">
+            <Dropdown className="bg-background border-1 border-default-200">
+              <DropdownTrigger>
+                <Button isIconOnly radius="full" size="sm" variant="light">
+                  <MoreVertical className="text-default-400" />
+                </Button>
+              </DropdownTrigger>
+              <DropdownMenu>
+                <DropdownItem>View</DropdownItem>
+                <DropdownItem>Edit</DropdownItem>
+                <DropdownItem>Delete</DropdownItem>
+              </DropdownMenu>
+            </Dropdown>
+          </div>
+        );
+      default:
+        return cellValue;
+    }
+  }, []);
+
+  const topContent = useMemo(() => {
+    return (
+      <div className="flex flex-col gap-4 p-5">
+        <div className="flex justify-between gap-3 items-end">
+          <div className="flex gap-3">
+            <Dropdown>
+              <DropdownTrigger className="hidden sm:flex">
+                <Button
+                  endContent={<ChevronDown className="text-small" />}
+                  size="sm"
+                  variant="flat"
+                >
+                  Columns
+                </Button>
+              </DropdownTrigger>
+              <DropdownMenu
+                disallowEmptySelection
+                aria-label="Table Columns"
+                closeOnSelect={false}
+                selectedKeys={visibleColumns}
+                selectionMode="multiple"
+                onSelectionChange={setVisibleColumns}
+              >
+                {columns.map((column) => (
+                  <DropdownItem key={column.uid} className="capitalize">
+                    {capitalize(column.name)}
+                  </DropdownItem>
+                ))}
+              </DropdownMenu>
+            </Dropdown>
+            <Button
+              className="bg-foreground text-background"
+              endContent={<Plus />}
+              size="sm"
+            >
+              Add New
+            </Button>
+          </div>
+        </div>
+      </div>
+    );
+  }, [
+    filterValue,
+    statusFilter,
+    visibleColumns,
+    cases.length,
+    hasSearchFilter,
+  ]);
+
+  const classNames = useMemo(
+    () => ({
+      wrapper: ["max-w-3xl"],
+      table: ["border-t-1"],
+      th: ["bg-transparent", "text-default-500", "border-b", "border-divider"],
+      td: [
+        // changing the rows border radius
+        // first
+        "group-data-[first=true]:first:before:rounded-none",
+        "group-data-[first=true]:last:before:rounded-none",
+        // middle
+        "group-data-[middle=true]:before:rounded-none",
+        // last
+        "group-data-[last=true]:first:before:rounded-none",
+        "group-data-[last=true]:last:before:rounded-none",
+      ],
+    }),
+    []
+  );
+
+  return (
+    <Table
+      isCompact
+      removeWrapper
+      aria-label="Tese cases table"
+      checkboxesProps={{
+        classNames: {
+          wrapper: "after:bg-foreground after:text-background text-background",
+        },
+      }}
+      classNames={classNames}
+      selectedKeys={selectedKeys}
+      selectionMode="multiple"
+      sortDescriptor={sortDescriptor}
+      topContent={topContent}
+      topContentPlacement="outside"
+      onSelectionChange={setSelectedKeys}
+      onSortChange={setSortDescriptor}
+    >
+      <TableHeader columns={headerColumns}>
+        {(column) => (
+          <TableColumn
+            key={column.uid}
+            align={column.uid === "actions" ? "center" : "start"}
+            allowsSorting={column.sortable}
+          >
+            {column.name}
+          </TableColumn>
+        )}
+      </TableHeader>
+      <TableBody emptyContent={"No cases found"} items={sortedItems}>
+        {(item) => (
+          <TableRow key={item.id}>
+            {(columnKey) => (
+              <TableCell>{renderCell(item, columnKey)}</TableCell>
+            )}
+          </TableRow>
+        )}
+      </TableBody>
+    </Table>
+  );
+}