mirror of
https://github.com/pgadmin-org/pgadmin4.git
synced 2025-01-11 00:22:34 -06:00
Fixed issues reported in #7958
* Fixed issues reported in #7954 - Search wasn't working as we were using the wrong row-index, while rendering it. - Fixed the CSS issue with the alignment of the search input box. - Pass the row object while rendering the 'DataRow' component, to improve the performance as it repeatedly calls the filtering function for each row. - Changed the order of the validators on a field to prioritize the 'empty' string validator over the unique-id validator in a collection. - Use 'row.index' instead of rowId, while rendering a grid row
This commit is contained in:
parent
28eb2c0b4b
commit
15c37b620e
web/pgadmin/static/js/SchemaView
@ -12,6 +12,7 @@ import React, {
|
||||
} from 'react';
|
||||
import { styled } from '@mui/material/styles';
|
||||
import Box from '@mui/material/Box';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import { SCHEMA_STATE_ACTIONS } from 'sources/SchemaView/SchemaState';
|
||||
import { DefaultButton } from 'sources/components/Buttons';
|
||||
@ -70,16 +71,14 @@ const StyledBox = styled(Box)(({theme}) => ({
|
||||
},
|
||||
}));
|
||||
|
||||
export function DataGridFormHeader({tableEleRef}) {
|
||||
export function DataGridFormHeader({tableEleRef, rows}) {
|
||||
|
||||
const {
|
||||
accessPath, field, dataDispatch, options, virtualizer, table,
|
||||
viewHelperProps,
|
||||
accessPath, field, dataDispatch, options, virtualizer, viewHelperProps,
|
||||
} = useContext(DataGridContext);
|
||||
const {
|
||||
canAdd, addOnTop, canAddRow, canEdit, expandEditOnAdd, headerFormVisible
|
||||
} = options;
|
||||
const rows = table.getRowModel().rows;
|
||||
|
||||
const label = field.label || '';
|
||||
const newRowIndex = useRef(-1);
|
||||
@ -178,4 +177,5 @@ export function DataGridFormHeader({tableEleRef}) {
|
||||
|
||||
DataGridFormHeader.propTypes = {
|
||||
tableEleRef: CustomPropTypes.ref,
|
||||
rows: PropTypes.any,
|
||||
};
|
||||
|
@ -146,7 +146,7 @@ export default function DataGridView({
|
||||
}}>
|
||||
<StyleDataGridBox className={classList.join(' ')}>
|
||||
<Box className='DataGridView-grid'>
|
||||
<GridHeader tableEleRef={tableEleRef} />
|
||||
<GridHeader tableEleRef={tableEleRef} rows={rows} />
|
||||
<DndProvider backend={HTML5Backend}>
|
||||
<PgReactTable
|
||||
ref={tableEleRef} table={table} data-test="data-grid-view"
|
||||
@ -169,7 +169,10 @@ export default function DataGridView({
|
||||
transform: `translateY(${virtualRow.start}px)`,
|
||||
}}
|
||||
>
|
||||
<GridRow rowId={row.id} isResizing={isResizing}/>
|
||||
<GridRow
|
||||
rowId={virtualRow.index} isResizing={isResizing}
|
||||
row={row}
|
||||
/>
|
||||
</PgReactTableRow>
|
||||
);
|
||||
})
|
||||
|
@ -83,7 +83,7 @@ export function DataGridHeader({tableEleRef}) {
|
||||
<Box className='DataGridView-gridHeader'>
|
||||
{label && <Box className='DataGridView-gridHeaderText'>{label}</Box>}
|
||||
<Box className='DataGridView-gridHeader-middle'
|
||||
style={{flex: 1, padding: 0}}>
|
||||
style={{flex: 1, padding: 0, display: 'flex'}}>
|
||||
<SearchBox />
|
||||
</Box>
|
||||
<Box className='DataGridView-gridControls'>
|
||||
|
@ -21,18 +21,16 @@ import { useFieldOptions } from '../hooks';
|
||||
import { DataGridContext, DataGridRowContext } from './context';
|
||||
|
||||
|
||||
export function DataGridRow({rowId, isResizing}) {
|
||||
export function DataGridRow({row, isResizing}) {
|
||||
const schemaState = useContext(SchemaStateContext);
|
||||
|
||||
const { accessPath, options, table, features } = useContext(
|
||||
const { accessPath, options, features } = useContext(
|
||||
DataGridContext
|
||||
);
|
||||
|
||||
const rowId = row.index;
|
||||
const rowAccessPath = schemaState.accessPath(accessPath, rowId);
|
||||
const rowOptions = useFieldOptions(rowAccessPath, schemaState);
|
||||
|
||||
const rowRef = useRef(null);
|
||||
const row = table.getRowModel().rows[rowId];
|
||||
|
||||
/*
|
||||
* Memoize the row to avoid unnecessary re-render. If table data changes,
|
||||
|
@ -61,7 +61,7 @@ function MappedFormControlBase({
|
||||
}
|
||||
|
||||
if (name && _.isNumber(name)) {
|
||||
name = String('name');
|
||||
name = String(name);
|
||||
}
|
||||
|
||||
/* The mapping uses Form* components as it comes with labels */
|
||||
|
@ -252,6 +252,15 @@ export function validateCollectionSchema(
|
||||
const rows = sessData[field.id] || [];
|
||||
const currPath = accessPath.concat(field.id);
|
||||
|
||||
// Loop through data.
|
||||
for(const [rownum, row] of rows.entries()) {
|
||||
if(validateSchema(
|
||||
field.schema, row, setError, currPath.concat(rownum), field.label
|
||||
)) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
// Validate duplicate rows.
|
||||
const dupInd = checkUniqueCol(rows, field.uniqueCol);
|
||||
|
||||
@ -271,15 +280,6 @@ export function validateCollectionSchema(
|
||||
return true;
|
||||
}
|
||||
|
||||
// Loop through data.
|
||||
for(const [rownum, row] of rows.entries()) {
|
||||
if(validateSchema(
|
||||
field.schema, row, setError, currPath.concat(rownum), field.label
|
||||
)) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user