+
);
-}
\ No newline at end of file
+}
diff --git a/src/components/loading/route-loading.tsx b/src/components/loading/route-loading.tsx
index 324ffe3..e4d1bcb 100644
--- a/src/components/loading/route-loading.tsx
+++ b/src/components/loading/route-loading.tsx
@@ -1,5 +1,5 @@
-import {Progress} from "@/components/ui/progress";
-import {useEffect, useState} from "react";
+import { Progress } from "@/components/ui/progress";
+import { useEffect, useState } from "react";
export function RouteLoading() {
const [progress, setProgress] = useState(0);
@@ -55,7 +55,7 @@ export function RouteLoading() {
return progress > 0 ? (
) : null;
}
diff --git a/src/components/table/body.tsx b/src/components/table/body.tsx
index eb8ec5e..3d3f6ba 100644
--- a/src/components/table/body.tsx
+++ b/src/components/table/body.tsx
@@ -3,27 +3,25 @@ import {
flexRender,
type PaginationState,
type Row,
- type Table
-} from '@tanstack/react-table'
-import {TableBody, TableCell, TableRow} from '@/components/ui/table'
-import {Skeleton} from "@/components/ui/skeleton"
-import {Checkbox} from '@/components/ui/checkbox'
-import {useTranslation} from "react-i18next";
-import {useState} from "react";
+ type Table,
+} from "@tanstack/react-table";
+import { TableBody, TableCell, TableRow } from "@/components/ui/table";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Checkbox } from "@/components/ui/checkbox";
+import { useTranslation } from "react-i18next";
+import { useState } from "react";
-function DataRow
(
- {
- row,
- verticalSpacing,
- horizontalSpacing,
- onClick
- }: {
- row: Row,
- verticalSpacing: number,
- horizontalSpacing: number,
- onClick?: (row: Row) => void
- }
-) {
+function DataRow({
+ row,
+ verticalSpacing,
+ horizontalSpacing,
+ onClick,
+}: {
+ row: Row;
+ verticalSpacing: number;
+ horizontalSpacing: number;
+ onClick?: (row: Row) => void;
+}) {
const [disableGroup, setDisableGroup] = useState(false);
const selected = row.getIsSelected();
const borderSize = 2;
@@ -31,8 +29,8 @@ function DataRow(
return (
{
const target = event.target as HTMLElement;
const tag = target.nodeName;
@@ -45,15 +43,15 @@ function DataRow(
className="!bg-transparent pointer-events-auto w-0"
onMouseEnter={() => setDisableGroup(true)}
onMouseLeave={() => setDisableGroup(false)}
- onClick={e => e.stopPropagation()}
+ onClick={(e) => e.stopPropagation()}
style={{
paddingRight: 20,
- paddingLeft: 0
+ paddingLeft: 0,
}}
>
row.toggleSelected(!!value)}
+ onCheckedChange={(value) => row.toggleSelected(!!value)}
aria-label="Select row"
className="data-[state=checked]:border-blue-600 data-[state=checked]:bg-blue-600 data-[state=checked]:text-white dark:data-[state=checked]:border-blue-700 dark:data-[state=checked]:bg-blue-700"
/>
@@ -63,11 +61,20 @@ function DataRow(
const isFirst = index === 0;
const isLast = index === row.getVisibleCells().length - 1;
const selectedEdgeClasses = selected
- ? `border-t border-b border-blue-600` : ``;
- const firstExtra = isFirst && selected ? `border-l rounded-l-xl` :
- (isFirst ? 'rounded-l-xl' : '');
- const lastExtra = isLast && selected ? `border-r rounded-r-xl` :
- (isLast ? 'rounded-r-xl' : '');
+ ? `border-t border-b border-blue-600`
+ : ``;
+ const firstExtra =
+ isFirst && selected
+ ? `border-l rounded-l-xl`
+ : isFirst
+ ? "rounded-l-xl"
+ : "";
+ const lastExtra =
+ isLast && selected
+ ? `border-r rounded-r-xl`
+ : isLast
+ ? "rounded-r-xl"
+ : "";
return (
(
borderRightWidth: selected && isLast ? borderSize : 0,
paddingTop: verticalSpacing - (selected ? borderSize : 0),
paddingBottom: verticalSpacing - (selected ? borderSize : 0),
- paddingLeft: horizontalSpacing - (isFirst && selected ? borderSize : 0),
- paddingRight: horizontalSpacing - (isLast && selected ? borderSize : 0)
+ paddingLeft:
+ horizontalSpacing - (isFirst && selected ? borderSize : 0),
+ paddingRight:
+ horizontalSpacing - (isLast && selected ? borderSize : 0),
}}
>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
@@ -94,41 +103,38 @@ function DataRow(
);
}
-
-export default function DataTableBody(
- {
- table,
- columns,
- isLoading,
- pagination,
- onClick
- }: {
- table: Table,
- columns: ColumnDef[],
- isLoading?: boolean,
- pagination: PaginationState,
- onClick?: (entry: T) => void
- }
-) {
- const {t} = useTranslation();
+export default function DataTableBody({
+ table,
+ columns,
+ isLoading,
+ pagination,
+ onClick,
+}: {
+ table: Table;
+ columns: ColumnDef[];
+ isLoading?: boolean;
+ pagination: PaginationState;
+ onClick?: (entry: T) => void;
+}) {
+ const { t } = useTranslation();
const verticalSpacing = pagination.pageSize <= 5 ? 40 : 30;
const horizontalSpacing = pagination.pageSize <= 5 ? 30 : 25;
if (isLoading) {
return (
- {Array.from({length: pagination.pageSize}).map((_, rowIndex) => (
+ {Array.from({ length: pagination.pageSize }).map((_, rowIndex) => (
-
+
- {Array.from({length: columns.length}).map((_, cellIndex) => (
+ {Array.from({ length: columns.length }).map((_, cellIndex) => (
(
paddingTop: verticalSpacing,
paddingBottom: verticalSpacing,
paddingLeft: horizontalSpacing,
- paddingRight: horizontalSpacing
+ paddingRight: horizontalSpacing,
}}
>
-
+
))}
))}
- )
+ );
}
- const rows = table.getRowModel().rows
+ const rows = table.getRowModel().rows;
return (
- {rows.length ? rows.map(row => (
- onClick ? onClick(row.original) : {}}
- />
- )) : (
+ {rows.length ? (
+ rows.map((row) => (
+ (onClick ? onClick(row.original) : {})}
+ />
+ ))
+ ) : (
{t("table.empty")}
@@ -167,5 +175,5 @@ export default function DataTableBody(
)}
- )
+ );
}
diff --git a/src/components/table/bottom-bar.tsx b/src/components/table/bottom-bar.tsx
index bcbde3e..a53c89b 100644
--- a/src/components/table/bottom-bar.tsx
+++ b/src/components/table/bottom-bar.tsx
@@ -1,29 +1,25 @@
-import type {
- Table,
-} from "@tanstack/react-table";
-import {useSidebar} from "@/components/ui/sidebar.tsx";
-import {useTranslation} from "react-i18next";
-import type {LucideIcon} from "lucide-react";
+import type { Table } from "@tanstack/react-table";
+import { useSidebar } from "@/components/ui/sidebar.tsx";
+import { useTranslation } from "react-i18next";
+import type { LucideIcon } from "lucide-react";
export interface DataTableBottomBarAction {
name: string;
icon: LucideIcon;
- onClick?: (entries: T[]) => void
+ onClick?: (entries: T[]) => void;
}
-export default function DataTableBottomBar(
- {
- table,
- actions,
- }: {
- table: Table
- actions: DataTableBottomBarAction[]
- }
-) {
+export default function DataTableBottomBar({
+ table,
+ actions,
+}: {
+ table: Table;
+ actions: DataTableBottomBarAction[];
+}) {
const selectedRows = table.getSelectedRowModel().rows;
const selectedCount = selectedRows.length;
- const {t} = useTranslation();
- const {open} = useSidebar()
+ const { t } = useTranslation();
+ const { open } = useSidebar();
return (
(
>
@@ -49,7 +47,7 @@ export default function DataTableBottomBar
(