Skip to content

Commit 81f64a9

Browse files
CS6CS6
authored
Implement series view. (#606)
1 parent 4b3c3c3 commit 81f64a9

13 files changed

+188
-148
lines changed

‎src/app/features/home/post-capture-tab/post-capture-tab.component.html‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,10 @@
44
<div class="segments" [ngSwitch]="categories">
55
<ion-segment mode="ios" [(ngModel)]="categories">
66
<ion-segment-button value="Photo" checked>
7-
<ion-icon src="/assets/icon/apps.svg" class="series-tab-icon"></ion-icon>
7+
<ion-icon src="/assets/icon/apps.svg" class="segment"></ion-icon>
88
</ion-segment-button>
99
<ion-segment-button value="Series">
10-
<ion-icon
11-
src="/assets/icon/series.svg"
12-
class="series-tab-icon"
13-
></ion-icon>
10+
<ion-icon src="/assets/icon/series.svg" class="segment"></ion-icon>
1411
</ion-segment-button>
1512
</ion-segment>
1613
<div class="post-captures" *ngSwitchCase="'Photo'">
@@ -23,13 +20,17 @@
2320
[routerLink]="['post-capture-details', { id: postCapture.id }]"
2421
>
2522
<ion-img [src]="postCapture.asset_file_thumbnail"></ion-img>
23+
<mat-icon class="from-store">shopping_bag</mat-icon>
2624
</mat-grid-tile>
2725
</mat-grid-list>
2826
</div>
2927

30-
<div class="series-wrapper" *ngSwitchCase="'Series'">
31-
<app-series-card routerLink="series"></app-series-card>
32-
<app-series-card routerLink="series"></app-series-card>
33-
<app-series-card routerLink="series"></app-series-card>
28+
<div class="series" *ngSwitchCase="'Series'">
29+
<ion-card
30+
*ngFor="let series of series$ | async"
31+
[routerLink]="['series', { id: series.id, cover: series.cover_image }]"
32+
>
33+
<ion-img [src]="series.cover_image"></ion-img>
34+
</ion-card>
3435
</div>
3536
</div>

‎src/app/features/home/post-capture-tab/post-capture-tab.component.scss‎

Lines changed: 36 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -7,44 +7,63 @@
77
margin: 0;
88
padding: 8px;
99
text-align: center;
10-
background-color: var(--ion-color-light);
1110
color: darkgray;
1211
font-weight: 500;
1312
font-size: 0.9em;
13+
background-color: var(--ion-color-light);
1414
}
1515

1616
.segments {
1717
display: flex;
18-
padding: 8px;
1918
flex-direction: column;
2019
height: 100%;
2120
}
2221

2322
ion-segment {
2423
width: 80%;
25-
margin: 0 auto 16px;
24+
margin: 8px auto;
2625
flex-shrink: 0;
26+
27+
ion-icon.segment {
28+
height: 40px;
29+
}
2730
}
2831

2932
.post-captures {
3033
overflow: auto;
31-
}
34+
padding: 8px;
35+
36+
mat-grid-tile {
37+
ion-img {
38+
width: 100%;
39+
height: 100%;
40+
object-fit: cover;
41+
object-position: center;
42+
overflow: hidden;
43+
border-radius: 4px;
44+
}
3245

33-
mat-grid-tile {
34-
ion-img {
35-
width: 100%;
36-
height: 100%;
37-
object-fit: cover;
38-
object-position: center;
39-
overflow: hidden;
40-
border-radius: 4px;
46+
mat-icon.from-store {
47+
color: white;
48+
z-index: 10;
49+
position: absolute;
50+
bottom: 5px;
51+
left: 5px;
52+
font-size: 20px;
53+
opacity: 90%;
54+
}
4155
}
4256
}
4357

44-
.series-tab-icon {
45-
height: 40px;
46-
}
58+
.series {
59+
height: auto;
60+
overflow: auto;
4761

48-
.tab-content-post {
49-
height: 100%;
62+
ion-card {
63+
ion-img {
64+
height: 300px;
65+
object-fit: cover;
66+
object-position: center;
67+
}
68+
}
5069
}

‎src/app/features/home/post-capture-tab/post-capture-tab.component.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
DiaBackendAsset,
77
DiaBackendAssetRepository,
88
} from '../../../shared/services/dia-backend/asset/dia-backend-asset-repository.service';
9+
import { DiaBackendSeriesRepository } from '../../../shared/services/dia-backend/series/dia-backend-series-repository.service';
910
import { NetworkService } from '../../../shared/services/network/network.service';
1011

1112
@UntilDestroy({ checkProperties: true })
@@ -31,8 +32,18 @@ export class PostCaptureTabComponent {
3132
)
3233
);
3334

35+
readonly series$ = this.networkService.connected$.pipe(
36+
switchMap(isConnected =>
37+
iif(
38+
() => isConnected,
39+
this.diaBackendSeriesRepository.fetchSeries$.pipe(pluck('results'))
40+
)
41+
)
42+
);
43+
3444
constructor(
3545
private readonly diaBackendAssetRepository: DiaBackendAssetRepository,
46+
private readonly diaBackendSeriesRepository: DiaBackendSeriesRepository,
3647
private readonly networkService: NetworkService
3748
) {}
3849

