From 239dbc7def3a41a3e2ef70bff65ce1f44ab0f013 Mon Sep 17 00:00:00 2001 From: Rinat Arsaev Date: Wed, 20 May 2020 14:02:23 +0300 Subject: [PATCH] Fix empty error & Integration / shops split test | real shops (#233) --- .prettierrc | 1 + .../shops-panels-list.component.ts | 14 +++- .../shops-panels-list.service.ts | 74 ++++--------------- .../integrations/shops/shops.component.html | 6 +- .../integrations/shops/shops.component.ts | 8 ++ .../integrations/shops/shops.service.ts | 53 ++++++++++++- .../operators/filter-shops-by-env.ts | 15 ++-- src/components/layout/card/card.component.ts | 6 +- .../dropdown-actions.component.ts | 2 +- .../dropdown-content.component.ts | 2 +- .../expand-panel-accordion.component.ts | 6 +- .../layout/panel/panel.component.ts | 2 +- 12 files changed, 106 insertions(+), 83 deletions(-) diff --git a/.prettierrc b/.prettierrc index c333af6b..d95e98c9 100644 --- a/.prettierrc +++ b/.prettierrc @@ -2,6 +2,7 @@ "printWidth": 120, "singleQuote": true, "tabWidth": 4, + "endOfLine": "auto", "overrides": [ { "files": "*.svg", diff --git a/src/app/sections/payment-section/integrations/shops/shops-panels-list/shops-panels-list.component.ts b/src/app/sections/payment-section/integrations/shops/shops-panels-list/shops-panels-list.component.ts index 7bc5775b..e33fc6e6 100644 --- a/src/app/sections/payment-section/integrations/shops/shops-panels-list/shops-panels-list.component.ts +++ b/src/app/sections/payment-section/integrations/shops/shops-panels-list/shops-panels-list.component.ts @@ -1,7 +1,8 @@ -import { ChangeDetectionStrategy, Component } from '@angular/core'; +import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core'; import { MatSnackBar } from '@angular/material/snack-bar'; import { TranslocoService } from '@ngneat/transloco'; +import { Shop } from '../../../../../api-codegen/capi'; import { ShopsPanelsListService } from './shops-panels-list.service'; @Component({ @@ -11,6 +12,13 @@ import { ShopsPanelsListService } from './shops-panels-list.service'; changeDetection: ChangeDetectionStrategy.OnPush, }) export class ShopsPanelsListComponent { + @Input() set shops(shops: Shop[]) { + this.shopsPanelsListService.updateShops(shops); + } + + @Output() activateShop = new EventEmitter(); + @Output() suspendShop = new EventEmitter(); + shops$ = this.shopsPanelsListService.shops$; selectedPanelPosition$ = this.shopsPanelsListService.selectedPanelPosition$; hasMore$ = this.shopsPanelsListService.hasMore$; @@ -30,11 +38,11 @@ export class ShopsPanelsListComponent { } suspend(id: string) { - this.shopsPanelsListService.suspend(id); + this.suspendShop.emit(id); } activate(id: string) { - this.shopsPanelsListService.activate(id); + this.activateShop.emit(id); } showMore() { diff --git a/src/app/sections/payment-section/integrations/shops/shops-panels-list/shops-panels-list.service.ts b/src/app/sections/payment-section/integrations/shops/shops-panels-list/shops-panels-list.service.ts index 770a897c..b85a522c 100644 --- a/src/app/sections/payment-section/integrations/shops/shops-panels-list/shops-panels-list.service.ts +++ b/src/app/sections/payment-section/integrations/shops/shops-panels-list/shops-panels-list.service.ts @@ -1,25 +1,19 @@ import { Injectable } from '@angular/core'; -import { MatDialog } from '@angular/material/dialog'; -import { MatSnackBar } from '@angular/material/snack-bar'; import { ActivatedRoute, Router } from '@angular/router'; -import { TranslocoService } from '@ngneat/transloco'; -import { combineLatest, concat, Subject } from 'rxjs'; -import { filter, first, map, mapTo, pluck, scan, shareReplay, switchMap } from 'rxjs/operators'; +import { combineLatest, concat, ReplaySubject, Subject } from 'rxjs'; +import { map, mapTo, pluck, scan, shareReplay, take } from 'rxjs/operators'; -import { ConfirmActionDialogComponent } from '@dsh/components/popups'; - -import { ShopService } from '../../../../../api'; +import { Shop } from '../../../../../api-codegen/capi'; import { SHARE_REPLAY_CONF } from '../../../../../custom-operators'; -import { ShopsService } from '../shops.service'; const SHOPS_LIMIT = 10; @Injectable() export class ShopsPanelsListService { + private allShops$ = new ReplaySubject(1); private showMore$ = new Subject(); - selectedPanelPosition$ = combineLatest([this.route.fragment, this.shopsService.shops$]).pipe( - first(), + selectedPanelPosition$ = combineLatest([this.route.fragment.pipe(take(1)), this.allShops$]).pipe( map(([fragment, shops]) => shops.findIndex(({ id }) => id === fragment)), shareReplay(SHARE_REPLAY_CONF) ); @@ -32,74 +26,32 @@ export class ShopsPanelsListService { shareReplay(SHARE_REPLAY_CONF) ); - shops$ = combineLatest([this.shopService.shops$, this.offset$]).pipe( + shops$ = combineLatest([this.allShops$, this.offset$]).pipe( map(([shops, showedCount]) => shops.slice(0, showedCount)), shareReplay(SHARE_REPLAY_CONF) ); - hasMore$ = combineLatest([this.shopService.shops$.pipe(pluck('length')), this.offset$]).pipe( + hasMore$ = combineLatest([this.allShops$.pipe(pluck('length')), this.offset$]).pipe( map(([count, showedCount]) => count > showedCount), shareReplay(SHARE_REPLAY_CONF) ); - constructor( - private dialog: MatDialog, - private shopsService: ShopsService, - private route: ActivatedRoute, - private router: Router, - private shopService: ShopService, - private snackBar: MatSnackBar, - private transloco: TranslocoService - ) {} + constructor(private route: ActivatedRoute, private router: Router) {} select(idx: number) { - this.shopsService.shops$.pipe(pluck(idx, 'id')).subscribe((fragment) => { + this.allShops$.pipe(pluck(idx, 'id')).subscribe((fragment) => { this.router.navigate([], { fragment, queryParams: this.route.snapshot.queryParams }); }); } - suspend(id: string) { - this.dialog - .open(ConfirmActionDialogComponent) - .afterClosed() - .pipe( - filter((r) => r === 'confirm'), - switchMap(() => this.shopService.suspendShop(id)) - ) - .subscribe( - () => { - this.snackBar.open(this.transloco.translate('suspend.success', null, 'shops|scoped'), 'OK', { - duration: 3000, - }); - this.shopService.reloadShops(); - }, - () => this.snackBar.open(this.transloco.translate('suspend.error', null, 'shops|scoped'), 'OK') - ); - } - - activate(id: string) { - this.dialog - .open(ConfirmActionDialogComponent) - .afterClosed() - .pipe( - filter((r) => r === 'confirm'), - switchMap(() => this.shopService.activateShop(id)) - ) - .subscribe( - () => { - this.snackBar.open(this.transloco.translate('activate.success', null, 'shops|scoped'), 'OK', { - duration: 3000, - }); - this.shopService.reloadShops(); - }, - () => this.snackBar.open(this.transloco.translate('activate.error', null, 'shops|scoped'), 'OK') - ); - } - showMore() { this.showMore$.next(); } + updateShops(shops: Shop[]) { + this.allShops$.next(shops); + } + private getOffsetBySelectedPanelPosition(idx: number) { if (idx === -1) { return SHOPS_LIMIT; diff --git a/src/app/sections/payment-section/integrations/shops/shops.component.html b/src/app/sections/payment-section/integrations/shops/shops.component.html index 5bda6daa..b09a5e89 100644 --- a/src/app/sections/payment-section/integrations/shops/shops.component.html +++ b/src/app/sections/payment-section/integrations/shops/shops.component.html @@ -8,7 +8,11 @@ - +
{{ t.emptySearchResult }}
diff --git a/src/app/sections/payment-section/integrations/shops/shops.component.ts b/src/app/sections/payment-section/integrations/shops/shops.component.ts index a3aa2a01..0cd640b6 100644 --- a/src/app/sections/payment-section/integrations/shops/shops.component.ts +++ b/src/app/sections/payment-section/integrations/shops/shops.component.ts @@ -15,4 +15,12 @@ export class ShopsComponent { isLoading$ = this.shopsService.isLoading$.pipe(booleanDebounceTime()); constructor(@Inject(LAYOUT_GAP) public layoutGap: string, private shopsService: ShopsService) {} + + activate(id: string) { + this.shopsService.activate(id); + } + + suspend(id: string) { + this.shopsService.suspend(id); + } } diff --git a/src/app/sections/payment-section/integrations/shops/shops.service.ts b/src/app/sections/payment-section/integrations/shops/shops.service.ts index d7ca7e13..48922c85 100644 --- a/src/app/sections/payment-section/integrations/shops/shops.service.ts +++ b/src/app/sections/payment-section/integrations/shops/shops.service.ts @@ -1,6 +1,11 @@ import { Injectable } from '@angular/core'; +import { MatDialog } from '@angular/material/dialog'; +import { MatSnackBar } from '@angular/material/snack-bar'; import { ActivatedRoute } from '@angular/router'; -import { pluck, shareReplay } from 'rxjs/operators'; +import { TranslocoService } from '@ngneat/transloco'; +import { filter, pluck, shareReplay, switchMap } from 'rxjs/operators'; + +import { ConfirmActionDialogComponent } from '@dsh/components/popups'; import { ShopService } from '../../../../api'; import { progress, SHARE_REPLAY_CONF } from '../../../../custom-operators'; @@ -16,5 +21,49 @@ export class ShopsService { isLoading$ = progress(this.route.params, this.shops$).pipe(shareReplay(SHARE_REPLAY_CONF)); - constructor(private route: ActivatedRoute, private shopService: ShopService) {} + constructor( + private route: ActivatedRoute, + private shopService: ShopService, + private dialog: MatDialog, + private snackBar: MatSnackBar, + private transloco: TranslocoService + ) {} + + suspend(id: string) { + this.dialog + .open(ConfirmActionDialogComponent) + .afterClosed() + .pipe( + filter((r) => r === 'confirm'), + switchMap(() => this.shopService.suspendShop(id)) + ) + .subscribe( + () => { + this.snackBar.open(this.transloco.translate('suspend.success', null, 'shops|scoped'), 'OK', { + duration: 3000, + }); + this.shopService.reloadShops(); + }, + () => this.snackBar.open(this.transloco.translate('suspend.error', null, 'shops|scoped'), 'OK') + ); + } + + activate(id: string) { + this.dialog + .open(ConfirmActionDialogComponent) + .afterClosed() + .pipe( + filter((r) => r === 'confirm'), + switchMap(() => this.shopService.activateShop(id)) + ) + .subscribe( + () => { + this.snackBar.open(this.transloco.translate('activate.success', null, 'shops|scoped'), 'OK', { + duration: 3000, + }); + this.shopService.reloadShops(); + }, + () => this.snackBar.open(this.transloco.translate('activate.error', null, 'shops|scoped'), 'OK') + ); + } } diff --git a/src/app/sections/payment-section/operations/operators/filter-shops-by-env.ts b/src/app/sections/payment-section/operations/operators/filter-shops-by-env.ts index 9ce33c3a..fb1670ed 100644 --- a/src/app/sections/payment-section/operations/operators/filter-shops-by-env.ts +++ b/src/app/sections/payment-section/operations/operators/filter-shops-by-env.ts @@ -5,15 +5,16 @@ import { filterBattleShops, filterTestShops } from '../../../../api'; import { Shop } from '../../../../api-codegen/capi'; import { RouteEnv } from '../../../route-env'; -export const filterShopsByEnv = (shops: Observable) => (s: Observable): Observable => +export const filterShopsByEnv = (shops$: Observable) => (s: Observable): Observable => s.pipe( switchMap((envID) => { - if (envID === RouteEnv.test) { - return shops.pipe(filterTestShops); + switch (envID) { + case RouteEnv.test: + return shops$.pipe(filterTestShops); + case RouteEnv.real: + return shops$.pipe(filterBattleShops); + default: + return throwError(`Unknown envID: ${envID}`); } - if (envID === RouteEnv.real) { - return shops.pipe(filterBattleShops); - } - return throwError(`Unknown envID: ${envID}`); }) ); diff --git a/src/components/layout/card/card.component.ts b/src/components/layout/card/card.component.ts index d1b3db07..b84fc8ff 100644 --- a/src/components/layout/card/card.component.ts +++ b/src/components/layout/card/card.component.ts @@ -3,7 +3,7 @@ import { ChangeDetectionStrategy, Component, Directive, HostBinding, ViewEncapsu @Component({ selector: 'dsh-card', styleUrls: ['card.component.scss'], - template: ` `, + template: ``, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, }) @@ -23,7 +23,7 @@ export class CardHeaderComponent { @Component({ selector: 'dsh-card-content', - template: ` `, + template: ``, }) export class CardContentComponent { @HostBinding('class.dsh-card-content') class = true; @@ -32,7 +32,7 @@ export class CardContentComponent { @Component({ selector: 'dsh-card-actions', exportAs: 'dshCardActions', - template: ` `, + template: ``, }) export class CardActionsComponent { @HostBinding('class.dsh-card-actions') class = true; diff --git a/src/components/layout/dropdown/dropdown-actions/dropdown-actions.component.ts b/src/components/layout/dropdown/dropdown-actions/dropdown-actions.component.ts index 680e0389..d87fc973 100644 --- a/src/components/layout/dropdown/dropdown-actions/dropdown-actions.component.ts +++ b/src/components/layout/dropdown/dropdown-actions/dropdown-actions.component.ts @@ -2,7 +2,7 @@ import { Component } from '@angular/core'; @Component({ selector: 'dsh-dropdown-actions', - template: ` `, + template: ``, styleUrls: ['dropdown-actions.component.scss'], }) export class DropdownActionsComponent {} diff --git a/src/components/layout/dropdown/dropdown-content/dropdown-content.component.ts b/src/components/layout/dropdown/dropdown-content/dropdown-content.component.ts index 7d3617d5..4fa4aa20 100644 --- a/src/components/layout/dropdown/dropdown-content/dropdown-content.component.ts +++ b/src/components/layout/dropdown/dropdown-content/dropdown-content.component.ts @@ -2,7 +2,7 @@ import { Component } from '@angular/core'; @Component({ selector: 'dsh-dropdown-content', - template: ` `, + template: ``, styleUrls: ['dropdown-content.component.scss'], }) export class DropdownContentComponent {} diff --git a/src/components/layout/expand-panel/expand-panel-accordion.component.ts b/src/components/layout/expand-panel/expand-panel-accordion.component.ts index ab76c740..83b23b0b 100644 --- a/src/components/layout/expand-panel/expand-panel-accordion.component.ts +++ b/src/components/layout/expand-panel/expand-panel-accordion.component.ts @@ -9,7 +9,7 @@ import { ViewContainerRef, } from '@angular/core'; import { combineLatest, merge, of, Subscription } from 'rxjs'; -import { delay, distinctUntilChanged, filter, first, map, startWith, switchMap } from 'rxjs/operators'; +import { delay, distinctUntilChanged, filter, map, startWith, switchMap, take } from 'rxjs/operators'; import { coerce, smoothChangeTo } from '../../../utils'; import { ExpandPanelComponent } from './expand-panel.component'; @@ -20,7 +20,7 @@ const SCROLL_TIME_MS = 500; @Component({ selector: 'dsh-expand-panel-accordion', - template: ` `, + template: ``, }) export class ExpandPanelAccordionComponent implements AfterViewInit { @Output() expandedChange = new EventEmitter(); @@ -65,7 +65,7 @@ export class ExpandPanelAccordionComponent implements AfterViewInit { component: components.toArray()[this.expanded], })), filter(({ ref, component }) => !!ref && !!component), - first(), + take(1), delay(INIT_DELAY_MS), switchMap(({ ref, component }) => combineLatest([ diff --git a/src/components/layout/panel/panel.component.ts b/src/components/layout/panel/panel.component.ts index 5ac74ef2..fb11d2b1 100644 --- a/src/components/layout/panel/panel.component.ts +++ b/src/components/layout/panel/panel.component.ts @@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component, HostBinding, Input, ViewEncapsulati @Component({ selector: 'dsh-panel-content', - template: ` `, + template: ``, }) export class PanelContentComponent { @HostBinding('class.dsh-panel-content') class = true;