Merge branch 'dev' into 2026-itemDescriptorPopoverRelocate

.gitignore

@@ -5,6 +5,7 @@ e2e/dms/*/
 !e2e/dms/c4c
 !e2e/dms/c81
 !e2e/dms/ecc
+!e2e/dms/a87
 npm-debug.log
 .eslintcache
 datasources.*.json

back/methods/dms/downloadFile.js

@@ -1,5 +1,4 @@
 const UserError = require('vn-loopback/util/user-error');
-
 module.exports = Self => {
     Self.remoteMethodCtx('downloadFile', {
         description: 'Download a document',
@@ -34,29 +33,8 @@ module.exports = Self => {
     });
 
     Self.downloadFile = async function(ctx, id) {
-        const storageConnector = Self.app.dataSources.storage.connector;
+        if (!await Self.checkRole(ctx, id))
-        const models = Self.app.models;
-        const dms = await Self.findById(id);
-
-        const hasReadRole = await models.DmsType.hasReadRole(ctx, dms.dmsTypeFk);
-        if (!hasReadRole)
             throw new UserError(`You don't have enough privileges`);
-
+        return await Self.getFile(id);
-        const pathHash = storageConnector.getPathHash(dms.id);
-        try {
-            await models.Container.getFile(pathHash, dms.file);
-        } catch (e) {
-            if (e.code != 'ENOENT')
-                throw e;
-
-            const error = new UserError(`File doesn't exists`);
-            error.statusCode = 404;
-
-            throw error;
-        }
-
-        const stream = models.Container.downloadStream(pathHash, dms.file);
-
-        return [stream, dms.contentType, `filename="${dms.file}"`];
     };
 };

back/methods/dms/specs/downloadFile.spec.js

@@ -11,7 +11,7 @@ describe('dms downloadFile()', () => {
         expect(result[1]).toEqual('text/plain');
     });
 
-    it(`should return an error for a user without enough privileges`, async() => {
+    it('should return an error for a user without enough privileges', async() => {
         let clientId = 101;
         let ctx = {req: {accessToken: {userId: clientId}}};
 

back/models/dms.js

@@ -1,6 +1,37 @@
+const UserError = require('vn-loopback/util/user-error');
+
 module.exports = Self => {
     require('../methods/dms/downloadFile')(Self);
     require('../methods/dms/uploadFile')(Self);
     require('../methods/dms/removeFile')(Self);
     require('../methods/dms/updateFile')(Self);
+
+    Self.checkRole = async function(ctx, id) {
+        const models = Self.app.models;
+        const dms = await Self.findById(id);
+
+        return await models.DmsType.hasReadRole(ctx, dms.dmsTypeFk);
+    };
+
+    Self.getFile = async function(id) {
+        const storageConnector = Self.app.dataSources.storage.connector;
+        const models = Self.app.models;
+        const dms = await Self.findById(id);
+        const pathHash = storageConnector.getPathHash(dms.id);
+        try {
+            await models.Container.getFile(pathHash, dms.file);
+        } catch (e) {
+            if (e.code != 'ENOENT')
+                throw e;
+
+            const error = new UserError(`File doesn't exists`);
+            error.statusCode = 404;
+
+            throw error;
+        }
+
+        const stream = models.Container.downloadStream(pathHash, dms.file);
+
+        return [stream, dms.contentType, `filename="${dms.file}"`];
+    };
 };

back/models/specs/dms.spec.js

@@ -0,0 +1,53 @@
+const app = require('vn-loopback/server/server');
+describe('Dms', () => {
+    const Dms = app.models.Dms;
+
+    describe('getFile()', () => {
+        it('should return a response with text content-type', async() => {
+            const result = await Dms.getFile(1);
+
+            expect(result[1]).toEqual('text/plain');
+        });
+
+        it('should return an error for a file does not exists', async() => {
+            let error = {};
+            try {
+                await Dms.getFile(6);
+            } catch (e) {
+                error = e;
+            }
+
+            expect(error.statusCode).toBe(404);
+        });
+
+        it('should return an error for a record does not exists', async() => {
+            let error = {};
+            try {
+                await app.models.Dms.getFile('NotExistentId');
+            } catch (e) {
+                error = e;
+            }
+
+            expect(error.statusCode).not.toBe(404);
+            expect(error).toEqual(jasmine.any(Error));
+        });
+    });
+
+    describe('checkRole()', () => {
+        const dmsId = 1;
+        it('should return a true for an employee with permission', async() => {
+            let ctx = {req: {accessToken: {userId: 107}}};
+            const result = await Dms.checkRole(ctx, dmsId);
+
+            expect(result).toBeTruthy();
+        });
+
+        it('should return false for an employee without permission', async() => {
+            let ctx = {req: {accessToken: {userId: 101}}};
+            const result = await Dms.checkRole(ctx, dmsId);
+
+            expect(result).toBeFalsy();
+        });
+    });
+});
+

db/changes/10161-postValentineDay/00-borrame.sql

@@ -0,0 +1,4 @@
+ALTER TABLE `vn`.`workerDocument` 
+ADD COLUMN `isReadableByWorker` TINYINT(1) NOT NULL DEFAULT 0 AFTER `document`;
+
+UPDATE `vn`.`workerDocument` SET `isReadableByWorker` = '1' WHERE (`id` = '1');

db/changes/10170-NOFallas/00-aclWorkerDms.sql

@@ -0,0 +1,5 @@
+INSERT INTO `salix`.`ACL` (`model`, `property`, `accessType`, `permission`, `principalType`, `principalId`) 
+VALUES 
+('WorkerDms', 'filter', 'READ', 'ALLOW', 'ROLE', 'employee'),
+('WorkerDms', 'downloadFile', 'READ', 'ALLOW', 'ROLE', 'employee');
+DELETE FROM `salix`.`ACL` WHERE (`id` = '205');

db/changes/10170-NOFallas/00-zone_getEvents.sql

@@ -0,0 +1,119 @@
+USE `vn`;
+DROP procedure IF EXISTS `zone_getEvents`;
+
+DELIMITER $$
+USE `vn`$$
+CREATE DEFINER=`root`@`%` PROCEDURE `zone_getEvents`(
+	vGeoFk INT,
+    vAgencyModeFk INT)
+BEGIN
+/**
+ * Returns available events for the passed province/postcode and agency.
+ *
+ * @param vGeoFk The geo id
+ * @param vAgencyModeFk The agency mode id
+ */
+	DECLARE vDeliveryMethodFk VARCHAR(255);
+    
+	DROP TEMPORARY TABLE IF EXISTS tZone;
+	CREATE TEMPORARY TABLE tZone
+		(id INT PRIMARY KEY)
+		ENGINE = MEMORY;
+        
+	SELECT dm.`code` INTO vDeliveryMethodFk
+		FROM agencyMode am
+			JOIN deliveryMethod dm ON dm.id = am.deliveryMethodFk
+        WHERE am.id = vAgencyModeFk;
+        
+	IF vDeliveryMethodFk = 'PICKUP' THEN
+		INSERT INTO tZone
+			SELECT id
+				FROM zone
+                WHERE agencyModeFk = vAgencyModeFk;
+	ELSE
+		CALL zone_getFromGeo(vGeoFk);
+
+		IF vAgencyModeFk IS NOT NULL THEN
+			INSERT INTO tZone
+				SELECT t.id
+					FROM tmp.zone t
+						JOIN zone z ON z.id = t.id
+					WHERE z.agencyModeFk = vAgencyModeFk;
+		ELSE
+			INSERT INTO tZone
+				SELECT t.id 
+					FROM tmp.zone t
+						JOIN zone z ON z.id = t.id
+						JOIN agencyMode am  ON am.id = z.agencyModeFk 
+						JOIN deliveryMethod dm ON dm.id = am.deliveryMethodFk
+				WHERE dm.`code` IN ('AGENCY', 'DELIVERY');
+		END IF;
+		DROP TEMPORARY TABLE tmp.zone;
+	END IF;
+    
+	SELECT e.zoneFk, e.`type`, e.dated, e.`started`, e.`ended`, e.weekDays
+		FROM tZone t
+			JOIN zoneEvent e ON e.zoneFk = t.id;
+
+	SELECT e.zoneFk, e.dated
+		FROM tZone t
+			JOIN zoneExclusion e ON e.zoneFk = t.id;
+            
+	DROP TEMPORARY TABLE tZone;
+END$$
+
+DELIMITER ;
+
+USE `vn`;
+DROP procedure IF EXISTS `zone_getEvents__`;
+
+DELIMITER $$
+USE `vn`$$
+CREATE DEFINER=`root`@`%` PROCEDURE `zone_getEvents__`(
+	vProvinceFk INT,
+    vPostCode VARCHAR(255),
+    vAgencyModeFk INT)
+BEGIN
+/**
+ * Returns available events for the passed province/postcode and agency.
+ *
+ * @param vAgencyModeFk The agency mode id
+ * @param vProvinceFk The province id
+ * @param vPostCode The postcode or %NULL to use the province
+ */
+ 
+	DECLARE vGeoFk INT;
+	
+	IF vPostCode IS NOT NULL THEN
+		SELECT p.geoFk INTO vGeoFk
+			FROM postCode p
+				JOIN town t ON t.id = p.townFk
+			WHERE p.`code` = vPostCode
+				AND t.provinceFk = vProvinceFk;
+	ELSE
+		SELECT geoFk INTO vGeoFk
+			FROM province
+			WHERE id = vProvinceFk;
+	END IF;
+
+	CALL zone_getFromGeo(vGeoFk);
+
+	IF vAgencyModeFk IS NOT NULL THEN
+		DELETE t FROM tmp.zone t
+			JOIN zone z ON z.id = t.id
+			WHERE z.agencyModeFk != vAgencyModeFk;
+	END IF;
+
+	SELECT e.zoneFk, e.`type`, e.dated, e.`started`, e.`ended`, e.weekDays
+		FROM tmp.zone t
+			JOIN zoneEvent e ON e.zoneFk = t.id;
+
+	SELECT e.zoneFk, e.dated
+		FROM tmp.zone t
+			JOIN zoneExclusion e ON e.zoneFk = t.id;
+
+	DROP TEMPORARY TABLE tmp.zone;
+END$$
+
+DELIMITER ;
+

db/dump/fixtures.sql

