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

@@ -1,15 +0,0 @@
-.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

@@ -1,12 +0,0 @@
-<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

@@ -1,28 +0,0 @@
-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

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

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

@@ -1,12 +0,0 @@
-<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

@@ -1,43 +0,0 @@
-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,22 +1,42 @@
 <div class="select-list">
-  <cc-list-filter
+  <div class="input-group list-header pull-left">
-    [filterButtons]="[{label: fraction.BLUFOR, value: 'BLUFOR'},
+    <mat-button-toggle-group #group="matButtonToggleGroup">
-                      {label: fraction.OPFOR, value: 'OPFOR'},
+      <mat-button-toggle value="BLUFOR" (change)="filterDecorations(group)">
-                      {label: 'Global', value: 'GLOBAL'}]"
+        {{fraction.BLUFOR}}
-    [addButton]="{svgIcon: 'add', tooltip: 'Neue Auszeichnung hinzufügen'}"
+      </mat-button-toggle>
-    (executeSearch)="filterDecorations($event)"
+      <mat-button-toggle value="OPFOR" (change)="filterDecorations(group)">
-    (openAddFrom)="openNewDecorationForm()">
+        {{fraction.OPFOR}}
-  </cc-list-filter>
+      </mat-button-toggle>
+      <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>
 
-  <cc-list-search [searchTerm]="searchTerm"
+  <div class="input-group list-header">
-                  (searchTermStream)="initObservable($event)"
+    <input id="search-tasks"
-                  (executeSearch)="filterDecorations()">
+           type="text" #query class="form-control"
-  </cc-list-search>
+           (keyup.enter)="filterDecorations()"
+           [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,4 +1,5 @@
 import {Component, OnInit} from '@angular/core';
+import {Location} from '@angular/common';
 
 import {FormControl} from '@angular/forms';
 import {ActivatedRoute, Router} from '@angular/router';
@@ -10,7 +11,7 @@ import {MatButtonToggleGroup} from '@angular/material';
 import {UIHelpers} from '../../utils/global.helpers';
 
 @Component({
-  selector: 'cc-decoration-list',
+  selector: 'decoration-list',
   templateUrl: './decoration-list.component.html',
   styleUrls: ['./decoration-list.component.css', '../../style/select-list.css']
 })
@@ -28,15 +29,22 @@ 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$;
-  }
 
-  initObservable(observables: any) {
+    const paramsStream = this.route.queryParams
-    Observable.merge(observables.params as Observable<string>, observables.searchTerm)
+                             .map(params => decodeURI(params['query'] || ''))
+                             .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();
@@ -71,4 +79,12 @@ 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,10 +4,14 @@ 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, decorationRoutesModule],
+  imports: [CommonModule, SharedModule, MatButtonToggleModule, MatButtonModule, MatIconModule,
+    decorationRoutesModule],
   providers: [DecorationStore, DecorationService]
 })
 export class DecorationsModule {

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

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

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

@@ -1,4 +1,5 @@
 import {Component, OnInit} from '@angular/core';
+import {Location} from '@angular/common';
 
 import {FormControl} from '@angular/forms';
 import {ActivatedRoute, Router} from '@angular/router';
@@ -10,7 +11,7 @@ import {UIHelpers} from '../../utils/global.helpers';
 import {MatButtonToggleGroup} from '@angular/material';
 
 @Component({
-  selector: 'cc-rank-list',
+  selector: 'rank-list',
   templateUrl: './rank-list.component.html',
   styleUrls: ['./rank-list.component.css', '../../style/select-list.css']
 })
@@ -28,20 +29,28 @@ 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$;
-  }
 
-  initObservable(observables: any) {
+    this.ranks$ = this.rankService.ranks$;
-    Observable.merge(observables.params as Observable<string>, observables.searchTerm)
+
+    const paramsStream = this.route.queryParams
+                             .map(params => decodeURI(params['query'] || ''))
+                             .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;
@@ -66,4 +75,11 @@ 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,10 +4,14 @@ 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, rankRouterModule],
+  imports: [CommonModule, SharedModule, MatButtonToggleModule, MatButtonModule, MatIconModule,
+    rankRouterModule],
   providers: [RankStore, RankService]
 })
 export class RanksModule {

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

@@ -5,6 +5,7 @@ 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,17 +2,11 @@ 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, ListFilterComponent, SearchFieldComponent],
+  declarations: [ShowErrorComponent],
-  imports: [CommonModule, FormsModule, ReactiveFormsModule, MatButtonToggleModule, MatButtonModule, MatIconModule],
+  imports: [CommonModule, FormsModule, ReactiveFormsModule],
-  exports: [FormsModule, ReactiveFormsModule, MatButtonToggleModule, MatButtonModule, MatIconModule, ShowErrorComponent,
+  exports: [FormsModule, ReactiveFormsModule, ShowErrorComponent],
-    ListFilterComponent, SearchFieldComponent],
 })
 export class SharedModule {
 }

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

