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="uploaded">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>
+    <app-series-card
+      *ngFor="let series of getSeries$ | async"
+      [src]="series.cover_image"
+      [routerLink]="['series', { id: series.id, cover: series.cover_image }]"
+    >
+    </app-series-card>
   </div>
 </div>

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

@@ -48,3 +48,16 @@ mat-grid-tile {
 .tab-content-post {
   height: 100%;
 }
+
+mat-icon {
+  color: white;
+  z-index: 10;
+}
+
+mat-icon.uploaded {
+  position: absolute;
+  bottom: 5px;
+  left: 5px;
+  font-size: 20px;
+  opacity: 90%;
+}

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,22 @@ export class PostCaptureTabComponent {
     )
   );
 
+  // collected=True
+  readonly getSeries$ = this.networkService.connected$.pipe(
+    switchMap(isConnected =>
+      iif(
+        () => isConnected,
+        this.diaBackendSeriesRepository.readSeries$().pipe(
+          pluck('results')
+          // map(series => series.filter(a => a.in_store == true))
+        )
+      )
+    )
+  );
+
   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,25 @@
   <div class="toolbar-spacer"></div>
 </mat-toolbar>
 <div class="page-content">
-  <app-series-card></app-series-card>
+  <app-series-card [src]="cover"></app-series-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"
+    >
+      <img *ngIf="collection.img != null" [src]="collection.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"
+    >
+      <img *ngIf="collection.img != null" [src]="collection.img" />
+    </mat-grid-tile>
+    <mat-grid-tile
+      class="collection-rare"
+      *ngFor="let collection of collectionRare"
+    >
+      <img *ngIf="collection.img != null" [src]="collection.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

@@ -24,6 +24,7 @@ mat-grid-tile {
 .page-content {
   padding-left: 16px;
   padding-right: 16px;
+  padding-bottom: 16px;
 }
 
 .collection-general {

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

@@ -1,7 +1,41 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
 @Component({
   selector: 'app-series',
   templateUrl: './series.page.html',
   styleUrls: ['./series.page.scss'],
 })
-export class SeriesPage {}
+export class SeriesPage implements OnInit {
+  id: string | null | undefined;
+  cover: string | null | undefined;
+  collectionGeneral = [
+    { img: null },
+    { img: 'https://material.angular.io/assets/img/examples/shiba1.jpg' },
+    { img: null },
+    { img: null },
+    { img: null },
+    { img: null },
+    { img: null },
+    { img: null },
+    { img: null },
+    { img: null },
+    { img: null },
+    { img: null },
+  ];
+  collectionSpecial = [{ img: null }, { img: null }, { img: null }];
+  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
+  ) {}
+}

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

@@ -1,15 +1,5 @@
-<div class="series-background">
-  <div class="series-background">
-    <div class="series-background">
-      <div class="series-background">
-        <div class="series-background">
-          <div class="series-image">
-            <ion-img
-              src="https://material.angular.io/assets/img/examples/shiba1.jpg"
-            ></ion-img>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
+<div class="series-image">
+  <!-- <ion-img src="https://material.angular.io/assets/img/examples/shiba1.jpg"></ion-img> -->
+
+  <ion-img [src]="src"></ion-img>
 </div>

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

@@ -18,11 +18,12 @@
 
 .series-image {
   width: 100%;
-  height: 162px;
+  height: 300px;
+  max-width: 500px;
+  max-height: 300px;
   overflow: hidden;
-  border: 5px solid black;
   box-sizing: border-box;
-  box-shadow: 4px 0 4px rgb(0 0 0/ 0.25);
+  box-shadow: 4px 0 4px #a5a5a5;
   border-radius: 5px;
 
   ion-img {

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

@@ -1,8 +1,10 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 
 @Component({
   selector: 'app-series-card',
   templateUrl: './series-card.component.html',
   styleUrls: ['./series-card.component.scss'],
 })
-export class SeriesCardComponent {}
+export class SeriesCardComponent {
+  @Input() src: any;
+}

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,52 @@
+// tslint:disable: no-magic-numbers
+import { HttpClient, HttpErrorResponse } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { defer, Subject, throwError } from 'rxjs';
+import { catchError, concatMap } from 'rxjs/operators';
+import { DiaBackendAuthService } from '../auth/dia-backend-auth.service';
+import { NotFoundErrorResponse } from '../errors';
+import { BASE_URL } from '../secret';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class DiaBackendSeriesRepository {
+  private readonly postCapturesUpdated$ = new Subject<{ reason?: string }>();
+
+  constructor(
+    private readonly httpClient: HttpClient,
+    private readonly authService: DiaBackendAuthService
+  ) {}
+
+  readSeries$() {
+    return defer(() => this.authService.getAuthHeaders()).pipe(
+      concatMap(headers =>
+        this.httpClient.get<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 | 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;
+}