From 19c86a1c6bf42070e9c53a8f3023784d668cbfa3 Mon Sep 17 00:00:00 2001 From: Naumov Alexey Date: Wed, 7 Jul 2021 18:23:22 +0300 Subject: [PATCH 1/3] refactor(plugin-data-spreadsheet-new): CB-1047 revert valuePanel behaviour --- .../src/DataGrid/CellRenderer/CellRenderer.tsx | 7 +++++-- .../DataGridContextMenuCellEditingService.ts | 5 ++++- .../Formatters/CellFormatterFactory.tsx | 18 ++++++++++++++---- .../CellFormatters/BooleanFormatter.tsx | 11 ++++++----- .../CellFormatters/isBooleanFormatter.ts | 16 ++++++++++++++++ .../DatabaseDataModel/DatabaseDataEditor.ts | 4 ++++ .../TextValue/TextValuePresentation.tsx | 5 +---- 7 files changed, 50 insertions(+), 16 deletions(-) create mode 100644 webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatters/isBooleanFormatter.ts diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/CellRenderer/CellRenderer.tsx b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/CellRenderer/CellRenderer.tsx index 5c06a79145..96439902ef 100644 --- a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/CellRenderer/CellRenderer.tsx +++ b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/CellRenderer/CellRenderer.tsx @@ -17,6 +17,7 @@ import { ResultSetFormatAction } from '@cloudbeaver/plugin-data-viewer'; import { EditingContext } from '../../Editing/EditingContext'; import { DataGridContext } from '../DataGridContext'; import { DataGridSelectionContext } from '../DataGridSelection/DataGridSelectionContext'; +import { isBooleanFormatter } from '../Formatters/CellFormatters/isBooleanFormatter'; import { TableDataContext } from '../TableDataContext'; import { CellContext, ICellContext } from './CellContext'; @@ -79,7 +80,9 @@ export const CellRenderer: React.FC> = observer(function }, [column, rowIdx, selectionContext, dataGridContext]); const handleDoubleClick = useCallback(() => { - if (!column.editable || resultColumn?.dataKind?.toLowerCase() === 'boolean') { + if (!column.editable || ( + resultColumn && isBooleanFormatter(editor?.getCell(rowIdx, Number(column.key)), resultColumn) + )) { return; } const format = dataGridContext?.model.source.getAction(dataGridContext.resultIndex, ResultSetFormatAction); @@ -96,7 +99,7 @@ export const CellRenderer: React.FC> = observer(function } editingContext?.edit({ idx: column.idx, rowIdx }); - }, [column, rowIdx, props.row]); + }, [column, rowIdx, props.row, editor, resultColumn]); const row = editor?.get(rowIdx) || props.row; diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/DataGridContextMenu/DataGridContextMenuCellEditingService.ts b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/DataGridContextMenu/DataGridContextMenuCellEditingService.ts index 1f5106af15..3d51c21953 100644 --- a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/DataGridContextMenu/DataGridContextMenuCellEditingService.ts +++ b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/DataGridContextMenu/DataGridContextMenuCellEditingService.ts @@ -9,6 +9,7 @@ import { injectable } from '@cloudbeaver/core-di'; import { ResultSetDataAction, ResultSetFormatAction } from '@cloudbeaver/plugin-data-viewer'; +import { isBooleanFormatter } from '../Formatters/CellFormatters/isBooleanFormatter'; import { DataGridContextMenuService } from './DataGridContextMenuService'; @injectable() @@ -50,13 +51,15 @@ export class DataGridContextMenuCellEditingService { }, isHidden(context) { const data = context.data.model.source.getAction(context.data.resultIndex, ResultSetDataAction); + const editor = context.data.model.source.getEditor(context.data.resultIndex); + const cellValue = editor.getCell(context.data.row, context.data.column); const column = data.getColumn(context.data.column); if (!column) { return true; } - return column.dataKind?.toLowerCase() === 'boolean'; + return isBooleanFormatter(cellValue, column); }, order: 0, title: 'data_grid_table_editing_open_inline_editor', diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatterFactory.tsx b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatterFactory.tsx index 2b59c69688..6b4d6642f7 100644 --- a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatterFactory.tsx +++ b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatterFactory.tsx @@ -6,28 +6,38 @@ * you may not use this file except in compliance with the License. */ -import { useContext } from 'react'; +import { useContext, useRef } from 'react'; import type { FormatterProps } from 'react-data-grid'; import { ResultSetFormatAction } from '@cloudbeaver/plugin-data-viewer'; +import { EditingContext } from '../../Editing/EditingContext'; import { DataGridContext } from '../DataGridContext'; import { TableDataContext } from '../TableDataContext'; import { BooleanFormatter } from './CellFormatters/BooleanFormatter'; +import { isBooleanFormatter } from './CellFormatters/isBooleanFormatter'; import { TextFormatter } from './CellFormatters/TextFormatter'; export const CellFormatterFactory: React.FC = function CellFormatterFactory(props) { + const formatterRef = useRef | null>(null); const context = useContext(DataGridContext); const tableDataContext = useContext(TableDataContext); const formatter = context?.model.source.getAction(context.resultIndex, ResultSetFormatAction); + const editingContext = useContext(EditingContext); + const isEditing = editingContext?.isEditing({ idx: props.column.idx, rowIdx: props.rowIdx }); + const resultColumn = tableDataContext?.getColumnInfo(props.column.key); const rawValue = formatter?.get(props.row[props.column.key]) ?? props.row[props.column.key]; - let Formatter: React.FC = TextFormatter; + if (!isEditing || formatterRef === null) { + formatterRef.current = TextFormatter; - if (resultColumn?.dataKind?.toLowerCase() === 'boolean' && (typeof rawValue === 'boolean' || formatter?.isNull(rawValue))) { - Formatter = BooleanFormatter; + if (resultColumn && isBooleanFormatter(rawValue, resultColumn)) { + formatterRef.current = BooleanFormatter; + } } + const Formatter = formatterRef.current!; + return ; }; diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatters/BooleanFormatter.tsx b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatters/BooleanFormatter.tsx index 25df1d6c76..773eaa31e8 100644 --- a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatters/BooleanFormatter.tsx +++ b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatters/BooleanFormatter.tsx @@ -42,8 +42,9 @@ export const BooleanFormatter: React.FC = observer(function Bool const formatter = context?.model.source.getAction(context.resultIndex, ResultSetFormatAction); const resultColumn = tableDataContext?.getColumnInfo(column.key); const rawValue = formatter?.get(row[column.key]) ?? row[column.key]; - const stringifiedValue = formatter?.toDisplayString(rawValue) ?? String(rawValue); - const value = rawValue === null ? stringifiedValue : `[${rawValue ? 'v' : ' '}]`; + const value = typeof rawValue === 'string' ? rawValue.toLowerCase() === 'true' : rawValue; + const stringifiedValue = formatter?.toDisplayString(value) ?? String(value); + const valueRepresentation = value === null ? stringifiedValue : `[${value ? 'v' : ' '}]`; const classes = getClasses(rawValue); const getNextValue = useCallback((prev: boolean | null) => { @@ -60,10 +61,10 @@ export const BooleanFormatter: React.FC = observer(function Bool as='span' title={stringifiedValue} onClick={() => context?.model.source.getEditor(context.resultIndex) - .setCell(rowIdx, Number(column.key), getNextValue(rawValue))} - {...use({ boolean: rawValue !== null })} + .setCell(rowIdx, Number(column.key), getNextValue(value))} + {...use({ boolean: value !== null })} > - {value} + {valueRepresentation} ); }); diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatters/isBooleanFormatter.ts b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatters/isBooleanFormatter.ts new file mode 100644 index 0000000000..90396a3e68 --- /dev/null +++ b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatters/isBooleanFormatter.ts @@ -0,0 +1,16 @@ +/* + * CloudBeaver - Cloud Database Manager + * Copyright (C) 2020-2021 DBeaver Corp and others + * + * Licensed under the Apache License, Version 2.0. + * you may not use this file except in compliance with the License. + */ + +import type { SqlResultColumn } from '@cloudbeaver/core-sdk'; +import type { IResultSetValue } from '@cloudbeaver/plugin-data-viewer'; + +export function isBooleanFormatter(cellValue: IResultSetValue, column: SqlResultColumn): boolean { + return column?.dataKind?.toLowerCase() === 'boolean' && ( + (typeof cellValue === 'boolean' || (typeof cellValue === 'string' && (cellValue.toLowerCase() === 'false' || cellValue.toLowerCase() === 'true'))) || cellValue === null + ); +} diff --git a/webapp/packages/plugin-data-viewer/src/DatabaseDataModel/DatabaseDataEditor.ts b/webapp/packages/plugin-data-viewer/src/DatabaseDataModel/DatabaseDataEditor.ts index 8676dc4470..afdf7d3048 100644 --- a/webapp/packages/plugin-data-viewer/src/DatabaseDataModel/DatabaseDataEditor.ts +++ b/webapp/packages/plugin-data-viewer/src/DatabaseDataModel/DatabaseDataEditor.ts @@ -299,6 +299,10 @@ export class DatabaseDataEditor implements return String(valueA) === String(valueB); } + if (typeof valueA === 'boolean' || typeof valueB === 'boolean') { + return String(valueA).toLowerCase() === String(valueB).toLowerCase(); + } + if (isResultSetContentValue(valueA) && isResultSetContentValue(valueB)) { if ('text' in valueA && 'text' in valueB) { return valueA.text === valueB.text; diff --git a/webapp/packages/plugin-data-viewer/src/ValuePanelPresentation/TextValue/TextValuePresentation.tsx b/webapp/packages/plugin-data-viewer/src/ValuePanelPresentation/TextValue/TextValuePresentation.tsx index 0696cc4646..d0cb39c99d 100644 --- a/webapp/packages/plugin-data-viewer/src/ValuePanelPresentation/TextValue/TextValuePresentation.tsx +++ b/webapp/packages/plugin-data-viewer/src/ValuePanelPresentation/TextValue/TextValuePresentation.tsx @@ -17,7 +17,6 @@ import { CodeEditorLoader } from '@cloudbeaver/plugin-codemirror'; import type { IResultSetElementKey } from '../../DatabaseDataModel/Actions/ResultSet/IResultSetElementKey'; import { isResultSetContentValue } from '../../DatabaseDataModel/Actions/ResultSet/isResultSetContentValue'; -import { ResultSetDataAction } from '../../DatabaseDataModel/Actions/ResultSet/ResultSetDataAction'; import { ResultSetFormatAction } from '../../DatabaseDataModel/Actions/ResultSet/ResultSetFormatAction'; import { ResultSetSelectAction } from '../../DatabaseDataModel/Actions/ResultSet/ResultSetSelectAction'; import type { IDatabaseResultSet } from '../../DatabaseDataModel/IDatabaseResultSet'; @@ -93,7 +92,6 @@ export const TextValuePresentation: TabContainerPanelComponent Date: Wed, 7 Jul 2021 19:02:37 +0300 Subject: [PATCH 2/3] refactor(plugin-data-spreadsheet-new): CB-1047 --- .../Formatters/CellFormatters/isBooleanFormatter.ts | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatters/isBooleanFormatter.ts b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatters/isBooleanFormatter.ts index 90396a3e68..b7f8826f9e 100644 --- a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatters/isBooleanFormatter.ts +++ b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatters/isBooleanFormatter.ts @@ -10,7 +10,10 @@ import type { SqlResultColumn } from '@cloudbeaver/core-sdk'; import type { IResultSetValue } from '@cloudbeaver/plugin-data-viewer'; export function isBooleanFormatter(cellValue: IResultSetValue, column: SqlResultColumn): boolean { - return column?.dataKind?.toLowerCase() === 'boolean' && ( - (typeof cellValue === 'boolean' || (typeof cellValue === 'string' && (cellValue.toLowerCase() === 'false' || cellValue.toLowerCase() === 'true'))) || cellValue === null - ); + return column?.dataKind?.toLowerCase() === 'boolean' + && ( + typeof cellValue === 'boolean' + || cellValue === null + || (typeof cellValue === 'string' && ['false', 'true'].includes(cellValue.toLowerCase())) + ); } From b7eff23911c35abc74aac6be06f576101f2b6975 Mon Sep 17 00:00:00 2001 From: Naumov Alexey Date: Wed, 7 Jul 2021 19:21:10 +0300 Subject: [PATCH 3/3] refactor(plugin-data-spreadsheet-new): CB-1047 naming --- .../src/DataGrid/CellRenderer/CellRenderer.tsx | 4 ++-- .../DataGridContextMenuCellEditingService.ts | 4 ++-- .../src/DataGrid/Formatters/CellFormatterFactory.tsx | 4 ++-- .../{isBooleanFormatter.ts => isBooleanFormatterAvailable.ts} | 2 +- 4 files changed, 7 insertions(+), 7 deletions(-) rename webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatters/{isBooleanFormatter.ts => isBooleanFormatterAvailable.ts} (84%) diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/CellRenderer/CellRenderer.tsx b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/CellRenderer/CellRenderer.tsx index 96439902ef..b6c85fe958 100644 --- a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/CellRenderer/CellRenderer.tsx +++ b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/CellRenderer/CellRenderer.tsx @@ -17,7 +17,7 @@ import { ResultSetFormatAction } from '@cloudbeaver/plugin-data-viewer'; import { EditingContext } from '../../Editing/EditingContext'; import { DataGridContext } from '../DataGridContext'; import { DataGridSelectionContext } from '../DataGridSelection/DataGridSelectionContext'; -import { isBooleanFormatter } from '../Formatters/CellFormatters/isBooleanFormatter'; +import { isBooleanFormatterAvailable } from '../Formatters/CellFormatters/isBooleanFormatterAvailable'; import { TableDataContext } from '../TableDataContext'; import { CellContext, ICellContext } from './CellContext'; @@ -81,7 +81,7 @@ export const CellRenderer: React.FC> = observer(function const handleDoubleClick = useCallback(() => { if (!column.editable || ( - resultColumn && isBooleanFormatter(editor?.getCell(rowIdx, Number(column.key)), resultColumn) + resultColumn && isBooleanFormatterAvailable(editor?.getCell(rowIdx, Number(column.key)), resultColumn) )) { return; } diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/DataGridContextMenu/DataGridContextMenuCellEditingService.ts b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/DataGridContextMenu/DataGridContextMenuCellEditingService.ts index 3d51c21953..8fb0d652fd 100644 --- a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/DataGridContextMenu/DataGridContextMenuCellEditingService.ts +++ b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/DataGridContextMenu/DataGridContextMenuCellEditingService.ts @@ -9,7 +9,7 @@ import { injectable } from '@cloudbeaver/core-di'; import { ResultSetDataAction, ResultSetFormatAction } from '@cloudbeaver/plugin-data-viewer'; -import { isBooleanFormatter } from '../Formatters/CellFormatters/isBooleanFormatter'; +import { isBooleanFormatterAvailable } from '../Formatters/CellFormatters/isBooleanFormatterAvailable'; import { DataGridContextMenuService } from './DataGridContextMenuService'; @injectable() @@ -59,7 +59,7 @@ export class DataGridContextMenuCellEditingService { return true; } - return isBooleanFormatter(cellValue, column); + return isBooleanFormatterAvailable(cellValue, column); }, order: 0, title: 'data_grid_table_editing_open_inline_editor', diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatterFactory.tsx b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatterFactory.tsx index 6b4d6642f7..631062b0c6 100644 --- a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatterFactory.tsx +++ b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatterFactory.tsx @@ -15,7 +15,7 @@ import { EditingContext } from '../../Editing/EditingContext'; import { DataGridContext } from '../DataGridContext'; import { TableDataContext } from '../TableDataContext'; import { BooleanFormatter } from './CellFormatters/BooleanFormatter'; -import { isBooleanFormatter } from './CellFormatters/isBooleanFormatter'; +import { isBooleanFormatterAvailable } from './CellFormatters/isBooleanFormatterAvailable'; import { TextFormatter } from './CellFormatters/TextFormatter'; export const CellFormatterFactory: React.FC = function CellFormatterFactory(props) { @@ -32,7 +32,7 @@ export const CellFormatterFactory: React.FC = function CellForma if (!isEditing || formatterRef === null) { formatterRef.current = TextFormatter; - if (resultColumn && isBooleanFormatter(rawValue, resultColumn)) { + if (resultColumn && isBooleanFormatterAvailable(rawValue, resultColumn)) { formatterRef.current = BooleanFormatter; } } diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatters/isBooleanFormatter.ts b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatters/isBooleanFormatterAvailable.ts similarity index 84% rename from webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatters/isBooleanFormatter.ts rename to webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatters/isBooleanFormatterAvailable.ts index b7f8826f9e..b912cde48c 100644 --- a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatters/isBooleanFormatter.ts +++ b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatters/isBooleanFormatterAvailable.ts @@ -9,7 +9,7 @@ import type { SqlResultColumn } from '@cloudbeaver/core-sdk'; import type { IResultSetValue } from '@cloudbeaver/plugin-data-viewer'; -export function isBooleanFormatter(cellValue: IResultSetValue, column: SqlResultColumn): boolean { +export function isBooleanFormatterAvailable(cellValue: IResultSetValue, column: SqlResultColumn): boolean { return column?.dataKind?.toLowerCase() === 'boolean' && ( typeof cellValue === 'boolean'