or conditions in query designer #321

This commit is contained in:
Jan Prochazka
2022-07-17 08:38:27 +02:00
parent 15da5fb95e
commit d9b91f2122
4 changed files with 89 additions and 20 deletions

View File

@@ -17,6 +17,7 @@
import TableControl from './TableControl.svelte';
import FormStyledButton from '../buttons/FormStyledButton.svelte';
import _ from 'lodash';
export let value;
export let onChange;
@@ -44,8 +45,29 @@
}));
};
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,
},
}));
};
$: columns = value?.columns;
$: tables = value?.tables;
$: settings = value?.settings;
$: hasGroupedColumn = !!(columns || []).find(x => x.isGrouped);
</script>
@@ -60,7 +82,13 @@
{ 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 },
{ 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: 6 },
{ fieldName: 'actions', header: '', slot: 7 },
]}
@@ -138,12 +166,12 @@
]}
/>
</svelte:fragment>
<svelte:fragment slot="5" let:row>
<svelte:fragment slot="5" let:row let:filterField>
<DataFilterControl
filterType={findDesignerFilterType(row, value)}
filter={row.filter}
filter={row[filterField]}
setFilter={filter => {
changeColumn({ ...row, filter });
changeColumn({ ...row, [filterField]: filter });
}}
/>
</svelte:fragment>
@@ -161,6 +189,10 @@
</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}
</div>
<style>

View File

@@ -4,6 +4,7 @@
header: string;
component?: any;
getProps?: any;
props?: any;
formatter?: any;
slot?: number;
isHighlighted?: Function;
@@ -78,23 +79,24 @@
}}
>
{#each columnList as col}
{@const rowProps = { ...col.props, ...(col.getProps ? col.getProps(row) : null) }}
<td class:isHighlighted={col.isHighlighted && col.isHighlighted(row)} class:noCellPadding>
{#if col.component}
<svelte:component this={col.component} {...col.getProps(row)} />
<svelte:component this={col.component} {...rowProps} />
{:else if col.formatter}
{col.formatter(row)}
{:else if col.slot != null}
{#if col.slot == -1}<slot name="-1" {row} {index} />
{:else if col.slot == 0}<slot name="0" {row} {index} />
{:else if col.slot == 1}<slot name="1" {row} {index} />
{:else if col.slot == 2}<slot name="2" {row} {index} />
{:else if col.slot == 3}<slot name="3" {row} {index} />
{:else if col.slot == 4}<slot name="4" {row} {index} />
{:else if col.slot == 5}<slot name="5" {row} {index} />
{:else if col.slot == 6}<slot name="6" {row} {index} />
{:else if col.slot == 7}<slot name="7" {row} {index} />
{:else if col.slot == 8}<slot name="8" {row} {index} />
{:else if col.slot == 9}<slot name="9" {row} {index} />
{:else if col.slot == 0}<slot name="0" {row} {index} {...rowProps} />
{:else if col.slot == 1}<slot name="1" {row} {index} {...rowProps} />
{:else if col.slot == 2}<slot name="2" {row} {index} {...rowProps} />
{:else if col.slot == 3}<slot name="3" {row} {index} {...rowProps} />
{:else if col.slot == 4}<slot name="4" {row} {index} {...rowProps} />
{:else if col.slot == 5}<slot name="5" {row} {index} {...rowProps} />
{:else if col.slot == 6}<slot name="6" {row} {index} {...rowProps} />
{:else if col.slot == 7}<slot name="7" {row} {index} {...rowProps} />
{:else if col.slot == 8}<slot name="8" {row} {index} {...rowProps} />
{:else if col.slot == 9}<slot name="9" {row} {index} {...rowProps} />
{/if}
{:else}
{row[col.fieldName] || ''}