UI series

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

@@ -23,18 +23,18 @@
         [routerLink]="['post-capture-details', { id: postCapture.id }]"
       >
         <ion-img [src]="postCapture.asset_file_thumbnail"></ion-img>
-        <mat-icon class="uploaded">shopping_bag</mat-icon>
+        <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
-      *ngFor="let series of getSeries$ | async"
-      [src]="series.cover_image"
+    <div
+      class="series-image"
+      *ngFor="let series of series$ | async"
       [routerLink]="['series', { id: series.id, cover: series.cover_image }]"
     >
-    </app-series-card>
+      <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 {
@@ -54,10 +54,29 @@ mat-icon {
   z-index: 10;
 }
 
-mat-icon.uploaded {
+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

@@ -32,12 +32,11 @@ export class PostCaptureTabComponent {
     )
   );
 
-  // collected=True
-  readonly getSeries$ = this.networkService.connected$.pipe(
+  readonly series$ = this.networkService.connected$.pipe(
     switchMap(isConnected =>
       iif(
         () => isConnected,
-        this.diaBackendSeriesRepository.readSeries$().pipe(
+        this.diaBackendSeriesRepository.fetchSeries$().pipe(
           pluck('results')
           // map(series => series.filter(a => a.in_store == true))
         )

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

@@ -5,25 +5,27 @@
   <div class="toolbar-spacer"></div>
 </mat-toolbar>
 <div class="page-content">
-  <app-series-card [src]="cover"></app-series-card>
+  <div class="series-image">
+    <ion-img [src]="cover"></ion-img>
+  </div>
   <mat-grid-list cols="3" gutterSize="8px">
     <mat-grid-tile
       class="collection-general"
       *ngFor="let collection of collectionGeneral"
     >
-      <img *ngIf="collection.img != null" [src]="collection.img" />
+      <ion-img *ngIf="collection.img" [src]="collection.img"></ion-img>
     </mat-grid-tile>
     <mat-grid-tile
       class="collection-special"
       *ngFor="let collection of collectionSpecial"
     >
-      <img *ngIf="collection.img != null" [src]="collection.img" />
+      <ion-img *ngIf="collection.img" [src]="collection.img"></ion-img>
     </mat-grid-tile>
     <mat-grid-tile
       class="collection-rare"
       *ngFor="let collection of collectionRare"
     >
-      <img *ngIf="collection.img != null" [src]="collection.img" />
+      <ion-img *ngIf="collection.img" [src]="collection.img"></ion-img>
     </mat-grid-tile>
   </mat-grid-list>
 </div>

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

@@ -22,9 +22,7 @@ mat-grid-tile {
 }
 
 .page-content {
-  padding-left: 16px;
-  padding-right: 16px;
-  padding-bottom: 16px;
+  padding: 16px;
 }
 
 .collection-general {
@@ -50,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,14 +1,15 @@
-import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Component } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
 @Component({
   selector: 'app-series',
   templateUrl: './series.page.html',
   styleUrls: ['./series.page.scss'],
 })
-export class SeriesPage implements OnInit {
-  id: string | null | undefined;
-  cover: string | null | undefined;
-  collectionGeneral = [
+export class SeriesPage {
+  readonly id = this.route.snapshot.paramMap.get('id');
+  readonly cover = this.route.snapshot.paramMap.get('cover');
+
+  readonly collectionGeneral = [
     { img: null },
     { img: 'https://material.angular.io/assets/img/examples/shiba1.jpg' },
     { img: null },
@@ -22,20 +23,12 @@ export class SeriesPage implements OnInit {
     { img: null },
     { img: null },
   ];
-  collectionSpecial = [{ img: null }, { img: null }, { img: null }];
-  collectionRare = [
+  readonly collectionSpecial = [{ img: null }, { img: null }, { img: null }];
+  readonly collectionRare = [
     { img: null },
     { img: 'https://material.angular.io/assets/img/examples/shiba2.jpg' },
     { img: null },
   ];
 
-  async ngOnInit() {
-    this.id = this.route.snapshot.paramMap.get('id');
-    this.cover = this.route.snapshot.paramMap.get('cover');
-  }
-
-  constructor(
-    private readonly router: Router,
-    private readonly route: ActivatedRoute
-  ) {}
+  constructor(private readonly route: ActivatedRoute) {}
 }

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

@@ -1,32 +1,36 @@
 // tslint:disable: no-magic-numbers
 import { HttpClient, HttpErrorResponse } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { defer, Subject, throwError } from 'rxjs';
+import { defer, ReplaySubject, 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 {
-  private readonly postCapturesUpdated$ = new Subject<{ reason?: string }>();
-
+  private readonly postCapturesCache$ = new ReplaySubject<
+    PaginatedResponse<DiaBackendSeries>
+  >(1);
   constructor(
     private readonly httpClient: HttpClient,
     private readonly authService: DiaBackendAuthService
   ) {}
 
-  readSeries$() {
+  fetchSeries$() {
     return defer(() => this.authService.getAuthHeaders()).pipe(
       concatMap(headers =>
-        this.httpClient.get<DiaBackendSeries>(`${BASE_URL}/api/v2/series/`, {
-          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));
         }
@@ -39,14 +43,6 @@ export class DiaBackendSeriesRepository {
 export interface DiaBackendSeries {
   readonly id: string;
   readonly collections: string;
-  readonly in_store: boolean | null | undefined;
-  readonly owner: string;
-  readonly owner_name: string;
-  readonly type: string;
-  readonly cover_image: string | null | undefined;
-  readonly title: string;
-  readonly collected: boolean;
-  readonly description: string;
-  readonly created_at: string;
-  readonly updated_at: string;
+  readonly in_store: boolean | null;
+  readonly cover_image: string | null;
 }