Skip to content

Instantly share code, notes, and snippets.

@miragedeb

miragedeb/ChannelRelationships.VF

Created June 27, 2016 22:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save miragedeb/15473742e1adb38d73a658601892c834 to your computer and use it in GitHub Desktop.
Save miragedeb/15473742e1adb38d73a658601892c834 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
ChannelRelationships.VF
<apex:page showHeader="true" sidebar="true" docType="html-5.0" standardStylesheets="true" applyBodyTag="true" standardController="Opportunity" extensions="ChannelRelationshipController">
<html ng-app="ResellerDistributor" lang="en">
<head>
<title>Reseller Distributor Channel</title>
<!--<link href="{!URLFOR($Resource.Angular_Bootstrap,'Angular_Bootstrap/Bootstrap/BootsWatchThemes/sandstone/bootstrap.min.css')}" rel="stylesheet"/> -->
<link href="{!URLFOR($Resource.Angular_Bootstrap,'Angular_Bootstrap/AngularJs/css/ng-table.min.css')}" rel="stylesheet"/>
<apex:includeScript value="{!URLFOR($Resource.Angular_Bootstrap, 'Angular_Bootstrap/Jquery/external/jquery/jquery.js')}"/>
<!--<apex:includeScript value="{!URLFOR($Resource.Angular_Bootstrap, 'Angular_Bootstrap/Bootstrap/js/bootstrap.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.Angular_Bootstrap, 'Angular_Bootstrap/Bootbox/bootbox.js')}"/>-->
<apex:includeScript value="{!URLFOR($Resource.Angular_Bootstrap, 'Angular_Bootstrap/AngularJs/js/angular.min.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.Angular_Bootstrap, 'Angular_Bootstrap/AngularJs/js/angular-strap.min.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.Angular_Bootstrap, 'Angular_Bootstrap/AngularJs/js/ng-table.min.js')}"/>
<style>
.distributorHeader {
background-color: rgba(0, 128, 87, 0.72);
font-weight: bold;
font-size: 16px;
}
.resellerHeader {
background-color: rgba(255, 165, 0, 0.64);//rgba(255, 200, 0, 0.75);
font-weight: bold;
font-size: 16px;
}
.distributorName {
background-color: rgba(0, 128, 69, 0.48);
}
.resellerName {
background-color: rgba(255, 212, 0, 0.42);//rgba(255, 224, 0, 0.42);
}
.onHover {
background: #e3f3ff !important;
}
.onHoverCell {
background: rgba(1, 91, 167, 0.38) !important;//#4982AD
}
.outputLabel {
font-weight: normal;
color: black !important;
}
.tdLabel {
text-align:right;
//font-size: 91%;
font-weight: bold;
padding-left: 2px;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px;
border-bottom: 1px solid #ececec;
vertical-align: top;
}
.tdValue {
text-align:left;
padding-left: 2px;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px;
border-bottom: 1px solid #ececec;
vertical-align: top;
}
.btnSfdc {
color: #333;
margin: 0 2px;
padding: 4px 3px;
border: 1px solid #b5b5b5;
border-bottom-color: #7f7f7f;
background: #e8e8e9 url('/img/alohaSkin/btn_sprite.png') repeat-x right top;
font-weight: bold;
font-size: .9em;
border-radius: 3px;
font-family: Arial,Helvetica,sans-serif;
font-size: 89%;
}
.checkSelectAll {
margin-left: 5px;
}
.bPageBlock {
background-color: #FFF;
}
tr.headerRow th {
background: #f2f3f3;
border-width: 0 0 1px 1px;
border-color: #e0e3e5;
color: #000;
font-size: 1em !important;
font-weight: bold;
padding: 5px 2px 4px 5px;
text-align: center;
border: 1px solid #ededed;
border-bottom: 1px solid #ccc !important;
}
.listTable {
text-align:center;
width:100%;
border: 1px solid #e0e3e5;
}
</style>
<script type="text/javascript">
$j = jQuery.noConflict();
//Added by Jagan
var saveandAddprod = "{!saveandAddproducts}";
//alert(saveandAddprod);
jQuery(document).ready(function() {
if(saveandAddprod == 'true'){
$j('input[id=btnSave1]').hide();
$j('input[id=btnSave2]').hide();
}
else{
$j('input[id=btnSaveandAddProd1]').hide();
$j('input[id=btnSaveandAddProd2]').hide();
}
});
angular.module('ResellerDistributor', ['mgcrea.ngStrap', 'mgcrea.ngStrap.select', 'ngTable'])
.factory("ResellerDistributorCalls", ['$q', '$log',function($q, $log) {
// No parameters
var handleReq = function(remoteCall) {
var defer = $q.defer();
remoteCall(
function(result, event) {
if(event.status) {
defer.resolve(result);
}
else {
$log.error(event.message);
defer.reject(event.message);
}
},
{escape:false, buffer: false}
);
return defer.promise;
}
// 1 parameter
var handleReqParam1 = function(remoteCall, param1) {
var defer = $q.defer();
remoteCall(param1,
function(result, event) {
if(event.status) {
defer.resolve(result);
}
else {
$log.error(event.message);
defer.reject(event.message);
}
},
{escape:false, buffer: false}
);
return defer.promise;
}
// 2 parameters
var handleReqParam2 = function(remoteCall, param1, param2) {
var defer = $q.defer();
remoteCall(param1, param2,
function(result, event) {
if(event.status) {
defer.resolve(result);
}
else {
$log.error(event.message);
defer.reject(event.message);
}
},
{escape:false, buffer: false}
);
return defer.promise;
}
return {
getResellersAndDistributors: function(oppId, partnerIds) {
return handleReqParam2(ChannelRelationshipController.fetchResellersAndDistributors, oppId, partnerIds);
},
getOpportunityDetails: function(oppId) {
return handleReqParam1(ChannelRelationshipController.fetchOpportunityDetails, oppId);
},
getExistingChannelRelations: function(oppId) {
return handleReqParam1(ChannelRelationshipController.fetchExistingChannelRelations, oppId);
},
setChannelRelationships: function(oppId, channelRelations) {
return handleReqParam2(ChannelRelationshipController.saveChannelRelationships, oppId, channelRelations);
},
}
}])
.controller('ResellerDistributorController', ['ResellerDistributorCalls', '$scope', '$filter', '$q', '$log', '$sce', 'ngTableParams', function(ResellerDistributorCalls, $scope, $filter, $q, $log, $sce, ngTableParams) {
$scope.loadResellerDistributor=function() {
$scope.opportunityId = '{!opporunityId}';
$scope.distributorRoles = "{!$Label.Distributor_Roles}";
$scope.resellerRoles = "{!$Label.Reseller_Roles}";
$scope.CurrentOpp = {};
$scope.Resellers = [];
$scope.Distributors = [];
var allPartDist = [];
$q.all({
OPP : ResellerDistributorCalls.getOpportunityDetails($scope.opportunityId),
Part_Dist : ResellerDistributorCalls.getResellersAndDistributors($scope.opportunityId, '{!partnerDistributorIds}'),
CHANNELS : ResellerDistributorCalls.getExistingChannelRelations($scope.opportunityId),
}).then(function(resp) {
$scope.CurrentOpp = resp.OPP;
$scope.ExistingChannels = resp.CHANNELS;
allPartDist = resp.Part_Dist;
for(var i=0; i<allPartDist.length; i++) {
if($scope.resellerRoles.toLowerCase().indexOf(allPartDist[i].Role__c.toLowerCase()) != -1) {
$scope.Resellers.push(allPartDist[i]);
} else if($scope.distributorRoles.toLowerCase().indexOf(allPartDist[i].Role__c.toLowerCase()) != -1) {
$scope.Distributors.push(allPartDist[i]);
}
}
$scope.buildTable();
$scope.fetchExistingChannelRelations();
});
}
$scope.buildTable=function() {
var tabBody = $j("#tableBody");
$j("#tableBody").empty();
for(var i=0; i<$scope.Resellers.length; i++) {
if(i == 0) {
var row1 = '<tr id="row_D" class="headerRow">';
//var row2 = '<tr id="row_P" class="headerRow">';
for(var j=0; j<$scope.Distributors.length; j++) {
if(j==0) {
row1 += '<th class="zen-deemphasize" id="col_D">Resellers / Distributors</th>';
//row2 += '<th class=" zen-deemphasize" id="col_P">RESELLERS</th>';
}
row1 += '<th class="zen-deemphasize" id="col_D_'+$scope.Distributors[j].Partner__c+'"><b>'+$scope.Distributors[j].Partner__r.Name+'</b><input type="checkbox" id="check_D_'+$scope.Distributors[j].Partner__c+'" class="checkSelectAll" style="margin-left: 5px;"/></th>';
//row2 += '<td id="col_Blank_'+$scope.Distributors[j].Partner__c+'"></td>';
}
row1 += '</tr>';
//row2 += '</tr>';
tabBody.append(row1);
//tabBody.append(row2);
}
var row = '<tr id="row_P_'+$scope.Resellers[i].Partner__c+'" class="headerRow">';
row += '<th class="zen-deemphasize" id="col_P_'+$scope.Resellers[i].Partner__c+'"><b>'+$scope.Resellers[i].Partner__r.Name+'</b><input type="checkbox" id="check_P_'+$scope.Resellers[i].Partner__c+'" class="checkSelectAll" style="margin-left: 5px;"/><br/><span style="font-weight: normal;">Type: '+$scope.Resellers[i].Partner__r.Type+'<br/>Partner Tier: '+$scope.Resellers[i].Partner__r.Partner_Top_Tier__c +'</span></th>';
for(var j=0; j<$scope.Distributors.length; j++) {
row += '<td id="col_D_'+$scope.Distributors[j].Partner__c+'_P_'+$scope.Resellers[i].Partner__c+'" style="background: #fff; vertical-align: middle;"><input type="checkbox" id="check_D_'+$scope.Distributors[j].Partner__c+'_P_'+$scope.Resellers[i].Partner__c+'"/></td>';
}
row += '</tr>';
tabBody.append(row);
$j("td").hover(function(){
$scope.tdMouseOver($j(this));
}, function(){
$scope.tdMouseOut($j(this));
});
}
$j(".checkSelectAll").click(function() {
$scope.selectAll($j(this).attr('id'));
});
}
$scope.selectAll=function(gotId) {
var bool;
if($j('#'+gotId).prop('checked')) {
bool = true;
} else {
bool = false;
}
if(gotId.split('_')[1] == 'D') {
for(var i=0; i<$scope.Resellers.length; i++) {
$j('#check_D_'+gotId.split('_')[2]+'_P_'+$scope.Resellers[i].Partner__c).prop('checked', bool);
}
} else if(gotId.split('_')[1] == 'P') {
for(var i=0; i<$scope.Distributors.length; i++) {
$j('#check_D_'+$scope.Distributors[i].Partner__c+'_P_'+gotId.split('_')[2]).prop('checked', bool);
}
}
}
$scope.fetchExistingChannelRelations=function() {
for(var i=0; i<$scope.ExistingChannels.length; i++) {
$j( "#check_D_"+$scope.ExistingChannels[i].Distributor__c+"_P_"+$scope.ExistingChannels[i].Reseller__c ).prop( "checked", true );
}
}
$scope.saveChannelRelations=function() {
var channelsList = [];
$scope.buttonDisabled=true;
for(var i=0; i<$scope.Resellers.length; i++) {
for(var j=0; j<$scope.Distributors.length; j++) {
if($j("#check_D_"+$scope.Distributors[j].Partner__c+"_P_"+$scope.Resellers[i].Partner__c).is(":checked")) {
var channel = {};
channel.Opportunity__c = $scope.opportunityId;
channel.Reseller__c = $scope.Resellers[i].Partner__c;
channel.Distributor__c = $scope.Distributors[j].Partner__c;
channel.Partner_Reseller__c = $scope.Resellers[i].Id;
channel.Partner_Distributor__c = $scope.Distributors[j].Id;
channelsList.push(channel);
}
}
}
if(channelsList.length == 0) {
var r = confirm('No channels selected. Click OK to leave this page.');
if(!r) {
return;
}
}
$q.all({
SAVE_RESULT : ResellerDistributorCalls.setChannelRelationships($scope.opportunityId, channelsList),
}).then(function(resp) {
var rUrl = '/{!retUrl}';
if(rUrl.indexOf('OpportunityPartnerCreation') > -1){
var rUrl = '/apex/OpportunityProductEntry?id={!opporunityId}';
window.top.location = rUrl;
//Commented by Jagan
//window.top.location = rUrl+'&display={!$CurrentPage.Parameters.display}';
}
else
window.top.location = rUrl;
});
}
$scope.cancelChannelRelations=function() {
var rUrl = '/{!retUrl}';
if(rUrl.indexOf('OpportunityPartnerCreation') > -1)
window.top.location = rUrl+'&display={!$CurrentPage.Parameters.display}';
else
window.top.location = rUrl;
}
//To highlight the column and row onhover
$scope.tdMouseOver=function(gotElement) {
var gotId = $j(gotElement).attr('id');
if(gotId == undefined) return;
var resellerId = gotId.split('_')[4];
var distributorId = gotId.split('_')[2];
for(var i=0; i<$scope.Resellers.length; i++) {
$j('#col_D_'+distributorId+'_P_'+$scope.Resellers[i].Partner__c).addClass('onHover');
}
for(var i=0; i<$scope.Distributors.length; i++) {
$j('#col_D_'+$scope.Distributors[i].Partner__c+'_P_'+resellerId).addClass('onHover');
}
if( $j(gotElement).children("input[type='checkbox']").length > 0)
$j(gotElement).addClass('onHoverCell');
$j('#col_Blank_'+distributorId).addClass('onHover');
}
//To unhighlight the highlighted column and row when checkbox is unfocused
$scope.tdMouseOut=function(gotElement) {
var gotId = $j(gotElement).attr('id');
if(gotId == undefined) return;
var resellerId = gotId.split('_')[4];
var distributorId = gotId.split('_')[2];
for(var i=0; i<$scope.Resellers.length; i++) {
$j('#col_D_'+distributorId+'_P_'+$scope.Resellers[i].Partner__c).removeClass('onHover');
}
for(var i=0; i<$scope.Distributors.length; i++) {
$j('#col_D_'+$scope.Distributors[i].Partner__c+'_P_'+resellerId).removeClass('onHover');
}
if( $j(gotElement).children("input[type='checkbox']").length > 0)
$j(gotElement).removeClass('onHoverCell');
$j('#col_Blank_'+distributorId).removeClass('onHover');
}
}]);
</script>
</head>
<body ng-controller="ResellerDistributorController" ><!--style="font-family: Arial,Helvetica,sans-serif; font-size:130%"-->
<apex:form >
<div class="bPageTitle">
<div class="ptBody">
<div class="Content">
<img src="/img/sprites/master.png" class="pageTitleIcon" />
<h1 class="pageType">
{{CurrentOpp.Opportunity_Number__c}}
</h1>
<h2 class="pageDescription">
Channel Relationships: {{CurrentOpp.Name}}
</h2>
</div>
</div>
</div>
<br/>
<center>
<input type="button" value="Save" ng-disabled="buttonDisabled" id="btnSave1" class="btnSfdc" ng-click="saveChannelRelations()" style="cursor: pointer;"/>
<input type="button" value="Save and Add Products" id="btnSaveandAddProd1" class="btnSfdc" ng-click="saveChannelRelations()" style="cursor: pointer;"/>
<input type="button" value="Cancel" id="btnCancel1" class="btnSfdc" ng-click="cancelChannelRelations()" style="cursor: pointer;"/>
</center>
<br/>
<div ng-init="loadResellerDistributor()">
<apex:pageBlock >
<div>
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td class="tdLabel"><!--tdLabel-->
<label class="control-label">
Opportunity Number &nbsp;
</label>
</td>
<td class="tdValue">
<label class="control-label">
<span class="outputLabel">{{CurrentOpp.Opportunity_Number__c}}</span>
</label>
</td>
<td class="tdLabel">
<label class="control-label" style="padding-left:30%">
Customer &nbsp;
</label>
</td>
<td class="tdValue">
<label class="control-label">
<span><a href="/{{CurrentOpp.AccountId}}" class="outputLabel">{{CurrentOpp.Account.Name}}</a></span>
</label>
</td>
</tr>
<tr>
<td class="tdLabel">
<label class="control-label">
Opportunity Name &nbsp;
</label>
</td>
<td class="tdValue">
<label class="control-label">
<span><a href="/{{CurrentOpp.Id}}" class="outputLabel">{{CurrentOpp.Name}}</a></span>
</label>
</td>
<!-- <td class="tdLabel">
<label class="control-label" style="padding-left:30%">
Description &nbsp;
</label>
</td>-->
<td class="tdValue">
<label class="control-label">
<span class="outputLabel">{{CurrentOpp.Description}}</span>
</label>
</td>
</tr>
<tr>
<td class="tdLabel">
<label class="control-label">
Type &nbsp;
</label>
</td>
<td class="tdValue">
<label class="control-label">
<span class="outputLabel">{{CurrentOpp.Type}}</span>
</label>
</td>
<td class="tdLabel">
<label class="control-label" style="padding-left:15%">
Product Groups &nbsp;
</label>
</td>
<td class="tdValue">
<label class="control-label">
<span class="outputLabel">{{CurrentOpp.ProductGroupTest__c}}</span>
</label>
</td>
</tr>
</table>
<!--<hr style="border-color:#e5c130"/>-->
</div>
</apex:pageBlock>
<apex:pageBlock >
<center>
<table class="list listTable" id="tableChannel" cellspacing="0" cellpadding="0">
<thead id="tableHead">
</thead>
<tbody id="tableBody">
</tbody>
<tfoot id="tableFoot">
</tfoot>
</table>
</center>
<div>
<p style="color:red; font-size:110%">
"Check" to add a channel relationship<br/>
"Uncheck" to remove a channel relationship
</p>
</div>
</apex:pageBlock>
<center>
<!-- Jagan: Added style : cursor:pointer; to display a hand icon whenever user mouse over the button-->
<input type="button" value="Save" id="btnSave2" ng-disabled="buttonDisabled" class="btnSfdc" ng-click="saveChannelRelations()" style="cursor: pointer;"/>
<input type="button" value="Save and Add Products" id="btnSaveandAddProd2" class="btnSfdc" ng-click="saveChannelRelations()" style="cursor: pointer;"/>
<input type="button" value="Cancel" id="btnCancel2" class="btnSfdc" ng-click="cancelChannelRelations()" style="cursor: pointer;"/>
</center>
</div>
</apex:form>
<!--<div class="col-xs-12 panelPadding">
<div >
<div class="bPageTitle">
<div class="ptBody secondaryPalette brandSecondaryBrd">
<div class="Content" style="margin-top: 15px;">
<img src="/img/icon/bridge32.png"/>
<h3 class="pageType noSecondHeader" style="color:black; margin-left: 15px; display:inline">Channel Relationships</h3>
</div>
</div>
</div>
<hr style="border-color:#e5c130; border-top: 3px solid #e5c130; margin-bottom:0; margin-top:0"/>
<div class="panel-body" ng-init="loadResellerDistributor()" style="background-color: #f8f8f8;">
<div class="form-group">
<table width="100%">
<tr>
<td class="tdLabel">
<label class="control-label">
Opportunity Name: &nbsp;
</label>
</td>
<td class="tdValue">
<label class="control-label">
<span><a href="/{{CurrentOpp.Id}}" class="outputLabel">{{CurrentOpp.Name}}</a></span>
</label>
</td>
<td class="tdLabel">
<label class="control-label" style="padding-left:30%">
Customer: &nbsp;
</label>
</td>
<td class="tdValue">
<label class="control-label">
<span><a href="/{{CurrentOpp.AccountId}}" class="outputLabel">{{CurrentOpp.Account.Name}}</a></span>
</label>
</td>
<td class="tdLabel">
<label class="control-label" style="padding-left:15%">
Product Groups: &nbsp;
</label>
</td>
<td class="tdValue">
<label class="control-label">
<span class="outputLabel">{{CurrentOpp.ProductGroupTest__c}}</span>
</label>
</td>
</tr>
<tr>
<td class="tdLabel">
<label class="control-label">
Opportunity Number: &nbsp;
</label>
</td>
<td class="tdValue">
<label class="control-label">
<span class="outputLabel">{{CurrentOpp.Opportunity_Number__c}}</span>
</label>
</td>
<td class="tdLabel">
<label class="control-label" style="padding-left:30%">
Description: &nbsp;
</label>
</td>
<td class="tdValue">
<label class="control-label">
<span class="outputLabel">{{CurrentOpp.Description}}</span>
</label>
</td>
<td></td>
</tr>
</table>
<hr style="border-color:#e5c130"/>
</div>
<br/><br/>
<center>
<table class="table table-bordered" id="tableChannel" style="text-align:center; width:50%">
<thead id="tableHead">
</thead>
<tbody id="tableBody">
</tbody>
<tfoot id="tableFoot">
</tfoot>
</table>
</center>
<div>
<p style="color:red; font-size:110%">
"Check" to add a channel relationship<br/>
"Uncheck" to remove a channel relationship
</p>
</div>
<center>
<input type="button" value="Save" id="btnSave" class="btnSfdc" ng-click="saveChannelRelations()"/>
<input type="button" value="Cancel" id="btnCancel" class="btnSfdc" ng-click="cancelChannelRelations()"/>
</center>
</div>
</div>
</div>-->
</body>
</html>
</apex:page>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment