UI series

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

@@ -4,13 +4,10 @@
 <div class="segments" [ngSwitch]="categories">
   <ion-segment mode="ios" [(ngModel)]="categories">
     <ion-segment-button value="Photo" checked>
-      <ion-icon src="/assets/icon/apps.svg" class="series-tab-icon"></ion-icon>
+      <ion-icon src="/assets/icon/apps.svg" class="segment"></ion-icon>
     </ion-segment-button>
     <ion-segment-button value="Series">
-      <ion-icon
-        src="/assets/icon/series.svg"
-        class="series-tab-icon"
-      ></ion-icon>
+      <ion-icon src="/assets/icon/series.svg" class="segment"></ion-icon>
     </ion-segment-button>
   </ion-segment>
   <div class="post-captures" *ngSwitchCase="'Photo'">
@@ -23,13 +20,17 @@
         [routerLink]="['post-capture-details', { id: postCapture.id }]"
       >
         <ion-img [src]="postCapture.asset_file_thumbnail"></ion-img>
+        <mat-icon class="from-store">shopping_bag</mat-icon>
       </mat-grid-tile>
     </mat-grid-list>
   </div>
 
-  <div class="series-wrapper" *ngSwitchCase="'Series'">
-    <app-series-card routerLink="series"></app-series-card>
-    <app-series-card routerLink="series"></app-series-card>
-    <app-series-card routerLink="series"></app-series-card>
+  <div class="series" *ngSwitchCase="'Series'">
+    <ion-card
+      *ngFor="let series of series$ | async"
+      [routerLink]="['series', { id: series.id, cover: series.cover_image }]"
+    >
+      <ion-img [src]="series.cover_image"></ion-img>
+    </ion-card>
   </div>
 </div>

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

@@ -7,44 +7,63 @@
   margin: 0;
   padding: 8px;
   text-align: center;
-  background-color: var(--ion-color-light);
   color: darkgray;
   font-weight: 500;
   font-size: 0.9em;
+  background-color: var(--ion-color-light);
 }
 
 .segments {
   display: flex;
-  padding: 8px;
   flex-direction: column;
   height: 100%;
 }
 
 ion-segment {
   width: 80%;
-  margin: 0 auto 16px;
+  margin: 8px auto;
   flex-shrink: 0;
+
+  ion-icon.segment {
+    height: 40px;
+  }
 }
 
 .post-captures {
   overflow: auto;
-}
+  padding: 8px;
+
+  mat-grid-tile {
+    ion-img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      object-position: center;
+      overflow: hidden;
+      border-radius: 4px;
+    }
 
-mat-grid-tile {
-  ion-img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    object-position: center;
-    overflow: hidden;
-    border-radius: 4px;
+    mat-icon.from-store {
+      color: white;
+      z-index: 10;
+      position: absolute;
+      bottom: 5px;
+      left: 5px;
+      font-size: 20px;
+      opacity: 90%;
+    }
   }
 }
 
-.series-tab-icon {
-  height: 40px;
-}
+.series {
+  height: auto;
+  overflow: auto;
 
-.tab-content-post {
-  height: 100%;
+  ion-card {
+    ion-img {
+      height: 300px;
+      object-fit: cover;
+      object-position: center;
+    }
+  }
 }

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

@@ -6,6 +6,7 @@ import {
   DiaBackendAsset,
   DiaBackendAssetRepository,
 } from '../../../shared/services/dia-backend/asset/dia-backend-asset-repository.service';
+import { DiaBackendSeriesRepository } from '../../../shared/services/dia-backend/series/dia-backend-series-repository.service';
 import { NetworkService } from '../../../shared/services/network/network.service';
 
 @UntilDestroy({ checkProperties: true })
@@ -31,8 +32,18 @@ export class PostCaptureTabComponent {
     )
   );
 
+  readonly series$ = this.networkService.connected$.pipe(
+    switchMap(isConnected =>
+      iif(
+        () => isConnected,
+        this.diaBackendSeriesRepository.fetchSeries$.pipe(pluck('results'))
+      )
+    )
+  );
+
   constructor(
     private readonly diaBackendAssetRepository: DiaBackendAssetRepository,
+    private readonly diaBackendSeriesRepository: DiaBackendSeriesRepository,
     private readonly networkService: NetworkService
   ) {}
 

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

@@ -5,26 +5,27 @@
   <div class="toolbar-spacer"></div>
 </mat-toolbar>
 <div class="page-content">
-  <app-series-card></app-series-card>
+  <ion-card>
+    <ion-img [src]="cover$ | async"></ion-img>
+  </ion-card>
   <mat-grid-list cols="3" gutterSize="8px">
