or conditions in query designer #321

packages/web/src/designer/DesignerQueryDumper.ts

@@ -79,18 +79,19 @@ export class DesignerQueryDumper {
     return select;
   }
 
-  addConditions(select: Select, tables: DesignerTableInfo[]) {
+  buildConditionFromFilterField(tables: DesignerTableInfo[], filterField: string): Condition {
+    const conditions = [];
+
     for (const column of this.designer.columns || []) {
-      if (!column.filter) continue;
+      if (!column[filterField]) continue;
       const table = (this.designer.tables || []).find(x => x.designerId == column.designerId);
       if (!table) continue;
       if (!tables.find(x => x.designerId == table.designerId)) continue;
 
       try {
-        const condition = parseFilter(column.filter, findDesignerFilterType(column, this.designer));
+        const condition = parseFilter(column[filterField], findDesignerFilterType(column, this.designer));
         if (condition) {
-          select.where = mergeConditions(
-            select.where,
+          conditions.push(
             _.cloneDeepWith(condition, expr => {
               if (expr.exprType == 'placeholder')
                 return {
@@ -106,6 +107,39 @@ export class DesignerQueryDumper {
         continue;
       }
     }
+
+    if (conditions.length == 0) {
+      return null;
+    }
+
+    if (conditions.length == 1) {
+      return conditions[0];
+    }
+
+    return {
+      conditionType: 'and',
+      conditions,
+    };
+  }
+
+  addConditions(select: Select, tables: DesignerTableInfo[]) {
+    const additionalFilterCount = this.designer.settings?.additionalFilterCount || 0;
+
+    const filterFields = ['filter', ..._.range(additionalFilterCount).map(index => `additionalFilter${index + 1}`)];
+
+    const conditions = _.compact(filterFields.map(field => this.buildConditionFromFilterField(tables, field)));
+
+    if (conditions.length == 0) {
+      return;
+    }
+    if (conditions.length == 0) {
+      select.where = mergeConditions(select.where, conditions[0]);
+      return;
+    }
+    select.where = mergeConditions(select.where, {
+      conditionType: 'or',
+      conditions,
+    });
   }
 
   addGroupConditions(select: Select, tables: DesignerTableInfo[], selectIsGrouped: boolean) {

packages/web/src/designer/types.ts

@@ -37,6 +37,7 @@ export type DesignerColumnInfo = {
 
 export type DesignerSettings = {
   isDistinct?: boolean;
+  additionalFilterCount?: number;
 };
 
 export type DesignerInfo = {

packages/web/src/elements/QueryDesignColumns.svelte

@@ -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>

packages/web/src/elements/TableControl.svelte

@@ -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] || ''}