show component

src/app/modules/shows/list/list-item/list-item.component.html

@@ -0,0 +1,4 @@
+<div class="list-item">
+  <div>{{show.date.toDate()|date:'dd.MM.yyyy'}}</div>
+  <div>{{show.showType|showType}}</div>
+</div>

src/app/modules/shows/list/list-item/list-item.component.less

@@ -0,0 +1,26 @@
+@import "../../../../../styles/styles";
+
+.list-item {
+  padding: 5px 20px;
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  min-height: 34px;
+
+  & > 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/shows/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/shows/list/list-item/list-item.component.ts

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

src/app/modules/shows/list/list.component.html

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

src/app/modules/shows/list/list.component.spec.ts

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

src/app/modules/shows/list/list.component.ts

@@ -0,0 +1,20 @@
+import {Component} from '@angular/core';
+import {Observable} from 'rxjs';
+import {Show} from '../services/show';
+import {ShowDataService} from '../services/show-data.service';
+import {fade} from '../../../animations';
+
+@Component({
+  selector: 'app-list',
+  templateUrl: './list.component.html',
+  styleUrls: ['./list.component.less'],
+  animations: [fade]
+})
+export class ListComponent {
+  public shows$: Observable<Show[]>;
+
+  constructor(showDataService: ShowDataService) {
+    this.shows$ = showDataService.list$();
+  }
+
+}