Added Footer Support

The Dialog Template can now thake an component and use it as its Footer.

Support for the Notification Dialog has already been added

Fixes #647

Phonebook.Frontend/src/app/app.module.ts

@@ -54,6 +54,7 @@ import { SearchComponent } from './shared/components/search/search.component';
 import { DialogsComponent } from './dialogs/dialogs.component';
 import { DialogViewComponent } from './dialogs/dialog-view/dialog-view.component';
 import { HttpRedirectToLogin } from 'src/app/shared/interceptors/HttpRedirectToLogin';
+import { DialogFooterComponent } from './dialogs/dialog-footer/dialog-footer.component';
 
 declare const require;
 
@@ -66,6 +67,7 @@ declare const require;
     OnlineBarComponent,
     DialogsComponent,
     DialogViewComponent,
+    DialogFooterComponent,
   ],
   imports: [
     BrowserModule,

Phonebook.Frontend/src/app/dialogs/dialog-footer/dialog-footer.component.html

@@ -0,0 +1 @@
+<template #footerContainer></template>

Phonebook.Frontend/src/app/dialogs/dialog-footer/dialog-footer.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DialogFooterComponent } from './dialog-footer.component';
+
+describe('DialogFooterComponent', () => {
+  let component: DialogFooterComponent;
+  let fixture: ComponentFixture<DialogFooterComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DialogFooterComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DialogFooterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

Phonebook.Frontend/src/app/dialogs/dialog-footer/dialog-footer.component.ts

@@ -0,0 +1,39 @@
+import {
+  Component,
+  OnInit,
+  Input,
+  ViewChild,
+  ViewContainerRef,
+  ComponentRef,
+  ComponentFactoryResolver,
+  ChangeDetectorRef,
+  ComponentFactory,
+} from '@angular/core';
+import { DialogItem } from 'src/app/dialogs/dialog-item';
+
+@Component({
+  selector: 'app-dialog-footer',
+  templateUrl: './dialog-footer.component.html',
+  styleUrls: ['./dialog-footer.component.scss'],
+})
+export class DialogFooterComponent {
+  @Input() public footer: DialogItem;
+  @ViewChild('footerContainer', { read: ViewContainerRef }) container;
+  public componentRef: ComponentRef<any>;
+
+  constructor(private resolver: ComponentFactoryResolver, private cdRef: ChangeDetectorRef) {}
+  ngAfterViewInit(): void {
+    //Called after ngAfterContentInit when the component's view has been initialized. Applies to components only.
+    //Add 'implements AfterViewInit' to the class.
+    const factory: ComponentFactory<any> = this.resolver.resolveComponentFactory(
+      this.footer.component
+    );
+    this.componentRef = this.container.createComponent(factory);
+    this.cdRef.detectChanges();
+  }
+  public createComponent() {}
+
+  ngOnDestroy() {
+    this.componentRef.destroy();
+  }
+}

Phonebook.Frontend/src/app/dialogs/dialog-view/dialog-view.component.ts

@@ -17,11 +17,11 @@ import { DialogItem } from 'src/app/dialogs/dialog-item';
   styleUrls: ['./dialog-view.component.scss'],
 })
 export class DialogViewComponent {
-  @Input() title: string;
-  @Input() content: DialogItem;
-  @Input() data: any;
+  @Input() public title: string;
+  @Input() public content: DialogItem;
+  @Input() public data: any;
   @ViewChild('componentContainer', { read: ViewContainerRef }) container;
-  componentRef: ComponentRef<any>;
+  public componentRef: ComponentRef<any>;
 
   constructor(private resolver: ComponentFactoryResolver, private cdRef: ChangeDetectorRef) {}
   ngAfterViewInit(): void {

Phonebook.Frontend/src/app/dialogs/dialogs.component.html

@@ -1,3 +1,6 @@
+<button style="float: right;" mat-button mat-dialog-close cdkFocusInitial>
+  <span i18n="GeneralCloseButton|Button for closing something@@GeneralCloseButton">Close</span>
+</button>
 <h1 mat-dialog-title>
   {{ title }}
 </h1>
@@ -6,11 +9,9 @@ <h1 mat-dialog-title>
     #appdialogview
     [title]="title"
     [content]="content"
-    [data]="data"
+    [data]="componentData"
   ></app-dialog-view>
 </mat-dialog-content>
-<mat-dialog-actions align="end" class="mat-dialog-actions">
-  <button mat-button mat-dialog-close cdkFocusInitial>
-    <span i18n="GeneralCloseButton|Button for closing something@@GeneralCloseButton">Close</span>
-  </button>
+<mat-dialog-actions class="mat-dialog-actions">
+  <app-dialog-footer #appdialogfooter [footer]="footer"> </app-dialog-footer>
 </mat-dialog-actions>

Phonebook.Frontend/src/app/dialogs/dialogs.component.ts

@@ -11,12 +11,14 @@ import { DialogItem } from 'src/app/dialogs/dialog-item';
 export class DialogsComponent implements OnInit {
   public title: string;
   public content: DialogItem;
-  public data: any;
+  public componentData: any;
+  public footer: HtmlParser;
   @ViewChild('appdialogview', { read: ViewContainerRef }) container;
   constructor(public dialogRef: MatDialogRef<DialogsComponent>, @Inject(MAT_DIALOG_DATA) matData) {
     this.content = matData.content;
     this.title = matData.title;
-    this.data = matData.inputData;
+    this.componentData = matData.inputData;
+    this.footer = matData.footer;
   }
 
   public close() {

Phonebook.Frontend/src/app/services/dialog.service.ts

@@ -15,6 +15,7 @@ import { IeWarningComponent } from 'src/app/shared/dialogs/ie-warning/ie-warning
 import { IncorrectUserInformationComponent } from 'src/app/shared/dialogs/user-information/incorrect-user-information.component';
 import { config } from 'rxjs';
 import { TableSettingsDialog } from 'src/app/modules/table/dialogs/table-settings-dialog/table-settings.dialog';
+import { NotificationDialogFooterComponent } from 'src/app/shared/dialogs/display-notification-dialog/notification-dialog-footer/notification-dialog-footer.component';
 @Injectable({
   providedIn: 'root',
 })
@@ -53,6 +54,7 @@ export class DialogService {
         dialogConfig.data = {
           title: $localize`:Title of the Notification Dialog@@NotificationDialogTitle:Welcome to the new Phonebook!`,
           content: new DialogItem(DisplayNotificationDialog),
+          footer: new DialogItem(NotificationDialogFooterComponent),
         };
         this.dialog.open(DialogsComponent, dialogConfig);
         break;

Phonebook.Frontend/src/app/shared/dialogs/dialogs.module.ts

@@ -9,6 +9,7 @@ import { ContributorsModule } from 'src/app/shared/components/contributors/contr
 import { CommonModule } from '@angular/common';
 import { IncorrectUserInformationComponent } from 'src/app/shared/dialogs/user-information/incorrect-user-information.component';
 import { UserModule } from 'src/app/shared/components/user/user.module';
+import { NotificationDialogFooterComponent } from './display-notification-dialog/notification-dialog-footer/notification-dialog-footer.component';
 
 @NgModule({
   declarations: [
@@ -17,6 +18,7 @@ import { UserModule } from 'src/app/shared/components/user/user.module';
     DisplayNotificationDialog,
     BugReportConsentComponent,
     IncorrectUserInformationComponent,
+    NotificationDialogFooterComponent,
   ],
   imports: [CommonModule, RouterModule, MaterialModule, ContributorsModule, UserModule],
   exports: [

Phonebook.Frontend/src/app/shared/dialogs/display-notification-dialog/display-notification.dialog.html

@@ -122,22 +122,3 @@
 <app-contributors
   class="border-1 pb-center-element pb-border-color-primary pb-margin-05"
 ></app-contributors>
-
-<div class="spacer"></div>
-<mat-dialog-actions>
-  <span i18n="Display-notificationDialog|Cookie notice@@WelcomeCookieNotice">
-    This site uses cookies to ensure the basic functionality of the app.
-  </span>
-  <span
-    i18n="Display-notificationDialog|Annoyed by cookies notice@@PageInformationNewUrlNoCookiesText"
-  >
-    You deactivated cookies and keep getting those dialogs?
-  </span>
-  <button
-    i18n="Display-notificationDialog|Deactivate Startup Dialogs@@PageInformationNewUrlNoCookiesButton"
-    mat-button
-    (click)="skipStartDialogs()"
-  >
-    Deactivate startup-dialogs!
-  </button>
-</mat-dialog-actions>

Phonebook.Frontend/src/app/shared/dialogs/display-notification-dialog/display-notification.dialog.ts

@@ -22,10 +22,6 @@ export class DisplayNotificationDialog implements OnInit, OnDestroy {
   ) {
     store.dispatch(new SetDisplayedNotificationVersion(DisplayNotificationDialog.version));
   }
-  public skipStartDialogs() {
-    this.router.navigateByUrl('/?skip_dialog=true');
-    this.dialogRef.close();
-  }
   public ngOnInit() {}
 
   public ngOnDestroy() {}

Phonebook.Frontend/src/app/shared/dialogs/display-notification-dialog/notification-dialog-footer/notification-dialog-footer.component.html

@@ -0,0 +1,16 @@
+<span i18n="Display-notificationDialog|Cookie notice@@WelcomeCookieNotice">
+  This site uses cookies to ensure the basic functionality of the app.
+</span>
+<span
+  i18n="Display-notificationDialog|Annoyed by cookies notice@@PageInformationNewUrlNoCookiesText"
+>
+  You deactivated cookies and keep getting those dialogs?
+</span>
+<button
+  i18n="Display-notificationDialog|Deactivate Startup Dialogs@@PageInformationNewUrlNoCookiesButton"
+  mat-button
+  mat-dialog-close
+  (click)="skipStartDialogs()"
+>
+  Deactivate startup-dialogs!
+</button>

Phonebook.Frontend/src/app/shared/dialogs/display-notification-dialog/notification-dialog-footer/notification-dialog-footer.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NotificationDialogFooterComponent } from './notification-dialog-footer.component';
+
+describe('NotificationDialogFooterComponent', () => {
+  let component: NotificationDialogFooterComponent;
+  let fixture: ComponentFixture<NotificationDialogFooterComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NotificationDialogFooterComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NotificationDialogFooterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

Phonebook.Frontend/src/app/shared/dialogs/display-notification-dialog/notification-dialog-footer/notification-dialog-footer.component.ts

@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-notification-dialog-footer',
+  templateUrl: './notification-dialog-footer.component.html',
+  styleUrls: ['./notification-dialog-footer.component.scss'],
+})
+export class NotificationDialogFooterComponent implements OnInit {
+  constructor(private router: Router) {}
+
+  public ngOnInit(): void {}
+  public skipStartDialogs() {
+    this.router.navigateByUrl('/?skip_dialog=true');
+  }
+}