Skip to content

Commit d8fcb93

Browse files
ErwanDecosterErwanDecoster
authored
feat: add main pages (#9)
* feat: add data table component and integrate with apps route * feat: add SearcherBar component and integrate it into apps and index routes * refactor: remove unused Link import from columns.tsx * feat: implement PaginatedNavigation component in AppsTable for pagination support * refactor: enhance pagination logic in PaginatedNavigation component for improved readability and functionality * refactor: adjust pagination logic in generatePaginationItems for improved visibility and functionality * fix: border transition looking bad * refactor: update useAppsData to accept currentPage for dynamic data fetching * fix: add placeholderData to useQuery for improved data handling * refactor: wrap app name in a div and fixe is width * fix: update TABLE_LENGTH to 16 for correct configuration * refactor: remove AppsTable component and integrate its functionality directly into AppsRoute with refetch indicator * feat: add Deals route with data fetching and pagination functionality * fix: rename taskQuery to tasksQuery for consistency in data fetching * refactor: reorganize imports and simplify conditional rendering in DealsRoute * feat: implement Tasks route with data fetching, pagination, and task table columns * refactor: replace inline type definitions with GraphQL query types for Apps and Deals * fix: display workerpool description directly in the table instead of using CopyButton * feat: add Workerpools route with data fetching, pagination, and table columns * fix: wrap CopyButton in a div to set a fixed width for app name display * fix: improve description display in workerpools table with consistent styling * fix: replace CopyButton with conditional rendering for dataset name display * feat: add Datasets route with data fetching, pagination, and table columns * fix: update PaginationEllipsis styling for better responsiveness * fix: update query state variables to indicate refetch and loading * fix: update loading indicator logic to show during loading or refetching * fix: adjust SearcherBar styling for improved layout and responsiveness * fix: refactor SearcherBar layout for improved structure and styling * fix: adjust SearcherBar padding for improved layout consistency * fix: simplify Button component structure in SearcherBar for cleaner code * fix: update PaginationPrevious and PaginationNext to use screen reader only text for accessibility * fix: refactor SearcherBar to improve button visibility and input class handling based on connection status * fix: update placeholder text in SearcherBar for clarity * feat: rename folder * feat: rename folder AppsTable/ to appTable/ * fix: remove unnecessary 'use client' directive from multiple components * feat: enhance DataTable component with tableLength and isLoading props for improved data handling * feat: move routes for apps, datasets, deals, tasks, and workerpools * fix: update destination paths for apps, datasets, deals, tasks, and workerpools routes * feat: implement DataTable component and update routes to use it * feat: replace useNavigate with Link in DataTable for improved navigation * feat: refactor preview tables to use DataTable component for improved rendering and data handling * fix: prevent default button behavior in CopyButton component * feat: rename WorkerpoolsPreviewTable component and update import path * fix: update import path for WorkerpoolsPreviewTable component * feat: add routes for datasets, deals, tasks, and workerpools with data handling and pagination * refactor: remove unused AppsTable component and related code * feat: add NextApps, NextDatasets, NextDeals, NextTasks, and NextWorkerpools to assure next page in pagination * fix: update import path for WorkerpoolsPreviewTable component * chore: update @radix-ui/react-slot version to 1.2.2 in package.json and package-lock.json * feat: update pagination logic in multiple routes to adjust current page and total pages * feat: better error and loading handling logic in preview tables for apps, datasets, deals, tasks, and workerpools * feat: enhance error handling in apps, datasets, deals, tasks, and workerpools routes with alerts * fix: correct typo in query property of fetch request in execute function * feat: improve error handling in apps, datasets, deals, tasks, and workerpools routes with hasPastError flag
1 parent 53ed54e commit d8fcb93

37 files changed

+1837
-572
lines changed

‎package-lock.json‎

Lines changed: 129 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
"@radix-ui/react-dialog": "^1.1.7",
2525
"@radix-ui/react-label": "^2.1.3",
2626
"@radix-ui/react-select": "^2.2.2",
27-
"@radix-ui/react-slot": "^1.2.0",
27+
"@radix-ui/react-slot": "^1.2.2",
2828
"@radix-ui/react-tabs": "^1.1.4",
2929
"@radix-ui/react-tooltip": "^1.2.0",
3030
"@reown/appkit": "^1.6.9",
@@ -34,6 +34,8 @@
3434
"@tanstack/react-query": "^5.74.4",
3535
"@tanstack/react-router": "^1.116.0",
3636
"@tanstack/react-router-devtools": "^1.116.0",
37+
"@tanstack/react-table": "^8.21.3",
38+
"@trivago/prettier-plugin-sort-imports": "^5.2.2",
3739
"class-variance-authority": "^0.7.1",
3840
"clsx": "^2.1.1",
3941
"graphql": "^16.10.0",

‎src/components/CopyButton.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,11 @@ const CopyButton = ({
3939
<Tooltip open={showTooltip}>
4040
<TooltipTrigger asChild>
4141
<button
42-
onClick={handleCopy}
42+
onClick={(e) => {
43+
e.stopPropagation();
44+
e.preventDefault();
45+
handleCopy();
46+
}}
4347
onMouseEnter={handleMouseEnter}
4448
onMouseLeave={handleMouseLeave}
4549
className="hover:before:bg-grey-700 active:before:bg-grey-600 relative z-0 -mx-2 -my-1 flex w-fit items-center gap-1 px-2 py-1 transition-colors before:absolute before:inset-0 before:-z-10 before:rounded-lg before:duration-150 active:before:scale-x-[0.98] active:before:scale-y-[0.94]"

‎src/components/DataTable.tsx‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
import { Link } from '@tanstack/react-router';
2+
import {
3+
ColumnDef,
4+
flexRender,
5+
getCoreRowModel,
6+
useReactTable,
7+
} from '@tanstack/react-table';
8+
import {
9+
Table,
10+
TableBody,
11+
TableCell,
12+
TableHead,
13+
TableHeader,
14+
TableRow,
15+
} from '@/components/ui/table';
16+
17+
interface DataTableProps<TData, TValue> {
18+
columns: ColumnDef<TData, TValue>[];
19+
data: TData[];
20+
tableLength?: number;
21+
isLoading?: boolean;
22+
}
23+
24+
export function DataTable<TData extends { destination: string }, TValue>({
25+
columns,
26+
data,
27+
tableLength = 10,
28+
isLoading,
29+
}: DataTableProps<TData, TValue>) {
30+
const table = useReactTable({
31+
data,
32+
columns,
33+
getCoreRowModel: getCoreRowModel(),
34+
});
35+
36+
return (
37+
<Table>
38+
<TableHeader>
39+
{table.getHeaderGroups().map((headerGroup) => (
40+
<TableRow key={headerGroup.id}>
41+
{headerGroup.headers.map((header) => {
42+
return (
43+
<TableHead key={header.id}>
44+
{header.isPlaceholder
45+
? null
46+
: flexRender(
47+
header.column.columnDef.header,
48+
header.getContext()
49+
)}
50+
</TableHead>
51+
);
52+
})}
53+
</TableRow>
54+
))}
55+
</TableHeader>
56+
<TableBody>
57+
{table.getRowModel().rows.map((row) => (
58+
<TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
59+
{row.getVisibleCells().map((cell) => (
60+
<TableCell key={cell.id} className="p-0">
61+
<Link
62+
className="block px-5 py-6"
63+
to={cell.row.original.destination}
64+
>
65+
{flexRender(cell.column.columnDef.cell, cell.getContext())}
66+
</Link>
67+
</TableCell>
68+
))}
69+
</TableRow>
70+
))}
71+
{data.length === 0 && !isLoading && (
72+
<TableRow>
73+
<TableCell colSpan={columns.length} className="text-center">
74+
<span>No results.</span>
75+
</TableCell>
76+
</TableRow>
77+
)}
78+
{Array.from({
79+
length:
80+
tableLength -
81+
data.length -
82+
(data.length === 0 && !isLoading ? 1 : 0),
83+
}).map((_, index) => (
84+
<TableRow key={`empty-${index}`}>
85+
{columns.map((_, colIndex) => (
86+
<TableCell key={colIndex} className="h-12">
87+
&nbsp;
88+
</TableCell>
89+
))}
90+
</TableRow>
91+
))}
92+
</TableBody>
93+
</Table>
94+
);
95+
}

0 commit comments

Comments
 (0)