+
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/client/core/src/components/autocomplete/autocomplete.js b/client/core/src/components/autocomplete/autocomplete.js
old mode 100644
new mode 100755
index 2dc37b659..5c216d21d
--- a/client/core/src/components/autocomplete/autocomplete.js
+++ b/client/core/src/components/autocomplete/autocomplete.js
@@ -1,381 +1,255 @@
import ngModule from '../../module';
import Component from '../../lib/component';
-import copyObject from '../../lib/copy';
import './style.scss';
-class Autocomplete extends Component {
- constructor($element, $scope, $http, $timeout, $filter) {
- super($element);
- this.$element = $element;
- this.$scope = $scope;
+/**
+ * Input with option selector.
+ *
+ * @property {String} valueField The data field name that should be shown
+ * @property {String} showFiled The data field name that should be used as value
+ * @property {Array} data Static data for the autocomplete
+ * @property {Object} intialData A initial data to avoid the server request used to get the selection
+ * @property {Boolean} multiple Wether to allow multiple selection
+ */
+export default class Autocomplete extends Component {
+ constructor($element, $scope, $http, $transclude) {
+ super($element, $scope);
this.$http = $http;
- this.$timeout = $timeout;
- this.$filter = $filter;
+ this.$transclude = $transclude;
- this._showDropDown = false;
- this.finding = false;
- this.findMore = false;
- this._value = null;
- this._field = null;
- this._preLoad = false;
- this.maxRow = 10;
- this.showField = 'name';
+ this._field = undefined;
+ this._selection = null;
this.valueField = 'id';
- this.items = copyObject(this.data) || [];
- this.displayValueMultiCheck = [];
+ this.showField = 'name';
this._multiField = [];
this.readonly = true;
- this.removeLoadMore = false;
this.form = null;
- this.findForm = false;
- }
-
- get showDropDown() {
- return this._showDropDown;
- }
-
- set showDropDown(value) {
- if (value && this.url && !this._preLoad) {
- this._preLoad = true;
- this.getItems();
- }
- if (value && !this.width) {
- let rectangle = this.$element[0].getBoundingClientRect();
- this.width = Math.round(rectangle.width) - 10;
- }
- this._showDropDown = value;
- }
-
- get displayValue() {
- return this._value;
- }
-
- set displayValue(value) {
- let val = (value === undefined || value === '') ? null : value;
- if (this.multiple && val) {
- let index = this.displayValueMultiCheck.indexOf(val);
- if (index === -1)
- this.displayValueMultiCheck.push(val);
- else
- this.displayValueMultiCheck.splice(index, 1);
-
- this._value = this.displayValueMultiCheck.join(', ');
- } else {
- this._value = val;
- }
-
- if (value === null) {
- this.field = null;
- if (this.multiple && this.items.length) {
- this.displayValueMultiCheck = [];
- this.items.map(item => {
- item.checked = false;
- return item;
- });
- }
- }
+ this.input = this.element.querySelector('.mdl-textfield__input');
+
+ componentHandler.upgradeElement(
+ this.element.querySelector('.mdl-textfield'));
}
+ /**
+ * @type {any} The autocomplete value.
+ */
get field() {
- return this.multiple ? this._multiField : this._field;
+ return this._field;
}
set field(value) {
- if (!angular.equals(value, this.field)) {
- this.finding = true;
- if (value && value.hasOwnProperty(this.valueField)) {
- this._field = value[this.valueField];
- if (this.multiple) {
- this.setMultiField(value[this.valueField]);
- }
- this.setDirtyForm();
- } else {
- this.setValue(value);
- }
+ if (angular.equals(value, this._field))
+ return;
- if (value && value.hasOwnProperty(this.showField))
- this.displayValue = value[this.showField];
+ this._field = value;
+ this.refreshSelection();
- this.finding = false;
-
- if (this.onChange)
- this.onChange({item: this._field});
- }
+ if (this.onChange)
+ this.onChange(value);
}
- set initialData(value) {
- if (value && value.hasOwnProperty(this.valueField)) {
- this._field = value[this.valueField];
- if (this.multiple) {
- this._multiField = [value[this.valueField]];
- }
- if (value.hasOwnProperty(this.showField)) {
- this.displayValue = value[this.showField];
- }
- }
+ /**
+ * @type {Object} The selected data object, you can use this property
+ * to prevent requests to display the initial value.
+ */
+ get selection() {
+ return this._selection;
}
- setMultiField(val) {
- if (val && typeof val === 'object' && val[this.valueField]) {
- val = val[this.valueField];
- }
- if (val === null) {
- this._multiField = [];
- } else {
- let index = this._multiField.indexOf(val);
- if (index === -1) {
- this._multiField.push(val);
- } else {
- this._multiField.splice(index, 1);
- }
- }
+ set selection(value) {
+ this._selection = value;
+ this.refreshDisplayed();
}
- setValue(value) {
- if (value) {
- let data = this.items;
+ selectionIsValid(selection) {
+ return selection
+ && selection[this.valueField] == this._field
+ && selection[this.showField] != null;
+ }
- if (data && data.length)
+ refreshSelection() {
+ if (this.selectionIsValid(this._selection))
+ return;
+
+ let value = this._field;
+
+ if (value && this.valueField && this.showField) {
+ if (this.selectionIsValid(this.initialData)) {
+ this.selection = this.initialData;
+ return;
+ }
+
+ let data = this.data;
+
+ if (!data && this.$.dropDown)
+ data = this.$.dropDown.$.model.data;
+
+ if (data)
for (let i = 0; i < data.length; i++)
if (data[i][this.valueField] === value) {
- this.showItem(data[i]);
+ this.selection = data[i];
return;
}
- this.requestItem(value);
- } else {
- this._field = null;
- this.setMultiField(null);
- this.displayValue = '';
- }
+ if (this.url) {
+ this.requestSelection(value);
+ return;
+ }
+ } else
+ this.selection = null;
}
- requestItem(value) {
- if (!value) return;
-
+ requestSelection(value) {
let where = {};
- where[this.valueField] = value;
+
+ if (this.multiple)
+ where[this.valueField] = {inq: this.field};
+ else
+ where[this.valueField] = value;
let filter = {
- fields: this.getRequestFields(),
+ fields: this.getFields(),
where: where
};
- let json = JSON.stringify(filter);
-
+ let json = encodeURIComponent(JSON.stringify(filter));
this.$http.get(`${this.url}?filter=${json}`).then(
- json => this.onItemRequest(json.data),
- json => this.onItemRequest(null)
+ json => this.onSelectionRequest(json.data),
+ () => this.onSelectionRequest(null)
);
}
- onItemRequest(data) {
- if (data && data.length > 0)
- this.showItem(data[0]);
- else
- this.showItem(null);
+ onSelectionRequest(data) {
+ if (data && data.length > 0) {
+ if (this.multiple)
+ this.selection = data;
+ else
+ this.selection = data[0];
+ } else
+ this.selection = null;
}
- showItem(item) {
- this.displayValue = item ? item[this.showField] : '';
- this.field = item;
+ refreshDisplayed() {
+ let display = '';
+
+ if (this._selection && this.showField) {
+ if (this.multiple && Array.isArray(this._selection)) {
+ for (var item of this._selection) {
+ if (display.length > 0) display += ', ';
+ display += item[this.showField];
+ }
+ } else {
+ display = this._selection[this.showField];
+ }
+ }
+
+ this.input.value = display;
+ this.mdlUpdate();
}
- getRequestFields() {
- let fields = {};
- fields[this.valueField] = true;
- fields[this.showField] = true;
+ getFields() {
+ let fields = [];
+ fields.push(this.valueField);
+ fields.push(this.showField);
- if (this._selectFields)
- for (let field of this._selectFields)
- fields[field] = true;
+ if (this.selectFields)
+ for (let field of this.selectFields)
+ fields.push(field);
return fields;
}
- getOrder() {
- return this.order ? this.order : `${this.showField} ASC`;
+ mdlUpdate() {
+ let field = this.element.querySelector('.mdl-textfield');
+ let mdlField = field.MaterialTextfield;
+ if (mdlField) mdlField.updateClasses_();
}
- findItems(search) {
- if (this.url && search && !this.finding) {
- this.maxRow = false;
- let filter = {};
- if (this.filterSearch) {
- let toSearch = this.filterSearch.replace(/search/g, search);
- filter = this.$scope.$eval(toSearch);
- } else {
- filter = {where: {name: {regexp: search}}};
- if (this.filter && this.filter.where) {
- Object.assign(filter.where, this.filter.where);
- }
- }
- filter.order = this.getOrder();
- let json = JSON.stringify(filter);
- this.finding = true;
- this.$http.get(`${this.url}?filter=${json}`).then(
- json => {
- this.items = [];
- json.data.forEach(
- el => {
- if (this.multiple) {
- el.checked = this.field.indexOf(el[this.valueField]) !== -1;
- }
- this.items.push(el);
- }
- );
- this.finding = false;
- },
- () => {
- this.finding = false;
- }
- );
- } else if (search && !this.url && this.data) {
- this.items = this.$filter('filter')(this.data, search);
- } else if (!search && !this.finding) {
- this.maxRow = 10;
- this.items = [];
- this.getItems();
- }
+ setValue(value) {
+ this.field = value;
+ if (this.form) this.form.$setDirty();
}
- getItems() {
- if (this.url === undefined) {
- this.items = copyObject(this.data);
- this.maxRow = false;
- this.removeLoadMore = true;
- } else {
- let filter = {};
- if (!this.finding) {
- this.finding = true;
-
- if (this.maxRow) {
- if (this.items) {
- filter.skip = this.items.length;
- }
- filter.limit = this.maxRow;
- filter.order = this.getOrder();
- }
- if (this.filter) {
- Object.assign(filter, this.filter);
- }
-
- let json = JSON.stringify(filter);
-
- this.removeLoadMore = false;
-
- this.$http.get(`${this.url}?filter=${json}`).then(
- json => {
- if (json.data.length) {
- json.data.forEach(
- el => {
- if (this.multiple) {
- el.checked = this.field.indexOf(el[this.valueField]) !== -1;
- }
- this.items.push(el);
- }
- );
- if (filter.skip === 0 && this.maxRow && json.data.length < this.maxRow) {
- this.removeLoadMore = true;
- }
- } else {
- this.maxRow = false;
- }
- this.finding = false;
- },
- () => {
- this.finding = false;
- }
- );
- }
- }
- }
- _parentForm() {
- this.findForm = true;
- let formScope = this.$scope;
- while (formScope && !formScope.form && formScope.$id > 1) {
- formScope = formScope.$parent;
- }
- this.form = formScope ? formScope.form || null : null;
- }
- setDirtyForm() {
- if (!this.form && !this.findForm) {
- this._parentForm();
- }
- if (this.form) {
- this.form.$setDirty();
- }
+ onDropDownSelect(value) {
+ this.setValue(value);
+ this.field = value;
}
- $onInit() {
- this.findMore = this.url && this.maxRow;
- this.mouseFocus = false;
- this.focused = false;
+ onClearClick(event) {
+ event.preventDefault();
+ this.setValue(null);
+ }
- this.$element.bind('mouseover', e => {
- this.$timeout(() => {
- this.mouseFocus = true;
- this.showDropDown = this.focused;
- });
+ onKeyDown(event) {
+ if (event.defaultPrevented) return;
+
+ switch (event.keyCode) {
+ case 38: // Up
+ case 40: // Down
+ case 13: // Enter
+ this.showDropDown();
+ break;
+ default:
+ if (event.key.length == 1)
+ this.showDropDown(event.key);
+ else
+ return;
+ }
+
+ event.preventDefault();
+ }
+
+ onMouseDown(event) {
+ event.preventDefault();
+ this.showDropDown();
+ }
+
+ showDropDown(search) {
+ Object.assign(this.$.dropDown.$.model, {
+ url: this.url,
+ staticData: this.data
});
- this.$element.bind('mouseout', () => {
- this.$timeout(() => {
- this.mouseFocus = false;
- this.showDropDown = this.focused;
- });
- });
- this.$element.bind('focusin', e => {
- this.$timeout(() => {
- this.focused = true;
- this.showDropDown = true;
- });
- });
- this.$element.bind('focusout', e => {
- this.$timeout(() => {
- this.focused = false;
- this.showDropDown = this.mouseFocus;
- });
+ Object.assign(this.$.dropDown, {
+ valueField: this.valueField,
+ showField: this.showField,
+ selectFields: this.getFields(),
+ where: this.where,
+ order: this.order,
+ parent: this.input,
+ multiple: this.multiple,
+ limit: this.limit,
+ $transclude: this.$transclude
});
+ this.$.dropDown.show(search);
}
-
- $onDestroy() {
- this.$element.unbind('mouseover');
- this.$element.unbind('mouseout');
- this.$element.unbind('focusin');
- this.$element.unbind('focusout');
- }
-
- $onChanges(objectChange) {
- if (objectChange.data && objectChange.data.currentValue && objectChange.data.currentValue.length) {
- this.items = copyObject(objectChange.data.currentValue);
- this.maxRow = false;
- this.removeLoadMore = true;
- }
- }
-
}
-Autocomplete.$inject = ['$element', '$scope', '$http', '$timeout', '$filter'];
+Autocomplete.$inject = ['$element', '$scope', '$http', '$transclude'];
ngModule.component('vnAutocomplete', {
template: require('./autocomplete.html'),
controller: Autocomplete,
bindings: {
url: '@?',
+ data: ' {
- let $componentController;
+ let $element;
let $scope;
let $httpBackend;
- let $timeout;
- let $element;
let controller;
+ let data = {id: 1, name: 'Bruce Wayne'};
+
beforeEach(() => {
angular.mock.module('client');
});
beforeEach(angular.mock.inject((_$componentController_, $rootScope, _$httpBackend_, _$timeout_) => {
- $componentController = _$componentController_;
$scope = $rootScope.$new();
+ $element = angular.element(`
+
+
+
+
+
+
+
+
+ ${template}
`);
$httpBackend = _$httpBackend_;
$httpBackend.when('GET', /\/locale\/\w+\/[a-z]{2}\.json/).respond({});
- $timeout = _$timeout_;
- $element = angular.element('');
- controller = $componentController('vnAutocomplete', {$scope, $element, $httpBackend, $timeout});
+ controller = _$componentController_('vnAutocomplete', {$element, $scope, $httpBackend, $transclude: null});
}));
- describe('showDropDown() setter', () => {
- it(`should set _showDropDown value`, () => {
- controller._showDropDown = '';
- controller.showDropDown = 'some value';
+ describe('field() setter/getter', () => {
+ it(`should set field controllers property`, () => {
+ controller.field = data.id;
- expect(controller._showDropDown).toEqual('some value');
+ expect(controller.field).toEqual(data.id);
});
- it(`should set _showDropDown value`, () => {
- controller._showDropDown = '';
- controller.showDropDown = 'some value';
+ it(`should set selection finding an existing item in the initialData property`, () => {
+ controller.valueField = 'id';
+ controller.showField = 'name';
+ controller.initialData = data;
+ controller.field = data.id;
- expect(controller._showDropDown).toEqual('some value');
- });
- });
-
- describe('displayValue() setter', () => {
- it(`should display value in a formated way`, () => {
- let value = 'some value';
- controller.displayValue = value;
-
- expect(controller._value).toEqual(value);
+ expect(controller.selection).toEqual(data);
});
- describe('when the autocomeplete is multiple', () => {
- it(`should display values separated with commas`, () => {
- controller.multiple = true;
- controller.displayValue = 'some value';
- controller.displayValue = 'another value';
+ it(`should set selection finding an existing item in the data property`, () => {
+ controller.valueField = 'id';
+ controller.showField = 'name';
+ controller.data = [data];
+ controller.field = data.id;
- expect(controller._value).toEqual('some value, another value');
- });
- });
- });
-
- describe('field() setter', () => {
- describe('when value is an object', () => {
- it(`should set _field controllers property`, () => {
- controller.field = {id: 1, name: 'Bruce Wayne'};
-
- expect(controller._field).toEqual(1);
- });
-
- it(`should set _multifield controllers property `, () => {
- controller.multiple = true;
- controller.field = {id: 1, name: 'Bruce Wayne'};
-
- expect(controller._field).toEqual(1);
- expect(controller._multiField[0]).toEqual(1);
-
- controller.field = {id: 1, name: 'Bruce Wayne'};
-
- expect(controller._multiField).toEqual([]);
- expect(controller._field).toEqual(1);
- });
-
- it(`should set _multifield value and remove it if called a second type with same value`, () => {
- controller.multiple = true;
- controller.field = {id: 1, name: 'Bruce Wayne'};
-
- expect(controller._field).toEqual(1);
- expect(controller._multiField[0]).toEqual(1);
-
- controller.field = {id: 1, name: 'Bruce Wayne'};
-
- expect(controller._multiField).toEqual([]);
- expect(controller._field).toEqual(1);
- });
-
- it(`should set displayValue finding an existing item in the controller.items property`, () => {
- controller.items = [{id: 1, name: 'test1'}, {id: 2, name: 'Bruce Wayne'}];
- controller.field = {id: 2, name: 'Bruce Wayne'};
-
- expect(controller.displayValue).toEqual('Bruce Wayne');
- });
+ expect(controller.selection).toEqual(data);
});
- describe('when value is a number', () => {
- it(`should set _field controller property finding an existing item in the controller.items property`, () => {
- controller.items = [{id: 1, name: 'Batman'}, {id: 2, name: 'Bruce Wayne'}];
- controller.field = 2;
+ it(`should set selection to null when can't find an existing item in the data property`, () => {
+ controller.valueField = 'id';
+ controller.showField = 'name';
+ controller.field = data.id;
- expect(controller._field).toEqual(2);
- });
-
- it(`should set _multifield value and remove it if called a second type with same value finding an existing item in the controller.items property`, () => {
- controller.items = [{id: 1, name: 'Batman'}, {id: 2, name: 'Bruce Wayne'}];
- controller.multiple = true;
- controller.field = 2;
-
- expect(controller._multiField[0]).toEqual(2);
-
- controller.field = 2;
-
- expect(controller._multiField).toEqual([]);
- });
-
- it(`should perform a query if the item id isn't present in the controller.items property`, () => {
- controller.url = 'test.com';
- $httpBackend.expectGET(`${controller.url}?filter={"fields":{"id":true,"name":true},"where":{"id":3}}`);
- controller.items = [{id: 1, name: 'test1'}, {id: 2, name: 'Bruce Wayne'}];
- controller.field = 3;
- $httpBackend.flush();
- });
-
- it(`should set displayValue finding an existing item in the controller.items property`, () => {
- controller.items = [{id: 1, name: 'test1'}, {id: 2, name: 'Bruce Wayne'}];
- controller.field = 2;
-
- expect(controller.displayValue).toEqual('Bruce Wayne');
- });
-
- it(`should set field performing a query as the item id isn't present in the controller.items property`, () => {
- controller.url = 'test.com';
- $httpBackend.expectGET(`${controller.url}?filter={"fields":{"id":true,"name":true},"where":{"id":3}}`);
- controller.items = [{id: 1, name: 'test1'}, {id: 2, name: 'Bruce Wayne'}];
- controller.field = 3;
- $httpBackend.flush();
- });
+ expect(controller.selection).toEqual(null);
});
- });
- describe('findItems()', () => {
- it(`should perform a search and store the result in controller items`, () => {
- let controller = $componentController('vnAutocomplete', {$scope, $element, $httpBackend, $timeout});
- controller.url = 'test.com';
- let search = 'The Joker';
- let json = JSON.stringify({where: {name: {regexp: search}}, order: controller.getOrder()});
- $httpBackend.whenGET(`${controller.url}?filter=${json}`).respond([{id: 3, name: 'The Joker'}]);
- $httpBackend.expectGET(`${controller.url}?filter=${json}`);
- controller.findItems(search);
+ it(`should perform a query if the item id isn't present in the data property`, () => {
+ controller.valueField = 'id';
+ controller.showField = 'name';
+ controller.url = 'localhost';
+ controller.field = data.id;
+
+ let filter = {
+ fields: ['id', 'name'],
+ where: {id: data.id}
+ };
+ let json = encodeURIComponent(JSON.stringify(filter));
+
+ $httpBackend.expectGET(`localhost?filter=${json}`);
+ controller.field = data.id;
$httpBackend.flush();
-
- expect(controller.items[0]).toEqual({id: 3, name: 'The Joker'});
- });
-
- it(`should perform a search and store the result in controller items with filterSearch`, () => {
- let controller = $componentController('vnAutocomplete', {$scope, $element, $httpBackend, $timeout});
- controller.url = 'test.com';
- let search = 'The Joker';
- controller.filterSearch = "{where: {name: {regexp: 'search'}}}";
- let json = JSON.stringify({where: {name: {regexp: search}}, order: controller.getOrder()});
- $httpBackend.whenGET(`${controller.url}?filter=${json}`).respond([{id: 3, name: 'The Joker'}]);
- $httpBackend.expectGET(`${controller.url}?filter=${json}`);
- controller.findItems(search);
- $httpBackend.flush();
-
- expect(controller.items[0]).toEqual({id: 3, name: 'The Joker'});
- });
-
- it(`should perform a search with multiple true and store the result in controller items with the checked property defined`, () => {
- controller.url = 'test.com';
- let search = 'Joker';
- controller.multiple = true;
- let json = JSON.stringify({where: {name: {regexp: search}}, order: controller.getOrder()});
- $httpBackend.whenGET(`${controller.url}?filter=${json}`).respond([{id: 3, name: 'The Joker'}, {id: 4, name: 'Joker'}]);
- $httpBackend.expectGET(`${controller.url}?filter=${json}`);
- controller.findItems(search);
- $httpBackend.flush();
-
- expect(controller.items).toEqual([{id: 3, name: 'The Joker', checked: false}, {id: 4, name: 'Joker', checked: false}]);
- });
-
- it(`should call getItems function if there's no search value`, () => {
- controller.url = 'test.com';
- spyOn(controller, 'getItems');
- controller.findItems();
-
- expect(controller.getItems).toHaveBeenCalledWith();
- });
- });
-
- describe('getItems()', () => {
- it(`should perfom a query to fill the items without filter`, () => {
- controller.url = 'test.com';
- $httpBackend.whenGET(`${controller.url}?filter={"skip":0,"limit":10,"order":"name ASC"}`).respond([{id: 1, name: 'Batman'}, {id: 2, name: 'Bruce Wayne'}]);
- $httpBackend.expectGET(`${controller.url}?filter={"skip":0,"limit":10,"order":"name ASC"}`);
- controller.getItems();
- $httpBackend.flush();
-
- expect(controller.items).toEqual([{id: 1, name: 'Batman'}, {id: 2, name: 'Bruce Wayne'}]);
});
});
});
diff --git a/client/core/src/components/autocomplete/style.scss b/client/core/src/components/autocomplete/style.scss
old mode 100644
new mode 100755
index 15e59d4d3..26143c035
--- a/client/core/src/components/autocomplete/style.scss
+++ b/client/core/src/components/autocomplete/style.scss
@@ -1,3 +1,47 @@
+
+vn-autocomplete > div > .mdl-textfield {
+ position: relative;
+ width: 100%;
+
+ & > input {
+ cursor: pointer;
+ height: 26px;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+
+ &:focus {
+ outline: none;
+ }
+ &::-moz-focus-inner {
+ border: 0;
+ }
+ }
+ & > .icons {
+ display: none;
+ position: absolute;
+ right: 0;
+ top: 1.3em;
+ height: 1em;
+ color: #888;
+ border-radius: .2em;
+ background-color: rgba(255, 255, 255, .8);
+
+ & > vn-icon {
+ cursor: pointer;
+ font-size: 18px;
+
+ &:hover {
+ color: #333;
+ }
+ }
+ }
+ &:hover > .icons,
+ & > input:focus + .icons {
+ display: block;
+ }
+}
+
ul.vn-autocomplete {
list-style-type: none;
padding: 1em;
@@ -14,7 +58,7 @@ ul.vn-autocomplete {
&.active,
&:hover {
- background-color: rgba(1,1,1,.1);
+ background-color: rgba(1, 1, 1, .1);
}
&.load-more {
color: #ffa410;
@@ -22,27 +66,4 @@ ul.vn-autocomplete {
padding: .4em .8em;
}
}
-}
-vn-autocomplete {
- position: relative;
- vn-vertical {
- outline:none;
- }
-
- .mdl-chip__action {
- position: absolute;
- top: 0px;
- right: -6px;
- margin: 22px 0px;
- background: transparent;
- }
- .material-icons {
- font-size: 18px;
- }
- vn-drop-down{
- margin-top: 47px;
- }
- vn-drop-down .dropdown-body .filter vn-icon {
- margin-left: -26px;
- }
}
\ No newline at end of file
diff --git a/client/core/src/components/dialog/dialog.js b/client/core/src/components/dialog/dialog.js
index 602acfe45..401a13e11 100644
--- a/client/core/src/components/dialog/dialog.js
+++ b/client/core/src/components/dialog/dialog.js
@@ -37,14 +37,16 @@ export default class Dialog extends Component {
show() {
if (this.shown) return;
this.shown = true;
- this.keypressHandler = e => this.onKeypress(e);
- this.document.addEventListener('keypress', this.keypressHandler);
+ this.keyDownHandler = e => this.onkeyDown(e);
+ this.document.addEventListener('keydown', this.keyDownHandler);
this.element.style.display = 'flex';
- this.transitionTimeout =
- setTimeout(() => this.$element.addClass('shown'), 30);
+ this.transitionTimeout = setTimeout(() => this.$element.addClass('shown'), 30);
if (this.onOpen)
this.onOpen();
+
+ let firstFocusable = this.element.querySelector('input, textarea');
+ if (firstFocusable) firstFocusable.focus();
}
/**
* Hides the dialog calling the response handler.
@@ -68,7 +70,7 @@ export default class Dialog extends Component {
realHide() {
if (!this.shown) return;
this.element.style.display = 'none';
- this.document.removeEventListener('keypress', this.keypressHandler);
+ this.document.removeEventListener('keydown', this.keyDownHandler);
this.lastEvent = null;
this.shown = false;
this.transitionTimeout =
@@ -94,7 +96,7 @@ export default class Dialog extends Component {
if (event != this.lastEvent)
this.hide();
}
- onKeypress(event) {
+ onkeyDown(event) {
if (event.keyCode == 27) // Esc
this.hide();
}
diff --git a/client/core/src/components/dialog/style.scss b/client/core/src/components/dialog/style.scss
index 12477a037..de13f0f7c 100644
--- a/client/core/src/components/dialog/style.scss
+++ b/client/core/src/components/dialog/style.scss
@@ -28,7 +28,10 @@
display: block;
width: 20em;
}
- button {
+ button,
+ input[type="button"],
+ input[type="submit"],
+ input[type="reset"] {
text-transform: uppercase;
background-color: transparent;
border: none;
@@ -55,7 +58,10 @@
margin-top: 1.5em;
text-align: right;
- button {
+ button,
+ input[type="button"],
+ input[type="submit"],
+ input[type="reset"] {
color: #ffa410;
font-family: vn-font-bold;
padding: .7em;
diff --git a/client/core/src/components/drop-down/drop-down.html b/client/core/src/components/drop-down/drop-down.html
old mode 100644
new mode 100755
index e155c67af..2855da84c
--- a/client/core/src/components/drop-down/drop-down.html
+++ b/client/core/src/components/drop-down/drop-down.html
@@ -1,28 +1,36 @@
--
-
-
-
- {{item.name}}-
-
+
+
+
+
\ No newline at end of file
diff --git a/client/core/src/components/drop-down/drop-down.js b/client/core/src/components/drop-down/drop-down.js
old mode 100644
new mode 100755
index 93de8cf15..c1b34a319
--- a/client/core/src/components/drop-down/drop-down.js
+++ b/client/core/src/components/drop-down/drop-down.js
@@ -1,44 +1,48 @@
import ngModule from '../../module';
-import validKey from '../../lib/key-codes';
+import Component from '../../lib/component';
import './style.scss';
+import './model';
-export default class DropDown {
- constructor($element, $filter, $timeout) {
- this.$element = $element;
- this.$filter = $filter;
+export default class DropDown extends Component {
+ constructor($element, $scope, $transclude, $timeout, $http, $translate) {
+ super($element, $scope);
+ this.$transclude = $transclude;
this.$timeout = $timeout;
+ this.$translate = $translate;
- this._search = null;
- this.itemsFiltered = [];
+ this.valueField = 'id';
+ this.showField = 'name';
+ this._search = undefined;
+ this._shown = false;
this._activeOption = -1;
- this._focusingFilter = false;
- this._tryToShow = 0;
+ this.showLoadMore = true;
+ this.showFilter = true;
+
+ this.input = this.element.querySelector('.search');
+ this.body = this.element.querySelector('.body');
+ this.container = this.element.querySelector('ul');
+ this.list = this.element.querySelector('.list');
+
+ this.docKeyDownHandler = e => this.onDocKeyDown(e);
+ this.docFocusInHandler = e => this.onDocFocusIn(e);
+
+ this.element.addEventListener('mousedown',
+ e => this.onBackgroundMouseDown(e));
+ this.element.addEventListener('focusin',
+ e => this.onFocusIn(e));
+ this.list.addEventListener('scroll',
+ e => this.onScroll(e));
}
- get container() {
- return this.$element[0].querySelector('ul.dropdown');
+ get shown() {
+ return this._shown;
}
- get show() {
- return this._show;
- }
-
- set show(value) {
- let oldValue = this.show;
- // It wait up to 1 second if the dropdown opens but there is no data to show
- if (value && !oldValue && !this.itemsFiltered.length && this._tryToShow < 4) {
- this.$timeout(() => {
- this._tryToShow++;
- this.show = true;
- if (this.activeOption === -1) {
- this.activeOption = 0;
- }
- }, 250);
- } else {
- this._tryToShow = 0;
- this._show = value;
- this._toggleDropDown(value, oldValue);
- }
+ set shown(value) {
+ if (value)
+ this.show();
+ else
+ this.hide();
}
get search() {
@@ -46,242 +50,390 @@ export default class DropDown {
}
set search(value) {
- let val = (value === undefined || value === '') ? null : value;
- this._search = val;
+ value = value == '' || value == null ? null : value;
+ if (value === this._search) return;
- if (this.filterAction)
- this.onFilterRest();
- else
- this.filterItems();
+ this._search = value;
+ this.$.model.clear();
+
+ this.$timeout.cancel(this.searchTimeout);
+ this.searchTimeout = this.$timeout(() => {
+ this.refreshModel();
+ this.searchTimeout = null;
+ }, 350);
+
+ this.buildList();
+ }
+
+ get statusText() {
+ let model = this.$.model;
+ let data = model.data;
+ let statusText = null;
+
+ if (model.isLoading || this.searchTimeout)
+ statusText = 'Loading...';
+ else if (data == null)
+ statusText = 'No data';
+ else if (model.moreRows)
+ statusText = 'Load More';
+ else if (data.length === 0)
+ statusText = 'No results found';
+
+ return statusText;
+ }
+
+ get model() {
+ return this.$.model;
}
get activeOption() {
return this._activeOption;
}
- set activeOption(value) {
- if (value < 0) {
- value = 0;
- } else if (value >= this.itemsFiltered.length) {
- value = this.showLoadMore ? this.itemsFiltered.length : this.itemsFiltered.length - 1;
- }
- this.$timeout(() => {
- this._activeOption = value;
- if (value && value >= this.itemsFiltered.length - 3 && !this.removeLoadMore) {
- this.loadItems();
- }
- });
+ /**
+ * Shows the drop-down. If a parent is specified it is shown in a visible
+ * relative position to it.
+ *
+ * @param {String} search The initial search term or %null
+ */
+ show(search) {
+ if (this._shown) return;
+ this._shown = true;
+ this._activeOption = -1;
+ this.search = search;
+ this.buildList();
+ this.element.style.display = 'block';
+ this.list.scrollTop = 0;
+ this.$timeout(() => this.$element.addClass('shown'), 40);
+ this.document.addEventListener('keydown', this.docKeyDownHandler);
+ this.document.addEventListener('focusin', this.docFocusInHandler);
+ this.relocate();
+ this.input.focus();
}
- _toggleDropDown(value, oldValue) {
- this.$timeout(() => {
- this._eventScroll(value);
- this._calculatePosition(value, oldValue);
- });
+ /**
+ * Hides the drop-down.
+ */
+ hide() {
+ if (!this._shown) return;
+ this._shown = false;
+ this.element.style.display = '';
+ this.$element.removeClass('shown');
+ this.document.removeEventListener('keydown', this.docKeyDownHandler);
+ this.document.removeEventListener('focusin', this.docFocusInHandler);
+ if (this.parent)
+ this.parent.focus();
}
- _eventScroll(add, num) {
- let count = num || 0;
- if (add) {
- if (this.container) {
- this.container.addEventListener('scroll', e => this.loadFromScroll(e));
- // this.$timeout(() => { // falla al entrar por primera vez xq pierde el foco y cierra el dropdown
- // this._setFocusInFilterInput();
- // });
- } else if (count < 4) {
- count++;
- this.$timeout(() => { // wait angular ngIf
- this._eventScroll(add, count);
- }, 250);
- }
- } else if (this.container) {
- this.container.removeEventListener('scroll', e => this.loadFromScroll(e));
+ /**
+ * Repositions the drop-down to a correct location relative to the parent.
+ */
+ relocate() {
+ if (!this.parent) return;
+
+ let style = this.body.style;
+ style.width = '';
+ style.height = '';
+
+ let parentRect = this.parent.getBoundingClientRect();
+ let bodyRect = this.body.getBoundingClientRect();
+
+ let top = parentRect.top + parentRect.height;
+ let height = bodyRect.height;
+ let width = Math.max(bodyRect.width, parentRect.width);
+
+ let margin = 10;
+
+ if (top + height + margin > window.innerHeight)
+ top = Math.max(parentRect.top - height, margin);
+
+ style.top = `${top}px`;
+ style.left = `${parentRect.left}px`;
+ style.width = `${width}px`;
+
+ if (height + margin * 2 > window.innerHeight)
+ style.height = `${window.innerHeight - margin * 2}px`;
+ }
+
+ /**
+ * Activates a option and scrolls the drop-down to that option.
+ *
+ * @param {Number} option The option index
+ */
+ moveToOption(option) {
+ this.activateOption(option);
+
+ let list = this.list;
+ let li = this.activeLi;
+ if (!li) return;
+
+ let liRect = li.getBoundingClientRect();
+ let listRect = list.getBoundingClientRect();
+
+ if (liRect.bottom > listRect.bottom)
+ list.scrollTop += liRect.bottom - listRect.bottom;
+ else if (liRect.top < listRect.top)
+ list.scrollTop -= listRect.top - liRect.top;
+ }
+
+ /**
+ * Activates a option.
+ *
+ * @param {Number} option The option index
+ */
+ activateOption(option) {
+ this._activeOption = option;
+
+ if (this.activeLi)
+ this.activeLi.className = '';
+
+ let data = this.$.model.data;
+
+ if (option >= 0 && data && option < data.length) {
+ this.activeLi = this.container.children[option];
+ this.activeLi.className = 'active';
}
}
- _setFocusInFilterInput() {
- let inputFilterSearch = this.$element[0].querySelector('input');
- this._focusingFilter = true;
- if (inputFilterSearch)
- this.$timeout(() => {
- inputFilterSearch.focus();
- this._focusingFilter = false;
- }, 250);
- }
+ /**
+ * Selects an option.
+ *
+ * @param {Number} option The option index
+ */
+ selectOption(option) {
+ if (option != -1) {
+ let data = this.$.model.data;
+ let item = data ? data[option] : null;
+ let value = item ? item[this.valueField] : null;
- _background(create) {
- let el = document.getElementById('ddBack');
- if (el) {
- el.parentNode.removeChild(el);
- }
+ if (this.multiple) {
+ if (!Array.isArray(this.selection)) {
+ this.selection = [];
+ this.field = [];
+ }
- if (create) {
- el = document.createElement('div');
- el.id = 'ddBack';
- document.body.appendChild(el);
- }
- }
- _calculatePosition(value, oldValue) {
- if (value && !oldValue) {
- if (this.parent === undefined) {
- this.parent = this.$element.parent().parent();
+ this.selection.push(item);
+ this.field.push(value);
+ } else {
+ this.selection = item;
+ this.field = value;
}
- let parentRect = this.parent.getBoundingClientRect();
- let elemetRect = this.$element[0].getBoundingClientRect();
- let instOffset = parentRect.bottom + elemetRect.height;
-
- if (instOffset >= window.innerHeight) {
- this._background(true);
- this.$element.addClass('fixed-dropDown');
- this.$element.css('top', `${(parentRect.top - elemetRect.height)}px`);
- this.$element.css('left', `${(parentRect.x)}px`);
- this.$element.css('height', `${elemetRect.height}px`);
- }
- } else if (!value && oldValue) {
- this.$element.removeAttr('style');
- if (this.itemWidth) {
- this.$element.css('width', this.itemWidth + 'px');
- }
- this.$element.removeClass('fixed-dropDown');
- this._background();
+ if (this.onSelect)
+ this.onSelect({value: value});
}
+
+ if (!this.multiple)
+ this.hide();
}
- filterItems() {
- this.itemsFiltered = this.search ? this.$filter('filter')(this.items, this.search) : this.items;
+ refreshModel() {
+ this.$.model.filter = {
+ fields: this.selectFields,
+ where: this.getWhere(this._search),
+ order: this.getOrder(),
+ limit: this.limit || 8
+ };
+ this.$.model.refresh(this._search);
}
- onFilterRest() {
- if (this.filterAction) {
- this.filterAction({search: this.search});
+ getWhere(search) {
+ if (search == '' || search == null)
+ return undefined;
+
+ if (this.where) {
+ let jsonFilter = this.where.replace(/search/g, search);
+ return this.$.$eval(jsonFilter);
}
+
+ let where = {};
+ where[this.showField] = {regexp: search};
+ return where;
}
- clearSearch() {
+ getOrder() {
+ if (this.order)
+ return this.order;
+ else if (this.showField)
+ return `${this.showField} ASC`;
+
+ return undefined;
+ }
+
+ onMouseDown(event) {
+ this.lastMouseEvent = event;
+ }
+
+ onBackgroundMouseDown(event) {
+ if (event != this.lastMouseEvent)
+ this.hide();
+ }
+
+ onFocusIn(event) {
+ this.lastFocusEvent = event;
+ }
+
+ onDocFocusIn(event) {
+ if (event !== this.lastFocusEvent && event.originalTarget !== this.parent)
+ this.hide();
+ }
+
+ onClearClick() {
this.search = null;
}
- selectOption() {
- if (this.activeOption >= 0 && this.activeOption < this.items.length && this.items[this.activeOption]) {
- this.selected = this.items[this.activeOption];
- this.show = false;
- this.clearSearch();
- } else if (this.showLoadMore && this.activeOption === this.items.length) {
- this.loadMore();
- }
+ onScroll() {
+ let list = this.list;
+ let shouldLoad =
+ list.scrollTop + list.clientHeight >= (list.scrollHeight - 40)
+ && !this.$.model.isLoading;
+
+ if (shouldLoad)
+ this.$.model.loadMore();
}
- onKeydown(event) {
- if (this.show) {
- if (event.keyCode === 13) { // Enter
- this.$timeout(() => {
- this.selectOption();
- });
- event.preventDefault();
- } else if (event.keyCode === 27) { // Escape
- this.clearSearch();
- } else if (event.keyCode === 38) { // Arrow up
- this.activeOption--;
- this.$timeout(() => {
- this.setScrollPosition();
- }, 100);
- } else if (event.keyCode === 40) { // Arrow down
- this.activeOption++;
- this.$timeout(() => {
- this.setScrollPosition();
- }, 100);
- } else if (event.keyCode === 35) { // End
- this.activeOption = this.itemsFiltered.length - 1;
- this.$timeout(() => {
- this.setScrollPosition();
- }, 100);
- } else if (event.keyCode === 36) { // Start
- this.activeOption = 0;
- this.$timeout(() => {
- this.setScrollPosition();
- }, 100);
- } else if (this.filter) {
- let oldValue = this.search || '';
- if (validKey(event)) {
- this.search = oldValue + String.fromCharCode(event.keyCode);
- } else if (event.keyCode === 8) { // backSpace
- this.search = oldValue.slice(0, -1);
- }
- } /* else {
- console.error(`Error: keyCode ${event.keyCode} not supported`);
- } */
- }
+ onLoadMoreClick(event) {
+ event.preventDefault();
+ this.$.model.loadMore();
}
- setScrollPosition() {
- let child = this.$element[0].querySelector('ul.dropdown li.active');
- if (child) {
- let childRect = child.getBoundingClientRect();
- let containerRect = this.container.getBoundingClientRect();
- if (typeof child.scrollIntoView === 'function' && (childRect.top > containerRect.top + containerRect.height || childRect.top < containerRect.top)) {
- child.scrollIntoView();
+
+ onContainerClick(event) {
+ if (event.defaultPrevented) return;
+ let index = getPosition(this.container, event);
+ if (index != -1) this.selectOption(index);
+ }
+
+ onModelDataChange() {
+ this.buildList();
+ }
+
+ onDocKeyDown(event) {
+ if (event.defaultPrevented) return;
+
+ let data = this.$.model.data;
+ let option = this.activeOption;
+ let nOpts = data ? data.length - 1 : 0;
+
+ switch (event.keyCode) {
+ case 13: // Enter
+ this.selectOption(option);
+ break;
+ case 27: // Escape
+ this.hide();
+ break;
+ case 38: // Up
+ this.moveToOption(option <= 0 ? nOpts : option - 1);
+ break;
+ case 40: // Down
+ this.moveToOption(option >= nOpts ? 0 : option + 1);
+ break;
+ case 35: // End
+ this.moveToOption(nOpts);
+ break;
+ case 36: // Start
+ this.moveToOption(0);
+ break;
+ default:
+ return;
+ }
+
+ event.preventDefault();
+ this.$.$applyAsync();
+ }
+
+ buildList() {
+ this.destroyScopes();
+ this.scopes = [];
+
+ let hasTemplate = this.$transclude &&
+ this.$transclude.isSlotFilled('tplItem');
+ let fragment = this.document.createDocumentFragment();
+ let data = this.$.model.data;
+
+ if (data) {
+ for (let i = 0; i < data.length; i++) {
+ let li = this.document.createElement('li');
+ fragment.appendChild(li);
+
+ if (this.multiple) {
+ let check = this.document.createElement('input');
+ check.type = 'checkbox';
+ li.appendChild(check);
+
+ if (this.field && this.field.indexOf(data[i][this.valueField]) != -1)
+ check.checked = true;
+ }
+
+ if (hasTemplate) {
+ this.$transclude((clone, scope) => {
+ Object.assign(scope, data[i]);
+ li.appendChild(clone[0]);
+ this.scopes[i] = scope;
+ }, null, 'tplItem');
+ } else {
+ let text = this.document.createTextNode(data[i][this.showField]);
+ li.appendChild(text);
+ }
}
}
+
+ this.container.innerHTML = '';
+ this.container.appendChild(fragment);
+ this.activateOption(this._activeOption);
+ this.relocate();
}
- selectItem(item) {
- this.selected = item;
- if (this.multiple) {
- item.checked = !item.checked;
- this.show = true;
- } else {
- this.show = false;
- }
- }
- loadItems() {
- if (this.showLoadMore && this.loadMore) {
- this.loadMore();
- }
- this.show = true;
- }
- loadFromScroll(e) {
- let containerRect = e.target.getBoundingClientRect();
- if (e.target.scrollHeight - e.target.scrollTop - containerRect.height <= 50) {
- this.loadItems();
- }
- }
- $onChanges(changesObj) {
- if (changesObj.show && changesObj.itemWidth && changesObj.itemWidth.currentValue) {
- this.$element.css('width', changesObj.itemWidth.currentValue + 'px');
- }
- if (changesObj.items) {
- this.filterItems();
- }
- }
- $onInit() {
- if (this.parent)
- this.parent.addEventListener('keydown', e => this.onKeydown(e));
+
+ destroyScopes() {
+ if (this.scopes)
+ for (let scope of this.scopes)
+ scope.$destroy();
}
+
$onDestroy() {
- if (this.parent)
- this.parent.removeEventListener('keydown', e => this.onKeydown(e));
+ this.destroyScopes();
}
}
+DropDown.$inject = ['$element', '$scope', '$transclude', '$timeout', '$http', '$translate'];
-DropDown.$inject = ['$element', '$filter', '$timeout'];
+/**
+ * Gets the position of an event element relative to a parent.
+ *
+ * @param {HTMLElement} parent The parent element
+ * @param {Event} event The event object
+ * @return {Number} The element index
+ */
+function getPosition(parent, event) {
+ let target = event.target;
+ let children = parent.children;
+
+ if (target === parent)
+ return -1;
+
+ while (target.parentNode !== parent)
+ target = target.parentNode;
+
+ for (let i = 0; i < children.length; i++)
+ if (children[i] === target)
+ return i;
+
+ return -1;
+}
ngModule.component('vnDropDown', {
template: require('./drop-down.html'),
controller: DropDown,
bindings: {
- items: '<',
- show: '<',
- filter: '@?',
- selected: '=',
- search: '=?',
- loadMore: '&?',
- removeLoadMore: ' {
let $componentController;
let $timeout;
let $element;
+ let $scope;
+ let $httpBackend;
+ let $q;
let $filter;
let controller;
@@ -11,337 +15,34 @@ describe('Component vnDropDown', () => {
angular.mock.module('client');
});
- beforeEach(angular.mock.inject((_$componentController_, _$timeout_, _$filter_, _$httpBackend_) => {
- _$httpBackend_.when('GET', /\/locale\/\w+\/[a-z]{2}\.json/).respond({});
+ beforeEach(angular.mock.inject((_$componentController_, $rootScope, _$timeout_, _$httpBackend_, _$q_, _$filter_) => {
$componentController = _$componentController_;
- $element = angular.element('
+
+
+
+
+
+
+
+ {{$ctrl.statusText}}
+
+ ${template}
`);
$timeout = _$timeout_;
+ $q = _$q_;
$filter = _$filter_;
- controller = $componentController('vnDropDown', {$element, $timeout, $filter});
+ $scope = $rootScope.$new();
+ $httpBackend = _$httpBackend_;
+ $httpBackend.when('GET', /\/locale\/\w+\/[a-z]{2}\.json/).respond({});
+
+ $scope.model = $componentController('vnModel', {$httpBackend, $q, $filter});
+ controller = $componentController('vnDropDown', {$element, $scope, $transclude: null, $timeout, $httpBackend, $translate: null});
controller.parent = angular.element('{{$ctrl.item.name}}
- {{$ctrl.tags[itemTag.tagFk].name}} : {{itemTag.value}}
+ {{$ctrl.tags[itemTag.tagFk].name}} {{itemTag.value}}
Tags
-- {{tag.tag.name}}: {{tag.value}} +
Tax
++ {{tax.country.country}}: {{tax.taxClass.description}}
Tags
++ {{tag.tag.name}}: {{tag.value}} +
+Nicho
diff --git a/client/item/src/summary/item-summary.js b/client/item/src/summary/item-summary.js index 054a5d0f3..401d70f0a 100644 --- a/client/item/src/summary/item-summary.js +++ b/client/item/src/summary/item-summary.js @@ -17,6 +17,25 @@ class ItemSummary { }); } + _getTaxes() { + let filter = { + fields: ['id', 'countryFk', 'taxClassFk'], + include: [{ + relation: 'country', + scope: {fields: ['country']} + }, { + relation: 'taxClass', + scope: {fields: ['id', 'description']} + }] + }; + + let urlFilter = encodeURIComponent(JSON.stringify(filter)); + let url = `/item/api/Items/${this.item.id}/taxes?filter=${urlFilter}`; + this.$http.get(url).then(json => { + this.taxes = json.data; + }); + } + _getBotanical() { let filter = { where: {itemFk: this.item.id}, @@ -58,6 +77,7 @@ class ItemSummary { this._getTags(); this._getBarcodes(); this._getNiches(); + this._getTaxes(); if (!this.item.botanical) this._getBotanical(); } diff --git a/client/salix/src/components/left-menu/actions.html b/client/salix/src/components/left-menu/actions.html index 9c10185fe..35fa96d32 100644 --- a/client/salix/src/components/left-menu/actions.html +++ b/client/salix/src/components/left-menu/actions.html @@ -1,5 +1,5 @@-
+