Creating import&export excel

apps/web/src/views/ProjectBoardView.vue

@@ -6,10 +6,12 @@ import { api } from '@/lib/api';
 import { useAuthStore } from '@/stores/auth';
 import UiIcon from '@/components/UiIcon.vue';
 import type {
+  ImportContactsResult,
   ProjectBoardBoardDto,
   ProjectBoardDto,
   ProjectCardDto,
 } from '@mento/shared';
+import { brand } from '@mento/shared';
 import { canManageSettings } from '@/lib/roles';
 
 const route = useRoute();
@@ -25,6 +27,9 @@ const draggingId = ref<string | null>(null);
 const dropStageId = ref<string | null>(null);
 const showCreate = ref(false);
 const newName = ref('');
+const busy = ref(false);
+const importMsg = ref('');
+const fileInput = ref<HTMLInputElement | null>(null);
 
 const selectedBoardId = computed(() => {
   const q = route.query.boardId;
@@ -132,6 +137,65 @@ function openCard(id: string) {
   void router.push({ name: 'project-card-detail', params: { id } });
 }
 
+async function exportExcel() {
+  busy.value = true;
+  importMsg.value = '';
+  error.value = '';
+  try {
+    const { data } = await api.get<Blob>('/project-cards/export', { responseType: 'blob' });
+    const url = URL.createObjectURL(data);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `${brand.filePrefix}-project-cards.xlsx`;
+    a.click();
+    URL.revokeObjectURL(url);
+  } catch {
+    error.value = 'خروجی اکسل ناموفق بود.';
+  } finally {
+    busy.value = false;
+  }
+}
+
+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;
+  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}` : ''
+    }`;
+    if (data.errors.length) {
+      error.value = data.errors
+        .slice(0, 3)
+        .map((e) => `ردیف ${e.row}: ${e.message}`)
+        .join(' | ');
+    }
+    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;
+  }
+}
+
 watch(
   () => route.query.boardId,
   (id, prev) => {
@@ -171,6 +235,19 @@ onMounted(load);
       </label>
 
       <div class="toolbar-actions">
+        <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"
+        />
         <button class="btn-ghost-sm" type="button" :disabled="loading" @click="load">
           بروزرسانی
         </button>
@@ -215,7 +292,8 @@ onMounted(load);
     </form>
 
     <p v-if="error" class="error">{{ error }}</p>
-    <p v-else-if="loading && !board" class="muted">در حال بارگذاری…</p>
+    <p v-if="importMsg" class="ok">{{ importMsg }}</p>
+    <p v-if="loading && !board" class="muted">در حال بارگذاری…</p>
 
     <div v-if="board" class="board">
       <div
@@ -411,6 +489,12 @@ h1 {
   color: #b91c1c;
 }
 
+.ok {
+  margin: 0;
+  color: #0f766e;
+  font-weight: 600;
+}
+
 .board {
   display: flex;
   gap: 0.75rem;