diff --git a/packages/datalib/src/FormViewDisplay.ts b/packages/datalib/src/FormViewDisplay.ts index cfbe5cd1..9b3eac39 100644 --- a/packages/datalib/src/FormViewDisplay.ts +++ b/packages/datalib/src/FormViewDisplay.ts @@ -22,4 +22,29 @@ export class FormViewDisplay { public dbinfo: DatabaseInfo = null ) {} + addFilterColumn(column) { + if (!column) return; + this.setConfig((cfg) => ({ + ...cfg, + formFilterColumns: [...(cfg.formFilterColumns || []), column.uniqueName], + })); + } + + setFilter(uniqueName, value) { + this.setConfig((cfg) => ({ + ...cfg, + filters: { + ...cfg.filters, + [uniqueName]: value, + }, + })); + } + + removeFilter(uniqueName) { + this.setConfig((cfg) => ({ + ...cfg, + formFilterColumns: (cfg.formFilterColumns || []).filter((x) => x != uniqueName), + filters: _.omit(cfg.filters || [], uniqueName), + })); + } } diff --git a/packages/datalib/src/GridConfig.ts b/packages/datalib/src/GridConfig.ts index 80a37edd..f0f2d96e 100644 --- a/packages/datalib/src/GridConfig.ts +++ b/packages/datalib/src/GridConfig.ts @@ -31,6 +31,8 @@ export interface GridConfig extends GridConfigColumns { reference?: GridReferenceDefinition; isFormView?: boolean; formViewKey?: { [uniqueName: string]: string }; + formViewKeyRequested?: { [uniqueName: string]: string }; + formFilterColumns: string[]; } export interface GridCache { @@ -47,6 +49,7 @@ export function createGridConfig(): GridConfig { sort: [], focusedColumn: null, grouping: {}, + formFilterColumns: [], }; } diff --git a/packages/web/src/datagrid/DataGrid.js b/packages/web/src/datagrid/DataGrid.js index 0faa4227..f284716e 100644 --- a/packages/web/src/datagrid/DataGrid.js +++ b/packages/web/src/datagrid/DataGrid.js @@ -1,12 +1,12 @@ import React from 'react'; import styled from 'styled-components'; import ColumnManager from './ColumnManager'; +import FormViewFilters from '../formview/FormViewFilters'; import ReferenceManager from './ReferenceManager'; import { HorizontalSplitter } from '../widgets/Splitter'; import WidgetColumnBar, { WidgetColumnBarItem } from '../widgets/WidgetColumnBar'; import CellDataView from '../celldata/CellDataView'; -import { FreeTableGridDisplay } from 'dbgate-datalib'; import useTheme from '../theme/useTheme'; const LeftContainer = styled.div` @@ -40,6 +40,11 @@ export default function DataGrid(props) { )} + {isFormView && ( + + + + )} {props.showReferences && props.display.hasReferences && ( diff --git a/packages/web/src/formview/FormView.js b/packages/web/src/formview/FormView.js index a4b1944d..6b58f67a 100644 --- a/packages/web/src/formview/FormView.js +++ b/packages/web/src/formview/FormView.js @@ -157,7 +157,14 @@ export default function FormView(props) { showMenu( event.pageX, event.pageY, - + formDisplay.addFilterColumn(getCellColumn(currentCell))} + filterThisValue={ + isDataCell(currentCell) ? () => formDisplay.filterCellValue(getCellColumn(currentCell), rowData) : null + } + /> ); }; @@ -394,7 +401,7 @@ export default function FormView(props) { }; const rowCountInfo = React.useMemo(() => { - if (rowData == null) return 'No data'; + if (rowData == null) return 'No data'; if (allRowCount == null || rowCountBefore == null) return 'Loading row count...'; return `Row: ${(rowCountBefore + 1).toLocaleString()} / ${allRowCount.toLocaleString()}`; }, [rowCountBefore, allRowCount]); diff --git a/packages/web/src/formview/FormViewContextMenu.js b/packages/web/src/formview/FormViewContextMenu.js index 02e25012..5c416ff3 100644 --- a/packages/web/src/formview/FormViewContextMenu.js +++ b/packages/web/src/formview/FormViewContextMenu.js @@ -1,12 +1,14 @@ import React from 'react'; import { DropDownMenuItem, DropDownMenuDivider } from '../modals/DropDownMenu'; -export default function FormViewContextMenu({ switchToTable, onNavigate }) { +export default function FormViewContextMenu({ switchToTable, onNavigate, addToFilter, filterThisValue }) { return ( <> Table view + {addToFilter && Add to filter} + {filterThisValue && Filter this value} onNavigate('begin')} keyText="Ctrl+Home"> Navigate to begin diff --git a/packages/web/src/formview/FormViewFilters.js b/packages/web/src/formview/FormViewFilters.js new file mode 100644 index 00000000..377eedd8 --- /dev/null +++ b/packages/web/src/formview/FormViewFilters.js @@ -0,0 +1,77 @@ +import React from 'react'; +import _ from 'lodash'; +import { ManagerInnerContainer } from '../datagrid/ManagerStyles'; +import styled from 'styled-components'; +import ColumnLabel from '../datagrid/ColumnLabel'; +import { TextField } from '../utility/inputs'; +import { getFilterType } from 'dbgate-filterparser'; +import DataFilterControl from '../datagrid/DataFilterControl'; +import InlineButton from '../widgets/InlineButton'; +import { FontIcon } from '../icons'; + +const ColumnWrapper = styled.div` + margin: 5px; +`; +const ColumnNameWrapper = styled.div` + display: flex; + justify-content: space-between; +`; + +const TextFieldWrapper = styled.div` + display: flex; +`; +const StyledTextField = styled(TextField)` + flex: 1; +`; + +export default function FormViewFilters(props) { + const { formDisplay } = props; + if (!formDisplay || !formDisplay.baseTable || !formDisplay.baseTable.primaryKey) return null; + const { baseTable } = formDisplay; + const { formViewKey, formFilterColumns, filters } = formDisplay.config || {}; + + const allFilterNames = _.union(_.keys(filters || {}), formFilterColumns || []); + console.log('filters', filters); + + return ( + + {baseTable.primaryKey.columns.map((col) => ( + + + + + x.columnName == col.columnName)} /> + + + + + + + ))} + {allFilterNames.map((columnName) => { + const column = baseTable.columns.find((x) => x.columnName == columnName); + if (!column) return null; + return ( + + + + { + formDisplay.removeFilter(column.columnName); + }} + > + + + + formDisplay.setFilter(column.columnName, value)} + /> + + ); + })} + + ); +}