autofind phone number (#239)

Co-authored-by: SHENGXING LU <slu@SHENGXINGs-MacBook-Air.local>

Author: sluFicodes

src/app/shared/billing-account-form/billing-account-form.component.html

@@ -137,10 +137,10 @@
                 </button>
                 @if(prefixCheck==true){
                     <div class="absolute bottom-12 right-0 z-20 max-h-48 w-full bg-white divide-y divide-gray-100 dark:bg-secondary-300 dark:border-secondary-200 dark:text-white rounded-lg shadow overflow-y-auto">
-                        <ul class="py-2 text-sm text-gray-700" aria-labelledby="dropdown-phone-button">
+                        <ul #prefixList class="py-2 text-sm text-gray-700" aria-labelledby="dropdown-phone-button">
                             <li>
                                 @for(pref of prefixes;track pref.code){
-                                    <button type="button" (click)="selectPrefix(pref)" class="inline-flex w-full px-4 py-2 text-sm text-gray-700 dark:text-white hover:bg-gray-100 dark:hover:bg-secondary-200" role="menuitem">
+                                    <button data-cy="phoneCountries" [attr.data-country]="pref.country" type="button" (click)="selectPrefix(pref)" class="inline-flex w-full px-4 py-2 text-sm text-gray-700 dark:text-white hover:bg-gray-100 dark:hover:bg-secondary-200" role="menuitem">
                                         <div class="inline-flex items-center">
                                             {{pref.text}}
                                         </div>

src/app/shared/billing-account-form/billing-account-form.component.ts

@@ -51,9 +51,10 @@ export class BillingAccountFormComponent implements OnInit, OnDestroy {
     telephoneNumber: new FormControl('', [Validators.required, Validators.min(0)]),
     telephoneType: new FormControl('Mobile')
   });
-  prefixes: any[] = phoneNumbers;
+  prefixes: any[] = [...phoneNumbers].sort((a, b) => this.getCountryName(a.text).localeCompare(this.getCountryName(b.text)));
   countries: any[] = countries;
   phonePrefix: any = phoneNumbers[0];
+  @ViewChild('prefixList') prefixListRef!: ElementRef;
   prefixCheck: boolean = false;
   toastVisibility: boolean = false;
 
@@ -404,6 +405,22 @@ export class BillingAccountFormComponent implements OnInit, OnDestroy {
     }
   }
 
+  getCountryName(text: string): string {
+    const match = text.match(/\+\d+\s+(.+)$/);
+    return match ? match[1] : text;
+  }
+
+  @HostListener('keydown', ['$event'])
+  onKeydown(event: KeyboardEvent) {
+    if (!this.prefixCheck) return;
+    const letter = event.key.toLowerCase();
+    if (!/^[a-z]$/.test(letter)) return;
+    const match = this.prefixes.find(p => this.getCountryName(p.text).toLowerCase().startsWith(letter));
+    if (!match || !this.prefixListRef) return;
+    const btn = this.prefixListRef.nativeElement.querySelector(`[data-country="${match.country}"]`);
+    if (btn) btn.scrollIntoView({ block: 'nearest' });
+  }
+
   selectPrefix(pref:any) {
     console.log(pref)
     this.prefixCheck = false;