From 59dac9be5657777f1c7cde555e09286543707e83 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=94=D0=BC=D0=B8=D1=82=D1=80=D0=B8=D0=B9?=
 <donnalee11681676@gmail.com>
Date: Sat, 16 May 2026 20:05:15 +0300
Subject: [PATCH] =?UTF-8?q?feat(import):=20ImportView=20=E2=80=94=20=D1=8D?=
 =?UTF-8?q?=D0=BA=D1=80=D0=B0=D0=BD=20=D0=B8=D0=BC=D0=BF=D0=BE=D1=80=D1=82?=
 =?UTF-8?q?=D0=B0=20CSV?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

TDD: spec (3 tests) first, then component.
ImportView.vue: upload form + polling + history table + unknown-statuses banner.
Uses api/imports (uploadImport/listImports/getImport/getUnknownStatuses).
setInterval callback wrapped in named async fn (pollOnce) — no eslint-disable needed.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 app/resources/js/views/ImportView.vue | 237 ++++++++++++++++++++++++++
 app/tests/Frontend/ImportView.spec.ts |  74 ++++++++
 2 files changed, 311 insertions(+)
 create mode 100644 app/resources/js/views/ImportView.vue
 create mode 100644 app/tests/Frontend/ImportView.spec.ts

diff --git a/app/resources/js/views/ImportView.vue b/app/resources/js/views/ImportView.vue
new file mode 100644
index 00000000..61b37aef
--- /dev/null
+++ b/app/resources/js/views/ImportView.vue
@@ -0,0 +1,237 @@
+<script setup lang="ts">
+/**
+ * Импорт данных — загрузка CSV исторических лидов из crm.bp-gr.ru (ТЗ §6).
+ *
+ * Flow: выбрать файл → загрузить → polling прогресса → таблица результата.
+ * Неизвестные статусы маппятся через UnknownStatusesDialog.
+ */
+import { computed, onMounted, onUnmounted, ref } from 'vue';
+import {
+    getImport,
+    getUnknownStatuses,
+    listImports,
+    uploadImport,
+    type ImportLogResource,
+    type UnknownStatus,
+} from '../api/imports';
+import UnknownStatusesDialog from '../components/import/UnknownStatusesDialog.vue';
+
+const file = ref<File | null>(null);
+const dryRun = ref(false);
+const uploading = ref(false);
+const errorMessage = ref<string | null>(null);
+const history = ref<ImportLogResource[]>([]);
+const activeImport = ref<ImportLogResource | null>(null);
+const unknownStatuses = ref<UnknownStatus[]>([]);
+const wizardOpen = ref(false);
+
+let pollTimer: ReturnType<typeof setInterval> | null = null;
+
+const canUpload = computed(() => file.value !== null && !uploading.value);
+const isProcessing = computed(
+    () =>
+        activeImport.value?.status === 'pending' ||
+        activeImport.value?.status === 'processing',
+);
+
+async function refreshHistory(): Promise<void> {
+    try {
+        history.value = await listImports();
+    } catch {
+        // история — не критично, тихо игнорируем
+    }
+}
+
+async function refreshUnknown(): Promise<void> {
+    try {
+        unknownStatuses.value = await getUnknownStatuses();
+    } catch {
+        unknownStatuses.value = [];
+    }
+}
+
+function stopPolling(): void {
+    if (pollTimer !== null) {
+        clearInterval(pollTimer);
+        pollTimer = null;
+    }
+}
+
+async function pollOnce(id: number): Promise<void> {
+    try {
+        activeImport.value = await getImport(id);
+        if (!isProcessing.value) {
+            stopPolling();
+            await refreshHistory();
+            await refreshUnknown();
+        }
+    } catch {
+        stopPolling();
+    }
+}
+
+function startPolling(id: number): void {
+    stopPolling();
+    pollTimer = setInterval(() => {
+        void pollOnce(id);
+    }, 2000);
+}
+
+async function submit(): Promise<void> {
+    if (file.value === null) {
+        return;
+    }
+    uploading.value = true;
+    errorMessage.value = null;
+    try {
+        activeImport.value = await uploadImport(file.value, dryRun.value);
+        startPolling(activeImport.value.id);
+        file.value = null;
+    } catch {
+        errorMessage.value = 'Не удалось загрузить файл. Проверьте формат (CSV, до 10 МБ).';
+    } finally {
+        uploading.value = false;
+    }
+}
+
+async function onWizardResolved(): Promise<void> {
+    wizardOpen.value = false;
+    await refreshUnknown();
+}
+
+onMounted(async () => {
+    await refreshHistory();
+    await refreshUnknown();
+});
+
+onUnmounted(stopPolling);
+</script>
+
+<template>
+    <v-container fluid class="import-view pa-6">
+        <header class="page-head mb-4">
+            <h1 class="text-h4 mb-2">Импорт данных</h1>
+            <p class="text-body-2 text-medium-emphasis ma-0">
+                Перенос исторических лидов из crm.bp-gr.ru. Формат — CSV-выгрузка (UTF-8).
+            </p>
+        </header>
+
+        <v-alert
+            v-if="unknownStatuses.length > 0"
+            data-test="unknown-banner"
+            type="warning"
+            variant="tonal"
+            class="mb-4"
+        >
+            Найдено {{ unknownStatuses.length }} неизвестных статусов воронки — замапьте вручную.
+            <template #append>
+                <v-btn size="small" variant="flat" @click="wizardOpen = true">Замапить</v-btn>
+            </template>
+        </v-alert>
+
+        <v-card variant="outlined" class="pa-6 mb-6">
+            <v-file-input
+                v-model="file"
+                label="CSV-файл выгрузки лидов"
+                accept=".csv,text/csv"
+                prepend-icon="mdi-database-import-outline"
+                variant="outlined"
+                density="comfortable"
+                :disabled="uploading"
+            />
+            <v-checkbox
+                v-model="dryRun"
+                label="Пробный прогон (проверить файл без записи сделок)"
+                density="compact"
+                hide-details
+            />
+            <v-alert v-if="errorMessage" type="error" variant="tonal" class="mt-3">
+                {{ errorMessage }}
+            </v-alert>
+            <div class="mt-4">
+                <v-btn
+                    data-test="upload-btn"
+                    color="primary"
+                    :loading="uploading"
+                    :disabled="!canUpload"
+                    @click="submit"
+                >
+                    Загрузить
+                </v-btn>
+            </div>
+        </v-card>
+
+        <v-card v-if="activeImport" variant="outlined" class="pa-6 mb-6">
+            <h2 class="text-h6 mb-3">Текущий импорт — {{ activeImport.filename }}</h2>
+            <v-progress-linear v-if="isProcessing" indeterminate color="primary" class="mb-3" />
+            <div data-test="active-status" class="text-body-2">
+                Статус: <strong>{{ activeImport.status }}</strong>
+            </div>
+            <v-table v-if="!isProcessing" density="compact" class="mt-3">
+                <tbody>
+                    <tr>
+                        <td>Добавлено</td>
+                        <td>{{ activeImport.rows_added }}</td>
+                    </tr>
+                    <tr>
+                        <td>Обновлено</td>
+                        <td>{{ activeImport.rows_updated }}</td>
+                    </tr>
+                    <tr>
+                        <td>Пропущено</td>
+                        <td>{{ activeImport.rows_skipped }}</td>
+                    </tr>
+                    <tr>
+                        <td>Неизвестных статусов</td>
+                        <td>{{ activeImport.unknown_statuses_count }}</td>
+                    </tr>
+                </tbody>
+            </v-table>
+            <v-alert
+                v-if="activeImport.status === 'failed'"
+                type="error"
+                variant="tonal"
+                class="mt-3"
+            >
+                {{ activeImport.error_message }}
+            </v-alert>
+        </v-card>
+
+        <v-card variant="outlined" class="pa-6">
+            <h2 class="text-h6 mb-3">История импортов</h2>
+            <v-table v-if="history.length > 0" density="compact">
+                <thead>
+                    <tr>
+                        <th>Файл</th>
+                        <th>Статус</th>
+                        <th>Добавлено</th>
+                        <th>Обновлено</th>
+                        <th>Пропущено</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr v-for="row in history" :key="row.id">
+                        <td>{{ row.filename }}</td>
+                        <td>{{ row.status }}</td>
+                        <td>{{ row.rows_added }}</td>
+                        <td>{{ row.rows_updated }}</td>
+                        <td>{{ row.rows_skipped }}</td>
+                    </tr>
+                </tbody>
+            </v-table>
+            <p v-else class="text-body-2 text-medium-emphasis ma-0">Импортов пока нет.</p>
+        </v-card>
+
+        <UnknownStatusesDialog
+            v-model="wizardOpen"
+            :statuses="unknownStatuses"
+            @resolved="onWizardResolved"
+        />
+    </v-container>
+</template>
+
+<style scoped>
+.import-view {
+    max-width: 1100px;
+}
+</style>
diff --git a/app/tests/Frontend/ImportView.spec.ts b/app/tests/Frontend/ImportView.spec.ts
new file mode 100644
index 00000000..7df4ed75
--- /dev/null
+++ b/app/tests/Frontend/ImportView.spec.ts
@@ -0,0 +1,74 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { mount, flushPromises } from '@vue/test-utils';
+import { createVuetify } from 'vuetify';
+import * as components from 'vuetify/components';
+import * as directives from 'vuetify/directives';
+
+vi.mock('../../resources/js/api/imports', async (importOriginal) => {
+    const orig = await importOriginal<typeof import('../../resources/js/api/imports')>();
+    return { ...orig };
+});
+
+const importsApi = await import('../../resources/js/api/imports');
+const ImportView = (await import('../../resources/js/views/ImportView.vue')).default;
+
+const vuetify = createVuetify({ components, directives });
+
+function mountView() {
+    return mount(ImportView, {
+        global: {
+            plugins: [vuetify],
+            stubs: { UnknownStatusesDialog: true },
+        },
+    });
+}
+
+describe('ImportView', () => {
+    beforeEach(() => {
+        vi.restoreAllMocks();
+        vi.spyOn(importsApi, 'listImports').mockResolvedValue([]);
+        vi.spyOn(importsApi, 'getUnknownStatuses').mockResolvedValue([]);
+    });
+
+    it('грузит историю импортов при монтировании', async () => {
+        const spy = vi.spyOn(importsApi, 'listImports').mockResolvedValue([
+            {
+                id: 1,
+                filename: 'leads.csv',
+                status: 'done',
+                rows_total: 5,
+                rows_added: 5,
+                rows_updated: 0,
+                rows_skipped: 0,
+                unknown_statuses_count: 0,
+                dry_run: false,
+                error_message: null,
+                started_at: null,
+                finished_at: null,
+            },
+        ]);
+        const wrapper = mountView();
+        await flushPromises();
+
+        expect(spy).toHaveBeenCalled();
+        expect(wrapper.text()).toContain('leads.csv');
+    });
+
+    it('кнопка загрузки заблокирована без выбранного файла', async () => {
+        const wrapper = mountView();
+        await flushPromises();
+
+        const uploadBtn = wrapper.find('[data-test="upload-btn"]');
+        expect(uploadBtn.attributes('disabled')).toBeDefined();
+    });
+
+    it('показывает баннер о неизвестных статусах', async () => {
+        vi.spyOn(importsApi, 'getUnknownStatuses').mockResolvedValue([
+            { id: 1, status_ru: 'Архив', occurrences: 3 },
+        ]);
+        const wrapper = mountView();
+        await flushPromises();
+
+        expect(wrapper.find('[data-test="unknown-banner"]').exists()).toBe(true);
+    });
+});