dennii/dbgate
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/dbgate.git synced 2026-04-19 00:16:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

qury designer fix

Browse Source
This commit is contained in:
Jan Prochazka
2021-04-17 20:41:42 +02:00
parent 90af165afd
commit 08d6f83a48
1 changed files with 99 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

189
packages/web/src/elements/QueryDesignColumns.svelte
View File

@@ -1,4 +1,4 @@
<script lang="ts" context="module">
<script context="module">
function getTableDisplayName(column, tables) {
const table = (tables || []).find(x => x.designerId == column.designerId);
if (table) return table.alias || table.pureName;
@@ -6,7 +6,7 @@
}
</script>
<script lang="ts">
<script>
import { map } from 'lodash';
import DataFilterControl from '../datagrid/DataFilterControl.svelte';
import { findDesignerFilterType } from '../designer/designerTools';
@@ -41,96 +41,105 @@
$: hasGroupedColumn = !!(columns || []).find(x => x.isGrouped);
</script>
<TableControl
rows={columns || []}
columns={[
{ fieldName: 'columnName', 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 },
hasGroupedColumn && { fieldName: 'groupFilter', header: 'Group filter', slot: 6 },
{ fieldName: 'actions', header: '', slot: 7 },
]}
>
<svelte:fragment slot="0" let:row>
<CheckboxField
checked={row.isOutput}
onChange={e => {
if (e.target.checked) changeColumn({ ...row, isOutput: true });
else changeColumn({ ...row, isOutput: false });
}}
/>
</svelte:fragment>
<svelte:fragment slot="1" let:row>
<TextField
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}
<div class="wrapper">
<TableControl
rows={columns || []}
columns={[
{ fieldName: 'columnName', 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 },
hasGroupedColumn && { fieldName: 'groupFilter', header: 'Group filter', slot: 6 },
{ fieldName: 'actions', header: '', slot: 7 },
]}
>
<svelte:fragment slot="0" let:row>
<CheckboxField
checked={row.isOutput}
onChange={e => {
if (e.target.checked) changeColumn({ ...row, isOutput: true });
else changeColumn({ ...row, isOutput: false });
}}
/>
</svelte:fragment>
<svelte:fragment slot="1" let:row>
<TextField
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
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
value={row.aggregate}
value={row.sortOrder}
on:change={e => {
changeColumn({ ...row, aggregate: e.detail });
changeColumn({ ...row, sortOrder: parseInt(e.detail) });
}}
options={['---', 'MIN', 'MAX', 'COUNT', 'COUNT DISTINCT', 'SUM', 'AVG'].map(x => ({ label: x, value: x }))}
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' },
]}
/>
{/if}
</svelte:fragment>
<svelte:fragment slot="4" let:row>
<SelectField
isNative
value={row.sortOrder}
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' },
]}
/>
</svelte:fragment>
<svelte:fragment slot="5" let:row>
<DataFilterControl
filterType={findDesignerFilterType(row, value)}
filter={row.filter}
setFilter={filter => {
changeColumn({ ...row, filter });
}}
/>
</svelte:fragment>
<svelte:fragment slot="6" let:row>
<DataFilterControl
filterType={findDesignerFilterType(row, value)}
filter={row.groupFilter}
setFilter={groupFilter => {
changeColumn({ ...row, groupFilter });
}}
/>
</svelte:fragment>
<svelte:fragment slot="7" let:row>
<InlineButton on:click={() => removeColumn(row)}>Remove</InlineButton>
</svelte:fragment>
</TableControl>
</svelte:fragment>
<svelte:fragment slot="5" let:row>
<DataFilterControl
filterType={findDesignerFilterType(row, value)}
filter={row.filter}
setFilter={filter => {
changeColumn({ ...row, filter });
}}
/>
</svelte:fragment>
<svelte:fragment slot="6" let:row>
<DataFilterControl
filterType={findDesignerFilterType(row, value)}
filter={row.groupFilter}
setFilter={groupFilter => {
changeColumn({ ...row, groupFilter });
}}
/>
</svelte:fragment>
<svelte:fragment slot="7" let:row>
<InlineButton on:click={() => removeColumn(row)}>Remove</InlineButton>
</svelte:fragment>
</TableControl>
</div>
<style>
.wrapper {
overflow: auto;
flex: 1;
}
</style>