progress on the table

This commit is contained in:
Evert Prants 2020-11-07 13:41:52 +02:00
parent 84ae4e37f1
commit ba3ec9b06a
Signed by: evert
GPG Key ID: 1688DA83D222D0B5
17 changed files with 130 additions and 55 deletions

6
src/app/api-response.ts Normal file
View File

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

View File

@ -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
View File

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

View 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
View 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';
}
}

View File

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

View File

@ -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();
});
});

View File

@ -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 {
}
}

View File

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

View File

@ -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
})
}
}

View File

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

View File

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

View File

@ -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)
}
}

View File

@ -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>

View File

@ -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
View File

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