diff --git a/e2e/paths/ticket-module/06_edit_basic_data_steps.spec.js b/e2e/paths/ticket-module/06_edit_basic_data_steps.spec.js index d48b67c81..067cc55e4 100644 --- a/e2e/paths/ticket-module/06_edit_basic_data_steps.spec.js +++ b/e2e/paths/ticket-module/06_edit_basic_data_steps.spec.js @@ -73,7 +73,7 @@ describe('Ticket Edit basic data path', () => { .wait(1900) .waitToGetProperty(selectors.ticketBasicData.stepTwoTotalPriceDif, 'innerText'); - expect(result).toContain('-€187.75'); + expect(result).toContain('-€208.75'); }); it(`should then click next to move on to step three`, async() => { diff --git a/front/core/components/td-editable/index.html b/front/core/components/td-editable/index.html index 14336126d..8a1e33fe8 100644 --- a/front/core/components/td-editable/index.html +++ b/front/core/components/td-editable/index.html @@ -1,4 +1,2 @@ - - -
+ \ No newline at end of file diff --git a/front/core/components/td-editable/index.js b/front/core/components/td-editable/index.js index 49a4c3dcd..a6be8b9b8 100644 --- a/front/core/components/td-editable/index.js +++ b/front/core/components/td-editable/index.js @@ -1,38 +1,58 @@ import ngModule from '../../module'; import Component from '../../lib/component'; +import {focus} from '../../directives/focus'; import './style.scss'; export default class Controller extends Component { - constructor($element, $scope, $transclude) { + constructor($element, $scope, $transclude, $timeout) { super($element, $scope); + this.$timeout = $timeout; let element = $element[0]; element.tabIndex = 0; element.addEventListener('focus', () => { + if (this.field) return; $transclude((tClone, tScope) => { this.field = tClone; this.tScope = tScope; this.element.querySelector('.field').appendChild(this.field[0]); + element.tabIndex = -1; + this.timer = $timeout(() => { + this.timer = null; + focus(this.field[0]); + }); }, null, 'field'); element.classList.add('selected'); }); element.addEventListener('focusout', event => { + this.destroyTimer(); this.lastEvent = event; let target = event.relatedTarget; - while (target && target.parentNode != element) + while (target && target != element) target = target.parentNode; if (!target) { this.tScope.$destroy(); this.field.remove(); + this.field = null; element.classList.remove('selected'); + element.tabIndex = 0; } }); } -} + destroyTimer() { + if (this.timer) { + this.$timeout.cancel(this.timer); + this.timer = null; + } + } -Controller.$inject = ['$element', '$scope', '$transclude']; + $onDestroy() { + this.destroyTimer(); + } +} +Controller.$inject = ['$element', '$scope', '$transclude', '$timeout']; ngModule.component('vnTdEditable', { template: require('./index.html'), diff --git a/front/core/components/td-editable/style.scss b/front/core/components/td-editable/style.scss index 563590b3d..5101fecf6 100644 --- a/front/core/components/td-editable/style.scss +++ b/front/core/components/td-editable/style.scss @@ -1,16 +1,40 @@ +@import "variables"; + vn-td-editable { cursor: pointer; - & > div.text-container{ - width: 100%; - } + outline: none; + position: relative; - &.selected { - & > .text-container{ - display: none; + &.selected > .text { + visibility: hidden; + } + & > .field { + display: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + box-sizing: border-box; + align-items: center; + padding: .6em; + overflow: visible; + + & > field { + flex: 1; + background-color: $color-bg-panel; + padding: .5em; + box-shadow: 0 0 .4em rgba(0, 0, 0, .2); + border-radius: .1em; + min-width: 6em; + + & > * { + width: 100%; + max-width: initial; + } } } - - vn-icon { - font-size: 1em; + &.selected > .field { + display: flex; } } \ No newline at end of file diff --git a/front/core/directives/focus.js b/front/core/directives/focus.js index 26376a260..91fcffbb2 100644 --- a/front/core/directives/focus.js +++ b/front/core/directives/focus.js @@ -1,5 +1,22 @@ import ngModule from '../module'; +export function focus(input) { + let selector = 'input, textarea, button, submit'; + + if (!input.matches(selector)) + input = input.querySelector(selector); + + if (!input) { + console.warn(`vnFocus: Can't find a focusable element`); + return; + } + + input.focus(); + + if (input.select) + input.select(); +} + /** * Sets the focus and selects the text on the input. * @@ -8,24 +25,8 @@ import ngModule from '../module'; export function directive() { return { restrict: 'A', - link: function($scope, $element, $attrs) { - $scope.$watch('', function() { - let input = $element[0]; - let selector = 'input, textarea, button, submit'; - - if (!input.matches(selector)) - input = input.querySelector(selector); - - if (!input) { - console.warn(`vnFocus: Can't find a focusable element`); - return; - } - - input.focus(); - - if (input.select) - input.select(); - }); + link: function($scope, $element) { + $scope.$watch('', () => focus($element[0])); } }; } diff --git a/services/db/install/dump/fixtures.sql b/services/db/install/dump/fixtures.sql index b97fb8511..08ca8c5bc 100644 --- a/services/db/install/dump/fixtures.sql +++ b/services/db/install/dump/fixtures.sql @@ -547,7 +547,7 @@ INSERT INTO `vn`.`sale`(`id`, `itemFk`, `ticketFk`, `concept`, `quantity`, `pric (5, 1, 2 , 'Object1 Gem1 5', 10, 9.10, 0, 0, 0, DATE_ADD(CURDATE(), INTERVAL -10 DAY)), (6, 1, 3 , 'Object1 Gem1 5', 15, 6.50, 0, 0, 0, DATE_ADD(CURDATE(), INTERVAL -5 DAY)), (7, 2, 11, 'Object2 Gem2 3', 15, 1.30, 0, 0, 0, CURDATE()), - (8, 4, 11, 'Object4 Armor2 2', 10, 3.26, 0, 0, 0, CURDATE()), + (8, 4, 11, 'Object4 Armor2 2', 10, 3.05, 0, 0, 0, CURDATE()), (9, 1, 16, 'Object1 Gem1 5', 5, 9.10, 0, 0, 0, CURDATE()), (10, 2, 16, 'Object2 Gem2 3', 10, 1.07, 0, 0, 0, CURDATE()), (11, 1, 16, 'Object1 Gem1 5', 2, 9.10, 0, 0, 0, CURDATE()),