mirror of
https://github.com/DeNNiiInc/dbgate.git
synced 2026-04-19 17:46:00 +00:00
remove web
This commit is contained in:
Jan Prochazka
@@ -1,352 +0,0 @@
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import DesignerTable from './DesignerTable';
|
||||
import uuidv1 from 'uuid/v1';
|
||||
import _ from 'lodash';
|
||||
import useTheme from '../theme/useTheme';
|
||||
import DesignerReference from './DesignerReference';
|
||||
import cleanupDesignColumns from './cleanupDesignColumns';
|
||||
import { isConnectedByReference } from './designerTools';
|
||||
import { getTableInfo } from '../utility/metadataLoaders';
|
||||
|
||||
const Wrapper = styled.div`
|
||||
flex: 1;
|
||||
background-color: ${props => props.theme.designer_background};
|
||||
overflow: scroll;
|
||||
`;
|
||||
|
||||
const Canvas = styled.div`
|
||||
width: 3000px;
|
||||
height: 3000px;
|
||||
position: relative;
|
||||
`;
|
||||
|
||||
const EmptyInfo = styled.div`
|
||||
margin: 50px;
|
||||
font-size: 20px;
|
||||
`;
|
||||
|
||||
function fixPositions(tables) {
|
||||
const minLeft = _.min(tables.map(x => x.left));
|
||||
const minTop = _.min(tables.map(x => x.top));
|
||||
if (minLeft < 0 || minTop < 0) {
|
||||
const dLeft = minLeft < 0 ? -minLeft : 0;
|
||||
const dTop = minTop < 0 ? -minTop : 0;
|
||||
return tables.map(tbl => ({
|
||||
...tbl,
|
||||
left: tbl.left + dLeft,
|
||||
top: tbl.top + dTop,
|
||||
}));
|
||||
}
|
||||
return tables;
|
||||
}
|
||||
|
||||
export default function Designer({ value, onChange, conid, database }) {
|
||||
const { tables, references } = value || {};
|
||||
const theme = useTheme();
|
||||
|
||||
const [sourceDragColumn, setSourceDragColumn] = React.useState(null);
|
||||
const [targetDragColumn, setTargetDragColumn] = React.useState(null);
|
||||
const domTablesRef = React.useRef({});
|
||||
const wrapperRef = React.useRef();
|
||||
const [changeToken, setChangeToken] = React.useState(0);
|
||||
|
||||
const handleDrop = e => {
|
||||
var data = e.dataTransfer.getData('app_object_drag_data');
|
||||
e.preventDefault();
|
||||
if (!data) return;
|
||||
const rect = e.target.getBoundingClientRect();
|
||||
var json = JSON.parse(data);
|
||||
const { objectTypeField } = json;
|
||||
if (objectTypeField != 'tables' && objectTypeField != 'views') return;
|
||||
json.designerId = uuidv1();
|
||||
json.left = e.clientX - rect.left;
|
||||
json.top = e.clientY - rect.top;
|
||||
|
||||
onChange(current => {
|
||||
const foreignKeys = _.compact([
|
||||
...(json.foreignKeys || []).map(fk => {
|
||||
const tables = ((current || {}).tables || []).filter(
|
||||
tbl => fk.refTableName == tbl.pureName && fk.refSchemaName == tbl.schemaName
|
||||
);
|
||||
if (tables.length == 1)
|
||||
return {
|
||||
...fk,
|
||||
sourceId: json.designerId,
|
||||
targetId: tables[0].designerId,
|
||||
};
|
||||
return null;
|
||||
}),
|
||||
..._.flatten(
|
||||
((current || {}).tables || []).map(tbl =>
|
||||
(tbl.foreignKeys || []).map(fk => {
|
||||
if (fk.refTableName == json.pureName && fk.refSchemaName == json.schemaName) {
|
||||
return {
|
||||
...fk,
|
||||
sourceId: tbl.designerId,
|
||||
targetId: json.designerId,
|
||||
};
|
||||
}
|
||||
return null;
|
||||
})
|
||||
)
|
||||
),
|
||||
]);
|
||||
|
||||
return {
|
||||
...current,
|
||||
tables: [...((current || {}).tables || []), json],
|
||||
references:
|
||||
foreignKeys.length == 1
|
||||
? [
|
||||
...((current || {}).references || []),
|
||||
{
|
||||
designerId: uuidv1(),
|
||||
sourceId: foreignKeys[0].sourceId,
|
||||
targetId: foreignKeys[0].targetId,
|
||||
joinType: 'INNER JOIN',
|
||||
columns: foreignKeys[0].columns.map(col => ({
|
||||
source: col.columnName,
|
||||
target: col.refColumnName,
|
||||
})),
|
||||
},
|
||||
]
|
||||
: (current || {}).references,
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
const changeTable = React.useCallback(
|
||||
table => {
|
||||
onChange(current => ({
|
||||
...current,
|
||||
tables: fixPositions((current.tables || []).map(x => (x.designerId == table.designerId ? table : x))),
|
||||
}));
|
||||
},
|
||||
[onChange]
|
||||
);
|
||||
|
||||
const bringToFront = React.useCallback(
|
||||
table => {
|
||||
onChange(
|
||||
current => ({
|
||||
...current,
|
||||
tables: [...(current.tables || []).filter(x => x.designerId != table.designerId), table],
|
||||
}),
|
||||
true
|
||||
);
|
||||
},
|
||||
[onChange]
|
||||
);
|
||||
|
||||
const removeTable = React.useCallback(
|
||||
table => {
|
||||
onChange(current => ({
|
||||
...current,
|
||||
tables: (current.tables || []).filter(x => x.designerId != table.designerId),
|
||||
references: (current.references || []).filter(
|
||||
x => x.sourceId != table.designerId && x.targetId != table.designerId
|
||||
),
|
||||
columns: (current.columns || []).filter(x => x.designerId != table.designerId),
|
||||
}));
|
||||
},
|
||||
[onChange]
|
||||
);
|
||||
|
||||
const changeReference = React.useCallback(
|
||||
ref => {
|
||||
onChange(current => ({
|
||||
...current,
|
||||
references: (current.references || []).map(x => (x.designerId == ref.designerId ? ref : x)),
|
||||
}));
|
||||
},
|
||||
[onChange]
|
||||
);
|
||||
|
||||
const removeReference = React.useCallback(
|
||||
ref => {
|
||||
onChange(current => ({
|
||||
...current,
|
||||
references: (current.references || []).filter(x => x.designerId != ref.designerId),
|
||||
}));
|
||||
},
|
||||
[onChange]
|
||||
);
|
||||
|
||||
const handleCreateReference = (source, target) => {
|
||||
onChange(current => {
|
||||
const existingReference = (current.references || []).find(
|
||||
x =>
|
||||
(x.sourceId == source.designerId && x.targetId == target.designerId) ||
|
||||
(x.sourceId == target.designerId && x.targetId == source.designerId)
|
||||
);
|
||||
|
||||
return {
|
||||
...current,
|
||||
references: existingReference
|
||||
? current.references.map(ref =>
|
||||
ref == existingReference
|
||||
? {
|
||||
...existingReference,
|
||||
columns: [
|
||||
...existingReference.columns,
|
||||
existingReference.sourceId == source.designerId
|
||||
? {
|
||||
source: source.columnName,
|
||||
target: target.columnName,
|
||||
}
|
||||
: {
|
||||
source: target.columnName,
|
||||
target: source.columnName,
|
||||
},
|
||||
],
|
||||
}
|
||||
: ref
|
||||
)
|
||||
: [
|
||||
...(current.references || []),
|
||||
{
|
||||
designerId: uuidv1(),
|
||||
sourceId: source.designerId,
|
||||
targetId: target.designerId,
|
||||
joinType: isConnectedByReference(current, source, target, null) ? 'CROSS JOIN' : 'INNER JOIN',
|
||||
columns: [
|
||||
{
|
||||
source: source.columnName,
|
||||
target: target.columnName,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
const handleAddReferenceByColumn = async (designerId, foreignKey) => {
|
||||
const toTable = await getTableInfo({
|
||||
conid,
|
||||
database,
|
||||
pureName: foreignKey.refTableName,
|
||||
schemaName: foreignKey.refSchemaName,
|
||||
});
|
||||
const newTableDesignerId = uuidv1();
|
||||
onChange(current => {
|
||||
const fromTable = (current.tables || []).find(x => x.designerId == designerId);
|
||||
if (!fromTable) return;
|
||||
return {
|
||||
...current,
|
||||
tables: [
|
||||
...(current.tables || []),
|
||||
{
|
||||
...toTable,
|
||||
left: fromTable.left + 300,
|
||||
top: fromTable.top + 50,
|
||||
designerId: newTableDesignerId,
|
||||
},
|
||||
],
|
||||
references: [
|
||||
...(current.references || []),
|
||||
{
|
||||
designerId: uuidv1(),
|
||||
sourceId: fromTable.designerId,
|
||||
targetId: newTableDesignerId,
|
||||
joinType: 'INNER JOIN',
|
||||
columns: foreignKey.columns.map(col => ({
|
||||
source: col.columnName,
|
||||
target: col.refColumnName,
|
||||
})),
|
||||
},
|
||||
],
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
const handleSelectColumn = React.useCallback(
|
||||
column => {
|
||||
onChange(
|
||||
current => ({
|
||||
...current,
|
||||
columns: (current.columns || []).find(
|
||||
x => x.designerId == column.designerId && x.columnName == column.columnName
|
||||
)
|
||||
? current.columns
|
||||
: [...cleanupDesignColumns(current.columns), _.pick(column, ['designerId', 'columnName'])],
|
||||
}),
|
||||
true
|
||||
);
|
||||
},
|
||||
[onChange]
|
||||
);
|
||||
|
||||
const handleChangeColumn = React.useCallback(
|
||||
(column, changeFunc) => {
|
||||
onChange(current => {
|
||||
const currentColumns = (current || {}).columns || [];
|
||||
const existing = currentColumns.find(
|
||||
x => x.designerId == column.designerId && x.columnName == column.columnName
|
||||
);
|
||||
if (existing) {
|
||||
return {
|
||||
...current,
|
||||
columns: currentColumns.map(x => (x == existing ? changeFunc(existing) : x)),
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
...current,
|
||||
columns: [
|
||||
...cleanupDesignColumns(currentColumns),
|
||||
changeFunc(_.pick(column, ['designerId', 'columnName'])),
|
||||
],
|
||||
};
|
||||
}
|
||||
});
|
||||
},
|
||||
[onChange]
|
||||
);
|
||||
|
||||
// React.useEffect(() => {
|
||||
// setTimeout(() => setChangeToken((x) => x + 1), 100);
|
||||
// }, [value]);
|
||||
|
||||
return (
|
||||
<Wrapper theme={theme}>
|
||||
{(tables || []).length == 0 && <EmptyInfo>Drag & drop tables or views from left panel here</EmptyInfo>}
|
||||
<Canvas onDragOver={e => e.preventDefault()} onDrop={handleDrop} ref={wrapperRef}>
|
||||
{(references || []).map(ref => (
|
||||
<DesignerReference
|
||||
key={ref.designerId}
|
||||
changeToken={changeToken}
|
||||
domTablesRef={domTablesRef}
|
||||
reference={ref}
|
||||
onChangeReference={changeReference}
|
||||
onRemoveReference={removeReference}
|
||||
designer={value}
|
||||
/>
|
||||
))}
|
||||
{(tables || []).map(table => (
|
||||
<DesignerTable
|
||||
key={table.designerId}
|
||||
sourceDragColumn={sourceDragColumn}
|
||||
setSourceDragColumn={setSourceDragColumn}
|
||||
targetDragColumn={targetDragColumn}
|
||||
setTargetDragColumn={setTargetDragColumn}
|
||||
onCreateReference={handleCreateReference}
|
||||
onSelectColumn={handleSelectColumn}
|
||||
onChangeColumn={handleChangeColumn}
|
||||
onAddReferenceByColumn={handleAddReferenceByColumn}
|
||||
table={table}
|
||||
onChangeTable={changeTable}
|
||||
onBringToFront={bringToFront}
|
||||
onRemoveTable={removeTable}
|
||||
setChangeToken={setChangeToken}
|
||||
wrapperRef={wrapperRef}
|
||||
onChangeDomTable={table => {
|
||||
domTablesRef.current[table.designerId] = table;
|
||||
}}
|
||||
designer={value}
|
||||
/>
|
||||
))}
|
||||
</Canvas>
|
||||
</Wrapper>
|
||||
);
|
||||
}
|
||||
@@ -1,91 +0,0 @@
|
||||
import _ from 'lodash';
|
||||
import { dumpSqlSelect, Select, JoinType, Condition, Relation, mergeConditions, Source } from 'dbgate-sqltree';
|
||||
import { EngineDriver } from 'dbgate-types';
|
||||
import { DesignerInfo, DesignerTableInfo, DesignerReferenceInfo, DesignerJoinType } from './types';
|
||||
import { findPrimaryTable, findConnectingReference, referenceIsJoin, referenceIsExists } from './designerTools';
|
||||
|
||||
export class DesignerComponent {
|
||||
subComponents: DesignerComponent[] = [];
|
||||
parentComponent: DesignerComponent;
|
||||
parentReference: DesignerReferenceInfo;
|
||||
|
||||
tables: DesignerTableInfo[] = [];
|
||||
nonPrimaryReferences: DesignerReferenceInfo[] = [];
|
||||
|
||||
get primaryTable() {
|
||||
return this.tables[0];
|
||||
}
|
||||
get nonPrimaryTables() {
|
||||
return this.tables.slice(1);
|
||||
}
|
||||
get nonPrimaryTablesAndReferences() {
|
||||
return _.zip(this.nonPrimaryTables, this.nonPrimaryReferences);
|
||||
}
|
||||
get myAndParentTables() {
|
||||
return [...this.parentTables, ...this.tables];
|
||||
}
|
||||
get parentTables() {
|
||||
return this.parentComponent ? this.parentComponent.myAndParentTables : [];
|
||||
}
|
||||
get thisAndSubComponentsTables() {
|
||||
return [...this.tables, ..._.flatten(this.subComponents.map(x => x.thisAndSubComponentsTables))];
|
||||
}
|
||||
}
|
||||
|
||||
export class DesignerComponentCreator {
|
||||
toAdd: DesignerTableInfo[];
|
||||
components: DesignerComponent[] = [];
|
||||
|
||||
constructor(public designer: DesignerInfo) {
|
||||
this.toAdd = [...designer.tables];
|
||||
while (this.toAdd.length > 0) {
|
||||
const component = this.parseComponent(null);
|
||||
this.components.push(component);
|
||||
}
|
||||
}
|
||||
|
||||
parseComponent(root) {
|
||||
if (root == null) {
|
||||
root = findPrimaryTable(this.toAdd);
|
||||
}
|
||||
if (!root) return null;
|
||||
_.remove(this.toAdd, x => x == root);
|
||||
const res = new DesignerComponent();
|
||||
res.tables.push(root);
|
||||
|
||||
for (;;) {
|
||||
let found = false;
|
||||
for (const test of this.toAdd) {
|
||||
const ref = findConnectingReference(this.designer, res.tables, [test], referenceIsJoin);
|
||||
if (ref) {
|
||||
res.tables.push(test);
|
||||
res.nonPrimaryReferences.push(ref);
|
||||
_.remove(this.toAdd, x => x == test);
|
||||
found = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (!found) break;
|
||||
}
|
||||
|
||||
for (;;) {
|
||||
let found = false;
|
||||
for (const test of this.toAdd) {
|
||||
const ref = findConnectingReference(this.designer, res.tables, [test], referenceIsExists);
|
||||
if (ref) {
|
||||
const subComponent = this.parseComponent(test);
|
||||
res.subComponents.push(subComponent);
|
||||
subComponent.parentComponent = res;
|
||||
subComponent.parentReference = ref;
|
||||
found = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (!found) break;
|
||||
}
|
||||
|
||||
return res;
|
||||
}
|
||||
}
|
||||
@@ -1,215 +0,0 @@
|
||||
import _ from 'lodash';
|
||||
import {
|
||||
dumpSqlSelect,
|
||||
Select,
|
||||
JoinType,
|
||||
Condition,
|
||||
Relation,
|
||||
mergeConditions,
|
||||
Source,
|
||||
ResultField,
|
||||
} from 'dbgate-sqltree';
|
||||
import { EngineDriver } from 'dbgate-types';
|
||||
import { DesignerInfo, DesignerTableInfo, DesignerReferenceInfo, DesignerJoinType } from './types';
|
||||
import { DesignerComponent } from './DesignerComponentCreator';
|
||||
import {
|
||||
getReferenceConditions,
|
||||
referenceIsCrossJoin,
|
||||
referenceIsConnecting,
|
||||
mergeSelectsFromDesigner,
|
||||
findQuerySource,
|
||||
findDesignerFilterType,
|
||||
} from './designerTools';
|
||||
import { parseFilter } from 'dbgate-filterparser';
|
||||
|
||||
export class DesignerQueryDumper {
|
||||
constructor(public designer: DesignerInfo, public components: DesignerComponent[]) {}
|
||||
|
||||
get topLevelTables(): DesignerTableInfo[] {
|
||||
return _.flatten(this.components.map(x => x.tables));
|
||||
}
|
||||
|
||||
dumpComponent(component: DesignerComponent) {
|
||||
const select: Select = {
|
||||
commandType: 'select',
|
||||
from: {
|
||||
name: component.primaryTable,
|
||||
alias: component.primaryTable.alias,
|
||||
relations: [],
|
||||
},
|
||||
};
|
||||
|
||||
for (const [table, ref] of component.nonPrimaryTablesAndReferences) {
|
||||
select.from.relations.push({
|
||||
name: table,
|
||||
alias: table.alias,
|
||||
joinType: ref.joinType as JoinType,
|
||||
conditions: getReferenceConditions(ref, this.designer),
|
||||
});
|
||||
}
|
||||
|
||||
for (const subComponent of component.subComponents) {
|
||||
const subQuery = this.dumpComponent(subComponent);
|
||||
subQuery.selectAll = true;
|
||||
select.where = mergeConditions(select.where, {
|
||||
conditionType: subComponent.parentReference.joinType == 'WHERE NOT EXISTS' ? 'notExists' : 'exists',
|
||||
subQuery,
|
||||
});
|
||||
}
|
||||
|
||||
if (component.parentReference) {
|
||||
select.where = mergeConditions(select.where, {
|
||||
conditionType: 'and',
|
||||
conditions: getReferenceConditions(component.parentReference, this.designer),
|
||||
});
|
||||
|
||||
// cross join conditions in subcomponents
|
||||
for (const ref of this.designer.references || []) {
|
||||
if (referenceIsCrossJoin(ref) && referenceIsConnecting(ref, component.tables, component.myAndParentTables)) {
|
||||
select.where = mergeConditions(select.where, {
|
||||
conditionType: 'and',
|
||||
conditions: getReferenceConditions(ref, this.designer),
|
||||
});
|
||||
}
|
||||
}
|
||||
this.addConditions(select, component.tables);
|
||||
}
|
||||
|
||||
return select;
|
||||
}
|
||||
|
||||
addConditions(select: Select, tables: DesignerTableInfo[]) {
|
||||
for (const column of this.designer.columns || []) {
|
||||
if (!column.filter) continue;
|
||||
const table = (this.designer.tables || []).find(x => x.designerId == column.designerId);
|
||||
if (!table) continue;
|
||||
if (!tables.find(x => x.designerId == table.designerId)) continue;
|
||||
|
||||
const condition = parseFilter(column.filter, findDesignerFilterType(column, this.designer));
|
||||
if (condition) {
|
||||
select.where = mergeConditions(
|
||||
select.where,
|
||||
_.cloneDeepWith(condition, expr => {
|
||||
if (expr.exprType == 'placeholder')
|
||||
return {
|
||||
exprType: 'column',
|
||||
columnName: column.columnName,
|
||||
source: findQuerySource(this.designer, column.designerId),
|
||||
};
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
addGroupConditions(select: Select, tables: DesignerTableInfo[], selectIsGrouped: boolean) {
|
||||
for (const column of this.designer.columns || []) {
|
||||
if (!column.groupFilter) continue;
|
||||
const table = (this.designer.tables || []).find(x => x.designerId == column.designerId);
|
||||
if (!table) continue;
|
||||
if (!tables.find(x => x.designerId == table.designerId)) continue;
|
||||
|
||||
const condition = parseFilter(column.groupFilter, findDesignerFilterType(column, this.designer));
|
||||
if (condition) {
|
||||
select.having = mergeConditions(
|
||||
select.having,
|
||||
_.cloneDeepWith(condition, expr => {
|
||||
if (expr.exprType == 'placeholder') {
|
||||
return this.getColumnOutputExpression(column, selectIsGrouped);
|
||||
}
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
getColumnOutputExpression(col, selectIsGrouped): ResultField {
|
||||
const source = findQuerySource(this.designer, col.designerId);
|
||||
const { columnName } = col;
|
||||
let { alias } = col;
|
||||
if (selectIsGrouped && !col.isGrouped) {
|
||||
// use aggregate
|
||||
const aggregate = col.aggregate == null || col.aggregate == '---' ? 'MAX' : col.aggregate;
|
||||
if (!alias) alias = `${aggregate}(${columnName})`;
|
||||
|
||||
return {
|
||||
exprType: 'call',
|
||||
func: aggregate == 'COUNT DISTINCT' ? 'COUNT' : aggregate,
|
||||
argsPrefix: aggregate == 'COUNT DISTINCT' ? 'DISTINCT' : null,
|
||||
alias,
|
||||
args: [
|
||||
{
|
||||
exprType: 'column',
|
||||
columnName,
|
||||
source,
|
||||
},
|
||||
],
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
exprType: 'column',
|
||||
columnName,
|
||||
alias,
|
||||
source,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
run() {
|
||||
let res: Select = null;
|
||||
for (const component of this.components) {
|
||||
const select = this.dumpComponent(component);
|
||||
if (res == null) res = select;
|
||||
else res = mergeSelectsFromDesigner(res, select);
|
||||
}
|
||||
|
||||
// top level cross join conditions
|
||||
const topLevelTables = this.topLevelTables;
|
||||
for (const ref of this.designer.references || []) {
|
||||
if (referenceIsCrossJoin(ref) && referenceIsConnecting(ref, topLevelTables, topLevelTables)) {
|
||||
res.where = mergeConditions(res.where, {
|
||||
conditionType: 'and',
|
||||
conditions: getReferenceConditions(ref, this.designer),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const topLevelColumns = (this.designer.columns || []).filter(col =>
|
||||
topLevelTables.find(tbl => tbl.designerId == col.designerId)
|
||||
);
|
||||
const selectIsGrouped = !!topLevelColumns.find(x => x.isGrouped || (x.aggregate && x.aggregate != '---'));
|
||||
const outputColumns = topLevelColumns.filter(x => x.isOutput);
|
||||
if (outputColumns.length == 0) {
|
||||
res.selectAll = true;
|
||||
} else {
|
||||
res.columns = outputColumns.map(col => this.getColumnOutputExpression(col, selectIsGrouped));
|
||||
}
|
||||
|
||||
const groupedColumns = topLevelColumns.filter(x => x.isGrouped);
|
||||
if (groupedColumns.length > 0) {
|
||||
res.groupBy = groupedColumns.map(col => ({
|
||||
exprType: 'column',
|
||||
columnName: col.columnName,
|
||||
source: findQuerySource(this.designer, col.designerId),
|
||||
}));
|
||||
}
|
||||
|
||||
const orderColumns = _.sortBy(
|
||||
topLevelColumns.filter(x => x.sortOrder),
|
||||
x => Math.abs(x.sortOrder)
|
||||
);
|
||||
if (orderColumns.length > 0) {
|
||||
res.orderBy = orderColumns.map(col => ({
|
||||
exprType: 'column',
|
||||
direction: col.sortOrder < 0 ? 'DESC' : 'ASC',
|
||||
columnName: col.columnName,
|
||||
source: findQuerySource(this.designer, col.designerId),
|
||||
}));
|
||||
}
|
||||
|
||||
this.addConditions(res, topLevelTables);
|
||||
this.addGroupConditions(res, topLevelTables, selectIsGrouped);
|
||||
|
||||
return res;
|
||||
}
|
||||
}
|
||||
@@ -1,177 +0,0 @@
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import DomTableRef from './DomTableRef';
|
||||
import _ from 'lodash';
|
||||
import useTheme from '../theme/useTheme';
|
||||
import { useShowMenu } from '../modals/showMenu';
|
||||
import { DropDownMenuDivider, DropDownMenuItem } from '../modals/DropDownMenu';
|
||||
import { isConnectedByReference } from './designerTools';
|
||||
|
||||
const StyledSvg = styled.svg`
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
`;
|
||||
|
||||
const ReferenceWrapper = styled.div`
|
||||
position: absolute;
|
||||
border: 1px solid ${props => props.theme.designer_line};
|
||||
background-color: ${props => props.theme.designer_background};
|
||||
z-index: 900;
|
||||
border-radius: 10px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
`;
|
||||
|
||||
const ReferenceText = styled.span`
|
||||
position: relative;
|
||||
float: left;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 900;
|
||||
white-space: nowrap;
|
||||
background-color: ${props => props.theme.designer_background};
|
||||
`;
|
||||
|
||||
function ReferenceContextMenu({ remove, setJoinType, isConnected }) {
|
||||
return (
|
||||
<>
|
||||
<DropDownMenuItem onClick={remove}>Remove</DropDownMenuItem>
|
||||
{!isConnected && (
|
||||
<>
|
||||
<DropDownMenuDivider />
|
||||
<DropDownMenuItem onClick={() => setJoinType('INNER JOIN')}>Set INNER JOIN</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={() => setJoinType('LEFT JOIN')}>Set LEFT JOIN</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={() => setJoinType('RIGHT JOIN')}>Set RIGHT JOIN</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={() => setJoinType('FULL OUTER JOIN')}>Set FULL OUTER JOIN</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={() => setJoinType('CROSS JOIN')}>Set CROSS JOIN</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={() => setJoinType('WHERE EXISTS')}>Set WHERE EXISTS</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={() => setJoinType('WHERE NOT EXISTS')}>Set WHERE NOT EXISTS</DropDownMenuItem>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default function DesignerReference({
|
||||
domTablesRef,
|
||||
reference,
|
||||
changeToken,
|
||||
onRemoveReference,
|
||||
onChangeReference,
|
||||
designer,
|
||||
}) {
|
||||
const { designerId, sourceId, targetId, columns, joinType } = reference;
|
||||
const theme = useTheme();
|
||||
const showMenu = useShowMenu();
|
||||
const domTables = domTablesRef.current;
|
||||
/** @type {DomTableRef} */
|
||||
const sourceTable = domTables[sourceId];
|
||||
/** @type {DomTableRef} */
|
||||
const targetTable = domTables[targetId];
|
||||
if (!sourceTable || !targetTable) return null;
|
||||
const sourceRect = sourceTable.getRect();
|
||||
const targetRect = targetTable.getRect();
|
||||
if (!sourceRect || !targetRect) return null;
|
||||
|
||||
const buswi = 10;
|
||||
const extwi = 25;
|
||||
|
||||
const possibilities = [];
|
||||
possibilities.push({ xsrc: sourceRect.left - buswi, dirsrc: -1, xdst: targetRect.left - buswi, dirdst: -1 });
|
||||
possibilities.push({ xsrc: sourceRect.left - buswi, dirsrc: -1, xdst: targetRect.right + buswi, dirdst: 1 });
|
||||
possibilities.push({ xsrc: sourceRect.right + buswi, dirsrc: 1, xdst: targetRect.left - buswi, dirdst: -1 });
|
||||
possibilities.push({ xsrc: sourceRect.right + buswi, dirsrc: 1, xdst: targetRect.right + buswi, dirdst: 1 });
|
||||
|
||||
let minpos = _.minBy(possibilities, p => Math.abs(p.xsrc - p.xdst));
|
||||
|
||||
let srcY = _.mean(columns.map(x => sourceTable.getColumnY(x.source)));
|
||||
let dstY = _.mean(columns.map(x => targetTable.getColumnY(x.target)));
|
||||
|
||||
if (columns.length == 0) {
|
||||
srcY = sourceTable.getColumnY('');
|
||||
dstY = targetTable.getColumnY('');
|
||||
}
|
||||
|
||||
const src = { x: minpos.xsrc, y: srcY };
|
||||
const dst = { x: minpos.xdst, y: dstY };
|
||||
|
||||
const lineStyle = { fill: 'none', stroke: theme.designer_line, strokeWidth: 2 };
|
||||
|
||||
const handleContextMenu = event => {
|
||||
event.preventDefault();
|
||||
showMenu(
|
||||
event.pageX,
|
||||
event.pageY,
|
||||
<ReferenceContextMenu
|
||||
remove={() => onRemoveReference({ designerId })}
|
||||
isConnected={isConnectedByReference(designer, { designerId: sourceId }, { designerId: targetId }, reference)}
|
||||
setJoinType={joinType => {
|
||||
onChangeReference({
|
||||
...reference,
|
||||
joinType,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<StyledSvg>
|
||||
<polyline
|
||||
points={`
|
||||
${src.x},${src.y}
|
||||
${src.x + extwi * minpos.dirsrc},${src.y}
|
||||
${dst.x + extwi * minpos.dirdst},${dst.y}
|
||||
${dst.x},${dst.y}
|
||||
`}
|
||||
style={lineStyle}
|
||||
/>
|
||||
{columns.map((col, colIndex) => {
|
||||
let y1 = sourceTable.getColumnY(col.source);
|
||||
let y2 = targetTable.getColumnY(col.target);
|
||||
return (
|
||||
<React.Fragment key={colIndex}>
|
||||
<polyline
|
||||
points={`
|
||||
${src.x},${src.y}
|
||||
${src.x},${y1}
|
||||
${src.x - buswi * minpos.dirsrc},${y1}
|
||||
`}
|
||||
style={lineStyle}
|
||||
/>
|
||||
<polyline
|
||||
points={`
|
||||
${dst.x},${dst.y}
|
||||
${dst.x},${y2}
|
||||
${dst.x - buswi * minpos.dirdst},${y2}
|
||||
`}
|
||||
style={lineStyle}
|
||||
/>
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
</StyledSvg>
|
||||
<ReferenceWrapper
|
||||
theme={theme}
|
||||
style={{
|
||||
left: (src.x + extwi * minpos.dirsrc + dst.x + extwi * minpos.dirdst) / 2 - 16,
|
||||
top: (src.y + dst.y) / 2 - 16,
|
||||
}}
|
||||
onContextMenu={handleContextMenu}
|
||||
>
|
||||
<ReferenceText theme={theme}>
|
||||
{_.snakeCase(joinType || 'CROSS JOIN')
|
||||
.replace('_', '\xa0')
|
||||
.replace('_', '\xa0')}
|
||||
</ReferenceText>
|
||||
</ReferenceWrapper>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,413 +0,0 @@
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { findForeignKeyForColumn } from 'dbgate-tools';
|
||||
import ColumnLabel from '../datagrid/ColumnLabel';
|
||||
import { FontIcon } from '../icons';
|
||||
import useTheme from '../theme/useTheme';
|
||||
import DomTableRef from './DomTableRef';
|
||||
import _ from 'lodash';
|
||||
import { CheckboxField } from '../utility/inputs';
|
||||
import { useShowMenu } from '../modals/showMenu';
|
||||
import { DropDownMenuDivider, DropDownMenuItem } from '../modals/DropDownMenu';
|
||||
import useShowModal from '../modals/showModal';
|
||||
import InputTextModal from '../modals/InputTextModal';
|
||||
|
||||
const Wrapper = styled.div`
|
||||
position: absolute;
|
||||
// background-color: white;
|
||||
background-color: ${props => props.theme.designtable_background};
|
||||
border: 1px solid ${props => props.theme.border};
|
||||
`;
|
||||
|
||||
const Header = styled.div`
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
padding: 2px;
|
||||
background: ${props =>
|
||||
// @ts-ignore
|
||||
props.objectTypeField == 'views'
|
||||
? props.theme.designtable_background_magenta[2]
|
||||
: props.theme.designtable_background_blue[2]};
|
||||
border-bottom: 1px solid ${props => props.theme.border};
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
`;
|
||||
|
||||
const ColumnsWrapper = styled.div`
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
width: calc(100% - 10px);
|
||||
padding: 5px;
|
||||
`;
|
||||
|
||||
const HeaderLabel = styled.div``;
|
||||
|
||||
const CloseWrapper = styled.div`
|
||||
${props =>
|
||||
`
|
||||
background-color: ${props.theme.toolbar_background} ;
|
||||
|
||||
&:hover {
|
||||
background-color: ${props.theme.toolbar_background2} ;
|
||||
}
|
||||
|
||||
&:active:hover {
|
||||
background-color: ${props.theme.toolbar_background3};
|
||||
}
|
||||
`}
|
||||
`;
|
||||
|
||||
// &:hover {
|
||||
// background-color: ${(props) => props.theme.designtable_background_gold[1]};
|
||||
// }
|
||||
|
||||
const ColumnLine = styled.div`
|
||||
${props =>
|
||||
// @ts-ignore
|
||||
!props.isDragSource &&
|
||||
// @ts-ignore
|
||||
!props.isDragTarget &&
|
||||
`
|
||||
&:hover {
|
||||
background-color: ${props.theme.designtable_background_gold[1]};
|
||||
}
|
||||
`}
|
||||
|
||||
${props =>
|
||||
// @ts-ignore
|
||||
props.isDragSource &&
|
||||
`
|
||||
background-color: ${props.theme.designtable_background_cyan[2]};
|
||||
`}
|
||||
|
||||
${props =>
|
||||
// @ts-ignore
|
||||
props.isDragTarget &&
|
||||
`
|
||||
background-color: ${props.theme.designtable_background_cyan[2]};
|
||||
`}
|
||||
`;
|
||||
|
||||
function TableContextMenu({ remove, setTableAlias, removeTableAlias }) {
|
||||
return (
|
||||
<>
|
||||
<DropDownMenuItem onClick={remove}>Remove</DropDownMenuItem>
|
||||
<DropDownMenuDivider />
|
||||
<DropDownMenuItem onClick={setTableAlias}>Set table alias</DropDownMenuItem>
|
||||
{!!removeTableAlias && <DropDownMenuItem onClick={removeTableAlias}>Remove table alias</DropDownMenuItem>}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function ColumnContextMenu({ setSortOrder, addReference }) {
|
||||
return (
|
||||
<>
|
||||
<DropDownMenuItem onClick={() => setSortOrder(1)}>Sort ascending</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={() => setSortOrder(-1)}>Sort descending</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={() => setSortOrder(0)}>Unsort</DropDownMenuItem>
|
||||
{!!addReference && <DropDownMenuItem onClick={addReference}>Add reference</DropDownMenuItem>}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function ColumnDesignerIcons({ column, designerId, designer }) {
|
||||
const designerColumn = (designer.columns || []).find(
|
||||
x => x.designerId == designerId && x.columnName == column.columnName
|
||||
);
|
||||
if (!designerColumn) return null;
|
||||
return (
|
||||
<>
|
||||
{!!designerColumn.filter && <FontIcon icon="img filter" />}
|
||||
{designerColumn.sortOrder > 0 && <FontIcon icon="img sort-asc" />}
|
||||
{designerColumn.sortOrder < 0 && <FontIcon icon="img sort-desc" />}
|
||||
{!!designerColumn.isGrouped && <FontIcon icon="img group" />}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default function DesignerTable({
|
||||
table,
|
||||
onChangeTable,
|
||||
onBringToFront,
|
||||
onRemoveTable,
|
||||
onCreateReference,
|
||||
onAddReferenceByColumn,
|
||||
onSelectColumn,
|
||||
onChangeColumn,
|
||||
sourceDragColumn,
|
||||
setSourceDragColumn,
|
||||
targetDragColumn,
|
||||
setTargetDragColumn,
|
||||
onChangeDomTable,
|
||||
wrapperRef,
|
||||
setChangeToken,
|
||||
designer,
|
||||
}) {
|
||||
const { pureName, columns, left, top, designerId, alias, objectTypeField } = table;
|
||||
const [movingPosition, setMovingPosition] = React.useState(null);
|
||||
const movingPositionRef = React.useRef(null);
|
||||
const theme = useTheme();
|
||||
const domObjectsRef = React.useRef({});
|
||||
const showMenu = useShowMenu();
|
||||
const showModal = useShowModal();
|
||||
|
||||
const moveStartXRef = React.useRef(null);
|
||||
const moveStartYRef = React.useRef(null);
|
||||
|
||||
const handleMove = React.useCallback(e => {
|
||||
let diffX = e.clientX - moveStartXRef.current;
|
||||
let diffY = e.clientY - moveStartYRef.current;
|
||||
moveStartXRef.current = e.clientX;
|
||||
moveStartYRef.current = e.clientY;
|
||||
|
||||
movingPositionRef.current = {
|
||||
left: (movingPositionRef.current.left || 0) + diffX,
|
||||
top: (movingPositionRef.current.top || 0) + diffY,
|
||||
};
|
||||
setMovingPosition(movingPositionRef.current);
|
||||
// setChangeToken((x) => x + 1);
|
||||
changeTokenDebounced.current();
|
||||
// onChangeTable(
|
||||
// {
|
||||
// ...props,
|
||||
// left: (left || 0) + diffX,
|
||||
// top: (top || 0) + diffY,
|
||||
// },
|
||||
// index
|
||||
// );
|
||||
}, []);
|
||||
|
||||
const changeTokenDebounced = React.useRef(
|
||||
// @ts-ignore
|
||||
_.debounce(() => setChangeToken(x => x + 1), 100)
|
||||
);
|
||||
|
||||
const handleMoveEnd = React.useCallback(
|
||||
e => {
|
||||
if (movingPositionRef.current) {
|
||||
onChangeTable({
|
||||
...table,
|
||||
left: movingPositionRef.current.left,
|
||||
top: movingPositionRef.current.top,
|
||||
});
|
||||
}
|
||||
|
||||
movingPositionRef.current = null;
|
||||
setMovingPosition(null);
|
||||
changeTokenDebounced.current();
|
||||
// setChangeToken((x) => x + 1);
|
||||
|
||||
// this.props.model.fixPositions();
|
||||
|
||||
// this.props.designer.changedModel(true);
|
||||
},
|
||||
[onChangeTable, table]
|
||||
);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (movingPosition) {
|
||||
document.addEventListener('mousemove', handleMove, true);
|
||||
document.addEventListener('mouseup', handleMoveEnd, true);
|
||||
return () => {
|
||||
document.removeEventListener('mousemove', handleMove, true);
|
||||
document.removeEventListener('mouseup', handleMoveEnd, true);
|
||||
};
|
||||
}
|
||||
}, [movingPosition == null, handleMove, handleMoveEnd]);
|
||||
|
||||
const headerMouseDown = React.useCallback(
|
||||
e => {
|
||||
e.preventDefault();
|
||||
moveStartXRef.current = e.clientX;
|
||||
moveStartYRef.current = e.clientY;
|
||||
movingPositionRef.current = { left, top };
|
||||
setMovingPosition(movingPositionRef.current);
|
||||
// setIsMoving(true);
|
||||
},
|
||||
[handleMove, handleMoveEnd]
|
||||
);
|
||||
|
||||
const dispatchDomColumn = (columnName, dom) => {
|
||||
domObjectsRef.current[columnName] = dom;
|
||||
onChangeDomTable(new DomTableRef(table, domObjectsRef.current, wrapperRef.current));
|
||||
changeTokenDebounced.current();
|
||||
};
|
||||
|
||||
const handleSetTableAlias = () => {
|
||||
showModal(modalState => (
|
||||
<InputTextModal
|
||||
modalState={modalState}
|
||||
value={alias || ''}
|
||||
label="New alias"
|
||||
header="Set table alias"
|
||||
onConfirm={newAlias => {
|
||||
onChangeTable({
|
||||
...table,
|
||||
alias: newAlias,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
));
|
||||
};
|
||||
|
||||
const handleHeaderContextMenu = event => {
|
||||
event.preventDefault();
|
||||
showMenu(
|
||||
event.pageX,
|
||||
event.pageY,
|
||||
<TableContextMenu
|
||||
remove={() => onRemoveTable({ designerId })}
|
||||
setTableAlias={handleSetTableAlias}
|
||||
removeTableAlias={
|
||||
alias
|
||||
? () =>
|
||||
onChangeTable({
|
||||
...table,
|
||||
alias: null,
|
||||
})
|
||||
: null
|
||||
}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const handleColumnContextMenu = column => event => {
|
||||
event.preventDefault();
|
||||
const foreignKey = findForeignKeyForColumn(table, column);
|
||||
showMenu(
|
||||
event.pageX,
|
||||
event.pageY,
|
||||
<ColumnContextMenu
|
||||
setSortOrder={sortOrder => {
|
||||
onChangeColumn(
|
||||
{
|
||||
...column,
|
||||
designerId,
|
||||
},
|
||||
col => ({ ...col, sortOrder })
|
||||
);
|
||||
}}
|
||||
addReference={
|
||||
foreignKey
|
||||
? () => {
|
||||
onAddReferenceByColumn(designerId, foreignKey);
|
||||
}
|
||||
: null
|
||||
}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Wrapper
|
||||
theme={theme}
|
||||
style={{
|
||||
left: movingPosition ? movingPosition.left : left,
|
||||
top: movingPosition ? movingPosition.top : top,
|
||||
}}
|
||||
onMouseDown={() => onBringToFront(table)}
|
||||
ref={dom => dispatchDomColumn('', dom)}
|
||||
>
|
||||
<Header
|
||||
onMouseDown={headerMouseDown}
|
||||
theme={theme}
|
||||
onContextMenu={handleHeaderContextMenu}
|
||||
// @ts-ignore
|
||||
objectTypeField={objectTypeField}
|
||||
>
|
||||
<HeaderLabel>{alias || pureName}</HeaderLabel>
|
||||
<CloseWrapper onClick={() => onRemoveTable(table)} theme={theme}>
|
||||
<FontIcon icon="icon close" />
|
||||
</CloseWrapper>
|
||||
</Header>
|
||||
<ColumnsWrapper>
|
||||
{(columns || []).map(column => (
|
||||
<ColumnLine
|
||||
onContextMenu={handleColumnContextMenu(column)}
|
||||
key={column.columnName}
|
||||
theme={theme}
|
||||
draggable
|
||||
ref={dom => dispatchDomColumn(column.columnName, dom)}
|
||||
// @ts-ignore
|
||||
isDragSource={
|
||||
sourceDragColumn &&
|
||||
sourceDragColumn.designerId == designerId &&
|
||||
sourceDragColumn.columnName == column.columnName
|
||||
}
|
||||
// @ts-ignore
|
||||
isDragTarget={
|
||||
targetDragColumn &&
|
||||
targetDragColumn.designerId == designerId &&
|
||||
targetDragColumn.columnName == column.columnName
|
||||
}
|
||||
onDragStart={e => {
|
||||
const dragData = {
|
||||
...column,
|
||||
designerId,
|
||||
};
|
||||
setSourceDragColumn(dragData);
|
||||
e.dataTransfer.setData('designer_column_drag_data', JSON.stringify(dragData));
|
||||
}}
|
||||
onDragEnd={e => {
|
||||
setTargetDragColumn(null);
|
||||
setSourceDragColumn(null);
|
||||
}}
|
||||
onDragOver={e => {
|
||||
if (sourceDragColumn) {
|
||||
e.preventDefault();
|
||||
setTargetDragColumn({
|
||||
...column,
|
||||
designerId,
|
||||
});
|
||||
}
|
||||
}}
|
||||
onDrop={e => {
|
||||
var data = e.dataTransfer.getData('designer_column_drag_data');
|
||||
e.preventDefault();
|
||||
if (!data) return;
|
||||
onCreateReference(sourceDragColumn, targetDragColumn);
|
||||
setTargetDragColumn(null);
|
||||
setSourceDragColumn(null);
|
||||
}}
|
||||
onMouseDown={e =>
|
||||
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} foreignKey={findForeignKeyForColumn(table, column)} forceIcon />
|
||||
<ColumnDesignerIcons column={column} designerId={designerId} designer={designer} />
|
||||
</ColumnLine>
|
||||
))}
|
||||
</ColumnsWrapper>
|
||||
</Wrapper>
|
||||
);
|
||||
}
|
||||
@@ -1,39 +0,0 @@
|
||||
import { DesignerTableInfo } from './types';
|
||||
|
||||
export default class DomTableRef {
|
||||
domTable: Element;
|
||||
domWrapper: Element;
|
||||
table: DesignerTableInfo;
|
||||
designerId: string;
|
||||
domRefs: { [column: string]: Element };
|
||||
|
||||
constructor(table: DesignerTableInfo, domRefs, domWrapper: Element) {
|
||||
this.domTable = domRefs[''];
|
||||
this.domWrapper = domWrapper;
|
||||
this.table = table;
|
||||
this.designerId = table.designerId;
|
||||
this.domRefs = domRefs;
|
||||
}
|
||||
|
||||
getRect() {
|
||||
if (!this.domWrapper) return null;
|
||||
if (!this.domTable) return null;
|
||||
|
||||
const wrap = this.domWrapper.getBoundingClientRect();
|
||||
const rect = this.domTable.getBoundingClientRect();
|
||||
return {
|
||||
left: rect.left - wrap.left,
|
||||
top: rect.top - wrap.top,
|
||||
right: rect.right - wrap.left,
|
||||
bottom: rect.bottom - wrap.top,
|
||||
};
|
||||
}
|
||||
|
||||
getColumnY(columnName: string) {
|
||||
let col = this.domRefs[columnName];
|
||||
if (!col) return null;
|
||||
const rect = col.getBoundingClientRect();
|
||||
const wrap = this.domWrapper.getBoundingClientRect();
|
||||
return (rect.top + rect.bottom) / 2 - wrap.top;
|
||||
}
|
||||
}
|
||||
@@ -1,165 +0,0 @@
|
||||
import React from 'react';
|
||||
import DataFilterControl from '../datagrid/DataFilterControl';
|
||||
import { CheckboxField, SelectField, TextField } from '../utility/inputs';
|
||||
import TableControl, { TableColumn } from '../utility/TableControl';
|
||||
import InlineButton from '../widgets/InlineButton';
|
||||
import { findDesignerFilterType } from './designerTools';
|
||||
|
||||
function getTableDisplayName(column, tables) {
|
||||
const table = (tables || []).find(x => x.designerId == column.designerId);
|
||||
if (table) return table.alias || table.pureName;
|
||||
return '';
|
||||
}
|
||||
|
||||
export default function QueryDesignColumns({ value, onChange }) {
|
||||
const { columns, tables } = value || {};
|
||||
|
||||
const changeColumn = React.useCallback(
|
||||
col => {
|
||||
onChange(current => ({
|
||||
...current,
|
||||
columns: (current.columns || []).map(x =>
|
||||
x.designerId == col.designerId && x.columnName == col.columnName ? col : x
|
||||
),
|
||||
}));
|
||||
},
|
||||
[onChange]
|
||||
);
|
||||
|
||||
const removeColumn = React.useCallback(
|
||||
col => {
|
||||
onChange(current => ({
|
||||
...current,
|
||||
columns: (current.columns || []).filter(x => x.designerId != col.designerId || x.columnName != col.columnName),
|
||||
}));
|
||||
},
|
||||
[onChange]
|
||||
);
|
||||
|
||||
const hasGroupedColumn = !!(columns || []).find(x => x.isGrouped);
|
||||
|
||||
return (
|
||||
<TableControl rows={columns || []}>
|
||||
<TableColumn fieldName="columnName" header="Column/Expression" />
|
||||
<TableColumn fieldName="tableDisplayName" header="Table" formatter={row => getTableDisplayName(row, tables)} />
|
||||
<TableColumn
|
||||
fieldName="isOutput"
|
||||
header="Output"
|
||||
formatter={row => (
|
||||
<CheckboxField
|
||||
checked={row.isOutput}
|
||||
onChange={e => {
|
||||
if (e.target.checked) changeColumn({ ...row, isOutput: true });
|
||||
else changeColumn({ ...row, isOutput: false });
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<TableColumn
|
||||
fieldName="alias"
|
||||
header="Alias"
|
||||
formatter={row => (
|
||||
<TextField
|
||||
value={row.alias}
|
||||
onChange={e => {
|
||||
changeColumn({ ...row, alias: e.target.value });
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
<TableColumn
|
||||
fieldName="isGrouped"
|
||||
header="Group by"
|
||||
formatter={row => (
|
||||
<CheckboxField
|
||||
checked={row.isGrouped}
|
||||
onChange={e => {
|
||||
if (e.target.checked) changeColumn({ ...row, isGrouped: true });
|
||||
else changeColumn({ ...row, isGrouped: false });
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<TableColumn
|
||||
fieldName="aggregate"
|
||||
header="Aggregate"
|
||||
formatter={row =>
|
||||
!row.isGrouped && (
|
||||
<SelectField
|
||||
value={row.aggregate}
|
||||
onChange={e => {
|
||||
changeColumn({ ...row, aggregate: e.target.value });
|
||||
}}
|
||||
>
|
||||
<option value="---">---</option>
|
||||
<option value="MIN">MIN</option>
|
||||
<option value="MAX">MAX</option>
|
||||
<option value="COUNT">COUNT</option>
|
||||
<option value="COUNT DISTINCT">COUNT DISTINCT</option>
|
||||
<option value="SUM">SUM</option>
|
||||
<option value="AVG">AVG</option>
|
||||
</SelectField>
|
||||
)
|
||||
}
|
||||
/>
|
||||
<TableColumn
|
||||
fieldName="sortOrder"
|
||||
header="Sort order"
|
||||
formatter={row => (
|
||||
<SelectField
|
||||
value={row.sortOrder}
|
||||
onChange={e => {
|
||||
changeColumn({ ...row, sortOrder: parseInt(e.target.value) });
|
||||
}}
|
||||
>
|
||||
<option value="0">---</option>
|
||||
<option value="1">1st, ascending</option>
|
||||
<option value="-1">1st, descending</option>
|
||||
<option value="2">2nd, ascending</option>
|
||||
<option value="-2">2nd, descending</option>
|
||||
<option value="3">3rd, ascending</option>
|
||||
<option value="-3">3rd, descending</option>,
|
||||
</SelectField>
|
||||
)}
|
||||
/>
|
||||
<TableColumn
|
||||
fieldName="filter"
|
||||
header="Filter"
|
||||
formatter={row => (
|
||||
<DataFilterControl
|
||||
filterType={findDesignerFilterType(row, value)}
|
||||
filter={row.filter}
|
||||
setFilter={filter => {
|
||||
changeColumn({ ...row, filter });
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{hasGroupedColumn && (
|
||||
<TableColumn
|
||||
fieldName="groupFilter"
|
||||
header="Group filter"
|
||||
formatter={row => (
|
||||
<DataFilterControl
|
||||
filterType={findDesignerFilterType(row, value)}
|
||||
filter={row.groupFilter}
|
||||
setFilter={groupFilter => {
|
||||
changeColumn({ ...row, groupFilter });
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
<TableColumn
|
||||
fieldName="actions"
|
||||
header=""
|
||||
formatter={row => (
|
||||
<>
|
||||
<InlineButton onClick={() => removeColumn(row)}>Remove</InlineButton>
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
</TableControl>
|
||||
);
|
||||
}
|
||||
@@ -1,29 +0,0 @@
|
||||
import React from 'react';
|
||||
import ToolbarButton from '../widgets/ToolbarButton';
|
||||
|
||||
export default function QueryDesignToolbar({
|
||||
execute,
|
||||
isDatabaseDefined,
|
||||
busy,
|
||||
modelState,
|
||||
dispatchModel,
|
||||
isConnected,
|
||||
kill,
|
||||
}) {
|
||||
return (
|
||||
<>
|
||||
<ToolbarButton disabled={!isDatabaseDefined || busy} onClick={execute} icon="icon run">
|
||||
Execute
|
||||
</ToolbarButton>
|
||||
<ToolbarButton disabled={!isConnected} onClick={kill} icon="icon close">
|
||||
Kill
|
||||
</ToolbarButton>
|
||||
<ToolbarButton disabled={!modelState.canUndo} onClick={() => dispatchModel({ type: 'undo' })} icon="icon undo">
|
||||
Undo
|
||||
</ToolbarButton>
|
||||
<ToolbarButton disabled={!modelState.canRedo} onClick={() => dispatchModel({ type: 'redo' })} icon="icon redo">
|
||||
Redo
|
||||
</ToolbarButton>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import Designer from './Designer';
|
||||
|
||||
export default function QueryDesigner({ value, conid, database, engine, onChange }) {
|
||||
return <Designer value={value} onChange={onChange} conid={conid} database={database}></Designer>;
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
export default function cleanupDesignColumns(columns) {
|
||||
return (columns || []).filter(
|
||||
x => x.isOutput || x.isGrouped || x.alias || (x.aggregate && x.aggregate != '---') || x.sortOrder || x.filter
|
||||
);
|
||||
}
|
||||
@@ -1,144 +0,0 @@
|
||||
import _ from 'lodash';
|
||||
import { dumpSqlSelect, Select, JoinType, Condition, Relation, mergeConditions, Source } from 'dbgate-sqltree';
|
||||
import { EngineDriver } from 'dbgate-types';
|
||||
import { DesignerInfo, DesignerTableInfo, DesignerReferenceInfo, DesignerJoinType } from './types';
|
||||
import { DesignerComponentCreator } from './DesignerComponentCreator';
|
||||
import { DesignerQueryDumper } from './DesignerQueryDumper';
|
||||
import { getFilterType } from 'dbgate-filterparser';
|
||||
|
||||
export function referenceIsConnecting(
|
||||
reference: DesignerReferenceInfo,
|
||||
tables1: DesignerTableInfo[],
|
||||
tables2: DesignerTableInfo[]
|
||||
) {
|
||||
return (
|
||||
(tables1.find(x => x.designerId == reference.sourceId) && tables2.find(x => x.designerId == reference.targetId)) ||
|
||||
(tables1.find(x => x.designerId == reference.targetId) && tables2.find(x => x.designerId == reference.sourceId))
|
||||
);
|
||||
}
|
||||
|
||||
export function referenceIsJoin(reference) {
|
||||
return ['INNER JOIN', 'LEFT JOIN', 'RIGHT JOIN', 'FULL OUTER JOIN'].includes(reference.joinType);
|
||||
}
|
||||
export function referenceIsExists(reference) {
|
||||
return ['WHERE EXISTS', 'WHERE NOT EXISTS'].includes(reference.joinType);
|
||||
}
|
||||
export function referenceIsCrossJoin(reference) {
|
||||
return !reference.joinType || reference.joinType == 'CROSS JOIN';
|
||||
}
|
||||
|
||||
export function findConnectingReference(
|
||||
designer: DesignerInfo,
|
||||
tables1: DesignerTableInfo[],
|
||||
tables2: DesignerTableInfo[],
|
||||
additionalCondition: (ref: DesignerReferenceInfo) => boolean
|
||||
) {
|
||||
for (const ref of designer.references || []) {
|
||||
if (additionalCondition(ref) && referenceIsConnecting(ref, tables1, tables2)) {
|
||||
return ref;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
export 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,
|
||||
};
|
||||
}
|
||||
|
||||
export function mergeSelectsFromDesigner(select1: Select, select2: Select): Select {
|
||||
return {
|
||||
commandType: 'select',
|
||||
from: {
|
||||
...select1.from,
|
||||
relations: [
|
||||
...select1.from.relations,
|
||||
{
|
||||
joinType: 'CROSS JOIN',
|
||||
name: select2.from.name,
|
||||
alias: select2.from.alias,
|
||||
},
|
||||
...select2.from.relations,
|
||||
],
|
||||
},
|
||||
where: mergeConditions(select1.where, select2.where),
|
||||
};
|
||||
}
|
||||
|
||||
export function findPrimaryTable(tables: DesignerTableInfo[]) {
|
||||
return _.minBy(tables, x => x.top);
|
||||
}
|
||||
|
||||
export function getReferenceConditions(reference: DesignerReferenceInfo, designer: DesignerInfo): Condition[] {
|
||||
const sourceTable = designer.tables.find(x => x.designerId == reference.sourceId);
|
||||
const targetTable = designer.tables.find(x => x.designerId == reference.targetId);
|
||||
|
||||
return reference.columns.map(col => ({
|
||||
conditionType: 'binary',
|
||||
operator: '=',
|
||||
left: {
|
||||
exprType: 'column',
|
||||
columnName: col.source,
|
||||
source: {
|
||||
name: sourceTable,
|
||||
alias: sourceTable.alias,
|
||||
},
|
||||
},
|
||||
right: {
|
||||
exprType: 'column',
|
||||
columnName: col.target,
|
||||
source: {
|
||||
name: targetTable,
|
||||
alias: targetTable.alias,
|
||||
},
|
||||
},
|
||||
}));
|
||||
}
|
||||
|
||||
export function generateDesignedQuery(designer: DesignerInfo, engine: EngineDriver) {
|
||||
const { tables, columns, references } = designer;
|
||||
const primaryTable = findPrimaryTable(designer.tables);
|
||||
if (!primaryTable) return '';
|
||||
const componentCreator = new DesignerComponentCreator(designer);
|
||||
const designerDumper = new DesignerQueryDumper(designer, componentCreator.components);
|
||||
const select = designerDumper.run();
|
||||
|
||||
const dmp = engine.createDumper();
|
||||
dumpSqlSelect(dmp, select);
|
||||
return dmp.s;
|
||||
}
|
||||
|
||||
export function isConnectedByReference(
|
||||
designer: DesignerInfo,
|
||||
table1: { designerId: string },
|
||||
table2: { designerId: string },
|
||||
withoutRef: { designerId: string }
|
||||
) {
|
||||
if (!designer.references) return false;
|
||||
const creator = new DesignerComponentCreator({
|
||||
...designer,
|
||||
references: withoutRef
|
||||
? designer.references.filter(x => x.designerId != withoutRef.designerId)
|
||||
: designer.references,
|
||||
});
|
||||
const arrays = creator.components.map(x => x.thisAndSubComponentsTables);
|
||||
const array1 = arrays.find(a => a.find(x => x.designerId == table1.designerId));
|
||||
const array2 = arrays.find(a => a.find(x => x.designerId == table2.designerId));
|
||||
return array1 == array2;
|
||||
}
|
||||
|
||||
export function findDesignerFilterType({ designerId, columnName }, designer) {
|
||||
const table = (designer.tables || []).find(x => x.designerId == designerId);
|
||||
if (table) {
|
||||
const column = (table.columns || []).find(x => x.columnName == columnName);
|
||||
if (column) {
|
||||
const { dataType } = column;
|
||||
return getFilterType(dataType);
|
||||
}
|
||||
}
|
||||
return 'string';
|
||||
}
|
||||
@@ -1,44 +0,0 @@
|
||||
import { JoinType } from 'dbgate-sqltree';
|
||||
import { TableInfo } from 'dbgate-types';
|
||||
|
||||
export type DesignerTableInfo = TableInfo & {
|
||||
designerId: string;
|
||||
alias?: string;
|
||||
left: number;
|
||||
top: number;
|
||||
};
|
||||
|
||||
export type DesignerJoinType = JoinType | 'WHERE EXISTS' | 'WHERE NOT EXISTS';
|
||||
|
||||
export type DesignerReferenceInfo = {
|
||||
designerId: string;
|
||||
joinType: DesignerJoinType;
|
||||
sourceId: string;
|
||||
targetId: string;
|
||||
columns: {
|
||||
source: string;
|
||||
target: string;
|
||||
}[];
|
||||
};
|
||||
|
||||
export type DesignerColumnInfo = {
|
||||
designerId: string;
|
||||
columnName: string;
|
||||
alias?: string;
|
||||
isGrouped?: boolean;
|
||||
aggregate?: string;
|
||||
isOutput?: boolean;
|
||||
sortOrder?: number;
|
||||
filter?: string;
|
||||
groupFilter?: string;
|
||||
};
|
||||
|
||||
export type DesignerInfo = {
|
||||
tables: DesignerTableInfo[];
|
||||
columns: DesignerColumnInfo[];
|
||||
references: DesignerReferenceInfo[];
|
||||
};
|
||||
|
||||
// export type DesignerComponent = {
|
||||
// tables: DesignerTableInfo[];
|
||||
// };
|
||||
Reference in New Issue
Block a user