feat(welcome-page): list contributors on welcome page (#219)

resolves #219
resolves #140

Author: mschwrdtnr

Phonebook.Frontend/src/app/pages/page-information/page-information.component.html

@@ -1,5 +1,5 @@
 <div class="pb-margin-left-right-responsive">
-  <div class="header pb-margin-top-20">
+  <div class="pb-text-align-center pb-margin-top-20">
     <h1 i18n="PageInformationComponent|Title of the page information@@PageInformationComponentTitle">
       Phonebook
     </h1>
@@ -10,9 +10,9 @@ <h1 i18n="PageInformationComponent|Title of the page information@@PageInformatio
   </div>
   <div class="pb-flex pb-center-element">
     <!-- contact and feedback -->
-    <mat-card class="small-card">
-      <mat-card-header>
-        <mat-card-title
+    <mat-card class="small-card pb-text-align-center pb-margin-05">
+      <mat-card-header class="pb-center-element">
+        <mat-card-title class="pb-icon-60"
           ><mat-icon color="primary">sentiment_satisfied_alt</mat-icon>
           <p
             i18n="Page-informationComponent|Subtitle for Contact and Feedback@@PageInformationComponentSubTitleFeedback"
@@ -39,9 +39,9 @@ <h1 i18n="PageInformationComponent|Title of the page information@@PageInformatio
       </mat-card-content>
     </mat-card>
     <!-- cookie notice -->
-    <mat-card class="small-card">
-      <mat-card-header>
-        <mat-card-title
+    <mat-card class="small-card pb-text-align-center pb-margin-05">
+      <mat-card-header class="pb-center-element">
+        <mat-card-title class="pb-icon-60"
           ><mat-icon color="primary">info_outline</mat-icon>
           <p i18n="Page-informationComponent|Subtitle for Cookie@@PageInformationComponentSubTitleCookie">
             Cookie Notice
@@ -56,44 +56,13 @@ <h1 i18n="PageInformationComponent|Title of the page information@@PageInformatio
       </mat-card-content>
     </mat-card>
   </div>
-  <div class="pb-flex pb-center-element">
-    <!-- call for contributors -->
-    <mat-card class="pb-w-100">
-      <mat-card-header>
-        <mat-card-title
-          ><mat-icon color="primary">error_outline</mat-icon>
-          <p i18n="Page-informationComponent|Subtitle Contributes@@PageInformationComponentSubTitleContribute">
-            Call for Contributors!
-          </p></mat-card-title
-        >
-      </mat-card-header>
-
-      <mat-card-content i18n="Page-informationComponent|Text for Contribute@@PageInformationComponentSectionContribute">
-        <span>
-          The Phonebook is an Open Source Project and lives from his active contributors. There are many different
-          topics where you can work on. You can help with solving an
-          <a href="https://github.com/T-Systems-MMS/phonebook/issues" target="_blank">Issue</a>, work out an User-Guide
-          or document new
-          <a href="https://github.com/T-Systems-MMS/phonebook/issues/new/choose" target="_blank">Bugs</a>.
-        </span>
-        <span>
-          You can get in touch with us
-          <a href="https://github.com/T-Systems-MMS/phonebook/" target="_blank">in our official Repository</a> or you
-          take a look at our <a href="https://t-systems-mms.github.io/phonebook/" target="_blank">Documentation</a>.
-          <div><b>To be a part of this community it is not required to have programming skills.</b></div>
-        </span>
-        <div class="pb-margin-top-20">
-          <h2>Thanks to our Contributors!</h2>
-          <div class="contributors-table" [innerHTML]="contributorsHTML"></div>
-        </div>
-      </mat-card-content>
-    </mat-card>
-  </div>
+  <!-- call for contributors -->
+  <app-contributors class="pb-center-element pb-margin-05"></app-contributors>
   <!-- licences -->
   <div class="pb-flex pb-center-element">
-    <mat-card class="pb-w-100">
-      <mat-card-header>
-        <mat-card-title
+    <mat-card class="pb-w-100 pb-text-align-center pb-margin-05">
+      <mat-card-header class="pb-center-element">
+        <mat-card-title class="pb-icon-60"
           ><mat-icon color="primary">attachment_outlined</mat-icon>
           <p i18n="Page-informationComponent|Subtitle for Licenses@@PageInformationComponentSubTitleLicenses">
             Licenses

Phonebook.Frontend/src/app/pages/page-information/page-information.component.scss

@@ -1,44 +1,3 @@
-@import 'mixins';
-@import 'media-queries';
-@import '~@angular/material/theming';
-
-.header {
-  text-align: center;
-}
-
-mat-card {
-  text-align: center;
-  margin: 0.5%;
-
-  mat-card-header {
-    justify-content: center;
-    mat-card-title {
-      line-height: 1;
-    }
-    mat-icon {
-      @include mat-icon-size(60px);
-    }
-  }
-}
-
 .small-card {
   width: 50%;
 }
-
-.contributors-table {
-  ::ng-deep table {
-    display: flex;
-    flex-flow: column wrap;
-  }
-  ::ng-deep tr {
-    display: flex;
-    flex-flow: row wrap;
-    justify-content: center;
-  }
-  ::ng-deep td {
-    width: 110px;
-    a[title] {
-      display: none;
-    }
-  }
-}

Phonebook.Frontend/src/app/pages/page-information/page-information.component.ts

@@ -1,7 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { Environment, RuntimeEnvironmentInterface } from 'src/environments/EnvironmentInterfaces';
 import { runtimeEnvironment } from 'src/environments/runtime-environment';
-import { HttpClient } from '@angular/common/http';
 
 @Component({
   selector: 'app-page-information',
@@ -11,27 +10,9 @@ import { HttpClient } from '@angular/common/http';
 export class PageInformationComponent implements OnInit {
   public isPreview: boolean = true;
   public runtimeEnvironment: RuntimeEnvironmentInterface = runtimeEnvironment;
-  public contributorsHTML: string = '';
-  constructor(private httpClient: HttpClient) {}
+  constructor() {}
 
   public ngOnInit() {
     this.isPreview = runtimeEnvironment.environment === Environment.production ? false : true;
-    this.loadContributors();
-  }
-
-  public loadContributors(): void {
-    const text = 'Contributors could not be loaded.';
-    this.httpClient
-      .get('assets/CONTRIBUTORS.md', {
-        responseType: 'text'
-      })
-      .subscribe(
-        success => {
-          this.contributorsHTML = success;
-        },
-        error => {
-          this.contributorsHTML = 'Contributors could not be loaded.';
-        }
-      );
   }
 }

Phonebook.Frontend/src/app/pages/page-information/page-information.module.ts

@@ -7,6 +7,7 @@ import { RouterModule, Routes } from '@angular/router';
 import { PageInformationComponent } from 'src/app/pages/page-information/page-information.component';
 import { FeedbackDrawerModule } from 'src/app/shared/directives/feedback-drawer/feedback-drawer.module';
 import { MatIconModule } from '@angular/material';
+import { ContributorsModule } from 'src/app/shared/components/contributors/contributors.module';
 
 const routes: Routes = [
   {
@@ -24,7 +25,8 @@ const routes: Routes = [
     MatButtonModule,
     MatListModule,
     FeedbackDrawerModule,
-    MatIconModule
+    MatIconModule,
+    ContributorsModule
   ],
   providers: []
 })

Phonebook.Frontend/src/app/shared/components/contributors/contributors.component.html

@@ -0,0 +1,29 @@
+<mat-card class="pb-text-align-center">
+  <mat-card-header class="pb-center-element">
+    <mat-card-title class="pb-icon-60"
+      ><mat-icon color="primary">error_outline</mat-icon>
+      <p i18n="Page-informationComponent|Subtitle Contributes@@PageInformationComponentSubTitleContribute">
+        Call for Contributors!
+      </p></mat-card-title
+    >
+  </mat-card-header>
+
+  <mat-card-content i18n="Page-informationComponent|Text for Contribute@@PageInformationComponentSectionContribute">
+    <span>
+      The Phonebook is an Open Source Project and lives from his active contributors. There are many different topics
+      where you can work on. You can help with solving an
+      <a href="https://github.com/T-Systems-MMS/phonebook/issues" target="_blank">Issue</a>, work out an User-Guide or
+      document new <a href="https://github.com/T-Systems-MMS/phonebook/issues/new/choose" target="_blank">Bugs</a>.
+    </span>
+    <span>
+      You can get in touch with us
+      <a href="https://github.com/T-Systems-MMS/phonebook/" target="_blank">in our official Repository</a> or you take a
+      look at our <a href="https://t-systems-mms.github.io/phonebook/" target="_blank">Documentation</a>.
+      <div><b>To be a part of this community it is not required to have programming skills.</b></div>
+    </span>
+    <div *ngIf="contributorsLoaded" class="pb-margin-top-20">
+      <h2>Thanks to our Contributors!</h2>
+      <div class="contributors-table" [innerHTML]="contributorsHTML"></div>
+    </div>
+  </mat-card-content>
+</mat-card>

Phonebook.Frontend/src/app/shared/components/contributors/contributors.component.scss

@@ -0,0 +1,15 @@
+.contributors-table {
+  ::ng-deep table {
+    width: 100%;
+    table-layout: fixed;
+  }
+  ::ng-deep tr {
+    display: inline;
+  }
+  ::ng-deep td {
+    display: inline-block;
+    a[title] {
+      display: none;
+    }
+  }
+}

Phonebook.Frontend/src/app/shared/components/contributors/contributors.component.spec.ts

@@ -0,0 +1,28 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ContributorsComponent } from './contributors.component';
+import { MatIconModule, MatCardModule, MatSnackBarModule } from '@angular/material';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { I18n } from '@ngx-translate/i18n-polyfill';
+
+describe('ContributorsComponent', () => {
+  let component: ContributorsComponent;
+  let fixture: ComponentFixture<ContributorsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ContributorsComponent],
+      imports: [HttpClientTestingModule, MatIconModule, MatCardModule, MatSnackBarModule],
+      providers: [{ provide: I18n }]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ContributorsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

Phonebook.Frontend/src/app/shared/components/contributors/contributors.component.ts

@@ -0,0 +1,46 @@
+import { Component, OnInit } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { I18n } from '@ngx-translate/i18n-polyfill';
+import { MatSnackBar } from '@angular/material/snack-bar';
+
+@Component({
+  selector: 'app-contributors',
+  templateUrl: './contributors.component.html',
+  styleUrls: ['./contributors.component.scss']
+})
+export class ContributorsComponent implements OnInit {
+  public contributorsLoaded: boolean = false;
+  public contributorsHTML: string = '';
+  constructor(private httpClient: HttpClient, private i18n: I18n, private snackBar: MatSnackBar) {}
+
+  public ngOnInit() {
+    this.loadContributors();
+  }
+
+  public loadContributors(): void {
+    this.httpClient
+      .get('assets/CONTRIBUTORS.md', {
+        responseType: 'text'
+      })
+      .subscribe(
+        success => {
+          this.contributorsLoaded = true;
+          this.contributorsHTML = success;
+        },
+        error => {
+          this.snackBar.open(
+            this.i18n({
+              value: 'Contributors could not be loaded.',
+              description: 'Contributors error Message',
+              id: 'ContributorsErrorMessage',
+              meaning: 'ContributorsErrorMessage'
+            }),
+            '',
+            {
+              duration: 5000
+            }
+          );
+        }
+      );
+  }
+}

Phonebook.Frontend/src/app/shared/components/contributors/contributors.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ContributorsComponent } from './contributors.component';
+import { MatIconModule, MatCardModule, MatSnackBarModule } from '@angular/material';
+
+@NgModule({
+  declarations: [ContributorsComponent],
+  imports: [CommonModule, MatIconModule, MatCardModule, MatSnackBarModule],
+  exports: [ContributorsComponent]
+})
+export class ContributorsModule {}

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

@@ -4,10 +4,11 @@ import { BugReportConsentComponent } from 'src/app/shared/dialogs/bug-report-con
 import { DisplayNotificationDialog } from 'src/app/shared/dialogs/display-notification-dialog/display-notification.dialog';
 import { ReleaseNotificationDialog } from 'src/app/shared/dialogs/release-notification-dialog/release-notification.dialog';
 import { MaterialModule } from 'src/app/shared/material.module';
+import { ContributorsModule } from 'src/app/shared/components/contributors/contributors.module';
 
 @NgModule({
   declarations: [ReleaseNotificationDialog, DisplayNotificationDialog, BugReportConsentComponent],
-  imports: [RouterModule, MaterialModule],
+  imports: [RouterModule, MaterialModule, ContributorsModule],
   exports: [ReleaseNotificationDialog, DisplayNotificationDialog, BugReportConsentComponent],
   entryComponents: [ReleaseNotificationDialog, DisplayNotificationDialog, BugReportConsentComponent]
 })