Edit import excel

apps/web/src/views/ProjectBoardView.vue

@@ -17,6 +17,7 @@ import {
   moveStageToIndex,
   updateDealStage,
 } from '@/lib/pipeline-board';
+import ExcelImportFlow from '@/components/ExcelImportFlow.vue';
 import UiButton from '@/components/ui/UiButton.vue';
 import UiInput from '@/components/ui/UiInput.vue';
 import UiModal from '@/components/ui/UiModal.vue';
@@ -50,7 +51,6 @@ const deleteStageId = ref<string | null>(null);
 const stageBusy = ref(false);
 const busy = ref(false);
 const importMsg = ref('');
-const fileInput = ref<HTMLInputElement | null>(null);
 
 const draggingId = ref<string | null>(null);
 const draggingColumnId = ref<string | null>(null);
@@ -387,45 +387,35 @@ 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>(
-      '/project-cards/import',
-      form,
-      { headers: { 'Content-Type': undefined } },
-    );
-    importMsg.value = `وارد شد: ${data.created} · تکراری رد شد: ${data.skipped}${
-      data.errors.length ? ` · خطا: ${data.errors.length}` : ''
-    }${data.boards?.length ? ` · برد: ${data.boards.join('، ')}` : ''}`;
-    if (data.errors.length) {
-      error.value = data.errors
-        .slice(0, 3)
-        .map((e) => `ردیف ${e.row}: ${e.message}`)
-        .join(' | ');
-    }
-    if (data.boardId && data.boardId !== selectedBoardId.value) {
-      await router.replace({ name: 'projects', query: { boardId: data.boardId } });
-    } else {
-      await load();
-    }
-  } catch (e) {
-    error.value = apiMessage(e, 'ایمپورت ناموفق بود');
-  } finally {
-    busy.value = false;
+}
+
+async function onImportDone(data: ImportContactsResult) {
+  importMsg.value = `وارد شد: ${data.created} · تکراری رد شد: ${data.skipped}${
+    data.errors.length ? ` · خطا: ${data.errors.length}` : ''
+  }${data.boards?.length ? ` · برد: ${data.boards.join('، ')}` : ''}`;
+  if (data.errors.length) {
+    error.value = data.errors
+      .slice(0, 3)
+      .map((e) => `ردیف ${e.row}: ${e.message}`)
+      .join(' | ');
   }
+  if (data.boardId && data.boardId !== selectedBoardId.value) {
+    await router.replace({ name: 'projects', query: { boardId: data.boardId } });
+  } else {
+    await load();
+  }
+}
+
+function onImportFail(message: string) {
+  error.value = message;
+}
+
+function onImportSettled() {
+  busy.value = false;
 }
 
 function onMenuCard(cardId: string) {
@@ -470,16 +460,19 @@ onBeforeUnmount(() => {
         <button class="btn-ghost-sm" type="button" :disabled="loading || busy" @click="exportExcel">
           خروجی اکسل
         </button>
-        <button class="btn-ghost-sm" type="button" :disabled="loading || busy" @click="pickImportFile">
-          ورود از اکسل
-        </button>
-        <input
-          ref="fileInput"
-          type="file"
-          accept=".xlsx,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
-          hidden
-          @change="onImportFile"
-        />
+        <ExcelImportFlow
+          preview-path="/project-cards/import/preview"
+          import-path="/project-cards/import"
+          :disabled="loading || busy"
+          @start="onImportStart"
+          @done="onImportDone"
+          @fail="onImportFail"
+          @settled="onImportSettled"
+        >
+          <button class="btn-ghost-sm" type="button" :disabled="loading || busy">
+            ورود از اکسل
+          </button>
+        </ExcelImportFlow>
       </template>
     </PipelineToolbar>