login

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

@@ -0,0 +1,6 @@
+<div class="list-item">
+  <div class="number">{{song.number}}</div>
+  <div>{{song.title}}</div>
+  <div>{{song.key}}</div>
+  <div>{{song.legalType | legalType}}</div>
+</div>

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

@@ -0,0 +1,25 @@
+@import "../../../../../styles/styles";
+
+.list-item {
+  padding: 5px 20px;
+  display: grid;
+  grid-template-columns: 50px auto 30px 100px;
+
+  & > div {
+    display: flex;
+    align-items: center;
+  }
+
+  cursor: pointer;
+
+  &:hover {
+    background: @primary-color;
+    color: #fff;
+  }
+}
+
+.number {
+  font-size: 18px;
+  font-weight: bold;
+  text-align: right;
+}

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

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

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

@@ -0,0 +1,18 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {Song} from '../../models/song';
+
+@Component({
+  selector: 'app-list-item',
+  templateUrl: './list-item.component.html',
+  styleUrls: ['./list-item.component.less']
+})
+export class ListItemComponent implements OnInit {
+  @Input() public song: Song;
+
+  constructor() {
+  }
+
+  ngOnInit() {
+  }
+
+}

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

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

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

@@ -0,0 +1,2 @@
+.song-list {
+}

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

@@ -0,0 +1,47 @@
+import {async, ComponentFixture, fakeAsync, TestBed, tick} from '@angular/core/testing';
+
+import {SongListComponent} from './song-list.component';
+import {of} from 'rxjs';
+import {SongService} from '../services/song.service';
+import {NO_ERRORS_SCHEMA} from '@angular/core';
+
+describe('SongListComponent', () => {
+  let component: SongListComponent;
+  let fixture: ComponentFixture<SongListComponent>;
+
+  const songs = [
+    {title: 'title1'}
+  ];
+
+  const mockSongService = {
+    list: () => of(songs)
+  };
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [SongListComponent],
+      providers: [
+        {provide: SongService, useValue: mockSongService}
+      ],
+      schemas: [NO_ERRORS_SCHEMA]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SongListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should read songs from SongService', fakeAsync(() => {
+    tick();
+    expect(component.songs$).toEqual([
+      {title: 'title1'}
+    ] as any);
+  }));
+});

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

@@ -0,0 +1,51 @@
+import {Component, OnInit} from '@angular/core';
+import {SongService} from '../services/song.service';
+import {Song} from '../models/song';
+import {debounceTime, map} from 'rxjs/operators';
+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'],
+  animations: [fade]
+})
+export class SongListComponent implements OnInit {
+
+  public songs$: Observable<Song[]>;
+
+  constructor(private songService: SongService, private activatedRoute: ActivatedRoute) {
+  }
+
+  private static filter(song: Song, filterValue: string): boolean {
+    if (!filterValue) {
+      return true;
+    }
+
+    const textMatch = song.text && SongListComponent.normalize(song.text).indexOf(SongListComponent.normalize(filterValue)) !== -1;
+    const titleMatch = song.title && SongListComponent.normalize(song.title).indexOf(SongListComponent.normalize(filterValue)) !== -1;
+
+    return textMatch || titleMatch;
+  }
+
+  private static normalize(input: string): string {
+    return input.toLowerCase().replace(/\s/g, '');
+  }
+
+  ngOnInit() {
+    const filter$ = this.activatedRoute.queryParams.pipe(
+      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 => SongListComponent.filter(song, _[0])))
+    );
+  }
+}

src/app/modules/songs/song-list/song-list.module.ts

@@ -0,0 +1,22 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {SongListComponent} from './song-list.component';
+import {ListItemComponent} from './list-item/list-item.component';
+import {CardModule} from '../../../widget-modules/components/card/card.module';
+import {RouterModule} from '@angular/router';
+import {LegalTypeTranslatorModule} from '../../../widget-modules/pipes/legal-type-translator/legal-type-translator.module';
+
+
+@NgModule({
+  declarations: [SongListComponent, ListItemComponent],
+  exports: [SongListComponent],
+  imports: [
+    CommonModule,
+    RouterModule,
+
+    CardModule,
+    LegalTypeTranslatorModule
+  ]
+})
+export class SongListModule {
+}