@veristone/nuxt-v-app 0.2.2 → 0.2.4

package/app/composables/useDataTable.js

@@ -0,0 +1,169 @@
+/**
+ * Composable for managing data table state
+ * Handles sorting, filtering, pagination, and selection
+ */
+export function useDataTable(options = {}) {
+  const {
+    defaultPageSize = 10,
+    defaultSortKey = '',
+    defaultSortDirection = 'asc'
+  } = options
+
+  // Pagination
+  const page = ref(1)
+  const pageSize = ref(defaultPageSize)
+  const total = ref(0)
+
+  const totalPages = computed(() => Math.ceil(total.value / pageSize.value))
+  const startIndex = computed(() => (page.value - 1) * pageSize.value)
+  const endIndex = computed(() => Math.min(startIndex.value + pageSize.value, total.value))
+
+  // Sorting
+  const sortKey = ref(defaultSortKey)
+  const sortDirection = ref(defaultSortDirection)
+
+  function toggleSort(key) {
+    if (sortKey.value === key) {
+      sortDirection.value = sortDirection.value === 'asc' ? 'desc' : 'asc'
+    } else {
+      sortKey.value = key
+      sortDirection.value = 'asc'
+    }
+    page.value = 1 // Reset to first page on sort change
+  }
+
+  function setSort(key, direction = 'asc') {
+    sortKey.value = key
+    sortDirection.value = direction
+    page.value = 1
+  }
+
+  function clearSort() {
+    sortKey.value = ''
+    sortDirection.value = 'asc'
+  }
+
+  // Filtering
+  const filters = ref({})
+  const searchQuery = ref('')
+
+  function setFilter(key, value) {
+    filters.value[key] = value
+    page.value = 1 // Reset to first page on filter change
+  }
+
+  function removeFilter(key) {
+    delete filters.value[key]
+    page.value = 1
+  }
+
+  function clearFilters() {
+    filters.value = {}
+    searchQuery.value = ''
+    page.value = 1
+  }
+
+  const activeFilters = computed(() => {
+    return Object.entries(filters.value)
+      .filter(([_, value]) => value !== undefined && value !== null && value !== '')
+      .map(([key, value]) => ({ key, value, label: key }))
+  })
+
+  // Selection
+  const selectedRows = ref([])
+
+  function selectRow(row, rowKey = 'id') {
+    const index = selectedRows.value.findIndex(r => r[rowKey] === row[rowKey])
+    if (index < 0) {
+      selectedRows.value.push(row)
+    }
+  }
+
+  function deselectRow(row, rowKey = 'id') {
+    const index = selectedRows.value.findIndex(r => r[rowKey] === row[rowKey])
+    if (index >= 0) {
+      selectedRows.value.splice(index, 1)
+    }
+  }
+
+  function toggleRowSelection(row, rowKey = 'id') {
+    const index = selectedRows.value.findIndex(r => r[rowKey] === row[rowKey])
+    if (index >= 0) {
+      selectedRows.value.splice(index, 1)
+    } else {
+      selectedRows.value.push(row)
+    }
+  }
+
+  function selectAll(rows) {
+    selectedRows.value = [...rows]
+  }
+
+  function deselectAll() {
+    selectedRows.value = []
+  }
+
+  function isRowSelected(row, rowKey = 'id') {
+    return selectedRows.value.some(r => r[rowKey] === row[rowKey])
+  }
+
+  // Query parameters for API
+  const queryParams = computed(() => ({
+    page: page.value,
+    limit: pageSize.value,
+    sort: sortKey.value ? `${sortDirection.value === 'desc' ? '-' : ''}${sortKey.value}` : undefined,
+    search: searchQuery.value || undefined,
+    ...filters.value
+  }))
+
+  // Reset all state
+  function reset() {
+    page.value = 1
+    pageSize.value = defaultPageSize
+    sortKey.value = defaultSortKey
+    sortDirection.value = defaultSortDirection
+    filters.value = {}
+    searchQuery.value = ''
+    selectedRows.value = []
+  }
+
+  return {
+    // Pagination
+    page,
+    pageSize,
+    total,
+    totalPages,
+    startIndex,
+    endIndex,
+
+    // Sorting
+    sortKey,
+    sortDirection,
+    toggleSort,
+    setSort,
+    clearSort,
+
+    // Filtering
+    filters,
+    searchQuery,
+    activeFilters,
+    setFilter,
+    removeFilter,
+    clearFilters,
+
+    // Selection
+    selectedRows,
+    selectRow,
+    deselectRow,
+    toggleRowSelection,
+    selectAll,
+    deselectAll,
+    isRowSelected,
+
+    // Query
+    queryParams,
+
+    // Reset
+    reset
+  }
+}