@budibase/frontend-core 2.9.38 → 2.9.39-alpha.0

package/src/components/grid/stores/index.js

@@ -15,16 +15,20 @@ import * as Config from "./config"
 import * as Sort from "./sort"
 import * as Filter from "./filter"
 import * as Notifications from "./notifications"
+import * as Table from "./table"
+import * as ViewV2 from "./viewV2"
+import * as Datasource from "./datasource"
 
 const DependencyOrderedStores = [
-  Config,
-  Notifications,
   Sort,
   Filter,
   Bounds,
   Scroll,
-  Rows,
+  Table,
+  ViewV2,
+  Datasource,
   Columns,
+  Rows,
   UI,
   Validation,
   Resize,
@@ -34,6 +38,8 @@ const DependencyOrderedStores = [
   Menu,
   Pagination,
   Clipboard,
+  Config,
+  Notifications,
 ]
 
 export const attachStores = context => {
@@ -47,6 +53,11 @@ export const attachStores = context => {
     context = { ...context, ...store.deriveStores?.(context) }
   }
 
+  // Action creation
+  for (let store of DependencyOrderedStores) {
+    context = { ...context, ...store.createActions?.(context) }
+  }
+
   // Initialise any store logic
   for (let store of DependencyOrderedStores) {
     store.initialise?.(context)

package/src/components/grid/stores/menu.js

@@ -12,7 +12,7 @@ export const createStores = () => {
   }
 }
 
-export const deriveStores = context => {
+export const createActions = context => {
   const { menu, focusedCellId, rand } = context
 
   const open = (cellId, e) => {

package/src/components/grid/stores/pagination.js

@@ -1,4 +1,4 @@
-import { derived } from "svelte/store"
+import { derived, get } from "svelte/store"
 
 export const initialise = context => {
   const { scrolledRowCount, rows, visualRowCapacity } = context
@@ -11,13 +11,12 @@ export const initialise = context => {
     [scrolledRowCount, rowCount, visualRowCapacity],
     ([$scrolledRowCount, $rowCount, $visualRowCapacity]) => {
       return Math.max(0, $rowCount - $scrolledRowCount - $visualRowCapacity)
-    },
-    100
+    }
   )
 
   // Fetch next page when fewer than 25 remaining rows to scroll
   remainingRows.subscribe(remaining => {
-    if (remaining < 25) {
+    if (remaining < 25 && get(rowCount)) {
       rows.actions.loadNextPage()
     }
   })

package/src/components/grid/stores/reorder.js

@@ -23,7 +23,7 @@ export const createStores = () => {
   }
 }
 
-export const deriveStores = context => {
+export const createActions = context => {
   const {
     reorder,
     columns,

package/src/components/grid/stores/resize.js

@@ -19,7 +19,7 @@ export const createStores = () => {
   }
 }
 
-export const deriveStores = context => {
+export const createActions = context => {
   const { resize, columns, stickyColumn, ui } = context
 
   // Starts resizing a certain column

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

@@ -3,30 +3,24 @@ import { fetchData } from "../../../fetch/fetchData"
 import { NewRowID, RowPageSize } from "../lib/constants"
 import { tick } from "svelte"
 
-const SuppressErrors = true
-
 export const createStores = () => {
   const rows = writable([])
-  const table = writable(null)
   const loading = writable(false)
   const loaded = writable(false)
   const rowChangeCache = writable({})
   const inProgressChanges = writable({})
   const hasNextPage = writable(false)
   const error = writable(null)
+  const fetch = writable(null)
 
   // Generate a lookup map to quick find a row by ID
-  const rowLookupMap = derived(
-    rows,
-    $rows => {
-      let map = {}
-      for (let i = 0; i < $rows.length; i++) {
-        map[$rows[i]._id] = i
-      }
-      return map
-    },
-    {}
-  )
+  const rowLookupMap = derived(rows, $rows => {
+    let map = {}
+    for (let i = 0; i < $rows.length; i++) {
+      map[$rows[i]._id] = i
+    }
+    return map
+  })
 
   // Mark loaded as true if we've ever stopped loading
   let hasStartedLoading = false
@@ -38,10 +32,25 @@ export const createStores = () => {
     }
   })
 
+  // Enrich rows with an index property and any pending changes
+  const enrichedRows = derived(
+    [rows, rowChangeCache],
+    ([$rows, $rowChangeCache]) => {
+      return $rows.map((row, idx) => ({
+        ...row,
+        ...$rowChangeCache[row._id],
+        __idx: idx,
+      }))
+    }
+  )
+
   return {
-    rows,
+    rows: {
+      ...rows,
+      subscribe: enrichedRows.subscribe,
+    },
+    fetch,
     rowLookupMap,
-    table,
     loaded,
     loading,
     rowChangeCache,
@@ -51,15 +60,15 @@ export const createStores = () => {
   }
 }
 
-export const deriveStores = context => {
+export const createActions = context => {
   const {
     rows,
     rowLookupMap,
-    table,
+    definition,
     filter,
     loading,
     sort,
-    tableId,
+    datasource,
     API,
     scroll,
     validation,
@@ -71,37 +80,29 @@ export const deriveStores = context => {
     hasNextPage,
     error,
     notifications,
+    fetch,
   } = context
   const instanceLoaded = writable(false)
-  const fetch = writable(null)
 
   // Local cache of row IDs to speed up checking if a row exists
   let rowCacheMap = {}
 
-  // Enrich rows with an index property and any pending changes
-  const enrichedRows = derived(
-    [rows, rowChangeCache],
-    ([$rows, $rowChangeCache]) => {
-      return $rows.map((row, idx) => ({
-        ...row,
-        ...$rowChangeCache[row._id],
-        __idx: idx,
-      }))
-    },
-    []
-  )
-
-  // Reset everything when table ID changes
+  // Reset everything when datasource changes
   let unsubscribe = null
   let lastResetKey = null
-  tableId.subscribe(async $tableId => {
+  datasource.subscribe(async $datasource => {
     // Unsub from previous fetch if one exists
     unsubscribe?.()
     fetch.set(null)
     instanceLoaded.set(false)
     loading.set(true)
 
-    // Tick to allow other reactive logic to update stores when table ID changes
+    // Abandon if we don't have a valid datasource
+    if (!datasource.actions.isDatasourceValid($datasource)) {
+      return
+    }
+
+    // Tick to allow other reactive logic to update stores when datasource changes
     // before proceeding. This allows us to wipe filters etc if needed.
     await tick()
     const $filter = get(filter)
@@ -110,10 +111,7 @@ export const deriveStores = context => {
     // Create new fetch model
     const newFetch = fetchData({
       API,
-      datasource: {
-        type: "table",
-        tableId: $tableId,
-      },
+      datasource: $datasource,
       options: {
         filter: $filter,
         sortColumn: $sort.column,
@@ -142,7 +140,7 @@ export const deriveStores = context => {
         const previousResetKey = lastResetKey
         lastResetKey = $fetch.resetKey
 
-        // If resetting rows due to a table change, wipe data and wait for
+        // If resetting rows due to a datasource change, wipe data and wait for
         // derived stores to compute. This prevents stale data being passed
         // to cells when we save the new schema.
         if (!$instanceLoaded && previousResetKey) {
@@ -152,16 +150,12 @@ export const deriveStores = context => {
 
         // Reset state properties when dataset changes
         if (!$instanceLoaded || resetRows) {
-          table.set($fetch.definition)
-          sort.set({
-            column: $fetch.sortColumn,
-            order: $fetch.sortOrder,
-          })
+          definition.set($fetch.definition)
         }
 
         // Reset scroll state when data changes
         if (!$instanceLoaded) {
-          // Reset both top and left for a new table ID
+          // Reset both top and left for a new datasource ID
           instanceLoaded.set(true)
           scroll.set({ top: 0, left: 0 })
         } else if (resetRows) {
@@ -180,19 +174,6 @@ export const deriveStores = context => {
     fetch.set(newFetch)
   })
 
-  // Update fetch when filter or sort config changes
-  filter.subscribe($filter => {
-    get(fetch)?.update({
-      filter: $filter,
-    })
-  })
-  sort.subscribe($sort => {
-    get(fetch)?.update({
-      sortOrder: $sort.order,
-      sortColumn: $sort.column,
-    })
-  })
-
   // Gets a row by ID
   const getRow = id => {
     const index = get(rowLookupMap)[id]
@@ -211,7 +192,7 @@ export const deriveStores = context => {
       let erroredColumns = []
       let missingColumns = []
       for (let column of keys) {
-        if (columns.actions.hasColumn(column)) {
+        if (datasource.actions.canUseColumn(column)) {
           erroredColumns.push(column)
         } else {
           missingColumns.push(column)
@@ -252,11 +233,9 @@ export const deriveStores = context => {
   // Adds a new row
   const addRow = async (row, idx, bubble = false) => {
     try {
-      // Create row
-      const newRow = await API.saveRow(
-        { ...row, tableId: get(tableId) },
-        SuppressErrors
-      )
+      // Create row. Spread row so we can mutate and enrich safely.
+      let newRow = { ...row }
+      newRow = await datasource.actions.addRow(newRow)
 
       // Update state
       if (idx != null) {
@@ -294,21 +273,6 @@ export const deriveStores = context => {
     }
   }
 
-  // Fetches a row by ID using the search endpoint
-  const fetchRow = async id => {
-    const res = await API.searchTable({
-      tableId: get(tableId),
-      limit: 1,
-      query: {
-        equal: {
-          _id: id,
-        },
-      },
-      paginate: false,
-    })
-    return res?.rows?.[0]
-  }
-
   // Replaces a row in state with the newly defined row, handling updates,
   // addition and deletion
   const replaceRow = (id, row) => {
@@ -337,7 +301,7 @@ export const deriveStores = context => {
 
   // Refreshes a specific row
   const refreshRow = async id => {
-    const row = await fetchRow(id)
+    const row = await datasource.actions.getRow(id)
     replaceRow(id, row)
   }
 
@@ -347,7 +311,7 @@ export const deriveStores = context => {
   }
 
   // Patches a row with some changes
-  const updateRow = async (rowId, changes) => {
+  const updateRow = async (rowId, changes, options = { save: true }) => {
     const $rows = get(rows)
     const $rowLookupMap = get(rowLookupMap)
     const index = $rowLookupMap[rowId]
@@ -377,16 +341,23 @@ export const deriveStores = context => {
       },
     }))
 
+    // Stop here if we don't want to persist the change
+    if (!options?.save) {
+      return
+    }
+
     // Save change
     try {
       inProgressChanges.update(state => ({
         ...state,
         [rowId]: true,
       }))
-      const saved = await API.saveRow(
-        { ...row, ...get(rowChangeCache)[rowId] },
-        SuppressErrors
-      )
+
+      // Update row
+      const saved = await datasource.actions.updateRow({
+        ...row,
+        ...get(rowChangeCache)[rowId],
+      })
 
       // Update state after a successful change
       if (saved?._id) {
@@ -412,8 +383,8 @@ export const deriveStores = context => {
   }
 
   // Updates a value of a row
-  const updateValue = async (rowId, column, value) => {
-    return await updateRow(rowId, { [column]: value })
+  const updateValue = async ({ rowId, column, value, save = true }) => {
+    return await updateRow(rowId, { [column]: value }, { save })
   }
 
   // Deletes an array of rows
@@ -426,10 +397,7 @@ export const deriveStores = context => {
     rowsToDelete.forEach(row => {
       delete row.__idx
     })
-    await API.deleteRows({
-      tableId: get(tableId),
-      rows: rowsToDelete,
-    })
+    await datasource.actions.deleteRows(rowsToDelete)
 
     // Update state
     handleRemoveRows(rowsToDelete)
@@ -473,12 +441,6 @@ export const deriveStores = context => {
     get(fetch)?.nextPage()
   }
 
-  // Refreshes the schema of the data fetch subscription
-  const refreshTableDefinition = async () => {
-    const definition = await API.fetchTableDefinition(get(tableId))
-    table.set(definition)
-  }
-
   // Checks if we have a row with a certain ID
   const hasRow = id => {
     if (id === NewRowID) {
@@ -498,7 +460,6 @@ export const deriveStores = context => {
   })
 
   return {
-    enrichedRows,
     rows: {
       ...rows,
       actions: {
@@ -513,7 +474,6 @@ export const deriveStores = context => {
         refreshRow,
         replaceRow,
         refreshData,
-        refreshTableDefinition,
       },
     },
   }

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

@@ -1,12 +1,14 @@
-import { writable } from "svelte/store"
+import { derived, get } from "svelte/store"
+import { memo } from "../../../utils"
 
 export const createStores = context => {
   const { props } = context
+  const $props = get(props)
 
   // Initialise to default props
-  const sort = writable({
-    column: props.initialSortColumn,
-    order: props.initialSortOrder || "ascending",
+  const sort = memo({
+    column: $props.initialSortColumn,
+    order: $props.initialSortOrder || "ascending",
   })
 
   return {
@@ -15,13 +17,34 @@ export const createStores = context => {
 }
 
 export const initialise = context => {
-  const { sort, initialSortColumn, initialSortOrder } = context
+  const { sort, initialSortColumn, initialSortOrder, definition } = context
 
   // Reset sort when initial sort props change
   initialSortColumn.subscribe(newSortColumn => {
     sort.update(state => ({ ...state, column: newSortColumn }))
   })
   initialSortOrder.subscribe(newSortOrder => {
-    sort.update(state => ({ ...state, order: newSortOrder }))
+    sort.update(state => ({ ...state, order: newSortOrder || "ascending" }))
+  })
+
+  // Derive if the current sort column exists in the schema
+  const sortColumnExists = derived(
+    [sort, definition],
+    ([$sort, $definition]) => {
+      if (!$sort?.column || !$definition) {
+        return true
+      }
+      return $definition.schema?.[$sort.column] != null
+    }
+  )
+
+  // Clear sort state if our sort column does not exist
+  sortColumnExists.subscribe(exists => {
+    if (!exists) {
+      sort.set({
+        column: null,
+        order: "ascending",
+      })
+    }
   })
 }

package/src/components/grid/stores/table.js

@@ -0,0 +1,129 @@
+import { get } from "svelte/store"
+
+const SuppressErrors = true
+
+export const createActions = context => {
+  const { definition, API, datasource, columns, stickyColumn } = context
+
+  const refreshDefinition = async () => {
+    definition.set(await API.fetchTableDefinition(get(datasource).tableId))
+  }
+
+  const saveDefinition = async newDefinition => {
+    await API.saveTable(newDefinition)
+  }
+
+  const saveRow = async row => {
+    row.tableId = get(datasource)?.tableId
+    return await API.saveRow(row, SuppressErrors)
+  }
+
+  const deleteRows = async rows => {
+    await API.deleteRows({
+      tableId: get(datasource).tableId,
+      rows,
+    })
+  }
+
+  const isDatasourceValid = datasource => {
+    return datasource?.type === "table" && datasource?.tableId
+  }
+
+  const getRow = async id => {
+    const res = await API.searchTable({
+      tableId: get(datasource).tableId,
+      limit: 1,
+      query: {
+        equal: {
+          _id: id,
+        },
+      },
+      paginate: false,
+    })
+    return res?.rows?.[0]
+  }
+
+  const canUseColumn = name => {
+    const $columns = get(columns)
+    const $sticky = get(stickyColumn)
+    return $columns.some(col => col.name === name) || $sticky?.name === name
+  }
+
+  return {
+    table: {
+      actions: {
+        refreshDefinition,
+        saveDefinition,
+        addRow: saveRow,
+        updateRow: saveRow,
+        deleteRows,
+        getRow,
+        isDatasourceValid,
+        canUseColumn,
+      },
+    },
+  }
+}
+
+export const initialise = 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
+  let unsubscribers = []
+
+  // Observe datasource changes and apply logic for table datasources
+  datasource.subscribe($datasource => {
+    // Clear previous subscriptions
+    unsubscribers?.forEach(unsubscribe => unsubscribe())
+    unsubscribers = []
+    if (!table.actions.isDatasourceValid($datasource)) {
+      return
+    }
+
+    // Wipe state
+    filter.set(get(initialFilter))
+    sort.set({
+      column: get(initialSortColumn),
+      order: get(initialSortOrder) || "ascending",
+    })
+
+    // Update fetch when filter changes
+    unsubscribers.push(
+      filter.subscribe($filter => {
+        // Ensure we're updating the correct fetch
+        const $fetch = get(fetch)
+        if ($fetch?.options?.datasource?.tableId !== $datasource.tableId) {
+          return
+        }
+        $fetch.update({
+          filter: $filter,
+        })
+      })
+    )
+
+    // Update fetch when sorting changes
+    unsubscribers.push(
+      sort.subscribe($sort => {
+        // 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,
+        })
+      })
+    )
+  })
+}