mirrors/dbgate
1
0
Fork 0
mirror of https://github.com/dbgate/dbgate synced 2024-11-07 20:26:23 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

cell data view for form view

Browse Source
This commit is contained in:
Jan Prochazka 2021-01-11 18:03:22 +01:00
parent 49849820e8
commit 817efb1c72
3 changed files with 23 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/web/src/celldata/CellDataView.js
View File

@ -52,15 +52,18 @@ function autodetect(selection, grider, value) {
return 'textWrap'; return 'textWrap';
} }
export default function CellDataView({ selection, grider }) { export default function CellDataView({ selection = undefined, grider = undefined, selectedValue = undefined }) {
const [selectedFormatType, setSelectedFormatType] = React.useState('autodetect'); const [selectedFormatType, setSelectedFormatType] = React.useState('autodetect');
const theme = useTheme(); const theme = useTheme();
let value = null; let value = null;
if (grider && selection.length == 1) { if (grider && selection && selection.length == 1) {
const rowData = grider.getRowData(selection[0].row); const rowData = grider.getRowData(selection[0].row);
const { column } = selection[0]; const { column } = selection[0];
if (rowData) value = rowData[column]; if (rowData) value = rowData[column];
} }
if (selectedValue) {
value = selectedValue;
}
const autodetectFormatType = React.useMemo(() => autodetect(selection, grider, value), [selection, grider, value]); const autodetectFormatType = React.useMemo(() => autodetect(selection, grider, value), [selection, grider, value]);
const autodetectFormat = formats.find((x) => x.type == autodetectFormatType); const autodetectFormat = formats.find((x) => x.type == autodetectFormatType);

9
packages/web/src/datagrid/DataGrid.js
View File

@ -25,6 +25,7 @@ export default function DataGrid(props) {
const theme = useTheme(); const theme = useTheme();
const [managerSize, setManagerSize] = React.useState(0); const [managerSize, setManagerSize] = React.useState(0);
const [selection, setSelection] = React.useState([]); const [selection, setSelection] = React.useState([]);
const [formSelection, setFormSelection] = React.useState(null);
const [grider, setGrider] = React.useState(null); const [grider, setGrider] = React.useState(null);
// const [formViewData, setFormViewData] = React.useState(null); // const [formViewData, setFormViewData] = React.useState(null);
const isFormView = !!(config && config.isFormView); const isFormView = !!(config && config.isFormView);
@ -43,17 +44,19 @@ export default function DataGrid(props) {
<ReferenceManager {...props} managerSize={managerSize} /> <ReferenceManager {...props} managerSize={managerSize} />
</WidgetColumnBarItem> </WidgetColumnBarItem>
)} )}
{!isFormView && (
<WidgetColumnBarItem title="Cell data" name="cellData" collapsed={props.isDetailView}> <WidgetColumnBarItem title="Cell data" name="cellData" collapsed={props.isDetailView}>
{isFormView ? (
<CellDataView selectedValue={formSelection} />
) : (
<CellDataView selection={selection} grider={grider} /> <CellDataView selection={selection} grider={grider} />
</WidgetColumnBarItem>
)} )}
</WidgetColumnBarItem>
</WidgetColumnBar> </WidgetColumnBar>
</LeftContainer> </LeftContainer>
<DataGridContainer> <DataGridContainer>
{isFormView ? ( {isFormView ? (
<FormView {...props} /> <FormView {...props} onSelectionChanged={setFormSelection} />
) : ( ) : (
<GridCore <GridCore
{...props} {...props}

10
packages/web/src/formview/FormView.js
View File

@ -65,7 +65,9 @@ const TableBodyCell = styled.td`
padding: 2px; padding: 2px;
white-space: nowrap; white-space: nowrap;
position: relative; position: relative;
max-width: 500px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis;
${(props) => ${(props) =>
props.isSelected && props.isSelected &&
@ -119,6 +121,7 @@ export default function FormView(props) {
onReconnect, onReconnect,
allRowCount, allRowCount,
rowCountBefore, rowCountBefore,
onSelectionChanged,
} = props; } = props;
/** @type {import('dbgate-datalib').FormViewDisplay} */ /** @type {import('dbgate-datalib').FormViewDisplay} */
const formDisplay = props.formDisplay; const formDisplay = props.formDisplay;
@ -162,6 +165,13 @@ export default function FormView(props) {
} }
}, [tabVisible, focusFieldRef.current]); }, [tabVisible, focusFieldRef.current]);
React.useEffect(() => {
if (!onSelectionChanged || !rowData) return;
const col = getCellColumn(currentCell);
if (!col) return;
onSelectionChanged(rowData[col.uniqueName]);
}, [onSelectionChanged, currentCell, rowData]);
const checkMoveCursorBounds = (row, col) => { const checkMoveCursorBounds = (row, col) => {
if (row < 0) row = 0; if (row < 0) row = 0;
if (col < 0) col = 0; if (col < 0) col = 0;