Skip to content

Instantly share code, notes, and snippets.

@402332509
Last active July 20, 2017 09:53
Show Gist options
  • Save 402332509/2cd9548d9264a9bf8c5a63bd337c66f7 to your computer and use it in GitHub Desktop.
Save 402332509/2cd9548d9264a9bf8c5a63bd337c66f7 to your computer and use it in GitHub Desktop.
Best Practice of AngularJS and SLDS
<apex:page standardController="b25efasiav1__Course_Map__c" extensions="Ctrl_Create_CourseMap">
<head>
<apex:stylesheet value="{!URLFOR($Resource.SLDS, 'assets/styles/salesforce-lightning-design-system.min.css')}" />
<style>
body {
font-size: 75%;
}
</style>
</head>
<base href="/" />
<div ng-app="app" ng-controller="ctrl" class="slds" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<div class="slds-page-header">
<div class="slds-media">
<div class="slds-media__figure">
<span class="slds-icon_container slds-icon-custom-custom55" title="Description of icon when needed">
<svg class="slds-icon" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Resource.SLDS, '/assets/icons/custom-sprite/svg/symbols.svg#custom55')}"></use>
</svg>
</span>
</div>
<div class="slds-media__body">
<h1 class="slds-page-header__title slds-truncate slds-align-middle" title="New CourseMap">New CourseMap</h1>
</div>
</div>
</div>
<div class="slds-button-group slds-align_absolute-center" role="group">
<button class="slds-button slds-button_neutral">Refresh</button>
<button class="slds-button slds-button_neutral">Edit</button>
<button class="slds-button slds-button_neutral">Save</button>
</div>
<div style="width: 800px;text-align: center;">
<div class="slds-form slds-form_horizontal">
<div class="slds-form-element">
<label class="slds-form-element__label" for="input-id-01">{!$ObjectType.b25efasiav1__Course_Map__c.fields.Name.label}</label>
<div class="slds-form-element__control">
<input type="text" id="input-id-01" class="slds-input" ng-model="courseMap.Name"/>
</div>
</div>
<div class="slds-form-element">
<label class="slds-form-element__label" for="Capacity">{!$ObjectType.b25efasiav1__Course_Map__c.fields.b25efasiav1__Capacity__c.label}</label>
<div class="slds-form-element__control">
<input id="Capacity" class="slds-input" ng-model="courseMap.b25efasiav1__Capacity__c"/>
</div>
</div>
<div class="slds-form-element">
<label class="slds-form-element__label" for="From">{!$ObjectType.b25efasiav1__Course_Map__c.fields.b25efasiav1__Available_From__c.label}</label>
<div class="slds-form-element__control">
<input type="date" id="From" class="slds-input" ng-model="courseMap.b25efasiav1__Available_From__c"/>
</div>
</div>
<div class="slds-form-element">
<label class="slds-form-element__label" for="To">{!$ObjectType.b25efasiav1__Course_Map__c.fields.b25efasiav1__Available_To__c.label}</label>
<div class="slds-form-element__control">
<input type="date" id="To" class="slds-input" ng-model="courseMap.b25efasiav1__Available_To__c"/>
</div>
</div>
<div class="slds-form-element">
<label class="slds-form-element__label" for="BU">Target BU</label>
<div class="slds-form-element__control">
<div id="BU" class="slds-picklist--draggable slds-grid">
<!-- Left Hand side block -->
<div class="slds-form-element">
<span class="slds-form-element__label" aria-label="select-1">All</span>
<div class="slds-picklist slds-picklist--multi">
<ul ng-model="allTargetBU" class="picklist slds-picklist__options slds-picklist__options--multi shown">
<div ng-repeat="bu in allTargetBU" class="app">
<li class="slds-picklist__item" aria-selected="false" tabindex="0" role="option" ng-click="setTmpBU(bu)" ng-dblclick="" >
<span class="slds-truncate">
<span>{{bu.Name}}</span>
</span>
</li>
</div>
</ul>
</div>
</div>
<!-- / Left Hand side block -->
<!-- Right / Left Arrow -->
<div class="slds-grid slds-grid--vertical">
<button class="slds-button slds-button--icon-container" ng-click="addToSelectedBU()">
<svg aria-hidden="true" class="slds-button__icon" >
<use xlink:href="{!URLFOR($Resource.SLDS, 'assets/icons/utility-sprite/svg/symbols.svg#right')}" ></use>
</svg>
<span class="slds-assistive-text" >Right arrow</span>
</button>
<button class="slds-button slds-button--icon-container">
<svg aria-hidden="true" class="slds-button__icon" ng-click="">
<use xlink:href="{!URLFOR($Resource.SLDS, 'assets/icons/utility-sprite/svg/symbols.svg#left')}" ></use>
</svg>
<span class="slds-assistive-text" >Left arrow</span>
</button>
</div>
<!-- / Right / Left Arrow -->
<!-- Right Hand side block -->
<div class="slds-form-element">
<span class="slds-form-element__label">Selected</span>
<div class="slds-picklist slds-picklist--multi" >
<ul ng-model="selectedBU" class="picklist slds-picklist__options slds-picklist__options--multi shown">
<div ng-repeat="item in selectedBU" class="app">
<li class="slds-picklist__item" aria-selected="false" tabindex="0" role="option" ng-click="" ng-dblclick="">
<span class="slds-truncate">
<span class="items" >{{item.Name}}</span>
</span>
</li>
</div>
</ul>
</div>
</div>
<!-- / Right Hand side block -->
</div>
</div>
</div>
<div class="slds-form-element">
<label class="slds-form-element__label" for="Center">Target Center</label>
<div class="slds-form-element__control">
<div id="Center" class="slds-picklist--draggable slds-grid">
<!-- Left Hand side block -->
<div class="slds-form-element">
<span class="slds-form-element__label" aria-label="select-1">All</span>
<div class="slds-picklist slds-picklist--multi">
<ul ng-model="allPicklistValues" class="picklist slds-picklist__options slds-picklist__options--multi shown">
<div ng-repeat="item in allPicklistValues" class="app">
<li class="slds-picklist__item" aria-selected="false" tabindex="0" role="option" ng-click="" ng-dblclick="" >
<!-- <span class="slds-truncate"> -->
<span>{{item}}</span>
<!-- </span> -->
</li>
</div>
</ul>
</div>
</div>
<!-- / Left Hand side block -->
<!-- Right / Left Arrow -->
<div class="slds-grid slds-grid--vertical">
<button class="slds-button slds-button--icon-container">
<svg aria-hidden="true" class="slds-button__icon" ng-click="addToSelectedPicklistValues()">
<use xlink:href="{!URLFOR($Resource.SLDS, 'assets/icons/utility-sprite/svg/symbols.svg#right')}" ></use>
</svg>
<span class="slds-assistive-text" >Right arrow</span>
</button>
<button class="slds-button slds-button--icon-container">
<svg aria-hidden="true" class="slds-button__icon" ng-click="">
<use xlink:href="{!URLFOR($Resource.SLDS, 'assets/icons/utility-sprite/svg/symbols.svg#left')}" ></use>
</svg>
<span class="slds-assistive-text" >Left arrow</span>
</button>
</div>
<!-- / Right / Left Arrow -->
<!-- Right Hand side block -->
<div class="slds-form-element">
<span class="slds-form-element__label">Selected</span>
<div class="slds-picklist slds-picklist--multi" >
<ul ng-model="selectedPicklistValues" class="picklist slds-picklist__options slds-picklist__options--multi shown">
<div ng-repeat="item in selectedPicklistValues" class="app">
<li class="slds-picklist__item" aria-selected="false" tabindex="0" role="option" ng-click="" ng-dblclick="">
<span class="slds-truncate">
<span class="items" >{{item}}</span>
</span>
</li>
</div>
</ul>
</div>
</div>
<!-- / Right Hand side block -->
</div>
</div>
</div>
<!-- <div class="slds-form-element">
<div class="slds-lookup" data-select="multi" data-scope="single" data-typeahead="true">
<label class="slds-form-element__label" for="Program">Program</label>
<div class="slds-form-element__control slds-input-has-icon slds-input-has-icon--right">
<svg aria-hidden="true" class="slds-input__icon slds-icon-text-default">
<use xlink:href="{!URLFOR($Resource.SLDS,'assets/icons/utility-sprite/svg/symbols.svg#search')}" ></use>
</svg>
<input id="Program" class="slds-input" type="text" name="programName" ng-model="programName" placeholder="Please enter minimum of 2 characters" aria-autocomplete="list" ng-required="true" role="combobox" ng-keyup="searchProgram()" />
</div>
</div>
<div class="slds-lookup__menu" role="listbox" ng-show="showProgramListSearch" >
<div class="slds-lookup__item" >
<button class="slds-button">
<svg aria-hidden="true" class="slds-icon slds-icon-text-default slds-icon--small">
<use xlink:href="{!URLFOR($Resource.SLDS,'assets/icons/utility-sprite/svg/symbols.svg#search')}"></use>
</svg>&quot;{{programName}}&quot; in Program
</button>
</div>
<ul class="slds-lookup__list" role="presentation">
<li class="slds-lookup__item" ng-repeat="program in programList">
<a role="option" ng-click="selectedProgram(programName)">
<svg aria-hidden="true" class="slds-icon slds-icon-standard-account slds-icon--small">
<use xlink:href="{!URLFOR($Resource.SLDS,'assets/icons/utility-sprite/svg/symbols.svg#user')}"></use>
</svg>{{program.Name}}
</a>
</li>
</ul>
</div>
</div> -->
<div class="slds-form-element">
<div class="slds-lookup" data-select="multi" data-scope="single" data-typeahead="true">
<label class="slds-form-element__label" for="Level">Level</label>
<div class="slds-form-element__control slds-input-has-icon slds-input-has-icon--right">
<svg aria-hidden="true" class="slds-input__icon slds-icon-text-default">
<use xlink:href="{!URLFOR($Resource.SLDS,'assets/icons/utility-sprite/svg/symbols.svg#search')}" ></use>
</svg>
<input id="Level" class="slds-input" type="text" name="contactName" ng-model="contactName" placeholder="Please enter minimum of 4 characters" aria-autocomplete="list" ng-required="true" role="combobox" ng-keyup="searchContacts()" />
</div>
</div>
<div class="slds-lookup__menu" role="listbox" ng-show="true" >
<div class="slds-lookup__item" >
<button class="slds-button">
<svg aria-hidden="true" class="slds-icon slds-icon-text-default slds-icon--small">
<use xlink:href="{!URLFOR($Resource.SLDS,'assets/icons/utility-sprite/svg/symbols.svg#search')}"></use>
</svg>&quot;{{contactName}}&quot; in Contacts
</button>
</div>
<ul class="slds-lookup__list" role="presentation">
<li class="slds-lookup__item" ng-repeat="contactName in contactList">
<a role="option" ng-click="selectedContact(contactName)">
<svg aria-hidden="true" class="slds-icon slds-icon-standard-account slds-icon--small">
<use xlink:href="{!URLFOR($Resource.SLDS,'assets/icons/utility-sprite/svg/symbols.svg#user')}"></use>
</svg>{{contactName.Name}}
</a>
</li>
</ul>
</div>
</div>
<div class="slds-form-element">
<label class="slds-form-element__label" for="Program">Program</label>
<div class="slds-combobox_container slds-has-inline-listbox">
<div class="slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open" aria-expanded="true" aria-haspopup="listbox" role="combobox">
<div class="slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right">
<input id="Program" type="text" class="slds-input slds-combobox__input" aria-autocomplete="list" aria-controls="listbox-unique-id" autocomplete="off" role="textbox" placeholder="Search Salesforce" aria-activedescendant="listbox-option-unique-id-01" ng-model="programName" ng-keyup="searchProgram()"/>
<span class="slds-icon_container slds-icon-utility-search slds-input__icon slds-input__icon_right" title="Description of icon when needed" ng-click="searchProgram()">
<svg class="slds-icon slds-icon slds-icon_x-small slds-icon-text-default" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Resource.SLDS,'/assets/icons/utility-sprite/svg/symbols.svg#search')}"></use>
</svg>
<span class="slds-assistive-text">Description of icon</span>
</span>
</div>
<div id="listbox-unique-id" role="listbox" ng-show="showProgramListSearch">
<ul class="slds-listbox slds-listbox_vertical slds-dropdown slds-dropdown_fluid" role="presentation">
<li role="presentation" class="slds-listbox__item" ng-repeat="program in programList" ng-click="selectedProgram(program)">
<span id="listbox-option-unique-id-01" class="slds-media slds-listbox__option slds-listbox__option_entity slds-listbox__option_has-meta slds-has-focus" role="option">
<span class="slds-media__figure">
<span class="slds-icon_container slds-icon-standard-account" title="Description of icon when needed">
<svg class="slds-icon slds-icon_small" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Resource.SLDS,'/assets/icons/standard-sprite/svg/symbols.svg#account')}"></use>
</svg>
<span class="slds-assistive-text">Description of icon</span>
</span>
</span>
<span class="slds-media__body">
<span class="slds-listbox__option-text slds-listbox__option-text_entity">{{program.Name}}</span>
<span class="slds-listbox__option-meta slds-listbox__option-meta_entity">{{program.Id}}</span>
</span>
</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="slds-form-element">
<label class="slds-form-element__label" for="Description">{!$ObjectType.b25efasiav1__Course_Map__c.fields.b25efasiav1__Description_Long__c.label}</label>
<div class="slds-form-element__control">
<textarea id="Description" class="slds-textarea" ng-model="courseMap.b25efasiav1__Description_Long__c"></textarea>
</div>
</div>
<div class="slds-form-element">
<div class="slds-lookup" data-select="multi" data-scope="single" data-typeahead="true">
<label class="slds-form-element__label" for="ContentMap">ContentMap</label>
<div class="slds-form-element__control slds-input-has-icon slds-input-has-icon--right">
<svg aria-hidden="true" class="slds-input__icon slds-icon-text-default">
<use xlink:href="{!URLFOR($Resource.SLDS,'assets/icons/utility-sprite/svg/symbols.svg#search')}" ></use>
</svg>
<input id="ContentMap" class="slds-input" type="text" name="contactName" ng-model="contactName" placeholder="Please enter minimum of 4 characters" aria-autocomplete="list" ng-required="true" role="combobox" ng-keyup="searchContacts()" />
</div>
</div>
<div class="slds-lookup__menu" role="listbox" ng-show="true" >
<div class="slds-lookup__item" >
<button class="slds-button">
<svg aria-hidden="true" class="slds-icon slds-icon-text-default slds-icon--small">
<use xlink:href="{!URLFOR($Resource.SLDS,'assets/icons/utility-sprite/svg/symbols.svg#search')}"></use>
</svg>&quot;{{contactName}}&quot; in Contacts
</button>
</div>
<ul class="slds-lookup__list" role="presentation">
<li class="slds-lookup__item" ng-repeat="contactName in contactList">
<a role="option" ng-click="selectedContact(contactName)">
<svg aria-hidden="true" class="slds-icon slds-icon-standard-account slds-icon--small">
<use xlink:href="{!URLFOR($Resource.SLDS,'assets/icons/utility-sprite/svg/symbols.svg#user')}"></use>
</svg>{{contactName.Name}}
</a>
</li>
</ul>
</div>
</div>
{{allTargetBU}}
{{tmpBu}}
{{selectedBU}}
</div>
</div>
<div class="slds-button-group slds-align_absolute-center" role="group">
<button class="slds-button slds-button_neutral">Refresh</button>
<button class="slds-button slds-button_neutral">Edit</button>
<button class="slds-button slds-button_neutral">Save</button>
</div>
</div>
<apex:includeScript value="{!URLFOR($Resource.angular, '')}"></apex:includeScript>
<script>
var app = angular.module('app',[])
.config(function($locationProvider) {
$locationProvider.html5Mode({
enabled: true,
rewriteLinks: false
});
})
.controller('ctrl',function($scope, $q, $filter, $location){
$scope.courseMap = {};
$scope.allTargetBU = [];
$scope.selectedBU = [];
$scope.toSelectedBU = {};
$scope.removeSelectedBU = {};
$scope.queryTargetBU = function(){
Ctrl_Create_CourseMap.queryAllTargetBU(function(result,event){
if (event.status) {
$scope.allTargetBU = result;
} else if (event.type === 'exception') {
console.log(result);
} else {
}
$scope.$apply();
});
}
$scope.queryTargetBU();
$scope.setTmpBU = function(bu){
$scope.tmpBu = bu;
}
$scope.addToSelectedBU = function(){
if(!!$scope.tmpBu){
$scope.selectedBU.push($scope.tmpBu);
$scope.allTargetBU.splice($scope.allTargetBU.indexOf($scope.tmpBu),1);
}
}
$scope.removeFromSelectedBU = function(){
}
$scope.programName = '';
//below function will make Remote Action call to Fetch program based on searched text
$scope.searchProgram = function(){
$scope.programList = [];
if ($scope.programName != undefined && $scope.programName.length > 0) {
Ctrl_Create_CourseMap.queryAllProgram($scope.programName, function(result, event) {
if (event.status) {
$scope.showProgramListSearch = true;
$scope.programList = result;
console.log($scope.programList);
} else if (event.type === 'exception') {
} else {
}
$scope.$apply();
});
} else {
$scope.showProgramListSearch = false;
}
}
// Selected Contact
$scope.selectedProgram = function(program){
$scope.showProgramListSearch = false;
$scope.programName = program.Name;
$scope.programList = [];
}
})
</script>
</apex:page>
<apex:page standardController="b25efasiav1__Course_Map__c" extensions="Ctrl_Edit_Sessions" >
<head>
<apex:stylesheet value="{!URLFOR($Resource.SLDS, 'assets/styles/salesforce-lightning-design-system.min.css')}" />
<style>
body {
font-size: 75%;
}
.outer td {
vertical-align: middle;
}
ul li, ol li {
margin-left: .5em;
padding-left: 0;
}
</style>
</head>
<base href="/" />
<div ng-app="app" ng-controller="ctrl" class="slds" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<div class="slds-spinner_container" ng-show="loadingSession">
<div role="status" class="slds-spinner slds-spinner_medium slds-spinner_brand">
<span class="slds-assistive-text">Loading</span>
<div class="slds-spinner__dot-a"></div>
<div class="slds-spinner__dot-b"></div>
</div>
</div>
<div class="slds-page-header">
<div class="slds-grid">
<div class="slds-col slds-has-flexi-truncate">
<div class="slds-media slds-no-space slds-grow">
<div class="slds-media__figure">
<span class="slds-icon_container slds-icon-standard-user">
<svg class="slds-icon" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Resource.SLDS, '/assets/icons/custom-sprite/svg/symbols.svg#custom55')}"></use>
</svg>
</span>
</div>
<div class="slds-media__body">
<h1 class="slds-page-header__title slds-m-right_small slds-align-middle slds-truncate">Edit CourseMap Session List</h1>
</div>
</div>
</div>
<div class="slds-col slds-no-flex slds-grid slds-align-top">
<button class="slds-button slds-button_stateful slds-button_destructive slds-not-selected" aria-live="assertive" ng-click="add();thawOrder();">
<span class="slds-text-not-selected">
<svg class="slds-button__icon_stateful slds-button__icon_left" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Resource.SLDS, '/assets/icons/utility-sprite/svg/symbols.svg#add')}"></use>
</svg>New</span>
</button>
<div class="slds-button-group" role="group">
<button class="slds-button slds-button_brand slds-float_right" ng-click="save()">Save</button>
<button class="slds-button slds-button_neutral slds-float_right" ng-click="back()">Back</button>
</div>
</div>
</div>
</div>
<div class="slds-notify slds-notify_alert slds-theme_alert-texture slds-theme_error" role="alert" ng-show="showErrorMessage">
<span class="slds-assistive-text">error</span>
<span class="slds-icon_container slds-icon-utility-ban slds-m-right_x-small">
<svg class="slds-icon slds-icon_x-small" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Resource.SLDS,'/assets/icons/utility-sprite/svg/symbols.svg#ban')}"></use>
</svg>
</span>
<h2>{{errorMessage}}</h2>
<button class="slds-button slds-button_icon slds-notify__close slds-button_icon-inverse" ng-click="showErrorMessage=false">
<svg class="slds-button__icon" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Resource.SLDS,'/assets/icons/utility-sprite/svg/symbols.svg#close')}"></use>
</svg>
<span class="slds-assistive-text">Close</span>
</button>
</div>
<table class="slds-table slds-table_cell-buffer" ng-form="courseMapForm">
<thead class="slds-text-title_caps">
<tr>
<th class="slds-truncate"></th>
<th class="slds-truncate">{!$ObjectType.b25efasiav1__Course_Session__c.fields.b25efasiav1__Sequence_number__c.label}</th>
<th class="slds-truncate">{!$ObjectType.b25efasiav1__Lesson__c.label}</th>
<th class="slds-truncate">{!$ObjectType.b25efasiav1__Course_Session__c.fields.Session_Type__c.label}</th>
<th class="slds-truncate">{!$ObjectType.b25efasiav1__Conductor__c.label}</th>
<th class="slds-truncate">{!$ObjectType.b25efasiav1__Attendee_Type__c.label}</th>
<th class="slds-truncate">{!$ObjectType.b25efasiav1__Course_Session__c.fields.b25efasiav1__Duration__c.label}</th>
<th class="slds-truncate">{!$ObjectType.b25efasiav1__Course_Session__c.fields.b25efasiav1__Deduct_ACH__c.label}</th>
<th class="slds-truncate">{!$ObjectType.b25efasiav1__Course_Session__c.fields.b25efasiav1__Deducted_ACH__c.label}</th>
<th class="slds-truncate">{!$ObjectType.b25efasiav1__Course_Session__c.fields.b25efasiav1__Count_In_Utility__c.label}</th>
<th class="slds-truncate">{!$ObjectType.b25efasiav1__Course_Session__c.fields.b25efasiav1__Utility_Counted__c.label}</th>
<th class="slds-truncate">Task</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="session in sessions | orderBy : order track by $index " >
<ng-form name = "sessionForm">
<td class="slds-truncate">
<button class="slds-button" ng-click="remove(session);thawOrder();">
<svg class="slds-button__icon " aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Resource.SLDS, '/assets/icons/utility-sprite/svg/symbols.svg#delete')}"></use>
</svg>
<span class="slds-assistive-text">Remove</span>
</button>
</td>
<td class="slds-truncate">
<input class="slds-input" type="number" ng-model="session.b25efasiav1__Sequence_number__c" ng-focus="freezeOrder()" ng-blur="thawOrder()" ng-disabled="session.Auto_Generated__c" />
</td>
<td class="slds-truncate">{{concatUnitLessonSequences(session)}}
<button class="slds-button slds-float_right" ng-click="showLessonsModal(session)">
<svg class="slds-button__icon " aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Resource.SLDS, '/assets/icons/utility-sprite/svg/symbols.svg#edit_form')}"></use>
</svg>
<span class="slds-assistive-text">Expand</span>
</button>
</td>
<td ng-mouseleave="session.showType=false">
<div class="slds-combobox_container slds-size_x-small">
<div class="slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right">
<input type="text" class="slds-input slds-combobox__input" aria-controls="listbox-unique-id" autocomplete="off" role="textbox" ng-click="session.showType = true;" value="{{session.Session_Type__r.Name}}" />
<span class="slds-icon_container slds-icon-utility-down slds-input__icon slds-input__icon_right">
<svg class="slds-icon slds-icon slds-icon_x-small slds-icon-text-default" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Resource.SLDS, '/assets/icons/utility-sprite/svg/symbols.svg#down')}"></use>
</svg>
</span>
</div>
<div role="listbox" ng-show="session.showType">
<ul class="slds-listbox slds-listbox_vertical slds-dropdown slds-dropdown_fluid" role="presentation">
<li role="presentation" class="slds-listbox__item" ng-repeat="type in typeList track by $index">
<span class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small slds-media_center slds-is-selected" role="option" ng-click="session.showType=false;pickSessionType(session,type)">
<span class="slds-media__figure" ng-show="type.Id==session.Session_Type__r.Id">
<svg class="slds-icon slds-icon_x-small slds-listbox__icon-selected" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Resource.SLDS, '/assets/icons/utility-sprite/svg/symbols.svg#check')}"></use>
</svg>
</span>
<span class="slds-media__body">
<span class="slds-truncate" >{{type.Name}}</span>
</span>
</span>
</li>
</ul>
</div>
</div>
</td>
<td ng-mouseleave="session.show_b25efasiav1__Type__c = false;pickConductor()">
<div class="slds-combobox_container " style="width: 8rem;">
<div class="slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right">
<input type="text" class="slds-input slds-combobox__input" aria-controls="listbox-unique-id" autocomplete="off" role="textbox" ng-click="session.show_b25efasiav1__Type__c = true;showConductorsModal(session);" name="conductors" value="{{concatConductors(session)}}" required="required" />
<span class="slds-icon_container slds-icon-utility-down slds-input__icon slds-input__icon_right">
<svg class="slds-icon slds-icon slds-icon_x-small slds-icon-text-default" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Resource.SLDS, '/assets/icons/utility-sprite/svg/symbols.svg#down')}"></use>
</svg>
</span>
</div>
<div class="slds-form-element__help" ng-show="sessionForm.conductors.$error">This field is required</div>
<div role="listbox" ng-show="session.show_b25efasiav1__Type__c">
<ul class="slds-listbox slds-listbox_vertical slds-dropdown slds-dropdown_fluid" role="presentation">
<li role="presentation" class="slds-listbox__item" ng-repeat="staffType in staffTypes track by $index">
<span class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small slds-media_center slds-is-selected" role="option">
<span class="slds-media__figure">
<input class="checkbox" type="checkbox" ng-model="staffType.picked" />
</span>
<span class="slds-media__body" ng-click="staffType.picked=!staffType.picked">
<span class="slds-truncate" >{{staffType.Name}}</span>
</span>
</span>
</li>
</ul>
</div>
</div>
</td>
<td ng-mouseleave="session.showAttendeeTypes=false;pickAttendeeType()">
<div class="slds-combobox_container " style="width: 8rem;">
<div class="slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right">
<input type="text" class="slds-input slds-combobox__input" aria-controls="listbox-unique-id" autocomplete="off" role="textbox" ng-click="session.showAttendeeTypes = true;showAttendeeModal(session);" value="{{concatAttendee(session)}}" />
<span class="slds-icon_container slds-icon-utility-down slds-input__icon slds-input__icon_right">
<svg class="slds-icon slds-icon slds-icon_x-small slds-icon-text-default" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Resource.SLDS, '/assets/icons/utility-sprite/svg/symbols.svg#down')}"></use>
</svg>
</span>
</div>
<div role="listbox" ng-show="session.showAttendeeTypes">
<ul class="slds-listbox slds-listbox_vertical slds-dropdown slds-dropdown_fluid" role="presentation">
<li role="presentation" class="slds-listbox__item" ng-repeat="attendeeType in attendeeTypes track by $index">
<span class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small slds-media_center slds-is-selected" role="option">
<span class="slds-media__figure">
<input class="checkbox" type="checkbox" ng-model="attendeeType.picked" />
</span>
<span class="slds-media__body" ng-click="attendeeType.picked=!attendeeType.picked">
<span class="slds-truncate" >{{attendeeType.label}}</span>
</span>
</span>
</li>
</ul>
</div>
</div>
</td>
<td class="slds-truncate">
<input type="number" class="slds-input" ng-model="session.b25efasiav1__Duration__c" />
</td>
<td class="slds-truncate">
<input type="checkbox" class="slds-checkbox slds-align_absolute-center" ng-model="session.b25efasiav1__Deduct_ACH__c" ng-disabled="disableACHAndUtility(session)" />
</td>
<td class="slds-truncate">
<input type="number" ng-show="session.b25efasiav1__Deduct_ACH__c" class="slds-input" ng-model="session.b25efasiav1__Deducted_ACH__c" ng-disabled="disableACHAndUtility(session)"/>
</td>
<td class="slds-truncate">
<input type="checkbox" class="slds-checkbox slds-align_absolute-center" ng-model="session.b25efasiav1__Count_In_Utility__c" ng-disabled="disableACHAndUtility(session)"/>
</td>
<td class="slds-truncate">
<input type="number" ng-show="session.b25efasiav1__Count_In_Utility__c" class="slds-input" ng-model="session.b25efasiav1__Utility_Counted__c" ng-disabled="disableACHAndUtility(session)"/>
</td>
<td ng-mouseover="session.showTaskListView=true" ng-mouseleave="session.showTaskListView=false">
<div class="slds-combobox_container " style="width: 8rem;">
<div class="slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right">
{{session.courseTasks.length}}
<button class="slds-button slds-float_right" ng-click="showTaskModal(session)">
<svg class="slds-button__icon " aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Resource.SLDS, '/assets/icons/utility-sprite/svg/symbols.svg#task')}"></use>
</svg>
</button>
</div>
<div role="listbox" ng-show="session.showTaskListView&&session.courseTasks.length>0" style="width: ">
<ul class="slds-listbox slds-listbox_vertical slds-dropdown slds-dropdown_fluid" role="presentation">
<li role="presentation" class="slds-listbox__item" ng-repeat="task in session.courseTasks track by $index">
<span class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small slds-media_center slds-is-selected" role="option">
<span class="slds-media__body" >
<span class="slds-truncate" >{{task.Name}}</span>
</span>
</span>
</li>
</ul>
</div>
</div>
</td>
</ng-form>
</tr>
</tbody>
</table>
<button class="slds-button slds-button_neutral slds-float_right" ng-click="back()">Back</button>
<button class="slds-button slds-button_brand slds-float_right" ng-click="save()">Save</button>
<div ng-show="showLessons">
<section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open slds-modal_large">
<div class="slds-modal__container">
<header class="slds-modal__header">
<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" ng-click="showLessons=false">
<svg class="slds-button__icon slds-button__icon_large" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Resource.SLDS, '/assets/icons/utility-sprite/svg/symbols.svg#close')}"></use>
</svg>
<span class="slds-assistive-text">Close</span>
</button>
<h2 class="slds-text-heading_medium slds-hyphenate">Lessons</h2>
</header>
<div class="slds-modal__content slds-p-around_medium" >
<table class="slds-table slds-table_bordered slds-table_cell-buffer">
<thead class="slds-text-title_caps">
<tr>
<th class="slds-truncate"></th>
<th class="slds-truncate">{!$ObjectType.b25efasiav1__Lesson__c.fields.Unit_Sequence_Number__c.label}</th>
<th class="slds-truncate">{!$ObjectType.b25efasiav1__Lesson__c.fields.Name.label}</th>
<th class="slds-truncate">{!$ObjectType.b25efasiav1__Content_Map__c.fields.Name.label}</th>
<th class="slds-truncate">{!$ObjectType.b25efasiav1__Lesson__c.fields.b25efasiav1__Lesson_Type_Code__c.label}</th>
<th class="slds-truncate">{!$ObjectType.b25efasiav1__Lesson__c.fields.b25efasiav1__Covered_In_Class_Key__c.label}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="lesson in lessons track by $index " class="dataCol">
<td class="slds-truncate">
<input type="checkbox" class="slds-checkbox" ng-model="lesson.picked" />
</td>
<td class="slds-truncate" ng-click="lesson.picked=!lesson.picked">{{lesson.Unit_Sequence_Number__c}}</td>
<td class="slds-truncate" ng-click="lesson.picked=!lesson.picked">{{lesson.Name}}</td>
<td class="slds-truncate" ng-click="lesson.picked=!lesson.picked">{{lesson.b25efasiav1__Content_Map__r.Name}}</td>
<td class="slds-truncate" ng-click="lesson.picked=!lesson.picked">{{lesson.b25efasiav1__Lesson_Type_Code__c}}</td>
<td class="slds-truncate" ng-click="lesson.picked=!lesson.picked">{{lesson.b25efasiav1__Covered_In_Class_Key__c}}</td>
</tr>
</tbody>
</table>
</div>
<footer class="slds-modal__footer">
<button class="slds-button slds-button--neutral" ng-click="showLessons=false">Cancel</button>
<button class="slds-button slds-button--brand" ng-click="pickLesson()">Save</button>
</footer>
</div>
</section>
<div class="slds-backdrop slds-backdrop_open"></div>
</div>
<div ng-show="showTask">
<section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open slds-modal_large">
<div class="slds-modal__container">
<header class="slds-modal__header">
<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" ng-click="showTask=false">
<svg class="slds-button__icon slds-button__icon_large" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Resource.SLDS, '/assets/icons/utility-sprite/svg/symbols.svg#close')}"></use>
</svg>
<span class="slds-assistive-text">Close</span>
</button>
<h2 class="slds-text-heading_medium slds-hyphenate">Task</h2>
</header>
<div class="slds-modal__content slds-p-around_medium" style="height: 350px;">
<table class="slds-table slds-table_bordered slds-table_cell-buffer">
<thead class="slds-text-title_caps">
<tr>
<th class="slds-truncate"></th>
<th class="slds-truncate">{!$ObjectType.b25efasiav1__Course_Task__c.fields.Name.label}</th>
<th class="slds-truncate">{!$ObjectType.b25efasiav1__Course_Task__c.fields.b25efasiav1__Task_Category_Lookup__c.label}</th>
<th class="slds-truncate">{!$ObjectType.b25efasiav1__Course_Task__c.fields.b25efasiav1__Task_Type__c.label}</th>
<th class="slds-truncate">Task Owner</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="courseTask in currentTasks track by $index " class="dataCol">
<td class="slds-truncate">
<button class="slds-button" ng-click="removeTask(courseTask)">
<svg class="slds-button__icon " aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Resource.SLDS, '/assets/icons/utility-sprite/svg/symbols.svg#delete')}"></use>
</svg>
</button>
</td>
<td class="slds-truncate">
<input class="slds-input" ng-model="courseTask.Name" />
</td>
<td ng-mouseleave="courseTask.showCategory=false">
<div class="slds-combobox_container slds-size_x-small">
<div class="slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right">
<input type="text" class="slds-input slds-combobox__input" aria-controls="listbox-unique-id" autocomplete="off" role="textbox" ng-click="courseTask.showCategory = true;" value="{{courseTask.b25efasiav1__Task_Category_Lookup__r.Name}}" />
<span class="slds-icon_container slds-icon-utility-down slds-input__icon slds-input__icon_right">
<svg class="slds-icon slds-icon slds-icon_x-small slds-icon-text-default" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Resource.SLDS, '/assets/icons/utility-sprite/svg/symbols.svg#down')}"></use>
</svg>
</span>
</div>
<div role="listbox" ng-show="courseTask.showCategory">
<ul class="slds-listbox slds-listbox_vertical slds-dropdown slds-dropdown_fluid" role="presentation">
<li role="presentation" class="slds-listbox__item" ng-repeat="taskCategory in taskCategoryList track by $index">
<span class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small slds-media_center slds-is-selected" role="option" ng-click="courseTask.showCategory=false;pickTaskCategory(courseTask,taskCategory)">
<span class="slds-media__figure" ng-show="taskCategory.Id==courseTask.b25efasiav1__Task_Category_Lookup__c">
<svg class="slds-icon slds-icon_x-small slds-listbox__icon-selected" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Resource.SLDS, '/assets/icons/utility-sprite/svg/symbols.svg#check')}"></use>
</svg>
</span>
<span class="slds-media__body">
<span class="slds-truncate" >{{taskCategory.Name}}</span>
</span>
</span>
</li>
</ul>
</div>
</div>
</td>
<td ng-mouseleave="courseTask.showType=false">
<div class="slds-combobox_container slds-size_x-small">
<div class="slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right">
<input type="text" class="slds-input slds-combobox__input" aria-controls="listbox-unique-id" autocomplete="off" role="textbox" ng-click="courseTask.showType = true;" value="{{courseTask.b25efasiav1__Task_Type__r.Name}}" />
<span class="slds-icon_container slds-icon-utility-down slds-input__icon slds-input__icon_right">
<svg class="slds-icon slds-icon slds-icon_x-small slds-icon-text-default" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Resource.SLDS, '/assets/icons/utility-sprite/svg/symbols.svg#down')}"></use>
</svg>
</span>
</div>
<div role="listbox" ng-show="courseTask.showType">
<ul class="slds-listbox slds-listbox_vertical slds-dropdown slds-dropdown_fluid" role="presentation">
<li role="presentation" class="slds-listbox__item" ng-repeat="taskType in taskTypeList|filter:courseTask.b25efasiav1__Task_Category_Lookup__c track by $index">
<span class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small slds-media_center slds-is-selected" role="option" ng-click="pickTaskType(courseTask,taskType)">
<span class="slds-media__figure" ng-show="taskType.Id==courseTask.b25efasiav1__Task_Type__c">
<svg class="slds-icon slds-icon_x-small slds-listbox__icon-selected" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Resource.SLDS, '/assets/icons/utility-sprite/svg/symbols.svg#check')}"></use>
</svg>
</span>
<span class="slds-media__body">
<span class="slds-truncate" >{{taskType.Name}}</span>
</span>
</span>
</li>
</ul>
</div>
</div>
</td>
<td ng-mouseleave="courseTask.showOwner = false;pickTaskOwner()">
<div class="slds-combobox_container slds-size_x-small">
<div class="slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right">
<input type="text" class="slds-input slds-combobox__input" aria-controls="listbox-unique-id" autocomplete="off" role="textbox" ng-click="courseTask.showOwner = true;showTaskOwner(courseTask);" value="{{concatTaskOwner(courseTask)}}" />
<span class="slds-icon_container slds-icon-utility-down slds-input__icon slds-input__icon_right">
<svg class="slds-icon slds-icon slds-icon_x-small slds-icon-text-default" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Resource.SLDS, '/assets/icons/utility-sprite/svg/symbols.svg#down')}"></use>
</svg>
</span>
</div>
<div role="listbox" ng-show="courseTask.showOwner">
<ul class="slds-listbox slds-listbox_vertical slds-dropdown slds-dropdown_fluid" role="presentation">
<li role="presentation" class="slds-listbox__item" ng-repeat="staffType in staffTypes track by $index">
<span class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small slds-media_center slds-is-selected" role="option">
<span class="slds-media__figure">
<input class="checkbox" type="checkbox" ng-model="staffType.picked" />
</span>
<span class="slds-media__body" ng-click="staffType.picked=!staffType.picked">
<span class="slds-truncate" >{{staffType.Name}}</span>
</span>
</span>
</li>
</ul>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<footer class="slds-modal__footer">
<button class="slds-button slds-button_stateful slds-button_destructive slds-not-selected" aria-live="assertive" ng-click="addTask()">
<span class="slds-text-not-selected">
<svg class="slds-button__icon_stateful slds-button__icon_left" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Resource.SLDS, '/assets/icons/utility-sprite/svg/symbols.svg#add')}"></use>
</svg>New</span>
</button>
<button class="slds-button slds-button--neutral" ng-click="showTask=false">Cancel</button>
<button class="slds-button slds-button--brand" ng-click="saveTask()">Save</button>
</footer>
</div>
</section>
<div class="slds-backdrop slds-backdrop_open"></div>
</div>
</div>
<script type="text/javascript" src="/soap/ajax/40.0/connection.js" />
<script type="text/javascript" src="/soap/ajax/40.0/apex.js" />
<apex:includeScript value="{!URLFOR($Resource.angular, '')}"></apex:includeScript>
<script>
sforce.connection.sessionId = '{!$Api.Session_ID}';
var app = angular.module('app', [])
.config(function($locationProvider) {
$locationProvider.html5Mode({
enabled: true,
rewriteLinks: false
});
})
.controller('ctrl', function($scope, $q, $filter, $location) {
var courseMapID = $location.search().Id;
$scope.sessions = [];
$scope.lessons = [];
$scope.staffTypes = [];
$scope.attendeeTypes = [];
$scope.typeList = [];
$scope.taskCategoryList = [];
$scope.taskTypeList = [];
$scope.querySessions = function() {
Ctrl_Edit_Sessions.querySessions(courseMapID, function(res, event) {
console.log(res);
$scope.sessions = res.sessionList;
$scope.typeList = res.sessionTypeList;
$scope.staffTypes = res.staffTypeList;
$scope.attendeeTypes = res.attendeeTypeList;
$scope.taskCategoryList = res.taskCategoryList;
$scope.taskTypeList = res.taskTypeList;
$scope.lessons = res.lessonList;
$scope.sessions.forEach(function(session){
session.courseTasks = [];
res.taskList.forEach(function(task){
if(task.b25efasiav1__Course_Session__c == session.Id){
session.courseTasks.push(task);
}
});
});
console.log($scope.sessions);
$scope.loadingSession = false;
$scope.$apply();
});
};
$scope.querySessions();
$scope.deleteSessions = [];
$scope.showLessons = false;
$scope.loadingSession = true;
$scope.showErrorMessage = false;
$scope.order = 'b25efasiav1__Sequence_number__c';
$scope.add = function() {
var obj = new Object();
obj.b25efasiav1__Sequence_number__c = 1;
obj.b25efasiav1__Course_Map__c = $location.search().Id;
obj.b25efasiav1__Deduct_ACH__c = true;
obj.b25efasiav1__Count_In_Utility__c = true;
obj.isNew = true;
$scope.sessions.splice(0, 0, obj);
};
$scope.remove = function(session) {
if (session.Id) {
$scope.deleteSessions.push(session);
}
$scope.sessions.splice($scope.sessions.indexOf(session), 1);
};
$scope.save = function() {
var wrapperList = [];
$scope.loadingSession = true;
$scope.sessions.forEach(function(session) {
var wrapper = {};
var courseSession = {};
courseSession.Id = session.Id;
courseSession.b25efasiav1__Course_Map__c = session.b25efasiav1__Course_Map__c;
courseSession.b25efasiav1__Count_In_Utility__c = session.b25efasiav1__Count_In_Utility__c;
courseSession.b25efasiav1__Deduct_ACH__c = session.b25efasiav1__Deduct_ACH__c;
courseSession.b25efasiav1__Deducted_ACH__c = session.b25efasiav1__Deducted_ACH__c;
courseSession.b25efasiav1__Duration__c = session.b25efasiav1__Duration__c;
courseSession.b25efasiav1__Sequence_number__c = session.b25efasiav1__Sequence_number__c;
// this line will be removed in future
courseSession.b25efasiav1__Type_Picklist__c = session.b25efasiav1__Type_Picklist__c;
courseSession.b25efasiav1__Type__c = session.b25efasiav1__Type__c;
courseSession.Session_Type__c = session.Session_Type__c;
courseSession.b25efasiav1__Utility_Counted__c = session.b25efasiav1__Utility_Counted__c;
var courseLessons = [];
var conductors = [];
var attendeeTypes = [];
var taskWrapperList = [];
if (session.b25efasiav1__Course_Lessons__r) {
session.b25efasiav1__Course_Lessons__r.forEach(function(courseLesson) {
var courseLessonCopy = {};
courseLessonCopy.b25efasiav1__Course_Session__c = courseLesson.b25efasiav1__Course_Session__c;
courseLessonCopy.b25efasiav1__Lesson__c = courseLesson.b25efasiav1__Lesson__c;
courseLessons.push(courseLessonCopy);
});
}
if (session.b25efasiav1__Conductor__r) {
session.b25efasiav1__Conductor__r.forEach(function(conductor) {
var conductorCopy = {};
conductorCopy.b25efasiav1__Course_Session__c = conductor.b25efasiav1__Course_Session__c;
conductorCopy.b25efasiav1__Staff_Type__c = conductor.b25efasiav1__Staff_Type__c;
conductors.push(conductorCopy);
});
}
if (session.b25efasiav1__Attendee_Types__r) {
session.b25efasiav1__Attendee_Types__r.forEach(function(attendeeType) {
var attendeeTypeCopy = {};
attendeeTypeCopy.b25efasiav1__Course_Session__c = attendeeType.b25efasiav1__Course_Session__c;
attendeeTypeCopy.b25efasiav1__Attendee_Type__c = attendeeType.b25efasiav1__Attendee_Type__c;
attendeeTypes.push(attendeeTypeCopy);
});
}
if(session.courseTasks){
session.courseTasks.forEach(function(task){
var taskWrapper = {};
var courseTask = {};
var taskOwners = [];
courseTask.Name = task.Name;
courseTask.b25efasiav1__Task_Category_Lookup__c = task.b25efasiav1__Task_Category_Lookup__c;
courseTask.b25efasiav1__Task_Type__c = task.b25efasiav1__Task_Type__c;
if(task.b25efasiav1__Course_Task_Owners__r){
task.b25efasiav1__Course_Task_Owners__r.forEach(function(owner){
var taskOwner = {};
taskOwner.b25efasiav1__Course_Task__c = task.Id;
taskOwner.b25efasiav1__Staff_Type__c = owner.b25efasiav1__Staff_Type__c;
taskOwners.push(taskOwner);
});
}
taskWrapper.courseTask = courseTask;
taskWrapper.taskOwnerList = taskOwners;
taskWrapperList.push(taskWrapper);
});
}
wrapper.lessonList = courseLessons;
wrapper.conductorList = conductors;
wrapper.attendeeTypeList = attendeeTypes;
wrapper.cousreSession = courseSession;
wrapper.taskList = taskWrapperList;
wrapperList.push(wrapper);
});
$scope.deleteSessions.forEach(function(session) {
delete session.b25efasiav1__Course_Map__r;
delete session.b25efasiav1__Course_Lessons__r;
delete session.b25efasiav1__Conductor__r;
delete session.b25efasiav1__Attendee_Types__r;
});
console.log(wrapperList);
console.log($scope.deleteSessions);
Ctrl_Edit_Sessions.saveAll(JSON.stringify(wrapperList), JSON.stringify($scope.deleteSessions), function(result, event) {
if (result.code == '1') {
$scope.back();
} else {
$scope.errorMessage = result.msg;
$scope.showErrorMessage = true;
$scope.loadingSession = false;
$scope.$apply();
}
})
}
$scope.freezeOrder = function() {
$scope.sessions = $filter('orderBy')($scope.sessions, 'b25efasiav1__Sequence_number__c');
for (var i = 0; i < $scope.sessions.length && i <= 9999; ++i) {
$scope.sessions[i].frozenOrder = ('0000' + (i + 1)).slice(-4);
}
$scope.order = 'frozenOrder';
};
$scope.thawOrder = function() {
$scope.sessions.sort(function(a, b) {
var keyA = a.b25efasiav1__Sequence_number__c;
var keyB = b.b25efasiav1__Sequence_number__c;
if (keyA < keyB) return -1;
if (keyA > keyB) return 1;
if (keyA == keyB) {
if (new Number(a.frozenOrder) < new Number(b.frozenOrder)) return 1;
else return -1;
}
});
$scope.sessions.forEach(function(item, index) {
item.b25efasiav1__Sequence_number__c = index + 1;
});
$scope.order = 'b25efasiav1__Sequence_number__c';
};
$scope.showLessonsModal = function(session) {
$scope.currentSession = session;
$scope.showLessons = true;
$scope.lessons.forEach(function(lesson) {
lesson.picked = false;
if (!!session.b25efasiav1__Course_Lessons__r) {
session.b25efasiav1__Course_Lessons__r.forEach(function(item) {
if (item.b25efasiav1__Lesson__c == lesson.Id) {
lesson.picked = true;
}
});
}
});
};
$scope.showConductorsModal = function(session) {
$scope.currentSession = session;
$scope.staffTypes.forEach(function(conductor) {
conductor.picked = false;
if (!!session.b25efasiav1__Conductor__r) {
session.b25efasiav1__Conductor__r.forEach(function(item) {
if (item.b25efasiav1__Staff_Type__r.Id == conductor.Id) {
conductor.picked = true;
}
});
}
});
}
$scope.showAttendeeModal = function(session) {
$scope.currentSession = session;
$scope.attendeeTypes.forEach(function(attendeeType) {
attendeeType.picked = false;
if (!!session.b25efasiav1__Attendee_Types__r) {
session.b25efasiav1__Attendee_Types__r.forEach(function(item) {
if (item.b25efasiav1__Attendee_Type__c == attendeeType.label) {
attendeeType.picked = true;
}
});
}
});
}
$scope.pickSessionType = function(session,sessionType){
session.Session_Type__c = sessionType.Id;
session.Session_Type__r = angular.copy(sessionType);
if(sessionType.Name!='Other'){
session.b25efasiav1__Deduct_ACH__c = sessionType.Deduct_ACH__c;
session.b25efasiav1__Deducted_ACH__c = sessionType.ACH_Deduction__c * session.b25efasiav1__Duration__c;
session.b25efasiav1__Count_In_Utility__c = sessionType.Count_In_Utility__c;
session.b25efasiav1__Utility_Counted__c = sessionType.Utility_Counted__c * session.b25efasiav1__Duration__c;
}
// the line followed should be removed util b25efasia package drop the require attribute off from picklist field type
// we create a new object session_type__c instead of old picklist type
session.b25efasiav1__Type_Picklist__c = 'Classroom';
}
$scope.pickLesson = function() {
$scope.currentSession.b25efasiav1__Course_Lessons__r = [];
$scope.lessons.forEach(function(lesson) {
if (lesson.picked) {
var courseLesson = {};
courseLesson.b25efasiav1__Course_Session__c = $scope.currentSession.Id;
courseLesson.b25efasiav1__Lesson__c = lesson.Id;
courseLesson.b25efasiav1__Lesson__r = angular.copy(lesson);
$scope.currentSession.b25efasiav1__Course_Lessons__r.push(courseLesson);
}
});
$scope.showLessons = false;
};
$scope.pickConductor = function() {
if (!$scope.currentSession) return;
$scope.currentSession.b25efasiav1__Conductor__r = [];
$scope.staffTypes.forEach(function(staffType) {
if (staffType.picked) {
var conductor = {};
conductor.b25efasiav1__Course_Session__c = $scope.currentSession.Id;
conductor.b25efasiav1__Staff_Type__c = staffType.Id;
conductor.b25efasiav1__Staff_Type__r = angular.copy(staffType);
$scope.currentSession.b25efasiav1__Conductor__r.push(conductor);
}
});
$scope.showConductors = false;
$scope.currentSession = null;
}
$scope.pickAttendeeType = function() {
if (!$scope.currentSession) return;
$scope.currentSession.b25efasiav1__Attendee_Types__r = [];
$scope.attendeeTypes.forEach(function(attendeeType) {
if (attendeeType.picked) {
var attendee = {};
attendee.b25efasiav1__Course_Session__c = $scope.currentSession.Id;
attendee.b25efasiav1__Attendee_Type__c = attendeeType.label;
$scope.currentSession.b25efasiav1__Attendee_Types__r.push(attendee);
}
});
$scope.showAttendeeTypes = false;
$scope.currentSession = null;
}
$scope.concatConductors = function(session) {
if (!session.b25efasiav1__Conductor__r) return '';
var conductors = [];
session.b25efasiav1__Conductor__r.forEach(function(item) {
conductors.push(item.b25efasiav1__Staff_Type__r.Name);
});
return conductors.join(' , ');
}
$scope.concatUnitLessonSequences = function(session) {
if (!session.b25efasiav1__Course_Lessons__r) return '';
var unitLessonSequences = [];
session.b25efasiav1__Course_Lessons__r.forEach(function(item) {
unitLessonSequences.push(item.b25efasiav1__Lesson__r.Unit_Sequence_Number__c);
});
return unitLessonSequences.join(' , ');
};
$scope.concatAttendee = function(session) {
if (!session.b25efasiav1__Attendee_Types__r) return '';
var conductors = [];
session.b25efasiav1__Attendee_Types__r.forEach(function(item) {
conductors.push(item.b25efasiav1__Attendee_Type__c);
});
return conductors.join(' , ');
}
$scope.back = function() {
window.location.href = '/' + courseMapID;
}
$scope.showTaskModal = function(session) {
$scope.showTask = true;
$scope.currentSession = session;
$scope.currentTasks = angular.copy(session.courseTasks);
}
$scope.addTask = function() {
if(!$scope.currentTasks)$scope.currentTasks=[];
var newCourseTask = {};
$scope.currentTasks.push(newCourseTask);
}
$scope.removeTask = function(courseTask) {
$scope.currentTasks.splice($scope.currentTasks.indexOf(courseTask), 1);
}
$scope.showTaskOwner = function(courseTask) {
$scope.currentTask = courseTask;
$scope.staffTypes.forEach(function(taskOwner) {
taskOwner.picked = false;
if (!!courseTask.b25efasiav1__Course_Task_Owners__r) {
courseTask.b25efasiav1__Course_Task_Owners__r.forEach(function(item) {
if (item.b25efasiav1__Staff_Type__r.Id == taskOwner.Id) {
taskOwner.picked = true;
}
});
}
});
}
$scope.pickTaskOwner = function() {
if (!$scope.currentTask) return;
$scope.currentTask.b25efasiav1__Course_Task_Owners__r = [];
$scope.staffTypes.forEach(function(staffType) {
if (staffType.picked) {
var taskOwner = {};
taskOwner.b25efasiav1__Course_Task__c = $scope.currentTask.Id;
taskOwner.b25efasiav1__Staff_Type__c = staffType.Id;
taskOwner.b25efasiav1__Staff_Type__r = angular.copy(staffType);
$scope.currentTask.b25efasiav1__Course_Task_Owners__r.push(taskOwner);
}
});
$scope.showOwner = false;
$scope.currentTask = null;
}
$scope.concatTaskOwner = function(courseTask) {
if (!courseTask.b25efasiav1__Course_Task_Owners__r) return '';
var taskOwners = [];
courseTask.b25efasiav1__Course_Task_Owners__r.forEach(function(item) {
taskOwners.push(item.b25efasiav1__Staff_Type__r.Name);
});
return taskOwners.join(' , ');
}
$scope.pickTaskType = function(courseTask, taskType) {
courseTask.showType=false;
courseTask.b25efasiav1__Task_Type__c = taskType.Id;
courseTask.Name = taskType.Name;
courseTask.b25efasiav1__Task_Type__r = angular.copy(taskType);
}
$scope.pickTaskCategory = function(courseTask, taskCategory) {
courseTask.b25efasiav1__Task_Category_Lookup__c = taskCategory.Id;
courseTask.b25efasiav1__Task_Category_Lookup__r = angular.copy(taskCategory);
}
$scope.saveTask = function(){
$scope.currentSession.courseTasks=$scope.currentTasks;
$scope.showTask = false;
}
$scope.disableACHAndUtility = function(session){
if(session.Session_Type__r && session.Session_Type__r.Name != 'Other') return true;
return false;
}
$scope.concatTask = function(session){
if(!session.courseTasks)return '';
var taskNameList = [];
session.courseTasks.forEach(function(task){
taskNameList.push(task.Name);
});
return taskNameList.join(' , ');
}
});
</script>
</apex:page>
global with sharing class Ctrl_Edit_Sessions {
public Ctrl_Edit_Sessions(ApexPages.StandardController con) {
}
@RemoteAction
global static Object querySessions(Id courseMapId) {
InitData initData = new InitData();
b25efasiav1__Course_Map__c cm =
[SELECT Id, Name, b25efasiav1__Content_Map__c,
(SELECT Id, Name, b25efasiav1__Sequence_number__c, b25efasiav1__Content_Map_Lesson_Sequence__c
FROM b25efasiav1__Course_Sessions__r)
FROM b25efasiav1__Course_Map__c WHERE id = :courseMapId];
List<b25efasiav1__Course_Session__c> sessionList =
[SELECT Id, Name, b25efasiav1__Sequence_number__c, b25efasiav1__Course_Map__r.b25efasiav1__Content_Map__c,
b25efasiav1__Content_Map_Lesson_Sequence__c, b25efasiav1__Content_Map__c,
b25efasiav1__Type__c, b25efasiav1__Duration__c, Auto_Generated__c,
Session_Type__c, Session_Type__r.Name, Session_Type__r.ACH_Deduction__c,
Session_Type__r.Deduct_ACH__c, Session_Type__r.Utility_Counted__c, Session_Type__r.Count_In_Utility__c,
b25efasiav1__Deduct_ACH__c, b25efasiav1__Deducted_ACH__c, b25efasiav1__Type_Picklist__c,
b25efasiav1__Utility_Counted__c, b25efasiav1__Count_In_Utility__c,
(SELECT Id, Name, b25efasiav1__Lesson__c, b25efasiav1__Lesson__r.b25efasiav1__Covered_In_Class_Key__c,
b25efasiav1__Lesson__r.b25efasiav1__Ordering_Sequence__c, b25efasiav1__Lesson__r.Unit_Sequence_Number__c,
b25efasiav1__Lesson__r.b25efasiav1__Unit_Order_Sequence__c
FROM b25efasiav1__Course_Lessons__r),
(SELECT Id, b25efasiav1__Course_Session__c, b25efasiav1__Attendee_Type__c FROM b25efasiav1__Attendee_Types__r),
(SELECT Id, Name, b25efasiav1__Staff_Type__r.Id, b25efasiav1__Staff_Type__r.Name FROM b25efasiav1__Conductor__r)
FROM b25efasiav1__Course_Session__c
WHERE b25efasiav1__Course_Map__c = : courseMapId ];
initData.sessionList = sessionList;
initData.sessionTypeList = queryType();
initData.staffTypeList = queryStaffTypes();
initData.attendeeTypeList = queryAttendeeType();
initData.taskCategoryList = queryTaskCategory();
initData.taskTypeList = queryTaskType();
initData.lessonList = queryLessons(courseMapId);
initData.taskList = queryAllTasks(courseMapId);
return initData;
}
@RemoteAction
global static Object queryAllTasks(Id courseMapId) {
List<b25efasiav1__Course_Task__c> courseTaskList =
[SELECT Id, Name, b25efasiav1__Task_Category_Lookup__c, b25efasiav1__Task_Category_Lookup__r.Name,
b25efasiav1__Task_Type__c, b25efasiav1__Task_Type__r.Name, b25efasiav1__Course_Session__c,
(SELECT Id, Name, b25efasiav1__Staff_Type__c, b25efasiav1__Staff_Type__r.Name, b25efasiav1__Course_Task__c FROM b25efasiav1__Course_Task_Owners__r)
FROM b25efasiav1__Course_Task__c WHERE b25efasiav1__Course_Session__r.b25efasiav1__Course_Map__c = :courseMapId];
return courseTaskList;
}
@RemoteAction
global static Object queryTasks(Id cousreSessionId) {
List<b25efasiav1__Course_Task__c> courseTaskList =
[SELECT Id, Name, b25efasiav1__Task_Category_Lookup__c, b25efasiav1__Task_Category_Lookup__r.Name,
b25efasiav1__Task_Type__c, b25efasiav1__Task_Type__r.Name,
(SELECT Id, Name, b25efasiav1__Staff_Type__c, b25efasiav1__Staff_Type__r.Name, b25efasiav1__Course_Task__c FROM b25efasiav1__Course_Task_Owners__r)
FROM b25efasiav1__Course_Task__c WHERE b25efasiav1__Course_Session__c = :cousreSessionId];
return courseTaskList;
}
@RemoteAction
global static Object queryTaskCategory() {
List<b25efasiav1__Task_Category__c> taskCategory = [SELECT Id, Name FROM b25efasiav1__Task_Category__c];
return taskCategory;
}
@RemoteAction
global static Object queryTaskType() {
List<b25efasiav1__Task_Type__c> taskType = [SELECT Id, Name, b25efasiav1__Task_Category__c From b25efasiav1__Task_Type__c];
return taskType;
}
@RemoteAction
global static Object queryAttendeeType() {
Schema.DescribeFieldResult attendeeType = b25efasiav1__Attendee_Type__c.b25efasiav1__Attendee_Type__c.getDescribe();
List<Schema.PicklistEntry> attendeeTypeValues = attendeeType.getPicklistValues();
return attendeeTypeValues;
}
@RemoteAction
global static Object queryType() {
List<Session_Type__c> sessionType = [SELECT Id, Name, ACH_Deduction__c, Count_In_Utility__c, Deduct_ACH__c, Utility_Counted__c FROM Session_Type__c];
return sessionType;
}
@RemoteAction
global static Object queryStaffTypes() {
List<b25efasiav1__Staff_Type__c> staffTypes = [SELECT Id, Name FROM b25efasiav1__Staff_Type__c];
return staffTypes;
}
@RemoteAction
global static Object queryLessons(Id courseMapId) {
b25efasiav1__Course_Map__c courseMap = [select Id, b25efasiav1__Content_Map__c FROM b25efasiav1__Course_Map__c WHERE id = :courseMapId];
List<b25efasiav1__Lesson__c> lessonList =
[SELECT Name, b25efasiav1__Content_Map__r.Name, b25efasiav1__Covered_In_Class_Key__c,
b25efasiav1__Lesson_Type_Code__c, b25efasiav1__Mentor_Resource_Key__c,
b25efasiav1__Online_Homework_Key__c, b25efasiav1__Ordering_Sequence__c,
b25efasiav1__Paper_Based_Homework_Key__c, b25efasiav1__Unit_Order_Sequence__c,
Unit_Sequence_Number__c, b25efasiav1__Unique_Sequence_Number__c
FROM b25efasiav1__Lesson__c
WHERE b25efasiav1__Content_Map__c = :courseMap.b25efasiav1__Content_Map__c
ORDER BY Unit_Sequence_Number__c ASC ];
return lessonList;
}
@RemoteAction
global static Object assignSelected(Id sessionId, String assignLessonsJSON) {
System.savePoint sp = Database.setSavepoint();
try {
List<b25efasiav1__Lesson__c> lessonList = (List<b25efasiav1__Lesson__c>)JSON.deserialize(assignLessonsJSON, List<b25efasiav1__Lesson__c>.class);
if (lessonList.isEmpty()) {
return 'lessons is empty';
}
List<b25efasiav1__Course_Lesson__c> newCourseLessonList = new List<b25efasiav1__Course_Lesson__c>();
for (b25efasiav1__Lesson__c lesson : lessonList) {
b25efasiav1__Course_Lesson__c newCourseLesson = new b25efasiav1__Course_Lesson__c(b25efasiav1__Course_Session__c = sessionId, b25efasiav1__Lesson__c = lesson.Id);
newCourseLessonList.add(newCourseLesson);
}
delete [SELECT Id FROM b25efasiav1__Course_Lesson__c
WHERE b25efasiav1__Course_Session__c = : sessionId];
insert newCourseLessonList;
return 'success';
} catch (Exception e) {
Database.rollback(sp);
return e.getMessage();
}
}
@RemoteAction
global static Object saveAll(String sessonListJSON, String deleteSessionsJSON) {
System.savePoint sp = Database.setSavepoint();
Map<String, String> result = new Map<String, String>();
try {
List<CourseSessionWrapper> wrapperList = (List<CourseSessionWrapper>)JSON.deserialize(sessonListJSON, List<CourseSessionWrapper>.class);
System.debug(LoggingLevel.INFO, '*** wrapperList: ' + wrapperList);
List<b25efasiav1__Course_Session__c> preUpsertCourseSessionList = new List<b25efasiav1__Course_Session__c>();
Set<Id> cousreSessionIdSet = new Set<Id>();
for (CourseSessionWrapper wrapper : wrapperList) {
preUpsertCourseSessionList.add(wrapper.cousreSession);
cousreSessionIdSet.add(wrapper.cousreSession.Id);
}
upsert preUpsertCourseSessionList;
System.debug(LoggingLevel.INFO, '*** : ' + wrapperList);
delete[SELECT Id FROM b25efasiav1__Course_Lesson__c
WHERE b25efasiav1__Course_Session__c in : cousreSessionIdSet];
delete[SELECT Id FROM b25efasiav1__Conductor__c
WHERE b25efasiav1__Course_Session__c in : cousreSessionIdSet];
delete[SELECT Id FROM b25efasiav1__Attendee_Type__c
WHERE b25efasiav1__Course_Session__c in : cousreSessionIdSet];
delete[SELECT Id FROM b25efasiav1__Course_Task__c
WHERE b25efasiav1__Course_Session__c in : cousreSessionIdSet];
List<b25efasiav1__Course_Lesson__c> preInsertCourseLesson = new List<b25efasiav1__Course_Lesson__c>();
List<b25efasiav1__Conductor__c> preInsertConductor = new List<b25efasiav1__Conductor__c>();
List<b25efasiav1__Attendee_Type__c> preInsertAttendeeType = new List<b25efasiav1__Attendee_Type__c>();
List<b25efasiav1__Course_Task__c> preInsertCourseTask = new List<b25efasiav1__Course_Task__c>();
List<b25efasiav1__Course_Task_Owner__c> preinsertCourseTaskOwner = new List<b25efasiav1__Course_Task_Owner__c>();
for (CourseSessionWrapper wrapper : wrapperList) {
for (b25efasiav1__Course_Lesson__c courseLesson : wrapper.lessonList) {
if (courseLesson.b25efasiav1__Course_Session__c == null) {
courseLesson.b25efasiav1__Course_Session__c = wrapper.cousreSession.Id;
}
preInsertCourseLesson.add(courseLesson);
}
for (b25efasiav1__Conductor__c conductor : wrapper.conductorList) {
if (conductor.b25efasiav1__Course_Session__c == null) {
conductor.b25efasiav1__Course_Session__c = wrapper.cousreSession.Id;
}
preInsertConductor.add(conductor);
}
for (b25efasiav1__Attendee_Type__c attendeeType : wrapper.attendeeTypeList) {
if (attendeeType.b25efasiav1__Course_Session__c == null) {
attendeeType.b25efasiav1__Course_Session__c = wrapper.cousreSession.Id;
}
preInsertAttendeeType.add(attendeeType);
}
for (TaskWrapper tw : wrapper.taskList) {
if (tw.courseTask.b25efasiav1__Course_Session__c == null) {
tw.courseTask.b25efasiav1__Course_Session__c = wrapper.cousreSession.Id;
}
preInsertCourseTask.add(tw.courseTask);
}
}
insert preInsertCourseLesson;
insert preInsertConductor;
insert preInsertAttendeeType;
insert preInsertCourseTask;
for (CourseSessionWrapper wrapper : wrapperList) {
for (TaskWrapper tw : wrapper.taskList) {
for (b25efasiav1__Course_Task_Owner__c tOwner : tw.taskOwnerList) {
tOwner.b25efasiav1__Course_Task__c = tw.courseTask.Id;
preinsertCourseTaskOwner.add(tOwner);
}
}
}
insert preinsertCourseTaskOwner;
List<b25efasiav1__Course_Session__c> deleteSessions =
(List<b25efasiav1__Course_Session__c>)JSON.deserialize(deleteSessionsJSON, List<b25efasiav1__Course_Session__c>.class);
delete deleteSessions;
result.put('code', '1');
} catch (Exception e) {
Database.rollback(sp);
result.put('code', '0');
result.put('msg', e.getMessage());
}
return result;
}
public class CourseSessionWrapper {
public b25efasiav1__Course_Session__c cousreSession {get; set;}
public List<b25efasiav1__Course_Lesson__c> lessonList {get; set;}
public List<b25efasiav1__Conductor__c> conductorList {get; set;}
public List<b25efasiav1__Attendee_Type__c> attendeeTypeList {get; set;}
public List<TaskWrapper> taskList {get; set;}
}
public class TaskWrapper {
public b25efasiav1__Course_Task__c courseTask {get; set;}
public List<b25efasiav1__Course_Task_Owner__c> taskOwnerList {get; set;}
}
public class InitData {
public Object sessionList {get; set;}
public Object sessionTypeList {get; set;}
public Object staffTypeList {get; set;}
public Object attendeeTypeList {get; set;}
public Object taskCategoryList {get; set;}
public Object taskTypeList {get; set;}
public Object lessonList {get; set;}
public Object taskList {get;set;}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment