diff --git a/src/app/features/home/post-capture-tab/post-capture-tab.component.html b/src/app/features/home/post-capture-tab/post-capture-tab.component.html
index 00e49002d..4a90a45fc 100644
--- a/src/app/features/home/post-capture-tab/post-capture-tab.component.html
+++ b/src/app/features/home/post-capture-tab/post-capture-tab.component.html
@@ -4,13 +4,10 @@
-
+
-
+
@@ -23,13 +20,17 @@
[routerLink]="['post-capture-details', { id: postCapture.id }]"
>
+ shopping_bag
-
diff --git a/src/app/features/home/post-capture-tab/post-capture-tab.component.scss b/src/app/features/home/post-capture-tab/post-capture-tab.component.scss
index 1a85c775f..e07aa2ee8 100644
--- a/src/app/features/home/post-capture-tab/post-capture-tab.component.scss
+++ b/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;
+ }
+ }
}
diff --git a/src/app/features/home/post-capture-tab/post-capture-tab.component.ts b/src/app/features/home/post-capture-tab/post-capture-tab.component.ts
index f46ca9b28..88ecd8622 100644
--- a/src/app/features/home/post-capture-tab/post-capture-tab.component.ts
+++ b/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
) {}
diff --git a/src/app/features/home/post-capture-tab/series/series.page.html b/src/app/features/home/post-capture-tab/series/series.page.html
index e9bddc0f9..899ec5638 100644
--- a/src/app/features/home/post-capture-tab/series/series.page.html
+++ b/src/app/features/home/post-capture-tab/series/series.page.html
@@ -5,26 +5,27 @@
-
+
+
+
-
-
+
+
-
-
-
-
-
-
+
+
+
+
+
-
-
-
-
-
-
-
-
-
diff --git a/src/app/features/home/post-capture-tab/series/series.page.scss b/src/app/features/home/post-capture-tab/series/series.page.scss
index 088305bd8..6309ee9f7 100644
--- a/src/app/features/home/post-capture-tab/series/series.page.scss
+++ b/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 {
diff --git a/src/app/features/home/post-capture-tab/series/series.page.ts b/src/app/features/home/post-capture-tab/series/series.page.ts
index b66ce605d..75d0277ff 100644
--- a/src/app/features/home/post-capture-tab/series/series.page.ts
+++ b/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) {}
+}
diff --git a/src/app/shared/core/series-card/series-card.component.html b/src/app/shared/core/series-card/series-card.component.html
deleted file mode 100644
index e6e2a207e..000000000
--- a/src/app/shared/core/series-card/series-card.component.html
+++ /dev/null
@@ -1,15 +0,0 @@
-
diff --git a/src/app/shared/core/series-card/series-card.component.scss b/src/app/shared/core/series-card/series-card.component.scss
deleted file mode 100644
index 002f970b3..000000000
--- a/src/app/shared/core/series-card/series-card.component.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-:host {
- display: flex;
- width: 100%;
- flex-direction: row;
- align-items: center;
- justify-content: center;
- margin-top: 10px;
- margin-bottom: 20px;
-}
-
-.series-background {
- display: flex;
- padding-right: 5px;
- box-sizing: border-box;
- box-shadow: 4px 0 4px rgb(0 0 0/ 0.25);
- border-radius: 5px;
-}
-
-.series-image {
- width: 100%;
- height: 162px;
- overflow: hidden;
- border: 5px solid black;
- box-sizing: border-box;
- box-shadow: 4px 0 4px rgb(0 0 0/ 0.25);
- border-radius: 5px;
-
- ion-img {
- object-fit: cover;
- object-position: center;
- height: 100%;
- }
-}
diff --git a/src/app/shared/core/series-card/series-card.component.spec.ts b/src/app/shared/core/series-card/series-card.component.spec.ts
deleted file mode 100644
index e4f9c8e4c..000000000
--- a/src/app/shared/core/series-card/series-card.component.spec.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { SharedTestingModule } from '../../shared-testing.module';
-import { SeriesCardComponent } from './series-card.component';
-
-describe('SeriesCardComponent', () => {
- let component: SeriesCardComponent;
- let fixture: ComponentFixture
;
-
- beforeEach(
- waitForAsync(() => {
- TestBed.configureTestingModule({
- declarations: [SeriesCardComponent],
- imports: [SharedTestingModule],
- }).compileComponents();
- fixture = TestBed.createComponent(SeriesCardComponent);
- component = fixture.componentInstance;
- fixture.detectChanges();
- })
- );
-
- it('should create', () => {
- expect(component).toBeTruthy();
- });
-});
diff --git a/src/app/shared/core/series-card/series-card.component.ts b/src/app/shared/core/series-card/series-card.component.ts
deleted file mode 100644
index 3521ceb83..000000000
--- a/src/app/shared/core/series-card/series-card.component.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'app-series-card',
- templateUrl: './series-card.component.html',
- styleUrls: ['./series-card.component.scss'],
-})
-export class SeriesCardComponent {}
diff --git a/src/app/shared/services/dia-backend/series/dia-backend-series-repository.service.spec.ts b/src/app/shared/services/dia-backend/series/dia-backend-series-repository.service.spec.ts
new file mode 100644
index 000000000..55fe5efef
--- /dev/null
+++ b/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());
+});
diff --git a/src/app/shared/services/dia-backend/series/dia-backend-series-repository.service.ts b/src/app/shared/services/dia-backend/series/dia-backend-series-repository.service.ts
new file mode 100644
index 000000000..dedf6610a
--- /dev/null
+++ b/src/app/shared/services/dia-backend/series/dia-backend-series-repository.service.ts
@@ -0,0 +1,43 @@
+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 {
+ readonly fetchSeries$ = defer(() => this.authService.getAuthHeaders()).pipe(
+ concatMap(headers =>
+ this.httpClient.get>(
+ `${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);
+ })
+ );
+
+ constructor(
+ private readonly httpClient: HttpClient,
+ private readonly authService: DiaBackendAuthService
+ ) {}
+}
+
+export interface DiaBackendSeries {
+ readonly id: string;
+ readonly collections: string;
+ readonly in_store: boolean | null;
+ readonly cover_image: string | null;
+}
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index 1957e0fd8..fc115c029 100644
--- a/src/app/shared/shared.module.ts
+++ b/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,