yellowadmin/pp-tcms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

create test case list table

Browse Source
This commit is contained in:
Takeshi Kimata
2024-02-24 21:19:22 +09:00
parent c93262f89d
commit b09fef7b2c
6 changed files with 70 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -71,7 +71,7 @@ export default function Page({
</ListboxItem> </ListboxItem>
))} ))}
</Listbox> */} </Listbox> */}
<TestCaseTable cases={cases}/> <TestCaseTable projectId={params.folderId} cases={cases}/>
</> </>
); );
} }

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

@@ -1,4 +1,4 @@
import { useState, useMemo, useEffect, useCallback } from "react"; import { useState, useMemo, useCallback } from "react";
import { import {
Table, Table,
TableHeader, TableHeader,
@@ -7,27 +7,30 @@ import {
TableRow, TableRow,
TableCell, TableCell,
Button, Button,
Chip,
DropdownTrigger, DropdownTrigger,
Dropdown, Dropdown,
DropdownMenu, DropdownMenu,
DropdownItem, DropdownItem,
Selection, Selection,
SortDescriptor, SortDescriptor,
Link,
} from "@nextui-org/react"; } from "@nextui-org/react";
import { Plus, MoreVertical, ChevronDown } from "lucide-react"; import { MoreVertical } from "lucide-react";
function capitalize(str: string) {
return str.charAt(0).toUpperCase() + str.slice(1);
}
const columns = [ const columns = [
{ name: "ID", uid: "id", sortable: true }, { name: "ID", uid: "id", sortable: true },
{ name: "TITLE", uid: "title", sortable: true }, { name: "Title", uid: "title", sortable: true },
{ name: "PRIORITY", uid: "priority", sortable: true }, { name: "Priority", uid: "priority", sortable: true },
{ name: "ACTIONS", uid: "actions" }, { 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 = { type Case = {
id: number; id: number;
@@ -45,57 +48,23 @@ type Case = {
updatedAt: string; updatedAt: string;
}; };
export default function TestCaseTable({ cases }) { export default function TestCaseTable({ projectId, cases }) {
const [filterValue, setFilterValue] = useState("");
const [selectedKeys, setSelectedKeys] = useState<Selection>(new Set([])); 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>({ const [sortDescriptor, setSortDescriptor] = useState<SortDescriptor>({
column: "id", column: "id",
direction: "ascending", direction: "ascending",
}); });
const headerColumns = columns;
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(() => { 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 first = a[sortDescriptor.column as keyof Case] as number;
const second = b[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; const cmp = first < second ? -1 : first > second ? 1 : 0;
return sortDescriptor.direction === "descending" ? -cmp : cmp; return sortDescriptor.direction === "descending" ? -cmp : cmp;
}); });
}, [sortDescriptor, filteredItems]); }, [sortDescriptor, cases]);
const renderCell = useCallback((testCase: Case, columnKey: Key) => { const renderCell = useCallback((testCase: Case, columnKey: Key) => {
const cellValue = testCase[columnKey as keyof Case]; const cellValue = testCase[columnKey as keyof Case];
@@ -103,82 +72,49 @@ export default function TestCaseTable({ cases }) {
case "id": case "id":
return <span>{cellValue}</span>; return <span>{cellValue}</span>;
case "title": 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": case "actions":
return ( return (
<div className="relative flex justify-end items-center gap-2"> <Dropdown>
<Dropdown className="bg-background border-1 border-default-200"> <DropdownTrigger>
<DropdownTrigger> <Button isIconOnly radius="full" size="sm" variant="light">
<Button isIconOnly radius="full" size="sm" variant="light"> <MoreVertical size={16} />
<MoreVertical className="text-default-400" /> </Button>
</Button> </DropdownTrigger>
</DropdownTrigger> <DropdownMenu aria-label="test case actions">
<DropdownMenu> <DropdownItem>Edit test case</DropdownItem>
<DropdownItem>View</DropdownItem> <DropdownItem className="text-danger">
<DropdownItem>Edit</DropdownItem> Delete test case
<DropdownItem>Delete</DropdownItem> </DropdownItem>
</DropdownMenu> </DropdownMenu>
</Dropdown> </Dropdown>
</div>
); );
default: default:
return cellValue; 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( const classNames = useMemo(
() => ({ () => ({
wrapper: ["max-w-3xl"], wrapper: ["max-w-3xl"],
table: ["border-t-1"],
th: ["bg-transparent", "text-default-500", "border-b", "border-divider"], th: ["bg-transparent", "text-default-500", "border-b", "border-divider"],
td: [ td: [
// changing the rows border radius // changing the rows border radius
@@ -200,17 +136,10 @@ export default function TestCaseTable({ cases }) {
isCompact isCompact
removeWrapper removeWrapper
aria-label="Tese cases table" aria-label="Tese cases table"
checkboxesProps={{
classNames: {
wrapper: "after:bg-foreground after:text-background text-background",
},
}}
classNames={classNames} classNames={classNames}
selectedKeys={selectedKeys} selectedKeys={selectedKeys}
selectionMode="multiple" selectionMode="multiple"
sortDescriptor={sortDescriptor} sortDescriptor={sortDescriptor}
topContent={topContent}
topContentPlacement="outside"
onSelectionChange={setSelectedKeys} onSelectionChange={setSelectedKeys}
onSortChange={setSortDescriptor} onSortChange={setSortDescriptor}
> >

21
frontend/app/projects/[projectId]/folders/layout.tsx
View File

@@ -231,7 +231,7 @@ export default function FoldersLayout({
return ( return (
<div className="flex w-full"> <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 <Button
startContent={<Plus size={16} />} startContent={<Plus size={16} />}
size="sm" size="sm"
@@ -253,7 +253,7 @@ export default function FoldersLayout({
startContent={<Folder size={20} color="#99ccff" fill="#99ccff" />} startContent={<Folder size={20} color="#99ccff" fill="#99ccff" />}
className={ className={
selectedFolder && folder.id === selectedFolder.id selectedFolder && folder.id === selectedFolder.id
? "bg-gray-300" ? "bg-gray-300 dark:bg-gray-700"
: "" : ""
} }
endContent={ endContent={
@@ -270,9 +270,20 @@ export default function FoldersLayout({
</Listbox> </Listbox>
</div> </div>
<div className="flex-grow w-full"> <div className="flex-grow w-full">
<h3 className="border-b-1 w-full font-bold p-3"> <div className="border-b-1 dark:border-neutral-700 w-full p-3 flex items-center justify-between">
{selectedFolder ? selectedFolder.name : "Select Folder"} <h3 className="font-bold">
</h3> {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} {children}
</div> </div>

4
frontend/app/projects/[projectId]/layout.tsx
View File

@@ -7,10 +7,10 @@ export default function SidebarLayout({
}) { }) {
return ( return (
<> <>
<div className="flex border-t-1 min-h-screen"> <div className="flex border-t-1 dark:border-neutral-700 min-h-screen">
<Sidebar /> <Sidebar />
<div className="flex w-full"> <div className="flex w-full">
<div className="flex-grow bg-white rounded-lg">{children}</div> <div className="flex-grow">{children}</div>
</div> </div>
</div> </div>
</> </>

2
frontend/app/projects/[projectId]/sidebar.tsx
View File

@@ -8,7 +8,7 @@ export default function Sidebar() {
const { projectId } = useGetCurrentIds(); const { projectId } = useGetCurrentIds();
const router = useRouter(); const router = useRouter();
return ( 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"> <Menu aria-label="sidebar">
<MenuItem <MenuItem
startContent={<LayoutDashboard strokeWidth={1} size={28} />} startContent={<LayoutDashboard strokeWidth={1} size={28} />}

2
frontend/app/projects/project-card.tsx
View File

@@ -19,7 +19,7 @@ export function ProjectCard({ project, onEditClick, onDeleteClick }) {
<CardHeader className="flex gap-3 h-[50px] justify-between text-ellipsis overflow-hidden"> <CardHeader className="flex gap-3 h-[50px] justify-between text-ellipsis overflow-hidden">
<div className="flex gap-5"> <div className="flex gap-5">
<div className="flex flex-col gap-1 items-start justify-center"> <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>
</div> </div>
<Dropdown> <Dropdown>