Basisimplementierung Songlist

src/app/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.type | songType}}</div>
+</div>

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

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

src/app/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/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/songs/song-list/song-list.component.html

@@ -0,0 +1,3 @@
+<app-card [padding]="false">
+  <app-list-item *ngFor="let song of songs" [song]="song"></app-list-item>
+</app-card>

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

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

src/app/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(<any>[
+      {title: 'title1'}
+    ]);
+  }));
+});

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

@@ -0,0 +1,22 @@
+import {Component, OnInit} from '@angular/core';
+import {SongService} from "../services/song.service";
+import {Song} from "../models/song";
+
+@Component({
+  selector: 'app-songs',
+  templateUrl: './song-list.component.html',
+  styleUrls: ['./song-list.component.less']
+})
+export class SongListComponent implements OnInit {
+  public songs: Song[];
+
+  constructor(private songService: SongService) {
+  }
+
+  ngOnInit() {
+    this.songService.list().subscribe(songs => {
+      this.songs = songs.sort((a, b) => a.number - b.number);
+    });
+  }
+
+}

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

@@ -0,0 +1,20 @@
+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 {SongTypeTranslaterModule} from "../../widget-modules/pipes/song-type-translater/song-type-translater.module";
+
+
+@NgModule({
+  declarations: [SongListComponent, ListItemComponent],
+  exports: [SongListComponent],
+  imports: [
+    CommonModule,
+
+    CardModule,
+    SongTypeTranslaterModule
+  ]
+})
+export class SongListModule {
+}