Add angular signals and computed to the console (#2308)

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

@@ -1,41 +1,41 @@
-<div *ngIf="loading" class="contact__loading">
+@if (loading) {
+<div class="contact__loading">
   <mat-progress-bar mode="indeterminate"></mat-progress-bar>
 </div>
-<div *ngIf="!loading">
-  <div
-    class="contact__empty-contacts"
-    *ngIf="contactService.contacts.length === 0"
-  >
+} @else {
+<div>
+  @if (contactService.contacts().length === 0) {
+  <div class="contact__empty-contacts">
     <mat-icon class="contact__empty-contacts-icon secondary-text"
       >apps_outage</mat-icon
     >
     <h1>No contacts found</h1>
   </div>
-  <div *ngFor="let group of groupedData">
-    <div class="contact__cards-wrapper" *ngIf="group.contacts.length">
-      <h3>{{ group.label }}s</h3>
-      <mat-divider></mat-divider>
-      <div class="contact__cards">
-        <mat-card class="contact__card" *ngFor="let contact of group.contacts">
-          <mat-card-title>{{ contact.name }}</mat-card-title>
-          <p *ngIf="contact.phoneNumber">{{ contact.phoneNumber }}</p>
-          <p *ngIf="contact.emailAddress">{{ contact.emailAddress }}</p>
-          <mat-card-actions class="contact__card-actions">
-            <button
-              mat-button
-              color="primary"
-              (click)="openDetails($event, contact)"
-            >
-              <mat-icon>edit</mat-icon>Edit
-            </button>
-            <button mat-button color="accent" (click)="deleteContact(contact)">
-              <mat-icon>delete</mat-icon>Delete
-            </button>
-          </mat-card-actions>
-        </mat-card>
-      </div>
+  } @else { @for (group of groupedContacts(); track group.emailAddress) {
+  <div class="contact__cards-wrapper">
+    <h3>{{ group.label }}s</h3>
+    <mat-divider></mat-divider>
+    <div class="contact__cards">
+      <mat-card class="contact__card" *ngFor="let contact of group.contacts">
+        <mat-card-title>{{ contact.name }}</mat-card-title>
+        <p *ngIf="contact.phoneNumber">{{ contact.phoneNumber }}</p>
+        <p *ngIf="contact.emailAddress">{{ contact.emailAddress }}</p>
+        <mat-card-actions class="contact__card-actions">
+          <button
+            mat-button
+            color="primary"
+            (click)="openDetails($event, contact)"
+          >
+            <mat-icon>edit</mat-icon>Edit
+          </button>
+          <button mat-button color="accent" (click)="deleteContact(contact)">
+            <mat-icon>delete</mat-icon>Delete
+          </button>
+        </mat-card-actions>
+      </mat-card>
     </div>
   </div>
+  } }
   <div class="contact__actions">
     <button mat-raised-button color="primary" (click)="openCreateNew($event)">
       <mat-icon>add</mat-icon>Create a Contact
@@ -45,3 +45,4 @@
     #contactDetailsWrapper
   ></app-dialog-bottom-sheet-wrapper>
 </div>
+}

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, ViewChild } from '@angular/core';
+import { Component, ViewChild, computed } from '@angular/core';
 import { Contact, ContactService } from './contact.service';
 import { HttpErrorResponse } from '@angular/common/http';
 import { MatSnackBar } from '@angular/material/snack-bar';
@@ -70,9 +70,9 @@ export class ContactDetailsDialogComponent implements DialogBottomSheetContent {
 
   init(params: ContactDetailsParams) {
     this.params = params;
-    this.contactIndex = this.contactService.contacts.findIndex(
-      (c) => c === params.data.contact
-    );
+    this.contactIndex = this.contactService
+      .contacts()
+      .findIndex((c) => c === params.data.contact);
     this.contact = JSON.parse(JSON.stringify(params.data.contact));
   }
 
@@ -115,6 +115,16 @@ export class ContactDetailsDialogComponent implements DialogBottomSheetContent {
 })
 export default class ContactComponent {
   public static PATH = 'contact';
+  public groupedContacts = computed(() => {
+    return this.contactService.contacts().reduce((acc, contact) => {
+      contact.types.forEach((contactType) => {
+        acc
+          .find((group: GroupedContacts) => group.value === contactType)
+          ?.contacts.push(contact);
+      });
+      return acc;
+    }, JSON.parse(JSON.stringify(contactTypes)));
+  });
 
   @ViewChild('contactDetailsWrapper')
   detailsComponentWrapper!: DialogBottomSheetWrapper;
@@ -131,17 +141,6 @@ export default class ContactComponent {
     });
   }
 
-  public get groupedData() {
-    return this.contactService.contacts?.reduce((acc, contact) => {
-      contact.types.forEach((type) => {
-        acc
-          .find((group: GroupedContacts) => group.value === type)
-          ?.contacts.push(contact);
-      });
-      return acc;
-    }, JSON.parse(JSON.stringify(contactTypes)));
-  }
-
   deleteContact(contact: Contact) {
     if (confirm(`Please confirm contact ${contact.name} delete`)) {
       this.contactService.deleteContact(contact).subscribe({

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

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Injectable } from '@angular/core';
+import { Injectable, signal } from '@angular/core';
 import { Observable, tap } from 'rxjs';
 import { RegistrarService } from 'src/app/registrar/registrar.service';
 import { BackendService } from 'src/app/shared/services/backend.service';
@@ -33,7 +33,7 @@ export interface Contact {
   providedIn: 'root',
 })
 export class ContactService {
-  contacts: Contact[] = [];
+  contacts = signal<Contact[]>([]);
 
   constructor(
     private backend: BackendService,
@@ -42,39 +42,37 @@ export class ContactService {
 
   // TODO: Come up with a better handling for registrarId
   fetchContacts(): Observable<Contact[]> {
-    return this.backend
-      .getContacts(this.registrarService.activeRegistrarId)
-      .pipe(
-        tap((contacts = []) => {
-          this.contacts = contacts;
-        })
-      );
+    return this.backend.getContacts(this.registrarService.registrarId()).pipe(
+      tap((contacts = []) => {
+        this.contacts.set(contacts);
+      })
+    );
   }
 
   saveContacts(contacts: Contact[]): Observable<Contact[]> {
     return this.backend
-      .postContacts(this.registrarService.activeRegistrarId, contacts)
+      .postContacts(this.registrarService.registrarId(), contacts)
       .pipe(
         tap((_) => {
-          this.contacts = contacts;
+          this.contacts.set(contacts);
         })
       );
   }
 
   updateContact(index: number, contact: Contact) {
-    const newContacts = this.contacts.map((c, i) =>
+    const newContacts = this.contacts().map((c, i) =>
       i === index ? contact : c
     );
     return this.saveContacts(newContacts);
   }
 
   addContact(contact: Contact) {
-    const newContacts = this.contacts.concat([contact]);
+    const newContacts = this.contacts().concat([contact]);
     return this.saveContacts(newContacts);
   }
 
   deleteContact(contact: Contact) {
-    const newContacts = this.contacts.filter((c) => c !== contact);
+    const newContacts = this.contacts().filter((c) => c !== contact);
     return this.saveContacts(newContacts);
   }
 }

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

@@ -40,7 +40,7 @@ export default class SecurityComponent {
     private _snackBar: MatSnackBar,
     public registrarService: RegistrarService
   ) {
-    this.dataSource = apiToUiConverter(this.registrarService.registrar);
+    this.dataSource = apiToUiConverter(this.registrarService.registrar());
   }
 
   enableEdit() {
@@ -76,6 +76,6 @@ export default class SecurityComponent {
   }
 
   resetDataSource() {
-    this.dataSource = apiToUiConverter(this.registrarService.registrar);
+    this.dataSource = apiToUiConverter(this.registrarService.registrar());
   }
 }

console-webapp/src/app/settings/security/security.service.ts

@@ -64,7 +64,7 @@ export class SecurityService {
   saveChanges(newSecuritySettings: SecuritySettings) {
     return this.backend
       .postSecuritySettings(
-        this.registrarService.activeRegistrarId,
+        this.registrarService.registrarId(),
         uiToApiConverter(newSecuritySettings)
       )
       .pipe(