EnVisageOnline/Main-RMO/Source/EnVisage/Views/Calendar/Index.cshtml

375 lines
13 KiB
Plaintext

@using EnVisage.Code
@model EnVisage.Models.FiscalCalendarModel
@using EnVisage.Code.HtmlHelpers
@using Microsoft.AspNet.Identity
@{
ViewBag.Title = "Fiscal Calendar";
}
@section scripts
{
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
<script type="text/javascript">
var CommonErrorMessage = 'An error occurred while processing your request. Please, try again later.';
emulateNavUrl = "/Calendar";
init.push(function () {
$('#holidays').dataTable({
"bProcessing": true,
"bServerSide": true,
"bAutoWidth": false,
"sAjaxSource": '@Url.Action("GetHolidayItems", "Calendar")', // document.URL,
"sServerMethod": "POST",
"aoColumns": [
{ "mDataProp": "Name" },
{ "mDataProp": "DateText" },
{ "mDataProp": "WorkingDay", "mRender": function (data, type, full) { return data == true ? "Yes" : "No" } },
{ "mDataProp": "NonWorkingWeek", "mRender": function (data, type, full) { return data == true ? "Yes" : "No" } },
{ "mDataProp": "EffectiveChangeDateAsText" },
{ "mDataProp": "ValidToAsText" },
{
"mData": function (data, type, full) {
@if (SecurityManager.CheckSecurityObjectPermission(Areas.FiscalCalendar, AccessLevel.Write))
{
<text>
return ('<button onclick="showHolidayHistory(\'_rplcmnt_\')" data-toggle="popover" data-placement="left" class="btn btn-sm btn-primary popover-dark"><i class="fa fa-eye"></i> History</button> ' +
'<button onclick="showEditHolidayDialog(\'_rplcmnt_\')" data-toggle="popover" data-placement="left" class="btn btn-sm btn-primary popover-warning popover-dark"><i class="fa fa-edit"></i> Edit</button> ' +
'<button onclick="deleteHoliday(\'_rplcmnt_\')" data-toggle="popover" data-placement="left" class="btn btn-sm btn-danger popover-warning popover-dark"><i class="fa fa-trash-o"></i> Delete</button>')
.replace(/_rplcmnt_/g, data.HolidayId);
</text>
}
else
{
<text>
return "";
</text>
}
}
}],
});
@if (SecurityManager.CheckSecurityObjectPermission(Areas.FiscalCalendar, AccessLevel.Write))
{
<text>
$('#holidays_wrapper .table-caption').html('<button class="btn btn-primary" onclick="showCreateHolidayDialog()"><i class="fa fa-plus"></i> Add Holiday</button>');
</text>
}
$('#holidays_wrapper .dataTables_filter input').attr('placeholder', 'Search...');
$('#holidays_wrapper .dataTables_processing').addClass("table-caption");
$('#holidays_wrapper .dataTables_processing').html('<span class="h3"><img class="valign-middle" src="../Content/images/loadFA.gif"/></span>');
});
function deleteHoliday(holidayId) {
if (!holidayId || (holidayId.length < 1))
return;
var url = "?id=" + holidayId;
bootbox.confirm({
message: "Are you sure you want to delete the holiday?",
callback: function (result) {
if (result) {
StartEdit('Holiday', holidayId, null, null, 'erorMsgPlaceholderIndex');
blockUI();
$.ajax({
url: '@Url.Action("DeleteHoliday", "Calendar")' + url,
cache: false,
type: "post",
error: function (response) {
StopEdit();
RemoveLock('Holiday', holidayId);
unblockUI();
showErrorModal('Oops!', CommonErrorMessage);
},
success: function (response) {
StopEdit();
RemoveLock('Holiday', holidayId);
unblockUI();
window.location.reload();
}
});
}
},
className: "bootbox-sm"
});
}
function showHolidayHistory(holidayId) {
blockUI();
var url = "?id=" + holidayId;
$('#holidayHistoryReload').html("");
$.ajax({
url: '@Url.Action("ViewHolidayHistory", "Calendar")' + url,
cache: false,
dataType: "html",
success: function (data) {
$('#holidayHistoryReload').html(data);
$('#viewHolidayHistory').modal('show');
unblockUI();
}
});
}
function showEditHolidayDialog(holidayId) {
if (!holidayId || (holidayId.length < 1) || (holidayId == '@Guid.Empty')) {
showCreateHolidayDialog();
}
blockUI();
var url = "?id=" + holidayId;
$('#editHolidayReload').html("");
$('#editHolidayItem').off('hide.bs.modal').off('hidden.bs.modal').off('shown.bs.modal');
$.ajax({
url: '@Url.Action("EditHoliday", "Calendar")' + url,
cache: false,
dataType: "html",
success: function (data) {
$('#editHolidayReload').html(data);
initEditHolidayForm();
$('#editHolidayItem')
.on('hidden.bs.modal', function () {
StopEdit();
RemoveLock('Holiday', holidayId);
})
.on('hide.bs.modal', function (e) {
var result = true;
if ($(e.target).attr('id') == 'editHolidayItem') {
// check that form has been changed
if (holidayFormDataChanged) {
// ask user for confirmation of form close
if (!confirm("Form contains unsaved changes, do you want to close the form?")) {
// reset change indicator
result = false;
};
}
}
return result;
})
.modal('show');
unblockUI();
}
});
}
function showCreateHolidayDialog() {
blockUI();
$('#editHolidayReload').html("");
$('#editHolidayItem').off('hide.bs.modal').off('hidden.bs.modal').off('shown.bs.modal');
$.ajax({
url: '@Url.Action("CreateHoliday", "Calendar")',
cache: false,
dataType: "html",
success: function (data) {
$('#editHolidayReload').html(data);
initEditHolidayForm();
$('#editHolidayItem')
.on('hide.bs.modal', function (e) {
var result = true;
if ($(e.target).attr('id') == 'editHolidayItem') {
// check that form has been changed
if (holidayFormDataChanged) {
// ask user for confirmation of form close
if (!confirm("Form contains unsaved changes, do you want to close the form?")) {
// reset change indicator
result = false;
};
}
}
return result;
})
.modal('show');
unblockUI();
}
});
}
function showCalendarEditDialog() {
var emptyId = '@Guid.Empty';
var url = "";
var isNewItem = true;
var itemIdSelector = '#@Html.ClientIdFor(t => t.Id)';
var itemId = $(itemIdSelector).val();
blockUI();
if (itemId && (itemId.length > 0) && (itemId != emptyId)) {
url = "?id=" + itemId;
isNewItem = false;
}
$('#editReload').html("");
$('#editCalendarItem').off('hide.bs.modal').off('hidden.bs.modal').off('shown.bs.modal');
$.ajax({
url: '@Url.Action("EditCalendar", "Calendar")' + url,
cache: false,
dataType: "html",
success: function (data) {
$('#editReload').html(data);
initEditCalendarForm();
$('#editCalendarItem')
.on('hidden.bs.modal', function () {
if (!isNewItem) {
StopEdit();
RemoveLock('FiscalCalendarSettings', itemId);
}
})
.on('hide.bs.modal', function (e) {
var result = true;
if ($(e.target).attr('id') == 'editCalendarItem') {
// check that form has been changed
if (calendarFormDataChanged) {
// ask user for confirmation of form close
if (!confirm("Form contains unsaved changes, do you want to close the form?")) {
// reset change indicator
result = false;
};
}
}
return result;
})
.modal('show');
unblockUI();
}
});
}
function showCalendarHistory()
{
blockUI();
$('#calendarTableReload').html("");
$.ajax({
url: '@Url.Action("ViewCalendarHistory", "Calendar")',
cache: false,
dataType: "html",
success: function (data) {
$('#calendarTableReload').html(data);
$('#viewCalendarHistory').modal('show');
unblockUI();
}
});
}
</script>
}
<div class="panel form-horizontal">
<div class="panel-heading">
<span class="panel-title">Fiscal Calendar Settings</span>
</div>
<div class="panel-body">
<div id="erorMsgPlaceholderIndex"></div>
<div class="form-group">
@Html.HiddenFor(t => t.Id)
@Html.LabelFor(t => t.CalendarType, new {@class="col-sm-2 control-label"})
<div class="col-sm-4 radio">
<span class="lbl">@Model.CalendarType.ToDisplayValue()</span>
</div>
@Html.LabelFor(t => t.StartingPoint, new {@class="col-sm-2 control-label"})
<div class="col-sm-4 radio">
<span class="lbl">@(Model.StartingPoint.HasValue ? Model.StartingPoint.Value.ToShortDateString() : "")</span>
</div>
</div>
<div class="form-group">
@Html.LabelFor(t => t.WeekendingDay, new {@class="col-sm-2 control-label"})
<div class="col-sm-4 radio">
<span class="lbl">@Model.WeekendingDay.ToDisplayValue()</span>
</div>
@Html.LabelFor(t => t.YearType, new {@class="col-sm-2 control-label"})
<div class="col-sm-4 radio">
<span class="lbl">@Model.YearTypeAsText</span>
</div>
</div>
<div class="form-group">
@Html.LabelFor(t => t.EffectiveChangeDate, new {@class="col-sm-2 control-label"})
<div class="col-sm-4 radio">
<span class="lbl">@(Model.EffectiveChangeDate.HasValue ? Model.EffectiveChangeDate.Value.ToShortDateString() : "")</span>
</div>
@if (Model.ValidTo.HasValue)
{
@Html.LabelFor(t => t.ValidTo, new {@class="col-sm-2 control-label accented"})
<div class="col-sm-4 radio accented">
<span class="lbl">@(Model.ValidTo.HasValue ? Model.ValidTo.Value.ToShortDateString() : "")</span>
</div>
}
</div>
@if (SecurityManager.CheckSecurityObjectPermission(Areas.FiscalCalendar, AccessLevel.Write))
{
<div class="form-group" style="margin-bottom: 0;">
<div class="col-sm-offset-2 col-sm-10">
<button id="btnEdit" onclick="showCalendarEditDialog()" data-toggle="popover" data-placement="left" class="btn btn-warning popover-warning popover-dark"><i class="fa fa-edit"></i> Edit</button>
<button id="btnViewHistory" onclick="showCalendarHistory()" data-toggle="popover" data-placement="left" class="btn btn-primary popover-warning popover-dark"><i class="fa fa-eye"></i> View History</button>
</div>
</div>
}
</div>
</div>
<div class="table-light table-responsive">
<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="holidays">
<thead>
<tr>
<th>Name</th>
<th>Date</th>
<th>Working Day</th>
<th>Non Working Week</th>
<th>Effective Date of Change</th>
<th>Valid To</th>
<th></th>
</tr>
</thead>
</table>
</div>
<!-- Modal -->
<div id="editCalendarItem" class="modal fade" tabindex="-1" role="dialog" style="display: none;">
<div class="modal-dialog">
<div class="modal-content" id="editReload">
</div> <!-- / .modal-content -->
</div> <!-- / .modal-dialog -->
</div> <!-- /.modal -->
<div id="viewCalendarHistory" class="modal fade" tabindex="-1" role="dialog" style="display: none;">
<div class="modal-dialog" id="calendarTableDialog">
<div class="modal-content" id="calendarTableReload">
</div> <!-- / .modal-content -->
</div> <!-- / .modal-dialog -->
</div> <!-- /.modal -->
<!-- Modal -->
<div id="editHolidayItem" class="modal fade" tabindex="-1" role="dialog" style="display: none;">
<div class="modal-dialog">
<div class="modal-content" id="editHolidayReload">
</div> <!-- / .modal-content -->
</div> <!-- / .modal-dialog -->
</div> <!-- /.modal -->
<div id="viewHolidayHistory" class="modal fade" tabindex="-1" role="dialog" style="display: none;">
<div class="modal-dialog" id="holidayHistoryDialog">
<div class="modal-content" id="holidayHistoryReload">
</div> <!-- / .modal-content -->
</div> <!-- / .modal-dialog -->
</div> <!-- /.modal -->