diff --git a/packages/web/src/designer/Designer.js b/packages/web/src/designer/Designer.js index 4622dc94f..a7226b0ea 100644 --- a/packages/web/src/designer/Designer.js +++ b/packages/web/src/designer/Designer.js @@ -158,6 +158,31 @@ export default function Designer({ value, onChange }) { [onChange] ); + const handleChangeColumn = React.useCallback( + (column, changeFunc) => { + onChange((current) => { + const existing = (current.columns || []).find( + (x) => x.designerId == column.designerId && x.columnName == column.columnName + ); + if (existing) { + return { + ...current, + columns: current.columns.map((x) => (x == existing ? changeFunc(existing) : x)), + }; + } else { + return { + ...current, + columns: [ + ...cleanupDesignColumns(current.columns), + changeFunc(_.pick(column, ['designerId', 'columnName'])), + ], + }; + } + }); + }, + [onChange] + ); + // React.useEffect(() => { // setTimeout(() => setChangeToken((x) => x + 1), 100); // }, [value]); @@ -185,6 +210,7 @@ export default function Designer({ value, onChange }) { setTargetDragColumn={setTargetDragColumn} onCreateReference={handleCreateReference} onSelectColumn={handleSelectColumn} + onChangeColumn={handleChangeColumn} table={table} onChangeTable={changeTable} onBringToFront={bringToFront} @@ -194,6 +220,7 @@ export default function Designer({ value, onChange }) { onChangeDomTable={(table) => { domTablesRef.current[table.designerId] = table; }} + designer={value} /> ))} diff --git a/packages/web/src/designer/DesignerTable.js b/packages/web/src/designer/DesignerTable.js index 921b0731c..b5c107661 100644 --- a/packages/web/src/designer/DesignerTable.js +++ b/packages/web/src/designer/DesignerTable.js @@ -5,6 +5,7 @@ import { FontIcon } from '../icons'; import useTheme from '../theme/useTheme'; import DomTableRef from './DomTableRef'; import _ from 'lodash'; +import { CheckboxField } from '../utility/inputs'; const Wrapper = styled.div` position: absolute; @@ -86,6 +87,7 @@ export default function DesignerTable({ onRemoveTable, onCreateReference, onSelectColumn, + onChangeColumn, sourceDragColumn, setSourceDragColumn, targetDragColumn, @@ -93,6 +95,7 @@ export default function DesignerTable({ onChangeDomTable, wrapperRef, setChangeToken, + designer, }) { const { pureName, columns, left, top, designerId } = table; const [movingPosition, setMovingPosition] = React.useState(null); @@ -243,12 +246,38 @@ export default function DesignerTable({ setSourceDragColumn(null); }} onMouseDown={(e) => - onSelectColumn({ + onSelectColumn({ ...column, designerId, }) } > + x.designerId == designerId && x.columnName == column.columnName && x.isOutput + ) + } + onChange={(e) => { + if (e.target.checked) { + onChangeColumn( + { + ...column, + designerId, + }, + (col) => ({ ...col, isOutput: true }) + ); + } else { + onChangeColumn( + { + ...column, + designerId, + }, + (col) => ({ ...col, isOutput: false }) + ); + } + }} + /> ))} diff --git a/packages/web/src/designer/generateDesignedQuery.ts b/packages/web/src/designer/generateDesignedQuery.ts index 3f03ffd5f..0d1936bc7 100644 --- a/packages/web/src/designer/generateDesignedQuery.ts +++ b/packages/web/src/designer/generateDesignedQuery.ts @@ -1,5 +1,5 @@ import _ from 'lodash'; -import { dumpSqlSelect, Select, JoinType, Condition, Relation, mergeConditions } from 'dbgate-sqltree'; +import { dumpSqlSelect, Select, JoinType, Condition, Relation, mergeConditions, Source } from 'dbgate-sqltree'; import { EngineDriver } from 'dbgate-types'; import { DesignerInfo, DesignerTableInfo, DesignerReferenceInfo, DesignerJoinType } from './types'; @@ -67,6 +67,14 @@ function findConnectingReference( return null; } +function findQuerySource(designer: DesignerInfo, designerId: string): Source { + const table = designer.tables.find((x) => x.designerId == designerId); + if (!table) return null; + return { + name: table, + alias: table.alias, + }; +} class DesignerComponentCreator { toAdd: DesignerTableInfo[]; components: DesignerComponent[] = []; @@ -216,6 +224,22 @@ class DesignerQueryDumper { }); } } + + const topLevelColumns = this.designer.columns.filter((col) => + topLevelTables.find((tbl) => tbl.designerId == col.designerId) + ); + const outputColumns = topLevelColumns.filter((x) => x.isOutput); + if (outputColumns.length == 0) { + res.selectAll = true; + } else { + res.columns = outputColumns.map((col) => ({ + exprType: 'column', + columnName: col.columnName, + alias: col.alias, + source: findQuerySource(this.designer, col.designerId), + })); + } + return res; } }