diff --git a/src/app/creator-room/creator-room.component.html b/src/app/creator-room/creator-room.component.html index 704641eb1ee18f3b9d7dfcd5ce5061d5e0e6f5ab..9c82c86740615d3b1ee9023cb986ac950b36cfc6 100644 --- a/src/app/creator-room/creator-room.component.html +++ b/src/app/creator-room/creator-room.component.html @@ -1,10 +1,15 @@ <div fxLayout="column" fxLayoutAlign="start" fxLayoutGap="20px" fxFill> <div fxLayout="row" fxLayoutAlign="center"> - <mat-progress-spinner *ngIf="isLoading" mode="indeterminate"></mat-progress-spinner> - <mat-card *ngIf="room && !deleteDialog"> + <mat-card *ngIf="room && !modify && !deleteDialog" class="input-form"> <mat-card-header> - <mat-card-title><h3 class="subheading-2">{{ room.name }}</h3></mat-card-title> - <mat-card-subtitle>{{ room.id }}</mat-card-subtitle> + <mat-card-title> + <h3 class="subheading-2">{{ room.name }}</h3> + </mat-card-title> + <mat-card-subtitle> + <div> + {{ room.shortId }} + </div> + </mat-card-subtitle> </mat-card-header> <mat-divider></mat-divider> <mat-card-content> @@ -24,6 +29,12 @@ routerLink="/creator/room/{{room.id}}/comments"> Comments </button> + <button *ngIf="!modify" (click)="showEditDialog()" mat-button color="primary"> + Edit room + </button> + <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()"> Delete room </button> @@ -32,6 +43,32 @@ </button> </mat-card-actions> </mat-card> + <mat-card *ngIf="modify && room" class="input-form"> + <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)="hideEditDialog()" mat-button color="primary"> + Leave + </button> + <button (click)="updateRoom()" mat-button color="primary"> + 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> diff --git a/src/app/creator-room/creator-room.component.scss b/src/app/creator-room/creator-room.component.scss index 329ef2c52f517bea59a796d23be930e4c0898b56..9cfcef3148ff5cab0a7f86d9bf88f5c8755ccf33 100644 --- a/src/app/creator-room/creator-room.component.scss +++ b/src/app/creator-room/creator-room.component.scss @@ -5,3 +5,7 @@ mat-card { mat-card-content > :first-child { margin-top: 16px; } + +.input-form { + min-width: 650px; +} diff --git a/src/app/creator-room/creator-room.component.ts b/src/app/creator-room/creator-room.component.ts index aed237218bb958e9404c32e970f6db1f31c93e08..f841923a4684504bb981bf4885100f2cf9d57ead 100644 --- a/src/app/creator-room/creator-room.component.ts +++ b/src/app/creator-room/creator-room.component.ts @@ -13,7 +13,11 @@ import { NotificationService } from '../notification.service'; }) 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, @@ -32,6 +36,30 @@ export class CreatorRoomComponent extends RoomComponent implements OnInit { this.location.back(); } + showEditDialog(): void { + this.roomName = this.room.name; + this.roomShortId = this.room.shortId; + this.roomDescription = this.room.description; + this.modify = true; + } + + hideEditDialog(): void { + this.modify = false; + } + + updateRoom(): void { + if ((this.roomName === this.room.name) && + (this.roomShortId === this.room.shortId) && + (this.roomDescription === this.room.description) + ) { + this.notification.show('There were no changes'); + return; + } else { + this.notification.show('Changes are made'); + this.roomService.updateRoom(this.room) + .subscribe(() => this.goBack()); + } + } showDeletionDialog(): void { this.deleteDialog = true; } diff --git a/src/app/room.service.ts b/src/app/room.service.ts index 7a6b3f9d1468f0db5bfe59dc6db7c735470b1e58..54c0520deb38ad974abba53663e460873af13695 100644 --- a/src/app/room.service.ts +++ b/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> {