wip(web-worker): base functionality implemented

DanielHabenicht · DanielHabenicht · commit 95577d9436c9 · 2019-08-11T18:36:33.000+02:00
diff --git a/Phonebook.Frontend/src/app/modules/table/PersonsDataSource.ts b/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();
     });
   }
 
diff --git a/Phonebook.Frontend/src/app/modules/table/SearchParams.ts b/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;
+}
diff --git a/Phonebook.Frontend/src/app/modules/table/components/table/table.component.ts b/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([]);
diff --git a/Phonebook.Frontend/src/app/modules/table/dialogs/table-settings-dialog/table-settings.dialog.html b/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>
diff --git a/Phonebook.Frontend/src/app/modules/table/dialogs/table-settings-dialog/table-settings.dialog.ts b/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() {
diff --git a/Phonebook.Frontend/src/app/modules/table/table-logic.ts b/Phonebook.Frontend/src/app/modules/table/table-logic.ts
@@ -1,9 +1,9 @@
 import { Helpers } from 'src/app/modules/table/helpers';
 import { ColumnDefinitions } from 'src/app/shared/config/columnDefinitions';
-import { Column } from 'src/app/shared/models';
 import { Person } from 'src/app/shared/models/classes/Person';
 import { PhonebookSortDirection } from 'src/app/shared/models/enumerables/PhonebookSortDirection';
 import { TableSort } from 'src/app/shared/models/interfaces/TableSort';
+import { ColumnId } from 'src/app/shared/models/enumerables/ColumnId';
 
 /**
  * This Class Contains the Filter and Sort Logic of the User List.
@@ -15,15 +15,15 @@ export class TableLogic {
    * @param filterString
    * @param columns
    */
-  public static filter(persons: Person[], filterString: string, searchColumns: Column[]): Person[] {
+  public static filter(persons: Person[], filterString: string, searchColumns: ColumnId[]): Person[] {
     if (filterString === '') {
       return persons;
     }
     const searchString = TableLogic.prepareSearchString(filterString);
 
     return persons.filter(person => {
       for (let i = 0; i < searchColumns.length; i++) {
-        if (searchColumns[i].filterFunction(searchString, person)) {
+        if (ColumnDefinitions[searchColumns[i]].filterFunction(searchString, person)) {
           return true;
         }
       }
@@ -47,7 +47,7 @@ export class TableLogic {
    * @param filterString The keyword you are ranking after.
    * @param columns Column enum with set Flags for each Column you want to search in.
    */
-  public static rankedSort(list: Person[], rankString: string, columns: Column[]): Person[] {
+  public static rankedSort(list: Person[], rankString: string, columns: ColumnId[]): Person[] {
     const rankedList: RankedListItem<Person>[] = list.map(person => {
       return new RankedListItem<Person>(person);
     });
@@ -60,8 +60,8 @@ export class TableLogic {
 
       // Calculate the rank for all items.
       columns.forEach(col => {
-        if (col.filterFunction(searchString, x.item)) {
-          x.rank += col.rank;
+        if (ColumnDefinitions[col].filterFunction(searchString, x.item)) {
+          x.rank += ColumnDefinitions[col].rank;
         }
       });
     }
diff --git a/Phonebook.Frontend/src/app/modules/table/table.worker.ts b/Phonebook.Frontend/src/app/modules/table/table.worker.ts
@@ -0,0 +1,7 @@
+import { performSearch } from 'src/app/modules/table/SearchParams';
+
+/// <reference lib="webworker" />
+
+addEventListener('message', ({ data }) => {
+  postMessage(performSearch(data));
+});
diff --git a/Phonebook.Frontend/src/app/shared/components/add-filter/add-filter.component.ts b/Phonebook.Frontend/src/app/shared/components/add-filter/add-filter.component.ts
@@ -38,6 +38,6 @@ export class AddFilterComponent {
     if (this.resetSearchTerm) {
       this.store.dispatch(new UpdateUrl({ searchTerm: '' }));
     }
-    this.store.dispatch(new AddSearchFilter({ filterColumn: this.filterColumn, filterValue: this.filterValue }));
+    this.store.dispatch(new AddSearchFilter({ filterColumn: this.filterColumn.id, filterValue: this.filterValue }));
   }
 }
diff --git a/Phonebook.Frontend/src/app/shared/components/search/search.component.html b/Phonebook.Frontend/src/app/shared/components/search/search.component.html
@@ -4,7 +4,7 @@
   </button>
   <mat-chip-list>
     <mat-chip *ngFor="let filter of searchFilters$ | async" [removable]="true" (removed)="removeFilter(filter)">
-      {{ columnTranslate.getTranslation(filter.filterColumn.id) }}: {{ filter.filterValue }}
+      {{ columnTranslate.getTranslation(filter.filterColumn) }}: {{ filter.filterValue }}
       <mat-icon matChipRemove class="pb-chip-remove">cancel</mat-icon>
     </mat-chip>
   </mat-chip-list>
diff --git a/Phonebook.Frontend/src/app/shared/components/search/search.component.ts b/Phonebook.Frontend/src/app/shared/components/search/search.component.ts
@@ -6,7 +6,14 @@ import { Observable } from 'rxjs';
 import { ColumnDefinitions } from 'src/app/shared/config/columnDefinitions';
 import { ColumnTranslate } from 'src/app/shared/config/columnTranslate';
 import { SearchFilter } from 'src/app/shared/models';
-import { AddSearchFilter, RemoveLastSearchFilter, RemoveSearchFilter, ResetSearch, SearchState, UpdateUrl } from 'src/app/shared/states';
+import {
+  AddSearchFilter,
+  RemoveLastSearchFilter,
+  RemoveSearchFilter,
+  ResetSearch,
+  SearchState,
+  UpdateUrl
+} from 'src/app/shared/states';
 
 @Component({
   selector: 'app-search',
@@ -80,7 +87,7 @@ export class SearchComponent implements OnInit, OnDestroy {
         return keyvalue[0].toLowerCase() === this.columnTranslate.getTranslation(col.id).toLowerCase();
       });
       if (col != null) {
-        this.store.dispatch(new AddSearchFilter({ filterColumn: col, filterValue: keyvalue[1] }));
+        this.store.dispatch(new AddSearchFilter({ filterColumn: col.id, filterValue: keyvalue[1] }));
         (event.target as HTMLInputElement).value = '';
       } else {
         this.snackBar
diff --git a/Phonebook.Frontend/src/app/shared/models/classes/Service.ts b/Phonebook.Frontend/src/app/shared/models/classes/Service.ts
@@ -1,3 +1,5 @@
+import { Location } from 'src/app/shared/models/classes/Location';
+
 /* tslint:disable:variable-name */
 export class Service {
   public Location: Location;
diff --git a/Phonebook.Frontend/src/app/shared/models/interfaces/SearchFilter.ts b/Phonebook.Frontend/src/app/shared/models/interfaces/SearchFilter.ts
@@ -1,6 +1,6 @@
-import { Column } from './Column';
+import { ColumnId } from 'src/app/shared/models/enumerables/ColumnId';
 
 export interface SearchFilter {
-  filterColumn: Column;
+  filterColumn: ColumnId;
   filterValue: string;
 }
diff --git a/Phonebook.Frontend/src/app/shared/states/Search.state.ts b/Phonebook.Frontend/src/app/shared/states/Search.state.ts
@@ -80,7 +80,7 @@ export class SearchState {
           const col = ColumnDefinitions.getColumnById(key);
           if (col != null) {
             searchFilter.push({
-              filterColumn: col,
+              filterColumn: col.id,
               filterValue: pathSegment.queryParamMap.get(key) || ''
             });
           }
@@ -108,20 +108,20 @@ export class SearchState {
   public static searchFilters(state: SearchStateModel): SearchFilter[] {
     return state.searchFilters.map(filter => {
       const tmp = ColumnDefinitions.getAll().find(c => {
-        return c.id === filter.filterColumn.id;
+        return c.id === filter.filterColumn;
       });
       if (tmp == null) {
         throw Error('Filter Column not found.');
       }
-      filter.filterColumn = tmp;
+      filter.filterColumn = tmp.id;
       return filter;
     });
   }
 
   @Action(AddSearchFilter)
   public addSearchFilter(ctx: StateContext<SearchStateModel>, action: AddSearchFilter) {
     const state = ctx.getState();
-    const index = state.searchFilters.findIndex(f => f.filterColumn.id === action.searchFilter.filterColumn.id);
+    const index = state.searchFilters.findIndex(f => f.filterColumn === action.searchFilter.filterColumn);
     if (index >= 0) {
       state.searchFilters[index] = action.searchFilter;
     } else {
@@ -185,7 +185,7 @@ export class SearchState {
     const routeSnapshot: ActivatedRouteSnapshot = routeState.root;
     if (update.searchFilter != null) {
       update.searchFilter.forEach(filter => {
-        params[filter.filterColumn.id] = filter.filterValue;
+        params[filter.filterColumn] = filter.filterValue;
       });
       // Remove Query Params that are not used anymore by setting them 'null' explicitly
       if (routeSnapshot.firstChild != null && routeSnapshot.firstChild.firstChild != null) {
diff --git a/Phonebook.Frontend/src/app/shared/states/Table.state.ts b/Phonebook.Frontend/src/app/shared/states/Table.state.ts
@@ -5,7 +5,7 @@ import { ColumnId } from 'src/app/shared/models/enumerables/ColumnId';
 
 export class SetVisibleTableColumns {
   public static readonly type: string = '[Table State] Set visible Table Columns';
-  constructor(public columns: Column[]) {}
+  constructor(public columns: ColumnId[]) {}
 }
 
 export class ResetTableSettings {
@@ -31,16 +31,17 @@ export interface TableStateModel {
 })
 export class TableState {
   @Selector()
-  public static visibleColumns(state: TableStateModel): Column[] {
-    return state.visibleColumns.map(col => {
-      const tmp = ColumnDefinitions.getAll().find(c => {
-        return c.id === col;
-      });
-      if (tmp == null) {
-        throw Error('TableState: Column with ID:' + col + ') not found.');
-      }
-      return tmp;
-    });
+  public static visibleColumns(state: TableStateModel): ColumnId[] {
+    return state.visibleColumns;
+    // .map(col => {
+    //   const tmp = ColumnDefinitions.getAll().find(c => {
+    //     return c.id === col;
+    //   });
+    //   if (tmp == null) {
+    //     throw Error('TableState: Column with ID:' + col + ') not found.');
+    //   }
+    //   return tmp;
+    // });
   }
 
   @Selector()
@@ -51,7 +52,7 @@ export class TableState {
   @Action(SetVisibleTableColumns)
   public setVisibleTableColumns(ctx: StateContext<TableStateModel>, action: SetVisibleTableColumns) {
     const state = ctx.getState();
-    ctx.setState({ ...state, visibleColumns: action.columns.map(col => col.id) });
+    ctx.setState({ ...state, visibleColumns: action.columns });
   }
 
   @Action(ResetTableSettings)

Original file line number	Diff line number	Diff line change
`@@ -21,7 +21,7 @@ import { SearchState, SetTableResultCount, TableState, UpdateUrl } from 'src/app`
`21`	`21`	`})`
`22`	`22`	`export class TableComponent implements OnInit, OnDestroy {`
`23`	`23`	`public get displayedColumns(): string[] {`
`24`		`- return this.store.selectSnapshot(TableState.visibleColumns).map(col => col.id);`
	`24`	`+ return this.store.selectSnapshot(TableState.visibleColumns);`
`25`	`25`	`}`
`26`	`26`
`27`	`27`	`public dataSource: PersonsDataSource = new PersonsDataSource([]);`
Original file line number	Diff line number	Diff line change
`@@ -38,6 +38,6 @@ export class AddFilterComponent {`
`38`	`38`	`if (this.resetSearchTerm) {`
`39`	`39`	`this.store.dispatch(new UpdateUrl({ searchTerm: '' }));`
`40`	`40`	`}`
`41`		`- this.store.dispatch(new AddSearchFilter({ filterColumn: this.filterColumn, filterValue: this.filterValue }));`
	`41`	`+ this.store.dispatch(new AddSearchFilter({ filterColumn: this.filterColumn.id, filterValue: this.filterValue }));`
`42`	`42`	`}`
`43`	`43`	`}`