-
Notifications
You must be signed in to change notification settings - Fork 22
/
card-view.component.html
63 lines (60 loc) · 2.05 KB
/
card-view.component.html
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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<div class="card-column">
<ng-container
[ngTemplateOutlet]="getHeaderTemplate() || defaultHeader"
[ngTemplateOutletContext]="{ $implicit: this.group }"
></ng-container>
<div class="scrollable-container-wrapper scroll-shadow">
<div class="scrollable-container">
<div class="issue-pr-cards" *ngFor="let issue of this.issues$ | async; index as i">
<app-issue-pr-card [issue]="issue" [filter]="issues.filter" [milestoneService]="milestoneService"></app-issue-pr-card>
</div>
<mat-card class="loading-spinner" *ngIf="this.issues.isLoading$ | async">
<mat-progress-spinner color="primary" mode="indeterminate" diameter="50" strokeWidth="5"></mat-progress-spinner>
</mat-card>
</div>
</div>
<mat-paginator
[pageSize]="pageSize"
[hidePageSize]="true"
[pageSizeOptions]="[10, 20, 50]"
[class]="pageSize >= issueLength ? 'pagination-hide-arrow' : ''"
></mat-paginator>
</div>
<!-- Template -->
<ng-template #defaultHeader>
<mat-card class="loading-spinner">
<mat-progress-spinner color="primary" mode="indeterminate" diameter="50" strokeWidth="5"></mat-progress-spinner>
</mat-card>
</ng-template>
<ng-template #assigneeHeader let-assignee>
<div class="column-header">
<mat-card>
<mat-card-header [ngStyle]="{ height: '40px' }">
<div
mat-card-avatar
*ngIf="assignee"
[ngStyle]="{
background: 'url(' + assignee.avatar_url + ')',
'background-size': '40px'
}"
></div>
<mat-card-title>
{{ assignee.login }}
</mat-card-title>
<div class="row-count">{{ this.issues.count }}</div>
</mat-card-header>
</mat-card>
</div>
</ng-template>
<ng-template #milestoneHeader let-milestone>
<div class="column-header">
<mat-card>
<mat-card-header [ngStyle]="{ height: '40px' }">
<mat-card-title>
{{ milestone.title }}
</mat-card-title>
<div class="row-count">{{ this.issues.count }}</div>
</mat-card-header>
</mat-card>
</div>
</ng-template>