Commit cad4285d authored by Jérémy Destin's avatar Jérémy Destin
Browse files

feat: Create a generic sortable table component. GNP-4309.

parent e5aca475
......@@ -24,7 +24,14 @@
</tr>
</thead>
<tbody>
<tr *ngFor="let country of countries$ | async">
<ng-container *ngFor="let row of rows"
[ngTemplateOutlet]="template"
[ngTemplateOutletContext]="{$implicit: row}">
</ng-container>
<!--<tr *ngFor="let country of countries$ | async">
<th scope="row">{{ country.id }}</th>
<td>
<img [src]="'https://upload.wikimedia.org/wikipedia/commons/' + country.flag" class="mr-2" style="width: 20px">
......@@ -32,7 +39,7 @@
</td>
<td><ngb-highlight [result]="country.area | number" [term]="service.searchTerm"></ngb-highlight></td>
<td><ngb-highlight [result]="country.population | number" [term]="service.searchTerm"></ngb-highlight></td>
</tr>
</tr>-->
</tbody>
</table>
......
import { Component, ContentChild, Input, OnInit, QueryList, TemplateRef, ViewChildren } from '@angular/core';
import {
Component,
ContentChild,
Input,
QueryList,
TemplateRef,
ViewChildren
} from '@angular/core';
import { Observable } from 'rxjs';
import { Country } from './country';
import { CountryService } from './country.services';
......@@ -31,7 +38,6 @@ export class CardSortableTableComponent {
onSort({column, direction}: SortEvent) {
// resetting other headers
this.headers.forEach(header => {
console.log(header);
if (header.sortable !== column) {
header.direction = '';
}
......
import {Injectable, PipeTransform} from '@angular/core';
import { Injectable, PipeTransform } from '@angular/core';
import {BehaviorSubject, Observable, of, Subject} from 'rxjs';
import { BehaviorSubject, Observable, of, Subject } from 'rxjs';
import {Country} from './country';
import {COUNTRIES} from './countries';
import {DecimalPipe} from '@angular/common';
import {debounceTime, delay, switchMap, tap} from 'rxjs/operators';
import {SortDirection} from './sortable.directive';
import { Country } from './country';
import { COUNTRIES } from './countries';
import { DecimalPipe } from '@angular/common';
import { debounceTime, delay, switchMap, tap } from 'rxjs/operators';
import { SortDirection } from './sortable.directive';
interface SearchResult {
countries: Country[];
......@@ -26,9 +26,6 @@ function compare(v1, v2) {
}
function sort(countries: Country[], column: string, direction: string): Country[] {
console.log(countries);
console.log(column);
console.log(direction);
if (direction === '') {
return countries;
......
......@@ -4,12 +4,13 @@
<ng-template let-row>
<tr>
<th scope="row">{{ row.id }}</th>
<td><ngb-highlight [result]="row.name" [term]="row.searchTerm"></ngb-highlight></td>
<td>
<img [src]="'https://upload.wikimedia.org/wikipedia/commons/' + row.flag" class="mr-2" style="width: 20px">
<ngb-highlight [result]="row.name" [term]="service.searchTerm"></ngb-highlight>
</td>
<td><ngb-highlight [result]="row.area | number" [term]="service.searchTerm"></ngb-highlight></td>
<td><ngb-highlight [result]="row.population | number" [term]="service.searchTerm"></ngb-highlight></td>
</tr>
</ng-template>
......
......@@ -12,15 +12,12 @@ export class GermplasmResultPageComponent implements OnInit {
countries: Country[];
constructor(public service: CountryService) {
constructor(public service: CountryService) { }
ngOnInit() {
this.service.countries$.subscribe(countries => {
this.countries = countries;
});
}
ngOnInit() {
}
}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment