feat(web worker): more fluent search

Phonebook.Frontend/.gitignore

@@ -1,13 +1,18 @@
 # See http://help.github.com/ignore-files/ for more about ignoring files.
 
 # compiled output
-dist/
+/dist
 /tmp
 /out-tsc
-/src/changelog.md
+# Only exists if Bazel was run
+/bazel-out
 
 # dependencies
-node_modules/
+/node_modules
+
+# profiling files
+chrome-profiler-events.json
+speed-measure-plugin.json
 
 # IDEs and editors
 /.idea
@@ -24,23 +29,28 @@ node_modules/
 !.vscode/tasks.json
 !.vscode/launch.json
 !.vscode/extensions.json
+.history/*
 
 # misc
 /.sass-cache
 /connect.lock
 /coverage
 /libpeerconnection.log
 npm-debug.log
+yarn-error.log
 testem.log
 /typings
-yarn-error.log
 key.pem
 cert.pem
 
-# e2e
-/e2e/*.js
-/e2e/*.map
-
 # System Files
 .DS_Store
-Thumbs.db
+Thumbs.db
+
+
+# Custom Settings
+
+/src/changelog.md
+
+## e2e
+/e2e/*.map

Phonebook.Frontend/angular.json

@@ -14,7 +14,7 @@
             "outputPath": "dist",
             "index": "src/index.html",
             "main": "src/main.ts",
-            "tsConfig": "src/tsconfig.app.json",
+            "tsConfig": "tsconfig.app.json",
             "polyfills": "src/polyfills.ts",
             "assets": [
               "src/assets",
@@ -79,7 +79,7 @@
             "index": "src/index.html",
             "main": "src/main.ts",
             "showCircularDependencies": true,
-            "tsConfig": "src/tsconfig.app.json",
+            "tsConfig": "tsconfig.app.json",
             "polyfills": "src/polyfills.ts",
             "assets": [
               "src/assets",
@@ -112,7 +112,8 @@
                 "replace": "src/environments/environment.ts",
                 "with": "src/environments/environment.prod.ts"
               }
-            ]
+            ],
+            "webWorkerTsConfig": "tsconfig.worker.json"
           },
           "configurations": {
             "en": {
@@ -172,7 +173,7 @@
             "main": "src/test.ts",
             "karmaConfig": "./karma.conf.js",
             "polyfills": "src/polyfills.ts",
-            "tsConfig": "src/tsconfig.spec.json",
+            "tsConfig": "tsconfig.spec.json",
             "scripts": [],
             "sourceMap": false,
             "styles": [
@@ -196,38 +197,22 @@
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
             "tsConfig": [
-              "src/tsconfig.app.json",
-              "src/tsconfig.spec.json"
+              "tsconfig.app.json",
+              "tsconfig.spec.json",
+              "e2e/tsconfig.json",
+              "tsconfig.worker.json"
             ],
             "exclude": [
               "**/node_modules/**"
             ]
           }
-        }
-      }
-    },
-    "phonebook-e2e": {
-      "root": "",
-      "sourceRoot": "",
-      "projectType": "application",
-      "architect": {
+        },
         "e2e": {
           "builder": "@angular-devkit/build-angular:protractor",
           "options": {
-            "protractorConfig": "./protractor.conf.js",
+            "protractorConfig": "e2e/protractor.conf.js",
             "devServerTarget": "phonebook:serve"
           }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "e2e/tsconfig.e2e.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
         }
       }
     }

Phonebook.Frontend/protractor.conf.js → Phonebook.Frontend/e2e/protractor.conf.js

@@ -6,9 +6,12 @@ process.env.CHROME_BIN = require('puppeteer').executablePath();
 
 const { SpecReporter } = require('jasmine-spec-reporter');
 
+/**
+ * @type { import("protractor").Config }
+ */
 exports.config = {
   allScriptsTimeout: 11000,
-  specs: ['./e2e/**/*.e2e-spec.ts'],
+  specs: ['./src/e2e/**/*.e2e-spec.ts'],
   capabilities: {
     browserName: 'chrome',
     binary: process.env.CHROME_BIN,
@@ -26,7 +29,7 @@ exports.config = {
   },
   onPrepare() {
     require('ts-node').register({
-      project: 'e2e/tsconfig.e2e.json'
+      project: require('path').join(__dirname, './tsconfig.json')
     });
     jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
   },

Phonebook.Frontend/e2e/tsconfig.e2e.json → Phonebook.Frontend/e2e/tsconfig.json

@@ -2,13 +2,8 @@
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "outDir": "../out-tsc/e2e",
-    "baseUrl": "./",
     "module": "commonjs",
     "target": "es5",
-    "types": [
-      "jasmine",
-      "jasminewd2",
-      "node"
-    ]
+    "types": ["jasmine", "jasminewd2", "node"]
   }
-}
+}

