@budibase/frontend-core 3.41.0 → 3.41.2

package/src/components/grid/stores/datasources/viewV2.ts

@@ -3,6 +3,7 @@ import {
   Row,
   SaveRowRequest,
   SortOrder,
+  SortField,
   UIDatasource,
   UpdateViewRequest,
 } from "@budibase/types"
@@ -12,6 +13,44 @@ import ViewV2Fetch from "../../../../fetch/ViewV2Fetch"
 
 const SuppressErrors = true
 
+type GridSortEntry = {
+  column: string
+  order: SortOrder
+}
+
+const normalizeViewSort = (sort?: SortField | SortField[]) => {
+  if (!sort) {
+    return []
+  }
+  const sortEntries = Array.isArray(sort) ? sort : [sort]
+  return sortEntries
+    .filter(sortEntry => sortEntry?.field)
+    .map(sortEntry => ({
+      column: sortEntry.field,
+      order: sortEntry.order || SortOrder.ASCENDING,
+    }))
+}
+
+const toViewSort = (sorts: GridSortEntry[]) => {
+  const entries = sorts
+    .filter(sortEntry => sortEntry.column)
+    .map(sortEntry => ({
+      field: sortEntry.column,
+      order: sortEntry.order || SortOrder.ASCENDING,
+    }))
+  return entries.length ? entries : undefined
+}
+
+const sortArraysEqual = (a: GridSortEntry[], b: GridSortEntry[]) => {
+  if (a.length !== b.length) {
+    return false
+  }
+  return a.every(
+    (entry, index) =>
+      entry.column === b[index]?.column && entry.order === b[index]?.order
+  )
+}
+
 interface ViewActions {
   viewV2: {
     actions: DatasourceViewActions
@@ -123,10 +162,17 @@ export const initialise = (context: StoreContext) => {
     // Reset state for new view
     filter.set(get(initialFilter) ?? undefined)
     inlineFilters.set([])
-    sort.set({
-      column: get(initialSortColumn),
-      order: get(initialSortOrder) || SortOrder.ASCENDING,
-    })
+    const initialColumn = get(initialSortColumn)
+    sort.set(
+      initialColumn
+        ? [
+            {
+              column: initialColumn,
+              order: get(initialSortOrder) || SortOrder.ASCENDING,
+            },
+          ]
+        : []
+    )
 
     // Keep sort and filter state in line with the view definition when in builder
     unsubscribers.push(
@@ -142,10 +188,7 @@ export const initialise = (context: StoreContext) => {
         }
         // 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 || SortOrder.ASCENDING,
-          })
+          sort.set(normalizeViewSort($definition.sort))
         }
         // Only override filter state if we don't have an initial filter
         if (!get(initialFilter)) {
@@ -154,35 +197,6 @@ export const initialise = (context: StoreContext) => {
       })
     )
 
