From 9edde27620c4df16bf76361a85f41951e2784b7d Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Thu, 11 Apr 2024 12:48:06 +0200
Subject: [PATCH] Add no column valid message

---
 .../src/components/FilterBuilder.svelte       | 184 +++++++++---------
 1 file changed, 94 insertions(+), 90 deletions(-)
diff --git a/packages/frontend-core/src/components/FilterBuilder.svelte b/packages/frontend-core/src/components/FilterBuilder.svelte
index 67bfca524d..5aef3d0fd0 100644
--- a/packages/frontend-core/src/components/FilterBuilder.svelte
+++ b/packages/frontend-core/src/components/FilterBuilder.svelte
@@ -148,101 +148,105 @@
 
 <div class="container" class:mobile={$context?.device?.mobile}>
   <Layout noPadding>
-    <Body size="S">
-      {#if !filters?.length}
-        Add your first filter expression.
-      {:else}
-        <slot name="filteringHeroContent" />
-      {/if}
-    </Body>
-    {#if filters?.length}
-      <div class="filter-label">
-        <Label>Filters</Label>
-      </div>
-      <div class="fields">
-        {#each filters as filter}
-          <Select
-            bind:value={filter.field}
-            options={fieldOptions}
-            on:change={() => onFieldChange(filter)}
-            placeholder="Column"
-          />
-          <Select
-            disabled={!filter.field}
-            options={getValidOperatorsForType(filter)}
-            bind:value={filter.operator}
-            on:change={() => onOperatorChange(filter)}
-            placeholder={null}
-          />
-          {#if allowBindings}
+    {#if fieldOptions?.length}
+      <Body size="S">
+        {#if !filters?.length}
+          Add your first filter expression.
+        {:else}
+          <slot name="filteringHeroContent" />
+        {/if}
+      </Body>
+      {#if filters?.length}
+        <div class="filter-label">
+          <Label>Filters</Label>
+        </div>
+        <div class="fields">
+          {#each filters as filter}
             <Select
-              disabled={filter.noValue || !filter.field}
-              options={valueTypeOptions}
-              bind:value={filter.valueType}
-              on:change={() => onValueTypeChange(filter)}
+              bind:value={filter.field}
+              options={fieldOptions}
+              on:change={() => onFieldChange(filter)}
+              placeholder="Column"
+            />
+            <Select
+              disabled={!filter.field}
+              options={getValidOperatorsForType(filter)}
+              bind:value={filter.operator}
+              on:change={() => onOperatorChange(filter)}
               placeholder={null}
             />
-          {/if}
-          {#if allowBindings && filter.field && filter.valueType === "Binding"}
-            <slot name="binding" {filter} />
-          {:else if [FieldType.STRING, FieldType.LONGFORM, FieldType.NUMBER, FieldType.BIGINT, FieldType.FORMULA].includes(filter.type)}
-            <Input disabled={filter.noValue} bind:value={filter.value} />
-          {:else if filter.type === FieldType.ARRAY || (filter.type === FieldType.OPTIONS && filter.operator === SearchQueryOperators.ONE_OF)}
-            <Multiselect
-              disabled={filter.noValue}
-              options={getFieldOptions(filter.field)}
-              bind:value={filter.value}
-            />
-          {:else if filter.type === FieldType.OPTIONS}
-            <Combobox
-              disabled={filter.noValue}
-              options={getFieldOptions(filter.field)}
-              bind:value={filter.value}
-            />
-          {:else if filter.type === FieldType.BOOLEAN}
-            <Combobox
-              disabled={filter.noValue}
-              options={[
-                { label: "True", value: "true" },
-                { label: "False", value: "false" },
-              ]}
-              bind:value={filter.value}
-            />
-          {:else if filter.type === FieldType.DATETIME}
-            <DatePicker
-              disabled={filter.noValue}
-              enableTime={!getSchema(filter)?.dateOnly}
-              timeOnly={getSchema(filter)?.timeOnly}
-              bind:value={filter.value}
-            />
-          {:else}
-            <Input disabled />
-          {/if}
-          <div class="controls">
-            <Icon
-              class
-              name="Duplicate"
-              hoverable
-              size="S"
-              on:click={() => duplicateFilter(filter.id)}
-            />
-          </div>
-          <div class="controls">
-            <Icon
-              name="Close"
-              hoverable
-              size="S"
-              on:click={() => removeFilter(filter.id)}
-            />
-          </div>
-        {/each}
+            {#if allowBindings}
+              <Select
+                disabled={filter.noValue || !filter.field}
+                options={valueTypeOptions}
+                bind:value={filter.valueType}
+                on:change={() => onValueTypeChange(filter)}
+                placeholder={null}
+              />
+            {/if}
+            {#if allowBindings && filter.field && filter.valueType === "Binding"}
+              <slot name="binding" {filter} />
+            {:else if [FieldType.STRING, FieldType.LONGFORM, FieldType.NUMBER, FieldType.BIGINT, FieldType.FORMULA].includes(filter.type)}
+              <Input disabled={filter.noValue} bind:value={filter.value} />
+            {:else if filter.type === FieldType.ARRAY || (filter.type === FieldType.OPTIONS && filter.operator === SearchQueryOperators.ONE_OF)}
+              <Multiselect
+                disabled={filter.noValue}
+                options={getFieldOptions(filter.field)}
+                bind:value={filter.value}
+              />
+            {:else if filter.type === FieldType.OPTIONS}
+              <Combobox
+                disabled={filter.noValue}
+                options={getFieldOptions(filter.field)}
+                bind:value={filter.value}
+              />
+            {:else if filter.type === FieldType.BOOLEAN}
+              <Combobox
+                disabled={filter.noValue}
+                options={[
+                  { label: "True", value: "true" },
+                  { label: "False", value: "false" },
+                ]}
+                bind:value={filter.value}
+              />
+            {:else if filter.type === FieldType.DATETIME}
+              <DatePicker
+                disabled={filter.noValue}
+                enableTime={!getSchema(filter)?.dateOnly}
+                timeOnly={getSchema(filter)?.timeOnly}
+                bind:value={filter.value}
+              />
+            {:else}
+              <Input disabled />
+            {/if}
+            <div class="controls">
+              <Icon
+                class
+                name="Duplicate"
+                hoverable
+                size="S"
+                on:click={() => duplicateFilter(filter.id)}
+              />
+            </div>
+            <div class="controls">
+              <Icon
+                name="Close"
+                hoverable
+                size="S"
+                on:click={() => removeFilter(filter.id)}
+              />
+            </div>
+          {/each}
+        </div>
+      {/if}
+      <div>
+        <Button icon="AddCircle" size="M" secondary on:click={addFilter}>
+          Add filter
+        </Button>
       </div>
+    {:else}
+      <Body size="S">None of the table column can be used for filtering.</Body>
     {/if}
-    <div>
-      <Button icon="AddCircle" size="M" secondary on:click={addFilter}>
-        Add filter
-      </Button>
-    </div>
   </Layout>
 </div>
 
