my-test123
Version:
A planner front-end for Fabric8.
490 lines • 22.1 kB
JavaScript
import { Broadcaster } from 'ngx-base';
import { Observable } from 'rxjs/Observable';
import { Component, Input, ViewEncapsulation, Output, EventEmitter, ChangeDetectorRef } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { cloneDeep } from 'lodash';
import { AuthenticationService, UserService } from 'ngx-login-client';
import { FilterService } from '../../services/filter.service';
// ngrx stuff
import { Store } from '@ngrx/store';
import * as FilterActions from './../../actions/filter.actions';
var ToolbarPanelComponent = /** @class */ (function () {
function ToolbarPanelComponent(router, route, broadcaster, filterService, auth, userService, store, cdr) {
this.router = router;
this.route = route;
this.broadcaster = broadcaster;
this.filterService = filterService;
this.auth = auth;
this.userService = userService;
this.store = store;
this.cdr = cdr;
this.loggedInUser = {};
this.onCreateNewWorkItemSelected = new EventEmitter();
this.loggedIn = false;
this.showTypesOptions = false;
this.filters = [];
this.spaceSubscription = null;
this.eventListeners = [];
this.existingAllowedQueryParams = {};
this.filterConfig = {
fields: [{
id: 'type',
title: 'Select',
placeholder: 'Select a filter type',
type: 'select'
}],
appliedFilters: [],
resultsCount: -1,
selectedCount: 0,
totalCount: 0,
tooltipPlacement: 'right'
};
this.toolbarConfig = {
actionConfig: {},
filterConfig: this.filterConfig
};
this.allowedFilterKeys = [];
this.allowedMultipleFilterKeys = [
'label'
];
this.textFilterKeys = [
'title'
];
// the type of the list is changed (Hierarchy/Flat).
this.currentListType = 'Hierarchy';
this.queryParamSubscriber = null;
this.savedFIlterFieldQueries = {};
this.separator = {
id: 'separator',
value: null,
separator: true
};
this.loader = {
id: 'loader',
value: 'Loading...',
iconStyleClass: 'fa fa-spinner'
};
this.activeFilters = [];
this.activeFilterFromSidePanel = '';
this.currentQuery = '';
this.isShowTreeOn = false;
}
ToolbarPanelComponent.prototype.ngOnInit = function () {
var _this = this;
console.log('[ToolbarPanelComponent] Running in context: ' + this.context);
this.loggedIn = this.auth.isLoggedIn();
this.initiateDataSources();
// we want to get notified on space changes.
this.spaceSubscription = this.spaceData
.subscribe(function (space) {
console.log('[ToolbarPanelComponent] New Space selected: ' + space.attributes.name);
_this.store.dispatch(new FilterActions.Get());
});
//on the board view - do not show state filter as the lanes are based on state
this.allowedFilterKeys = [
'assignee', 'creator', 'area', 'label',
'workitemtype', 'title'
];
if (this.context !== 'boardview') {
this.allowedFilterKeys.push('state');
}
};
ToolbarPanelComponent.prototype.ngAfterViewInit = function () {
var _this = this;
// listen for logout events.
this.eventListeners.push(this.broadcaster.on('logout')
.subscribe(function (message) {
_this.loggedIn = false;
}));
this.eventListeners.push(this.filterData
.subscribe(function (filters) { return _this.setFilterTypes(filters); }));
this.eventListeners.push(Observable.combineLatest(this.areaData, this.allUsersData, this.workItemTypeData, this.stateData, this.labelData).subscribe(function () {
// Once all the attributes are resolved
// Listen for the URLs to set applied filters
_this.checkURL();
_this.checkFilterFromSidePanle();
}));
};
ToolbarPanelComponent.prototype.ngOnDestroy = function () {
// make sure we unsubscribe from all events.
if (this.queryParamSubscriber) {
this.queryParamSubscriber.unsubscribe();
}
this.eventListeners.map(function (e) { return e.unsubscribe(); });
// clean up.
this.filterConfig.appliedFilters = [];
this.filterService.clearFilters(this.allowedFilterKeys);
};
ToolbarPanelComponent.prototype.setFilterTypes = function (filters) {
var _this = this;
filters = filters.filter(function (f) { return _this.allowedFilterKeys.indexOf(f.attributes.key) > -1; });
/*
* The current version of the patternfly filter dropdown does not fully support the async
* update of the filterConfig.fields fields set. It does not refresh the widget on field
* array change. The current workaround is to add a "dummy" entry "Select Filter.." as
* the first entry in the fields array. When the user selects a new value from the
* filter list, the implementation works subsequently.
*/
var filterMap = this.getFilterMap();
this.toolbarConfig.filterConfig.fields = [
this.toolbarConfig.filterConfig.fields[0]
].concat(filters.map(function (filter) {
var type = filter.attributes.key;
return {
id: type,
title: filter.attributes.title,
placeholder: filter.attributes.description,
type: filterMap[type].type,
queries: [_this.loader]
};
}));
};
ToolbarPanelComponent.prototype.filterChange = function ($event) {
this.toolbarConfig.filterConfig.appliedFilters = [];
var oldQueryJson = this.filterService.queryToJson(this.currentQuery);
var field = $event.field.id;
var value = $event.hasOwnProperty('query') ?
$event.query.id : $event.value;
var newQuery = this.filterService.queryBuilder(field, this.filterService.equal_notation, value);
var finalQuery = this.filterService.queryJoiner(oldQueryJson, this.filterService.and_notation, newQuery);
var queryString = this.filterService.jsonToQuery(finalQuery);
var queryParams = cloneDeep(this.route.snapshot.queryParams);
queryParams['q'] = queryString;
this.router.navigate([], {
relativeTo: this.route,
queryParams: queryParams
});
};
ToolbarPanelComponent.prototype.selectFilterType = function (event) {
var _this = this;
var filterMap = this.getFilterMap();
if (Object.keys(filterMap).indexOf(event.field.id) > -1) {
var index_1 = this.filterConfig.fields.findIndex(function (i) { return i.id === event.field.id; });
if (filterMap[event.field.id].type !== 'text') {
filterMap[event.field.id].datasource.take(1).subscribe(function (resp) {
if (filterMap[event.field.id].datamap(resp).primaryQueries.length) {
_this.toolbarConfig.filterConfig.fields[index_1].queries = filterMap[event.field.id].datamap(resp).primaryQueries.concat([
_this.separator
], filterMap[event.field.id].datamap(resp).queries);
}
else {
_this.toolbarConfig.filterConfig.fields[index_1].queries = filterMap[event.field.id].datamap(resp).queries;
}
_this.savedFIlterFieldQueries[_this.filterConfig.fields[index_1].id] = {};
_this.savedFIlterFieldQueries[_this.filterConfig.fields[index_1].id]['fixed'] = filterMap[event.field.id].datamap(resp).primaryQueries;
_this.savedFIlterFieldQueries[_this.filterConfig.fields[index_1].id]['filterable'] = filterMap[event.field.id].datamap(resp).queries;
});
}
else if (this.filterConfig.fields[index_1].type === 'typeahead') {
this.filterQueries({
value: '',
field: event.field
});
}
}
};
/**
* For type ahead event handle
* from tool bar component
* @param event
*/
ToolbarPanelComponent.prototype.filterQueries = function (event) {
var index = this.filterConfig.fields.findIndex(function (i) { return i.id === event.field.id; });
var inp = event.value.trim();
if (inp) {
this.filterConfig.fields[index].queries = this.savedFIlterFieldQueries[event.field.id]['fixed'].concat([
this.separator
], this.savedFIlterFieldQueries[event.field.id]['filterable'].filter(function (item) {
return item.value.toLowerCase().indexOf(inp.toLowerCase()) > -1;
}));
}
if (inp === '' && typeof (this.savedFIlterFieldQueries[event.field.id]) !== 'undefined') {
this.filterConfig.fields[index].queries = this.savedFIlterFieldQueries[event.field.id]['fixed'].concat([
this.separator
], this.savedFIlterFieldQueries[event.field.id]['filterable']);
}
};
ToolbarPanelComponent.prototype.initiateDataSources = function () {
this.areaData = this.store
.select('listPage').select('areas')
.filter(function (a) { return !!a.length; });
this.allUsersData = this.store
.select('listPage').select('collaborators')
.filter(function (a) { return !!a.length; });
this.workItemTypeData = this.store
.select('listPage').select('workItemTypes')
.filter(function (a) { return !!a.length; });
this.stateData = this.store
.select('listPage').select('workItemStates')
.filter(function (a) { return !!a.length; });
this.labelData = this.store
.select('listPage').select('labels').filter(function (l) { return l !== null; });
this.spaceData = this.store
.select('listPage').select('space')
.filter(function (space) { return space !== null; });
this.filterData = this.store
.select('toolbar').select('filters')
.filter(function (filters) { return !!filters.length; });
this.iterationData = this.store
.select('listPage').select('iterations')
.filter(function (i) { return !!i.length; });
this.groupTypeData = this.store
.select('listPage').select('groupTypes')
.filter(function (i) { return !!i.length; });
};
ToolbarPanelComponent.prototype.getFilterMap = function () {
return {
area: {
datasource: this.areaData,
datamap: function (areas) {
return {
queries: areas.map(function (area) { return { id: area.id, value: area.name }; }),
primaryQueries: []
};
},
getvalue: function (area) { return area.name; },
type: 'select'
},
assignee: {
datasource: Observable.combineLatest(this.allUsersData, this.userService.getUser()),
datamap: function (_a) {
var users = _a[0], authUser = _a[1];
if (Object.keys(authUser).length > 0) {
users = users.filter(function (u) { return u.id !== authUser.id; });
}
return {
queries: users.map(function (user) { return { id: user.id, value: user.username, imageUrl: user.avatar }; }),
primaryQueries: Object.keys(authUser).length ?
[{ id: authUser.id, value: authUser.attributes.username + ' (me)', imageUrl: authUser.attributes.imageURL }, { id: null, value: 'Unassigned' }] :
[{ id: null, value: 'Unassigned' }]
};
},
getvalue: function (user) { return user.attributes.username; },
type: 'typeahead'
},
creator: {
datasource: Observable.combineLatest(this.allUsersData, this.userService.getUser()),
datamap: function (_a) {
var users = _a[0], authUser = _a[1];
if (Object.keys(authUser).length > 0) {
users = users.filter(function (u) { return u.id !== authUser.id; });
}
return {
queries: users.map(function (user) { return { id: user.id, value: user.username, imageUrl: user.avatar }; }),
primaryQueries: Object.keys(authUser).length ?
[{ id: authUser.id, value: authUser.attributes.username + ' (me)', imageUrl: authUser.attributes.imageURL }] :
[]
};
},
getvalue: function (user) { return user.attributes.username; },
type: 'typeahead'
},
workitemtype: {
datasource: this.workItemTypeData,
datamap: function (witypes) {
return {
queries: witypes.map(function (witype) { return { id: witype.id, value: witype.name, iconStyleClass: witype.icon }; }),
primaryQueries: []
};
},
getvalue: function (type) { return type.name; },
type: 'select'
},
state: {
datasource: this.stateData,
datamap: function (wistates) {
return {
queries: wistates.map(function (wistate) { return { id: wistate, value: wistate }; }),
primaryQueries: []
};
},
getvalue: function (type) { return type; },
type: 'select'
},
label: {
datasource: this.labelData,
datamap: function (labels) {
return {
queries: labels.map(function (label) {
return {
id: label.id,
value: label.name
};
}),
primaryQueries: []
};
},
getvalue: function (label) { return label.name; },
type: 'typeahead'
},
title: {
type: 'text'
}
};
};
ToolbarPanelComponent.prototype.checkURL = function () {
var _this = this;
this.eventListeners.push(this.route.queryParams.subscribe(function (query) {
if (query.hasOwnProperty('q')) {
_this.currentQuery = query.q;
var fields = _this.filterService.queryToFlat(_this.currentQuery);
_this.handleShowTreeCheckBox();
_this.formatFilterFIelds(fields);
}
else {
_this.activeFilters = [];
_this.currentQuery = '';
}
}));
};
ToolbarPanelComponent.prototype.checkFilterFromSidePanle = function () {
var _this = this;
this.eventListeners.push(Observable.combineLatest(this.groupTypeData, this.iterationData)
.map(function (_a) {
var gt = _a[0], it = _a[1];
var selectedIt = it.find(function (i) { return i.selected; });
var selectedGt = gt.find(function (i) { return i.selected; });
return [selectedIt, selectedGt];
})
.filter(function (_a) {
var gt = _a[0], it = _a[1];
return !!gt || !!it;
})
.map(function (_a) {
var gt = _a[0], it = _a[1];
if (!!gt) {
return gt.name;
}
if (!!it) {
return it.name;
}
})
.subscribe(function (selected) {
_this.activeFilterFromSidePanel = selected;
_this.cdr.markForCheck();
}));
};
ToolbarPanelComponent.prototype.formatFilterFIelds = function (fields) {
var _this = this;
Observable.combineLatest(this.areaData, this.allUsersData, this.workItemTypeData, this.stateData, this.labelData).subscribe(function (_a) {
var areas = _a[0], users = _a[1], wiTypes = _a[2], states = _a[3], labels = _a[4];
var filterMap = _this.getFilterMap();
fields = fields.filter(function (f) {
return _this.allowedFilterKeys.indexOf(f.field) > -1;
});
_this.activeFilters = fields.map(function (f) {
switch (f.field) {
case 'creator':
case 'assignee':
var user = users.find(function (u) { return u.id === f.value; });
f['displayValue'] = user ? user.username : f.value;
break;
case 'area':
var area = areas.find(function (a) { return a.id === f.value; });
f['displayValue'] = area ? area.name : f.value;
break;
case 'workitemtype':
var witype = wiTypes.find(function (w) { return w.id === f.value; });
f['displayValue'] = witype ? witype.name : f.value;
break;
case 'state':
var state = states.find(function (s) { return s === f.value; });
f['displayValue'] = state ? state : f.value;
break;
case 'label':
var label = labels.find(function (l) { return l.id === f.value; });
f['displayValue'] = label ? label.name : f.value;
break;
case 'title':
f['displayValue'] = f.value;
break;
default:
f['displayValue'] = '';
break;
}
return f;
}).slice();
});
};
ToolbarPanelComponent.prototype.removeFilter = function (field) {
if (field === void 0) { field = null; }
var fields = this.filterService.queryToFlat(this.currentQuery);
fields.splice(field.index, 1);
var queryString = this.filterService.jsonToQuery(this.filterService.flatToQuery(fields));
var queryParams = cloneDeep(this.route.snapshot.queryParams);
queryParams['q'] = queryString;
this.router.navigate([], {
relativeTo: this.route,
queryParams: queryParams
});
};
ToolbarPanelComponent.prototype.removeAllFilters = function () {
var _this = this;
var fields = this.filterService.queryToFlat(this.currentQuery).filter(function (f) {
return _this.activeFilters.findIndex(function (af) { return af.field === f.field && af.value === f.value; }) === -1;
});
var queryString = this.filterService.jsonToQuery(this.filterService.flatToQuery(fields));
var queryParams = cloneDeep(this.route.snapshot.queryParams);
queryParams['q'] = queryString;
this.router.navigate([], {
relativeTo: this.route,
queryParams: queryParams
});
};
ToolbarPanelComponent.prototype.showTreeToggle = function (e) {
var queryParams = cloneDeep(this.route.snapshot.queryParams);
if (e.target.checked) {
queryParams['showTree'] = true;
}
else {
if (queryParams.hasOwnProperty('showTree')) {
delete queryParams['showTree'];
}
}
this.router.navigate([], {
relativeTo: this.route,
queryParams: queryParams
});
};
ToolbarPanelComponent.prototype.handleShowTreeCheckBox = function () {
var currentParams = cloneDeep(this.route.snapshot.queryParams);
if (currentParams.hasOwnProperty('showTree')) {
if (currentParams['showTree'] === 'true') {
this.isShowTreeOn = true;
}
else if (currentParams['showTree'] === 'false') {
this.isShowTreeOn = false;
}
}
else {
this.isShowTreeOn = false;
}
};
ToolbarPanelComponent.decorators = [
{ type: Component, args: [{
encapsulation: ViewEncapsulation.None,
selector: 'toolbar-panel',
template: require('./toolbar-panel.component.html'),
styles: [require('./toolbar-panel.component.css').toString()]
},] },
];
/** @nocollapse */
ToolbarPanelComponent.ctorParameters = function () { return [
{ type: Router, },
{ type: ActivatedRoute, },
{ type: Broadcaster, },
{ type: FilterService, },
{ type: AuthenticationService, },
{ type: UserService, },
{ type: Store, },
{ type: ChangeDetectorRef, },
]; };
ToolbarPanelComponent.propDecorators = {
'context': [{ type: Input },],
'loggedInUser': [{ type: Input },],
'onCreateNewWorkItemSelected': [{ type: Output },],
};
return ToolbarPanelComponent;
}());
export { ToolbarPanelComponent };
//# sourceMappingURL=toolbar-panel.component.js.map