-    <mat-grid-tile class="collection-general">
-      <img src="https://material.angular.io/assets/img/examples/shiba1.jpg" />
+    <mat-grid-tile
+      class="collection-general"
+      *ngFor="let collection of collectionGeneral"
+    >
+      <ion-img *ngIf="collection.img" [src]="collection.img"></ion-img>
     </mat-grid-tile>
-    <mat-grid-tile class="collection-general"></mat-grid-tile>
-    <mat-grid-tile class="collection-general"></mat-grid-tile>
-    <mat-grid-tile class="collection-general"></mat-grid-tile>
-    <mat-grid-tile class="collection-general"></mat-grid-tile>
-    <mat-grid-tile class="collection-general">
-      <img src="https://material.angular.io/assets/img/examples/shiba2.jpg" />
+    <mat-grid-tile
+      class="collection-special"
+      *ngFor="let collection of collectionSpecial"
+    >
+      <ion-img *ngIf="collection.img" [src]="collection.img"></ion-img>
+    </mat-grid-tile>
+    <mat-grid-tile
+      class="collection-rare"
+      *ngFor="let collection of collectionRare"
+    >
+      <ion-img *ngIf="collection.img" [src]="collection.img"></ion-img>
     </mat-grid-tile>
-    <mat-grid-tile class="collection-general"></mat-grid-tile>
-    <mat-grid-tile class="collection-general"></mat-grid-tile>
-    <mat-grid-tile class="collection-general"></mat-grid-tile>
-    <mat-grid-tile class="collection-special"></mat-grid-tile>
-    <mat-grid-tile class="collection-special"></mat-grid-tile>
-    <mat-grid-tile class="collection-special"></mat-grid-tile>
-    <mat-grid-tile class="collection-rare"></mat-grid-tile>
-    <mat-grid-tile class="collection-rare"></mat-grid-tile>
-    <mat-grid-tile class="collection-rare"></mat-grid-tile>
   </mat-grid-list>
 </div>

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

@@ -1,29 +1,24 @@
-mat-toolbar {
-  color: white;
-
-  .mat-icon {
-    color: white;
-  }
-}
-
-.toolbar-spacer {
-  flex: 1 1 auto;
-}
-
-mat-grid-tile {
-  img {
-    width: 100%;
-    height: 100%;
+ion-card {
+  ion-img {
+    height: 300px;
     object-fit: cover;
     object-position: center;
-    overflow: hidden;
-    border-radius: 4px;
   }
 }
 
-.page-content {
-  padding-left: 16px;
-  padding-right: 16px;
+mat-grid-list {
+  margin: 8px;
+
+  mat-grid-tile {
+    ion-img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      object-position: center;
+      overflow: hidden;
+      border-radius: 4px;
+    }
+  }
 }
 
 .collection-general {

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

@@ -1,7 +1,42 @@
 import { Component } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { map } from 'rxjs/operators';
 @Component({
   selector: 'app-series',
   templateUrl: './series.page.html',
   styleUrls: ['./series.page.scss'],
 })
-export class SeriesPage {}
+export class SeriesPage {
+  readonly id$ = this.route.paramMap.pipe(map(params => params.get('id')));
+
+  readonly cover$ = this.route.paramMap.pipe(
+    map(params => params.get('cover'))
+  );
+
+  readonly collectionGeneral = [
+    { img: undefined },
+    { img: 'https://material.angular.io/assets/img/examples/shiba1.jpg' },
+    { img: undefined },
+    { img: undefined },
+    { img: undefined },
+    { img: undefined },
+    { img: undefined },
+    { img: undefined },
+    { img: undefined },
+    { img: undefined },
+    { img: undefined },
+    { img: undefined },
+  ];
+  readonly collectionSpecial = [
+    { img: undefined },
+    { img: undefined },
+    { img: undefined },
+  ];
+  readonly collectionRare = [
+    { img: undefined },
+    { img: 'https://material.angular.io/assets/img/examples/shiba2.jpg' },
+    { img: undefined },
+  ];
+
+  constructor(private readonly route: ActivatedRoute) {}
+}

src/app/shared/services/dia-backend/series/dia-backend-series-repository.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+import { SharedTestingModule } from '../../../shared-testing.module';
+import { DiaBackendSeriesRepository } from './dia-backend-series-repository.service';
+
+describe('DiaBackendSeriesRepository', () => {
+  let service: DiaBackendSeriesRepository;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [SharedTestingModule],
+    });
+    service = TestBed.inject(DiaBackendSeriesRepository);
+  });
+
+  it('should be created', () => expect(service).toBeTruthy());
+});