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

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"