feat(createDataGrid): add grid adapters (client, server, virtual)

Author: johnleider

packages/0/src/composables/createDataGrid/adapters/adapter.ts

@@ -0,0 +1,15 @@
+/**
+ * @module createDataGrid/adapters
+ *
+ * @remarks
+ * Grid adapter types. Each grid adapter extends the corresponding
+ * DataTable adapter to insert row ordering between sort and pagination.
+ */
+
+export type {
+  DataTableAdapterContext,
+  DataTableAdapterInterface,
+  DataTableAdapterResult,
+  SortDirection,
+  SortEntry,
+} from '../../createDataTable/adapters/adapter'

packages/0/src/composables/createDataGrid/adapters/client.ts

@@ -0,0 +1,86 @@
+/**
+ * @module createDataGrid/adapters/client
+ *
+ * @remarks
+ * Client-side grid adapter. Extends DataTableAdapter with row ordering
+ * inserted between sort and pagination stages.
+ */
+
+// Composables
+import { createPagination } from '#v0/composables/createPagination'
+
+// Adapters
+import { DataTableAdapter } from '../../createDataTable/adapters/adapter'
+
+// Utilities
+import { computed, toRef, watch } from 'vue'
+
+// Types
+import type { ID } from '#v0/types'
+import type { DataTableAdapterContext, DataTableAdapterResult } from '../../createDataTable/adapters/adapter'
+import type { ShallowRef } from 'vue'
+
+export class ClientGridAdapter<T extends Record<string, unknown>> extends DataTableAdapter<T> {
+  private rowOrder: ShallowRef<ID[]>
+  private itemKey: string
+
+  constructor (rowOrder: ShallowRef<ID[]>, itemKey: string) {
+    super()
+    this.rowOrder = rowOrder
+    this.itemKey = itemKey
+  }
+
+  setup (context: DataTableAdapterContext<T>): DataTableAdapterResult<T> {
+    const { search, sortBy, locale, paginationOptions, customSorts } = context
+
+    const { allItems, filteredItems } = this.filter(context)
+    const sortedItems = this.sort(filteredItems, sortBy, locale, customSorts)
+
+    // Row ordering: applied post-sort, pre-pagination
+    const orderedItems = computed(() => {
+      const order = this.rowOrder.value
+      if (order.length === 0) return sortedItems.value
+
+      const map = new Map<ID, T>()
+      for (const item of sortedItems.value) {
+        map.set(item[this.itemKey] as ID, item)
+      }
+
+      const result: T[] = []
+      for (const id of order) {
+        const item = map.get(id)
+        if (item) result.push(item)
+      }
+
+      for (const item of sortedItems.value) {
+        if (!order.includes(item[this.itemKey] as ID)) {
+          result.push(item)
+        }
+      }
+
+      return result
+    })
+
+    const pagination = createPagination({
+      ...paginationOptions,
+      size: toRef(() => orderedItems.value.length),
+    })
+
+    const items = computed(() => {
+      return orderedItems.value.slice(pagination.pageStart.value, pagination.pageStop.value)
+    })
+
+    watch([search, sortBy], () => {
+      pagination.first()
+    })
+
+    return {
+      allItems,
+      filteredItems,
+      sortedItems: orderedItems,
+      items,
+      pagination,
+      total: toRef(() => orderedItems.value.length),
+    }
+  }
+}

packages/0/src/composables/createDataGrid/adapters/index.ts

@@ -0,0 +1,5 @@
+export type { DataTableAdapterContext, DataTableAdapterInterface, DataTableAdapterResult, SortDirection, SortEntry } from './adapter'
+export { ClientGridAdapter } from './client'
+export { ServerGridAdapter } from './server'
+export type { ServerGridAdapterOptions } from './server'
+export { VirtualGridAdapter } from './virtual'

packages/0/src/composables/createDataGrid/adapters/server.ts

@@ -0,0 +1,11 @@
+/**
+ * @module createDataGrid/adapters/server
+ *
+ * @remarks
+ * Server-side grid adapter. Delegates pipeline to the server.
+ * Row ordering emits a callback for the consumer to sync with the server.
+ */
+
+// Types
+
+export { ServerAdapter as ServerGridAdapter, type ServerAdapterOptions as ServerGridAdapterOptions } from '../../createDataTable/adapters/server'

packages/0/src/composables/createDataGrid/adapters/virtual.ts

@@ -0,0 +1,83 @@
+/**
+ * @module createDataGrid/adapters/virtual
+ *
+ * @remarks
+ * Virtual scrolling grid adapter. Client-side filter/sort with row
+ * ordering, feeding all sorted items to createVirtual.
+ */
+
+// Composables
+import { createPagination } from '#v0/composables/createPagination'
+
+// Adapters
+import { DataTableAdapter } from '../../createDataTable/adapters/adapter'
+
+// Utilities
+import { computed, toRef, watch } from 'vue'
+
+// Types
+import type { ID } from '#v0/types'
+import type { DataTableAdapterContext, DataTableAdapterResult } from '../../createDataTable/adapters/adapter'
+import type { ShallowRef } from 'vue'
+
+export class VirtualGridAdapter<T extends Record<string, unknown>> extends DataTableAdapter<T> {
+  private rowOrder: ShallowRef<ID[]>
+  private itemKey: string
+
+  constructor (rowOrder: ShallowRef<ID[]>, itemKey: string) {
+    super()
+    this.rowOrder = rowOrder
+    this.itemKey = itemKey
+  }
+
+  setup (context: DataTableAdapterContext<T>): DataTableAdapterResult<T> {
+    const { search, sortBy, locale, customSorts } = context
+
+    const { allItems, filteredItems } = this.filter(context)
+    const sortedItems = this.sort(filteredItems, sortBy, locale, customSorts)
+
+    const orderedItems = computed(() => {
+      const order = this.rowOrder.value
+      if (order.length === 0) return sortedItems.value
+
+      const map = new Map<ID, T>()
+      for (const item of sortedItems.value) {
+        map.set(item[this.itemKey] as ID, item)
+      }
+
+      const result: T[] = []
+      for (const id of order) {
+        const item = map.get(id)
+        if (item) result.push(item)
+      }
+
+      for (const item of sortedItems.value) {
+        if (!order.includes(item[this.itemKey] as ID)) {
+          result.push(item)
+        }
+      }
+
+      return result
+    })
+
+    const size = toRef(() => orderedItems.value.length)
+
+    const pagination = createPagination({
+      size,
+      itemsPerPage: size,
+    })
+
+    watch([search, sortBy], () => {
+      pagination.first()
+    })
+
+    return {
+      allItems,
+      filteredItems,
+      sortedItems: orderedItems,
+      items: orderedItems,
+      pagination,
+      total: toRef(() => orderedItems.value.length),
+    }
+  }
+}