my-test123
Version:
A planner front-end for Fabric8.
394 lines • 18.2 kB
JavaScript
import { Component, ViewChild, Output, EventEmitter } from '@angular/core';
import { cloneDeep } from 'lodash';
import * as moment from 'moment';
import { Broadcaster } from 'ngx-base';
import { Spaces } from 'ngx-fabric8-wit';
import { IterationService } from '../../services/iteration.service';
var FabPlannerIterationModalComponent = /** @class */ (function () {
function FabPlannerIterationModalComponent(iterationService, spaces, broadcaster) {
this.iterationService = iterationService;
this.spaces = spaces;
this.broadcaster = broadcaster;
this.spaceSubscription = null;
this.onSubmit = new EventEmitter();
this.validationError = false;
this.modalType = 'create';
this.submitBtnTxt = 'Create';
this.modalTitle = 'Create Iteration';
this.spaceError = 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
};
this.endDatePickerOptions = {
dateFormat: 'dd mmm yyyy',
selectionTxtFontSize: '14px',
openSelectorOnInputClick: true,
editableDateField: false,
showClearDateBtn: false,
componentDisabled: false
};
}
FabPlannerIterationModalComponent.prototype.ngOnInit = function () {
this.resetValues();
this.spaceSubscription = this.spaces.current.subscribe(function (space) {
if (space) {
console.log('[FabPlannerIterationModalComponent] New Space selected: ' + space.attributes.name);
}
else {
console.log('[FabPlannerIterationModalComponent] Space deselected.');
}
});
};
FabPlannerIterationModalComponent.prototype.resetValues = function () {
this.iteration = {
// id: '',
attributes: {
user_active: false,
name: '',
description: '',
state: 'new',
parent_path: '',
resolved_parent_path: ''
},
relationships: {
parent: {
data: {
id: "",
type: "iterations"
},
links: {
self: ""
}
},
space: {
data: {
id: '',
type: 'space'
},
links: {
self: ''
}
}
},
type: 'iterations'
};
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 = '';
};
FabPlannerIterationModalComponent.prototype.ngOnChanges = function () {
};
FabPlannerIterationModalComponent.prototype.ngOnDestroy = function () {
// prevent memory leak when component is destroyed
this.spaceSubscription.unsubscribe();
};
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.attributes.startAt) {
var startDate = moment(this.iteration.attributes.startAt);
this.startDate = { date: { year: startDate.format('YYYY'), month: startDate.format('M'), day: startDate.format('D') } };
}
if (this.iteration.attributes.endAt) {
var endDate = moment(this.iteration.attributes.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.attributes.resolved_parent_path;
if (iteration.attributes.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.attributes.resolved_parent_path + '/' + iteration.attributes.name).replace("//", "/");
this.selectedParentIteration = iteration;
this.iteration.attributes.name = '';
this.startDate = '';
this.endDate = '';
}
if (this.modalType == 'close') {
this.submitBtnTxt = 'Close';
this.modalTitle = 'Close Iteration';
}
this.createUpdateIterationDialog.open();
};
FabPlannerIterationModalComponent.prototype.actionOnOpen = function () {
var _this = this;
setTimeout(function () {
_this.itrname.nativeElement.focus();
}, 200);
};
FabPlannerIterationModalComponent.prototype.actionOnClose = function () {
this.resetValues();
};
FabPlannerIterationModalComponent.prototype.onStartDateChanged = function (event) {
// event properties are: event.date, event.jsdate, event.formatted and event.epoc
// Format 2016-11-29T23:18:14Z
this.startDate = { date: event.date };
this.iteration.attributes.startAt = moment(event.jsdate).format('YYYY-MM-DD') + 'T12:00:00Z';
var endDatePickerComponentCopy = Object.assign({}, this.endDatePickerOptions);
endDatePickerComponentCopy['disableUntil'] = event.date;
this.endDatePickerOptions = endDatePickerComponentCopy;
};
FabPlannerIterationModalComponent.prototype.onEndDateChanged = function (event) {
// event properties are: event.date, event.jsdate, event.formatted and event.epoc
this.endDate = { date: event.date };
this.iteration.attributes.endAt = moment(event.jsdate).format('YYYY-MM-DD') + 'T12:00:00Z';
var startDatePickerComponentCopy = Object.assign({}, this.startDatePickerOptions);
startDatePickerComponentCopy['disableSince'] = event.date;
this.startDatePickerOptions = startDatePickerComponentCopy;
};
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.iterationService.getIterations()
.subscribe(function (iterations) {
_this.iterations = iterations;
for (var i = 0; i < iterations.length; i++) {
_this.iterationsValue.push({
key: iterations[i].id,
value: (iterations[i].attributes.resolved_parent_path + '/' + iterations[i].attributes.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) {
if (event.keyCode == 40) {
lis[0].classList.add('selected');
// this.setParentIteration(lis[0].getAttribute('data-id'));
lis[0].scrollIntoView(false);
}
else {
lis[lis.length - 1].classList.add('selected');
// this.setParentIteration(lis[lis.length - 1].getAttribute('data-id'));
lis[lis.length - 1].scrollIntoView(false);
}
}
else {
lis[i].classList.remove('selected');
if (event.keyCode == 40) {
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 {
// 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) {
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 () {
var _this = this;
this.iteration.attributes.name = this.iteration.attributes.name.trim();
if (this.iteration.attributes.name !== '') {
if (this.iteration.attributes.name.indexOf('/') === -1 &&
this.iteration.attributes.name.indexOf('\\') === -1) {
this.validationError = false;
if (this.modalType == 'create' || this.modalType == "createChild") {
this.iterationService.createIteration(this.iteration, this.selectedParentIteration)
.subscribe(function (iteration) {
_this.onSubmit.emit(iteration);
_this.resetValues();
_this.createUpdateIterationDialog.close();
}, function (e) {
_this.validationError = true;
console.log('Some error has occured', e);
});
}
else {
if (this.modalType == 'start') {
this.iteration.attributes.state = 'start';
}
else if (this.modalType == 'close') {
this.iteration.attributes.state = 'close';
this.iteration.attributes.user_active = false;
}
else {
// Not include state if it's just an update
delete this.iteration.attributes.state;
}
this.iterationService.updateIteration(this.iteration)
.subscribe(function (iteration) {
_this.onSubmit.emit(iteration);
if (_this.modalType == 'start') {
var toastIterationName = _this.iteration.attributes.name;
if (toastIterationName.length > 15) {
toastIterationName = toastIterationName.slice(0, 15) + '...';
}
var notificationData = {
'notificationText': "<strong>" + toastIterationName + "</strong> has started.",
'notificationType': 'ok'
};
_this.broadcaster.broadcast('toastNotification', notificationData);
_this.iterationName = _this.iteration.attributes.name;
}
_this.resetValues();
_this.createUpdateIterationDialog.close();
}, function (e) {
_this.spaceError = true;
// this.resetValues();
// console.log('Some error has occured', e.toString());
});
}
}
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.attributes.user_active = 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: IterationService, },
{ type: Spaces, },
{ type: Broadcaster, },
]; };
FabPlannerIterationModalComponent.propDecorators = {
'onSubmit': [{ type: Output },],
'createUpdateIterationDialog': [{ type: ViewChild, args: ['createUpdateIterationDialog',] },],
'iterationSearch': [{ type: ViewChild, args: ['iterationSearch',] },],
'iterationList': [{ type: ViewChild, args: ['iterationList',] },],
'itrname': [{ type: ViewChild, args: ['itrname',] },],
};
return FabPlannerIterationModalComponent;
}());
export { FabPlannerIterationModalComponent };
//# sourceMappingURL=iterations-modal.component.js.map