my-test123
Version:
A planner front-end for Fabric8.
195 lines • 8.14 kB
JavaScript
import { Component, Input, Output, ViewChild, EventEmitter } from '@angular/core';
import { cloneDeep, isEqual } from 'lodash';
import { Broadcaster, Logger } from 'ngx-base';
import { AuthenticationService } from 'ngx-login-client';
var TypeaheadDropdownValue = /** @class */ (function () {
function TypeaheadDropdownValue() {
}
return TypeaheadDropdownValue;
}());
export { TypeaheadDropdownValue };
/*
* This component provides a typeahead dropdown. It accepts a list of possible values.
* The values must be provided using an array of TypeaheadDropdownValue instances
* containing key and value of the option. Exactly one of the values needs to have
* selected==true. The onUpdate event provides a key to enclosing components when
* an option is selected.
*/
var TypeaheadDropdown = /** @class */ (function () {
function TypeaheadDropdown(logger, auth, broadcaster) {
this.logger = logger;
this.auth = auth;
this.broadcaster = broadcaster;
// event when value is updated, emits new value as the event.
this.onUpdate = new EventEmitter();
this.onFocus = new EventEmitter();
this.proxyValues = [];
this.filteredValues = [];
this.searchValue = false;
this.loggedIn = false;
this.eventListeners = [];
}
TypeaheadDropdown.prototype.ngOnInit = function () {
this.proxyValues = cloneDeep(this.values);
this.sortValuesByLength(this.proxyValues);
this.filteredValues = cloneDeep(this.proxyValues);
this.listenToEvent();
this.loggedIn = this.auth.isLoggedIn();
};
TypeaheadDropdown.prototype.ngOnDestroy = function () {
console.log('Destroying all the listeners in list component');
this.eventListeners.forEach(function (subscriber) { return subscriber.unsubscribe(); });
};
TypeaheadDropdown.prototype.sortValuesByLength = function (list) {
this.proxyValues.sort(function (a, b) {
return a.value.length - b.value.length || // sort by length, if equal then
a.value.localeCompare(b.value); // sort by dictionary order
});
};
TypeaheadDropdown.prototype.ngOnChanges = function (changes) {
if (changes.values && !isEqual(changes.values.currentValue, changes.values.previousValue)) {
this.logger.log('Typeahead Dropdown values changed.');
this.proxyValues = cloneDeep(this.values);
this.sortValuesByLength(this.proxyValues);
this.filteredValues = cloneDeep(this.proxyValues);
}
else if (changes.noValueLabel) {
this.noValueLabel = changes.noValueLabel.currentValue;
}
};
TypeaheadDropdown.prototype.open = function () {
var _this = this;
if (this.loggedIn) {
this.searchValue = true;
this.proxyValues = cloneDeep(this.values);
this.filteredValues = this.proxyValues;
this.onFocus.emit(this);
// Takes a while to render the component
setTimeout(function () {
if (_this.valueSearch) {
_this.valueSearch.nativeElement.focus();
}
}, 50);
}
};
TypeaheadDropdown.prototype.isOpen = function () {
return this.searchValue;
};
TypeaheadDropdown.prototype.close = function () {
this.searchValue = false;
};
TypeaheadDropdown.prototype.getInitialValue = function () {
for (var i = 0; i < this.proxyValues.length; i++)
if (this.proxyValues[i].selected)
return this.proxyValues[i];
// this only happens if there was no
// "selected" value in the list
return {
key: 'nilvalue',
value: this.noValueLabel,
selected: true,
cssLabelClass: 'no-value-label'
};
};
// on clicking the drop down option, the selected
// value needs to get displayed in the input box.
TypeaheadDropdown.prototype.showValueOnInput = function (value) {
this.valueSearch.nativeElement.value = value.value;
this.selectedValue = value;
};
// emits event to parent.
TypeaheadDropdown.prototype.setValue = function () {
this.logger.log('Selected new value on TypeaheadDropdown: ' + this.selectedValue.key + ' (value: ' + this.selectedValue.value + ')');
this.onUpdate.emit(this.selectedValue.key);
this.close();
};
TypeaheadDropdown.prototype.filterValue = function (event) {
// Down arrow or up arrow
if (event.keyCode == 40 || event.keyCode == 38) {
var lis = this.valueList.nativeElement.children;
var i = 0;
for (; i < lis.length; i++) {
if (lis[i].classList.contains('selected')) {
break;
}
}
if (i == lis.length) {
if (event.keyCode == 40) {
lis[0].classList.add('selected');
lis[0].scrollIntoView(false);
}
else {
lis[lis.length - 1].classList.add('selected');
lis[lis.length - 1].scrollIntoView(false);
}
}
else {
lis[i].classList.remove('selected');
if (event.keyCode == 40) {
lis[(i + 1) % lis.length].classList.add('selected');
lis[(i + 1) % lis.length].scrollIntoView(false);
}
else {
// In javascript mod gives exact mod for negative value
// For example, -1 % 6 = -1 but I need, -1 % 6 = 5
// To get the round positive value I am adding the divisor
// with the negative dividend
lis[(((i - 1) % lis.length) + lis.length) % lis.length].classList.add('selected');
lis[(((i - 1) % lis.length) + lis.length) % lis.length].scrollIntoView(false);
}
}
}
else if (event.keyCode == 13) {
var lis = this.valueList.nativeElement.children;
var i = 0;
for (; i < lis.length; i++) {
if (lis[i].classList.contains('selected')) {
break;
}
}
if (i < lis.length) {
var selectedId = lis[i].dataset.value;
this.selectedValue = lis[i];
this.setValue();
}
}
else {
var inp_1 = this.valueSearch.nativeElement.value.trim();
this.filteredValues = this.proxyValues.filter(function (item) {
return item.value.toLowerCase().indexOf(inp_1.toLowerCase()) > -1;
});
this.sortValuesByLength(this.filteredValues);
}
};
TypeaheadDropdown.prototype.listenToEvent = function () {
var _this = this;
this.eventListeners.push(this.broadcaster.on('logout')
.subscribe(function (message) {
_this.loggedIn = false;
}));
};
TypeaheadDropdown.decorators = [
{ type: Component, args: [{
selector: 'typeahead-dropdown',
template: require('./typeahead-dropdown.component.html'),
styles: [require('./typeahead-dropdown.component.css').toString()]
},] },
];
/** @nocollapse */
TypeaheadDropdown.ctorParameters = function () { return [
{ type: Logger, },
{ type: AuthenticationService, },
{ type: Broadcaster, },
]; };
TypeaheadDropdown.propDecorators = {
'values': [{ type: Input },],
'noValueLabel': [{ type: Input },],
'onUpdate': [{ type: Output },],
'onFocus': [{ type: Output },],
'valueSearch': [{ type: ViewChild, args: ['valueSearch',] },],
'valueList': [{ type: ViewChild, args: ['valueList',] },],
};
return TypeaheadDropdown;
}());
export { TypeaheadDropdown };
//# sourceMappingURL=typeahead-dropdown.component.js.map