fix lint

static/src/app/common/user-interface/list-filter/list-filter.component.css

@@ -0,0 +1,15 @@
+.list-header {
+  width: 100%;
+  padding-bottom: 20px;
+}
+
+.add-btn {
+  margin-right: 16px;
+  margin-top: -3px;
+  float: right;
+}
+
+:host/deep/.mat-icon {
+  height: 32px;
+  width: 32px;
+}

static/src/app/common/user-interface/list-filter/list-filter.component.html

@@ -0,0 +1,12 @@
+<div class="input-group list-header pull-left">
+  <mat-button-toggle-group #group="matButtonToggleGroup">
+    <mat-button-toggle *ngFor="let button of filterButtons" value="{{button.value}}" (change)="execute(group)">
+      {{button.label}}
+    </mat-button-toggle>
+  </mat-button-toggle-group>
+  <button mat-icon-button class="add-btn">
+    <mat-icon svgIcon="{{addButton.svgIcon}}"
+              title="{{addButton.tooltip}}"
+              (click)="add()"></mat-icon>
+  </button>
+</div>

static/src/app/common/user-interface/list-filter/list-filter.component.ts

@@ -0,0 +1,28 @@
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+
+@Component({
+  selector: 'cc-list-filter',
+  templateUrl: './list-filter.component.html',
+  styleUrls: ['./list-filter.component.css']
+})
+export class ListFilterComponent {
+
+  @Input() filterButtons: any[];
+
+  @Input() addButton: any;
+
+  @Output() executeSearch = new EventEmitter();
+
+  @Output() openAddFrom = new EventEmitter();
+
+  constructor() {
+  }
+
+  execute(group) {
+    this.executeSearch.emit(group);
+  }
+
+  add() {
+    this.openAddFrom.emit();
+  }
+}

static/src/app/common/user-interface/search-field/search-field.component.css

@@ -0,0 +1,4 @@
+.list-header {
+  width: 100%;
+  padding-bottom: 20px;
+}

static/src/app/common/user-interface/search-field/search-field.component.html

@@ -0,0 +1,12 @@
+<div class="input-group list-header">
+    <input id="search-field"
+           type="text" #query class="form-control"
+           (keyup.enter)="emitSearch()"
+           [formControl]="searchTerm">
+    <span class="input-group-btn">
+      <button class="btn btn-default" type="button"
+            (click)="emitSearch()">
+      Suchen
+      </button>
+    </span>
+</div>

static/src/app/common/user-interface/search-field/search-field.component.ts

@@ -0,0 +1,43 @@
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {Location} from '@angular/common';
+import {ActivatedRoute} from '@angular/router';
+
+@Component({
+  selector: 'cc-list-search',
+  templateUrl: './search-field.component.html',
+  styleUrls: ['./search-field.component.css']
+})
+export class SearchFieldComponent implements OnInit {
+
+  @Input() searchTerm;
+
+  @Output() executeSearch = new EventEmitter();
+
+  @Output() searchTermStream = new EventEmitter();
+
+  constructor(private route: ActivatedRoute,
+              private location: Location) {
+  }
+
+  ngOnInit() {
+    const paramsObservable = this.route.queryParams
+                             .map(params => decodeURI(params['query'] || ''))
+                             .do(query => this.searchTerm.setValue(query));
+
+    const searchTermObservable = this.searchTerm.valueChanges
+                                .debounceTime(400)
+                                .do(query => this.adjustBrowserUrl(query));
+    this.searchTermStream.emit({params: paramsObservable, searchTerm: searchTermObservable});
+  }
+
+  emitSearch() {
+    this.executeSearch.emit();
+  }
+
+  adjustBrowserUrl(queryString = '') {
+    const absoluteUrl = this.location.path().split('?')[0];
+    const queryPart = queryString !== '' ? `query=${queryString}` : '';
+
+    this.location.replaceState(absoluteUrl, queryPart);
+  }
+}

static/src/app/decorations/decoration-list/decoration-list.component.html

@@ -1,42 +1,22 @@
 <div class="select-list">
