Add updateRoom to modify room's properties

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

@@ -3,36 +3,19 @@
     <mat-card *ngIf="room && !deleteDialog && !modify">
       <mat-card-header>
         <mat-card-title>
-          <h3 *ngIf="!modify" class="subheading-2">{{ room.name }}</h3>
-          <mat-form-field *ngIf="modify">
-            <textarea #roomName matInput matTextareaAutosize matAutosizeMinRows="1"
-                      matAutosizeMaxRows="2">{{room.name}}</textarea>
-          </mat-form-field>
+          <h3 class="subheading-2">{{ room.name }}</h3>
         </mat-card-title>
         <mat-card-subtitle>
-          <div *ngIf="!modify">
+          <div>
             {{ room.shortId }}
           </div>
-          <div *ngIf="modify">
-            <mat-form-field>
-            <textarea #roomShortID matInput matTextareaAutosize matAutosizeMinRows="1"
-                      matAutosizeMaxRows="5">{{room.shortId}}</textarea>
-            </mat-form-field>
-          </div>
         </mat-card-subtitle>
       </mat-card-header>
       <mat-divider></mat-divider>
       <mat-card-content>
-        <p *ngIf="!modify">
+        <p>
           {{ room.description }}
         </p>
-        <p *ngIf="modify">
-          <mat-form-field>
-            <textarea #roomDescription matInput matTextareaAutosize matAutosizeMinRows="2"
-                      matAutosizeMaxRows="5">{{room.description}}</textarea>
-          </mat-form-field>
-
-        </p>
       </mat-card-content>
       <mat-divider></mat-divider>
       <mat-card-actions>
@@ -46,7 +29,8 @@
                 routerLink="/creator/room/{{room.id}}/comments">
           Comments
         </button>
-        <button *ngIf="!modify" (click)="enableModifications()" mat-button color="primary" matTooltip="Modify room's details">
+        <button *ngIf="!modify" (click)="enableModifications()" mat-button color="primary"
+                matTooltip="Modify room's details">
           Modify room
         </button>
         <button *ngIf="modify" (click)="updateRoom(roomName.valueOf(), roomShortID.valueOf(), roomDescription.valueOf())" mat-button color="primary" matTooltip="Update room's details">
@@ -60,6 +44,32 @@
         </button>
       </mat-card-actions>
     </mat-card>
+    <mat-card *ngIf="modify && room">
+      <mat-card-header>
+        <h3>Modify properties</h3>
+      </mat-card-header>
+      <mat-card-content fxLayout="column">
+        <mat-form-field *ngIf="modify">
+          <input [(ngModel)]="room.name" #roomName matInput/>
+        </mat-form-field>
+        <mat-form-field>
+          <input [(ngModel)]="room.shortId" #roomShortID matInput/>
+        </mat-form-field>
+        <mat-form-field>
+            <textarea [(ngModel)]="room.description" #roomDescription matInput matTextareaAutosize
+                      matAutosizeMinRows="2"
+                      matAutosizeMaxRows="5"></textarea>
+        </mat-form-field>
+      </mat-card-content>
+      <mat-card-actions>
+        <button (click)="disableModifications()" mat-button color="primary" matTooltip="Leave room modification">
+          Leave
+        </button>
+        <button (click)="updateRoom()" mat-button color="primary" matTooltip="Update room's details">
+          Update
+        </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>

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

@@ -15,6 +15,9 @@ export class CreatorRoomComponent extends RoomComponent implements OnInit {
   room: Room;
   modify = false;
   deleteDialog = false;
+  roomName: string;
+  roomShortId: string;
+  roomDescription: string;
 
   constructor(protected roomService: RoomService,
               protected notification: NotificationService,
@@ -34,13 +37,26 @@ export class CreatorRoomComponent extends RoomComponent implements OnInit {
   }
 
   enableModifications(): void {
+    this.roomName = this.room.name;
+    this.roomShortId = this.room.shortId;
+    this.roomDescription = this.room.description;
     this.modify = true;
   }
 
-  updateRoom(roomName: string, roomShortID: string, roomDescription: string): void {
-    console.log(roomName);
-    console.log(roomShortID);
-    console.log(roomDescription);
+  disableModifications(): void {
+    this.modify = false;
+  }
+
+  updateRoom(): void {
+    if ((this.roomName === this.room.name) &&
+      (this.roomShortId === this.room.shortId) &&
+      (this.roomDescription === this.room.description)
+    ) {
+      return;
+    } else {
+      this.roomService.updateRoom(this.room)
+        .subscribe(() => this.goBack());
+    }
   }
   showDeletionDialog(): void {
     this.deleteDialog = true;

src/app/room.service.ts

@@ -34,8 +34,15 @@ export class RoomService extends ErrorHandlingService {
   getRoom(id: string): Observable<Room> {
     const url = `${this.roomsUrl}/${id}`;
     return this.http.get<Room>(url).pipe(
-    catchError(this.handleError<Room>(`getRoom id=${id}`))
-  );
+      catchError(this.handleError<Room>(`getRoom id=${id}`))
+    );
+  }
+
+  updateRoom(room: Room): Observable<any> {
+    return this.http.put(this.roomsUrl, room, httpOptions).pipe(
+      tap(_ => ''),
+      catchError(this.handleError<any>('updateRoom'))
+    );
   }
 
   deleteRoom (room: Room | string): Observable<Room> {