Add feature to display current membership count (#1675)

thm-mni-ii · Jul 9, 2024 · e5dbbda · e5dbbda
1 parent 5fa84ad
commit e5dbbda
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 7 deletions.
diff --git a/.../web/src/app/page-components/course-detail/group-selection/group-selection.component.html b/.../web/src/app/page-components/course-detail/group-selection/group-selection.component.html
@@ -16,9 +16,8 @@
       <th>{{ "course.select-group" | i18nextEager }}</th>
       <th>{{ "course.group" | i18nextEager }}</th>
       <th>{{ "course.group-membership" | i18nextEager }}</th>
-      <!--<th>Mitglieder</th>-->
     </tr>
-    <tr *ngFor="let group of groups | async; let i = index">
+    <tr *ngFor="let group of groups$ | async; let i = index">
       <td>
         <input
           type="radio"
@@ -29,8 +28,7 @@
         />
       </td>
       <td>{{ group.name }}</td>
-      <td>{{ group.membership }}</td>
-      <!--<td><td>{{ group.members.join(', ') }}</td> >-->
+      <td>{{ group.currentMembership }} / {{ group.membership }}</td>
     </tr>
   </table>
   <button

diff --git a/...re/web/src/app/page-components/course-detail/group-selection/group-selection.component.ts b/...re/web/src/app/page-components/course-detail/group-selection/group-selection.component.ts
@@ -1,14 +1,15 @@
 import { Component, Input, OnInit } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
 import { AuthService } from "../../../service/auth.service";
-import { Observable } from "rxjs";
+import { forkJoin, Observable } from "rxjs";
 import { Requirement } from "../../../model/Requirement";
 import { MatDialog } from "@angular/material/dialog";
 import { Roles } from "../../../model/Roles";
 import { NewGroupDialogComponent } from "../../../dialogs/new-group-dialog/new-group-dialog.component";
 import { Group } from "../../../model/Group";
 import { GroupService } from "../../../service/group.service";
 import { GroupRegistrationService } from "../../../service/group-registration.sevice";
+import { map, mergeMap } from "rxjs/operators";
 
 @Component({
   selector: "app-group-selection",
@@ -18,7 +19,7 @@ import { GroupRegistrationService } from "../../../service/group-registration.se
 export class GroupSelectionComponent implements OnInit {
   @Input() requirements: Observable<Requirement[]>;
 
-  groups: Observable<Group[]>;
+  groups$: Observable<(Group & { currentMembership: number })[]>;
   selectedGroup: Group;
   courseId: number;
   editGroups: boolean = false;
@@ -51,7 +52,21 @@ export class GroupSelectionComponent implements OnInit {
   }
 
   loadGroups(): void {
-    this.groups = this.groupService.getGroupList(this.courseId);
+    this.groups$ = this.groupService
+      .getGroupList(this.courseId)
+      .pipe(
+        mergeMap((groups: Group[]) =>
+          forkJoin(
+            groups.map((group) =>
+              this.groupRegistrationService
+                .getGroupMembership(this.courseId, group.id)
+                .pipe(
+                  map((currentMembership) => ({ ...group, currentMembership }))
+                )
+            )
+          )
+        )
+      );
   }
 
   createGroup() {