-  <div class="input-group list-header pull-left">
+  <cc-list-filter
-    <mat-button-toggle-group #group="matButtonToggleGroup">
+    [filterButtons]="[{label: fraction.BLUFOR, value: 'BLUFOR'},
-      <mat-button-toggle value="BLUFOR" (change)="filterDecorations(group)">
+                      {label: fraction.OPFOR, value: 'OPFOR'},
-        {{fraction.BLUFOR}}
+                      {label: 'Global', value: 'GLOBAL'}]"
-      </mat-button-toggle>
+    [addButton]="{svgIcon: 'add', tooltip: 'Neue Auszeichnung hinzufügen'}"
-      <mat-button-toggle value="OPFOR" (change)="filterDecorations(group)">
+    (executeSearch)="filterDecorations($event)"
-        {{fraction.OPFOR}}
+    (openAddFrom)="openNewDecorationForm()">
-      </mat-button-toggle>
+  </cc-list-filter>
-      <mat-button-toggle value="GLOBAL" (change)="filterDecorations(group)">
-        Global
-      </mat-button-toggle>
-    </mat-button-toggle-group>
-    <button mat-icon-button class="add-btn">
-      <mat-icon svgIcon="add" title="Neue Auszeichnung hinzufügen"
-                (click)="openNewDecorationForm()"></mat-icon>
-    </button>
-  </div>
 
-  <div class="input-group list-header">
+  <cc-list-search [searchTerm]="searchTerm"
-    <input id="search-tasks"
+                  (searchTermStream)="initObservable($event)"
-           type="text" #query class="form-control"
+                  (executeSearch)="filterDecorations()">
-           (keyup.enter)="filterDecorations()"
+  </cc-list-search>
-           [formControl]="searchTerm">
-    <span class="input-group-btn">
-      <button class="btn btn-default" type="button"
-              (click)="filterDecorations()">
-        Suchen
-      </button>
-    </span>
-  </div>
-
-  <div>
-    <decoration-item *ngFor="let decoration of decorations$ | async"
-                     [decoration]="decoration"
-                     (decorationDelete)="deleteDecoration(decoration)"
-                     (decorationSelected)="selectDecoration($event)"
-                     [selected]="decoration._id == selectedDecorationId">
-    </decoration-item>
-  </div>
 
+  <decoration-item *ngFor="let decoration of decorations$ | async"
+                   [decoration]="decoration"
+                   (decorationDelete)="deleteDecoration(decoration)"
+                   (decorationSelected)="selectDecoration($event)"
+                   [selected]="decoration._id == selectedDecorationId">
+  </decoration-item>
 </div>

static/src/app/decorations/decoration-list/decoration-list.component.ts

@@ -1,5 +1,4 @@
 import {Component, OnInit} from '@angular/core';
-import {Location} from '@angular/common';
 
 import {FormControl} from '@angular/forms';
 import {ActivatedRoute, Router} from '@angular/router';
@@ -11,7 +10,7 @@ import {MatButtonToggleGroup} from '@angular/material';
 import {UIHelpers} from '../../utils/global.helpers';
 
 @Component({
-  selector: 'decoration-list',
+  selector: 'cc-decoration-list',
   templateUrl: './decoration-list.component.html',
   styleUrls: ['./decoration-list.component.css', '../../style/select-list.css']
 })
