chore: wip

Author: chrisbbreuer

Diff for: src/composables/table.ts

@@ -1,68 +1,23 @@
+import { calculatePagination, currentPage, filterName, filters, goToNextPage, goToPage, goToPrevPage, hits, index, lastPageNumber, perPage, query, results, search, searchFilters, searchParams, setTotalHits, sort, sorts, totalPages } from '@stacksjs/search-engine'
 import { isObject, isString, useStorage } from '@vueuse/core'
-import type { SearchParams, SearchResponse } from 'meilisearch'
-import MeiliSearch from 'meilisearch'
 import type { Ref } from 'vue'
 import { computed } from 'vue-demi'
 import type { TableStore } from '~/types'
 
 const table = (useStorage('table', determineState()).value as TableStore)
 
-const results = computed(() => table.results)
-const hits = computed(() => results.value?.hits || [])
+// table related
 const columns = computed(() => table.columns)
-const filters = computed(() => table.filters)
-const sort = computed(() => table.sort)
-const sorts = computed(() => table.sorts)
-const type = computed(() => table.type)
-const currentPage = computed(() => table.currentPage)
-const perPage = computed(() => table.perPage)
-const query = computed(() => table.query)
 const actions = computed(() => table.actions)
 const actionable = computed(() => table.actionable)
 const selectedRows = computed(() => table.selectedRows)
 const selectedAll = computed(() => table.selectedAll)
-const searchParams = computed(() => {
-  return {
-    offset: (table.currentPage - 1) * table.perPage,
-    limit: table.perPage,
-    sort: isString(table.sort) ? [table.sort] : undefined,
-    filter: table.filterValue,
-  }
-})
-
-let totalHits = table.results ? table.results.nbHits : 1
-const totalPages: Ref<number> = ref(0)
 const pages: Ref<number[]> = ref([])
-
-function calculatePagination() {
-  totalPages.value = Math.ceil(totalHits / table.perPage)
-
-  const hitPages = [...Array(totalPages.value).keys()].map(i => i + 1)
-  const offset = 2
-  const currentPage = table.currentPage
-  const lastPage = hitPages[hitPages.length - 1]
-
-  let from = currentPage - offset
-  if (from < 1)
-    from = 1
-
-  let to = from + offset * 2
-  if (to >= lastPage)
-    to = lastPage
-
-  const allPages = []
-  for (let page = from; page <= to; page++)
-    allPages.push(page)
-
-  pages.value = allPages
-}
-
 const indeterminate = computed(() => (table?.selectedRows?.length ?? 0) > 0 && (table?.selectedRows?.length ?? 0) < hits.value.length)
 const lastColumn = computed(() => {
   return table.columns[table.columns.length - 1]
 })
 const readableLastColumn = computed(() => lastColumn[0]?.includes(':') ? lastColumn[0].split(':')[1].trim() : lastColumn[0])
