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,34 +110,55 @@ export const initialise = context => {
         if ($definition?.id !== $datasource.id) {
           return
         }
-        sort.set({
+        // Only override sorting if we don't have an initial sort column
-          column: $definition.sort?.field,
+        if (!get(initialSortColumn)) {
-          order: $definition.sort?.order || "ascending",
+          sort.set({
-        })
+            column: $definition.sort?.field,
-        filter.set($definition.query || [])
+            order: $definition.sort?.order || "ascending",
+          })
+        }
+        // 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 => {
-        // Ensure we're updating the correct view
+        // If we can mutate schema then update the view definition
-        const $view = get(definition)
+        if (get(config).canSaveSchema) {
-        if ($view?.id !== $datasource.id) {
+          // Ensure we're updating the correct view
-          return
+          const $view = get(definition)
+          if ($view?.id !== $datasource.id) {
+            return
+          }
+          if (
+            $sort?.column !== $view.sort?.field ||
+            $sort?.order !== $view.sort?.order
+          ) {
+            await datasource.actions.saveDefinition({
+              ...$view,
+              sort: {
+                field: $sort.column,
+                order: $sort.order || "ascending",
+              },
+            })
+            await rows.actions.refreshData()
+          }
         }
-        if (
+        // Otherwise just update the fetch
-          $sort?.column !== $view.sort?.field ||
+        else {
-          $sort?.order !== $view.sort?.order
+          // Ensure we're updating the correct fetch
-        ) {
+          const $fetch = get(fetch)
-          await datasource.actions.saveDefinition({
+          if ($fetch?.options?.datasource?.tableId !== $datasource.tableId) {
-            ...$view,
+            return
-            sort: {
+          }
-              field: $sort.column,
+          $fetch.update({
-              order: $sort.order || "ascending",
+            sortOrder: $sort.order || "ascending",
-            },
+            sortColumn: $sort.column,
           })
-          await rows.actions.refreshData()
         }
       })
     )
@@ -133,17 +166,31 @@ export const initialise = context => {
     // When filters change, ensure view definition is kept up to date
     unsubscribers?.push(
       filter.subscribe(async $filter => {
-        // Ensure we're updating the correct view
+        // If we can mutate schema then update the view definition
-        const $view = get(definition)
+        if (get(config).canSaveSchema) {
-        if ($view?.id !== $datasource.id) {
+          // Ensure we're updating the correct view
-          return
+          const $view = get(definition)
+          if ($view?.id !== $datasource.id) {
+            return
+          }
+          if (JSON.stringify($filter) !== JSON.stringify($view.query)) {
+            await datasource.actions.saveDefinition({
+              ...$view,
+              query: $filter,
+            })
+            await rows.actions.refreshData()
+          }
         }
-        if (JSON.stringify($filter) !== JSON.stringify($view.query)) {
+        // Otherwise just update the fetch
-          await datasource.actions.saveDefinition({
+        else {
-            ...$view,
+          // Ensure we're updating the correct fetch
-            query: $filter,
+          const $fetch = get(fetch)
+          if ($fetch?.options?.datasource?.tableId !== $datasource.tableId) {
+            return
+          }
+          $fetch.update({
+            filter: $filter,
           })
-          await rows.actions.refreshData()
         }
       })
     )