Phonebook.Frontend/src/app/modules/table/PersonsDataSource.ts

@@ -1,9 +1,11 @@
 import { MatTableDataSource } from '@angular/material/table';
 import { BehaviorSubject, Observable } from 'rxjs';
-import { TableLogic } from 'src/app/modules/table/table-logic';
-import { Column, SearchFilter, TableSort } from 'src/app/shared/models';
+import { performSearch, SearchParams } from 'src/app/modules/table/SearchParams';
+import { SearchFilter, TableSort } from 'src/app/shared/models';
 import { Person } from 'src/app/shared/models/classes';
-import { PhonebookSortDirection } from 'src/app/shared/models/enumerables/PhonebookSortDirection';
+import { ColumnId } from 'src/app/shared/models/enumerables/ColumnId';
+import { Environment } from 'src/environments/EnvironmentInterfaces';
+import { runtimeEnvironment } from 'src/environments/runtime-environment';
 
 export class PersonsDataSource extends MatTableDataSource<Person> {
   private PAGE_SIZE: number = 30;
@@ -33,6 +35,7 @@ export class PersonsDataSource extends MatTableDataSource<Person> {
   public dataChanged: BehaviorSubject<Person[]> = new BehaviorSubject<Person[]>(this.data);
 
   private lastFilterKeyword: string = '';
+  private worker: Worker | null = null;
 
   constructor(private dataSource: Person[]) {
     super();
@@ -50,38 +53,41 @@ export class PersonsDataSource extends MatTableDataSource<Person> {
   public refresh(
     filterKeyword: string,
     searchFilters: SearchFilter[],
-    searchableColumns: Column[],
+    searchableColumns: ColumnId[],
     sort: TableSort
   ): Observable<Person[]> {
     this.loadingSubject.next(true);
     return new Observable<Person[]>(observer => {
-      let preResult = this.dataSource;
+      const searchParams: SearchParams = {
+        filterKeyword: filterKeyword,
+        searchFilters: searchFilters,
+        searchableColumns: searchableColumns,
+        sort: sort,
+        data: this.dataSource
+      };
 
-      // Filtering
-      searchFilters.forEach(searchFilter => {
-        preResult = TableLogic.filter(preResult, searchFilter.filterValue, [searchFilter.filterColumn]);
-      });
+      if (typeof Worker !== 'undefined' && runtimeEnvironment.environment != Environment.development) {
+        if(this.worker == null){
+          this.worker = new Worker('./table.worker', { type: 'module' });
+        }
+        this.worker.onmessage = ({ data }) => {
+          this.allData = data;
+          this.lastFilterKeyword = filterKeyword;
 
-      // Searching
-      let searchResult: Person[] = TableLogic.filter(preResult, filterKeyword, searchableColumns);
+          this.loadingSubject.next(false);
+          observer.next(data);
+          observer.complete();
+        };
+        this.worker.postMessage(searchParams);
+      } else {
+        let searchResult = performSearch(searchParams);
+        this.allData = searchResult;
+        this.lastFilterKeyword = filterKeyword;
 
-      // Sorting
-      switch (sort.direction) {
-        case PhonebookSortDirection.none: {
-          searchResult = TableLogic.rankedSort(searchResult, filterKeyword, searchableColumns);
-          break;
-        }
-        default: {
-          searchResult = TableLogic.sort(searchResult, sort);
-          break;
-        }
+        this.loadingSubject.next(false);
+        observer.next(searchResult);
+        observer.complete();
       }
-      this.allData = searchResult;
-      this.lastFilterKeyword = filterKeyword;
-
-      this.loadingSubject.next(false);
-      observer.next(searchResult);
-      observer.complete();
     });
   }
 

Phonebook.Frontend/src/app/modules/table/SearchParams.ts

@@ -0,0 +1,36 @@
+import { TableLogic } from 'src/app/modules/table/table-logic';
+import { Person, PhonebookSortDirection, SearchFilter, TableSort } from 'src/app/shared/models';
+import { ColumnId } from 'src/app/shared/models/enumerables/ColumnId';
+
+export class SearchParams {
+  public filterKeyword: string;
+  public searchFilters: SearchFilter[];
+  public searchableColumns: ColumnId[];
+  public sort: TableSort;
+  public data: Person[];
+}
+
+export function performSearch(searchParams: SearchParams): Person[] {
+  let preResult = searchParams.data;
+
+  // Filtering
+  searchParams.searchFilters.forEach(searchFilter => {
+    preResult = TableLogic.filter(preResult, searchFilter.filterValue, [searchFilter.filterColumn]);
+  });
+
+  // Searching
+  let searchResult: Person[] = TableLogic.filter(preResult, searchParams.filterKeyword, searchParams.searchableColumns);
+
+  // Sorting
+  switch (searchParams.sort.direction) {
+    case PhonebookSortDirection.none: {
+      searchResult = TableLogic.rankedSort(searchResult, searchParams.filterKeyword, searchParams.searchableColumns);
+      break;
+    }
+    default: {
+      searchResult = TableLogic.sort(searchResult, searchParams.sort);
+      break;
+    }
+  }
+  return searchResult;
+}

Phonebook.Frontend/src/app/modules/table/components/table/table.component.ts

@@ -21,7 +21,7 @@ import { SearchState, SetTableResultCount, TableState, UpdateUrl } from 'src/app
 })
 export class TableComponent implements OnInit, OnDestroy {
   public get displayedColumns(): string[] {
-    return this.store.selectSnapshot(TableState.visibleColumns).map(col => col.id);
+    return this.store.selectSnapshot(TableState.visibleColumns);
   }
 
   public dataSource: PersonsDataSource = new PersonsDataSource([]);

Phonebook.Frontend/src/app/modules/table/dialogs/table-settings-dialog/table-settings.dialog.html

@@ -30,7 +30,7 @@ <h2 i18n="TableSettingsDialog|Title of displayed table columns@@TableSettingsDia
       >
         <mat-card class="item" cdkDrag *ngFor="let column of displayedColumns">
           <mat-card-title-group>
-            {{ columnTranslate.getTranslation(column.id) }}
+            {{ columnTranslate.getTranslation(column) }}
             <mat-icon>drag_handle</mat-icon>
           </mat-card-title-group>
         </mat-card>
@@ -53,7 +53,7 @@ <h2 i18n="TableSettingsDialog|Title of displayed table columns@@TableSettingsDia
       >
         <mat-card class="item" cdkDrag *ngFor="let column of notDisplayedColumns">
           <mat-card-title-group>
-            {{ columnTranslate.getTranslation(column.id) }}
+            {{ columnTranslate.getTranslation(column) }}
             <mat-icon>drag_handle</mat-icon>
           </mat-card-title-group>
         </mat-card>

Phonebook.Frontend/src/app/modules/table/dialogs/table-settings-dialog/table-settings.dialog.ts

@@ -3,7 +3,7 @@ import { Component, OnInit } from '@angular/core';
 import { Store } from '@ngxs/store';
 import { ColumnDefinitions } from 'src/app/shared/config/columnDefinitions';
 import { ColumnTranslate } from 'src/app/shared/config/columnTranslate';
-import { Column } from 'src/app/shared/models';
+import { ColumnId } from 'src/app/shared/models/enumerables/ColumnId';
 import { ResetTableSettings, SetVisibleTableColumns, TableState } from 'src/app/shared/states';
 
 @Component({
@@ -12,8 +12,8 @@ import { ResetTableSettings, SetVisibleTableColumns, TableState } from 'src/app/
   styleUrls: ['./table-settings.dialog.scss']
 })
 export class TableSettingsDialog implements OnInit {
-  public notDisplayedColumns: Column[] = [];
-  public displayedColumns: Column[] = this.store.selectSnapshot(TableState.visibleColumns);
+  public notDisplayedColumns: ColumnId[] = [];
+  public displayedColumns: ColumnId[] = this.store.selectSnapshot(TableState.visibleColumns);
 
   constructor(public store: Store, public columnTranslate: ColumnTranslate) {}
 
@@ -22,11 +22,13 @@ export class TableSettingsDialog implements OnInit {
   }
 
   private updateNotDisplayedColumns() {
-    this.notDisplayedColumns = ColumnDefinitions.getAll().filter(col => {
-      return !this.displayedColumns.some(column => {
-        return col.id === column.id;
-      });
-    });
+    this.notDisplayedColumns = ColumnDefinitions.getAll()
+      .filter(col => {
+        return !this.displayedColumns.some(columnId => {
+          return col.id === columnId;
+        });
+      })
+      .map(col => col.id);
   }
 
   public resetTableSettings() {