485 lines
12 KiB
JavaScript
Executable File
485 lines
12 KiB
JavaScript
Executable File
import './style.scss';
|
|
import ngModule from '../../module';
|
|
import Component from '../../lib/component';
|
|
import ArrayModel from '../array-model/array-model';
|
|
import CrudModel from '../crud-model/crud-model';
|
|
import {mergeWhere} from 'vn-loopback/util/filter';
|
|
|
|
/**
|
|
* @event select Thrown when model item is selected
|
|
* @event change Thrown when model data is ready
|
|
*/
|
|
export default class DropDown extends Component {
|
|
constructor($element, $scope, $transclude, $timeout, $translate, $http, $q, $filter) {
|
|
super($element, $scope);
|
|
this.$transclude = $transclude;
|
|
this.$timeout = $timeout;
|
|
this.$translate = $translate;
|
|
this.$http = $http;
|
|
this.$q = $q;
|
|
this.$filter = $filter;
|
|
|
|
this.valueField = 'id';
|
|
this.showField = 'name';
|
|
this._search = undefined;
|
|
this._activeOption = -1;
|
|
this.showLoadMore = true;
|
|
this.showFilter = true;
|
|
|
|
this.docKeyDownHandler = e => this.onDocKeyDown(e);
|
|
}
|
|
|
|
$postLink() {
|
|
super.$postLink();
|
|
this.input = this.element.querySelector('.search input');
|
|
this.ul = this.element.querySelector('ul');
|
|
this.list = this.element.querySelector('.list');
|
|
this.list.addEventListener('scroll', e => this.onScroll(e));
|
|
}
|
|
|
|
get shown() {
|
|
return this.$.popover && this.$.popover.shown;
|
|
}
|
|
|
|
set shown(value) {
|
|
this.$.popover.shown = value;
|
|
}
|
|
|
|
get search() {
|
|
return this._search;
|
|
}
|
|
|
|
set search(value) {
|
|
let oldValue = this._search;
|
|
this._search = value;
|
|
|
|
if (!this.shown) return;
|
|
|
|
value = value == '' || value == null ? null : value;
|
|
oldValue = oldValue == '' || oldValue == null ? null : oldValue;
|
|
if (value === oldValue && this.modelData != null) return;
|
|
|
|
if (value != null)
|
|
this._activeOption = 0;
|
|
|
|
this.$timeout.cancel(this.searchTimeout);
|
|
|
|
if (this.model) {
|
|
this.model.clear();
|
|
if (!this.data) {
|
|
this.searchTimeout = this.$timeout(() => {
|
|
this.refreshModel();
|
|
this.searchTimeout = null;
|
|
}, 350);
|
|
} else
|
|
this.refreshModel();
|
|
}
|
|
|
|
this.buildList();
|
|
}
|
|
|
|
get statusText() {
|
|
let model = this.model;
|
|
let data = this.modelData;
|
|
|
|
if (!model)
|
|
return 'No data';
|
|
if (model.isLoading || this.searchTimeout)
|
|
return 'Loading...';
|
|
if (data == null)
|
|
return 'No data';
|
|
if (model.moreRows)
|
|
return 'Load More';
|
|
if (data.length === 0)
|
|
return 'No results found';
|
|
|
|
return null;
|
|
}
|
|
|
|
get activeOption() {
|
|
return this._activeOption;
|
|
}
|
|
|
|
/**
|
|
* Shows the drop-down. If a parent is specified it is shown in a visible
|
|
* relative position to it.
|
|
*
|
|
* @param {HTMLElement} parent The parent element to show drop down relative to
|
|
* @param {String} search The initial search term or %null
|
|
*/
|
|
show(parent, search) {
|
|
this._activeOption = -1;
|
|
this.search = search;
|
|
this.$.popover.show(parent || this.parent);
|
|
this.buildList();
|
|
}
|
|
|
|
/**
|
|
* Hides the drop-down.
|
|
*/
|
|
hide() {
|
|
this.$.popover.hide();
|
|
}
|
|
|
|
/**
|
|
* Activates an 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 an option.
|
|
*
|
|
* @param {Number} option The option index
|
|
*/
|
|
activateOption(option) {
|
|
this._activeOption = option;
|
|
|
|
if (this.activeLi)
|
|
this.activeLi.className = '';
|
|
|
|
let data = this.modelData;
|
|
|
|
if (option >= 0 && data && option < data.length) {
|
|
this.activeLi = this.ul.children[option];
|
|
this.activeLi.className = 'active';
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Selects an option.
|
|
*
|
|
* @param {Number} option The option index
|
|
*/
|
|
selectOption(option) {
|
|
let data = this.modelData;
|
|
let item = option != -1 && data ? data[option] : null;
|
|
|
|
if (item) {
|
|
let value = item[this.valueField];
|
|
|
|
if (this.multiple) {
|
|
if (!Array.isArray(this.selection)) {
|
|
this.selection = [];
|
|
this.field = [];
|
|
}
|
|
|
|
this.selection.push(item);
|
|
this.field.push(value);
|
|
} else {
|
|
this.selection = item;
|
|
this.field = value;
|
|
}
|
|
|
|
this.emit('select', {value: value});
|
|
}
|
|
|
|
if (!this.multiple)
|
|
this.$.popover.hide();
|
|
}
|
|
|
|
onOpen() {
|
|
this.document.addEventListener('keydown', this.docKeyDownHandler);
|
|
this.list.scrollTop = 0;
|
|
this.input.focus();
|
|
}
|
|
|
|
onClose() {
|
|
this.document.removeEventListener('keydown', this.docKeyDownHandler);
|
|
}
|
|
|
|
onClearClick() {
|
|
this.search = null;
|
|
}
|
|
|
|
onScroll() {
|
|
let list = this.list;
|
|
let shouldLoad =
|
|
list.scrollTop + list.clientHeight >= (list.scrollHeight - 40)
|
|
&& !this.model.isLoading;
|
|
|
|
if (shouldLoad)
|
|
this.model.loadMore();
|
|
}
|
|
|
|
onLoadMoreClick(event) {
|
|
if (event.defaultPrevented) return;
|
|
event.preventDefault();
|
|
this.model.loadMore();
|
|
}
|
|
|
|
onContainerClick(event) {
|
|
if (event.defaultPrevented) return;
|
|
let index = getPosition(this.ul, event);
|
|
if (index != -1) {
|
|
event.preventDefault();
|
|
this.selectOption(index);
|
|
}
|
|
}
|
|
|
|
onDocKeyDown(event) {
|
|
if (event.defaultPrevented) return;
|
|
|
|
let data = this.modelData;
|
|
let option = this.activeOption;
|
|
let nOpts = data ? data.length - 1 : 0;
|
|
|
|
switch (event.keyCode) {
|
|
case 9: // Tab
|
|
this.selectOption(option);
|
|
return;
|
|
case 13: // Enter
|
|
this.selectOption(option);
|
|
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() {
|
|
if (!this.shown) return;
|
|
this.destroyList();
|
|
|
|
let hasTemplate = this.$transclude && this.$transclude.isSlotFilled('tplItem');
|
|
let fragment = this.document.createDocumentFragment();
|
|
let data = this.modelData;
|
|
|
|
if (data) {
|
|
for (let i = 0; i < data.length; i++) {
|
|
let option = data[i];
|
|
|
|
if (this.translateFields) {
|
|
option = Object.assign({}, option);
|
|
for (let field of this.translateFields)
|
|
option[field] = this.$translate.instant(option[field]);
|
|
}
|
|
|
|
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(option[this.valueField]) != -1)
|
|
check.checked = true;
|
|
}
|
|
|
|
if (hasTemplate) {
|
|
this.$transclude((clone, scope) => {
|
|
Object.assign(scope, option);
|
|
li.appendChild(clone[0]);
|
|
this.scopes[i] = scope;
|
|
}, null, 'tplItem');
|
|
} else {
|
|
let text = this.document.createTextNode(option[this.showField]);
|
|
li.appendChild(text);
|
|
}
|
|
}
|
|
}
|
|
|
|
this.ul.appendChild(fragment);
|
|
this.activateOption(this._activeOption);
|
|
this.$.$applyAsync(() => this.$.popover.relocate());
|
|
}
|
|
|
|
destroyList() {
|
|
this.ul.innerHTML = '';
|
|
|
|
if (this.scopes) {
|
|
for (let scope of this.scopes)
|
|
scope.$destroy();
|
|
}
|
|
|
|
this.scopes = [];
|
|
}
|
|
|
|
getFields() {
|
|
let fields = [];
|
|
fields.push(this.valueField);
|
|
fields.push(this.showField);
|
|
|
|
if (this.fields) {
|
|
for (let field of this.fields)
|
|
fields.push(field);
|
|
}
|
|
|
|
return fields;
|
|
}
|
|
|
|
$onDestroy() {
|
|
this.destroyList();
|
|
}
|
|
|
|
// Model related code
|
|
|
|
onDataChange() {
|
|
if (this.model.orgData)
|
|
this.emit('dataReady');
|
|
this.buildList();
|
|
}
|
|
|
|
get modelData() {
|
|
return this._model ? this._model.data : null;
|
|
}
|
|
|
|
get model() {
|
|
return this._model;
|
|
}
|
|
|
|
set model(value) {
|
|
this.linkEvents({_model: value}, {dataChange: this.onDataChange});
|
|
this.onDataChange();
|
|
}
|
|
|
|
get url() {
|
|
return this._url;
|
|
}
|
|
|
|
set url(value) {
|
|
this._url = value;
|
|
if (value) {
|
|
this.model = new CrudModel(this.$q, this.$http);
|
|
this.model.autoLoad = false;
|
|
this.model.url = value;
|
|
this.model.$onInit();
|
|
}
|
|
}
|
|
|
|
get data() {
|
|
return this._data;
|
|
}
|
|
|
|
set data(value) {
|
|
this._data = value;
|
|
if (value) {
|
|
this.model = new ArrayModel(this.$q, this.$filter);
|
|
this.model.autoLoad = false;
|
|
this.model.orgData = value;
|
|
this.model.$onInit();
|
|
}
|
|
}
|
|
|
|
refreshModel() {
|
|
let model = this.model;
|
|
|
|
let order;
|
|
if (this.order)
|
|
order = this.order;
|
|
else if (this.showField)
|
|
order = `${this.showField} ASC`;
|
|
|
|
let filter = {
|
|
order,
|
|
limit: this.limit || 8
|
|
};
|
|
|
|
if (model instanceof CrudModel) {
|
|
let searchExpr = this._search == null
|
|
? null
|
|
: this.searchFunction({$search: this._search});
|
|
|
|
Object.assign(filter, {
|
|
fields: this.getFields(),
|
|
include: this.include,
|
|
where: mergeWhere(this.where, searchExpr)
|
|
});
|
|
} else if (model instanceof ArrayModel) {
|
|
if (this._search != null)
|
|
filter.where = this.searchFunction({$search: this._search});
|
|
}
|
|
|
|
return this.model.applyFilter(filter);
|
|
}
|
|
|
|
searchFunction(scope) {
|
|
if (this.model instanceof CrudModel)
|
|
return {[this.showField]: {like: `%${scope.$search}%`}};
|
|
if (this.model instanceof ArrayModel)
|
|
return {[this.showField]: scope.$search};
|
|
}
|
|
}
|
|
DropDown.$inject = ['$element', '$scope', '$transclude', '$timeout', '$translate', '$http', '$q', '$filter'];
|
|
|
|
/**
|
|
* 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: {
|
|
field: '=?',
|
|
selection: '=?',
|
|
search: '<?',
|
|
showFilter: '<?',
|
|
parent: '<?',
|
|
multiple: '<?',
|
|
onSelect: '&?',
|
|
translateFields: '<?',
|
|
data: '<?',
|
|
url: '@?',
|
|
fields: '<?',
|
|
include: '<?',
|
|
where: '<?',
|
|
order: '@?',
|
|
limit: '<?',
|
|
searchFunction: '&?'
|
|
},
|
|
transclude: {
|
|
tplItem: '?tplItem'
|
|
}
|
|
});
|