Hydrate view filters and allow filter changes to be saved to views

packages/builder/src/components/backend/DataTable/ViewV2DataTable.svelte

@@ -26,7 +26,9 @@
     showAvatars={false}
     on:updatedatasource={handleGridViewUpdate}
   >
-    <svelte:fragment slot="filter" />
+    <svelte:fragment slot="filter">
+      <GridFilterButton />
+    </svelte:fragment>
     <svelte:fragment slot="controls">
       <GridCreateEditRowModal />
     </svelte:fragment>

packages/builder/src/components/backend/DataTable/buttons/grid/GridFilterButton.svelte

@@ -4,9 +4,6 @@
 
   const { columns, datasource, filter, definition } = getContext("grid")
 
-  // Wipe filter whenever table ID changes to avoid using stale filters
-  $: $datasource, filter.set([])
-
   const onFilter = e => {
     filter.set(e.detail || [])
   }

packages/builder/src/components/backend/DataTable/modals/grid/GridCreateViewModal.svelte

@@ -3,12 +3,9 @@
   import { Input, notifications, ModalContent } from "@budibase/bbui"
   import { goto } from "@roxi/routify"
   import { viewsV2 } from "stores/backend"
-  import { LuceneUtils } from "@budibase/frontend-core"
 
   const { filter, sort, definition } = getContext("grid")
 
-  $: query = LuceneUtils.buildLuceneQuery($filter)
-
   let name
 
   $: views = Object.keys($definition?.views || {})
@@ -20,7 +17,7 @@
       const newView = await viewsV2.create({
         name,
         tableId: $definition._id,
-        query,
+        query: $filter,
         sort: {
           field: $sort.column,
           order: $sort.order,

packages/frontend-core/src/components/grid/stores/table.js

@@ -61,29 +61,41 @@ export const createActions = context => {
 export const initialise = context => {
   const { datasource, fetch, filter, sort, definition } = context
 
+  // Wipe filter whenever table ID changes to avoid using stale filters
+  definition.subscribe(() => {
+    if (get(datasource)?.type !== "table") {
+      return
+    }
+    filter.set([])
+  })
+
   // Update fetch when filter changes
   filter.subscribe($filter => {
-    if (get(datasource)?.type === "table") {
+    if (get(datasource)?.type !== "table") {
+      return
+    }
     get(fetch)?.update({
       filter: $filter,
     })
-    }
   })
 
   // Update fetch when sorting changes
   sort.subscribe($sort => {
-    if (get(datasource)?.type === "table") {
+    if (get(datasource)?.type !== "table") {
+      return
+    }
     get(fetch)?.update({
       sortOrder: $sort.order,
       sortColumn: $sort.column,
     })
-    }
   })
 
   // Ensure sorting UI reflects the fetch state whenever we reset the fetch,
   // which triggers a new definition
   definition.subscribe(() => {
-    if (get(datasource)?.type === "table") {
+    if (get(datasource)?.type !== "table") {
+      return
+    }
     const $fetch = get(fetch)
     if (!$fetch) {
       return
@@ -93,6 +105,5 @@ export const initialise = context => {
       column: sortColumn,
       order: sortOrder,
     })
-    }
   })
 }

packages/frontend-core/src/components/grid/stores/viewV2.js

@@ -82,9 +82,9 @@ export const createActions = context => {
 }
 
 export const initialise = context => {
-  const { definition, datasource, sort, rows } = context
+  const { definition, datasource, sort, rows, filter } = context
 
-  // For views, keep sort state in line with the view definition
+  // Keep sort and filter state in line with the view definition
   definition.subscribe($definition => {
     if (!$definition || get(datasource)?.type !== "viewV2") {
       return
@@ -93,6 +93,7 @@ export const initialise = context => {
       column: $definition.sort?.field,
       order: $definition.sort?.order,
     })
+    filter.set($definition.query || [])
   })
 
   // When sorting changes, ensure view definition is kept up to date
@@ -115,4 +116,19 @@ export const initialise = context => {
       await rows.actions.refreshData()
     }
   })
+
+  // When filters change, ensure view definition is kept up to date
+  filter.subscribe(async $filter => {
+    const $view = get(definition)
+    if (!$view || get(datasource)?.type !== "viewV2") {
+      return
+    }
+    if (JSON.stringify($filter) !== JSON.stringify($view.query)) {
+      await datasource.actions.saveDefinition({
+        ...$view,
+        query: $filter,
+      })
+      await rows.actions.refreshData()
+    }
+  })
 }