From 5d9a572ff8df293ff49a5dc404813c12034e90a2 Mon Sep 17 00:00:00 2001
From: Mahdi <mahdi.banilohi@gmail.com>
Date: Mon, 21 Sep 2026 20:04:18 +0330
Subject: [PATCH] Edit: Add from phone contacts

---
 .../src/components/PhoneContactsImport.vue    | 191 ++++++++++--------
 apps/web/src/lib/phone-contacts.ts            |  13 +-
 apps/web/src/views/PersonFormView.vue         | 122 +++++++++++
 3 files changed, 237 insertions(+), 89 deletions(-)

diff --git a/apps/web/src/components/PhoneContactsImport.vue b/apps/web/src/components/PhoneContactsImport.vue
index ba54ce6..199ca05 100644
--- a/apps/web/src/components/PhoneContactsImport.vue
+++ b/apps/web/src/components/PhoneContactsImport.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { computed, nextTick, ref } from 'vue';
 import axios from 'axios';
 import { api } from '@/lib/api';
 import type { CreatePersonRequest, PersonDto } from '@mento/shared';
@@ -25,16 +25,23 @@ const emit = defineEmits<{
 }>();
 
 const pickerSupported = isContactPickerSupported();
-const open = ref(false);
-const fallbackOpen = ref(false);
+/** یک مودال با دو مرحله تا بعد از انتخاب فایل، لیست تأیید گم نشود */
+const phase = ref<'closed' | 'help' | 'review'>('closed');
 const importing = ref(false);
 const drafts = ref<PhoneContactDraft[]>([]);
 const selected = ref<Set<string>>(new Set());
 const fileInput = ref<HTMLInputElement | null>(null);
 
+const modalOpen = computed(() => phase.value !== 'closed');
+const modalTitle = computed(() =>
+  phase.value === 'review' ? 'انتخاب مخاطبین برای ورود' : 'ورود از مخاطبین گوشی',
+);
 const selectedCount = computed(
   () => drafts.value.filter((d) => selected.value.has(d.key)).length,
 );
