-
-
+
+
{
- if (!isNaN(this.value))
- this.input.value = this.value;
-
this.validateValue();
-
this.emit('change', {event});
});
-
- this.input.addEventListener('focus', event => {
- this.emit('focus', {event});
- });
}
/**
@@ -49,12 +41,7 @@ export default class InputNumber extends Input {
this.input.value = value;
this._value = value;
-
- if (this.hasValue)
- this.element.classList.add('not-empty');
- else
- this.element.classList.remove('not-empty');
-
+ this.element.classList.toggle('not-empty', this.hasValue);
this.validateValue();
}
@@ -111,6 +98,7 @@ export default class InputNumber extends Input {
*/
stepUp() {
this.input.stepUp();
+ this.input.dispatchEvent(new Event('change'));
}
/**
@@ -118,6 +106,7 @@ export default class InputNumber extends Input {
*/
stepDown() {
this.input.stepDown();
+ this.input.dispatchEvent(new Event('change'));
}
}
InputNumber.$inject = ['$element', '$scope', '$attrs', 'vnTemplate'];
diff --git a/front/core/components/input-number/style.scss b/front/core/components/input-number/style.scss
index 1f7bdff57..e25299db2 100644
--- a/front/core/components/input-number/style.scss
+++ b/front/core/components/input-number/style.scss
@@ -3,18 +3,13 @@
vn-input-number {
@extend vn-textfield;
- input {
- text-align: center !important;
- }
+
vn-icon[icon=add],
- vn-icon[icon=remove]{
+ vn-icon[icon=remove] {
&:not(:hover){
color: $color-font-secondary;
}
i {
- -moz-user-select: none;
- -webkit-user-select: none;
- -ms-user-select: none;
user-select: none;
}
}
diff --git a/front/core/components/input-time/index.js b/front/core/components/input-time/index.js
index 41f76c086..c85bb37cf 100644
--- a/front/core/components/input-time/index.js
+++ b/front/core/components/input-time/index.js
@@ -35,7 +35,7 @@ export default class InputTime extends Input {
*/
set value(value) {
this.updateValue(value);
- this.input.value = this.$filter('date')(value, 'HH:mm');
+ this.input.value = this.$filter('dateTime')(value, 'HH:mm');
}
updateValue(value) {
diff --git a/front/core/components/multi-check/multi-check.html b/front/core/components/multi-check/multi-check.html
index 2d51324f0..c09fd246c 100644
--- a/front/core/components/multi-check/multi-check.html
+++ b/front/core/components/multi-check/multi-check.html
@@ -1,5 +1,5 @@
-
+ translate-attr="{title: 'Check all'}">
\ No newline at end of file
diff --git a/front/core/components/multi-check/style.scss b/front/core/components/multi-check/style.scss
index 405c28414..b1e3d9432 100644
--- a/front/core/components/multi-check/style.scss
+++ b/front/core/components/multi-check/style.scss
@@ -1,5 +1,5 @@
vn-multi-check {
- md-checkbox {
+ vn-check {
margin-bottom: 0.8em
}
}
\ No newline at end of file
diff --git a/front/core/components/radio-group/radio-group.html b/front/core/components/radio-group/radio-group.html
deleted file mode 100644
index 3b389d2be..000000000
--- a/front/core/components/radio-group/radio-group.html
+++ /dev/null
@@ -1,8 +0,0 @@
-
-
- {{::option.label}}
-
-
\ No newline at end of file
diff --git a/front/core/components/radio-group/radio-group.js b/front/core/components/radio-group/radio-group.js
deleted file mode 100644
index 80c77a7e2..000000000
--- a/front/core/components/radio-group/radio-group.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import ngModule from '../../module';
-import Component from '../../lib/component';
-import './style.scss';
-
-export default class Controller extends Component {
- constructor($element, $scope, $attrs) {
- super($element, $scope);
- this.hasInfo = Boolean($attrs.info);
- this.info = $attrs.info || null;
- }
-
- get model() {
- return this._model;
- }
-
- set model(value) {
- this._model = value;
- }
-
- get field() {
- return this._model;
- }
-
- set field(value) {
- this._model = value;
- }
-}
-
-Controller.$inject = ['$element', '$scope', '$attrs'];
-
-ngModule.component('vnRadioGroup', {
- template: require('./radio-group.html'),
- controller: Controller,
-
- bindings: {
- field: '=?',
- options: '
+
+
+
+
+ {{::$ctrl.label}}
+
\ No newline at end of file
diff --git a/front/core/components/radio/index.js b/front/core/components/radio/index.js
new file mode 100644
index 000000000..a8475c256
--- /dev/null
+++ b/front/core/components/radio/index.js
@@ -0,0 +1,93 @@
+import ngModule from '../../module';
+import Component from '../../lib/component';
+import './style.scss';
+
+/**
+ * Basic element for user input. You can use this to supply a way for the user
+ * to pick an option from multiple choices.
+ *
+ * @property {String} label Label to display along the component
+ * @property {any} field The value with which the element is linked
+ * @property {Boolean} checked Whether the radio is checked
+ * @property {String} val The actual value of the option
+ * @property {Boolean} disabled Put component in disabled mode
+ */
+export default class Controller extends Component {
+ constructor($element, $, $attrs) {
+ super($element, $);
+ this.hasInfo = Boolean($attrs.info);
+ this.info = $attrs.info || null;
+
+ let element = this.element;
+ element.addEventListener('click', e => this.onClick(e));
+ element.addEventListener('keydown', e => this.onKeydown(e));
+ element.tabIndex = 0;
+ }
+
+ set field(value) {
+ this._field = value;
+ this.element.classList.toggle('checked',
+ Boolean(value) && value == this.val);
+ }
+
+ get field() {
+ return this._field;
+ }
+
+ set val(value) {
+ this._val = value;
+ this.field = this.field;
+ }
+
+ get val() {
+ return this._val;
+ }
+
+ set checked(value) {
+ this.field = value ? this.val : null;
+ this.$.$applyAsync();
+ }
+
+ get checked() {
+ return this.field == this.val;
+ }
+
+ set disabled(value) {
+ this.element.tabIndex = !value ? 0 : -1;
+ this.element.classList.toggle('disabled', Boolean(value));
+ this._disabled = value;
+ }
+
+ get disabled() {
+ return this._disabled;
+ }
+
+ onClick(event) {
+ if (this.disabled) return;
+ event.preventDefault();
+
+ this.field = this.val;
+ this.$.$applyAsync();
+ this.element.dispatchEvent(new Event('change'));
+ }
+
+ onKeydown(event) {
+ if (event.code == 'Space')
+ this.onClick(event);
+ }
+}
+
+Controller.$inject = ['$element', '$scope', '$attrs'];
+
+ngModule.component('vnRadio', {
+ template: require('./index.html'),
+ controller: Controller,
+
+ bindings: {
+ label: '@?',
+ field: '=?',
+ checked: ' {
+ let $element;
+ let $ctrl;
+ let element;
+
+ beforeEach(angular.mock.module('vnCore', $translateProvider => {
+ $translateProvider.translations('en', {});
+ }));
+
+ beforeEach(inject(($compile, $rootScope) => {
+ $element = $compile(`
{
+ $element.remove();
+ });
+
+ describe('field() setter', () => {
+ it(`should set model value`, () => {
+ $ctrl.field = true;
+
+ expect($ctrl.field).toEqual(true);
+ });
+
+ it(`should uncheck value and change to true when clicked`, () => {
+ $ctrl.field = false;
+ element.click();
+
+ expect($ctrl.field).toEqual(true);
+ });
+
+ it(`should check value and change to false when clicked`, () => {
+ $ctrl.field = true;
+ element.click();
+
+ expect($ctrl.field).toEqual(false);
+ });
+
+ it(`should uncheck value and change to null when clicked`, () => {
+ $ctrl.field = false;
+ $ctrl.tripleState = true;
+ element.click();
+
+ expect($ctrl.field).toEqual(null);
+ });
+
+ it(`should set value to null and change to true when clicked`, () => {
+ $ctrl.field = null;
+ $ctrl.tripleState = true;
+ element.click();
+
+ expect($ctrl.field).toEqual(true);
+ });
+
+ it(`should cast value to boolean when clicked`, () => {
+ $ctrl.field = 0;
+ element.click();
+
+ expect($ctrl.field).toEqual(true);
+ });
+ });
+});
diff --git a/front/core/components/radio/style.scss b/front/core/components/radio/style.scss
new file mode 100644
index 000000000..de49286b4
--- /dev/null
+++ b/front/core/components/radio/style.scss
@@ -0,0 +1,62 @@
+@import "variables";
+
+vn-radio {
+ position: relative;
+ cursor: pointer;
+ display: inline-block;
+ outline: none;
+
+ &.disabled {
+ cursor: initial;
+ }
+ & > .radio {
+ position: relative;
+ box-sizing: border-box;
+ display: inline-block;
+ vertical-align: middle;
+ border-radius: 50%;
+ width: 20px;
+ height: 20px;
+ border: 2px solid #666;
+ margin: 6px 0;
+ margin-right: .4em;
+
+ & > .mark {
+ transition: background 250ms;
+ }
+ }
+ &.checked > .radio {
+ border-color: $color-main;
+
+ & > .mark {
+ position: absolute;
+ border-radius: 50%;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 10px;
+ height: 10px;
+ background-color: $color-main;
+ }
+ & > .focus-mark {
+ background-color: rgba($color-main, .15);
+ }
+ }
+ & > .radio > .focus-mark {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ height: 38px;
+ width: 38px;
+ margin-top: -19px;
+ margin-left: -19px;
+ border-radius: 50%;
+ transform: scale3d(0, 0, 0);
+ transition: background 250ms;
+ transition: transform 250ms;
+ background-color: rgba(0, 0, 0, .1);
+ }
+ &:focus:not(.disabled) > .radio > .focus-mark {
+ transform: scale3d(1, 1, 1);
+ }
+}
diff --git a/front/core/components/table/style.scss b/front/core/components/table/style.scss
index a23fa4d53..29b163950 100644
--- a/front/core/components/table/style.scss
+++ b/front/core/components/table/style.scss
@@ -184,7 +184,7 @@ vn-table {
float: right;
margin: 0!important;
}
- md-checkbox {
+ vn-check {
margin: 0;
}
}
\ No newline at end of file
diff --git a/front/core/components/treeview/child.html b/front/core/components/treeview/child.html
index eedd63b19..bb0bcb569 100644
--- a/front/core/components/treeview/child.html
+++ b/front/core/components/treeview/child.html
@@ -1,55 +1,61 @@
- -
-
-
-
-
-
-
-
- {{::item.name}}
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
- Create new one
-
-
-
-
\ No newline at end of file
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Create new one
+
+
diff --git a/modules/agency/front/events/index.js b/modules/agency/front/events/index.js
index 614641cbb..1f741962b 100644
--- a/modules/agency/front/events/index.js
+++ b/modules/agency/front/events/index.js
@@ -41,19 +41,6 @@ class Controller {
wday.abr = locale.substr(0, 1);
}
- this.options = [
- {
- label: 'One day',
- value: 'day'
- }, {
- label: 'Range of dates',
- value: 'range'
- }, {
- label: 'Indefinitely',
- value: 'indefinitely'
- }
- ];
-
this.$http.get(`/api/Zones/${$stateParams.id}/exclusions`)
.then(res => this.$.exclusions = res.data);