Edit import excel

apps/web/src/views/ContactsView.vue

@@ -5,6 +5,7 @@ import axios from 'axios';
 import { api } from '@/lib/api';
 import { formatJalaliNumeric, toFaDigits } from '@/lib/jalali';
 import CustomerMoodFace from '@/components/CustomerMoodFace.vue';
+import ExcelImportFlow from '@/components/ExcelImportFlow.vue';
 import {
   UiButton,
   UiModal,
@@ -52,7 +53,6 @@ const error = ref('');
 const importMsg = ref('');
 const people = ref<PaginatedResponse<PersonDto> | null>(null);
 const companies = ref<PaginatedResponse<CompanyDto> | null>(null);
-const fileInput = ref<HTMLInputElement | null>(null);
 const menuId = ref<string | null>(null);
 const sortOpen = ref(false);
 const filterOpen = ref(false);
@@ -187,46 +187,38 @@ async function exportExcel() {
   }
 }
 
-function pickImportFile() {
-  fileInput.value?.click();
-}
+const importPreviewPath = computed(() =>
+  tab.value === 'people' ? '/people/import/preview' : '/companies/import/preview',
+);
+const importPath = computed(() =>
+  tab.value === 'people' ? '/people/import' : '/companies/import',
+);
 
-async function onImportFile(ev: Event) {
-  const input = ev.target as HTMLInputElement;
-  const file = input.files?.[0];
-  input.value = '';
-  if (!file) return;
+function onImportStart() {
   busy.value = true;
   importMsg.value = '';
   error.value = '';
-  try {
-    const form = new FormData();
-    form.append('file', file);
-    const path = tab.value === 'people' ? '/people/import' : '/companies/import';
-    const { data } = await api.post<ImportContactsResult>(path, form, {
-      headers: { 'Content-Type': undefined },
-    });
-    importMsg.value = `وارد شد: ${data.created} · تکراری رد شد: ${data.skipped}${
-      data.errors.length ? ` · خطا: ${data.errors.length}` : ''
-    }`;
-    if (data.errors.length) {
-      const sample = data.errors
-        .slice(0, 3)
-        .map((e) => `ردیف ${e.row}: ${e.message}`)
-        .join(' | ');
-      error.value = sample;
-    }
-    await load();
-  } catch (e) {
-    if (axios.isAxiosError(e)) {
-      const msg = (e.response?.data as { message?: string | string[] })?.message;
-      error.value = Array.isArray(msg) ? msg.join('، ') : (msg ?? 'ایمپورت ناموفق بود');
-    } else {
-      error.value = 'ایمپورت ناموفق بود';
-    }
-  } finally {
-    busy.value = false;
+}
+
+async function onImportDone(data: ImportContactsResult) {
+  importMsg.value = `وارد شد: ${data.created} · تکراری رد شد: ${data.skipped}${
+    data.errors.length ? ` · خطا: ${data.errors.length}` : ''
+  }`;
+  if (data.errors.length) {
+    error.value = data.errors
+      .slice(0, 3)
+      .map((e) => `ردیف ${e.row}: ${e.message}`)
+      .join(' | ');
   }
+  await load();
+}
+
+function onImportFail(message: string) {
+  error.value = message;
+}
+
+function onImportSettled() {
+  busy.value = false;
 }
 
 watch(
@@ -251,17 +243,20 @@ onMounted(load);
           <span class="btn-full">خروجی اکسل</span>
           <span class="btn-short">خروجی</span>
         </UiButton>
-        <UiButton variant="ghost" size="sm" :disabled="busy" @click.stop="pickImportFile">
-          <span class="btn-full">ورود از اکسل</span>
-          <span class="btn-short">ورود</span>
-        </UiButton>
-        <input
-          ref="fileInput"
-          type="file"
-          accept=".xlsx,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
-          hidden
-          @change="onImportFile"
-        />
+        <ExcelImportFlow
+          :preview-path="importPreviewPath"
+          :import-path="importPath"
+          :disabled="busy"
+          @start="onImportStart"
+          @done="onImportDone"
+          @fail="onImportFail"
+          @settled="onImportSettled"
+        >
+          <UiButton variant="ghost" size="sm" :disabled="busy">
+            <span class="btn-full">ورود از اکسل</span>
+            <span class="btn-short">ورود</span>
+          </UiButton>
+        </ExcelImportFlow>
         <UiButton
           variant="primary"
           @click="contactModal = tab === 'companies' ? 'company' : 'person'"