fixed material numbers in new dialog

src/app/changelog/changelog.component.html

@@ -0,0 +1,35 @@
+<h2>Changelog</h2>
+
+<div class="header">
+  <rb-form-date-input name="dateInput" label="older than" [options]="{enableTime: true}"
+                      [(ngModel)]="timestamp" (ngModelChange)="loadChangelog()">
+  </rb-form-date-input>
+
+  <rb-form-select name="pageSizeSelection" label="page size" [(ngModel)]="pageSize" (ngModelChange)="loadChangelog()">
+    <option value="3">3</option>
+    <option value="10">10</option>
+    <option value="25">25</option>
+    <option value="50">50</option>
+    <option value="100">100</option>
+    <option value="250">250</option>
+    <option value="500">500</option>
+  </rb-form-select>
+
+  <button class="rb-btn rb-link" type="button" (click)="loadChangelog(1)">
+    next page
+    <span class="rb-ic  rb-ic-forward-right"></span>
+  </button>
+</div>
+
+<rb-table>
+  <tr>
+    <th>Date</th>
+    <th>Action</th>
+    <th>Data</th>
+  </tr>
+  <tr *ngFor="let entry of changelog">
+    <td>{{entry.date}}</td>
+    <td>{{entry.action}}</td>
+    <td>{{entry.data | json}}</td>
+  </tr>
+</rb-table>

src/app/changelog/changelog.component.scss

@@ -0,0 +1,10 @@
+.header {
+
+  & > * {
+    float: left;
+  }
+
+  button {
+    float: right;
+  }
+}

src/app/changelog/changelog.component.spec.ts

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

src/app/changelog/changelog.component.ts

@@ -0,0 +1,32 @@
+import { Component, OnInit } from '@angular/core';
+import {ChangelogModel} from '../models/changelog.model';
+import {ApiService} from '../services/api.service';
+
+@Component({
+  selector: 'app-changelog',
+  templateUrl: './changelog.component.html',
+  styleUrls: ['./changelog.component.scss']
+})
+export class ChangelogComponent implements OnInit {
+
+  timestamp = new Date();
+  pageSize = 25;
+  changelog: ChangelogModel[] = [];
+
+  constructor(
+    private api: ApiService
+  ) { }
+
+  ngOnInit(): void {
+    this.loadChangelog();
+  }
+
+  loadChangelog(page = 0) {
+    this.api.get<ChangelogModel[]>(`/changelog/${this.timestamp.toISOString()}/${page}/${this.pageSize}`, data => {
+      this.changelog = data.map(e => new ChangelogModel().deserialize(e));
+      this.timestamp = new Date(this.changelog[0].date);
+      console.log(this.changelog);
+    });
+  }
+
+}