diff --git a/rsconcept/frontend/src/components/ConstituentaPicker.tsx b/rsconcept/frontend/src/components/ConstituentaPicker.tsx index 521fda43..72f8921c 100644 --- a/rsconcept/frontend/src/components/ConstituentaPicker.tsx +++ b/rsconcept/frontend/src/components/ConstituentaPicker.tsx @@ -13,6 +13,7 @@ import ConstituentaBadge from './ConstituentaBadge'; import FlexColumn from './ui/FlexColumn'; interface ConstituentaPickerProps { + id?: string; prefixID?: string; data?: IConstituenta[]; rows?: number; @@ -29,6 +30,7 @@ interface ConstituentaPickerProps { const columnHelper = createColumnHelper(); function ConstituentaPicker({ + id, data, value, initialFilter = '', @@ -85,13 +87,19 @@ function ConstituentaPicker({ ); return ( -
- setFilterText(newValue)} /> +
+ setFilterText(newValue)} + /> + event.stopPropagation()} /> ); diff --git a/rsconcept/frontend/src/components/DataTable/DataTable.tsx b/rsconcept/frontend/src/components/DataTable/DataTable.tsx index 0d3fd336..5bc0746d 100644 --- a/rsconcept/frontend/src/components/DataTable/DataTable.tsx +++ b/rsconcept/frontend/src/components/DataTable/DataTable.tsx @@ -14,7 +14,7 @@ import { useReactTable, type VisibilityState } from '@tanstack/react-table'; -import { useState } from 'react'; +import { useMemo, useState } from 'react'; import { CProps } from '../props'; import DefaultNoData from './DefaultNoData'; @@ -33,7 +33,9 @@ export interface IConditionalStyle { export interface DataTableProps extends CProps.Styling, Pick, 'data' | 'columns' | 'onRowSelectionChange' | 'onColumnVisibilityChange'> { + id?: string; dense?: boolean; + rows?: number; headPosition?: string; noHeader?: boolean; noFooter?: boolean; @@ -66,9 +68,11 @@ export interface DataTableProps * No sticky header if omitted */ function DataTable({ + id, style, className, dense, + rows, headPosition, conditionalRowStyles, noFooter, @@ -120,8 +124,20 @@ function DataTable({ const isEmpty = tableImpl.getRowModel().rows.length === 0; + // TODO: refactor formula for different font sizes and pagination tools + const fixedSize = useMemo(() => { + if (!rows) { + return undefined; + } + if (dense) { + return `calc(2px + (2px + 1.6875rem)*${rows} + ${noHeader ? '0px' : '(2px + 2.1875rem)'})`; + } else { + return `calc(2px + (2px + 2.1875rem)*${rows + (noHeader ? 0 : 1)})`; + } + }, [rows, dense, noHeader]); + return ( -
+
{!noHeader ? ( ({ {enablePagination && !isEmpty ? ( { + id?: string; table: Table; paginationOptions: number[]; onChangePaginationOption?: (newValue: number) => void; } -function PaginationTools({ table, paginationOptions, onChangePaginationOption }: PaginationToolsProps) { +function PaginationTools({ + id, + table, + paginationOptions, + onChangePaginationOption +}: PaginationToolsProps) { const handlePaginationOptionsChange = useCallback( (event: React.ChangeEvent) => { const perPage = Number(event.target.value); @@ -55,6 +61,7 @@ function PaginationTools({ table, paginationOptions, onChangePaginationOp ({ table, paginationOptions, onChangePaginationOp ) : null} {row.getVisibleCells().map((cell: Cell) => (
+ ( return (
-
- + {label ? {label} : null} ); } diff --git a/rsconcept/frontend/src/components/ui/FileInput.tsx b/rsconcept/frontend/src/components/ui/FileInput.tsx index e789d594..17b71ba1 100644 --- a/rsconcept/frontend/src/components/ui/FileInput.tsx +++ b/rsconcept/frontend/src/components/ui/FileInput.tsx @@ -15,7 +15,7 @@ interface FileInputProps extends Omit { onChange?: (event: React.ChangeEvent) => void; } -function FileInput({ label, acceptType, title, className, style, onChange, ...restProps }: FileInputProps) { +function FileInput({ id, label, acceptType, title, className, style, onChange, ...restProps }: FileInputProps) { const inputRef = useRef(null); const [fileName, setFileName] = useState(''); @@ -37,6 +37,7 @@ function FileInput({ label, acceptType, title, className, style, onChange, ...re return (
); } diff --git a/rsconcept/frontend/src/components/ui/Label.tsx b/rsconcept/frontend/src/components/ui/Label.tsx index f46e169e..6db68ddf 100644 --- a/rsconcept/frontend/src/components/ui/Label.tsx +++ b/rsconcept/frontend/src/components/ui/Label.tsx @@ -10,11 +10,19 @@ function Label({ text, className, ...restProps }: LabelProps) { if (!text) { return null; } - return ( - - ); + if (restProps.htmlFor) { + return ( + + ); + } else { + return ( + + {text} + + ); + } } export default Label; diff --git a/rsconcept/frontend/src/components/ui/LabeledValue.tsx b/rsconcept/frontend/src/components/ui/LabeledValue.tsx index d7821606..e0322fe6 100644 --- a/rsconcept/frontend/src/components/ui/LabeledValue.tsx +++ b/rsconcept/frontend/src/components/ui/LabeledValue.tsx @@ -8,7 +8,7 @@ interface LabeledValueProps { function LabeledValue({ id, label, text, title }: LabeledValueProps) { return (
- + {label} {text}
); diff --git a/rsconcept/frontend/src/components/ui/SearchBar.tsx b/rsconcept/frontend/src/components/ui/SearchBar.tsx index 1dfcc2b2..1decbc2a 100644 --- a/rsconcept/frontend/src/components/ui/SearchBar.tsx +++ b/rsconcept/frontend/src/components/ui/SearchBar.tsx @@ -6,17 +6,19 @@ import TextInput from './TextInput'; interface SearchBarProps extends CProps.Styling { value: string; + id?: string; onChange?: (newValue: string) => void; noBorder?: boolean; } -function SearchBar({ value, onChange, noBorder, ...restProps }: SearchBarProps) { +function SearchBar({ id, value, onChange, noBorder, ...restProps }: SearchBarProps) { return (
- setTitle(event.target.value)} /> setTitle(event.target.value)} + /> + setAlias(event.target.value)} /> -