/*!
* UI development toolkit for HTML5 (OpenUI5)
* (c) Copyright 2009-2018 SAP SE or an SAP affiliate company.
* Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
*/
// Provides control sap.m.OnePersonCalendar.
sap.ui.define([
'sap/ui/core/Control',
'sap/m/OnePersonHeader',
'sap/m/OnePersonGrid',
'sap/m/SegmentedButtonItem',
'sap/ui/unified/DateRange',
'sap/ui/core/date/UniversalDate',
'sap/ui/core/Locale',
'sap/ui/core/LocaleData',
'sap/ui/core/format/DateFormat',
"./OnePersonCalendarRenderer"
],
function(
Control,
OnePersonHeader,
OnePersonGrid,
SegmentedButtonItem,
DateRange,
UniversalDate,
Locale,
LocaleData,
DateFormat,
OnePersonCalendarRenderer
) {
"use strict";
/**
* Constructor for a new OnePersonCalendar
.
*
* @class
* Disclaimer: this control is in beta state - incompatible API changes may be done before its official public release. Use at your own discretion.
*
* @constructor
* @private
* @since 1.58.0
* @ui5-metamodel This control/element also will be described in the UI5 (legacy) designtime metamodel
*/
var OnePersonCalendar = Control.extend("sap.m.OnePersonCalendar", /** @lends sap.m.OnePersonCalendar.prototype */ { metadata : {
library : "sap.m",
properties : {
title: { type : "string", group : "Data", defaultValue : "" },
startDate: { type : "object", group : "Data" },
startHour: { type: "int", group: "Appearance", defaultValue: 8 },
endHour: { type: "int", group: "Appearance", defaultValue: 17 },
showFullDay: { type: "boolean", group: "Appearance", defaultValue: true },
appointmentsVisualization : { type : "sap.ui.unified.CalendarAppointmentVisualization", group : "Appearance", defaultValue : sap.ui.unified.CalendarAppointmentVisualization.Standard }
},
aggregations : {
actions : {
type : "sap.ui.core.Control",
multiple: true,
singularName: "action",
forwarding: {
getter: "_getHeader",
aggregation: "actions"
}
},
appointments : {
type: "sap.ui.unified.CalendarAppointment",
multiple: true,
singularName: "appointment",
forwarding: {
getter: "_getGrid",
aggregation: "appointments"
}
},
views : {type : "sap.m.OnePersonView", multiple : true, singularName : "view"},
_header : { type : "sap.m.OnePersonHeader", multiple : false, visibility : "hidden" },
_grid : { type : "sap.m.OnePersonGrid", multiple : false, visibility : "hidden" }
}
}});
var KEYS_FOR_ALL_BUILTIN_VIEWS = [
sap.m.OnePersonCalendarView.Day,
sap.m.OnePersonCalendarView.WorkWeek,
sap.m.OnePersonCalendarView.Week];
OnePersonCalendar.prototype.init = function() {
var sOPCId = this.getId(),
oDateNow = new Date(),
oUniDate = new UniversalDate(UniversalDate.UTC(oDateNow.getFullYear(), oDateNow.getMonth(), oDateNow.getDate())),
oStartDate;
if (!this.oSelectedItem) {
this.oSelectedItem = new SegmentedButtonItem(/*("segBtnItem-" + oView.getKey()).split(' ').join(''), */{
key: sap.m.OnePersonCalendarView.Week,
text: sap.m.OnePersonCalendarView.Week
});
}
oStartDate = this._getFirstAndLastWeekDate(oUniDate);
this.setAggregation("_header", new OnePersonHeader(sOPCId + "-Header", {
pickerText: this._formatPickerText(oStartDate.firstDate, oStartDate.lastDate)
}));
var oHeader = this._getHeader();
oHeader.attachEvent("pressPrevious", this._handlePressArrow, this);
oHeader.attachEvent("pressToday", this._handlePressToday, this);
oHeader.attachEvent("pressNext", this._handlePressArrow, this);
oHeader.attachEvent("dateSelect", this._handleDateSelect, this);
this.setAggregation("_grid", new OnePersonGrid(sOPCId + "-Grid", {}));
this._getGrid().setStartDate(oStartDate.firstDate.oDate);
this._setSelectedDateToCalendar();
this._getHeader()._getViewSwitch().attachEvent("selectionChange", function (oEvent) {
this.oSelectedItem = oEvent.getParameter("item");
this._alignColumns(this.oSelectedItem);
this._setSelectedDateToCalendar();
}.bind(this));
};
OnePersonCalendar.prototype.exit = function () {
if (this.oSelectedItem) {
this.oSelectedItem.destroy();
this.oSelectedItem = null;
}
};
OnePersonCalendar.prototype.setTitle = function (sTitle) {
this._getHeader().setTitle(sTitle);
return this.setProperty("title", sTitle, true);
};
OnePersonCalendar.prototype.setStartDate = function (oDate) {
var oUniDate = new UniversalDate(UniversalDate.UTC(oDate.getFullYear(), oDate.getMonth(), oDate.getDate())),
oUniWeekDates,
oStartDate,
oEndDate,
sPickerText;
if (this.oSelectedItem.getKey() === sap.m.OnePersonCalendarView.Day) {
oStartDate = oUniDate;
} else {
oUniWeekDates = this._getFirstAndLastWeekDate(oUniDate);
oStartDate = oUniWeekDates.firstDate;
oEndDate = oUniWeekDates.lastDate;
}
this.setProperty("startDate", oDate, true);
this._getGrid().setStartDate(oStartDate.oDate); // in day view we don't want to use the first day of week
this._getHeader().setSelectedDate(oStartDate.oDate);
this._setSelectedDateToCalendar();
sPickerText = this._formatPickerText(oStartDate, oEndDate);
this._getHeader().setPickerText(sPickerText);
return this;
};
OnePersonCalendar.prototype.setStartHour = function (bValue) {
this.setProperty("startHour", bValue, true);
this._getGrid().setStartHour(bValue);
return this;
};
OnePersonCalendar.prototype.setEndHour = function (bValue) {
this.setProperty("endHour", bValue, true);
this._getGrid().setEndHour(bValue);
return this;
};
OnePersonCalendar.prototype.setShowFullDay = function (bValue) {
this.setProperty("showFullDay", bValue, true);
this._getGrid().setProperty("showFullDay", bValue);
return this;
};
OnePersonCalendar.prototype.setAppointmentsVisualization = function (oValue) {
this.setProperty("appointmentsVisualization", oValue, true);
this._getGrid().setProperty("appointmentsVisualization", oValue);
return this;
};
OnePersonCalendar.prototype.addView = function (oView) {
var oViewsButton = this._getHeader()._getViewSwitch();
if (KEYS_FOR_ALL_BUILTIN_VIEWS.indexOf(oView.getIntervalType()) > -1) {
var oItem = new SegmentedButtonItem(/*("segBtnItem-" + oView.getKey()).split(' ').join(''), */{
key: oView.getIntervalType(),
text: oView.getTitle()
});
oViewsButton.addItem(oItem);
this.oSelectedItem = oViewsButton.getItems()[0];
this._switchVisibility();
this._alignColumns(oViewsButton.getItems()[0]);
}
return this.addAggregation("views", oView);
};
OnePersonCalendar.prototype.insertView = function (oView, iPos) {
var oViewsButton = this._getHeader()._getViewSwitch();
if (KEYS_FOR_ALL_BUILTIN_VIEWS.indexOf(oView.getIntervalType()) > -1) {
var oItem = new SegmentedButtonItem(/*("segBtnItem-" + oView.getKey()).split(' ').join(''),*/ {
key: oView.getIntervalType(),
text: oView.getTitle()
});
oViewsButton.insertItem(oItem, iPos);
this.oSelectedItem = oViewsButton.getItems()[0];
this._switchVisibility();
this._alignColumns(oViewsButton.getItems()[0]);
}
return this.insertAggregation("views", oView, iPos);
};
OnePersonCalendar.prototype.removeView = function (oView) {
var oViewsButton = this._getHeader()._getViewSwitch();
oViewsButton.getItems().forEach(function (oItem) {
if (oItem.getKey() === oView.getIntervalType()) {
oViewsButton.removeItem(oItem);
this._switchVisibility();
this._alignColumns(oViewsButton.getItems()[0]);
}
}.bind(this));
return this.removeAggregation("views", oView);
};
OnePersonCalendar.prototype.removeAllViews = function () {
var oViewsButton = this._getHeader()._getViewSwitch(),
oItem = new SegmentedButtonItem(/*("segBtnItem-" + oView.getKey()).split(' ').join(''),*/ {
key: sap.m.OnePersonCalendarView.Week,
text: sap.m.OnePersonCalendarView.Week
});
oViewsButton.removeAllItems();
this.oSelectedItem = oItem;
this._switchVisibility();
this._alignColumns(oItem);
return this.removeAllAggregation("views");
};
OnePersonCalendar.prototype.destroyViews = function () {
var oViewsButton = this._getHeader()._getViewSwitch(),
oItem = new SegmentedButtonItem(/*("segBtnItem-" + oView.getKey()).split(' ').join(''),*/ {
key: sap.m.OnePersonCalendarView.Week,
text: sap.m.OnePersonCalendarView.Week
});
oViewsButton.destroyItems();
this.oSelectedItem = oItem;
this._switchVisibility();
this._alignColumns(oItem);
return this.destroyAggregation("views");
};
OnePersonCalendar.prototype._switchVisibility = function () {
var oSegmentedButton = this._getHeader()._getViewSwitch();
if (oSegmentedButton.getItems().length > 1) {
oSegmentedButton.setProperty("visible", true, true);
} else {
oSegmentedButton.setProperty("visible", false, true);
}
};
OnePersonCalendar.prototype._handlePressArrow = function (oEvent) {
if (oEvent.getId() === "pressPrevious") {
this._fireArrowsLogic(false);
} else {
this._fireArrowsLogic(true);
}
};
OnePersonCalendar.prototype._handlePressToday = function () {
var oDateNow = new Date(),
oUniDate = new UniversalDate(UniversalDate.UTC(oDateNow.getFullYear(), oDateNow.getMonth(), oDateNow.getDate())),
oUniFirstDate,
oStartDate;
if (this.oSelectedItem.getKey() === sap.m.OnePersonCalendarView.Day) {
oStartDate = oUniDate;
} else {
oUniFirstDate = this._getFirstAndLastWeekDate(oUniDate);
oStartDate = oUniFirstDate.firstDate;
}
this.setStartDate(oStartDate.oDate);
};
OnePersonCalendar.prototype._handleDateSelect = function () {
var oSelectedDate = this._getHeader().getSelectedDate(),
oSelectedUTCDate = new UniversalDate(UniversalDate.UTC(oSelectedDate.getFullYear(), oSelectedDate.getMonth(), oSelectedDate.getDate())),
oDates;
if (this.oSelectedItem.getKey() === sap.m.OnePersonCalendarView.Day) {
this.setStartDate(oSelectedUTCDate.oDate);
} else {
oDates = this._getFirstAndLastWeekDate(oSelectedUTCDate);
this.setStartDate(oDates.firstDate.oDate);
}
};
OnePersonCalendar.prototype._setSelectedDateToCalendar = function() {
var oSelectedDate = this._getHeader().getSelectedDate() || new Date(),
oSelectedUTCDate = new UniversalDate(UniversalDate.UTC(oSelectedDate.getFullYear(), oSelectedDate.getMonth(), oSelectedDate.getDate())),
aDates,
oFirstWeekDate,
oLastWeekDate,
oSelectedRange;
if (this.oSelectedItem.getKey() === sap.m.OnePersonCalendarView.Day) {
oSelectedRange = new DateRange({
startDate: oSelectedUTCDate.oDate,
endDate: oSelectedUTCDate.oDate
});
} else {
aDates = this._getFirstAndLastWeekDate(oSelectedUTCDate);
oFirstWeekDate = aDates.firstDate;
oLastWeekDate = aDates.lastDate;
oSelectedRange = new DateRange({
startDate: oFirstWeekDate.oDate,
endDate: oLastWeekDate.oDate
});
}
this._getHeader().getAggregation("_picker").removeAllSelectedDates();
this._getHeader().getAggregation("_picker").addSelectedDate(oSelectedRange);
};
OnePersonCalendar.prototype._formatPickerText = function (oFirstDate, oLastDate) {
var oResult = DateFormat.getDateInstance({style: "long"}).format(oFirstDate.oDate);
if (oLastDate) {
oResult += " - " + DateFormat.getDateInstance({style: "long"}).format(oLastDate.oDate);
}
return oResult;
};
OnePersonCalendar.prototype._fireArrowsLogic = function (bForward) {
var oStartDate = this.getStartDate() || new Date(),
iNumberToAdd,
oFirstVisibleDate;
if (bForward) {
if (this.oSelectedItem.getKey() === sap.m.OnePersonCalendarView.Day) {
iNumberToAdd = 1;
} else {
iNumberToAdd = 7;
}
} else {
if (this.oSelectedItem.getKey() !== sap.m.OnePersonCalendarView.Day) {
iNumberToAdd = -7;
} else {
iNumberToAdd = -1;
}
}
oFirstVisibleDate = new UniversalDate(UniversalDate.UTC(oStartDate.getFullYear(), oStartDate.getMonth(), oStartDate.getDate() + iNumberToAdd));
this.setStartDate(oFirstVisibleDate.oDate);
};
OnePersonCalendar.prototype._getFirstAndLastWeekDate = function(oDate) {
var oWeek = UniversalDate.getWeekByDate(oDate.getCalendarType(), oDate.getUTCFullYear(), oDate.getUTCMonth(), oDate.getUTCDate()),
oFirstWeekDateNumbers = UniversalDate.getFirstDateOfWeek(oDate.getCalendarType(), oWeek.year, oWeek.week),
oFirstWeekDate = new UniversalDate(UniversalDate.UTC(oFirstWeekDateNumbers.year, oFirstWeekDateNumbers.month, oFirstWeekDateNumbers.day)),
iCLDRFirstWeekDay = LocaleData.getInstance(sap.ui.getCore().getConfiguration().getFormatSettings().getFormatLocale()).getFirstDayOfWeek(),
oLastWeekDate,
iDaysToAdd;
while (oFirstWeekDate.getUTCDay() !== iCLDRFirstWeekDay) {
oFirstWeekDate.setUTCDate(oFirstWeekDate.getUTCDate() - 1);
}
if (this.oSelectedItem.getKey() === sap.m.OnePersonCalendarView.Day) {
iDaysToAdd = 0;
} else if (this.oSelectedItem.getKey() === sap.m.OnePersonCalendarView.WorkWeek) {
var sLocale = this._getLocale(),
oLocale = new Locale(sLocale),
oLocaleData = LocaleData.getInstance(oLocale);
if (oFirstWeekDate.getDay() === oLocaleData.getWeekendEnd()) {
oFirstWeekDate.setUTCDate(oFirstWeekDate.getUTCDate() + 1);
this._getGrid().setStartDate(oFirstWeekDate.oDate);
}
iDaysToAdd = 4;
} else if (this.oSelectedItem.getKey() === sap.m.OnePersonCalendarView.Week) {
iDaysToAdd = 6;
this._getGrid() && this._getGrid().setStartDate(oFirstWeekDate.oDate);
}
oLastWeekDate = new UniversalDate(UniversalDate.UTC(oFirstWeekDate.getUTCFullYear(), oFirstWeekDate.getUTCMonth(), oFirstWeekDate.getUTCDate() + iDaysToAdd));
return {
firstDate: oFirstWeekDate,
lastDate: oLastWeekDate
};
};
OnePersonCalendar.prototype._getLocale = function () {
return sap.ui.getCore().getConfiguration().getFormatSettings().getFormatLocale().toString();
};
OnePersonCalendar.prototype._alignColumns = function (oView) {
var oDate = this.getStartDate() || new Date(),
oUniDate = new UniversalDate(UniversalDate.UTC(oDate.getFullYear(), oDate.getMonth(), oDate.getDate())),
oStartDate;
this._setSelectedDateToCalendar();
if (oView.getKey() === sap.m.OnePersonCalendarView.Day) {
this._getGrid()._setColumns(1);
this._getHeader().setPickerText(this._formatPickerText(oUniDate));
this.getStartDate() ? this.setStartDate(this.getStartDate()) : this.setStartDate(new Date());
} else if (oView.getKey() === sap.m.OnePersonCalendarView.WorkWeek) {
var sLocale = this._getLocale(),
oLocale = new Locale(sLocale),
oLocaleData = LocaleData.getInstance(oLocale);
if (this.getStartDate() && this.getStartDate().getDay() === oLocaleData.getWeekendEnd()) {
this.getStartDate().setUTCDate(this.getStartDate().getUTCDate() + 1);
this._getGrid().setStartDate(this.getStartDate());
}
this.getStartDate() && this.setStartDate(this.getStartDate());
this._getGrid()._setColumns(5);
oStartDate = this._getFirstAndLastWeekDate(oUniDate);
this._getHeader().setPickerText(this._formatPickerText(oStartDate.firstDate, oStartDate.lastDate));
} else if (oView.getKey() === sap.m.OnePersonCalendarView.Week) {
this._getGrid()._setColumns(7);
this.getStartDate() && this.setStartDate(this.getStartDate());
oStartDate = this._getFirstAndLastWeekDate(oUniDate);
this._getHeader().setPickerText(this._formatPickerText(oStartDate.firstDate, oStartDate.lastDate));
}
};
OnePersonCalendar.prototype._getHeader = function () {
return this.getAggregation("_header");
};
OnePersonCalendar.prototype._getGrid = function () {
return this.getAggregation("_grid");
};
return OnePersonCalendar;
});