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,