diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index a31d35189dbef5ab02ab88b2641862a720b904f6..507e71248617ef61bbdfc9361df82b0bd3bbaab2 100644
--- a/src/app/app.module.ts
+++ b/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,
diff --git a/src/app/creator-room/creator-room.component.html b/src/app/creator-room/creator-room.component.html
index 0cc2f6c50e540198f048ec96935cf7b3daab4ed6..ac5e0d70397ab59d2f2fb1c4fa60debee1203e8f 100644
--- a/src/app/creator-room/creator-room.component.html
+++ b/src/app/creator-room/creator-room.component.html
@@ -1,6 +1,6 @@
<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>
diff --git a/src/app/creator-room/creator-room.component.ts b/src/app/creator-room/creator-room.component.ts
index f841923a4684504bb981bf4885100f2cf9d57ead..debcd6426fb9910df7fb0a8159a845db68b3c0ef 100644
--- a/src/app/creator-room/creator-room.component.ts
+++ b/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);
+ });
+ }
}
diff --git a/src/app/room-deletion/room-deletion.component.html b/src/app/room-deletion/room-deletion.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..bd3e54708652c01c7b77fe1d43ab65fd145cde45
--- /dev/null
+++ b/src/app/room-deletion/room-deletion.component.html
@@ -0,0 +1,10 @@
+<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>
diff --git a/src/app/room-deletion/room-deletion.component.scss b/src/app/room-deletion/room-deletion.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/app/room-deletion/room-deletion.component.spec.ts b/src/app/room-deletion/room-deletion.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..170af1397b6a0579a36ebd57965f2f074e763b4f
--- /dev/null
+++ b/src/app/room-deletion/room-deletion.component.spec.ts
@@ -0,0 +1,25 @@
+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();
+ });
+});
diff --git a/src/app/room-deletion/room-deletion.component.ts b/src/app/room-deletion/room-deletion.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..55b5a1cf196492027b38e95b8b12e37f21c581a7
--- /dev/null
+++ b/src/app/room-deletion/room-deletion.component.ts
@@ -0,0 +1,30 @@
+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() {
+ }
+}