my-test123
Version:
A planner front-end for Fabric8.
601 lines • 29.1 kB
JavaScript
import { Observable } from 'rxjs/Observable';
import { Component, Input, ViewEncapsulation, Output, EventEmitter } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { cloneDeep } from 'lodash';
import { Broadcaster } from 'ngx-base';
import { Spaces } from 'ngx-fabric8-wit';
import { AuthenticationService, UserService } from 'ngx-login-client';
import { EventService } from './../../services/event.service';
import { AreaService } from '../../services/area.service';
import { CollaboratorService } from '../../services/collaborator.service';
import { FilterService } from '../../services/filter.service';
import { LabelService } from '../../services/label.service';
import { WorkItemService } from '../../services/work-item.service';
var ToolbarPanelComponent = /** @class */ (function () {
function ToolbarPanelComponent(eventService, router, route, broadcaster, areaService, collaboratorService, filterService, labelService, workItemService, auth, spaces, userService) {
this.eventService = eventService;
this.router = router;
this.route = route;
this.broadcaster = broadcaster;
this.areaService = areaService;
this.collaboratorService = collaboratorService;
this.filterService = filterService;
this.labelService = labelService;
this.workItemService = workItemService;
this.auth = auth;
this.spaces = spaces;
this.userService = userService;
this.wiTypes = [];
this.areas = [];
this.loggedInUser = {};
this.currentBoardType = {};
this.onCreateNewWorkItemSelected = new EventEmitter();
this.loggedIn = false;
this.editEnabled = false;
this.showTypesOptions = false;
this.filters = [];
this.spaceSubscription = null;
this.eventListeners = [];
this.currentQueryParams = {};
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 flag tells if an update for filter is coming from
// tool bar internaly or not
this.internalFilterChange = false;
this.firstVisit = true;
this.separator = {
id: 'separator',
value: null,
separator: true
};
this.loader = {
id: 'loader',
value: 'Loading...',
iconStyleClass: 'fa fa-spinner'
};
}
ToolbarPanelComponent.prototype.ngOnInit = function () {
var _this = this;
console.log('[ToolbarPanelComponent] Running in context: ' + this.context);
this.loggedIn = this.auth.isLoggedIn();
this.firstVisit = true;
// we want to get notified on space changes.
this.spaceSubscription = this.spaces.current.subscribe(function (space) {
if (space) {
console.log('[ToolbarPanelComponent] New Space selected: ' + space.attributes.name);
_this.editEnabled = true;
}
else {
console.log('[ToolbarPanelComponent] Space deselected. ');
_this.editEnabled = false;
}
});
//on the board view - do not show state filter as the lanes are based on state
if (this.context === 'boardview') {
this.allowedFilterKeys = [
'assignee',
'creator',
'area',
'label',
'workitemtype',
'title'
];
}
else {
this.allowedFilterKeys = [
'assignee',
'creator',
'area',
'label',
'workitemtype',
'state',
'title'
];
}
};
ToolbarPanelComponent.prototype.ngAfterViewInit = function () {
var _this = this;
// listen for logout events.
this.eventListeners.push(this.broadcaster.on('logout')
.subscribe(function (message) {
_this.loggedIn = false;
}));
// listen for changes on the available filters.
this.eventListeners.push(this.filterService.getFilters()
.subscribe(function (filters) { return _this.setFilterTypes(filters); }));
// TODO : should be replaced by ngrx/store implementation
this.eventListeners.push(this.eventService.labelAdd
.subscribe(function (label) {
var filterMap = _this.getFilterMap();
var index = _this.filterConfig.fields.findIndex(function (i) { return i.id === 'label'; });
if (index > -1) {
if (_this.filterConfig.fields[index].queries.length > 0) {
_this.toolbarConfig.filterConfig.fields[index].queries = _this.toolbarConfig.filterConfig.fields[index].queries.concat(filterMap.label.datamap([label]).queries);
}
}
}));
};
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.onChangeListType = function (type) {
// the type of the list is changed (Hierarchy/Flat).
// this will be removed with the new tree list.
// and if not removed, it should be converted to a
// global event instead of a BehaviourSubject.
this.currentListType = type;
if (type === 'Hierarchy') {
this.eventService.showHierarchyListSubject.next(true);
}
else {
this.eventService.showHierarchyListSubject.next(false);
}
};
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]
};
}));
this.listenToQueryParams();
};
ToolbarPanelComponent.prototype.setAppliedFilterFromUrl = function () {
var _this = this;
var filterMap = this.getFilterMap();
// Take all the existing params
var params = cloneDeep(this.currentQueryParams);
var keys = Object.keys(params);
// Delete all the not-allowed params for this tool bar
keys.forEach(function (key) {
if (_this.allowedFilterKeys.indexOf(key) === -1) {
delete params[key];
}
});
// Apply each param from URL that is allowed here
// to the filter
Object.keys(params).forEach(function (key, i) {
if (_this.allowedFilterKeys.indexOf(key) > -1) {
var index_1 = _this.toolbarConfig.filterConfig.fields.findIndex(function (field) { return field.id === key; });
if (filterMap[key].type !== 'text') {
filterMap[key].datasource.take(1).subscribe(function (data) {
if (filterMap[key].datamap(data).primaryQueries.length) {
_this.toolbarConfig.filterConfig.fields[index_1].queries = filterMap[key].datamap(data).primaryQueries.concat([
_this.separator
], filterMap[key].datamap(data).queries);
}
else {
_this.toolbarConfig.filterConfig.fields[index_1].queries = filterMap[key].datamap(data).queries;
}
var selectedQueries = _this.toolbarConfig.filterConfig.fields[index_1].queries.filter(function (item) { return params[key].split(',').indexOf(item.value) > -1; });
if (selectedQueries.length) {
params[key].split(',').forEach(function (val) {
_this.toolbarConfig.filterConfig.appliedFilters.push({
field: _this.toolbarConfig.filterConfig.fields[index_1],
query: selectedQueries.find(function (v) { return v.value === val.trim(); }),
value: val.trim()
});
});
_this.filterService.setFilterValues(key, selectedQueries.map(function (q) { return q.id; }).join());
}
});
}
else {
// Text search happens here
_this.toolbarConfig.filterConfig.appliedFilters.push({
field: _this.toolbarConfig.filterConfig.fields[index_1],
query: params[key],
value: params[key]
});
_this.filterService.setFilterValues(key, params[key]);
}
// When all the params are resolved
// Apply the filter
if (Object.keys(params).length - 1 == i) {
_this.filterService.applyFilter();
}
}
});
};
ToolbarPanelComponent.prototype.filterChange = function ($event) {
var _this = this;
// We don't support multiple filter for same type
// i.e. no two filter by two different users as assignees
// Unifying the filters with recent filter value
var recentAppliedFilters = {};
$event.appliedFilters.forEach(function (filter) {
if (_this.textFilterKeys.findIndex(function (k) { return k === filter.field.id; }) > -1 ||
filter.query.id !== 'loader') {
if (Object.keys(recentAppliedFilters).indexOf(filter.field.id) === -1) {
// If this filter type was not found in this iteration before
recentAppliedFilters[filter.field.id] = [];
recentAppliedFilters[filter.field.id].push(filter);
}
else {
// If this filter type was found in this iteration before
if (_this.allowedMultipleFilterKeys.indexOf(filter.field.id) > -1) {
// Multiple value for this filter type is allowed
recentAppliedFilters[filter.field.id].push(filter);
}
else {
// Apply the latest value for the filter
recentAppliedFilters[filter.field.id][0] = filter;
}
}
}
});
this.toolbarConfig.filterConfig.appliedFilters = [];
Object.keys(recentAppliedFilters).forEach(function (filterId) {
recentAppliedFilters[filterId].forEach(function (el) {
_this.toolbarConfig.filterConfig.appliedFilters.push(el);
});
});
// Initiate next query params from current query params
var params = cloneDeep(this.currentQueryParams);
this.allowedFilterKeys.forEach(function (key) { return delete params[key]; });
// Clean allowed filter keys
this.filterService.clearFilters(this.allowedFilterKeys);
// Prepare query params
var queryObj = {};
var current_join = null;
this.fnSplitParams(this.toolbarConfig.filterConfig.appliedFilters);
var paramComp = this.transientFilters;
this.filterService.clearFilters();
this.toolbarConfig.filterConfig.appliedFilters.forEach(function (filter) {
if (Object.keys(paramComp).indexOf(filter.field.id) > -1) {
_this.transientFilters[filter.field.id] = filter.value;
params[filter.field.id] = params[filter.field.id] + ',' + filter.query.value;
if (_this.allowedMultipleFilterKeys.indexOf(filter.field.id) > -1)
queryObj[filter.field.id] = queryObj[filter.field.id] + ',' + filter.query.id;
else
queryObj[filter.field.id] = filter.value;
}
else if (_this.textFilterKeys.findIndex(function (k) { return k === filter.field.id; }) > -1) {
params[filter.field.id] = filter.value;
queryObj[filter.field.id] = filter.value;
}
else {
params[filter.field.id] = filter.query.value;
queryObj[filter.field.id] = filter.query.id;
_this.transientFilters[filter.field.id] = filter.value;
var val = filter.query.value;
if (filter.field.id === 'assignee' && filter.query.value.indexOf('(me)') >= 0) {
val = filter.query.value.replace('(me)', '');
filter.query.value = val;
_this.transientFilters[filter.field.id] = val;
}
}
_this.filterService.setFilterValues(filter.field.id, queryObj[filter.field.id]);
});
//permanent filters
var expression;
var permQuery = {};
for (var key in this.permanentFilters) {
var query_1 = this.filterService.queryBuilder(key, this.filterService.equal_notation, this.permanentFilters[key]);
permQuery = this.filterService.queryJoiner(permQuery, this.filterService.and_notation, query_1);
}
expression = permQuery;
var transQuery = {};
for (var key in this.transientFilters) {
var query_2 = this.filterService.queryBuilder(key, this.filterService.equal_notation, this.transientFilters[key]);
transQuery = this.filterService.queryJoiner(transQuery, this.filterService.and_notation, query_2);
}
expression = this.filterService.queryJoiner(permQuery, this.filterService.and_notation, transQuery);
var query = this.filterService.jsonToQuery(expression);
this.internalFilterChange = true;
var navigationExtras = {
queryParams: { q: query },
relativeTo: this.route
};
// Navigated to filtered view
this.router.navigate([], navigationExtras);
};
ToolbarPanelComponent.prototype.showTypes = function () {
this.showTypesOptions = true;
};
ToolbarPanelComponent.prototype.closePanel = function () {
this.showTypesOptions = false;
};
ToolbarPanelComponent.prototype.onChangeType = function (type) {
this.showTypesOptions = false;
this.router.navigate(['/work-item/list/detail/new?' + type]);
};
ToolbarPanelComponent.prototype.createNewWorkItem = function (event) {
event.stopPropagation();
this.onCreateNewWorkItemSelected.emit();
};
ToolbarPanelComponent.prototype.getFilterMap = function () {
return {
area: {
datasource: this.areaService.getAreas(),
datamap: function (areas) {
return {
queries: areas.map(function (area) { return { id: area.id, value: area.attributes.name }; }),
primaryQueries: []
};
},
getvalue: function (area) { return area.attributes.name; },
type: 'select'
},
assignee: {
datasource: Observable.combineLatest(this.collaboratorService.getCollaborators(), 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.attributes.username, imageUrl: user.attributes.imageURL }; }),
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.collaboratorService.getCollaborators(), 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.attributes.username, imageUrl: user.attributes.imageURL }; }),
primaryQueries: [{ id: authUser.id, value: authUser.attributes.username + ' (me)', imageUrl: authUser.attributes.imageURL }]
};
},
getvalue: function (user) { return user.attributes.username; },
type: 'typeahead'
},
workitemtype: {
datasource: this.workItemService.getWorkItemTypes(),
datamap: function (witypes) {
return {
queries: witypes.map(function (witype) { return { id: witype.id, value: witype.attributes.name, iconClass: witype.attributes.icon }; }),
primaryQueries: []
};
},
getvalue: function (type) { return type.attributes.name; },
type: 'select'
},
state: {
datasource: this.workItemService.getStatusOptions(),
datamap: function (wistates) {
return {
queries: wistates.map(function (wistate) { return { id: wistate.option, value: wistate.option }; }),
primaryQueries: []
};
},
getvalue: function (type) { return type.option; },
type: 'select'
},
label: {
datasource: this.labelService.getLabels().map(function (d) { return d; }),
datamap: function (labels) {
return {
queries: labels.map(function (label) {
return {
id: label.id,
value: label.attributes.name
};
}),
primaryQueries: []
};
},
getvalue: function (label) { return label.attributes.name; },
type: 'typeahead'
},
title: {
type: 'text'
}
};
};
ToolbarPanelComponent.prototype.selectFilterType = function (event) {
var _this = this;
var filterMap = this.getFilterMap();
if (Object.keys(filterMap).indexOf(event.field.id) > -1) {
var index_2 = this.filterConfig.fields.findIndex(function (i) { return i.id === event.field.id; });
if (filterMap[event.field.id].type !== 'text') {
filterMap[event.field.id].datasource.subscribe(function (resp) {
if (filterMap[event.field.id].datamap(resp).primaryQueries.length) {
_this.toolbarConfig.filterConfig.fields[index_2].queries =
filterMap[event.field.id].datamap(resp).queries[0].id !== 'loader' ? filterMap[event.field.id].datamap(resp).primaryQueries.concat([
_this.separator
], filterMap[event.field.id].datamap(resp).queries) : filterMap[event.field.id].datamap(resp).primaryQueries;
}
else {
_this.toolbarConfig.filterConfig.fields[index_2].queries = filterMap[event.field.id].datamap(resp).queries;
}
_this.savedFIlterFieldQueries[_this.filterConfig.fields[index_2].id] = {};
_this.savedFIlterFieldQueries[_this.filterConfig.fields[index_2].id]['fixed'] = filterMap[event.field.id].datamap(resp).primaryQueries;
_this.savedFIlterFieldQueries[_this.filterConfig.fields[index_2].id]['filterable'] = filterMap[event.field.id].datamap(resp).queries;
});
}
else if (this.filterConfig.fields[index_2].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.fnSplitParams = function (ref_arr) {
//split params in to two types
//permanent and transient
if (this.route.snapshot.queryParams['q']) {
this.permanentFilters = {};
this.transientFilters = {};
var urlString = this.route.snapshot.queryParams['q']
.replace(' ', '')
.replace('$AND', ' ')
.replace('$OR', ' ')
.replace('(', '')
.replace(')', '');
var temp_arr = urlString.split(' ');
for (var i = 0; i < temp_arr.length; i++) {
var arr = temp_arr[i].split(':');
//check if it belongs in filter array
if (arr[1] !== undefined) {
if (ref_arr.indexOf(arr[0]) >= 0)
this.transientFilters[arr[0]] = arr[1];
else if (arr[0] === 'typegroup.name' || arr[0] === 'space' || arr[0] === 'iteration')
this.permanentFilters[arr[0]] = arr[1];
}
}
}
};
ToolbarPanelComponent.prototype.listenToQueryParams = function () {
var _this = this;
if (this.queryParamSubscriber === null) {
this.queryParamSubscriber =
this.route.queryParams.subscribe(function (params) {
_this.fnSplitParams(_this.allowedFilterKeys);
_this.currentQueryParams = _this.transientFilters;
// If any of the allowed key present in the URL
if (_this.currentQueryParams && Object.keys(_this.currentQueryParams).some(function (i) { return _this.allowedFilterKeys.indexOf(i) > -1; })) {
// Changing filter internally
if (_this.internalFilterChange) {
_this.filterService.applyFilter();
_this.internalFilterChange = false;
}
else {
// Cleaning filters in service as it will reset in setAppliedFilterFromUrl
_this.toolbarConfig.filterConfig.appliedFilters = [];
_this.filterService.clearFilters(_this.allowedFilterKeys);
_this.setAppliedFilterFromUrl();
}
}
else {
// If filter value changed internally
// Or with arrorw key navigated to a page with no allowed
// filter params, then appliedFilters remains with values
if (_this.internalFilterChange || _this.toolbarConfig.filterConfig.appliedFilters.length) {
_this.internalFilterChange = false;
//this.toolbarConfig.filterConfig.appliedFilters = [];
_this.toolbarConfig.filterConfig.appliedFilters
.filter(function (thing, index, self) { return self.findIndex(function (t) { return t.field.id === thing.field.id; }) === index; });
_this.filterService.clearFilters(_this.allowedFilterKeys);
_this.filterService.applyFilter();
}
else {
if (_this.firstVisit) {
_this.firstVisit = false;
_this.filterService.applyFilter();
}
}
}
});
}
};
// show tree feature
ToolbarPanelComponent.prototype.checkboxToggle = function (event) {
this.workItemService.emitShowTree(event.target.checked);
};
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: EventService, },
{ type: Router, },
{ type: ActivatedRoute, },
{ type: Broadcaster, },
{ type: AreaService, },
{ type: CollaboratorService, },
{ type: FilterService, },
{ type: LabelService, },
{ type: WorkItemService, },
{ type: AuthenticationService, },
{ type: Spaces, },
{ type: UserService, },
]; };
ToolbarPanelComponent.propDecorators = {
'context': [{ type: Input },],
'wiTypes': [{ type: Input },],
'areas': [{ type: Input },],
'loggedInUser': [{ type: Input },],
'currentBoardType': [{ type: Input },],
'onCreateNewWorkItemSelected': [{ type: Output },],
};
return ToolbarPanelComponent;
}());
export { ToolbarPanelComponent };
//# sourceMappingURL=toolbar-panel.component.js.map