searchbox

src/app/animations.ts

@@ -0,0 +1,20 @@
+import {animate, query, stagger, state, style, transition, trigger} from '@angular/animations';
+
+export const fade = [
+  // the fade-in/fade-out animation.
+  trigger('fade', [
+
+    // the "in" style determines the "resting" state of the element when it is visible.
+    state('in', style({opacity: 1, display: 'block', transform: 'translateY(0px)'})),
+
+    // fade in when created. this could also be written as transition('void => *')
+    transition(':enter', [
+      style({opacity: 0, display: 'block', transform: 'translateY(-20px)'}),
+      animate(300)
+    ]),
+
+    // fade out when destroyed. this could also be written as transition('void => *')
+    transition(':leave',
+      animate(300, style({opacity: 0, display: 'block', transform: 'translateY(-20px)'})))
+  ])
+];

src/app/app.module.ts

@@ -16,6 +16,7 @@ import {AngularFirestoreModule} from '@angular/fire/firestore';
   ],
   imports: [
     BrowserModule,
+    BrowserAnimationsModule,
     AppRoutingModule,
     ServiceWorkerModule.register('ngsw-worker.js', {enabled: environment.production}),
     BrowserAnimationsModule,

src/app/application-frame/application-frame.module.ts

@@ -2,11 +2,13 @@ import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {NavigationComponent} from './navigation/navigation.component';
 import {RouterModule} from '@angular/router';
+import {FilterComponent} from './navigation/filter/filter.component';
 
 
 @NgModule({
   declarations: [
-    NavigationComponent
+    NavigationComponent,
+    FilterComponent
   ],
   imports: [
     CommonModule,

src/app/application-frame/navigation/filter/filter.component.html

@@ -0,0 +1,2 @@
+<input placeholder="Suche" (input)="onInputChange($event.target.value)">
+

src/app/application-frame/navigation/filter/filter.component.less

@@ -0,0 +1,16 @@
+@import "../../../../styles/styles";
+
+input {
+  font-size: 16px;
+  background: transparent;
+  border: none;
+  border-bottom: 1px solid #ccc;
+  color: #888;
+  margin-right: 20px;
+
+  &:focus {
+    outline: none;
+    border-bottom: 2px solid @primary-color;
+    margin-bottom: -1px;
+  }
+}

src/app/application-frame/navigation/filter/filter.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FilterComponent } from './filter.component';
+
+describe('FilterComponent', () => {
+  let component: FilterComponent;
+  let fixture: ComponentFixture<FilterComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FilterComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FilterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/application-frame/navigation/filter/filter.component.ts

@@ -0,0 +1,21 @@
+import {Component} from '@angular/core';
+import {Router} from '@angular/router';
+
+@Component({
+  selector: 'app-filter',
+  templateUrl: './filter.component.html',
+  styleUrls: ['./filter.component.less']
+})
+export class FilterComponent {
+
+  constructor(private router: Router) {
+  }
+
+  public onInputChange(text: string): void {
+    const route = text
+      ? this.router.createUrlTree(['songs'], {queryParams: {q: text}})
+      : this.router.createUrlTree(['songs']);
+
+    this.router.navigateByUrl(route);
+  }
+}

src/app/application-frame/navigation/navigation.component.html

@@ -1,5 +1,9 @@
 <nav class="head">
-  <a href="#" routerLink="/songs" routerLinkActive="active">Inhalt</a>
+  <div class="links">
+    <a href="#" routerLink="/songs" routerLinkActive="active">Inhalt</a></div>
+  <div class="actions">
+    <app-filter></app-filter>
+  </div>
 </nav>
 
 

src/app/application-frame/navigation/navigation.component.less

@@ -13,6 +13,7 @@ nav {
 
     display: flex;
     align-items: flex-end;
+    justify-content: space-between;
 
     a {
       display: block;
@@ -38,3 +39,9 @@ nav {
 
   }
 }
+
+.actions {
+  display: flex;
+  height: 100%;
+  align-items: center;
+}

src/app/songs/services/song.service.spec.ts

@@ -27,7 +27,7 @@ describe('SongService', () => {
 
   it('should list songs', async(() => {
     const service: SongService = TestBed.get(SongService);
-    service.list().subscribe(songs => {
+    service.list$().subscribe(songs => {
       expect(songs).toEqual(<any>[
         {title: 'title1'}
       ]);

src/app/songs/services/song.service.ts

@@ -11,7 +11,7 @@ export class SongService {
   constructor(private songDataService: SongDataService) {
   }
 
-  public list = (): Observable<Song[]> => this.songDataService.list();
+  public list$ = (): Observable<Song[]> => this.songDataService.list();
   public read = (songId: string): Observable<Song | undefined> => this.songDataService.read(songId);
 
 }

src/app/songs/song-list/list-item/list-item.component.less

@@ -14,6 +14,7 @@
 
   &:hover {
     background: @primary-color;
+    color: #fff;
   }
 }
 

src/app/songs/song-list/song-list.component.html

@@ -1,3 +1,3 @@
-<app-card [padding]="false">
+<app-card [padding]="false" *ngIf="songs$ | async as songs" [@fade]>
-  <app-list-item *ngFor="let song of songs | async" [song]="song" [routerLink]="song.id"></app-list-item>
+  <app-list-item *ngFor="let song of songs" [song]="song" [routerLink]="song.id"></app-list-item>
 </app-card>

src/app/songs/song-list/song-list.component.spec.ts

@@ -40,7 +40,7 @@ describe('SongListComponent', () => {
 
   it('should read songs from SongService', fakeAsync(() => {
     tick();
-    expect(component.songs).toEqual(<any>[
+    expect(component.songs$).toEqual(<any>[
       {title: 'title1'}
     ]);
   }));

src/app/songs/song-list/song-list.component.ts

@@ -1,24 +1,50 @@
 import {Component, OnInit} from '@angular/core';
 import {SongService} from '../services/song.service';
 import {Song} from '../models/song';
-import {map} from 'rxjs/operators';
+import {debounceTime, map} from 'rxjs/operators';
-import {Observable} from 'rxjs';
+import {combineLatest, Observable} from 'rxjs';
+import {fade} from '../../animations';
+import {ActivatedRoute} from '@angular/router';
 
 @Component({
   selector: 'app-songs',
   templateUrl: './song-list.component.html',
-  styleUrls: ['./song-list.component.less']
+  styleUrls: ['./song-list.component.less'],
+  animations: [fade]
 })
 export class SongListComponent implements OnInit {
-  public songs: Observable<Song[]>;
+  public songs$: Observable<Song[]>;
 
-  constructor(private songService: SongService) {
+  constructor(private songService: SongService, private activatedRoute: ActivatedRoute) {
   }
 
   ngOnInit() {
-    this.songs = this.songService.list().pipe(map(songs =>
+    const filter$ = this.activatedRoute.queryParams.pipe(
-      songs.sort((a, b) => a.number - b.number)
+      debounceTime(300),
-    ));
+      map(_ => _.q)
+    );
+
+    const songs$ = this.songService.list$().pipe(
+      map(songs => songs.sort((a, b) => a.number - b.number)),
+    );
+
+    this.songs$ = combineLatest([filter$, songs$]).pipe(
+      map(_ => _[1].filter(song => this.filter(song, _[0])))
+    );
   }
 
+  private filter(song: Song, filterValue: string): boolean {
+    if (!filterValue) {
+      return true;
+    }
+
+    const textMatch = song.text && this.normalize(song.text).indexOf(this.normalize(filterValue)) !== -1;
+    const titleMatch = song.title && this.normalize(song.title).indexOf(this.normalize(filterValue)) !== -1;
+
+    return textMatch || titleMatch;
+  }
+
+  private normalize( input: string): string {
+    return input.toLowerCase().replace(/\s/g, '');
+  }
 }

src/styles/styles.less

@@ -1,4 +1,4 @@
-@primary-color: #5285ff;
+@primary-color: #4286f4;
 
 @navigation-background: #fffffff1;
 @navigation-link-color: #555;