FE-168: Добавить поддержку callback urls (#72)

* FE-168: Добавить поддержку callback urls

src/app/backend/classes/callback-handler.ts

@@ -0,0 +1,4 @@
+export class CallbackHandler {
+    public url: string;
+    public publicKey: string;
+}

src/app/backend/classes/shop.class.ts

@@ -1,4 +1,5 @@
 import { ShopDetail } from './shop-detail.class';
+import { CallbackHandler } from './callback-handler';
 
 export class Shop {
     public shopID: number;
@@ -8,4 +9,5 @@ export class Shop {
     public shopDetails: ShopDetail;
     public contractID: number;
     public payoutAccountID: number;
+    public callbackHandler: CallbackHandler;
 }

src/app/backend/services/shop.service.ts

@@ -23,7 +23,8 @@ export class ShopService {
             categoryRef: Number(args.categoryRef),
             shopDetails: args.shopDetails,
             contractID: Number(args.contractID),
-            payoutAccountID: Number(args.payoutAccountID)
+            payoutAccountID: Number(args.payoutAccountID),
+            callbackUrl: args.callbackHandler.url
         };
         return this.http.post(this.shopsUrl, params)
             .toPromise()
@@ -34,8 +35,9 @@ export class ShopService {
         const params = {
             categoryRef: Number(args.categoryRef),
             shopDetails: args.shopDetails,
-            contractID: Number(args.contractID),
+            contractID: Number(args.contractId),
-            payoutAccountID: Number(args.payoutAccountID)
+            payoutAccountID: Number(args.payoutAccountId),
+            callbackUrl: args.callbackHandlerUrl
         };
         return this.http.post(`${this.shopsUrl}/${shopID}`, params)
             .toPromise()

src/app/management/components/management-container/shops/edit-shop/edit-shop.component.pug

@@ -6,9 +6,6 @@
             .x_content
                 kof-loading([isLoading]="isLoading")
                     form.form-horizontal.form-label-left.css-form(novalidate, (ngSubmit)="updateShop(form)", name="form", #form="ngForm")
-                        .form-group
-                            .col-xs-12.col-sm-6.col-sm-offset-3
-                                a.btn.btn-danger.pull-right((click)="suspendShop()") Заморозить магазин
                         .form-group([ngClass]="{'has-error': hasError(shop_details_name)}")
                             .col-xs-12.col-sm-3
                                 label.text-left Название магазина *
@@ -60,6 +57,11 @@
                                 label.text-left Категория *
                             .col-xs-12.col-sm-6
                                 kof-select([(ngModel)]="args.categoryRef", [items]="categories", [modelOptions]="{standalone: true}", name='category')
+                        .form-group
+                            .col-xs-12.col-sm-3
+                                label.text-left URL для CallbackHandler
+                            .col-xs-12.col-sm-6
+                                input.form-control(type="text", name="callback_handler_url", [(ngModel)]="args.callbackHandlerUrl")
                         .ln_solid
                         .form-group
                             .col-xs-12.col-sm-6.col-sm-offset-3

src/app/management/components/management-container/shops/edit-shop/edit-shop.component.ts

@@ -22,7 +22,8 @@ export class EditShopComponent implements OnInit {
         shopDetails: {},
         categoryRef: 0,
         contractId: 0,
-        payoutAccountId: 0
+        payoutAccountId: 0,
+        callbackHandlerUrl: ''
     };
     public shopContract: Contract;
     public shopPayoutAccount: PayoutAccount;
@@ -66,6 +67,7 @@ export class EditShopComponent implements OnInit {
                 this.args.categoryRef = currentShop.categoryRef;
                 this.args.contractId = currentShop.contractID;
                 this.args.payoutAccountId = currentShop.payoutAccountID;
+                this.args.callbackHandlerUrl = currentShop.callbackHandler.url;
 
                 this.loadDetails(currentShop.contractID, currentShop.payoutAccountID).then(() => {
                     resolve();
@@ -100,16 +102,6 @@ export class EditShopComponent implements OnInit {
         }
     }
 
-    public suspendShop() {
-        this.isLoading = true;
-
-        this.shopService.suspendShop(this.currentShopId).then(() => {
-            this.isLoading = false;
-
-            this.returnToManagement();
-        });
-    }
-
     public ngOnInit() {
         this.isLoading = true;
         Promise.all([

src/app/management/components/management-container/shops/selection-shop-fields/add-shop/add-shop.component.pug

@@ -24,6 +24,13 @@
                     input.form-control(type="text", name="shop_details_location",
                     [(ngModel)]="shopFields.shopDetails.location",
                     (keyup)="checkForm(form)")
+            .form-group
+                .col-xs-12.col-sm-3
+                    label.text-left URL для CallbackHandler
+                .col-xs-12.col-sm-6
+                    input.form-control(type="text", name="callback_handler_url",
+                    [(ngModel)]="shopFields.callbackHandler.url",
+                    (keyup)="checkForm(form)")
 
             .form-group
                 .col-xs-12.col-sm-3

src/app/management/components/management-container/shops/selection-shop-fields/selection-shop-fields.component.ts

@@ -3,6 +3,7 @@ import { Component, Output, EventEmitter, Input, OnInit } from '@angular/core';
 import { ShopModificationArgs } from 'koffing/management/management.module';
 import { Shop } from 'koffing/backend/backend.module';
 import { ShopDetail } from 'koffing/backend/backend.module';
+import { CallbackHandler } from 'koffing/backend/classes/callback-handler';
 
 @Component({
     selector: 'kof-selection-shop-fields',
@@ -24,6 +25,7 @@ export class SelectionShopComponent implements OnInit {
     public createNewShopFieldsInstance() {
         this.args.shopFields = new Shop();
         this.args.shopFields.shopDetails = new ShopDetail();
+        this.args.shopFields.callbackHandler = new CallbackHandler();
         this.args.shopFields.categoryRef = null;
     }
 

src/app/management/components/management-container/shops/shop-details-panel/shop-details-panel.component.less

@@ -0,0 +1,3 @@
+.modal-wide {
+  width: 350px;
+}

src/app/management/components/management-container/shops/shop-details-panel/shop-details-panel.component.pug

@@ -0,0 +1,21 @@
+div(*ngIf="!shop.isSuspended && !shop.isBlocked")
+    a.btn.btn-xs.btn-danger.pull-right(data-toggle="modal", data-target=".suspend-modal", data-backdrop="false") Заморозить магазин
+dl
+    dt URL для CallbackHandler
+    dd {{shop.callbackHandler.url}}
+dl
+    dt PublicKey от CallbackHandler
+    input.form-control(readonly, type="text", name="callbackHandlerPublicKey", value="{{shop.callbackHandler.publicKey}}")
+
+.modal.fade.suspend-modal(tabindex="-1" role="dialog")
+    .modal-dialog.modal-sm
+        .modal-content.modal-wide
+            .modal-header
+                h5.modal-title Подтверждение заморозки магазина {{shop.shopID}}
+            .modal-footer
+                .btn-toolbar.pull-left
+                    .btn-group.btn-group-sm
+                        button.btn.btn-default(type="button", data-dismiss="modal") Назад
+                .btn-toolbar.pull-right
+                    .btn-group.btn-group-sm
+                        button.btn.btn-danger(type="button", data-dismiss="modal",(click)="suspendShop(reason)") Заморозить магазин

src/app/management/components/management-container/shops/shop-details-panel/shop-details-panel.component.ts

@@ -0,0 +1,29 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+
+import { Shop } from 'koffing/backend/classes/shop.class';
+import { ShopService } from 'koffing/backend/services/shop.service';
+
+@Component({
+    selector: 'kof-shop-details-panel',
+    templateUrl: 'shop-details-panel.component.pug',
+    styleUrls: ['./shop-details-panel.component.less']
+})
+export class ShopDetailsPanelComponent {
+    
+    @Input()
+    public shop: Shop;
+
+    @Output()
+    public shopSuspended = new EventEmitter();
+    
+    constructor(
+        private shopService: ShopService
+    ) { }
+    
+    public suspendShop() {
+        this.shopService.suspendShop(this.shop.shopID).then(() => {
+            this.shopSuspended.emit();
+        });
+    }
+
+}

src/app/management/components/management-container/shops/shops.component.less

@@ -0,0 +1,5 @@
+.small-container {
+  width: 13px;
+  height: 13px;
+  text-align: center;
+}

src/app/management/components/management-container/shops/shops.component.pug

@@ -11,18 +11,29 @@
                     th.hidden-xs Месторасположение
                     th Категория
                     th
-            tbody
+            tbody(*ngFor="let shop of shops; let i = index")
-                tr(*ngFor="let shop of shops",[ngClass]="{'success': shop.isSuspended, 'danger': shop.isBlocked}")
+                tr([ngClass]="{'success': shop.isSuspended, 'danger': shop.isBlocked}", (click)="!shop.isBlocked && showDetailsPanel(i)")
                     td {{shop.shopID}}
                     td {{shop.shopDetails.name}}
                     td.hidden-xs {{shop.shopDetails.description}}
                     td.hidden-xs {{shop.shopDetails.location}}
                     td {{getCategory(shop.categoryRef).name}}
                     td(*ngIf="shop.isSuspended && !shop.isBlocked")
+                        div.pull-right.small-container
+                            i.fa.custom-chevron(
+                                [ngClass]="{'fa-chevron-down': isDetailsPanelVisible(i), 'fa-chevron-right': !isDetailsPanelVisible(i)}"
+                            )
                         button.btn.btn-success.btn-xs.pull-right((click)="activateShop(shop)") Активировать
                     td(*ngIf="!shop.isSuspended && !shop.isBlocked")
+                        div.pull-right.small-container
+                            i.fa.custom-chevron(
+                                [ngClass]="{'fa-chevron-down': isDetailsPanelVisible(i), 'fa-chevron-right': !isDetailsPanelVisible(i)}"
+                            )
                         a.btn.btn-default.btn-xs.pull-right([routerLink]="['/shops/edit', shop.shopID]") Изменить данные
                     td(*ngIf="shop.isBlocked")
                         span.pull-right Заблокирован
+                tr(*ngIf="isDetailsPanelVisible(i)")
+                    td(colspan=6)
+                        kof-shop-details-panel([shop]="shop", (shopSuspended)="handleShopSuspended()")
     span(*ngIf="!shops.length") Список магазинов пуст
     a.btn.btn-primary.pull-right([routerLink]="['/shops/create']") Добавить новый магазин

src/app/management/components/management-container/shops/shops.component.ts

@@ -3,11 +3,12 @@ import * as _ from 'lodash';
 
 import { Category } from 'koffing/backend/backend.module';
 import { CategoryService } from 'koffing/backend/backend.module';
-import { Shop } from 'koffing/backend/backend.module';
 import { ShopService } from 'koffing/backend/backend.module';
+import { Shop } from 'koffing/backend/classes/shop.class';
 
 @Component({
-    templateUrl: 'shops.component.pug'
+    templateUrl: 'shops.component.pug',
+    styleUrls: ['./shops.component.less']
 })
 export class ShopsComponent implements OnInit {
 
@@ -15,6 +16,7 @@ export class ShopsComponent implements OnInit {
     public categories: Category[] = [];
 
     private isLoading: boolean;
+    private panelsVisibilities: {[key: number]: boolean} = {};
 
     constructor(
         private shopService: ShopService,
@@ -31,7 +33,17 @@ export class ShopsComponent implements OnInit {
         });
     }
 
+    public handleShopSuspended() {
+        this.isLoading = true;
+
+        this.loadShops().then(() => {
+            this.isLoading = false;
+        });
+    }
+
     public loadShops() {
+        this.resetPanelsVisibilities();
+
         return new Promise((resolve) => {
             this.shopService.getShops().then(aShops => {
                 this.shops = aShops;
@@ -51,6 +63,17 @@ export class ShopsComponent implements OnInit {
         });
     }
 
+    public isDetailsPanelVisible(panelIndex: number) {
+        if (!this.panelsVisibilities.hasOwnProperty(panelIndex)) {
+            this.initPanelVisibility(panelIndex);
+        }
+        return this.panelsVisibilities[panelIndex];
+    }
+
+    public showDetailsPanel(panelIndex: number) {
+        this.panelsVisibilities[panelIndex] = !this.panelsVisibilities[panelIndex];
+    }
+
     public getCategory(categoryRef: number): Category {
         let result = new Category();
         if (this.categories.length > 0) {
@@ -68,4 +91,12 @@ export class ShopsComponent implements OnInit {
             this.isLoading = false;
         });
     }
+
+    private initPanelVisibility(panelIndex: number) {
+        this.panelsVisibilities[panelIndex] = false;
+    }
+
+    private resetPanelsVisibilities() {
+        this.panelsVisibilities = {};
+    }
 }

src/app/management/management.module.ts

@@ -32,6 +32,7 @@ import { SelectionAccountComponent } from './components/management-container/sho
 import { SelectionShopComponent } from './components/management-container/shops/selection-shop-fields/selection-shop-fields.component';
 import { EditShopContractComponent } from 'koffing/management/components/management-container/shops/edit-shop/edit-shop-contract/edit-shop-contract.component';
 import { EditShopPayoutAccountComponent } from 'koffing/management/components/management-container/shops/edit-shop/edit-shop-payout-account/edit-shop-payout-account.component';
+import { ShopDetailsPanelComponent } from 'koffing/management/components/management-container/shops/shop-details-panel/shop-details-panel.component';
 
 @NgModule({
     imports: [
@@ -72,7 +73,8 @@ import { EditShopPayoutAccountComponent } from 'koffing/management/components/ma
         SelectionAccountComponent,
         SelectionShopComponent,
         EditShopContractComponent,
-        EditShopPayoutAccountComponent
+        EditShopPayoutAccountComponent,
+        ShopDetailsPanelComponent
     ]
 })
 export class ManagementModule { }