vnCheck componentized, Client style changes

client/auth/src/login/style.scss

@@ -12,7 +12,7 @@ vn-login > div {
 
 	.box-wrapper {
 		position: relative;
-		max-width: 22em;
+		max-width: 19em;
 		margin: auto;
 		height: inherit;
 	}

client/client/src/billing-data/locale/es.yml

@@ -4,8 +4,6 @@ No: No
 Yes, notify: Sí, notificar
 Notification sent!: ¡Notificación enviada!
 Notification error: Error al enviar notificación
-You changes the equivalent tax: Has cambiado el recargo de equivalencia
-Do you want to spread the change to their consignees?: ¿Deseas propagar el cambio a sus consignatarios?
 Yes, propagate: Si, propagar
 Equivalent tax spreaded: Recargo de equivalencia propagado
 Invoice by address: Facturar por consignatario

client/client/src/card/card.html

@@ -6,7 +6,7 @@
     </mg-ajax>
     <vn-horizontal>
         <vn-auto class="left-block">
-            <vn-descriptor client="$ctrl.client"></vn-descriptor>
+            <vn-client-descriptor client="$ctrl.client"></vn-client-descriptor>
             <vn-left-menu></vn-left-menu>
         </vn-auto>
         <vn-one>

client/client/src/descriptor/descriptor.html

@@ -1,18 +1,20 @@
 <vn-card margin-medium-v>
-    <vn-vertical>
+    <div class="descriptor-header pointer" ui-sref="clients">
-        <vn-auto class="descriptor-header pointer" ui-sref="clients">
         <i class="material-icons">person</i>
-        </vn-auto>
+    </div>
-        <vn-auto pad-medium>
+    <div pad-medium class="data">
-            <vn-vertical>
+        <h6>{{$ctrl.client.name}}</h6>
-                <vn-horizontal ng-repeat="(field, title) in $ctrl.fieldsToShow">
+        <div>
-                    <strong vn-auto>{{::title}}:</strong>
+            <span translate>Id</span> {{$ctrl.client.id}}
-                    <vn-auto margin-small-left>
+        </div>
-                        <span ng-if="field.includes('credit')">{{$ctrl.client[field] || 0 | number:2}} €</span>
+        <div>
-                        <span ng-if="!field.includes('credit')">{{$ctrl.client[field]}}</span>
+            <span translate>Phone</span> {{$ctrl.client.phone | phone}}
-                    </vn-auto>
+        </div>
-                </vn-horizontal>
+        <div>
-            </vn-vertical>
+            <span translate>Credit</span> {{$ctrl.client.credit | number:2}}€
-        </vn-auto>
+        </div>
-    </vn-vertical>
+        <div>
+            <span translate>Secured credit</span> {{$ctrl.client.creditInsurance || 0 | number:2}}€
+        </div>
+    </div>
 </vn-card>

client/client/src/descriptor/descriptor.js

@@ -1,32 +1,9 @@
 import ngModule from '../module';
+import './style.scss';
 
-export default class Controller {
+ngModule.component('vnClientDescriptor', {
-    constructor($translate) {
-        this.$translate = $translate;
-        // CLient fields to display
-        this.fields = ['id', 'name', 'phone', 'credit', 'creditInsurance'];
-        this.fieldsToShow = {};
-    }
-
-    // concat 2 Arrays without duplicates
-    _concatFields(a, b) {
-        return a.concat(b.filter(item => a.indexOf(item) < 0));
-    }
-
-    $onInit() {
-        let fields = (this.moreFields && this.moreFields instanceof Array) ? this._concatFields(this.fields, this.moreFields) : this.fields;
-        fields.forEach(field => {
-            this.fieldsToShow[field] = this.$translate.instant(field);
-        });
-    }
-}
-Controller.$inject = ['$translate'];
-
-ngModule.component('vnDescriptor', {
     template: require('./descriptor.html'),
-    controller: Controller,
     bindings: {
-        client: '<',
+        client: '<'
-        moreFields: '<?'
     }
 });

client/client/src/descriptor/descriptor.spec.js

@@ -1,35 +0,0 @@
-import './descriptor.js';
-
-describe('Client', () => {
-    describe('Component vnDescriptor', () => {
-        let $componentController;
-        let $translate;
-        let controller;
-
-        beforeEach(() => {
-            angular.mock.module('client');
-        });
-
-        beforeEach(angular.mock.inject((_$componentController_, _$translate_) => {
-            $componentController = _$componentController_;
-            $translate = _$translate_;
-            controller = $componentController('vnDescriptor', {$translate: $translate});
-        }));
-
-        describe('onInit()', () => {
-            it('should create Object with basic fields', () => {
-                controller.client = {
-                    id: 1,
-                    name: "Peter Parker",
-                    phone: null,
-                    mobile: "666666",
-                    credit: 300,
-                    creditInsurance: null
-                };
-                controller.$onInit();
-
-                expect(controller.fieldsToShow.id).toBe('id');
-            });
-        });
-    });
-});

client/client/src/descriptor/style.scss

@@ -0,0 +1,6 @@
+vn-client-descriptor {
+    .data span {
+        font-size: .9em;
+        color: #666;
+    }
+}

client/client/src/fiscal-data/fiscal-data.html

@@ -10,17 +10,49 @@
         <vn-vertical pad-large>
             <vn-title>Fiscal data</vn-title>
             <vn-horizontal>
-                <vn-textfield autofocus vn-two label="Social name" field="$ctrl.client.socialName" vn-acl="administrative"></vn-textfield>
+                <vn-textfield
-                <vn-textfield vn-one label="Tax number" field="$ctrl.client.fi" vn-acl="administrative"></vn-textfield>
+                    vn-two
-                <vn-check vn-one label="Is equalizated" field="$ctrl.client.isEqualizated" vn-acl="administrative"></vn-check>
+                    vn-focus
+                    label="Social name"
+                    field="$ctrl.client.socialName"
+                    vn-acl="administrative">
+                </vn-textfield>
+                <vn-textfield
+                    vn-one
+                    label="Tax number"
+                    field="$ctrl.client.fi"
+                    vn-acl="administrative">
+                </vn-textfield>
+                <vn-check
+                    vn-one
+                    label="Is equalizated"
+                    field="$ctrl.client.isEqualizated"
+                    vn-acl="administrative">
+                </vn-check>
             </vn-horizontal>
             <vn-horizontal>
-                <vn-textfield vn-two label="Street" field="$ctrl.client.street" vn-focus vn-acl="administrative"></vn-textfield>
+                <vn-textfield
-                <vn-textfield vn-one label="City" field="$ctrl.client.city" vn-acl="administrative"></vn-textfield> 
+                    vn-two
+                    label="Street"
+                    field="$ctrl.client.street"
+                    vn-acl="administrative">
+                </vn-textfield>
+                <vn-textfield
+                    vn-one
+                    label="City"
+                    field="$ctrl.client.city"
+                    vn-acl="administrative">
+                </vn-textfield> 
             </vn-horizontal>
             <vn-horizontal>
-                <vn-textfield vn-one label="Postcode" field="$ctrl.client.postcode" vn-acl="administrative"></vn-textfield>
+                <vn-textfield
-                <vn-autocomplete vn-one
+                    vn-one
+                    label="Postcode"
+                    field="$ctrl.client.postcode"
+                    vn-acl="administrative">
+                </vn-textfield>
+                <vn-autocomplete
+                    vn-one
                     initial-data="$ctrl.client.province"
                     field="$ctrl.client.provinceFk"
                     url="/client/api/Provinces"
@@ -29,7 +61,8 @@
                     label="Province"
                     vn-acl="administrative">
                 </vn-autocomplete>
-                <vn-autocomplete vn-one
+                <vn-autocomplete
+                    vn-one
                     initial-data="$ctrl.client.country"
                     field="$ctrl.client.countryFk"
                     url="/client/api/Countries"
@@ -41,24 +74,48 @@
             </vn-horizontal>
             <vn-horizontal margin-small-bottom>
                 <vn-one>
-                    <vn-check label="Active" field="$ctrl.client.isActive" vn-acl="administrative"></vn-check>
+                    <vn-check
+                        label="Active"
+                        field="$ctrl.client.isActive"
+                        vn-acl="administrative">
+                    </vn-check>
                 </vn-one>
                 <vn-one>
-                    <vn-check label="Invoice by address" field="$ctrl.client.hasToInvoiceByAddress" vn-acl="administrative"></vn-check>
+                    <vn-check
+                        label="Invoice by address"
+                        field="$ctrl.client.hasToInvoiceByAddress"
+                        vn-acl="administrative">
+                    </vn-check>
                 </vn-one>
                 <vn-one>
-                    <vn-check label="Verified data" field="$ctrl.client.isTaxDataChecked" vn-acl="administrative"></vn-check>
+                    <vn-check
+                        label="Verified data"
+                        field="$ctrl.client.isTaxDataChecked"
+                        vn-acl="administrative">
+                    </vn-check>
                 </vn-one>
             </vn-horizontal>
             <vn-horizontal>
                 <vn-one>                    
-                    <vn-check label="Has to invoice" field="$ctrl.client.hasToInvoice" vn-acl="administrative"></vn-check>
+                    <vn-check
+                        label="Has to invoice"
+                        field="$ctrl.client.hasToInvoice"
+                        vn-acl="administrative">
+                    </vn-check>
                 </vn-one>
                 <vn-one>
-                    <vn-check vn-one label="Invoice by mail" field="$ctrl.client.isToBeMailed" vn-acl="administrative"></vn-check>
+                    <vn-check
+                        label="Invoice by mail"
+                        field="$ctrl.client.isToBeMailed"
+                        vn-acl="administrative">
+                    </vn-check>
                 </vn-one>
                 <vn-one>
-                    <vn-check vn-one label="Vies" field="$ctrl.client.isVies" vn-acl="administrative"></vn-check>
+                    <vn-check
+                        label="Vies"
+                        field="$ctrl.client.isVies"
+                        vn-acl="administrative">
+                    </vn-check>
                 </vn-one>
             </vn-horizontal>
         </vn-vertical>
@@ -67,17 +124,9 @@
         <vn-submit label="Save" vn-acl="administrative"></vn-submit>
     </vn-button-bar>
 </form>
-<vn-dialog
+<vn-confirm 
     vn-id="propagate-isEqualizated"
+    question="You changed the equalization tax"
+    message="Do you want to spread the change?"
     on-response="$ctrl.returnDialogEt(response)">
-    <tpl-body>
+</vn-confirm>
-        <vn-vertical>
-            <vn-one text-center translate>You changes the equivalen
-            <vn-one text-center translate>Do you want to spread the change to their consig
-        </vn-vertical>
-    </tpl-body>
-    <tpl-buttons>
-        <button response="CANCEL" translate>No</button>
-        <button response="ACCEPT" translate>Yes, propagate</button>
-    </tpl-buttons>
-</vn-dialog>

client/client/src/fiscal-data/locale/es.yml

@@ -0,0 +1,4 @@
+No: No
+Yes, notify: Sí, notificar
+You changed the equalization tax: Has cambiado el recargo de equivalencia
+Do you want to spread the change: ¿Deseas propagar el cambio a sus consignatarios?

client/client/src/index/index.html

@@ -1,6 +1,6 @@
 <mg-ajax path="/client/api/Clients/filter" options="mgIndex"></mg-ajax>
 <div margin-medium>
-    <div style="max-width: 40em; margin: 0 auto;">
+    <div style="max-width: 36em; margin: 0 auto;">
         <vn-card>
             <vn-horizontal pad-medium>
                 <vn-searchbar vn-one
@@ -8,13 +8,16 @@
                     on-search="$ctrl.search(index)"
                     advanced="true"
                     popover="vn-client-search-panel"
-                    ignore-keys = "['page', 'size', 'search']"
+                    ignore-keys = "['page', 'size', 'search']">
-                    >
                 </vn-searchbar>
             </vn-horizontal>
         </vn-card>
         <vn-card margin-medium-top>
-            <vn-item-client ng-repeat="client in index.model.instances" title="View client" client="client"></vn-item-client>
+            <vn-item-client
+                ng-repeat="client in index.model.instances"
+                title="View client"
+                client="client">
+            </vn-item-client>
         </vn-card>
         <vn-paging index="index" total="index.model.count"></vn-paging>
     </div>

client/client/src/index/index.js

@@ -1,5 +1,5 @@
 import ngModule from '../module';
-import './style.css';
+import './style.scss';
 import './item-client';
 
 export default class Controller {

client/client/src/index/item-client.html

@@ -1,7 +1,7 @@
 <a ui-sref="clientCard.basicData({ id: {{::$ctrl.client.id}} })" pad-medium border-solid-bottom>
-    <div class="vn-item-client-name">{{::$ctrl.client.name}}</div>
+    <h6>{{::$ctrl.client.name}}</h6>
-    <div><span translate>Client id</span>: <b>{{::$ctrl.client.id}}</b></div>
+    <div><span translate>Id</span> {{::$ctrl.client.id}}</div>
-    <div><span translate>Phone</span>: <b>{{::$ctrl.client.phone | phone}}</b></div>
+    <div><span translate>Phone</span> {{::$ctrl.client.phone | phone}}</div>
-    <div><span translate>Town/City</span>: <b>{{::$ctrl.client.city}}</b></div>
+    <div><span translate>Town/City</span> {{::$ctrl.client.city}}</div>
-    <div><span translate>Email</span>: <b>{{::$ctrl.client.email}}</b></div>
+    <div><span translate>Email</span> {{::$ctrl.client.email}}</div>
 </a>

client/client/src/index/style.css

@@ -1,16 +0,0 @@
-vn-item-client {
-    display: block;
-}
-vn-item-client a {
-    display: block;
-    text-decoration: none;
-    color: inherit;
-}
-vn-item-client a:hover {
-    color: white;
-    background-color: #424242;
-}
-
-.vn-item-client-name {
-    font-family: vn-font-bold;
-}

client/client/src/index/style.scss

@@ -0,0 +1,20 @@
+vn-item-client {
+    display: block;
+
+    a {
+        display: block;
+        text-decoration: none;
+        color: inherit;
+    }
+    a:hover {
+        color: white;
+        background-color: #424242;
+    }
+    span {
+        font-size: .9em;
+        color: #666;
+    }
+    a:hover span {
+        color: #aaa;
+    }
+}

client/client/src/notes/notes.html

@@ -5,13 +5,13 @@
             ng-repeat="n in $ctrl.observations" 
             pad-small border-solid
             border-radius
-            margin-small-bottom style="align-items: center;">
+            margin-small-bottom>
-            <vn-horizontal>
+            <vn-horizontal margin-small-bottom style="color: #666">
-                <vn-one >{{::n.worker.firstName}} {{::n.worker.name}}</vn-one>
+                <vn-one>{{::n.worker.firstName}} {{::n.worker.name}}</vn-one>
                 <vn-auto>{{::n.created | date:'dd/MM/yyyy HH:mm'}}</vn-auto>
             </vn-horizontal>   
             <vn-horizontal>
-                <b>{{::n.text}}</b> 
+                {{::n.text}}
             </vn-horizontal>
         </vn-one>
     </vn-vertical>

client/core/src/components/check/check.html

@@ -1,4 +1,4 @@
 <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
-	<input type="checkbox" name="*[name]*" class="*[className]*" name="*[name]*" ng-model="*[model]*" rule="*[rule]*" *[enabled]*>
+	<input type="checkbox" class="mdl-checkbox__input"/>
-	<span class="mdl-checkbox__label" translate>*[label]*</span>
+	<span class="mdl-checkbox__label" translate>{{::$ctrl.label}}</span>
 </label>

client/core/src/components/check/check.js

@@ -1,24 +1,50 @@
 import ngModule from '../../module';
-import template from './check.html';
+import Input from '../../lib/input';
-import './style.css';
+import './style.scss';
 
-directive.$inject = ['vnTemplate'];
+export default class Controller extends Input {
-export default function directive(vnTemplate) {
+    constructor($element, $scope) {
-    return {
+        super($element, $scope);
-        restrict: 'E',
+        componentHandler.upgradeElement(this.element.firstChild);
-        template: (_, $attrs) =>
+        this.mdlElement = this.element.firstChild.MaterialCheckbox;
-            vnTemplate.getNormalized(template, $attrs, {
+        this.input.addEventListener('change', () => this.onChange());
-                enabled: 'true',
-                className: 'mdl-checkbox__input'
-            }),
-        link: function(scope, element, attrs) {
-            scope.$watch(attrs.model, () => {
-                let mdlField = element[0].firstChild.MaterialCheckbox;
-                if (mdlField)
-                    mdlField.updateClasses_();
-            });
-            componentHandler.upgradeElement(element[0].firstChild);
     }
+    set field(value) {
+        this.input.checked = value == true;
+        this.mdlUpdate();
+    }
+    get field() {
+        return this.input.checked == true;
+    }
+    $onInit() {
+        if (this.model) {
+            this.model.$render = () => {
+                this.input.checked = this.model.$viewValue || false;
+                this.mdlUpdate();
             };
+            this.$element.on('blur keyup change', () => {
+                this.$.$evalAsync(() => {
+                    this.model.$setViewValue(this.input.checked);
+                });
+            });
+        }
+    }
+    onChange() {
+        this.$.$applyAsync();
+    }
 }
-ngModule.directive('vnCheck', directive);
+Controller.$inject = ['$element', '$scope', '$injector'];
+
+ngModule.component('vnCheck', {
+    template: require('./check.html'),
+    controller: Controller,
+    require: {
+        model: '?ngModel'
+    },
+    bindings: {
+        field: '=?',
+        label: '@?',
+        disabled: '<?',
+        rule: '@?'
+    }
+});

client/core/src/components/confirm/confirm.html

@@ -6,11 +6,11 @@
         <div>
             <tpl-body>
                 <h6 class="dialog-title" translate>
-                    {{$ctrl.question}}
+                    {{::$ctrl.question}}
-                </h6>
-                <h6 translate>
-                    {{$ctrl.message}}
                 </h6>
+                <span translate>
+                    {{::$ctrl.message}}
+                </span>
             </tpl-body>
         </div>
         <div class="button-bar" ng-click="$ctrl.onButtonClick($event)">

client/core/src/components/confirm/confirm.js

@@ -1,6 +1,6 @@
 import ngModule from '../../module';
 import Dialog from '../dialog/dialog';
-import './style.css';
+import './style.scss';
 
 export default class Confirm extends Dialog {}
 Dialog.$inject = ['$element'];
@@ -10,7 +10,7 @@ ngModule.component('vnConfirm', {
     bindings: {
         onResponse: '&',
         question: '@',
-        message: '@'
+        message: '@?'
     },
     controller: Confirm
 });

client/core/src/components/textfield/textfield.html

@@ -11,8 +11,7 @@
         ng-disabled="$ctrl.disabled"
         ng-readonly="$ctrl.readonly"
         ng-focus="$ctrl.hasFocus = true"
-        ng-blur="$ctrl.hasFocus = false"
+        ng-blur="$ctrl.hasFocus = false"/>    
-        />    
     <div class="mdl-chip__action">
         <i class="material-icons"
             ng-if="$ctrl.hasInfo"
@@ -26,5 +25,5 @@
             clear
         </i>
     </div>
-    <label class="mdl-textfield__label" translate>{{$ctrl.label}}</label>
+    <label class="mdl-textfield__label" translate>{{::$ctrl.label}}</label>
 </div>

client/core/src/components/textfield/textfield.js

@@ -3,20 +3,12 @@ import Input from '../../lib/input';
 import './style.scss';
 
 export default class Textfield extends Input {
-    constructor($element, $scope, $attrs, $timeout, vnTemplate) {
+    constructor($element, $scope, $attrs, vnTemplate) {
-        super($element);
+        super($element, $scope);
-
         vnTemplate.normalizeInputAttrs($attrs);
-
-        this.$scope = $scope;
-        this.$attrs = $attrs;
-        this.$element = $element;
-        this.$timeout = $timeout;
-
         this._value = null;
         this.type = $attrs.type || 'text';
         this.showActions = false;
-        this.input = $element[0].querySelector('input');
         this.hasInfo = Boolean($attrs.info);
         this.info = $attrs.info || null;
         this.hasFocus = false;
@@ -35,17 +27,16 @@ export default class Textfield extends Input {
     set tabIndex(value) {
         this.input.tabIndex = value;
     }
-    mdlUpdate() {
-        let mdlField = this.$element[0].firstChild.MaterialTextfield;
-        if (mdlField)
-            mdlField.updateClasses_();
-    }
     clear() {
         this.value = null;
         this.input.focus();
     }
+    mdlUpdate() {
+        let mdlElement = this.element.firstChild.MaterialTextfield;
+        if (mdlElement) mdlElement.updateClasses_();
+    }
 }
-Textfield.$inject = ['$element', '$scope', '$attrs', '$timeout', 'vnTemplate'];
+Textfield.$inject = ['$element', '$scope', '$attrs', 'vnTemplate'];
 
 ngModule.component('vnTextfield', {
     template: require('./textfield.html'),

client/core/src/directives/validation.js

@@ -6,7 +6,7 @@ directive.$inject = ['$interpolate', '$compile', '$window'];
 export function directive(interpolate, compile, $window) {
     return {
         restrict: 'A',
-        require: ['ngModel', '?^^form'],
+        require: ['ngModel', '^^?form'],
         link: link
     };
 
@@ -32,14 +32,14 @@ export function directive(interpolate, compile, $window) {
         if (!validations || validations.length == 0)
             return;
 
-        let input = ctrl[0];
+        let ngModel = ctrl[0];
         let form = ctrl[1];
         let errorSpan = angular.element('<span class="mdl-textfield__error"></span>');
         let errorMsg;
         let errorShown = false;
 
-        input.$options.$$options.allowInvalid = true;
+        ngModel.$options.$$options.allowInvalid = true;
-        input.$validators.entity = value => {
+        ngModel.$validators.entity = value => {
             try {
                 validateAll(value, validations);
                 return true;
@@ -51,7 +51,7 @@ export function directive(interpolate, compile, $window) {
         };
 
         scope.$watch(() => {
-            return (form.$submitted || input.$dirty) && input.$invalid;
+            return (form.$submitted || ngModel.$dirty) && ngModel.$invalid;
         }, value => {
             let parent = element.parent();
 

client/core/src/lib/component.js

@@ -18,10 +18,12 @@ export default class Component {
      * Contructor.
      *
      * @param {HTMLElement} $element The main component element
+     * @param {$rootScope.Scope} $scope The element scope
      */
-    constructor($element) {
+    constructor($element, $scope) {
+        this.$ = $scope;
+        this.$element = $element;
         this.element = $element[0];
-        this.element.$ctrl = this;
     }
 }
-Component.$inject = ['$element'];
+Component.$inject = ['$element', '$scope'];

client/core/src/lib/input.js

@@ -4,10 +4,26 @@ import Component from './component';
  * Component that host an input.
  */
 export default class Input extends Component {
+    constructor($element, $scope) {
+        super($element, $scope);
+        this.input = this.element.querySelector('input');
+    }
+    set disabled(value) {
+        this.input.disabled = value == true;
+        this.mdlUpdate();
+    }
+    get disabled() {
+        return this.input.disabled;
+    }
     select() {
         this.input.select();
     }
     focus() {
         this.input.focus();
     }
+    mdlUpdate() {
+        if (this.mdlElement)
+            this.mdlElement.updateClasses_();
+    }
 }
+Input.$inject = ['$element', '$scope'];

client/core/src/lib/key-codes.js

@@ -1,5 +1,5 @@
 
-function validKey(key) {
+export default function validKey(key) {
     let keycode = key.keyCode || key;
 
     let valid =
@@ -11,5 +11,3 @@ function validKey(key) {
 
     return valid;
 }
-
-export default validKey;

client/core/src/lib/modified.js

@@ -21,6 +21,3 @@ export default function getModifiedData(object, objectOld) {
 
     return newObject;
 }
-
-export const NAME = 'getDataModified';
-ngModule.value(NAME, getModifiedData);

client/core/src/lib/module-loader.js

@@ -32,7 +32,6 @@ export function factory($http, $window, $ocLazyLoad, $translatePartialLoader, $t
                 .then(() => {
                     let promises = [];
 
-                    // FIXME: https://github.com/angular-translate/angular-translate/pull/1674
                     $translatePartialLoader.addPart(moduleName);
                     promises.push(new Promise(resolve => {
                         $translate.refresh().then(

client/core/src/styles/mdl-override.css

@@ -2,6 +2,10 @@
  * Rewrited CSS rules from Material Design Lite.
  * FIXME: don't use !important
  */
+body {
+    line-height: initial;
+    font-size: 12pt;
+}
 
 .mdl-textfield {
     width: 100%;
@@ -35,7 +39,7 @@
 .mdl-dialog{
     width: 400px;
     font-family: vn-font;
-    line-height:60px;
+    line-height: 60px;
     text-align: center;
 }
 

client/salix/src/components/app/app.html

@@ -1,7 +1,7 @@
 <vn-vertical full-height class="bg-content">
     <vn-topbar vn-auto>
         <a ui-sref="home" title="{{'Home' | translate}}">
-            <img class="logo" src="./logo.svg" alt="Logo" ></img>
+            <img class="logo" src="./logo.svg" alt="Logo"></img>
         </a>
         <vn-spinner enable="$root.loading"></vn-spinner>
         <vn-main-menu></vn-main-menu>

client/salix/src/components/app/style.scss

@@ -9,12 +9,12 @@ vn-app {
     vn-topbar {
         .logo {
             float: left;
-            height: 30px;
+            height: 1.8em;
             padding: 1em;
         }
         vn-spinner {
             float: left;
-            padding: .9em;
+            padding: .4em;
         }
     }
     .main-view {

client/salix/src/components/home/home.html

@@ -3,11 +3,11 @@
         <h6 vn-one translate="Modules access"></h6>
     </vn-horizontal>
     <vn-module-container>
-        <a ng-repeat="mod in $ctrl.modules" ui-sref="{{::mod.route.state}}" class="vn-module mdl-shadow--4dp">
+        <a ng-repeat="mod in ::$ctrl.modules" ui-sref="{{::mod.route.state}}" class="vn-module mdl-shadow--4dp">
             <vn-vertical class="home__icon">
                 <vn-one>
-                    <vn-icon ng-if="mod.icon && !mod.icon.startsWith('/')" icon="{{::mod.icon}}"></vn-icon>
+                    <vn-icon ng-if="::mod.icon && !mod.icon.startsWith('/')" icon="{{::mod.icon}}"></vn-icon>
-                    <img ng-if="mod.icon && mod.icon.startsWith('/')" ng-src="{{::mod.icon}}" />
+                    <img ng-if="::mod.icon && mod.icon.startsWith('/')" ng-src="{{::mod.icon}}" />
                 </vn-one>
                 <vn-one>
                     <h4 translate="{{::mod.name}}"></h4>

client/salix/src/components/left-menu/actions.html

@@ -1,5 +1,5 @@
 <vn-horizontal>
     <ul style="list-style-type: none; margin: 0; padding: 0; width: 100%; color: #666;">
-        <vn-menu-item ng-repeat="item in $ctrl.items" item = "item"></vn-menu-item>
+        <vn-menu-item ng-repeat="item in $ctrl.items" item="::item"></vn-menu-item>
     </ul>
 </vn-horizontal>

client/salix/src/components/left-menu/menu-item.html

@@ -1,7 +1,7 @@
 <li ng-class="{active: $ctrl.item.active}">
-    <a ui-sref="{{$ctrl.item.href}}" style="display: block; text-decoration: none; color: inherit; padding: .5em 2em;">
+    <a ui-sref="{{::$ctrl.item.href}}" style="display: block; text-decoration: none; color: inherit; padding: .5em 2em;">
         <i class="material-icons" style="float: right; margin-left: .4em;">keyboard_arrow_right</i>
-        <i class="material-icons" style="vertical-align: middle; margin-right: .4em;">{{$ctrl.item.icon}}</i>
+        <i class="material-icons" style="vertical-align: middle; margin-right: .4em;">{{::$ctrl.item.icon}}</i>
-        <span translate>{{$ctrl.item.description}}</span>
+        <span translate>{{::$ctrl.item.description}}</span>
     </a>
 </li>

client/salix/src/components/main-menu/main-menu.html

@@ -1,6 +1,21 @@
 <div style="position: fixed; top: 0; right: 0; padding: .8em 1.5em; z-index: 10;">
     <vn-icon icon="apps" id="apps" translate-attr="{title: 'Applications'}"></vn-icon>
-    <vn-icon icon="language" translate-attr="{title: 'Change language'}" ng-click="$ctrl.onChangeLanguage()"></vn-icon>
+    <ul for="langs" class="mdl-menu mdl-js-menu mdl-menu--bottom-right" pad-small>
+        <li
+            ng-repeat="lang in ::$ctrl.langs"
+            class="mdl-menu__item"
+            ng-click="$ctrl.onChangeLangClick(lang)">
+            <span>{{::lang}}</span>
+        </li>
+    </ul>
+    <vn-icon icon="language" id="langs" translate-attr="{title: 'Change language'}"></vn-icon>
+    <ul for="apps" class="mdl-menu mdl-js-menu mdl-menu--bottom-right" pad-small>
+        <li ng-repeat="mod in ::$ctrl.modules" class="mdl-menu__item" ui-sref="{{::mod.route.state}}">
+            <vn-icon ng-if="::mod.icon && !mod.icon.startsWith('/')" icon="{{::mod.icon}}"></vn-icon>
+            <img ng-if="::mod.icon && mod.icon.startsWith('/')" ng-src="{{::mod.icon}}" />
+            <span translate="{{::mod.name}}"></span>
+        </li>
+    </ul>
     <vn-icon icon="exit_to_app" translate-attr="{title: 'Logout'}" ng-click="$ctrl.onLogoutClick()"></vn-icon>
 <!--
     TODO: Keep it commented until they are functional
@@ -8,11 +23,4 @@
     <vn-icon icon="notifications" translate-attr="{title: 'Notifications'}"></vn-icon>
     <vn-icon icon="account_circle" translate-attr="{title: 'Profile'}"></vn-icon>
 -->
-    <ul class="mdl-menu mdl-js-menu mdl-menu--bottom-right" pad-small for="apps">
-        <li class="mdl-menu__item" ng-repeat="mod in $ctrl.modules track by $index" ui-sref="{{::mod.route.state}}">
-            <vn-icon ng-if="mod.icon && !mod.icon.startsWith('/')" icon="{{::mod.icon}}"></vn-icon>
-            <img ng-if="mod.icon && mod.icon.startsWith('/')" ng-src="{{::mod.icon}}" />
-            <span translate="{{::mod.name}}"></span>
-        </li>
-    </ul>
 </div>

client/salix/src/components/main-menu/main-menu.js

@@ -6,14 +6,13 @@ export default class MainMenu {
         this.$translate = $translate;
         this.$window = $window;
         this.modules = modulesFactory.getModules();
+        this.langs = $translate.getAvailableLanguageKeys();
     }
     onLogoutClick() {
         this.$window.location = '/logout';
     }
-    onChangeLanguage() {
+    onChangeLangClick(lang) {
-        let lang = this.$translate.use() == 'en' ? 'es' : 'en';
         this.$translate.use(lang);
-        console.log(`Locale changed: ${lang}`);
     }
 }
 MainMenu.$inject = ['$translate', '$window', 'modulesFactory'];

client/salix/src/components/main-menu/style.scss

@@ -1,33 +1,32 @@
 vn-main-menu {
     & > div > vn-icon {
-        font-size: 2.5em;
+        font-size: 2.2em;
         cursor: pointer;
 
         &:hover {
             color: #FF9300;
         }
     }
-    
+    li.mdl-menu__item {
-    li.mdl-menu__item{
         background-color: #FF9300;
         margin-bottom: 8px;
         color: white;
-        img{
+        img {
             max-width: 18px;
             vertical-align: middle;
             margin-top: -3px;
         }
-        i{
+        i {
             float: left;
             padding-top: 13px;
             margin-right: 3px;
         }
     }
-    li.mdl-menu__item:hover{
+    li.mdl-menu__item:hover {
         background-color: #FF9300;
         opacity: 0.7 !important;
     }
-    li.mdl-menu__item:last-child{
+    li.mdl-menu__item:last-child {
          margin-bottom: 0;
     }
 }

client/salix/src/module.js

@@ -6,10 +6,13 @@ export const appName = 'salix';
 const ngModule = ng.module('salix', ['vnCore']);
 export default ngModule;
 
-config.$inject = ['$translatePartialLoaderProvider', '$httpProvider'];
+config.$inject = ['$translatePartialLoaderProvider', '$httpProvider', '$qProvider'];
-export function config($translatePartialLoaderProvider, $httpProvider) {
+export function config($translatePartialLoaderProvider, $httpProvider, $qProvider) {
     $translatePartialLoaderProvider.addPart(appName);
     $httpProvider.interceptors.push('vnInterceptor');
+
+    // TODO: Handle or remove unhandled rejections
+    // $qProvider.errorOnUnhandledRejections(false);
 }
 ngModule.config(config);
 

client/salix/src/styles/misc.scss

@@ -107,8 +107,8 @@ vn-main-block {
     margin: 0 auto;
 
     .left-block {
-        max-width: 20em; 
+        width: 16em;
-        min-width: 18em; 
+        min-width: 16em;
         padding-left: 1em; 
         padding-bottom: 1em;
     }

client/salix/src/styles/title.scss

@@ -20,6 +20,7 @@ h6 {
 
 h1, h2, h3, h4, h5, h6 {
     padding: 0;
-    margin: .4em 0;
+    margin-top: 0;
+    margin-bottom: .2em;
     font-family: vn-font-bold;
 }

gulpfile.js

@@ -87,8 +87,8 @@ gulp.task('install', () => {
 
 // Deployment
 
-gulp.task('build', ['clean'], () => {
+gulp.task('build', ['clean'], async () => {
-    return gulp.start('routes', 'locales', 'webpack', 'docker-compose', 'nginx-conf');
+    await runSequenceP(['routes', 'locales', 'webpack', 'docker-compose', 'nginx-conf']);
 });
 
 gulp.task('docker-compose', async () => {
@@ -161,7 +161,7 @@ gulp.task('nginx-stop', async () => {
     } catch (e) {}
 });
 
-gulp.task('nginx-conf', async () => {
+gulp.task('nginx-conf', ['nginx-stop'], async () => {
     const mustache = require('mustache');
 
     if (!await fs.exists(nginxTemp))