EnVisageOnline/Main/Source/EnVisage/Views/Skills/Index.cshtml

243 lines
9.8 KiB
Plaintext

@using EnVisage.Code
@using Prevu.Core.Main
@model EnVisage.Models.SkillsMatrixPageLoadModel
@{
ViewBag.Title = "Skills Matrix";
}
@section stylesheets
{
@Styles.Render(String.Format("{0}/{1}", Constants.C_BUNDLE_STYLES_BASE_PATH, "prevu-skillmatrixstyles"))
}
@section Scripts
{
@Scripts.Render(String.Format("{0}/{1}", Constants.C_BUNDLE_SCRIPTS_BASE_PATH, "prevu-angularservices"))
@Scripts.Render(String.Format("{0}/{1}", Constants.C_BUNDLE_SCRIPTS_BASE_PATH, "prevu-skillsmatrix"))
<script>
function initSwitchers() {
$('[name=groupMode]').switcher({
on_state_content: 'Teams',
off_state_content: 'None'
});
$('[name=groupMode]').parent().css("width", "93px");
$('[name=barGroupMode]').switcher({
on_state_content: 'Groups',
off_state_content: 'Skills'
});
$('[name=barGroupMode]').parent().css("width", "83px");
}
var _editSkillsChanged = false;
function onEditSkillsChanged() {
_editSkillsChanged = true;
}
function resetEditSkillsChanged() {
_editSkillsChanged = false;
}
function isEditSkillsChanged() {
return _editSkillsChanged;
}
function showSaveMatrixDialog() {
if (!$('#skills-header-form').valid())
return;
$('#save-matrix-modal').modal();
}
function canSaveSkillsMatrix() {
return $('#skills-header-form').valid() && $('#save-matrix-form').valid();
}
function isValidHeader() {
if ($('#skills-header-form').valid()) {
$('#skills-header-form .validation-summary-errors')
.addClass('validation-summary-valid')
.removeClass('validation-summary-errors');
return true;
}
return false;
}
function switchTeamGrouppingMode() {
var smElement = $('#skillsMatrixPlaceholder').find('.skills-matrix-div');
angular.element(smElement).scope().switchTeamGroupingMode();
}
function switchGraphGroupMode() {
var smElement = $('#skillsMatrixPlaceholder').find('.skills-matrix-div');
angular.element(smElement).scope().switchBarGraphGroupingMode();
}
function printPDF(a) {
@*if ("@Request["id"]" == "") {
alert("Please save the Skills Matrix first, only saved data will be exported to PDF");
return false;
}*@
$(a).parent().parent().parent().removeClass('open');
return true;
}
init.push(function () {
saveLastPageVisited(window.location.pathname + window.location.search);
initSwitchers();
$(document).on('skills.Changed', function (e) {
onEditSkillsChanged();
}).on('skills.open-edit-skills-modal', function (e) {
$('#edit-skills-dialog').modal('show');
}).on('skills.close-edit-skills-modal', function (e) {
$('#edit-skills-dialog').modal('hide');
}).on('hide.bs.modal', '#edit-skills-dialog', function (e) {
// skip modal hide event from datepickers
if ($(e.target).attr('id') != 'edit-skills-dialog')
return true; // close modal form
if (isEditSkillsChanged()) {
bootbox.confirm("@Resources.Messages.Skill_Edit_UnsavedChanges", function (result) {
if (result) {
if (typeof resetEditSkillsChanged === 'function') {
resetEditSkillsChanged();
}
$('#edit-skills-dialog').modal('hide');
}
});
return false; // DO NOT close modal form
}
return true;
}).on('show.bs.modal', '#edit-skills-dialog', function (e) {
resetEditSkillsChanged();
});
});
function OpenActivityCalendarWindow() {
var smElement = $('#skillsMatrixPlaceholder').find('.skills-matrix-div');
angular.element(smElement).scope().openActivityCalendar();
}
</script>
}
@section pagemenu
{
<ul class="nav navbar-nav navbar-right">
<li class="dropdown" id="divSkillsMenu">
<a href="#" class="dropdown-toggle user-menu" data-toggle="dropdown">
<i class="fa fa-bars"></i><span>Page Options</span>&nbsp;<i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-menu-right" id="skillsMenu">
<li class="padding-xs-hr"><label><span class="switcherLbl">Group Charts by</span><input type="checkbox" data-key="barGroupMode" name="barGroupMode" class="switcher px" onclick="switchGraphGroupMode()" /></label></li>
<li class="padding-xs-hr"><label><span class="switcherLbl">Group Matrix by</span><input type="checkbox" data-key="teamGroupMode" name="groupMode" class="switcher px" onclick="switchTeamGrouppingMode()" checked /></label></li>
</ul>
</li>
</ul>
}
@{
var userId = SecurityManager.GetUserPrincipal();
var userManager = DependencyResolver.Current.GetService<IUserManager>();
var pagePreferences = userManager.GetPagePreferences(Url.Action("Index", "Skills"), "skillsMatrix", userId);
var json = Newtonsoft.Json.JsonConvert.SerializeObject(new
{
prefs = pagePreferences,
model = Model
});
}
<div id="erorMsgPlaceholder"></div>
<div class="panel" data-section="skillsMatrix">
<div class="panel-body" style="border: 0;" ng-controller="skillsMatrixController" ng-init="init(@json)">
@if (SecurityManager.CheckSecurityObjectPermission(Areas.Skills, AccessLevel.Write))
{
<div class="row" ng-controller="skillsEditController" ng-init="init(@json)">
<div class="col-md-12">
<div class="form-group no-margin-hr">
<a class="btn btn-info noprint" ng-click="openEditForm()">
Skills Administration
</a>
</div>
</div>
<div>
@Html.Partial("_editSkills", json)
</div>
</div>
}
<div class="row animated">
<div class="col-lg-6 zone1row1" id="bg">
<div class="panel panel-white panel-compact" style="padding:0px!important;">
<div class='panel-heading'>
<span class='panel-title ui-expander expanded'>
<a data-target="#graph-container" ng-class="{'collapsed':Widgets.BarGraphCollapsed}" ng-click="toggleBarGraph()">
<i class="panel-title-icon fa fa-bar-chart-o"></i><span>Skills Depth</span>
</a>
</span>
</div>
<div class='panel-body table-light collapse' id="graph-container" style="padding:20px;">
<div class="graph-container form-group-margin" id="skillBarGraphContainer">
<div id="skillBarGraph">
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6" id="pc">
<div class="panel panel-white panel-compact collapsible-horizontal" style="padding:0px!important;">
<div class='panel-heading' style="min-height:42px;" id="PCheading">
<span class='panel-title ui-expander expanded'>
<a data-target="#piePanel" ng-class="{'collapsed':Widgets.PieChartCollapsed}" ng-click="togglePieChart()">
<i class="panel-title-icon fa fa-bar-chart-o"></i><span id="pci">Skills Maturity</span>
</a>
</span>
</div>
<div class="vertical-text" id="vt" style="display: none; margin-top: 20px; margin-left: 68%; width: 290px; display: block;">
<span>Pie Charts</span>
</div>
<div id="piePanel" class="colapse">
<div id="headCont" class='panel-body table-light' style="padding:0;align-content:center;display:none">
<div id="psHead" class="col-sm-4 col-md-4" style="text-align:center">
<h3>Past (2015)</h3>
</div>
<div id="prHead" class="col-sm-4 col-md-4" style="text-align:center">
<h3>Present (2016)</h3>
</div>
<div id="ftHead" class="col-sm-4 col-md-4" style="text-align:center">
<h3>Future (2017)</h3>
</div>
</div>
<div class='panel-body table-light' id="pie-container" style="padding:20px;align-content:center;">
<div id="psCont" class="col-sm-4 col-md-4">
<div class="graph-container form-group-margin" id="skillPieContainerPs">
<div id="skillPiePs"></div>
</div>
</div>
<div id="prCont" class="col-sm-4 col-md-4">
<div class="graph-container form-group-margin" id="skillPieContainerPr">
<div id="skillPiePr">
</div>
</div>
</div>
<div id="ftCont" class="col-sm-4 col-md-4">
<div class="graph-container form-group-margin" id="skillPieContainerFt">
<div id="skillPieFt"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row animated">
<div class="col-sm-12 col-lg-12 zone1row3" id="skillsMatrixPlaceholder">
<div class="panel panel-white panel-compact zone1row3control">
<div class='panel-heading'>
<span class='panel-title'><i class="panel-title-icon fa fa-bar-chart-o"></i>Skills Matrix</span>
<div class="pull-right" style="padding-right: 20px;"><a class="noShevron" href="javascript:OpenActivityCalendarWindow()" title="Open in Activity Calendar">Open Activity Calendar</a></div>
</div>
<div class='panel-body table-light'>
@Html.Partial("_skillsMatrix", json)
</div>
</div>
</div>
</div>
</div>
</div>