fabric8-planner
Version:
A planner front-end for Fabric8.
348 lines • 15.9 kB
JavaScript
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
import { DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW, UP_ARROW } from '@angular/cdk/keycodes';
import { Component, ElementRef, HostListener, Renderer2, ViewChild, ViewChildren, ViewEncapsulation } from '@angular/core';
import { ActivatedRoute, NavigationStart, Router } from '@angular/router';
import { Store } from '@ngrx/store';
import { sortBy } from 'lodash';
import { cloneDeep, isEqual } from 'lodash';
import { combineLatest } from 'rxjs';
import { delay, filter, startWith, switchMap, tap } from 'rxjs/operators';
import { PermissionQuery } from '../../models/permission.model';
import { SpaceQuery } from '../../models/space';
import { WorkItemQuery } from '../../models/work-item';
import { WorkItemTypeQuery } from '../../models/work-item-type';
import { CookieService } from '../../services/cookie.service';
import { FilterService } from '../../services/filter.service';
import { QuerySuggestionService } from '../../services/query-suggestion.service';
import { UrlService } from '../../services/url.service';
import { ListItemComponent } from '../../widgets/list-item/list-item.component';
import { datatableColumn } from '../planner-list/datatable-config';
import * as WorkItemActions from './../../actions/work-item.actions';
var PlannerQueryComponent = /** @class */ (function () {
function PlannerQueryComponent(cookieService, spaceQuery, router, route, workItemQuery, store, filterService, renderer, workItemTypeQuery, urlService, el, permissionQuery, querySuggestionService) {
var _this = this;
this.cookieService = cookieService;
this.spaceQuery = spaceQuery;
this.router = router;
this.route = route;
this.workItemQuery = workItemQuery;
this.store = store;
this.filterService = filterService;
this.renderer = renderer;
this.workItemTypeQuery = workItemTypeQuery;
this.urlService = urlService;
this.el = el;
this.permissionQuery = permissionQuery;
this.querySuggestionService = querySuggestionService;
this.valueLoading = false;
this.workItemsSource = combineLatest(this.spaceQuery.getCurrentSpace.pipe(filter(function (s) { return !!s; })), this.route.queryParams.pipe(filter(function (q) { return !!q; })),
// Wait untill workItemTypes are loaded
this.workItemTypeQuery.getWorkItemTypes().pipe(filter(function (wt) { return !!wt.length; })))
.pipe(delay(500), switchMap(function (_a) {
var space = _a[0], query = _a[1];
if (query.hasOwnProperty('q')) {
_this.searchQuery = query.q;
_this.disableInput = false;
_this.currentQuery = _this.breadcrumbsText('', query);
_this.filters = _this.filterService.queryToJson(query.q);
_this.store.dispatch(new WorkItemActions.Get({
pageSize: _this.initialPageSize,
filters: _this.filters,
isShowTree: false
}));
_this.scrollCheckedFor = 0;
}
if (query.hasOwnProperty('prevq')) {
_this.breadcrumbs = JSON.parse(query.prevq);
}
return _this.workItemQuery.getWorkItems();
}), startWith([]));
this.quickAddWorkItemTypes = this.workItemTypeQuery.getWorkItemTypes();
this.breadcrumbs = [];
this.uiLockedList = false;
this.contentItemHeight = 50;
this.columns = [];
this.selectedRows = [];
this.searchQuery = '';
this.headerHeight = 30;
this.addDisabled = this.permissionQuery.isAllowedToAdd();
this.eventListeners = [];
this.hdrHeight = 0;
this.querySearchRefHt = 0;
this.initialPageSize = 25;
this.filters = null;
// This variable stores the number of items
// Scroll is already checked for
this.scrollCheckedFor = 0;
this.querySuggestion = this.querySuggestionService.getSuggestions().pipe(filter(function (s) { return !!s; }), delay(500), tap(function () { return _this.valueLoading = false; }), tap(function (s) {
if (s.length > 0) {
_this.isSuggestionDropdownOpen = true;
}
else {
_this.isSuggestionDropdownOpen = false;
}
}));
}
PlannerQueryComponent.prototype.ngOnInit = function () {
var _this = this;
this.emptyStateConfig = {
info: 'There are no Work Items for your selected criteria',
title: 'No Work Items Available'
};
this.store.dispatch(new WorkItemActions.ResetWorkItems());
this.eventListeners.push(this.router.events
.pipe(filter(function (event) { return event instanceof NavigationStart; }))
.subscribe(function (event) {
if (event.url.indexOf('/plan/detail/') > -1) {
// It's going to the detail page
var url = location.pathname;
var query = location.href.split('?');
if (query.length == 2) {
url = url + '?' + query[1];
}
_this.urlService.recordLastListOrBoard(url);
}
}));
};
PlannerQueryComponent.prototype.ngOnDestroy = function () {
this.store.dispatch(new WorkItemActions.ResetWorkItems());
this.eventListeners.forEach(function (e) { return e.unsubscribe(); });
};
PlannerQueryComponent.prototype.onPreview = function (workItem) {
this.quickPreview.open(workItem);
};
PlannerQueryComponent.prototype.closePreview = function () {
this.quickPreview.close();
};
PlannerQueryComponent.prototype.setDataTableColumns = function () {
// Cookie for datatableColumn config
if (!this.cookieService.getCookie(datatableColumn.length).status) {
this.cookieService.setCookie('datatableColumn', datatableColumn);
this.columns = datatableColumn;
}
else {
var temp = this.cookieService.getCookie(datatableColumn.length);
this.columns = temp.array;
}
};
//ngx-datatable methods
PlannerQueryComponent.prototype.handleReorder = function (event) {
if (event.newValue !== 0) {
this.columns[event.prevValue - 1].index = event.newValue;
this.columns[event.newValue - 1].index = event.prevValue;
this.columns = sortBy(this.columns, 'index');
this.cookieService.setCookie('datatableColumn', this.columns);
}
};
PlannerQueryComponent.prototype.onInputKeyPress = function (event) {
var keycode = event.keyCode ? event.keyCode : event.which;
if (keycode === UP_ARROW || keycode === DOWN_ARROW) {
event.preventDefault();
}
};
PlannerQueryComponent.prototype.fetchWorkItemForQuery = function (event, query, cursorPosition) {
var keycode = event.keyCode ? event.keyCode : event.which;
// If Enter pressed
if (this.isSuggestionDropdownOpen) {
if (keycode === 13 && this.keyManager.activeItem) {
this.onSelectSuggestion(this.keyManager.activeItem.item, query, cursorPosition);
this.keyManager.setActiveItem(null);
}
else if (keycode === 13 && !this.keyManager.activeItem) {
this.executeQuery(query);
}
else if (keycode === UP_ARROW || keycode === DOWN_ARROW) {
event.preventDefault();
this.keyManager.onKeydown(event);
}
else {
this.valueLoading = true;
this.querySuggestionService.queryObservable.next(query);
}
}
else if (!this.isSuggestionDropdownOpen) {
if (keycode === 13 && query !== '') {
this.executeQuery(query);
}
else {
this.valueLoading = true;
this.querySuggestionService.queryObservable.next(query);
}
}
else if (keycode === 8 && (event.ctrlKey || event.metaKey)) {
this.searchQuery = '';
}
if (keycode === LEFT_ARROW || keycode === RIGHT_ARROW) {
this.querySuggestionService.queryObservable.next(this.getTextTillCurrentCursor());
}
};
PlannerQueryComponent.prototype.executeQuery = function (query) {
var queryParams = cloneDeep(this.route.snapshot.queryParams);
if (queryParams.hasOwnProperty('prevq')) {
this.router.navigate([], {
relativeTo: this.route,
queryParams: {
q: query,
prevq: queryParams.prevq
}
});
}
else {
this.router.navigate([], {
relativeTo: this.route,
queryParams: { q: query }
});
}
};
PlannerQueryComponent.prototype.getTextTillCurrentCursor = function () {
return this.searchField.nativeElement.value.slice(0, this.searchField.nativeElement.selectionStart);
};
PlannerQueryComponent.prototype.onSelectSuggestion = function (suggestion, input, cursorPosition) {
this.searchField.nativeElement.value = this.querySuggestionService.replaceSuggestion(input.slice(0, cursorPosition), input.slice(cursorPosition), suggestion);
this.querySuggestionService.queryObservable.next('-');
this.searchField.nativeElement.focus();
};
PlannerQueryComponent.prototype.onClickSearchField = function (event) {
this.valueLoading = true;
this.querySuggestionService.queryObservable.next(this.getTextTillCurrentCursor());
};
PlannerQueryComponent.prototype.clearInputField = function () {
this.searchQuery = '';
this.searchField.nativeElement.focus();
};
PlannerQueryComponent.prototype.onBlurSearchField = function (event) {
this.querySuggestionService.queryObservable.next('-');
};
PlannerQueryComponent.prototype.onChildExploration = function (workItem) {
var queryParams = cloneDeep(this.route.snapshot.queryParams);
var previousQuery;
if (queryParams.hasOwnProperty('prevq')) {
if (queryParams.hasOwnProperty('q')) {
previousQuery = {
prevq: JSON.parse(queryParams.prevq).concat([
{ q: queryParams.q }
])
};
}
}
else {
previousQuery = { prevq: [queryParams] };
}
this.router.navigate([], {
relativeTo: this.route,
queryParams: {
q: 'parent.number : ' + workItem.number,
prevq: JSON.stringify(previousQuery.prevq)
}
});
};
PlannerQueryComponent.prototype.navigateToQuery = function (query) {
var index = this.breadcrumbs.findIndex(function (c) { return isEqual(c, query); });
var prevq = this.breadcrumbs.slice(0, index).slice();
this.router.navigate([], {
relativeTo: this.route,
queryParams: __assign({}, query, { prevq: JSON.stringify(prevq) })
});
};
PlannerQueryComponent.prototype.closeCreateWorkItemDialog = function (event) {
if (this.isCreateWorkitemDropdownOpen) {
this.isCreateWorkitemDropdownOpen = false;
}
};
PlannerQueryComponent.prototype.createWorkItemDialogChange = function (value) {
this.isCreateWorkitemDropdownOpen = value;
};
PlannerQueryComponent.prototype.breadcrumbsText = function (index, query) {
var parentNumber = this.filterService.isOnlyChildQuery(query.q);
if (parentNumber !== null) {
return "Query " + (index === '' ? '' : '-') + " " + index + " (Child of #" + parentNumber + ")";
}
else {
return "Query " + (index === '' ? '' : '-') + " " + index;
}
};
PlannerQueryComponent.prototype.checkPageSize = function (event) {
// This is a Hack, need to find a better way
// if number of intially fetched item is lesser than
// the capable page size then we trigger another request
if (event.pageSize > this.initialPageSize) {
this.store.dispatch(new WorkItemActions.Get({
pageSize: event.pageSize,
filters: this.filters,
isShowTree: false
}));
}
};
PlannerQueryComponent.prototype.onScroll = function (offsetY, numberOfItems) {
var viewHeight = this.el.nativeElement.getBoundingClientRect().height - this.headerHeight;
if (offsetY + viewHeight >= numberOfItems * this.contentItemHeight && this.scrollCheckedFor < numberOfItems) {
this.scrollCheckedFor = numberOfItems;
this.fetchMoreItems();
}
};
PlannerQueryComponent.prototype.fetchMoreItems = function () {
this.store.dispatch(new WorkItemActions.GetMoreWorkItems({
isShowTree: false
}));
};
PlannerQueryComponent.prototype.ngAfterViewChecked = function () {
if (document.getElementsByClassName('navbar-pf').length > 0) {
this.hdrHeight = document.getElementsByClassName('navbar-pf')[0].offsetHeight;
}
if (this.querySearchRef) {
this.querySearchRefHt = this.querySearchRef.nativeElement.offsetHeight;
}
this.targetHeight = window.innerHeight - (this.hdrHeight + this.querySearchRefHt);
if (this.listContainer) {
this.renderer.setStyle(this.listContainer.nativeElement, 'height', this.targetHeight + 'px');
}
};
PlannerQueryComponent.prototype.ngAfterViewInit = function () {
this.setDataTableColumns();
this.keyManager = new ActiveDescendantKeyManager(this.dropdownOptions).withWrap().withTypeAhead();
};
PlannerQueryComponent.prototype.onResize = function (event) { };
PlannerQueryComponent.decorators = [
{ type: Component, args: [{
encapsulation: ViewEncapsulation.None,
selector: 'planner-query',
template: require('./planner-query.component.html'),
styles: [require('./planner-query.component.css').toString()]
},] },
];
/** @nocollapse */
PlannerQueryComponent.ctorParameters = function () { return [
{ type: CookieService, },
{ type: SpaceQuery, },
{ type: Router, },
{ type: ActivatedRoute, },
{ type: WorkItemQuery, },
{ type: Store, },
{ type: FilterService, },
{ type: Renderer2, },
{ type: WorkItemTypeQuery, },
{ type: UrlService, },
{ type: ElementRef, },
{ type: PermissionQuery, },
{ type: QuerySuggestionService, },
]; };
PlannerQueryComponent.propDecorators = {
'quickPreview': [{ type: ViewChild, args: ['quickPreview',] },],
'listContainer': [{ type: ViewChild, args: ['listContainer',] },],
'querySearchRef': [{ type: ViewChild, args: ['querySearch',] },],
'searchField': [{ type: ViewChild, args: ['queryInput',] },],
'dropdownOptions': [{ type: ViewChildren, args: [ListItemComponent,] },],
'onResize': [{ type: HostListener, args: ['window:resize', ['$event'],] },],
};
return PlannerQueryComponent;
}());
export { PlannerQueryComponent };
//# sourceMappingURL=planner-query.component.js.map