+const allSelected = computed(
+  () => drafts.value.length > 0 && selectedCount.value === drafts.value.length,
+);
 
 function apiMessage(e: unknown, fallback: string) {
   if (axios.isAxiosError(e)) {
@@ -44,15 +51,13 @@ function apiMessage(e: unknown, fallback: string) {
   return fallback;
 }
 
-function setDrafts(rows: PhoneContactDraft[]) {
+async function showReview(rows: PhoneContactDraft[], opts?: { selectAll?: boolean }) {
   drafts.value = rows;
-  selected.value = new Set(rows.map((r) => r.key));
-  open.value = rows.length > 0;
-  fallbackOpen.value = false;
-  if (!rows.length) {
-    emit('fail', 'مخاطبی برای ورود پیدا نشد.');
-    emit('settled');
-  }
+  selected.value = opts?.selectAll ? new Set(rows.map((r) => r.key)) : new Set();
+  // بعد از دیالوگ فایل، یک تیک صبر کن تا مودال مطمئن باز شود
+  phase.value = 'closed';
+  await nextTick();
+  phase.value = 'review';
 }
 
 function toggle(key: string) {
@@ -67,8 +72,7 @@ function selectAll(on: boolean) {
 }
 
 function closeAll() {
-  open.value = false;
-  fallbackOpen.value = false;
+  phase.value = 'closed';
   drafts.value = [];
   selected.value = new Set();
   importing.value = false;
@@ -79,32 +83,32 @@ function cancel() {
   emit('settled');
 }
 
-function openFallback() {
-  fallbackOpen.value = true;
+function openHelp() {
+  phase.value = 'help';
 }
 
 async function startPicker() {
-  emit('start');
   try {
     if (!pickerSupported) {
-      openFallback();
+      openHelp();
       return;
     }
-    const rows = await pickPhoneContacts();
-    setDrafts(rows);
+    const rows = await pickPhoneContacts({ multiple: true });
+    if (!rows.length) {
+      emit('fail', 'مخاطبی انتخاب نشد.');
+      return;
+    }
+    // از Contact Picker قبلاً انتخاب شده‌اند → همه تیک‌خورده، ولی هنوز قابل کم/زیاد کردن
+    await showReview(rows, { selectAll: true });
   } catch (e) {
     const name = e instanceof DOMException ? e.name : '';
     const message = e instanceof Error ? e.message : '';
-    if (name === 'AbortError') {
-      emit('settled');
-      return;
-    }
+    if (name === 'AbortError') return;
     if (message === 'CONTACT_PICKER_UNSUPPORTED' || name === 'NotSupportedError') {
-      openFallback();
+      openHelp();
       return;
     }
     emit('fail', 'انتخاب مخاطب از گوشی ناموفق بود.');
-    emit('settled');
   }
 }
 
@@ -115,11 +119,16 @@ async function onVcfFile(ev: Event) {
   if (!file) return;
   try {
     const rows = await parseVCardFile(file);
-    setDrafts(rows);
+    if (!rows.length) {
+      emit('fail', 'مخاطبی برای ورود پیدا نشد.');
+      phase.value = 'help';
+      return;
+    }
+    // از فایل: هیچ‌کدام پیش‌فرض انتخاب نشود تا کاربر خودش یک/چند/همه را بزند
+    await showReview(rows, { selectAll: false });
   } catch {
     emit('fail', 'خواندن فایل مخاطبین (.vcf) ناموفق بود.');
-    emit('settled');
-    fallbackOpen.value = false;
+    phase.value = 'help';
   }
 }
 
@@ -131,6 +140,7 @@ async function importSelected() {
   const rows = drafts.value.filter((d) => selected.value.has(d.key));
   if (!rows.length || importing.value) return;
   importing.value = true;
+  emit('start');
   let created = 0;
   let skipped = 0;
   let failed = 0;
@@ -180,68 +190,75 @@ async function importSelected() {
       @change="onVcfFile"
     />
 
-    <UiModal :open="fallbackOpen" title="ورود از مخاطبین گوشی" @close="cancel">
-      <p class="lead">
-        در این مرورگر انتخاب مستقیم از دفترچه تلفن پشتیبانی نمی‌شود.
-        از Contacts گوشی یک فایل <strong>.vcf</strong> خروجی بگیرید و اینجا بارگذاری کنید.
-      </p>
-      <ul class="tips">
-        <li>اندروید Chrome معمولاً انتخاب مستقیم مخاطب را دارد.</li>
-        <li>آیفون: Contacts → Share Contact / Export → فایل vCard.</li>
-      </ul>
-      <template #footer>
-        <UiButton variant="ghost" :disabled="importing" @click="cancel">انصراف</UiButton>
-        <UiButton variant="primary" :disabled="importing || disabled" @click="fileInput?.click()">
-          انتخاب فایل .vcf
-        </UiButton>
+    <UiModal :open="modalOpen" :title="modalTitle" @close="cancel">
+      <template v-if="phase === 'help'">
+        <p class="lead">
+          در این مرورگر انتخاب مستقیم از دفترچه تلفن پشتیبانی نمی‌شود.
+          از Contacts گوشی یک فایل <strong>.vcf</strong> خروجی بگیرید و اینجا بارگذاری کنید.
+          بعد از بارگذاری می‌توانید یک، چند، یا همه مخاطبین را انتخاب کنید.
+        </p>
+        <ul class="tips">
+          <li>اندروید Chrome معمولاً انتخاب مستقیم مخاطب را دارد.</li>
+          <li>آیفون: Contacts → Share Contact / Export → فایل vCard.</li>
+        </ul>
+      </template>
+
+      <template v-else-if="phase === 'review'">
+        <p class="lead">
+          {{ toFaDigits(drafts.length) }} مخاطب از فایل/گوشی خوانده شد.
+          موارد دلخواه را تیک بزنید؛ فقط انتخاب‌شده‌ها وارد می‌شوند.
+        </p>
+        <div class="toolbar">
+          <button type="button" class="link" @click="selectAll(true)">انتخاب همه</button>
+          <button type="button" class="link" @click="selectAll(false)">هیچ‌کدام</button>
+          <span class="count">{{ toFaDigits(selectedCount) }} از {{ toFaDigits(drafts.length) }}</span>
+        </div>
+        <ul class="list">
+          <li v-for="row in drafts" :key="row.key">
+            <label>
+              <input
+                type="checkbox"
+                :checked="selected.has(row.key)"
+                :disabled="importing"
+                @change="toggle(row.key)"
+              />
+              <span class="avatar" aria-hidden="true">{{ row.fullName.slice(0, 1) }}</span>
+              <span class="meta">
+                <strong>{{ row.fullName }}</strong>
+                <small>{{ draftLine(row) }}</small>
+              </span>
+            </label>
+          </li>
+        </ul>
       </template>
-    </UiModal>
 
-    <UiModal :open="open" title="تأیید مخاطبین" @close="cancel">
-      <p class="lead">
-        {{ toFaDigits(drafts.length) }} مخاطب آماده ورود است. موارد دلخواه را انتخاب کنید.
-      </p>
-      <div class="toolbar">
-        <button type="button" class="link" @click="selectAll(true)">انتخاب همه</button>
-        <button type="button" class="link" @click="selectAll(false)">هیچ‌کدام</button>
-        <span class="count">{{ toFaDigits(selectedCount) }} انتخاب‌شده</span>
-      </div>
-      <ul class="list">
-        <li v-for="row in drafts" :key="row.key">
-          <label>
-            <input
-              type="checkbox"
-              :checked="selected.has(row.key)"
-              :disabled="importing"
-              @change="toggle(row.key)"
-            />
-            <span class="avatar" aria-hidden="true">{{ row.fullName.slice(0, 1) }}</span>
-            <span class="meta">
-              <strong>{{ row.fullName }}</strong>
-              <small>{{ draftLine(row) }}</small>
-            </span>
-          </label>
-        </li>
-      </ul>
       <template #footer>
-        <UiButton variant="ghost" :disabled="importing" @click="cancel">انصراف</UiButton>
-        <UiButton
-          v-if="!pickerSupported"
-          variant="ghost"
-          :disabled="importing"
-          @click="fileInput?.click()"
-        >
-          فایل دیگر
-        </UiButton>
-        <UiButton
-          variant="primary"
-          :disabled="importing || !selectedCount"
-          :loading="importing"
-          @click="importSelected"
-        >
-          <UiIcon name="user-plus" :size="16" />
-          ورود {{ toFaDigits(selectedCount) }} نفر
-        </UiButton>
+        <template v-if="phase === 'help'">
+          <UiButton variant="ghost" :disabled="importing" @click="cancel">انصراف</UiButton>
+          <UiButton variant="primary" :disabled="importing" @click="fileInput?.click()">
+            انتخاب فایل .vcf
+          </UiButton>
+        </template>
+        <template v-else-if="phase === 'review'">
+          <UiButton variant="ghost" :disabled="importing" @click="cancel">انصراف</UiButton>
+          <UiButton variant="ghost" :disabled="importing" @click="fileInput?.click()">
+            فایل دیگر
+          </UiButton>
+          <UiButton
+            variant="primary"
+            :disabled="importing || !selectedCount"
+            :loading="importing"
+            @click="importSelected"
+          >
+            <UiIcon name="user-plus" :size="16" />
+            <template v-if="allSelected && selectedCount">
+              ورود همه ({{ toFaDigits(selectedCount) }})
+            </template>
+            <template v-else>
+              ورود {{ toFaDigits(selectedCount) }} نفر
+            </template>
+          </UiButton>
+        </template>
       </template>
     </UiModal>
   </span>
diff --git a/apps/web/src/lib/phone-contacts.ts b/apps/web/src/lib/phone-contacts.ts
index 0f0bd9d..b65ddcb 100644
--- a/apps/web/src/lib/phone-contacts.ts
+++ b/apps/web/src/lib/phone-contacts.ts
@@ -99,12 +99,15 @@ function draftFromParts(input: {
   };
 }
 
-export async function pickPhoneContacts(): Promise<PhoneContactDraft[]> {
+export async function pickPhoneContacts(options?: {
+  multiple?: boolean;
+}): Promise<PhoneContactDraft[]> {
   const api = contactsApi();
   if (!api) {
     throw new Error('CONTACT_PICKER_UNSUPPORTED');
   }
-  const rows = await api.select(['name', 'email', 'tel'], { multiple: true });
+  const multiple = options?.multiple !== false;
+  const rows = await api.select(['name', 'email', 'tel'], { multiple });
   const drafts: PhoneContactDraft[] = [];
   const seen = new Set<string>();
   for (const row of rows) {
@@ -121,6 +124,12 @@ export async function pickPhoneContacts(): Promise<PhoneContactDraft[]> {
   return drafts;
 }
 
+/** یک مخاطب برای پر کردن فرم (نه ورود گروهی) */
+export async function pickOnePhoneContact(): Promise<PhoneContactDraft | null> {
+  const rows = await pickPhoneContacts({ multiple: false });
+  return rows[0] ?? null;
+}
+
 function unfoldVcard(text: string): string[] {
   const raw = text.replace(/\r\n/g, '\n').replace(/\r/g, '\n').split('\n');
   const lines: string[] = [];
diff --git a/apps/web/src/views/PersonFormView.vue b/apps/web/src/views/PersonFormView.vue
index 2a4d97f..590e4e6 100644
--- a/apps/web/src/views/PersonFormView.vue
+++ b/apps/web/src/views/PersonFormView.vue
@@ -5,6 +5,12 @@ import axios from 'axios';
 import { api } from '@/lib/api';
 import type { CompanyDto, CreatePersonRequest, PersonDto, PersonMood } from '@mento/shared';
 import { PERSON_MOOD_LABELS, PERSON_MOODS } from '@/lib/person-mood';
+import {
+  isContactPickerSupported,
+  parseVCardFile,
+  pickOnePhoneContact,
+  type PhoneContactDraft,
+} from '@/lib/phone-contacts';
 import CustomFieldsSection from '@/components/CustomFieldsSection.vue';
 import CustomerMoodFace from '@/components/CustomerMoodFace.vue';
 import EntityTimeline from '@/components/EntityTimeline.vue';
@@ -56,10 +62,83 @@ const customFields = ref<Record<string, unknown>>({});
 const loyaltyPoints = ref(0);
 const loyaltyTierName = ref('');
 
+const contactPickerSupported = isContactPickerSupported();
+const pickingContact = ref(false);
+const contactFileInput = ref<HTMLInputElement | null>(null);
+
 const backTo = computed(() =>
   isNew.value ? { name: 'contacts' as const } : { name: 'person-detail' as const, params: { id: id.value } },
 );
 
+/** فقط موبایل را اجباری پر می‌کند؛ نام و بقیه فقط اگر خالی باشند. */
+function applyContactDraft(draft: PhoneContactDraft) {
+  if (draft.mobile) {
+    mobile.value = draft.mobile;
+  } else if (draft.phone && !mobile.value.trim()) {
+    mobile.value = draft.phone;
+  }
+  if (!firstName.value.trim() && draft.firstName && draft.firstName !== 'بدون‌نام') {
+    firstName.value = draft.firstName;
+  }
+  if (!lastName.value.trim() && draft.lastName) {
+    lastName.value = draft.lastName;
+  }
+  if (!phone.value.trim() && draft.phone && draft.phone !== draft.mobile) {
+    phone.value = draft.phone;
+  }
+  if (!email.value.trim() && draft.email) {
+    email.value = draft.email;
+  }
+}
+
+async function fillFromPhoneContact() {
+  if (pickingContact.value || saving.value) return;
+  pickingContact.value = true;
+  error.value = '';
+  try {
+    if (!contactPickerSupported) {
+      contactFileInput.value?.click();
+      return;
+    }
+    const draft = await pickOnePhoneContact();
+    if (!draft) return;
+    applyContactDraft(draft);
+  } catch (e) {
+    const name = e instanceof DOMException ? e.name : '';
+    const message = e instanceof Error ? e.message : '';
+    if (name === 'AbortError') return;
+    if (message === 'CONTACT_PICKER_UNSUPPORTED' || name === 'NotSupportedError') {
+      contactFileInput.value?.click();
+      return;
+    }
+    error.value = 'انتخاب مخاطب از گوشی ناموفق بود.';
+  } finally {
+    pickingContact.value = false;
+  }
+}
+
+async function onContactVcfFile(ev: Event) {
+  const el = ev.target as HTMLInputElement;
+  const file = el.files?.[0];
+  el.value = '';
+  if (!file) return;
+  pickingContact.value = true;
+  error.value = '';
+  try {
+    const rows = await parseVCardFile(file);
+    const draft = rows[0];
+    if (!draft) {
+      error.value = 'مخاطبی در فایل پیدا نشد.';
+      return;
+    }
+    applyContactDraft(draft);
+  } catch {
+    error.value = 'خواندن فایل مخاطب (.vcf) ناموفق بود.';
+  } finally {
+    pickingContact.value = false;
+  }
+}
+
 function fill(p: PersonDto) {
   firstName.value = p.firstName;
   lastName.value = p.lastName;
@@ -205,9 +284,28 @@ onMounted(load);
           </UiField>
 
           <UiField label="موبایل" for-id="mobile">
+            <template #label-extra>
+              <button
+                type="button"
+                class="from-contact"
+                :disabled="pickingContact || saving"
+                @click="fillFromPhoneContact"
+              >
+                <UiIcon name="phone" :size="14" />
+                {{ pickingContact ? '…' : 'از مخاطبین' }}
+              </button>
+            </template>
             <UiInput id="mobile" v-model="mobile" type="tel" />
           </UiField>
 
+          <input
+            ref="contactFileInput"
+            class="hidden-file"
+            type="file"
+            accept=".vcf,text/vcard,text/x-vcard"
+            @change="onContactVcfFile"
+          />
+
           <UiField label="تلفن" for-id="phone">
             <UiInput id="phone" v-model="phone" type="tel" />
           </UiField>
@@ -367,6 +465,30 @@ onMounted(load);
   margin-top: var(--sp-4);
 }
 
+.from-contact {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  border: 0;
+  background: transparent;
+  color: var(--accent-deep);
+  font: inherit;
+  font-size: var(--fs-xs);
+  font-weight: var(--fw-bold);
+  cursor: pointer;
+  padding: 0;
+  line-height: 1;
+}
+
+.from-contact:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.hidden-file {
+  display: none;
+}
+
 @media (min-width: 901px) {
   .mob-only {
     display: none !important;