diff --git a/src/app/creator-room/creator-room.component.html b/src/app/creator-room/creator-room.component.html index 4e1b099500031902b8858934aaca976eb7d660ad..9bae4b02ca7e02a7e2c80a81ec6255bef68a3e1f 100644 --- a/src/app/creator-room/creator-room.component.html +++ b/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> diff --git a/src/app/creator-room/creator-room.component.ts b/src/app/creator-room/creator-room.component.ts index 5a1a979d587c539327ee5728a36e516e45e299ee..cb72a18464a80561633ccfe9636d9a0d89511d8f 100644 --- a/src/app/creator-room/creator-room.component.ts +++ b/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; 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> {