mirror of
https://github.com/DeNNiiInc/dbgate.git
synced 2026-04-27 12:36:01 +00:00
removed obsolete query designer
This commit is contained in:
SPRINX0\prochazka
@@ -1,52 +0,0 @@
|
||||
<script lang="ts">
|
||||
import _ from 'lodash';
|
||||
|
||||
import Designer from './Designer.svelte';
|
||||
import { isConnectedByReference, referenceIsConnecting } from './designerTools';
|
||||
import QueryDesignerReference from './QueryDesignerReference.svelte';
|
||||
</script>
|
||||
|
||||
<Designer
|
||||
{...$$props}
|
||||
settings={{
|
||||
showTableCloseButton: true,
|
||||
allowColumnOperations: true,
|
||||
allowCreateRefByDrag: true,
|
||||
allowTableAlias: true,
|
||||
allowScrollColumns: true,
|
||||
canSelectColumns: true,
|
||||
referenceMenu: ({ designer, reference, onChangeReference, onRemoveReference }) => {
|
||||
const isConnected = isConnectedByReference(
|
||||
designer,
|
||||
{ designerId: reference?.sourceId },
|
||||
{ designerId: reference?.targetId },
|
||||
reference
|
||||
);
|
||||
const setJoinType = joinType => {
|
||||
onChangeReference({
|
||||
...reference,
|
||||
joinType,
|
||||
});
|
||||
};
|
||||
|
||||
return [
|
||||
{ text: 'Remove', onClick: () => onRemoveReference(reference) },
|
||||
!isConnected && [
|
||||
{ divider: true },
|
||||
{ onClick: () => setJoinType('INNER JOIN'), text: 'Set INNER JOIN' },
|
||||
{ onClick: () => setJoinType('LEFT JOIN'), text: 'Set LEFT JOIN' },
|
||||
{ onClick: () => setJoinType('RIGHT JOIN'), text: 'Set RIGHT JOIN' },
|
||||
{ onClick: () => setJoinType('FULL OUTER JOIN'), text: 'Set FULL OUTER JOIN' },
|
||||
{ onClick: () => setJoinType('CROSS JOIN'), text: 'Set CROSS JOIN' },
|
||||
{ onClick: () => setJoinType('WHERE EXISTS'), text: 'Set WHERE EXISTS' },
|
||||
{ onClick: () => setJoinType('WHERE NOT EXISTS'), text: 'Set WHERE NOT EXISTS' },
|
||||
],
|
||||
];
|
||||
},
|
||||
createReferenceText: reference =>
|
||||
_.snakeCase(reference?.joinType || 'CROSS JOIN')
|
||||
.replace('_', '\xa0')
|
||||
.replace('_', '\xa0'),
|
||||
}}
|
||||
referenceComponent={QueryDesignerReference}
|
||||
/>
|
||||
@@ -1,156 +0,0 @@
|
||||
<script lang="ts">
|
||||
import _ from 'lodash';
|
||||
import { isConnectedByReference } from './designerTools';
|
||||
import contextMenu from '../utility/contextMenu';
|
||||
|
||||
export let reference;
|
||||
export let onRemoveReference;
|
||||
export let onChangeReference;
|
||||
export let designer;
|
||||
export let domTables;
|
||||
export let settings;
|
||||
|
||||
let src = null;
|
||||
let dst = null;
|
||||
|
||||
let minpos;
|
||||
let columnsY = [];
|
||||
|
||||
const BUSWI = 10;
|
||||
const EXTWI = 25;
|
||||
|
||||
$: buswi = settings?.referencePaintSettings?.buswi || BUSWI;
|
||||
$: extwi = settings?.referencePaintSettings?.extwi || EXTWI;
|
||||
|
||||
export function recomputePosition() {
|
||||
const { designerId, sourceId, targetId, columns, joinType } = reference;
|
||||
|
||||
/** @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 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 });
|
||||
|
||||
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('');
|
||||
}
|
||||
|
||||
src = { x: minpos.xsrc, y: srcY };
|
||||
dst = { x: minpos.xdst, y: dstY };
|
||||
|
||||
columnsY = columns.map((col, colIndex) => {
|
||||
const y1 = sourceTable.getColumnY(col.source);
|
||||
const y2 = targetTable.getColumnY(col.target);
|
||||
return [y1, y2];
|
||||
});
|
||||
}
|
||||
|
||||
$: {
|
||||
domTables;
|
||||
recomputePosition();
|
||||
}
|
||||
|
||||
function createMenu() {
|
||||
if (settings?.referenceMenu) {
|
||||
return settings?.referenceMenu({
|
||||
designer,
|
||||
reference,
|
||||
onChangeReference,
|
||||
onRemoveReference,
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if src && dst && minpos}
|
||||
<svg>
|
||||
<polyline
|
||||
points={`
|
||||
${src.x},${src.y}
|
||||
${src.x + extwi * minpos.dirsrc},${src.y}
|
||||
${dst.x + extwi * minpos.dirdst},${dst.y}
|
||||
${dst.x},${dst.y}
|
||||
`}
|
||||
/>
|
||||
{#each columnsY as coly}
|
||||
<polyline
|
||||
points={`
|
||||
${src.x},${src.y}
|
||||
${src.x},${coly[0]}
|
||||
${src.x - buswi * minpos.dirsrc},${coly[0]}
|
||||
`}
|
||||
/>
|
||||
<polyline
|
||||
points={`
|
||||
${dst.x},${dst.y}
|
||||
${dst.x},${coly[1]}
|
||||
${dst.x - buswi * minpos.dirdst},${coly[1]}
|
||||
`}
|
||||
/>
|
||||
{/each}
|
||||
</svg>
|
||||
|
||||
<div
|
||||
use:contextMenu={createMenu}
|
||||
class="wrapper"
|
||||
style={`left: ${(src.x + extwi * minpos.dirsrc + dst.x + extwi * minpos.dirdst) / 2 - 16}px;
|
||||
top: ${(src.y + dst.y) / 2 - 16}px`}
|
||||
>
|
||||
<div class="text">
|
||||
{settings?.createReferenceText ? settings?.createReferenceText(reference) : ''}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
svg {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
polyline {
|
||||
fill: none;
|
||||
stroke: var(--theme-bg-4);
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
position: absolute;
|
||||
border: 1px solid var(--theme-border);
|
||||
background-color: var(--theme-bg-1);
|
||||
z-index: 900;
|
||||
border-radius: 10px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.text {
|
||||
position: relative;
|
||||
float: left;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 900;
|
||||
white-space: nowrap;
|
||||
background-color: var(--theme-bg-1);
|
||||
}
|
||||
</style>
|
||||
@@ -1,274 +0,0 @@
|
||||
<script context="module">
|
||||
function getTableDisplayName(column, tables) {
|
||||
const table = (tables || []).find(x => x.designerId == column.designerId);
|
||||
if (table) return table.alias || table.pureName;
|
||||
return '';
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
import DataFilterControl from '../datagrid/DataFilterControl.svelte';
|
||||
import { findDesignerFilterBehaviour } from '../designer/designerTools';
|
||||
import CheckboxField from '../forms/CheckboxField.svelte';
|
||||
import SelectField from '../forms/SelectField.svelte';
|
||||
import TextField from '../forms/TextField.svelte';
|
||||
import InlineButton from '../buttons/InlineButton.svelte';
|
||||
import uuidv1 from 'uuid/v1';
|
||||
|
||||
import TableControl from './TableControl.svelte';
|
||||
import FormStyledButton from '../buttons/FormStyledButton.svelte';
|
||||
import _ from 'lodash';
|
||||
import FontIcon from '../icons/FontIcon.svelte';
|
||||
|
||||
export let value;
|
||||
export let onChange;
|
||||
|
||||
const changeColumn = col => {
|
||||
onChange(current => ({
|
||||
...current,
|
||||
columns: (current.columns || []).map(x =>
|
||||
x.designerId == col.designerId && x.columnName == col.columnName ? col : x
|
||||
),
|
||||
}));
|
||||
};
|
||||
|
||||
const removeColumn = col => {
|
||||
onChange(current => ({
|
||||
...current,
|
||||
columns: (current.columns || []).filter(x => x.designerId != col.designerId || x.columnName != col.columnName),
|
||||
}));
|
||||
};
|
||||
|
||||
const moveColumn = (col, d) => {
|
||||
onChange(current => {
|
||||
const index = _.findIndex(
|
||||
current.columns || [],
|
||||
x => col.designerId == x.designerId && col.columnName == x.columnName
|
||||
);
|
||||
|
||||
if (index >= 0 && index + d >= 0 && index + d < current.columns?.length) {
|
||||
let columns = [...current.columns];
|
||||
|
||||
const tmp = columns[index + d];
|
||||
columns[index + d] = columns[index];
|
||||
columns[index] = tmp;
|
||||
|
||||
return {
|
||||
...current,
|
||||
columns,
|
||||
};
|
||||
}
|
||||
|
||||
return current;
|
||||
});
|
||||
};
|
||||
|
||||
const addExpressionColumn = () => {
|
||||
onChange(current => ({
|
||||
...current,
|
||||
columns: [...(current.columns || []), { isCustomExpression: true, isOutput: true, designerId: uuidv1() }],
|
||||
}));
|
||||
};
|
||||
|
||||
const addOrCondition = () => {
|
||||
onChange(current => ({
|
||||
...current,
|
||||
settings: {
|
||||
...current?.settings,
|
||||
additionalFilterCount: (current?.settings?.additionalFilterCount ?? 0) + 1,
|
||||
},
|
||||
}));
|
||||
};
|
||||
|
||||
const removeOrCondition = () => {
|
||||
onChange(current => ({
|
||||
...current,
|
||||
settings: {
|
||||
...current?.settings,
|
||||
additionalFilterCount: (current?.settings?.additionalFilterCount ?? 1) - 1,
|
||||
},
|
||||
}));
|
||||
};
|
||||
|
||||
const addGroupOrCondition = () => {
|
||||
onChange(current => ({
|
||||
...current,
|
||||
settings: {
|
||||
...current?.settings,
|
||||
additionalGroupFilterCount: (current?.settings?.additionalGroupFilterCount ?? 0) + 1,
|
||||
},
|
||||
}));
|
||||
};
|
||||
|
||||
const removeGroupOrCondition = () => {
|
||||
onChange(current => ({
|
||||
...current,
|
||||
settings: {
|
||||
...current?.settings,
|
||||
additionalGroupFilterCount: (current?.settings?.additionalGroupFilterCount ?? 1) - 1,
|
||||
},
|
||||
}));
|
||||
};
|
||||
|
||||
$: columns = value?.columns;
|
||||
$: tables = value?.tables;
|
||||
$: settings = value?.settings;
|
||||
$: hasGroupedColumn = !!(columns || []).find(x => x.isGrouped);
|
||||
</script>
|
||||
|
||||
<div class="wrapper">
|
||||
<TableControl
|
||||
rows={columns || []}
|
||||
columns={[
|
||||
{ fieldName: 'columnName', slot: 8, header: 'Column/Expression' },
|
||||
{ fieldName: 'tableDisplayName', header: 'Table', formatter: row => getTableDisplayName(row, tables) },
|
||||
{ fieldName: 'isOutput', header: 'Output', slot: 0 },
|
||||
{ fieldName: 'alias', header: 'Alias', slot: 1 },
|
||||
{ fieldName: 'isGrouped', header: 'Group by', slot: 2 },
|
||||
{ fieldName: 'aggregate', header: 'Aggregate', slot: 3 },
|
||||
{ fieldName: 'sortOrder', header: 'Sort order', slot: 4 },
|
||||
{ fieldName: 'filter', header: 'Filter', slot: 5, props: { filterField: 'filter' } },
|
||||
..._.range(settings?.additionalFilterCount || 0).map(index => ({
|
||||
fieldName: `additionalFilter${index + 1}`,
|
||||
header: `OR Filter ${index + 2}`,
|
||||
slot: 5,
|
||||
props: { filterField: `additionalFilter${index + 1}` },
|
||||
})),
|
||||
hasGroupedColumn && {
|
||||
fieldName: 'groupFilter',
|
||||
header: 'Group filter',
|
||||
slot: 5,
|
||||
props: { filterField: 'groupFilter' },
|
||||
},
|
||||
..._.range(hasGroupedColumn ? settings?.additionalGroupFilterCount || 0 : 0).map(index => ({
|
||||
fieldName: `additionalGroupFilter${index + 1}`,
|
||||
header: `OR group filter ${index + 2}`,
|
||||
slot: 5,
|
||||
props: { filterField: `additionalGroupFilter${index + 1}` },
|
||||
})),
|
||||
{ fieldName: 'actions', header: '', slot: 7 },
|
||||
]}
|
||||
>
|
||||
<svelte:fragment slot="8" let:row>
|
||||
{#if row.isCustomExpression}
|
||||
<TextField
|
||||
style="min-width:calc(100% - 9px)"
|
||||
value={row.customExpression}
|
||||
on:input={e => {
|
||||
changeColumn({ ...row, customExpression: e.target.value });
|
||||
}}
|
||||
/>
|
||||
{:else}
|
||||
{row.columnName}
|
||||
{/if}
|
||||
</svelte:fragment>
|
||||
|
||||
<svelte:fragment slot="0" let:row>
|
||||
<CheckboxField
|
||||
checked={row.isOutput}
|
||||
on:change={e => {
|
||||
if (e.target.checked) changeColumn({ ...row, isOutput: true });
|
||||
else changeColumn({ ...row, isOutput: false });
|
||||
}}
|
||||
/>
|
||||
</svelte:fragment>
|
||||
<svelte:fragment slot="1" let:row>
|
||||
<TextField
|
||||
style="min-width:calc(100% - 9px)"
|
||||
value={row.alias}
|
||||
on:input={e => {
|
||||
changeColumn({ ...row, alias: e.target.value });
|
||||
}}
|
||||
/>
|
||||
</svelte:fragment>
|
||||
<svelte:fragment slot="2" let:row>
|
||||
<CheckboxField
|
||||
checked={row.isGrouped}
|
||||
on:change={e => {
|
||||
if (e.target.checked) changeColumn({ ...row, isGrouped: true });
|
||||
else changeColumn({ ...row, isGrouped: false });
|
||||
}}
|
||||
/>
|
||||
</svelte:fragment>
|
||||
<svelte:fragment slot="3" let:row>
|
||||
{#if !row.isGrouped}
|
||||
<SelectField
|
||||
isNative
|
||||
style="min-width:calc(100% - 9px)"
|
||||
value={row.aggregate}
|
||||
on:change={e => {
|
||||
changeColumn({ ...row, aggregate: e.detail });
|
||||
}}
|
||||
options={['---', 'MIN', 'MAX', 'COUNT', 'COUNT DISTINCT', 'SUM', 'AVG'].map(x => ({ label: x, value: x }))}
|
||||
/>
|
||||
{/if}
|
||||
</svelte:fragment>
|
||||
<svelte:fragment slot="4" let:row>
|
||||
<SelectField
|
||||
isNative
|
||||
style="min-width:calc(100% - 9px)"
|
||||
value={row.sortOrder?.toString()}
|
||||
on:change={e => {
|
||||
changeColumn({ ...row, sortOrder: parseInt(e.detail) });
|
||||
}}
|
||||
options={[
|
||||
{ label: '---', value: '0' },
|
||||
{ label: '1st, ascending', value: '1' },
|
||||
{ label: '1st, descending', value: '-1' },
|
||||
{ label: '2nd, ascending', value: '2' },
|
||||
{ label: '2nd, descending', value: '-2' },
|
||||
{ label: '3rd, ascending', value: '3' },
|
||||
{ label: '3rd, descending', value: '-3' },
|
||||
{ label: '4th, ascending', value: '4' },
|
||||
{ label: '4th, descending', value: '-4' },
|
||||
{ label: '5th, ascending', value: '5' },
|
||||
{ label: '5th, descending', value: '-5' },
|
||||
{ label: '6th, ascending', value: '6' },
|
||||
{ label: '6th, descending', value: '-6' },
|
||||
{ label: '7th, ascending', value: '7' },
|
||||
{ label: '7th, descending', value: '-7' },
|
||||
{ label: '8th, ascending', value: '8' },
|
||||
{ label: '8th, descending', value: '-8' },
|
||||
{ label: '9th, ascending', value: '9' },
|
||||
{ label: '9th, descending', value: '-9' },
|
||||
{ label: '10th, ascending', value: '10' },
|
||||
{ label: '10th, descending', value: '-10' },
|
||||
]}
|
||||
/>
|
||||
</svelte:fragment>
|
||||
<svelte:fragment slot="5" let:row let:filterField>
|
||||
<DataFilterControl
|
||||
filterBehaviour={findDesignerFilterBehaviour(row, value)}
|
||||
filter={row[filterField]}
|
||||
setFilter={filter => {
|
||||
changeColumn({ ...row, [filterField]: filter });
|
||||
}}
|
||||
/>
|
||||
</svelte:fragment>
|
||||
<svelte:fragment slot="7" let:row>
|
||||
<div class="flex">
|
||||
<InlineButton on:click={() => removeColumn(row)} square><FontIcon icon="icon delete" /></InlineButton>
|
||||
<InlineButton on:click={() => moveColumn(row, -1)} square><FontIcon icon="icon arrow-up" /></InlineButton>
|
||||
<InlineButton on:click={() => moveColumn(row, 1)} square><FontIcon icon="icon arrow-down" /></InlineButton>
|
||||
</div>
|
||||
</svelte:fragment>
|
||||
</TableControl>
|
||||
<FormStyledButton value="Add custom expression" on:click={addExpressionColumn} style="width:200px" />
|
||||
<FormStyledButton value="Add OR condition" on:click={addOrCondition} style="width:200px" />
|
||||
{#if settings?.additionalFilterCount > 0}
|
||||
<FormStyledButton value="Remove OR condition" on:click={removeOrCondition} style="width:200px" />
|
||||
{/if}
|
||||
{#if hasGroupedColumn}
|
||||
<FormStyledButton value="Add group OR condition" on:click={addGroupOrCondition} style="width:200px" />
|
||||
{/if}
|
||||
{#if hasGroupedColumn && settings?.additionalGroupFilterCount > 0}
|
||||
<FormStyledButton value="Remove group OR condition" on:click={removeGroupOrCondition} style="width:200px" />
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.wrapper {
|
||||
overflow: auto;
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user