Merge branch 'master' into dev
This commit is contained in:
commit
4f1a1ae004
|
@ -5,7 +5,7 @@
|
|||
<vn-icon-button
|
||||
ng-if="$ctrl.displayControls"
|
||||
icon="remove"
|
||||
ng-click="$ctrl.remove()"
|
||||
ng-click="$ctrl.stepDown()"
|
||||
tabindex="-1"
|
||||
translate-attr="{title: 'Remove'}">
|
||||
</vn-icon-button>
|
||||
|
@ -30,7 +30,7 @@
|
|||
<vn-icon-button
|
||||
ng-if="$ctrl.displayControls"
|
||||
icon="add"
|
||||
ng-click="$ctrl.add()"
|
||||
ng-click="$ctrl.stepUp()"
|
||||
tabindex="-1"
|
||||
translate-attr="{title: 'Add'}">
|
||||
</vn-icon-button>
|
||||
|
|
|
@ -5,9 +5,11 @@ import './style.scss';
|
|||
export default class InputNumber extends Input {
|
||||
constructor($element, $scope, $attrs, vnTemplate) {
|
||||
super($element, $scope);
|
||||
vnTemplate.normalizeInputAttrs($attrs);
|
||||
this.displayControls = true;
|
||||
this.displayControls = false;
|
||||
this.hasFocus = false;
|
||||
|
||||
vnTemplate.normalizeInputAttrs($attrs);
|
||||
|
||||
this.registerEvents();
|
||||
}
|
||||
|
||||
|
@ -15,8 +17,11 @@ export default class InputNumber extends Input {
|
|||
* Registers all event emitters
|
||||
*/
|
||||
registerEvents() {
|
||||
this.input.addEventListener('change', () => {
|
||||
this.validateValue();
|
||||
this.input.addEventListener('change', event => {
|
||||
if (!isNaN(this.value))
|
||||
this.input.value = this.value;
|
||||
|
||||
this.emit('change', {event});
|
||||
});
|
||||
|
||||
this.input.addEventListener('focus', event => {
|
||||
|
@ -24,80 +29,118 @@ export default class InputNumber extends Input {
|
|||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets current value
|
||||
*/
|
||||
get value() {
|
||||
return this._value;
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets input value
|
||||
*
|
||||
* @param {Number} value - Value
|
||||
*/
|
||||
set value(value) {
|
||||
this._value = value;
|
||||
this.hasValue = this._value !== null;
|
||||
this.input.value = this._value;
|
||||
|
||||
if (this.hasValue) this.element.classList.add('not-empty');
|
||||
else this.element.classList.remove('not-empty');
|
||||
if (this.hasValue)
|
||||
this.element.classList.add('not-empty');
|
||||
else
|
||||
this.element.classList.remove('not-empty');
|
||||
|
||||
this.element.querySelector('.infix').classList.remove('invalid', 'validated');
|
||||
this.validateValue();
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets max value
|
||||
*/
|
||||
get max() {
|
||||
return this.input.max;
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets max allowed value
|
||||
*
|
||||
* @param {Number} value - Value
|
||||
*/
|
||||
set max(value) {
|
||||
if (value)
|
||||
this.input.max = value;
|
||||
if (value) this.input.max = value;
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets min value
|
||||
*/
|
||||
get min() {
|
||||
return this.input.min;
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets min allowed value
|
||||
*
|
||||
* @param {Number} value - Value
|
||||
*/
|
||||
set min(value) {
|
||||
if (!value) value = 0;
|
||||
this.input.min = value;
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets min step value
|
||||
*/
|
||||
get step() {
|
||||
return parseFloat(this.input.step);
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets min step value
|
||||
*
|
||||
* @param {Number} value - Value
|
||||
*/
|
||||
set step(value) {
|
||||
this.input.step = value;
|
||||
}
|
||||
|
||||
/**
|
||||
* Increases the input value
|
||||
*/
|
||||
stepUp() {
|
||||
this.input.stepUp();
|
||||
}
|
||||
|
||||
/**
|
||||
* Decreases the input value
|
||||
*/
|
||||
stepDown() {
|
||||
this.input.stepDown();
|
||||
}
|
||||
|
||||
/**
|
||||
* Validates a valid input value
|
||||
*
|
||||
* @return {Boolean} - True if has a valid value
|
||||
*/
|
||||
hasValidValue() {
|
||||
return this.input.checkValidity();
|
||||
}
|
||||
|
||||
/**
|
||||
* Changes the input element
|
||||
* if has a validation error
|
||||
*/
|
||||
validateValue() {
|
||||
if ((this.validate() !== undefined && !this.validate()) ||
|
||||
(this.max && this.value > this.max) ||
|
||||
(this.min && this.value < this.min) ||
|
||||
(this.displayControls && (this.step && this.value % this.step != 0)))
|
||||
this.$element[0].querySelector('.infix').classList.add('invalid', 'validated');
|
||||
|
||||
|
||||
if (this.onChange)
|
||||
this.onChange();
|
||||
}
|
||||
|
||||
add() {
|
||||
if (this.step && this.value % this.step != 0)
|
||||
this.value += (this.step - this.value % this.step);
|
||||
else
|
||||
this.value += this.step;
|
||||
|
||||
|
||||
this.validateValue();
|
||||
}
|
||||
|
||||
remove() {
|
||||
if (this.step && this.value % this.step != 0)
|
||||
this.value -= (this.step + this.value % this.step);
|
||||
else
|
||||
this.value -= this.step;
|
||||
|
||||
this.validateValue();
|
||||
if (!this.hasValidValue()) {
|
||||
this.element.querySelector('.infix')
|
||||
.classList.add('invalid', 'validated');
|
||||
} else {
|
||||
this.element.querySelector('.infix')
|
||||
.classList.remove('invalid', 'validated');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
InputNumber.$inject = ['$element', '$scope', '$attrs', 'vnTemplate', '$transclude'];
|
||||
InputNumber.$inject = ['$element', '$scope', '$attrs', 'vnTemplate'];
|
||||
|
||||
ngModule.component('vnInputNumber', {
|
||||
template: require('./index.html'),
|
||||
|
|
|
@ -12,144 +12,55 @@ describe('Component vnInputNumber', () => {
|
|||
beforeEach(angular.mock.inject(($componentController, $rootScope) => {
|
||||
$scope = $rootScope.$new();
|
||||
$attrs = {};
|
||||
$element = angular.element('<div><input><div class="infix invalid validated"><div class="rightIcons"></div></div>');
|
||||
$element = angular.element('<div><input type="number"><div class="infix"><div class="rightIcons"></div></div>');
|
||||
controller = $componentController('vnInputNumber', {$element, $scope, $attrs, $timeout, $transclude: () => {}});
|
||||
controller.input = $element[0].querySelector('input');
|
||||
controller.validate = () => {};
|
||||
}));
|
||||
|
||||
describe('value() setter', () => {
|
||||
it(`should set _value to a given value, add the class not-empty and remove invalid and validated`, () => {
|
||||
controller.value = 'pepino';
|
||||
it(`should set a value, add the class 'not-empty' and then call validateValue() method`, () => {
|
||||
spyOn(controller, 'validateValue');
|
||||
|
||||
controller.value = 10;
|
||||
|
||||
let classes = controller.element.classList.toString();
|
||||
|
||||
expect(classes).toContain('not-empty');
|
||||
expect(controller._value).toEqual('pepino');
|
||||
|
||||
classes = controller.element.querySelector('.infix').classList.toString();
|
||||
|
||||
expect(classes).not.toContain('invalid validated');
|
||||
expect(controller.validateValue).toHaveBeenCalledWith();
|
||||
});
|
||||
|
||||
it(`should set _value to a given value and not add the class not-empty if the given value is null`, () => {
|
||||
it(`should set an empty value, remove the class 'not-empty' and then call validateValue() method`, () => {
|
||||
spyOn(controller, 'validateValue');
|
||||
|
||||
controller.value = null;
|
||||
|
||||
let classes = controller.element.classList.toString();
|
||||
|
||||
expect(classes).not.toContain('not-empty');
|
||||
expect(controller._value).toEqual(null);
|
||||
});
|
||||
});
|
||||
|
||||
describe('max() setter', () => {
|
||||
it(`should set input.max to a given value`, () => {
|
||||
controller.max = 10;
|
||||
|
||||
expect(controller.input.max).toEqual('10');
|
||||
});
|
||||
});
|
||||
|
||||
describe('min() setter', () => {
|
||||
it(`should set input.min if theres a given value`, () => {
|
||||
controller.min = 1;
|
||||
|
||||
expect(controller.input.min).toEqual('1');
|
||||
});
|
||||
|
||||
it(`should set input.min to 0 if theres not a given value`, () => {
|
||||
controller.min = null;
|
||||
|
||||
expect(controller.input.min).toEqual('0');
|
||||
});
|
||||
});
|
||||
|
||||
describe('step() setter/getter', () => {
|
||||
it(`should set input.step to a given value`, () => {
|
||||
controller.step = 50;
|
||||
|
||||
expect(controller.input.step).toEqual('50');
|
||||
});
|
||||
|
||||
it(`should return a number`, () => {
|
||||
controller.step = 50;
|
||||
|
||||
expect(controller.step).toEqual(50);
|
||||
expect(typeof controller.step).toEqual('number');
|
||||
expect(controller.validateValue).toHaveBeenCalledWith();
|
||||
});
|
||||
});
|
||||
|
||||
describe('validateValue()', () => {
|
||||
it(`should add the classes invalid and validated if the value is less than min`, () => {
|
||||
controller.validate = () => {};
|
||||
controller.min = 0;
|
||||
controller.value = -7;
|
||||
it(`should call hasValidValue() and not add the class invalid and validated`, () => {
|
||||
controller.input.min = 0;
|
||||
controller.input.value = 10;
|
||||
|
||||
controller.validateValue();
|
||||
let classes = controller.element.querySelector('.infix').classList.toString();
|
||||
|
||||
expect(classes).not.toContain('invalid validated');
|
||||
expect(controller.value).toEqual(-7);
|
||||
|
||||
controller.validateValue();
|
||||
classes = controller.element.querySelector('.infix').classList.toString();
|
||||
|
||||
expect(classes).toContain('infix invalid validated');
|
||||
});
|
||||
|
||||
it(`should add the classes invalid and validated if the value is greater than max`, () => {
|
||||
controller.validate = () => {};
|
||||
controller.max = 10;
|
||||
controller.value = 15;
|
||||
it(`should call hasValidValue() and add the class invalid and validated`, () => {
|
||||
controller.input.min = 0;
|
||||
controller.input.value = -10;
|
||||
|
||||
controller.validateValue();
|
||||
let classes = controller.element.querySelector('.infix').classList.toString();
|
||||
|
||||
expect(classes).not.toContain('invalid validated');
|
||||
expect(controller.value).toEqual(15);
|
||||
|
||||
controller.validateValue();
|
||||
classes = controller.element.querySelector('.infix').classList.toString();
|
||||
|
||||
expect(classes).toContain('infix invalid validated');
|
||||
});
|
||||
|
||||
it(`should add the classes invalid and validated if the value is not a valid step`, () => {
|
||||
controller.validate = () => {};
|
||||
controller.step = 5;
|
||||
controller.value = 7;
|
||||
let classes = controller.element.querySelector('.infix').classList.toString();
|
||||
|
||||
expect(classes).not.toContain('invalid validated');
|
||||
expect(controller.value).toEqual(7);
|
||||
|
||||
controller.validateValue();
|
||||
classes = controller.element.querySelector('.infix').classList.toString();
|
||||
|
||||
expect(classes).toContain('infix invalid validated');
|
||||
});
|
||||
|
||||
it(`should add the classes invalid and validated if the function validate returns false`, () => {
|
||||
controller.validate = () => {
|
||||
return false;
|
||||
};
|
||||
controller.step = 5;
|
||||
controller.value = 7;
|
||||
let classes = controller.element.querySelector('.infix').classList.toString();
|
||||
|
||||
expect(classes).not.toContain('invalid validated');
|
||||
expect(controller.value).toEqual(7);
|
||||
|
||||
controller.validateValue();
|
||||
classes = controller.element.querySelector('.infix').classList.toString();
|
||||
|
||||
expect(classes).toContain('infix invalid validated');
|
||||
});
|
||||
});
|
||||
|
||||
describe('add()', () => {
|
||||
it(`should set value to the next possible step and call validateValue`, () => {
|
||||
spyOn(controller, 'validateValue');
|
||||
|
||||
controller.step = 50;
|
||||
controller.value = -1;
|
||||
|
||||
controller.remove();
|
||||
|
||||
expect(controller.value).toEqual(-50);
|
||||
expect(controller.validateValue).toHaveBeenCalledWith();
|
||||
expect(classes).toContain('invalid validated');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
@ -37,8 +37,7 @@
|
|||
min="0"
|
||||
step="1"
|
||||
label="Traveling days"
|
||||
field="$ctrl.zone.travelingDays"
|
||||
display-controls="false">
|
||||
field="$ctrl.zone.travelingDays">
|
||||
</vn-input-number>
|
||||
<vn-input-time
|
||||
vn-two
|
||||
|
@ -51,15 +50,13 @@
|
|||
label="Price"
|
||||
field="$ctrl.zone.price"
|
||||
min="0.00"
|
||||
step="0.10"
|
||||
display-controls="false">
|
||||
step="0.10">
|
||||
</vn-input-number>
|
||||
<vn-input-number vn-one
|
||||
label="Bonus"
|
||||
field="$ctrl.zone.bonus"
|
||||
min="0.00"
|
||||
step="0.10"
|
||||
display-controls="false">
|
||||
step="0.10">
|
||||
</vn-input-number>
|
||||
</vn-horizontal>
|
||||
<vn-horizontal>
|
||||
|
|
|
@ -39,8 +39,7 @@
|
|||
value="$ctrl.zone.travelingDays"
|
||||
step="1"
|
||||
label="Traveling days"
|
||||
field="$ctrl.zone.travelingDays"
|
||||
display-controls="false">
|
||||
field="$ctrl.zone.travelingDays">
|
||||
</vn-input-number>
|
||||
<vn-input-time
|
||||
vn-two
|
||||
|
@ -53,15 +52,13 @@
|
|||
label="Price"
|
||||
field="$ctrl.zone.price"
|
||||
min="0.00"
|
||||
step="0.10"
|
||||
display-controls="false">
|
||||
step="0.10">
|
||||
</vn-input-number>
|
||||
<vn-input-number vn-one
|
||||
label="Bonus"
|
||||
field="$ctrl.zone.bonus"
|
||||
min="0.00"
|
||||
step="0.10"
|
||||
display-controls="false">
|
||||
step="0.10">
|
||||
</vn-input-number>
|
||||
</vn-horizontal>
|
||||
<vn-horizontal>
|
||||
|
|
|
@ -47,7 +47,6 @@
|
|||
<vn-td>
|
||||
<vn-input-number vn-focus min="0" step="1"
|
||||
model="saleClaimed.quantity"
|
||||
display-controls="false"
|
||||
on-change="$ctrl.setClaimedQuantity(saleClaimed.id, saleClaimed.quantity)">
|
||||
</vn-input-number>
|
||||
</vn-td>
|
||||
|
|
|
@ -2,14 +2,12 @@
|
|||
<vn-card pad-large>
|
||||
<vn-horizontal>
|
||||
<vn-input-number vn-one min="1"
|
||||
display-controls="false"
|
||||
label="Credit"
|
||||
model="$ctrl.creditClassification.credit",
|
||||
rule="creditInsurance.credit"
|
||||
vn-focus>
|
||||
</vn-input-number>
|
||||
<vn-input-number vn-one min="0" step="1"
|
||||
display-controls="false"
|
||||
label="Grade"
|
||||
model="$ctrl.creditClassification.grade"
|
||||
rule="CreditInsurance.grade">
|
||||
|
|
|
@ -9,9 +9,8 @@
|
|||
<vn-card pad-large>
|
||||
<vn-horizontal>
|
||||
<vn-input-number vn-one min="0"
|
||||
display-controls="false"
|
||||
label="Credit"
|
||||
model="$ctrl.insurance.credit",
|
||||
model="$ctrl.insurance.credit"
|
||||
rule="CreditInsurance.credit"
|
||||
vn-focus>
|
||||
</vn-input-number>
|
||||
|
@ -23,7 +22,6 @@
|
|||
</vn-horizontal>
|
||||
<vn-horizontal>
|
||||
<vn-input-number vn-one min="0" step="1"
|
||||
display-controls="false"
|
||||
label="Grade"
|
||||
model="$ctrl.insurance.grade"
|
||||
rule="CreditInsurance.grade">
|
||||
|
|
|
@ -8,9 +8,7 @@
|
|||
<form name="form" ng-submit="$ctrl.onSubmit()" compact>
|
||||
<vn-card pad-large>
|
||||
<vn-horizontal>
|
||||
<vn-input-number
|
||||
vn-one min="0"
|
||||
display-controls="false"
|
||||
<vn-input-number vn-one min="0"
|
||||
label="Credit"
|
||||
field="$ctrl.client.credit"
|
||||
vn-focus>
|
||||
|
|
|
@ -9,9 +9,8 @@
|
|||
<vn-card pad-large>
|
||||
<vn-horizontal>
|
||||
<vn-input-number vn-one vn-focus
|
||||
display-controls="false"
|
||||
label="Amount"
|
||||
field="$ctrl.greuge.amount">
|
||||
field="$ctrl.greuge.amount" step="0.01">
|
||||
</vn-input-number>
|
||||
<vn-date-picker vn-one
|
||||
label="Date"
|
||||
|
|
|
@ -8,30 +8,25 @@
|
|||
<form name="form" ng-submit="$ctrl.onSubmit()" compact>
|
||||
<vn-card pad-large>
|
||||
<vn-horizontal>
|
||||
<vn-date-picker
|
||||
vn-one
|
||||
<vn-date-picker vn-one
|
||||
label="Since"
|
||||
model="$ctrl.recovery.started"
|
||||
vn-focus
|
||||
ini-options="{enableTime: true}">
|
||||
</vn-date-picker>
|
||||
<vn-date-picker
|
||||
vn-one
|
||||
<vn-date-picker vn-one
|
||||
label="To"
|
||||
model="$ctrl.recovery.finished"
|
||||
ini-options="{enableTime: true}">
|
||||
</vn-date-picker>
|
||||
<vn-input-number vn-one vn-focus
|
||||
display-controls="false"
|
||||
label="Amount"
|
||||
field="$ctrl.recovery.amount">
|
||||
field="$ctrl.recovery.amount" step="0.01">
|
||||
</vn-input-number>
|
||||
<vn-textfield
|
||||
vn-one
|
||||
<vn-input-number vn-one
|
||||
label="Period"
|
||||
field="$ctrl.recovery.period"
|
||||
type="number">
|
||||
</vn-textfield>
|
||||
field="$ctrl.recovery.period">
|
||||
</vn-input-number>
|
||||
</vn-horizontal>
|
||||
</vn-card>
|
||||
<vn-button-bar>
|
||||
|
|
|
@ -29,9 +29,8 @@
|
|||
field="$ctrl.receipt.bankFk">
|
||||
</vn-textfield>
|
||||
<vn-input-number vn-one vn-focus
|
||||
display-controls="false"
|
||||
label="Amount"
|
||||
field="$ctrl.receipt.amountPaid">
|
||||
field="$ctrl.receipt.amountPaid" step="0.01">
|
||||
</vn-input-number>
|
||||
</vn-horizontal>
|
||||
</div>
|
||||
|
|
|
@ -63,25 +63,21 @@
|
|||
field="$ctrl.item.comment">
|
||||
</vn-textfield>
|
||||
<vn-input-number vn-one min="0"
|
||||
display-controls="false"
|
||||
label="Size"
|
||||
field="$ctrl.item.size">
|
||||
</vn-input-number>
|
||||
<vn-input-number vn-one min="0"
|
||||
display-controls="false"
|
||||
<vn-input-number vn-one min="0"
|
||||
label="stems"
|
||||
field="$ctrl.item.stems">
|
||||
</vn-input-number>
|
||||
</vn-horizontal>
|
||||
<vn-horizontal>
|
||||
<vn-input-number vn-one
|
||||
display-controls="false" min="0"
|
||||
<vn-input-number vn-one min="0"
|
||||
label="Density"
|
||||
field="$ctrl.item.density">
|
||||
</vn-input-number>
|
||||
<!-- <vn-textfield vn-one label="compression" field="$ctrl.item.compression"></vn-textfield> -->
|
||||
<vn-input-number vn-one
|
||||
display-controls="false" min="0"
|
||||
<vn-input-number vn-one min="0"
|
||||
label="Relevancy"
|
||||
field="$ctrl.item.relevancy">
|
||||
</vn-input-number>
|
||||
|
|
|
@ -26,7 +26,6 @@
|
|||
<tpl-item>{{itemFk}} : {{name}}</tpl-item>
|
||||
</vn-autocomplete>
|
||||
<vn-input-number vn-one min="1" step="1"
|
||||
display-controls="false"
|
||||
label="Quantity"
|
||||
model="package.quantity"
|
||||
rule="TicketPackaging.quantity">
|
||||
|
|
|
@ -22,13 +22,11 @@
|
|||
</vn-autocomplete>
|
||||
</vn-horizontal>
|
||||
<vn-horizontal>
|
||||
<vn-input-number vn-one min="1"
|
||||
display-controls="false"
|
||||
<vn-input-number vn-one min="1"
|
||||
label="Quantity"
|
||||
field="$ctrl.ticketRequest.quantity">
|
||||
</vn-input-number>
|
||||
<vn-input-number vn-one min="0"
|
||||
display-controls="false"
|
||||
<vn-input-number vn-one min="0"
|
||||
label="Price"
|
||||
field="$ctrl.ticketRequest.price">
|
||||
</vn-input-number>
|
||||
|
|
|
@ -26,10 +26,9 @@
|
|||
model="service.quantity"
|
||||
rule="TicketService.quantity">
|
||||
</vn-input-number>
|
||||
<vn-input-number vn-one step="1"
|
||||
display-controls="false"
|
||||
<vn-input-number vn-one
|
||||
label="Price"
|
||||
model="service.price">
|
||||
model="service.price" step="0.01">
|
||||
</vn-input-number>
|
||||
<vn-autocomplete vn-one
|
||||
url="/api/TaxClasses"
|
||||
|
|
Loading…
Reference in New Issue