nakedobjects.spa
Version:
Single Page Application client for a Naked Objects application.
285 lines • 11.4 kB
JavaScript
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
import * as Constants from '../constants';
import { Component, ElementRef, Input, Output, EventEmitter, ViewChild, Renderer } from '@angular/core';
import * as moment from 'moment';
import concat from 'lodash/concat';
import { BehaviorSubject } from 'rxjs';
import { safeUnsubscribe, focus } from '../helpers-components';
import * as Msg from '../user-messages';
import * as Models from '../models';
import * as Validate from '../validate';
var DatePickerOptions = (function () {
function DatePickerOptions(obj) {
this.firstWeekdaySunday = obj && obj.firstWeekdaySunday ? obj.firstWeekdaySunday : false;
this.format = obj && obj.format ? obj.format : 'YYYY-MM-DD';
}
return DatePickerOptions;
}());
export { DatePickerOptions };
var DatePickerComponent = (function () {
function DatePickerComponent(renderer) {
var _this = this;
this.renderer = renderer;
this.validInputFormats = ["DD/MM/YYYY", "DD/MM/YY", "D/M/YY", "D/M/YYYY", "D MMM YYYY", "D MMMM YYYY", Constants.fixedDateFormat];
this.open = function () {
_this.generateCalendar();
_this.opened = true;
_this.outputEvents.emit({ type: 'default', data: 'opened' });
};
this.close = function () {
_this.opened = false;
_this.outputEvents.emit({ type: 'default', data: 'closed' });
};
this.todayMsg = Msg.today;
this.clearMsg = Msg.clear;
this.opened = false;
this.options = this.options || {};
this.days = [];
this.dateModelValue = null;
this.outputEvents = new EventEmitter();
}
Object.defineProperty(DatePickerComponent.prototype, "model", {
get: function () {
return this.modelValue;
},
set: function (s) {
this.modelValue = s;
if (this.bSubject) {
this.bSubject.next(s);
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(DatePickerComponent.prototype, "dateModel", {
get: function () {
return this.dateModelValue;
},
set: function (date) {
if (date) {
this.dateModelValue = date;
this.outputEvents.emit({ type: 'dateChanged', data: this.dateModel });
}
else {
this.dateModelValue = null;
this.outputEvents.emit({ type: 'dateCleared', data: "" });
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(DatePickerComponent.prototype, "currentDate", {
get: function () {
return this.dateModelValue || moment().utc();
},
enumerable: true,
configurable: true
});
DatePickerComponent.prototype.validateDate = function (newValue) {
return Validate.validateDate(newValue, this.validInputFormats);
};
DatePickerComponent.prototype.setDateIfChanged = function (newDate) {
var _this = this;
var currentDate = this.dateModel;
if (!newDate.isSame(Models.withUndefined(currentDate))) {
this.setValue(newDate);
setTimeout(function () { return _this.model = _this.formatDate(_this.dateModel); });
}
};
DatePickerComponent.prototype.inputChanged = function (newValue) {
var dt = this.validateDate(newValue);
if (dt && dt.isValid()) {
this.setDateIfChanged(dt);
}
else {
this.setValue(null);
if (newValue) {
this.outputEvents.emit({ type: 'dateInvalid', data: newValue });
}
}
};
DatePickerComponent.prototype.ngOnInit = function () {
var _this = this;
this.options = new DatePickerOptions(this.options);
var optionFormats = this.options.format ? [this.options.format] : [];
this.validInputFormats = concat(optionFormats, this.validInputFormats);
this.outputEvents.emit({ type: 'default', data: "init" });
if (this.inputEvents) {
this.eventsSub = this.inputEvents.subscribe(function (e) {
switch (e.type) {
case 'action': {
if (e.data === 'toggle') {
_this.toggle();
}
if (e.data === 'close') {
_this.close();
}
if (e.data === 'open') {
_this.open();
}
break;
}
case 'setDate': {
var date = _this.validateDate(e.data);
if (date && date.isValid()) {
_this.selectDate(date);
}
else {
throw new Error("Invalid date: " + e.data);
}
break;
}
}
});
}
};
DatePickerComponent.prototype.generateCalendar = function () {
var currentDate = moment(this.currentDate); // clone so not mutated
var month = currentDate.month();
var year = currentDate.year();
var n = 1;
var firstWeekDay = (this.options.firstWeekdaySunday) ? currentDate.date(2).day() : currentDate.date(1).day();
if (firstWeekDay !== 1) {
n -= (firstWeekDay + 6) % 7;
}
this.days = [];
var endOfMonth = moment(currentDate).endOf('month');
for (var i = n; i <= endOfMonth.date(); i += 1) {
var date = moment.utc(i + "." + (month + 1) + "." + year, 'DD.MM.YYYY');
var today = moment().utc().isSame(date, 'day') && moment().isSame(date, 'month');
var selected = this.currentDate.isSame(date, 'day');
var day = {
day: i > 0 ? i : null,
month: i > 0 ? month : null,
year: i > 0 ? year : null,
enabled: i > 0,
today: i > 0 && today,
selected: i > 0 && selected,
momentObj: date
};
this.days.push(day);
}
};
DatePickerComponent.prototype.setValue = function (date) {
this.dateModel = date;
};
DatePickerComponent.prototype.formatDate = function (date) {
return this.dateModel ? this.dateModel.format(this.options.format) : "";
};
DatePickerComponent.prototype.selectDate = function (date, e) {
var _this = this;
if (e) {
e.preventDefault();
}
setTimeout(function () {
_this.setValue(date);
_this.model = _this.formatDate(_this.dateModel);
});
this.opened = false;
};
DatePickerComponent.prototype.writeValue = function (date) {
if (!date) {
return;
}
this.dateModelValue = date;
};
DatePickerComponent.prototype.prevMonth = function () {
var date = this.currentDate.subtract(1, 'month');
this.setValue(date);
this.model = this.formatDate(this.dateModel);
this.generateCalendar();
};
DatePickerComponent.prototype.nextMonth = function () {
var date = this.currentDate.add(1, 'month');
this.setValue(date);
this.model = this.formatDate(this.dateModel);
this.generateCalendar();
};
DatePickerComponent.prototype.prevYear = function () {
var date = this.currentDate.subtract(1, 'year');
this.setValue(date);
this.model = this.formatDate(this.dateModel);
this.generateCalendar();
};
DatePickerComponent.prototype.nextYear = function () {
var date = this.currentDate.add(1, 'year');
this.setValue(date);
this.model = this.formatDate(this.dateModel);
this.generateCalendar();
};
DatePickerComponent.prototype.today = function () {
this.selectDate(moment().utc());
};
DatePickerComponent.prototype.toggle = function () {
var change = this.opened ? this.close : this.open;
change();
};
DatePickerComponent.prototype.clear = function () {
this.selectDate(null);
this.model = "";
this.close();
};
Object.defineProperty(DatePickerComponent.prototype, "subject", {
get: function () {
var _this = this;
if (!this.bSubject) {
var initialValue = this.model;
this.bSubject = new BehaviorSubject(initialValue);
this.sub = this.bSubject.debounceTime(1000).subscribe(function (data) { return _this.inputChanged(data); });
}
return this.bSubject;
},
enumerable: true,
configurable: true
});
DatePickerComponent.prototype.ngOnDestroy = function () {
safeUnsubscribe(this.sub);
safeUnsubscribe(this.eventsSub);
};
DatePickerComponent.prototype.focus = function () {
return focus(this.renderer, this.inputField);
};
return DatePickerComponent;
}());
__decorate([
Input(),
__metadata("design:type", DatePickerOptions)
], DatePickerComponent.prototype, "options", void 0);
__decorate([
Input(),
__metadata("design:type", EventEmitter)
], DatePickerComponent.prototype, "inputEvents", void 0);
__decorate([
Output(),
__metadata("design:type", EventEmitter)
], DatePickerComponent.prototype, "outputEvents", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], DatePickerComponent.prototype, "id", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], DatePickerComponent.prototype, "description", void 0);
__decorate([
ViewChild("inp"),
__metadata("design:type", ElementRef)
], DatePickerComponent.prototype, "inputField", void 0);
DatePickerComponent = __decorate([
Component({
selector: 'nof-date-picker',
template: require('./date-picker.component.html'),
styles: [require('./date-picker.component.css')]
}),
__metadata("design:paramtypes", [Renderer])
], DatePickerComponent);
export { DatePickerComponent };
//# sourceMappingURL=date-picker.component.js.map