Files
portal/app/resources/js/components/projects/BulkActionsBar.vue
T

139 lines
5.3 KiB
Vue

<template>
<v-card class="bulk-actions-bar" elevation="6">
<DevIndexBadge :index="20" label="BulkActionsBar" :dialog-mode="true" style="top: 4px; right: 4px" />
<v-card-text class="d-flex align-center gap-3 flex-wrap">
<strong>Выбрано: {{ store.selectedIds.size }}</strong>
<v-divider vertical />
<v-btn color="primary" variant="outlined" data-testid="bulk-regions" @click="regionsOpen = true">
🌍 Регионы
</v-btn>
<v-btn color="primary" variant="outlined" data-testid="bulk-days" @click="daysOpen = true">
📅 Дни сбора
</v-btn>
<v-btn color="primary" variant="outlined" data-testid="bulk-limit" @click="limitOpen = true">
🎯 Лимит лидов
</v-btn>
<v-divider vertical />
<v-btn color="warning" prepend-icon="mdi-pause" data-testid="bulk-pause" @click="confirmAndRun('pause')">
Приостановить
</v-btn>
<v-btn color="success" prepend-icon="mdi-play" data-testid="bulk-resume" @click="confirmAndRun('resume')">
Возобновить
</v-btn>
<v-divider vertical />
<v-btn
color="error"
prepend-icon="mdi-delete"
data-testid="bulk-delete"
@click="confirmAndRun('delete')"
>
Удалить
</v-btn>
<v-spacer />
<v-btn variant="text" data-testid="bulk-clear" @click="store.clearSelection">Снять выбор</v-btn>
</v-card-text>
<RegionsBulkDialog
v-model="regionsOpen"
:count="store.selectedIds.size"
@apply="(p) => runBulk({ action: 'update_regions', ...p })"
/>
<DaysBulkDialog
v-model="daysOpen"
:count="store.selectedIds.size"
@apply="(p) => runBulk({ action: 'update_days', ...p })"
/>
<LimitBulkDialog
v-model="limitOpen"
:count="store.selectedIds.size"
@apply="(p) => runBulk({ action: 'update_limit', ...p })"
/>
<v-snackbar
v-model="skipToastOpen"
:timeout="6000"
color="warning"
location="bottom right"
data-testid="bulk-skip-toast"
>
{{ skipToastText }}
<template #actions>
<v-btn variant="text" @click="skipToastOpen = false">Закрыть</v-btn>
</template>
</v-snackbar>
</v-card>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { useProjectsStore } from '../../stores/projectsStore';
import DevIndexBadge from '../DevIndexBadge.vue';
import RegionsBulkDialog from './RegionsBulkDialog.vue';
import DaysBulkDialog from './DaysBulkDialog.vue';
import LimitBulkDialog from './LimitBulkDialog.vue';
const store = useProjectsStore();
const regionsOpen = ref(false);
const daysOpen = ref(false);
const limitOpen = ref(false);
// Sprint 1 C5: window.alert → v-snackbar (non-blocking, accessible, не breaks браузерный automation).
const skipToastOpen = ref(false);
const skipToastText = ref('');
const messages: Record<string, string> = {
pause: 'Приостановить выбранные проекты?',
resume: 'Возобновить выбранные проекты?',
delete: 'Удалить выбранные проекты? Действие необратимо. Проекты со сделками будут пропущены.',
};
async function confirmAndRun(action: 'pause' | 'resume' | 'delete') {
if (!window.confirm(messages[action])) return;
await runBulk({ action });
}
async function runBulk(payload: Parameters<typeof store.bulkUpdate>[0]) {
const result = await store.bulkUpdate(payload);
if (result.skipped.length > 0) {
const supplierLocked = result.skipped.filter((s) => s.reason === 'supplier_snapshot_locked').length;
const withDeals = result.skipped.filter((s) => s.reason === 'has_deals').length;
const groups: string[] = [];
if (supplierLocked > 0) {
groups.push(
`${supplierLocked} — мы уже начали сбор лидов на завтра (поставьте проект на паузу, удалить можно будет послезавтра)`,
);
}
if (withDeals > 0) {
groups.push(`${withDeals} — по проекту есть сделки`);
}
// Fallback на старый текст, если reason неизвестный (защита от регрессии при добавлении новых причин).
if (groups.length === 0) {
groups.push(`${result.skipped.length} (конфликт с уже доставленными лидами)`);
}
skipToastText.value = `Применено: ${result.updated}. Пропущено: ${groups.join('; ')}.`;
skipToastOpen.value = true;
}
}
defineExpose({ regionsOpen, daysOpen, limitOpen, skipToastOpen, skipToastText, runBulk });
</script>
<style scoped>
.bulk-actions-bar {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
z-index: 10;
max-width: calc(100vw - 48px);
}
</style>