UI-3116: Move sub-module templates in their own folder (#73)

* Move sub-module templates in their own `views` folder

By using `getTemplate()` we can specify which sub-module a template is
related to, enabling this behavior.
The templates names were shortened by stripping the name of their
sub-module from it since they are stored under their sub-module folder.
String templates are created using `getTemplate()` instead of
`monster.template()` that we are trying to depreciate.

* Only use `getTemplate()` for both regular and string templates

app.js

@@ -3,17 +3,21 @@ define(function(require) {
 		_ = require('lodash'),
 		monster = require('monster');
 
-	require([
-		'./submodules/devices/devices',
-		'./submodules/groups/groups',
-		'./submodules/numbers/numbers',
-		'./submodules/strategy/strategy',
-		'./submodules/callLogs/callLogs',
-		'./submodules/users/users',
-		'./submodules/myOffice/myOffice',
-		'./submodules/featureCodes/featureCodes',
-		'./submodules/vmboxes/vmboxes'
-	]);
+	var appSubmodules = [
+		'callLogs',
+		'devices',
+		'featureCodes',
+		'groups',
+		'myOffice',
+		'numbers',
+		'strategy',
+		'users',
+		'vmboxes'
+	];
+
+	require(_.map(appSubmodules, function(name) {
+		return './submodules/' + name + '/' + name;
+	}));
 
 	var app = {
 		name: 'voip',
@@ -42,7 +46,7 @@ define(function(require) {
 			global: {}
 		},
 
-		subModules: ['devices', 'groups', 'numbers', 'strategy', 'callLogs', 'users', 'myOffice', 'featureCodes', 'vmboxes'],
+		subModules: appSubmodules,
 
 		load: function(callback) {
 			var self = this;
@@ -64,7 +68,9 @@ define(function(require) {
 		render: function(container) {
 			var self = this,
 				parent = container || $('#monster_content'),
-				template = $(monster.template(self, 'app'));
+				template = $(self.getTemplate({
+					name: 'app'
+				}));
 
 			self.loadGlobalData(function() {
 				/* On first Load, load my office */

submodules/callLogs/callLogs.js

@@ -65,11 +65,22 @@ define(function(require) {
 				cdrs = self.callLogsFormatCdrs(cdrs);
 
 				dataTemplate.cdrs = cdrs;
-				template = $(monster.template(self, 'callLogs-layout', dataTemplate));
+				template = $(self.getTemplate({
+					name: 'layout',
+					data: dataTemplate,
+					submodule: 'callLogs'
+				}));
 				monster.ui.tooltips(template);
 
 				if (cdrs && cdrs.length) {
-					var cdrsTemplate = $(monster.template(self, 'callLogs-cdrsList', {cdrs: cdrs, showReport: monster.config.whitelabel.callReportEmail ? true : false}));
+					var cdrsTemplate = $(self.getTemplate({
+						name: 'cdrsList',
+						data: {
+							cdrs: cdrs,
+							showReport: monster.config.whitelabel.callReportEmail ? true : false
+						},
+						submodule: 'callLogs'
+					}));
 					template.find('.call-logs-grid .grid-row-container')
 							.append(cdrsTemplate);
 				}
@@ -210,7 +221,13 @@ define(function(require) {
 							rowGroup.find('.extra-legs')
 									.empty()
 									.addClass('data-loaded')
-									.append(monster.template(self, 'callLogs-interactionLegs', { cdrs: formattedCdrs }));
+									.append($(self.getTemplate({
+										name: 'interactionLegs',
+										data: {
+											cdrs: formattedCdrs
+										},
+										submodule: 'callLogs'
+									})));
 						});
 					}
 				}
@@ -235,9 +252,13 @@ define(function(require) {
 					loaderDiv.find('.loading-message > i').toggleClass('fa-spin');
 					self.callLogsGetCdrs(fromDate, toDate, function(newCdrs, nextStartKey) {
 						newCdrs = self.callLogsFormatCdrs(newCdrs);
-						cdrsTemplate = $(monster.template(self, 'callLogs-cdrsList', {
-							cdrs: newCdrs,
-							showReport: monster.config.whitelabel.callReportEmail ? true : false
+						cdrsTemplate = $(self.getTemplate({
+							name: 'cdrsList',
+							data: {
+								cdrs: newCdrs,
+								showReport: monster.config.whitelabel.callReportEmail ? true : false
+							},
+							submodule: 'callLogs'
 						}));
 
 						startKey = nextStartKey;
@@ -446,7 +467,10 @@ define(function(require) {
 					cdrId: callLogId
 				},
 				success: function(data, status) {
-					var template = $(monster.template(self, 'callLogs-detailsPopup'));
+					var template = $(self.getTemplate({
+						name: 'detailsPopup',
+						submodule: 'callLogs'
+					}));
 
 					monster.ui.renderJSON(data.data, template.find('#jsoneditor'));
 

submodules/devices/devices.js

@@ -37,11 +37,19 @@ define(function(require) {
 
 			self.devicesGetData(function(data) {
 				var dataTemplate = self.devicesFormatListData(data),
-					template = $(monster.template(self, 'devices-layout', dataTemplate)),
+					template = $(self.getTemplate({
+						name: 'layout',
+						data: dataTemplate,
+						submodule: 'devices'
+					})),
 					templateDevice;
 
 				_.each(dataTemplate.devices, function(device) {
-					templateDevice = monster.template(self, 'devices-row', device);
+					templateDevice = $(self.getTemplate({
+						name: 'row',
+						data: device,
+						submodule: 'devices'
+					}));
 
 					template.find('.devices-rows').append(templateDevice);
 				});
@@ -312,11 +320,22 @@ define(function(require) {
 			var self = this,
 				mode = data.id ? 'edit' : 'add',
 				type = data.device_type,
-				popupTitle = mode === 'edit' ? monster.template(self, '!' + self.i18n.active().devices[type].editTitle, { name: data.name }) : self.i18n.active().devices[type].addTitle,
-				templateDevice = $(monster.template(self, 'devices-' + type, $.extend(true, {}, data, {
-					isProvisionerConfigured: monster.config.api.hasOwnProperty('provisioner'),
-					showEmergencyCnam: monster.util.isNumberFeatureEnabled('cnam') && monster.util.isNumberFeatureEnabled('e911')
-				}))),
+				popupTitle = mode === 'edit'
+					? self.getTemplate({
+						name: '!' + self.i18n.active().devices[type].editTitle,
+						data: {
+							name: data.name
+						}
+					})
+					: self.i18n.active().devices[type].addTitle,
+				templateDevice = $(self.getTemplate({
+					name: 'devices-' + type,
+					data: $.extend(true, {}, data, {
+						isProvisionerConfigured: monster.config.api.hasOwnProperty('provisioner'),
+						showEmergencyCnam: monster.util.isNumberFeatureEnabled('cnam') && monster.util.isNumberFeatureEnabled('e911')
+					}),
+					submodule: 'devices'
+				})),
 				deviceForm = templateDevice.find('#form_device');
 
 			if (data.extra.hasOwnProperty('provision') && data.extra.provision.hasOwnProperty('keys')) {
@@ -475,7 +494,12 @@ define(function(require) {
 						self.devicesDeleteDevice(deviceId, function(device) {
 							popup.dialog('close').remove();
 
-							toastr.success(monster.template(self, '!' + self.i18n.active().devices.deletedDevice, { deviceName: device.name }));
+							toastr.success(self.getTemplate({
+								name: '!' + self.i18n.active().devices.deletedDevice,
+								data: {
+									deviceName: device.name
+								}
+							}));
 
 							callbackDelete && callbackDelete(device);
 						});
@@ -538,7 +562,12 @@ define(function(require) {
 									.addClass('green-box')
 									.css('display', 'inline-block')
 									.empty()
-									.text(monster.template(self, '!' + self.i18n.active().devices.popupSettings.restrictions.matcher.allowMessage, { phoneNumber: monster.util.formatPhoneNumber(number) }));
+									.text(self.getTemplate({
+										name: '!' + self.i18n.active().devices.popupSettings.restrictions.matcher.allowMessage,
+										data: {
+											phoneNumber: monster.util.formatPhoneNumber(number)
+										}
+									}));
 							} else {
 								matchedSign
 									.removeClass('monster-green fa-check')
@@ -550,7 +579,12 @@ define(function(require) {
 									.addClass('red-box')
 									.css('display', 'inline-block')
 									.empty()
-									.text(monster.template(self, '!' + self.i18n.active().devices.popupSettings.restrictions.matcher.denyMessage, { phoneNumber: monster.util.formatPhoneNumber(number) }));
+									.text(self.getTemplate({
+										name: '!' + self.i18n.active().devices.popupSettings.restrictions.matcher.denyMessage,
+										data: {
+											phoneNumber: monster.util.formatPhoneNumber(number)
+										}
+									}));
 							}
 						}
 					});

submodules/featureCodes/featureCodes.js

@@ -65,7 +65,13 @@ define(function(require) {
 				callback = args.callback;
 
 			self.featureCodesLoadData(function(featureCodesData) {
-				var template = $(monster.template(self, 'featureCodes-layout', { featureCodes: self.featureCodesFormatData(featureCodesData) }));
+				var template = $(self.getTemplate({
+					name: 'layout',
+					data: {
+						featureCodes: self.featureCodesFormatData(featureCodesData)
+					},
+					submodule: 'featureCodes'
+				}));
 
 				monster.ui.tooltips(template);
 

submodules/groups/groups.js

@@ -34,11 +34,21 @@ define(function(require) {
 				} else {
 					var dataTemplate = self.groupsFormatListData(data),
 						countGroups = _.size(dataTemplate.groups),
-						template = $(monster.template(self, 'groups-layout', { countGroups: countGroups })),
+						template = $(self.getTemplate({
+							name: 'layout',
+							data: {
+								countGroups: countGroups
+							},
+							submodule: 'groups'
+						})),
 						templateGroup;
 
 					_.each(dataTemplate.groups, function(group) {
-						templateGroup = monster.template(self, 'groups-row', group);
+						templateGroup = $(self.getTemplate({
+							name: 'row',
+							data: group,
+							submodule: 'groups'
+						}));
 
 						template.find('.groups-rows').append(templateGroup);
 					});
@@ -274,7 +284,11 @@ define(function(require) {
 
 			template.find('.groups-header .add-group').on('click', function() {
 				self.groupsGetCreationData(function(data) {
-					var groupTemplate = $(monster.template(self, 'groups-creation', data)),
+					var groupTemplate = $(self.getTemplate({
+							name: 'creation',
+							data: data,
+							submodule: 'groups'
+						})),
 						groupForm = groupTemplate.find('#form_group_creation');
 
 					monster.ui.validate(groupForm);
@@ -420,7 +434,11 @@ define(function(require) {
 			var self = this;
 
 			self.groupsGetFeaturesData(groupId, function(data) {
-				var template = $(monster.template(self, 'groups-features', data.group));
+				var template = $(self.getTemplate({
+					name: 'features',
+					data: data.group,
+					submodule: 'groups'
+				}));
 
 				self.groupsBindFeatures(template, data);
 
@@ -432,7 +450,11 @@ define(function(require) {
 			var self = this;
 
 			self.groupsGetSettingsData(groupId, function(data) {
-				var template = $(monster.template(self, 'groups-name', data));
+				var template = $(self.getTemplate({
+					name: 'name',
+					data: data,
+					submodule: 'groups'
+				}));
 
 				self.groupsBindSettings(template, data);
 
@@ -445,7 +467,11 @@ define(function(require) {
 
 			self.groupsGetNumbersData(groupId, function(data) {
 				self.groupsFormatNumbersData(data, function(data) {
-					var template = $(monster.template(self, 'groups-numbers', data));
+					var template = $(self.getTemplate({
+						name: 'numbers',
+						data: data,
+						submodule: 'groups'
+					}));
 
 					_.each(data.assignedNumbers, function(numberData, numberId) {
 						numberData.phoneNumber = numberId;
@@ -474,7 +500,11 @@ define(function(require) {
 
 			self.groupsGetNumbersData(groupId, function(data) {
 				self.groupsFormatNumbersData(data, function(data) {
-					var template = $(monster.template(self, 'groups-extensions', data));
+					var template = $(self.getTemplate({
+						name: 'extensions',
+						data: data,
+						submodule: 'groups'
+					}));
 
 					self.groupsBindExtensions(template, data);
 
@@ -488,7 +518,11 @@ define(function(require) {
 
 			self.groupsGetMembersData(groupId, function(results) {
 				var results = self.groupsFormatMembersData(results),
-					template = $(monster.template(self, 'groups-members', results));
+					template = $(self.getTemplate({
+						name: 'members',
+						data: results,
+						submodule: 'groups'
+					}));
 
 				monster.pub('common.ringingDurationControl.render', {
 					container: template.find('.members-container'),
@@ -537,7 +571,11 @@ define(function(require) {
 					format: recordCallNode.data.format,
 					timeLimit: recordCallNode.data.time_limit
 				} : {})),
-				featureTemplate = $(monster.template(self, 'groups-feature-call_recording', templateData)),
+				featureTemplate = $(self.getTemplate({
+					name: 'feature-call_recording',
+					data: templateData,
+					submodule: 'groups'
+				})),
 				switchFeature = featureTemplate.find('.switch-state'),
 				featureForm = featureTemplate.find('#call_recording_form'),
 				popup;
@@ -625,7 +663,11 @@ define(function(require) {
 						mediaList: medias,
 						media: ringGroupNode.data.ringback || ''
 					},
-					featureTemplate = $(monster.template(self, 'groups-feature-ringback', templateData)),
+					featureTemplate = $(self.getTemplate({
+						name: 'feature-ringback',
+						data: templateData,
+						submodule: 'groups'
+					})),
 					switchFeature = featureTemplate.find('.switch-state'),
 					popup,
 					closeUploadDiv = function(newMedia) {
@@ -782,7 +824,11 @@ define(function(require) {
 			} //Find the existing Next Action if there is one
 
 			var templateData = $.extend(true, {selectedEntity: selectedEntity}, data),
-				featureTemplate = $(monster.template(self, 'groups-feature-next_action', templateData)),
+				featureTemplate = $(self.getTemplate({
+					name: 'feature-next_action',
+					data: templateData,
+					submodule: 'groups'
+				})),
 				switchFeature = featureTemplate.find('.switch-state'),
 				popup;
 
@@ -853,7 +899,11 @@ define(function(require) {
 
 		groupsRenderForward: function(data) {
 			var self = this,
-				featureTemplate = $(monster.template(self, 'groups-feature-forward', data)),
+				featureTemplate = $(self.getTemplate({
+					name: 'feature-forward',
+					data: data,
+					submodule: 'groups'
+				})),
 				switchFeature = featureTemplate.find('.switch-state'),
 				popup;
 
@@ -904,7 +954,11 @@ define(function(require) {
 					caller_id_name_prefix: prependNode.data.caller_id_name_prefix,
 					caller_id_number_prefix: prependNode.data.caller_id_number_prefix
 				} : {})),
-				featureTemplate = $(monster.template(self, 'groups-feature-prepend', templateData)),
+				featureTemplate = $(self.getTemplate({
+					name: 'feature-prepend',
+					data: templateData,
+					submodule: 'groups'
+				})),
 				switchFeature = featureTemplate.find('.switch-state'),
 				popup;
 
@@ -1010,7 +1064,12 @@ define(function(require) {
 			template.find('.delete-group').on('click', function() {
 				monster.ui.confirm(self.i18n.active().groups.confirmDeleteGroup, function() {
 					self.groupsDelete(data.group.id, function(data) {
-						toastr.success(monster.template(self, '!' + self.i18n.active().groups.groupDeleted, { name: data.group.name }));
+						toastr.success(self.getTemplate({
+							name: '!' + self.i18n.active().groups.groupDeleted,
+							data: {
+								name: data.group.name
+							}
+						}));
 
 						self.groupsRender();
 					});
@@ -1108,8 +1167,12 @@ define(function(require) {
 						_.each(numberList, function(val) {
 							template
 								.find('.list-assigned-items')
-								.append($(monster.template(self, 'groups-numbersItemRow', {
-									number: val
+								.append($(self.getTemplate({
+									name: 'numbersItemRow',
+									data: {
+										number: val
+									},
+									submodule: 'groups'
 								})));
 
 							var numberDiv = template.find('[data-id="' + val.phoneNumber + '"]'),
@@ -1147,8 +1210,12 @@ define(function(require) {
 							_.each(numbers, function(number) {
 								number.phoneNumber = number.id;
 
-								var rowTemplate = $(monster.template(self, 'groups-numbersItemRow', {
-										number: number
+								var rowTemplate = $(self.getTemplate({
+										name: 'numbersItemRow',
+										data: {
+											number: number
+										},
+										submodule: 'numbersItemRow'
 									})),
 									argsFeatures = {
 										target: rowTemplate.find('.edit-features'),
@@ -1182,7 +1249,12 @@ define(function(require) {
 				});
 
 				self.groupsUpdateNumbers(callflowId, dataNumbers, function(callflowData) {
-					toastr.success(monster.template(self, '!' + toastrMessages.numbersUpdated, { name: name }));
+					toastr.success(self.getTemplate({
+						name: '!' + toastrMessages.numbersUpdated,
+						data: {
+							name: name
+						}
+					}));
 					self.groupsRender({ groupId: callflowData.group_id });
 				});
 			});
@@ -1209,7 +1281,12 @@ define(function(require) {
 				});
 
 				self.groupsUpdateExtensions(callflowId, extensionsToSave, function(callflowData) {
-					toastr.success(monster.template(self, '!' + toastrMessages.numbersUpdated, { name: name }));
+					toastr.success(self.getTemplate({
+						name: '!' + toastrMessages.numbersUpdated,
+						data: {
+							name: name
+						}
+					}));
 					self.groupsRender({ groupId: callflowData.group_id });
 				});
 			});
@@ -1220,7 +1297,11 @@ define(function(require) {
 						dataTemplate = {
 							recommendedExtension: lastExtension
 						},
-						newLineTemplate = $(monster.template(self, 'groups-newExtension', dataTemplate)),
+						newLineTemplate = $(self.getTemplate({
+							name: 'newExtension',
+							data: dataTemplate,
+							submodule: 'groups'
+						})),
 						$listExtensions = template.find('.list-assigned-items');
 
 					monster.ui.mask(newLineTemplate.find('.input-extension'), 'extension');

submodules/myOffice/myOffice.js

@@ -68,7 +68,11 @@ define(function(require) {
 						directoryLink: myOfficeData.directoryLink,
 						showUserTypes: _.size(self.appFlags.global.servicePlansRole) > 0
 					},
-					template = $(monster.template(self, 'myOffice-layout', dataTemplate)),
+					template = $(self.getTemplate({
+						name: 'layout',
+						data: dataTemplate,
+						submodule: 'myOffice'
+					})),
 					$devicesCanvas = template.find('#dashboard_devices_chart'),
 					$assignedNumbersCanvas = template.find('#dashboard_assigned_numbers_chart'),
 					$classifiedNumbersCanvas = template.find('#dashboard_number_types_chart'),
@@ -731,7 +735,11 @@ define(function(require) {
 						mediaList: medias,
 						media: 'music_on_hold' in account && 'media_id' in account.music_on_hold ? account.music_on_hold.media_id : undefined
 					},
-					popupTemplate = $(monster.template(self, 'myOffice-musicOnHoldPopup', templateData)),
+					popupTemplate = $(self.getTemplate({
+						name: 'musicOnHoldPopup',
+						data: templateData,
+						submodule: 'myOffice'
+					})),
 					popup = monster.ui.dialog(popupTemplate, {
 						title: self.i18n.active().myOffice.musicOnHold.title,
 						position: ['center', 20]
@@ -871,7 +879,11 @@ define(function(require) {
 					mainNumbers: myOfficeData.mainNumbers,
 					selectedMainNumber: 'caller_id' in myOfficeData.account && 'external' in myOfficeData.account.caller_id ? myOfficeData.account.caller_id.external.number || 'none' : 'none'
 				},
-				popupTemplate = $(monster.template(self, 'myOffice-callerIdPopup', templateData)),
+				popupTemplate = $(self.getTemplate({
+					name: 'callerIdPopup',
+					data: templateData,
+					submodule: 'myOffice'
+				})),
 				popup = monster.ui.dialog(popupTemplate, {
 					title: self.i18n.active().myOffice.callerId.title,
 					position: ['center', 20]

submodules/strategy/strategy.js

@@ -203,7 +203,11 @@ define(function(require) {
 						customConfGreeting: results.callflows.MainConference && ('welcome_prompt' in results.callflows.MainConference.flow.data) ? true : false,
 						faxingNumbers: hasFaxingNumber ? results.callflows.MainFaxing.numbers : [self.i18n.active().strategy.noNumberTitle]
 					},
-					template = $(monster.template(self, 'strategy-layout', templateData));
+					template = $(self.getTemplate({
+						name: 'layout',
+						data: templateData,
+						submodule: 'strategy'
+					}));
 
 				self.strategyBindEvents(template, results);
 
@@ -336,7 +340,14 @@ define(function(require) {
 
 		strategyShowE911Choices: function(oldNumber, newNumbers) {
 			var self = this,
-				template = $(monster.template(self, 'strategy-changeE911Popup', { oldNumber: oldNumber, newNumbers: newNumbers })),
+				template = $(self.getTemplate({
+					name: 'changeE911Popup',
+					data: {
+						oldNumber: oldNumber,
+						newNumbers: newNumbers
+					},
+					submodule: 'strategy'
+				})),
 				$options = template.find('.choice');
 
 			$options.on('click', function() {
@@ -352,7 +363,12 @@ define(function(require) {
 					popup.dialog('close');
 				} else {
 					self.strategyChangeEmergencyCallerId(number, function() {
-						toastr.success(monster.template(self, '!' + self.i18n.active().strategy.updateE911Dialog.success, { number: monster.util.formatPhoneNumber(number) }));
+						toastr.success(self.getTemplate({
+							name: '!' + self.i18n.active().startegy.updateE911Dialog.success,
+							data: {
+								number: monster.util.formatPhoneNumber(number)
+							}
+						}));
 						popup.dialog('close');
 					});
 				}
@@ -479,7 +495,11 @@ define(function(require) {
 								}),
 								spareLinkEnabled: (_.countBy(accountNumbers, function(number) { return number.used_by ? 'assigned' : 'spare'; }).spare > 0)
 							},
-							template = $(monster.template(self, 'strategy-' + templateName, templateData));
+							template = $(self.getTemplate({
+								name: 'strategy-' + templateName,
+								data: templateData,
+								submodule: 'strategy'
+							}));
 
 						_.each(templateData.numbers, function(data) {
 							data.number.phoneNumber = data.number.id;
@@ -523,7 +543,11 @@ define(function(require) {
 								}),
 								spareLinkEnabled: (_.countBy(accountNumbers, function(number) { return number.used_by ? 'assigned' : 'spare'; }).spare > 0)
 							},
-							template = monster.template(self, 'strategy-' + templateName, templateData);
+							template = $(self.getTemplate({
+								name: 'strategy-' + templateName,
+								data: templateData,
+								submodule: 'strategy'
+							}));
 
 						container
 							.find('.element-content')
@@ -549,7 +573,11 @@ define(function(require) {
 								actionLinksEnabled: _.isEmpty(callflow.flow.data),
 								spareLinkEnabled: (_.countBy(accountNumbers, function(number) { return number.used_by ? 'assigned' : 'spare'; }).spare > 0)
 							},
-							template = monster.template(self, 'strategy-' + templateName, templateData);
+							template = $(self.getTemplate({
+								name: 'strategy-' + templateName,
+								data: templateData,
+								submodule: 'strategy'
+							}));
 
 						container
 							.find('.element-content')
@@ -612,7 +640,11 @@ define(function(require) {
 						});
 					}
 
-					template = $(monster.template(self, 'strategy-' + templateName, templateData));
+					template = $(self.getTemplate({
+						name: 'strategy-' + templateName,
+						data: templateData,
+						submodule: 'strategy'
+					}));
 
 					var validationOptions = {
 						rules: {
@@ -668,7 +700,11 @@ define(function(require) {
 					var templateData = {
 							enabled: !$.isEmptyObject(strategyData.temporalRules.holidays)
 						},
-						template = $(monster.template(self, 'strategy-' + templateName, templateData)),
+						template = $(self.getTemplate({
+							name: 'strategy-' + templateName,
+							data: templateData,
+							submodule: 'strategy'
+						})),
 						holidayList = template.find('.holidays-list');
 
 					container
@@ -733,7 +769,11 @@ define(function(require) {
 						}
 					});
 
-					template = $(monster.template(self, 'strategy-' + templateName, templateData));
+					template = $(self.getTemplate({
+						name: 'strategy-' + templateName,
+						data: templateData,
+						submodule: 'strategy'
+					}));
 
 					container
 						.find('.element-content')
@@ -777,7 +817,13 @@ define(function(require) {
 							tabData.menu = menuName;
 						}
 
-						$(this).empty().append(monster.template(self, 'strategy-callsTab', tabData));
+						$(this)
+							.empty()
+								.append($(self.getTemplate({
+									name: 'callsTab',
+									data: tabData,
+									submodule: 'strategy'
+								})));
 					});
 
 					$.each(template.find('.user-select select'), function() {
@@ -979,7 +1025,11 @@ define(function(require) {
 
 						if (featureList.length > 0) {
 							dataTemplate.featureList = featureList;
-							popupHtml = $(monster.template(self, 'strategy-popupRemoveFeatures', dataTemplate));
+							popupHtml = $(self.getTemplate({
+								name: 'popupRemoveFeatures',
+								data: dataTemplate,
+								submodule: 'strategy'
+							}));
 
 							popup = monster.ui.dialog(popupHtml, {
 								title: self.i18n.active().strategy.popupRemoveFeatures.title,
@@ -1066,9 +1116,15 @@ define(function(require) {
 				var confCallflow = strategyData.callflows.MainConference;
 				if (confCallflow) {
 					self.getMainConferenceGreetingMedia(function(greetingMedia) {
-						var greetingTemplate = $(monster.template(self, 'strategy-customConferenceGreeting', {
-								enabled: ('welcome_prompt' in confCallflow.flow.data),
-								greeting: greetingMedia && greetingMedia.tts ? greetingMedia.tts.text : ''
+						var greetingTemplate = $(self.getTemplate({
+								name: 'customConferenceGreeting',
+								data: {
+									enabled: ('welcome_prompt' in confCallflow.flow.data),
+									greeting: greetingMedia && greetingMedia.tts
+										? greetingMedia.tts.text
+										: ''
+								},
+								submodule: 'strategy'
 							})),
 							greetingPopup = monster.ui.dialog(greetingTemplate, {
 								title: self.i18n.active().strategy.customConferenceGreeting.title,
@@ -1253,7 +1309,10 @@ define(function(require) {
 						if (mainFaxing.flow.data.hasOwnProperty('id')) {
 							updateCallflow();
 						} else {
-							var template = $(monster.template(self, 'strategy-popupEditFaxbox')),
+							var template = $(self.getTemplate({
+									name: 'popupEditFaxbox',
+									submodule: 'strategy'
+								})),
 								popup = monster.ui.dialog(template, {
 									title: self.i18n.active().strategy.popupEditFaxbox.titles.create,
 									position: ['center', 20],
@@ -1346,8 +1405,14 @@ define(function(require) {
 								faxboxId: strategyData.callflows.MainFaxing.flow.data.id
 							},
 							success: function(faxbox) {
-								var template = $(monster.template(self, 'strategy-popupEditFaxbox', {
-										email: faxbox.hasOwnProperty('notifications') && faxbox.notifications.hasOwnProperty('inbound') && faxbox.notifications.inbound.hasOwnProperty('email') ? faxbox.notifications.inbound.email.send_to : ''
+								var template = $(self.getTemplate({
+										name: 'popupEditFaxbox',
+										data: {
+											email: faxbox.hasOwnProperty('notifications') && faxbox.notifications.hasOwnProperty('inbound') && faxbox.notifications.inbound.hasOwnProperty('email')
+													? faxbox.notifications.inbound.email.send_to
+													: ''
+										},
+										submodule: 'strategy'
 									})),
 									popup = monster.ui.dialog(template, {
 										title: self.i18n.active().strategy.popupEditFaxbox.titles.edit,
@@ -2305,7 +2370,12 @@ define(function(require) {
 				templateData.resources.days.push({ value: i });
 			}
 
-			container.append(monster.template(self, 'strategy-holidayLine', templateData));
+			container
+				.append($(self.getTemplate({
+					name: 'holidayLine',
+					data: templateData,
+					submodule: 'strategy'
+				})));
 		},
 
 		strategyShowMenuPopup: function(params) {
@@ -2323,13 +2393,22 @@ define(function(require) {
 						success: function(response) {
 							var greetingFiles,
 								noGreetingFiles;
-							if(response.data.length > 0) {
+							if (response.data.length > 0) {
 								greetingFiles = response.data;
 							} else {
 								noGreetingFiles = true;
 							}
 
-							template = $(monster.template(self, 'strategy-menuPopup', { menu: menu, greeting: greeting, greetingFiles: greetingFiles, noGreetingFiles: noGreetingFiles }));
+							template = $(self.getTemplate({
+								name: 'menuPopup',
+								data: {
+									menu: menu,
+									greeting: greeting,
+									greetingFiles: greetingFiles,
+									noGreetingFiles: noGreetingFiles
+								},
+								submodule: 'strategy'
+							}));
 
 							var popup = monster.ui.dialog(template, {
 								title: self.i18n.active().strategy.popup.title + ' - ' + label,
@@ -2341,11 +2420,16 @@ define(function(require) {
 								dropdownCallEntities = self.strategyGetCallEntitiesDropdownData(popupCallEntities);
 
 							_.each(strategyData.callflows[name].flow.children, function(val, key) {
-								menuLineContainer.append(monster.template(self, 'strategy-menuLine', {
-									number: key,
-									callEntities: dropdownCallEntities,
-									selectedId: val.data.id || val.data.endpoints[0].id
-								}));
+								menuLineContainer
+									.append($(self.getTemplate({
+										name: 'menuLine',
+										data: {
+											number: key,
+											callEntities: dropdownCallEntities,
+											selectedId: val.data.id || val.data.endpoints[0].id
+										},
+										submodule: 'strategy'
+									})));
 							});
 
 							$.each(menuLineContainer.find('.target-input'), function() {
@@ -2497,7 +2581,13 @@ define(function(require) {
 			container.find('.add-menu-line a').on('click', function(e) {
 				e.preventDefault();
 				var popupCallEntities = $.extend(true, {}, strategyData.callEntities, { voicemail: strategyData.voicemails }, { directory: strategyData.directories }),
-					menuLine = $(monster.template(self, 'strategy-menuLine', { callEntities: self.strategyGetCallEntitiesDropdownData(popupCallEntities) })),
+					menuLine = $(self.getTemplate({
+						name: 'menuLine',
+						data: {
+							callEntities: self.strategyGetCallEntitiesDropdownData(popupCallEntities)
+						},
+						submodule: 'strategy'
+					})),
 					icon = menuLine.find('.target-select option:selected').parents('optgroup').data('icon');
 
 				container.find('.menu-block .left .content').append(menuLine);

submodules/users/users.js

@@ -48,11 +48,19 @@ define(function(require) {
 
 			self.usersGetData(function(data) {
 				var dataTemplate = self.usersFormatListData(data, _sortBy),
-					template = $(monster.template(self, 'users-layout', dataTemplate)),
+					template = $(self.getTemplate({
+						name: 'layout',
+						data: dataTemplate,
+						submodule: 'users'
+					})),
 					templateUser;
 
 				_.each(dataTemplate.users, function(user) {
-					templateUser = monster.template(self, 'users-row', user);
+					templateUser = $(self.getTemplate({
+						name: 'row',
+						data: user,
+						submodule: 'users'
+					}));
 
 					template.find('.user-rows').append(templateUser);
 				});
@@ -506,7 +514,11 @@ define(function(require) {
 				dataTemplate = {
 					user: user
 				},
-				dialogTemplate = $(monster.template(self, 'users-deleteDialog', dataTemplate));
+				dialogTemplate = $(self.getTemplate({
+					name: 'deleteDialog',
+					data: dataTemplate,
+					submodule: 'users'
+				}));
 
 			monster.ui.tooltips(dialogTemplate);
 
@@ -688,7 +700,11 @@ define(function(require) {
 					}
 				}, function(err, results) {
 					var originalData = self.usersFormatAddUser(results),
-						userTemplate = $(monster.template(self, 'users-creation', originalData));
+						userTemplate = $(self.getTemplate({
+							name: 'creation',
+							data: originalData,
+							submodule: 'users'
+						}));
 
 					monster.ui.mask(userTemplate.find('#extension'), 'extension');
 
@@ -791,7 +807,12 @@ define(function(require) {
 				if (numbers.length > 0) {
 					var updateCallflow = function() {
 						self.usersUpdateCallflowNumbers(userId, (currentCallflow || {}).id, numbers, function(callflowData) {
-							toastr.success(monster.template(self, '!' + toastrMessages.numbersUpdated, { name: name }));
+							toastr.success(self.getTemplate({
+								name: '!' + toastrMessages.numbersUpdated,
+								data: {
+									name: name
+								}
+							}));
 
 							self.usersRender({ userId: callflowData.owner_id });
 						});
@@ -825,7 +846,11 @@ define(function(require) {
 					dataTemplate = {
 						recommendedExtension: nextExtension
 					},
-					newLineTemplate = $(monster.template(self, 'users-newExtension', dataTemplate)),
+					newLineTemplate = $(self.getTemplate({
+						name: 'newExtension',
+						data: dataTemplate,
+						submodule: 'users'
+					})),
 					listExtensions = template.find('.extensions .list-assigned-items');
 
 				monster.ui.mask(newLineTemplate.find('.input-extension '), 'extension');
@@ -874,7 +899,12 @@ define(function(require) {
 				var dataUser = $(this).parents('.grid-row').data();
 
 				self.usersDeleteDialog(dataUser, function(data) {
-					toastr.success(monster.template(self, '!' + self.i18n.active().users.toastrMessages.userDelete, { name: data.first_name + ' ' + data.last_name }));
+					toastr.success(self.getTemplate({
+						name: '!' + self.i18n.active().users.toastrMessages.userDelete,
+						data: {
+							name: data.first_name + ' ' + data.last_name
+						}
+					}));
 					self.usersRender();
 				});
 			});
@@ -977,7 +1007,12 @@ define(function(require) {
 								}
 							}
 						}, function(error, results) {
-							toastr.success(monster.template(self, '!' + toastrMessages.userUpdated, { name: results.user.first_name + ' ' + results.user.last_name }));
+							toastr.success(self.getTemplate({
+								name: '!' + toastrMessages.userUpdated,
+								data: {
+									name: results.user.first_name + ' ' + results.user.last_name
+								}
+							}));
 
 							self.usersRender({ userId: results.user.id });
 						});
@@ -986,7 +1021,10 @@ define(function(require) {
 			});
 
 			template.on('click', '#change_pin', function() {
-				var pinTemplate = $(monster.template(self, 'users-changePin')),
+				var pinTemplate = $(self.getTemplate({
+						name: 'changePin',
+						submodule: 'users'
+					})),
 					form = pinTemplate.find('#form_new_pin');
 
 				//monster.ui.validate(form);
@@ -1009,7 +1047,12 @@ define(function(require) {
 						self.usersUpdateVMBox(vmboxData, function(data) {
 							popup.dialog('close').remove();
 
-							toastr.success(monster.template(self, '!' + toastrMessages.pinUpdated, { name: currentUser.first_name + ' ' + currentUser.last_name }));
+							toastr.success(self.getTemplate({
+								name: '!' + toastrMessages.pinUpdated,
+								data: {
+									name: currentUser.first_name + ' ' + currentUser.last_name
+								}
+							}));
 						});
 					}
 				});
@@ -1024,7 +1067,11 @@ define(function(require) {
 			});
 
 			template.on('click', '#change_username', function() {
-				var passwordTemplate = $(monster.template(self, 'users-changePassword', currentUser)),
+				var passwordTemplate = $(self.getTemplate({
+						name: 'changePassword',
+						data: currentUser,
+						submodule: 'users'
+					})),
 					form = passwordTemplate.find('#form_new_username');
 
 				monster.ui.showPasswordStrength(passwordTemplate.find('#inputPassword'));
@@ -1054,7 +1101,12 @@ define(function(require) {
 					self.usersResetPassword(dataReset, function() {
 						popup.dialog('close').remove();
 
-						toastr.success(monster.template(self, '!' + toastrMessages.successResetPassword, { name: dataReset.username }));
+						toastr.success(self.getTemplate({
+							name: '!' + toastrMessages.successResetPassword,
+							data: {
+								name: dataReset.username
+							}
+						}));
 					});
 				});
 
@@ -1082,7 +1134,12 @@ define(function(require) {
 
 							popup.dialog('close').remove();
 
-							toastr.success(monster.template(self, '!' + toastrMessages.userUpdated, { name: userData.data.first_name + ' ' + userData.data.last_name }));
+							toastr.success(self.getTemplate({
+								name: '!' + toastrMessages.userUpdated,
+								data: {
+									name: userData.data.first_name + ' ' + userData.data.last_name
+								}
+							}));
 						});
 					}
 				});
@@ -1120,7 +1177,12 @@ define(function(require) {
 				currentUser.extra.licensedRole = planId;
 
 				self.usersUpdateUser(currentUser, function(userData) {
-					toastr.success(monster.template(self, '!' + toastrMessages.userUpdated, { name: userData.data.first_name + ' ' + userData.data.last_name }));
+					toastr.success(self.getTemplate({
+						name: '!' + toastrMessages.userUpdated,
+						data: {
+							name: userData.data.first_name + ' ' + userData.data.last_name
+						}
+					}));
 					self.usersRender({ userId: userData.data.id });
 				});
 			});
@@ -1133,7 +1195,11 @@ define(function(require) {
 				monster.pub('voip.devices.renderAdd', {
 					type: type,
 					callback: function(device) {
-						var rowDevice = monster.template(self, 'users-rowSpareDevice', device),
+						var rowDevice = $(self.getTemplate({
+								name: 'rowSpareDevice',
+								data: device,
+								submodule: 'users'
+							})),
 							listAssigned = template.find('.list-assigned-items');
 
 						listAssigned.find('.empty-row').hide();
@@ -1157,7 +1223,11 @@ define(function(require) {
 						dataType: 'devices',
 						okCallback: function(devices) {
 							_.each(devices, function(device) {
-								var rowDevice = monster.template(self, 'users-rowSpareDevice', device),
+								var rowDevice = $(self.getTemplate({
+										name: 'rowSpareDevice',
+										data: device,
+										submodule: 'users'
+									})),
 									listAssigned = template.find('.list-assigned-items');
 
 								listAssigned.find('.empty-row').hide();
@@ -1186,7 +1256,12 @@ define(function(require) {
 				dataDevices.oldDevices = _.keys(unassignedDevices);
 
 				self.usersUpdateDevices(dataDevices, userId, function() {
-					toastr.success(monster.template(self, '!' + toastrMessages.devicesUpdated, { name: name }));
+					toastr.success(self.getTemplate({
+						name: '!' + toastrMessages.devicesUpdated,
+						data: {
+							name: name
+						}
+					}));
 					self.usersRender({ userId: userId });
 				});
 			});
@@ -1273,8 +1348,12 @@ define(function(require) {
 						_.each(numberList, function(val) {
 							template
 								.find('.list-assigned-items')
-								.append($(monster.template(self, 'users-numbersItemRow', {
-									number: val
+								.append($(self.getTemplate({
+									name: 'numbersItemRow',
+									data: {
+										number: val
+									},
+									submodule: 'users'
 								})));
 
 							var numberDiv = template.find('[data-id="' + val.phoneNumber + '"]'),
@@ -1312,8 +1391,12 @@ define(function(require) {
 							_.each(numbers, function(number) {
 								number.phoneNumber = number.id;
 
-								var rowTemplate = $(monster.template(self, 'users-numbersItemRow', {
-										number: number
+								var rowTemplate = $(self.getTemplate({
+										name: 'numbersItemRow',
+										data: {
+											number: number
+										},
+										submodule: 'users'
 									})),
 									argsFeatures = {
 										target: rowTemplate.find('.edit-features'),
@@ -1354,7 +1437,12 @@ define(function(require) {
 				if (dataNumbers.length > 0) {
 					self.usersUpdateCallflowNumbers(userId, (currentCallflow || {}).id, dataNumbers, function(callflowData) {
 						var afterUpdate = function() {
-							toastr.success(monster.template(self, '!' + toastrMessages.numbersUpdated, { name: name }));
+							toastr.success(self.getTemplate({
+								name: '!' + toastrMessages.numbersUpdated,
+								data: {
+									name: name
+								}
+							}));
 
 							self.usersRender({ userId: callflowData.owner_id });
 						};
@@ -1639,7 +1727,11 @@ define(function(require) {
 				dataTemplate = {
 					numbers: numbers
 				},
-				template = $(monster.template(self, 'users-changePresenceIDPopup', dataTemplate)),
+				template = $(self.getTemplate({
+					name: 'changePresenceIDPopup',
+					data: dataTemplate,
+					submodule: 'users'
+				})),
 				$options = template.find('.presence-id-option');
 
 			$options.on('click', function() {
@@ -1763,7 +1855,11 @@ define(function(require) {
 		usersRenderConferencing: function(data) {
 			var self = this,
 				data = self.usersFormatConferencingData(data),
-				featureTemplate = $(monster.template(self, 'users-feature-conferencing', data)),
+				featureTemplate = $(self.getTemplate({
+					name: 'feature-conferencing',
+					data: data,
+					submodule: 'users'
+				})),
 				switchFeature = featureTemplate.find('.switch-state'),
 				featureForm = featureTemplate.find('#conferencing_form');
 
@@ -1818,7 +1914,11 @@ define(function(require) {
 		usersRenderFaxboxes: function(data) {
 			var self = this,
 				data = self.usersFormatFaxingData(data),
-				featureTemplate = $(monster.template(self, 'users-feature-faxing', data)),
+				featureTemplate = $(self.getTemplate({
+					name: 'feature-faxing',
+					data: data,
+					submodule: 'users'
+				})),
 				switchFeature = featureTemplate.find('.switch-state'),
 				popup = monster.ui.dialog(featureTemplate, {
 					title: data.user.extra.mapFeatures.faxing.title,
@@ -1888,7 +1988,11 @@ define(function(require) {
 
 		usersRenderHotdesk: function(currentUser) {
 			var self = this,
-				featureTemplate = $(monster.template(self, 'users-feature-hotdesk', currentUser)),
+				featureTemplate = $(self.getTemplate({
+					name: 'feature-hotdesk',
+					data: currentUser,
+					submodule: 'users'
+				})),
 				switchFeature = featureTemplate.find('.switch-state'),
 				requirePin = featureTemplate.find('[name="require_pin"]'),
 				featureForm = featureTemplate.find('#hotdesk_form');
@@ -1949,7 +2053,11 @@ define(function(require) {
 
 		usersRenderVMToEmail: function(currentUser) {
 			var self = this,
-				featureTemplate = $(monster.template(self, 'users-feature-vm_to_email', currentUser)),
+				featureTemplate = $(self.getTemplate({
+					name: 'feature-vm_to_email',
+					data: currentUser,
+					submodule: 'users'
+				})),
 				switchFeature = featureTemplate.find('.switch-state'),
 				featureForm = featureTemplate.find('#vm_to_email_form');
 
@@ -2042,7 +2150,11 @@ define(function(require) {
 				templateUser.caller_id.numberChoices = numberChoices;
 			}
 
-			featureTemplate = $(monster.template(self, 'users-feature-caller_id', templateUser));
+			featureTemplate = $(self.getTemplate({
+				name: 'feature-caller_id',
+				data: templateUser,
+				submodule: 'users'
+			}));
 			switchFeature = featureTemplate.find('.switch-state');
 
 			featureTemplate.find('.cancel-link').on('click', function() {
@@ -2117,7 +2229,11 @@ define(function(require) {
 		usersRenderCallForward: function(currentUser) {
 			var self = this,
 				formattedCallForwardData = self.usersFormatCallForwardData(currentUser),
-				featureTemplate = $(monster.template(self, 'users-feature-call_forward', formattedCallForwardData)),
+				featureTemplate = $(self.getTemplate({
+					name: 'feature-call_forward',
+					data: formattedCallForwardData,
+					submodule: 'users'
+				})),
 				switchFeature = featureTemplate.find('.switch-state'),
 				featureForm = featureTemplate.find('#call_forward_form'),
 				args = {
@@ -2208,7 +2324,11 @@ define(function(require) {
 
 		usersRenderDoNotDisturb: function(featureUser) {
 			var self = this,
-				featureTemplate = $(monster.template(self, 'users-feature-do_not_disturb', featureUser)),
+				featureTemplate = $(self.getTemplate({
+					name: 'feature-do_not_disturb',
+					data: featureUser,
+					submodule: 'users'
+				})),
 				switchFeature = featureTemplate.find('#checkbox_do_not_disturb');
 
 			featureTemplate.find('.cancel-link').on('click', function() {
@@ -2263,7 +2383,13 @@ define(function(require) {
 			} else {
 				var currentUser = params.currentUser,
 					userCallflow = params.userCallflow,
-					featureTemplate = $(monster.template(self, 'users-feature-find_me_follow_me', { currentUser: currentUser })),
+					featureTemplate = $(self.getTemplate({
+						name: 'feature-find_me_follow_me',
+						data: {
+							currentUser: currentUser
+						},
+						submodule: 'users'
+					})),
 					switchFeature = featureTemplate.find('.switch-state'),
 					featureForm = featureTemplate.find('#find_me_follow_me_form'),
 					args = {
@@ -2627,7 +2753,11 @@ define(function(require) {
 		usersRenderCallRecording: function(params) {
 			var self = this,
 				templateData = self.usersFormatCallRecording(params),
-				featureTemplate = $(monster.template(self, 'users-feature-call_recording', templateData)),
+				featureTemplate = $(self.getTemplate({
+					name: 'feature-call_recording',
+					data: templateData,
+					submodule: 'users'
+				})),
 				switchFeature = featureTemplate.find('.switch-state'),
 				featureForm = featureTemplate.find('#call_recording_form'),
 				popup;
@@ -2717,7 +2847,11 @@ define(function(require) {
 						mediaList: medias,
 						media: 'music_on_hold' in currentUser && 'media_id' in currentUser.music_on_hold ? currentUser.music_on_hold.media_id : silenceMediaId
 					},
-					featureTemplate = $(monster.template(self, 'users-feature-music_on_hold', templateData)),
+					featureTemplate = $(self.getTemplate({
+						name: 'feature-music_on_hold',
+						data: templateData,
+						submodule: 'users'
+					})),
 					switchFeature = featureTemplate.find('.switch-state'),
 					popup,
 					closeUploadDiv = function(newMedia) {
@@ -2974,7 +3108,11 @@ define(function(require) {
 				});
 
 				var dataTemplate = self.usersFormatUserData(userData),
-					template = $(monster.template(self, 'users-features', dataTemplate));
+					template = $(self.getTemplate({
+						name: 'features',
+						data: dataTemplate,
+						submodule: 'users'
+					}));
 
 				callback && callback(template, dataTemplate);
 			});
@@ -3037,7 +3175,11 @@ define(function(require) {
 				});
 
 				var dataTemplate = self.usersFormatUserData(userData, results.mainDirectory, results.mainCallflow, results.vmboxes.userVM, results.vmboxes.listExisting),
-					template = $(monster.template(self, 'users-name', dataTemplate));
+					template = $(self.getTemplate({
+						name: 'name',
+						data: dataTemplate,
+						submodule: 'users'
+					}));
 
 				monster.ui.validate(template.find('form.user-fields'), {
 					rules: {
@@ -3153,7 +3295,11 @@ define(function(require) {
 
 			self.usersGetNumbersData(userId, function(results) {
 				self.usersFormatNumbersData(userId, results, function(results) {
-					template = $(monster.template(self, 'users-numbers', results));
+					template = $(self.getTemplate({
+						name: 'numbers',
+						data: results,
+						submodule: 'users'
+					}));
 
 					_.each(results.assignedNumbers, function(number) {
 						var numberDiv = template.find('[data-id="' + number.phoneNumber + '"]'),
@@ -3179,7 +3325,11 @@ define(function(require) {
 			self.usersGetDevicesData(function(results) {
 				var formattedResults = self.usersFormatDevicesData(userId, results);
 
-				template = $(monster.template(self, 'users-devices', formattedResults));
+				template = $(self.getTemplate({
+					name: 'devices',
+					data: formattedResults,
+					submodule: 'users'
+				}));
 
 				callback && callback(template, results);
 			});
@@ -3190,7 +3340,11 @@ define(function(require) {
 
 			self.usersGetNumbersData(userId, function(results) {
 				self.usersFormatNumbersData(userId, results, function(results) {
-					template = $(monster.template(self, 'users-extensions', results));
+					template = $(self.getTemplate({
+						name: 'extensions',
+						data: results,
+						submodule: 'users'
+					}));
 
 					callback && callback(template, results);
 				});
@@ -3201,7 +3355,11 @@ define(function(require) {
 
 			self.usersGetUser(userId, function(user) {
 				var formattedData = self.usersFormatLicensedRolesData(user),
-					template = $(monster.template(self, 'users-licensed-roles', formattedData));
+					template = $(self.getTemplate({
+						name: 'licensed-roles',
+						data: formattedData,
+						submodule: 'users'
+					}));
 
 				monster.ui.chosen(template.find('#licensed_role'));
 

submodules/vmboxes/vmboxes.js

@@ -24,11 +24,19 @@ define(function(require) {
 
 			self.vmboxesGetData(function(data) {
 				var dataTemplate = self.vmboxesFormatListData(data),
-					template = $(monster.template(self, 'vmboxes-layout', dataTemplate)),
+					template = $(self.getTemplate({
+						name: 'layout',
+						data: dataTemplate,
+						submodule: 'vmboxes'
+					})),
 					templateVMBox;
 
 				_.each(dataTemplate.vmboxes, function(vmbox) {
-					templateVMBox = monster.template(self, 'vmboxes-row', vmbox);
+					templateVMBox = $(self.getTemplate({
+						name: 'row',
+						data: vmbox,
+						submodule: 'vmboxes'
+					}));
 
 					template.find('.vmboxes-rows').append(templateVMBox);
 				});
@@ -113,8 +121,19 @@ define(function(require) {
 		vmboxesRenderVmbox: function(data, callback) {
 			var self = this,
 				mode = data.id ? 'edit' : 'add',
-				popupTitle = mode === 'edit' ? monster.template(self, '!' + self.i18n.active().vmboxes.editTitle, { name: data.name }) : self.i18n.active().vmboxes.addTitle,
-				templateVMBox = $(monster.template(self, 'vmboxes-edit', data)),
+				popupTitle = mode === 'edit'
+					? self.getTemplate({
+						name: '!' + self.i18n.active().vmboxes.editTitle,
+						data: {
+							name: data.name
+						}
+					})
+					: self.i18n.active().vmboxes.addTitle,
+				templateVMBox = $(self.getTemplate({
+					name: 'edit',
+					data: data,
+					submodule: 'vmboxes'
+				})),
 				popup,
 				callbacks = {
 					afterSave: function(vmbox) {
@@ -135,7 +154,13 @@ define(function(require) {
 			_.each(data.notify_email_addresses, function(recipient) {
 				templateVMBox
 					.find('.saved-entities')
-						.append(monster.template(self, 'vmboxes-emailRow', { name: recipient }));
+						.append($(self.getTemplate({
+							name: 'emailRow',
+							data: {
+								name: recipient
+							},
+							submodule: 'vmboxes'
+						})));
 			});
 
 			monster.pub('common.mediaSelect.render', {
@@ -201,7 +226,12 @@ define(function(require) {
 
 				monster.ui.confirm(self.i18n.active().vmboxes.confirmDeleteVmbox, function() {
 					self.vmboxesDeleteVmbox(voicemailId, function(vmbox) {
-						toastr.success(monster.template(self, '!' + self.i18n.active().vmboxes.deletedVmbox, { vmboxName: vmbox.name }));
+						toastr.succes(self.getTemplate({
+							name: '!' + self.i18n.active().vmboxes.deletedVmbox,
+							data: {
+								vmboxName: vmbox.name
+							}
+						}));
 
 						callbacks.afterDelete && callbacks.afterDelete(vmbox);
 					});
@@ -218,7 +248,13 @@ define(function(require) {
 
 				var inputName = templateVMBox.find('#entity_name'),
 					name = inputName.val(),
-					templateFlag = monster.template(self, 'vmboxes-emailRow', { name: name });
+					templateFlag = $(self.getTemplate({
+						name: 'emailRow',
+						data: {
+							name: name
+						},
+						submodule: 'vmboxes'
+					}));
 
 				templateVMBox.find('.saved-entities').prepend(templateFlag);