Allow data provider filtering using dates and date ranges, and allow filtering using a value or binding for any type

packages/bbui/src/Form/Core/Combobox.svelte

@@ -43,8 +43,6 @@
   const onChange = e => {
     selectOption(e.target.value)
   }
-
-  $: console.log(disabled)
 </script>
 
 <div

packages/builder/src/actions.js

@@ -5,6 +5,7 @@ export const gradient = (node, config = {}) => {
     lightness: 0.7,
     softness: 0.9,
     seed: null,
+    version: null,
   }
 
   // Applies a gradient background
@@ -15,6 +16,7 @@ export const gradient = (node, config = {}) => {
     }
     const { saturation, lightness, softness, points } = config
     const seed = config.seed || Math.random().toString(32).substring(2)
+    const version = config.version ?? 0
 
     // Hash function which returns a fixed hash between specified limits
     // for a given seed and a given version
@@ -69,10 +71,10 @@ export const gradient = (node, config = {}) => {
       )
     }
 
-    let css = `opacity:0.9;background:${randomHSL(seed, 0, 0.7)};`
+    let css = `opacity:0.9;background:${randomHSL(seed, version, 0.7)};`
     css += "background-image:"
     for (let i = 0; i < points - 1; i++) {
-      css += `${randomGradientPoint(seed, i)},`
+      css += `${randomGradientPoint(seed, version + i)},`
     }
     css += `${randomGradientPoint(seed, points)};`
     node.style = css

packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor/FilterBuilder.svelte

@@ -5,6 +5,7 @@
     Button,
     Select,
     Combobox,
+    Input,
   } from "@budibase/bbui"
   import { store, currentAsset } from "builderStore"
   import { getBindableProperties } from "builderStore/dataBinding"
@@ -68,6 +69,7 @@
         field: null,
         operator: OperatorOptions.Equals.value,
         value: null,
+        valueType: "Value",
       },
     ]
   }
@@ -168,7 +170,13 @@
         on:change={e => onOperatorChange(expression, e.detail)}
         placeholder={null}
       />
-      {#if ["string", "longform", "number"].includes(expression.type)}
+      <Select
+        disabled={expression.noValue || !expression.field}
+        options={["Value", "Binding"]}
+        bind:value={expression.valueType}
+        placeholder={null}
+      />
+      {#if expression.valueType === "Binding"}
         <DrawerBindableInput
           disabled={expression.noValue}
           title={`Value for "${expression.field}"`}
@@ -177,6 +185,8 @@
           bindings={bindableProperties}
           on:change={event => (expression.value = event.detail)}
         />
+      {:else if ["string", "longform", "number"].includes(expression.type)}
+        <Input disabled={expression.noValue} bind:value={expression.value} />
       {:else if expression.type === "options"}
         <Combobox
           disabled={expression.noValue}
@@ -222,6 +232,6 @@
     column-gap: var(--spacing-l);
     row-gap: var(--spacing-s);
     align-items: center;
-    grid-template-columns: 1fr 120px 1fr auto;
+    grid-template-columns: 1fr 120px 120px 1fr auto;
   }
 </style>

packages/server/src/api/controllers/search/utils.js

@@ -39,7 +39,6 @@ function buildSearchUrl({
   if (bookmark) {
     url += `&bookmark=${bookmark}`
   }
-  console.log(url)
   return checkSlashesInUrl(url)
 }
 
@@ -142,13 +141,12 @@ class QueryBuilder {
         if (!value) {
           return null
         }
-        if (isNaN(value.low) || value.low == null || value.low === "") {
+        if (value.low == null || value.low === "") {
           return null
         }
-        if (isNaN(value.high) || value.high == null || value.high === "") {
+        if (value.high == null || value.high === "") {
           return null
         }
-        console.log(value)
         return `${key}:[${value.low} TO ${value.high}]`
       })
     }

packages/standard-components/src/DataProvider.svelte

@@ -83,20 +83,21 @@
       notEmpty: {},
     }
     if (Array.isArray(filter)) {
-      filter.forEach(expression => {
+      filter.forEach(({ operator, field, type, value }) => {
-        if (expression.operator.startsWith("range")) {
+        if (operator.startsWith("range")) {
-          let range = {
+          if (!query.range[field]) {
-            low: Number.MIN_SAFE_INTEGER,
+            query.range[field] = {
-            high: Number.MAX_SAFE_INTEGER,
+              low: type === "number" ? Number.MIN_SAFE_INTEGER : "0000",
+              high: type === "number" ? Number.MAX_SAFE_INTEGER : "9999",
             }
-          if (expression.operator === "rangeLow") {
-            range.low = expression.value
-          } else if (expression.operator === "rangeHigh") {
-            range.high = expression.value
           }
-          query.range[expression.field] = range
+          if (operator === "rangeLow") {
-        } else if (query[expression.operator]) {
+            query.range[field].low = value
-          query[expression.operator][expression.field] = expression.value
+          } else if (operator === "rangeHigh") {
+            query.range[field].high = value
+          }
+        } else if (query[operator]) {
+          query[operator][field] = value
         }
       })
     }