Merge branch 'dev' of https://gitea.verdnatura.es/verdnatura/salix into 2139-oder_catalog_searchbar

modules/claim/front/action/index.js

@@ -1,16 +1,12 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
+export default class Controller extends Section {
-    constructor($stateParams, $scope, $http, $translate, vnApp, $httpParamSerializer) {
+    constructor($element, $) {
-        this.$stateParams = $stateParams;
+        super($element, $);
-        this.$ = $scope;
-        this.$http = $http;
-        this.$translate = $translate;
-        this.vnApp = vnApp;
-        this.$httpParamSerializer = $httpParamSerializer;
         this.filter = {
-            where: {claimFk: $stateParams.id},
+            where: {claimFk: this.$params.id},
             include: [
                 {relation: 'sale',
                     scope: {
@@ -34,9 +30,7 @@ class Controller {
     }
 
     getClaimedSales() {
-        let json = encodeURIComponent(JSON.stringify(this.claim.id));
+        let query = `ClaimBeginnings/${this.claim.id}`;
-
-        let query = `ClaimBeginnings/${json}`;
         this.$http.get(query).then(res => {
             if (res.data)
                 this.claimedSales = res.data;
@@ -54,8 +48,7 @@ class Controller {
     }
 
     deleteClaimedSale(id) {
-        let json = encodeURIComponent(JSON.stringify(id));
+        let query = `ClaimEnds/${id}`;
-        let query = `ClaimEnds/${json}`;
         this.$http.delete(query).then(() => {
             this.$.model.refresh();
             this.vnApp.showSuccess(this.$translate.instant('Data saved!'));
@@ -63,7 +56,7 @@ class Controller {
     }
 
     importToNewRefundTicket() {
-        let query = `ClaimBeginnings/${this.$stateParams.id}/importToNewRefundTicket`;
+        let query = `ClaimBeginnings/${this.$params.id}/importToNewRefundTicket`;
         return this.$http.post(query).then(() => {
             this.$.model.refresh();
             this.vnApp.showSuccess(this.$translate.instant('Data saved!'));
@@ -112,7 +105,7 @@ class Controller {
     }
 
     importTicketLines(ticketFk) {
-        let data = {claimFk: this.$stateParams.id, ticketFk: ticketFk};
+        let data = {claimFk: this.$params.id, ticketFk: ticketFk};
 
         let query = `ClaimEnds/importTicketSales`;
         this.$http.post(query, data).then(() => {
@@ -123,7 +116,7 @@ class Controller {
     }
 
     regularize() {
-        let data = {claimFk: this.$stateParams.id};
+        let data = {claimFk: this.$params.id};
         let query = `Claims/regularizeClaim`;
         return this.$http.post(query, data).then(() => {
             if (this.claim.responsibility >= Math.ceil(this.maxResponsibility) / 2)
@@ -137,9 +130,8 @@ class Controller {
 
     getGreugeTypeId() {
         const params = {filter: {where: {code: 'freightPickUp'}}};
-        const serializedParams = this.$httpParamSerializer(params);
+        const query = `GreugeTypes/findOne`;
-        const query = `GreugeTypes/findOne?${serializedParams}`;
+        return this.$http.get(query, {params}).then(res => {
-        return this.$http.get(query).then(res => {
             this.greugeTypeFreightId = res.data.id;
 
             return res;
@@ -188,7 +180,7 @@ class Controller {
     }
 
     saveResponsibility(value) {
-        let query = `Claims/${this.$stateParams.id}/updateClaimAction`;
+        let query = `Claims/${this.$params.id}/updateClaimAction`;
 
         this.$http.post(query, {responsibility: value}).then(() => {
             this.vnApp.showSuccess(this.$translate.instant('Data saved!'));
@@ -196,7 +188,7 @@ class Controller {
     }
 
     saveMana(value) {
-        let query = `Claims/${this.$stateParams.id}/updateClaimAction`;
+        let query = `Claims/${this.$params.id}/updateClaimAction`;
 
         this.$http.post(query, {isChargedToMana: value}).then(() => {
             this.vnApp.showSuccess(this.$translate.instant('Data saved!'));
@@ -208,8 +200,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$stateParams', '$scope', '$http', '$translate', 'vnApp', '$httpParamSerializer'];
-
 ngModule.component('vnClaimAction', {
     template: require('./index.html'),
     controller: Controller,

modules/claim/front/action/index.spec.js

@@ -18,7 +18,8 @@ describe('claim', () => {
             $state = _$state_;
             $state.params.id = 1;
 
-            controller = $componentController('vnClaimAction', {$state, $scope});
+            const $element = angular.element('<vn-claim-action></vn-claim-action>');
+            controller = $componentController('vnClaimAction', {$element, $scope});
             controller.claim = {ticketFk: 1};
             controller.$.model = {refresh: () => {}};
             controller.$.addSales = {

modules/claim/front/basic-data/index.html

@@ -2,7 +2,7 @@
     vn-id="watcher"
     data="$ctrl.claim"
     form="form"
-    url="Claims/{{$ctrl.$stateParams.id}}/updateClaim"
+    url="Claims/{{$ctrl.$params.id}}/updateClaim"
     save="post">
 </vn-watcher>
 <form name="form" ng-submit="$ctrl.onSubmit()" class="vn-w-md">
@@ -55,6 +55,9 @@
     </vn-card>
     <vn-button-bar>
         <vn-submit label="Save"></vn-submit>
-        <vn-button label="Undo changes" ng-if="$ctrl.$scope.form.$dirty" ng-click="watcher.loadOriginalData()"></vn-button>
+        <vn-button label="Undo changes" 
+            ng-if="$ctrl.$.form.$dirty" 
+            ng-click="watcher.loadOriginalData()">
+        </vn-button>
     </vn-button-bar>
 </form>

modules/claim/front/basic-data/index.js

@@ -1,24 +1,16 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
+class Controller extends Section {
-    constructor($scope, $state, aclService) {
-        this.$scope = $scope;
-        this.$state = $state;
-        this.$stateParams = $state.params;
-        this.aclService = aclService;
-    }
-
     onSubmit() {
-        this.$scope.watcher.submit().then(() => {
+        this.$.watcher.submit().then(() => {
             if (this.aclService.hasAny(['salesAssistant']))
                 this.$state.go('claim.card.detail');
         });
     }
 }
 
-Controller.$inject = ['$scope', '$state', 'aclService'];
-
 ngModule.component('vnClaimBasicData', {
     template: require('./index.html'),
     controller: Controller,

modules/claim/front/basic-data/index.spec.js

@@ -11,12 +11,13 @@ describe('Claim', () => {
         beforeEach(angular.mock.inject(($componentController, $rootScope) => {
             $scope = $rootScope.$new();
             $scope.watcher = watcher;
-            let aclService = {hasAny: () => true};
+            const $element = angular.element('<vn-claim-basic-data></vn-claim-basic-data>');
-            controller = $componentController('vnClaimBasicData', {$scope, aclService});
+            controller = $componentController('vnClaimBasicData', {$element, $scope});
         }));
 
         describe('onSubmit()', () => {
             it(`should redirect to 'claim.card.detail' state`, () => {
+                jest.spyOn(controller.aclService, 'hasAny').mockReturnValue(true);
                 jest.spyOn(controller.$state, 'go');
                 controller.onSubmit();
 

modules/claim/front/descriptor/index.js

@@ -2,8 +2,8 @@ import ngModule from '../module';
 import Component from 'core/lib/component';
 
 class Controller extends Component {
-    constructor($element, $scope, $httpParamSerializer) {
+    constructor($element, $, $httpParamSerializer) {
-        super($element, $scope);
+        super($element, $);
         this.$httpParamSerializer = $httpParamSerializer;
 
         this.moreOptions = [

modules/claim/front/detail/index.js

@@ -1,17 +1,13 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
+class Controller extends Section {
-    constructor($state, $, $http, $translate, vnApp, aclService) {
+    constructor($element, $) {
-        this.$state = $state;
+        super($element, $);
-        this.$ = $;
-        this.$http = $http;
-        this.$translate = $translate;
-        this.vnApp = vnApp;
-        this.aclService = aclService;
         this.edit = {};
         this.filter = {
-            where: {claimFk: $state.params.id},
+            where: {claimFk: this.$params.id},
             include: [
                 {
                     relation: 'sale',
@@ -173,7 +169,7 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$state', '$scope', '$http', '$translate', 'vnApp', 'aclService'];
+Controller.$inject = ['$element', '$scope'];
 
 ngModule.component('vnClaimDetail', {
     template: require('./index.html'),

modules/claim/front/detail/index.spec.js

@@ -6,12 +6,10 @@ describe('claim', () => {
         let $scope;
         let controller;
         let $httpBackend;
-        let $state;
-        let aclService;
 
         beforeEach(ngModule('claim'));
 
-        beforeEach(angular.mock.inject(($componentController, _$state_, _$httpBackend_, $rootScope) => {
+        beforeEach(angular.mock.inject(($componentController, _$httpBackend_, $rootScope) => {
             $scope = $rootScope.$new();
             $scope.descriptor = {
                 show: () => {}
@@ -19,9 +17,8 @@ describe('claim', () => {
             $httpBackend = _$httpBackend_;
             $httpBackend.whenGET('Claims/ClaimBeginnings').respond({});
             $httpBackend.whenGET(`Tickets/1/isEditable`).respond(true);
-            $state = _$state_;
+            const $element = angular.element('<vn-claim-detail></vn-claim-detail>');
-            aclService = {hasAny: () => true};
+            controller = $componentController('vnClaimDetail', {$element, $scope});
-            controller = $componentController('vnClaimDetail', {$state, aclService, $scope});
             controller.claim = {ticketFk: 1};
             controller.salesToClaim = [{saleFk: 1}, {saleFk: 2}];
             controller.salesClaimed = [{id: 1, sale: {}}];
@@ -33,6 +30,7 @@ describe('claim', () => {
             controller.$.editPopover = {
                 hide: () => {}
             };
+            jest.spyOn(controller.aclService, 'hasAny').mockReturnValue(true);
         }));
 
         describe('openAddSalesDialog()', () => {
@@ -111,7 +109,6 @@ describe('claim', () => {
                     quantity: 10}};
                 controller.newDiscount = 10;
 
-
                 jest.spyOn(controller.vnApp, 'showSuccess');
                 jest.spyOn(controller, 'calculateTotals');
                 jest.spyOn(controller, 'clearDiscount');

modules/claim/front/development/index.html

@@ -2,7 +2,7 @@
     vn-id="model"
     url="ClaimDevelopments"
     fields="['id', 'claimFk', 'claimReasonFk', 'claimResultFk', 'claimResponsibleFk', 'workerFk', 'claimRedeliveryFk']"
-    link="{claimFk: $ctrl.$state.params.id}"
+    link="{claimFk: $ctrl.$params.id}"
     filter="$ctrl.filter"
     data="claimDevelopments"
     auto-load="true">

modules/claim/front/development/index.js

@@ -1,18 +1,13 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
+class Controller extends Section {
-    constructor($state, $scope, aclService) {
-        this.$state = $state;
-        this.$scope = $scope;
-        this.aclService = aclService;
-    }
-
     onSubmit() {
-        this.$scope.watcher.check();
+        this.$.watcher.check();
-        this.$scope.model.save().then(() => {
+        this.$.model.save().then(() => {
-            this.$scope.watcher.notifySaved();
+            this.$.watcher.notifySaved();
-            this.$scope.watcher.updateOriginalData();
+            this.$.watcher.updateOriginalData();
 
             if (this.aclService.hasAny(['salesAssistant']))
                 this.$state.go('claim.card.action');
@@ -20,8 +15,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$state', '$scope', 'aclService'];
-
 ngModule.component('vnClaimDevelopment', {
     template: require('./index.html'),
     controller: Controller,

modules/claim/front/development/index.spec.js

@@ -6,7 +6,6 @@ describe('Claim', () => {
     describe('Component vnClaimDevelopment', () => {
         let controller;
         let $scope;
-        let aclService;
 
         beforeEach(ngModule('claim'));
 
@@ -14,13 +13,15 @@ describe('Claim', () => {
             $scope = $rootScope.$new();
             $scope.watcher = watcher;
             $scope.model = crudModel;
-            aclService = {hasAny: () => true};
+            const $element = angular.element('<vn-claim-development></vn-claim-development>');
-            controller = $componentController('vnClaimDevelopment', {$scope, aclService});
+            controller = $componentController('vnClaimDevelopment', {$element, $scope});
         }));
 
         describe('onSubmit()', () => {
             it(`should redirect to 'claim.card.action' state`, () => {
+                jest.spyOn(controller.aclService, 'hasAny').mockReturnValue(true);
                 jest.spyOn(controller.$state, 'go');
+
                 controller.onSubmit();
 
                 expect(controller.$state.go).toHaveBeenCalledWith('claim.card.action');

modules/claim/front/dms/style.scss

@@ -1,31 +0,0 @@
-@import "./variables";
-
-vn-claim-dms-index {
-    .drop-zone {
-        color: $color-font-secondary;
-        box-sizing: border-box;
-        border-radius: 0.5em;
-        text-align: center;
-        min-height: 100%;
-        
-        .empty-rows {
-            padding: 5em $spacing-md;
-            font-size: 1.4em
-        }
-
-        vn-icon {
-            font-size: 3em
-        }
-    }
-
-    .photo-list {
-        
-        padding: $spacing-md;
-        min-height: 100%;
-
-        .photo {
-            width: 32em;
-            height: 18em;
-        }
-    }
-}

modules/claim/front/index/index.js

@@ -1,11 +1,7 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-export default class Controller {
+export default class Controller extends Section {
-    constructor($scope) {
-        this.$ = $scope;
-        this.ticketSelected = null;
-    }
-
     stateColor(claim) {
         switch (claim.description) {
         case 'Pendiente':
@@ -45,8 +41,6 @@ export default class Controller {
     }
 }
 
-Controller.$inject = ['$scope'];
-
 ngModule.component('vnClaimIndex', {
     template: require('./index.html'),
     controller: Controller

modules/claim/front/photos/index.html

@@ -1,10 +1,9 @@
 <vn-crud-model vn-id="model" auto-load="true"
     url="ClaimDms"
-    link="{claimFk: $ctrl.$stateParams.id}"
+    link="{claimFk: $ctrl.$params.id}"
     limit="20"
     data="$ctrl.photos">
 </vn-crud-model>
-
 <vn-horizontal class="photo-list drop-zone" vn-droppable="$ctrl.onDrop($event)">
     <section class="empty-rows" ng-if="!$ctrl.photos.length">
         <section><vn-icon icon="image"></vn-icon></section>
@@ -12,8 +11,8 @@
     </section>
     <section class="photo" ng-repeat="photo in $ctrl.photos">
         <section class="image vn-shadow" on-error-src 
-            ng-style="{'background': 'url(/api/dms/' + photo.dmsFk + '/downloadFile?access_token=' + $ctrl.accessToken + ')'}"
+            ng-style="{'background': 'url(/api/dms/' + photo.dmsFk + '/downloadFile?access_token=' + $ctrl.vnToken.token + ')'}"
-            zoom-image="/api/dms/{{::photo.dmsFk}}/downloadFile?access_token={{::$ctrl.accessToken}}">
+            zoom-image="/api/dms/{{::photo.dmsFk}}/downloadFile?access_token={{::$ctrl.vnToken.token}}">
         </section>
         <section class="actions">
             <vn-button

modules/claim/front/photos/index.js

@@ -1,17 +1,8 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
+class Controller extends Section {
-    constructor($stateParams, $scope, $http, $translate, vnToken, vnApp, vnConfig) {
-        this.$stateParams = $stateParams;
-        this.$ = $scope;
-        this.$http = $http;
-        this.$translate = $translate;
-        this.accessToken = vnToken.token;
-        this.vnApp = vnApp;
-        this.vnConfig = vnConfig;
-    }
-
     showWorkerDescriptor(event, workerFk) {
         event.preventDefault();
         event.stopImmediatePropagation();
@@ -106,8 +97,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$stateParams', '$scope', '$http', '$translate', 'vnToken', 'vnApp', 'vnConfig'];
-
 ngModule.component('vnClaimPhotos', {
     template: require('./index.html'),
     controller: Controller,

modules/claim/front/photos/index.spec.js

@@ -3,7 +3,6 @@ import crudModel from 'core/mocks/crud-model';
 
 describe('Claim', () => {
     describe('Component vnClaimPhotos', () => {
-        let $componentController;
         let $scope;
         let $httpBackend;
         let controller;
@@ -11,12 +10,12 @@ describe('Claim', () => {
 
         beforeEach(ngModule('claim'));
 
-        beforeEach(angular.mock.inject((_$componentController_, $rootScope, _$httpBackend_, _$httpParamSerializer_) => {
+        beforeEach(angular.mock.inject(($componentController, $rootScope, _$httpBackend_, _$httpParamSerializer_) => {
-            $componentController = _$componentController_;
             $httpParamSerializer = _$httpParamSerializer_;
             $httpBackend = _$httpBackend_;
             $scope = $rootScope.$new();
-            controller = $componentController('vnClaimPhotos', {$: $scope});
+            const $element = angular.element('<vn-claim-photos></vn-claim-photos>');
+            controller = $componentController('vnClaimPhotos', {$element, $scope});
             controller.$.model = crudModel;
             controller.claim = {
                 id: 1,

modules/claim/front/summary/index.html

@@ -86,8 +86,8 @@
             <vn-horizontal class="photo-list">
                 <section class="photo" ng-repeat="photo in photos">
                     <section class="image" on-error-src 
-                        ng-style="{'background': 'url(/api/dms/' + photo.dmsFk + '/downloadFile?access_token=' + $ctrl.accessToken + ')'}"
+                        ng-style="{'background': 'url(/api/dms/' + photo.dmsFk + '/downloadFile?access_token=' + $ctrl.vnToken.token + ')'}"
-                        zoom-image="/api/dms/{{::photo.dmsFk}}/downloadFile?access_token={{::$ctrl.accessToken}}">
+                        zoom-image="/api/dms/{{::photo.dmsFk}}/downloadFile?access_token={{::$ctrl.vnToken.token}}">
                     </section>
                 </section>
             </vn-horizontal>

modules/claim/front/summary/index.js

@@ -1,19 +1,17 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
+class Controller extends Section {
-    constructor($scope, $http, $stateParams, vnToken) {
+    $onChanges() {
-        this.$http = $http;
+        if (this.claim && this.claim.id)
-        this.$ = $scope;
+            this.getSummary();
-        this.$stateParams = $stateParams;
-        this.accessToken = vnToken.token;
     }
 
     get claim() {
         return this._claim;
     }
 
-
     set claim(value) {
         this._claim = value;
 
@@ -35,11 +33,6 @@ class Controller {
         });
     }
 
-    $onChanges() {
-        if (this.claim && this.claim.id)
-            this.getSummary();
-    }
-
     showItemDescriptor(event, itemFk) {
         this.$.itemDescriptor.itemFk = itemFk;
         this.$.itemDescriptor.parent = event.target;
@@ -59,8 +52,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$scope', '$http', '$stateParams', 'vnToken'];
-
 ngModule.component('vnClaimSummary', {
     template: require('./index.html'),
     controller: Controller,

modules/claim/front/summary/index.spec.js

@@ -5,12 +5,15 @@ describe('Claim', () => {
     describe('Component summary', () => {
         let controller;
         let $httpBackend;
+        let $scope;
 
         beforeEach(ngModule('claim'));
 
-        beforeEach(angular.mock.inject(($componentController, _$httpBackend_) => {
+        beforeEach(angular.mock.inject(($componentController, _$httpBackend_, $rootScope) => {
+            $scope = $rootScope.$new();
             $httpBackend = _$httpBackend_;
-            controller = $componentController('vnClaimSummary');
+            const $element = angular.element('<vn-claim-summary></vn-claim-summary>');
+            controller = $componentController('vnClaimSummary', {$element, $scope});
             controller.claim = {id: 1};
             controller.$.model = crudModel;
         }));
@@ -29,6 +32,7 @@ describe('Claim', () => {
         describe('$onChanges()', () => {
             it('should call getSummary when item.id is defined', () => {
                 jest.spyOn(controller, 'getSummary');
+
                 controller.$onChanges();
 
                 expect(controller.getSummary).toHaveBeenCalledWith();

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

@@ -11,7 +11,7 @@
     vn-id="model"
     url="AddressObservations"
     fields="['id', 'addressFk', 'observationTypeFk', 'description']"
-    link="{addressFk: $ctrl.$stateParams.addressId}"
+    link="{addressFk: $ctrl.$params.addressId}"
     data="observations"
     auto-load="true">
 </vn-crud-model>

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

@@ -1,7 +1,7 @@
 import ngModule from '../../module';
-import Component from 'core/lib/component';
+import Section from 'salix/components/section';
 
-export default class Controller extends Component {
+export default class Controller extends Section {
     constructor($element, $) {
         super($element, $);
 

modules/client/front/address/edit/index.js

@@ -1,7 +1,7 @@
 import ngModule from '../../module';
-import Component from 'core/lib/component';
+import Section from 'salix/components/section';
 
-export default class Controller extends Component {
+export default class Controller extends Section {
     removeObservation(index) {
         this.$.watcher.setDirty();
         this.$.model.remove(index);

modules/client/front/address/index/index.html

@@ -1,6 +1,6 @@
 <vn-crud-model
     vn-id="model"
-    url="Clients/{{$ctrl.$stateParams.id}}/addresses"
+    url="Clients/{{$ctrl.$params.id}}/addresses"
     filter="$ctrl.filter"
     limit="10"
     data="$ctrl.addresses"

modules/client/front/address/index/index.js

@@ -1,13 +1,10 @@
 import ngModule from '../../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
+class Controller extends Section {
-    constructor($http, $scope, $stateParams, $translate, vnApp) {
+    constructor($element, $) {
-        this.$http = $http;
+        super($element, $);
-        this.$scope = $scope;
-        this.$stateParams = $stateParams;
-        this.$translate = $translate;
-        this.vnApp = vnApp;
         this.filter = {
             fields: [
                 'id',
@@ -47,7 +44,7 @@ class Controller {
     }
 
     setDefault(address) {
-        let query = `Clients/${this.$stateParams.id}`;
+        let query = `Clients/${this.$params.id}`;
         let params = {defaultAddressFk: address.id};
         this.$http.patch(query, params).then(res => {
             if (res.data) {
@@ -72,7 +69,7 @@ class Controller {
         });
     }
 }
-Controller.$inject = ['$http', '$scope', '$stateParams', '$translate', 'vnApp'];
+Controller.$inject = ['$element', '$scope'];
 
 ngModule.component('vnClientAddressIndex', {
     template: require('./index.html'),

modules/client/front/address/index/index.spec.js

@@ -15,9 +15,10 @@ describe('Client', () => {
             $stateParams.id = 1;
             $httpBackend = _$httpBackend_;
             $scope = $rootScope.$new();
-            controller = $componentController('vnClientAddressIndex', {$stateParams, $scope});
+            const $element = angular.element('<vn-client-address-index></vn-client-address-index>');
+            controller = $componentController('vnClientAddressIndex', {$element, $scope});
             controller.client = {id: 101, defaultAddressFk: 121};
-            controller.$scope.model = crudModel;
+            controller.$.model = crudModel;
         }));
 
         describe('setDefault()', () => {

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

@@ -1,19 +1,15 @@
 import ngModule from '../../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
+class Controller extends Section {
-    constructor($scope, $state, $http, vnApp, $translate, vnConfig) {
+    constructor($element, $) {
-        this.$http = $http;
+        super($element, $);
-        this.$ = $scope;
-        this.$state = $state;
-        this.vnApp = vnApp;
-        this.$translate = $translate;
-
         this.receipt = {
             payed: new Date(),
-            clientFk: this.$state.params.id,
+            clientFk: this.$params.id,
-            companyFk: vnConfig.companyFk,
+            companyFk: this.vnConfig.companyFk,
-            bankFk: vnConfig.bankFk
+            bankFk: this.vnConfig.bankFk
         };
     }
 
@@ -57,7 +53,7 @@ class Controller {
     getAmountPaid() {
         let filter = {
             where: {
-                clientFk: this.$state.params.id,
+                clientFk: this.$params.id,
                 companyFk: this.receipt.companyFk
             }
         };
@@ -86,7 +82,6 @@ class Controller {
         });
     }
 }
-Controller.$inject = ['$scope', '$state', '$http', 'vnApp', '$translate', 'vnConfig'];
 
 ngModule.component('vnClientBalanceCreate', {
     template: require('./index.html'),

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

@@ -97,7 +97,7 @@
                     <vn-td center shrink>
                         <a ng-show="balance.hasPdf"
                             target="_blank"
-                            href="InvoiceOuts/{{::balance.id}}/download?access_token={{::$ctrl.accessToken}}">
+                            href="InvoiceOuts/{{::balance.id}}/download?access_token={{::$ctrl.vnToken.token}}">
                             <vn-icon-button
                                 icon="cloud_download"
                                 title="{{'Download PDF' | translate}}">

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

@@ -1,14 +1,10 @@
 import ngModule from '../../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
+class Controller extends Section {
-    constructor($stateParams, $translate, $scope, vnToken, $http, vnConfig) {
+    constructor($element, $) {
-        this.$http = $http;
+        super($element, $);
-        this.$ = $scope;
-        this.$stateParams = $stateParams;
-        this.$translate = $translate;
-        this.accessToken = vnToken.token;
-        this.vnConfig = vnConfig;
         this.filter = {
             include: {
                 relation: 'company',
@@ -46,17 +42,16 @@ class Controller {
 
     getData() {
         return this.$.model.applyFilter(null, {
-            clientId: this.$stateParams.id,
+            clientId: this.$params.id,
             companyId: this.companyId
         }).then(() => this.$.riskModel.applyFilter({
             where: {
-                clientFk: this.$stateParams.id,
+                clientFk: this.$params.id,
                 companyFk: this.companyId
             }
         })).then(() => this.getBalances());
     }
 
-
     getCurrentBalance() {
         const clientRisks = this.$.riskModel.data;
         const selectedCompany = this.companyId;
@@ -79,7 +74,6 @@ class Controller {
         });
     }
 
-
     openCreateDialog() {
         this.$.balanceCreateDialog.companyFk = this.companyId;
         this.$.balanceCreateDialog.onResponse = () => this.getData();
@@ -110,7 +104,7 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$stateParams', '$translate', '$scope', 'vnToken', '$http', 'vnConfig'];
+Controller.$inject = ['$element', '$scope'];
 
 ngModule.component('vnClientBalanceIndex', {
     template: require('./index.html'),

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

@@ -2,15 +2,14 @@ import './index';
 
 describe('Client', () => {
     describe('Component vnClientBalanceIndex', () => {
-        let $componentController;
         let controller;
 
         beforeEach(ngModule('client'));
 
-        beforeEach(angular.mock.inject((_$componentController_, $rootScope) => {
+        beforeEach(angular.mock.inject(($componentController, $rootScope) => {
-            $componentController = _$componentController_;
             let $scope = $rootScope.$new();
-            controller = $componentController('vnClientBalanceIndex', {$scope});
+            const $element = angular.element('<vn-client-balance-index></vn-client-balance-index>');
+            controller = $componentController('vnClientBalanceIndex', {$element, $scope});
             controller.$.model = {applyFilter: () => {}};
             controller.$.riskModel = {
                 applyFilter: () => {},
@@ -30,7 +29,7 @@ describe('Client', () => {
         describe('getData()', () => {
             it('should apply the filters on he models and get the client balance', () => {
                 controller._companyId = 442;
-                controller.$stateParams.id = 101;
+                controller.$params.id = 101;
                 jest.spyOn(controller, 'getBalances').mockReturnThis();
                 jest.spyOn(controller.$.model, 'applyFilter').mockReturnValue(Promise.resolve());
                 jest.spyOn(controller.$.riskModel, 'applyFilter').mockReturnValue(Promise.resolve());

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

@@ -1,7 +1,9 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
 ngModule.component('vnClientBasicData', {
     template: require('./index.html'),
+    controller: Section,
     bindings: {
         client: '<'
     }

modules/client/front/contact/index.html

@@ -2,7 +2,7 @@
     vn-id="model"
     url="ClientContacts"
     fields="['id', 'name', 'phone', 'clientFk']"
-    link="{clientFk: $ctrl.$stateParams.id}"
+    link="{clientFk: $ctrl.$params.id}"
     data="contacts"
     auto-load="true">
 </vn-crud-model>

modules/client/front/contact/index.js

@@ -1,14 +1,9 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-class Controller {
+class Controller extends Section {
-    constructor($scope, $stateParams, $translate) {
-        this.$scope = $scope;
-        this.$stateParams = $stateParams;
-        this.$translate = $translate;
-    }
-
     add() {
-        this.$scope.model.insert({
+        this.$.model.insert({
             clientFk: this.client.id,
             name: this.$translate.instant('Phone'),
             phone: null
@@ -16,16 +11,14 @@ class Controller {
     }
 
     onSubmit() {
-        this.$scope.watcher.check();
+        this.$.watcher.check();
-        this.$scope.model.save().then(() => {
+        this.$.model.save().then(() => {
-            this.$scope.watcher.notifySaved();
+            this.$.watcher.notifySaved();
-            this.$scope.model.refresh();
+            this.$.watcher.updateOriginalData();
         });
     }
 }
 
-Controller.$inject = ['$scope', '$stateParams', '$translate'];
-
 ngModule.component('vnClientContact', {
     template: require('./index.html'),
     controller: Controller,

modules/client/front/create/index.js

@@ -1,12 +1,9 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-export default class Controller {
+export default class Controller extends Section {
-    constructor($scope, $state, $http, $translate, vnApp) {
+    constructor($element, $) {
-        this.$ = $scope;
+        super($element, $);
-        this.$state = $state;
-        this.$http = $http;
-        this.$translate = $translate;
-        this.vnApp = vnApp;
         this.client = {
             active: true
         };
@@ -78,7 +75,7 @@ export default class Controller {
     }
 }
 
-Controller.$inject = ['$scope', '$state', '$http', '$translate', 'vnApp'];
+Controller.$inject = ['$element', '$scope'];
 
 ngModule.component('vnClientCreate', {
     template: require('./index.html'),

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

@@ -2,15 +2,13 @@ import './index';
 
 describe('Client', () => {
     describe('Component vnClientCreate', () => {
-        let $componentController;
         let $scope;
         let $state;
         let controller;
 
         beforeEach(ngModule('client'));
 
-        beforeEach(angular.mock.inject((_$componentController_, $rootScope, _$state_) => {
+        beforeEach(angular.mock.inject(($componentController, $rootScope, _$state_) => {
-            $componentController = _$componentController_;
             $scope = $rootScope.$new();
             $state = _$state_;
             $scope.watcher = {
@@ -22,7 +20,8 @@ describe('Client', () => {
                     };
                 }
             };
-            controller = $componentController('vnClientCreate', {$scope: $scope});
+            const $element = angular.element('<vn-client-create></vn-client-create>');
+            controller = $componentController('vnClientCreate', {$element, $scope});
         }));
 
         it('should define and set scope, state and client properties', () => {

modules/client/front/credit-insurance/create/index.js

@@ -1,19 +1,16 @@
 import ngModule from '../../module';
+import Section from 'salix/components/section';
 
-class Controller {
+class Controller extends Section {
-    constructor($http, $filter, $state, $scope, $translate, vnApp) {
+    constructor($element, $) {
-        this.$http = $http;
+        super($element, $);
-        this.$state = $state;
-        this.$scope = $scope;
-        this.$translate = $translate;
-        this.vnApp = vnApp;
         this.creditClassification = {
-            started: $filter('date')(new Date(), 'yyyy-MM-dd HH:mm')
+            started: this.$filter('date')(new Date(), 'yyyy-MM-dd HH:mm')
         };
     }
 
     onSubmit() {
-        if (this.$scope.form.$invalid)
+        if (this.$.form.$invalid)
             return this.vnApp.showError(this.$translate.instant('Some fields are invalid'));
 
         let query = `creditClassifications/createWithInsurance`;
@@ -29,7 +26,7 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$http', '$filter', '$state', '$scope', '$translate', 'vnApp'];
+Controller.$inject = ['$element', '$scope'];
 
 ngModule.component('vnClientCreditInsuranceCreate', {
     template: require('./index.html'),

modules/client/front/credit-insurance/create/index.spec.js

@@ -14,7 +14,8 @@ describe('Client', () => {
             $scope.form = {
                 $invalid: false
             };
-            controller = $componentController('vnClientCreditInsuranceCreate', {$scope});
+            const $element = angular.element('<vn-client-credit-insurance-create></vn-client-credit-insurance-create>');
+            controller = $componentController('vnClientCreditInsuranceCreate', {$element, $scope});
             controller.client = {id: 101};
             controller.card = {
                 reload: () => {}

modules/client/front/credit-insurance/index/index.js

@@ -1,12 +1,8 @@
 import ngModule from '../../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
+class Controller extends Section {
-    constructor($http, $scope) {
-        this.$http = $http;
-        this.$scope = $scope;
-    }
-
     $onChanges() {
         if (this.client && this.client.id)
             this._getClassifications(this.client.id);
@@ -52,7 +48,7 @@ class Controller {
 
     closeContract(classification) {
         this.classificationId = classification.id;
-        this.$scope.closeContract.show();
+        this.$.closeContract.show();
     }
 
     returnDialog(response) {
@@ -65,8 +61,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$http', '$scope'];
-
 ngModule.component('vnClientCreditInsuranceIndex', {
     template: require('./index.html'),
     controller: Controller,

modules/client/front/credit-insurance/index/index.spec.js

@@ -4,12 +4,15 @@ describe('Client', () => {
     describe('Component vnClientCreditInsuranceIndex', () => {
         let controller;
         let $httpBackend;
+        let $scope;
 
         beforeEach(ngModule('client'));
 
-        beforeEach(angular.mock.inject(($componentController, _$httpBackend_) => {
+        beforeEach(angular.mock.inject(($componentController, _$httpBackend_, $rootScope) => {
             $httpBackend = _$httpBackend_;
-            controller = $componentController('vnClientCreditInsuranceIndex');
+            $scope = $rootScope.$new();
+            const $element = angular.element('<vn-client-credit-insurance-index></vn-client-credit-insurance-index>');
+            controller = $componentController('vnClientCreditInsuranceIndex', {$element, $scope});
             controller.client = {id: 101};
         }));
 
@@ -59,14 +62,14 @@ describe('Client', () => {
 
         describe('closeContract()', () => {
             it('should define the classificationId property of the controller and then call the show method()', () => {
-                controller.$scope.closeContract = {show: () => {}};
+                controller.$.closeContract = {show: () => {}};
-                jest.spyOn(controller.$scope.closeContract, 'show');
+                jest.spyOn(controller.$.closeContract, 'show');
 
                 expect(controller.classificationId).toBeFalsy();
                 controller.closeContract({id: 1});
 
                 expect(controller.classificationId).toEqual(1);
-                expect(controller.$scope.closeContract.show).toHaveBeenCalledWith();
+                expect(controller.$.closeContract.show).toHaveBeenCalledWith();
             });
         });
 

modules/client/front/credit-insurance/insurance/create/index.js

@@ -1,25 +1,25 @@
 import ngModule from '../../../module';
+import Section from 'salix/components/section';
 
-class Controller {
+class Controller extends Section {
-    constructor($scope, $state, $filter) {
+    constructor($element, $) {
-        this.$scope = $scope;
+        super($element, $);
-        this.$state = $state;
         this.insurance = {
-            created: $filter('date')(new Date(), 'yyyy-MM-dd HH:mm:ss')
+            created: this.$filter('date')(new Date(), 'yyyy-MM-dd HH:mm:ss')
         };
     }
 
     onSubmit() {
-        let params = {classificationId: this.$state.params.classificationId};
+        let params = {classificationId: this.$params.classificationId};
         let state = 'client.card.creditInsurance.insurance.index';
 
-        this.$scope.watcher.submitGo(state, params).then(() => {
+        this.$.watcher.submitGo(state, params).then(() => {
             this.card.reload();
         });
     }
 }
 
-Controller.$inject = ['$scope', '$state', '$filter'];
+Controller.$inject = ['$element', '$scope'];
 
 ngModule.component('vnClientCreditInsuranceInsuranceCreate', {
     template: require('./index.html'),

modules/client/front/credit-insurance/insurance/index/index.html

@@ -1,7 +1,7 @@
 <vn-crud-model
     vn-id="model"
     url="CreditInsurances"
-    link="{creditClassification: $ctrl.$stateParams.classificationId}"
+    link="{creditClassification: $ctrl.$params.classificationId}"
     limit="20"
     data="insurances"
     auto-load="true">
@@ -30,7 +30,7 @@
 </div>
 <a 
     ng-if="!$ctrl.isClosed"
-    ui-sref="client.card.creditInsurance.insurance.create({classificationId: {{$ctrl.$stateParams.classificationId}}})" 
+    ui-sref="client.card.creditInsurance.insurance.create({classificationId: {{$ctrl.$params.classificationId}}})" 
     fixed-bottom-right
     vn-tooltip="New credit"
     vn-bind="+">

modules/client/front/credit-insurance/insurance/index/index.js

@@ -1,9 +1,9 @@
 import ngModule from '../../../module';
+import Section from 'salix/components/section';
 
-class Controller {
+class Controller extends Section {
-    constructor($stateParams, $http) {
+    constructor($element, $) {
-        this.$stateParams = $stateParams;
+        super($element, $);
-        this.$http = $http;
         this.isClosed = true;
         this.filter = {
             include: [
@@ -15,7 +15,7 @@ class Controller {
     $onInit() {
         let filter = {
             fields: ['finished'],
-            where: {id: this.$stateParams.classificationId}
+            where: {id: this.$params.classificationId}
         };
         filter = encodeURIComponent(JSON.stringify(filter));
 
@@ -27,7 +27,7 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$stateParams', '$http'];
+Controller.$inject = ['$element', '$scope'];
 
 ngModule.component('vnClientCreditInsuranceInsuranceIndex', {
     template: require('./index.html'),

modules/client/front/credit-insurance/insurance/index/index.spec.js

@@ -4,13 +4,16 @@ describe('Client', () => {
     describe('Component vnClientCreditInsuranceInsuranceIndex', () => {
         let controller;
         let $httpBackend;
+        let $scope;
 
         beforeEach(ngModule('client'));
 
-        beforeEach(angular.mock.inject(($componentController, _$httpBackend_) => {
+        beforeEach(angular.mock.inject(($componentController, _$httpBackend_, $rootScope) => {
-            let $stateParams = {classificationId: 1};
+            $scope = $rootScope.$new();
             $httpBackend = _$httpBackend_;
-            controller = $componentController('vnClientCreditInsuranceInsuranceIndex', {$stateParams});
+            const $element = angular.element('<vn-client-credit-insurance-insurance-index></vn-client-credit-insurance-insurance-index>');
+            controller = $componentController('vnClientCreditInsuranceInsuranceIndex', {$element, $scope});
+            controller.$params = {classificationId: 1};
         }));
 
         describe('$onInit()', () => {

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

@@ -1,17 +1,12 @@
 import ngModule from '../../module';
+import Section from 'salix/components/section';
 
-class Controller {
+class Controller extends Section {
-    constructor($http, $scope, $state) {
-        this.$http = $http;
-        this.$scope = $scope;
-        this.$state = $state;
-    }
-
     onSubmit() {
-        this.$http.get(`Recoveries/${this.$state.params.id}/hasActiveRecovery`).then(res => {
+        this.$http.get(`Recoveries/${this.$params.id}/hasActiveRecovery`).then(res => {
             let activeRecovery = res.data;
             if (activeRecovery)
-                this.$scope.confirmation.show();
+                this.$.confirmation.show();
             else
                 this.addCredit();
         });
@@ -31,7 +26,7 @@ class Controller {
     }
 
     addCredit() {
-        this.$scope.watcher.submit().then(
+        this.$.watcher.submit().then(
             () => {
                 this.goToIndex();
             }
@@ -39,8 +34,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$http', '$scope', '$state'];
-
 ngModule.component('vnClientCreditCreate', {
     template: require('./index.html'),
     controller: Controller,

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

@@ -30,7 +30,8 @@ describe('Client', () => {
             $state = _$state_;
             $state.params.id = 101;
             $httpBackend = _$httpBackend_;
-            controller = $componentController('vnClientCreditCreate', {$scope, $state});
+            const $element = angular.element('<vn-client-credit-create></vn-client-credit-create>');
+            controller = $componentController('vnClientCreditCreate', {$element, $scope});
         }));
 
         describe('onSubmit()', () => {
@@ -42,13 +43,13 @@ describe('Client', () => {
             });
 
             it('should call show() method when the client have a recovery', () => {
-                jest.spyOn(controller.$scope.confirmation, 'show');
+                jest.spyOn(controller.$.confirmation, 'show');
                 $httpBackend.whenGET(`Recoveries/101/hasActiveRecovery`).respond(true);
                 $httpBackend.expectGET(`Recoveries/101/hasActiveRecovery`);
                 controller.onSubmit();
                 $httpBackend.flush();
 
-                expect(controller.$scope.confirmation.show).toHaveBeenCalledWith();
+                expect(controller.$.confirmation.show).toHaveBeenCalledWith();
             });
 
             it('should call addCredit() method when the client doesnt have a recovery', () => {

modules/client/front/credit/index/index.html

@@ -2,7 +2,7 @@
     vn-id="model"
     url="ClientCredits"
     filter="::$ctrl.filter"
-    link="{clientFk: $ctrl.$stateParams.id}"
+    link="{clientFk: $ctrl.$params.id}"
     limit="20"
     data="credits"
     order="created DESC"

modules/client/front/credit/index/index.js

@@ -1,8 +1,9 @@
 import ngModule from '../../module';
+import Section from 'salix/components/section';
 
-class Controller {
+class Controller extends Section {
-    constructor($stateParams) {
+    constructor($element, $) {
-        this.$stateParams = $stateParams;
+        super($element, $);
         this.filter = {
             include: [
                 {
@@ -22,7 +23,7 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$stateParams'];
+Controller.$inject = ['$element', '$scope'];
 
 ngModule.component('vnClientCreditIndex', {
     template: require('./index.html'),

modules/client/front/descriptor-popover/index.js

@@ -3,11 +3,8 @@ import Component from 'core/lib/component';
 import './style.scss';
 
 class Controller extends Component {
-    constructor($element, $scope, $http, $timeout, $q) {
+    constructor($element, $) {
-        super($element, $scope);
+        super($element, $);
-        this.$timeout = $timeout;
-        this.$http = $http;
-        this.$q = $q;
         this.client = null;
         this._quicklinks = {};
     }
@@ -59,7 +56,6 @@ class Controller extends Component {
         );
     }
 }
-Controller.$inject = ['$element', '$scope', '$http', '$timeout', '$q'];
 
 ngModule.component('vnClientDescriptorPopover', {
     template: require('./index.html'),

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

@@ -1,14 +1,10 @@
 import ngModule from '../../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
+class Controller extends Section {
-    constructor($scope, $http, $state, $translate, vnApp, vnConfig) {
+    constructor($element, $) {
-        this.$ = $scope;
+        super($element, $);
-        this.$http = $http;
-        this.$state = $state;
-        this.$translate = $translate;
-        this.vnApp = vnApp;
-        this.vnConfig = vnConfig;
         this.dms = {
             files: [],
             hasFile: false,
@@ -106,7 +102,7 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$scope', '$http', '$state', '$translate', 'vnApp', 'vnConfig'];
+Controller.$inject = ['$element', '$scope'];
 
 ngModule.component('vnClientDmsCreate', {
     template: require('./index.html'),

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

@@ -13,7 +13,8 @@ describe('Client', () => {
             $scope = $rootScope.$new();
             $httpBackend = _$httpBackend_;
             $httpParamSerializer = _$httpParamSerializer_;
-            controller = $componentController('vnClientDmsCreate', {$scope});
+            const $element = angular.element('<vn-client-create></vn-client-create>');
+            controller = $componentController('vnClientDmsCreate', {$element, $scope});
             controller._client = {id: 101, name: 'Bruce wayne'};
         }));
 

modules/client/front/dms/edit/index.js

@@ -1,16 +1,8 @@
 import ngModule from '../../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
+class Controller extends Section {
-    constructor($scope, $http, $state, $translate, vnApp) {
-        this.$ = $scope;
-        this.$http = $http;
-        this.$state = $state;
-        this.$stateParams = $state.params;
-        this.$translate = $translate;
-        this.vnApp = vnApp;
-    }
-
     get client() {
         return this._client;
     }
@@ -38,7 +30,7 @@ class Controller {
     }
 
     setDefaultParams() {
-        const path = `Dms/${this.$stateParams.dmsId}`;
+        const path = `Dms/${this.$params.dmsId}`;
         this.$http.get(path).then(res => {
             const dms = res.data && res.data;
             this.dms = {
@@ -55,7 +47,7 @@ class Controller {
     }
 
     onSubmit() {
-        const query = `dms/${this.$stateParams.dmsId}/updateFile`;
+        const query = `dms/${this.$params.dmsId}/updateFile`;
         const options = {
             method: 'POST',
             url: query,
@@ -93,8 +85,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$scope', '$http', '$state', '$translate', 'vnApp'];
-
 ngModule.component('vnClientDmsEdit', {
     template: require('./index.html'),
     controller: Controller,

modules/client/front/dms/edit/index.spec.js

@@ -5,16 +5,16 @@ describe('Client', () => {
         let controller;
         let $scope;
         let $httpBackend;
-        let $state;
 
         beforeEach(ngModule('client'));
 
         beforeEach(angular.mock.inject(($componentController, $rootScope, _$httpBackend_) => {
             $scope = $rootScope.$new();
             $httpBackend = _$httpBackend_;
-            $state = {params: {dmsId: 1}};
+            const $element = angular.element('<vn-client-dms-edit></vn-client-dms-edit>');
-            controller = $componentController('vnClientDmsEdit', {$scope, $state});
+            controller = $componentController('vnClientDmsEdit', {$element, $scope});
             controller._client = {id: 1};
+            controller.$params = {dmsId: 1};
         }));
 
         describe('client() setter', () => {

modules/client/front/dms/index/index.html

@@ -1,7 +1,7 @@
 <vn-crud-model
     vn-id="model"
     url="ClientDms"
-    link="{clientFk: $ctrl.$stateParams.id}"
+    link="{clientFk: $ctrl.$params.id}"
     filter="::$ctrl.filter"
     limit="20"
     data="$ctrl.clientDms"
@@ -56,7 +56,7 @@
                 <vn-td shrink>
                     <a target="_blank"
                         title="{{'Download file' | translate}}"
-                        href="api/dms/{{::document.dmsFk}}/downloadFile?access_token={{::$ctrl.accessToken}}">
+                        href="api/dms/{{::document.dmsFk}}/downloadFile?access_token={{::$ctrl.vnToken.token}}">
                         {{::document.dms.file}}
                     </a>
                 </vn-td>
@@ -70,7 +70,7 @@
                 </vn-td>
                 <vn-td shrink>
                     <a target="_blank"
-                        href="api/dms/{{::document.dmsFk}}/downloadFile?access_token={{::$ctrl.accessToken}}">
+                        href="api/dms/{{::document.dmsFk}}/downloadFile?access_token={{::$ctrl.vnToken.token}}">
                         <vn-icon-button
                             icon="cloud_download"
                             title="{{'Download file' | translate}}">

modules/client/front/dms/index/index.js

@@ -1,14 +1,10 @@
 import ngModule from '../../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
+class Controller extends Section {
-    constructor($stateParams, $scope, vnToken, $http, vnApp, $translate) {
+    constructor($element, $) {
-        this.$stateParams = $stateParams;
+        super($element, $);
-        this.$ = $scope;
-        this.accessToken = vnToken.token;
-        this.$http = $http;
-        this.vnApp = vnApp;
-        this.$translate = $translate;
         this.filter = {
             include: {
                 relation: 'dms',
@@ -71,7 +67,7 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$stateParams', '$scope', 'vnToken', '$http', 'vnApp', '$translate'];
+Controller.$inject = ['$element', '$scope'];
 
 ngModule.component('vnClientDmsIndex', {
     template: require('./index.html'),

modules/client/front/dms/index/index.spec.js

@@ -3,18 +3,17 @@ import crudModel from 'core/mocks/crud-model';
 
 describe('Client', () => {
     describe('Component vnClientDmsIndex', () => {
-        let $componentController;
         let $scope;
         let $httpBackend;
         let controller;
 
         beforeEach(ngModule('client'));
 
-        beforeEach(angular.mock.inject((_$componentController_, $rootScope, _$httpBackend_) => {
+        beforeEach(angular.mock.inject(($componentController, $rootScope, _$httpBackend_) => {
-            $componentController = _$componentController_;
             $httpBackend = _$httpBackend_;
             $scope = $rootScope.$new();
-            controller = $componentController('vnClientDmsIndex', {$: $scope});
+            const $element = angular.element('<vn-client-dms-index></vn-client-dms-index>');
+            controller = $componentController('vnClientDmsIndex', {$element, $scope});
             controller.$.model = crudModel;
         }));
 

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

@@ -1,7 +1,7 @@
 import ngModule from '../module';
-import Component from 'core/lib/component';
+import Section from 'salix/components/section';
 
-export default class Controller extends Component {
+export default class Controller extends Section {
     onSubmit() {
         const orgData = this.$.watcher.orgData;
         delete this.client.despiteOfClient;

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

@@ -1,12 +1,12 @@
 import ngModule from '../../module';
+import Section from 'salix/components/section';
 
-class Controller {
+class Controller extends Section {
-    constructor($scope, $state, $filter) {
+    constructor($element, $) {
-        this.$ = $scope;
+        super($element, $);
-        this.$state = $state;
         this.greuge = {
             shipped: new Date(),
-            clientFk: $state.params.id
+            clientFk: this.$params.id
         };
     }
 
@@ -26,7 +26,7 @@ class Controller {
         );
     }
 }
-Controller.$inject = ['$scope', '$state', '$filter'];
+Controller.$inject = ['$element', '$scope'];
 
 ngModule.component('vnClientGreugeCreate', {
     template: require('./index.html'),

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

@@ -2,15 +2,13 @@ import './index';
 
 describe('Client', () => {
     describe('Component vnClientGreugeCreate', () => {
-        let $componentController;
         let $scope;
         let $state;
         let controller;
 
         beforeEach(ngModule('client'));
 
-        beforeEach(angular.mock.inject((_$componentController_, $rootScope, _$state_) => {
+        beforeEach(angular.mock.inject(($componentController, $rootScope, _$state_) => {
-            $componentController = _$componentController_;
             $scope = $rootScope.$new();
             $state = _$state_;
             $scope.watcher = {
@@ -22,7 +20,8 @@ describe('Client', () => {
                     };
                 }
             };
-            controller = $componentController('vnClientGreugeCreate', {$scope: $scope});
+            const $element = angular.element('<vn-client-greuge-create></vn-client-greuge-create>');
+            controller = $componentController('vnClientGreugeCreate', {$element, $scope});
         }));
 
         describe('onSubmit()', () => {

modules/client/front/greuge/index/index.html

@@ -2,13 +2,13 @@
     vn-id="model"
     url="greuges"
     filter="::$ctrl.filter"
-    link="{clientFk: $ctrl.$stateParams.id}"
+    link="{clientFk: $ctrl.$params.id}"
     limit="20"
     data="greuges"
     auto-load="true">
 </vn-crud-model>
 <mg-ajax 
-    path="greuges/{{$ctrl.$stateParams.id}}/sumAmount" 
+    path="greuges/{{$ctrl.$params.id}}/sumAmount" 
     options="mgEdit">
 </mg-ajax>
 <vn-data-viewer

modules/client/front/greuge/index/index.js

@@ -1,8 +1,9 @@
 import ngModule from '../../module';
+import Section from 'salix/components/section';
 
-class Controller {
+class Controller extends Section {
-    constructor($stateParams) {
+    constructor($element, $) {
-        this.$stateParams = $stateParams;
+        super($element, $);
         this.filter = {
             include: [
                 {
@@ -17,7 +18,7 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$stateParams'];
+Controller.$inject = ['$element', '$scope'];
 
 ngModule.component('vnClientGreugeIndex', {
     template: require('./index.html'),

modules/client/front/index/index.js

@@ -1,12 +1,7 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-export default class Controller {
+export default class Controller extends Section {
-    constructor($scope, $state) {
-        this.$ = $scope;
-        this.$state = $state;
-        this.clientSelected = null;
-    }
-
     openSummary(client, event) {
         if (event.defaultPrevented) return;
         event.preventDefault();
@@ -25,7 +20,6 @@ export default class Controller {
             {q: JSON.stringify({clientFk: client.id})});
     }
 }
-Controller.$inject = ['$scope', '$state'];
 
 ngModule.component('vnClientIndex', {
     template: require('./index.html'),

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

@@ -2,13 +2,16 @@ import './index';
 
 describe('Client index', () => {
     let $state;
+    let $scope;
     let controller;
 
     beforeEach(ngModule('client'));
 
-    beforeEach(angular.mock.inject(($componentController, _$state_) => {
+    beforeEach(angular.mock.inject(($componentController, _$state_, $rootScope) => {
         $state = _$state_;
-        controller = $componentController('vnClientIndex');
+        $scope = $rootScope.$new();
+        const $element = angular.element('<vn-client-index></vn-client-index>');
+        controller = $componentController('vnClientIndex', {$element, $scope});
     }));
 
     describe('filterTickets()', () => {

modules/client/front/log/index.html

@@ -1 +1 @@
-<vn-log url="ClientLogs" origin-id="$ctrl.$stateParams.id"></vn-log>
+<vn-log url="ClientLogs" origin-id="$ctrl.$params.id"></vn-log>

modules/client/front/log/index.js

@@ -1,15 +1,7 @@
 import ngModule from '../module';
-
+import Section from 'salix/components/section';
-class Controller {
-    constructor($scope, $stateParams) {
-        this.$scope = $scope;
-        this.$stateParams = $stateParams;
-    }
-}
-
-Controller.$inject = ['$scope', '$stateParams'];
 
 ngModule.component('vnClientLog', {
     template: require('./index.html'),
-    controller: Controller,
+    controller: Section,
 });

modules/client/front/mandate/index.html

@@ -2,7 +2,7 @@
     vn-id="model"
     url="Mandates"
     filter="::$ctrl.filter"
-    link="{clientFk: $ctrl.$stateParams.id}"
+    link="{clientFk: $ctrl.$params.id}"
     limit="20"
     data="mandates"
     order="created DESC"

modules/client/front/mandate/index.js

@@ -1,8 +1,9 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-class Controller {
+class Controller extends Section {
-    constructor($stateParams) {
+    constructor($element, $) {
-        this.$stateParams = $stateParams;
+        super($element, $);
         this.filter = {
             include: [
                 {
@@ -21,7 +22,7 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$stateParams'];
+Controller.$inject = ['$element', '$scope'];
 
 ngModule.component('vnClientMandate', {
     template: require('./index.html'),

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

@@ -1,19 +1,19 @@
 import ngModule from '../../module';
+import Section from 'salix/components/section';
 
-export default class Controller {
+export default class Controller extends Section {
-    constructor($state) {
+    constructor($element, $) {
-        this.$state = $state;
+        super($element, $);
         this.note = {
-            clientFk: parseInt($state.params.id),
+            clientFk: parseInt(this.$params.id),
             text: null
         };
     }
 
     cancel() {
-        this.$state.go('client.card.note.index', {id: this.$state.params.id});
+        this.$state.go('client.card.note.index', {id: this.$params.id});
     }
 }
-Controller.$inject = ['$state'];
 
 ngModule.component('vnNoteCreate', {
     template: require('./index.html'),

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

@@ -2,17 +2,16 @@ import './index';
 
 describe('Client', () => {
     describe('Component vnNoteCreate', () => {
-        let $componentController;
         let $state;
         let controller;
 
         beforeEach(ngModule('client'));
 
-        beforeEach(angular.mock.inject((_$componentController_, _$state_) => {
+        beforeEach(angular.mock.inject(($componentController, _$state_) => {
-            $componentController = _$componentController_;
             $state = _$state_;
             $state.params.id = '1234';
-            controller = $componentController('vnNoteCreate', {$state: $state});
+            const $element = angular.element('<vn-note-create></vn-note-create>');
+            controller = $componentController('vnNoteCreate', {$element, $state});
         }));
 
         it('should define clientFk using $state.params.id', () => {

modules/client/front/note/index/index.html

@@ -2,7 +2,7 @@
     vn-id="model"
     url="clientObservations"
     filter="$ctrl.filter"
-    link="{clientFk: $ctrl.$stateParams.id}"
+    link="{clientFk: $ctrl.$params.id}"
     data="notes"
     auto-load="true">
 </vn-crud-model>
@@ -24,7 +24,7 @@
     </vn-card>
 </vn-data-viewer>
 <a vn-tooltip="New note"
-    ui-sref="client.card.note.create({id: $ctrl.$stateParams.id})" 
+    ui-sref="client.card.note.create({id: $ctrl.$params.id})" 
     vn-bind="+" 
     fixed-bottom-right>
     <vn-float-button icon="add"></vn-float-button>

modules/client/front/note/index/index.js

@@ -1,16 +1,17 @@
 import ngModule from '../../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-export default class Controller {
+export default class Controller extends Section {
-    constructor($stateParams) {
+    constructor($element, $) {
-        this.$stateParams = $stateParams;
+        super($element, $);
         this.filter = {
             order: 'created DESC',
         };
     }
 }
 
-Controller.$inject = ['$stateParams'];
+Controller.$inject = ['$element', '$scope'];
 
 ngModule.component('vnClientNote', {
     template: require('./index.html'),

modules/client/front/postcode/index.js

@@ -3,14 +3,6 @@ import Component from 'core/lib/component';
 import './style.scss';
 
 class Controller extends Component {
-    constructor($element, $scope, $http, $translate, vnApp) {
-        super($element, $scope);
-        this.$ = $scope;
-        this.$http = $http;
-        this.$translate = $translate;
-        this.vnApp = vnApp;
-    }
-
     get townSelection() {
         return this._townSelection;
     }
@@ -54,8 +46,6 @@ class Controller extends Component {
     }
 }
 
-Controller.$inject = ['$element', '$scope', '$http', '$translate', 'vnApp'];
-
 ngModule.component('vnClientPostcode', {
     template: require('./index.html'),
     controller: Controller,

modules/client/front/postcode/index.spec.js

@@ -4,14 +4,15 @@ describe('Client', () => {
     describe('Component vnClientPostcode', () => {
         let controller;
         let $httpBackend;
-        let $element;
+        let $scope;
 
         beforeEach(ngModule('client'));
 
-        beforeEach(angular.mock.inject(($componentController, _$httpBackend_) => {
+        beforeEach(angular.mock.inject(($componentController, _$httpBackend_, $rootScope) => {
             $httpBackend = _$httpBackend_;
-            $element = angular.element('<vn-dialog></vn-dialog>');
+            $scope = $rootScope.$new();
-            controller = $componentController('vnClientPostcode', {$element});
+            const $element = angular.element('<vn-dialog></vn-dialog>');
+            controller = $componentController('vnClientPostcode', {$element, $scope});
             controller.client = {id: 101};
         }));
 

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

@@ -1,9 +1,9 @@
 import ngModule from '../../module';
+import Section from 'salix/components/section';
 
-class Controller {
+class Controller extends Section {
-    constructor($scope, $state, $filter) {
+    constructor($element, $) {
-        this.$ = $scope;
+        super($element, $);
-        this.$state = $state;
         this.recovery = {
             started: new Date()
         };
@@ -18,7 +18,7 @@ class Controller {
     }
 
     onSubmit() {
-        this.recovery.clientFk = this.$state.params.id;
+        this.recovery.clientFk = this.$params.id;
         this.$.watcher.submit().then(
             () => {
                 this.goToIndex();
@@ -26,7 +26,7 @@ class Controller {
         );
     }
 }
-Controller.$inject = ['$scope', '$state', '$filter'];
+Controller.$inject = ['$element', '$scope'];
 
 ngModule.component('vnClientRecoveryCreate', {
     template: require('./index.html'),

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

@@ -2,15 +2,13 @@ import './index';
 
 describe('Client', () => {
     describe('Component vnClientRecoveryCreate', () => {
-        let $componentController;
         let $scope;
         let $state;
         let controller;
 
         beforeEach(ngModule('client'));
 
-        beforeEach(angular.mock.inject((_$componentController_, $rootScope, _$state_) => {
+        beforeEach(angular.mock.inject(($componentController, $rootScope, _$state_) => {
-            $componentController = _$componentController_;
             $scope = $rootScope.$new();
             $state = _$state_;
             $scope.watcher = {
@@ -22,7 +20,8 @@ describe('Client', () => {
                     };
                 }
             };
-            controller = $componentController('vnClientRecoveryCreate', {$scope: $scope});
+            const $element = angular.element('<vn-client-recovery-create></vn-client-recovery-create>');
+            controller = $componentController('vnClientRecoveryCreate', {$element, $scope});
         }));
 
         describe('onSubmit()', () => {

modules/client/front/recovery/index/index.html

@@ -1,7 +1,7 @@
 <vn-crud-model
     vn-id="model"
     url="Recoveries"
-    link="{clientFk: $ctrl.$stateParams.id}"
+    link="{clientFk: $ctrl.$params.id}"
     limit="20"
     data="recoveries"
     order="started DESC"

modules/client/front/recovery/index/index.js

@@ -1,24 +1,17 @@
 import ngModule from '../../module';
+import Section from 'salix/components/section';
 
-class Controller {
+class Controller extends Section {
-    constructor($stateParams, $scope, $http) {
-        this.$stateParams = $stateParams;
-        this.$scope = $scope;
-        this.$http = $http;
-    }
-
     setFinished(recovery) {
         if (!recovery.finished) {
             let params = {finished: Date.now()};
             this.$http.patch(`Recoveries/${recovery.id}`, params).then(
-                () => this.$scope.model.refresh()
+                () => this.$.model.refresh()
             );
         }
     }
 }
 
-Controller.$inject = ['$stateParams', '$scope', '$http'];
-
 ngModule.component('vnClientRecoveryIndex', {
     template: require('./index.html'),
     controller: Controller

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

@@ -1,16 +1,13 @@
 import ngModule from '../../module';
-import Component from 'core/lib/component';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller extends Component {
+class Controller extends Section {
-    constructor($element, $, vnApp, $httpParamSerializer, vnConfig) {
+    constructor($element, $) {
         super($element, $);
-        this.vnApp = vnApp;
-        this.$httpParamSerializer = $httpParamSerializer;
-        this.vnConfig = vnConfig;
         this.clientSample = {
             clientFk: this.$params.id,
-            companyId: vnConfig.companyFk
+            companyId: this.vnConfig.companyFk
         };
     }
 
@@ -82,12 +79,11 @@ class Controller extends Component {
 
         if (isPreview) params.isPreview = true;
 
-        const serializedParams = this.$httpParamSerializer(params);
+        const query = `email/${sampleType.code}`;
-        const query = `email/${sampleType.code}?${serializedParams}`;
+        this.$http.get(query, {params}).then(cb);
-        this.$http.get(query).then(cb);
     }
 }
-Controller.$inject = ['$element', '$scope', 'vnApp', '$httpParamSerializer', 'vnConfig'];
+Controller.$inject = ['$element', '$scope'];
 
 ngModule.component('vnClientSampleCreate', {
     template: require('./index.html'),

modules/client/front/sample/index/index.html

@@ -2,7 +2,7 @@
     vn-id="model"
     url="ClientSamples"
     filter="::$ctrl.filter"
-    link="{clientFk: $ctrl.$stateParams.id}"
+    link="{clientFk: $ctrl.$params.id}"
     limit="20"
     data="samples"
     order="created DESC"

modules/client/front/sample/index/index.js

@@ -1,9 +1,9 @@
 import ngModule from '../../module';
+import Section from 'salix/components/section';
 
-class Controller {
+class Controller extends Section {
-    constructor($scope, $stateParams) {
+    constructor($element, $) {
-        this.$ = $scope;
+        super($element, $);
-        this.$stateParams = $stateParams;
         this.filter = {
             include: [
                 {
@@ -45,7 +45,7 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$scope', '$stateParams'];
+Controller.$inject = ['$element', '$scope'];
 
 ngModule.component('vnClientSampleIndex', {
     template: require('./index.html'),

modules/client/front/sms/index.js

@@ -1,23 +1,14 @@
 import ngModule from '../module';
-import Component from 'core/lib/component';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller extends Component {
+class Controller extends Section {
-    constructor($element, $scope, $http, $translate, vnApp) {
-        super($element, $scope);
-
-        this.$scope = $scope;
-        this.$http = $http;
-        this.$translate = $translate;
-        this.vnApp = vnApp;
-    }
-
     open() {
-        this.$scope.SMSDialog.show();
+        this.$.SMSDialog.show();
     }
 
     charactersRemaining() {
-        const element = this.$scope.message;
+        const element = this.$.message;
         const value = element.input.value;
 
         const maxLength = 160;

modules/client/front/sms/index.spec.js

@@ -15,7 +15,7 @@ describe('Client', () => {
             controller = $componentController('vnClientSms', {$element, $scope});
             controller.client = {id: 101};
             controller.$params = {id: 101};
-            controller.$scope.message = {
+            controller.$.message = {
                 input: {
                     value: 'My SMS'
                 }
@@ -59,7 +59,7 @@ describe('Client', () => {
 
         describe('charactersRemaining()', () => {
             it('should return the characters remaining in a element', () => {
-                controller.$scope.message = {
+                controller.$.message = {
                     input: {
                         value: 'My message 0€'
                     }

modules/client/front/summary/index.js

@@ -1,11 +1,8 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
+class Controller extends Section {
-    constructor($http) {
-        this.$http = $http;
-    }
-
     $onChanges() {
         if (!this.client)
             return;
@@ -41,8 +38,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$http'];
-
 ngModule.component('vnClientSummary', {
     template: require('./index.html'),
     controller: Controller,

modules/client/front/summary/index.spec.js

@@ -4,12 +4,15 @@ describe('Client', () => {
     describe('Component vnClientSummary', () => {
         let controller;
         let $httpBackend;
+        let $scope;
 
         beforeEach(ngModule('client'));
 
-        beforeEach(angular.mock.inject(($componentController, _$httpBackend_) => {
+        beforeEach(angular.mock.inject(($componentController, _$httpBackend_, $rootScope) => {
             $httpBackend = _$httpBackend_;
-            controller = $componentController('vnClientSummary');
+            $scope = $rootScope.$new();
+            const $element = angular.element('<vn-client-summary></vn-client-summary>');
+            controller = $componentController('vnClientSummary', {$element, $scope});
             controller.client = {id: 101};
         }));
 

modules/client/front/web-access/index.js

@@ -1,11 +1,9 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-export default class Controller {
+export default class Controller extends Section {
-    constructor($scope, $http, vnApp, $translate) {
+    constructor($element, $) {
-        this.$ = $scope;
+        super($element, $);
-        this.$http = $http;
-        this.vnApp = vnApp;
-        this.$translate = $translate;
         this.canChangePassword = false;
         this.canEnableCheckBox = true;
     }
@@ -64,7 +62,7 @@ export default class Controller {
         return true;
     }
 }
-Controller.$inject = ['$scope', '$http', 'vnApp', '$translate'];
+Controller.$inject = ['$element', '$scope'];
 
 ngModule.component('vnClientWebAccess', {
     template: require('./index.html'),

modules/client/front/web-access/index.spec.js

@@ -13,7 +13,8 @@ describe('Component VnClientWebAccess', () => {
         $httpBackend = _$httpBackend_;
         vnApp = _vnApp_;
         jest.spyOn(vnApp, 'showError');
-        controller = $componentController('vnClientWebAccess', {$scope});
+        const $element = angular.element('<vn-client-web-access></vn-client-web-access>');
+        controller = $componentController('vnClientWebAccess', {$element, $scope});
     }));
 
     describe('$onChanges()', () => {

modules/client/front/web-payment/index.html

@@ -1,7 +1,7 @@
 <vn-crud-model
     vn-id="model"
     url="clients/getTransactions"
-    link="{clientFk: $ctrl.$stateParams.id}"
+    link="{clientFk: $ctrl.$params.id}"
     limit="20"
     data="transactions"
     order="created DESC"

modules/client/front/web-payment/index.js

@@ -1,18 +1,13 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
+class Controller extends Section {
-    constructor($scope, $http, $stateParams) {
-        this.$scope = $scope;
-        this.$http = $http;
-        this.$stateParams = $stateParams;
-    }
-
     confirm(transaction) {
         const path = 'Clients/confirmTransaction';
         let data = {id: transaction.id};
         this.$http.post(path, data).then(res => {
-            this.$scope.model.refresh();
+            this.$.model.refresh();
         });
     }
 
@@ -26,8 +21,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$scope', '$http', '$stateParams'];
-
 ngModule.component('vnClientWebPayment', {
     template: require('./index.html'),
     controller: Controller

modules/client/front/web-payment/index.spec.js

@@ -15,7 +15,8 @@ describe('Component vnClientWebPayment', () => {
         $httpBackend = _$httpBackend_;
         vnApp = _vnApp_;
         jest.spyOn(vnApp, 'showError');
-        controller = $componentController('vnClientWebPayment', {$scope: $scope});
+        const $element = angular.element('<vn-client-web-payment></vn-client-web-payment>');
+        controller = $componentController('vnClientWebPayment', {$element, $scope});
     }));
 
     describe('confirm()', () => {

modules/entry/front/buy/index.js

@@ -1,17 +1,9 @@
 import ngModule from '../module';
-import Component from 'core/lib/component';
+import Section from 'salix/components/section';
-
-class Controller extends Component {
-    constructor($element, $) {
-        super($element, $);
-    }
-}
-
-Controller.$inject = ['$element', '$scope'];
 
 ngModule.component('vnEntryBuy', {
     template: require('./index.html'),
-    controller: Controller,
+    controller: Section,
     bindings: {
         entry: '<'
     }

modules/entry/front/index/index.js

@@ -1,10 +1,7 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 import './style.scss';
-export default class Controller {
+export default class Controller extends Section {
-    constructor($scope) {
-        this.$ = $scope;
-    }
-
     showTravelDescriptor(event, travelFk) {
         if (event.defaultPrevented) return;
         event.preventDefault();
@@ -16,8 +13,6 @@ export default class Controller {
     }
 }
 
-Controller.$inject = ['$scope'];
-
 ngModule.component('vnEntryIndex', {
     template: require('./index.html'),
     controller: Controller

modules/entry/front/log/index.html

@@ -1 +1 @@
-<vn-log url="EntryLogs" origin-id="$ctrl.$stateParams.id"></vn-log>
+<vn-log url="EntryLogs" origin-id="$ctrl.$params.id"></vn-log>

modules/entry/front/log/index.js

@@ -1,15 +1,7 @@
 import ngModule from '../module';
-
+import Section from 'salix/components/section';
-class Controller {
-    constructor($scope, $stateParams) {
-        this.$scope = $scope;
-        this.$stateParams = $stateParams;
-    }
-}
-
-Controller.$inject = ['$scope', '$stateParams'];
 
 ngModule.component('vnEntryLog', {
     template: require('./index.html'),
-    controller: Controller,
+    controller: Section,
 });

modules/entry/front/summary/index.js

@@ -1,13 +1,8 @@
 import ngModule from '../module';
 import './style.scss';
-import Component from 'core/lib/component';
+import Section from 'salix/components/section';
-
-class Controller extends Component {
-    constructor($element, $, $httpParamSerializer) {
-        super($element, $);
-        this.$httpParamSerializer = $httpParamSerializer;
-    }
 
+class Controller extends Section {
     get entry() {
         return this._entry;
     }
@@ -26,8 +21,6 @@ class Controller extends Component {
     }
 }
 
-Controller.$inject = ['$element', '$scope', '$httpParamSerializer'];
-
 ngModule.component('vnEntrySummary', {
     template: require('./index.html'),
     controller: Controller,

modules/entry/front/summary/index.spec.js

@@ -4,7 +4,6 @@ describe('component vnEntrySummary', () => {
     let controller;
     let $httpBackend;
     let $scope;
-    let $element;
 
     beforeEach(angular.mock.module('entry', $translateProvider => {
         $translateProvider.translations('en', {});
@@ -13,7 +12,7 @@ describe('component vnEntrySummary', () => {
     beforeEach(angular.mock.inject(($componentController, $rootScope, _$httpBackend_, _$httpParamSerializer_) => {
         $httpBackend = _$httpBackend_;
         $scope = $rootScope.$new();
-        $element = angular.element(`<vn-entry-summary></vn-entry-summary>`);
+        const $element = angular.element(`<vn-entry-summary></vn-entry-summary>`);
         controller = $componentController('vnEntrySummary', {$element, $scope});
     }));
 

modules/invoiceOut/front/descriptor-popover/index.js

@@ -3,11 +3,8 @@ import Component from 'core/lib/component';
 import './style.scss';
 
 class Controller extends Component {
-    constructor($element, $scope, $http, $timeout, $q) {
+    constructor($element, $,) {
-        super($element, $scope);
+        super($element, $);
-        this.$timeout = $timeout;
-        this.$http = $http;
-        this.$q = $q;
         this.worker = null;
         this._quicklinks = {};
     }
@@ -69,7 +66,6 @@ class Controller extends Component {
         });
     }
 }
-Controller.$inject = ['$element', '$scope', '$http', '$timeout', '$q'];
 
 ngModule.component('vnInvoiceOutDescriptorPopover', {
     template: require('./index.html'),

modules/invoiceOut/front/descriptor/index.js

@@ -1,14 +1,9 @@
 import ngModule from '../module';
+import Component from 'core/lib/component';
 
-class Controller {
+class Controller extends Component {
-    constructor($scope, vnToken, vnApp, $state, $translate, $http, aclService) {
+    constructor($element, $) {
-        this.$scope = $scope;
+        super($element, $);
-        this.accessToken = vnToken.token;
-        this.vnApp = vnApp;
-        this.$state = $state;
-        this.$translate = $translate;
-        this.$http = $http;
-        this.aclService = aclService;
         this.moreOptions = [
             {callback: this.showInvoiceOutPdf, name: 'Show invoice PDF'},
             {callback: this.showDeleteInvoiceOutDialog, name: 'Delete Invoice', acl: 'invoicing'},
@@ -22,7 +17,7 @@ class Controller {
 
             return !hasAclProperty || (hasAclProperty && this.aclService.hasAny([option.acl]));
         });
-        this.$scope.moreButton.data = options;
+        this.$.moreButton.data = options;
     }
 
     onMoreChange(callback) {
@@ -58,11 +53,11 @@ class Controller {
     }
 
     showDeleteInvoiceOutDialog() {
-        this.$scope.deleteConfirmation.show();
+        this.$.deleteConfirmation.show();
     }
 
     showBookInvoiceOutDialog() {
-        this.$scope.bookConfirmation.show();
+        this.$.bookConfirmation.show();
     }
 
     deleteInvoiceOut(response) {
@@ -94,8 +89,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$scope', 'vnToken', 'vnApp', '$state', '$translate', '$http', 'aclService'];
-
 ngModule.component('vnInvoiceOutDescriptor', {
     template: require('./index.html'),
     bindings: {

modules/invoiceOut/front/index/index.js

@@ -1,12 +1,7 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-export default class Controller {
+export default class Controller extends Section {
-    constructor($scope, vnToken) {
-        this.accessToken = vnToken.token;
-        this.$ = $scope;
-        this.selectedInvoiceOut = null;
-    }
-
     showClientDescriptor(event, clientFk) {
         this.$.clientDescriptor.clientFk = clientFk;
         this.$.clientDescriptor.parent = event.target;
@@ -27,15 +22,13 @@ export default class Controller {
     }
 
     openPdf(id, event) {
-        let url = `api/InvoiceOuts/${id}/download?access_token=${this.accessToken}`;
+        let url = `api/InvoiceOuts/${id}/download?access_token=${this.vnToken.token}`;
         window.open(url, '_blank');
         event.preventDefault();
         event.stopImmediatePropagation();
     }
 }
 
-Controller.$inject = ['$scope', 'vnToken'];
-
 ngModule.component('vnInvoiceOutIndex', {
     template: require('./index.html'),
     controller: Controller

modules/invoiceOut/front/summary/index.js

@@ -1,13 +1,8 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
+class Controller extends Section {
-    constructor($scope, $http, vnToken) {
-        this.accessToken = vnToken.token;
-        this.$http = $http;
-        this.$ = $scope;
-    }
-
     set invoiceOut(value) {
         this._invoiceOut = value;
         if (value && value.id)
@@ -45,8 +40,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$scope', '$http', 'vnToken'];
-
 ngModule.component('vnInvoiceOutSummary', {
     template: require('./index.html'),
     controller: Controller,

modules/invoiceOut/front/summary/index.spec.js

@@ -4,12 +4,15 @@ describe('InvoiceOut', () => {
     describe('Component summary', () => {
         let controller;
         let $httpBackend;
+        let $scope;
 
         beforeEach(ngModule('invoiceOut'));
 
-        beforeEach(angular.mock.inject(($componentController, _$httpBackend_) => {
+        beforeEach(angular.mock.inject(($componentController, _$httpBackend_, $rootScope) => {
             $httpBackend = _$httpBackend_;
-            controller = $componentController('vnInvoiceOutSummary');
+            $scope = $rootScope.$new();
+            const $element = angular.element('<vn-invoice-out-summary></vn-invoice-out-summary>');
+            controller = $componentController('vnInvoiceOutSummary', {$element, $scope});
             controller.invoiceOut = {id: 1};
         }));
 

modules/item/front/barcode/index.html

@@ -2,7 +2,7 @@
     vn-id="model"
     url="ItemBarcodes"
     fields="['id', 'itemFk', 'code']"
-    link="{itemFk: $ctrl.$stateParams.id}"
+    link="{itemFk: $ctrl.$params.id}"
     data="barcodes"
     auto-load="true">
 </vn-crud-model>

modules/item/front/barcode/index.js

@@ -1,22 +1,16 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-export default class Controller {
+export default class Controller extends Section {
-    constructor($stateParams, $scope) {
-        this.$stateParams = $stateParams;
-        this.$scope = $scope;
-    }
-
     onSubmit() {
-        this.$scope.watcher.check();
+        this.$.watcher.check();
-        this.$scope.model.save().then(() => {
+        this.$.model.save().then(() => {
-            this.$scope.watcher.notifySaved();
+            this.$.watcher.notifySaved();
-            this.$scope.model.refresh();
+            this.$.watcher.updateOriginalData();
         });
     }
 }
 
-Controller.$inject = ['$stateParams', '$scope'];
-
 ngModule.component('vnItemBarcode', {
     template: require('./index.html'),
     controller: Controller