Add registrar selection functionality (#2054)

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

@@ -1,11 +1,12 @@
 <h3 mat-dialog-title>Contact details</h3>
 <div mat-dialog-content>
-  <form>
+  <form (ngSubmit)="saveAndClose($event)">
     <div>
       <mat-form-field class="contact-details__input">
         <mat-label>Name: </mat-label>
         <input
           matInput
+          [required]="true"
           [(ngModel)]="contact.name"
           [ngModelOptions]="{ standalone: true }"
         />
@@ -19,6 +20,7 @@
           type="email"
           matInput
           [email]="true"
+          [required]="true"
           [(ngModel)]="contact.emailAddress"
           [ngModelOptions]="{ standalone: true }"
         />
@@ -94,12 +96,9 @@
         (per CL&D requirements)</mat-checkbox
       >
     </section>
+    <mat-dialog-actions>
+      <button mat-button (click)="onClose()">Cancel</button>
+      <button type="submit" mat-button>Save</button>
+    </mat-dialog-actions>
   </form>
-
-  <p></p>
-
-  <mat-dialog-actions>
-    <button mat-button (click)="onClose()">Cancel</button>
-    <button mat-button (click)="saveAndClose()">Save</button>
-  </mat-dialog-actions>
 </div>

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

@@ -14,7 +14,10 @@
 
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { ContactComponent } from './contact.component';
+import ContactComponent from './contact.component';
+import { MaterialModule } from 'src/app/material.module';
+import { BackendService } from 'src/app/shared/services/backend.service';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
 
 describe('ContactComponent', () => {
   let component: ContactComponent;
@@ -23,8 +26,9 @@ describe('ContactComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [ContactComponent],
+      imports: [HttpClientTestingModule, MaterialModule],
+      providers: [BackendService],
     }).compileComponents();
-
     fixture = TestBed.createComponent(ContactComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();

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

@@ -104,7 +104,11 @@ export class ContactDetailsDialogComponent {
     this.operation = data.operation;
   }
 
-  saveAndClose() {
+  saveAndClose(e: any) {
+    e.preventDefault();
+    if (!e.target.checkValidity()) {
+      return;
+    }
     let operationObservable;
     if (this.operation === Operations.ADD) {
       operationObservable = this.contactService.addContact(this.contact);
@@ -143,7 +147,7 @@ export default class ContactComponent {
   ) {
     // TODO: Refactor to registrarId service
     this.loading = true;
-    this.contactService.fetchContacts('zoomco').subscribe(() => {
+    this.contactService.fetchContacts().subscribe(() => {
       this.loading = false;
     });
   }
@@ -160,7 +164,9 @@ export default class ContactComponent {
   }
 
   deleteContact(contact: Contact) {
-    this.contactService.deleteContact(contact);
+    if (confirm(`Please confirm contact ${contact.name} delete`)) {
+      this.contactService.deleteContact(contact).subscribe();
+    }
   }
 
   openCreateNew(e: Event) {

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

@@ -14,6 +14,7 @@
 
 import { Injectable } 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';
 
 export interface Contact {
@@ -34,26 +35,30 @@ export interface Contact {
 export class ContactService {
   contacts: Contact[] = [];
 
-  constructor(private backend: BackendService) {}
+  constructor(
+    private backend: BackendService,
+    private registrarService: RegistrarService
+  ) {}
 
   // TODO: Come up with a better handling for registrarId
-  fetchContacts(registrarId: string): Observable<Contact[]> {
-    return this.backend.getContacts(registrarId).pipe(
-      tap((contacts) => {
-        this.contacts = contacts;
-      })
-    );
+  fetchContacts(): Observable<Contact[]> {
+    return this.backend
+      .getContacts(this.registrarService.activeRegistrarId)
+      .pipe(
+        tap((contacts) => {
+          this.contacts = contacts;
+        })
+      );
   }
 
-  saveContacts(
-    contacts: Contact[],
-    registrarId?: string
-  ): Observable<Contact[]> {
-    return this.backend.postContacts(registrarId || 'default', contacts).pipe(
-      tap((_) => {
-        this.contacts = contacts;
-      })
-    );
+  saveContacts(contacts: Contact[]): Observable<Contact[]> {
+    return this.backend
+      .postContacts(this.registrarService.activeRegistrarId, contacts)
+      .pipe(
+        tap((_) => {
+          this.contacts = contacts;
+        })
+      );
   }
 
   updateContact(index: number, contact: Contact) {

console-webapp/src/app/settings/registrars/registrars.component.spec.ts

@@ -14,7 +14,7 @@
 
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { RegistrarsComponent } from './registrars.component';
+import RegistrarsComponent from './registrars.component';
 
 describe('RegistrarsComponent', () => {
   let component: RegistrarsComponent;

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

@@ -14,7 +14,7 @@
 
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { SecurityComponent } from './security.component';
+import SecurityComponent from './security.component';
 
 describe('SecurityComponent', () => {
   let component: SecurityComponent;

console-webapp/src/app/settings/users/users.component.spec.ts

@@ -14,7 +14,7 @@
 
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { UsersComponent } from './users.component';
+import UsersComponent from './users.component';
 
 describe('UsersComponent', () => {
   let component: UsersComponent;

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

@@ -14,7 +14,7 @@
 
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { WhoisComponent } from './whois.component';
+import WhoisComponent from './whois.component';
 
 describe('WhoisComponent', () => {
   let component: WhoisComponent;