fabric8-planner
Version:
A planner front-end for Fabric8.
203 lines • 9.09 kB
JavaScript
import { Component, Renderer2, ViewChild } from '@angular/core';
import { ActivatedRoute, NavigationStart, Router } from '@angular/router';
import { Store } from '@ngrx/store';
import { DragulaService } from 'ng2-dragula';
import { Subject } from 'rxjs';
import { filter, map, switchMap, take, takeUntil, tap } from 'rxjs/operators';
import { BoardQuery, BoardUIQuery } from '../../models/board.model';
import { WorkItemQuery } from '../../models/work-item';
import { FilterService } from '../../services/filter.service';
import { AND, EQUAL } from '../../services/query-keys';
import * as BoardUIActions from './../../actions/board-ui.actions';
import * as ColumnWorkItemAction from './../../actions/column-workitem.action';
import { GroupTypeQuery } from './../../models/group-types.model';
import { IterationQuery } from './../../models/iteration.model';
import { SpaceQuery } from './../../models/space';
var PlannerBoardComponent = /** @class */ (function () {
function PlannerBoardComponent(dragulaService, renderer, spaceQuery, groupTypeQuery, iterationQuery, boardQuery, route, store, router, workItemQuery, boardUiQuery, filterService) {
var _this = this;
this.dragulaService = dragulaService;
this.renderer = renderer;
this.spaceQuery = spaceQuery;
this.groupTypeQuery = groupTypeQuery;
this.iterationQuery = iterationQuery;
this.boardQuery = boardQuery;
this.route = route;
this.store = store;
this.router = router;
this.workItemQuery = workItemQuery;
this.boardUiQuery = boardUiQuery;
this.filterService = filterService;
this.uiLockedSidebar = false;
this.sidePanelOpen = true;
this.eventListeners = [];
this.destroy$ = new Subject();
var bag = this.dragulaService.find('board-column');
if (bag !== undefined) {
this.dragulaService.destroy('board-column');
}
this.dragulaService.drop.asObservable()
.pipe(takeUntil(this.destroy$))
.subscribe(function (value) {
_this.onDrop(value.slice(1));
});
// card is not draggable if loggedInUser is not collaborator or creator of workItem
this.dragulaService.setOptions('board-column', {
moves: function (el, source, handle, sibling) {
return !el.classList.contains('item-not-draggable');
}
});
}
PlannerBoardComponent.prototype.ngOnInit = function () {
var _this = this;
this.iterationQuery.deselectAllIteration();
this.eventListeners.push(this.spaceQuery.getCurrentSpace
.pipe(switchMap(function () { return _this.groupTypeQuery.getFirstGroupType; }), take(1), tap(function (groupType) {
_this.setDefaultUrl(groupType);
_this.checkUrl(groupType);
}))
.subscribe());
};
PlannerBoardComponent.prototype.setDefaultUrl = function (groupType) {
var queryParams = this.constructUrl(groupType);
this.router.navigate([], {
relativeTo: this.route,
queryParams: { q: queryParams }
});
};
PlannerBoardComponent.prototype.constructUrl = function (witGroup) {
//Query for work item type group
var type_query = this.filterService.queryBuilder('boardContextId', EQUAL, witGroup.id);
//Query for space
//Join type and space query
var first_join = this.filterService.queryJoiner({}, AND, type_query);
//second_join gives json object
return this.filterService.jsonToQuery(first_join);
//reverse function jsonToQuery(second_join);
};
PlannerBoardComponent.prototype.checkUrl = function (groupType) {
var _this = this;
this.eventListeners.push(this.router.events
.pipe(filter(function (event) { return event instanceof NavigationStart; }), map(function (e) { return e.url; }))
.subscribe(function (url) {
if (url.indexOf('?q') === -1 &&
url.indexOf('/plan/board') > -1) {
_this.setDefaultUrl(groupType);
}
}));
this.eventListeners.push(this.route.queryParams
.pipe(filter(function (params) { return params.hasOwnProperty('q'); }), map(function (params) {
var iterationId = _this.filterService.getConditionFromQuery(params.q, 'iteration');
if (iterationId !== undefined) {
return [_this.filterService.getConditionFromQuery(params.q, 'boardContextId'), iterationId];
}
else {
var contextId = _this.filterService.queryToFlat(params.q)[0].value;
return [contextId];
}
}))
.subscribe(function (ids) {
// ids[0]: boardContextId, ids[1]: iteration
if (ids.length > 1) {
_this.board$ = _this.boardQuery.getBoardById(ids[0], ids[1]);
}
else {
_this.board$ = _this.boardQuery.getBoardById(ids[0]);
}
// Fetching work item
// Dispatch action to fetch work items per lane for this context ID
}));
};
PlannerBoardComponent.prototype.ngOnDestroy = function () {
this.destroy$.next();
this.eventListeners.forEach(function (e) { return e.unsubscribe(); });
};
PlannerBoardComponent.prototype.ngAfterViewChecked = function () {
var hdrHeight = 0;
if (document.getElementsByClassName('navbar-pf').length > 0) {
hdrHeight = document.getElementsByClassName('navbar-pf')[0].offsetHeight;
}
var targetHeight = window.innerHeight - (hdrHeight);
if (this.boardContainer) {
this.renderer.setStyle(this.boardContainer.nativeElement, 'height', targetHeight + 'px');
}
};
PlannerBoardComponent.prototype.togglePanelState = function (event) {
var _this = this;
setTimeout(function () {
_this.sidePanelOpen = event === 'out';
}, 200);
};
PlannerBoardComponent.prototype.openQuickPreview = function (workItem) {
this.quickPreview.open(workItem);
};
PlannerBoardComponent.prototype.onDrop = function (args) {
var _this = this;
var el = args[0], target = args[1], source = args[2], sibling = args[3];
var direction;
var destinationWorkItemID;
if (sibling === null && el.previousElementSibling !== null) {
direction = 'below';
destinationWorkItemID = el.previousElementSibling.children[0].getAttribute('data-id');
}
else if (sibling !== null) {
direction = 'above';
destinationWorkItemID = sibling.children[0].getAttribute('data-id');
}
else if (sibling === null && el.previousElementSibling === null) {
// no reorder action dispatch only update action will dispatch
direction = null;
}
this.workItemQuery.getWorkItemWithId(el.children[0].getAttribute('data-id'))
.pipe(take(1))
.subscribe(function (workItem) {
var workitem = {};
workitem['version'] = workItem.version;
workitem['link'] = workItem.link;
workitem['id'] = workItem.id;
workitem['type'] = workItem.type;
// Construct the payload for Reorder
var payload = {
workitem: workitem,
destinationWorkitemID: destinationWorkItemID,
direction: direction
};
workitem.columnIds = [target.getAttribute('data-id')];
_this.store.dispatch(new ColumnWorkItemAction.Update({
workItem: workitem,
reorder: payload,
prevColumnId: source.getAttribute('data-id')
}));
_this.store.dispatch(new BoardUIActions.LockBoard());
});
};
PlannerBoardComponent.decorators = [
{ type: Component, args: [{
selector: 'planner-board',
template: require('./planner-board.component.html'),
styles: [require('./planner-board.component.css').toString()]
},] },
];
/** @nocollapse */
PlannerBoardComponent.ctorParameters = function () { return [
{ type: DragulaService, },
{ type: Renderer2, },
{ type: SpaceQuery, },
{ type: GroupTypeQuery, },
{ type: IterationQuery, },
{ type: BoardQuery, },
{ type: ActivatedRoute, },
{ type: Store, },
{ type: Router, },
{ type: WorkItemQuery, },
{ type: BoardUIQuery, },
{ type: FilterService, },
]; };
PlannerBoardComponent.propDecorators = {
'boardContainer': [{ type: ViewChild, args: ['boardContainer',] },],
'quickPreview': [{ type: ViewChild, args: ['quickPreview',] },],
};
return PlannerBoardComponent;
}());
export { PlannerBoardComponent };
//# sourceMappingURL=planner-board.component.js.map