Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

Dictionaries and users search

Browse Source
This commit is contained in:
Adina Țeudan 2020-12-08 13:19:54 +02:00
parent 303dd85ed8
commit cf8407ec58
8 changed files with 73 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.html
View File

@ -1,6 +1,13 @@
<section>
<div class="page-header">
<redaction-admin-breadcrumbs></redaction-admin-breadcrumbs>
<redaction-admin-breadcrumbs class="flex-1"></redaction-admin-breadcrumbs>
<form [formGroup]="searchForm">
<div class="red-input-group">
<input [placeholder]="'dictionary-listing.search' | translate" formControlName="query" name="query" type="text" class="with-icon mt-0" />
<mat-icon class="icon-right" svgIcon="red:search"></mat-icon>
</div>
</form>
<div class="actions">
<redaction-icon-button
@ -42,7 +49,7 @@
</div>
<span class="all-caps-label">
{{ 'dictionary-listing.table-header.title' | translate: { length: dictionaries.length } }}
{{ 'dictionary-listing.table-header.title' | translate: { length: displayedDictionaries.length } }}
</span>
</div>
@ -65,7 +72,7 @@
<!-- Table lines -->
<div
class="table-item pointer"
*ngFor="let dict of dictionaries | sortBy: sortingOption.order:sortingOption.column"
*ngFor="let dict of displayedDictionaries | sortBy: sortingOption.order:sortingOption.column"
[routerLink]="['/ui/admin/dictionaries/' + dict.type]"
>
<div class="pr-0" (click)="toggleDictSelected($event, dict)">

4
apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.scss
View File

