fix(ktabledata): simplify filter change

Kong · Dec 3, 2024 · b146bb1 · b146bb1
1 parent 42ea23d
commit b146bb1
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 14 deletions.
diff --git a/src/components/KTableData/KTableData.cy.ts b/src/components/KTableData/KTableData.cy.ts
@@ -810,14 +810,17 @@ describe('KTableData', () => {
         .then(() => cy.wrap(Cypress.vueWrapper.setProps({ searchInput: 'some-keyword' })))
 
       // fetcher call should be delayed (> 350ms for search func + 500ms for revalidate func)
+      cy.get('@fetcher', { timeout: 200 })
+        .should('have.callCount', 1)
       cy.get('@fetcher', { timeout: 1000 }) // fetcher's 2nd call
         .should('have.callCount', 2) // fetcher should be called once
         .should('returned', { data: [{ query: 'some-keyword' }] })
         .then(() => cy.wrap(Cypress.vueWrapper.setProps({ searchInput: '' })))
 
       // fetcher should not be called as this state is already cached
-      cy.get('@fetcher', { timeout: 1000 })
-        .should('have.callCount', 2) // fetcher's 3rd call
+      cy.get('@fetcher', { timeout: 200 })
+        .should('have.callCount', 3) // fetcher's 3rd call
+        .should('returned', { data: [{ query: '' }] })
     })
   })
 })
diff --git a/src/components/KTableData/KTableData.vue b/src/components/KTableData/KTableData.vue
@@ -304,7 +304,7 @@ const getCellSlots = computed((): string[] => {
 const fetcherParams = computed(() => ({
   pageSize: pageSize.value,
   page: page.value,
-  query: props.searchInput || filterQuery.value,
+  query: filterQuery.value,
   sortColumnKey: sortColumnKey.value,
   sortColumnOrder: sortColumnOrder.value,
   offset: offset.value,
@@ -399,9 +399,8 @@ const tableFetcherCacheKey = computed((): string => {
   return `k-table_${identifierKey}`
 })
 
-const query = ref('')
 const { debouncedFn: debouncedSearch, generateDebouncedFn: generateDebouncedSearch } = useDebounce((q: string) => {
-  query.value = q
+  filterQuery.value = q
 }, 350)
 const search = generateDebouncedSearch(0) // generate a debounced function with zero delay (immediate)
 
@@ -420,8 +419,7 @@ const stateData = computed((): SwrvStateData => ({
   state: state.value as SwrvState,
 }))
 const tableState = computed((): TableState => isTableLoading.value ? 'loading' : fetcherError.value ? 'error' : 'success')
-const { debouncedFn: debouncedRevalidate, generateDebouncedFn: generateDebouncedRevalidate } = useDebounce(_revalidate, 500)
-const revalidate = generateDebouncedRevalidate(0) // generate a debounced function with zero delay (immediate)
+const { debouncedFn: debouncedRevalidate } = useDebounce(_revalidate, 500)
 
 const sortHandler = ({ sortColumnKey: columnKey, prevKey, sortColumnOrder: sortOrder }: TableSortPayload): void => {
   const header: TableDataHeader = tableHeaders.value.find((header) => header.key === columnKey)!
@@ -550,22 +548,18 @@ watch([stateData, tableState], (newState) => {
 
 // handles debounce of search query
 watch(() => props.searchInput, (newSearchInput: string) => {
-  if (page.value !== 1) {
-    page.value = 1
-  }
-
   if (newSearchInput === '') {
     search(newSearchInput)
   } else {
     debouncedSearch(newSearchInput)
   }
 }, { immediate: true })
 
-watch([query, page, pageSize], async (newData, oldData) => {
+watch([filterQuery, pageSize], async (newData, oldData) => {
   const [oldQuery] = oldData
-  const [newQuery, newPage] = newData
+  const [newQuery] = newData
 
-  if (newQuery !== oldQuery && newPage !== 1) {
+  if (newQuery !== oldQuery && page.value !== 1) {
     page.value = 1
     offsets.value = [null]
     offset.value = null