Merge pull request #3104 from Budibase/view-not-set

Handle nulls / empty in views and tables

packages/builder/src/components/backend/DataTable/modals/FilterModal.svelte

@@ -42,6 +42,14 @@
       name: "Contains",
       key: "CONTAINS",
     },
+    {
+      name: "Is Not Empty",
+      key: "NOT_EMPTY",
+    },
+    {
+      name: "Is Empty",
+      key: "EMPTY",
+    },
   ]
 
   const CONJUNCTIONS = [
@@ -112,6 +120,10 @@
 
   const getOptionLabel = x => x.name
   const getOptionValue = x => x.key
+
+  const showValue = filter => {
+    return !(filter.condition === "EMPTY" || filter.condition === "NOT_EMPTY")
+  }
 </script>
 
 <ModalContent title="Filter" confirmText="Save" onConfirm={saveView} size="L">
@@ -140,6 +152,7 @@
           {getOptionLabel}
           {getOptionValue}
         />
+        {#if showValue(filter)}
           {#if filter.key && isMultipleChoice(filter.key)}
             <Select
               bind:value={filter.value}
@@ -164,6 +177,11 @@
             />
           {/if}
           <Icon hoverable name="Close" on:click={() => removeFilter(idx)} />
+        {:else}
+          <Icon hoverable name="Close" on:click={() => removeFilter(idx)} />
+          <!-- empty div to preserve spacing -->
+          <div />
+        {/if}
       {/each}
     </div>
   {:else}

packages/server/src/api/controllers/view/viewBuilder.js

@@ -10,6 +10,15 @@ const TOKEN_MAP = {
   OR: "||",
 }
 
+const isEmptyExpression = key => {
+  return `(
+      doc["${key}"] === undefined ||
+      doc["${key}"] === null ||
+      doc["${key}"] === "" ||
+      (Array.isArray(doc["${key}"]) && doc["${key}"].length === 0)
+  )`
+}
+
 const GROUP_PROPERTY = {
   group: {
     type: "string",
@@ -72,6 +81,10 @@ function parseFilterExpression(filters) {
       expression.push(
         `doc["${filter.key}"].${TOKEN_MAP[filter.condition]}("${filter.value}")`
       )
+    } else if (filter.condition === "EMPTY") {
+      expression.push(isEmptyExpression(filter.key))
+    } else if (filter.condition === "NOT_EMPTY") {
+      expression.push(`!${isEmptyExpression(filter.key)}`)
     } else {
       const value =
         typeof filter.value == "string" ? `"${filter.value}"` : filter.value