input time refactor #1292
gitea/salix/master This commit looks good Details

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

View File

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

View File

@ -18,14 +18,6 @@
<div class="underline"></div> <div class="underline"></div>
<div class="selected underline"></div> <div class="selected underline"></div>
<div class="suffix"> <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" <i class="material-icons"
ng-if="$ctrl.hasInfo" ng-if="$ctrl.hasInfo"
vn-tooltip="{{$ctrl.info}}"> vn-tooltip="{{$ctrl.info}}">

View File

@ -3,32 +3,113 @@ import Input from '../../lib/input';
import './style.scss'; import './style.scss';
export default class InputTime extends Input { 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() { get value() {
return this._value; return this._value;
} }
/**
* Sets input value
*
* @param {Number} value - Value
*/
set 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); this._value = value;
newDate.setSeconds(0); this.hasValue = !(value === null || value === undefined);
newDate.setMilliseconds(0);
this._value = newDate; if (this.hasValue)
this.hasValue = this._value !== null; this.element.classList.add('not-empty');
this.input.value = this._value; else
this.element.classList.remove('not-empty');
if (this.hasValue) this.element.classList.add('not-empty');
this.element.querySelector('.infix').classList.remove('invalid', 'validated');
} }
/**
* 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() { get step() {
return parseInt(this.input.step); return this.input.step;
} }
/**
* Sets min step value
*
* @param {Number} value - Value
*/
set step(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: '<?', disabled: '<?',
readonly: '<?', readonly: '<?',
step: '<?', step: '<?',
min: '<?',
max: '<?',
rule: '@?', rule: '@?',
value: '=model', value: '=model',
vnTabIndex: '@?', vnTabIndex: '@?',

View File

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

View File

@ -39,8 +39,7 @@
label="Traveling days" label="Traveling days"
field="$ctrl.zone.travelingDays"> field="$ctrl.zone.travelingDays">
</vn-input-number> </vn-input-number>
<vn-input-time <vn-input-time vn-two
vn-two
label="Estimated hour (ETD)" label="Estimated hour (ETD)"
field="$ctrl.zone.hour"> field="$ctrl.zone.hour">
</vn-input-time> </vn-input-time>

View File

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