Typing grid UI store

packages/frontend-core/src/components/grid/lib/utils.js

@@ -1,3 +1,5 @@
+// TODO: remove when all stores are typed
+
 import { GeneratedIDPrefix, CellIDSeparator } from "./constants"
 import { Helpers } from "@budibase/bbui"
 

packages/frontend-core/src/components/grid/lib/utils.ts

@@ -0,0 +1,30 @@
+import { GeneratedIDPrefix, CellIDSeparator } from "./constants"
+import { Helpers } from "@budibase/bbui"
+
+export const parseCellID = (cellId: string | null) => {
+  if (!cellId) {
+    return { rowId: undefined, field: undefined }
+  }
+  const parts = cellId.split(CellIDSeparator)
+  const field = parts.pop()
+  return { rowId: parts.join(CellIDSeparator), field }
+}
+
+export const getCellID = (rowId: string, fieldName: string) => {
+  return `${rowId}${CellIDSeparator}${fieldName}`
+}
+
+export const parseEventLocation = (e: MouseEvent & TouchEvent) => {
+  return {
+    x: e.clientX ?? e.touches?.[0]?.clientX,
+    y: e.clientY ?? e.touches?.[0]?.clientY,
+  }
+}
+
+export const generateRowID = () => {
+  return `${GeneratedIDPrefix}${Helpers.uuid()}`
+}
+
+export const isGeneratedRowID = (id: string) => {
+  return id?.startsWith(GeneratedIDPrefix)
+}

packages/frontend-core/src/components/grid/stores/filter.js → packages/frontend-core/src/components/grid/stores/filter.ts

@@ -1,8 +1,28 @@
-import { get, derived } from "svelte/store"
-import { FieldType, UILogicalOperator } from "@budibase/types"
+import { get, derived, Writable, Readable } from "svelte/store"
+import {
+  ArrayOperator,
+  BasicOperator,
+  FieldType,
+  UIColumn,
+  UILegacyFilter,
+  UILogicalOperator,
+  UISearchFilter,
+} from "@budibase/types"
+import { Store as StoreContext } from "."
 import { memo } from "../../../utils/memo"
 
-export const createStores = context => {
+export interface FilterStore {
+  filter: Writable<UISearchFilter | undefined>
+  inlineFilters: Writable<UILegacyFilter[]>
+}
+
+export interface FilterDerivedStore {
+  allFilters: Readable<UISearchFilter | undefined>
+}
+
+export type Store = FilterStore & FilterDerivedStore
+
+export const createStores = (context: StoreContext): FilterStore => {
   const { props } = context
 
   // Initialise to default props
@@ -15,7 +35,7 @@ export const createStores = context => {
   }
 }
 
-export const deriveStores = context => {
+export const deriveStores = (context: StoreContext): FilterDerivedStore => {
   const { filter, inlineFilters } = context
   const allFilters = derived(
     [filter, inlineFilters],
@@ -24,7 +44,7 @@ export const deriveStores = context => {
       if (!$inlineFilters?.length) {
         return $filter
       }
-      let allFilters = {
+      const allFilters: UISearchFilter = {
         logicalOperator: UILogicalOperator.ALL,
         groups: [
           {
@@ -33,12 +53,13 @@ export const deriveStores = context => {
           },
         ],
       }
+
       // Just use inline if no filter
       if (!$filter?.groups?.length) {
         return allFilters
       }
       // Join them together if both
-      allFilters.groups = [...allFilters.groups, ...$filter.groups]
+      allFilters.groups = [...allFilters.groups!, ...$filter.groups]
       return allFilters
     }
   )
@@ -48,16 +69,16 @@ export const deriveStores = context => {
   }
 }
 
-export const createActions = context => {
+export const createActions = (context: StoreContext) => {
   const { filter, inlineFilters } = context
 
-  const addInlineFilter = (column, value) => {
+  const addInlineFilter = (column: UIColumn, value: string) => {
     const filterId = `inline-${column.name}`
     const type = column.schema.type
-    let inlineFilter = {
+    const inlineFilter: UILegacyFilter = {
       field: column.name,
       id: filterId,
-      operator: "string",
+      operator: BasicOperator.STRING,
       valueType: "value",
       type,
       value,
@@ -66,11 +87,11 @@ export const createActions = context => {
     // Add overrides specific so the certain column type
     if (type === FieldType.NUMBER) {
       inlineFilter.value = parseFloat(value)
-      inlineFilter.operator = "equal"
+      inlineFilter.operator = BasicOperator.EQUAL
     } else if (type === FieldType.BIGINT) {
-      inlineFilter.operator = "equal"
+      inlineFilter.operator = BasicOperator.EQUAL
     } else if (type === FieldType.ARRAY) {
-      inlineFilter.operator = "contains"
+      inlineFilter.operator = ArrayOperator.CONTAINS
     }
 
     inlineFilters.update($inlineFilters => {
@@ -95,7 +116,7 @@ export const createActions = context => {
   }
 }
 
-export const initialise = context => {
+export const initialise = (context: StoreContext) => {
   const { filter, initialFilter } = context
 
   // Reset filter when initial filter prop changes

packages/frontend-core/src/components/grid/stores/index.ts

@@ -63,12 +63,11 @@ export type Store = BaseStore &
   Datasource.Store &
   Validation.Store &
   Users.Store &
-  Menu.Store & {
+  Menu.Store &
+  Filter.Store &
+  UI.Store & {
     // TODO while typing the rest of stores
     fetch: Writable<any>
-    filter: Writable<any>
-    inlineFilters: Writable<any>
-    allFilters: Writable<any>
     sort: Writable<any>
     initialFilter: Writable<any>
     initialSortColumn: Writable<any>
@@ -79,13 +78,11 @@ export type Store = BaseStore &
     dispatch: (event: string, data: any) => any
     notifications: Writable<any>
     schemaOverrides: Writable<any>
-    focusedCellId: Writable<any>
-    previousFocusedRowId: Writable<string>
     gridID: string
-    selectedRows: Writable<any>
-    selectedRowCount: Writable<any>
-    selectedCellMap: Writable<any>
-    selectedCellCount: Writable<any>
+    props: Writable<any>
+    rowLookupMap: Writable<any>
+    width: Writable<number>
+    fixedRowHeight: Writable<number>
   }
 
 export const attachStores = (context: Store): Store => {

packages/frontend-core/src/components/grid/stores/menu.ts

@@ -15,7 +15,16 @@ interface MenuStore {
   menu: Writable<MenuStoreData>
 }
 
-export type Store = MenuStore
+interface MenuActions {
+  menu: MenuStore["menu"] & {
+    actions: {
+      open: (cellId: string, e: MouseEvent) => void
+      close: () => void
+    }
+  }
+}
+
+export type Store = MenuStore & MenuActions
 
 export const createStores = () => {
   const menu = writable<MenuStoreData>({
@@ -30,7 +39,7 @@ export const createStores = () => {
   }
 }
 
-export const createActions = (context: StoreContext) => {
+export const createActions = (context: StoreContext): MenuActions => {
   const {
     menu,
     focusedCellId,
@@ -60,7 +69,7 @@ export const createActions = (context: StoreContext) => {
     let multiRowMode = false
     if (get(selectedRowCount) > 1) {
       const { rowId } = parseCellID(cellId)
-      if (get(selectedRows)[rowId]) {
+      if (rowId !== undefined && get(selectedRows)[rowId]) {
         multiRowMode = true
       }
     }