Update grids to allow filtering and sorting in client lib with V2 views

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

@@ -59,7 +59,16 @@ export const createActions = context => {
 }
 
 export const initialise = context => {
-  const { datasource, fetch, filter, sort, table } = context
+  const {
+    datasource,
+    fetch,
+    filter,
+    sort,
+    table,
+    initialFilter,
+    initialSortColumn,
+    initialSortOrder,
+  } = context
 
   // Keep a list of subscriptions so that we can clear them when the datasource
   // config changes
@@ -75,10 +84,10 @@ export const initialise = context => {
     }
 
     // Wipe state
-    filter.set([])
+    filter.set(get(initialFilter))
     sort.set({
-      column: null,
+      column: get(initialSortColumn),
-      order: "ascending",
+      order: get(initialSortOrder) || "ascending",
     })
 
     // Update fetch when filter changes

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

@@ -69,8 +69,20 @@ export const createActions = context => {
 }
 
 export const initialise = context => {
-  const { definition, datasource, sort, rows, filter, subscribe, viewV2 } =
+  const {
-    context
+    definition,
+    datasource,
+    sort,
+    rows,
+    filter,
+    subscribe,
+    viewV2,
+    initialFilter,
+    initialSortColumn,
+    initialSortOrder,
+    config,
+    fetch,
+  } = context
 
   // Keep a list of subscriptions so that we can clear them when the datasource
   // config changes
@@ -86,10 +98,10 @@ export const initialise = context => {
     }
 
     // Reset state for new view
-    filter.set([])
+    filter.set(get(initialFilter))
     sort.set({
-      column: null,
+      column: get(initialSortColumn),
-      order: "ascending",
+      order: get(initialSortOrder) || "ascending",
     })
 
     // Keep sort and filter state in line with the view definition
@@ -98,17 +110,25 @@ export const initialise = context => {
         if ($definition?.id !== $datasource.id) {
           return
         }
+        // Only override sorting if we don't have an initial sort column
+        if (!get(initialSortColumn)) {
           sort.set({
             column: $definition.sort?.field,
             order: $definition.sort?.order || "ascending",
           })
-        filter.set($definition.query || [])
+        }
+        // Only override filter state if we don't have an initial filter
+        if (!get(initialFilter)) {
+          filter.set($definition.query)
+        }
       })
     )
 
     // When sorting changes, ensure view definition is kept up to date
     unsubscribers.push(
       sort.subscribe(async $sort => {
+        // If we can mutate schema then update the view definition
+        if (get(config).canSaveSchema) {
           // Ensure we're updating the correct view
           const $view = get(definition)
           if ($view?.id !== $datasource.id) {
@@ -127,12 +147,27 @@ export const initialise = context => {
             })
             await rows.actions.refreshData()
           }
+        }
+        // Otherwise just update the fetch
+        else {
+          // Ensure we're updating the correct fetch
+          const $fetch = get(fetch)
+          if ($fetch?.options?.datasource?.tableId !== $datasource.tableId) {
+            return
+          }
+          $fetch.update({
+            sortOrder: $sort.order || "ascending",
+            sortColumn: $sort.column,
+          })
+        }
       })
     )
 
     // When filters change, ensure view definition is kept up to date
     unsubscribers?.push(
       filter.subscribe(async $filter => {
+        // If we can mutate schema then update the view definition
+        if (get(config).canSaveSchema) {
           // Ensure we're updating the correct view
           const $view = get(definition)
           if ($view?.id !== $datasource.id) {
@@ -145,6 +180,18 @@ export const initialise = context => {
             })
             await rows.actions.refreshData()
           }
+        }
+        // Otherwise just update the fetch
+        else {
+          // Ensure we're updating the correct fetch
+          const $fetch = get(fetch)
+          if ($fetch?.options?.datasource?.tableId !== $datasource.tableId) {
+            return
+          }
+          $fetch.update({
+            filter: $filter,
+          })
+        }
       })
     )