progress on the table
This commit is contained in:
parent
84ae4e37f1
commit
ba3ec9b06a
6
src/app/api-response.ts
Normal file
6
src/app/api-response.ts
Normal file
@ -0,0 +1,6 @@
|
||||
import { IPerson } from './person'
|
||||
|
||||
export interface IAPIResponse {
|
||||
stats: any;
|
||||
list: IPerson[];
|
||||
}
|
@ -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]
|
||||
})
|
||||
|
4
src/app/article.ts
Normal file
4
src/app/article.ts
Normal file
@ -0,0 +1,4 @@
|
||||
|
||||
export interface IArticle {
|
||||
|
||||
};
|
8
src/app/gender.pipe.spec.ts
Normal file
8
src/app/gender.pipe.spec.ts
Normal file
@ -0,0 +1,8 @@
|
||||
import { GenderPipe } from './gender.pipe';
|
||||
|
||||
describe('GenderPipe', () => {
|
||||
it('create an instance', () => {
|
||||
const pipe = new GenderPipe();
|
||||
expect(pipe).toBeTruthy();
|
||||
});
|
||||
});
|
10
src/app/gender.pipe.ts
Normal file
10
src/app/gender.pipe.ts
Normal file
@ -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';
|
||||
}
|
||||
}
|
@ -1 +0,0 @@
|
||||
<p>list-item works!</p>
|
@ -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();
|
||||
});
|
||||
});
|
@ -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 {
|
||||
}
|
||||
|
||||
}
|
@ -1 +1 @@
|
||||
<p>list-page works!</p>
|
||||
<app-list [page]="page"></app-list>
|
||||
|
@ -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
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
|
@ -1 +1 @@
|
||||
<p>list-paginate works!</p>
|
||||
{{ page }} / {{ pages }}
|
||||
|
@ -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() { }
|
||||
|
||||
|
@ -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)
|
||||
}
|
||||
}
|
||||
|
@ -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>
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
10
src/app/person.ts
Normal file
10
src/app/person.ts
Normal file
@ -0,0 +1,10 @@
|
||||
|
||||
export interface IPerson {
|
||||
firstname: string;
|
||||
surname: string;
|
||||
sex: string;
|
||||
date: Date;
|
||||
phone: string;
|
||||
image: string[];
|
||||
intro: string;
|
||||
};
|
Loading…
Reference in New Issue
Block a user