feat: fixed #386 - add searchResultsLocally event and emit searchSubm…

…it when clicking reset btn
PrestaShopCorp · Oct 28, 2024 · 64f5bfd · 64f5bfd
1 parent 0583438
commit 64f5bfd
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 8 deletions.
diff --git a/packages/components/table/src/table.ts b/packages/components/table/src/table.ts
@@ -1,6 +1,6 @@
 import '@prestashopcorp/puik-components/table/style/css';
 import type Table from './table.vue';
-import type { PuikTableSearchInputTypes } from '../src/table-search-input';
+import type { PuikTableSearchInputTypes, searchOption } from '../src/table-search-input';
 
 export enum PuikTableHeaderSize {
   Small = 'sm',
@@ -63,4 +63,13 @@ export interface TableProps {
   stickyLastCol?: boolean
 }
 
+export type TableEmits = {
+  select: [index: number]
+  'select:all': []
+  'update:selection': [value: number[]]
+  sortColumn: [column: sortOption]
+  searchSubmit: [column: searchOption[]]
+  searchResultsLocally: any[]
+};
+
 export type TableInstance = InstanceType<typeof Table>;
diff --git a/packages/components/table/src/table.vue b/packages/components/table/src/table.vue
@@ -383,6 +383,7 @@ import { PuikSkeletonLoader } from '@prestashopcorp/puik-components/skeleton-loa
 import { PuikTableSearchInput } from '@prestashopcorp/puik-components/table';
 import {
   TableProps,
+  TableEmits,
   PuikTableSortOrder,
   PuikTableSortIcon,
   sortOption
@@ -401,13 +402,7 @@ const props = withDefaults(defineProps<TableProps>(), {
   selection: () => []
 });
 
-const emit = defineEmits<{
-  select: [index: number];
-  'select:all': [];
-  'update:selection': [value: number[]];
-  sortColumn: [column: sortOption];
-  searchSubmit: [column: searchOption[]];
-}>();
+const emit = defineEmits<TableEmits>();
 
 const { t } = useLocale();
 const checked = ref<number[]>(props.selection);
@@ -447,6 +442,10 @@ const handleSearchReset = () => {
   searchReset.value = false;
   forceRenderInputSearch();
   searchLoading.value = false;
+  emit('searchSubmit', toRaw(globalSearchOptions.value));
+  if (!props.sortFromServer) {
+    emit('searchResultsLocally', props.items);
+  }
 };
 
 const handleSearchDataLocally = () => {
@@ -479,6 +478,7 @@ const handleSearchDataLocally = () => {
   });
   searchLoading.value = false;
   data.value = searchedRows;
+  emit('searchResultsLocally', searchedRows);
 };
 
 const handleSearchSubmit = () => {

diff --git a/packages/components/table/stories/table.stories.ts b/packages/components/table/stories/table.stories.ts
@@ -252,6 +252,15 @@ type inputRange = {
           `
         }
       }
+    },
+    searchResultsLocally: {
+      description: 'Event emitted when clicking the search button and prop searchFromServer is false. Return search results (items)',
+      control: 'none',
+      table: {
+        type: {
+          summary: 'event => any[]'
+        }
+      }
     }
   },
   args: {

diff --git a/packages/components/table/test/table.spec.ts b/packages/components/table/test/table.spec.ts
@@ -341,6 +341,19 @@ describe('Table tests', () => {
     expect(wrapper.emitted('searchSubmit')).toBeTruthy();
   });
 
+  it('should emit searchResultsLocally event', async () => {
+    const headers: PuikTableHeader[] = [
+      { value: 'firstname', searchable: true },
+      { value: 'lastname', searchable: true },
+      { value: 'action', searchSubmit: true, preventExpand: true }
+    ];
+    factory({ headers, searchBar: true, sortFromServer: false });
+    const searchSubmitButton = getTable().find(searchSubmitButtonClass);
+    expect(searchSubmitButton).toBeTruthy();
+    await searchSubmitButton.trigger('click');
+    expect(wrapper.emitted('searchResultsLocally')).toBeTruthy();
+  });
+
   it('should update the table when items prop changes', async () => {
     const headers: PuikTableHeader[] = [{ value: 'firstname' }];
     factory({ headers, items: [] });