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() {
+  }
+
+}