fabric8-planner
Version:
A planner front-end for Fabric8.
442 lines • 20.2 kB
JavaScript
import { Component, HostListener, Renderer2, ViewChild, ViewEncapsulation } from '@angular/core';
import { ActivatedRoute, NavigationStart, Router } from '@angular/router';
import { cloneDeep, sortBy } from 'lodash';
import { AuthenticationService } from 'ngx-login-client';
import { combineLatest } from 'rxjs';
import { filter, switchMap, take, tap } from 'rxjs/operators';
import { WorkItemTypeQuery } from '../../models/work-item-type';
import { AND, EQUAL, NOT_EQUAL } from '../../services/query-keys';
import { IterationQuery } from './../../models/iteration.model';
import { CookieService } from './../../services/cookie.service';
import { FilterService } from './../../services/filter.service';
import { UrlService } from './../../services/url.service';
// import for column
import { datatableColumn } from './datatable-config';
// ngrx stuff
import { Store } from '@ngrx/store';
import { SpaceQuery } from '../../models/space';
import * as AreaActions from './../../actions/area.actions';
import * as CollaboratorActions from './../../actions/collaborator.actions';
import * as WorkItemActions from './../../actions/work-item.actions';
import { AreaQuery } from './../../models/area.model';
import { GroupTypeQuery } from './../../models/group-types.model';
import { LabelQuery } from './../../models/label.model';
import { UserQuery } from './../../models/user';
import { WorkItemQuery } from './../../models/work-item';
var PlannerListComponent = /** @class */ (function () {
function PlannerListComponent(renderer, store, route, router, auth, filterService, cookieService, urlService, iterationQuery, userQuery, labelQuery, workItemQuery, areaQuery, groupTypeQuery, workItemTypeQuery, spaceQuery) {
this.renderer = renderer;
this.store = store;
this.route = route;
this.router = router;
this.auth = auth;
this.filterService = filterService;
this.cookieService = cookieService;
this.urlService = urlService;
this.iterationQuery = iterationQuery;
this.userQuery = userQuery;
this.labelQuery = labelQuery;
this.workItemQuery = workItemQuery;
this.areaQuery = areaQuery;
this.groupTypeQuery = groupTypeQuery;
this.workItemTypeQuery = workItemTypeQuery;
this.spaceQuery = spaceQuery;
this.uiLockedAll = false;
this.sidePanelOpen = true;
this.quickAddWorkItemTypes = [];
this.loggedIn = true;
this.columns = [];
this.workItems = [];
this.contentItemHeight = 50;
this.selectedRows = [];
this.showTreeUI = false;
this.emptyStateConfig = {};
this.uiLockedList = false;
this.uiLockedSidebar = false;
this.selectedIterationSource = this.iterationQuery.getSelectedIteration().pipe(filter(function (i) { return i !== null; }));
this.workItemTypeSource = this.workItemTypeQuery.getWorkItemTypesWithChildren();
this.spaceSource = this.spaceQuery.getCurrentSpace.pipe(filter(function (s) { return !!s; }));
this.areaSource = this.areaQuery.getAreas().pipe(filter(function (a) { return !!a.length; }));
this.labelSource = this.labelQuery.getLables();
this.iterationSource = this.iterationQuery.getIterations().pipe(filter(function (i) { return !!i.length; }));
this.collaboratorSource = this.userQuery.getCollaborators();
this.workItemSource = this.workItemQuery.getWorkItems();
this.routeSource = this.route.queryParams.pipe(filter(function (p) { return p.hasOwnProperty('q'); }));
this.eventListeners = [];
this.detailExpandedRows = [];
this.showTree = false;
this.hdrHeight = 0;
this.toolbarHt = 0;
this.quickaddHt = 0;
this.showCompleted = false;
}
PlannerListComponent.prototype.ngOnInit = function () {
var _this = this;
var payload = {};
var newFilterObj = {};
this.emptyStateConfig = {
info: 'There are no Work Items for your selected criteria',
title: 'No Work Items Available'
};
this.eventListeners.push(this.spaceSource
.pipe(tap(function () {
_this.store.dispatch(new CollaboratorActions.Get());
_this.store.dispatch(new AreaActions.Get());
_this.uiLockedSidebar = true;
_this.uiLockedList = true;
}), switchMap(function (s) {
return combineLatest(_this.workItemTypeSource, _this.areaSource, _this.iterationSource.pipe(take(1)), _this.labelSource.pipe(take(1)), _this.collaboratorSource.pipe(take(1)), _this.routeSource);
}))
.subscribe(function (_a) {
var workItemTypeSource = _a[0], areaSource = _a[1], iterationSource = _a[2], labelSource = _a[3], collaboratorSource = _a[4], queryParams = _a[5];
_this.uiLockedSidebar = false;
_this.uiLockedList = true;
var exp = _this.filterService.queryToJson(queryParams.q);
var fields = _this.filterService.queryToFlat(queryParams.q);
var stateFilter = fields.findIndex(function (f) { return f.field === 'state'; });
if (!queryParams.hasOwnProperty('showCompleted') && !queryParams.showCompleted && stateFilter === -1) {
_this.showCompleted = false;
// not closed state
// TODO remove hard coded states and
// use meta-states when available
var stateQuery_1 = {};
['closed', 'Done', 'Removed', 'Closed'].forEach(function (state) {
stateQuery_1 = _this.filterService.queryJoiner(stateQuery_1, AND, _this.filterService.queryBuilder('state', NOT_EQUAL, state));
});
exp = _this.filterService.queryJoiner(exp, AND, stateQuery_1);
}
else {
_this.showCompleted = true;
}
// Check for tree view
if (queryParams.hasOwnProperty('showTree') && queryParams.showTree) {
_this.showTree = true;
exp['$OPTS'] = { 'tree-view': true };
}
else {
_this.showTree = false;
exp['$OPTS'] = { 'tree-view': false };
}
_this.store.dispatch(new WorkItemActions.Get({
pageSize: 200,
filters: exp,
isShowTree: _this.showTree
}));
}));
var queryParams = this.route.snapshot.queryParams;
if (Object.keys(queryParams).length === 0 ||
(Object.keys(queryParams).length === 1 && // for in memory
Object.keys(queryParams).indexOf('token_json') > -1)) {
this.setDefaultUrl();
}
this.loggedIn = this.auth.isLoggedIn();
this.setWorkItemTypes();
this.setWorkItems();
this.setDataTableColumns();
// Listen for the url change
this.eventListeners.push(this.router.events
.pipe(filter(function (event) { return event instanceof NavigationStart; }))
.subscribe(function (event) {
if (event.url.indexOf('?q') === -1 &&
event.url.indexOf('/plan/detail/') === -1 &&
event.url.indexOf('/plan/board') === -1 &&
event.url.indexOf('/plan/query') === -1 &&
event.url.indexOf('/plan') > -1) {
_this.setDefaultUrl();
}
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);
}
}));
};
//ngx-datatable methods
PlannerListComponent.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);
}
};
// Start: Settings(tableConfig) dropdown
PlannerListComponent.prototype.moveToDisplay = function (columns) {
var _this = this;
this.columns = columns.slice();
this.cookieService.setCookie('datatableColumn', this.columns);
setTimeout(function () {
_this.workItems = _this.workItems.slice();
}, 500);
};
PlannerListComponent.prototype.moveToAvailable = function (columns) {
this.cookieService.setCookie('datatableColumn', columns);
this.columns = columns.slice();
};
// End: Setting(tableConfig) Dropdown
PlannerListComponent.prototype.togglePanelState = function (event) {
var _this = this;
if (event === 'out') {
setTimeout(function () {
_this.sidePanelOpen = true;
}, 200);
}
else {
this.sidePanelOpen = false;
}
};
PlannerListComponent.prototype.togglePanel = function () {
var _this = this;
this.plannerLayout.toggleSidePanel();
setTimeout(function () {
_this.workItems = _this.workItems.slice();
}, 500);
};
PlannerListComponent.prototype.setDefaultUrl = function () {
var _this = this;
//redirect to default type group
//get space id
this.spaceSource
.pipe(take(1))
.subscribe(function (space) {
if (space) {
var spaceId = space.id;
//get groupsgroups
_this.groupTypeQuery.getFirstGroupType
.pipe(take(1))
.subscribe(function (groupType) {
var defaultGroupName = groupType.name;
//Query for work item type group
var type_query = _this.filterService.queryBuilder('typegroup.name', EQUAL, defaultGroupName);
//Join type and space query
var first_join = _this.filterService.queryJoiner({}, AND, type_query);
//const view_query = this.filterService.queryBuilder('tree-view', EQUAL, 'true');
//const third_join = this.filterService.queryJoiner(second_join);
//second_join gives json object
var query = _this.filterService.jsonToQuery(first_join);
console.log('query is ', query);
// { queryParams : {q: query}
_this.router.navigate([], {
relativeTo: _this.route,
queryParams: { q: query, showTree: true }
});
});
}
});
};
PlannerListComponent.prototype.setWorkItemTypes = function () {
var _this = this;
this.eventListeners.push(combineLatest(this.workItemTypeSource, this.groupTypeQuery.getGroupTypes).subscribe(function (_a) {
var workItemTypes = _a[0], groupTypes = _a[1];
var selectedGroupType = groupTypes.find(function (gt) { return gt.selected; });
if (selectedGroupType) {
_this.quickAddWorkItemTypes = selectedGroupType.typeList.map(function (type) {
return workItemTypes.find(function (wit) { return wit.id === type.id; });
});
}
else {
_this.quickAddWorkItemTypes = workItemTypes;
}
}));
};
/**
* This function listens for any change in
* work item state and adopt it
*/
PlannerListComponent.prototype.setWorkItems = function () {
var _this = this;
this.eventListeners.push(this.workItemSource
.subscribe(function (workItems) {
_this.uiLockedList = false;
_this.showTreeUI = _this.showTree;
_this.workItems = workItems.slice();
}));
};
PlannerListComponent.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;
}
};
PlannerListComponent.prototype.onSelect = function (_a) {
var selected = _a.selected;
// if (this.detailExpandedRows.length > 0 && this.detailExpandedRows[0].id !== selected[0].id) {
// this.table.rowDetail.collapseAllRows();
// this.detailExpandedRows = [];
// }
// this.workItemDataService.getItem(selected[0].id).subscribe(workItem => {
// this.workItemService.emitSelectedWI(workItem);
// });
};
PlannerListComponent.prototype.onScroll = function (event) {
// if (event.path &&
// this._lastCheckedScrollHeight < event.path[0].scrollHeight) {
// let scrollLeft = ((event.path[0].scrollHeight -
// (event.path[0].offsetHeight + event.path[0].scrollTop)) * 100) /
// event.path[0].scrollHeight;
// if (scrollLeft <= this._scrollTrigger) {
// this._lastCheckedScrollHeight = event.path[0].scrollHeight;
// this.fetchMoreWiItems();
// }
// }
};
PlannerListComponent.prototype.onTreeAction = function (event) {
var index = event.rowIndex;
var row = event.row;
if (this.workItems[index].treeStatus === 'collapsed') {
this.workItems[index].treeStatus = 'loading';
if (!this.workItems[index].childrenLoaded) {
this.loadChildren(this.workItems[index]);
}
else {
this.workItems[index].treeStatus = 'expanded';
this.store.dispatch(new WorkItemActions.UpdateSuccess(this.workItems[index]));
this.workItems = this.workItems.slice();
}
}
else {
this.workItems[index].treeStatus = 'collapsed';
this.store.dispatch(new WorkItemActions.UpdateSuccess(this.workItems[index]));
this.workItems = this.workItems.slice();
}
};
PlannerListComponent.prototype.loadChildren = function (workItem) {
this.store.dispatch(
// Clean object is used to remove
// Observables from the object so that
// it works with Redux dev-tools
new WorkItemActions.GetChildren({
id: workItem.id,
childrenLink: workItem.childrenLink
}));
};
PlannerListComponent.prototype.toggleExpandRow = function (row, quickAddEnabled) {
var _this = this;
if (quickAddEnabled === void 0) { quickAddEnabled = true; }
if (quickAddEnabled && this.loggedIn) {
var index = this.detailExpandedRows.findIndex(function (r) { return r.id === row.id; });
if (index > -1) {
// For collapsing
this.table.rowDetail.toggleExpandRow(this.detailExpandedRows[index]);
this.detailExpandedRows.splice(index, 1);
}
else {
// For expanding
this.detailExpandedRows.forEach(function (r) {
_this.table.rowDetail.toggleExpandRow(r);
});
this.detailExpandedRows = [];
this.table.rowDetail.toggleExpandRow(row);
this.detailExpandedRows.push(row);
}
}
};
PlannerListComponent.prototype.onCreateStart = function () {
this.detailExpandedRows = [];
};
PlannerListComponent.prototype.onClickLabel = function (event) {
var labelId = event.id;
var queryParams = cloneDeep(this.route.snapshot.queryParams);
var newQuery = this.filterService.queryBuilder('label', EQUAL, labelId);
var existingQuery = {};
if (queryParams.hasOwnProperty('q')) {
existingQuery = this.filterService.queryToJson(queryParams['q']);
}
var finalQuery = this.filterService.jsonToQuery(this.filterService.queryJoiner(existingQuery, AND, newQuery));
queryParams['q'] = finalQuery;
// Navigated to filtered view
this.router.navigate([], {
relativeTo: this.route,
queryParams: queryParams
});
};
PlannerListComponent.prototype.onPreview = function (workItem) {
this.quickPreview.open(workItem);
};
PlannerListComponent.prototype.onRowDrop = function (event) {
if (event.source.id === event.target.id) {
return;
}
this.uiLockedList = true;
var payload = {
workitem: event.source,
destinationWorkitemID: event.target.id,
direction: 'above'
};
this.store.dispatch(new WorkItemActions.Reorder(payload));
};
PlannerListComponent.prototype.ngOnDestroy = function () {
this.eventListeners.forEach(function (e) { return e.unsubscribe(); });
};
PlannerListComponent.prototype.ngAfterViewChecked = function () {
if (document.getElementsByClassName('navbar-pf').length > 0) {
this.hdrHeight = document.getElementsByClassName('navbar-pf')[0].offsetHeight;
}
if (this.toolbar) {
this.toolbarHt = this.toolbar.nativeElement.offsetHeight;
}
if (this.quickaddWrapper) {
this.quickaddHt = this.quickaddWrapper.nativeElement.offsetHeight;
}
var targetHeight = window.innerHeight - (this.hdrHeight + this.toolbarHt + this.quickaddHt);
if (this.listContainer) {
this.renderer.setStyle(this.listContainer.nativeElement, 'height', targetHeight + 'px');
}
// This hack is applied to get the titles in the list in order
if (document.getElementsByClassName('f8-planner-list-title').length) {
var arr = document.getElementsByClassName('f8-planner-list-title');
for (var i = 0; i < arr.length; i++) {
arr[i].parentElement.style.display = 'flex';
}
}
};
PlannerListComponent.prototype.onResize = function (event) { };
PlannerListComponent.decorators = [
{ type: Component, args: [{
encapsulation: ViewEncapsulation.None,
selector: 'alm-work-item-list',
template: require('./planner-list.component.html'),
styles: [require('./planner-list.component.css').toString()]
},] },
];
/** @nocollapse */
PlannerListComponent.ctorParameters = function () { return [
{ type: Renderer2, },
{ type: Store, },
{ type: ActivatedRoute, },
{ type: Router, },
{ type: AuthenticationService, },
{ type: FilterService, },
{ type: CookieService, },
{ type: UrlService, },
{ type: IterationQuery, },
{ type: UserQuery, },
{ type: LabelQuery, },
{ type: WorkItemQuery, },
{ type: AreaQuery, },
{ type: GroupTypeQuery, },
{ type: WorkItemTypeQuery, },
{ type: SpaceQuery, },
]; };
PlannerListComponent.propDecorators = {
'plannerLayout': [{ type: ViewChild, args: ['plannerLayout',] },],
'toolbar': [{ type: ViewChild, args: ['toolbar',] },],
'quickaddWrapper': [{ type: ViewChild, args: ['quickaddWrapper',] },],
'listContainer': [{ type: ViewChild, args: ['listContainer',] },],
'table': [{ type: ViewChild, args: ['myTable',] },],
'quickPreview': [{ type: ViewChild, args: ['quickPreview',] },],
'onResize': [{ type: HostListener, args: ['window:resize', ['$event'],] },],
};
return PlannerListComponent;
}());
export { PlannerListComponent };
//# sourceMappingURL=planner-list.component.js.map