Merge branch '61-creator-home-screen-room-logic-room' into 'master'

Resolve "creator home screen - room logic (room)"

Closes #61

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

src/app/creator-home-screen/creator-home-screen.component.ts

 import { Component, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material';
 import { RoomCreationComponent } from '../room-creation/room-creation.component';
-import { RoomListComponent } from '../room-list/room-list.component';
-import { Room } from '../room';
 
 @Component({
   selector: 'app-creator-home-screen',

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">
+    <mat-progress-spinner *ngIf="isLoading" mode="indeterminate"></mat-progress-spinner>
+    <mat-card *ngIf="room && !deleteDialog">
       <mat-card-header>
         <mat-card-title><h3 class="subheading-2">{{ room.name }}</h3></mat-card-title>
         <mat-card-subtitle>{{ room.id }}</mat-card-subtitle>
@@ -19,17 +20,30 @@
         <button mat-button color="primary" matTooltip="See contents">
           Contents
         </button>
-        <button mat-button color="primary" matTooltip="See room comments" routerLink="/creator/room/{{room.id}}/comments">
+        <button mat-button color="primary" matTooltip="See room comments"
+                routerLink="/creator/room/{{room.id}}/comments">
           Comments
         </button>
-        <button mat-button color="warn" matTooltip="Delete selected room">
+        <button mat-button color="warn" (click)="showDeletionDialog()">
           Delete room
         </button>
-        <button mat-button color="primary" matTooltip="Go back to last page" (click)="goBack()">
+        <button mat-button color="primary" (click)="goBack()">
           Go back
         </button>
       </mat-card-actions>
     </mat-card>
-    <div *ngIf="!isLoading && !room">Error</div>
+    <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

@@ -4,6 +4,7 @@ import { ActivatedRoute } from '@angular/router';
 import { RoomComponent } from '../room/room.component';
 import { Room } from '../room';
 import { Location } from '@angular/common';
+import { NotificationService } from '../notification.service';
 
 @Component({
   selector: 'app-creator-room',
@@ -12,11 +13,13 @@ import { Location } from '@angular/common';
 })
 export class CreatorRoomComponent extends RoomComponent implements OnInit {
   room: Room;
+  deleteDialog = false;
 
   constructor(protected roomService: RoomService,
+              protected notification: NotificationService,
               protected route: ActivatedRoute,
-              private location: Location) {
-    super(roomService, route);
+              protected location: Location) {
+    super(roomService, route, location);
   }
 
   ngOnInit() {
@@ -29,4 +32,17 @@ export class CreatorRoomComponent extends RoomComponent implements OnInit {
     this.location.back();
   }
 
+  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);
+  }
 }

src/app/login/login.component.html

@@ -3,17 +3,16 @@
   <mat-form-field class="input-block">
     <input matInput #userEmail placeholder="E-mail" [formControl]="usernameFormControl" [errorStateMatcher]="matcher"
            name="username"/>
-    <mat-error *ngIf="usernameFormControl.hasError('email') && !usernameFormControl.hasError('required')">Please enter a <strong>valid</strong> e-mail address.
+    <mat-error *ngIf="usernameFormControl.hasError('email') && !usernameFormControl.hasError('required')">Please enter a
+      <strong>valid</strong> e-mail address.
     </mat-error>
     <mat-error *ngIf="usernameFormControl.hasError('required')">E-mail is <strong>required</strong>.</mat-error>
   </mat-form-field>
-
   <mat-form-field class="input-block">
     <input matInput #userPassword type="password" placeholder="Password" [formControl]="passwordFormControl"
            [errorStateMatcher]="matcher" name="password"/>
     <mat-error *ngIf="passwordFormControl.hasError('required')">Password is <strong>required</strong>.</mat-error>
   </mat-form-field>
-
   <button mat-raised-button color="primary" type="submit">Login</button>
   <button mat-raised-button *ngIf="role === UserRole.PARTICIPANT" (click)="guestLogin()">Login as
     guest

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

 <form (ngSubmit)="addRoom(longRoomName.value, shortRoomName.value)">
   <div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="10px">
     <mat-form-field>
-      <input matInput #longRoomName class="input-block" type="text" placeholder="Name" maxlength="50"
+      <input (keypress)="resetEmptyInputs()" matInput #longRoomName class="input-block" type="text" placeholder="Name"
+             maxlength="50"
              [(ngModel)]="longName"/>
-      <mat-hint align="start"><strong>Max. letters / signs:</strong></mat-hint>
-      <mat-hint align="end">{{longRoomName.value.length}} / 50</mat-hint>
+      <mat-hint align="start" *ngIf="!emptyInputs"><strong>Max. letters / signs:</strong></mat-hint>
+      <mat-hint align="end" *ngIf="!emptyInputs">{{longRoomName.value.length}} / 50</mat-hint>
+      <mat-hint align="start" *ngIf="emptyInputs"><strong>Input is required</strong></mat-hint>
       <button mat-button *ngIf="longName" matSuffix mat-icon-button aria-label="Clear" (click)="longName=''">
         <mat-icon>close</mat-icon>
       </button>
     </mat-form-field>
-
     <mat-form-field>
-      <input matInput #shortRoomName class="input-block" type="text" placeholder="Short name" maxlength="8"
+      <input (keypress)="resetEmptyInputs()" matInput #shortRoomName class="input-block" type="text"
+             placeholder="Short name" maxlength="8"
              [(ngModel)]="shortName"/>
-      <mat-hint align="start"><strong>Max. letters / signs:</strong></mat-hint>
-      <mat-hint align="end">{{shortRoomName.value.length}} / 8</mat-hint>
+      <mat-hint align="start" *ngIf="!emptyInputs"><strong>Max. letters / signs:</strong></mat-hint>
+      <mat-hint align="end" *ngIf="!emptyInputs">{{shortRoomName.value.length}} / 8</mat-hint>
+      <mat-hint align="start" *ngIf="emptyInputs"><strong>Input is required</strong></mat-hint>
       <button mat-button *ngIf="shortName" matSuffix mat-icon-button aria-label="Clear" (click)="shortName=''">
         <mat-icon>close</mat-icon>
       </button>
     </mat-form-field>
-    <button mat-raised-button color="primary" type="submit">Create room</button>
+    <button mat-raised-button color="primary" type="submit">Create room
+    </button>
   </div>
 </form>

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

@@ -13,6 +13,7 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
 export class RoomCreationComponent implements OnInit {
   longName: string;
   shortName: string;
+  emptyInputs = false;
 
   constructor(private roomService: RoomService,
               private router: Router,
@@ -28,10 +29,15 @@ export class RoomCreationComponent implements OnInit {
   ngOnInit() {
   }
 
+  resetEmptyInputs(): void {
+    this.emptyInputs = false;
+  }
+
   addRoom(longRoomName: string, shortRoomName: string) {
     longRoomName = longRoomName.trim();
     shortRoomName = shortRoomName.trim();
     if (!longRoomName || !shortRoomName) {
+      this.emptyInputs = true;
       return;
     }
     this.roomService.addRoom({ name: longRoomName, abbreviation: shortRoomName } as Room)

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

 import { Component, OnInit } from '@angular/core';
 import { Room } from '../room';
 import { RoomService } from '../room.service';
-import { AuthenticationService} from '../authentication.service';
-import {UserRole} from '../user-roles.enum';
+import { AuthenticationService } from '../authentication.service';
+import { UserRole } from '../user-roles.enum';
 
 @Component({
   selector: 'app-room-list',

src/app/room.service.ts

@@ -37,4 +37,14 @@ export class RoomService extends ErrorHandlingService {
     catchError(this.handleError<Room>(`getRoom id=${id}`))
   );
   }
+
+  deleteRoom (room: Room | string): Observable<Room> {
+    const id = typeof room === 'string' ? room : room.id;
+    const url = `${this.roomsUrl}/${id}`;
+
+    return this.http.delete<Room>(url, httpOptions).pipe(
+      tap(_ => ''),
+      catchError(this.handleError<Room>('deleteRoom'))
+    );
+  }
 }

src/app/room/room.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { Room } from '../room';
 import { RoomService } from '../room.service';
 import { ActivatedRoute } from '@angular/router';
+import { Location } from '@angular/common';
 
 @Component({
   selector: 'app-room',
@@ -10,9 +11,11 @@ import { ActivatedRoute } from '@angular/router';
 })
 export class RoomComponent implements OnInit {
   room: Room = null;
+  isLoading = true;
 
   constructor(protected roomService: RoomService,
-              protected route: ActivatedRoute) {
+              protected route: ActivatedRoute,
+              protected location: Location) {
   }
 
   ngOnInit() {
@@ -22,6 +25,14 @@ export class RoomComponent implements OnInit {
   }
 
   getRoom(id: string): void {
-    this.roomService.getRoom(id).subscribe(room => this.room = room);
+    this.roomService.getRoom(id).subscribe(room => {
+      this.room = room;
+      this.isLoading = false;
+    });
+  }
+
+  delete(room: Room): void {
+    this.roomService.deleteRoom(room).subscribe();
+    this.location.back();
   }
 }