Create reusable dialog / bottom sheet component (#2237)

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

@@ -41,4 +41,7 @@
       <mat-icon>add</mat-icon>Create a Contact
     </button>
   </div>
+  <app-dialog-bottom-sheet-wrapper
+    #contactDetailsWrapper
+  ></app-dialog-bottom-sheet-wrapper>
 </div>

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

@@ -12,21 +12,14 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component, Inject } from '@angular/core';
-import {
-  MatDialog,
-  MAT_DIALOG_DATA,
-  MatDialogRef,
-} from '@angular/material/dialog';
-import {
-  MatBottomSheet,
-  MAT_BOTTOM_SHEET_DATA,
-  MatBottomSheetRef,
-} from '@angular/material/bottom-sheet';
+import { Component, ViewChild } from '@angular/core';
 import { Contact, ContactService } from './contact.service';
-import { BreakpointObserver } from '@angular/cdk/layout';
 import { HttpErrorResponse } from '@angular/common/http';
 import { MatSnackBar } from '@angular/material/snack-bar';
+import {
+  DialogBottomSheetContent,
+  DialogBottomSheetWrapper,
+} from 'src/app/shared/components/dialogBottomSheet.component';
 
 enum Operations {
   DELETE,
@@ -40,7 +33,13 @@ interface GroupedContacts {
   contacts: Array<Contact>;
 }
 
-let isMobile: boolean;
+type ContactDetailsParams = {
+  close: Function;
+  data: {
+    contact: Contact;
+    operation: Operations;
+  };
+};
 
 const contactTypes: Array<GroupedContacts> = [
   { value: 'ADMIN', label: 'Primary contact', contacts: [] },
@@ -52,72 +51,46 @@ const contactTypes: Array<GroupedContacts> = [
   { value: 'WHOIS', label: 'WHOIS-Inquiry contact', contacts: [] },
 ];
 
-class ContactDetailsEventsResponder {
-  private ref?: MatDialogRef<any> | MatBottomSheetRef;
-  constructor() {
-    this.onClose = this.onClose.bind(this);
-  }
-
-  setRef(ref: MatDialogRef<any> | MatBottomSheetRef) {
-    this.ref = ref;
-  }
-
-  onClose() {
-    if (this.ref == undefined) {
-      throw "Reference to ContactDetailsDialogComponent hasn't been set. ";
-    }
-    if (this.ref instanceof MatBottomSheetRef) {
-      this.ref.dismiss();
-    } else if (this.ref instanceof MatDialogRef) {
-      this.ref.close();
-    }
-  }
-}
-
 @Component({
   selector: 'app-contact-details-dialog',
   templateUrl: 'contactDetails.component.html',
   styleUrls: ['./contact.component.scss'],
 })
-export class ContactDetailsDialogComponent {
-  contact: Contact;
+export class ContactDetailsDialogComponent implements DialogBottomSheetContent {
+  contact?: Contact;
   contactTypes = contactTypes;
-  operation: Operations;
-  contactIndex: number;
-  onCloseCallback: Function;
+  contactIndex?: number;
+
+  params?: ContactDetailsParams;
 
   constructor(
     public contactService: ContactService,
-    private _snackBar: MatSnackBar,
-    @Inject(isMobile ? MAT_BOTTOM_SHEET_DATA : MAT_DIALOG_DATA)
-    public data: {
-      onClose: Function;
-      contact: Contact;
-      operation: Operations;
-    }
-  ) {
-    this.onCloseCallback = data.onClose;
-    this.contactIndex = contactService.contacts.findIndex(
-      (c) => c === data.contact
+    private _snackBar: MatSnackBar
+  ) {}
+
+  init(params: ContactDetailsParams) {
+    this.params = params;
+    this.contactIndex = this.contactService.contacts.findIndex(
+      (c) => c === params.data.contact
     );
-    this.contact = JSON.parse(JSON.stringify(data.contact));
-    this.operation = data.operation;
+    this.contact = JSON.parse(JSON.stringify(params.data.contact));
   }
 
-  onClose(e: MouseEvent) {
-    e.preventDefault();
-    this.onCloseCallback.call(this);
+  close() {
+    this.params?.close();
   }
 
   saveAndClose(e: SubmitEvent) {
     e.preventDefault();
+    if (!this.contact || this.contactIndex === undefined) return;
     if (!(e.target as HTMLFormElement).checkValidity()) {
       return;
     }
+    const operation = this.params?.data.operation;
     let operationObservable;
-    if (this.operation === Operations.ADD) {
+    if (operation === Operations.ADD) {
       operationObservable = this.contactService.addContact(this.contact);
-    } else if (this.operation === Operations.UPDATE) {
+    } else if (operation === Operations.UPDATE) {
       operationObservable = this.contactService.updateContact(
         this.contactIndex,
         this.contact
@@ -127,7 +100,7 @@ export class ContactDetailsDialogComponent {
     }
 
     operationObservable.subscribe({
-      complete: this.onCloseCallback.bind(this),
+      complete: () => this.close(),
       error: (err: HttpErrorResponse) => {
         this._snackBar.open(err.error);
       },
@@ -143,11 +116,11 @@ export class ContactDetailsDialogComponent {
 export default class ContactComponent {
   public static PATH = 'contact';
 
+  @ViewChild('contactDetailsWrapper')
+  detailsComponentWrapper!: DialogBottomSheetWrapper;
+
   loading: boolean = false;
   constructor(
-    private dialog: MatDialog,
-    private bottomSheet: MatBottomSheet,
-    private breakpointObserver: BreakpointObserver,
     public contactService: ContactService,
     private _snackBar: MatSnackBar
   ) {
@@ -195,20 +168,9 @@ export default class ContactComponent {
     operation: Operations = Operations.UPDATE
   ) {
     e.preventDefault();
-    // TODO: handle orientation change
-    isMobile = this.breakpointObserver.isMatched('(max-width: 599px)');
-    const responder = new ContactDetailsEventsResponder();
-    const config = { data: { onClose: responder.onClose, contact, operation } };
-
-    if (isMobile) {
-      const bottomSheetRef = this.bottomSheet.open(
-        ContactDetailsDialogComponent,
-        config
-      );
-      responder.setRef(bottomSheetRef);
-    } else {
-      const dialogRef = this.dialog.open(ContactDetailsDialogComponent, config);
-      responder.setRef(dialogRef);
-    }
+    this.detailsComponentWrapper.open<ContactDetailsDialogComponent>(
+      ContactDetailsDialogComponent,
+      { contact, operation }
+    );
   }
 }

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

@@ -45,7 +45,7 @@ export class ContactService {
     return this.backend
       .getContacts(this.registrarService.activeRegistrarId)
       .pipe(
-        tap((contacts) => {
+        tap((contacts = []) => {
           this.contacts = contacts;
         })
       );

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

@@ -1,5 +1,5 @@
 <h3 mat-dialog-title>Contact details</h3>
-<div mat-dialog-content>
+<div mat-dialog-content *ngIf="contact">
   <form (ngSubmit)="saveAndClose($event)">
     <p>
       <mat-form-field class="contact-details__input">
@@ -97,7 +97,7 @@
       >
     </section>
     <mat-dialog-actions>
-      <button mat-button (click)="onClose($event)">Cancel</button>
+      <button mat-button (click)="close()">Cancel</button>
       <button type="submit" mat-button>Save</button>
     </mat-dialog-actions>
   </form>