diff --git a/src/frontend/app/administration/action/actions-administration.component.html b/src/frontend/app/administration/action/actions-administration.component.html
index c9604ddd0c9b6327db9e7d8a288dee369e70f245..5a5e62ed5c60565017697ad27361ca4e7765604e 100755
--- a/src/frontend/app/administration/action/actions-administration.component.html
+++ b/src/frontend/app/administration/action/actions-administration.component.html
@@ -32,8 +32,7 @@
<div class="row">
<div class="col-md-6 col-xs-6">
<mat-form-field>
- <input matInput (keyup)="applyFilter($event.target.value)"
- placeholder="{{lang.filterBy}}">
+ <input matInput placeholder="{{lang.filterBy}}" [formControl]="adminService.getFilterField()">
</mat-form-field>
</div>
<div class="col-md-6 col-xs-6">
@@ -41,7 +40,7 @@
</mat-paginator>
</div>
</div>
- <mat-table #table [dataSource]="dataSource" matSort matSortActive="id" matSortDirection="asc">
+ <mat-table #table [dataSource]="adminService.getDataSource()" matSort [matSortActive]="adminService.getFilter('admin_actions', 'sort')" [matSortDirection]="adminService.getFilter('admin_actions', 'sortDirection')">
<ng-container matColumnDef="id">
<mat-header-cell *matHeaderCellDef mat-sort-header
[class.hide-for-mobile]="appService.getViewMode()">{{lang.id}}</mat-header-cell>
diff --git a/src/frontend/app/administration/action/actions-administration.component.ts b/src/frontend/app/administration/action/actions-administration.component.ts
index 142f30ee412a2a509c91c6150c09878d163fbea5..5b340526ab39816715f0de146c65031a3419f108 100755
--- a/src/frontend/app/administration/action/actions-administration.component.ts
+++ b/src/frontend/app/administration/action/actions-administration.component.ts
@@ -5,10 +5,10 @@ import { NotificationService } from '../../../service/notification/notification.
import { MatPaginator } from '@angular/material/paginator';
import { MatSidenav } from '@angular/material/sidenav';
import { MatSort } from '@angular/material/sort';
-import { MatTableDataSource } from '@angular/material/table';
import { HeaderService } from '../../../service/header.service';
import { AppService } from '../../../service/app.service';
import { FunctionsService } from '../../../service/functions.service';
+import { AdministrationService } from '../administration.service';
@Component({
templateUrl: 'actions-administration.component.html'
@@ -28,24 +28,17 @@ export class ActionsAdministrationComponent implements OnInit {
loading: boolean = false;
displayedColumns = ['id', 'label_action', 'history', 'actions'];
- dataSource = new MatTableDataSource(this.actions);
+ filterColumns = ['id', 'label_action'];
+
@ViewChild(MatPaginator, { static: false }) paginator: MatPaginator;
@ViewChild(MatSort, { static: false }) sort: MatSort;
- applyFilter(filterValue: string) {
- filterValue = filterValue.trim(); // Remove whitespace
- filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
- this.dataSource.filter = filterValue;
- this.dataSource.filterPredicate = (template, filter: string) => {
- return this.functions.filterUnSensitive(template, filter, ['id', 'label_action']);
- };
- }
-
constructor(
public http: HttpClient,
private notify: NotificationService,
private headerService: HeaderService,
public appService: AppService,
+ public adminService: AdministrationService,
public functions: FunctionsService,
private viewContainerRef: ViewContainerRef
) { }
@@ -61,12 +54,7 @@ export class ActionsAdministrationComponent implements OnInit {
this.headerService.setHeader(this.lang.administration + ' ' + this.lang.actions);
this.loading = false;
setTimeout(() => {
- this.dataSource = new MatTableDataSource(this.actions);
- this.dataSource.paginator = this.paginator;
- this.dataSource.sortingDataAccessor = this.functions.listSortingDataAccessor;
- this.sort.active = 'id';
- this.sort.direction = 'asc';
- this.dataSource.sort = this.sort;
+ this.adminService.setDataSource('admin_actions', this.actions, this.sort, this.paginator, this.filterColumns);
}, 0);
}, (err) => {
this.notify.handleErrors(err);
@@ -80,11 +68,8 @@ export class ActionsAdministrationComponent implements OnInit {
this.http.delete('../rest/actions/' + action.id)
.subscribe((data: any) => {
this.actions = data.actions;
- this.dataSource = new MatTableDataSource(this.actions);
- this.dataSource.paginator = this.paginator;
- this.dataSource.sort = this.sort;
+ this.adminService.setDataSource('admin_actions', this.actions, this.sort, this.paginator, this.filterColumns);
this.notify.success(this.lang.actionDeleted);
-
}, (err) => {
this.notify.error(err.error.errors);
});
diff --git a/src/frontend/app/administration/administration.service.ts b/src/frontend/app/administration/administration.service.ts
index 690cef276f2cc4bbd8a493796514fcc2ce16cac0..d9b6f4690109ddb2b0cbd6585c6e4074e169e7bf 100644
--- a/src/frontend/app/administration/administration.service.ts
+++ b/src/frontend/app/administration/administration.service.ts
@@ -11,6 +11,8 @@ import { tap } from 'rxjs/internal/operators/tap';
import { catchError } from 'rxjs/internal/operators/catchError';
import { of } from 'rxjs/internal/observable/of';
import { NotificationService } from '../../service/notification/notification.service';
+import { FormControl } from '@angular/forms';
+import { debounceTime } from 'rxjs/operators';
@Injectable()
export class AdministrationService {
@@ -20,11 +22,18 @@ export class AdministrationService {
sort: 'user_id',
sortDirection: 'asc',
page: 0,
- field : ''
+ field: ''
+ },
+ admin_actions: {
+ sort: 'id',
+ sortDirection: 'asc',
+ page: 0,
+ field: ''
},
};
dataSource: MatTableDataSource<any>;
filterColumns: string[];
+ searchTerm: FormControl = new FormControl('');
constructor(
private notify: NotificationService,
@@ -42,12 +51,34 @@ export class AdministrationService {
this.localStorage.save(`filtersAdmin_${this.headerService.user.id}`, JSON.stringify(this.filters));
}
+ getFilterField() {
+ return this.searchTerm;
+ }
+
getDataSource() {
return this.dataSource;
}
setDataSource(adminId: string, data: any, sort: MatSort, paginator: MatPaginator, filterColumns: string[]) {
+ this.searchTerm = new FormControl('');
+ this.searchTerm.valueChanges
+ .pipe(
+ // debounceTime(300),
+ // filter(value => value.length > 2),
+ tap((filterValue: any) => {
+ this.filters[adminId]['field'] = filterValue;
+ this.setFilter(adminId, this.filters[adminId]);
+ filterValue = filterValue.trim(); // Remove whitespace
+ filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
+ setTimeout(() => {
+ this.dataSource.filter = filterValue;
+ }, 0);
+ this.dataSource.filterPredicate = (template, filter: string) => {
+ return this.functionsService.filterUnSensitive(template, filter, this.filterColumns);
+ };
+ }),
+ ).subscribe();
this.filterColumns = filterColumns;
this.dataSource = new MatTableDataSource(data);
@@ -67,7 +98,7 @@ export class AdministrationService {
this.dataSource.sort = sort;
- this.applyFilter(adminId, this.getFilter(adminId, 'field'));
+ this.searchTerm.setValue(this.getFilter(adminId, 'field'));
merge(sort.sortChange, paginator.page)
.pipe(
@@ -101,15 +132,4 @@ export class AdministrationService {
return null;
}
}
-
- applyFilter(adminId: string, filterValue: string) {
- this.filters[adminId]['field'] = filterValue;
- this.setFilter(adminId, this.filters[adminId]);
- filterValue = filterValue.trim(); // Remove whitespace
- filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
- this.dataSource.filter = filterValue;
- this.dataSource.filterPredicate = (template, filter: string) => {
- return this.functionsService.filterUnSensitive(template, filter, this.filterColumns);
- };
- }
}
diff --git a/src/frontend/app/administration/user/users-administration.component.html b/src/frontend/app/administration/user/users-administration.component.html
index 8354cd380ab584ba348cb37aac7d9e3db6e9774f..9fde9b75a0ba6d7d52f69988097e0f2dd18fa745 100755
--- a/src/frontend/app/administration/user/users-administration.component.html
+++ b/src/frontend/app/administration/user/users-administration.component.html
@@ -52,8 +52,7 @@
<div class="row">
<div class="col-md-6 col-xs-6">
<mat-form-field>
- <input matInput (keyup)="adminService.applyFilter('admin_users', $event.target.value)"
- placeholder="{{lang.filterBy}}" [value]="adminService.getFilter('admin_users', 'field')">
+ <input matInput [formControl]="adminService.getFilterField()" placeholder="{{lang.filterBy}}">
<mat-button-toggle class="webserviceAccount" matSuffix
(click)="$event.stopPropagation();toggleWebserviceAccount()"
[checked]="this.withWebserviceAccount" title="{{lang.displayWebserviceAccount}}">