UI series

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

@@ -23,13 +23,18 @@
         [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-image"
+      *ngFor="let series of series$ | async"
+      [routerLink]="['series', { id: series.id, cover: series.cover_image }]"
+    >
+      <ion-img [src]="series.cover_image"></ion-img>
+    </div>
   </div>
 </div>

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

@@ -7,10 +7,10 @@
   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 {
@@ -48,3 +48,35 @@ mat-grid-tile {
 .tab-content-post {
   height: 100%;
 }
+
+mat-icon {
+  color: white;
+  z-index: 10;
+}
+
+mat-icon.from-store {
+  position: absolute;
+  bottom: 5px;
+  left: 5px;
+  font-size: 20px;
+  opacity: 90%;
+}
+
+.series-image {
+  margin-top: 10px;
+  margin-bottom: 20px;
+  width: 100%;
+  height: 300px;
+  max-width: 500px;
+  max-height: 300px;
+  overflow: hidden;
+  box-sizing: border-box;
+  box-shadow: 4px 0 4px #a5a5a5;
+  border-radius: 5px;
+
+  ion-img {
+    object-fit: cover;
+    object-position: center;
+    height: 100%;
+  }
+}

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>
+  <div class="series-image">
+    <ion-img [src]="cover$ | async"></ion-img>
+  </div>
   <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

@@ -22,8 +22,7 @@ mat-grid-tile {
 }
 
 .page-content {
-  padding-left: 16px;
-  padding-right: 16px;
+  padding: 16px;
 }
 
 .collection-general {
@@ -49,3 +48,22 @@ mat-grid-tile {
   border-radius: 4px;
   background: #ffaced;
 }
+
+.series-image {
+  margin-top: 10px;
+  margin-bottom: 20px;
+  width: 100%;
+  height: 300px;
+  max-width: 500px;
+  max-height: 300px;
+  overflow: hidden;
+  box-sizing: border-box;
+  box-shadow: 4px 0 4px #a5a5a5;
+  border-radius: 5px;
+
+  ion-img {
+    object-fit: cover;
+    object-position: center;
+    height: 100%;
+  }
+}

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());
+});

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

@@ -0,0 +1,46 @@
+// tslint:disable: no-magic-numbers
+import { HttpClient, HttpErrorResponse } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { defer, throwError } from 'rxjs';
+import { catchError, concatMap } from 'rxjs/operators';
+import { DiaBackendAuthService } from '../auth/dia-backend-auth.service';
+import { NotFoundErrorResponse } from '../errors';
+import { PaginatedResponse } from '../pagination';
+import { BASE_URL } from '../secret';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class DiaBackendSeriesRepository {
+  constructor(
+    private readonly httpClient: HttpClient,
+    private readonly authService: DiaBackendAuthService
+  ) {}
+
+  fetchSeries$() {
+    return defer(() => this.authService.getAuthHeaders()).pipe(
+      concatMap(headers =>
+        this.httpClient.get<PaginatedResponse<DiaBackendSeries>>(
+          `${BASE_URL}/api/v2/series/`,
+          {
+            headers,
+          }
+        )
+      ),
+      catchError((err: unknown) => {
+        // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+        if (err instanceof HttpErrorResponse && err.status === 404) {
+          return throwError(new NotFoundErrorResponse(err));
+        }
+        return throwError(err);
+      })
+    );
+  }
+}
+
+export interface DiaBackendSeries {
+  readonly id: string;
+  readonly collections: string;
+  readonly in_store: boolean | null;
+  readonly cover_image: string | null;
+}

src/app/shared/shared.module.ts

@@ -7,9 +7,8 @@ import { TranslocoModule } from '@ngneat/transloco';
 import { CapacitorPluginsModule } from './core/capacitor-plugins/capacitor-plugins.module';
 import { MaterialModule } from './core/material/material.module';
 import { MigratingDialogComponent } from './core/migrating-dialog/migrating-dialog.component';
-import { SeriesCardComponent } from './core/series-card/series-card.component';
 
-const declarations = [MigratingDialogComponent, SeriesCardComponent];
+const declarations = [MigratingDialogComponent];
 
 const imports = [
   CommonModule,