Merge pull request '3081-newbankentity_component_refactor' (#735) from 3081-newbankentity_component_refactor into dev

Reviewed-on: #735
Reviewed-by: Joan Sanchez <joan@verdnatura.es>

e2e/helpers/selectors.js

@@ -186,9 +186,10 @@ export default {
         receivedB2BVNLCheckbox: 'vn-client-billing-data vn-check[label="Received B2B VNL"]',
         swiftBic: 'vn-client-billing-data vn-autocomplete[ng-model="$ctrl.client.bankEntityFk"]',
         newBankEntityButton: 'vn-client-billing-data vn-icon-button[vn-tooltip="New bank entity"] > button',
-        newBankEntityName: '.vn-dialog.shown vn-textfield[ng-model="$ctrl.newBankEntity.name"]',
-        newBankEntityBIC: '.vn-dialog.shown vn-textfield[ng-model="$ctrl.newBankEntity.bic"]',
-        newBankEntityCode: '.vn-dialog.shown vn-textfield[ng-model="$ctrl.newBankEntity.id"]',
+        newBankEntityName: '.vn-dialog.shown vn-textfield[ng-model="$ctrl.data.name"]',
+        newBankEntityBIC: '.vn-dialog.shown vn-textfield[ng-model="$ctrl.data.bic"]',
+        newBankEntityCountry: '.vn-dialog.shown vn-autocomplete[ng-model="$ctrl.data.countryFk"]',
+        newBankEntityCode: '.vn-dialog.shown vn-textfield[ng-model="$ctrl.data.id"]',
         acceptBankEntityButton: '.vn-dialog.shown button[response="accept"]',
         saveButton: 'vn-client-billing-data button[type=submit]',
         watcher: 'vn-client-billing-data vn-watcher'

e2e/paths/02-client/04_edit_billing_data.spec.js

@@ -34,8 +34,9 @@ describe('Client Edit billing data path', () => {
     it(`should create a new BIC code`, async() => {
         await page.waitToClick(selectors.clientBillingData.newBankEntityButton);
         await page.write(selectors.clientBillingData.newBankEntityName, 'Gotham City Bank');
-        await page.write(selectors.clientBillingData.newBankEntityCode, '9999');
         await page.write(selectors.clientBillingData.newBankEntityBIC, 'GTHMCT');
+        await page.autocompleteSearch(selectors.clientBillingData.newBankEntityCountry, 'España');
+        await page.write(selectors.clientBillingData.newBankEntityCode, '9999');
         await page.waitToClick(selectors.clientBillingData.acceptBankEntityButton);
         await page.waitForTextInField(selectors.clientBillingData.swiftBic, 'Gotham City Bank');
         const newcode = await page.waitToGetProperty(selectors.clientBillingData.swiftBic, 'value');

front/salix/components/bank-entity/index.html

@@ -1,9 +1,7 @@
-<vn-dialog class="edit"
-    vn-id="bankEntityDialog"
-    on-open="$ctrl.resetData()"
-    on-accept="$ctrl.onAccept()"
-    message="New bank entity">
-    <tpl-body>
+<tpl-title translate>
+    New bank entity
+</tpl-title>
+<tpl-body>
     <p translate>Please, ensure you put the correct data!</p>
     <vn-horizontal>
         <vn-textfield
@@ -14,8 +12,6 @@
             ng-model="$ctrl.data.name"
             required="true">
         </vn-textfield>
-        </vn-horizontal>
-        <vn-horizontal>
         <vn-textfield
             vn-one
             vn-focus
@@ -24,17 +20,27 @@
             ng-model="$ctrl.data.bic"
             required="true">
         </vn-textfield>
-            <vn-autocomplete vn-one
+    </vn-horizontal>
+    <vn-horizontal>
+        <vn-autocomplete
+            vn-one
+            vn-id="country"
             ng-model="$ctrl.data.countryFk"
             url="Countries"
+            fields="['id', 'country', 'code']"
             show-field="country"
             value-field="id"
             label="Country">
         </vn-autocomplete>
+        <vn-textfield
+            vn-one
+            ng-show="country.selection.code === 'ES'"
+            label="Entity code"
+            ng-model="$ctrl.data.id">
+        </vn-textfield>
     </vn-horizontal>
-    </tpl-body>
-    <tpl-buttons>
+</tpl-body>
+<tpl-buttons>
     <input type="button" response="cancel" translate-attr="{value: 'Cancel'}"/>
-        <button id= "saveBankEntity" response="accept" translate>Save</button>
-    </tpl-buttons>
-</vn-dialog>
+    <button response="accept" translate>Accept</button>
+</tpl-buttons>

front/salix/components/bank-entity/index.js

@@ -1,35 +1,23 @@
 import ngModule from '../../module';
-import Component from 'core/lib/component';
+import Dialog from 'core/components/dialog';
 import './style.scss';
 
-class Controller extends Component {
-    open() {
-        this.$.bankEntityDialog.show();
-    }
+class Controller extends Dialog {
+    responseHandler(response) {
+        if (response !== 'accept')
+            return super.responseHandler(response);
 
-    resetData() {
-        this.data = {};
-    }
-
-    onAccept() {
-        try {
         if (!this.data.countryFk)
             throw new Error(`The country can't be empty`);
 
-            this.$http.post(`bankEntities`, this.data).then(res => {
-                this.vnApp.showMessage(this.$t('The bank entity has been created. You can save the data now'));
-                this.emit('response', {$response: res.data});
-            });
-        } catch (e) {
-            this.vnApp.showError(this.$t(e.message));
-            return false;
-        }
-        return true;
+        return this.$http.post(`bankEntities`, this.data)
+            .then(() => super.responseHandler(response))
+            .then(() => this.vnApp.showSuccess(this.$t('Data saved!')));
     }
 }
 
 ngModule.vnComponent('vnNewBankEntity', {
-    template: require('./index.html'),
+    slotTemplate: require('./index.html'),
     controller: Controller,
     bindings: {
         data: '<',

front/salix/components/bank-entity/index.spec.js

@@ -5,49 +5,34 @@ describe('Salix Component vnNewBankEntity', () => {
     let $httpBackend;
     let $scope;
     let $element;
-    let vnApp;
 
     beforeEach(ngModule('salix'));
 
-    beforeEach(inject(($componentController, $rootScope, _$httpBackend_, _vnApp_) => {
+    beforeEach(inject(($componentController, $rootScope, _$httpBackend_) => {
         $httpBackend = _$httpBackend_;
-        vnApp = _vnApp_;
-        jest.spyOn(vnApp, 'showError');
         $scope = $rootScope.$new();
-        $element = angular.element('<vn-dialog></dialog>');
-        controller = $componentController('vnNewBankEntity', {$element, $scope});
+        $element = angular.element('<vn-dialog></vn-dialog>');
+        const $transclude = {
+            $$boundTransclude: {
+                $$slots: []
+            }
+        };
+        controller = $componentController('vnNewBankEntity', {$element, $scope, $transclude});
+        controller.vnApp = {showSuccess: jest.fn()};
     }));
 
-    describe('resetData()', () => {
-        it('should reset the location in the controller', () => {
-            expect(controller.data).toBeUndefined();
-
-            controller.resetData();
-
-            expect(controller.data).toEqual({});
-        });
-    });
-
-    describe('onAccept()', () => {
-        it('should throw an error if there is no country id in the location', () => {
-            jest.spyOn(controller.vnApp, 'showMessage');
-
-            controller.data = {};
-
-            controller.onAccept();
-
-            expect(controller.vnApp.showError).toHaveBeenCalledWith(`The country can't be empty`);
-        });
-
-        it('should do add the new bank entity', () => {
+    describe('responseHandler()', () => {
+        it('should show a success message after the query to bankEntities', () => {
             controller.data = {
                 countryFk: 1
             };
 
-            $httpBackend.expectPOST('bankEntities', controller.data).respond(200, controller.data);
+            $httpBackend.expectPOST('bankEntities', controller.data).respond(200);
 
-            controller.onAccept();
+            controller.responseHandler('accept');
             $httpBackend.flush();
+
+            expect(controller.vnApp.showSuccess).toHaveBeenCalledWith('Data saved!');
         });
     });
 });

front/salix/components/bank-entity/locale/es.yml

@@ -10,3 +10,4 @@ The postcode has been created. You can save the data now: Se ha creado el códig
 The city has been created: Se ha creado la ciudad
 The province has been created: Se ha creado la provincia
 The bank entity has been created. You can save the data now: Se ha creado la entidad bancaria. Puedes guardar los datos ahora
+Entity code: Código de la entidad

modules/client/front/billing-data/index.html

@@ -66,7 +66,7 @@
                     <vn-icon-button
                         vn-auto
                         icon="add_circle"
-                        ng-click="$ctrl.onAddEntityClick($event)"
+                        vn-click-stop="bankEntity.show({countryFk: $ctrl.client.countryFk})"
                         vn-tooltip="New bank entity"
                         vn-acl="salesAssistant">
                     </vn-icon-button>
@@ -108,53 +108,8 @@
     </vn-button-bar>
 </form>
 
-<!-- Create bank entity dialog -->
-<vn-dialog class="edit" 
-    vn-id="bankEntityDialog"
-    on-accept="$ctrl.onBankEntityAccept()"
-    message="New bank entity">
-    <tpl-body>
-        <vn-horizontal>
-            <vn-textfield
-                vn-one
-                label="Name"
-                ng-model="$ctrl.newBankEntity.name"
-                required="true"
-                vn-focus>
-            </vn-textfield>
-        </vn-horizontal>
-        <vn-horizontal>
-            <vn-autocomplete
-                vn-one
-                vn-id="country"
-                label="Country"
-                ng-model="$ctrl.newBankEntity.countryFk"
-                fields="['id', 'country', 'code']"
-                url="Countries"
-                value-field="id"
-                show-field="country"
-                required="true">
-            </vn-autocomplete>
-        </vn-horizontal>
-        <vn-horizontal>
-            <vn-textfield
-                vn-one
-                label="Entity Code"
-                ng-model="$ctrl.newBankEntity.id"
-                ng-show="country.selection.code === 'ES'">
-            </vn-textfield>
-        </vn-horizontal>
-        <vn-horizontal>
-            <vn-textfield
-                vn-one
-                label="Swift / BIC"
-                ng-model="$ctrl.newBankEntity.bic"
-                required="true">
-            </vn-textfield>
-        </vn-horizontal>
-    </tpl-body>
-    <tpl-buttons>
-        <input type="button" response="cancel" translate-attr="{value: 'Cancel'}"/>
-        <button response="accept" translate>Create</button>
-    </tpl-buttons>
-</vn-dialog>
+<!-- New bankentity dialog -->
+<vn-new-bank-entity
+    vn-id="bankEntity"
+    on-accept="$ctrl.onAccept($data)">
+</vn-new-bank-entity>

modules/client/front/billing-data/index.js

@@ -37,17 +37,8 @@ export default class Controller extends Section {
         return payMethod || iban || dueDay;
     }
 
-    onAddEntityClick(event) {
-        event.preventDefault();
-        this.newBankEntity = {
-            countryFk: Number.parseInt(this.client.countryFk)
-        };
-        this.$.bankEntityDialog.show();
-    }
-
-    onBankEntityAccept() {
-        return this.$http.post(`BankEntities`, this.newBankEntity)
-            .then(res => this.client.bankEntityFk = res.data.id);
+    onAccept(data) {
+        this.client.bankEntityFk = data.id;
     }
 
     get ibanCountry() {

modules/client/front/billing-data/index.spec.js

@@ -35,20 +35,12 @@ describe('Client', () => {
             });
         });
 
-        describe('onBankEntityAccept()', () => {
-            it('should request to create a new bank entity', () => {
-                let newBankEntity = {
-                    name: 'My new bank entity',
-                    bic: 'ES123',
-                    countryFk: 1,
-                    id: 999
-                };
-                controller.newBankEntity = newBankEntity;
-                $httpBackend.expectPOST('BankEntities', newBankEntity).respond({id: 999});
-                controller.onBankEntityAccept();
-                $httpBackend.flush();
+        describe('onAccept()', () => {
+            it('should assign the response id to the client bankEntityFk', () => {
+                const expectedResponse = {id: 999};
+                controller.onAccept(expectedResponse);
 
-                expect(controller.client.bankEntityFk).toEqual(newBankEntity.id);
+                expect(controller.client.bankEntityFk).toEqual(expectedResponse.id);
             });
         });
 

modules/client/front/billing-data/locale/es.yml

@@ -15,4 +15,3 @@ Received B2B VNL: Recibido B2B VNL
 Save: Guardar
 New bank entity: Nueva entidad bancaria
 Name can't be empty: El nombre no puede quedar vacío
-Entity Code: Código

modules/supplier/front/account/index.html

@@ -30,9 +30,10 @@
             </vn-autocomplete>
             <append>
                 <vn-icon-button
+                    vn-auto
                     icon="add_circle"
-                    vn-tooltip="New bank entity"
-                    ng-click="$ctrl.showBankEntity($event, $index)">
+                    vn-click-stop="bankEntity.show({index: $index})"
+                    vn-tooltip="New bank entity">
                 </vn-icon-button>
             </append>
             <vn-textfield vn-three
@@ -65,8 +66,9 @@
         </vn-submit>
     </vn-button-bar>
 </form>
+
 <!-- New bankentity dialog -->
 <vn-new-bank-entity
     vn-id="bankEntity"
-    on-response="$ctrl.onResponse($response)">
+    on-accept="$ctrl.onAccept($data)">
 </vn-new-bank-entity>

modules/supplier/front/account/index.js

@@ -18,23 +18,10 @@ class Controller extends Section {
         });
     }
 
-    onResponse(response) {
-        const data = this.$.model.data;
-        const supplierAccount = data[this.currentRowIndex];
-        supplierAccount.bankEntityFk = response.id;
-    }
-
-    showBankEntity(event, $index) {
-        if (event.defaultPrevented) return;
-        event.preventDefault();
-        this.currentRowIndex = $index;
-        this.$.bankEntity.open();
-    }
-
-    onBankEntityAccept() {
-        const query = `SupplierAccounts/${this.$params.id}/createBankEntity`;
-        return this.$http.patch(query, this.newBankEntity)
-            .then(res => this.supplierAccount.bankEntityFk = res.data.id);
+    onAccept(data) {
+        const accounts = this.supplierAccounts;
+        const targetAccount = accounts[data.index];
+        targetAccount.bankEntityFk = data.id;
     }
 
     onSubmit() {

modules/supplier/front/account/index.spec.js

@@ -4,11 +4,9 @@ describe('Supplier Component vnSupplierAccount', () => {
     let $scope;
     let $element;
     let controller;
-    let $httpBackend;
     beforeEach(ngModule('supplier'));
 
     beforeEach(inject(($componentController, $rootScope, _$httpBackend_) => {
-        $httpBackend = _$httpBackend_;
         $scope = $rootScope.$new();
         $scope.bankEntity = {
             open: () => {}
@@ -21,50 +19,20 @@ describe('Supplier Component vnSupplierAccount', () => {
         };
     }));
 
-    describe('showBankEntity()', () => {
-        it('should do nothing if it default is prevented', () => {
-            const event = {
-                defaultPrevented: true,
-                preventDefault: () => {}
-            };
-            jest.spyOn(event, 'preventDefault');
-            jest.spyOn(controller.$.bankEntity, 'open');
+    describe('onAccept()', () => {
+        it('should set the created bank entity id into the target account', () => {
+            controller.supplierAccounts = [{}, {}, {}];
 
-            controller.showBankEntity(event);
-
-            expect(event.preventDefault).not.toHaveBeenCalledWith();
-            expect(controller.$.bankEntity.open).not.toHaveBeenCalledWith();
-        });
-
-        it('should call preventDefault() and open() when the default is not prevented', () => {
-            const event = {
-                defaultPrevented: false,
-                preventDefault: () => {}
+            const data = {
+                id: 999,
+                index: 1
             };
 
-            jest.spyOn(event, 'preventDefault');
-            jest.spyOn(controller.$.bankEntity, 'open');
+            controller.onAccept(data);
 
-            controller.showBankEntity(event);
+            const targetAccount = controller.supplierAccounts[data.index];
 
-            expect(event.preventDefault).toHaveBeenCalledWith();
-            expect(controller.$.bankEntity.open).toHaveBeenCalledWith();
-        });
-
-        it('should request to create a new bank entity', () => {
-            controller.bankEntity = {
-                name: 'My new bank entity',
-                bic: 'ES1234',
-                countryFk: 1,
-                id: 2200
-            };
-
-            const query = `SupplierAccounts/${controller.$.bankEntity.id}/createBankEntity`;
-            $httpBackend.expectPATCH(query).respond({id: 2200});
-            controller.onBankEntityAccept();
-            $httpBackend.flush();
-
-            expect(controller.supplierAccount.bankEntityFk).toEqual(controller.bankEntity.id);
+            expect(targetAccount.bankEntityFk).toEqual(data.id);
         });
     });
 });