create test case list table

2024-02-24 21:19:22 +09:00
parent c93262f89d
commit b09fef7b2c
6 changed files with 70 additions and 130 deletions
--- a/frontend/app/projects/[projectId]/folders/[folderId]/cases/page.tsx
+++ b/frontend/app/projects/[projectId]/folders/[folderId]/cases/page.tsx
@@ -71,7 +71,7 @@ export default function Page({
          </ListboxItem>
        ))}
      </Listbox> */}
-      <TestCaseTable cases={cases}/>
+      <TestCaseTable projectId={params.folderId} cases={cases}/>
    </>
  );
 }
--- a/frontend/app/projects/[projectId]/folders/[folderId]/cases/test-case-table.tsx
+++ b/frontend/app/projects/[projectId]/folders/[folderId]/cases/test-case-table.tsx
@@ -1,4 +1,4 @@
-import { useState, useMemo, useEffect, useCallback } from "react";
+import { useState, useMemo, useCallback } from "react";
 import {
  Table,
  TableHeader,
@@ -7,27 +7,30 @@ import {
  TableRow,
  TableCell,
  Button,
+  Chip,
  DropdownTrigger,
  Dropdown,
  DropdownMenu,
  DropdownItem,
  Selection,
  SortDescriptor,
+  Link,
 } from "@nextui-org/react";
-import { Plus, MoreVertical, ChevronDown } from "lucide-react";
-
-function capitalize(str: string) {
-  return str.charAt(0).toUpperCase() + str.slice(1);
-}
+import { MoreVertical } from "lucide-react";

 const columns = [
  { name: "ID", uid: "id", sortable: true },
-  { name: "TITLE", uid: "title", sortable: true },
-  { name: "PRIORITY", uid: "priority", sortable: true },
-  { name: "ACTIONS", uid: "actions" },
+  { name: "Title", uid: "title", sortable: true },
+  { name: "Priority", uid: "priority", sortable: true },
+  { name: "Actions", uid: "actions" },
 ];

-const INITIAL_VISIBLE_COLUMNS = ["id", "title", "priority", "actions"];
+const priorities = [
+  { name: "Critical", uid: "critical", color: "danger" },
+  { name: "High", uid: "high", color: "warning" },
+  { name: "Medium", uid: "medium", color: "primary" },
+  { name: "Low", uid: "low", color: "success" },
+];

 type Case = {
  id: number;
@@ -45,57 +48,23 @@ type Case = {
  updatedAt: string;
 };

-export default function TestCaseTable({ cases }) {
-  const [filterValue, setFilterValue] = useState("");
+export default function TestCaseTable({ projectId, cases }) {
  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 headerColumns = columns;

  const sortedItems = useMemo(() => {
-    return [...filteredItems].sort((a: Case, b: Case) => {
+    return [...cases].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]);
-
+  }, [sortDescriptor, cases]);
  const renderCell = useCallback((testCase: Case, columnKey: Key) => {
    const cellValue = testCase[columnKey as keyof Case];

@@ -103,82 +72,49 @@ export default function TestCaseTable({ cases }) {
      case "id":
        return <span>{cellValue}</span>;
      case "title":
-        return <span>{cellValue}</span>;
+        return (
+          <Link
+            underline="hover"
+            href={`/projects/${projectId}/folders/${testCase.folderId}/cases/${testCase.id}`}
+          >
+            {cellValue}
+          </Link>
+        );
+      case "priority":
+        return (
+          <Chip
+            className="border-none gap-1 text-default-600"
+            color={priorities[cellValue].color}
+            size="sm"
+            variant="dot"
+          >
+            {priorities[cellValue].name}
+          </Chip>
+        );
      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>
+          <Dropdown>
+            <DropdownTrigger>
+              <Button isIconOnly radius="full" size="sm" variant="light">
+                <MoreVertical size={16} />
+              </Button>
+            </DropdownTrigger>
+            <DropdownMenu aria-label="test case actions">
+              <DropdownItem>Edit test case</DropdownItem>
+              <DropdownItem className="text-danger">
+                Delete test case
+              </DropdownItem>
+            </DropdownMenu>
+          </Dropdown>
        );
      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
@@ -200,17 +136,10 @@ export default function TestCaseTable({ cases }) {
      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}
    >
--- a/frontend/app/projects/[projectId]/folders/layout.tsx
+++ b/frontend/app/projects/[projectId]/folders/layout.tsx
@@ -231,7 +231,7 @@ export default function FoldersLayout({

  return (
    <div className="flex w-full">
-      <div className="w-64 min-h-screen border-r-1">
+      <div className="w-64 min-h-screen border-r-1 dark:border-neutral-700">
        <Button
          startContent={<Plus size={16} />}
          size="sm"
@@ -253,7 +253,7 @@ export default function FoldersLayout({
              startContent={<Folder size={20} color="#99ccff" fill="#99ccff" />}
              className={
                selectedFolder && folder.id === selectedFolder.id
-                  ? "bg-gray-300"
+                  ? "bg-gray-300 dark:bg-gray-700"
                  : ""
              }
              endContent={
@@ -270,9 +270,20 @@ export default function FoldersLayout({
        </Listbox>
      </div>
      <div className="flex-grow w-full">
-        <h3 className="border-b-1 w-full font-bold p-3">
-          {selectedFolder ? selectedFolder.name : "Select Folder"}
-        </h3>
+        <div className="border-b-1 dark:border-neutral-700 w-full p-3 flex items-center justify-between">
+          <h3 className="font-bold">
+            {selectedFolder ? selectedFolder.name : "Select Folder"}
+          </h3>
+          <Button
+            startContent={<Plus size={16} />}
+            size="sm"
+            color="primary"
+            isDisabled={!selectedFolder}
+            onClick={() => console.log("create")}
+          >
+            New Test Case
+          </Button>
+        </div>
        {children}
      </div>

--- a/frontend/app/projects/[projectId]/layout.tsx
+++ b/frontend/app/projects/[projectId]/layout.tsx
@@ -7,10 +7,10 @@ export default function SidebarLayout({
 }) {
  return (
    <>
-      <div className="flex border-t-1 min-h-screen">
+      <div className="flex border-t-1 dark:border-neutral-700 min-h-screen">
        <Sidebar />
        <div className="flex w-full">
-          <div className="flex-grow bg-white rounded-lg">{children}</div>
+          <div className="flex-grow">{children}</div>
        </div>
      </div>
    </>
--- a/frontend/app/projects/[projectId]/sidebar.tsx
+++ b/frontend/app/projects/[projectId]/sidebar.tsx
@@ -8,7 +8,7 @@ export default function Sidebar() {
  const { projectId } = useGetCurrentIds();
  const router = useRouter();
  return (
-    <div className="w-64 bg-white border-r-1">
+    <div className="w-64 border-r-1 dark:border-neutral-700">
      <Menu aria-label="sidebar">
        <MenuItem
          startContent={<LayoutDashboard strokeWidth={1} size={28} />}
--- a/frontend/app/projects/project-card.tsx
+++ b/frontend/app/projects/project-card.tsx
@@ -19,7 +19,7 @@ export function ProjectCard({ project, onEditClick, onDeleteClick }) {
      <CardHeader className="flex gap-3 h-[50px] justify-between text-ellipsis overflow-hidden">
        <div className="flex gap-5">
          <div className="flex flex-col gap-1 items-start justify-center">
-            <Link href={`/projects/${project.id}/dashboard`}>{project.name}</Link>
+            <Link underline="hover" href={`/projects/${project.id}/dashboard`}>{project.name}</Link>
          </div>
        </div>
        <Dropdown>