@@ -101,6 +101,16 @@ INSERT INTO `vn`.`sector`(`id`, `description`, `warehouseFk`, `isPreviousPrepare
         (1, 'First sector',     1, 1, 'FIRST',  999, 999),
         (2, 'Second sector',    2, 0, 'SECOND', 100, 150);
 
+INSERT INTO `vn`.`parking` (`id`, `column`, `row`, `sectorFk`, `code`, `pickingOrder`) 
+    VALUES 
+        ('1', '700', '01', '1', '700-01', '70001'),
+        ('2', '700', '02', '2', '700-02', '70002');
+
+INSERT INTO `vn`.`shelving` (`code`, `parkingFk`, `isPrinted`, `priority`, `parked`, `userFk`) 
+    VALUES 
+        ('GVC', '1', '0', '1', '0', '106'),
+        ('HEJ', '2', '0', '1', '0', '106');
+
 INSERT INTO `vn`.`warehouseAlias`(`id`, `name`)
     VALUES
         (1, 'Main Warehouse');
@@ -156,7 +166,7 @@ UPDATE `vn`.`agencyMode` SET `id` = 8 WHERE `name` = 'Silla247Expensive';
 UPDATE `vn`.`agencyMode` SET `id` = 23 WHERE `name` = 'Refund';
 UPDATE `vn`.`agencyMode` SET `id` = 10 WHERE `name` = 'Other agency';
 
-UPDATE `vn`.`agencyMode` SET `deliveryMethodFk` = 1 WHERE `id` = 1;
+UPDATE `vn`.`agencyMode` SET `deliveryMethodFk` = 3 WHERE `id` = 1;
 UPDATE `vn`.`agencyMode` SET `deliveryMethodFk` = 1 WHERE `id` = 2;
 UPDATE `vn`.`agencyMode` SET `deliveryMethodFk` = 2 WHERE `id` = 3;
 UPDATE `vn`.`agencyMode` SET `deliveryMethodFk` = 1 WHERE `id` = 4;
@@ -554,6 +564,10 @@ INSERT INTO `vn`.`ticketObservation`(`id`, `ticketFk`, `observationTypeFk`, `des
         (10, 23, 4, 'Reclama ticket: 8'),
         (11, 24, 4, 'Reclama ticket: 7');
 
+-- FIX for state hours on local, inter_afterInsert 
+UPDATE vncontrol.inter SET odbc_date = DATE_ADD(CURDATE(), INTERVAL -10 SECOND);
+
+
 INSERT INTO `vn`.`ticketTracking`(`ticketFk`, `stateFk`, `workerFk`, `created`)
     VALUES
         (1,  16, 5 , DATE_ADD(NOW(), INTERVAL -1 MONTH)),
@@ -928,6 +942,18 @@ INSERT INTO `vn`.`saleComponent`(`saleFk`, `componentFk`, `value`)
         (32,    36, -92.324),
         (32,    39, 0.994);
 
+INSERT INTO `vn`.`itemShelving` (`id`, `itemFk`, `shelvingFk`, `shelve`, `deep`, `quantity`, `visible`, `available`, `grouping`, `packing`, `level`, `userFk`) 
+    VALUES 
+        ('1', '2', 'GVC', 'A', '0', '1', '1', '1', '1', '1', '1', '106'),
+        ('2', '4', 'HEJ', 'A', '0', '2', '1', '1', '1', '1', '1', '106');
+
+INSERT INTO `vn`.`itemShelvingSale` (`itemShelvingFk`, `saleFk`, `quantity`, `created`, `userFk`) 
+    VALUES 
+        ('1', '1', '1', '', '106'),
+        ('2', '2', '5', '', '106'),
+        ('1', '7', '1', '', '106'),
+        ('2', '8', '5', '', '106');
+
 INSERT INTO `vncontrol`.`accion`(`accion_id`, `accion`)
     VALUES
         (3,	'ACTION ONE'),
@@ -1931,7 +1957,9 @@ INSERT INTO `vn`.`dms`(`id`, `dmsTypeFk`, `file`, `contentType`, `workerFk`, `wa
         (2, 5,  '2.txt', 'text/plain', 5, 1, 442, 1,    TRUE, 'Client:104',      'Client:104 dms for the client',    CURDATE()),
         (3, 5,  '3.txt', 'text/plain', 5, 1, 442, NULL, TRUE, 'Client: 104',     'Client:104 readme',                CURDATE()),
         (4, 3,  '4.txt', 'text/plain', 5, 1, 442, NULL, TRUE, 'Worker: 106',     'Worker:106 readme',                CURDATE()),
-        (5, 5,  '5.txt',    'text/plain',   5, 1, 442, NULL,    TRUE, 'travel: 1',       'dmsForThermograph',                CURDATE());
+        (5, 5,  '5.txt', 'text/plain', 5, 1, 442, NULL, TRUE, 'travel: 1',       'dmsForThermograph',                CURDATE()),
+        (6, 5,  '6.txt', 'text/plain', 5, 1, 442, NULL, TRUE, 'NotExists',       'DoesNotExists',                    CURDATE());
+
 
 INSERT INTO `vn`.`ticketDms`(`ticketFk`, `dmsFk`)
     VALUES
@@ -1942,9 +1970,10 @@ INSERT INTO `vn`.`clientDms`(`clientFk`, `dmsFk`)
         (104, 2),
         (104, 3);
 
-INSERT INTO `vn`.`workerDocument`(`id`, `worker`, `document`)
+INSERT INTO `vn`.`workerDocument`(`id`, `worker`, `document`,`isReadableByWorker`)
     VALUES
-        (1, 106, 4);
+        (1, 106, 4, TRUE),
+        (2, 107, 3, FALSE);
 
 INSERT INTO `vn`.`device` (`sn`, `model`, `userFk`) 
     VALUES 

e2e/dms/a87/4.txt

@@ -0,0 +1 @@
+File: 4.txt. It works!

e2e/helpers/extensions.js

@@ -135,6 +135,7 @@ let actions = {
             const $state = angular.element(document.body).injector().get('$state');
             return !$state.transition;
         });
+        await this.waitForSpinnerLoad();
     },
 
     accessToSection: async function(state) {
@@ -144,7 +145,11 @@ let actions = {
         }, state);
 
         if (nested) {
-            await this.waitToClick('vn-left-menu vn-item-section > vn-icon[icon=keyboard_arrow_down]');
+            let selector = 'vn-left-menu vn-item-section > vn-icon[icon=keyboard_arrow_down]';
+            await this.evaluate(selector => {
+                document.querySelector(selector).scrollIntoViewIfNeeded();
+            }, selector);
+            await this.waitToClick(selector);
             await this.wait('vn-left-menu .expanded');
         }
 
@@ -169,11 +174,17 @@ let actions = {
         await this.waitToClick(`vn-left-menu li > a[ui-sref="${sectionRoute}"]`);
     },
 
-    accessToSearchResult: async function(searchValue) {
+    doSearch: async function(searchValue) {
         await this.clearInput('vn-searchbar');
+        if (searchValue)
             await this.write('vn-searchbar', searchValue);
+
         await this.waitToClick('vn-searchbar vn-icon[icon="search"]');
         await this.waitForTransition();
+    },
+
+    accessToSearchResult: async function(searchValue) {
+        await this.doSearch(searchValue);
         await this.waitFor('.vn-descriptor');
     },
 
@@ -236,6 +247,11 @@ let actions = {
         await this.waitForTextInField(selector, text);
     },
 
+    overwrite: async function(selector, text) {
+        await this.clearInput(selector);
+        await this.write(selector, text);
+    },
+
     waitToClick: async function(selector) {
         await this.waitForSelector(selector);
         await this.waitForFunction(checkVisibility, {}, selector);
@@ -343,7 +359,7 @@ let actions = {
 
     hideSnackbar: async function() {
         // Holds up for the snackbar to be visible for a small period of time.
-        if (process.env.DEBUG)
+        if (process.env.E2E_DEBUG)
             await this.waitFor(300);
 
         await this.evaluate(() => {
@@ -571,7 +587,7 @@ let actions = {
     },
 
     waitForContentLoaded: async function() {
-        // await this.waitFor(250);
+        await this.waitForSpinnerLoad();
     }
 };
 

e2e/helpers/puppeteer.js

@@ -9,10 +9,14 @@ export async function getBrowser() {
         `--window-size=${ 1920 },${ 1080 }`
     ];
 
-    if (process.env.DEBUG)
+    let env = process.env;
-        args.push('--auto-open-devtools-for-tabs');
 
-    const headless = !(process.env.E2E_SHOW || process.env.DEBUG);
+    if (env.E2E_DEBUG) {
+        args.push('--auto-open-devtools-for-tabs');
+        env.E2E_SHOW = true;
+    }
+
+    const headless = !env.E2E_SHOW;
     const browser = await Puppeteer.launch({
         args,
         defaultViewport: null,

e2e/helpers/selectors.js

@@ -179,12 +179,11 @@ export default {
 
     },
     clientBalance: {
-        balanceButton: 'vn-left-menu a[ui-sref="client.card.balance.index"]',
         company: 'vn-client-balance-index vn-autocomplete[ng-model="$ctrl.companyId"]',
         newPaymentButton: `vn-float-button`,
         newPaymentBank: '.vn-dialog.shown vn-autocomplete[ng-model="$ctrl.receipt.bankFk"]',
         newPaymentAmount: '.vn-dialog.shown vn-input-number[ng-model="$ctrl.receipt.amountPaid"]',
-        saveButton: '.vn-dialog.shown vn-button[label="Save"]',
+        saveButton: '.vn-dialog.shown [response="accept"]',
         firstBalanceLine: 'vn-client-balance-index vn-tbody > vn-tr:nth-child(1) > vn-td:nth-child(8)'
 
     },
@@ -360,7 +359,7 @@ export default {
         popoverDiaryButton: '.vn-popover.shown vn-item-descriptor vn-icon[icon="icon-transaction"]',
         firstSaleQuantity: 'vn-ticket-summary [name="sales"] vn-table > div > vn-tbody > vn-tr > vn-td:nth-child(3)',
         firstSaleDiscount: 'vn-ticket-summary [name="sales"] vn-table > div > vn-tbody > vn-tr > vn-td:nth-child(6)',
-        invoiceOutRef: 'vn-ticket-summary > vn-card > vn-horizontal > vn-one:nth-child(1) > vn-label-value:nth-child(6) > section > span',
+        invoiceOutRef: 'vn-ticket-summary > vn-card > vn-horizontal > vn-one:nth-child(1) > vn-label-value:nth-child(7) > section > span',
         setOk: 'vn-ticket-summary vn-button[label="SET OK"] > button'
     },
     ticketsIndex: {
@@ -368,6 +367,13 @@ export default {
         advancedSearchInvoiceOut: 'vn-ticket-search-panel vn-textfield[ng-model="filter.refFk"]',
         newTicketButton: 'vn-ticket-index a',
         searchResult: 'vn-ticket-index vn-card > vn-table > div > vn-tbody > a.vn-tr',
+        secondTicketCheckbox: 'vn-ticket-index vn-tbody > a:nth-child(2) > vn-td:nth-child(1) > vn-check',
+        thirdTicketCheckbox: 'vn-ticket-index vn-tbody > a:nth-child(3) > vn-td:nth-child(1) > vn-check',
+        sixthTicketCheckbox: 'vn-ticket-index vn-tbody > a:nth-child(6) > vn-td:nth-child(1) > vn-check',
+        payoutButton: 'vn-ticket-index vn-button[icon="icon-recovery"]',
+        payoutCompany: '.vn-dialog vn-autocomplete[ng-model="$ctrl.receipt.companyFk"]',
+        payoutBank: '.vn-dialog vn-autocomplete[ng-model="$ctrl.receipt.bankFk"]',
+        submitPayout: '.vn-dialog button[response="accept"]',
         searchWeeklyResult: 'vn-ticket-weekly-index vn-table vn-tbody > vn-tr',
         searchResultDate: 'vn-ticket-summary [label=Landed] span',
         topbarSearch: 'vn-searchbar',
@@ -539,8 +545,8 @@ export default {
         firstPrice: 'vn-ticket-service vn-horizontal:nth-child(1) vn-input-number[ng-model="service.price"]',
         firstVatType: 'vn-ticket-service vn-autocomplete[label="Tax class"]',
         fistDeleteServiceButton: 'vn-ticket-service form vn-horizontal:nth-child(1) vn-icon-button[icon="delete"]',
-        newServiceTypeName: '.vn-dialog.shown vn-textfield[ng-model="$ctrl.newServiceType.name"]',
+        newServiceTypeName: '.vn-dialog.shown vn-textfield[ng-model="newServiceType.name"]',
-        newServiceTypeExpense: '.vn-dialog.shown vn-autocomplete[ng-model="$ctrl.newServiceType.expenseFk"]',
+        newServiceTypeExpense: '.vn-dialog.shown vn-autocomplete[ng-model="newServiceType.expenseFk"]',
         serviceLine: 'vn-ticket-service > form > vn-card > vn-one:nth-child(2) > vn-horizontal',
         saveServiceButton: 'button[type=submit]',
         saveServiceTypeButton: '.vn-dialog.shown tpl-buttons > button'

e2e/paths/02-client/01_create_client.spec.js

@@ -16,9 +16,7 @@ describe('Client create path', () => {
     });
 
     it(`should search for the user Carol Danvers to confirm it isn't created yet`, async() => {
-        await page.write(selectors.clientsIndex.topbarSearch, 'Carol Danvers');
+        await page.doSearch('Carol Danvers');
-        await page.waitToClick(selectors.clientsIndex.searchButton);
-        await page.waitForNumberOfElements(selectors.clientsIndex.searchResult, 0);
         const result = await page.countElement(selectors.clientsIndex.searchResult);
 
         expect(result).toEqual(0);

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

@@ -31,7 +31,8 @@ describe('Client Edit billing data path', () => {
         expect(snackbarMessage).toEqual('That payment method requires an IBAN');
     });
 
-    it(`should create a new BIC code`, async() => {
+    // 2215: Windows (hidden mode): Entity code doesn't get the focus, '9999' is written in entity name.
+    xit(`should create a new BIC code`, async() => {
         await page.waitToClick(selectors.clientBillingData.newBankEntityButton);
         await page.write(selectors.clientBillingData.newBankEntityName, 'Gotham City Bank');
         await page.write(selectors.clientBillingData.newBankEntityCode, '9999');
@@ -43,7 +44,7 @@ describe('Client Edit billing data path', () => {
         expect(newcode).toEqual('GTHMCT Gotham City Bank');
     });
 
-    it(`should confirm the IBAN pay method was sucessfully saved`, async() => {
+    xit(`should confirm the IBAN pay method was sucessfully saved`, async() => {
         let payMethod = await page.waitToGetProperty(selectors.clientBillingData.payMethod, 'value');
 
         expect(payMethod).toEqual('PayMethod with IBAN');
@@ -60,7 +61,6 @@ describe('Client Edit billing data path', () => {
     });
 
     it(`should save the form with all its new data`, async() => {
-        await page.waitFor(3000);
         await page.waitForWatcherData(selectors.clientBillingData.watcher);
         await page.waitToClick(selectors.clientBillingData.saveButton);
         let snackbarMessage = await page.waitForLastSnackbar();

e2e/paths/02-client/07_edit_web_access.spec.js

@@ -27,10 +27,8 @@ describe('Client Edit web access path', () => {
     });
 
     it('should confirm web access is now unchecked', async() => {
-        await page.waitToClick(selectors.clientBasicData.basicDataButton);
+        await page.accessToSection('client.card.basicData');
-        await page.wait(selectors.clientBasicData.name);
+        await page.accessToSection('client.card.webAccess');
-        await page.waitToClick(selectors.clientsIndex.othersButton);
-        await page.waitToClick(selectors.clientWebAccess.webAccessButton);
         const result = await page.checkboxState(selectors.clientWebAccess.enableWebAccessCheckbox);
 
         expect(result).toBe('unchecked');

e2e/paths/02-client/13_log.spec.js

@@ -26,8 +26,7 @@ describe('Client log path', () => {
     });
 
     it('should navigate to the log section', async() => {
-        await page.waitToClick(selectors.clientLog.logButton);
+        await page.accessToSection('client.card.log');
-        await page.waitForState('client.card.log');
     });
 
     it('should check the previous value of the last logged change', async() => {

e2e/paths/02-client/14_balance.spec.js

@@ -67,9 +67,7 @@ describe('Client balance path', () => {
 
     it('should create a new payment that sets the balance to positive value', async() => {
         await page.waitToClick(selectors.clientBalance.newPaymentButton);
-        await page.waitFor(3000); // didn't manage to make this dynamic to allow clearInput to find the icon clear... :(
+        await page.overwrite(selectors.clientBalance.newPaymentAmount, '100');
-        await page.clearInput(selectors.clientBalance.newPaymentAmount);
-        await page.write(selectors.clientBalance.newPaymentAmount, '100');
         await page.waitToClick(selectors.clientBalance.saveButton);
         let result = await page.waitForLastSnackbar();
 
@@ -85,10 +83,7 @@ describe('Client balance path', () => {
 
     it('should create a new payment that sets the balance back to the original negative value', async() => {
         await page.waitToClick(selectors.clientBalance.newPaymentButton);
-        await page.waitFor(3000); // didn't manage to make this dynamic to allow clearInput to find the icon clear... :(
+        await page.overwrite(selectors.clientBalance.newPaymentAmount, '-150');
-        await page.waitForSelector('.vn-dialog.vn-popup.shown', {visible: true});
-        await page.clearInput(selectors.clientBalance.newPaymentAmount);
-        await page.write(selectors.clientBalance.newPaymentAmount, '-150');
         await page.waitToClick(selectors.clientBalance.saveButton);
         let result = await page.waitForLastSnackbar();
 
@@ -113,8 +108,7 @@ describe('Client balance path', () => {
 
     it('should now search for the user Petter Parker', async() => {
         await page.accessToSearchResult('Petter Parker');
-        await page.waitToClick(selectors.clientBalance.balanceButton);
+        await page.accessToSection('client.card.balance.index');
-        await page.waitForState('client.card.balance.index');
     });
 
     it('should not be able to click the new payment button as it isnt present', async() => {

e2e/paths/02-client/15_user_config.spec.js

@@ -16,7 +16,6 @@ describe('User config', () => {
     describe('as salesPerson', () => {
         it('should login', async() => {
             await page.login('salesPerson');
-            await page.waitForContentLoaded();
         });
 
         it('should now open the user config form to check the settings', async() => {
@@ -26,7 +25,6 @@ describe('User config', () => {
             let expectedLocalWarehouse = await page
                 .expectPropertyValue(selectors.globalItems.userLocalWarehouse, 'value', '');
 
-
             let expectedLocalBank = await page
                 .expectPropertyValue(selectors.globalItems.userLocalBank, 'value', '');
 
@@ -50,7 +48,6 @@ describe('User config', () => {
     describe('as employee', () => {
         it('should log in', async() => {
             await page.login('employee');
-            await page.waitForContentLoaded();
         });
 
         it('should open the user config form to check the settings', async() => {
@@ -59,7 +56,6 @@ describe('User config', () => {
             let expectedLocalWarehouse = await page
                 .expectPropertyValue(selectors.globalItems.userLocalWarehouse, 'value', '');
 
-
             let expectedLocalBank = await page
                 .expectPropertyValue(selectors.globalItems.userLocalBank, 'value', '');
 
@@ -92,7 +88,6 @@ describe('User config', () => {
     describe('as salesPerson 2nd run', () => {
         it('should log in once more', async() => {
             await page.login('salesPerson');
-            await page.waitForContentLoaded();
         });
 
         it('should again open the user config form to check the local settings', async() => {

e2e/paths/04-item/01_summary.spec.js

@@ -15,14 +15,14 @@ describe('Item summary path', () => {
     });
 
     it('should search for an item', async() => {
-        await page.clearInput(selectors.itemsIndex.topbarSearch);
+        await page.doSearch('Ranged weapon');
-        await page.write(selectors.itemsIndex.topbarSearch, 'Ranged weapon');
+        const nResults = await page.countElement(selectors.itemsIndex.searchResult);
-        await page.waitToClick(selectors.itemsIndex.searchButton);
+
-        await page.waitForNumberOfElements(selectors.itemsIndex.searchResult, 3);
         await page.waitForTextInElement(selectors.itemsIndex.searchResult, 'Ranged weapon');
         await page.waitToClick(selectors.itemsIndex.firstResultPreviewButton);
         const isVisible = await page.isVisible(selectors.itemSummary.basicData);
 
+        expect(nResults).toBe(3);
         expect(isVisible).toBeTruthy();
     });
 
@@ -67,12 +67,13 @@ describe('Item summary path', () => {
     });
 
     it('should search for other item', async() => {
-        await page.clearInput('vn-searchbar');
+        await page.doSearch('Melee Reinforced');
-        await page.write(selectors.itemsIndex.topbarSearch, 'Melee Reinforced');
+        const nResults = await page.countElement(selectors.itemsIndex.searchResult);
-        await page.keyboard.press('Enter');
+
-        await page.waitForNumberOfElements(selectors.itemsIndex.searchResult, 2);
         await page.waitToClick(selectors.itemsIndex.firstResultPreviewButton);
         await page.waitForSelector(selectors.itemSummary.basicData, {visible: true});
+
+        expect(nResults).toBe(2);
     });
 
     it(`should now check the item summary preview shows fields from basic data`, async() => {

e2e/paths/04-item/08_create_and_clone.spec.js

@@ -16,13 +16,10 @@ describe('Item Create/Clone path', () => {
 
     describe('create', () => {
         it(`should search for the item Infinity Gauntlet to confirm it isn't created yet`, async() => {
-            await page.clearInput(selectors.itemsIndex.topbarSearch);
+            await page.doSearch('Infinity Gauntlet');
-            await page.write(selectors.itemsIndex.topbarSearch, 'Infinity Gauntlet');
+            const nResults = await page.countElement(selectors.itemsIndex.searchResult);
-            await page.waitToClick(selectors.itemsIndex.searchButton);
-            await page.waitForNumberOfElements(selectors.itemsIndex.searchResult, 0);
-            const result = await page.countElement(selectors.itemsIndex.searchResult);
 
-            expect(result).toEqual(0);
+            expect(nResults).toEqual(0);
         });
 
         it('should access to the create item view by clicking the create floating button', async() => {
@@ -85,13 +82,10 @@ describe('Item Create/Clone path', () => {
         });
 
         it(`should search for the item Infinity Gauntlet`, async() => {
-            await page.clearInput(selectors.itemsIndex.topbarSearch);
+            await page.doSearch('Infinity Gauntlet');
-            await page.write(selectors.itemsIndex.topbarSearch, 'Infinity Gauntlet');
+            const nResults = await page.countElement(selectors.itemsIndex.searchResult);
-            await page.waitToClick(selectors.itemsIndex.searchButton);
-            await page.waitForNumberOfElements(selectors.itemsIndex.searchResult, 1);
-            const result = await page.countElement(selectors.itemsIndex.searchResult);
 
-            expect(result).toEqual(1);
+            expect(nResults).toEqual(1);
         });
 
         it(`should clone the Infinity Gauntlet`, async() => {
@@ -102,14 +96,10 @@ describe('Item Create/Clone path', () => {
         });
 
         it('should search for the item Infinity Gauntlet and find two', async() => {
-            await page.waitToClick(selectors.itemTags.goToItemIndexButton);
+            await page.doSearch('Infinity Gauntlet');
-            await page.clearInput(selectors.itemsIndex.topbarSearch);
+            const nResults = await page.countElement(selectors.itemsIndex.searchResult);
-            await page.write(selectors.itemsIndex.topbarSearch, 'Infinity Gauntlet');
-            await page.waitToClick(selectors.itemsIndex.searchButton);
-            await page.waitForNumberOfElements(selectors.itemsIndex.searchResult, 2);
-            const result = await page.countElement(selectors.itemsIndex.searchResult);
 
-            expect(result).toEqual(2);
+            expect(nResults).toEqual(2);
         });
     });
 });

e2e/paths/04-item/09_regularize.spec.js

@@ -65,8 +65,8 @@ describe('Item regularize path', () => {
     });
 
     it('should clear the user local settings now', async() => {
-        await page.waitForContentLoaded();
         await page.waitToClick(selectors.globalItems.userMenuButton);
+        await page.waitForContentLoaded();
         await page.clearInput(selectors.globalItems.userConfigFirstAutocomplete);
         const result = await page.waitForLastSnackbar();
 

e2e/paths/04-item/11_item_log.spec.js

@@ -15,12 +15,10 @@ describe('Item log path', () => {
     });
 
     it(`should search for the Knowledge artifact to confirm it isn't created yet`, async() => {
-        await page.write(selectors.itemsIndex.topbarSearch, 'Knowledge artifact');
+        await page.doSearch('Knowledge artifact');
-        await page.waitToClick(selectors.itemsIndex.searchButton);
+        const nResults = await page.countElement(selectors.itemsIndex.searchResult);
-        await page.waitForNumberOfElements(selectors.itemsIndex.searchResult, 0);
-        const result = await page.countElement(selectors.itemsIndex.searchResult);
 
-        expect(result).toEqual(0);
+        expect(nResults).toEqual(0);
     });
 
     it('should access to the create item view by clicking the create floating button', async() => {

e2e/paths/05-ticket/02_expeditions_and_log.spec.js

@@ -30,7 +30,7 @@ describe('Ticket expeditions and log path', () => {
     });
 
     it(`should confirm the expedition deleted is shown now in the ticket log`, async() => {
-        await page.waitToClick(selectors.ticketLog.logButton);
+        await page.accessToSection('ticket.card.log');
         const changedBy = await page
             .waitToGetProperty(selectors.ticketLog.changedBy, 'innerText');
 

e2e/paths/05-ticket/09_weekly.spec.js

@@ -17,7 +17,6 @@ describe('Ticket descriptor path', () => {
     });
 
     it('should count the amount of tickets in the turns section', async() => {
-        await page.waitForNumberOfElements(selectors.ticketsIndex.weeklyTicket, 5);
         const result = await page.countElement(selectors.ticketsIndex.weeklyTicket);
 
         expect(result).toEqual(5);
@@ -87,12 +86,10 @@ describe('Ticket descriptor path', () => {
     });
 
     it('should now search for the weekly ticket 11', async() => {
-        await page.write(selectors.ticketsIndex.topbarSearch, '11');
+        await page.doSearch('11');
-        await page.waitToClick(selectors.ticketsIndex.searchButton);
+        const nResults = await page.countElement(selectors.ticketsIndex.searchWeeklyResult);
-        await page.waitForNumberOfElements(selectors.ticketsIndex.searchWeeklyResult, 1);
-        const result = await page.countElement(selectors.ticketsIndex.searchWeeklyResult);
 
-        expect(result).toEqual(1);
+        expect(nResults).toEqual(1);
     });
 
     it('should delete the weekly ticket 11', async() => {
@@ -104,12 +101,9 @@ describe('Ticket descriptor path', () => {
     });
 
     it('should confirm the sixth weekly ticket was deleted', async() => {
-        await page.waitForContentLoaded();
+        await page.doSearch();
-        await page.clearInput('vn-searchbar');
+        const nResults = await page.countElement(selectors.ticketsIndex.searchWeeklyResult);
-        await page.waitToClick(selectors.ticketsIndex.searchWeeklyButton);
-        await page.waitForNumberOfElements(selectors.ticketsIndex.searchWeeklyResult, 5);
-        const result = await page.countElement(selectors.ticketsIndex.searchWeeklyResult);
 
-        expect(result).toEqual(5);
+        expect(nResults).toEqual(5);
     });
 });

e2e/paths/05-ticket/12_descriptor.spec.js

@@ -99,8 +99,8 @@ describe('Ticket descriptor path', () => {
         });
 
         it('should delete the stowaway', async() => {
-            await page.waitForContentLoaded();
             await page.waitToClick(selectors.ticketDescriptor.moreMenu);
+            await page.waitForContentLoaded();
             await page.waitToClick(selectors.ticketDescriptor.moreMenuDeleteStowawayButton);
             await page.waitToClick(selectors.ticketDescriptor.acceptDeleteStowawayButton);
             const result = await page.waitForLastSnackbar();
@@ -130,8 +130,8 @@ describe('Ticket descriptor path', () => {
         });
 
         it('should invoice the ticket using the descriptor more menu', async() => {
-            await page.waitForContentLoaded();
             await page.waitToClick(selectors.ticketDescriptor.moreMenu);
+            await page.waitForContentLoaded();
             await page.waitToClick(selectors.ticketDescriptor.moreMenuMakeInvoice);
             await page.waitToClick(selectors.ticketDescriptor.acceptInvoiceOutButton);
             const result = await page.waitForLastSnackbar();

e2e/paths/05-ticket/13_services.spec.js

@@ -81,7 +81,6 @@ describe('Ticket services path', () => {
             await page.autocompleteSearch(selectors.ticketService.newServiceTypeExpense, 'Retencion');
             await page.waitToClick(selectors.ticketService.saveServiceTypeButton);
             await page.write(selectors.ticketService.firstPrice, '999');
-            await page.waitFor(1000); // time needed for the button to be clickable
             await page.waitToClick(selectors.ticketService.saveServiceButton);
             const result = await page.waitForLastSnackbar();
 
@@ -120,7 +119,6 @@ describe('Ticket services path', () => {
         it('should delete the service', async() => {
             await page.waitToClick(selectors.ticketService.fistDeleteServiceButton);
             await page.waitForNumberOfElements(selectors.ticketService.serviceLine, 0);
-            await page.waitFor(1000); // without this wait it fails to click the save button
             await page.waitToClick(selectors.ticketService.saveServiceButton);
             const result = await page.waitForLastSnackbar();
 
@@ -129,10 +127,9 @@ describe('Ticket services path', () => {
 
         it(`should confirm the service was removed`, async() => {
             await page.reloadSection('ticket.card.service');
-            await page.waitForNumberOfElements(selectors.ticketService.serviceLine, 0);
+            const nResults = await page.countElement(selectors.ticketService.serviceLine);
-            const result = await page.countElement(selectors.ticketService.serviceLine);
 
-            expect(result).toEqual(0);
+            expect(nResults).toEqual(0);
         });
     });
 });

e2e/paths/05-ticket/17_log.spec.js

@@ -34,7 +34,6 @@ describe('Ticket log path', () => {
 
     it('should navigate to the log section', async() => {
         await page.accessToSection('ticket.card.log');
-        await page.waitForState('ticket.card.log');
     });
 
     it('should set the viewport width to 1920 to see the table full width', async() => {

e2e/paths/05-ticket/18_index_payout.spec.js

@@ -0,0 +1,58 @@
+import selectors from '../../helpers/selectors.js';
+import getBrowser from '../../helpers/puppeteer';
+
+describe('Ticket index payout path', () => {
+    let browser;
+    let page;
+
+    beforeAll(async() => {
+        browser = await getBrowser();
+        page = browser.page;
+    });
+
+    afterAll(async() => {
+        await browser.close();
+    });
+
+    it('should navigate to the ticket index', async() => {
+        await page.loginAndModule('administrative', 'ticket');
+        await page.waitForState('ticket.index');
+    });
+
+    it('should check three tickets 2 of a clinet and 1 of another', async() => {
+        await page.keyboard.press('Enter');
+        await page.waitToClick(selectors.ticketsIndex.secondTicketCheckbox);
+        await page.waitToClick(selectors.ticketsIndex.sixthTicketCheckbox);
+        await page.waitToClick(selectors.ticketsIndex.payoutButton);
+        const result = await page.waitForLastSnackbar();
+
+        expect(result).toEqual('You cannot make a payment on account from multiple clients');
+    });
+
+    it('should uncheck the sixth ticket result and check the third which is from the same client then open the payout form', async() => {
+        await page.waitToClick(selectors.ticketsIndex.sixthTicketCheckbox);
+        await page.waitToClick(selectors.ticketsIndex.thirdTicketCheckbox);
+        await page.waitToClick(selectors.ticketsIndex.payoutButton);
+
+        await page.waitForSelector(selectors.ticketsIndex.payoutCompany);
+    });
+
+    it('should fill the company and bank to perform a payout', async() => {
+        await page.autocompleteSearch(selectors.ticketsIndex.payoutBank, 'cash');
+        await page.waitToClick(selectors.ticketsIndex.submitPayout);
+        const result = await page.waitForLastSnackbar();
+
+        expect(result).toEqual('Data saved!');
+    });
+
+    it('should navigate to the client balance section and check a new balance line was entered', async() => {
+        await page.waitToClick(selectors.globalItems.homeButton);
+        await page.selectModule('client');
+        await page.accessToSearchResult('101');
+        await page.accessToSection('client.card.balance.index');
+        await page.waitForSelector('vn-client-balance-index vn-tbody > vn-tr');
+        let result = await page.countElement('vn-client-balance-index vn-tbody > vn-tr');
+
+        expect(result).toEqual(4);
+    });
+});

e2e/paths/06-claim/04_claim_action.spec.js

@@ -25,7 +25,10 @@ describe('Claim action path', () => {
     });
 
     it('should import the second importable ticket', async() => {
-        await page.waitFor(3000); // the animation adding the header element for the claimed total obscures somehow other elements for about 2 seconds
+        // the animation adding the header element for the claimed total
+        // obscures somehow other elements for about 2 seconds
+        await page.waitFor(3000);
+
         await page.waitToClick(selectors.claimAction.importTicketButton);
         await page.waitToClick(selectors.claimAction.secondImportableTicket);
         const result = await page.waitForLastSnackbar();

e2e/paths/06-claim/06_descriptor.spec.js

@@ -50,11 +50,9 @@ describe('claim Descriptor path', () => {
     });
 
     it(`should search for the deleted claim to find no results`, async() => {
-        await page.write(selectors.claimsIndex.searchClaimInput, claimId);
+        await page.doSearch(claimId);
-        await page.waitToClick(selectors.claimsIndex.searchButton);
+        const nResults = await page.countElement(selectors.claimsIndex.searchResult);
-        await page.waitForNumberOfElements(selectors.claimsIndex.searchResult, 0);
-        const result = await page.countElement(selectors.claimsIndex.searchResult);
 
-        expect(result).toEqual(0);
+        expect(nResults).toEqual(0);
     });
 });

e2e/paths/07-order/02_basic_data.spec.js

@@ -81,7 +81,7 @@ describe('Order edit basic data path', () => {
             await page.waitToClick(selectors.orderBasicData.saveButton);
             const result = await page.waitForLastSnackbar();
 
-            expect(result).toEqual('Data saved!');
+            expect(result).toContain('Data saved!');
         });
 
         it('should now confirm the client have been edited', async() => {

e2e/paths/07-order/04_catalog.spec.js

@@ -69,8 +69,7 @@ describe('Order catalog', () => {
     });
 
     it('should search for an item by id', async() => {
-        await page.write(selectors.orderCatalog.itemId, '2');
+        await page.accessToSearchResult('2');
-        await page.keyboard.press('Enter');
         await page.waitForNumberOfElements('section.product', 1);
         const result = await page.countElement('section.product');
 

e2e/paths/08-route/03_create.spec.js

@@ -17,7 +17,6 @@ describe('Route create path', () => {
 
     describe('as employee', () => {
         it('should click on the add new route button and open the creation form', async() => {
-            await page.waitForContentLoaded();
             await page.waitToClick(selectors.routeIndex.addNewRouteButton);
             await page.waitForState('route.create');
         });

e2e/paths/09-invoice-out/02_descriptor.spec.js

@@ -50,12 +50,10 @@ describe('InvoiceOut descriptor path', () => {
         });
 
         it(`should search for the deleted invouceOut to find no results`, async() => {
-            await page.write(selectors.invoiceOutIndex.topbarSearch, 'T2222222');
+            await page.doSearch('T2222222');
-            await page.waitToClick(selectors.invoiceOutIndex.searchButton);
+            const nResults = await page.countElement(selectors.invoiceOutIndex.searchResult);
-            await page.waitForNumberOfElements(selectors.invoiceOutIndex.searchResult, 0);
-            const result = await page.countElement(selectors.invoiceOutIndex.searchResult);
 
-            expect(result).toEqual(0);
+            expect(nResults).toEqual(0);
         });
 
         it('should navigate to the ticket index', async() => {
@@ -66,17 +64,13 @@ describe('InvoiceOut descriptor path', () => {
         });
 
         it('should search for tickets with an specific invoiceOut to find no results', async() => {
-            await page.waitToClick(selectors.ticketsIndex.openAdvancedSearchButton);
+            await page.doSearch('T2222222');
-            await page.write(selectors.ticketsIndex.advancedSearchInvoiceOut, 'T2222222');
+            const nResults = await page.countElement(selectors.ticketsIndex.searchResult);
-            await page.waitToClick(selectors.ticketsIndex.advancedSearchButton);
-            await page.waitForNumberOfElements(selectors.ticketsIndex.searchResult, 0);
-            const result = await page.countElement(selectors.ticketsIndex.searchResult);
 
-            expect(result).toEqual(0);
+            expect(nResults).toEqual(0);
         });
 
         it('should now navigate to the invoiceOut index', async() => {
-            await page.waitForContentLoaded();
             await page.waitToClick(selectors.globalItems.applicationsMenuButton);
             await page.wait(selectors.globalItems.applicationsMenuVisible);
             await page.waitToClick(selectors.globalItems.invoiceOutButton);

front/core/components/autocomplete/index.html

@@ -1,5 +1,6 @@
 <div
     class="container"
+    tabindex="-1"
     ng-click="$ctrl.onContainerClick($event)"
     ng-keydown="$ctrl.onContainerKeyDown($event)">
     <div

front/core/components/button/style.scss

@@ -6,10 +6,10 @@
     justify-content: center;
     height: 36px;
     border: none;
-    border-radius: .1em;
+    border-radius: 1px;
     font-family: vn-font-bold;
     text-transform: uppercase;
-    font-size: 14px;
+    font-size: .87rem;
     cursor: pointer;
     box-sizing: border-box;
     outline: none;
@@ -34,13 +34,12 @@
         & > vn-icon {
             vertical-align: middle;
             color: inherit;
-            font-size: 1.7em;
         }
     }
     &.colored {
         color: white;
         background-color: $color-button;
-        box-shadow: 0 .15em .15em 0 rgba(0, 0, 0, .3);
+        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .3);
         transition: background 200ms ease-in-out;
 
         &:not(.disabled) {
@@ -80,27 +79,27 @@
     }
     &.round {
         border-radius: 50%;
-        height: 3.8em;
+        height: 54px;
-        width: 3.8em;
+        width: 54px;
 
         & > button > span {
             display: none;
         }
 
         &.xs {
-            font-size: 0.5em;
+            font-size: .5rem;
         }
     
         &.sm {
-            font-size: 0.7em;
+            font-size: .7rem;
         }
     
         &.md {
-            font-size: 0.9em;
+            font-size: .875rem;
         }
 
         &.lg {
-            font-size: 1.2em;
+            font-size: 1.2rem;
         }
     }
     &.disabled {

front/core/components/calendar/style.scss

@@ -6,14 +6,14 @@
     & > div {
         & > .header {
             display: flex;
-            margin-bottom: 0.5em;
+            margin-bottom: 8px;
             align-items: center;
-            height: 2.4em;
+            height: 38px;
 
             & > .title {
                 flex: 1;
                 text-align: center;
-                padding: 0.2em 0;
+                padding: 3px 0;
             }
             & > .vn-button {
                 color: inherit;
@@ -22,10 +22,10 @@
         & > .weekdays {
             display: flex;
             color: $color-font-secondary;
-            margin-bottom: 0.5em;
+            margin-bottom: 8px;
-            padding: 0.5em 0;
+            padding: 8px 0;
             font-weight: bold;
-            font-size: 0.8em;
+            font-size: .8rem;
             text-align: center;
 
             & > section {
@@ -62,9 +62,9 @@
                     justify-content: center;
                     align-items: center;
                     border-radius: 50%;
-                    font-size: 14px;
+                    font-size: .9rem;
-                    width: 2.2em;
+                    width: 30px;
-                    height: 2.2em;
+                    height: 30px;
                     cursor: pointer;
                     outline: 0;
                     transition: background-color 300ms ease-in-out;

front/core/components/chip/style.scss

@@ -1,23 +1,23 @@
 @import "variables";
 
 vn-chip {
-    border-radius: 1em;
+    border-radius: 16px;
     background-color: $color-bg;
     color: $color-font;
     font-size: .9rem;
-    margin: .25em;
+    margin: 4px;
     display: inline-flex;
     align-items: center;
-    height: 2em;
+    height: 28px;
     max-width: 100%;
     box-sizing: border-box;
 
     &.small {
-        height: 1.5em;
+        height: 24px;
 
         & > div {
-            padding: 0.6em;
+            padding: 9px;
-            font-size: 0.8rem;
+            font-size: .8rem;
         }
     }
 
@@ -46,22 +46,22 @@ vn-chip {
         display: flex;
         align-items: center;
         height: 100%;
-        padding: 0 .7em;
+        padding: 0 11px;
         text-overflow: ellipsis;
         white-space: nowrap;
         overflow: hidden;
 
         & > vn-avatar {
-            margin-left: -0.7em;
+            margin-left: -11px;
-            margin-right: .3em;
+            margin-right: 6px;
             vertical-align: middle;
-            height: 2em;
+            height: 28px;
-            width: 2em;
+            width: 28px;
         }
     }
     & > vn-icon {
-        margin-right: .12em;
+        margin-right: 2px;
-        margin-left: -.12em;
+        margin-left: -2px;
         vertical-align: middle;
         opacity: .6;
         cursor: pointer;
@@ -76,6 +76,6 @@ vn-chip {
 
 vn-avatar {
     display: inline-block;
-    min-width: 2em;
+    min-width: 28px;
     border-radius: 50%;
 }

front/core/components/confirm/confirm.js

@@ -6,10 +6,7 @@ import './style.scss';
 export default class Confirm extends Dialog {
     constructor($element, $, $transclude) {
         super($element, $, $transclude);
-
+        this.fillSlots(template);
-        let $template = angular.element(template);
-        this.fillSlot('body', $template.find('tpl-body'));
-        this.fillSlot('buttons', $template.find('tpl-buttons'));
     }
 }
 

front/core/components/confirm/style.scss

@@ -1,3 +1,3 @@
 .vn-confirm .window {
-    max-width: 30em
+    max-width: 480px
 }

front/core/components/data-viewer/style.scss

@@ -6,9 +6,9 @@ vn-data-viewer {
     & > .empty-rows {
         display: block;
         text-align: center;
-        padding: 1.5em;
+        padding: 24px;
         box-sizing: border-box;
         color: $color-font-secondary;
-        font-size: 1.4em;
+        font-size: 1.375rem;
     }
 }

front/core/components/debug-info/style.scss

@@ -2,10 +2,10 @@
 
 vn-debug-info {
     position: fixed;
-    bottom: 1em;
+    bottom: 16px;
-    left: 1em;
+    left: 16px;
-    padding: 1em;
+    padding: 16px;
-    min-width: 8em;
+    min-width: 128px;
     background-color: #3f51b5;
     color: $color-font-dark;
     border-radius: 4px;
@@ -19,7 +19,7 @@ vn-debug-info {
     & > h6 {
         font-weight: normal;
         color: rgba(255, 255, 255, .5);
-        font-size: 1em;
+        font-size: 1rem;
     }
     ul {
         list-style-type: none;
@@ -27,11 +27,11 @@ vn-debug-info {
         margin: 0;
 
         & > li {
-            margin-top: .2em;
+            margin-top: 3px;
-            font-size: .95em;
+            font-size: .94rem;
 
             & > span {
-                padding: .05em .2em;
+                padding: 1px 3px;
                 border-radius: 4px;
                 transition: background-color 200ms ease-in-out;
                 

front/core/components/dialog/index.js

@@ -21,6 +21,17 @@ export default class Dialog extends Popup {
         this.fillDefaultSlot(template);
     }
 
+    /**
+     * Fills the dialog slots, it is intended to be used by child classes.
+     *
+     * @param {String} template The HTML template string
+     */
+    fillSlots(template) {
+        let $template = angular.element(template);
+        this.fillSlot('body', $template.find('tpl-body'));
+        this.fillSlot('buttons', $template.find('tpl-buttons'));
+    }
+
     /**
      * Shows the dialog and optionally registers a handler for the response.
      *
@@ -68,7 +79,17 @@ export default class Dialog extends Popup {
     respond(response) {
         if (!this.shown)
             return this.$q.resolve();
+        return this.responseHandler(response);
+    }
 
+    /**
+     * The default response handler, it can be overriden by child classes to
+     * add custom logic.
+     *
+     * @param {String} response The response code
+     * @return {Boolean} The response handler return
+     */
+    responseHandler(response) {
         let handlerArgs = {
             $response: response,
             $data: this.data

front/core/components/dialog/style.scss

@@ -8,11 +8,11 @@
         text-transform: uppercase;
         background-color: transparent;
         border: none;
-        border-radius: .1em;
+        border-radius: 1px;
         position: absolute;
         top: 0;
         right: 0;
-        padding: .3em;
+        padding: 4px;
         color: #666;
     }
     & > form {
@@ -20,11 +20,11 @@
 
         & > .body > tpl-body {
             display: block;
-            min-width: 16em;
+            min-width: 256px;
         }
         & > .buttons > tpl-buttons {
             display: block;
-            margin-top: 1.5em;
+            margin-top: 24px;
             text-align: right;
     
             button,
@@ -35,12 +35,12 @@
                 text-transform: uppercase;
                 background-color: transparent;
                 border: none;
-                border-radius: .1em;
+                border-radius: 1px;
                 color: $color-button;
                 font-family: vn-font-bold;
-                padding: .7em;
+                padding: 11px;
-                margin: -0.7em;
+                margin: -11px;
-                margin-left: .7em;
+                margin-left: 11px;
             }
         }
     }

front/core/components/drop-down/style.scss

@@ -19,13 +19,13 @@
             display: none;
             cursor: pointer;
             position: absolute;
-            right: .5em;
+            right: 8px;
-            top: .6em;
+            top: 9px;
-            height: 1em;
+            height: 16px;
             color: #888;
             border-radius: 50%;
             background-color: rgba(255, 255, 255, .8);
-            font-size: 18px; 
+            font-size: 1.125rem; 
     
             &:hover {
                 color: $color-font;
@@ -36,7 +36,7 @@
         }
     }
     & > .list {
-        max-height: 20em;
+        max-height: 320px;
         overflow: auto;
 
         ul {
@@ -46,13 +46,13 @@
         }
         li, .status {
             @extend %clickable;
-            padding: .6em;
+            padding: 9px;
             white-space: nowrap;
             display: flex;
 
             & > input[type=checkbox] {
                 margin: 0;
-                margin-right: .6em;
+                margin-right: 9px;
             }
             &.active {
                 @extend %active;

front/core/components/field/index.html

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container" tabindex="-1">
     <div
         ng-transclude="prepend"
         class="prepend">

front/core/components/field/index.js

@@ -9,20 +9,17 @@ export default class Field extends FormInput {
         this.prefix = null;
         this.suffix = null;
 
-        this.control = this.element.querySelector('.control');
-        this.element.addEventListener('click', e => this.onClick(e));
-
         this.container = this.element.querySelector('.container');
-        this.container.addEventListener('mousedown', e => this.onMouseDown(e));
+        this.container.addEventListener('focusout', () => this.onFocus(false));
+        this.container.addEventListener('focusin', () => this.onFocus(true));
+
+        this.control = this.element.querySelector('.control');
     }
 
     $onInit() {
         super.$onInit();
 
         if (this.info) this.classList.add('has-icons');
-
-        this.input.addEventListener('focus', () => this.onFocus(true));
-        this.input.addEventListener('blur', () => this.onFocus(false));
         this.input.addEventListener('change', () => this.onChange());
     }
 
@@ -160,19 +157,6 @@ export default class Field extends FormInput {
         fix.innerText = text || '';
     }
 
-    onClick() {
-        // if (event.defaultPrevented) return;
-
-        if (this.input !== document.activeElement)
-            this.focus();
-    }
-
-    onMouseDown(event) {
-        if (event.target == this.input) return;
-        event.preventDefault();
-        this.focus();
-    }
-
     onFocus(hasFocus) {
         this.classList.toggle('focused', hasFocus);
     }

front/core/components/field/style.scss

@@ -9,6 +9,7 @@
         display: flex;
         align-items: stretch;
         position: relative;
+        outline: none;
 
         & > .infix {
             position: relative;
@@ -30,7 +31,6 @@
 
                 & > .required {
                     display: none;
-                    color: $color-alert
                 }
             }
             & > .fix {
@@ -135,7 +135,7 @@
             align-items: center;
 
             & > vn-icon {
-                font-size: 24px;
+                font-size: 1.5rem;
             }
         }
         & > .prepend > prepend {
@@ -197,7 +197,7 @@
         }
     }
     &.standout {
-        border-radius: .1em;
+        border-radius: 1px;
         background-color: rgba(255, 255, 255, .1);
         padding: 0 12px;
         transition-property: background-color, color;
@@ -248,7 +248,7 @@
                 top: 5px;
                 color: $color-primary;
                 padding: 0;
-                font-size: 12px;
+                font-size: .75rem;
             }
             & > .control > * {
                 &[type=time],
@@ -298,7 +298,7 @@
         padding: 4px 0;
         height: 12px;
         color: rgba(0, 0, 0, .4);
-        font-size: 12px;
+        font-size: .75rem;
         transform: translateY(-12px);
         transition-property: opacity, transform, color;
         transition-duration: 200ms;

front/core/components/icon-button/style.scss

@@ -5,7 +5,7 @@
     color: $color-button;
 
     & > button {
-        padding: .2em !important;
+        padding: 3px !important;
     }
     &:focus {
         opacity: .6;

front/core/components/icon/style.scss

@@ -1,6 +1,6 @@
 vn-icon {
     display: inline-block;
-    font-size: 18pt;
+    font-size: 1.7em;
     text-align: center;
     outline: 0;
 

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

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container" tabindex="-1">
     <div
         ng-transclude="prepend"
         class="prepend">

front/core/components/label-value/style.scss

@@ -4,6 +4,6 @@ vn-label-value > section {
     & > vn-icon {
         vertical-align: middle;
         color: $color-font-secondary;
-        font-size: 1.2em
+        font-size: 1.2rem
     }
 }

front/core/components/list/style.scss

@@ -11,7 +11,7 @@ ul.menu {
         @extend %clickable;
         display: block;
         color: inherit;
-        padding: .6em 2em;
+        padding: 9px 32px;
     }
 }
 */
@@ -76,7 +76,7 @@ vn-item,
             margin-right: $spacing-md;
 
             & > .vn-icon {
-                font-size: 1.2em;
+                font-size: 1.2rem;
             }
         }
         &[side] {
@@ -86,10 +86,10 @@ vn-item,
 
             & > .vn-button {
                 opacity: .4;
-                margin-left: .5em;
+                margin-left: 8px;
                 transition: opacity 250ms ease-out;
                 padding: 0;
-                font-size: 1.05em;
+                font-size: 1rem;
 
                 &:hover {
                     opacity: 1;

front/core/components/multi-check/style.scss

@@ -1,5 +1,5 @@
 vn-multi-check {
     .vn-check {
-        margin-bottom: 0.8em
+        margin-bottom: 12px
     }
 }

front/core/components/pagination/style.scss

@@ -4,7 +4,7 @@ vn-pagination {
     text-align: center;
 
     & > div  > vn-icon-button {
-        font-size: 2em;
+        font-size: 2rem;
         padding: 0;
     }
 }

front/core/components/popover/style.scss

@@ -10,7 +10,7 @@
     color: $color-font;
 
     opacity: 0;
-    transform: translateY(-.6em);
+    transform: translateY(-9px);
     transition-property: opacity, transform;
     transition-duration: 200ms;
     transition-timing-function: ease-in-out;
@@ -21,21 +21,21 @@
     }
     & > .window {
         position: absolute;
-        box-shadow: 0 .1em .4em $color-shadow;
+        box-shadow: 0 1px 6px $color-shadow;
         z-index: 0;
 
         & > .arrow {
-            width: 1em;
+            width: 16px;
-            height: 1em;
+            height: 16px;
-            margin: -.5em;
+            margin: -8px;
             background-color: $color-bg-panel;
-            box-shadow: 0 .1em .4em $color-shadow;
+            box-shadow: 0 1px 6px $color-shadow;
             position: absolute;
             transform: rotate(45deg);
             z-index: -1;
         }
         & > .content {
-            border-radius: .1em;
+            border-radius: 1px;
             background-color: $color-bg-panel;
             height: inherit;
             overflow: auto;

front/core/components/popup/index.html

@@ -2,6 +2,7 @@
     <div
         class="window"
         ng-mousedown="$ctrl.onWindowMouseDown($event)"
+        tabindex="-1"
         ng-transclude>
     </div>
 </div>

front/core/components/popup/index.js

@@ -51,6 +51,7 @@ export default class Popup extends Component {
             {parentBoundTranscludeFn: this.$transclude}
         )[0];
         this.windowEl = this.popup.querySelector('.window');
+        this.windowEl.focus();
 
         let classList = this.popup.classList;
         classList.add(this.displayMode);

front/core/components/popup/style.scss

@@ -19,19 +19,20 @@
         justify-content: center;
         align-items: center;
         background-color: rgba(0, 0, 0, .6);
-        padding: 1em;
+        padding: 16px;
         box-sizing: border-box;
 
         & > .window {
             position: relative;
-            box-shadow: 0 0 .4em $color-shadow;
+            box-shadow: 0 0 6px $color-shadow;
             background-color: $color-bg-panel;
-            border-radius: .2em;
+            border-radius: 3px;
             overflow: auto;
             box-sizing: border-box;
             max-height: 100%;
             transform: scale3d(.9, .9, .9);
             transition: transform 200ms ease-in-out;
+            outline: none;
         }
         &.shown > .window {
             transform: scale3d(1, 1, 1);

front/core/components/range/style.scss

@@ -37,7 +37,7 @@
 
 .vn-range {
     & > label {
-        font-size: 12px;
+        font-size: .75rem;
 
         &.main {
             color: $color-button;
@@ -57,7 +57,7 @@
         background: transparent;
         border-color: transparent;
         -webkit-appearance: none;
-        margin: .2em 0;
+        margin: 3px 0;
 
         &:focus {
             outline: none;

front/core/components/scroll-up/style.scss

@@ -1,6 +1,6 @@
 vn-scroll-up {
-    top: 5.5em;
+    top: 88px;
-    right: 2em;
+    right: 32px;
     display: none;
     position: fixed;
 }

front/core/components/searchbar/style.scss

@@ -2,24 +2,24 @@
 
 vn-searchbar {
     display: block;
-    max-width: 35em;
+    max-width: 560px;
     margin: 0 auto;
 
     .search-params {
         flex: 1;
-        margin: .05em 0;
+        margin: 1px 0;
         overflow: visible;
         display: flex;
-        max-width: 24em;
+        max-width: 384px;
 
         & > .search-param {
             color: rgba(0, 0, 0, .6);
             background-color: rgba(0, 0, 0, .1);
-            padding: .1em .4em;
+            padding: 1px 6px;
-            margin-left: .2em;
+            margin-left: 3px;
             display: inline-block;
-            border-radius: .8em;
+            border-radius: 12px;
-            max-width: 12em;
+            max-width: 192px;
             overflow: hidden;
             white-space: nowrap;
             text-overflow: ellipsis;
@@ -39,7 +39,7 @@ vn-searchbar {
 }
 
 .search-panel {
-    max-height: 48em;
+    max-height: 768px;
 
     & > form {
         padding: $spacing-lg;

front/core/components/snackbar/style.scss

@@ -1,33 +1,33 @@
 @import "variables";
 
 vn-snackbar #shapes {
-    max-height: 20.625em;
+    max-height: 330px;
-    margin-left: -12.5em;
+    margin-left: -160px;
     position: fixed;
     z-index: 100;
-    width: 25em;
+    width: 320px;
     left: 50%;
     bottom: 0
 }
 
 vn-snackbar .shape {
-    background-color: rgba(0, 0, 0, 0.8);
+    background-color: rgba(0, 0, 0, .8);
-    box-shadow: 0 0 .4em $color-shadow;
+    box-shadow: 0 0 6px $color-shadow;
     transition: transform 300ms ease-in-out;
-    transform: translateY(20em);
+    transform: translateY(320px);
     box-sizing: border-box;
-    border-radius: .2em;
+    border-radius: 3px;
     margin-bottom: 15px;
     color: white;
-    padding: 0.8em;
+    padding: 12px;
     
     & > .text {
         text-align: center;
 
         vn-chip { 
             position: absolute;
-            left: -1em;
+            left: -16px;
-            top: -1em;
+            top: -16px;
         }
     }
 
@@ -36,32 +36,32 @@ vn-snackbar .shape {
     }
 
     &.success {
-        background-color: rgba(163, 209, 49, 0.8);
+        background-color: rgba(163, 209, 49, .8);
         color: #445911;
 
         & > button {
-            color: rgba(1, 1, 1, 0.6);
+            color: rgba(1, 1, 1, .6);
         }
     }
 
     &.error {
-        background-color: rgba(198, 40, 40, 0.8);
+        background-color: rgba(198, 40, 40, .8);
 
         & > button {
-            color: rgba(1, 1, 1, 0.6);
+            color: rgba(1, 1, 1, .6);
         }
     }
 
     & > button {
         background-color: transparent;
         text-transform: uppercase;
-        margin-left: .5em;
+        margin-left: 8px;
         font-weight: bold;
         cursor: pointer;
         color: $color-main;
         float: right;
         border: none;
-        padding: .5em;
+        padding: 8px;
-        margin: -.5em
+        margin: -8px;
     }
 }

front/core/components/step-control/style.scss

@@ -22,11 +22,11 @@ vn-step-control {
             border: 2px solid $color-main;
             background-color: white;
             align-content: center;
-            margin-top: -9.5px;
+            margin-top: -10px;
             border-radius: 50%;
             cursor: pointer;
             height: 15px;
-            width: 15px
+            width: 15px;
         }
         & > .steps > .step .circle.active {
             background-color: $color-main;
@@ -36,7 +36,7 @@ vn-step-control {
             flex: auto;
             flex-direction: row;
             justify-content: space-between;
-            margin-top: 10px
+            margin-top: 10px;
         }
         & > .buttons > .step {
             display: flex

front/core/components/table/style.scss

@@ -14,7 +14,7 @@ vn-table {
     & > vn-thead,
     & > thead {
         display: table-header-group;
-        border-bottom: .15em solid $color-spacer;
+        border-bottom: 2px solid $color-spacer;
 
         & > * > th {
             font-weight: normal;
@@ -52,14 +52,14 @@ vn-table {
     }
     & > vn-tfoot,
     & > tfoot {
-        border-top: .15em solid $color-spacer;
+        border-top: 2px solid $color-spacer;
         display: table-footer-group
     }
     & > * > vn-tr,
     & > * > a.vn-tr,
     & > * > tr {
         display: table-row;
-        height: 3em;
+        height: 48px;
     }
     vn-thead, vn-tbody, vn-tfoot,
     thead, tbody, tfoot {
@@ -69,8 +69,8 @@ vn-table {
             & > vn-th,
             & > th {
                 color: $color-font-light;
-                padding-top: 1em;
+                padding-top: 16px;
-                padding-bottom: .8em;
+                padding-bottom: 12px;
             }
             & > vn-th,
             & > vn-td,
@@ -86,14 +86,14 @@ vn-table {
                 vertical-align: middle;
                 display: table-cell;
                 text-align: left;
-                padding: .6em .5em;
+                padding: 9px 8px;
                 white-space: nowrap;
                 text-overflow: ellipsis;
-                max-width: 5em;
+                max-width: 80px;
 
                 &[number] {
                     text-align: right;
-                    width: 6em;
+                    width: 96px;
                 }
                 &[center] {
                     text-align: center;
@@ -103,7 +103,7 @@ vn-table {
                     text-align: center;
                 }
                 &[expand] {
-                    max-width: 25em;
+                    max-width: 400px;
                     min-width: 0;
                 }
                 vn-icon.bright, i.bright {
@@ -111,10 +111,10 @@ vn-table {
                 }
             }
             & > :last-child {
-                padding-right: 1.4em;
+                padding-right: 22px;
             }
             & > :first-child {
-                padding-left: 1.4em;
+                padding-left: 22px;
             }
         }
         & > a.vn-tr {
@@ -123,7 +123,7 @@ vn-table {
     }
     vn-tbody > *,
     tbody > * {
-        border-bottom: .1em solid $color-spacer-light;
+        border-bottom: 1px solid $color-spacer-light;
 
         &:last-child {
             border-bottom: none;
@@ -134,8 +134,8 @@ vn-table {
         & > vn-td,
         & > td {
             .chip {
-                padding: .3em;
+                padding: 4px;
-                border-radius: .3em;
+                border-radius: 4px;
                 color: $color-font-bg;
 
                 &.notice {
@@ -158,7 +158,7 @@ vn-table {
             vn-icon-menu {
                 display: inline-block;
                 color: $color-main;
-                padding: .25em
+                padding: 4px
             }
         }
         & > [actions] {

front/core/components/td-editable/style.scss

@@ -8,7 +8,7 @@ vn-td-editable {
 
     text {
         border: 1px dashed rgba(0, 0, 0, .15);
-        border-radius: 1em;
+        border-radius: 16px;
         padding: 5px 10px;
         min-height: 15px;
         display: block;
@@ -36,16 +36,16 @@ vn-td-editable {
         left: 0;
         box-sizing: border-box;
         align-items: center;
-        padding: .6em;
+        padding: 9px;
         overflow: visible;
 
         & > field {
             flex: 1;
             background-color: $color-bg-panel;
-            padding: .5em;
+            padding: 8px;
-            box-shadow: 0 0 .4em rgba(0, 0, 0, .2);
+            box-shadow: 0 0 6px rgba(0, 0, 0, .2);
-            border-radius: .1em;
+            border-radius: 1px;
-            min-width: 6em;
+            min-width: 96px;
     
             & > * {
                 width: 100%;

front/core/components/toggle/style.scss

@@ -22,7 +22,7 @@
         height: 20px;
         min-width: 20px;
         margin: 6px 0;
-        margin-right: .6em;
+        margin-right: 9px;
         border: 2px solid #666;
     }
     & > .btn > .focus-mark {

front/core/components/tooltip/style.scss

@@ -6,7 +6,7 @@
     z-index: 150;
     background-color: $color-bg-dark;
     color: $color-active-font;
-    border-radius: .2em;
+    border-radius: 3px;
 
     &.show {
         display: inherit;

front/core/components/treeview/style.scss

@@ -11,7 +11,7 @@ vn-treeview-childs {
             list-style: none;
 
             ul {
-                padding-left: 2.2em;
+                padding-left: 35px;
             }
         }
     }
@@ -37,7 +37,7 @@ vn-treeview-childs {
 
 vn-treeview-child {
     line-height: 38px;
-    font-size: 16px;
+    font-size: 1rem;
     display: block;
 
     .node {

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

@@ -9,11 +9,11 @@
     & > span {
         @extend %clickable;
         border-radius: 50%;
-        padding: .4em;
+        padding: 6px;
-        margin: .2em;
+        margin: 3px;
         display: inline-flex;
-        width: 1.5em;
+        width: 24px;
-        height: 1.5em;
+        height: 24px;
         justify-content: center;
         align-items: center;
         outline: none;

front/core/directives/droppable.scss

@@ -5,8 +5,8 @@
 .vn-draggable,
 [vn-droppable] {
     border: 2px dashed transparent;
-    border-radius: 0.5em;
+    border-radius: 8px;
-    transition: all 0.5s;
+    transition: all .5s;
 }
 
 .vn-droppable,

front/core/directives/focus.js

@@ -1,11 +1,11 @@
 import ngModule from '../module';
 import isMobile from '../lib/is-mobile';
 
-export function focus($scope, input) {
+export function focus($timeout, input) {
     if (isMobile) return;
 
     const element = input;
-    let selector = 'input, textarea, button, submit';
+    const selector = 'input, textarea, button, submit';
 
     if (!input.matches(selector))
         input = input.querySelector(selector);
@@ -20,26 +20,24 @@ export function focus($scope, input) {
         return;
     }
 
+    $timeout(() => {
         input.focus();
-
+        if (input.select)
-    if (input.select) {
-        $scope.$applyAsync(() => {
             input.select();
     });
-    }
 }
 
-/**
+/*
  * Sets the focus and selects the text on the input.
- *
- * @return {Object} The directive
  */
-export function directive() {
+export function directive($timeout) {
     return {
         restrict: 'A',
         link: function($scope, $element) {
-            $scope.$watch('', () => focus($scope, $element[0]));
+            $scope.$watch('', () => focus($timeout, $element[0]));
         }
     };
 }
+directive.$inject = ['$timeout'];
+
 ngModule.directive('vnFocus', directive);

front/core/directives/specs/focus.spec.js

@@ -6,7 +6,7 @@ describe('Directive focus', () => {
     beforeEach(ngModule('vnCore'));
 
     compile = (_element, _childElement) => {
-        inject(($compile, $rootScope) => {
+        inject(($compile, $rootScope, $flushPendingTasks) => {
             $scope = $rootScope.$new();
             $element = angular.element(_element);
             if (_childElement)
@@ -15,7 +15,7 @@ describe('Directive focus', () => {
             $element[0].focus = jasmine.createSpy('focus');
             $element[0].select = jasmine.createSpy('select');
             $compile($element)($scope);
-            $scope.$digest();
+            $flushPendingTasks();
         });
     };
 
@@ -27,7 +27,6 @@ describe('Directive focus', () => {
         expect($element[0].firstChild.focus).toHaveBeenCalledWith();
     });
 
-
     it('should call focus function on the element', () => {
         let html = `<input vn-focus></input>`;
         compile(html);

front/core/directives/uvc.scss

@@ -1,6 +1,6 @@
 vn-table vn-dialog[vn-id="uvc"]{
     & > div {
-        min-width: 18em;
+        min-width: 288px;
         align-items: center;
 
     }

front/core/directives/zoom-image.scss

@@ -5,7 +5,7 @@
     position: fixed;
     top: 0;
     z-index: 25;
-    background-color: rgba(1, 1, 1, 0.6);
+    background-color: rgba(1, 1, 1, .6);
 
     & > div {
         display: flex;
@@ -14,13 +14,13 @@
         width: inherit;
         height: inherit;
         box-sizing: border-box;
-        padding: 1em;
+        padding: 16px;
 
         & > img {
             cursor: zoom-out;
             max-height: 100%;
             max-width: 100%;
-            border-radius: .2em;
+            border-radius: 3px;
         }
     }
 }

front/core/styles/animations.scss

@@ -2,7 +2,7 @@
 @keyframes nothing {}
 @keyframes slideIn {
     from {
-        transform: translate3d(-2em, 0, 0);
+        transform: translate3d(-32px, 0, 0);
         opacity: 0;
     }
     to {

front/core/styles/border.scss

@@ -19,5 +19,5 @@
 /* Border Radius */
 
 .border-radius {
-    border-radius: .3em;
+    border-radius: 4px;
 }

front/core/styles/font-family.scss

@@ -21,7 +21,7 @@
     font-family: 'Material Icons';
     font-weight: normal;
     font-style: normal;
-    font-size: 24px;  /* Preferred icon size */
+    font-size: 1.5rem;  /* Preferred icon size */
     display: inline-block;
     line-height: 1;
     text-transform: none;

front/core/styles/global.scss

@@ -1,6 +1,7 @@
 @import "variables";
 
 html {
+    font-size: $font-size;
     background-color: $color-bg;
     overflow: auto;
     height: 100%;
@@ -9,7 +10,6 @@ body {
     height: 100%;
     font-family: vn-font;
     color: $color-font;
-    font-size: $font-size;
     margin: 0;
     padding: 0;
 }

front/core/styles/layout.scss

@@ -40,7 +40,7 @@ html [vn-nine],
 html [vn-ten],
 html [vn-eleven],
 html [vn-twelve]{
-    flex-basis: 0.000000001px;
+    flex-basis: .1px;
 }
 html [vn-auto], vn-auto, .vn-auto {
     flex-basis: auto;

front/core/styles/responsive.scss

@@ -1,52 +1,53 @@
 @import "variables";
-
+/*
-/* Desktop - Laptop 1360x768 */
+// Desktop - Laptop 1360x768
 @media (max-resolution: 119dpi) and (min-device-width: 1340px) and (max-device-width: 1899px)
 {
-	body { font-size: 10pt; }
+	html { font-size: 10pt; }
 }
 
-/* Mobile - Low DPI */
+//  Mobile - Low DPI
 @media
 	(min-resolution: 120dpi),
 	(-webkit-min-device-pixel-ratio: 1.5)
 {
-	body { font-size: 9pt; }
+	html { font-size: 9pt; }
 }
 @media
 	(min-resolution: 144dpi),
 	(-webkit-min-device-pixel-ratio: 1.5)
 {
-	body { font-size: 11pt; }
+	html { font-size: 11pt; }
 }
 
-/* Mobile - Normal DPI */
+// Mobile - Normal DPI
 @media
 	(max-device-width: 383px) and (min-resolution: 192dpi),
 	(max-device-width: 383px) and (-webkit-min-device-pixel-ratio: 2)
 {
-	body { font-size: 10pt; }
+	html { font-size: 10pt; }
 }
 @media
 	(min-device-width: 384px) and (min-resolution: 192dpi),
 	(min-device-width: 384px) and (-webkit-min-device-pixel-ratio: 2)
 {
-	body { font-size: 11pt; }
+	html { font-size: 11pt; }
 }
 
-/* Mobile - High DPI */
+// Mobile - High DPI
 @media
 	(max-device-width: 411px) and (min-resolution: 249dpi),
 	(max-device-width: 411px) and (-webkit-min-device-pixel-ratio: 3)
 {
-	body { font-size: 10pt; }
+	html { font-size: 10pt; }
 }
 @media
 	(min-device-width: 412px) and (min-resolution: 249dpi),
 	(min-device-width: 412px) and (-webkit-min-device-pixel-ratio: 3)
 {
-	body { font-size: 11pt; }
+	html { font-size: 11pt; }
 }
+*/
 
 .vn-hide-narrow {
 	@media (max-width: $mobile-width) {

front/core/styles/text.scss

@@ -3,46 +3,46 @@
 /* Headings */
 
 .text-h1, h1 {
-    font-size: 32pt;
+    font-size: 2.3rem;
 }
 .text-h2, h2 {
-    font-size: 28pt;
+    font-size: 2.25rem;
 }
 .text-h3, h3 {
-    font-size: 24pt;
+    font-size: 2rem;
 }
 .text-h4, h4 {
-    font-size: 20pt;
+    font-size: 1.6rem;
 }
 .text-h5, h5 {
-    font-size: 16pt;
+    font-size: 1.3rem;
 }
 .text-h6, h6 {
-    font-size: 14pt;
+    font-size: 1.125rem;
 }
 .text-subtitle1 {
-    font-size: 13pt;
+    font-size: 1.06rem;
 }
 .text-subtitle2 {
-    font-size: 12pt;
+    font-size: 1rem;
 }
 .text-body1 {
-    font-size: 11pt;
+    font-size: .875rem;
 }
 .text-body2 {
-    font-size: 11pt;
+    font-size: .875rem;
 }
 .text-caption {
-    font-size: 11pt;
+    font-size: .875rem;
 }
 .text-overline {
-    font-size: 10pt;
+    font-size: .8rem;
 }
 
 h1, h2, h3, h4, h5, h6 {
     padding: 0;
     margin-top: 0;
-    margin-bottom: .3em;
+    margin-bottom: 4px;
 }
 
 /* Colors */

front/core/styles/variables.scss

@@ -1,17 +1,17 @@
 @import "./util";
 
-$menu-width: 16em;
+$font-size: 12pt;
-$topbar-height: 4em;
+$menu-width: 256px;
+$topbar-height: 56px;
 $mobile-width: 800px;
-$font-size: 16px;
 
 // Width
 
-$width-xs: 25em;
+$width-xs: 400px;
-$width-sm: 34em;
+$width-sm: 544px;
-$width-md: 50em;
+$width-md: 800px;
-$width-lg: 80em;
+$width-lg: 1280px;
-$width-xl: 100em;
+$width-xl: 1600px;
 
 // Spacing
 
@@ -115,6 +115,6 @@ $color-alert-light: darken($color-alert, 35%);
 
 // Border
 
-$border-thin: .05em solid $color-spacer;
+$border-thin: 1px solid $color-spacer;
-$border-thin-light: .05em solid $color-spacer-light;
+$border-thin-light: 1px solid $color-spacer-light;
-$shadow: 0 .15em .15em 0 rgba(0, 0, 0, .3);
+$shadow: 0 2px 2px 0 rgba(0, 0, 0, .3);

front/salix/components/descriptor/style.scss

@@ -3,7 +3,7 @@
 @import "./variables";
 
 .vn-descriptor {
-    box-shadow: 0 .1em .2em $color-shadow;
+    box-shadow: 0 1px 3px $color-shadow;
 
     & > .header {
         display: flex;
@@ -26,7 +26,7 @@
                 padding: 10px;
             }
             vn-icon {
-                font-size: 1.8em;
+                font-size: 1.75rem;
             }
         }
     }
@@ -51,7 +51,7 @@
             & > vn-icon {
                 padding: $spacing-sm;
                 color: $color-marginal;
-                font-size: 1.5em;
+                font-size: 1.5rem;
     
                 &.bright {
                     color: $color-main;
@@ -70,7 +70,7 @@
                 margin: 0 $spacing-sm;
 
                 & > vn-icon {
-                    font-size: 1.8em;
+                    font-size: 1.75rem;
                     padding: 0;
                 }
             }

front/salix/components/home/style.scss

@@ -2,7 +2,7 @@
 
 vn-home {
     display: block;
-    padding: .5em;
+    padding: 8px;
 
     & > div {
         & > h6 {
@@ -16,7 +16,7 @@ vn-home {
             flex-direction: row; 
             justify-content: center;
             flex-wrap: wrap;
-            max-width: 44em;
+            max-width: 704px;
             margin: 0 auto;
 
             & > a {
@@ -27,10 +27,10 @@ vn-home {
                 color: $color-font-dark;
                 display: flex;
                 flex-direction: column;
-                height: 8em;
+                height: 128px;
-                width: 8em;
+                width: 128px;
-                margin: .5em;
+                margin: 8px;
-                padding: 1em;
+                padding: 16px;
                 justify-content: center;
 
                 & > div {
@@ -41,21 +41,21 @@ vn-home {
 
                     & > vn-icon {
                         display: block;
-                        font-size: 3.5em;
+                        font-size: 3.5rem;
                     }
                 }
                 & > span {
-                    font-size: 0.9em;
+                    font-size: .875rem;
                     text-align: center;
                 }
                 & > h4 {
                     max-width: 100%;
                     text-align: center;
-                    font-size: 12pt;
+                    font-size: 1rem;
                     overflow: hidden;
                     color: inherit;
                     margin: 0;
-                    line-height: 1.5em;
+                    line-height: 24px;
 
                    /*  & > .bind-letter {
                         color: #FD0;

front/salix/components/layout/style.scss

@@ -7,42 +7,42 @@ vn-layout {
         right: 0;
         left: 0;
         z-index: 10;
-        box-shadow: 0 .1em .2em $color-shadow;
+        box-shadow: 0 1px 3px $color-shadow;
         height: $topbar-height;
-        padding: 0 1em;
+        padding: 0 16px;
         justify-content: space-between;
 
         & > .side {
             flex: auto;
             display: flex;
             align-items: center;
-            width: 5em;
+            width: 80px;
             transition: width 200ms;
         }
         & > .start {
-            padding-right: 1em;
+            padding-right: 16px;
             overflow: hidden;
 
             & > .logo > img {
-                height: 2em;
+                height: 32px;
                 display: block;
             }
             & > .main-title {
-                font-size: 1.6em;
+                font-size: 1.56rem;
                 text-overflow: ellipsis;
                 white-space: nowrap;
                 overflow: hidden;
-                padding-left: .4em;
+                padding-left: 6px;
             }
             & > vn-spinner {
-                padding: 0 .4em;
+                padding: 0 6px;
             }
         }
         & > vn-slot {
             flex: auto;
         }
         & > .end {
-            padding-left: 1em;
+            padding-left: 16px;
             justify-content: flex-end;
         }
         .show-menu {
@@ -50,7 +50,7 @@ vn-layout {
         }
         .vn-button {
             color: inherit;
-            font-size: 1.05em;
+            font-size: 1.05rem;
             padding: 0;
         }
     }
@@ -66,7 +66,7 @@ vn-layout {
     }
     &.left-menu {
         & > vn-topbar > .start {
-            width: 5em + $menu-width;
+            width: 80px + $menu-width;
         }
         & > .main-view {
             padding-left: $menu-width;
@@ -74,11 +74,14 @@ vn-layout {
     }
     &.right-menu {
         & > vn-topbar > .end {
-            width: 5em + $menu-width;
+            width: 80px + $menu-width;
         }
         & > .main-view {
             padding-right: $menu-width;
         }
+        [fixed-bottom-right] {
+            right: 64px + $menu-width;
+        }
     }
     & > .main-view {
         padding-top: $topbar-height;
@@ -89,6 +92,11 @@ vn-layout {
             padding: $spacing-md;
             box-sizing: border-box
         }
+        [fixed-bottom-right] {
+            position: fixed;
+            bottom: 32px;
+            right: 32px;
+        }
         &.ng-enter {
             vn-side-menu {
                 opacity: 0;
@@ -124,6 +132,9 @@ vn-layout {
             & > .main-view {
                 padding-right: 0;
             }
+            [fixed-bottom-right] {
+                right: 32px;
+            }
         }
         ui-view > * {
             padding-left: 0;
@@ -139,22 +150,22 @@ vn-layout {
     & > li {
         @extend %clickable-light;
         background-color: $color-main;
-        margin-bottom: .6em;
+        margin-bottom: 9px;
-        padding: .8em;
+        padding: 12px;
-        border-radius: .1em;
+        border-radius: 1px;
-        min-width: 8em;
+        min-width: 128px;
         white-space: nowrap;
 
         &:last-child {
             margin-bottom: 0;
         }
         & > vn-icon {
-            padding-right: .3em;
+            padding-right: 4px;
             vertical-align: middle;
         }
     }
 }
 #user {
-    font-size: 1.5em;
+    font-size: 1.5rem;
     height: auto;
 }

front/salix/components/left-menu/left-menu.html

@@ -1,6 +1,7 @@
 <ul class="vn-list" ng-if="::$ctrl.items.length > 0">
     <li ng-repeat="item in ::$ctrl.items" name="{{::item.description}}">
-        <a ui-sref="{{::item.state}}"
+        <a ng-if="!item.external"
+            ui-sref="{{::item.state}}"
             class="vn-item"
             ng-class="{active: item.active && !item.childs, expanded: item.active}"
             ng-click="$ctrl.setActive(item)">
@@ -14,6 +15,16 @@
                 <vn-icon icon="keyboard_arrow_down" ng-if="::item.childs.length > 0"></vn-icon>
             </vn-item-section>
         </a>
+        <a ng-if="item.external"
+            href="{{::item.url}}"
+            class="vn-item">
+             <vn-item-section avatar>
+                <vn-icon icon="{{::item.icon}}" ng-if="::item.icon"></vn-icon>
+            </vn-item-section>
+            <vn-item-section translate>
+                {{::item.description}}
+            </vn-item-section>
+        </a>
         <ul class="vn-list" ng-show="item.childs.length > 0 && item.active">
             <li ng-repeat="child in ::item.childs">
                 <a ui-sref="{{::child.state}}"

front/salix/components/left-menu/left-menu.js

@@ -36,23 +36,28 @@ export default class LeftMenu {
 
         let addItem = (items, item) => {
             let state = states[item.state];
-            if (!state) return;
+            if (state) {
-
                 state = state.self;
                 let acl = state.data.acl;
 
                 if (acl && !this.aclService.hasAny(acl))
                     return;
+            } else if (!item.external) {
+                console.warn('wrong left-menu definition');
+                return;
+            }
 
             items.push({
                 icon: item.icon,
-                description: state.description,
+                description: item.description || state.description,
-                state: item.state
+                state: item.state,
+                external: item.external,
+                url: item.url
             });
         };
 
         for (let item of menu) {
-            if (item.state)
+            if (item.state || item.external)
                 addItem(items, item);
             else {
                 let childs = [];

front/salix/components/login/style.scss

@@ -7,7 +7,7 @@ vn-login {
 	margin: 0;
 	padding: 0;
 	color: $color-font;
-	font-size: 1.1em;
+	font-size: 1.1rem;
 	font-weight: normal;
 	background-color: $color-bg-dark;
 	display: flex;
@@ -18,16 +18,16 @@ vn-login {
 	& > .box {
 		box-sizing: border-box;
 		position: absolute;
-		max-width: 19em;
+		max-width: 304px;
-		min-width: 15em;
+		min-width: 240px;
-		padding: 3em;
+		padding: 48px;
 		background-color: $color-bg-panel;
-		box-shadow: 0 0 1em 0 rgba(0, 0, 0, .6);
+		box-shadow: 0 0 16px 0 rgba(0, 0, 0, .6);
-		border-radius: .5em;
+		border-radius: 8px;
 
 		& > img {
 			width: 100%;
-			padding-bottom: 1em;
+			padding-bottom: 16px;
 		}
 		& > form {
 			& > .vn-textfield {
@@ -40,7 +40,7 @@ vn-login {
 				}
 			}
 			& > .footer {
-				margin-top: 2em;
+				margin-top: 32px;
 				text-align: center;
 				position: relative;
 
@@ -55,8 +55,8 @@ vn-login {
 				& > .spinner-wrapper {
 					position: absolute;
 					width: 0;
-					top: .2em;
+					top: 3px;
-					right: -.5em;
+					right: -8px;
 					overflow: visible;
 				}
 			}
@@ -67,7 +67,7 @@ vn-login {
 		background-color: $color-bg-panel;
 
 		& > .box {
-			padding: 1em;
+			padding: 16px;
 			box-shadow: none;
 		}
 	}

front/salix/components/side-menu/style.scss

@@ -11,7 +11,7 @@ vn-side-menu > .menu {
     width: $menu-width;
     min-width: $menu-width;
     background-color: $color-bg-panel;
-    box-shadow: 0 .1em .2em $color-shadow;
+    box-shadow: 0 1px 3px $color-shadow;
     overflow: auto;
     top: $topbar-height;
 

front/salix/components/summary/style.scss

@@ -11,7 +11,7 @@
         color: $color-font-dark;
         margin: 0;
         text-align: center;
-        line-height: 1.3em;
+        line-height: 20px;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -25,27 +25,27 @@
         h4 {
             margin-bottom: $spacing-md;
             text-transform: uppercase;
-            font-size: 15pt;
+            font-size: 1.25rem;
             line-height: 1;
             padding: 7px;
             padding-bottom: 4px; /* Bottom line-height fix */
             font-weight: lighter;
             background-color: $color-main-light;
-            border-bottom: .1em solid $color-main;
+            border-bottom: 1px solid $color-main;
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
         }
         & > * {
             margin: $spacing-sm;
-            min-width: 14em;
+            min-width: 224px;
             padding: 0;
         }
         & > vn-auto {
             width: 100%;
         }
         vn-label-value > section {
-            margin-bottom: .3em;
+            margin-bottom: 4px;
         }
     }
     p:after {

front/salix/components/user-popover/style.scss

@@ -1,14 +1,14 @@
 @import "variables";
 
 .vn-popover .user-popover {
-    width: 16em;
+    width: 256px;
 
     & > .profile-card {
         display: flex;
         align-items: center;
 
         & > vn-icon {
-            font-size: 80px;
+            font-size: 5rem;
             color: $color-font-bg-marginal;
         }
         & > div {
@@ -19,11 +19,11 @@
 
             & > div {
                 display: flex;
-                padding-bottom: .5em;
+                padding-bottom: 8px;
     
                 & > .user {
                     flex: 1;
-                    max-width: 8em;
+                    max-width: 128px;
                 }
             }
         }
@@ -33,5 +33,5 @@
     float: right;
     height: initial;
     vertical-align: middle;
-    font-size: 1em;
+    font-size: 1rem;
 }

front/salix/styles/misc.scss

@@ -3,7 +3,7 @@
 
 form vn-horizontal {
     align-items: center;
-    min-height: 2.8em;
+    min-height: 44px;
 
     & > * {
         box-sizing: border-box;
@@ -55,9 +55,9 @@ form vn-horizontal {
 vn-bg-title {
     display: block;
     text-align: center;
-    padding: 1em;
+    padding: 16px;
     color: gray;
-    font-size: 1.3em;
+    font-size: 1.25rem;
 }
 .totalBox {
     border: 1px solid #CCC;
@@ -65,7 +65,7 @@ vn-bg-title {
     justify-content: center;
     align-items: center;
     padding: $spacing-md;
-    max-width: 14em;
+    max-width: 224px;
 }
 .form {
     height: 100%;
@@ -73,11 +73,6 @@ vn-bg-title {
     padding: $spacing-lg;
     max-width: 1000px;
 }
-html [fixed-bottom-right] {
-    position: fixed;
-    bottom: 2em;
-    right: 2em;
-}
 .list > vn-none {
     min-width: 60px;
 }
@@ -103,13 +98,13 @@ vn-tool-bar {
     display: flex;
 
     & > * {
-        margin-right: .6em;
+        margin-right: 9px;
     }
 }
 html [scrollable] {
     min-height: 1px;
     flex: 1;
-    flex-basis: 0.000000001px;
+    flex-basis: .1px;
 }
 .ellipsize {
     text-overflow: ellipsis;
@@ -120,7 +115,7 @@ html [scrollable] {
     @extend %active;
 
     &.small {
-        font-size: 0.7em
+        font-size: .7rem
     }
 }
 

front/salix/styles/order-product.scss

@@ -8,16 +8,16 @@
     & > .product {
         box-sizing: border-box;
         padding: $spacing-sm;
-        width: 28em;
+        width: 448px;
         overflow: hidden;
 
         & > vn-card {
             display: flex;
-            height: 12em;
+            height: 192px;
 
             .image {
-                width: 12em;
+                width: 192px;
-                height: 12em;
+                height: 192px;
 
                 img {
                     width: 100%;
@@ -32,37 +32,37 @@
                 height: 100%;
                 width: 100%;
                 overflow: hidden;
-                padding: .8em;
+                padding: 12px;
 
                 & > h3 {
                     font-family: vn-font;
                     margin: 0;
-                    margin-bottom: .3em;
+                    margin-bottom: 4px;
                     font-weight: normal;
                     line-height: initial;
-                    font-size: 1.05em;
+                    font-size: 1rem;
-                    max-height:2.4em;
+                    max-height: 38px;
                     overflow: hidden;
                 }
                 & > h4 {
                     color: $color-font-secondary;
                     text-transform: uppercase;
-                    margin-bottom: .3em;
+                    margin-bottom: 4px;
                     line-height: initial;
-                    font-size: 1em;
+                    font-size: 1rem;
                     flex: 1;
                 }
                 & > .tags {
-                    padding-bottom: .2em;
+                    padding-bottom: 3px;
-                    height: 3em;
+                    height: 48px;
 
                     & > vn-label-value {
-                        font-size: .8em;
+                        font-size: .75rem;
                     }
                 }  
             }
             .footer {
-                font-size: .8em;
+                font-size: .8rem;
 
                 & > .price {
                     overflow: hidden;
@@ -77,7 +77,7 @@
 
                         &:first-child,
                         &:last-child {
-                            font-size: 1.4em;
+                            font-size: 1.375rem;
                         }
                     }
 
@@ -87,7 +87,7 @@
                 } 
                 & > .priceKg {
                     color: $color-font-secondary;
-                    font-size: .8em;
+                    font-size: .75rem;
                 }
             }
         }

front/salix/styles/photo-list.scss

@@ -8,10 +8,10 @@
     
     .photo {
         box-sizing: border-box;
-        transition: all 0.5s;
+        transition: all .5s;
         padding: $spacing-sm;
         position: relative;
-        width: 28em;
+        width: 448px;
 
         .image {
             box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),
@@ -30,8 +30,8 @@
         }
         .actions {
             position: absolute;
-            right: 1em;
+            right: 16px;
-            top: 1em
+            top: 16px
         }
     }
     .photo:hover .image {

loopback/locale/en.json

@@ -62,6 +62,7 @@
 	"MESSAGE_INSURANCE_CHANGE": "I have changed the insurence credit of client [{{clientName}} (#{{clientId}})]({{{url}}}) to *{{credit}} €*",
 	"MESSAGE_CHANGED_PAYMETHOD": "I have changed the pay method for client [{{clientName}} (#{{clientId}})]({{{url}}})",
 	"Sent units from ticket": "I sent *{{quantity}}* units of [{{concept}} (#{{itemId}})]({{{itemUrl}}}) to *\"{{nickname}}\"* coming from ticket id [#{{ticketId}}]({{{ticketUrl}}})",
+	"This ticket is not an stowaway anymore": "The ticket id [#{{ticketId}}]({{{ticketUrl}}}) is not an stowaway anymore",
 	"Customs agent is required for a non UEE member": "Customs agent is required for a non UEE member",
 	"Incoterms is required for a non UEE member": "Incoterms is required for a non UEE member",
 	"Client checked as validated despite of duplication": "Client checked as validated despite of duplication from client id {{clientId}}",

loopback/locale/es.json

@@ -125,6 +125,7 @@
 	"MESSAGE_INSURANCE_CHANGE": "He cambiado el crédito asegurado del cliente [{{clientName}} (#{{clientId}})]({{{url}}}) a *{{credit}} €*",
 	"MESSAGE_CHANGED_PAYMETHOD": "He cambiado la forma de pago del cliente [{{clientName}} (#{{clientId}})]({{{url}}})",
 	"Sent units from ticket": "Envio *{{quantity}}* unidades de [{{concept}} (#{{itemId}})]({{{itemUrl}}}) a *\"{{nickname}}\"* provenientes del ticket id [#{{ticketId}}]({{{ticketUrl}}})",
+	"This ticket is not an stowaway anymore": "El ticket id [#{{ticketId}}]({{{ticketUrl}}}) ha dejado de ser un polizón",
 	"Client checked as validated despite of duplication": "Cliente comprobado a pesar de que existe el cliente id {{clientId}}",
 	"ORDER_ROW_UNAVAILABLE": "No hay disponibilidad de este producto",
 	"Distance must be lesser than 1000": "La distancia debe ser inferior a 1000",

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 = {