@@ -144,16 +160,18 @@ export default function FoldersPane({ projectId, messages, locale }: Props) {
disableDrag={true}
>
{(props) => (
-
+
handleDrop(e, props.node.id)}>
+
+
)}
)}
diff --git a/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/CasesPane.tsx b/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/CasesPane.tsx
index b9e99c5..a20bccc 100644
--- a/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/CasesPane.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/CasesPane.tsx
@@ -1,10 +1,11 @@
'use client';
import { useState, useEffect, useContext } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
+import { addToast } from '@heroui/react';
import TestCaseTable from './TestCaseTable';
import CaseDialog from './CaseDialog';
import { TokenContext } from '@/utils/TokenProvider';
-import { fetchCases, createCase, deleteCases, exportCases } from '@/utils/caseControl';
+import { fetchCases, createCase, deleteCases, exportCases, moveCases } from '@/utils/caseControl';
import { CaseType, CasesMessages } from '@/types/case';
import DeleteConfirmDialog from '@/components/DeleteConfirmDialog';
import { PriorityMessages } from '@/types/priority';
@@ -12,6 +13,7 @@ import { TestTypeMessages } from '@/types/testType';
import { LocaleCodeType } from '@/types/locale';
import { logError } from '@/utils/errorHandler';
import { parseQueryParam } from '@/utils/parseQueryParam';
+import { onMoveEvent } from '@/utils/testCaseMoveEvent';
type Props = {
projectId: string;
@@ -96,6 +98,25 @@ export default function CasesPane({
fetchDataEffect();
}, [context, folderId, searchParams]);
+ useEffect(() => {
+ const unsubscribe = onMoveEvent(async (e) => {
+ const { testCaseIds, targetFolderId } = e.detail;
+ const moveRet = await moveCases(context.token.access_token, testCaseIds, targetFolderId, Number(projectId));
+ if (!moveRet) {
+ console.error('Error moving cases');
+ return;
+ }
+
+ setCases(cases.filter((entry) => !testCaseIds.includes(entry.id)));
+ addToast({
+ title: 'Success',
+ color: 'success',
+ description: messages.casesMoved,
+ });
+ });
+ return unsubscribe;
+ }, [cases, context.token.access_token, messages.casesMoved, projectId]);
+
const closeDialog = () => setIsCaseDialogOpen(false);
const onSubmit = async (title: string, description: string) => {
diff --git a/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/TestCaseTable.tsx b/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/TestCaseTable.tsx
index bf62b65..49ecd56 100644
--- a/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/TestCaseTable.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/TestCaseTable.tsx
@@ -1,11 +1,5 @@
-import { useState, useMemo, useCallback, ReactNode } from 'react';
+import { useState, useMemo, useCallback, ReactNode, useEffect } from 'react';
import {
- Table,
- TableHeader,
- TableColumn,
- TableBody,
- TableRow,
- TableCell,
Button,
DropdownTrigger,
Dropdown,
@@ -17,16 +11,31 @@ import {
Popover,
PopoverContent,
PopoverTrigger,
+ Checkbox,
+ Card,
+ CardBody,
} from '@heroui/react';
-import { Plus, MoreVertical, Trash, FileDown, ChevronDown, Filter, FileJson, FileSpreadsheet } from 'lucide-react';
+import {
+ Plus,
+ MoreVertical,
+ Trash,
+ FileDown,
+ ChevronUp,
+ ChevronDown,
+ Filter,
+ FileJson,
+ FileSpreadsheet,
+} from 'lucide-react';
+import { table } from '@heroui/theme';
import TestCaseFilter from './TestCaseFilter';
-import { Link } from '@/src/i18n/routing';
+import { Link, NextUiLinkClasses } from '@/src/i18n/routing';
import { CaseType, CasesMessages } from '@/types/case';
import { PriorityMessages } from '@/types/priority';
import { TestTypeMessages } from '@/types/testType';
import TestCasePriority from '@/components/TestCasePriority';
import { LocaleCodeType } from '@/types/locale';
import { highlightSearchTerm } from '@/utils/highlightSearchTerm';
+import { onMoveEvent } from '@/utils/testCaseMoveEvent';
type Props = {
projectId: string;
@@ -63,6 +72,11 @@ export default function TestCaseTable({
testTypeMessages,
locale,
}: Props) {
+ const heroUITableClasses = table();
+ const thClassNames = 'bg-transparent text-default-500 border-b border-divider';
+ const tdClassNames =
+ '!py-1 group-data-[first=true]:first:before:rounded-none group-data-[first=true]:last:before:rounded-none group-data-[middle=true]:before:rounded-none group-data-[last=true]:first:before:rounded-none group-data-[last=true]:last:before:rounded-none';
+
const headerColumns = [
{ name: messages.id, uid: 'id', sortable: true },
{ name: messages.title, uid: 'title', sortable: true },
@@ -70,30 +84,6 @@ export default function TestCaseTable({
{ name: messages.actions, uid: 'actions' },
];
- const [selectedKeys, setSelectedKeys] = useState
(new Set([]));
- const [sortDescriptor, setSortDescriptor] = useState({
- column: 'id',
- direction: 'ascending',
- });
- const [showFilter, setShowFilter] = useState(false);
-
- const sortedItems = useMemo(() => {
- if (cases.length === 0) {
- return [];
- }
- return [...cases].sort((a: CaseType, b: CaseType) => {
- const first = a[sortDescriptor.column as keyof CaseType] as number;
- const second = b[sortDescriptor.column as keyof CaseType] as number;
- const cmp = first < second ? -1 : first > second ? 1 : 0;
-
- return sortDescriptor.direction === 'descending' ? -cmp : cmp;
- });
- }, [sortDescriptor, cases]);
-
- const handleDeleteCase = (deleteCaseId: number) => {
- onDeleteCase(deleteCaseId);
- };
-
const renderCell = useCallback(
(testCase: CaseType, columnKey: string): ReactNode => {
const cellValue = testCase[columnKey as keyof CaseType];
@@ -103,19 +93,17 @@ export default function TestCaseTable({
return {cellValue as number};
case 'title':
return (
-
+
);
case 'priority':
return ;
@@ -147,6 +135,82 @@ export default function TestCaseTable({
[activeTitleFilter]
);
+ // **************************************************************************
+ // filter test case
+ // **************************************************************************
+ const [showFilter, setShowFilter] = useState(false);
+ const activeFilterNum = (activeTitleFilter ? 1 : 0) + activePriorityFilters.length + activeTypeFilters.length;
+
+ // **************************************************************************
+ // select test case
+ // **************************************************************************
+ const [selectedKeys, setSelectedKeys] = useState(new Set([]));
+ const handleSelectRow = (id: number) => {
+ setSelectedKeys((prev) => {
+ const newSet = new Set(prev);
+ if (newSet.has(id)) {
+ newSet.delete(id);
+ } else {
+ newSet.add(id);
+ }
+ return newSet;
+ });
+ };
+
+ const handleSelectAll = () => {
+ if (selectedKeys !== 'all' && selectedKeys instanceof Set && selectedKeys.size === sortedItems.length) {
+ setSelectedKeys(new Set());
+ } else {
+ setSelectedKeys(new Set(sortedItems.map((item) => item.id)));
+ }
+ };
+
+ const isSelected = (id: number) => {
+ return selectedKeys === 'all' || (selectedKeys instanceof Set && selectedKeys.has(id));
+ };
+
+ const isSelectedAll = () => {
+ return (
+ (selectedKeys === 'all' && sortedItems.length > 0) ||
+ (selectedKeys instanceof Set && selectedKeys.size === sortedItems.length && sortedItems.length > 0)
+ );
+ };
+
+ // **************************************************************************
+ // sort test case
+ // **************************************************************************
+ const [sortDescriptor, setSortDescriptor] = useState({
+ column: 'id',
+ direction: 'ascending',
+ });
+ const sortedItems = useMemo(() => {
+ if (cases.length === 0) {
+ return [];
+ }
+ return [...cases].sort((a: CaseType, b: CaseType) => {
+ const first = a[sortDescriptor.column as keyof CaseType] as number;
+ const second = b[sortDescriptor.column as keyof CaseType] as number;
+ const cmp = first < second ? -1 : first > second ? 1 : 0;
+
+ return sortDescriptor.direction === 'descending' ? -cmp : cmp;
+ });
+ }, [sortDescriptor, cases]);
+ const handleSort = (columnUid: string) => {
+ setSortDescriptor((prev) => {
+ if (prev.column === columnUid) {
+ return {
+ column: columnUid,
+ direction: prev.direction === 'ascending' ? 'descending' : 'ascending',
+ };
+ }
+ return { column: columnUid, direction: 'ascending' };
+ });
+ };
+
+ const handleDeleteCase = (deleteCaseId: number) => {
+ onDeleteCase(deleteCaseId);
+ };
+
const handleDeleteCases = () => {
let deleteCaseIds: number[];
if (selectedKeys === 'all') {
@@ -158,26 +222,41 @@ export default function TestCaseTable({
setSelectedKeys(new Set([]));
};
- const activeFilterNum = (activeTitleFilter ? 1 : 0) + activePriorityFilters.length + activeTypeFilters.length;
+ // **************************************************************************
+ // move test case
+ // **************************************************************************
+ const [dragCount, setDragCount] = useState(null);
+ const [mousePos, setMousePos] = useState({ x: 0, y: 0 });
+ const handleDragStart = (e: React.DragEvent, id: number) => {
+ e.stopPropagation();
- const classNames = useMemo(
- () => ({
- wrapper: ['max-w-3xl'],
- 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',
- ],
- }),
- []
- );
+ let selectedIds: number[];
+ if (selectedKeys === 'all' || (selectedKeys instanceof Set && selectedKeys.has(id) && selectedKeys.size > 1)) {
+ // when multiple row selected
+ selectedIds =
+ selectedKeys === 'all' ? sortedItems.map((item) => item.id) : (Array.from(selectedKeys) as number[]);
+ } else {
+ // when no row selected or only one row selected
+ selectedIds = [id];
+ }
+ setDragCount(selectedIds.length);
+ e.dataTransfer.setData('application/json', JSON.stringify(selectedIds));
+ const img = new window.Image();
+ img.src = 'data:image/svg+xml;base64,';
+ e.dataTransfer.setDragImage(img, 0, 0);
+ };
+ const handleDrag = (e: React.DragEvent) => {
+ setMousePos({ x: e.clientX, y: e.clientY });
+ };
+ const handleDragEnd = () => {
+ setDragCount(null);
+ };
+ useEffect(() => {
+ const unsubscribe = onMoveEvent(() => {
+ handleDragEnd();
+ });
+ return unsubscribe;
+ }, []);
return (
<>
@@ -265,36 +344,77 @@ export default function TestCaseTable({