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

350 lines
28 KiB
Plaintext

@using EnVisage.Code
@model EnVisage.Models.SupplyDemandReportFilterResponseModel
@{
ViewBag.Title = "Supply and Demand Report";
}
@section stylesheets
{
@Styles.Render(String.Format("{0}/{1}", Constants.C_BUNDLE_STYLES_BASE_PATH, "prevu-acstyles"))
}
@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-supplydemandreport"))
<script>
init.push(function () {
saveLastPageVisited(window.location.pathname);
});
</script>
}
@section pagemenu
{
<ul class="nav navbar-nav navbar-right" style="display: none;">
<li class="dropdown">
<a href="javascript:void(0);" 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 calendar-options-menu" id="visibilitydropdown_calendar"></ul>
</li>
</ul>
<div id="menuCalendarOptionsPrint" style="display:none;">
<ul>
<!--<li><a onclick="_printDoc();$(this).parent().parent().parent().removeClass('open');"><i class="dropdown-icon fa fa-print"></i> Print Page</a></li>-->
<li><a href="@Url.Action("ExportToPDF")" onclick="$(this).parent().parent().parent().removeClass('open');"><i class="dropdown-icon fa fa-file-text-o"></i> Save Page as PDF</a></li>
<li class="divider"></li>
</ul>
</div>
}
@{
var model = new
{
DisplayMode = new
{
MenuId = "visibilitydropdown_calendar",
DataSection = "reportView",
PageKey = "/SupplyDemandReport",
BackUrlTitle = "calendar"
}
};
var json = Newtonsoft.Json.JsonConvert.SerializeObject(model);
}
<div id="srqBody">
<div id="erorMsgPlaceholder"></div>
<div ng-controller="supplyDemandReportController" ng-init="init(@json)">
<div ng-show="::false" ng-cloak>
<ul menu-id="DisplayMode.MenuId" change-page-option-value="onPageOptionChange" ng-widget-options-menu data-section="reportView">
<li class="padding-xs-hr" ng-show="!DisplayMode.CapacityMode.Hide" style="padding-bottom:3px;">
<span class="switcherLbl">Resource Totals as</span>
<select ng-select2 ng-model="DisplayMode.CapacityMode.Value" data-key="showOption" minimumResultsForSearch="-1" width="180px"
ng-change="changeCapacityMode()" ng-disabled="DisplayMode.CapacityMode.Disabled">
<option value="1">Allocated/Capacity</option>
<option value="2">Need/Capacity</option>
<option value="3">Allocated/Need</option>
<option value="4">Remaining/Capacity</option>
</select>
</li>
<li class="padding-xs-hr" ng-show="!DisplayMode.GroupBy.Hide" style="padding-bottom:3px;">
<span class="switcherLbl">Group by</span>
<select ng-select2 ng-model="DisplayMode.GroupBy.Value" data-key="groupBy" minimumResultsForSearch="-1" width="180px"
ng-change="changeGroupBy()" ng-disabled="DisplayMode.GroupBy.Disabled">
<option ng-repeat="item in DisplayMode.GroupByItems track by $index" value="{{item.value}}">{{item.text}}</option>
</select>
</li>
<li class="padding-xs-hr">
<span class="switcherLbl">Mode</span>
<input type="checkbox" ng-switcher ng-model="DisplayMode.IsUOMHours" data-key="uomMode" class="switcher px"
ng-sw-on_state_content="# Hours" ng-sw-off_state_content="# Resources" ng-sw-width="93px" />
</li>
<li class="padding-xs-hr">
<span class="switcherLbl">Projects Displayed as</span>
<input type="checkbox" ng-switcher ng-model="DisplayMode.IsBarMode" data-key="capBarMode" class="switcher px"
ng-sw-on_state_content="Colors" ng-sw-off_state_content="Values" ng-sw-width="73px" />
</li>
<li class="padding-xs-hr">
<span class="switcherLbl">Default View</span>
<input type="checkbox" ng-switcher ng-model="DisplayMode.IsViewModeMonth" data-key="defaultView" class="switcher px"
ng-sw-on_state_content="Month" ng-sw-off_state_content="Week" ng-sw-width="93px" />
</li>
<li class="padding-xs-hr" ng-show="!DisplayMode.IsCapacityModeActuals.Hide">
<span class="switcherLbl">Use Capacity</span>
<input type="checkbox" ng-switcher ng-model="DisplayMode.IsCapacityModeActuals.Value" data-key="capacityView" class="switcher px"
ng-sw-on_state_content="Actual" ng-sw-off_state_content="Planned" ng-sw-width="93px" ng-disabled="DisplayMode.IsCapacityModeActuals.Disabled" />
</li>
<li class="padding-xs-hr" ng-show="!DisplayMode.ShowParts.Hide">
<span class="switcherLbl">Parts</span>
<input type="checkbox" ng-switcher ng-model="DisplayMode.ShowParts.Value" data-key="showParts" class="switcher px"
ng-sw-on_state_content="Show" ng-sw-off_state_content="Hide" ng-sw-width="93px" ng-disabled="DisplayMode.ShowParts.Disabled" />
</li>
<li class="divider"></li>
<li class="padding-xs-hr" style="padding-bottom:3px;">
<span class="switcherLbl" style="padding-top:6px;">Sort By </span>
<select ng-select2 ng-model="DisplayMode.SortBy" data-key="sortBy" minimumResultsForSearch="-1" dropdownAutoWidth="false" width="104px">
<option ng-repeat="item in SortByItems track by item.value" value="{{item.value}}">{{item.text}}</option>
</select>
</li>
<li class="padding-xs-hr">
<span class="switcherLbl">Sort Order</span>
<input type="checkbox" ng-switcher ng-model="DisplayMode.SortOrder" data-key="sortOrder" class="switcher px"
ng-sw-on_state_content="Asc" ng-sw-off_state_content="Desc" />
</li>
<li class="padding-xs-hr" ng-show="!DisplayMode.ShowUpper.Hide">
<span class="switcherLbl">Show Projects</span>
<input type="checkbox" ng-switcher ng-model="DisplayMode.ShowUpper.Value" data-key="showChart" class="switcher px"
ng-disabled="DisplayMode.ShowUpper.Disabled" ng-change="switchUpperPart()" />
</li>
<li class="padding-xs-hr" ng-show="!DisplayMode.ShowLower.Hide">
<span class="switcherLbl">Show Resources</span>
<input type="checkbox" ng-switcher ng-model="DisplayMode.ShowLower.Value" data-key="showCriteria" class="switcher px"
ng-disabled="DisplayMode.ShowLower.Disabled" ng-change="switchLowerPart()" />
</li>
</ul>
</div>
<div class="form-inline panel-body" ng-cloak>
<form class="form-horizontal" name="filterForm" id="filterForm" ng-if="Filter.ShowFilters">
<div class="visible-lg">
<div class="row">
<div class="col-lg-3">
<div class="form-group select2-primary no-margin-hr" style="width: 100%;">
<label class="control-label"><span style="color: red;">*</span> Project Status(es):</label>
<select ng-select2 ng-model="Filter.ProjectStatuses.Value" allowClear="true" data-key="filteredStatuses"
placeholder="Select option(s)" minimumResultsForSearch="5" multiple="multiple"
ng-change="SelectedFilterStatusesChanged()" ng-disabled="Filter.ProjectStatuses.Disabled"
option-class-expr="CSSClass" data-val="true" ng-data-val-required="Field value is required">
<option ng-repeat="option in FilterOptions.ProjectStatuses track by $index" value="{{option.Id}}">{{option.Name}}</option>
</select>
</div>
</div>
<div class="col-lg-4">
<div class="form-group select2-primary no-margin-hr" style="width: 100%;">
<label class="control-label">Client(s):</label>
<select ng-select2 ng-model="Filter.Clients.Value" allowClear="true" data-key="filteredClients"
placeholder="All available clients" minimumResultsForSearch="5" multiple="multiple"
ng-change="SelectedFilterClientsChanged()" ng-disabled="Filter.Clients.Disabled"
option-class-expr="CSSClass" data-val="true">
<option ng-repeat="option in FilterOptions.Clients track by $index" value="{{option.Value}}">{{option.Text}}</option>
</select>
</div>
</div>
<div class="col-lg-5">
<div class="form-group select2-primary no-margin-hr" style="width: 100%;">
<label class="control-label">Project(s):</label>
<select ng-select2 ng-model="Filter.Projects.Value" allowClear="true" data-key="filteredProjects"
placeholder="All available projects" minimumResultsForSearch="5" multiple="multiple"
ng-change="SelectedFilterProjectsChanged()" ng-disabled="Filter.Projects.Disabled"
option-class-expr="CSSClass" data-val="true">
<option ng-repeat="option in FilterOptions.Projects track by $index" value="{{option.Value}}">{{option.Text}}</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="form-group select2-primary no-margin-hr" style="width: 100%;">
<label class="control-label">Teams(s):</label>
<select ng-select2 ng-model="Filter.Teams.Value" allowClear="true" data-key="filteredTeams"
placeholder="All available teams" minimumResultsForSearch="5" multiple="multiple" ng-disabled="Filter.Teams.Disabled"
option-class-expr="CSSClass" data-val="true">
<option ng-repeat="option in FilterOptions.Teams track by $index" value="{{option.Value}}">{{option.Text}}</option>
</select>
</div>
</div>
<div class="col-lg-4">
<div class="form-group no-margin-hr">
<label class="control-label">Start<span class="enddatespan">/End</span> Date</label>
<div style="overflow: hidden;">
<div class="input-daterange input-group" ng-date-range start-date="Filter.StartDate" end-date="Filter.EndDate"
on-change-start-date="onPageOptionChange" on-change-end-date="onPageOptionChange">
<input class="form-control ng-date-range-start" data-val="true" data-val-date="The field Start Date must be a date."
data-key="capacityFilterStartDate" ng-model="Filter.StartDate" name="filterStartDate" type="text" />
<div class="input-group-addon">to</div>
<input class="form-control enddate ng-date-range-end" data-val="true" data-val-date="The field End Date must be a date."
data-val-dategreaterthanorequal="End Date should not be less than Start Date" data-val-dategreaterthanorequal-otherpropertyname="filterStartDate"
data-key="capacityFilterEndDate" ng-model="Filter.EndDate" name="filterEndDate" type="text">
</div>
<span class="field-validation-valid" data-valmsg-for="filterStartDate" data-valmsg-replace="true"></span>
<span class="field-validation-valid" data-valmsg-for="filterEndDate" data-valmsg-replace="true"></span>
</div>
</div>
</div>
<div class="col-lg-2">
<div class="form-group no-margin-hr">
<label class="control-label">&nbsp;</label><br />
<button class="btn btn-default" ng-disabled="!FilterIsValid" ng-click="rebuildCalendar(true)"><i class="fa fa-refresh"></i> Reload</button>
</div>
</div>
</div>
</div>
<div class="visible-md visible-sm">
<div class="row">
<div class="col-sm-6 col-md-6">
<div class="form-group select2-primary no-margin-hr" style="width: 100%;">
<label class="control-label"><span style="color: red;">*</span> Project Status(es):</label>
<select ng-select2 ng-model="Filter.ProjectStatuses.Value" allowClear="true" data-key="filteredStatuses"
placeholder="Select option(s)" minimumResultsForSearch="5" multiple="multiple"
ng-change="SelectedFilterStatusesChanged()" ng-disabled="Filter.ProjectStatuses.Disabled"
option-class-expr="CSSClass" data-val="true" ng-data-val-required="Field value is required">
<option ng-repeat="option in FilterOptions.ProjectStatuses track by $index" value="{{option.Id}}">{{option.Name}}</option>
</select>
</div>
</div>
<div class="col-sm-6 col-md-6">
<div class="form-group select2-primary no-margin-hr" style="width: 100%;">
<label class="control-label">Client(s):</label>
<select ng-select2 ng-model="Filter.Clients.Value" allowClear="true" data-key="filteredClients"
placeholder="All available clients" minimumResultsForSearch="5" multiple="multiple"
ng-change="SelectedFilterClientsChanged()" ng-disabled="Filter.Clients.Disabled"
option-class-expr="CSSClass" data-val="true">
<option ng-repeat="option in FilterOptions.Clients track by $index" value="{{option.Value}}">{{option.Text}}</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-7 col-md-7">
<div class="form-group select2-primary no-margin-hr" style="width: 100%;">
<label class="control-label">Project(s):</label>
<select ng-select2 ng-model="Filter.Projects.Value" allowClear="true" data-key="filteredProjects"
placeholder="All available projects" minimumResultsForSearch="5" multiple="multiple"
ng-change="SelectedFilterProjectsChanged()" ng-disabled="Filter.Projects.Disabled"
option-class-expr="CSSClass" data-val="true">
<option ng-repeat="option in FilterOptions.Projects track by $index" value="{{option.Value}}">{{option.Text}}</option>
</select>
</div>
</div>
<div class="col-sm-5 col-md-5">
<div class="form-group select2-primary no-margin-hr" style="width: 100%;">
<label class="control-label">Teams(s):</label>
<select ng-select2 ng-model="Filter.Teams.Value" allowClear="true" data-key="filteredTeams"
placeholder="All available teams" minimumResultsForSearch="5" multiple="multiple" ng-disabled="Filter.Teams.Disabled"
option-class-expr="CSSClass" data-val="true">
<option ng-repeat="option in FilterOptions.Teams track by $index" value="{{option.Value}}">{{option.Text}}</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="form-group no-margin-hr">
<label class="control-label">Start<span class="enddatespan">/End</span> Date</label>
<div style="overflow: hidden;">
<div class="input-daterange input-group" ng-date-range start-date="Filter.StartDate" end-date="Filter.EndDate"
on-change-start-date="onPageOptionChange" on-change-end-date="onPageOptionChange">
<input class="form-control ng-date-range-start" data-val="true" data-val-date="The field Start Date must be a date."
data-key="capacityFilterStartDate" ng-model="Filter.StartDate" name="filterStartDate" type="text" />
<div class="input-group-addon">to</div>
<input class="form-control enddate ng-date-range-end" data-val="true" data-val-date="The field End Date must be a date."
data-val-dategreaterthanorequal="End Date should not be less than Start Date" data-val-dategreaterthanorequal-otherpropertyname="filterStartDate"
data-key="capacityFilterEndDate" ng-model="Filter.EndDate" name="filterEndDate" type="text">
</div>
<span class="field-validation-valid" data-valmsg-for="filterStartDate" data-valmsg-replace="true"></span>
<span class="field-validation-valid" data-valmsg-for="filterEndDate" data-valmsg-replace="true"></span>
</div>
</div>
</div>
<div class="col-sm-3 col-md-2">
<div class="form-group no-margin-hr">
<label class="control-label">&nbsp;</label><br />
<button class="btn btn-default" ng-disabled="!FilterIsValid" ng-click="rebuildCalendar(true)"><i class="fa fa-refresh"></i> Reload</button>
</div>
</div>
</div>
</div>
<div class="visible-xs">
<div class="row">
<div class="col-xs-12">
<div class="form-group select2-primary no-margin-hr" style="width: 100%;">
<label class="control-label"><span style="color: red;">*</span> Project Status(es):</label>
<select ng-select2 ng-model="Filter.ProjectStatuses.Value" allowClear="true" data-key="filteredStatuses"
placeholder="Select option(s)" minimumResultsForSearch="5" multiple="multiple"
ng-change="SelectedFilterStatusesChanged()" ng-disabled="Filter.ProjectStatuses.Disabled"
option-class-expr="CSSClass" data-val="true" ng-data-val-required="Field value is required">
<option ng-repeat="option in FilterOptions.ProjectStatuses track by $index" value="{{option.Id}}">{{option.Name}}</option>
</select>
</div>
</div>
<div class="col-xs-12">
<div class="form-group select2-primary no-margin-hr" style="width: 100%;">
<label class="control-label">Client(s):</label>
<select ng-select2 ng-model="Filter.Clients.Value" allowClear="true" data-key="filteredClients"
placeholder="All available clients" minimumResultsForSearch="5" multiple="multiple"
ng-change="SelectedFilterClientsChanged()" ng-disabled="Filter.Clients.Disabled"
option-class-expr="CSSClass" data-val="true">
<option ng-repeat="option in FilterOptions.Clients track by $index" value="{{option.Value}}">{{option.Text}}</option>
</select>
</div>
</div>
<div class="col-xs-12">
<div class="form-group select2-primary no-margin-hr" style="width: 100%;">
<label class="control-label">Project(s):</label>
<select ng-select2 ng-model="Filter.Projects.Value" allowClear="true" data-key="filteredProjects"
placeholder="All available projects" minimumResultsForSearch="5" multiple="multiple"
ng-change="SelectedFilterProjectsChanged()" ng-disabled="Filter.Projects.Disabled"
option-class-expr="CSSClass" data-val="true">
<option ng-repeat="option in FilterOptions.Projects track by $index" value="{{option.Value}}">{{option.Text}}</option>
</select>
</div>
</div>
<div class="col-xs-12">
<div class="form-group select2-primary no-margin-hr" style="width: 100%;">
<label class="control-label">Teams(s):</label>
<select ng-select2 ng-model="Filter.Teams.Value" allowClear="true" data-key="filteredTeams"
placeholder="All available teams" minimumResultsForSearch="5" multiple="multiple" ng-disabled="Filter.Teams.Disabled"
option-class-expr="CSSClass" data-val="true">
<option ng-repeat="option in FilterOptions.Teams track by $index" value="{{option.Value}}">{{option.Text}}</option>
</select>
</div>
</div>
<div class="col-xs-12">
<div class="form-group no-margin-hr">
<label class="control-label">Start<span class="enddatespan">/End</span> Date</label>
<div style="overflow: hidden;">
<div class="input-daterange input-group" ng-date-range start-date="Filter.StartDate" end-date="Filter.EndDate"
on-change-start-date="onPageOptionChange" on-change-end-date="onPageOptionChange">
<input class="form-control ng-date-range-start" data-val="true" data-val-date="The field Start Date must be a date."
data-key="capacityFilterStartDate" ng-model="Filter.StartDate" name="filterStartDate" type="text" />
<div class="input-group-addon">to</div>
<input class="form-control enddate ng-date-range-end" data-val="true" data-val-date="The field End Date must be a date."
data-val-dategreaterthanorequal="End Date should not be less than Start Date" data-val-dategreaterthanorequal-otherpropertyname="filterStartDate"
data-key="capacityFilterEndDate" ng-model="Filter.EndDate" name="filterEndDate" type="text">
</div>
<span class="field-validation-valid" data-valmsg-for="filterStartDate" data-valmsg-replace="true"></span>
<span class="field-validation-valid" data-valmsg-for="filterEndDate" data-valmsg-replace="true"></span>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="form-group no-margin-hr">
<label class="control-label">&nbsp;</label><br />
<button class="btn btn-default" ng-disabled="!FilterIsValid" ng-click="rebuildCalendar(true)"><i class="fa fa-refresh"></i> Reload</button>
</div>
</div>
</div>
</div>
</form>
</div>
@* In this case controller will be initialized via broadcasted event from the parent controller *@
<div ng-include="DisplayMode.CalendarView" onload="ngIncludeLoaded()"></div>
</div>
</div>