forked from angular/angular
-
Notifications
You must be signed in to change notification settings - Fork 1
/
contributor-list.component.ts
47 lines (43 loc) · 1.6 KB
/
contributor-list.component.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
import { Component, OnInit } from '@angular/core';
import { ContributorGroup } from './contributors.model';
import { ContributorService } from './contributor.service';
import { LocationService } from 'app/shared/location.service';
@Component({
selector: `aio-contributor-list`,
template: `
<div class="flex-center group-buttons">
<a *ngFor="let name of groupNames"
[class.selected]="name == selectedGroup.name"
class="button mat-button filter-button"
(click)="selectGroup(name)"
(keyup.enter)="selectGroup(name)">{{name}}</a>
</div>
<section *ngIf="selectedGroup" class="grid-fluid">
<div class="contributor-group">
<aio-contributor *ngFor="let person of selectedGroup.contributors" [person]="person"></aio-contributor>
</div>
</section>`
})
export class ContributorListComponent implements OnInit {
private groups: ContributorGroup[];
groupNames: string[];
selectedGroup: ContributorGroup;
constructor(
private contributorService: ContributorService,
private locationService: LocationService) { }
ngOnInit() {
const groupName = this.locationService.search()['group'] || '';
// no need to unsubscribe because `contributors` completes
this.contributorService.contributors
.subscribe(grps => {
this.groups = grps;
this.groupNames = grps.map(g => g.name);
this.selectGroup(groupName);
});
}
selectGroup(name: string) {
name = name.toLowerCase();
this.selectedGroup = this.groups.find(g => g.name.toLowerCase() === name) || this.groups[0];
this.locationService.setSearch('', {group: this.selectedGroup.name});
}
}