Language submodule

src/apps/callflows/app.js

@@ -20,6 +20,7 @@ define(function(require) {
 		'featurecodes',
 		'flushdtmf',
 		'groups',
+		'language',
 		'media',
 		'menu',
 		'misc',

src/apps/callflows/i18n/en-US.json

@@ -1370,6 +1370,15 @@
 			}
 		},
 
+		"language": {
+			"language": "Language",
+			"tooltip": "Prompts and other content take optional language settings to know which to fetch. Use this callflow action to set the language for the call.",
+			"edit_dialog": {
+				"title": "Language",
+				"language": "Language"
+			}
+		},
+
 		"__comment": "UI-1929: adding time of day sets to adv. callflows",
 		"__version": "v4.1",
 		"temporalset": {
@@ -1633,9 +1642,6 @@
 		"resource_name": "Resource",
 		"this_callflow_is_outdated": "This callflow is outdated, please resave this callflow before continuing.",
 		"hot_desking_name": "Hot Desking",
-		"language_title": "Language",
-		"language": "Language",
-		"language_tip": "This callflow action lets you change the language of the prompts used in this callflow!",
 		"searchLink": "Search on the server for",
 		"searchReset": "Click again to clear the search",
 		"__comment": "UI-1742: Add a flag to list callflows in Main Numbers",

src/apps/callflows/style/app.css

@@ -18,6 +18,7 @@
 @import url('../submodules/cidlistmatch/cidlistmatch.css');
 @import url('../submodules/faxdetect/faxdetect.css');
 @import url('../submodules/flushdtmf/flushdtmf.css');
+@import url('../submodules/language/language.css');
 @import url('../../../css/vendor/bootstrap-tour.css');
 /* style.css */
 #ws_callflow > .callflow {

src/apps/callflows/submodules/language/language.css

@@ -0,0 +1,3 @@
+.language-form {
+	margin: 15px 0 0;
+}

src/apps/callflows/submodules/language/language.js

@@ -0,0 +1,111 @@
+define(function(require) {
+	var $ = require('jquery'),
+		monster = require('monster');
+
+	var languagesList = monster.supportedLanguages.map(function(code) {
+		var shortLangCode = code.split('-')[0];
+		var monsterLanguages = monster.apps.core.i18n.active().monsterLanguages;
+		var fullLabel = monster.util.tryI18n(monsterLanguages, code);
+		var labelWithShortLangCode = fullLabel.split(' ')[0] + ' (' + shortLangCode + ')';
+		return {
+			value: code.split('-')[0],
+			label: labelWithShortLangCode
+		};
+	});
+
+	var app = {
+		requests: {},
+
+		subscribe: {
+			'callflows.fetchActions': 'languageDefineActions'
+		},
+
+		languageDefineActions: function(args) {
+			var self = this,
+				callflow_nodes = args.actions,
+				i18n = self.i18n.active().callflows.language;
+
+			$.extend(callflow_nodes, {
+				'language[]': {
+					name: i18n.language,
+					icon: 'language',
+					category: self.i18n.active().oldCallflows.advanced_cat,
+					module: 'language',
+					tip: i18n.tooltip,
+					data: {},
+					rules: [{
+						type: 'quantity',
+						maxSize: 1
+					}],
+					isUsable: 'true',
+					weight: 48,
+					caption: function(node, caption_map) {
+						var langShortCode = node.getMetadata('language') || '';
+						return self.languageGetCaption(langShortCode);
+					},
+					edit: function(node, callback) {
+						self.languageShowEditDialog(node, callback);
+					}
+				}
+			});
+		},
+
+		languageGetCaption: function(langShortCode) {
+			var captionText = '';
+			if(langShortCode) {
+				for(var i=0, len=languagesList.length; i<len; i++) {
+					if(languagesList[i].value === langShortCode) {
+						captionText = languagesList[i].label;
+						break;
+					}
+				}
+			} else {
+				captionText = langShortCode;
+			}
+
+			return captionText;
+		},
+
+		languageShowEditDialog: function (node, callback) {
+			var self = this,
+				$dialogHtml,
+				$dialog,
+				i18n = self.i18n.active().callflows.language,
+				language = node.getMetadata('language') || '';
+
+			$dialogHtml = $(self.getTemplate({
+				name: 'dialogEdit',
+				data: {
+					selected: language,
+					languages: languagesList
+				},
+				submodule: 'language'
+			}));
+
+			$dialog = monster.ui.dialog($dialogHtml, {
+				title: i18n.edit_dialog.title,
+				minHeight: '0',
+				width: 450,
+				beforeClose: function() {
+					if (typeof callback === 'function') {
+						callback();
+					}
+				}
+			});
+
+			$dialogHtml.find('.js-save').click(function() {
+				var langShortCode = $('#language', $dialog).val();
+				node.setMetadata('language', langShortCode);
+				node.caption = self.languageGetCaption(langShortCode);
+
+				if (typeof callback === 'function') {
+					callback();
+				}
+
+				$dialog.dialog('close');
+			});
+		}
+	};
+
+	return app;
+});

src/apps/callflows/submodules/language/views/dialogEdit.html

@@ -0,0 +1,26 @@
+<div class="dialog_popup callflows-port language-dialog">
+	<form method="post" action="#" class="language-form">
+		<div class="form_content">
+			<div class="popup_field clear">
+				<label for="language">
+					{{ i18n.callflows.language.edit_dialog.language }}
+				</label>
+				<div class="select_wrapper">
+					<select name="language" id="language">
+						{{#select selected}}
+							{{#each languages}}
+								<option value="{{ this.value }}">{{ this.label }}</option>
+							{{/each}}
+						{{/select}}
+					</select>
+				</div>
+			</div>
+		</div>
+	</form>
+
+	<div class="buttons-center">
+		<button class="monster-button monster-button-primary js-save">
+			{{ i18n.save }}
+		</button>
+	</div>
+</div>

src/apps/callflows/submodules/misc/misc.js

@@ -547,56 +547,6 @@ define(function(require) {
 						});
 					}
 				},
-				'language[]': {
-					name: self.i18n.active().oldCallflows.language,
-					icon: 'language',
-					category: self.i18n.active().oldCallflows.advanced_cat,
-					module: 'language',
-					tip: self.i18n.active().oldCallflows.language_tip,
-					data: {
-					},
-					rules: [
-						{
-							type: 'quantity',
-							maxSize: '1'
-						}
-					],
-					isUsable: 'true',
-					weight: 50,
-					caption: function(node) {
-						return node.getMetadata('language') || '';
-					},
-					edit: function(node, callback) {
-						var popup, popup_html;
-
-						popup_html = $(self.getTemplate({
-							name: 'language',
-							data: {
-								data_language: {
-									'language': node.getMetadata('language') || ''
-								}
-							},
-							submodule: 'misc'
-						}));
-
-						$('#add', popup_html).click(function() {
-							var language = $('#language_id_input', popup_html).val();
-							node.setMetadata('language', language);
-							node.caption = language;
-
-							popup.dialog('close');
-						});
-
-						popup = monster.ui.dialog(popup_html, {
-							title: self.i18n.active().oldCallflows.language_title,
-							beforeClose: function() {
-								if (typeof callback === 'function') {
-									callback();
-								}
-							}
-						});
-					}
-				},
 				'group_pickup[]': {
 					name: self.i18n.active().oldCallflows.group_pickup,
 					icon: 'hand-pointer-o',

src/apps/callflows/submodules/misc/views/language.html

@@ -1,14 +0,0 @@
-<div class="dialog_popup callflows-port">
-	<h1>{{ i18n.oldCallflows.language }}</h1>
-	<form name="form" method="post" action="#">
-		<div class="form_content">
-			<div class="popup_field">
-				<label for="language_id_input">{{ i18n.oldCallflows.language }} </label>
-				<input type="text" id="language_id_input" class="medium" value="{{data_language.language}}"/>
-			</div>
-		</div>
-	</form>
-	<div class="buttons-center">
-		<button id="add" class="monster-button monster-button-primary">{{ i18n.save }}</button>
-	</div>
-</div>