Edit import excel

apps/web/src/views/ActivitiesView.vue

@@ -17,6 +17,7 @@ import {
   UiPagination,
 } from '@/components/ui';
 import UiIcon from '@/components/UiIcon.vue';
+import ExcelImportFlow from '@/components/ExcelImportFlow.vue';
 import ActivityFormView from '@/views/ActivityFormView.vue';
 import type {
   ActivityDto,
@@ -78,7 +79,6 @@ const activityModal = ref<{
 const menuId = ref<string | null>(null);
 const busy = ref(false);
 const importMsg = ref('');
-const fileInput = ref<HTMLInputElement | null>(null);
 const counts = ref<Record<ActivityFilter, number>>({
   today: 0,
   overdue: 0,
@@ -286,44 +286,31 @@ async function exportExcel() {
   }
 }
 
-function pickImportFile() {
-  fileInput.value?.click();
-}
-
-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 { data } = await api.post<ImportContactsResult>('/activities/import', form, {
-      headers: { 'Content-Type': undefined },
-    });
-    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 Promise.all([load(), loadCounts()]);
-  } 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 Promise.all([load(), loadCounts()]);
+}
+
+function onImportFail(message: string) {
+  error.value = message;
+}
+
+function onImportSettled() {
+  busy.value = false;
 }
 
 watch(
@@ -357,17 +344,20 @@ onMounted(() => {
           <span class="btn-full">خروجی اکسل</span>
           <span class="btn-short">خروجی</span>
         </UiButton>
-        <UiButton variant="ghost" type="button" :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="/activities/import/preview"
+          import-path="/activities/import"
+          :disabled="busy"
+          @start="onImportStart"
+          @done="onImportDone"
+          @fail="onImportFail"
+          @settled="onImportSettled"
+        >
+          <UiButton variant="ghost" type="button" :disabled="busy">
+            <span class="btn-full">ورود از اکسل</span>
+            <span class="btn-short">ورود</span>
+          </UiButton>
+        </ExcelImportFlow>
         <UiButton variant="primary" @click="activityModal = {}">
           <UiIcon name="plus" :size="16" />
           فعالیت جدید