-const lastPageNumber = computed(() => Math.ceil((table.results?.nbHits ?? 1) / table.perPage))
 
 // this watchEffect picks up any reactivity changes from `query` and `searchParams` and it will then trigger a search
 watchEffect(async () => {
@@ -75,8 +30,7 @@ watchEffect(async () => {
     table.hits = results.hits
   }
 
-  totalHits = table.results?.nbHits ?? 1
-
+  setTotalHits(table.results?.nbHits ?? 1)
   calculatePagination()
 })
 
@@ -105,7 +59,7 @@ function determineState(): TableStore {
   const table: TableStore = {
     source: '',
     password: '',
-    type: '',
+    index: '',
     columns: [],
     filters: [],
     perPage: 20,
@@ -132,84 +86,11 @@ function isColumnSortable(col: string): Boolean {
   return false
 }
 
-// search methods
-function client(): MeiliSearch {
-  if (!table.source)
-    table.source = ''
-
-  return new MeiliSearch({
-    host: table.source,
-    apiKey: import.meta.env.VITE_MEILISEARCH_KEY,
-  })
-}
-
 function hasTableLoaded(state?: any): Boolean {
-  if (state?.type !== '')
+  if (state?.index !== '')
     return true
 
-  return isString(table?.type) && table.type !== '' // a lazy way to check if the table is loaded
-}
-
-// we have to accept `query` and `searchParams` because those params are watched from within a watchEffect
-async function search(q?: string, options?: SearchParams): Promise<void | SearchResponse<Record<string, any>>> {
-  if (!hasTableLoaded(table))
-    return
-
-  try {
-    // if the query is provided as a param, it will trump what there would be otherwise in local storage
-    const query = isString(q) ? q : (isString(table.query) ? table.query : '')
-
-    if (!table.type) {
-      console.error('no type provided')
-      return
-    }
-
-    // we w
-    if (options === undefined)
-      return await client().index(table.type).search(query, searchParams.value)
-
-    return await client().index(table.type).search(query, options)
-  }
-  catch (error) {
-    console.error('error when performing search', error)
-  }
-}
-
-async function searchFilters(index: string): Promise<any> {
-  return await client().index(index).getFilterableAttributes()
-}
-
-function goToPrevPage() {
-  if (table.currentPage === 1 || currentPage === undefined || table === undefined)
-    return
-
-  table.currentPage--
-
-  if (currentPage.value < 1)
-    table.currentPage = 1
-}
-
-function goToNextPage() {
-  // eslint-disable-next-line no-console
-  console.log('currentPage before going to next page', currentPage)
-
-  if (table.currentPage === totalPages.value || currentPage === undefined || table === undefined)
-    return
-
-  if (table.currentPage < 1)
-    table.currentPage = 1
-  else
-    table.currentPage++
-}
-
-function goToPage(page: number) {
-  if (table.currentPage === page || currentPage === undefined || table === undefined)
-    return
-
-  if (table.currentPage <= 1)
-    table.currentPage = 1
-
-  table.currentPage = page
+  return isString(table?.index) && table.index !== '' // a lazy way to check if the table is loaded
 }
 
 function isColumnUsedAsSort(col: string | object) {
@@ -261,15 +142,11 @@ function columnName(col: string) {
   return col.split(':')[0].trim()
 }
 
-function filterName(filter: string) {
-  return filter.split(':')[0].trim()
-}
-
 export async function useTable(store?: TableStore) {
   return {
     store,
     table,
-    type,
+    index,
     columns,
     isColumnSortable,
     filters,

Diff for: src/types.ts

@@ -6,7 +6,11 @@ import type { Hits, SearchResponse } from 'meilisearch'
 
 // the TableStore interface is primarily used with regards to how to persist the data to localStorage
 export interface TableStore {
-  type: string // the Meilisearch index you would like to use for this table
+  /**
+   * The type of table, e.g. 'users', 'posts', 'products', etc.
+   * i.e. the Meilisearch index name
+   */
+  index: string
   columns: string[] // used as table heads/column titles
   source?: string // optional: the Meilisearch host name/address (defaults: http://127.0.0.1:7700)
   password?: string // optional: the Meilisearch password (defaults: '')
@@ -21,7 +25,14 @@ export interface TableStore {
   actionable?: string | boolean // optional: determines whether the table displays any "action items" (defaults: true)
   actions?: string | string[] // optional: the specific type of actions to be displayed/utilized in the table (defaults: 'Edit, Delete')
   perPage: number // optional: the number of rows (items) to be displayed per page (defaults: 10)
-  currentPage: number // optional: the current page number (defaults: 1)
+  /**
+   * The current page number
+   * @default 1
+   * @type {number}
+   * @memberof TableStore
+   * @example 1
+   */
+  currentPage: number
   results?: SearchResponse<Record<string, any>> // optional: the Meilisearch search response (defaults: {})
   hits?: Hits // optional: the Meilisearch hits (we could also name this "rows" as that would be more applicable to the "table domain" but choosing to stay in sync with Meilisearch right now until we implement for a second search engine driver)
   selectable?: string | boolean // optional: determines whether the table displays the checkboxes (defaults: true)