2019-09-23 10:17:03 +02:00
|
|
|
|
2023-10-06 10:10:53 +02:00
|
|
|
import { Observable, merge as observableMerge, of as observableOf } from 'rxjs';
|
2019-09-23 10:17:03 +02:00
|
|
|
|
2018-11-27 18:33:17 +01:00
|
|
|
import { DataSource } from '@angular/cdk/table';
|
2023-10-06 10:10:53 +02:00
|
|
|
import { HttpClient } from '@angular/common/http';
|
2018-11-27 18:33:17 +01:00
|
|
|
import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
|
2023-10-06 10:10:53 +02:00
|
|
|
import { MatPaginator } from '@angular/material/paginator';
|
|
|
|
import { MatSnackBar } from '@angular/material/snack-bar';
|
2019-09-23 10:17:03 +02:00
|
|
|
import { MatSort } from '@angular/material/sort';
|
2023-10-06 10:10:53 +02:00
|
|
|
import { MatomoService } from '@app/core/services/matomo/matomo-service';
|
|
|
|
import { BaseComponent } from '@common/base/base.component';
|
2018-11-27 18:33:17 +01:00
|
|
|
import { TranslateService } from '@ngx-translate/core';
|
2023-10-06 10:10:53 +02:00
|
|
|
import * as FileSaver from 'file-saver';
|
|
|
|
import { catchError, map, startWith, switchMap, takeUntil } from 'rxjs/operators';
|
|
|
|
import { DataTableRequest } from '../../../../core/model/data-table/data-table-request';
|
2019-01-18 18:03:45 +01:00
|
|
|
import { UserListingModel } from '../../../../core/model/user/user-listing';
|
|
|
|
import { UserCriteria } from '../../../../core/query/user/user-criteria';
|
|
|
|
import { UserService } from '../../../../core/services/user/user.service';
|
|
|
|
import { SnackBarNotificationComponent } from '../../../../library/notification/snack-bar/snack-bar-notification.component';
|
2023-10-20 17:01:09 +02:00
|
|
|
// import { BreadcrumbItem } from '../../../misc/breadcrumb/definition/breadcrumb-item';
|
2023-10-06 10:10:53 +02:00
|
|
|
import { UserCriteriaComponent } from './criteria/user-criteria.component';
|
2018-02-01 15:04:36 +01:00
|
|
|
|
|
|
|
export class UsersDataSource extends DataSource<UserListingModel> {
|
|
|
|
|
2018-10-05 17:00:54 +02:00
|
|
|
totalCount = 0;
|
|
|
|
|
|
|
|
constructor(
|
2019-01-18 18:03:45 +01:00
|
|
|
private _service: UserService,
|
2018-10-05 17:00:54 +02:00
|
|
|
private _paginator: MatPaginator,
|
|
|
|
private _sort: MatSort,
|
|
|
|
private _languageService: TranslateService,
|
|
|
|
private _snackBar: MatSnackBar,
|
2019-01-18 18:03:45 +01:00
|
|
|
private _criteria: UserCriteriaComponent
|
2018-10-05 17:00:54 +02:00
|
|
|
) {
|
|
|
|
super();
|
2018-11-27 18:33:17 +01:00
|
|
|
//this._paginator.page.pipe(takeUntil(this._destroyed)).subscribe((pageEvent: PageEvent) => {
|
2018-10-05 17:00:54 +02:00
|
|
|
// this.store.dispatch(new LoadPhotosRequestAction(pageEvent.pageIndex, pageEvent.pageSize))
|
|
|
|
//})
|
|
|
|
}
|
|
|
|
|
|
|
|
connect(): Observable<UserListingModel[]> {
|
|
|
|
const displayDataChanges = [
|
|
|
|
this._paginator.page
|
|
|
|
//this._sort.matSortChange
|
|
|
|
];
|
|
|
|
|
|
|
|
// If the user changes the sort order, reset back to the first page.
|
2018-11-27 18:33:17 +01:00
|
|
|
//this._sort.matSortChange.pipe(takeUntil(this._destroyed)).subscribe(() => {
|
2018-10-05 17:00:54 +02:00
|
|
|
// this._paginator.pageIndex = 0;
|
|
|
|
//})
|
|
|
|
|
2019-09-23 10:17:03 +02:00
|
|
|
return observableMerge(...displayDataChanges).pipe(
|
|
|
|
startWith(null),
|
|
|
|
switchMap(() => {
|
2018-10-05 17:00:54 +02:00
|
|
|
const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
|
|
|
|
let fields: Array<string> = new Array();
|
|
|
|
if (this._sort.active) { fields = this._sort.direction === 'asc' ? ['+' + this._sort.active] : ['-' + this._sort.active]; }
|
|
|
|
const request = new DataTableRequest<UserCriteria>(startIndex, this._paginator.pageSize, { fields: fields });
|
|
|
|
request.criteria = this._criteria.getFormData();
|
|
|
|
return this._service.getPaged(request);
|
2019-09-23 10:17:03 +02:00
|
|
|
}),
|
|
|
|
catchError((error: any) => {
|
2018-10-05 17:00:54 +02:00
|
|
|
this._snackBar.openFromComponent(SnackBarNotificationComponent, {
|
|
|
|
data: { message: 'GENERAL.SNACK-BAR.FORMS-BAD-REQUEST', language: this._languageService },
|
|
|
|
duration: 3000,
|
|
|
|
});
|
|
|
|
this._criteria.onCallbackError(error);
|
2019-09-23 10:17:03 +02:00
|
|
|
return observableOf(null);
|
|
|
|
}),
|
|
|
|
map(result => {
|
2018-10-05 17:00:54 +02:00
|
|
|
return result;
|
2019-09-23 10:17:03 +02:00
|
|
|
}),
|
|
|
|
map(result => {
|
2018-10-05 17:00:54 +02:00
|
|
|
if (!result) { return []; }
|
|
|
|
if (this._paginator.pageIndex === 0) { this.totalCount = result.totalCount; }
|
|
|
|
//result.data.forEach((element: any) => {
|
|
|
|
// const roles: String[] = [];
|
|
|
|
// element.roles.forEach((role: any) => {
|
2018-11-27 18:33:17 +01:00
|
|
|
// this._languageService.get(this._utilities.convertFromPrincipalAppRole(role)).pipe(takeUntil(this._destroyed)).subscribe(
|
2018-10-05 17:00:54 +02:00
|
|
|
// value => roles.push(value)
|
|
|
|
// );
|
|
|
|
// });
|
|
|
|
// element.roles = roles;
|
|
|
|
//});
|
|
|
|
return result.data;
|
2019-09-23 10:17:03 +02:00
|
|
|
}),);
|
2018-10-05 17:00:54 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
disconnect() {
|
|
|
|
// No-op
|
|
|
|
}
|
2018-02-01 15:04:36 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
@Component({
|
2019-01-18 18:03:45 +01:00
|
|
|
selector: 'app-user-listing-component',
|
|
|
|
templateUrl: './user-listing.component.html',
|
|
|
|
styleUrls: ['./user-listing.component.scss']
|
2018-02-01 15:04:36 +01:00
|
|
|
})
|
2020-10-07 15:35:23 +02:00
|
|
|
export class UserListingComponent extends BaseComponent implements OnInit, AfterViewInit {
|
2018-02-01 15:04:36 +01:00
|
|
|
|
2019-09-23 10:17:03 +02:00
|
|
|
@ViewChild(MatPaginator, { static: true }) _paginator: MatPaginator;
|
|
|
|
@ViewChild(MatSort, { static: true }) sort: MatSort;
|
|
|
|
@ViewChild(UserCriteriaComponent, { static: true }) criteria: UserCriteriaComponent;
|
2018-02-01 15:04:36 +01:00
|
|
|
|
2023-10-20 17:01:09 +02:00
|
|
|
// breadCrumbs: Observable<BreadcrumbItem[]>;
|
2018-10-05 17:00:54 +02:00
|
|
|
dataSource: UsersDataSource | null;
|
2020-12-04 17:26:20 +01:00
|
|
|
displayedColumns: String[] = ['avatar', 'name', 'email', 'lastloggedin', 'roles'];
|
2018-02-01 15:04:36 +01:00
|
|
|
|
2019-01-18 18:03:45 +01:00
|
|
|
constructor(
|
|
|
|
private userService: UserService,
|
|
|
|
private languageService: TranslateService,
|
2020-12-14 18:28:13 +01:00
|
|
|
public snackBar: MatSnackBar,
|
|
|
|
private httpClient: HttpClient,
|
|
|
|
private matomoService: MatomoService
|
2019-01-18 18:03:45 +01:00
|
|
|
) {
|
2020-10-07 15:35:23 +02:00
|
|
|
super();
|
2018-10-05 17:00:54 +02:00
|
|
|
}
|
2018-02-01 15:04:36 +01:00
|
|
|
|
2018-10-05 17:00:54 +02:00
|
|
|
ngOnInit() {
|
2020-12-14 18:28:13 +01:00
|
|
|
this.matomoService.trackPageView('Admin: Users');
|
2023-10-20 17:01:09 +02:00
|
|
|
// this.breadCrumbs = observableOf([{
|
|
|
|
// parentComponentName: null,
|
|
|
|
// label: this.languageService.instant('NAV-BAR.USERS-BREADCRUMB'),
|
|
|
|
// url: "/users"
|
|
|
|
// }]);
|
2018-10-05 17:00:54 +02:00
|
|
|
//this.refresh(); //called on ngAfterViewInit with default criteria
|
|
|
|
}
|
2018-02-01 15:04:36 +01:00
|
|
|
|
2018-10-05 17:00:54 +02:00
|
|
|
ngAfterViewInit() {
|
|
|
|
setTimeout(() => {
|
|
|
|
this.criteria.setRefreshCallback(() => this.refresh());
|
|
|
|
this.criteria.setCriteria(this.getDefaultCriteria());
|
|
|
|
this.criteria.controlModified();
|
|
|
|
});
|
|
|
|
}
|
2018-02-01 15:04:36 +01:00
|
|
|
|
2018-10-05 17:00:54 +02:00
|
|
|
refresh() {
|
2019-06-20 17:06:17 +02:00
|
|
|
this._paginator.pageSize = 10;
|
|
|
|
this._paginator.pageIndex = 0;
|
2018-10-05 17:00:54 +02:00
|
|
|
this.dataSource = new UsersDataSource(this.userService, this._paginator, this.sort, this.languageService, this.snackBar, this.criteria);
|
|
|
|
}
|
2018-02-01 15:04:36 +01:00
|
|
|
|
2018-10-05 17:00:54 +02:00
|
|
|
getDefaultCriteria(): UserCriteria {
|
|
|
|
const defaultCriteria = new UserCriteria();
|
|
|
|
return defaultCriteria;
|
|
|
|
}
|
2020-10-07 15:35:23 +02:00
|
|
|
|
|
|
|
// Export user mails
|
2023-10-06 10:10:53 +02:00
|
|
|
exportUsers() {
|
2020-10-07 15:35:23 +02:00
|
|
|
this.userService.downloadCSV()
|
|
|
|
.pipe(takeUntil(this._destroyed))
|
|
|
|
.subscribe(response => {
|
|
|
|
const blob = new Blob([response.body], { type: 'application/csv' });
|
|
|
|
const filename = this.getFilenameFromContentDispositionHeader(response.headers.get('Content-Disposition'));
|
|
|
|
FileSaver.saveAs(blob, filename);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
getFilenameFromContentDispositionHeader(header: string): string {
|
|
|
|
const regex: RegExp = new RegExp(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/g);
|
|
|
|
|
|
|
|
const matches = header.match(regex);
|
|
|
|
let filename: string;
|
|
|
|
for (let i = 0; i < matches.length; i++) {
|
|
|
|
const match = matches[i];
|
|
|
|
if (match.includes('filename="')) {
|
|
|
|
filename = match.substring(10, match.length - 1);
|
|
|
|
break;
|
|
|
|
} else if (match.includes('filename=')) {
|
|
|
|
filename = match.substring(9);
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return filename;
|
|
|
|
}
|
2020-12-04 17:26:20 +01:00
|
|
|
|
2020-12-08 15:25:55 +01:00
|
|
|
public setDefaultAvatar(ev: Event) {
|
|
|
|
(ev.target as HTMLImageElement).src = 'assets/images/profile-placeholder.png';
|
|
|
|
}
|
2018-02-01 15:04:36 +01:00
|
|
|
}
|