Add full type support to conditional UI

packages/builder/src/components/design/PropertiesPanel/ConditionalUISection.svelte

@@ -17,8 +17,6 @@
     store.actions.components.updateConditions(tempValue)
     drawer.hide()
   }
-
-  $: console.log(componentInstance?._id)
 </script>
 
 <DetailSummary

packages/builder/src/components/design/PropertiesPanel/PropertyControls/ConditionalUIDrawer.svelte

@@ -6,6 +6,8 @@
     DrawerContent,
     Layout,
     Select,
+    Input,
+    DatePicker,
   } from "@budibase/bbui"
   import { flip } from "svelte/animate"
   import { dndzone } from "svelte-dnd-action"
@@ -34,6 +36,24 @@
       value: "update",
     },
   ]
+  const valueTypeOptions = [
+    {
+      value: "string",
+      label: "Binding",
+    },
+    {
+      value: "number",
+      label: "Number",
+    },
+    {
+      value: "datetime",
+      label: "Date",
+    },
+    {
+      value: "boolean",
+      label: "Boolean",
+    },
+  ]
 
   $: definition = store.actions.components.getDefinition(
     $selectedComponent?._component
@@ -44,7 +64,6 @@
       value: setting.key,
     }
   })
-  $: operatorOptions = getValidOperatorsForType("string")
   $: bindableProperties = getBindableProperties(
     $currentAsset,
     $store.selectedComponentId
@@ -70,6 +89,7 @@
     conditions = [
       ...conditions,
       {
+        valueType: "string",
         id: generate(),
         action: "hide",
         operator: OperatorOptions.Equals.value,
@@ -84,6 +104,34 @@
   const updateLinks = e => {
     conditions = e.detail.items
   }
+
+  const getOperatorOptions = condition => {
+    return getValidOperatorsForType(condition.valueType)
+  }
+
+  const onOperatorChange = (condition, newOperator) => {
+    const noValueOptions = [
+      OperatorOptions.Empty.value,
+      OperatorOptions.NotEmpty.value,
+    ]
+    condition.noValue = noValueOptions.includes(newOperator)
+    if (condition.noValue) {
+      condition.referenceValue = null
+      condition.valueType = "string"
+    }
+  }
+
+  const onValueTypeChange = (condition, newType) => {
+    condition.referenceValue = null
+
+    // Ensure a valid operator is set
+    const validOperators = getValidOperatorsForType(newType)
+    if (!validOperators.includes(condition.operator)) {
+      condition.operator =
+        validOperators[0]?.value ?? OperatorOptions.Equals.value
+      onOperatorChange(condition, condition.operator)
+    }
+  }
 </script>
 
 <DrawerContent>
@@ -143,15 +191,39 @@
               />
               <Select
                 placeholder={null}
-                options={operatorOptions}
+                options={getOperatorOptions(condition)}
                 bind:value={condition.operator}
+                on:change={e => onOperatorChange(condition, e.detail)}
               />
-              <DrawerBindableInput
+              <Select
-                bindings={bindableProperties}
+                disabled={condition.noValue}
-                placeholder="Value"
+                options={valueTypeOptions}
-                value={condition.referenceValue}
+                bind:value={condition.valueType}
-                on:change={e => (condition.referenceValue = e.detail)}
+                placeholder={null}
+                on:change={e => onValueTypeChange(condition, e.detail)}
               />
+              {#if ["string", "number"].includes(condition.valueType)}
+                <DrawerBindableInput
+                  disabled={condition.noValue}
+                  bindings={bindableProperties}
+                  placeholder="Value"
+                  value={condition.referenceValue}
+                  on:change={e => (condition.referenceValue = e.detail)}
+                />
+              {:else if condition.valueType === "datetime"}
+                <DatePicker
+                  placeholder="Value"
+                  disabled={condition.noValue}
+                  bind:value={condition.referenceValue}
+                />
+              {:else if condition.valueType === "boolean"}
+                <Select
+                  placeholder="Value"
+                  disabled={condition.noValue}
+                  options={["True", "False"]}
+                  bind:value={condition.referenceValue}
+                />
+              {/if}
               <Icon
                 name="Close"
                 hoverable
@@ -176,7 +248,7 @@
 <style>
   .container {
     width: 100%;
-    max-width: 1200px;
+    max-width: 1400px;
     margin: 0 auto;
   }
   .conditions {
@@ -190,12 +262,12 @@
     gap: var(--spacing-l);
     display: grid;
     align-items: center;
-    grid-template-columns: auto 1fr auto 1fr 1fr 1fr auto;
+    grid-template-columns: auto 1fr auto 1fr 1fr 1fr 1fr auto;
     border-radius: var(--border-radius-s);
     transition: background-color ease-in-out 130ms;
   }
   .condition.update {
-    grid-template-columns: auto 1fr 1fr auto 1fr auto 1fr 1fr 1fr auto;
+    grid-template-columns: auto 1fr 1fr auto 1fr auto 1fr 1fr 1fr 1fr auto;
   }
   .condition:hover {
     background-color: var(--spectrum-global-color-gray-100);

packages/client/src/utils/conditions.js

@@ -9,14 +9,35 @@ export const getActiveConditions = conditions => {
   }
 
   return conditions.filter(condition => {
-    const luceneCompatibleCondition = {
+    // Parse values into correct types
+    if (condition.valueType === "number") {
+      condition.referenceValue = parseFloat(condition.referenceValue)
+      condition.newValue = parseFloat(condition.newValue)
+    } else if (condition.valueType === "datetime") {
+      if (condition.referenceValue) {
+        condition.referenceValue = new Date(
+          condition.referenceValue
+        ).toISOString()
+      }
+      if (condition.newValue) {
+        condition.newValue = new Date(condition.newValue).toISOString()
+      }
+    } else if (condition.valueType === "boolean") {
+      condition.referenceValue =
+        `${condition.referenceValue}`.toLowerCase() === "true"
+      condition.newValue = `${condition.newValue}`.toLowerCase() === "true"
+    }
+
+    // Build lucene compatible condition expression
+    const luceneCondition = {
       ...condition,
-      type: "string",
+      type: condition.valueType,
       field: "newValue",
       value: condition.referenceValue,
     }
-    const query = buildLuceneQuery([luceneCompatibleCondition])
+
-    const result = luceneQuery([luceneCompatibleCondition], query)
+    const query = buildLuceneQuery([luceneCondition])
+    const result = luceneQuery([luceneCondition], query)
     return result.length > 0
   })
 }