@@ -29,22 +28,15 @@ export class DecorationListComponent implements OnInit {
 
   constructor(private decorationService: DecorationService,
               private router: Router,
-              private route: ActivatedRoute,
+              private route: ActivatedRoute) {
-              private location: Location) {
   }
 
   ngOnInit() {
     this.decorations$ = this.decorationService.decorations$;
+  }
 
-    const paramsStream = this.route.queryParams
+  initObservable(observables: any) {
-                             .map(params => decodeURI(params['query'] || ''))
+    Observable.merge(observables.params as Observable<string>, observables.searchTerm)
-                             .do(query => this.searchTerm.setValue(query));
-
-    const searchTermStream = this.searchTerm.valueChanges
-                                 .debounceTime(400)
-                                 .do(query => this.adjustBrowserUrl(query));
-
-    Observable.merge(paramsStream, searchTermStream)
               .distinctUntilChanged()
               .switchMap(query => this.decorationService.findDecorations(query, this.radioModel))
               .subscribe();
@@ -79,12 +71,4 @@ export class DecorationListComponent implements OnInit {
     this.radioModel = UIHelpers.toggleReleaseButton(this.radioModel, group);
     this.decorations$ = this.decorationService.findDecorations(this.searchTerm.value, this.radioModel);
   }
-
-  adjustBrowserUrl(queryString = '') {
-    const absoluteUrl = this.location.path().split('?')[0];
-    const queryPart = queryString !== '' ? `query=${queryString}` : '';
-
-    this.location.replaceState(absoluteUrl, queryPart);
-  }
-
 }

static/src/app/decorations/decoration.module.ts

@@ -4,14 +4,10 @@ import {CommonModule} from '@angular/common';
 import {DecorationStore} from '../services/stores/decoration.store';
 import {DecorationService} from '../services/army-management/decoration.service';
 import {NgModule} from '@angular/core';
-import {MatButtonToggleModule} from '@angular/material';
-import {MatIconModule} from '@angular/material/icon';
-import {MatButtonModule} from '@angular/material/button';
 
 @NgModule({
   declarations: decorationsRoutingComponents,
-  imports: [CommonModule, SharedModule, MatButtonToggleModule, MatButtonModule, MatIconModule,
+  imports: [CommonModule, SharedModule, decorationRoutesModule],
-    decorationRoutesModule],
   providers: [DecorationStore, DecorationService]
 })
 export class DecorationsModule {

static/src/app/ranks/rank-list/rank-list.component.html

@@ -1,39 +1,22 @@
 <div class="select-list">
-  <div class="list-header">
+  <cc-list-filter
-    <mat-button-toggle-group #group="matButtonToggleGroup">
+    [filterButtons]="[{label: fraction.BLUFOR, value: 'BLUFOR'},
-      <mat-button-toggle value="BLUFOR" (change)="filterRanks(group)">
+                      {label: fraction.OPFOR, value: 'OPFOR'}]"
-        {{fraction.BLUFOR}}
+    [addButton]="{svgIcon: 'add', tooltip: 'Neuen Rang hinzufügen'}"
-      </mat-button-toggle>
+    (executeSearch)="filterRanks($event)"
-      <mat-button-toggle value="OPFOR" (change)="filterRanks(group)">
+    (openAddFrom)="openNewRankForm()">
-        {{fraction.OPFOR}}
+  </cc-list-filter>
-      </mat-button-toggle>
-    </mat-button-toggle-group>
-    <button mat-icon-button class="add-btn">
-      <mat-icon svgIcon="add" title="Neuen Rang hinzufügen"
-                (click)="openNewRankForm()"></mat-icon>
-    </button>
-  </div>
 
-  <div class="input-group list-header">
+  <cc-list-search [searchTerm]="searchTerm"
-    <input id="search-tasks"
+                  (searchTermStream)="initObservable($event)"
-           type="text" #query class="form-control"
+                  (executeSearch)="filterRanks()">
-           (keyup.enter)="filterRanks()"
+  </cc-list-search>
-           [formControl]="searchTerm">
-    <span class="input-group-btn">
-      <button class="btn btn-default" type="button"
-              (click)="filterRanks()">
-        Suchen
-      </button>
-    </span>
-  </div>
 
-  <div>
+  <pjm-rank-item *ngFor="let rank of ranks$ | async"
-    <pjm-rank-item *ngFor="let rank of ranks$ | async"
+                 [rank]="rank"
-                   [rank]="rank"
+                 (rankDelete)="deleteRank(rank)"
-                   (rankDelete)="deleteRank(rank)"
+                 (rankSelected)="selectRank($event)"
-                   (rankSelected)="selectRank($event)"
+                 [selected]="rank._id == selectedRankId">
-                   [selected]="rank._id == selectedRankId">
+  </pjm-rank-item>
-    </pjm-rank-item>
-  </div>
 
 </div>

static/src/app/ranks/rank-list/rank-list.component.ts

@@ -1,5 +1,4 @@
 import {Component, OnInit} from '@angular/core';
-import {Location} from '@angular/common';
 
 import {FormControl} from '@angular/forms';
 import {ActivatedRoute, Router} from '@angular/router';
@@ -11,7 +10,7 @@ import {UIHelpers} from '../../utils/global.helpers';
 import {MatButtonToggleGroup} from '@angular/material';
 
 @Component({
-  selector: 'rank-list',
+  selector: 'cc-rank-list',
   templateUrl: './rank-list.component.html',
   styleUrls: ['./rank-list.component.css', '../../style/select-list.css']
 })
@@ -29,29 +28,21 @@ export class RankListComponent implements OnInit {
 
   constructor(private rankService: RankService,
               private router: Router,
-              private route: ActivatedRoute,
+              private route: ActivatedRoute) {
-              private location: Location) {
   }
 
   ngOnInit() {
-
     this.ranks$ = this.rankService.ranks$;
+  }
 
-    const paramsStream = this.route.queryParams
+  initObservable(observables: any) {
-                             .map(params => decodeURI(params['query'] || ''))
+    Observable.merge(observables.params as Observable<string>, observables.searchTerm)
-                             .do(query => this.searchTerm.setValue(query));
-
-    const searchTermStream = this.searchTerm.valueChanges
-                                 .debounceTime(400)
-                                 .do(query => this.adjustBrowserUrl(query));
-
-    Observable.merge(paramsStream, searchTermStream)
               .distinctUntilChanged()
               .switchMap(query => this.rankService.findRanks(query, this.radioModel))
               .subscribe();
-
   }
 
+
   openNewRankForm() {
     this.selectedRankId = null;
     this.router.navigate([{outlets: {'right': ['new']}}], {relativeTo: this.route});
@@ -75,11 +66,4 @@ export class RankListComponent implements OnInit {
           });
     }
   }
