@budibase/frontend-core 3.2.29 → 3.2.30

package/src/components/grid/stores/{ui.js → ui.ts}

@@ -1,4 +1,4 @@
-import { writable, get, derived } from "svelte/store"
+import { writable, get, derived, Writable, Readable } from "svelte/store"
 import { tick } from "svelte"
 import {
   DefaultRowHeight,
@@ -7,8 +7,61 @@ import {
   NewRowID,
 } from "../lib/constants"
 import { getCellID, parseCellID } from "../lib/utils"
+import { Store as StoreContext } from "."
+import { Row } from "@budibase/types"
+
+export interface UIStore {
+  focusedCellId: Writable<string | null>
+  focusedCellAPI: Writable<{
+    isReadonly: () => boolean
+    getValue: () => any
+    setValue: (val: any) => void
+  } | null>
+  selectedRows: Writable<Record<string, boolean>>
+  hoveredRowId: Writable<string | null>
+  rowHeight: Writable<number>
+  previousFocusedRowId: Writable<string | null>
+  previousFocusedCellId: Writable<string | null>
+  gridFocused: Writable<boolean>
+  keyboardBlocked: Writable<boolean>
+  isDragging: Writable<boolean>
+  buttonColumnWidth: Writable<number>
+  cellSelection: Writable<{
+    active: boolean
+    sourceCellId: string | null
+    targetCellId: string | null
+  }>
+}
+
+export interface UIDerivedStore {
+  focusedRowId: Readable<string | null>
+  focusedRow: Readable<Row | undefined>
+  contentLines: Readable<3 | 2 | 1>
+  compact: Readable<boolean>
+  selectedRowCount: Readable<number>
+  isSelectingCells: Readable<boolean>
+  selectedCells: Readable<string[][]>
+  selectedCellMap: Readable<Record<string, boolean>>
+  selectedCellCount: Readable<number>
+}
+
+interface UIActionStore {
+  selectedCells: UIDerivedStore["selectedCells"] & {
+    actions: {
+      clear: () => void
+      selectRange: (source: string | null, target: string | null) => void
+    }
+  }
+  ui: {
+    actions: {
+      blur: () => void
+    }
+  }
+}
 
-export const createStores = context => {
+export type Store = UIStore & UIDerivedStore & UIActionStore
+
+export const createStores = (context: StoreContext): UIStore => {
   const { props } = context
   const focusedCellId = writable(null)
   const focusedCellAPI = writable(null)
@@ -43,7 +96,7 @@ export const createStores = context => {
   }
 }
 
-export const deriveStores = context => {
+export const deriveStores = (context: StoreContext): UIDerivedStore => {
   const {
     focusedCellId,
     rows,
@@ -58,13 +111,17 @@ export const deriveStores = context => {
 
   // Derive the current focused row ID
   const focusedRowId = derived(focusedCellId, $focusedCellId => {
-    return parseCellID($focusedCellId).rowId
+    return parseCellID($focusedCellId).rowId ?? null
   })
 
   // Derive the row that contains the selected cell
   const focusedRow = derived(
     [focusedRowId, rowLookupMap],
     ([$focusedRowId, $rowLookupMap]) => {
+      if ($focusedRowId === null) {
+        return
+      }
+
       if ($focusedRowId === NewRowID) {
         return { _id: NewRowID }
       }
@@ -116,8 +173,8 @@ export const deriveStores = context => {
       }
 
       // Row indices
-      const sourceRowIndex = $rowLookupMap[sourceInfo.rowId]?.__idx
-      const targetRowIndex = $rowLookupMap[targetInfo.rowId]?.__idx
+      const sourceRowIndex = $rowLookupMap[sourceInfo.rowId!]?.__idx
+      const targetRowIndex = $rowLookupMap[targetInfo.rowId!]?.__idx
       if (sourceRowIndex == null || targetRowIndex == null) {
         return []
       }
@@ -128,8 +185,8 @@ export const deriveStores = context => {
       upperRowIndex = Math.min(upperRowIndex, lowerRowIndex + 49)
 
       // Column indices
-      const sourceColIndex = $columnLookupMap[sourceInfo.field].__idx
-      const targetColIndex = $columnLookupMap[targetInfo.field].__idx
+      const sourceColIndex = $columnLookupMap[sourceInfo.field!].__idx || 0
+      const targetColIndex = $columnLookupMap[targetInfo.field!].__idx || 0
       const lowerColIndex = Math.min(sourceColIndex, targetColIndex)
       const upperColIndex = Math.max(sourceColIndex, targetColIndex)
 
@@ -151,7 +208,7 @@ export const deriveStores = context => {
 
   // Derive a quick lookup map of the selected cells
   const selectedCellMap = derived(selectedCells, $selectedCells => {
-    let map = {}
+    let map: Record<string, boolean> = {}
     for (let row of $selectedCells) {
       for (let cell of row) {
         map[cell] = true
@@ -178,7 +235,7 @@ export const deriveStores = context => {
   }
 }
 
-export const createActions = context => {
+export const createActions = (context: StoreContext) => {
   const {
     focusedCellId,
     hoveredRowId,
@@ -190,7 +247,7 @@ export const createActions = context => {
     selectedCells,
   } = context
   // Keep the last selected index to use with bulk selection
-  let lastSelectedIndex = null
+  let lastSelectedIndex: number | null = null
 
   // Callback when leaving the grid, deselecting all focussed or selected items
   const blur = () => {
@@ -200,7 +257,7 @@ export const createActions = context => {
   }
 
   // Toggles whether a certain row ID is selected or not
-  const toggleSelectedRow = id => {
+  const toggleSelectedRow = (id: string) => {
     selectedRows.update(state => {
       let newState = {
         ...state,
@@ -215,7 +272,7 @@ export const createActions = context => {
     })
   }
 
-  const bulkSelectRows = id => {
+  const bulkSelectRows = (id: string) => {
     if (!get(selectedRowCount)) {
       toggleSelectedRow(id)
       return
@@ -241,7 +298,7 @@ export const createActions = context => {
     })
   }
 
-  const startCellSelection = sourceCellId => {
+  const startCellSelection = (sourceCellId: string) => {
     cellSelection.set({
       active: true,
       sourceCellId,
@@ -249,7 +306,7 @@ export const createActions = context => {
     })
   }
 
-  const updateCellSelection = targetCellId => {
+  const updateCellSelection = (targetCellId: string) => {
     cellSelection.update(state => ({
       ...state,
       targetCellId,
@@ -263,7 +320,7 @@ export const createActions = context => {
     }))
   }
 
-  const selectCellRange = (source, target) => {
+  const selectCellRange = (source: string, target: string) => {
     cellSelection.set({
       active: false,
       sourceCellId: source,
@@ -305,7 +362,7 @@ export const createActions = context => {
   }
 }
 
-export const initialise = context => {
+export const initialise = (context: StoreContext) => {
   const {
     focusedRowId,
     previousFocusedRowId,
@@ -332,7 +389,7 @@ export const initialise = context => {
     const $focusedRowId = get(focusedRowId)
     const $selectedRows = get(selectedRows)
     const $hoveredRowId = get(hoveredRowId)
-    const hasRow = id => $rowLookupMap[id] != null
+    const hasRow = (id: string) => $rowLookupMap[id] != null
 
     // Check focused cell
     if ($focusedRowId && !hasRow($focusedRowId)) {
@@ -362,13 +419,13 @@ export const initialise = context => {
   })
 
   // Remember the last focused row ID so that we can store the previous one
-  let lastFocusedRowId = null
+  let lastFocusedRowId: string | null = null
   focusedRowId.subscribe(id => {
     previousFocusedRowId.set(lastFocusedRowId)
     lastFocusedRowId = id
   })
 
-  let lastFocusedCellId = null
+  let lastFocusedCellId: string | null = null
   focusedCellId.subscribe(id => {
     // Remember the last focused cell ID so that we can store the previous one
     previousFocusedCellId.set(lastFocusedCellId)

package/src/components/grid/stores/{users.js → users.ts}

@@ -1,11 +1,38 @@
-import { writable, get, derived } from "svelte/store"
+import { writable, get, derived, Writable, Readable } from "svelte/store"
 import { helpers } from "@budibase/shared-core"
+import { Store as StoreContext } from "."
+import { UIUser } from "@budibase/types"
 
-export const createStores = () => {
-  const users = writable([])
+interface UIEnrichedUser extends UIUser {
+  color: string
+  label: string
+}
+
+interface UsersStore {
+  users: Writable<UIUser[]>
+}
+
+interface DerivedUsersStore {
+  userCellMap: Readable<Record<string, UIUser>>
+}
+
+interface ActionUserStore {
+  users: UsersStore["users"] &
+    Readable<UIEnrichedUser[]> & {
+      actions: {
+        updateUser: (user: UIUser) => void
+        removeUser: (sessionId: string) => void
+      }
+    }
+}
+
+export type Store = DerivedUsersStore & ActionUserStore
+
+export const createStores = (): UsersStore => {
+  const users = writable<UIUser[]>([])
 
   const enrichedUsers = derived(users, $users => {
-    return $users.map(user => ({
+    return $users.map<UIEnrichedUser>(user => ({
       ...user,
       color: helpers.getUserColor(user),
       label: helpers.getUserLabel(user),
@@ -20,7 +47,7 @@ export const createStores = () => {
   }
 }
 
-export const deriveStores = context => {
+export const deriveStores = (context: StoreContext): DerivedUsersStore => {
   const { users, focusedCellId } = context
 
   // Generate a lookup map of cell ID to the user that has it selected, to make
@@ -28,7 +55,7 @@ export const deriveStores = context => {
   const userCellMap = derived(
     [users, focusedCellId],
     ([$users, $focusedCellId]) => {
-      let map = {}
+      let map: Record<string, UIUser> = {}
       $users.forEach(user => {
         const cellId = user.gridMetadata?.focusedCellId
         if (cellId && cellId !== $focusedCellId) {
@@ -44,10 +71,10 @@ export const deriveStores = context => {
   }
 }
 
-export const createActions = context => {
+export const createActions = (context: StoreContext): ActionUserStore => {
   const { users } = context
 
-  const updateUser = user => {
+  const updateUser = (user: UIUser) => {
     const $users = get(users)
     if (!$users.some(x => x.sessionId === user.sessionId)) {
       users.set([...$users, user])
@@ -60,7 +87,7 @@ export const createActions = context => {
     }
   }
 
-  const removeUser = sessionId => {
+  const removeUser = (sessionId: string) => {
     users.update(state => {
       return state.filter(x => x.sessionId !== sessionId)
     })

package/src/components/grid/stores/{validation.js → validation.ts}

@@ -1,10 +1,31 @@
-import { writable, get, derived } from "svelte/store"
+import { writable, get, derived, Writable, Readable } from "svelte/store"
+import { Store as StoreContext } from "."
 import { parseCellID } from "../lib/utils"
 
+interface ValidationStore {
+  validation: Writable<Record<string, string>>
+}
+
+interface DerivedValidationStore {
+  validationRowLookupMap: Readable<Record<string, string[]>>
+}
+
+interface ValidationActions {
+  validation: ValidationStore["validation"] & {
+    actions: {
+      setError: (cellId: string | undefined, error: string) => void
+      rowHasErrors: (rowId: string) => boolean
+      focusFirstRowError: (rowId: string) => void
+    }
+  }
+}
+
+export type Store = ValidationStore & DerivedValidationStore & ValidationActions
+
 // Normally we would break out actions into the explicit "createActions"
 // function, but for validation all these actions are pure so can go into
 // "createStores" instead to make dependency ordering simpler
-export const createStores = () => {
+export const createStores = (): ValidationStore => {
   const validation = writable({})
 
   return {
@@ -12,20 +33,22 @@ export const createStores = () => {
   }
 }
 
-export const deriveStores = context => {
+export const deriveStores = (context: StoreContext): DerivedValidationStore => {
   const { validation } = context
 
   // Derive which rows have errors so that we can use that info later
   const validationRowLookupMap = derived(validation, $validation => {
-    let map = {}
+    const map: Record<string, string[]> = {}
     Object.entries($validation).forEach(([key, error]) => {
       // Extract row ID from all errored cell IDs
       if (error) {
         const { rowId } = parseCellID(key)
-        if (!map[rowId]) {
-          map[rowId] = []
+        if (rowId !== undefined) {
+          if (!map[rowId]) {
+            map[rowId] = []
+          }
+          map[rowId].push(key)
         }
-        map[rowId].push(key)
       }
     })
     return map
@@ -36,10 +59,10 @@ export const deriveStores = context => {
   }
 }
 
-export const createActions = context => {
+export const createActions = (context: StoreContext): ValidationActions => {
   const { validation, focusedCellId, validationRowLookupMap } = context
 
-  const setError = (cellId, error) => {
+  const setError = (cellId: string | undefined, error: string) => {
     if (!cellId) {
       return
     }
@@ -49,11 +72,11 @@ export const createActions = context => {
     }))
   }
 
-  const rowHasErrors = rowId => {
+  const rowHasErrors = (rowId: string) => {
     return get(validationRowLookupMap)[rowId]?.length > 0
   }
 
-  const focusFirstRowError = rowId => {
+  const focusFirstRowError = (rowId: string) => {
     const errorCells = get(validationRowLookupMap)[rowId]
     const cellId = errorCells?.[0]
     if (cellId) {
@@ -73,7 +96,7 @@ export const createActions = context => {
   }
 }
 
-export const initialise = context => {
+export const initialise = (context: StoreContext) => {
   const { validation, previousFocusedRowId, validationRowLookupMap } = context
 
   // Remove validation errors when changing rows

package/src/components/grid/stores/{viewport.js → viewport.ts}

@@ -1,7 +1,18 @@
-import { derived } from "svelte/store"
+import { derived, Readable } from "svelte/store"
 import { MinColumnWidth } from "../lib/constants"
+import { Store as StoreContext } from "."
+import { Row } from "@budibase/types"
 
-export const deriveStores = context => {
+interface ViewportDerivedStore {
+  scrolledRowCount: Readable<number>
+  visualRowCapacity: Readable<number>
+  renderedRows: Readable<Row>
+  columnRenderMap: Readable<Record<string, true>>
+}
+
+export type Store = ViewportDerivedStore
+
+export const deriveStores = (context: StoreContext): ViewportDerivedStore => {
   const {
     rowHeight,
     scrollableColumns,
@@ -77,7 +88,7 @@ export const deriveStores = context => {
         leftEdge += $scrollableColumns[endColIdx].width
         endColIdx++
       }
-      let next = {}
+      let next: Record<string, true> = {}
       $scrollableColumns
         .slice(Math.max(0, startColIdx), endColIdx)
         .forEach(col => {

package/src/{constants.js → constants.ts}

@@ -76,9 +76,9 @@ export const ExtendedBudibaseRoleOptions = [
     value: BudibaseRoles.Owner,
     sortOrder: 0,
   },
+  ...BudibaseRoleOptions,
+  ...BudibaseRoleOptionsOld,
 ]
-  .concat(BudibaseRoleOptions)
-  .concat(BudibaseRoleOptionsOld)
 
 export const PlanType = {
   FREE: "free",

package/src/fetch/QueryFetch.js

@@ -48,7 +48,7 @@ export default class QueryFetch extends DataFetch {
     }
 
     // Add pagination to query if supported
-    let queryPayload = { queryId: datasource?._id, parameters }
+    let queryPayload = { parameters }
     if (paginate && supportsPagination) {
       const requestCursor = type === "page" ? parseInt(cursor || 1) : cursor
       queryPayload.pagination = { page: requestCursor, limit }
@@ -56,7 +56,7 @@ export default class QueryFetch extends DataFetch {
 
     // Execute query
     try {
-      const res = await this.API.executeQuery(queryPayload)
+      const res = await this.API.executeQuery(datasource?._id, queryPayload)
       const { data, pagination, ...rest } = res
 
       // Derive pagination info from response

package/src/fetch/RelationshipFetch.js

@@ -3,13 +3,16 @@ import DataFetch from "./DataFetch.js"
 export default class RelationshipFetch extends DataFetch {
   async getData() {
     const { datasource } = this.options
+    if (!datasource?.rowId || !datasource?.rowTableId) {
+      return { rows: [] }
+    }
     try {
-      const res = await this.API.fetchRelationshipData({
-        rowId: datasource?.rowId,
-        tableId: datasource?.rowTableId,
-        fieldName: datasource?.fieldName,
-      })
-      return { rows: res || [] }
+      const res = await this.API.fetchRelationshipData(
+        datasource.rowTableId,
+        datasource.rowId,
+        datasource.fieldName
+      )
+      return { rows: res }
     } catch (error) {
       return { rows: [] }
     }

package/src/fetch/TableFetch.js

@@ -19,8 +19,7 @@ export default class TableFetch extends DataFetch {
 
     // Search table
     try {
-      const res = await this.API.searchTable({
-        tableId,
+      const res = await this.API.searchTable(tableId, {
         query,
         limit,
         sort: sortColumn,

package/src/fetch/ViewFetch.js

@@ -8,7 +8,7 @@ export default class ViewFetch extends DataFetch {
   async getData() {
     const { datasource } = this.options
     try {
-      const res = await this.API.fetchViewData(datasource)
+      const res = await this.API.fetchViewData(datasource.name)
       return { rows: res || [] }
     } catch (error) {
       return { rows: [] }

package/src/fetch/ViewV2Fetch.js

@@ -62,8 +62,7 @@ export default class ViewV2Fetch extends DataFetch {
     }
 
     try {
-      const res = await this.API.viewV2.fetch({
-        viewId: datasource.id,
+      const res = await this.API.viewV2.fetch(datasource.id, {
         ...(query ? { query } : {}),
         paginate,
         limit,

package/src/utils/memo.d.ts

@@ -0,0 +1,10 @@
+import { Readable, Writable } from "svelte/store"
+
+declare module "./memo" {
+  export function memo<T>(value: T): Writable<T>
+
+  export function derivedMemo<TStore, TResult>(
+    store: Readable<TStore>,
+    derivation: (store: TStore) => TResult
+  ): Readable<TResult>
+}

package/src/utils/relatedColumns.ts

@@ -0,0 +1,126 @@
+import { Helpers } from "@budibase/bbui"
+import {
+  FieldType,
+  isRelationshipField,
+  RelationshipType,
+  Row,
+  UIFieldSchema,
+} from "@budibase/types"
+
+const columnTypeManyTypeOverrides: Partial<Record<FieldType, FieldType>> = {
+  [FieldType.DATETIME]: FieldType.STRING,
+  [FieldType.BOOLEAN]: FieldType.STRING,
+  [FieldType.SIGNATURE_SINGLE]: FieldType.ATTACHMENTS,
+}
+
+const columnTypeManyParser = {
+  [FieldType.DATETIME]: (
+    value: any[],
+    field: {
+      timeOnly?: boolean
+      dateOnly?: boolean
+    }
+  ) => {
+    function parseDate(value: any) {
+      const { timeOnly, dateOnly } = field || {}
+      const enableTime = !dateOnly
+      const parsedValue = Helpers.parseDate(value, { enableTime })
+      const parsed = Helpers.getDateDisplayValue(parsedValue, {
+        enableTime,
+        timeOnly,
+      })
+      return parsed
+    }
+
+    return value.map(v => parseDate(v))
+  },
+  [FieldType.BOOLEAN]: (value: any[]) => value.map(v => !!v),
+  [FieldType.BB_REFERENCE_SINGLE]: (value: any[]) => [
+    ...new Map(value.map(i => [i._id, i])).values(),
+  ],
+  [FieldType.BB_REFERENCE]: (value: any[]) => [
+    ...new Map(value.map(i => [i._id, i])).values(),
+  ],
+  [FieldType.ARRAY]: (value: any[]) => Array.from(new Set(value)),
+}
+
+export function enrichSchemaWithRelColumns(
+  schema: Record<string, UIFieldSchema>
+): Record<string, UIFieldSchema> {
+  const result = Object.keys(schema).reduce<Record<string, UIFieldSchema>>(
+    (result, fieldName) => {
+      const field = schema[fieldName]
+      result[fieldName] = field
+
+      if (
+        field.visible !== false &&
+        isRelationshipField(field) &&
+        field.columns
+      ) {
+        const fromSingle =
+          field?.relationshipType === RelationshipType.ONE_TO_MANY
+
+        for (const relColumn of Object.keys(field.columns)) {
+          const relField = field.columns[relColumn]
+          if (!relField.visible) {
+            continue
+          }
+          const name = `${field.name}.${relColumn}`
+          result[name] = {
+            ...relField,
+            type: relField.type as any, // TODO
+            name,
+            related: { field: fieldName, subField: relColumn },
+            cellRenderType:
+              (!fromSingle && columnTypeManyTypeOverrides[relField.type]) ||
+              relField.type,
+          }
+        }
+      }
+      return result
+    },
+    {}
+  )
+
+  return result
+}
+
+export function getRelatedTableValues(
+  row: Row,
+  field: UIFieldSchema & { related: { field: string; subField: string } },
+  fromField: UIFieldSchema
+) {
+  const fromSingle =
+    isRelationshipField(fromField) &&
+    fromField?.relationshipType === RelationshipType.ONE_TO_MANY
+
+  let result = ""
+
+  if (fromSingle) {
+    result = row[field.related.field]?.[0]?.[field.related.subField]
+  } else {
+    const parser =
+      columnTypeManyParser[field.type as keyof typeof columnTypeManyParser] ||
+      ((value: any) => value)
+    const value = row[field.related.field]
+      ?.flatMap((r: Row) => r[field.related.subField])
+      ?.filter((i: any) => i !== undefined && i !== null)
+    const parsed = parser(value || [], field as any)
+    result = parsed as any
+    if (
+      [
+        FieldType.STRING,
+        FieldType.NUMBER,
+        FieldType.BIGINT,
+        FieldType.BOOLEAN,
+        FieldType.DATETIME,
+        FieldType.LONGFORM,
+        FieldType.BARCODEQR,
+      ].includes(field.type)
+    ) {
+      result = parsed?.join(", ")
+    }
+  }
+
+  return result
+}

package/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "extends": "../../tsconfig.build.json",
+  "compilerOptions": {
+    "target": "ESNext",
+    "lib": ["ESNext"],
+    "module": "preserve",
+    "moduleResolution": "bundler",
+    "outDir": "./dist",
+    "skipLibCheck": true,
+    "allowJs": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}

package/src/api/ai.js

@@ -1,11 +0,0 @@
-export const buildAIEndpoints = API => ({
-  /**
-   * Generates a cron expression from a prompt
-   */
-  generateCronExpression: async ({ prompt }) => {
-    return await API.post({
-      url: "/api/ai/cron",
-      body: { prompt },
-    })
-  },
-})