Edit from phone contacts

apps/web/src/components/PhoneContactsImport.vue

@@ -7,9 +7,11 @@ import { toFaDigits } from '@/lib/jalali';
 import { UiButton, UiModal } from '@/components/ui';
 import UiIcon from '@/components/UiIcon.vue';
 import {
+  filterPhoneContacts,
   isContactPickerSupported,
   parseVCardFile,
   pickPhoneContacts,
+  sortPhoneContacts,
   type PhoneContactDraft,
 } from '@/lib/phone-contacts';
 
@@ -30,18 +32,27 @@ const phase = ref<'closed' | 'help' | 'review'>('closed');
 const importing = ref(false);
 const drafts = ref<PhoneContactDraft[]>([]);
 const selected = ref<Set<string>>(new Set());
+const listQuery = ref('');
 const fileInput = ref<HTMLInputElement | null>(null);
 
 const modalOpen = computed(() => phase.value !== 'closed');
 const modalTitle = computed(() =>
   phase.value === 'review' ? 'انتخاب مخاطبین برای ورود' : 'ورود از مخاطبین گوشی',
 );
+const visibleDrafts = computed(() =>
+  filterPhoneContacts(drafts.value, listQuery.value),
+);
 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,
 );
+const visibleAllSelected = computed(
+  () =>
+    visibleDrafts.value.length > 0 &&
+    visibleDrafts.value.every((d) => selected.value.has(d.key)),
+);
 
 function apiMessage(e: unknown, fallback: string) {
   if (axios.isAxiosError(e)) {
@@ -52,8 +63,9 @@ function apiMessage(e: unknown, fallback: string) {
 }
 
 async function showReview(rows: PhoneContactDraft[], opts?: { selectAll?: boolean }) {
-  drafts.value = rows;
+  drafts.value = sortPhoneContacts(rows);
-  selected.value = opts?.selectAll ? new Set(rows.map((r) => r.key)) : new Set();
+  listQuery.value = '';
+  selected.value = opts?.selectAll ? new Set(drafts.value.map((r) => r.key)) : new Set();
   // بعد از دیالوگ فایل، یک تیک صبر کن تا مودال مطمئن باز شود
   phase.value = 'closed';
   await nextTick();
@@ -68,13 +80,25 @@ function toggle(key: string) {
 }
 
 function selectAll(on: boolean) {
-  selected.value = on ? new Set(drafts.value.map((d) => d.key)) : new Set();
+  if (!on) {
+    selected.value = new Set();
+    return;
+  }
+  // اگر جستجو فعال است فقط نتایج را انتخاب کن، وگرنه همه
+  if (listQuery.value.trim()) {
+    const next = new Set(selected.value);
+    for (const row of visibleDrafts.value) next.add(row.key);
+    selected.value = next;
+  } else {
+    selected.value = new Set(drafts.value.map((d) => d.key));
+  }
 }
 
 function closeAll() {
   phase.value = 'closed';
   drafts.value = [];
   selected.value = new Set();
+  listQuery.value = '';
   importing.value = false;
 }
 
@@ -98,7 +122,6 @@ async function startPicker() {
       emit('fail', 'مخاطبی انتخاب نشد.');
       return;
     }
-    // از Contact Picker قبلاً انتخاب شده‌اند → همه تیک‌خورده، ولی هنوز قابل کم/زیاد کردن
     await showReview(rows, { selectAll: true });
   } catch (e) {
     const name = e instanceof DOMException ? e.name : '';
@@ -124,7 +147,6 @@ async function onVcfFile(ev: Event) {
       phase.value = 'help';
       return;
     }
-    // از فایل: هیچ‌کدام پیش‌فرض انتخاب نشود تا کاربر خودش یک/چند/همه را بزند
     await showReview(rows, { selectAll: false });
   } catch {
     emit('fail', 'خواندن فایل مخاطبین (.vcf) ناموفق بود.');
@@ -205,16 +227,35 @@ async function importSelected() {
 
       <template v-else-if="phase === 'review'">
         <p class="lead">
-          {{ toFaDigits(drafts.length) }} مخاطب از فایل/گوشی خوانده شد.
+          {{ toFaDigits(drafts.length) }} مخاطب از فایل/گوشی خوانده شد (مرتب‌شده الفبایی).
           موارد دلخواه را تیک بزنید؛ فقط انتخاب‌شده‌ها وارد می‌شوند.
         </p>
-        <div class="toolbar">
+        <div class="search">
-          <button type="button" class="link" @click="selectAll(true)">انتخاب همه</button>
+          <UiIcon name="search" :size="15" />
-          <button type="button" class="link" @click="selectAll(false)">هیچ‌کدام</button>
+          <input
-          <span class="count">{{ toFaDigits(selectedCount) }} از {{ toFaDigits(drafts.length) }}</span>
+            v-model="listQuery"
+            type="search"
+            placeholder="جستجو نام یا موبایل…"
+            autocomplete="off"
+          />
         </div>
-        <ul class="list">
+        <div class="toolbar">
-          <li v-for="row in drafts" :key="row.key">
+          <button type="button" class="link" @click="selectAll(true)">
+            {{ listQuery.trim() ? 'انتخاب نتایج' : 'انتخاب همه' }}
+          </button>
+          <button type="button" class="link" @click="selectAll(false)">هیچ‌کدام</button>
+          <span class="count">
+            {{ toFaDigits(selectedCount) }} انتخاب
+            <template v-if="listQuery.trim()">
+              · {{ toFaDigits(visibleDrafts.length) }} نتیجه
+            </template>
+            <template v-else>
+              از {{ toFaDigits(drafts.length) }}
+            </template>
+          </span>
+        </div>
+        <ul v-if="visibleDrafts.length" class="list">
+          <li v-for="row in visibleDrafts" :key="row.key">
             <label>
               <input
                 type="checkbox"
@@ -230,6 +271,7 @@ async function importSelected() {
             </label>
           </li>
         </ul>
+        <p v-else class="empty">مخاطبی با این جستجو پیدا نشد.</p>
       </template>
 
       <template #footer>
@@ -251,9 +293,12 @@ async function importSelected() {
             @click="importSelected"
           >
             <UiIcon name="user-plus" :size="16" />
-            <template v-if="allSelected && selectedCount">
+            <template v-if="allSelected && selectedCount && !listQuery.trim()">
               ورود همه ({{ toFaDigits(selectedCount) }})
             </template>
+            <template v-else-if="visibleAllSelected && listQuery.trim() && selectedCount">
+              ورود {{ toFaDigits(selectedCount) }} نفر
+            </template>
             <template v-else>
               ورود {{ toFaDigits(selectedCount) }} نفر
             </template>
@@ -292,6 +337,28 @@ async function importSelected() {
   line-height: 1.8;
 }
 
+.search {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.65rem;
+  padding: 0.45rem 0.65rem;
+  border: 1px solid #e2e8f0;
+  border-radius: var(--radius);
+  background: #fff;
+}
+
+.search input {
+  flex: 1;
+  min-width: 0;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  font: inherit;
+  font-size: 0.84rem;
+  color: #0f172a;
+}
+
 .toolbar {
   display: flex;
   align-items: center;
@@ -367,4 +434,11 @@ async function importSelected() {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+.empty {
+  margin: 0.75rem 0 0;
+  color: #94a3b8;
+  font-size: 0.84rem;
+  text-align: center;
+}
 </style>

apps/web/src/lib/phone-contacts.ts

@@ -232,3 +232,36 @@ export async function parseVCardFile(file: File): Promise<PhoneContactDraft[]> {
   const text = await file.text();
   return parseVCard(text);
 }
+
+function toEnDigits(raw: string): string {
+  return raw.replace(/[۰-۹٠-٩]/g, (ch) => {
+    const fa = '۰۱۲۳۴۵۶۷۸۹'.indexOf(ch);
+    if (fa >= 0) return String(fa);
+    const ar = '٠١٢٣٤٥٦٧٨٩'.indexOf(ch);
+    return ar >= 0 ? String(ar) : ch;
+  });
+}
+
+export function sortPhoneContacts(rows: PhoneContactDraft[]): PhoneContactDraft[] {
+  return [...rows].sort((a, b) =>
+    a.fullName.localeCompare(b.fullName, 'fa', { sensitivity: 'base', numeric: true }),
+  );
+}
+
+export function filterPhoneContacts(
+  rows: PhoneContactDraft[],
+  query: string,
+): PhoneContactDraft[] {
+  const needle = toEnDigits(query).trim().toLowerCase();
+  if (!needle) return rows;
+  const digitNeedle = needle.replace(/\D/g, '');
+  return rows.filter((row) => {
+    const name = toEnDigits(row.fullName).toLowerCase();
+    if (name.includes(needle)) return true;
+    const phones = [row.mobile, row.phone].filter(Boolean).join(' ');
+    const phonesNorm = toEnDigits(phones).toLowerCase();
+    if (phonesNorm.includes(needle)) return true;
+    if (digitNeedle && phonesNorm.replace(/\D/g, '').includes(digitNeedle)) return true;
+    return false;
+  });
+}

apps/web/src/views/PersonFormView.vue

@@ -1,14 +1,17 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue';
+import { computed, nextTick, onMounted, ref } from 'vue';
 import { RouterLink, useRoute, useRouter } from 'vue-router';
 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 { toFaDigits } from '@/lib/jalali';
 import {
+  filterPhoneContacts,
   isContactPickerSupported,
   parseVCardFile,
   pickOnePhoneContact,
+  sortPhoneContacts,
   type PhoneContactDraft,
 } from '@/lib/phone-contacts';
 import CustomFieldsSection from '@/components/CustomFieldsSection.vue';
@@ -21,6 +24,7 @@ import {
   UiCard,
   UiField,
   UiInput,
+  UiModal,
   UiPageHeader,
   UiSelect,
   UiTextarea,
@@ -65,6 +69,13 @@ const loyaltyTierName = ref('');
 const contactPickerSupported = isContactPickerSupported();
 const pickingContact = ref(false);
 const contactFileInput = ref<HTMLInputElement | null>(null);
+const pickOpen = ref(false);
+const pickDrafts = ref<PhoneContactDraft[]>([]);
+const pickQuery = ref('');
+
+const visiblePickDrafts = computed(() =>
+  filterPhoneContacts(pickDrafts.value, pickQuery.value),
+);
 
 const backTo = computed(() =>
   isNew.value ? { name: 'contacts' as const } : { name: 'person-detail' as const, params: { id: id.value } },
@@ -91,6 +102,29 @@ function applyContactDraft(draft: PhoneContactDraft) {
   }
 }
 
+function draftLine(row: PhoneContactDraft) {
+  return [row.mobile, row.phone, row.email].filter(Boolean).join(' · ') || 'بدون شماره/ایمیل';
+}
+
+function closePick() {
+  pickOpen.value = false;
+  pickDrafts.value = [];
+  pickQuery.value = '';
+}
+
+function choosePick(row: PhoneContactDraft) {
+  applyContactDraft(row);
+  closePick();
+}
+
+async function openPickList(rows: PhoneContactDraft[]) {
+  pickDrafts.value = sortPhoneContacts(rows);
+  pickQuery.value = '';
+  pickOpen.value = false;
+  await nextTick();
+  pickOpen.value = true;
+}
+
 async function fillFromPhoneContact() {
   if (pickingContact.value || saving.value) return;
   pickingContact.value = true;
@@ -126,12 +160,11 @@ async function onContactVcfFile(ev: Event) {
   error.value = '';
   try {
     const rows = await parseVCardFile(file);
-    const draft = rows[0];
+    if (!rows.length) {
-    if (!draft) {
       error.value = 'مخاطبی در فایل پیدا نشد.';
       return;
     }
-    applyContactDraft(draft);
+    await openPickList(rows);
   } catch {
     error.value = 'خواندن فایل مخاطب (.vcf) ناموفق بود.';
   } finally {
@@ -306,6 +339,38 @@ onMounted(load);
             @change="onContactVcfFile"
           />
 
+          <UiModal :open="pickOpen" title="انتخاب مخاطب" @close="closePick">
+            <p class="pick-lead">
+              {{ toFaDigits(pickDrafts.length) }} مخاطب در فایل (مرتب‌شده الفبایی).
+              یکی را انتخاب کنید تا فقط موبایل (و در صورت خالی بودن، نام) پر شود.
+            </p>
+            <div class="pick-search">
+              <UiIcon name="search" :size="15" />
+              <input
+                v-model="pickQuery"
+                type="search"
+                placeholder="جستجو نام یا موبایل…"
+                autocomplete="off"
+              />
+            </div>
+            <ul v-if="visiblePickDrafts.length" class="pick-list">
+              <li v-for="row in visiblePickDrafts" :key="row.key">
+                <button type="button" class="pick-row" @click="choosePick(row)">
+                  <span class="pick-avatar" aria-hidden="true">{{ row.fullName.slice(0, 1) }}</span>
+                  <span class="pick-meta">
+                    <strong>{{ row.fullName }}</strong>
+                    <small>{{ draftLine(row) }}</small>
+                  </span>
+                </button>
+              </li>
+            </ul>
+            <p v-else class="pick-empty">مخاطبی با این جستجو پیدا نشد.</p>
+            <template #footer>
+              <UiButton variant="ghost" @click="closePick">انصراف</UiButton>
+              <UiButton variant="ghost" @click="contactFileInput?.click()">فایل دیگر</UiButton>
+            </template>
+          </UiModal>
+
           <UiField label="تلفن" for-id="phone">
             <UiInput id="phone" v-model="phone" type="tel" />
           </UiField>
@@ -489,6 +554,102 @@ onMounted(load);
   display: none;
 }
 
+.pick-lead {
+  margin: 0 0 0.75rem;
+  color: var(--muted);
+  font-size: var(--fs-sm);
+  line-height: 1.7;
+}
+
+.pick-search {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.65rem;
+  padding: 0.45rem 0.65rem;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--surface);
+}
+
+.pick-search input {
+  flex: 1;
+  min-width: 0;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  font: inherit;
+  font-size: var(--fs-sm);
+  color: var(--ink);
+}
+
+.pick-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 0.45rem;
+  max-height: min(48vh, 360px);
+  overflow: auto;
+}
+
+.pick-row {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 0.65rem;
+  padding: 0.55rem 0.65rem;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--surface);
+  cursor: pointer;
+  font: inherit;
+  text-align: start;
+  color: inherit;
+}
+
+.pick-row:hover {
+  border-color: var(--accent);
+  background: var(--accent-subtle);
+}
+
+.pick-avatar {
+  width: 34px;
+  height: 34px;
+  border-radius: var(--radius);
+  background: var(--accent-subtle);
+  color: var(--accent-deep);
+  display: grid;
+  place-items: center;
+  font-weight: var(--fw-bold);
+  flex-shrink: 0;
+}
+
+.pick-meta {
+  display: grid;
+  gap: 0.1rem;
+  min-width: 0;
+}
+
+.pick-meta strong {
+  font-size: var(--fs-sm);
+}
+
+.pick-meta small {
+  color: var(--muted);
+  font-size: var(--fs-xs);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pick-empty {
+  margin: 0.75rem 0 0;
+  color: var(--muted);
+  font-size: var(--fs-sm);
+  text-align: center;
+}
+
 @media (min-width: 901px) {
   .mob-only {
     display: none !important;