-
-  adjustBrowserUrl(queryString = '') {
-    const absoluteUrl = this.location.path().split('?')[0];
-    const queryPart = queryString !== '' ? `query=${queryString}` : '';
-
-    this.location.replaceState(absoluteUrl, queryPart);
-  }
 }

static/src/app/ranks/ranks.module.ts

@@ -4,14 +4,10 @@ import {SharedModule} from '../shared.module';
 import {CommonModule} from '@angular/common';
 import {RankService} from '../services/army-management/rank.service';
 import {RankStore} from '../services/stores/rank.store';
-import {MatButtonToggleModule} from '@angular/material';
-import {MatIconModule} from '@angular/material/icon';
-import {MatButtonModule} from '@angular/material/button';
 
 @NgModule({
   declarations: ranksRoutingComponents,
-  imports: [CommonModule, SharedModule, MatButtonToggleModule, MatButtonModule, MatIconModule,
+  imports: [CommonModule, SharedModule, rankRouterModule],
-    rankRouterModule],
   providers: [RankStore, RankService]
 })
 export class RanksModule {

static/src/app/ranks/ranks.routing.ts

@@ -5,7 +5,6 @@ import {EditRankComponent} from './edit-rank/edit-rank.component';
 import {RankItemComponent} from './rank-list/rank-item.component';
 import {ModuleWithProviders} from '@angular/core';
 
-
 export const ranksRoutes: Routes = [{
   path: '', component: RankComponent,
   children: [

static/src/app/shared.module.ts

@@ -2,11 +2,17 @@ import {NgModule} from '@angular/core';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {ShowErrorComponent} from './common/show-error/show-error.component';
 import {CommonModule} from '@angular/common';
+import {ListFilterComponent} from './common/user-interface/list-filter/list-filter.component';
+import {SearchFieldComponent} from './common/user-interface/search-field/search-field.component';
+import {MatButtonToggleModule} from '@angular/material';
+import {MatButtonModule} from '@angular/material/button';
+import {MatIconModule} from '@angular/material/icon';
 
 @NgModule({
-  declarations: [ShowErrorComponent],
+  declarations: [ShowErrorComponent, ListFilterComponent, SearchFieldComponent],
-  imports: [CommonModule, FormsModule, ReactiveFormsModule],
+  imports: [CommonModule, FormsModule, ReactiveFormsModule, MatButtonToggleModule, MatButtonModule, MatIconModule],
-  exports: [FormsModule, ReactiveFormsModule, ShowErrorComponent],
+  exports: [FormsModule, ReactiveFormsModule, MatButtonToggleModule, MatButtonModule, MatIconModule, ShowErrorComponent,
+    ListFilterComponent, SearchFieldComponent],
 })
 export class SharedModule {
 }

static/src/app/squads/squad-list/squad-list.component.html

@@ -1,39 +1,21 @@
 <div class="select-list">
-  <div class="list-header">
+  <cc-list-filter
-    <mat-button-toggle-group #group="matButtonToggleGroup">
+    [filterButtons]="[{label: fraction.BLUFOR, value: 'BLUFOR'},
-      <mat-button-toggle value="BLUFOR" (change)="filterSquads(group)">
+                      {label: fraction.OPFOR, value: 'OPFOR'}]"
-        {{fraction.BLUFOR}}
+    [addButton]="{svgIcon: 'add', tooltip: 'Neues Squad hinzufügen'}"
-      </mat-button-toggle>
+    (executeSearch)="filterSquads($event)"
-      <mat-button-toggle value="OPFOR" (change)="filterSquads(group)">
+    (openAddFrom)="openNewRankForm()">
-        {{fraction.OPFOR}}
+  </cc-list-filter>
-      </mat-button-toggle>
-    </mat-button-toggle-group>
-    <button mat-icon-button class="add-btn">
-      <mat-icon svgIcon="add" title="Neues Squad hinzufügen"
-                (click)="openNewSquadForm()"></mat-icon>
-    </button>
-  </div>
 
-  <div class="input-group search-bar">
+  <cc-list-search [searchTerm]="searchTerm"
-    <input id="search-tasks"
+                  (searchTermStream)="initObservable($event)"
-           type="text" #query class="form-control"
+                  (executeSearch)="filterSquads()">
-           (keyup.enter)="filterSquads()"
+  </cc-list-search>
-           [formControl]="searchTerm">
-    <span class="input-group-btn">
-      <button class="btn btn-default" type="button"
-              (click)="filterSquads()">
-        Suchen
-      </button>
-    </span>
-  </div>
-
-  <div>
-    <pjm-squad-item *ngFor="let squad of squads$ | async"
-                    [squad]="squad"
-                    (squadDelete)="deleteSquad(squad)"
-                    (squadSelected)="selectSquad($event)"
-                    [selected]="squad._id == selectedSquadId">
-    </pjm-squad-item>
-  </div>
 
+  <pjm-squad-item *ngFor="let squad of squads$ | async"
+                  [squad]="squad"
+                  (squadDelete)="deleteSquad(squad)"
+                  (squadSelected)="selectSquad($event)"
+                  [selected]="squad._id == selectedSquadId">
+  </pjm-squad-item>
 </div>

static/src/app/squads/squad-list/squad-list.component.ts

@@ -1,5 +1,4 @@
 import {Component, OnInit} from '@angular/core';
-import {Location} from '@angular/common';
 
 import {FormControl} from '@angular/forms';
 import {ActivatedRoute, Router} from '@angular/router';
@@ -11,7 +10,7 @@ import {UIHelpers} from '../../utils/global.helpers';
 import {MatButtonToggleGroup} from '@angular/material';
 
 @Component({
-  selector: 'squad-list',
+  selector: 'cc-squad-list',
   templateUrl: './squad-list.component.html',
   styleUrls: ['./squad-list.component.css', '../../style/select-list.css']
 })
@@ -29,27 +28,18 @@ export class SquadListComponent implements OnInit {
 
   constructor(private squadService: SquadService,
               private router: Router,
-              private route: ActivatedRoute,
+              private route: ActivatedRoute) {
-              private location: Location) {
   }
 
   ngOnInit() {
-
     this.squads$ = this.squadService.squads$;
+  }
 
-    const paramsStream = this.route.queryParams
+  initObservable(observables: any) {
-                             .map(params => decodeURI(params['query'] || ''))
+    Observable.merge(observables.params as Observable<string>, observables.searchTerm)
-                             .do(query => this.searchTerm.setValue(query));
-
-    const searchTermStream = this.searchTerm.valueChanges
-                                 .debounceTime(400)
-                                 .do(query => this.adjustBrowserUrl(query));
-
-    Observable.merge(paramsStream, searchTermStream)
               .distinctUntilChanged()
               .switchMap(query => this.squadService.findSquads(query, this.radioModel))
               .subscribe();
-
   }
 
   openNewSquadForm() {
@@ -75,11 +65,4 @@ export class SquadListComponent implements OnInit {
     this.radioModel = UIHelpers.toggleReleaseButton(this.radioModel, group);
     this.squads$ = this.squadService.findSquads(this.searchTerm.value, this.radioModel);
   }
-
-  adjustBrowserUrl(queryString = '') {
-    const absoluteUrl = this.location.path().split('?')[0];
-    const queryPart = queryString !== '' ? `query=${queryString}` : '';
-
-    this.location.replaceState(absoluteUrl, queryPart);
-  }
 }

static/src/app/squads/squads.module.ts

@@ -4,14 +4,10 @@ import {SharedModule} from '../shared.module';
 import {squadRouterModule, squadsRoutingComponents} from './squads.routing';
 import {SquadStore} from '../services/stores/squad.store';
 import {SquadService} from '../services/army-management/squad.service';
-import {MatButtonToggleModule} from '@angular/material';
-import {MatIconModule} from '@angular/material/icon';
-import {MatButtonModule} from '@angular/material/button';
 
 @NgModule({
   declarations: squadsRoutingComponents,
-  imports: [CommonModule, SharedModule, MatButtonToggleModule, MatButtonModule, MatIconModule,
+  imports: [CommonModule, SharedModule, squadRouterModule],
-    squadRouterModule],
   providers: [SquadStore, SquadService]
 })
 export class SquadsModule {

static/src/app/style/select-list.css

@@ -1,19 +1,3 @@
 .select-list {
   padding: 20px 2% 0 5%;
 }
-
-.list-header {
-  width: 100%;
-  padding-bottom: 20px;
-}
-
-.add-btn {
-  margin-right: 16px;
-  margin-top: -3px;
-  float: right;
-}
-
-:host/deep/.mat-icon {
-  height: 32px;
-  width: 32px;
-}

static/src/app/users/user-list/user-list.component.html

@@ -1,34 +1,17 @@
 <div class="select-list">
-  <div class="input-group list-header pull-left">
+  <cc-list-filter
-    <mat-button-toggle-group #group="matButtonToggleGroup">
+    [filterButtons]="[{label: fraction.BLUFOR, value: 'BLUFOR'},
-      <mat-button-toggle value="BLUFOR" (change)="filterUsers(undefined, group)">
+                      {label: fraction.OPFOR, value: 'OPFOR'},
-        {{fraction.BLUFOR}}
+                      {label: 'Ohne Squad', value: 'UNASSIGNED'}]"
-      </mat-button-toggle>
+    [addButton]="{svgIcon: 'add-user', tooltip: 'Neuen Teilnehmer hinzufügen'}"
-      <mat-button-toggle value="OPFOR" (change)="filterUsers(undefined, group)">
+    (executeSearch)="filterUsers(undefined, $event)"
-        {{fraction.OPFOR}}
+    (openAddFrom)="openNewUserForm()">
-      </mat-button-toggle>
+  </cc-list-filter>
-      <mat-button-toggle value="UNASSIGNED" (change)="filterUsers(undefined, group)">
-        Ohne Squad
-      </mat-button-toggle>
-    </mat-button-toggle-group>
-    <button mat-icon-button class="add-btn">
-      <mat-icon svgIcon="add-user" title="Neuen Teilnehmer hinzufügen"
-                (click)="openNewUserForm()"></mat-icon>
-    </button>
-  </div>
 
-  <div class="input-group list-header">
+  <cc-list-search [searchTerm]="searchTerm"
-    <input id="search-tasks"
+                  (searchTermStream)="initObservable($event)"
-           type="text" #query class="form-control"
+                  (executeSearch)="filterUsers()">
-           (keyup.enter)="filterUsers()"
+  </cc-list-search>
-           [formControl]="searchTerm">
-    <span class="input-group-btn">
-      <button class="btn btn-default" type="button"
-              (click)="filterUsers()">
-        Suchen
-      </button>
-    </span>
-  </div>
 
   <div class="search-results"
        data-infinite-scroll
@@ -44,5 +27,4 @@
                    [selected]="user._id == selectedUserId">
     </pjm-user-item>
   </div>
-  <br>
 </div>

static/src/app/users/user-list/user-list.component.ts

@@ -12,7 +12,7 @@ import {MatButtonToggleGroup} from '@angular/material';
 import {UIHelpers} from '../../utils/global.helpers';
 
 @Component({
-  selector: 'squad-list',
+  selector: 'cc-user-list',
   templateUrl: './user-list.component.html',
   styleUrls: ['./user-list.component.css', '../../style/select-list.css']
 })
@@ -38,22 +38,15 @@ export class UserListComponent implements OnInit {
 
   constructor(private userService: UserService,
               private router: Router,
-              private route: ActivatedRoute,
+              private route: ActivatedRoute) {
-              private location: Location) {
   }
 
   ngOnInit() {
     this.users$ = this.userService.users$;
+  }
 
-    const paramsStream = this.route.queryParams
+  initObservable(observables: any) {
-                             .map(params => decodeURI(params['query'] || ''))
+    Observable.merge(observables.params as Observable<string>, observables.searchTerm)
-                             .do(query => this.searchTerm.setValue(query));
-
-    const searchTermStream = this.searchTerm.valueChanges
-                                 .debounceTime(400)
-                                 .do(query => this.adjustBrowserUrl(query));
-
-    Observable.merge(paramsStream, searchTermStream)
               .distinctUntilChanged()
               .switchMap(query => this.filterUsers())
               .subscribe();
@@ -101,11 +94,4 @@ export class UserListComponent implements OnInit {
       this.filterUsers(ADD);
     }
   }
-
-  adjustBrowserUrl(queryString = '') {
-    const absoluteUrl = this.location.path().split('?')[0];
-    const queryPart = queryString !== '' ? 'query=${queryString}' : '';
-
-    this.location.replaceState(absoluteUrl, queryPart);
-  }
 }

static/src/app/users/users.module.ts

@@ -3,15 +3,10 @@ import {usersRouterModule, usersRoutingComponents} from './users.routing';
 import {CommonModule} from '@angular/common';
 import {SharedModule} from '../shared.module';
 import {InfiniteScrollModule} from 'ngx-infinite-scroll';
-import {MatButtonToggleModule} from '@angular/material';
-import {MatButtonModule} from '@angular/material/button';
-import {MatIconModule} from '@angular/material/icon';
-
 
 @NgModule({
   declarations: usersRoutingComponents,
-  imports: [CommonModule, SharedModule, MatButtonToggleModule, MatButtonModule, MatIconModule,
+  imports: [CommonModule, SharedModule, InfiniteScrollModule, usersRouterModule],
-    InfiniteScrollModule, usersRouterModule],
 })
 export class UsersModule {
   static routes = usersRouterModule;

static/src/app/users/users.routing.ts

@@ -34,4 +34,5 @@ export const usersRoutes: Routes = [{
 
 export const usersRouterModule: ModuleWithProviders = RouterModule.forChild(usersRoutes);
 
-export const usersRoutingComponents = [UserItemComponent, UsersComponent, UserListComponent, EditUserComponent, AwardUserComponent];
+export const usersRoutingComponents = [UserItemComponent, UsersComponent, UserListComponent, EditUserComponent,
+  AwardUserComponent];