Add console registrar field focus handler, split whois address field (#2388)

console-webapp/src/app/navigation/navigation.component.html

@@ -18,7 +18,7 @@
     *matTreeNodeDef="let node; when: hasChild"
     (click)="onClick(node)"
   >
-    <div class="mat-tree-node" [class.active]="router.url.endsWith(node.path)">
+    <div class="mat-tree-node" [class.active]="router.url.includes(node.path)">
       <button
         class="console-app__nav-icon_expand"
         mat-icon-button

console-webapp/src/app/registrar/registrarSelector.component.html

@@ -13,6 +13,7 @@
       [ngModel]="registrarInput()"
       (ngModelChange)="registrarInput.set($event)"
       [ngModelOptions]="{ standalone: true }"
+      (focus)="onFocus()"
       [matAutocomplete]="auto"
     />
     <mat-autocomplete

console-webapp/src/app/registrar/registrarSelector.component.ts

@@ -34,15 +34,14 @@ export class RegistrarSelectorComponent {
         option.toLowerCase().includes(filterValue)
       );
     });
-    this.onSelect(registrarService.registrarId());
+  }
+
+  onFocus() {
+    // We reset the list of options after selection, so that user doesn't have to clear it out
+    this.filteredOptions = this.allRegistrarIds();
   }
 
   onSelect(registrarId: string) {
     this.registrarService.updateSelectedRegistrar(registrarId);
-
-    // We reset the list of options after selection, so that user doesn't have to clear it out
-    setTimeout(() => {
-      this.filteredOptions = this.allRegistrarIds();
-    }, 10);
   }
 }

console-webapp/src/app/settings/contact/contact.component.scss

@@ -20,6 +20,11 @@
     mat-table {
       min-width: 800px;
     }
+    .contact__name-column-title {
+      color: #5f6368;
+      font-weight: 500;
+      padding: 10px 0;
+    }
   }
   &__empty-contacts {
     display: flex;
@@ -38,9 +43,4 @@
     right: 20px;
     top: 5px;
   }
-  .contact__name-column-title {
-    color: #5f6368;
-    font-weight: 500;
-    padding: 10px 0;
-  }
 }

console-webapp/src/app/settings/contact/contact.component.ts

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component, effect } from '@angular/core';
+import { Component, effect, ViewEncapsulation } from '@angular/core';
 import { MatTableDataSource } from '@angular/material/table';
 import { take } from 'rxjs';
 import { RegistrarService } from 'src/app/registrar/registrar.service';
@@ -27,6 +27,7 @@ import {
   selector: 'app-contact',
   templateUrl: './contact.component.html',
   styleUrls: ['./contact.component.scss'],
+  encapsulation: ViewEncapsulation.None,
 })
 export default class ContactComponent {
   public static PATH = 'contact';
@@ -68,18 +69,18 @@ export default class ContactComponent {
     public contactService: ContactService,
     private registrarService: RegistrarService
   ) {
+    effect(() => {
+      if (this.contactService.contacts()) {
+        this.dataSource = new MatTableDataSource<ViewReadyContact>(
+          this.contactService.contacts().map(contactTypeToViewReadyContact)
+        );
+      }
+    });
     effect(() => {
       if (this.registrarService.registrarId()) {
         this.contactService.isContactDetailsView = false;
         this.contactService.isContactNewView = false;
-        this.contactService
-          .fetchContacts()
-          .pipe(take(1))
-          .subscribe((contacts) => {
-            this.dataSource = new MatTableDataSource<ViewReadyContact>(
-              contacts.map(contactTypeToViewReadyContact)
-            );
-          });
+        this.contactService.fetchContacts().pipe(take(1)).subscribe();
       }
     });
   }

console-webapp/src/app/settings/whois/whois.component.ts

@@ -36,9 +36,12 @@ export default class WhoisComponent {
     if (registrar?.localizedAddress?.state) {
       result += `${registrar?.localizedAddress?.state} `;
     }
-    if (registrar?.localizedAddress?.street) {
+    if (registrar?.localizedAddress?.countryCode) {
       result += registrar?.localizedAddress?.countryCode;
     }
+    if (registrar?.localizedAddress?.zip) {
+      result += registrar?.localizedAddress?.zip;
+    }
     return result;
   });
 

console-webapp/src/app/settings/whois/whoisEdit.component.html

@@ -51,7 +51,17 @@
       </mat-form-field>
 
       <mat-form-field appearance="outline">
-        <mat-label>Street Address: </mat-label>
+        <mat-label>Street Address (line 1): </mat-label>
+        <input
+          matInput
+          type="text"
+          [ngModelOptions]="{ standalone: true }"
+          [(ngModel)]="registrarInEdit.localizedAddress.street![0]"
+        />
+      </mat-form-field>
+
+      <mat-form-field appearance="outline">
+        <mat-label>Street Address (line 2): </mat-label>
         <input
           matInput
           type="text"