‎src/app/features/home/post-capture-tab/series/series.page.html‎

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -5,26 +5,27 @@
55
<div class="toolbar-spacer"></div>
66
</mat-toolbar>
77
<div class="page-content">
8-
<app-series-card></app-series-card>
8+
<ion-card>
9+
<ion-img [src]="cover$ | async"></ion-img>
10+
</ion-card>
911
<mat-grid-list cols="3" gutterSize="8px">
10-
<mat-grid-tile class="collection-general">
11-
<img src="https://material.angular.io/assets/img/examples/shiba1.jpg" />
12+
<mat-grid-tile
13+
class="collection-general"
14+
*ngFor="let collection of collectionGeneral"
15+
>
16+
<ion-img *ngIf="collection.img" [src]="collection.img"></ion-img>
1217
</mat-grid-tile>
13-
<mat-grid-tile class="collection-general"></mat-grid-tile>
14-
<mat-grid-tile class="collection-general"></mat-grid-tile>
15-
<mat-grid-tile class="collection-general"></mat-grid-tile>
16-
<mat-grid-tile class="collection-general"></mat-grid-tile>
17-
<mat-grid-tile class="collection-general">
18-
<img src="https://material.angular.io/assets/img/examples/shiba2.jpg" />
18+
<mat-grid-tile
19+
class="collection-special"
20+
*ngFor="let collection of collectionSpecial"
21+
>
22+
<ion-img *ngIf="collection.img" [src]="collection.img"></ion-img>
23+
</mat-grid-tile>
24+
<mat-grid-tile
25+
class="collection-rare"
26+
*ngFor="let collection of collectionRare"
27+
>
28+
<ion-img *ngIf="collection.img" [src]="collection.img"></ion-img>
1929
</mat-grid-tile>
20-
<mat-grid-tile class="collection-general"></mat-grid-tile>
21-
<mat-grid-tile class="collection-general"></mat-grid-tile>
22-
<mat-grid-tile class="collection-general"></mat-grid-tile>
23-
<mat-grid-tile class="collection-special"></mat-grid-tile>
24-
<mat-grid-tile class="collection-special"></mat-grid-tile>
25-
<mat-grid-tile class="collection-special"></mat-grid-tile>
26-
<mat-grid-tile class="collection-rare"></mat-grid-tile>
27-
<mat-grid-tile class="collection-rare"></mat-grid-tile>
28-
<mat-grid-tile class="collection-rare"></mat-grid-tile>
2930
</mat-grid-list>
3031
</div>

‎src/app/features/home/post-capture-tab/series/series.page.scss‎

Lines changed: 16 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,24 @@
1-
mat-toolbar {
2-
color: white;
3-
4-
.mat-icon {
5-
color: white;
6-
}
7-
}
8-
9-
.toolbar-spacer {
10-
flex: 1 1 auto;
11-
}
12-
13-
mat-grid-tile {
14-
img {
15-
width: 100%;
16-
height: 100%;
1+
ion-card {
2+
ion-img {
3+
height: 300px;
174
object-fit: cover;
185
object-position: center;
19-
overflow: hidden;
20-
border-radius: 4px;
216
}
227
}
238

24-
.page-content {
25-
padding-left: 16px;
26-
padding-right: 16px;
9+
mat-grid-list {
10+
margin: 8px;
11+
12+
mat-grid-tile {
13+
ion-img {
14+
width: 100%;
15+
height: 100%;
16+
object-fit: cover;
17+
object-position: center;
18+
overflow: hidden;
19+
border-radius: 4px;
20+
}
21+
}
2722
}
2823

2924
.collection-general {

‎src/app/features/home/post-capture-tab/series/series.page.ts‎

Lines changed: 36 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,42 @@
11
import { Component } from '@angular/core';
2+
import { ActivatedRoute } from '@angular/router';
3+
import { map } from 'rxjs/operators';
24
@Component({
35
selector: 'app-series',
46
templateUrl: './series.page.html',
57
styleUrls: ['./series.page.scss'],
68
})
7-
export class SeriesPage {}
9+
export class SeriesPage {
10+
readonly id$ = this.route.paramMap.pipe(map(params => params.get('id')));
11+
12+
readonly cover$ = this.route.paramMap.pipe(
13+
map(params => params.get('cover'))
14+
);
15+
16+
readonly collectionGeneral = [
17+
{ img: undefined },
18+
{ img: 'https://material.angular.io/assets/img/examples/shiba1.jpg' },
19+
{ img: undefined },
20+
{ img: undefined },
21+
{ img: undefined },
22+
{ img: undefined },
23+
{ img: undefined },
24+
{ img: undefined },
25+
{ img: undefined },
26+
{ img: undefined },
27+
{ img: undefined },
28+
{ img: undefined },
29+
];
30+
readonly collectionSpecial = [
31+
{ img: undefined },
32+
{ img: undefined },
33+
{ img: undefined },
34+
];
35+
readonly collectionRare = [
36+
{ img: undefined },
37+
{ img: 'https://material.angular.io/assets/img/examples/shiba2.jpg' },
38+
{ img: undefined },
39+
];
40+
41+
constructor(private readonly route: ActivatedRoute) {}
42+
}

‎src/app/shared/core/series-card/series-card.component.html‎

Lines changed: 0 additions & 15 deletions
This file was deleted.

‎src/app/shared/core/series-card/series-card.component.scss‎

Lines changed: 0 additions & 33 deletions
This file was deleted.

‎src/app/shared/core/series-card/series-card.component.spec.ts‎

Lines changed: 0 additions & 24 deletions
This file was deleted.

‎src/app/shared/core/series-card/series-card.component.ts‎

Lines changed: 0 additions & 8 deletions
This file was deleted.

0 commit comments

Comments
 (0)