fabric8-planner/app/components_ngrx/work-item-detail/work-item-detail.component.js

A planner front-end for Fabric8.

import { Component, EventEmitter, HostListener, Input, Output, Renderer2, ViewChild } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { ActivatedRoute, Router } from '@angular/router';
import { AuthenticationService } from 'ngx-login-client';
import { combineLatest } from 'rxjs';
import { LabelQuery } from './../../models/label.model';
import { UserQuery } from './../../models/user';
import { WorkItemTypeQuery } from './../../models/work-item-type';
import { UrlService } from './../../services/url.service';
// ngrx stuff
import { Store } from '@ngrx/store';
import { filter, map, switchMap } from 'rxjs/operators';
import * as DetailWorkItemActions from './../../actions/detail-work-item.actions';
import * as WorkItemActions from './../../actions/work-item.actions';
import { SpaceQuery } from './../../models/space';
import { WorkItemQuery } from './../../models/work-item';
import { WorkItemService } from './../../services/work-item.service';
var WorkItemDetailComponent = /** @class */ (function () {
    function WorkItemDetailComponent(store, route, router, urlService, auth, renderer, workItemService, sanitizer, userQuery, labelQuery, workItemQuery, workItemTypeQuery, spaceQuery) {
        this.store = store;
        this.route = route;
        this.router = router;
        this.urlService = urlService;
        this.auth = auth;
        this.renderer = renderer;
        this.workItemService = workItemService;
        this.sanitizer = sanitizer;
        this.userQuery = userQuery;
        this.labelQuery = labelQuery;
        this.workItemQuery = workItemQuery;
        this.workItemTypeQuery = workItemTypeQuery;
        this.spaceQuery = spaceQuery;
        this.spaceSource = this.spaceQuery.getCurrentSpace.pipe(filter(function (s) { return !!s; }));
        this.labelSource = this.labelQuery.getLables();
        this.collaboratorSource = this.userQuery.getCollaborators();
        this.combinedSources = combineLatest(this.labelSource, this.collaboratorSource, this.workItemTypeQuery.getWorkItemTypes());
        this.closePreview = new EventEmitter();
        this.workItem = null;
        this.detailContext = 'preview';
        this.eventListeners = [];
        this.workItemSubscriber = null;
        this.workItemStates = [];
        this.collaborators = [];
        this.loggedIn = false;
        this.titleCallback = null;
        this.descCallback = null;
        this._areas = [];
        this.areas = []; // this goes in selector component
        this.labels = [];
        this.loadingComments = true;
        this.loadingTypes = false;
        this.loadingStates = false;
        this.loadingIteration = false;
        this.loadingArea = false;
        this.loadingLabels = false;
        this.loadingAssignees = false;
        this.loggedInUser = null;
        this.listenToEsc = false;
    }
    Object.defineProperty(WorkItemDetailComponent.prototype, "workItemInput", {
        set: function (val) {
            if (val && val != null) {
                if (this.workItemSubscriber !== null) {
                    this.workItemSubscriber.unsubscribe();
                    this.workItemSubscriber = null;
                }
                this.detailContext = 'preview';
                var workItemNumber = val.number;
                this.setWorkItem(workItemNumber);
                this.listenToEsc = true;
            }
        },
        enumerable: true,
        configurable: true
    });
    WorkItemDetailComponent.prototype.ngOnInit = function () {
        var currentRoute = this.router.url;
        this.loggedIn = this.auth.isLoggedIn();
        if (currentRoute.includes('plan/detail/')) {
            this.detailContext = 'detail';
            var workItemNumber = currentRoute.split('plan/detail/')[1];
            this.setWorkItem(workItemNumber);
        }
    };
    WorkItemDetailComponent.prototype.ngOnDestroy = function () {
        this.eventListeners.forEach(function (e) { return e.unsubscribe(); });
        if (this.workItemSubscriber !== null) {
            this.workItemSubscriber.unsubscribe();
            this.workItemSubscriber = null;
        }
        if (document.getElementsByTagName('body')[0].style.overflow === 'hidden') {
            document.getElementsByTagName('body')[0].removeAttribute('style');
        }
    };
    WorkItemDetailComponent.prototype.ngAfterViewChecked = function () {
        if (this.detailContext === 'detail') {
            if (this.detailHeader) {
                var HdrDivHeight = this.detailHeader.nativeElement.offsetHeight;
                var targetHeight = window.innerHeight - HdrDivHeight - 90;
                this.renderer.setStyle(this.detailContent.nativeElement, 'height', targetHeight + 'px');
            }
        }
        if (document.getElementsByTagName('body')) {
            document.getElementsByTagName('body')[0].style.overflow = 'hidden';
        }
    };
    WorkItemDetailComponent.prototype.setWorkItem = function (wiNumber) {
        var _this = this;
        this.iterationSource = this.workItemQuery.getIterationsForWorkItem(wiNumber);
        this.selectedIterations = this.getSelectedItems(this.iterationSource);
        this.areaSource = this.workItemQuery.getAreasForWorkItem(wiNumber);
        this.selectedAreas = this.getSelectedItems(this.areaSource);
        this.workItemTypeSource = this.workItemQuery.getTypesForWorkItem(wiNumber);
        this.selectedWorkItemTypes = this.getSelectedItems(this.workItemTypeSource);
        this.workItemStateSource = this.workItemQuery.getStatesForWorkItem(wiNumber);
        this.selectedWorkItemStates = this.getSelectedItems(this.workItemStateSource);
        this.workItemSubscriber =
            this.spaceSource
                .pipe(switchMap(function (s) {
                return _this.combinedSources;
            }), switchMap(function (_a) {
                var labels = _a[0], collabs = _a[1], type = _a[2];
                _this.collaborators = collabs.filter(function (c) { return !c.currentUser; });
                _this.loggedInUser = collabs.find(function (c) { return c.currentUser; });
                _this.labels = labels.sort(function (l1, l2) { return (l1.name.toLowerCase() > l2.name.toLowerCase() ? 1 : 0); });
                _this.store.dispatch(new DetailWorkItemActions.GetWorkItem({
                    number: wiNumber
                }));
                return _this.workItemQuery.getWorkItem(wiNumber);
            }), filter(function (w) { return w !== null; }))
                .subscribe(function (workItem) {
                if ((_this.detailContext === 'preview')
                    && _this.descMarkdown && _this.workItem.id !== workItem.id) {
                    _this.descMarkdown.deactivateEditor();
                }
                _this.workItem = workItem;
                _this.loadingAssignees = false;
                _this.loadingArea = false;
                _this.loadingIteration = false;
                _this.loadingLabels = false;
                _this.loadingTypes = false;
                _this.loadingStates = false;
                // init dynamic form
                if (_this.workItem.type) {
                    _this.eventListeners.push(_this.workItem.typeObs.subscribe(function (type) {
                        _this.dynamicKeyValueFields = type.dynamicfields.map(function (item) {
                            return {
                                key: item,
                                value: _this.workItem.dynamicfields[item],
                                field: type.fields[item]
                            };
                        });
                    }));
                }
                // set title on update
                if (_this.titleCallback !== null) {
                    _this.titleCallback(_this.workItem.title);
                    _this.titleCallback = null;
                }
                // set desc on update
                if (_this.descCallback !== null) {
                    _this.descCallback(_this.workItem.description, _this.sanitizer.bypassSecurityTrustHtml(_this.workItem.descriptionRendered));
                    _this.descCallback = null;
                }
            });
    };
    WorkItemDetailComponent.prototype.getSelectedItems = function (itemSource) {
        return itemSource.pipe(map(function (items) {
            return items.filter(function (i) { return i.selected; });
        }));
    };
    WorkItemDetailComponent.prototype.closeDetail = function () {
        this.workItem = null;
        if (this.workItemSubscriber !== null) {
            this.workItemSubscriber.unsubscribe();
            this.workItemSubscriber = null;
        }
        if (this.detailContext === 'detail') {
            this.navigateBack();
        }
        else {
            if (this.inlineInput) {
                this.inlineInput.closeClick();
            }
            this.closePreview.emit();
        }
    };
    WorkItemDetailComponent.prototype.navigateBack = function () {
        if (this.urlService.getLastListOrBoard() === '') {
            this.router.navigate(['../..'], { relativeTo: this.route });
        }
        else {
            this.router.navigateByUrl(this.urlService.getLastListOrBoard());
        }
    };
    WorkItemDetailComponent.prototype.saveTitle = function (event) {
        var value = event.value.trim();
        this.titleCallback = event.callBack;
        if (value === '') {
            this.titleCallback(value, 'Empty title not allowed');
        }
        else if (this.workItem.title === value) {
            this.titleCallback(value);
        }
        else {
            var workItem = {};
            workItem['version'] = this.workItem.version;
            workItem['link'] = this.workItem.link;
            workItem['id'] = this.workItem.id;
            workItem['title'] = value;
            this.store.dispatch(new WorkItemActions.Update(workItem));
        }
    };
    WorkItemDetailComponent.prototype.onChangeState = function (event) {
        if (event[0].value !== this.workItem.state) {
            this.loadingStates = true;
            var workItem = {};
            workItem['version'] = this.workItem.version;
            workItem['link'] = this.workItem.link;
            workItem['id'] = this.workItem.id;
            workItem['state'] = event[0].value;
            this.store.dispatch(new WorkItemActions.Update(workItem));
        }
    };
    WorkItemDetailComponent.prototype.assignUser = function (users) {
        this.loadingAssignees = true;
        var workItem = {};
        workItem['version'] = this.workItem.version;
        workItem['link'] = this.workItem.link;
        workItem['id'] = this.workItem.id;
        workItem['assignees'] = users.map(function (u) { return u.id; });
        this.store.dispatch(new WorkItemActions.Update(workItem));
    };
    WorkItemDetailComponent.prototype.areaUpdated = function (event) {
        var areaID = event[0].key;
        this.loadingArea = true;
        var workItem = {};
        workItem['version'] = this.workItem.version;
        workItem['link'] = this.workItem.link;
        workItem['id'] = this.workItem.id;
        workItem['areaId'] = areaID;
        this.store.dispatch(new WorkItemActions.Update(workItem));
    };
    WorkItemDetailComponent.prototype.iterationUpdated = function (event) {
        var iterationID = event[0].key;
        this.loadingIteration = true;
        var workItem = {};
        workItem['version'] = this.workItem.version;
        workItem['link'] = this.workItem.link;
        workItem['id'] = this.workItem.id;
        workItem['iterationId'] = iterationID;
        this.store.dispatch(new WorkItemActions.Update(workItem));
    };
    WorkItemDetailComponent.prototype.updateLabels = function (labels) {
        this.loadingLabels = true;
        var workItem = {};
        workItem['version'] = this.workItem.version;
        workItem['link'] = this.workItem.link;
        workItem['id'] = this.workItem.id;
        workItem['labels'] = labels.map(function (l) { return l.id; });
        this.store.dispatch(new WorkItemActions.Update(workItem));
    };
    WorkItemDetailComponent.prototype.removeLable = function (label) {
        this.loadingLabels = true;
        var workItem = {};
        workItem['version'] = this.workItem.version;
        workItem['link'] = this.workItem.link;
        workItem['id'] = this.workItem.id;
        workItem['labels'] = this.workItem.labels.filter(function (l) { return l != label.id; });
        this.store.dispatch(new WorkItemActions.Update(workItem));
    };
    WorkItemDetailComponent.prototype.showPreview = function (event) {
        var _this = this;
        var rawText = event.rawText;
        var callBack = event.callBack;
        this.workItemService.renderMarkDown(rawText)
            .subscribe(function (renderedHtml) {
            callBack(rawText, _this.sanitizer.bypassSecurityTrustHtml(renderedHtml));
        });
    };
    WorkItemDetailComponent.prototype.descUpdate = function (event) {
        var rawText = event.rawText;
        this.descCallback = event.callBack;
        var workItem = {};
        workItem['version'] = this.workItem.version;
        workItem['link'] = this.workItem.link;
        workItem['id'] = this.workItem.id;
        workItem['description'] = {
            content: rawText,
            markup: 'Markdown'
        };
        this.store.dispatch(new WorkItemActions.Update(workItem));
    };
    WorkItemDetailComponent.prototype.updateType = function (e) {
        if (e[0].key !== this.workItem.type) {
            this.loadingTypes = true;
            var workItem = {};
            workItem['version'] = this.workItem.version;
            workItem['link'] = this.workItem.link;
            workItem['id'] = this.workItem.id;
            workItem['type'] = e[0].key;
            this.store.dispatch(new WorkItemActions.Update(workItem));
        }
    };
    WorkItemDetailComponent.prototype.dynamicFieldUpdated = function (event) {
        var workItem = {};
        //let dynamicfield[event]
        workItem['version'] = this.workItem.version;
        workItem['link'] = this.workItem.link;
        workItem['id'] = this.workItem.id;
        workItem['type'] = this.workItem.type;
        workItem['dynamicfields'] = {};
        workItem['dynamicfields'][event.key] = event.newValue;
        this.store.dispatch(new WorkItemActions.Update(workItem));
    };
    WorkItemDetailComponent.prototype.onKeyEvent = function (event) {
        // for ESC key handling
        if (event.keyCode == 27 && this.listenToEsc) {
            this.closeDetail();
            this.listenToEsc = false;
        }
    };
    WorkItemDetailComponent.decorators = [
        { type: Component, args: [{
                    selector: 'work-item-detail',
                    template: require('./work-item-detail.component.html'),
                    styles: [require('./work-item-detail.component.css').toString()],
                    providers: [AuthenticationService]
                },] },
    ];
    /** @nocollapse */
    WorkItemDetailComponent.ctorParameters = function () { return [
        { type: Store, },
        { type: ActivatedRoute, },
        { type: Router, },
        { type: UrlService, },
        { type: AuthenticationService, },
        { type: Renderer2, },
        { type: WorkItemService, },
        { type: DomSanitizer, },
        { type: UserQuery, },
        { type: LabelQuery, },
        { type: WorkItemQuery, },
        { type: WorkItemTypeQuery, },
        { type: SpaceQuery, },
    ]; };
    WorkItemDetailComponent.propDecorators = {
        'detailHeader': [{ type: ViewChild, args: ['detailHeader',] },],
        'detailContent': [{ type: ViewChild, args: ['detailContent',] },],
        'inlineInput': [{ type: ViewChild, args: ['inlineInput',] },],
        'descMarkdown': [{ type: ViewChild, args: ['descMarkdown',] },],
        'context': [{ type: Input },],
        'workItemInput': [{ type: Input, args: ['workItem',] },],
        'closePreview': [{ type: Output },],
        'onKeyEvent': [{ type: HostListener, args: ['window:keydown', ['$event'],] },],
    };
    return WorkItemDetailComponent;
}());
export { WorkItemDetailComponent };
//# sourceMappingURL=work-item-detail.component.js.map