input time refactor #1292

This commit is contained in:
Joan Sanchez 2019-04-11 07:29:41 +02:00
parent 49ef341eb6
commit 1e06a19884
6 changed files with 116 additions and 51 deletions

View File

@ -87,8 +87,7 @@ export default class InputNumber extends Input {
* @param {Number} value - Value
*/
set min(value) {
if (!value) value = 0;
this.input.min = value;
if (value) this.input.min = value;
}
/**
@ -104,7 +103,7 @@ export default class InputNumber extends Input {
* @param {Number} value - Value
*/
set step(value) {
this.input.step = value;
if (value) this.input.step = value;
}
get validationError() {

View File

@ -18,14 +18,6 @@
<div class="underline"></div>
<div class="selected underline"></div>
<div class="suffix">
<i class="material-icons clear"
translate-attr="{title: 'Clear'}"
ng-show="!$ctrl.disabled
&& $ctrl.hasValue
&& !$ctrl.unclearable"
ng-click="$ctrl.clear()">
clear
</i>
<i class="material-icons"
ng-if="$ctrl.hasInfo"
vn-tooltip="{{$ctrl.info}}">

View File

@ -3,32 +3,113 @@ import Input from '../../lib/input';
import './style.scss';
export default class InputTime extends Input {
constructor($element, $scope) {
super($element, $scope);
this.registerEvents();
}
/**
* Registers all event emitters
*/
registerEvents() {
this.input.addEventListener('change', event => {
this.emit('change', {event});
});
this.input.addEventListener('focus', event => {
this.emit('focus', {event});
});
}
/**
* Gets current value
*/
get value() {
return this._value;
}
/**
* Sets input value
*
* @param {Number} value - Value
*/
set value(value) {
if (!value) return;
if (this._value === undefined && value || typeof value === 'string')
value = this.formatTime(value);
let newDate = new Date(value);
newDate.setSeconds(0);
newDate.setMilliseconds(0);
this._value = value;
this.hasValue = !(value === null || value === undefined);
this._value = newDate;
this.hasValue = this._value !== null;
this.input.value = this._value;
if (this.hasValue) this.element.classList.add('not-empty');
this.element.querySelector('.infix').classList.remove('invalid', 'validated');
if (this.hasValue)
this.element.classList.add('not-empty');
else
this.element.classList.remove('not-empty');
}
/**
* 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;
}
/**
* Gets min value
*/
get min() {
return this.input.min;
}
/**
* Sets min allowed value
*
* @param {Number} value - Value
*/
set min(value) {
if (value) this.input.min = value;
}
/**
* Gets min step value
*/
get step() {
return parseInt(this.input.step);
return this.input.step;
}
/**
* Sets min step value
*
* @param {Number} value - Value
*/
set step(value) {
this.input.step = value;
if (value) this.input.step = value;
}
/**
* Returns a formatted hour
* @param {Date} date -a
* @return {String} Formatted hour
*/
formatTime(date) {
if (typeof date === 'string') {
date = new Date(date);
date.setTime(date.getTime() + (date.getTimezoneOffset() * 60000));
}
date.setSeconds(null);
date.setMilliseconds(null);
return date;
}
}
@ -46,6 +127,8 @@ ngModule.component('vnInputTime', {
disabled: '<?',
readonly: '<?',
step: '<?',
min: '<?',
max: '<?',
rule: '@?',
value: '=model',
vnTabIndex: '@?',

View File

@ -9,14 +9,13 @@ dateTime.$inject = ['$filter'];
export default function dateTime($filter) {
return function(input, format) {
let value;
if (input) {
value = new Date(input);
let offset = value.getTimezoneOffset() * 60000;
value.setTime(value.getTime() + offset);
if (typeof input === 'string' && input) {
input = new Date(input);
let offset = input.getTimezoneOffset() * 60000;
input.setTime(input.getTime() + offset);
}
return $filter('date')(value, format);
return $filter('date')(input, format);
};
}
ngModule.filter('dateTime', dateTime);

View File

@ -37,8 +37,7 @@
model="$ctrl.zone.travelingDays"
min="0" step="1">
</vn-input-number>
<vn-input-time
vn-two
<vn-input-time vn-two
label="Estimated hour (ETD)"
model="$ctrl.zone.hour">
</vn-input-time>

View File

@ -15,16 +15,14 @@
</vn-textfield>
</vn-horizontal>
<vn-horizontal>
<vn-autocomplete
vn-one
<vn-autocomplete vn-one
field="$ctrl.zone.warehouseFk"
url="/agency/api/Warehouses"
show-field="name"
value-field="id"
label="Warehouse">
</vn-autocomplete>
<vn-autocomplete
vn-one
<vn-autocomplete vn-one
field="$ctrl.zone.agencyModeFk"
url="/agency/api/AgencyModes/isActive"
show-field="name"
@ -33,32 +31,27 @@
</vn-autocomplete>
</vn-horizontal>
<vn-horizontal>
<vn-input-number
vn-two
min="0"
value="$ctrl.zone.travelingDays"
step="1"
<vn-input-number vn-two
label="Traveling days"
field="$ctrl.zone.travelingDays">
model="$ctrl.zone.travelingDays"
min="0" step="1">
</vn-input-number>
<vn-input-time
vn-two
<vn-input-time vn-two
label="Estimated hour (ETD)"
field="$ctrl.zone.hour">
model="$ctrl.zone.hour"
rule="zone.hour">
</vn-input-time>
</vn-horizontal>
<vn-horizontal>
<vn-input-number vn-one
label="Price"
field="$ctrl.zone.price"
min="0.00"
step="0.10">
model="$ctrl.zone.price"
min="0" step="0.01">
</vn-input-number>
<vn-input-number vn-one
label="Bonus"
field="$ctrl.zone.bonus"
min="0.00"
step="0.10">
model="$ctrl.zone.bonus"
min="0" step="0.01">
</vn-input-number>
</vn-horizontal>
<vn-horizontal>