progress on the table

src/app/api-response.ts

@@ -0,0 +1,6 @@
+import { IPerson } from './person'
+
+export interface IAPIResponse {
+  stats: any;
+  list: IPerson[];
+}

src/app/app.module.ts

@@ -1,5 +1,6 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
+import { HttpClientModule } from '@angular/common/http';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -7,9 +8,9 @@ import { ArticlePageComponent } from './article-page/article-page.component';
 import { ArticleComponent } from './article/article.component';
 import { ListPageComponent } from './list-page/list-page.component';
 import { ListComponent } from './list/list.component';
-import { ListItemComponent } from './list-item/list-item.component';
 import { ListPaginateComponent } from './list-paginate/list-paginate.component';
 import { ListService } from './list.service';
+import { GenderPipe } from './gender.pipe';
 
 @NgModule({
   declarations: [
@@ -18,15 +19,15 @@ import { ListService } from './list.service';
     ArticleComponent,
     ListPageComponent,
     ListComponent,
-    ListItemComponent,
+    ListPaginateComponent,
-    ListPaginateComponent
+    GenderPipe
   ],
   imports: [
     BrowserModule,
-    AppRoutingModule
+    AppRoutingModule,
+    HttpClientModule
   ],
   providers: [
-    ListService
   ],
   bootstrap: [AppComponent]
 })

src/app/article.ts

@@ -0,0 +1,4 @@
+
+export interface IArticle {
+
+};

src/app/gender.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { GenderPipe } from './gender.pipe';
+
+describe('GenderPipe', () => {
+  it('create an instance', () => {
+    const pipe = new GenderPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

src/app/gender.pipe.ts

@@ -0,0 +1,10 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'gender'
+})
+export class GenderPipe implements PipeTransform {
+  transform(value: string): string {
+    return value === 'm' ? 'Mees' : 'Naine';
+  }
+}

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

@@ -1 +0,0 @@
-<p>list-item works!</p>

src/app/list-item/list-item.component.spec.ts

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

src/app/list-item/list-item.component.ts

@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-list-item',
-  templateUrl: './list-item.component.html',
-  styleUrls: ['./list-item.component.styl']
-})
-export class ListItemComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}

src/app/list-page/list-page.component.html

@@ -1 +1 @@
-<p>list-page works!</p>
+<app-list [page]="page"></app-list>

src/app/list-page/list-page.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
 
 @Component({
   selector: 'app-list-page',
@@ -6,10 +7,14 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./list-page.component.styl']
 })
 export class ListPageComponent implements OnInit {
+  public page = 1;
 
-  constructor() { }
+  constructor(private route: ActivatedRoute) { }
 
   ngOnInit(): void {
+    this.route.queryParams
+      .subscribe((params) => {
+        this.page = params.page || 1
+      })
   }
-
 }

src/app/list-paginate/list-paginate.component.html

@@ -1 +1 @@
-<p>list-paginate works!</p>
+{{ page }} / {{ pages }}

src/app/list-paginate/list-paginate.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input } from '@angular/core';
 
 @Component({
   selector: 'app-list-paginate',
@@ -6,6 +6,11 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./list-paginate.component.styl']
 })
 export class ListPaginateComponent implements OnInit {
+  @Input()
+  page: number;
+
+  @Input()
+  pages: number;
 
   constructor() { }
 

src/app/list.service.ts

@@ -1,9 +1,18 @@
 import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs'
+import { IAPIResponse } from './api-response'
 
 @Injectable({
   providedIn: 'root'
 })
 export class ListService {
+  private listUrl = 'http://midaiganes.irw.ee/api/list'
 
-  constructor() { }
+  constructor(private http: HttpClient) { }
+
+  public getList(limit: number = 10, offset: number = 0): Observable<IAPIResponse> {
+    const url = `${this.listUrl}?offset=${offset}&limit=${limit}`
+    return this.http.get<IAPIResponse>(url)
+  }
 }

src/app/list/list.component.html

@@ -1 +1,27 @@
-<p>list works!</p>
+<table>
+  <thead>
+    <th>Eesnimi</th>
+    <th>Perekonnanimi</th>
+    <th>Sugu</th>
+    <th>Sünnikuupäev</th>
+    <th>Telefon</th>
+  </thead>
+  <ng-container *ngFor="let person of people">
+    <tr (click)="selectPerson(person)">
+      <td>{{ person.firstname }}</td>
+      <td>{{ person.surname }}</td>
+      <td>{{ person.sex | gender }}</td>
+      <td>{{ person.date * 1000 | date:'yyyy.MM.dd'}}</td>
+      <td>{{ person.phone }}</td>
+    </tr>
+    <tr *ngIf="selected == person" colspan=10>
+      <div class="person-info">
+        <div class="person-image">
+          <img src="{{ person.image.small }}" alt="{{ person.image.alt }}" title="{{ person.image.title }}">
+        </div>
+        <div class="person-detail" [innerHTML]=person.intro></div>
+      </div>
+    </tr>
+  </ng-container>
+</table>
+<app-list-paginate [page]="page" [pages]="pages"></app-list-paginate>

src/app/list/list.component.ts

@@ -1,4 +1,8 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input } from '@angular/core';
+import { ListService } from '../list.service'
+
+import { IPerson } from '../person'
+import { IAPIResponse } from '../api-response'
 
 @Component({
   selector: 'app-list',
@@ -6,10 +10,38 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./list.component.styl']
 })
 export class ListComponent implements OnInit {
+  public people: IPerson[];
+  private selected: IPerson;
 
-  constructor() { }
+  private sortBy: string;
+  private sortDir: number;
+
+  @Input()
+  public page = 1;
+  public pages = 10;
+  private perPage = 10;
+
+  constructor(private listService: ListService) { }
 
   ngOnInit(): void {
+    this.getList()
   }
 
+  private getList(): void {
+    this.listService.getList().subscribe(
+      (data) => this.updateList(data));
+  }
+
+  private updateList(data: IAPIResponse): void {
+    this.people = data.list
+    // this.pages = data.stats.total / this.perPage
+  }
+
+  private selectPerson(person: IPerson): void {
+    if (this.selected === person) {
+      this.selected = null;
+      return;
+    }
+    this.selected = person;
+  }
 }

src/app/person.ts

@@ -0,0 +1,10 @@
+
+export interface IPerson {
+  firstname: string;
+  surname: string;
+  sex: string;
+  date: Date;
+  phone: string;
+  image: string[];
+  intro: string;
+};