Dictionaries and users search

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

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

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

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

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

@@ -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() {

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

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

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

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

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

@@ -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()));
+    }
 }

apps/red-ui/src/app/user/user.service.ts

@@ -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() {

apps/red-ui/src/assets/i18n/en.json

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