ag-admin/OpenSlides
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #4325 from GabrielInTheWorld/feature-user-info-dialog

Browse Source 
Feature for quick editing a user
This commit is contained in:
Sean 2019-02-14 13:36:58 +01:00 committed by GitHub
commit 530d522cec
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 138 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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>

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

@ -1,5 +1,5 @@
import { Component, OnInit } from '@angular/core';
import { MatSnackBar } from '@angular/material';
import { Component, OnInit, ViewChild, TemplateRef } from '@angular/core';
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)