designer - output columns

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}
           />
         ))}
       </Canvas>

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,
               })
             }
           >
+            <CheckboxField
+              checked={
+                !!(designer.columns || []).find(
+                  (x) => 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 })
+                  );
+                }
+              }}
+            />
             <ColumnLabel {...column} forceIcon />
           </ColumnLine>
         ))}

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;
   }
 }