From 6c17d0b053ec80783f75cb1b2e4b965f7cd26301 Mon Sep 17 00:00:00 2001
From: Chris <chrisbreuer93@gmail.com>
Date: Mon, 23 May 2022 15:16:05 -0700
Subject: [PATCH] chore: wip

---
 README.md                          |  4 +--
 src/App.vue                        |  2 +-
 src/components/Table.vue           |  8 +++---
 src/components/TableHead.vue       | 10 +++----
 src/components/TablePagination.vue | 24 ++++++++++++++++-
 src/components/TableRow.vue        |  8 +++---
 src/composables/table.ts           | 35 ++++++++----------------
 src/types.ts                       | 43 ++++++++++++++++--------------
 8 files changed, 73 insertions(+), 61 deletions(-)

diff --git a/README.md b/README.md
index fb4832e9..fa0281fd 100644
--- a/README.md
+++ b/README.md
@@ -56,7 +56,7 @@ import { Table as TableV2 } from 'table-vue'
     :filterable="true"
     :sortable="true"
     :actionable="true"
-    :checkable="false"
+    :selectable="false"
     :per-page="20"
   />
 
@@ -71,7 +71,7 @@ import { Table as TableV2 } from 'table-vue'
     filters="customer_name, vendor_name, part_name, document_types"
     actions="Edit"
     per-page="10"
