Merge branch '87-follow-up-from-resolve-creator-home-screen-room-logic-room' into 'master'

Resolve "Follow-up from "Resolve "creator home screen - room logic (room)"""

Closes #87

See merge request swtp-block-ws17/arsnova-angular-frontend!76

src/app/app.module.ts

@@ -72,6 +72,7 @@ import { ContentListComponent } from './content-list/content-list.component';
 import { ContentService } from './content.service';
 import { ContentAnswersListComponent } from './content-answers-list/content-answers-list.component';
 import { ContentAnswerService } from './content-answer.service';
+import { RoomDeletionComponent } from './room-deletion/room-deletion.component';
 
 @NgModule({
   declarations: [
@@ -97,12 +98,14 @@ import { ContentAnswerService } from './content-answer.service';
     CreatorRoomComponent,
     ContentDetailComponent,
     ContentListComponent,
-    ContentAnswersListComponent
+    ContentAnswersListComponent,
+    RoomDeletionComponent
   ],
   entryComponents: [
     RegisterComponent,
     PasswordResetComponent,
-    RoomCreationComponent
+    RoomCreationComponent,
+    RoomDeletionComponent
   ],
   imports: [
     AppRoutingModule,

src/app/creator-room/creator-room.component.html

 <div fxLayout="column" fxLayoutAlign="start" fxLayoutGap="20px" fxFill>
   <div fxLayout="row" fxLayoutAlign="center">
-    <mat-card *ngIf="room && !modify && !deleteDialog" class="input-form">
+    <mat-card *ngIf="room && !modify" class="input-form">
       <mat-card-header>
         <mat-card-title>
           <h3 class="subheading-2">{{ room.name }}</h3>
@@ -36,7 +36,7 @@
         <button *ngIf="modify" (click)="updateRoom(roomName.valueOf(), roomShortID.valueOf(), roomDescription.valueOf())" mat-button color="primary" matTooltip="Update room's details">
           Update room
         </button>
-        <button mat-button color="warn" (click)="showDeletionDialog()">
+        <button mat-button color="warn" (click)="openDeletionRoomDialog()">
           Delete room
         </button>
         <button mat-button color="primary" (click)="goBack()">
@@ -70,18 +70,6 @@
         </button>
       </mat-card-actions>
     </mat-card>
-    <mat-card *ngIf="deleteDialog">
-      <mat-card-header><h3>Do you really want to delete this room?<br>This action can not be undone.</h3>
-      </mat-card-header>
-      <mat-card-content>
-        <button mat-raised-button color="warn" (click)="deleteRoom(room)">
-          Delete room
-        </button>
-        <button mat-raised-button color="primary" (click)="hideDeletionDialog()">
-          Leave
-        </button>
-      </mat-card-content>
-    </mat-card>
     <div *ngIf="!isLoading && !room">Error: room could not be found!</div>
   </div>
 </div>

src/app/creator-room/creator-room.component.ts

@@ -5,6 +5,8 @@ import { RoomComponent } from '../room/room.component';
 import { Room } from '../room';
 import { Location } from '@angular/common';
 import { NotificationService } from '../notification.service';
+import { MatDialog } from '@angular/material';
+import { RoomDeletionComponent } from '../room-deletion/room-deletion.component';
 
 @Component({
   selector: 'app-creator-room',
@@ -14,7 +16,6 @@ import { NotificationService } from '../notification.service';
 export class CreatorRoomComponent extends RoomComponent implements OnInit {
   room: Room;
   modify = false;
-  deleteDialog = false;
   roomName: string;
   roomShortId: string;
   roomDescription: string;
@@ -22,6 +23,7 @@ export class CreatorRoomComponent extends RoomComponent implements OnInit {
   constructor(protected roomService: RoomService,
               protected notification: NotificationService,
               protected route: ActivatedRoute,
+              public dialog: MatDialog,
               protected location: Location) {
     super(roomService, route, location);
   }
@@ -60,17 +62,27 @@ export class CreatorRoomComponent extends RoomComponent implements OnInit {
         .subscribe(() => this.goBack());
     }
   }
-  showDeletionDialog(): void {
-    this.deleteDialog = true;
-  }
-
-  hideDeletionDialog(): void {
-    this.deleteDialog = false;
-  }
 
   deleteRoom(room: Room): void {
     const msg = room.name + ' deleted';
     this.notification.show(msg);
     this.delete(room);
   }
+
+  confirmDeletion(dialogAnswer: string): void {
+    if (dialogAnswer === 'delete') {
+      this.deleteRoom(this.room);
+    }
+  }
+
+  openDeletionRoomDialog(): void {
+    const dialogRef = this.dialog.open(RoomDeletionComponent, {
+      width: '400px'
+    });
+    dialogRef.componentInstance.room = this.room;
+    dialogRef.afterClosed()
+      .subscribe(result => {
+        this.confirmDeletion(result);
+      });
+  }
 }

src/app/room-deletion/room-deletion.component.html

+<h3>Are you sure?</h3>
+<p>Do you really want to delete room <strong>{{room.name}}</strong>? This action can not be undone.</p>
+<div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="10px">
+  <button mat-raised-button color="warn" (click)="dialogRef.close('delete')">
+    Delete room
+  </button>
+  <button mat-raised-button color="primary" (click)="onNoClick()">
+    Leave
+  </button>
+</div>

src/app/room-deletion/room-deletion.component.spec.ts

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

src/app/room-deletion/room-deletion.component.ts

+import { Component, Inject, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
+import { NotificationService } from '../notification.service';
+import { RoomCreationComponent } from '../room-creation/room-creation.component';
+import { RoomService } from '../room.service';
+import { Room } from '../room';
+
+@Component({
+  selector: 'app-room-deletion',
+  templateUrl: './room-deletion.component.html',
+  styleUrls: ['./room-deletion.component.scss']
+})
+export class RoomDeletionComponent implements OnInit {
+  room: Room;
+
+  constructor(private roomService: RoomService,
+              private router: Router,
+              private notification: NotificationService,
+              public dialogRef: MatDialogRef<RoomCreationComponent>,
+              @Inject(MAT_DIALOG_DATA) public data: any) {
+  }
+
+  onNoClick(): void {
+    this.dialogRef.close();
+  }
+
+  ngOnInit() {
+  }
+}