Add dialog to register and deregister groupmebers (#1675)

modules/fbs-core/web/src/app/dialogs/group-deregister-dialog/group-deregister-dialog.component.html

@@ -0,0 +1,40 @@
+<div class="container">
+  <div *ngIf="data.adding" matDialogTitle>
+    {{ groupName }} - {{ "group.add.member" | i18nextEager }}
+  </div>
+  <div *ngIf="!data.adding" matDialogTitle>
+    {{ groupName }} - {{ "group.deregister.member" | i18nextEager }}
+  </div>
+  <mat-dialog-content style="max-height: 100%; overflow: hidden">
+    <mat-list>
+      <mat-list-item *ngFor="let member of members$ | async">
+        {{ member.user.prename }} {{ member.user.surname }}
+
+        <span class="spacer"></span>
+        <button
+          *ngIf="data.adding"
+          mat-button
+          color="warn"
+          (click)="addMember(member)"
+          matTooltip="{{ 'dialog.group.deregister.add' | i18nextEager }}"
+        >
+          <mat-icon>add</mat-icon>
+        </button>
+        <button
+          *ngIf="!data.adding"
+          mat-button
+          color="warn"
+          (click)="removeMember(member)"
+          matTooltip="{{ 'dialog.group.deregister.remove' | i18nextEager }}"
+        >
+          <mat-icon>remove</mat-icon>
+        </button>
+      </mat-list-item>
+    </mat-list>
+  </mat-dialog-content>
+  <mat-dialog-actions class="actions">
+    <button mat-flat-button color="warn" (click)="closeDialog()">
+      {{ "dialog.group.new.cancel" | i18nextEager }}
+    </button>
+  </mat-dialog-actions>
+</div>

modules/fbs-core/web/src/app/dialogs/group-deregister-dialog/group-deregister-dialog.component.scss

@@ -0,0 +1,7 @@
+.spacer {
+  flex: 1 1 auto;
+}
+.actions {
+  display: flex;
+  justify-content: flex-end;
+}

modules/fbs-core/web/src/app/dialogs/group-deregister-dialog/group-deregister-dialog.component.ts

@@ -0,0 +1,83 @@
+import { Component, Inject, OnInit } from "@angular/core";
+import { Observable } from "rxjs";
+import { GroupRegistrationService } from "../../service/group-registration.sevice";
+import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material/dialog";
+import { Participant } from "../../model/Participant";
+import { Group } from "../../model/Group";
+import { GroupService } from "../../service/group.service";
+import { CourseRegistrationService } from "../../service/course-registration.service";
+
+@Component({
+  selector: "app-group-deregister-dialog",
+  templateUrl: "./group-deregister-dialog.component.html",
+  styleUrls: ["./group-deregister-dialog.component.scss"],
+})
+export class GroupDeregisterDialogComponent implements OnInit {
+  members$: Observable<Participant[]>;
+  group$: Observable<Group>;
+  groupName: string;
+
+  constructor(
+    private groupRegistrationService: GroupRegistrationService,
+    private courseRegistrationService: CourseRegistrationService,
+    private groupService: GroupService,
+    public dialogRef: MatDialogRef<GroupDeregisterDialogComponent>,
+    @Inject(MAT_DIALOG_DATA)
+    public data: {
+      cid: number;
+      gid: number;
+      adding: boolean;
+    }
+  ) {}
+
+  ngOnInit(): void {
+    this.loadMembers();
+    this.group$ = this.groupService.getGroup(this.data.cid, this.data.gid);
+    this.group$.subscribe((group: Group) => {
+      this.groupName = group.name;
+    });
+  }
+
+  loadMembers(): void {
+    if (this.data.adding) {
+      this.members$ = this.courseRegistrationService.getCourseParticipants(
+        this.data.cid
+      );
+    } else {
+      this.members$ = this.groupRegistrationService.getGroupParticipants(
+        this.data.cid,
+        this.data.gid
+      );
+    }
+  }
+
+  removeMember(member: Participant): void {
+    this.groupRegistrationService
+      .deregisterGroup(this.data.cid, this.data.gid, member.user.id)
+      .subscribe(
+        () => {
+          this.loadMembers();
+        },
+        (error) => {
+          console.error(error);
+        }
+      );
+  }
+
+  addMember(member: Participant): void {
+    this.groupRegistrationService
+      .registerGroup(this.data.cid, this.data.gid, member.user.id)
+      .subscribe(
+        () => {
+          this.loadMembers();
+        },
+        (error) => {
+          console.error(error);
+        }
+      );
+  }
+
+  closeDialog() {
+    this.dialogRef.close();
+  }
+}