-    checkable="true"
+    selectable="true"
   />
 </template>
 ```
diff --git a/src/App.vue b/src/App.vue
index 6d7933fd..3503ffed 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -40,7 +40,7 @@ import { Table as TableV2 } from './main'
           vendor_name: multi-select"
         actions="Info Icon"
         per-page="10"
-        checkable="true"
+        selectable="true"
       >
         <template #part_name="partNameProps">
           <div v-for="(part, x) in partNameProps.value" :key="x" class="text-yellow-600">
diff --git a/src/components/Table.vue b/src/components/Table.vue
index 1f04a101..a90bc23a 100644
--- a/src/components/Table.vue
+++ b/src/components/Table.vue
@@ -17,7 +17,7 @@ interface Props {
   actionable?: string | boolean
   actions?: string | string[]
   perPage?: string | number
-  checkable?: string | boolean
+  selectable?: string | boolean
   // stickyHeader?: string | boolean
   // stickyFooter?: string | boolean
 }
@@ -37,7 +37,7 @@ const {
   perPage = 20,
   actions = [],
   actionable = false,
-  checkable = false,
+  selectable = false,
 } = defineProps<Props>()
 
 const cols = computed((): string[] => {
@@ -83,7 +83,7 @@ const { table, search, colName } = await useTable({
   actionable,
   perPage: itemsPerPage.value,
   currentPage: 1,
-  checkable,
+  selectable,
 })
 
 // let's run the initial search upon page view/load
@@ -112,7 +112,7 @@ table.sortable = sortable
 table.perPage = itemsPerPage.value
 table.actions = actions
 table.actionable = actionable
-table.checkable = checkable
+table.selectable = selectable
 </script>
 
 <template>
diff --git a/src/components/TableHead.vue b/src/components/TableHead.vue
index 478558dc..589266f2 100644
--- a/src/components/TableHead.vue
+++ b/src/components/TableHead.vue
@@ -4,7 +4,7 @@ import { useTable } from '~/composables/table'
 // eslint-disable-next-line no-console
 console.log('TableHead.vue')
 
-const { table, isColumnSortable, isColumnUsedAsSort, toggleSort, indeterminate, selectedHits, hits } = await useTable()
+const { table, isColumnSortable, isColumnUsedAsSort, toggleSort, indeterminate, selectedRows, hits } = await useTable()
 
 const lastColumn = computed(() => {
   if (table.actionable || table.actions?.length)
@@ -23,16 +23,16 @@ const readableLastColumn = computed(() => lastColumn[0]?.includes(':') ? lastCol
         <input
           type="checkbox"
           class="rounded border-gray-300 h-4 -mt-2 top-1/2 left-4 text-indigo-600 w-4 absolute sm:left-6 focus:ring-indigo-500"
-          :checked="indeterminate || selectedHits.length === hits.length"
+          :checked="indeterminate || selectedRows.length === hits.length"
           :indeterminate="indeterminate"
-          @change="selectedHits = $event?.target?.checked ? hits.map((h) => h.id) : []"
+          @change="selectedRows = $event?.target?.checked ? hits.map((h) => h.id) : []"
         >
         <!-- <input
           type="checkbox"
           class="rounded border-gray-300 h-4 -mt-2 top-1/2 left-4 text-indigo-600 w-4 absolute sm:left-6 focus:ring-indigo-500"
-          :checked="indeterminate || selectedHits?.length === hits?.length"
+          :checked="indeterminate || selectedRows?.length === hits?.length"
           :indeterminate="indeterminate"
-          @change="selectedHits = []"
+          @change="selectedRows = []"
         > -->
       </th>
 
diff --git a/src/components/TablePagination.vue b/src/components/TablePagination.vue
index 78fe1e91..906946f3 100644
--- a/src/components/TablePagination.vue
+++ b/src/components/TablePagination.vue
@@ -1,7 +1,29 @@
 <script setup lang="ts">
 const emit = defineEmits(['paginateToNextPage', 'paginateToPreviousPage', 'paginateToPage'])
 
-const { goToNextPage, goToPrevPage, goToPage, table, lastPageNumber, pages, isFirstPage, isLastPage } = await useTable()
+const { goToNextPage, goToPrevPage, goToPage, table, lastPageNumber } = await useTable()
+
+// eslint-disable-next-line no-console
+console.log('table', table)
+
+const totalPages = computed(() => Math.ceil(table.results?.nbHits ?? 1 / table.perPage))
+const pages = computed(() => [...Array(totalPages).keys()].map(i => i + 1))
+// const isFirstPage = computed(() => {
+//   if (table.currentPage === 1)
+//     return true
+
+//   return false
+// })
+
+// const isLastPage = computed(() => {
+//   if (table.currentPage === totalPages.value)
+//     return true
+
+//   return false
+// })
+
+// eslint-disable-next-line no-console
+console.log('pages', pages.value)
 
 function next() {
   goToNextPage()
diff --git a/src/components/TableRow.vue b/src/components/TableRow.vue
index 370a5bef..723e73cd 100644
--- a/src/components/TableRow.vue
+++ b/src/components/TableRow.vue
@@ -3,7 +3,7 @@ import type { Hit } from 'meilisearch'
 
 const { hit } = defineProps<{ hit: Hit }>()
 
-const { table, colName, selectedHits } = await useTable()
+const { table, colName, selectedRows } = await useTable()
 
 // let's generate the value of the row
 function generateValue(hit: any, col: any) {
@@ -15,11 +15,11 @@ function generateValue(hit: any, col: any) {
 </script>
 
 <template>
-  <tr scope="row" :class="[selectedHits.includes(hit.id) && 'bg-gray-50']">
+  <tr scope="row" :class="[selectedRows.includes(hit.id) && 'bg-gray-50']">
     <td class="px-6 w-12 relative sm:px-8 sm:w-16">
-      <div v-if="selectedHits.includes(hit.id)" class="bg-indigo-600 inset-y-0 left-0 w-0.5 absolute" />
+      <div v-if="selectedRows.includes(hit.id)" class="bg-indigo-600 inset-y-0 left-0 w-0.5 absolute" />
       <input
-        v-model="selectedHits"
+        v-model="selectedRows"
         :value="hit.id"
         type="checkbox"
         class="rounded border-gray-300 h-4 -mt-2 top-1/2 left-4 text-indigo-600 w-4 absolute sm:left-6 focus:ring-indigo-500"
diff --git a/src/composables/table.ts b/src/composables/table.ts
index 8883d06c..9681be3e 100644
--- a/src/composables/table.ts
+++ b/src/composables/table.ts
@@ -19,26 +19,9 @@ const perPage = ref(table.perPage)
 const query = ref(table.query)
 const actions = ref(table.actions)
 const actionable = ref(table.actionable)
-const selectedHits: any[''] = ref([]) // the selected/checked rows
-const checked = ref(false)
+const selectedRows = ref(table.selectedRows || [])
+const selectedAll = ref(table.selectedAll)
 
-const totalPages = computed(() => Math.ceil(table.results?.nbHits ?? 1 / table.perPage))
-const pages = computed(() => [...Array(totalPages).keys()].map(i => i + 1))
-const isFirstPage = computed(() => {
-  if (table.currentPage === 1)
-    return true
-
-  return false
-})
-
-const isLastPage = computed(() => {
-  if (table.currentPage === totalPages.value)
-    return true
-
-  return false
-})
-
-const indeterminate = computed(() => selectedHits.value.length > 0 && selectedHits.value.length < hits.value.length)
 const searchParams = computed(() => {
   return {
     offset: (table.currentPage - 1) * table.perPage,
@@ -46,6 +29,13 @@ const searchParams = computed(() => {
     sort: isString(table.sort) ? [table.sort] : undefined,
   }
 })
+const totalPages = computed(() => {
+  if (table.results === undefined)
+    return 0
+
+  return Math.ceil(table.results.nbHits / table.perPage)
+})
+const indeterminate = computed(() => selectedRows.value.length > 0 && selectedRows.value.length < hits.value.length)
 const lastColumn = computed(() => {
   if (table.actionable || table.actions?.length)
     return [''] // actions-columns have no table-head
@@ -280,14 +270,11 @@ export async function useTable(store?: TableStore) {
     actionable,
     actions,
     colName,
-    selectedHits,
-    checked,
     indeterminate,
     lastColumn,
     readableLastColumn,
     lastPageNumber,
-    pages,
-    isFirstPage,
-    isLastPage,
+    selectedRows,
+    selectedAll,
   }
 }
diff --git a/src/types.ts b/src/types.ts
index 43d762a7..a9a58b20 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -4,25 +4,28 @@
 
 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 {
-  source?: string
-  password?: string
-  type: string
-  columns: string[]
-  searchable?: string | boolean
-  query?: string
-  sortable?: string | boolean
-  sort?: string // there can only be one active sort at a time
-  sorts?: string | string[] // this is the list of all possible sort options
-  filterable?: string | boolean
-  filters?: string | string[]
-  actionable?: string | boolean
-  actions?: string | string[]
-  perPage: number
-  currentPage: number
-  results?: SearchResponse<Record<string, any>>
-  hits?: Hits
-  checkable?: string | boolean
-  // stickyHeader?: string | boolean
-  // stickyFooter?: string | boolean
+  type: string // the Meilisearch index you would like to use for this table
+  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: '')
+  searchable?: string | boolean // optional: determines whether the table displays the search bar (defaults: true)
+  query?: string // optional: the "query" (= search input) used to search the table (defaults: '')
+  sortable?: string | boolean // optional: determines whether the table displays the "table head"-sorts (defaults: true)
+  sort?: string // optional: the only active sort to be applied to the table (defaults: '')
+  sorts?: string | string[] // optional: the specific type of sorts to be applied to the table (defaults: [])
+  filterable?: string | boolean // optional: determines whether the table displays the filters component (defaults: true)
+  filters?: string | string[] // optional: the specific type of filters to be displayed/utilized in the table (defaults: [])
+  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)
+  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)
+  selectedRows?: number[] | string[] // optional: holds the selected rows (defaults: [])
+  selectedAll?: boolean // optional: determines whether all the rows are selected (defaults: false)
+  // stickyHeader?: string | boolean // optional: determines whether the table displays the sticky header (defaults: false)
+  // stickyFooter?: string | boolean // optional: determines whether the table displays the sticky footer (defaults: false)
 }