fix(bulk-select): limit select-all to visible items; add secondary slot (#12891)

Update BulkSelectBar to compute selection state (indeterminate/all) from
visible item IDs and only toggle selection for visible items. Preserve
existing selection for off-screen items when toggling, and guard against
empty visibility. Add detection/rendering for an optional
secondary-actions slot and adjust layout/divider. Also fix
ContactsBulkActionBar selection logic to determine "all selected" by
verifying every visible ID is in the selection. These changes ensure
correct select-all behavior with filtered/visible lists and support
additional UI actions.



https://github.com/user-attachments/assets/d06b78d1-a64a-4c0c-a82a-f870140236c7


# Pull Request Template

## Description

Please include a summary of the change and issue(s) fixed. Also, mention
relevant motivation, context, and any dependencies that this change
requires.
Fixes # (issue)

## Type of change

Please delete options that are not relevant.

- [ ] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality not to work as expected)
- [ ] This change requires a documentation update

## How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide
instructions so we can reproduce. Please also list any relevant details
for your test configuration.


## Checklist:

- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my code
- [ ] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [ ] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules

---------

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
Co-authored-by: iamsivin <iamsivin@gmail.com>

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

@@ -103,6 +103,7 @@ const showPagination = computed(() => {
           <ContactsActiveFiltersPreview
             v-if="showActiveFiltersPreview"
             :active-segment="activeSegment"
+            class="mb-1"
             @clear-filters="emit('clearFilters')"
             @open-filter="openFilter"
           />

app/javascript/dashboard/components-next/captain/assistant/BulkSelectBar.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from 'vue';
+import { computed, useSlots } from 'vue';
 import Checkbox from 'dashboard/components-next/checkbox/Checkbox.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 
@@ -30,23 +30,40 @@ const modelValue = defineModel({
 });
 
 const selectedCount = computed(() => modelValue.value.size);
-const totalCount = computed(() => props.allItems.length);
-
+const visibleItemIds = computed(() => props.allItems.map(item => item.id));
+const visibleItemCount = computed(() => visibleItemIds.value.length);
+const selectedVisibleCount = computed(
+  () => visibleItemIds.value.filter(id => modelValue.value.has(id)).length
+);
 const hasSelected = computed(() => selectedCount.value > 0);
 const isIndeterminate = computed(
-  () => hasSelected.value && selectedCount.value < totalCount.value
+  () =>
+    selectedVisibleCount.value > 0 &&
+    selectedVisibleCount.value < visibleItemCount.value
 );
 const allSelected = computed(
-  () => totalCount.value > 0 && selectedCount.value === totalCount.value
+  () =>
+    visibleItemCount.value > 0 &&
+    selectedVisibleCount.value === visibleItemCount.value
 );
 
+const slots = useSlots();
+const hasSecondaryActions = computed(() => Boolean(slots['secondary-actions']));
+
 const bulkCheckboxState = computed({
   get: () => allSelected.value,
   set: shouldSelectAll => {
-    const newSelectedIds = shouldSelectAll
-      ? new Set(props.allItems.map(item => item.id))
-      : new Set();
-    modelValue.value = newSelectedIds;
+    if (!visibleItemCount.value) {
+      return;
+    }
+
+    const updatedSelection = new Set(modelValue.value);
+    if (shouldSelectAll) {
+      visibleItemIds.value.forEach(id => updatedSelection.add(id));
+    } else {
+      visibleItemIds.value.forEach(id => updatedSelection.delete(id));
+    }
+    modelValue.value = updatedSelection;
   },
 });
 </script>
@@ -63,7 +80,7 @@ const bulkCheckboxState = computed({
       v-if="hasSelected"
       class="flex items-center gap-3 py-1 ltr:pl-3 rtl:pr-3 ltr:pr-4 rtl:pl-4 rounded-lg bg-n-solid-2 outline outline-1 outline-n-container shadow"
     >
-      <div class="flex items-center gap-3">
+      <div class="flex items-center gap-3 min-w-0">
         <div class="flex items-center gap-1.5 min-w-0">
           <Checkbox
             v-model="bulkCheckboxState"
@@ -78,21 +95,23 @@ const bulkCheckboxState = computed({
         <span class="text-sm text-n-slate-10 truncate tabular-nums">
           {{ selectedCountLabel }}
         </span>
-        <div class="h-4 w-px bg-n-strong" />
-        <slot name="secondary-actions" />
       </div>
       <div class="flex items-center gap-3">
-        <slot name="actions" :selected-count="selectedCount">
-          <Button
-            :label="deleteLabel"
-            sm
-            ruby
-            ghost
-            class="!px-1.5"
-            icon="i-lucide-trash"
-            @click="emit('bulkDelete')"
-          />
-        </slot>
+        <slot v-if="hasSecondaryActions" name="secondary-actions" />
+        <div v-if="hasSecondaryActions" class="h-4 w-px bg-n-strong" />
+        <div class="flex items-center gap-3">
+          <slot name="actions" :selected-count="selectedCount">
+            <Button
+              :label="deleteLabel"
+              sm
+              ruby
+              ghost
+              class="!px-1.5"
+              icon="i-lucide-trash"
+              @click="emit('bulkDelete')"
+            />
+          </slot>
+        </div>
       </div>
     </div>
     <div v-else class="flex items-center gap-3">

app/javascript/dashboard/routes/dashboard/contacts/components/ContactsBulkActionBar.vue

@@ -66,8 +66,7 @@ const selectionModel = computed({
       return;
     }
 
-    const shouldSelectAll =
-      newSet.size === props.visibleContactIds.length && newSet.size > 0;
+    const shouldSelectAll = props.visibleContactIds.every(id => newSet.has(id));
     emit('toggleAll', shouldSelectAll);
   },
 });

app/javascript/dashboard/routes/dashboard/contacts/pages/ContactsIndex.vue

@@ -151,7 +151,13 @@ const openBulkDeleteDialog = () => {
 };
 
 const toggleSelectAll = shouldSelect => {
-  selectedContactIds.value = shouldSelect ? [...visibleContactIds.value] : [];
+  const currentSelection = new Set(selectedContactIds.value);
+  if (shouldSelect) {
+    visibleContactIds.value.forEach(id => currentSelection.add(id));
+  } else {
+    visibleContactIds.value.forEach(id => currentSelection.delete(id));
+  }
+  selectedContactIds.value = Array.from(currentSelection);
 };
 
 const toggleContactSelection = ({ id, value }) => {
@@ -190,16 +196,28 @@ const getCommonFetchParams = (page = 1) => ({
   label: activeLabel.value,
 });
 
-const fetchContacts = async (page = 1) => {
-  clearSelection();
+const fetchContacts = async (page = 1, options = {}) => {
+  const { clearSelection: shouldClearSelection = true } = options;
+  if (shouldClearSelection) {
+    clearSelection();
+  }
   await store.dispatch('contacts/clearContactFilters');
   await store.dispatch('contacts/get', getCommonFetchParams(page));
   updatePageParam(page);
 };
 
-const fetchSavedOrAppliedFilteredContact = async (payload, page = 1) => {
+const fetchSavedOrAppliedFilteredContact = async (
+  payload,
+  page = 1,
+  options = {}
+) => {
   if (!activeSegmentId.value && !hasAppliedFilters.value) return;
-  clearSelection();
+
+  const { clearSelection: shouldClearSelection = true } = options;
+  if (shouldClearSelection) {
+    clearSelection();
+  }
+
   await store.dispatch('contacts/filter', {
     ...getCommonFetchParams(page),
     queryPayload: payload,
@@ -207,8 +225,12 @@ const fetchSavedOrAppliedFilteredContact = async (payload, page = 1) => {
   updatePageParam(page);
 };
 
-const fetchActiveContacts = async (page = 1) => {
-  clearSelection();
+const fetchActiveContacts = async (page = 1, options = {}) => {
+  const { clearSelection: shouldClearSelection = true } = options;
+  if (shouldClearSelection) {
+    clearSelection();
+  }
+
   await store.dispatch('contacts/clearContactFilters');
   await store.dispatch('contacts/active', {
     page,
@@ -217,28 +239,36 @@ const fetchActiveContacts = async (page = 1) => {
   updatePageParam(page);
 };
 
-const searchContacts = debounce(async (value, page = 1, append = false) => {
-  if (!append) {
-    clearSelection();
-    searchPageNumber.value = 1;
-  }
-  await store.dispatch('contacts/clearContactFilters');
-  searchValue.value = value;
+const searchContacts = debounce(
+  async (value, page = 1, append = false, options = {}) => {
+    const { clearSelection: shouldClearSelection = true } = options;
 
-  if (!value) {
-    updatePageParam(page);
-    await fetchContacts(page);
-    return;
-  }
+    if (!append) {
+      searchPageNumber.value = 1;
 
-  updatePageParam(page, value);
-  await store.dispatch('contacts/search', {
-    ...getCommonFetchParams(page),
-    search: encodeURIComponent(value),
-    append,
-  });
-  searchPageNumber.value = page;
-}, DEBOUNCE_DELAY);
+      if (shouldClearSelection) {
+        clearSelection();
+      }
+    }
+    await store.dispatch('contacts/clearContactFilters');
+    searchValue.value = value;
+
+    if (!value) {
+      updatePageParam(page);
+      await fetchContacts(page, { clearSelection: false });
+      return;
+    }
+
+    updatePageParam(page, value);
+    await store.dispatch('contacts/search', {
+      ...getCommonFetchParams(page),
+      search: encodeURIComponent(value),
+      append,
+    });
+    searchPageNumber.value = page;
+  },
+  DEBOUNCE_DELAY
+);
 
 const loadMoreSearchResults = async () => {
   if (!hasMore.value || isLoadingMore.value) return;
@@ -256,19 +286,26 @@ const loadMoreSearchResults = async () => {
   isLoadingMore.value = false;
 };
 
-const fetchContactsBasedOnContext = async page => {
-  clearSelection();
+const fetchContactsBasedOnContext = async (page, options = {}) => {
+  const { clearSelection: shouldClearSelection = true } = options;
+  if (shouldClearSelection) {
+    clearSelection();
+  }
   updatePageParam(page, searchValue.value);
   if (isFetchingList.value) return;
   if (searchQuery.value) {
-    await searchContacts(searchQuery.value, page);
+    await searchContacts(searchQuery.value, page, false, {
+      clearSelection: shouldClearSelection,
+    });
     return;
   }
   // Reset the search value when we change the view
   searchValue.value = '';
   // If we're on the active route, fetch active contacts
   if (isActiveView.value) {
-    await fetchActiveContacts(page);
+    await fetchActiveContacts(page, {
+      clearSelection: shouldClearSelection,
+    });
     return;
   }
   // If there are applied filters or active segment with query
@@ -278,13 +315,20 @@ const fetchContactsBasedOnContext = async page => {
   ) {
     const queryPayload =
       activeSegment.value?.query || filterQueryGenerator(appliedFilters.value);
-    await fetchSavedOrAppliedFilteredContact(queryPayload, page);
+    await fetchSavedOrAppliedFilteredContact(queryPayload, page, {
+      clearSelection: shouldClearSelection,
+    });
     return;
   }
   // Default case: fetch regular contacts + label
-  await fetchContacts(page);
+  await fetchContacts(page, {
+    clearSelection: shouldClearSelection,
+  });
 };
 
+const onPageChange = page =>
+  fetchContactsBasedOnContext(page, { clearSelection: false });
+
 const assignLabels = async labels => {
   if (!labels.length || !selectedContactIds.value.length) {
     return;
@@ -338,7 +382,9 @@ const handleSort = async ({ sort, order }) => {
   });
 
   if (searchQuery.value) {
-    await searchContacts(searchValue.value);
+    await searchContacts(searchValue.value, pageNumber.value, false, {
+      clearSelection: false,
+    });
     return;
   }
 
@@ -360,17 +406,6 @@ const createContact = async contact => {
   await store.dispatch('contacts/create', contact);
 };
 
-watch(
-  contacts,
-  newContacts => {
-    const idsOnPage = newContacts.map(contact => contact.id);
-    selectedContactIds.value = selectedContactIds.value.filter(id =>
-      idsOnPage.includes(id)
-    );
-  },
-  { deep: true }
-);
-
 watch(hasSelection, value => {
   if (!value) {
     bulkDeleteDialogRef.value?.close?.();
@@ -416,7 +451,9 @@ watch(searchQuery, value => {
 onMounted(async () => {
   if (!activeSegmentId.value) {
     if (searchQuery.value) {
-      await searchContacts(searchQuery.value, pageNumber.value);
+      await searchContacts(searchQuery.value, pageNumber.value, false, {
+        clearSelection: false,
+      });
       return;
     }
     if (isActiveView.value) {
@@ -452,8 +489,10 @@ onMounted(async () => {
       :use-infinite-scroll="isSearchView"
       :has-more="hasMore"
       :is-loading-more="isLoadingMore"
-      @update:current-page="fetchContactsBasedOnContext"
-      @search="searchContacts"
+      @update:current-page="onPageChange"
+      @search="
+        value => searchContacts(value, 1, false, { clearSelection: false })
+      "
       @update:sort="handleSort"
       @apply-filter="fetchSavedOrAppliedFilteredContact"
       @clear-filters="fetchContacts"
@@ -485,6 +524,7 @@ onMounted(async () => {
           :button-label="t('CONTACTS_LAYOUT.EMPTY_STATE.BUTTON_LABEL')"
           @create="createContact"
         />
+
         <div
           v-else-if="showEmptyText"
           class="flex items-center justify-center py-10"
@@ -493,6 +533,7 @@ onMounted(async () => {
             {{ emptyStateMessage }}
           </span>
         </div>
+
         <div v-else class="flex flex-col gap-4 pt-4 pb-6">
           <ContactsList
             :contacts="contacts"