mirror of
https://github.com/DeNNiiInc/dbgate.git
synced 2026-04-25 21:15:59 +00:00
datagrid column manager, hide columns
This commit is contained in:
Jan Prochazka
20
packages/web/src/datagrid/ColumnLabel.js
Normal file
20
packages/web/src/datagrid/ColumnLabel.js
Normal file
@@ -0,0 +1,20 @@
|
||||
//@ts-nocheck
|
||||
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { SequenceIcon } from '../icons';
|
||||
|
||||
const Label = styled.span`
|
||||
font-weight: ${props => (props.notNull ? 'bold' : 'normal')};
|
||||
`;
|
||||
|
||||
/** @param column {import('@dbgate/datalib').DisplayColumn|import('@dbgate/types').ColumnInfo} */
|
||||
export default function ColumnLabel(column) {
|
||||
let Icon = null;
|
||||
if (column.autoIncrement) Icon = SequenceIcon;
|
||||
return (
|
||||
<Label {...column}>
|
||||
{Icon ? <Icon /> : null} {column.headerText || column.columnName}
|
||||
</Label>
|
||||
);
|
||||
}
|
||||
31
packages/web/src/datagrid/ColumnManager.js
Normal file
31
packages/web/src/datagrid/ColumnManager.js
Normal file
@@ -0,0 +1,31 @@
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import ColumnLabel from './ColumnLabel';
|
||||
|
||||
const Row = styled.div`
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background-color: lightblue;
|
||||
}
|
||||
`;
|
||||
|
||||
/** @param props {import('./types').DataGridProps} */
|
||||
export default function ColumnManager(props) {
|
||||
const { display } = props;
|
||||
return (
|
||||
<div>
|
||||
{display.columns.map(item => (
|
||||
<Row key={item.columnName}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={item.isChecked}
|
||||
onChange={() => display.setColumnVisibility(item.uniqueName, !item.isChecked)}
|
||||
></input>
|
||||
<ColumnLabel {...item} />
|
||||
</Row>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,327 +1,37 @@
|
||||
import React from 'react';
|
||||
import useFetch from '../utility/useFetch';
|
||||
import styled from 'styled-components';
|
||||
import theme from '../theme';
|
||||
import { HorizontalScrollBar, VerticalScrollBar } from './ScrollBars';
|
||||
import useDimensions from '../utility/useDimensions';
|
||||
import { SeriesSizes } from './SeriesSizes';
|
||||
import axios from '../utility/axios';
|
||||
import DataGridCore from './DataGridCore';
|
||||
import ColumnManager from './ColumnManager';
|
||||
|
||||
const GridContainer = styled.div`
|
||||
const MainContainer = styled.div`
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
`;
|
||||
|
||||
const Table = styled.table`
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
overflow: scroll;
|
||||
border-collapse: collapse;
|
||||
`;
|
||||
const TableHead = styled.thead`
|
||||
// display: block;
|
||||
// width: 300px;
|
||||
`;
|
||||
const TableBody = styled.tbody`
|
||||
// display: block;
|
||||
// overflow: auto;
|
||||
// height: 100px;
|
||||
`;
|
||||
const TableHeaderRow = styled.tr`
|
||||
// height: 35px;
|
||||
`;
|
||||
const TableBodyRow = styled.tr`
|
||||
// height: 35px;
|
||||
background-color: #ffffff;
|
||||
&:nth-child(6n + 4) {
|
||||
background-color: #ebebeb;
|
||||
}
|
||||
&:nth-child(6n + 7) {
|
||||
background-color: #ebf5ff;
|
||||
}
|
||||
`;
|
||||
const TableHeaderCell = styled.td`
|
||||
font-weight: bold;
|
||||
border: 1px solid #c0c0c0;
|
||||
// border-collapse: collapse;
|
||||
text-align: left;
|
||||
padding: 2px;
|
||||
background-color: #f6f7f9;
|
||||
overflow: hidden;
|
||||
`;
|
||||
const TableBodyCell = styled.td`
|
||||
font-weight: normal;
|
||||
border: 1px solid #c0c0c0;
|
||||
// border-collapse: collapse;
|
||||
padding: 2px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
const ColumnManagerContainer = styled.div`
|
||||
background-color: white;
|
||||
padding-top: 5px;
|
||||
`;
|
||||
|
||||
/**
|
||||
* @param {object} props
|
||||
* @param {number} props.conid
|
||||
* @param {string} props.database
|
||||
* @param {import('@dbgate/datalib').GridDisplay} props.display
|
||||
*/
|
||||
const DataGridContainer = styled.div`
|
||||
position: relative;
|
||||
flex-grow: 1;
|
||||
`;
|
||||
|
||||
/** @param props {import('./types').DataGridProps} */
|
||||
export default function DataGrid(props) {
|
||||
const { conid, database, display } = props;
|
||||
const columns = display.columns;
|
||||
|
||||
// console.log(`GRID, conid=${conid}, database=${database}, sql=${sql}`);
|
||||
const [loadProps, setLoadProps] = React.useState({
|
||||
isLoading: false,
|
||||
loadedRows: [],
|
||||
isLoadedAll: false,
|
||||
loadedTime: new Date().getTime(),
|
||||
});
|
||||
const { isLoading, loadedRows, isLoadedAll, loadedTime } = loadProps;
|
||||
|
||||
const loadedTimeRef = React.useRef(0);
|
||||
|
||||
const loadNextData = async () => {
|
||||
if (isLoading) return;
|
||||
setLoadProps({
|
||||
...loadProps,
|
||||
isLoading: true,
|
||||
});
|
||||
const loadStart = new Date().getTime();
|
||||
loadedTimeRef.current = loadStart;
|
||||
|
||||
const sql = display.getPageQuery(loadedRows.length, 100);
|
||||
|
||||
let response = await axios.request({
|
||||
url: 'database-connections/query-data',
|
||||
method: 'post',
|
||||
params: {
|
||||
conid,
|
||||
database,
|
||||
},
|
||||
data: { sql },
|
||||
});
|
||||
if (loadedTimeRef.current !== loadStart) {
|
||||
// new load was dispatched
|
||||
return;
|
||||
}
|
||||
// if (!_.isArray(nextRows)) {
|
||||
// console.log('Error loading data from server', nextRows);
|
||||
// nextRows = [];
|
||||
// }
|
||||
const { rows: nextRows } = response.data;
|
||||
console.log('nextRows',nextRows)
|
||||
const loadedInfo = {
|
||||
loadedRows: [...loadedRows, ...nextRows],
|
||||
loadedTime,
|
||||
isLoadedAll: nextRows.length === 0,
|
||||
};
|
||||
setLoadProps({
|
||||
...loadProps,
|
||||
isLoading: false,
|
||||
...loadedInfo,
|
||||
});
|
||||
};
|
||||
|
||||
// const data = useFetch({
|
||||
// url: 'database-connections/query-data',
|
||||
// method: 'post',
|
||||
// params: {
|
||||
// conid,
|
||||
// database,
|
||||
// },
|
||||
// data: { sql },
|
||||
// });
|
||||
// const { rows, columns } = data || {};
|
||||
const [firstVisibleRowScrollIndex, setFirstVisibleRowScrollIndex] = React.useState(0);
|
||||
const [firstVisibleColumnScrollIndex, setFirstVisibleColumnScrollIndex] = React.useState(0);
|
||||
|
||||
const [headerRowRef, { height: rowHeight }] = useDimensions();
|
||||
const [tableBodyRef] = useDimensions();
|
||||
const [containerRef, { height: containerHeight, width: containerWidth }] = useDimensions();
|
||||
|
||||
const columnSizes = React.useMemo(() => countColumnSizes(), [loadedRows, containerWidth]);
|
||||
|
||||
console.log('containerWidth', containerWidth);
|
||||
|
||||
const gridScrollAreaHeight = containerHeight - 2 * rowHeight;
|
||||
const gridScrollAreaWidth = containerWidth - columnSizes.frozenSize;
|
||||
|
||||
const visibleRowCountUpperBound = Math.ceil(gridScrollAreaHeight / Math.floor(rowHeight));
|
||||
const visibleRowCountLowerBound = Math.floor(gridScrollAreaHeight / Math.ceil(rowHeight));
|
||||
// const visibleRowCountUpperBound = 20;
|
||||
// const visibleRowCountLowerBound = 20;
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!isLoadedAll && firstVisibleRowScrollIndex + visibleRowCountUpperBound >= loadedRows.length) {
|
||||
loadNextData();
|
||||
}
|
||||
});
|
||||
|
||||
if (!loadedRows || !columns) return null;
|
||||
const rowCountNewIncluded = loadedRows.length;
|
||||
|
||||
const handleRowScroll = value => {
|
||||
setFirstVisibleRowScrollIndex(value);
|
||||
};
|
||||
|
||||
const handleColumnScroll = value => {
|
||||
setFirstVisibleColumnScrollIndex(value);
|
||||
};
|
||||
|
||||
function countColumnSizes() {
|
||||
let canvas = document.createElement('canvas');
|
||||
let context = canvas.getContext('2d');
|
||||
|
||||
//return this.context.measureText(txt).width;
|
||||
const columnSizes = new SeriesSizes();
|
||||
if (!loadedRows || !columns) return columnSizes;
|
||||
|
||||
console.log('countColumnSizes', loadedRows.length, containerWidth);
|
||||
|
||||
columnSizes.maxSize = (containerWidth * 2) / 3;
|
||||
columnSizes.count = columns.length;
|
||||
|
||||
// columnSizes.setExtraordinaryIndexes(this.getHiddenColumnIndexes(), this.getFrozenColumnIndexes());
|
||||
columnSizes.setExtraordinaryIndexes([], []);
|
||||
|
||||
for (let colIndex = 0; colIndex < columns.length; colIndex++) {
|
||||
//this.columnSizes.PutSizeOverride(col, this.columns[col].Name.length * 8);
|
||||
let column = columns[colIndex];
|
||||
|
||||
// if (column.columnClientObject != null && column.columnClientObject.notNull) context.font = "bold 14px Helvetica";
|
||||
// else context.font = "14px Helvetica";
|
||||
context.font = 'bold 14px Helvetica';
|
||||
|
||||
let text = column.columnName;
|
||||
let headerWidth = context.measureText(text).width + 32;
|
||||
|
||||
// if (column.columnClientObject != null && column.columnClientObject.icon != null) headerWidth += 16;
|
||||
// if (this.getFilterOnColumn(column.uniquePath)) headerWidth += 16;
|
||||
// if (this.getSortOrder(column.uniquePath)) headerWidth += 16;
|
||||
|
||||
columnSizes.putSizeOverride(colIndex, headerWidth);
|
||||
}
|
||||
|
||||
// let headerWidth = this.rowHeaderWidthDefault;
|
||||
// if (this.rowCount) headerWidth = context.measureText(this.rowCount.toString()).width + 8;
|
||||
// this.rowHeaderWidth = this.rowHeaderWidthDefault;
|
||||
// if (headerWidth > this.rowHeaderWidth) this.rowHeaderWidth = headerWidth;
|
||||
|
||||
context.font = '14px Helvetica';
|
||||
for (let row of loadedRows) {
|
||||
for (let colIndex = 0; colIndex < columns.length; colIndex++) {
|
||||
let colName = columns[colIndex].columnName;
|
||||
let text = row[colName];
|
||||
let width = context.measureText(text).width + 8;
|
||||
// console.log('colName', colName, text, width);
|
||||
columnSizes.putSizeOverride(colIndex, width);
|
||||
// let colName = this.columns[colIndex].uniquePath;
|
||||
// let text: string = row[colName].gridText;
|
||||
// let width = context.measureText(text).width + 8;
|
||||
// if (row[colName].dataPrefix) width += context.measureText(row[colName].dataPrefix).width + 3;
|
||||
// this.columnSizes.putSizeOverride(colIndex, width);
|
||||
}
|
||||
}
|
||||
|
||||
// for (let modelIndex = 0; modelIndex < this.columns.length; modelIndex++) {
|
||||
// let width = getHashValue(this.widthHashPrefix + this.columns[modelIndex].uniquePath);
|
||||
// if (width) this.columnSizes.putSizeOverride(modelIndex, _.toNumber(width), true);
|
||||
// }
|
||||
|
||||
columnSizes.buildIndex();
|
||||
return columnSizes;
|
||||
}
|
||||
|
||||
// console.log('visibleRowCountUpperBound', visibleRowCountUpperBound);
|
||||
// console.log('gridScrollAreaHeight', gridScrollAreaHeight);
|
||||
// console.log('containerHeight', containerHeight);
|
||||
|
||||
const visibleColumnCount = columnSizes.getVisibleScrollCount(firstVisibleColumnScrollIndex, gridScrollAreaWidth);
|
||||
console.log('visibleColumnCount', visibleColumnCount);
|
||||
|
||||
const visibleRealColumnIndexes = [];
|
||||
const modelIndexes = {};
|
||||
/** @type {(import('@dbgate/datalib').DisplayColumn & {widthPx: string})[]} */
|
||||
const realColumns = [];
|
||||
|
||||
// frozen columns
|
||||
for (let colIndex = 0; colIndex < columnSizes.frozenCount; colIndex++) {
|
||||
visibleRealColumnIndexes.push(colIndex);
|
||||
}
|
||||
// scroll columns
|
||||
for (
|
||||
let colIndex = firstVisibleColumnScrollIndex;
|
||||
colIndex < firstVisibleColumnScrollIndex + visibleColumnCount;
|
||||
colIndex++
|
||||
) {
|
||||
visibleRealColumnIndexes.push(colIndex + columnSizes.frozenCount);
|
||||
}
|
||||
|
||||
// real columns
|
||||
for (let colIndex of visibleRealColumnIndexes) {
|
||||
let modelColumnIndex = columnSizes.realToModel(colIndex);
|
||||
modelIndexes[colIndex] = modelColumnIndex;
|
||||
|
||||
let col = columns[modelColumnIndex];
|
||||
if (!col) continue;
|
||||
const widthNumber = columnSizes.getSizeByRealIndex(colIndex);
|
||||
realColumns.push({
|
||||
...col,
|
||||
widthPx: `${widthNumber}px`,
|
||||
});
|
||||
}
|
||||
|
||||
console.log('visibleRealColumnIndexes', visibleRealColumnIndexes);
|
||||
|
||||
return (
|
||||
<GridContainer ref={containerRef}>
|
||||
<Table>
|
||||
<TableHead>
|
||||
<TableHeaderRow ref={headerRowRef}>
|
||||
{realColumns.map(col => (
|
||||
<TableHeaderCell
|
||||
key={col.columnName}
|
||||
style={{ width: col.widthPx, minWidth: col.widthPx, maxWidth: col.widthPx }}
|
||||
>
|
||||
{col.columnName}
|
||||
</TableHeaderCell>
|
||||
))}
|
||||
</TableHeaderRow>
|
||||
</TableHead>
|
||||
<TableBody ref={tableBodyRef}>
|
||||
{loadedRows
|
||||
.slice(firstVisibleRowScrollIndex, firstVisibleRowScrollIndex + visibleRowCountUpperBound)
|
||||
.map((row, index) => (
|
||||
<TableBodyRow key={firstVisibleRowScrollIndex + index}>
|
||||
{realColumns.map(col => (
|
||||
<TableBodyCell
|
||||
key={col.columnName}
|
||||
style={{ width: col.widthPx, minWidth: col.widthPx, maxWidth: col.widthPx }}
|
||||
>
|
||||
{row[col.columnName]}
|
||||
</TableBodyCell>
|
||||
))}
|
||||
</TableBodyRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
<HorizontalScrollBar
|
||||
minimum={0}
|
||||
maximum={columns.length - 1}
|
||||
viewportRatio={gridScrollAreaWidth / columnSizes.getVisibleScrollSizeSum()}
|
||||
onScroll={handleColumnScroll}
|
||||
/>
|
||||
<VerticalScrollBar
|
||||
minimum={0}
|
||||
maximum={rowCountNewIncluded - visibleRowCountUpperBound + 2}
|
||||
onScroll={handleRowScroll}
|
||||
viewportRatio={visibleRowCountUpperBound / rowCountNewIncluded}
|
||||
/>
|
||||
</GridContainer>
|
||||
<MainContainer>
|
||||
<ColumnManagerContainer>
|
||||
<ColumnManager {...props} />
|
||||
</ColumnManagerContainer>
|
||||
<DataGridContainer>
|
||||
<DataGridCore {...props} />
|
||||
</DataGridContainer>
|
||||
</MainContainer>
|
||||
);
|
||||
}
|
||||
|
||||
325
packages/web/src/datagrid/DataGridCore.js
Normal file
325
packages/web/src/datagrid/DataGridCore.js
Normal file
@@ -0,0 +1,325 @@
|
||||
import React from 'react';
|
||||
import useFetch from '../utility/useFetch';
|
||||
import styled from 'styled-components';
|
||||
import theme from '../theme';
|
||||
import { HorizontalScrollBar, VerticalScrollBar } from './ScrollBars';
|
||||
import useDimensions from '../utility/useDimensions';
|
||||
import { SeriesSizes } from './SeriesSizes';
|
||||
import axios from '../utility/axios';
|
||||
import ColumnLabel from './ColumnLabel';
|
||||
|
||||
const GridContainer = styled.div`
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
`;
|
||||
|
||||
const Table = styled.table`
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
overflow: scroll;
|
||||
border-collapse: collapse;
|
||||
`;
|
||||
const TableHead = styled.thead`
|
||||
// display: block;
|
||||
// width: 300px;
|
||||
`;
|
||||
const TableBody = styled.tbody`
|
||||
// display: block;
|
||||
// overflow: auto;
|
||||
// height: 100px;
|
||||
`;
|
||||
const TableHeaderRow = styled.tr`
|
||||
// height: 35px;
|
||||
`;
|
||||
const TableBodyRow = styled.tr`
|
||||
// height: 35px;
|
||||
background-color: #ffffff;
|
||||
&:nth-child(6n + 4) {
|
||||
background-color: #ebebeb;
|
||||
}
|
||||
&:nth-child(6n + 7) {
|
||||
background-color: #ebf5ff;
|
||||
}
|
||||
`;
|
||||
const TableHeaderCell = styled.td`
|
||||
// font-weight: bold;
|
||||
border: 1px solid #c0c0c0;
|
||||
// border-collapse: collapse;
|
||||
text-align: left;
|
||||
padding: 2px;
|
||||
background-color: #f6f7f9;
|
||||
overflow: hidden;
|
||||
`;
|
||||
const TableBodyCell = styled.td`
|
||||
font-weight: normal;
|
||||
border: 1px solid #c0c0c0;
|
||||
// border-collapse: collapse;
|
||||
padding: 2px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
`;
|
||||
|
||||
/** @param props {import('./types').DataGridProps} */
|
||||
export default function DataGridCore(props) {
|
||||
const { conid, database, display } = props;
|
||||
const columns = display.columns;
|
||||
|
||||
// console.log(`GRID, conid=${conid}, database=${database}, sql=${sql}`);
|
||||
const [loadProps, setLoadProps] = React.useState({
|
||||
isLoading: false,
|
||||
loadedRows: [],
|
||||
isLoadedAll: false,
|
||||
loadedTime: new Date().getTime(),
|
||||
});
|
||||
const { isLoading, loadedRows, isLoadedAll, loadedTime } = loadProps;
|
||||
|
||||
const loadedTimeRef = React.useRef(0);
|
||||
|
||||
const loadNextData = async () => {
|
||||
if (isLoading) return;
|
||||
setLoadProps({
|
||||
...loadProps,
|
||||
isLoading: true,
|
||||
});
|
||||
const loadStart = new Date().getTime();
|
||||
loadedTimeRef.current = loadStart;
|
||||
|
||||
const sql = display.getPageQuery(loadedRows.length, 100);
|
||||
|
||||
let response = await axios.request({
|
||||
url: 'database-connections/query-data',
|
||||
method: 'post',
|
||||
params: {
|
||||
conid,
|
||||
database,
|
||||
},
|
||||
data: { sql },
|
||||
});
|
||||
if (loadedTimeRef.current !== loadStart) {
|
||||
// new load was dispatched
|
||||
return;
|
||||
}
|
||||
// if (!_.isArray(nextRows)) {
|
||||
// console.log('Error loading data from server', nextRows);
|
||||
// nextRows = [];
|
||||
// }
|
||||
const { rows: nextRows } = response.data;
|
||||
console.log('nextRows', nextRows);
|
||||
const loadedInfo = {
|
||||
loadedRows: [...loadedRows, ...nextRows],
|
||||
loadedTime,
|
||||
isLoadedAll: nextRows.length === 0,
|
||||
};
|
||||
setLoadProps({
|
||||
...loadProps,
|
||||
isLoading: false,
|
||||
...loadedInfo,
|
||||
});
|
||||
};
|
||||
|
||||
// const data = useFetch({
|
||||
// url: 'database-connections/query-data',
|
||||
// method: 'post',
|
||||
// params: {
|
||||
// conid,
|
||||
// database,
|
||||
// },
|
||||
// data: { sql },
|
||||
// });
|
||||
// const { rows, columns } = data || {};
|
||||
const [firstVisibleRowScrollIndex, setFirstVisibleRowScrollIndex] = React.useState(0);
|
||||
const [firstVisibleColumnScrollIndex, setFirstVisibleColumnScrollIndex] = React.useState(0);
|
||||
|
||||
const [headerRowRef, { height: rowHeight }] = useDimensions();
|
||||
const [tableBodyRef] = useDimensions();
|
||||
const [containerRef, { height: containerHeight, width: containerWidth }] = useDimensions();
|
||||
|
||||
const columnSizes = React.useMemo(() => countColumnSizes(), [loadedRows, containerWidth, display]);
|
||||
|
||||
console.log('containerWidth', containerWidth);
|
||||
|
||||
const gridScrollAreaHeight = containerHeight - 2 * rowHeight;
|
||||
const gridScrollAreaWidth = containerWidth - columnSizes.frozenSize;
|
||||
|
||||
const visibleRowCountUpperBound = Math.ceil(gridScrollAreaHeight / Math.floor(rowHeight));
|
||||
const visibleRowCountLowerBound = Math.floor(gridScrollAreaHeight / Math.ceil(rowHeight));
|
||||
// const visibleRowCountUpperBound = 20;
|
||||
// const visibleRowCountLowerBound = 20;
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!isLoadedAll && firstVisibleRowScrollIndex + visibleRowCountUpperBound >= loadedRows.length) {
|
||||
loadNextData();
|
||||
}
|
||||
});
|
||||
|
||||
if (!loadedRows || !columns) return null;
|
||||
const rowCountNewIncluded = loadedRows.length;
|
||||
|
||||
const handleRowScroll = value => {
|
||||
setFirstVisibleRowScrollIndex(value);
|
||||
};
|
||||
|
||||
const handleColumnScroll = value => {
|
||||
setFirstVisibleColumnScrollIndex(value);
|
||||
};
|
||||
|
||||
function countColumnSizes() {
|
||||
let canvas = document.createElement('canvas');
|
||||
let context = canvas.getContext('2d');
|
||||
|
||||
//return this.context.measureText(txt).width;
|
||||
const columnSizes = new SeriesSizes();
|
||||
if (!loadedRows || !columns) return columnSizes;
|
||||
|
||||
console.log('countColumnSizes', loadedRows.length, containerWidth);
|
||||
|
||||
columnSizes.maxSize = (containerWidth * 2) / 3;
|
||||
columnSizes.count = columns.length;
|
||||
|
||||
// columnSizes.setExtraordinaryIndexes(this.getHiddenColumnIndexes(), this.getFrozenColumnIndexes());
|
||||
console.log('display.hiddenColumnIndexes', display.hiddenColumnIndexes)
|
||||
|
||||
columnSizes.setExtraordinaryIndexes(display.hiddenColumnIndexes, []);
|
||||
|
||||
for (let colIndex = 0; colIndex < columns.length; colIndex++) {
|
||||
//this.columnSizes.PutSizeOverride(col, this.columns[col].Name.length * 8);
|
||||
const column = columns[colIndex];
|
||||
|
||||
// if (column.columnClientObject != null && column.columnClientObject.notNull) context.font = "bold 14px Helvetica";
|
||||
// else context.font = "14px Helvetica";
|
||||
context.font = 'bold 14px Helvetica';
|
||||
|
||||
let text = column.headerText;
|
||||
let headerWidth = context.measureText(text).width + 32;
|
||||
|
||||
// if (column.columnClientObject != null && column.columnClientObject.icon != null) headerWidth += 16;
|
||||
// if (this.getFilterOnColumn(column.uniquePath)) headerWidth += 16;
|
||||
// if (this.getSortOrder(column.uniquePath)) headerWidth += 16;
|
||||
|
||||
columnSizes.putSizeOverride(colIndex, headerWidth);
|
||||
}
|
||||
|
||||
// let headerWidth = this.rowHeaderWidthDefault;
|
||||
// if (this.rowCount) headerWidth = context.measureText(this.rowCount.toString()).width + 8;
|
||||
// this.rowHeaderWidth = this.rowHeaderWidthDefault;
|
||||
// if (headerWidth > this.rowHeaderWidth) this.rowHeaderWidth = headerWidth;
|
||||
|
||||
context.font = '14px Helvetica';
|
||||
for (let row of loadedRows) {
|
||||
for (let colIndex = 0; colIndex < columns.length; colIndex++) {
|
||||
let uqName = columns[colIndex].uniqueName;
|
||||
let text = row[uqName];
|
||||
let width = context.measureText(text).width + 8;
|
||||
// console.log('colName', colName, text, width);
|
||||
columnSizes.putSizeOverride(colIndex, width);
|
||||
// let colName = this.columns[colIndex].uniquePath;
|
||||
// let text: string = row[colName].gridText;
|
||||
// let width = context.measureText(text).width + 8;
|
||||
// if (row[colName].dataPrefix) width += context.measureText(row[colName].dataPrefix).width + 3;
|
||||
// this.columnSizes.putSizeOverride(colIndex, width);
|
||||
}
|
||||
}
|
||||
|
||||
// for (let modelIndex = 0; modelIndex < this.columns.length; modelIndex++) {
|
||||
// let width = getHashValue(this.widthHashPrefix + this.columns[modelIndex].uniquePath);
|
||||
// if (width) this.columnSizes.putSizeOverride(modelIndex, _.toNumber(width), true);
|
||||
// }
|
||||
|
||||
columnSizes.buildIndex();
|
||||
return columnSizes;
|
||||
}
|
||||
|
||||
// console.log('visibleRowCountUpperBound', visibleRowCountUpperBound);
|
||||
// console.log('gridScrollAreaHeight', gridScrollAreaHeight);
|
||||
// console.log('containerHeight', containerHeight);
|
||||
|
||||
const visibleColumnCount = columnSizes.getVisibleScrollCount(firstVisibleColumnScrollIndex, gridScrollAreaWidth);
|
||||
console.log('visibleColumnCount', visibleColumnCount);
|
||||
|
||||
const visibleRealColumnIndexes = [];
|
||||
const modelIndexes = {};
|
||||
/** @type {(import('@dbgate/datalib').DisplayColumn & {widthPx: string})[]} */
|
||||
const realColumns = [];
|
||||
|
||||
// frozen columns
|
||||
for (let colIndex = 0; colIndex < columnSizes.frozenCount; colIndex++) {
|
||||
visibleRealColumnIndexes.push(colIndex);
|
||||
}
|
||||
// scroll columns
|
||||
for (
|
||||
let colIndex = firstVisibleColumnScrollIndex;
|
||||
colIndex < firstVisibleColumnScrollIndex + visibleColumnCount;
|
||||
colIndex++
|
||||
) {
|
||||
visibleRealColumnIndexes.push(colIndex + columnSizes.frozenCount);
|
||||
}
|
||||
|
||||
// real columns
|
||||
for (let colIndex of visibleRealColumnIndexes) {
|
||||
let modelColumnIndex = columnSizes.realToModel(colIndex);
|
||||
modelIndexes[colIndex] = modelColumnIndex;
|
||||
|
||||
let col = columns[modelColumnIndex];
|
||||
if (!col) continue;
|
||||
const widthNumber = columnSizes.getSizeByRealIndex(colIndex);
|
||||
realColumns.push({
|
||||
...col,
|
||||
widthPx: `${widthNumber}px`,
|
||||
});
|
||||
}
|
||||
|
||||
console.log('visibleRealColumnIndexes', visibleRealColumnIndexes);
|
||||
|
||||
return (
|
||||
<GridContainer ref={containerRef}>
|
||||
<Table>
|
||||
<TableHead>
|
||||
<TableHeaderRow ref={headerRowRef}>
|
||||
{realColumns.map(col => (
|
||||
<TableHeaderCell
|
||||
key={col.columnName}
|
||||
style={{ width: col.widthPx, minWidth: col.widthPx, maxWidth: col.widthPx }}
|
||||
>
|
||||
<ColumnLabel {...col} />
|
||||
</TableHeaderCell>
|
||||
))}
|
||||
</TableHeaderRow>
|
||||
</TableHead>
|
||||
<TableBody ref={tableBodyRef}>
|
||||
{loadedRows
|
||||
.slice(firstVisibleRowScrollIndex, firstVisibleRowScrollIndex + visibleRowCountUpperBound)
|
||||
.map((row, index) => (
|
||||
<TableBodyRow key={firstVisibleRowScrollIndex + index}>
|
||||
{realColumns.map(col => (
|
||||
<TableBodyCell
|
||||
key={col.columnName}
|
||||
style={{ width: col.widthPx, minWidth: col.widthPx, maxWidth: col.widthPx }}
|
||||
>
|
||||
{row[col.columnName]}
|
||||
</TableBodyCell>
|
||||
))}
|
||||
</TableBodyRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
<HorizontalScrollBar
|
||||
minimum={0}
|
||||
maximum={columns.length - 1}
|
||||
viewportRatio={gridScrollAreaWidth / columnSizes.getVisibleScrollSizeSum()}
|
||||
onScroll={handleColumnScroll}
|
||||
/>
|
||||
<VerticalScrollBar
|
||||
minimum={0}
|
||||
maximum={rowCountNewIncluded - visibleRowCountUpperBound + 2}
|
||||
onScroll={handleRowScroll}
|
||||
viewportRatio={visibleRowCountUpperBound / rowCountNewIncluded}
|
||||
/>
|
||||
</GridContainer>
|
||||
);
|
||||
}
|
||||
@@ -219,12 +219,12 @@ export class SeriesSizes {
|
||||
let index = firstVisibleIndex;
|
||||
let count = 0;
|
||||
while (res < viewportSize && index <= this.scrollCount) {
|
||||
console.log('this.getSizeByScrollIndex(index)', this.getSizeByScrollIndex(index));
|
||||
// console.log('this.getSizeByScrollIndex(index)', this.getSizeByScrollIndex(index));
|
||||
res += this.getSizeByScrollIndex(index);
|
||||
index++;
|
||||
count++;
|
||||
}
|
||||
console.log('getVisibleScrollCount', firstVisibleIndex, viewportSize, count);
|
||||
// console.log('getVisibleScrollCount', firstVisibleIndex, viewportSize, count);
|
||||
return count;
|
||||
}
|
||||
getVisibleScrollCountReversed(lastVisibleIndex, viewportSize) {
|
||||
|
||||
7
packages/web/src/datagrid/types.ts
Normal file
7
packages/web/src/datagrid/types.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
import { GridDisplay } from '@dbgate/datalib';
|
||||
|
||||
export interface DataGridProps {
|
||||
conid: number;
|
||||
database: string;
|
||||
display: GridDisplay;
|
||||
}
|
||||
Reference in New Issue
Block a user