@@ -1,21 +1,39 @@
 <div class="select-list">
-  <cc-list-filter
+  <div class="list-header">
-    [filterButtons]="[{label: fraction.BLUFOR, value: 'BLUFOR'},
+    <mat-button-toggle-group #group="matButtonToggleGroup">
-                      {label: fraction.OPFOR, value: 'OPFOR'}]"
+      <mat-button-toggle value="BLUFOR" (change)="filterSquads(group)">
-    [addButton]="{svgIcon: 'add', tooltip: 'Neues Squad hinzufügen'}"
+        {{fraction.BLUFOR}}
-    (executeSearch)="filterSquads($event)"
+      </mat-button-toggle>
-    (openAddFrom)="openNewRankForm()">
+      <mat-button-toggle value="OPFOR" (change)="filterSquads(group)">
-  </cc-list-filter>
+        {{fraction.OPFOR}}
+      </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>
 
-  <cc-list-search [searchTerm]="searchTerm"
+  <div class="input-group search-bar">
-                  (searchTermStream)="initObservable($event)"
+    <input id="search-tasks"
-                  (executeSearch)="filterSquads()">
+           type="text" #query class="form-control"
-  </cc-list-search>
+           (keyup.enter)="filterSquads()"
+           [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,4 +1,5 @@
 import {Component, OnInit} from '@angular/core';
+import {Location} from '@angular/common';
 
 import {FormControl} from '@angular/forms';
 import {ActivatedRoute, Router} from '@angular/router';
@@ -10,7 +11,7 @@ import {UIHelpers} from '../../utils/global.helpers';
 import {MatButtonToggleGroup} from '@angular/material';
 
 @Component({
-  selector: 'cc-squad-list',
+  selector: 'squad-list',
   templateUrl: './squad-list.component.html',
   styleUrls: ['./squad-list.component.css', '../../style/select-list.css']
 })
@@ -28,18 +29,27 @@ 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$;
-  }
 
-  initObservable(observables: any) {
+    this.squads$ = this.squadService.squads$;
-    Observable.merge(observables.params as Observable<string>, observables.searchTerm)
+
+    const paramsStream = this.route.queryParams
+                             .map(params => decodeURI(params['query'] || ''))
+                             .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() {
@@ -65,4 +75,11 @@ 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,10 +4,14 @@ 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, squadRouterModule],
+  imports: [CommonModule, SharedModule, MatButtonToggleModule, MatButtonModule, MatIconModule,
+    squadRouterModule],
   providers: [SquadStore, SquadService]
 })
 export class SquadsModule {

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

@@ -1,3 +1,19 @@
 .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,17 +1,34 @@
 <div class="select-list">
-  <cc-list-filter
+  <div class="input-group list-header pull-left">
-    [filterButtons]="[{label: fraction.BLUFOR, value: 'BLUFOR'},
+    <mat-button-toggle-group #group="matButtonToggleGroup">
-                      {label: fraction.OPFOR, value: 'OPFOR'},
+      <mat-button-toggle value="BLUFOR" (change)="filterUsers(undefined, group)">
-                      {label: 'Ohne Squad', value: 'UNASSIGNED'}]"
+        {{fraction.BLUFOR}}
-    [addButton]="{svgIcon: 'add-user', tooltip: 'Neuen Teilnehmer hinzufügen'}"
+      </mat-button-toggle>
-    (executeSearch)="filterUsers(undefined, $event)"
+      <mat-button-toggle value="OPFOR" (change)="filterUsers(undefined, group)">
-    (openAddFrom)="openNewUserForm()">
+        {{fraction.OPFOR}}
-  </cc-list-filter>
+      </mat-button-toggle>
+      <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>
 
-  <cc-list-search [searchTerm]="searchTerm"
+  <div class="input-group list-header">
-                  (searchTermStream)="initObservable($event)"
+    <input id="search-tasks"
-                  (executeSearch)="filterUsers()">
+           type="text" #query class="form-control"
-  </cc-list-search>
+           (keyup.enter)="filterUsers()"
+           [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
@@ -27,4 +44,5 @@
                    [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: 'cc-user-list',
+  selector: 'squad-list',
   templateUrl: './user-list.component.html',
   styleUrls: ['./user-list.component.css', '../../style/select-list.css']
 })
@@ -38,15 +38,22 @@ 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$;
-  }
 
-  initObservable(observables: any) {
+    const paramsStream = this.route.queryParams
-    Observable.merge(observables.params as Observable<string>, observables.searchTerm)
+                             .map(params => decodeURI(params['query'] || ''))
+                             .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();
@@ -94,4 +101,11 @@ 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,10 +3,15 @@ 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, InfiniteScrollModule, usersRouterModule],
+  imports: [CommonModule, SharedModule, MatButtonToggleModule, MatButtonModule, MatIconModule,
+    InfiniteScrollModule, usersRouterModule],
 })
 export class UsersModule {
   static routes = usersRouterModule;

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

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