Add CollectionAddCOmponent(dialog) as a test

src/app/app.module.ts

@@ -97,7 +97,7 @@ import { FooterComponent } from './components/fragments/footer/footer.component'
 import { FooterLoginDialogComponent } from './components/dialogs/footer-login-dialog/footer-login-dialog.component';
 import { FooterImprintComponent } from './components/pages/footer-imprint/footer-imprint.component';
 import { CollectionSelectComponent } from './components/dialogs/collection-select/collection-select.component';
-import { AddCollectionComponent } from './components/dialogs/add-collection/add-collection.component';
+import { CollectionAddComponent } from './components/dialogs/collection-add/collection-add.component';
 
 export function dialogClose(dialogResult: any) {
 }
@@ -147,7 +147,8 @@ export function dialogClose(dialogResult: any) {
     FooterComponent,
     FooterLoginDialogComponent,
     FooterImprintComponent,
-    CollectionSelectComponent
+    CollectionSelectComponent,
+    CollectionAddComponent
   ],
   entryComponents: [
     RegisterComponent,
@@ -165,7 +166,8 @@ export function dialogClose(dialogResult: any) {
     MarkdownHelpDialogComponent,
     GenericDataDialogComponent,
     FooterLoginDialogComponent,
-    CollectionSelectComponent
+    CollectionSelectComponent,
+    CollectionAddComponent
   ],
   imports: [
     AppRoutingModule,

src/app/components/dialogs/collection-add/collection-add.component.html

+<div>
+  <div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="10px">
+    <mat-form-field>
+      <input (keypress)="resetEmptyInputs()" matInput #nameText class="input-block" type="text"
+             placeholder="Collection name" maxlength="50" [(ngModel)]="name" name="nameText"/>
+      <mat-hint align="start" *ngIf="!emptyInputs"><strong>Max. letters / signs:</strong></mat-hint>
+      <mat-hint align="end" *ngIf="!emptyInputs">{{nameText.value.length}} / 50</mat-hint>
+      <mat-hint align="start" *ngIf="emptyInputs"><strong>Input is required</strong></mat-hint>
+      <button mat-button *ngIf="name" matSuffix mat-icon-button aria-label="Clear" (click)="name=''">
+        <mat-icon>close</mat-icon>
+      </button>
+    </mat-form-field>
+  </div>
+  <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="10px">
+    <button (click)="dialogRef.close('abort')" mat-button color="primary">
+      Leave
+    </button>
+    <button (click)="dialogRef.close('edit')" mat-raised-button color="primary">
+      Create
+    </button>
+  </div>
+</div>

src/app/components/dialogs/collection-add/collection-add.component.spec.ts

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

src/app/components/dialogs/collection-add/collection-add.component.ts

+import { Component, Inject, OnInit } from '@angular/core';
+import { RoomService } from '../../../services/http/room.service';
+import { Router } from '@angular/router';
+import { NotificationService } from '../../../services/util/notification.service';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
+
+
+@Component({
+  selector: 'app-collection-add',
+  templateUrl: './collection-add.component.html',
+  styleUrls: ['./collection-add.component.scss']
+})
+export class CollectionAddComponent implements OnInit {
+
+  name: string;
+  emptyInputs = false;
+
+  constructor(private roomService: RoomService,
+              private router: Router,
+              private notification: NotificationService,
+              public dialogRef: MatDialogRef<CollectionAddComponent>,
+              @Inject(MAT_DIALOG_DATA) public data: any) {
+  }
+
+  onNoClick(): void {
+    this.dialogRef.close();
+  }
+
+  ngOnInit() {
+  }
+
+  resetEmptyInputs(): void {
+    this.emptyInputs = false;
+  }
+}

src/app/components/dialogs/collection-select/collection-select.component.html

 <form>
   <div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="10px">
-    <div fxLayout="row" fxLayoutAlign="center">
-      <p>
+    <h3>
       Please select a collection or create a new one!
-      </p>
-      <button mat-raised-button color="primary" type="submit">
+    </h3>
+    <div fxLayout="row" fxLayoutAlign="center">
+      <mat-form-field>
+        <input (keypress)="resetEmptyInputs()" matInput #nameText class="input-block" type="text"
+               placeholder="Collection name" maxlength="50" [(ngModel)]="name" name="nameText"/>
+        <mat-hint align="start" *ngIf="!emptyInputs"><strong>Max. letters / signs:</strong></mat-hint>
+        <mat-hint align="end" *ngIf="!emptyInputs">{{nameText.value.length}} / 50</mat-hint>
+        <mat-hint align="start" *ngIf="emptyInputs"><strong>Input is required</strong></mat-hint>
+        <button mat-button *ngIf="name" matSuffix mat-icon-button aria-label="Clear" (click)="name=''">
+          <mat-icon>close</mat-icon>
+        </button>
+      </mat-form-field>
+      <button mat-raised-button color="primary">
         <mat-icon>note_add</mat-icon>
       </button>
     </div>
@@ -15,5 +25,8 @@
         </mat-list-option>
       </mat-selection-list>
     </div>
+    <button mat-raised-button color="primary" (click)="onNoClick()">
+      Done
+    </button>
   </div>
 </form>

src/app/components/dialogs/collection-select/collection-select.component.ts

@@ -32,6 +32,8 @@ export class CollectionSelectComponent implements OnInit {
   ngOnInit() {
   }
 
+
+
   resetEmptyInputs(): void {
     this.emptyInputs = false;
   }