diff --git a/src/app/api-response.ts b/src/app/api-response.ts new file mode 100644 index 0000000..1e117b0 --- /dev/null +++ b/src/app/api-response.ts @@ -0,0 +1,6 @@ +import { IPerson } from './person' + +export interface IAPIResponse { + stats: any; + list: IPerson[]; +} diff --git a/src/app/app.module.ts b/src/app/app.module.ts index ab00e11..c76eb5e 100644 --- a/src/app/app.module.ts +++ b/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] }) diff --git a/src/app/article.ts b/src/app/article.ts new file mode 100644 index 0000000..41473a7 --- /dev/null +++ b/src/app/article.ts @@ -0,0 +1,4 @@ + +export interface IArticle { + +}; diff --git a/src/app/gender.pipe.spec.ts b/src/app/gender.pipe.spec.ts new file mode 100644 index 0000000..1d0eae2 --- /dev/null +++ b/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(); + }); +}); diff --git a/src/app/gender.pipe.ts b/src/app/gender.pipe.ts new file mode 100644 index 0000000..bbf09ff --- /dev/null +++ b/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'; + } +} diff --git a/src/app/list-item/list-item.component.html b/src/app/list-item/list-item.component.html deleted file mode 100644 index cd0d35f..0000000 --- a/src/app/list-item/list-item.component.html +++ /dev/null @@ -1 +0,0 @@ -

list-item works!

diff --git a/src/app/list-item/list-item.component.spec.ts b/src/app/list-item/list-item.component.spec.ts deleted file mode 100644 index 169c9e4..0000000 --- a/src/app/list-item/list-item.component.spec.ts +++ /dev/null @@ -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; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ ListItemComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(ListItemComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/list-item/list-item.component.styl b/src/app/list-item/list-item.component.styl deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/list-item/list-item.component.ts b/src/app/list-item/list-item.component.ts deleted file mode 100644 index 5c75cd5..0000000 --- a/src/app/list-item/list-item.component.ts +++ /dev/null @@ -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 { - } - -} diff --git a/src/app/list-page/list-page.component.html b/src/app/list-page/list-page.component.html index 9edc755..d277db9 100644 --- a/src/app/list-page/list-page.component.html +++ b/src/app/list-page/list-page.component.html @@ -1 +1 @@ -

list-page works!

+ diff --git a/src/app/list-page/list-page.component.ts b/src/app/list-page/list-page.component.ts index 3754cdb..830725d 100644 --- a/src/app/list-page/list-page.component.ts +++ b/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 + }) } - } diff --git a/src/app/list-paginate/list-paginate.component.html b/src/app/list-paginate/list-paginate.component.html index ab201d1..ffde1ef 100644 --- a/src/app/list-paginate/list-paginate.component.html +++ b/src/app/list-paginate/list-paginate.component.html @@ -1 +1 @@ -

list-paginate works!

+{{ page }} / {{ pages }} diff --git a/src/app/list-paginate/list-paginate.component.ts b/src/app/list-paginate/list-paginate.component.ts index 4bc997f..08b2931 100644 --- a/src/app/list-paginate/list-paginate.component.ts +++ b/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() { } diff --git a/src/app/list.service.ts b/src/app/list.service.ts index c6d5616..006a5f3 100644 --- a/src/app/list.service.ts +++ b/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 { + const url = `${this.listUrl}?offset=${offset}&limit=${limit}` + return this.http.get(url) + } } diff --git a/src/app/list/list.component.html b/src/app/list/list.component.html index 7c1fe15..8a601fd 100644 --- a/src/app/list/list.component.html +++ b/src/app/list/list.component.html @@ -1 +1,27 @@ -

list works!

+ + + + + + + + + + + + + + + + + +
+
+ {{ person.image.alt }} +
+
+
+ + +
EesnimiPerekonnanimiSuguSünnikuupäevTelefon
{{ person.firstname }}{{ person.surname }}{{ person.sex | gender }}{{ person.date * 1000 | date:'yyyy.MM.dd'}}{{ person.phone }}
+ diff --git a/src/app/list/list.component.ts b/src/app/list/list.component.ts index e421d61..45dcc0d 100644 --- a/src/app/list/list.component.ts +++ b/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; + } } diff --git a/src/app/person.ts b/src/app/person.ts new file mode 100644 index 0000000..97162a9 --- /dev/null +++ b/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; +};