@ -68,8 +68,10 @@ redaction-table-col-name::ng-deep {
}
}
.actions {
.page-header .actions {
display: flex;
width: calc(353px - 24px);
justify-content: flex-end;
.ml-6 {
margin-left: 6px;

23
apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.ts
View File

@ -7,6 +7,8 @@ import { AppStateService } from '../../../state/app-state.service';
import { tap } from 'rxjs/operators';
import { forkJoin } from 'rxjs';
import { PermissionsService } from '../../../common/service/permissions.service';
import { FormBuilder, FormGroup } from '@angular/forms';
import { debounce } from '../../../utils/debounce';
@Component({
selector: 'redaction-dictionary-listing-screen',
@ -16,27 +18,42 @@ import { PermissionsService } from '../../../common/service/permissions.service'
export class DictionaryListingScreenComponent implements OnInit {
public chartData: DoughnutChartConfig[] = [];
public dictionaries: TypeValue[];
public displayedDictionaries: TypeValue[];
public selectedDictKeys: string[] = [];
public searchForm: FormGroup;
constructor(
private readonly _dialogService: DialogService,
private readonly _sortingService: SortingService,
private readonly _formBuilder: FormBuilder,
private readonly _dictionaryControllerService: DictionaryControllerService,
private readonly _appStateService: AppStateService,
public readonly permissionsService: PermissionsService
) {}
) {
this.searchForm = this._formBuilder.group({
query: ['']
});
this.searchForm.valueChanges.subscribe((value) => this._executeSearch(value));
}
ngOnInit(): void {
this._loadDictionaryData();
this._calculateData();
}
@debounce(200)
private _executeSearch(value: { query: string }) {
this.displayedDictionaries = this.dictionaries.filter((dict) => dict.label.toLowerCase().includes(value.query.toLowerCase()));
}
private _loadDictionaryData() {
this._appStateService.reset();
const appStateDictionaryData = this._appStateService.dictionaryData;
this.dictionaries = Object.keys(appStateDictionaryData)
.map((key) => appStateDictionaryData[key])
.filter((d) => !d.virtual);
this.displayedDictionaries = [...this.dictionaries];
const dataObs = [];
this.dictionaries.forEach((item) => {
const observable = this._dictionaryControllerService.getDictionaryForType(item.type).pipe(
@ -86,12 +103,12 @@ export class DictionaryListingScreenComponent implements OnInit {
if (this.areSomeDictsSelected) {
this.selectedDictKeys = [];
} else {
this.selectedDictKeys = this.dictionaries.map((dict) => dict.type);
this.selectedDictKeys = this.displayedDictionaries.map((dict) => dict.type);
}
}
public get areAllDictsSelected() {
return this.dictionaries.length !== 0 && this.selectedDictKeys.length === this.dictionaries.length;
return this.displayedDictionaries.length !== 0 && this.selectedDictKeys.length === this.displayedDictionaries.length;
}
public get areSomeDictsSelected() {

14
apps/red-ui/src/app/screens/admin/users/user-listing-screen.component.html
View File

@ -1,6 +1,14 @@
<section>
<div class="page-header">
<redaction-admin-breadcrumbs></redaction-admin-breadcrumbs>
<redaction-admin-breadcrumbs class="flex-1"></redaction-admin-breadcrumbs>
<form [formGroup]="searchForm">
<div class="red-input-group">
<input [placeholder]="'dictionary-listing.search' | translate" formControlName="query" name="query" type="text" class="with-icon mt-0" />
<mat-icon class="icon-right" svgIcon="red:search"></mat-icon>
</div>
</form>
<div class="actions">
<redaction-circle-button
class="ml-6"
@ -17,7 +25,7 @@
<div class="left-container">
<div class="header-item">
<span class="all-caps-label">
{{ 'user-listing.table-header.title' | translate: { length: users.length } }}
{{ 'user-listing.table-header.title' | translate: { length: displayedUsers.length } }}
</span>
</div>
@ -31,7 +39,7 @@
<div class="grid-container">
<!-- Table lines -->
<div class="table-item" *ngFor="let user of users">
<div class="table-item" *ngFor="let user of displayedUsers">
<div>
<redaction-initials-avatar [userId]="user.userId" [withName]="true" size="large"></redaction-initials-avatar>
</div>

5
apps/red-ui/src/app/screens/admin/users/user-listing-screen.component.scss
View File

@ -21,3 +21,8 @@
width: 353px;
min-width: 353px;
}
.page-header .actions {
width: calc(353px - 24px);
justify-content: flex-end;
}

20
apps/red-ui/src/app/screens/admin/users/user-listing-screen.component.ts
View File

@ -2,18 +2,32 @@ import { Component, OnInit } from '@angular/core';
import { PermissionsService } from '../../../common/service/permissions.service';
import { UserService } from '../../../user/user.service';
import { User } from '@redaction/red-ui-http';
import { FormBuilder, FormGroup } from '@angular/forms';
import { debounce } from '../../../utils/debounce';
@Component({
selector: 'redaction-user-listing-screen',
templateUrl: './user-listing-screen.component.html',
styleUrls: ['./user-listing-screen.component.scss']
})
export class UserListingScreenComponent implements OnInit {
export class UserListingScreenComponent {
public users: User[];
public displayedUsers: User[];
public searchForm: FormGroup;
constructor(public readonly permissionsService: PermissionsService, private readonly userService: UserService) {
constructor(public readonly permissionsService: PermissionsService, private readonly userService: UserService, private readonly _formBuilder: FormBuilder) {
this.users = this.userService.allUsers;
this.displayedUsers = [...this.users];
this.searchForm = this._formBuilder.group({
query: ['']
});
this.searchForm.valueChanges.subscribe((value) => this._executeSearch(value));
}
ngOnInit(): void {}
@debounce(200)
private _executeSearch(value: { query: string }) {
this.displayedUsers = this.users.filter((user) => this.userService.getName(user).toLowerCase().includes(value.query.toLowerCase()));
}
}

4
apps/red-ui/src/app/user/user.service.ts
View File

@ -9,7 +9,9 @@ export class UserWrapper {
constructor(private _currentUser: KeycloakProfile, public roles: string[], public id: string) {}
get name() {
return this._currentUser.firstName + ' ' + this._currentUser.lastName;
return this._currentUser.firstName && this._currentUser.lastName
? `${this._currentUser.firstName} ${this._currentUser.lastName}`
: this._currentUser.username;
}
get isManager() {

6
apps/red-ui/src/assets/i18n/en.json
View File

@ -533,7 +533,8 @@
"table-col-names": {
"type": "Type",
"hint-redaction": "Hint/Redaction"
}
},
"search": "Search..."
},
"user-listing": {
"table-header": {
@ -542,7 +543,8 @@
"table-col-names": {
"name": "Name",
"email": "Email"
}
},
"search": "Search..."
},
"dictionaries": "Dictionaries",
"user-management": "User Management"