my-test123
Version:
A planner front-end for Fabric8.
477 lines • 20.6 kB
JavaScript
import { UrlService } from './../../services/url.service';
import { Observable } from 'rxjs/Observable';
import { Component, HostListener, Renderer2, ViewEncapsulation, ViewChild } from '@angular/core';
import { ActivatedRoute, Router, NavigationStart } from '@angular/router';
import { AuthenticationService } from 'ngx-login-client';
import { FilterService } from './../../services/filter.service';
import { CookieService } from './../../services/cookie.service';
import { cloneDeep, sortBy } from 'lodash';
// import for column
import { datatableColumn } from './../../components/planner-list/datatable-config';
// ngrx stuff
import { Store } from '@ngrx/store';
import * as SpaceActions from './../../actions/space.actions';
import * as WorkItemActions from './../../actions/work-item.actions';
var PlannerListComponent = /** @class */ (function () {
function PlannerListComponent(renderer, store, route, router, auth, filterService, cookieService, urlService) {
var _this = this;
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.uiLockedAll = false;
this.sidePanelOpen = true;
this.groupTypeSource = this.store
.select('listPage')
.select('groupTypes')
.filter(function (g) { return !!g.length; });
this.workItemTypeSource = this.store
.select('listPage')
.select('workItemTypes')
.filter(function (w) { return !!w.length; });
this.spaceSource = this.store
.select('listPage')
.select('space')
.do(function (s) { if (!s)
_this.store.dispatch(new SpaceActions.Get()); })
.filter(function (s) { return !!s; });
this.areaSource = this.store
.select('listPage')
.select('areas')
.filter(function (a) { return !!a.length; });
this.iterationSource = this.store
.select('listPage')
.select('iterations')
.filter(function (i) { return !!i.length; });
this.labelSource = this.store
.select('listPage')
.select('labels')
.filter(function (i) { return i !== null; });
this.collaboratorSource = this.store
.select('listPage')
.select('collaborators')
.filter(function (c) { return !!c.length; });
this.selectedIterationSource = this.store
.select('listPage')
.select('iterations')
.filter(function (its) { return !!its.length; })
.map(function (its) { return its.find(function (it) { return it.selected; }); });
this.workItemSource = this.store
.select('listPage')
.select('workItems');
this.routeSource = this.route.queryParams
.filter(function (p) { return p.hasOwnProperty('q'); });
this.quickAddWorkItemTypes = [];
this.allWorkItemTypes = [];
this.selectedIteration = null;
this.loggedIn = true;
this.eventListeners = [];
this.columns = [];
this.isTableConfigOpen = false;
this.workItems = [];
this.contentItemHeight = 50;
this.selectedRows = [];
this.detailExpandedRows = [];
this.showTree = false;
this.showTreeUI = false;
this.emptyStateConfig = {};
this.uiLockedList = false;
this.uiLockedSidebar = false;
this.hdrHeight = 0;
this.toolbarHt = 0;
this.quickaddHt = 0;
}
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
.do(function () {
_this.uiLockedSidebar = true;
_this.uiLockedList = true;
})
.switchMap(function (s) {
return Observable.combineLatest(_this.workItemTypeSource, _this.areaSource, _this.iterationSource.take(1), _this.labelSource.take(1), _this.collaboratorSource, _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);
// 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 };
}
Object.assign(payload, {
expression: exp
});
_this.store.dispatch(new WorkItemActions.Get({
pageSize: 200,
filters: payload,
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.setSelectedIterationForQuickAdd();
this.setWorkItems();
this.setDataTableColumns();
// Listen for the url change
this.eventListeners.push(this.router.events
.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);
}
}));
};
//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.toggleCheckbox = function (event, col) {
if (event.target.checked) {
col.selected = true;
}
else {
col.selected = false;
}
};
PlannerListComponent.prototype.moveToDisplay = function () {
this.columns.filter(function (col) { return col.selected; }).forEach(function (col) {
if (col.display === true)
return;
col.selected = false;
col.display = true;
col.showInDisplay = true;
col.available = false;
});
this.updateColumnIndex();
this.cookieService.setCookie('datatableColumn', this.columns);
};
PlannerListComponent.prototype.moveToAvailable = function () {
this.columns.filter(function (col) { return col.selected; }).forEach(function (col) {
if (col.available === true)
return;
col.selected = false;
col.display = false;
col.showInDisplay = false;
col.available = true;
});
this.updateColumnIndex();
this.cookieService.setCookie('datatableColumn', this.columns);
};
PlannerListComponent.prototype.updateColumnIndex = function () {
var index = 0;
this.columns.forEach(function (col) {
if (col.display === true) {
col.index = index + 1;
index += 1;
}
else {
col.index = undefined;
}
});
this.columns = sortBy(this.columns, 'index');
};
PlannerListComponent.prototype.tableConfigChange = function (value) {
this.isTableConfigOpen = value;
};
PlannerListComponent.prototype.tableConfigToggle = function (event) {
event.preventDefault();
event.stopPropagation();
this.isTableConfigOpen = false;
};
// 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
.take(1)
.subscribe(function (space) {
if (space) {
var spaceId_1 = space.id;
//get groupsgroups
_this.groupTypeSource
.take(1)
.subscribe(function (groupTypes) {
var defaultGroupName = groupTypes[0].name;
//Query for work item type group
var type_query = _this.filterService.queryBuilder('typegroup.name', _this.filterService.equal_notation, defaultGroupName);
//Query for space
var space_query = _this.filterService.queryBuilder('space', _this.filterService.equal_notation, spaceId_1);
//Join type and space query
var first_join = _this.filterService.queryJoiner({}, _this.filterService.and_notation, space_query);
var second_join = _this.filterService.queryJoiner(first_join, _this.filterService.and_notation, type_query);
//const view_query = this.filterService.queryBuilder('tree-view', this.filterService.equal_notation, 'true');
//const third_join = this.filterService.queryJoiner(second_join);
//second_join gives json object
var query = _this.filterService.jsonToQuery(second_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(Observable.combineLatest(this.workItemTypeSource, this.groupTypeSource).subscribe(function (_a) {
var workItemTypes = _a[0], groupTypes = _a[1];
_this.allWorkItemTypes = workItemTypes;
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;
}
}));
};
PlannerListComponent.prototype.setSelectedIterationForQuickAdd = function () {
var _this = this;
this.eventListeners.push(this.selectedIterationSource
.subscribe(function (iteration) {
_this.selectedIteration = iteration;
}));
};
/**
* 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.workItems = this.workItems.slice();
}
}
else {
this.workItems[index].treeStatus = 'collapsed';
this.workItems = this.workItems.slice();
}
};
PlannerListComponent.prototype.loadChildren = function (workItem) {
this.store.dispatch(new WorkItemActions.GetChildren(workItem));
};
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', this.filterService.equal_notation, labelId);
var existingQuery = {};
if (queryParams.hasOwnProperty('q')) {
existingQuery = this.filterService.queryToJson(queryParams['q']);
}
var finalQuery = this.filterService.jsonToQuery(this.filterService.queryJoiner(existingQuery, this.filterService.and_notation, newQuery));
queryParams['q'] = finalQuery;
// Navigated to filtered view
this.router.navigate([], {
relativeTo: this.route,
queryParams: queryParams
});
};
PlannerListComponent.prototype.onPreview = function (id) {
var workItem = this.workItems.find(function (w) { return w.id === id; });
this.quickPreview.open(workItem);
};
PlannerListComponent.prototype.onRowDrop = function (event) {
console.log(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.Reoder(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 + 25); // add 25 for experimental bar height
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('planner-hack-title-truncate').length) {
var arr = document.getElementsByClassName('planner-hack-title-truncate');
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,
host: {
'class': ''
},
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, },
]; };
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