front/core/components/account-number/index.html

@@ -0,0 +1,8 @@
+<vn-textfield
+    label="Account"
+    name="account"
+    ng-model="$ctrl.accountNumber"
+    on-change="$ctrl.accountShortToStandard(value)"
+    insertable="true"
+    max-length="10">
+</vn-textfield>

front/core/components/account-number/index.js

@@ -0,0 +1,24 @@
+import Component from '../../lib/component';
+import ngModule from '../../module';
+
+export default class AccountNumber extends Component {
+    constructor($element, $) {
+        super($element, $);
+        this.$ = $;
+    }
+
+    accountShortToStandard(value) {
+        this.accountNumber = value.replace('.', '0'.repeat(11 - value.length));
+        this.$.$emit('accountShortToStandard', this.accountNumber);
+    }
+}
+
+AccountNumber.$inject = ['$element', '$scope'];
+
+ngModule.vnComponent('vnAccountNumber', {
+    template: require('./index.html'),
+    controller: AccountNumber,
+    bindings: {
+        accountNumber: '<'
+    }
+});

front/core/components/account-number/index.spec.js

@@ -0,0 +1,28 @@
+describe('Component vnAccountNumber', () => {
+    let controller;
+    let $element;
+
+    beforeEach(ngModule('vnCore'));
+
+    beforeEach(inject(($compile, $rootScope) => {
+        $element = $compile(`<vn-account-number></vn-account-number>`)($rootScope);
+        controller = $element.controller('vnAccountNumber');
+        controller.$ = {$emit: jest.fn()};
+    }));
+
+    afterEach(() => {
+        $element.remove();
+    });
+
+    describe('accountShortToStandard', () => {
+        it('should replace dots and emit event with account number', () => {
+            const mockValue = '41.1';
+            const expectedAccountNumber = '4100000001';
+
+            controller.accountShortToStandard(mockValue);
+
+            expect(controller.accountNumber).toBe(expectedAccountNumber);
+            expect(controller.$.$emit).toHaveBeenCalledWith('accountShortToStandard', expectedAccountNumber);
+        });
+    });
+});

front/core/components/index.js

@@ -55,3 +55,4 @@ import './datalist';
 import './contextmenu';
 import './rating';
 import './smart-table';
+import './account-number';

modules/client/front/balance/create/index.html

@@ -54,12 +54,15 @@
     </vn-horizontal>
     <vn-vertical ng-show="$ctrl.bankSelection.accountingType.code == 'compensation'">
         <h6 translate>Compensation</h6>
-        <vn-textfield
+        <vn-account-number
+            account-number="$ctrl.receipt.compensationAccount">
+        </vn-account-number>
+        <!-- <vn-textfield
             ng-model="$ctrl.receipt.compensationAccount"
             vn-name="compensationAccount"
             label="Compensation Account"
             on-change="$ctrl.accountShortToStandard(value)">
-        </vn-textfield>
+        </vn-textfield> -->
     </vn-vertical>
     <vn-horizontal>
         <vn-textfield

modules/client/front/balance/create/index.js

@@ -7,6 +7,7 @@ class Controller extends Dialog {
         this.vnReport = vnReport;
         this.vnEmail = vnEmail;
         this.receipt = {};
+        $.$on('accountShortToStandard', (event, value) => this.getClientOrSupplierReference(value));
     }
 
     set payed(value) {
@@ -127,9 +128,9 @@ class Controller extends Dialog {
         this.receipt.bankFk = value;
     }
 
-    accountShortToStandard(value) {
-        if (value) {
-            this.receipt.compensationAccount = value.replace('.', '0'.repeat(11 - value.length));
+    getClientOrSupplierReference(value) {
+        this.receipt.compensationAccount = value;
+        if (this.receipt.compensationAccount) {
             const params = {bankAccount: this.receipt.compensationAccount};
             this.$http.get(`Clients/getClientOrSupplierReference`, {params})
                 .then(res => {

modules/client/front/balance/create/index.spec.js

@@ -112,12 +112,34 @@ describe('Client', () => {
             });
         });
 
-        describe('accountShortToStandard()', () => {
-            it('should get de account in stardard format', () => {
-                const shortAccount = '4.3';
-                controller.accountShortToStandard(shortAccount);
+        describe('getClientOrSupplierReference', () => {
+            it('should update receipt description when compensation account is provided', async() => {
+                jest.spyOn(controller, '$t');
+                const mockValue = '4100000001';
+                const mockResponse = {
+                    clientId: '1',
+                    clientName: 'Client mocked'
+                };
 
-                expect(controller.receipt.compensationAccount).toEqual('4000000003');
+                $httpBackend
+                    .expectGET(`Clients/getClientOrSupplierReference?bankAccount=${mockValue}`)
+                    .respond(mockResponse);
+                controller.getClientOrSupplierReference(mockValue);
+                $httpBackend.flush();
+
+                expect(controller.receipt.compensationAccount).toBe(mockValue);
+                expect(controller.receipt.description).toBe('Client Compensation Reference');
+                expect(controller.$t).toHaveBeenCalledWith('Client Compensation Reference', {
+                    clientId: mockResponse.clientId,
+                    clientName: mockResponse.clientName
+                });
+            });
+
+            it('should update receipt description to empty string if compensation account is not provided', async() => {
+                controller.getClientOrSupplierReference('');
+
+                expect(controller.receipt.compensationAccount).toBe('');
+                expect(controller.receipt.description).toBe('');
             });
         });