Feature for quick editing a user

Like in the `agenda-list.component`, if the user clicks on the middle cell, where the groups are written, a dialog opens.
In this dialog the user can update the following values for another user: groups, gender and participant-number.

client/src/app/site/users/components/user-list/user-list.component.html

@@ -49,7 +49,7 @@
         <!-- prefix column -->
         <ng-container matColumnDef="group">
             <mat-header-cell *matHeaderCellDef mat-sort-header>Group</mat-header-cell>
-            <mat-cell *matCellDef="let user">
+            <mat-cell (click)="openEditInfo(user)" *matCellDef="let user">
                 <div class="groupsCell">
                     <span *ngIf="user.groups && user.groups.length">
                         <mat-icon>people</mat-icon>
@@ -195,3 +195,49 @@
         </div>
     </mat-menu>
 </mat-drawer-container>
+
+<ng-template #userInfoDialog>
+    <h1 mat-dialog-title>
+        <span>{{ 'Edit details for' | translate }} {{ infoDialog.name }}</span>
+    </h1>
+    <div class="os-form-card-mobile" mat-dialog-content>
+        <mat-form-field>
+            <mat-select placeholder="{{ 'Groups' | translate }}" [(ngModel)]="infoDialog.groups_id" multiple>
+                <mat-option *ngFor="let group of groups" [value]="group.id">
+                    {{ group.getTitle() | translate }}
+                </mat-option>
+            </mat-select>
+        </mat-form-field>
+        <mat-form-field>
+            <mat-select placeholder="{{ 'Gender' | translate }}" [(ngModel)]="infoDialog.gender">
+                <mat-option>-</mat-option>
+                <mat-option *ngFor="let gender of genderList" [value]="gender">{{ gender | translate }}</mat-option>
+            </mat-select>
+        </mat-form-field>
+        <mat-form-field>
+            <input
+                type="text"
+                matInput
+                placeholder="{{ 'Participant number' | translate }}"
+                [(ngModel)]="infoDialog.number"
+            />
+        </mat-form-field>
+    </div>
+    <div mat-dialog-actions>
+        <button
+            type="submit"
+            mat-button
+            color="primary"
+            [mat-dialog-close]="{
+                groups_id: infoDialog.groups_id,
+                gender: infoDialog.gender,
+                number: infoDialog.number
+            }"
+        >
+            <span translate>Save</span>
+        </button>
+        <button type="button" mat-button [mat-dialog-close]="null">
+            <span translate>Cancel</span>
+        </button>
+    </div>
+</ng-template>

client/src/app/site/users/components/user-list/user-list.component.ts

@@ -1,5 +1,5 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild, TemplateRef } from '@angular/core';
-import { MatSnackBar } from '@angular/material';
+import { MatSnackBar, MatDialog } from '@angular/material';
 import { Router, ActivatedRoute } from '@angular/router';
 import { Title } from '@angular/platform-browser';
 import { TranslateService } from '@ngx-translate/core';
@@ -17,6 +17,34 @@ import { UserSortListService } from '../../services/user-sort-list.service';
 import { ViewportService } from 'app/core/ui-services/viewport.service';
 import { OperatorService } from 'app/core/core-services/operator.service';
 import { ViewUser } from '../../models/view-user';
+import { ViewGroup } from '../../models/view-group';
+import { genders } from 'app/shared/models/users/user';
+
+/**
+ * Interface for the short editing dialog.
+ * Describe, which values the dialog has.
+ */
+interface InfoDialog {
+    /**
+     * The name of the user.
+     */
+    name: string;
+
+    /**
+     * Define all the groups the user is in.
+     */
+    groups_id: number[];
+
+    /**
+     * The gender of the user.
+     */
+    gender: string;
+
+    /**
+     * The participant number of the user.
+     */
+    number: string;
+}
 
 /**
  * Component for the user list view.
@@ -28,6 +56,27 @@ import { ViewUser } from '../../models/view-user';
     styleUrls: ['./user-list.component.scss']
 })
 export class UserListComponent extends ListViewBaseComponent<ViewUser> implements OnInit {
+    /**
+     * The reference to the template.
+     */
+    @ViewChild('userInfoDialog')
+    private userInfoDialog: TemplateRef<string>;
+
+    /**
+     * Declares the dialog for editing.
+     */
+    public infoDialog: InfoDialog;
+
+    /**
+     * All available groups, where the user can be in.
+     */
+    public groups: ViewGroup[];
+
+    /**
+     * The list of all genders.
+     */
+    public genderList = genders;
+
     /**
      * Columns to display in table when desktop view is available
      */
@@ -95,7 +144,8 @@ export class UserListComponent extends ListViewBaseComponent<ViewUser> implement
         public filterService: UserFilterListService,
         public sortService: UserSortListService,
         config: ConfigService,
-        private userPdf: UserPdfExportService
+        private userPdf: UserPdfExportService,
+        private dialog: MatDialog
     ) {
         super(titleService, translate, matSnackBar);
 
@@ -122,6 +172,9 @@ export class UserListComponent extends ListViewBaseComponent<ViewUser> implement
             this.checkSelection();
         });
         this.setFulltextFilter();
+
+        // Initialize the groups
+        this.groups = this.groupRepo.getViewModelList().filter(group => group.id !== 1);
     }
 
     /**
@@ -139,6 +192,41 @@ export class UserListComponent extends ListViewBaseComponent<ViewUser> implement
         this.router.navigate(['./new'], { relativeTo: this.route });
     }
 
+    /**
+     * This function opens the dialog,
+     * where the user can quick change the groups,
+     * the gender and the participant number.
+     *
+     * @param user is an instance of ViewUser. This is the given user, who will be modified.
+     */
+    public openEditInfo(user: ViewUser): void {
+        this.infoDialog = {
+            name: user.username,
+            groups_id: user.groups_id,
+            gender: user.gender,
+            number: user.number
+        };
+
+        const dialogRef = this.dialog.open(this.userInfoDialog, {
+            width: '400px',
+            maxWidth: '90vw',
+            maxHeight: '90vh',
+            disableClose: true
+        });
+
+        dialogRef.keydownEvents().subscribe((event: KeyboardEvent) => {
+            if (event.key === 'Enter' && event.shiftKey) {
+                dialogRef.close(this.infoDialog);
+            }
+        });
+
+        dialogRef.afterClosed().subscribe(result => {
+            if (result) {
+                this.repo.update(result, user);
+            }
+        });
+    }
+
     /**
      * Export all users currently matching the filter
      * as CSV (including personal information such as initial passwords)