feat: Add support for bulk action for Captain FAQs (#10905)

Co-authored-by: Pranav <pranav@chatwoot.com>
Co-authored-by: Pranav <pranavrajs@gmail.com>

app/javascript/dashboard/routes/dashboard/captain/responses/Index.vue

@@ -8,8 +8,10 @@ import { useRouter } from 'vue-router';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 
 import Button from 'dashboard/components-next/button/Button.vue';
+import Checkbox from 'dashboard/components-next/checkbox/Checkbox.vue';
 import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
 import DeleteDialog from 'dashboard/components-next/captain/pageComponents/DeleteDialog.vue';
+import BulkDeleteDialog from 'dashboard/components-next/captain/pageComponents/BulkDeleteDialog.vue';
 import PageLayout from 'dashboard/components-next/captain/PageLayout.vue';
 import CaptainPaywall from 'dashboard/components-next/captain/pageComponents/Paywall.vue';
 import AssistantSelector from 'dashboard/components-next/captain/pageComponents/AssistantSelector.vue';
@@ -28,6 +30,7 @@ const isFetching = computed(() => uiFlags.value.fetchingList);
 
 const selectedResponse = ref(null);
 const deleteDialog = ref(null);
+const bulkDeleteDialog = ref(null);
 
 const selectedStatus = ref('all');
 const selectedAssistant = ref('all');
@@ -129,7 +132,69 @@ const fetchResponses = (page = 1) => {
   store.dispatch('captainResponses/get', filterParams);
 };
 
-const onPageChange = page => fetchResponses(page);
+// Bulk action
+const bulkSelectedIds = ref(new Set());
+const hoveredCard = ref(null);
+
+const bulkSelectionState = computed(() => {
+  const selectedCount = bulkSelectedIds.value.size;
+  const totalCount = responses.value?.length || 0;
+
+  return {
+    hasSelected: selectedCount > 0,
+    isIndeterminate: selectedCount > 0 && selectedCount < totalCount,
+    allSelected: totalCount > 0 && selectedCount === totalCount,
+  };
+});
+
+const bulkCheckbox = computed({
+  get: () => bulkSelectionState.value.allSelected,
+  set: value => {
+    bulkSelectedIds.value = value
+      ? new Set(responses.value.map(r => r.id))
+      : new Set();
+  },
+});
+
+const handleCardHover = (isHovered, id) => {
+  hoveredCard.value = isHovered ? id : null;
+};
+
+const handleCardSelect = id => {
+  const selected = new Set(bulkSelectedIds.value);
+  selected[selected.has(id) ? 'delete' : 'add'](id);
+  bulkSelectedIds.value = selected;
+};
+
+const handleBulkApprove = async () => {
+  try {
+    await store.dispatch(
+      'captainBulkActions/handleBulkApprove',
+      Array.from(bulkSelectedIds.value)
+    );
+
+    // Clear selection
+    bulkSelectedIds.value = new Set();
+    useAlert(t('CAPTAIN.RESPONSES.BULK_APPROVE.SUCCESS_MESSAGE'));
+  } catch (error) {
+    useAlert(
+      error?.message || t('CAPTAIN.RESPONSES.BULK_APPROVE.ERROR_MESSAGE')
+    );
+  }
+};
+
+const onPageChange = page => {
+  // Store current selection state before fetching new page
+  const wasAllPageSelected = bulkSelectionState.value.allSelected;
+  const hadPartialSelection = bulkSelectedIds.value.size > 0;
+
+  fetchResponses(page);
+
+  // Reset selection if we had any selections on page change
+  if (wasAllPageSelected || hadPartialSelection) {
+    bulkSelectedIds.value = new Set();
+  }
+};
 
 const onDeleteSuccess = () => {
   if (responses.value?.length === 0 && responseMeta.value?.page > 1) {
@@ -137,6 +202,20 @@ const onDeleteSuccess = () => {
   }
 };
 
+const onBulkDeleteSuccess = () => {
+  // Only fetch if no records left
+  if (responses.value?.length === 0) {
+    const page =
+      responseMeta.value?.page > 1
+        ? responseMeta.value.page - 1
+        : responseMeta.value.page;
+    fetchResponses(page);
+  }
+
+  // Clear selection
+  bulkSelectedIds.value = new Set();
+};
+
 const handleStatusFilterChange = ({ value }) => {
   selectedStatus.value = value;
   isStatusFilterOpen.value = false;
@@ -177,29 +256,76 @@ onMounted(() => {
     </template>
 
     <template #controls>
-      <div v-if="shouldShowDropdown" class="mb-4 -mt-3 flex gap-3">
-        <OnClickOutside @trigger="isStatusFilterOpen = false">
-          <Button
-            :label="selectedStatusLabel"
-            icon="i-lucide-chevron-down"
-            size="sm"
-            color="slate"
-            trailing-icon
-            class="max-w-48"
-            @click="isStatusFilterOpen = !isStatusFilterOpen"
-          />
+      <div
+        v-if="shouldShowDropdown"
+        class="mb-4 -mt-3 flex justify-between items-center"
+      >
+        <div v-if="!bulkSelectionState.hasSelected" class="flex gap-3">
+          <OnClickOutside @trigger="isStatusFilterOpen = false">
+            <Button
+              :label="selectedStatusLabel"
+              icon="i-lucide-chevron-down"
+              size="sm"
+              color="slate"
+              trailing-icon
+              class="max-w-48"
+              @click="isStatusFilterOpen = !isStatusFilterOpen"
+            />
 
-          <DropdownMenu
-            v-if="isStatusFilterOpen"
-            :menu-items="statusOptions"
-            class="mt-2"
-            @action="handleStatusFilterChange"
+            <DropdownMenu
+              v-if="isStatusFilterOpen"
+              :menu-items="statusOptions"
+              class="mt-2"
+              @action="handleStatusFilterChange"
+            />
+          </OnClickOutside>
+          <AssistantSelector
+            :assistant-id="selectedAssistant"
+            @update="handleAssistantFilterChange"
           />
-        </OnClickOutside>
-        <AssistantSelector
-          :assistant-id="selectedAssistant"
-          @update="handleAssistantFilterChange"
-        />
+        </div>
+
+        <transition
+          name="slide-fade"
+          enter-active-class="transition-all duration-300 ease-out"
+          enter-from-class="opacity-0 transform ltr:-translate-x-4 rtl:translate-x-4"
+          enter-to-class="opacity-100 transform translate-x-0"
+          leave-active-class="hidden opacity-0"
+        >
+          <div
+            v-if="bulkSelectionState.hasSelected"
+            class="flex items-center gap-3 ltr:pl-4 rtl:pr-4"
+          >
+            <div class="flex items-center gap-1.5">
+              <Checkbox
+                v-model="bulkCheckbox"
+                :indeterminate="bulkSelectionState.isIndeterminate"
+              />
+              <span class="text-sm text-n-slate-10 tabular-nums">
+                {{
+                  $t('CAPTAIN.RESPONSES.SELECTED', {
+                    count: bulkSelectedIds.size,
+                  })
+                }}
+              </span>
+            </div>
+            <div class="h-4 w-px bg-n-strong" />
+            <div class="flex gap-2">
+              <Button
+                :label="$t('CAPTAIN.RESPONSES.BULK_APPROVE_BUTTON')"
+                sm
+                slate
+                @click="handleBulkApprove"
+              />
+              <Button
+                :label="$t('CAPTAIN.RESPONSES.BULK_DELETE_BUTTON')"
+                sm
+                slate
+                @click="bulkDeleteDialog.dialogRef.open()"
+              />
+            </div>
+          </div>
+        </transition>
       </div>
     </template>
 
@@ -218,8 +344,12 @@ onMounted(() => {
           :status="response.status"
           :created-at="response.created_at"
           :updated-at="response.updated_at"
+          :is-selected="bulkSelectedIds.has(response.id)"
+          :selectable="hoveredCard === response.id || bulkSelectedIds.size > 0"
           @action="handleAction"
           @navigate="handleNavigationAction"
+          @select="handleCardSelect"
+          @hover="isHovered => handleCardHover(isHovered, response.id)"
         />
       </div>
     </template>
@@ -232,6 +362,14 @@ onMounted(() => {
       @delete-success="onDeleteSuccess"
     />
 
+    <BulkDeleteDialog
+      v-if="bulkSelectedIds"
+      ref="bulkDeleteDialog"
+      :bulk-ids="bulkSelectedIds"
+      type="Responses"
+      @delete-success="onBulkDeleteSuccess"
+    />
+
     <CreateResponseDialog
       v-if="dialogType"
       ref="createDialog"