FE-788: enrich ids in shops (#66)

src/app/papi/category.service.ts

@@ -3,7 +3,7 @@ import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
 
 import { ConfigService } from '../core/config.service';
-import { Category } from './model/category';
+import { Category } from './model';
 
 @Injectable()
 export class CategoryService {

src/app/party/party.service.ts

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 
-import { Party, Shop } from '../gen-damsel/domain';
+import { Contract, Party, PayoutTool, Shop } from '../gen-damsel/domain';
 import { PartyService as PapiPartyService } from '../papi/party.service';
 import { map, tap } from 'rxjs/operators';
 
@@ -33,4 +33,30 @@ export class PartyService {
     getShop(partyID: string, shopID: string): Observable<Shop> {
         return this.getShops(partyID).pipe(map(shops => shops.find(shop => shop.id === shopID)));
     }
+
+    getContracts(partyID: string): Observable<Contract[]> {
+        return this.getParty(partyID).pipe(map(party => Array.from(party.contracts.values())));
+    }
+
+    getContract(partyID: string, contractID: string): Observable<Contract> {
+        return this.getContracts(partyID).pipe(
+            map(contracts => contracts.find(contract => contract.id === contractID))
+        );
+    }
+
+    getPayoutTools(partyID: string, contractID: string): Observable<PayoutTool[]> {
+        return this.getContract(partyID, contractID).pipe(
+            map(contract => Array.from(contract.payout_tools.values()))
+        );
+    }
+
+    getPayoutTool(
+        partyID: string,
+        contractID: string,
+        payoutToolID: string
+    ): Observable<PayoutTool> {
+        return this.getPayoutTools(partyID, contractID).pipe(
+            map(payoutTools => payoutTools.find(payoutTool => payoutTool.id === payoutToolID))
+        );
+    }
 }

src/app/party/shop-details/shop-details.component.html

@@ -7,9 +7,29 @@
             <mat-card>
                 <mat-card-subtitle>Shop details</mat-card-subtitle>
                 <mat-card-content>
-                    <cc-shop-details [shop]="shop"></cc-shop-details>
+                    <cc-shop-info [shop]="shop" [partyID]="partyID"></cc-shop-info>
                 </mat-card-content>
             </mat-card>
+            <div fxLayout="row" fxLayoutGap="15px">
+                <mat-accordion fxFlex="50">
+                    <mat-expansion-panel>
+                        <mat-expansion-panel-header>
+                            <mat-panel-title> Contract details </mat-panel-title>
+                        </mat-expansion-panel-header>
+
+                        <cc-pretty-json [object]="contract"></cc-pretty-json>
+                    </mat-expansion-panel>
+                </mat-accordion>
+                <mat-accordion fxFlex="50">
+                    <mat-expansion-panel>
+                        <mat-expansion-panel-header>
+                            <mat-panel-title> Payout tool details </mat-panel-title>
+                        </mat-expansion-panel-header>
+
+                        <cc-pretty-json [object]="payoutTool"></cc-pretty-json>
+                    </mat-expansion-panel>
+                </mat-accordion>
+            </div>
             <mat-card>
                 <mat-card-subtitle>Shop actions</mat-card-subtitle>
                 <mat-card-content>

src/app/party/shop-details/shop-details.component.ts

@@ -4,7 +4,7 @@ import { filter, switchMap } from 'rxjs/operators';
 import { MatDialog } from '@angular/material';
 
 import { ShopDetailsService, ProviderInfo } from './shop-details.service';
-import { Shop } from '../../gen-damsel/domain';
+import { Contract, PayoutTool, Shop } from '../../gen-damsel/domain';
 import { AddProviderComponent } from './add-provider/add-provider.component';
 
 @Component({
@@ -15,6 +15,8 @@ import { AddProviderComponent } from './add-provider/add-provider.component';
 export class ShopDetailsComponent implements OnInit {
     isLoading = false;
     shop: Shop;
+    contract: Contract;
+    payoutTool: PayoutTool;
     partyID: string;
     providerInfo: ProviderInfo[];
 
@@ -58,9 +60,11 @@ export class ShopDetailsComponent implements OnInit {
                     return this.shopDetailsService.initialize(partyID, shopID);
                 })
             )
-            .subscribe(({ shop, providerInfo }) => {
+            .subscribe(({ payoutTool, shop, contract, providerInfo }) => {
                 this.isLoading = false;
+                this.payoutTool = payoutTool;
                 this.shop = shop;
+                this.contract = contract;
                 this.providerInfo = providerInfo;
             });
     }

src/app/party/shop-details/shop-details.module.ts

@@ -35,6 +35,8 @@ import { CreateTerminalFormComponent } from './add-provider/select-terminal/crea
 import { SelectTerminalComponent } from './add-provider/select-terminal/select-terminal.component';
 import { SelectProviderComponent } from './add-provider/select-provider/select-provider.component';
 import { IsActivePipe } from './is-active.pipe';
+import { CategoryComponent } from './shop-info/category/category.component';
+import { SharedModule } from '../../shared/shared.module';
 
 @NgModule({
     imports: [
@@ -59,7 +61,8 @@ import { IsActivePipe } from './is-active.pipe';
         MatProgressBarModule,
         MatMenuModule,
         MatProgressBarModule,
-        MatChipsModule
+        MatChipsModule,
+        SharedModule
     ],
     declarations: [
         ShopDetailsComponent,
@@ -73,7 +76,8 @@ import { IsActivePipe } from './is-active.pipe';
         CreateTerminalFormComponent,
         SelectProviderComponent,
         SelectTerminalComponent,
-        IsActivePipe
+        IsActivePipe,
+        CategoryComponent
     ],
     entryComponents: [AddProviderComponent]
 })

src/app/party/shop-details/shop-details.service.ts

@@ -1,9 +1,15 @@
 import { Injectable } from '@angular/core';
 import { Observable, combineLatest } from 'rxjs';
-import { map } from 'rxjs/operators';
+import { map, switchMap } from 'rxjs/operators';
 import get from 'lodash-es/get';
 
-import { ProviderObject, Shop, TerminalObject } from '../../gen-damsel/domain';
+import {
+    Contract,
+    PayoutTool,
+    ProviderObject,
+    Shop,
+    TerminalObject
+} from '../../gen-damsel/domain';
 import { extractTerminalInfo, TerminalInfo } from './extract-terminal-info';
 import { PartyService } from '../party.service';
 import { DomainTypedManager } from '../../thrift';
@@ -15,6 +21,8 @@ export interface ProviderInfo {
 
 export interface Payload {
     shop: Shop;
+    contract: Contract;
+    payoutTool: PayoutTool;
     providerInfo: ProviderInfo[];
 }
 
@@ -28,10 +36,30 @@ export class ShopDetailsService {
             this.dtm.getProviderObjects(),
             this.dtm.getTerminalObjects()
         ]).pipe(
-            map(([shop, providers, terminalObjects]) => ({
+            switchMap(([shop, providers, terminalObjects]) =>
-                shop,
+                this.partyService.getContract(partyID, shop.contract_id).pipe(
-                providerInfo: this.toProviderInfo(providers, terminalObjects, partyID, shopID)
+                    map(contract => ({
-            }))
+                        contract,
+                        providerInfo: this.toProviderInfo(
+                            providers,
+                            terminalObjects,
+                            partyID,
+                            shopID
+                        ),
+                        shop
+                    }))
+                )
+            ),
+            switchMap(({ contract, providerInfo, shop }) =>
+                this.partyService.getPayoutTool(partyID, contract.id, shop.payout_tool_id).pipe(
+                    map(payoutTool => ({
+                        payoutTool,
+                        shop,
+                        providerInfo,
+                        contract
+                    }))
+                )
+            )
         );
     }
 

src/app/party/shop-details/shop-info/category/category.component.html

@@ -0,0 +1 @@
+{{ category?.name }} (ID: {{ categoryID }})

src/app/party/shop-details/shop-info/category/category.component.ts

@@ -0,0 +1,21 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Category } from '../../../../gen-damsel/domain';
+import { CategoryService } from '../../../../papi/category.service';
+
+@Component({
+    templateUrl: 'category.component.html',
+    selector: 'cc-category',
+    providers: [CategoryService]
+})
+export class CategoryComponent implements OnInit {
+    @Input() categoryID: number;
+    category: Category;
+
+    constructor(private categoryService: CategoryService) {}
+
+    ngOnInit(): void {
+        this.categoryService.getCategories().subscribe(categories => {
+            this.category = categories.find(category => category.id === this.categoryID);
+        });
+    }
+}

src/app/party/shop-details/shop-info/shop-info.component.html

@@ -36,7 +36,7 @@
         </div>
         <div *ngIf="shop?.category?.id" fxLayout="row" fxLayout.xs="column">
             <label fxFlex="20">Category:</label>
-            <div>{{ shop.category.id }}</div>
+            <div><cc-category [categoryID]="shop.category.id"></cc-category></div>
         </div>
         <div *ngIf="shop?.location?.url" fxLayout="row" fxLayout.xs="column">
             <label fxFlex="20">URL:</label>

src/app/party/shop-details/shop-info/shop-info.component.ts

@@ -3,9 +3,10 @@ import { Component, Input } from '@angular/core';
 import { Shop } from '../../../gen-damsel/domain';
 
 @Component({
-    selector: 'cc-shop-details',
+    selector: 'cc-shop-info',
     templateUrl: 'shop-info.component.html'
 })
 export class ShopInfoComponent {
     @Input() shop: Shop;
+    @Input() partyID: string;
 }