Fixed settings and added visibility restrictions (#1675)

thm-mni-ii · Jul 30, 2024 · d487721 · d487721
1 parent 9f42634
commit d487721
Show file tree

Hide file tree

Showing 10 changed files with 317 additions and 122 deletions.
diff --git a/modules/fbs-core/web/src/app/dialogs/new-group-dialog/new-group-dialog.component.html b/modules/fbs-core/web/src/app/dialogs/new-group-dialog/new-group-dialog.component.html
@@ -1,4 +1,7 @@
 <div class="container">
+  <div *ngIf="isUpdateDialog" matDialogTitle>
+    {{ "dialog.group.new.edit-group" | i18nextEager }}
+  </div>
   <div *ngIf="!isUpdateDialog" matDialogTitle>
     {{ "dialog.group.new.create-group" | i18nextEager }}
   </div>
@@ -22,7 +25,7 @@
         </mat-error>
       </mat-form-field>
 
-      <mat-form-field>
+      <mat-form-field *ngIf="!student">
         <mat-label>{{
           "dialog.group.new.group-membership" | i18nextEager
         }}</mat-label>
@@ -39,7 +42,7 @@
         </mat-error>
       </mat-form-field>
 
-      <mat-slide-toggle [(ngModel)]="isVisible"
+      <mat-slide-toggle *ngIf="!student" [(ngModel)]="isVisible"
         ><p *ngIf="isVisible">
           {{ "dialog.group.new.showGroup" | i18nextEager }}
         </p>

diff --git a/modules/fbs-core/web/src/app/dialogs/new-group-dialog/new-group-dialog.component.ts b/modules/fbs-core/web/src/app/dialogs/new-group-dialog/new-group-dialog.component.ts
@@ -13,14 +13,39 @@ export class NewGroupDialogComponent {
   name = new UntypedFormControl("", [Validators.required]);
   membership = new UntypedFormControl("", [Validators.required]);
   isVisible = true;
-  isUpdateDialog = false;
+  isUpdateDialog: boolean;
+  student: boolean;
   pending: boolean = false;
 
   constructor(
     private groupService: GroupService,
     public dialogRef: MatDialogRef<NewGroupDialogComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: { cid: number }
-  ) {}
+    @Inject(MAT_DIALOG_DATA)
+    public data: {
+      cid: number;
+      gid?: number;
+      student?: boolean;
+      isUpdateDialog: boolean;
+    }
+  ) {
+    this.isUpdateDialog = data.isUpdateDialog;
+    this.student = data.student;
+    /**if (data.student) {*/
+    this.loadGroupData();
+    /**  }*/
+  }
+
+  loadGroupData() {
+    if (this.data.gid) {
+      this.groupService
+        .getGroup(this.data.cid, this.data.gid)
+        .subscribe((group) => {
+          this.name.setValue(group.name);
+          this.membership.setValue(group.membership);
+          this.isVisible = group.visible;
+        });
+    }
+  }
 
   createGroup() {
     if (!this.isInputValid()) {
@@ -37,7 +62,17 @@ export class NewGroupDialogComponent {
     this.pending = true;
 
     if (this.isUpdateDialog) {
-      // update DB
+      this.groupService
+        .updateGroup(this.data.cid, this.data.gid, group)
+        .subscribe(
+          () => {
+            this.dialogRef.close({ success: true });
+          },
+          (error) => {
+            console.log(error);
+            this.dialogRef.close({ success: false });
+          }
+        );
     } else {
       this.groupService.createGroup(this.data.cid, group).subscribe(
         () => {

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,27 +16,78 @@
       <th>{{ "course.select-group" | i18nextEager }}</th>
       <th>{{ "course.group" | i18nextEager }}</th>
       <th>{{ "course.group-membership" | i18nextEager }}</th>
+      <th *ngIf="isAuthorized()">{{ "course.settings" | i18nextEager }}</th>
     </tr>
-    <tr *ngFor="let group of groups$ | async; let i = index">
-      <td>
-        <input
-          type="radio"
-          name="group"
-          [value]="group"
-          [(ngModel)]="selectedGroup"
-          [id]="'group' + i"
-        />
-      </td>
-      <td>{{ group.name }}</td>
-      <td>{{ group.currentMembership }} / {{ group.membership }}</td>
-    </tr>
+    <ng-container *ngFor="let group of groups$ | async; let i = index">
+      <tr *ngIf="(!student && group.visible) || student">
+        <td>
+          <mat-icon class="invisible" *ngIf="!group.visible"
+            >visibility_off</mat-icon
+          >
+          <input
+            type="radio"
+            [id]="'group' + i"
+            name="group"
+            [value]="group"
+            [(ngModel)]="preselectedGroup"
+            (ngModelChange)="choose($event)"
+          />
+        </td>
+        <td>{{ group.name }}</td>
+        <td>{{ group.currentMembership }} / {{ group.membership }}</td>
+        <td *ngIf="isAuthorized()">
+          <button
+            class="table-settings-button"
+            mat-icon-button
+            [matMenuTriggerFor]="settings"
+            matTooltip="{{ 'course.settings' | i18nextEager }}"
+          >
+            <mat-icon>settings</mat-icon>
+          </button>
+          <mat-menu #settings="matMenu">
+            <button
+              mat-menu-item
+              *ngIf="isAuthorized()"
+              (click)="updateGroup(group)"
+            >
+              <mat-icon>edit</mat-icon>
+              {{ "dialog.group.new.edit-group" | i18nextEager }}
+            </button>
+            <button
+              mat-menu-item
+              *ngIf="isAuthorized()"
+              (click)="derigisterAllMembers(group)"
+            >
+              <mat-icon> group_remove </mat-icon
+              >{{ "group.deregister.all" | i18nextEager }}
+            </button>
+            <button
+              mat-menu-item
+              *ngIf="isAuthorized()"
+              (click)="deleteGroup(group)"
+            >
+              <mat-icon>delete</mat-icon>{{ "group.delete" | i18nextEager }}
+            </button>
+          </mat-menu>
+        </td>
+      </tr>
+    </ng-container>
   </table>
   <button
+    class="selection-button"
     mat-raised-button
     color="primary"
-    (click)="joinGroup()"
-    matTooltip="{{ 'course.save-selected-group' | i18nextEager }}"
+    (click)="preselectionExists ? removeGroup() : joinGroup()"
+    matTooltip="{{
+      preselectionExists
+        ? ('course.remove-selected-group' | i18nextEager)
+        : ('course.save-selected-group' | i18nextEager)
+    }}"
   >
-    {{ "course.save-selected-group" | i18nextEager }}
+    {{
+      preselectionExists
+        ? ("course.remove-selected-group" | i18nextEager)
+        : ("course.save-selected-group" | i18nextEager)
+    }}
   </button>
 </div>
diff --git a/.../web/src/app/page-components/course-detail/group-selection/group-selection.component.scss b/.../web/src/app/page-components/course-detail/group-selection/group-selection.component.scss
@@ -17,6 +17,13 @@ td {
   text-align: left;
 }
 
-button {
+.invisible {
+  font-weight: bold;
+  color: #cccccc;
+  padding: 5px;
+}
+
+.selection-button {
+  float: right;
   margin-top: 10px;
 }