diff --git a/src/app/components/creator/_dialogs/moderators/moderators.component.html b/src/app/components/creator/_dialogs/moderators/moderators.component.html index bec6c56a4bf3d28b2b398c55eea44954302ef354..b9c8fa99d755a758a9572e4118e01d8511bf2bbb 100644 --- a/src/app/components/creator/_dialogs/moderators/moderators.component.html +++ b/src/app/components/creator/_dialogs/moderators/moderators.component.html @@ -13,6 +13,12 @@ </div> <h3 *ngIf="moderators.length === 0">No moderators yet.</h3> <mat-list *ngIf="moderators.length > 0"> - <mat-list-item *ngFor="let moderator of moderators">{{moderator.userId}}</mat-list-item> + <mat-list-item *ngFor="let moderator of moderators"> + {{moderator.userId}} + <span class="fill-remaining-space"></span> + <button mat-icon-button (click)="removeModerator(moderator.userId)"> + <mat-icon class="close">close</mat-icon> + </button> + </mat-list-item> </mat-list> </div> diff --git a/src/app/components/creator/_dialogs/moderators/moderators.component.scss b/src/app/components/creator/_dialogs/moderators/moderators.component.scss index e7a1a2c9cbe331ca52a6f166078ee3ec54813320..52321802b3313ed16ae541819c0563c86c2f7f8e 100644 --- a/src/app/components/creator/_dialogs/moderators/moderators.component.scss +++ b/src/app/components/creator/_dialogs/moderators/moderators.component.scss @@ -27,6 +27,10 @@ mat-form-field { line-height: 100% !important; } +.close { + color: var(--red); +} + .mat-list-item { color: var(--on-surface); } diff --git a/src/app/components/creator/_dialogs/moderators/moderators.component.ts b/src/app/components/creator/_dialogs/moderators/moderators.component.ts index 7c5ecc7a5bbdd9dc9593a9d25cc875a07658147f..ea50b409338602a743e52c9493fcf0389b3b6543 100644 --- a/src/app/components/creator/_dialogs/moderators/moderators.component.ts +++ b/src/app/components/creator/_dialogs/moderators/moderators.component.ts @@ -44,7 +44,10 @@ export class ModeratorsComponent implements OnInit { return; } this.moderatorService.add(this.roomId, list[0].id).subscribe(); - this.getModerators(); }); } + + removeModerator(userId: string) { + this.moderatorService.delete(this.roomId, userId).subscribe(); + } }