dennii/dbgate
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/dbgate.git synced 2026-04-27 05:36:01 +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) { function getTableDisplayName(column, tables) {
const table = (tables || []).find(x => x.designerId == column.designerId); const table = (tables || []).find(x => x.designerId == column.designerId);
if (table) return table.alias || table.pureName; if (table) return table.alias || table.pureName;
@@ -6,7 +6,7 @@
} }
</script> </script>
<script lang="ts"> <script>
import { map } from 'lodash'; import { map } from 'lodash';
import DataFilterControl from '../datagrid/DataFilterControl.svelte'; import DataFilterControl from '../datagrid/DataFilterControl.svelte';
import { findDesignerFilterType } from '../designer/designerTools'; import { findDesignerFilterType } from '../designer/designerTools';
@@ -41,96 +41,105 @@
$: hasGroupedColumn = !!(columns || []).find(x => x.isGrouped); $: hasGroupedColumn = !!(columns || []).find(x => x.isGrouped);
</script> </script>
<TableControl <div class="wrapper">
rows={columns || []} <TableControl
columns={[ rows={columns || []}
{ fieldName: 'columnName', header: 'Column/Expression' }, columns={[
{ fieldName: 'tableDisplayName', header: 'Table', formatter: row => getTableDisplayName(row, tables) }, { fieldName: 'columnName', header: 'Column/Expression' },
{ fieldName: 'isOutput', header: 'Output', slot: 0 }, { fieldName: 'tableDisplayName', header: 'Table', formatter: row => getTableDisplayName(row, tables) },
{ fieldName: 'alias', header: 'Alias', slot: 1 }, { fieldName: 'isOutput', header: 'Output', slot: 0 },
{ fieldName: 'isGrouped', header: 'Group by', slot: 2 }, { fieldName: 'alias', header: 'Alias', slot: 1 },
{ fieldName: 'aggregate', header: 'Aggregate', slot: 3 }, { fieldName: 'isGrouped', header: 'Group by', slot: 2 },
{ fieldName: 'sortOrder', header: 'Sort order', slot: 4 }, { fieldName: 'aggregate', header: 'Aggregate', slot: 3 },
{ fieldName: 'filter', header: 'Filter', slot: 5 }, { fieldName: 'sortOrder', header: 'Sort order', slot: 4 },
hasGroupedColumn && { fieldName: 'groupFilter', header: 'Group filter', slot: 6 }, { fieldName: 'filter', header: 'Filter', slot: 5 },
{ fieldName: 'actions', header: '', slot: 7 }, hasGroupedColumn && { fieldName: 'groupFilter', header: 'Group filter', slot: 6 },
]} { fieldName: 'actions', header: '', slot: 7 },
> ]}
<svelte:fragment slot="0" let:row> >
<CheckboxField <svelte:fragment slot="0" let:row>
checked={row.isOutput} <CheckboxField
onChange={e => { checked={row.isOutput}
if (e.target.checked) changeColumn({ ...row, isOutput: true }); onChange={e => {
else changeColumn({ ...row, isOutput: false }); if (e.target.checked) changeColumn({ ...row, isOutput: true });
}} else changeColumn({ ...row, isOutput: false });
/> }}
</svelte:fragment> />
<svelte:fragment slot="1" let:row> </svelte:fragment>
<TextField <svelte:fragment slot="1" let:row>
value={row.alias} <TextField
on:input={e => { value={row.alias}
changeColumn({ ...row, alias: e.target.value }); on:input={e => {
}} changeColumn({ ...row, alias: e.target.value });
/> }}
</svelte:fragment> />
<svelte:fragment slot="2" let:row> </svelte:fragment>
<CheckboxField <svelte:fragment slot="2" let:row>
checked={row.isGrouped} <CheckboxField
on:change={e => { checked={row.isGrouped}
if (e.target.checked) changeColumn({ ...row, isGrouped: true }); on:change={e => {
else changeColumn({ ...row, isGrouped: false }); if (e.target.checked) changeColumn({ ...row, isGrouped: true });
}} else changeColumn({ ...row, isGrouped: false });
/> }}
</svelte:fragment> />
<svelte:fragment slot="3" let:row> </svelte:fragment>
{#if !row.isGrouped} <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 <SelectField
isNative isNative
value={row.aggregate} value={row.sortOrder}
on:change={e => { 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> <svelte:fragment slot="5" let:row>
<svelte:fragment slot="4" let:row> <DataFilterControl
<SelectField filterType={findDesignerFilterType(row, value)}
isNative filter={row.filter}
value={row.sortOrder} setFilter={filter => {
on:change={e => { changeColumn({ ...row, filter });
changeColumn({ ...row, sortOrder: parseInt(e.detail) }); }}
}} />
options={[ </svelte:fragment>
{ label: '---', value: '0' }, <svelte:fragment slot="6" let:row>
{ label: '1st, ascending', value: '1' }, <DataFilterControl
{ label: '1st, descending', value: '-1' }, filterType={findDesignerFilterType(row, value)}
{ label: '2nd, ascending', value: '2' }, filter={row.groupFilter}
{ label: '2nd, descending', value: '-2' }, setFilter={groupFilter => {
{ label: '3rd, ascending', value: '3' }, changeColumn({ ...row, groupFilter });
{ label: '3rd, descending', value: '-3' }, }}
]} />
/> </svelte:fragment>
</svelte:fragment> <svelte:fragment slot="7" let:row>
<svelte:fragment slot="5" let:row> <InlineButton on:click={() => removeColumn(row)}>Remove</InlineButton>
<DataFilterControl </svelte:fragment>
filterType={findDesignerFilterType(row, value)} </TableControl>
filter={row.filter} </div>
setFilter={filter => {
changeColumn({ ...row, filter }); <style>
}} .wrapper {
/> overflow: auto;
</svelte:fragment> flex: 1;
<svelte:fragment slot="6" let:row> }
<DataFilterControl </style>
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>