feat: Contact search

app/javascript/dashboard/components-next/Contacts/ContactsLayout.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, useSlots } from 'vue';
+import { computed, useSlots, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import Button from 'dashboard/components-next/button/Button.vue';
@@ -49,11 +49,14 @@ const emit = defineEmits([
   'message',
   'update:currentPage',
   'goToContactsList',
+  'search',
 ]);
 
 const { t } = useI18n();
 const slots = useSlots();
 
+const searchValue = ref('');
+
 const selectedContactName = computed(() => {
   return props.selectedContact?.name;
 });
@@ -114,8 +117,10 @@ const updateCurrentPage = page => {
             <div class="flex items-center gap-2">
               <div v-if="!isDetailView" class="flex items-center gap-2">
                 <Input
+                  v-model="searchValue"
                   :placeholder="$t('CONTACTS_LAYOUT.HEADER.SEARCH_PLACEHOLDER')"
                   :custom-input-class="['h-8 ltr:!pl-8 rtl:!pr-8']"
+                  @input="emit('search', $event.target.value)"
                 >
                   <template #prefix>
                     <Icon

app/javascript/dashboard/routes/dashboard/contact/pages/ContactsPageRouteView.vue

@@ -1,6 +1,7 @@
 <script setup>
-import { onMounted, computed } from 'vue';
+import { onMounted, computed, ref } from 'vue';
 import { useStore, useMapGetter } from 'dashboard/composables/store';
+import { debounce } from '@chatwoot/utils';
 
 import ContactsLayout from 'dashboard/components-next/Contacts/ContactsLayout.vue';
 import ContactsList from 'dashboard/components-next/Contacts/Pages/ContactsList.vue';
@@ -12,6 +13,8 @@ const contacts = useMapGetter('contacts/getContacts');
 const uiFlags = useMapGetter('contacts/getUIFlags');
 const meta = useMapGetter('contacts/getMeta');
 
+const searchValue = ref('');
+
 const isFetchingList = computed(() => uiFlags.value.isFetching);
 
 const currentPage = computed(() => Number(meta.value?.currentPage));
@@ -24,6 +27,27 @@ const fetchContacts = page => {
   });
 };
 
+const debouncedSearch = debounce(
+  value => {
+    searchValue.value = value;
+    if (!value) {
+      fetchContacts(1);
+    } else {
+      store.dispatch('contacts/search', {
+        search: encodeURIComponent(value),
+        page: 1,
+        sortAttr: '-last_activity_at',
+      });
+    }
+  },
+  300,
+  false
+);
+
+const searchContacts = value => {
+  debouncedSearch(value);
+};
+
 onMounted(() => {
   fetchContacts(1);
 });
@@ -42,7 +66,9 @@ const updateCurrentPage = page => {
       :button-label="$t('CONTACTS_LAYOUT.HEADER.MESSAGE_BUTTON')"
       :current-page="currentPage"
       :total-items="totalItems"
+      :show-pagination-footer="!isFetchingList && searchValue === ''"
       @update:current-page="updateCurrentPage"
+      @search="searchContacts"
     >
       <div
         v-if="isFetchingList"