-    function sortHasChanged(
-      newSort: {
-        column: string | null | undefined
-        order: SortOrder
-      },
-      existingSort?: {
-        field: string
-        order?: SortOrder
-      }
-    ) {
-      const newColumn = newSort.column ?? null
-      const existingColumn = existingSort?.field ?? null
-      if (newColumn !== existingColumn) {
-        return true
-      }
-
-      if (!newColumn) {
-        return false
-      }
-
-      const newOrder = newSort.order ?? null
-      const existingOrder = existingSort?.order ?? null
-      if (newOrder !== existingOrder) {
-        return true
-      }
-
-      return false
-    }
-
     // When sorting changes, ensure view definition is kept up to date
     unsubscribers.push(
       sort.subscribe(async $sort => {
@@ -196,7 +210,8 @@ export const initialise = (context: StoreContext) => {
         }
 
         // Skip if nothing actually changed
-        if (!sortHasChanged($sort, $view.sort)) {
+        const existingSorts = normalizeViewSort($view.sort)
+        if (sortArraysEqual($sort, existingSorts)) {
           return
         }
 
@@ -204,10 +219,7 @@ export const initialise = (context: StoreContext) => {
         if (get(config).canSaveSchema) {
           await datasource.actions.saveDefinition({
             ...$view,
-            sort: {
-              field: $sort.column!,
-              order: $sort.order || SortOrder.ASCENDING,
-            },
+            sort: toViewSort($sort),
           })
         }
 
@@ -217,9 +229,12 @@ export const initialise = (context: StoreContext) => {
         if ($fetch?.options?.datasource?.id !== $datasource.id) {
           return
         }
+        const sorts = $sort.map(sortEntry => ({
+          field: sortEntry.column,
+          order: sortEntry.order,
+        }))
         $fetch.update({
-          sortOrder: $sort.order,
-          sortColumn: $sort.column ?? undefined,
+          sorts,
         })
       })
     )

package/src/components/grid/stores/rows.ts

@@ -236,6 +236,10 @@ export const createActions = (context: StoreContext): RowActionStore => {
     await tick()
     const $allFilters = get(allFilters)
     const $sort = get(sort)
+    const sorts = $sort.map(sortEntry => ({
+      field: sortEntry.column,
+      order: sortEntry.order,
+    }))
 
     // Create new fetch model
     const newFetch = fetchData({
@@ -243,8 +247,7 @@ export const createActions = (context: StoreContext): RowActionStore => {
       datasource: $datasource,
       options: {
         filter: $allFilters,
-        sortColumn: $sort.column,
-        sortOrder: $sort.order,
+        sorts,
         limit: RowPageSize,
         paginate: true,
 

package/src/components/grid/stores/sort.ts

@@ -3,11 +3,13 @@ import { memo } from "../../../utils"
 import { SortOrder } from "@budibase/types"
 import { Store as StoreContext } from "."
 
+export interface SortEntry {
+  column: string
+  order: SortOrder
+}
+
 interface SortStore {
-  sort: Writable<{
-    column: string | null | undefined
-    order: SortOrder
-  }>
+  sort: Writable<SortEntry[]>
 }
 
 export type Store = SortStore
@@ -17,10 +19,16 @@ export const createStores = (context: StoreContext): SortStore => {
   const $props = get(props)
 
   // Initialise to default props
-  const sort = memo({
-    column: $props.initialSortColumn,
-    order: $props.initialSortOrder || SortOrder.ASCENDING,
-  })
+  const sort = memo<SortEntry[]>(
+    $props.initialSortColumn
+      ? [
+          {
+            column: $props.initialSortColumn,
+            order: $props.initialSortOrder || SortOrder.ASCENDING,
+          },
+        ]
+      : []
+  )
 
   return {
     sort,
@@ -32,30 +40,44 @@ export const initialise = (context: StoreContext) => {
 
   // Reset sort when initial sort props change
   initialSortColumn.subscribe(newSortColumn => {
-    sort.update(state => ({ ...state, column: newSortColumn }))
+    sort.set(
+      newSortColumn
+        ? [
+            {
+              column: newSortColumn,
+              order: get(initialSortOrder) || SortOrder.ASCENDING,
+            },
+          ]
+        : []
+    )
   })
   initialSortOrder.subscribe(newSortOrder => {
-    sort.update(state => ({
-      ...state,
-      order: newSortOrder || SortOrder.ASCENDING,
-    }))
+    sort.update(state => {
+      if (!state.length) {
+        return state
+      }
+      return [
+        {
+          ...state[0],
+          order: newSortOrder || SortOrder.ASCENDING,
+        },
+        ...state.slice(1),
+      ]
+    })
   })
 
-  // Derive if the current sort column exists in the schema
-  const sortColumnExists = derived([sort, schema], ([$sort, $schema]) => {
-    if (!$sort?.column || !$schema) {
-      return true
+  // Remove any sort columns that don't exist in the schema
+  const validSorts = derived([sort, schema], ([$sort, $schema]) => {
+    if (!$schema) {
+      return $sort
     }
-    return $schema[$sort.column] != null
+    return $sort.filter(sortEntry => $schema[sortEntry.column] != null)
   })
 
-  // Clear sort state if our sort column does not exist
-  sortColumnExists.subscribe(exists => {
-    if (!exists) {
-      sort.set({
-        column: null,
-        order: SortOrder.ASCENDING,
-      })
+  validSorts.subscribe($validSorts => {
+    const current = get(sort)
+    if (JSON.stringify($validSorts) !== JSON.stringify(current)) {
+      sort.set($validSorts)
     }
   })
 }

package/src/fetch/DataFetch.ts

@@ -13,8 +13,9 @@ import { DataFetchType } from "."
 import { APIClient } from "../api/types"
 import { QueryUtils } from "../utils"
 import { convertJSONSchemaToTableSchema } from "../utils/json"
+import { normalizeSorts } from "./sort"
 
-const { buildQuery, limit: queryLimit, runQuery, sort } = QueryUtils
+const { buildQuery, limit: queryLimit, multiSort, runQuery, sort } = QueryUtils
 
 interface DataFetchStore<TDefinition, TQuery, TRow extends Row> {
   rows: TRow[]
@@ -109,6 +110,7 @@ export default abstract class BaseDataFetch<
       sortColumn: null,
       sortOrder: SortOrder.ASCENDING,
       sortType: null,
+      sorts: null,
 
       // Pagination config
       paginate: true,
@@ -219,42 +221,22 @@ export default abstract class BaseDataFetch<
     }
     schema = this.enrichSchema(schema)
 
-    // If an invalid sort column is specified, delete it
-    if (this.options.sortColumn && !schema[this.options.sortColumn]) {
-      this.options.sortColumn = null
-    }
-
-    // If no sort column, get the default column for this datasource
-    if (!this.options.sortColumn) {
-      this.options.sortColumn = this.getDefaultSortColumn(definition, schema)
-    }
+    const normalizedSorts = normalizeSorts(
+      this.options,
+      schema,
+      this.getDefaultSortColumn(definition, schema)
+    )
 
-    // If we don't have a sort column specified then just ensure we don't set
-    // any sorting params
-    if (!this.options.sortColumn) {
+    if (!normalizedSorts.length) {
+      this.options.sortColumn = null
       this.options.sortOrder = SortOrder.ASCENDING
       this.options.sortType = null
+      this.options.sorts = []
     } else {
-      // Otherwise determine what sort type to use base on sort column
-      this.options.sortType = SortType.STRING
-      const fieldSchema = schema?.[this.options.sortColumn]
-      if (
-        fieldSchema?.type === FieldType.NUMBER ||
-        fieldSchema?.type === FieldType.BIGINT ||
-        fieldSchema?.responseType === FieldType.NUMBER ||
-        ("calculationType" in fieldSchema && fieldSchema?.calculationType)
-      ) {
-        this.options.sortType = SortType.NUMBER
-      }
-
-      // If no sort order, default to ascending
-      if (!this.options.sortOrder) {
-        this.options.sortOrder = SortOrder.ASCENDING
-      } else {
-        // Ensure sortOrder matches the enum
-        this.options.sortOrder =
-          this.options.sortOrder.toLowerCase() as SortOrder
-      }
+      this.options.sorts = normalizedSorts
+      this.options.sortColumn = normalizedSorts[0]?.field ?? null
+      this.options.sortOrder = normalizedSorts[0]?.order || SortOrder.ASCENDING
+      this.options.sortType = normalizedSorts[0]?.type || null
     }
 
     // Build the query
@@ -298,6 +280,7 @@ export default abstract class BaseDataFetch<
       sortColumn,
       sortOrder,
       sortType,
+      sorts,
       limit,
       clientSideSearching,
       clientSideSorting,
@@ -314,8 +297,34 @@ export default abstract class BaseDataFetch<
     }
 
     // If we don't support sorting, do a client-side sort
-    if (!this.features.supportsSort && clientSideSorting && sortType) {
-      rows = sort(rows, sortColumn as any, sortOrder, sortType)
+    if (!this.features.supportsSort && clientSideSorting) {
+      const activeSorts = (sorts || []).filter(
+        sortEntry => sortEntry?.field && sortEntry?.order
+      )
+      if (activeSorts.length > 1) {
+        rows = multiSort(
+          rows,
+          Object.fromEntries(
+            activeSorts.map(sortEntry => [
+              sortEntry.field,
+              {
+                direction: sortEntry.order || SortOrder.ASCENDING,
+                type: sortEntry.type,
+              },
+            ])
+          )
+        )
+      } else if (activeSorts.length === 1) {
+        const [entry] = activeSorts
+        rows = sort(
+          rows,
+          entry.field as any,
+          entry.order || sortOrder,
+          entry.type || sortType || SortType.STRING
+        )
+      } else if (sortType && sortColumn) {
+        rows = sort(rows, sortColumn as any, sortOrder, sortType)
+      }
     }
 
     // If we don't support pagination, do a client-side limit

package/src/fetch/TableFetch.ts

@@ -1,6 +1,30 @@
 import { get } from "svelte/store"
 import BaseDataFetch from "./DataFetch"
-import { SortOrder, Table, TableDatasource } from "@budibase/types"
+import {
+  SortField,
+  SortJson,
+  SortOrder,
+  SortType,
+  Table,
+  TableDatasource,
+} from "@budibase/types"
+
+const buildSortPayload = (sorts?: SortField[] | null) => {
+  if (!sorts?.length) {
+    return undefined
+  }
+  const sort: SortJson = {}
+  sorts.forEach(sortEntry => {
+    if (!sortEntry?.field) {
+      return
+    }
+    sort[sortEntry.field] = {
+      direction: sortEntry.order || SortOrder.ASCENDING,
+      ...(sortEntry.type ? { type: sortEntry.type as SortType } : {}),
+    }
+  })
+  return Object.keys(sort).length ? sort : undefined
+}
 
 export default class TableFetch extends BaseDataFetch<TableDatasource, Table> {
   async determineFeatureFlags() {
@@ -29,19 +53,17 @@ export default class TableFetch extends BaseDataFetch<TableDatasource, Table> {
   }
 
   async getData() {
-    const { datasource, limit, sortColumn, sortOrder, sortType, paginate } =
-      this.options
+    const { datasource, limit, sorts, paginate } = this.options
     const { tableId } = datasource
     const { cursor, query } = get(this.store)
+    const sort = buildSortPayload(sorts)
 
     // Search table
     try {
       const res = await this.API.searchTable(tableId, {
         query,
         limit,
-        sort: sortColumn,
-        sortOrder: sortOrder ?? SortOrder.ASCENDING,
-        sortType,
+        sort,
         paginate,
         bookmark: cursor,
       })

package/src/fetch/ViewV2Fetch.ts

@@ -1,5 +1,8 @@
 import {
   SortOrder,
+  SortField,
+  SortJson,
+  SortType,
   ViewDatasource,
   ViewV2Enriched,
   ViewV2Type,
@@ -8,6 +11,23 @@ import BaseDataFetch from "./DataFetch"
 import { get } from "svelte/store"
 import { helpers } from "@budibase/shared-core"
 
+const buildSortPayload = (sorts?: SortField[] | null) => {
+  if (!sorts?.length) {
+    return undefined
+  }
+  const sort: SortJson = {}
+  sorts.forEach(sortEntry => {
+    if (!sortEntry?.field) {
+      return
+    }
+    sort[sortEntry.field] = {
+      direction: sortEntry.order || SortOrder.ASCENDING,
+      ...(sortEntry.type ? { type: sortEntry.type as SortType } : {}),
+    }
+  })
+  return Object.keys(sort).length ? sort : undefined
+}
+
 export default class ViewV2Fetch extends BaseDataFetch<
   ViewDatasource,
   ViewV2Enriched
@@ -40,8 +60,15 @@ export default class ViewV2Fetch extends BaseDataFetch<
   }
 
   async getData() {
-    const { datasource, limit, sortColumn, sortOrder, sortType, paginate } =
-      this.options
+    const {
+      datasource,
+      limit,
+      sortColumn,
+      sortOrder,
+      sortType,
+      sorts,
+      paginate,
+    } = this.options
     const { cursor, query, definition } = get(this.store)
 
     // If this is a calculation view and we have no calculations, return nothing
@@ -62,20 +89,23 @@ export default class ViewV2Fetch extends BaseDataFetch<
     // If sort/filter params are not defined, update options to store the
     // params built in to this view. This ensures that we can accurately
     // compare old and new params and skip a redundant API call.
-    if (!sortColumn && definition?.sort?.field) {
-      this.options.sortColumn = definition.sort.field
-      this.options.sortOrder = definition.sort.order || SortOrder.ASCENDING
+    if (!sortColumn && definition?.sort && !sorts?.length) {
+      this.options.sorts = (
+        Array.isArray(definition.sort) ? definition.sort : [definition.sort]
+      ).filter(sortEntry => sortEntry?.field)
     }
 
+    const sortPayload = buildSortPayload(this.options.sorts)
+
     try {
       const request = {
         query,
         paginate,
         limit,
         bookmark: cursor,
-        sort: sortColumn,
-        sortOrder: sortOrder,
-        sortType,
+        sort: sortPayload || sortColumn,
+        sortOrder: sortPayload ? undefined : sortOrder,
+        sortType: sortPayload ? undefined : sortType,
       }
       if (paginate) {
         const res = await this.API.viewV2.fetch(datasource.id, {

package/src/fetch/sort.test.ts

@@ -0,0 +1,73 @@
+import { describe, expect, it } from "vitest"
+import { FieldType, SortOrder, SortType } from "@budibase/types"
+import type { TableSchema } from "@budibase/types"
+import { normalizeSorts } from "./sort"
+
+describe("sort normalization", () => {
+  it("does not restore the single-sort options after sorts are explicitly cleared", () => {
+    const schema: TableSchema = {
+      name: {
+        name: "name",
+        type: FieldType.STRING,
+      },
+    }
+
+    expect(
+      normalizeSorts(
+        {
+          sorts: [],
+          sortColumn: "name",
+          sortOrder: SortOrder.DESCENDING,
+          sortType: null,
+        },
+        schema,
+        null
+      )
+    ).toEqual([])
+  })
+
+  it("normalizes every configured sort", () => {
+    const schema: TableSchema = {
+      name: {
+        name: "name",
+        type: FieldType.STRING,
+      },
+      count: {
+        name: "count",
+        type: FieldType.NUMBER,
+      },
+    }
+
+    expect(
+      normalizeSorts(
+        {
+          sorts: [
+            {
+              field: "name",
+              order: SortOrder.DESCENDING,
+            },
+            {
+              field: "count",
+            },
+          ],
+          sortColumn: null,
+          sortOrder: SortOrder.ASCENDING,
+          sortType: null,
+        },
+        schema,
+        null
+      )
+    ).toEqual([
+      {
+        field: "name",
+        order: SortOrder.DESCENDING,
+        type: SortType.STRING,
+      },
+      {
+        field: "count",
+        order: SortOrder.ASCENDING,
+        type: SortType.NUMBER,
+      },
+    ])
+  })
+})

package/src/fetch/sort.ts

@@ -0,0 +1,70 @@
+import { FieldType, SortOrder, SortType } from "@budibase/types"
+import type { SortField, TableSchema } from "@budibase/types"
+
+interface SortNormalizationOptions {
+  sorts?: SortField[] | null
+  sortColumn: string | null
+  sortOrder: SortOrder
+  sortType: SortType | null
+}
+
+const getSortType = (schema: TableSchema, field: string) => {
+  const fieldSchema = schema[field]
+  if (
+    fieldSchema?.type === FieldType.NUMBER ||
+    fieldSchema?.type === FieldType.BIGINT ||
+    ("responseType" in fieldSchema &&
+      fieldSchema.responseType === FieldType.NUMBER) ||
+    ("calculationType" in fieldSchema && fieldSchema.calculationType)
+  ) {
+    return SortType.NUMBER
+  }
+  return SortType.STRING
+}
+
+const normalizeSortOrder = (order?: SortOrder) =>
+  order?.toLowerCase() === SortOrder.DESCENDING
+    ? SortOrder.DESCENDING
+    : SortOrder.ASCENDING
+
+export const normalizeSorts = (
+  options: SortNormalizationOptions,
+  schema: TableSchema,
+  defaultSortColumn: string | null
+): SortField[] => {
+  let normalizedSorts: SortField[] =
+    options.sorts
+      ?.filter(sortEntry => sortEntry?.field && schema[sortEntry.field])
+      .map(
+        sortEntry =>
+          ({
+            ...sortEntry,
+            order: normalizeSortOrder(sortEntry.order),
+            type: sortEntry.type || getSortType(schema, sortEntry.field),
+          }) satisfies SortField
+      ) || []
+
+  if (!normalizedSorts.length && options.sorts == null && options.sortColumn) {
+    if (schema[options.sortColumn]) {
+      normalizedSorts = [
+        {
+          field: options.sortColumn,
+          order: normalizeSortOrder(options.sortOrder),
+          type: options.sortType || getSortType(schema, options.sortColumn),
+        } satisfies SortField,
+      ]
+    }
+  }
+
+  if (!normalizedSorts.length && defaultSortColumn) {
+    normalizedSorts = [
+      {
+        field: defaultSortColumn,
+        order: SortOrder.ASCENDING,
+        type: getSortType(schema, defaultSortColumn),
+      } satisfies SortField,
+    ]
+  }
+
+  return normalizedSorts
+}

package/src/components/grid/layout/RowCount.svelte

@@ -1,9 +0,0 @@
-<script>
-  import { getContext } from "svelte"
-
-  const { rows } = getContext("grid")
-</script>
-
-<div>
-  {$rows.length} row{$rows.length === 1 ? "" : "s"}
-</div>