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/components-next/captain/assistant/ResponseCard.vue

@@ -7,6 +7,7 @@ import { dynamicTime } from 'shared/helpers/timeHelper';
 import CardLayout from 'dashboard/components-next/CardLayout.vue';
 import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
+import Checkbox from 'dashboard/components-next/checkbox/Checkbox.vue';
 import Policy from 'dashboard/components/policy.vue';
 
 const props = defineProps({
@@ -46,14 +47,27 @@ const props = defineProps({
     type: Number,
     required: true,
   },
+  isSelected: {
+    type: Boolean,
+    default: false,
+  },
+  selectable: {
+    type: Boolean,
+    default: false,
+  },
 });
 
-const emit = defineEmits(['action', 'navigate']);
+const emit = defineEmits(['action', 'navigate', 'select', 'hover']);
 
 const { t } = useI18n();
 
 const [showActionsDropdown, toggleDropdown] = useToggle();
 
+const modelValue = computed({
+  get: () => props.isSelected,
+  set: () => emit('select', props.id),
+});
+
 const statusAction = computed(() => {
   if (props.status === 'pending') {
     return [
@@ -102,8 +116,17 @@ const handleDocumentableClick = () => {
 </script>
 
 <template>
-  <CardLayout :class="{ 'rounded-md': compact }">
-    <div class="flex justify-between w-full gap-1">
+  <CardLayout
+    selectable
+    class="relative"
+    :class="{ 'rounded-md': compact }"
+    @mouseenter="emit('hover', true)"
+    @mouseleave="emit('hover', false)"
+  >
+    <div v-show="selectable" class="absolute top-7 ltr:left-4 rtl:right-4">
+      <Checkbox v-model="modelValue" />
+    </div>
+    <div class="flex relative justify-between w-full gap-1">
       <span class="text-base text-n-slate-12 line-clamp-1">
         {{ question }}
       </span>
@@ -148,7 +171,7 @@ const handleDocumentableClick = () => {
             v-if="documentable.type === 'Captain::Document'"
             class="inline-flex items-center gap-1 truncate over"
           >
-            <i class="i-ph-chat-circle-dots text-base" />
+            <i class="i-ph-files-light text-base" />
             <span class="max-w-96 truncate" :title="documentable.name">
               {{ documentable.name }}
             </span>

app/javascript/dashboard/components-next/captain/pageComponents/BulkDeleteDialog.vue

@@ -0,0 +1,59 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useStore } from 'dashboard/composables/store';
+import { useI18n } from 'vue-i18n';
+import { useAlert } from 'dashboard/composables';
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+
+const props = defineProps({
+  type: {
+    type: String,
+    required: true,
+  },
+  bulkIds: {
+    type: Object,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['deleteSuccess']);
+
+const { t } = useI18n();
+const store = useStore();
+const bulkDeleteDialogRef = ref(null);
+const i18nKey = computed(() => props.type.toUpperCase());
+
+const handleBulkDelete = async ids => {
+  if (!ids) return;
+
+  try {
+    await store.dispatch(
+      'captainBulkActions/handleBulkDelete',
+      Array.from(props.bulkIds)
+    );
+
+    emit('deleteSuccess');
+    useAlert(t(`CAPTAIN.${i18nKey.value}.BULK_DELETE.SUCCESS_MESSAGE`));
+  } catch (error) {
+    useAlert(t(`CAPTAIN.${i18nKey.value}.BULK_DELETE.ERROR_MESSAGE`));
+  }
+};
+
+const handleDialogConfirm = async () => {
+  await handleBulkDelete(Array.from(props.bulkIds));
+  bulkDeleteDialogRef.value?.close();
+};
+
+defineExpose({ dialogRef: bulkDeleteDialogRef });
+</script>
+
+<template>
+  <Dialog
+    ref="bulkDeleteDialogRef"
+    type="alert"
+    :title="t(`CAPTAIN.${i18nKey}.BULK_DELETE.TITLE`)"
+    :description="t(`CAPTAIN.${i18nKey}.BULK_DELETE.DESCRIPTION`)"
+    :confirm-button-label="t(`CAPTAIN.${i18nKey}.BULK_DELETE.CONFIRM`)"
+    @confirm="handleDialogConfirm"
+  />
+</template>