vnCompent with most common services as properties

front/core/components/label-value/label-value.js

@@ -1,17 +1,17 @@
 import ngModule from '../../module';
+import Component from 'core/lib/component';
 import './style.scss';
 
-export default class Controller {
-    constructor($element, $translate, $attrs) {
-        this.element = $element[0];
-        this._ = $translate;
+export default class Controller extends Component {
+    constructor($element, $, $attrs) {
+        super($element, $);
         this.hasInfo = Boolean($attrs.info);
         this.info = $attrs.info || null;
     }
 
     set label(value) {
         let label = this.element.querySelector('vn-label');
-        label.textContent = this._.instant(value);
+        label.textContent = this.$t(value);
         this._label = value;
     }
 
@@ -55,7 +55,7 @@ export default class Controller {
         element.textContent = hasValue ? this.value : '-';
     }
 }
-Controller.$inject = ['$element', '$translate', '$attrs'];
+Controller.$inject = ['$element', '$scope', '$attrs'];
 
 ngModule.component('vnLabelValue', {
     controller: Controller,

front/core/components/watcher/watcher.js

@@ -181,7 +181,7 @@ export default class Watcher extends Component {
      * Notifies the user that the data has been saved.
      */
     notifySaved() {
-        this.vnApp.showSuccess(this._.instant('Data saved!'));
+        this.vnApp.showSuccess(this.$t('Data saved!'));
     }
 
     setPristine() {

front/core/components/wday-picker/style.scss

@@ -3,6 +3,9 @@
 vn-wday-picker {
     text-align: center;
 
+    &:focus {
+        outline: solid 1px rgba(0, 0, 0, .1);
+    }
     & > span {
         @extend %clickable;
         border-radius: 50%;

front/core/lib/component.js

@@ -1,3 +1,4 @@
+import ngModule from '../module';
 import EventEmitter from './event-emitter';
 import {kebabToCamel} from './string';
 
@@ -44,5 +45,30 @@ export default class Component extends EventEmitter {
     get document() {
         return this.element.ownerDocument;
     }
+
+    /**
+     * Translates an string.
+     *
+     * @param {String} string String to translate
+     * @param {Array} params Translate parameters
+     * @return {String} The translated string
+     */
+    $t(string, params) {
+        return this.$translate.instant(string, params);
+    }
 }
 Component.$inject = ['$element', '$scope'];
+
+function runFn($translate, $q, $http, vnApp, $state, $stateParams) {
+    Object.assign(Component.prototype, {
+        $translate,
+        $q,
+        $http,
+        vnApp,
+        $state,
+        $params: $stateParams
+    });
+}
+runFn.$inject = ['$translate', '$q', '$http', 'vnApp', '$state', '$stateParams'];
+
+ngModule.run(runFn);

front/core/lib/section.js

@@ -1,34 +0,0 @@
-import Component from './component';
-
-/**
- * Class with commonly injected services assigned as properties. It also has
- * abbreviations for commonly used methods like tranlation.
- *
- * @property {Object} $translate Angular tranlation service
- * @property {Object} $http Angular HTTP service
- * @property {Object} $state Router state service
- * @property {Object} $stateParams Router state parameters
- */
-export default class Section extends Component {
-    constructor($element, $scope, $translate, $http, $state) {
-        super($element, $scope);
-        Object.assign(this, {
-            $translate,
-            $http,
-            $state,
-            $stateParams: $state.params
-        });
-    }
-
-    /**
-     * Translates an string.
-     *
-     * @param {String} string String to translate
-     * @param {Array} params Translate parameters
-     * @return {String} The translated string
-     */
-    _(string, params) {
-        return this.$translate.instant(string, params, );
-    }
-}
-Section.$inject = ['$element', '$scope', '$translate', '$http', '$state'];

front/core/services/acl-service.js

@@ -4,10 +4,12 @@ class AclService {
     constructor($http) {
         this.$http = $http;
     }
+
     reset() {
         this.user = null;
         this.roles = null;
     }
+
     load() {
         return this.$http.get('/api/Accounts/acl').then(res => {
             this.user = res.data.user;
@@ -19,6 +21,7 @@ class AclService {
             }
         });
     }
+
     hasAny(roles) {
         if (this.roles) {
             for (let role of roles) {

front/core/services/auth.js

@@ -20,6 +20,7 @@ export default class Auth {
             loggedIn: false
         });
     }
+
     initialize() {
         let criteria = {
             to: state => state.name != 'login'
@@ -42,6 +43,7 @@ export default class Auth {
                 return redirectToLogin();
         });
     }
+
     login(user, password, remember) {
         if (!user)
             return this.$q.reject(new UserError('Please enter your username'));
@@ -54,6 +56,7 @@ export default class Auth {
         return this.$http.post('/api/Accounts/login', params).then(
             json => this.onLoginOk(json, remember));
     }
+
     onLoginOk(json, remember) {
         this.vnToken.set(json.data.token, remember);
 
@@ -65,6 +68,7 @@ export default class Auth {
                 this.$state.go('home');
         });
     }
+
     logout() {
         let promise = this.$http.post('/api/Accounts/logout', null, {
             headers: {Authorization: this.vnToken.token}
@@ -78,6 +82,7 @@ export default class Auth {
 
         return promise;
     }
+
     loadAcls() {
         return this.aclService.load()
             .then(() => {

front/salix/components/home/home.js

@@ -1,16 +1,17 @@
 import ngModule from '../../module';
+import Component from 'core/lib/component';
 import './style.scss';
 
-export default class Controller {
-    constructor(vnModules, $state, $translate, $sce) {
+export default class Controller extends Component {
+    constructor($element, $, vnModules, $sce) {
+        super($element, $);
         this.modules = vnModules.get();
-        this.$state = $state;
-        this._ = $translate;
         this.$sce = $sce;
     }
+
     getModuleName(mod) {
         let getName = mod => {
-            let name = this._.instant(mod.name);
+            let name = this.$t(mod.name);
             let upper = name.toUpperCase();
             if (!mod.keyBind) return name;
             let index = upper.indexOf(mod.keyBind);
@@ -25,8 +26,7 @@ export default class Controller {
         return this.$sce.trustAsHtml(getName(mod));
     }
 }
-
-Controller.$inject = ['vnModules', '$state', '$translate', '$sce'];
+Controller.$inject = ['$element', '$scope', 'vnModules', '$sce'];
 
 ngModule.component('vnHome', {
     template: require('./home.html'),

modules/agency/front/calendar/index.js

@@ -1,10 +1,10 @@
 import ngModule from '../module';
-import Section from 'core/lib/section';
+import Component from 'core/lib/component';
 import './style.scss';
 
-class Controller extends Section {
-    constructor($el, $, $t, $http, $state) {
-        super($el, $, $t, $http, $state);
+class Controller extends Component {
+    constructor($element, $) {
+        super($element, $);
         this.nMonths = 4;
 
         let date = new Date();

modules/agency/front/events/index.js

@@ -1,15 +1,14 @@
 import ngModule from '../module';
-import Section from 'core/lib/section';
+import Component from 'core/lib/component';
 
-class Controller extends Section {
-    constructor($el, $, $t, $http, $state, $q, vnWeekDays) {
-        super($el, $, $t, $http, $state);
-        this.$q = $q;
+class Controller extends Component {
+    constructor($element, $, vnWeekDays) {
+        super($element, $);
         this.vnWeekDays = vnWeekDays;
         this.editMode = 'include';
 
-        this.path = `api/Zones/${this.$stateParams.id}/events`;
-        this.exclusionsPath = `api/Zones/${this.$stateParams.id}/exclusions`;
+        this.path = `api/Zones/${this.$params.id}/events`;
+        this.exclusionsPath = `api/Zones/${this.$params.id}/exclusions`;
         this.refresh();
     }
 
@@ -190,7 +189,7 @@ class Controller extends Section {
             .then(() => this.refresh());
     }
 }
-Controller.$inject = ['$element', '$scope', '$translate', '$http', '$state', '$q', 'vnWeekDays'];
+Controller.$inject = ['$element', '$scope', 'vnWeekDays'];
 
 ngModule.component('vnZoneEvents', {
     template: require('./index.html'),

modules/agency/front/location/index.html

@@ -1,6 +1,6 @@
 <vn-crud-model
     vn-id="model"
-    url="/api/Zones/{{$ctrl.$stateParams.id}}/getLeaves"
+    url="/api/Zones/{{$ctrl.$params.id}}/getLeaves"
     filter="::$ctrl.filter">
 </vn-crud-model>
 <div class="vn-w-md">

modules/agency/front/location/index.js

@@ -1,8 +1,8 @@
 import ngModule from '../module';
-import Section from 'core/lib/section';
+import Component from 'core/lib/component';
 import './style.scss';
 
-class Controller extends Section {
+class Controller extends Component {
     onSearch(params) {
         this.$.model.applyFilter({}, params).then(() => {
             const data = this.$.model.data;

modules/agency/front/warehouses/index.js

@@ -1,11 +1,11 @@
 import ngModule from '../module';
-import Section from 'core/lib/section';
+import Component from 'core/lib/component';
 
-class Controller extends Section {
-    constructor($el, $, $t, $http, $state) {
-        super($el, $, $t, $http, $state);
+class Controller extends Component {
+    constructor($element, $) {
+        super($element, $);
 
-        this.path = `/api/Zones/${this.$stateParams.id}/warehouses`;
+        this.path = `/api/Zones/${this.$params.id}/warehouses`;
         this.refresh();
     }
 

modules/item/front/request/index.js

@@ -1,15 +1,12 @@
 import ngModule from '../module';
+import Component from 'core/lib/component';
 import './style.scss';
 
-export default class Controller {
-    constructor($, vnApp, $translate, $http, $state, $stateParams) {
-        this.$state = $state;
-        this.$stateParams = $stateParams;
-        this.$http = $http;
-        this.$ = $;
-        this.vnApp = vnApp;
-        this._ = $translate;
-        if (!$stateParams.q) {
+export default class Controller extends Component {
+    constructor($element, $) {
+        super($element, $);
+
+        if (!this.$state.q) {
             const today = new Date();
             today.setHours(23, 59, 59, 59);
 
@@ -54,7 +51,7 @@ export default class Controller {
                 request.itemDescription = res.data.concept;
                 request.isOk = true;
 
-                this.vnApp.showSuccess(this._.instant('Data saved!'));
+                this.vnApp.showSuccess(this.$t('Data saved!'));
             });
         }
     }
@@ -68,7 +65,7 @@ export default class Controller {
             let endpoint = `/api/Sales/${request.saleFk}/`;
 
             this.$http.patch(endpoint, params).then(() => {
-                this.vnApp.showSuccess(this._.instant('Data saved!'));
+                this.vnApp.showSuccess(this.$t('Data saved!'));
             }).then(() => this.confirmRequest(request));
         } else
             this.confirmRequest(request);
@@ -120,7 +117,7 @@ export default class Controller {
             this.selectedRequest.attenderFk = request.attenderFk;
             this.selectedRequest.response = request.response;
 
-            this.vnApp.showSuccess(this._.instant('Data saved!'));
+            this.vnApp.showSuccess(this.$t('Data saved!'));
             this.denyObservation = null;
         });
     }
@@ -154,8 +151,6 @@ export default class Controller {
     }
 }
 
-Controller.$inject = ['$scope', 'vnApp', '$translate', '$http', '$state', '$stateParams'];
-
 ngModule.component('vnItemRequest', {
     template: require('./index.html'),
     controller: Controller

modules/item/front/request/index.spec.js

@@ -4,6 +4,7 @@ import crudModel from 'core/mocks/crud-model';
 describe('Item', () => {
     describe('Component vnItemRequest', () => {
         let $scope;
+        let $element;
         let controller;
         let $httpBackend;
 
@@ -16,9 +17,15 @@ describe('Item', () => {
             $scope = $rootScope.$new();
             $scope.model = crudModel;
             $scope.denyReason = {hide: () => {}};
-            controller = $componentController('vnItemRequest', {$scope: $scope});
+            $element = angular.element('<vn-item-request></vn-item-request>');
+            controller = $componentController('vnItemRequest', {$element, $scope});
         }));
 
+        afterAll(() => {
+            $scope.$destroy();
+            $element.remove();
+        });
+
         describe('getState()', () => {
             it(`should return an string depending to the isOK value`, () => {
                 let isOk = null;

modules/worker/front/pbx/index.html

@@ -15,6 +15,10 @@
     </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="form.$dirty"
+            ng-click="watcher.loadOriginalData()">
+        </vn-button>
     </vn-button-bar>
 </form>

modules/worker/front/pbx/index.js

@@ -1,29 +1,21 @@
 import ngModule from '../module';
+import Component from 'core/lib/component';
 
-class Controller {
-    constructor($scope, $http, vnApp, $translate) {
-        this.$scope = $scope;
-        this.$http = $http;
-        this.vnApp = vnApp;
-        this._ = $translate;
-    }
-
+class Controller extends Component {
     onSubmit() {
         const sip = this.worker.sip;
         const params = {
             userFk: this.worker.userFk,
             extension: sip.extension
         };
-        this.$scope.watcher.check();
+        this.$.watcher.check();
         this.$http.patch('/api/Sips', params).then(() => {
-            this.$scope.watcher.updateOriginalData();
-            this.vnApp.showSuccess(this._.instant('Data saved! User must access web'));
+            this.$.watcher.updateOriginalData();
+            this.vnApp.showSuccess(this.$t('Data saved! User must access web'));
         });
     }
 }
 
-Controller.$inject = ['$scope', '$http', 'vnApp', '$translate'];
-
 ngModule.component('vnWorkerPbx', {
     template: require('./index.html'),
     controller: Controller,