fabric8-planner
Version:
A planner front-end for Fabric8.
402 lines • 17.5 kB
JavaScript
import { Component, EventEmitter, Output, ViewChild } from '@angular/core';
import { cloneDeep } from 'lodash';
import * as moment from 'moment';
import { Broadcaster } from 'ngx-base';
import { IterationQuery } from '../../models/iteration.model';
// ngrx stuff
import { select, Store } from '@ngrx/store';
import * as IterationActions from './../../actions/iteration.actions';
var FabPlannerIterationModalComponent = /** @class */ (function () {
function FabPlannerIterationModalComponent(broadcaster, store, iterationQuery) {
this.broadcaster = broadcaster;
this.store = store;
this.iterationQuery = iterationQuery;
this.onSubmit = new EventEmitter();
this.validationError = false;
this.modalType = 'create';
this.submitBtnTxt = 'Create';
this.modalTitle = 'Create Iteration';
this.spaceError = false;
this.submitLoading = false;
this.iterations = [];
this.iterationsValue = [];
this.filteredIterations = [];
this.selectedParentIterationName = '';
this.iterationSearchDisable = false;
this.showIterationDropdown = false;
this.validationString = 'Something went wrong.';
this.startDatePickerOptions = {
dateFormat: 'dd mmm yyyy',
selectionTxtFontSize: '14px',
openSelectorOnInputClick: true,
editableDateField: false,
showClearDateBtn: false,
componentDisabled: false,
yearSelector: false
};
this.endDatePickerOptions = {
dateFormat: 'dd mmm yyyy',
selectionTxtFontSize: '14px',
openSelectorOnInputClick: true,
editableDateField: false,
showClearDateBtn: false,
componentDisabled: false,
yearSelector: false
};
this.startDateSelector = {
open: false
};
this.endDateSelector = {
open: false
};
}
FabPlannerIterationModalComponent.prototype.ngOnInit = function () {
var _this = this;
this.resetValues();
this.store
.pipe(select('iterationPanel'), select('iterationUI')).subscribe(function (uiState) {
if (uiState.error) {
_this.validationError = true;
_this.validationString = uiState.error;
}
if (_this.submitLoading &&
!uiState.modalLoading &&
!_this.validationError) {
_this.createUpdateIterationDialog.close();
}
_this.submitLoading = uiState.modalLoading;
}, function (e) {
console.log('Some error has occured', e);
});
};
FabPlannerIterationModalComponent.prototype.resetValues = function () {
this.iteration = {
id: '',
name: '',
userActive: false,
isActive: false,
startAt: null,
endAt: null,
description: '',
state: 'new',
workItemTotalCount: 0,
workItemClosedCount: 0,
parentPath: '',
resolvedParentPath: '',
link: '',
children: []
};
var endDatePickerComponentCopy = Object.assign({}, this.endDatePickerOptions);
var startDatePickerComponentCopy = Object.assign({}, this.startDatePickerOptions);
var aDayBefore = moment().subtract(1, 'days');
var aDayBeforeDate = { date: { year: aDayBefore.format('YYYY'), month: aDayBefore.format('M'), day: aDayBefore.format('D') } };
endDatePickerComponentCopy['disableUntil'] = aDayBeforeDate.date;
startDatePickerComponentCopy['componentDisabled'] = false;
startDatePickerComponentCopy['disableSince'] = { year: 0, month: 0, day: 0 };
this.startDatePickerOptions = startDatePickerComponentCopy;
this.endDatePickerOptions = endDatePickerComponentCopy;
this.validationError = false;
this.spaceError = false;
this.selectedParentIterationName = '';
this.filteredIterations = [];
this.selectedParentIteration = null;
this.iterationSearchDisable = false;
this.showIterationDropdown = false;
this.iterations = [];
this.iterationsValue = [];
this.startDate = '';
this.endDate = '';
if (this.startmydp && this.startDateSelector.open) {
this.startmydp.openBtnClicked();
}
if (this.endmydp && this.endDateSelector.open) {
this.endmydp.openBtnClicked();
}
};
FabPlannerIterationModalComponent.prototype.ngOnChanges = function () {
};
FabPlannerIterationModalComponent.prototype.ngOnDestroy = function () {
// prevent memory leak when component is destroyed
};
FabPlannerIterationModalComponent.prototype.openCreateUpdateModal = function (type, iteration, e) {
if (type === void 0) { type = 'create'; }
if (iteration === void 0) { iteration = null; }
if (e) {
e.stopPropagation();
}
this.modalType = type;
if (iteration) {
this.iteration = cloneDeep(iteration);
if (this.iteration.startAt) {
var startDate = moment(this.iteration.startAt);
this.startDate = { date: { year: startDate.format('YYYY'), month: startDate.format('M'), day: startDate.format('D') } };
}
if (this.iteration.endAt) {
var endDate = moment(this.iteration.endAt);
this.endDate = { date: { year: endDate.format('YYYY'), month: endDate.format('M'), day: endDate.format('D') } };
}
}
if (this.modalType == 'create') {
this.getIterations();
this.submitBtnTxt = 'Create';
this.modalTitle = 'Create Iteration';
if (this.iterationSearch) {
this.iterationSearch.nativeElement.setAttribute('placeholder', 'None');
}
this.startDate = '';
this.endDate = '';
}
if (this.modalType == 'start') {
this.submitBtnTxt = 'Start';
this.modalTitle = 'Start Iteration';
}
if (this.modalType == 'update') {
this.getIterations();
this.submitBtnTxt = 'Update';
this.modalTitle = 'Update Iteration';
this.iterationSearchDisable = true;
this.selectedParentIterationName = iteration.resolvedParentPath;
if (iteration.state === 'start') {
var startDatePickerComponentCopy = Object.assign({}, this.startDatePickerOptions);
startDatePickerComponentCopy['componentDisabled'] = true;
this.startDatePickerOptions = startDatePickerComponentCopy;
}
}
if (this.modalType == 'createChild') {
this.getIterations();
this.submitBtnTxt = 'Create';
this.modalTitle = 'Create Iteration';
this.selectedParentIterationName = (iteration.resolvedParentPath + '/' +
iteration.name).replace('//', '/');
this.selectedParentIteration = iteration;
this.iteration.name = '';
this.startDate = '';
this.endDate = '';
}
if (this.modalType == 'close') {
this.submitBtnTxt = 'Close';
this.modalTitle = 'Close Iteration';
}
this.createUpdateIterationDialog.open();
};
FabPlannerIterationModalComponent.prototype.actionOnOpen = function () {
// console.log('Open');
};
FabPlannerIterationModalComponent.prototype.actionOnClose = function () {
this.resetValues();
};
FabPlannerIterationModalComponent.prototype.onStartCalendarToggle = function (event) {
this.startDateSelector = {
open: !this.startDateSelector.open
};
};
FabPlannerIterationModalComponent.prototype.onEndCalendarToggle = function (event) {
this.endDateSelector = {
open: !this.endDateSelector.open
};
};
FabPlannerIterationModalComponent.prototype.onStartDateChanged = function (event) {
// event properties are: event.date, event.jsdate, event.formatted and event.epoc
// Format 2016-11-29T23:18:14Z
if (event.jsdate !== null) {
this.startDate = { date: event.date };
this.iteration.startAt = moment(event.jsdate).format('YYYY-MM-DD') + 'T12:00:00Z';
}
else {
this.startDate = '';
this.iteration.startAt = '';
}
var endDatePickerComponentCopy = Object.assign({}, this.endDatePickerOptions);
endDatePickerComponentCopy['disableUntil'] = event.date;
this.endDatePickerOptions = endDatePickerComponentCopy;
var sDate = moment(event.jsdate);
var eDate;
if (this.endDate !== null) {
eDate = moment(this.endDate.jsdate);
}
if (sDate > eDate) {
this.endDate = null;
this.iteration.endAt = null;
}
};
FabPlannerIterationModalComponent.prototype.onEndDateChanged = function (event) {
// event properties are: event.date, event.jsdate, event.formatted and event.epoc
if (event.jsdate !== null) {
this.endDate = { date: event.date };
this.iteration.endAt = moment(event.jsdate).format('YYYY-MM-DD') + 'T12:00:00Z';
}
else {
this.endDate = '';
this.iteration.endAt = '';
}
};
FabPlannerIterationModalComponent.prototype.iterationSearchFocus = function () {
if (!this.iterationSearchDisable) {
if (this.showIterationDropdown) {
this.showIterationDropdown = false;
}
else {
this.filteredIterations = this.iterationsValue;
this.showIterationDropdown = true;
}
}
};
FabPlannerIterationModalComponent.prototype.getIterations = function () {
var _this = this;
this.iterationQuery.getIterations()
.subscribe(function (iterations) {
_this.iterations = iterations;
_this.iterationsValue = [];
for (var i = 0; i < iterations.length; i++) {
_this.iterationsValue.push({
key: iterations[i].id,
value: (iterations[i].resolvedParentPath + '/' + iterations[i].name).replace('//', '/')
});
}
});
};
FabPlannerIterationModalComponent.prototype.setParentIteration = function (value) {
this.selectedParentIteration = this.iterations.find(function (iteration) { return iteration.id === value.key; });
this.selectedParentIterationName = value.value;
this.iterationSearch.nativeElement.focus();
// this.iteration.relationships.parent.data.id = this.selectedParentIteration.id;
this.showIterationDropdown = false;
};
FabPlannerIterationModalComponent.prototype.filterIteration = function (event) {
event.stopPropagation();
this.showIterationDropdown = true;
// Down arrow or up arrow
if (event.keyCode == 40 || event.keyCode == 38) {
var lis = this.iterationList.nativeElement.children;
var i = 0;
for (; i < lis.length; i++) {
if (lis[i].classList.contains('selected')) {
break;
}
}
if (i == lis.length) { // No existing selected
if (event.keyCode == 40) { // Down arrow
lis[0].classList.add('selected');
// this.setParentIteration(lis[0].getAttribute('data-id'));
lis[0].scrollIntoView(false);
}
else { // Up arrow
lis[lis.length - 1].classList.add('selected');
// this.setParentIteration(lis[lis.length - 1].getAttribute('data-id'));
lis[lis.length - 1].scrollIntoView(false);
}
}
else { // Existing selected
lis[i].classList.remove('selected');
if (event.keyCode == 40) { // Down arrow
lis[(i + 1) % lis.length].classList.add('selected');
// this.setParentIteration(lis[(i + 1) % lis.length].getAttribute('data-id'));
lis[(i + 1) % lis.length].scrollIntoView(false);
}
else { // Down arrow
// In javascript mod gives exact mod for negative value
// For example, -1 % 6 = -1 but I need, -1 % 6 = 5
// To get the round positive value I am adding the divisor
// with the negative dividend
lis[(((i - 1) % lis.length) + lis.length) % lis.length].classList.add('selected');
// this.setParentIteration(lis[(((i - 1) % lis.length) + lis.length) % lis.length].getAttribute('data-id'));
lis[(((i - 1) % lis.length) + lis.length) % lis.length].scrollIntoView(false);
}
}
}
else if (event.keyCode == 13) { // Enter key event
var lis_1 = this.iterationList.nativeElement.children;
var i_1 = 0;
for (; i_1 < lis_1.length; i_1++) {
if (lis_1[i_1].classList.contains('selected')) {
break;
}
}
if (i_1 < lis_1.length) {
if (lis_1[i_1].getAttribute('data-id') !== null) {
var item = this.iterationsValue.find(function (iteration) { return iteration.key === lis_1[i_1].getAttribute('data-id'); });
this.setParentIteration(item);
}
else {
this.showIterationDropdown = false;
}
}
}
else {
var inp_1 = this.iterationSearch.nativeElement.value.trim();
this.filteredIterations = this.iterationsValue.filter(function (item) {
return item.value.toLowerCase().indexOf(inp_1.toLowerCase()) > -1;
});
if (this.filteredIterations.length == 0) {
this.selectedParentIteration = null;
}
}
};
FabPlannerIterationModalComponent.prototype.actionOnSubmit = function () {
this.iteration.name = this.iteration.name.trim();
if (this.iteration.name !== '') {
if (this.iteration.name.indexOf('/') === -1 &&
this.iteration.name.indexOf('\\') === -1) {
this.validationError = false;
if (this.modalType == 'create' || this.modalType == 'createChild') {
this.store.dispatch(new IterationActions.Add({
iteration: this.iteration,
parent: this.selectedParentIteration
}));
}
else {
if (this.modalType == 'start') {
this.iteration.state = 'start';
}
else if (this.modalType == 'close') {
this.iteration.state = 'close';
this.iteration.userActive = false;
}
else {
// Not include state if it's just an update
delete this.iteration.state;
}
this.store.dispatch(new IterationActions.Update(this.iteration));
}
}
else {
this.validationError = true;
this.validationString = '/ or \\ are not allowed in iteration name.';
}
}
else {
this.validationError = true;
this.validationString = 'This field is required.';
}
};
FabPlannerIterationModalComponent.prototype.removeError = function () {
this.validationError = false;
};
FabPlannerIterationModalComponent.prototype.onChecked = function (event) {
this.iteration.userActive = event;
};
FabPlannerIterationModalComponent.decorators = [
{ type: Component, args: [{
selector: 'fab-planner-iteration-modal',
template: require('./iterations-modal.component.html'),
styles: [require('./iterations-modal.component.css').toString()]
},] },
];
/** @nocollapse */
FabPlannerIterationModalComponent.ctorParameters = function () { return [
{ type: Broadcaster, },
{ type: Store, },
{ type: IterationQuery, },
]; };
FabPlannerIterationModalComponent.propDecorators = {
'onSubmit': [{ type: Output },],
'createUpdateIterationDialog': [{ type: ViewChild, args: ['createUpdateIterationDialog',] },],
'iterationSearch': [{ type: ViewChild, args: ['iterationSearch',] },],
'iterationList': [{ type: ViewChild, args: ['iterationList',] },],
'startmydp': [{ type: ViewChild, args: ['startmydp',] },],
'endmydp': [{ type: ViewChild, args: ['endmydp',] },],
};
return FabPlannerIterationModalComponent;
}());
export { FabPlannerIterationModalComponent };
//# sourceMappingURL=iterations-modal.component.js.map