quitado autocomplete anterior
This commit is contained in:
Dani Herrero
parent
1dad2147ca
commit
07f8309d36
|
|
@ -1,20 +0,0 @@
|
|||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
|
||||
<input type="text"
|
||||
class="mdl-textfield__input"
|
||||
ng-keydown="$ctrl.onKeydown($event)"
|
||||
ng-click="$ctrl.onClick($event)"
|
||||
ng-keyup="$ctrl.onKeyup($event)"
|
||||
ng-focus="$ctrl.onFocus($event)"
|
||||
ng-blur="$ctrl.onBlur($event)"/>
|
||||
<button
|
||||
type="button"
|
||||
class="mdl-chip__action ng-hide"
|
||||
tabindex="-1"
|
||||
translate-attr="{title: 'Clear'}"
|
||||
ng-show="$ctrl.value"
|
||||
ng-click="$ctrl.onClear()"
|
||||
>
|
||||
<i class="material-icons">clear</i>
|
||||
</button>
|
||||
<label class="mdl-textfield__label">{{$ctrl.label | translate}}</label>
|
||||
</div>
|
||||
|
|
@ -1,435 +0,0 @@
|
|||
import {module} from '../module';
|
||||
import Component from '../lib/component';
|
||||
import './style.scss';
|
||||
|
||||
/**
|
||||
* Combobox like component with search and partial data loading features.
|
||||
*/
|
||||
export default class Autocomplete extends Component {
|
||||
constructor($element, $scope, $http, vnPopover, $transclude, $timeout) {
|
||||
super($element);
|
||||
this.input = $element[0].querySelector('input');
|
||||
this.item = null;
|
||||
this.$timeout = $timeout;
|
||||
// this.data = null;
|
||||
this.popover = null;
|
||||
this.popoverId = null;
|
||||
this.displayData = null;
|
||||
this.timeoutId = null;
|
||||
this.lastSearch = null;
|
||||
this.lastRequest = null;
|
||||
this.currentRequest = null;
|
||||
this.moreData = false;
|
||||
this.activeOption = -1;
|
||||
this.locked = false;
|
||||
this.$http = $http;
|
||||
this.$scope = $scope;
|
||||
this.vnPopover = vnPopover;
|
||||
this.$transclude = $transclude;
|
||||
this.scopes = null;
|
||||
|
||||
Object.assign(this, {
|
||||
maxRows: 10,
|
||||
requestDelay: 350,
|
||||
showField: 'name',
|
||||
valueField: 'id',
|
||||
itemAs: 'i'
|
||||
});
|
||||
|
||||
componentHandler.upgradeElement($element[0].firstChild);
|
||||
}
|
||||
set field(value) {
|
||||
this.locked = true;
|
||||
this.setValue(value);
|
||||
this.locked = false;
|
||||
}
|
||||
get field() {
|
||||
return this.value;
|
||||
}
|
||||
set initialData(value) {
|
||||
if (value) {
|
||||
if (!this.data)
|
||||
this.data = [];
|
||||
this.data.push(value);
|
||||
}
|
||||
}
|
||||
set selectFields(value) {
|
||||
this._selectFields = [];
|
||||
|
||||
if (!value)
|
||||
return;
|
||||
|
||||
let res = value.split(',');
|
||||
for (let i of res)
|
||||
this._selectFields.push(i.trim());
|
||||
}
|
||||
mdlUpdate() {
|
||||
let mdlField = this.element.firstChild.MaterialTextfield;
|
||||
if (mdlField)
|
||||
mdlField.updateClasses_();
|
||||
}
|
||||
loadData(textFilter) {
|
||||
textFilter = textFilter ? textFilter : '';
|
||||
|
||||
if (this.lastSearch === textFilter) {
|
||||
this.showPopoverIfFocus();
|
||||
return;
|
||||
}
|
||||
|
||||
this.lastSearch = textFilter;
|
||||
|
||||
let lastRequest = this.lastRequest;
|
||||
let requestWillSame = lastRequest !== null
|
||||
&& !this.moreData
|
||||
&& textFilter.substr(0, lastRequest.length) === lastRequest;
|
||||
|
||||
if (requestWillSame || !this.url)
|
||||
this.localFilter(textFilter);
|
||||
else if (this.url)
|
||||
this.requestData(textFilter, false);
|
||||
else
|
||||
this.setDisplayData(this.data);
|
||||
}
|
||||
getRequestFields() {
|
||||
let fields = {};
|
||||
fields[this.valueField] = true;
|
||||
fields[this.showField] = true;
|
||||
|
||||
if (this._selectFields)
|
||||
for (let field of this._selectFields)
|
||||
fields[field] = true;
|
||||
|
||||
return fields;
|
||||
}
|
||||
requestData(textFilter, append) {
|
||||
let where = {};
|
||||
let skip = 0;
|
||||
|
||||
if (textFilter)
|
||||
where[this.showField] = {regexp: textFilter};
|
||||
if (append && this.data)
|
||||
skip = this.data.length;
|
||||
|
||||
let filter = {
|
||||
fields: this.getRequestFields(),
|
||||
where: where,
|
||||
order: `${this.showField} ASC`,
|
||||
skip: skip,
|
||||
limit: this.maxRows
|
||||
};
|
||||
|
||||
this.lastRequest = textFilter ? textFilter : '';
|
||||
let json = JSON.stringify(filter);
|
||||
|
||||
if (this.currentRequest)
|
||||
this.currentRequest.resolve();
|
||||
|
||||
this.currentRequest = this.$http.get(`${this.url}?filter=${json}`);
|
||||
this.currentRequest.then(
|
||||
json => this.onRequest(json.data, append),
|
||||
json => this.onRequest([])
|
||||
);
|
||||
}
|
||||
onRequest(data, append) {
|
||||
this.currentRequest = null;
|
||||
this.moreData = data.length >= this.maxRows;
|
||||
|
||||
if (!append || !this.data)
|
||||
this.data = data;
|
||||
else
|
||||
this.data = this.data.concat(data);
|
||||
|
||||
this.setDisplayData(this.data);
|
||||
}
|
||||
localFilter(textFilter) {
|
||||
let regex = new RegExp(textFilter, 'i');
|
||||
let data = this.data.filter(item => {
|
||||
return regex.test(item[this.showField]);
|
||||
});
|
||||
this.setDisplayData(data);
|
||||
}
|
||||
setDisplayData(data) {
|
||||
this.displayData = data;
|
||||
this.showPopoverIfFocus();
|
||||
}
|
||||
showPopoverIfFocus() {
|
||||
if (this.hasFocus)
|
||||
this.showPopover();
|
||||
}
|
||||
destroyScopes() {
|
||||
if (this.scopes)
|
||||
for (let scope of this.scopes)
|
||||
scope.$destroy();
|
||||
}
|
||||
showPopover() {
|
||||
let data = this.displayData;
|
||||
|
||||
if (!data)
|
||||
return;
|
||||
|
||||
let fragment = this.document.createDocumentFragment();
|
||||
this.destroyScopes();
|
||||
this.scopes = [];
|
||||
|
||||
let hasTemplate = this.$transclude.isSlotFilled('tplItem');
|
||||
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
let li = this.document.createElement('li');
|
||||
fragment.appendChild(li);
|
||||
|
||||
if (hasTemplate) {
|
||||
this.$transclude((clone, scope) => {
|
||||
scope[this.itemAs] = 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);
|
||||
}
|
||||
}
|
||||
|
||||
if (this.moreData) {
|
||||
let li = this.document.createElement('li');
|
||||
li.appendChild(this.document.createTextNode('Load more'));
|
||||
li.className = 'load-more';
|
||||
fragment.appendChild(li);
|
||||
}
|
||||
|
||||
if (this.popover) {
|
||||
this.popover.innerHTML = '';
|
||||
this.popover.appendChild(fragment);
|
||||
} else {
|
||||
let popover = this.document.createElement('ul');
|
||||
popover.addEventListener('click',
|
||||
e => this.onPopoverClick(e));
|
||||
popover.addEventListener('mousedown',
|
||||
e => this.onPopoverMousedown(e));
|
||||
popover.className = 'vn-autocomplete';
|
||||
popover.appendChild(fragment);
|
||||
this.popoverId = this.vnPopover.show(popover, this.input);
|
||||
this.popover = popover;
|
||||
}
|
||||
}
|
||||
hidePopover() {
|
||||
if (!this.popover) return;
|
||||
this.activeOption = -1;
|
||||
this.vnPopover.hide(this.popoverId);
|
||||
this.destroyScopes();
|
||||
this.popover = null;
|
||||
}
|
||||
selectPopoverOption(index) {
|
||||
if (!this.popover || index === -1) return;
|
||||
if (index < this.displayData.length) {
|
||||
this.selectOptionByDataIndex(this.displayData, index);
|
||||
this.hidePopover();
|
||||
} else
|
||||
this.requestData(this.lastRequest, true);
|
||||
}
|
||||
onPopoverClick(event) {
|
||||
let target = event.target;
|
||||
let childs = this.popover.childNodes;
|
||||
|
||||
if (target === this.popover)
|
||||
return;
|
||||
|
||||
while (target.parentNode !== this.popover)
|
||||
target = target.parentNode;
|
||||
|
||||
for (let i = 0; i < childs.length; i++)
|
||||
if (childs[i] === target) {
|
||||
this.selectPopoverOption(i);
|
||||
break;
|
||||
}
|
||||
}
|
||||
onPopoverMousedown(event) {
|
||||
// Prevents input from loosing focus
|
||||
event.preventDefault();
|
||||
}
|
||||
onClear() {
|
||||
this.setValue(null);
|
||||
this.$timeout(
|
||||
() => {
|
||||
this.mdlUpdate();
|
||||
}
|
||||
);
|
||||
}
|
||||
onClick(event) {
|
||||
if (!this.popover)
|
||||
this.showPopover();
|
||||
}
|
||||
onFocus() {
|
||||
this.hasFocus = true;
|
||||
this.input.select();
|
||||
|
||||
this.loadData();
|
||||
}
|
||||
onBlur() {
|
||||
this.hasFocus = false;
|
||||
this.restoreShowValue();
|
||||
this.hidePopover();
|
||||
}
|
||||
onKeydown(event) {
|
||||
switch (event.keyCode) {
|
||||
case 13: // Enter
|
||||
this.selectPopoverOption(this.activeOption);
|
||||
break;
|
||||
case 27: // Escape
|
||||
this.restoreShowValue();
|
||||
this.input.select();
|
||||
break;
|
||||
case 38: // Arrow up
|
||||
this.activateOption(this.activeOption - 1);
|
||||
break;
|
||||
case 40: // Arrow down
|
||||
this.activateOption(this.activeOption + 1);
|
||||
break;
|
||||
default:
|
||||
return;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
}
|
||||
onKeyup(event) {
|
||||
if (!this.isKeycodePrintable(event.keyCode)) return;
|
||||
if (this.timeoutId) clearTimeout(this.timeoutId);
|
||||
this.timeoutId = setTimeout(() => this.onTimeout(), this.requestDelay);
|
||||
}
|
||||
onTimeout() {
|
||||
this.loadData(this.input.value);
|
||||
this.timeoutId = null;
|
||||
}
|
||||
isKeycodePrintable(keyCode) {
|
||||
return keyCode === 32 // Spacebar
|
||||
|| keyCode === 8 // Backspace
|
||||
|| (keyCode > 47 && keyCode < 58) // Numbers
|
||||
|| (keyCode > 64 && keyCode < 91) // Letters
|
||||
|| (keyCode > 95 && keyCode < 112) // Numpad
|
||||
|| (keyCode > 185 && keyCode < 193) // ;=,-./`
|
||||
|| (keyCode > 218 && keyCode < 223); // [\]'
|
||||
}
|
||||
restoreShowValue() {
|
||||
this.putItem(this.item);
|
||||
}
|
||||
requestItem() {
|
||||
if (!this.value) return;
|
||||
|
||||
let where = {};
|
||||
where[this.valueField] = this.value;
|
||||
|
||||
let filter = {
|
||||
fields: this.getRequestFields(),
|
||||
where: where
|
||||
};
|
||||
|
||||
let json = JSON.stringify(filter);
|
||||
|
||||
this.$http.get(`${this.url}?filter=${json}`).then(
|
||||
json => this.onItemRequest(json.data),
|
||||
json => this.onItemRequest(null)
|
||||
);
|
||||
}
|
||||
onItemRequest(data) {
|
||||
if (data && data.length > 0)
|
||||
this.showItem(data[0]);
|
||||
else
|
||||
this.showItem(null);
|
||||
}
|
||||
activateOption(index) {
|
||||
if (!this.popover)
|
||||
this.showPopover();
|
||||
|
||||
let popover = this.popover;
|
||||
let childs = popover.childNodes;
|
||||
let len = this.displayData.length;
|
||||
|
||||
if (this.activeOption >= 0)
|
||||
childs[this.activeOption].className = '';
|
||||
|
||||
if (index >= len)
|
||||
index = 0;
|
||||
else if (index < 0)
|
||||
index = len - 1;
|
||||
|
||||
if (index >= 0) {
|
||||
let opt = childs[index];
|
||||
let top = popover.scrollTop;
|
||||
let height = popover.clientHeight;
|
||||
|
||||
if (opt.offsetTop + opt.offsetHeight > top + height)
|
||||
top = opt.offsetTop + opt.offsetHeight - height;
|
||||
else if (opt.offsetTop < top)
|
||||
top = opt.offsetTop;
|
||||
|
||||
opt.className = 'active';
|
||||
popover.scrollTop = top;
|
||||
}
|
||||
|
||||
this.activeOption = index;
|
||||
}
|
||||
setValue(value) {
|
||||
this.value = value;
|
||||
|
||||
if (value) {
|
||||
let data = this.data;
|
||||
|
||||
if (data)
|
||||
for (let i = 0; i < data.length; i++)
|
||||
if (data[i][this.valueField] == value) {
|
||||
this.putItem(data[i]);
|
||||
return;
|
||||
}
|
||||
|
||||
this.requestItem();
|
||||
} else
|
||||
this.putItem(null);
|
||||
}
|
||||
selectOptionByIndex(index) {
|
||||
this.selectOptionByDataIndex(this.data, index);
|
||||
}
|
||||
selectOptionByDataIndex(data, index) {
|
||||
if (data && index >= 0 && index < data.length)
|
||||
this.putItem(data[index]);
|
||||
else
|
||||
this.putItem(null);
|
||||
}
|
||||
putItem(item) {
|
||||
this.showItem(item);
|
||||
let value = item ? item[this.valueField] : undefined;
|
||||
|
||||
if (!this.locked)
|
||||
this.value = value;
|
||||
|
||||
if (this.onChange)
|
||||
this.onChange({item: item});
|
||||
}
|
||||
showItem(item) {
|
||||
this.input.value = item ? item[this.showField] : '';
|
||||
this.item = item;
|
||||
this.mdlUpdate();
|
||||
}
|
||||
$onDestroy() {
|
||||
this.destroyScopes();
|
||||
}
|
||||
}
|
||||
Autocomplete.$inject = ['$element', '$scope', '$http', 'vnPopover', '$transclude', '$timeout'];
|
||||
|
||||
module.component('vnAutocomplete', {
|
||||
template: require('./autocomplete.html'),
|
||||
bindings: {
|
||||
url: '@?',
|
||||
showField: '@?',
|
||||
valueField: '@?',
|
||||
selectFields: '@?',
|
||||
initialData: '<?',
|
||||
onChange: '&?',
|
||||
data: '<?',
|
||||
itemAs: '@?',
|
||||
field: '=',
|
||||
label: '@'
|
||||
},
|
||||
transclude: {
|
||||
tplItem: '?tplItem'
|
||||
},
|
||||
controller: Autocomplete
|
||||
});
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
import './autocomplete.js';
|
||||
|
||||
describe('Core', () => {
|
||||
describe('Component mdlUpdate', () => {
|
||||
let $componentController;
|
||||
let $state;
|
||||
|
||||
beforeEach(() => {
|
||||
angular.mock.module('client');
|
||||
});
|
||||
|
||||
beforeEach(angular.mock.inject((_$componentController_, _$state_) => {
|
||||
$componentController = _$componentController_;
|
||||
$state = _$state_;
|
||||
$state.params.id = '1234';
|
||||
}));
|
||||
|
||||
it('should define and set address property', () => {
|
||||
let controller = $componentController('vnAddressCreate', {$state: $state});
|
||||
expect(controller.address.clientFk).toBe(1234);
|
||||
expect(controller.address.enabled).toBe(true);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
ul.vn-autocomplete {
|
||||
list-style-type: none;
|
||||
padding: 1em;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: auto;
|
||||
max-height: 300px;
|
||||
|
||||
li {
|
||||
display: block;
|
||||
padding: .8em;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
|
||||
&.active,
|
||||
&:hover {
|
||||
background-color: rgba(1,1,1,.1);
|
||||
}
|
||||
&.load-more {
|
||||
color: #ffa410;
|
||||
font-weight: bold;
|
||||
padding: .4em .8em;
|
||||
}
|
||||
}
|
||||
}
|
||||
vn-autocomplete {
|
||||
.mdl-chip__action {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: -6px;
|
||||
margin: 22px 0px;
|
||||
background-color: white;
|
||||
}
|
||||
.material-icons {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue