From 5ae558e9656bb99a0c52d68b5d18ca3ee139a6d4 Mon Sep 17 00:00:00 2001 From: Juan Ferrer Toribio Date: Sat, 26 Oct 2019 12:04:48 +0200 Subject: [PATCH] Watchers performance fixes --- e2e/helpers/selectors.js | 2 +- front/core/components/check/index.spec.js | 32 ++++----- front/core/components/drop-down/drop-down.js | 13 +++- front/core/components/index.js | 3 +- front/core/components/label-value/index.html | 9 +++ front/core/components/label-value/index.js | 54 ++++++++++++++ .../core/components/label-value/index.spec.js | 36 ++++++++++ .../components/label-value/label-value.html | 15 ---- .../components/label-value/label-value.js | 70 ------------------- .../label-value/label-value.spec.js | 38 ---------- front/core/components/label-value/style.scss | 7 -- front/core/components/label/index.js | 1 + front/core/components/label/style.scss | 9 +++ front/core/lib/component.js | 21 ++++-- front/salix/components/home/home.html | 33 +++++---- .../salix/components/user-popover/index.html | 2 +- modules/client/front/index/index.html | 14 ++-- modules/ticket/front/summary/index.html | 8 +-- 18 files changed, 185 insertions(+), 182 deletions(-) create mode 100644 front/core/components/label-value/index.html create mode 100644 front/core/components/label-value/index.js create mode 100644 front/core/components/label-value/index.spec.js delete mode 100644 front/core/components/label-value/label-value.html delete mode 100644 front/core/components/label-value/label-value.js delete mode 100644 front/core/components/label-value/label-value.spec.js create mode 100644 front/core/components/label/index.js create mode 100644 front/core/components/label/style.scss diff --git a/e2e/helpers/selectors.js b/e2e/helpers/selectors.js index 91bebf0ba..2b9caacd5 100644 --- a/e2e/helpers/selectors.js +++ b/e2e/helpers/selectors.js @@ -309,7 +309,7 @@ export default { ticketSummary: { header: 'vn-ticket-summary > vn-card > h5', state: 'vn-ticket-summary vn-label-value[label="State"] > section > span', - route: 'vn-ticket-summary vn-label-value[label="Route"] > section > a', + route: 'vn-ticket-summary vn-label-value[label="Route"] > section > span > a', total: 'vn-ticket-summary vn-one.taxes > p:nth-child(3) > strong', sale: 'vn-ticket-summary [name="sales"] vn-table > div > vn-tbody > vn-tr', firstSaleItemId: 'vn-ticket-summary [name="sales"] vn-table > div > vn-tbody > vn-tr > vn-td:nth-child(2) > span', diff --git a/front/core/components/check/index.spec.js b/front/core/components/check/index.spec.js index 75388d66a..c9d50cab2 100644 --- a/front/core/components/check/index.spec.js +++ b/front/core/components/check/index.spec.js @@ -1,13 +1,13 @@ describe('Component vnCheck', () => { let $element; - let $ctrl; + let controller; let element; beforeEach(ngModule('vnCore')); beforeEach(inject(($compile, $rootScope) => { $element = $compile(``)($rootScope); - $ctrl = $element.controller('vnCheck'); + controller = $element.controller('vnCheck'); element = $element[0]; })); @@ -17,46 +17,46 @@ describe('Component vnCheck', () => { describe('field() setter', () => { it(`should set model value`, () => { - $ctrl.field = true; + controller.field = true; - expect($ctrl.field).toEqual(true); + expect(controller.field).toEqual(true); }); it(`should uncheck value and change to true when clicked`, () => { - $ctrl.field = false; + controller.field = false; element.click(); - expect($ctrl.field).toEqual(true); + expect(controller.field).toEqual(true); }); it(`should check value and change to false when clicked`, () => { - $ctrl.field = true; + controller.field = true; element.click(); - expect($ctrl.field).toEqual(false); + expect(controller.field).toEqual(false); }); it(`should check value and change to false when clicked`, () => { - $ctrl.field = true; - $ctrl.tripleState = true; + controller.field = true; + controller.tripleState = true; element.click(); - expect($ctrl.field).toEqual(false); + expect(controller.field).toEqual(false); }); it(`should set value to null and change to true when clicked`, () => { - $ctrl.field = null; - $ctrl.tripleState = true; + controller.field = null; + controller.tripleState = true; element.click(); - expect($ctrl.field).toEqual(true); + expect(controller.field).toEqual(true); }); it(`should cast value to boolean when clicked`, () => { - $ctrl.field = 0; + controller.field = 0; element.click(); - expect($ctrl.field).toEqual(true); + expect(controller.field).toEqual(true); }); }); }); diff --git a/front/core/components/drop-down/drop-down.js b/front/core/components/drop-down/drop-down.js index c2463e6c5..84313814c 100755 --- a/front/core/components/drop-down/drop-down.js +++ b/front/core/components/drop-down/drop-down.js @@ -25,13 +25,10 @@ export default class DropDown extends Component { this._activeOption = -1; this.showLoadMore = true; this.showFilter = true; - - this.docKeyDownHandler = e => this.onDocKeyDown(e); } $postLink() { super.$postLink(); - this.$.list.addEventListener('scroll', e => this.onScroll(e)); } get shown() { @@ -191,14 +188,24 @@ export default class DropDown extends Component { } onOpen() { + this.docKeyDownHandler = e => this.onDocKeyDown(e); this.document.addEventListener('keydown', this.docKeyDownHandler); + + this.listScrollHandler = e => this.onScroll(e); + this.$.list.addEventListener('scroll', this.listScrollHandler); this.$.list.scrollTop = 0; + setTimeout(() => this.$.input.focus()); this.emit('open'); } onClose() { this.document.removeEventListener('keydown', this.docKeyDownHandler); + this.docKeyDownHandler = null; + + this.$.list.removeEventListener('scroll', this.listScrollHandler); + this.listScrollHandler = null; + this.emit('close'); } diff --git a/front/core/components/index.js b/front/core/components/index.js index 21a40d052..700765767 100644 --- a/front/core/components/index.js +++ b/front/core/components/index.js @@ -16,7 +16,6 @@ import './menu/menu'; import './multi-check/multi-check'; import './card/card'; import './step-control/step-control'; -import './label-value/label-value'; import './pagination/pagination'; import './searchbar/searchbar'; import './scroll-up/scroll-up'; @@ -34,9 +33,11 @@ import './float-button'; import './icon-menu'; import './icon-button'; import './input-number'; +import './label-value'; import './range'; import './input-time'; import './input-file'; +import './label'; import './list'; import './radio'; import './submit'; diff --git a/front/core/components/label-value/index.html b/front/core/components/label-value/index.html new file mode 100644 index 000000000..d1818821a --- /dev/null +++ b/front/core/components/label-value/index.html @@ -0,0 +1,9 @@ +
+ + + + +
\ No newline at end of file diff --git a/front/core/components/label-value/index.js b/front/core/components/label-value/index.js new file mode 100644 index 000000000..71863f867 --- /dev/null +++ b/front/core/components/label-value/index.js @@ -0,0 +1,54 @@ +import ngModule from '../../module'; +import Component from 'core/lib/component'; +import './style.scss'; + +/** + * Simple component to display a label with it's correspoding value. If @info + * property is provided it displays an aditional icon with the provided + * information. + * + * IMPORTANT! + * + * Please keep this component as simple as possible and without persistent + * watchers because it's used a lot of times in the application and could cause + * performance issues. + * + * @property {String} label The label + * @property {*} value The value + * @property {String} info Aditional information to display + */ +export default class Controller extends Component { + get label() { + return this._label; + } + + set label(value) { + this._label = value; + + let label = this.element.querySelector('vn-label'); + label.textContent = this.$t(value); + } + + get value() { + return this._value; + } + + set value(value) { + this._value = value; + + let span = this.element.querySelector('span'); + span.title = value; + span.textContent = value != null && value != '' ? value : '-'; + } +} + +ngModule.component('vnLabelValue', { + controller: Controller, + template: require('./index.html'), + transclude: true, + bindings: { + label: '@', + value: '@?', + info: '@?' + } +}); diff --git a/front/core/components/label-value/index.spec.js b/front/core/components/label-value/index.spec.js new file mode 100644 index 000000000..39d8ff56b --- /dev/null +++ b/front/core/components/label-value/index.spec.js @@ -0,0 +1,36 @@ +import './index.js'; + +describe('Component vnLabelValue', () => { + let $element; + let controller; + let element; + + beforeEach(ngModule('vnCore')); + + beforeEach(inject(($compile, $rootScope) => { + $element = $compile(``)($rootScope); + controller = $element.controller('vnLabelValue'); + element = $element[0]; + })); + + afterEach(() => { + $element.remove(); + }); + + describe('value() setter', () => { + it(`should set the value on the span element`, () => { + const value = 'I am the value'; + controller.value = value; + + expect(element.querySelector('span').textContent).toEqual(value); + expect(element.querySelector('span').title).toEqual(value); + }); + + it(`should set a dash when no value is provided`, () => { + const value = null; + controller.value = value; + + expect(element.querySelector('span').textContent).toEqual('-'); + }); + }); +}); diff --git a/front/core/components/label-value/label-value.html b/front/core/components/label-value/label-value.html deleted file mode 100644 index 138e593c2..000000000 --- a/front/core/components/label-value/label-value.html +++ /dev/null @@ -1,15 +0,0 @@ -
- - - - - - - -
\ No newline at end of file diff --git a/front/core/components/label-value/label-value.js b/front/core/components/label-value/label-value.js deleted file mode 100644 index e641ede13..000000000 --- a/front/core/components/label-value/label-value.js +++ /dev/null @@ -1,70 +0,0 @@ -import ngModule from '../../module'; -import Component from 'core/lib/component'; -import './style.scss'; - -export default class Controller extends Component { - constructor($element, $, $attrs) { - super($element, $); - this.hasInfo = Boolean($attrs.info); - this.info = $attrs.info || null; - } - - set label(value) { - let label = this.element.querySelector('vn-label'); - label.textContent = this.$t(value); - this._label = value; - } - - get label() { - return this._label; - } - - get state() { - return this._state; - } - - set state(value) { - this._state = value; - this.applyTextContent(); - } - - get value() { - return this._value; - } - - set value(value) { - this._value = value; - this.applyTextContent(); - } - - get title() { - return this._title; - } - - set title(value) { - let span = this.element.querySelector('span'); - span.title = value; - this._title = value; - } - - applyTextContent() { - const targetElement = this.state ? 'a' : 'span'; - const element = this.element.querySelector(targetElement); - const hasValue = this.value && this.value != ''; - element.title = this.value; - element.textContent = hasValue ? this.value : '-'; - } -} -Controller.$inject = ['$element', '$scope', '$attrs']; - -ngModule.component('vnLabelValue', { - controller: Controller, - template: require('./label-value.html'), - bindings: { - title: '@?', - label: '@', - value: '@', - state: '@?', - stateParams: ' { - let $element; - let controller; - - beforeEach(ngModule('vnCore')); - - beforeEach(angular.mock.inject($componentController => { - const $attrs = {}; - $element = angular.element(`${template}`); - controller = $componentController('vnLabelValue', {$element, $attrs}); - })); - - describe('applyTextContent()', () => { - it(`should set the value on the span element as there's no navigation setted`, () => { - const value = 'I am the value'; - controller.value = value; - controller.title = value; - controller.applyTextContent(); - - expect(controller.element.querySelector('span').textContent).toEqual(value); - expect(controller.element.querySelector('span').title).toEqual(value); - }); - - it(`should set the value on the anchor element as there's a navigation setted`, () => { - const value = 'I am the value'; - controller.value = value; - controller.title = value; - controller.state = 'some.state.to.go'; - controller.applyTextContent(); - - expect(controller.element.querySelector('a').textContent).toEqual(value); - expect(controller.element.querySelector('a').title).toEqual(value); - }); - }); -}); diff --git a/front/core/components/label-value/style.scss b/front/core/components/label-value/style.scss index d512e51d1..e4a2cca03 100644 --- a/front/core/components/label-value/style.scss +++ b/front/core/components/label-value/style.scss @@ -1,13 +1,6 @@ @import "variables"; vn-label-value > section { - & > vn-label { - color: $color-font-secondary; - - &::after { - content: ':'; - } - } & > vn-icon { vertical-align: middle; color: $color-font-secondary; diff --git a/front/core/components/label/index.js b/front/core/components/label/index.js new file mode 100644 index 000000000..423b033ce --- /dev/null +++ b/front/core/components/label/index.js @@ -0,0 +1 @@ +import './style.scss'; diff --git a/front/core/components/label/style.scss b/front/core/components/label/style.scss new file mode 100644 index 000000000..ef9080f65 --- /dev/null +++ b/front/core/components/label/style.scss @@ -0,0 +1,9 @@ +@import "variables"; + +vn-label { + color: $color-font-secondary; + + &::after { + content: ':'; + } +} \ No newline at end of file diff --git a/front/core/lib/component.js b/front/core/lib/component.js index 5288ae873..6373ee7a1 100644 --- a/front/core/lib/component.js +++ b/front/core/lib/component.js @@ -59,16 +59,29 @@ export default class Component extends EventEmitter { } Component.$inject = ['$element', '$scope']; -function runFn($translate, $q, $http, vnApp, $state, $stateParams) { +function runFn($translate, $q, $http, $state, $stateParams, $timeout, $transitions, $compile, vnApp) { Object.assign(Component.prototype, { $translate, $q, $http, - vnApp, $state, - $params: $stateParams + $params: $stateParams, + $timeout, + $transitions, + $compile, + vnApp }); } -runFn.$inject = ['$translate', '$q', '$http', 'vnApp', '$state', '$stateParams']; +runFn.$inject = [ + '$translate', + '$q', + '$http', + '$state', + '$stateParams', + '$timeout', + '$transitions', + '$compile', + 'vnApp' +]; ngModule.run(runFn); diff --git a/front/salix/components/home/home.html b/front/salix/components/home/home.html index 95bec4e5a..47307d22e 100644 --- a/front/salix/components/home/home.html +++ b/front/salix/components/home/home.html @@ -1,21 +1,20 @@
- -
- -
-

- - ({{::mod.keyBind}}) - -   - - + +
+ +
+

+ + ({{::mod.keyBind}}) + +   +
diff --git a/front/salix/components/user-popover/index.html b/front/salix/components/user-popover/index.html index b6ce8b1cd..1e17313f1 100644 --- a/front/salix/components/user-popover/index.html +++ b/front/salix/components/user-popover/index.html @@ -20,7 +20,7 @@ {{$root.user.nickname}}
- {{$root.user.name}} + {{::$root.user.name}}
diff --git a/modules/client/front/index/index.html b/modules/client/front/index/index.html index 2e0527fec..0213bc04f 100644 --- a/modules/client/front/index/index.html +++ b/modules/client/front/index/index.html @@ -22,22 +22,26 @@
{{::client.name}}
- - - - diff --git a/modules/ticket/front/summary/index.html b/modules/ticket/front/summary/index.html index 83cdd8e40..6307633de 100644 --- a/modules/ticket/front/summary/index.html +++ b/modules/ticket/front/summary/index.html @@ -41,10 +41,10 @@ - + + + {{$ctrl.summary.routeFk}} +