refs #3971 import() forms, refactor, async, retrocompatibility

app.js

@@ -1,6 +1,7 @@
 __webpack_public_path__ = _PUBLIC_PATH;
 
-require('hedera/hedera');
+import 'promise-polyfill/src/polyfill';
+import 'hedera/hedera';
 const locales = require('./import').locales;
 const packageJson = require('./package.json');
 
@@ -8,31 +9,33 @@ window.onload = function() {
 	loadLocale(main);
 }
 
-function main(req) {
-	if (req) onLocaleLoad(req);
+function main() {
 	Vn.setVersion(packageJson.version);
-
-	hederaWeb = new Hedera.App();
+	const hederaWeb = new Hedera.App();
+	window.hederaWeb = hederaWeb;
 	hederaWeb.run();
 }
 
-function loadLocale(cb) {
+function loadLocale(callback) {
 	Vn.Locale.init();
 	var lang = Vn.Locale.language;
 
 	var req = require.context('js', true, /locale\/en.yml$/);
-	onLocaleLoad(req);
+	onLocaleLoad(Vn.Locale.fallbackLang, req);
 
-	const fn = locales[lang];
-	if (fn)
-		fn(cb);
+	const loadFn = locales[lang];
+	if (loadFn)
+		loadFn(function(req) {
+			onLocaleLoad(lang, req);
+			callback();
+		});
 	else
-		cb();
+		callback();
 }
 
-function onLocaleLoad(req) {
+function onLocaleLoad(lang, req) {
 	var keys = req.keys();
 
 	for (var i = 0; i < keys.length; i++)
-		Vn.Locale.add(req(keys[i]));
+		Vn.Locale.add(req(keys[i]), lang);
 }

forms/account/conf/index.js

@@ -27,8 +27,7 @@ export default new Class({
 			this.$.oldPassword.focus();
 	}
 
-	,onPassModifyClick() {
-		try {
+	,async onPassModifyClick() {
 		var oldPassword = this.$.oldPassword.value;
 		var newPassword = this.$.newPassword.value;
 		var repeatedPassword = this.$.repeatPassword.value;
@@ -46,15 +45,16 @@ export default new Class({
 			this.conn.send('user/restore-password', params,
 				this._onPassChange.bind(this));
 		} else {
+			try {
 				let userId = this.gui.user.id;
 				params.oldPassword = oldPassword;
-				this.conn.lbSend('PATCH',
+				await this.conn.lbSend('PATCH',
 					`Accounts/${userId}/changePassword`, params,
-					this._onPassChange.bind(this)
 				);
+				this._onPassChange();
+			} catch(err) {
+				this._onPassChange(null, err);
 			}
-		} catch (e) {
-			Htk.Toast.showError(e.message);
 		}
 	}
 

forms/ecomerce/basket/index.js

@@ -22,6 +22,7 @@ export default new Class({
 	},
 
 	onConfigureClick() {
+		test();
 		Htk.Toast.showWarning(_('RememberReconfiguringImpact'));
 		this.hash.setAll({form: 'ecomerce/checkout'});
 	},

forms/ecomerce/catalog/index.js

@@ -1,5 +1,6 @@
+import './style.scss';
 
-export default new Class({
+const Catalog = new Class({
 	Extends: Hedera.Form,
 	Template: require('./ui.xml')
 	
@@ -30,7 +31,7 @@ export default new Class({
 		if (localStorage.getItem('hederaView'))
 			this.setView(parseInt(localStorage.getItem('hederaView')));
 		else
-			this.setView(Hedera.Catalog.View.GRID);
+			this.setView(Catalog.View.GRID);
 
 		this.onFilterChange();
 	}
@@ -144,19 +145,19 @@ export default new Class({
 	}
 	
 	,setView(view) {
-		if (view === Hedera.Catalog.View.GRID) {
+		if (view === Catalog.View.GRID) {
 			this.$.viewButton.setProperties({
 				icon: 'view_list',
 				tip: _('List view')
 			});
-			this.view = Hedera.Catalog.View.GRID;
+			this.view = Catalog.View.GRID;
 			var className = 'grid-view';
 		} else {
 			this.$.viewButton.setProperties({
 				icon: 'grid_on',
 				tip: _('Grid view')
 			});
-			this.view = Hedera.Catalog.View.LIST;
+			this.view = Catalog.View.LIST;
 			var className = 'list-view';
 		}
 		
@@ -166,8 +167,8 @@ export default new Class({
 	}
 	
 	,onSwitchViewClick() {
-		this.setView(this.view === Hedera.Catalog.View.LIST ?
-			Hedera.Catalog.View.GRID : Hedera.Catalog.View.LIST);
+		this.setView(this.view === Catalog.View.LIST ?
+			Catalog.View.GRID : Catalog.View.LIST);
 	}
 	
 	,onItemsChange(model, status) {
@@ -321,9 +322,11 @@ export default new Class({
 	}
 });
 
-Hedera.Catalog.extend({
+Catalog.extend({
 	View: {
 		LIST: 0,
 		GRID: 1
 	}
 });
+
+export default Catalog;

forms/ecomerce/catalog/ui.xml

@@ -152,7 +152,7 @@
 			on-click="this.onAddItemClick($event, $iter)">
 			<htk-image
 				directory="catalog"
-				subdir="500x500"
+				subdir="200x200"
 				form="$iter"
 				column="image"
 				stamp-column="updated"

forms/ecomerce/confirm/index.js

@@ -64,6 +64,7 @@ export default new Class({
 		}
 		
 		var methods = [];
+		let selectedMethod;
 		
 		if (totalDebt <= 0) {
 			methods = ['balance'];

forms/reports/items-form/index.js

@@ -1,6 +1,8 @@
+import './style.scss';
 
 export default new Class({
-	Extends: Hedera.Form
+	Extends: Hedera.Form,
+	Template: require('./ui.xml')
 	
 	,activate() {
 		this.$.lot.assign({

forms/reports/shelves/index.js

@@ -1,6 +1,8 @@
+import './style.scss';
 
 export default new Class({
-	Extends: Hedera.Form
+	Extends: Hedera.Form,
+	Template: require('./ui.xml')
 
 	,activate() {
 		this.$.lot.assign({

import.js

@@ -1,65 +1,86 @@
 
 export const locales = {
-    'ca': cb => require([], () => cb(require.context('js', true, /locale\/ca.yml$/))),
-    'es': cb => require([], () => cb(require.context('js', true, /locale\/es.yml$/))),
-    'fr': cb => require([], () => cb(require.context('js', true, /locale\/fr.yml$/))),
-    'mn': cb => require([], () => cb(require.context('js', true, /locale\/mn.yml$/))),
-    'pt': cb => require([], () => cb(require.context('js', true, /locale\/pt.yml$/)))
+	ca: cb => require([], 
+		() => cb(require.context('js', true, /locale\/ca.yml$/))),
+	es: cb => require([], 
+		() => cb(require.context('js', true, /locale\/es.yml$/))),
+	fr: cb => require([], 
+		() => cb(require.context('js', true, /locale\/fr.yml$/))),
+	mn: cb => require([], 
+		() => cb(require.context('js', true, /locale\/mn.yml$/))),
+	pt: cb => require([], 
+		() => cb(require.context('js', true, /locale\/pt.yml$/)))
 };
 
-export const formMap = {
-	'account/address':
+export const routes = {
+	account: {
+		address:
 			() => import('account/address'),
-	'account/address-list':
+		addressList:
 			() => import('account/address-list'),
-	'account/conf':
-		() => import('account/conf'),
-	'admin/access-log':
+		conf:
+			() => import('account/conf')
+	},
+	admin: {
+		accessLog:
 			() => import('admin/access-log'),
-	'admin/connections':
+		connections:
 			() => import('admin/connections'),
-	'admin/items':
+		items:
 			() => import('admin/items'),
-	'admin/links':
+		links:
 			() => import('admin/links'),
-	'admin/photos':
+		photos:
 			() => import('admin/photos'),
-	'admin/queries':
+		queries:
 			() => import('admin/queries'),
-	'admin/users':
+		users:
 			() => import('admin/users'),
-	'admin/visits':
-		() => import('admin/visits'),
-	'agencies/packages':
+		visits:
+			() => import('admin/visits')
+	},
+	agencies: {
+		packages:
 			() => import('agencies/packages'),
-	'agencies/provinces':
-		() => import('agencies/provinces'),
-	'cms/about':
+		provinces:
+			() => import('agencies/provinces')
+	},
+	cms: {
+		about:
 			() => import('cms/about'),
-	'cms/contact':
+		contact:
 			() => import('cms/contact'),
-	'cms/home':
+		home:
 			() => import('cms/home'),
-	'cms/location':
+		location:
 			() => import('cms/location'),
-	'cms/why':
-		() => import('cms/why'),
-	'ecomerce/basket':
+		why:
+			() => import('cms/why')
+	},
+	ecomerce: {
+		basket:
 			() => import('ecomerce/basket'),
-	'ecomerce/catalog':
+		catalog:
 			() => import('ecomerce/catalog'),
-	'ecomerce/checkout':
+		checkout:
 			() => import('ecomerce/checkout'),
-	'ecomerce/confirm':
+		confirm:
 			() => import('ecomerce/confirm'),
-	'ecomerce/invoices':
+		invoices:
 			() => import('ecomerce/invoices'),
-	'ecomerce/orders':
+		orders:
 			() => import('ecomerce/orders'),
-	'ecomerce/ticket':
-		() => import('ecomerce/ticket'),
-	'news/new':
+		ticket:
+			() => import('ecomerce/ticket')
+	},
+	news: {
+		new:
 			() => import('news/new'),
-	'news/news':
+		news:
 			() => import('news/news')
+	},
+	reports: {
+		shelves:
+			() => import('reports/shelves')
+	}
 };

js/hedera/app.js

@@ -15,7 +15,9 @@ module.exports = new Class({
 
 	,initialize() {
 		window.onerror = this._onWindowError.bind(this);
+		window.onunhandledrejection = e => this._onWindowRejection(e);
 		window.onunload = this._onWindowUnload.bind(this);
+
 		this._hash = new Vn.Hash({window: window});
 
 		var conn = new Db.Connection();
@@ -67,6 +69,12 @@ module.exports = new Class({
 		this._notifyError(error);
 	}
 	
+	,_onWindowRejection(event) {
+		const err = event.reason;
+		this._onConnError(null, err);
+		event.preventDefault();
+	}
+
 	,_onConnError(conn, error) {
 		if (error instanceof Vn.JsonException) {
 			if (error.message)

js/hedera/gui.js

@@ -1,7 +1,8 @@
 
 const Module = require('./module');
 const Tpl = require('./gui.xml').default;
-const formMap = require('../../import').formMap;
+const kebabToCamel = require('vn/string-util').kebabToCamel;
+const routes = require('../../import').routes;
 require('./gui.scss');
 
 module.exports = new Class({
@@ -98,13 +99,13 @@ module.exports = new Class({
 		this.onLogoutClick();
 	}
 	
-	,onLogoutClick() {
-		this._conn.close(this._onConnClose.bind(this));
-	}
-	
-	,_onConnClose() {
+	,async onLogoutClick() {
+		try {
+			await this._conn.close();
+		} finally {
 			this.emit('logout');
 		}
+	}
 
 	,_onConnLoadChange(conn, isLoading) {
 		if (isLoading)
@@ -369,13 +370,16 @@ module.exports = new Class({
 			this.choosedOption = newChoosedOption;
 		}
 
+		await Vn.Locale.load(`forms/${formPath}`);
+
 		let FormKlass;
 		
 		try {
 			FormKlass = (await this.importForm(formPath)).default;
 		} catch (err) {
 			this.loaderPop();
-			return Htk.Toast.showError(_('Error loading form'));
+			console.log(err);
+			return Htk.Toast.showError(_('Error loading form') +`: ${err.message}`);
 		}
 
 		this.loaderPop();
@@ -388,8 +392,13 @@ module.exports = new Class({
 	}
 
 	,async importForm(path) {
-		const fn = formMap[path];
-		return fn ? fn() : null;
+		const states = path.split('/');
+		let importFn = routes;
+		for (let i = 0; i < states.length && importFn; i++)
+			importFn = importFn[kebabToCamel(states[i])];
+		if (!importFn)
+			throw new Error(`Route '${path}' does not exist`);
+		return importFn();
 	}
 	
 	,setForm(form) {

js/hedera/login.js

@@ -1,4 +1,4 @@
-var Tpl = require('./login.xml');
+var Tpl = require('./login.xml').default;
 require('./login.scss');
 
 module.exports = new Class({
@@ -48,30 +48,24 @@ module.exports = new Class({
 		this._focusUserInput();
 	}
 	
-	,_onSubmit() {
-		this._conn.open(
+	,async _onSubmit() {
+		this._disableUi(true);
+		try {
+			await this._conn.open(
 				this.$.user.value,
 				this.$.pass.value,
-			this.$.remember.checked,
-			this._onConnOpen.bind(this)
+				this.$.remember.checked
 			);
-		this._disableUi(true);
-	}
 
-	,_onConnOpen(conn, success, error) {
+			const user = this.$.user.value;
+			if (user) localStorage.setItem('hederaLastUser', user);
+			this.emit('login');
+		} catch (err) {
+			this._focusUserInput();
+			throw err;
+		} finally {
 			this.$.pass.value = '';
 			this._disableUi(false);
-
-		if (success) {
-			var user = this.$.user.value;
-		
-			if (user)
-				localStorage.setItem('hederaLastUser', user);
-
-			this.emit('login');
-		} else {
-			this._focusUserInput();
-			throw error;
 		}
 	}
 	

js/vn/json-connection.js

@@ -43,62 +43,47 @@ module.exports = new Class({
 	 * @param {String} user The user name
 	 * @param {String} password The user password
 	 * @param {Boolean} remember Specifies if the user should be remembered
-	 * @param {Function} openCallback The function to call when operation is done
+	 * @return {Promise} Resolved when operation is done
 	 */
-	,open(user, pass, remember, callback) {
+	,async open(user, pass, remember) {
+		let params;
+
 		if (user !== null && user !== undefined) {
-			var params = {
+			params = {
 				 user: user
 				,password: pass
 				,remember: remember
 			};
 		} else
-			var params = null;
+			params = null;
 
-		this.lbSend('POST', 'Accounts/login', params,
-			this._onOpen.bind(this, callback, remember));
-	}
-
-	/*
-	 * Called when open operation is done.
-	 */
-	,_onOpen(callback, remember, json, error) {
-		if (json) {
-			this._connected = true;
-			this.token = json.token;
+		try {
+			const json = await this.lbSend('POST', 'Accounts/login', params);
 
 			var storage = remember ? localStorage : sessionStorage;
-			storage.setItem('vnToken', this.token);
+			storage.setItem('vnToken', json.token);
 
+			this.token = json.token;
+			this._connected = true;
 			this.emit('openned');
-		} else	
+		} catch(err) {
 			this._closeClient();
-
-		if (callback)
-			callback(this, this._connected, error);
+			throw err;
+		}
 	}
 
 	/**
 	 * Closes the connection to the REST service.
 	 *
-	 * @param {Function} callback The function to call when operation is done
+	 * @return {Promise} Resolved when operation is done
 	 */
-	,close(callback) {
-		this.lbSend('POST', 'Accounts/logout', null,
-			this._onClose.bind(this, callback));
+	,async close() {
+		await this.lbSend('POST', 'Accounts/logout');
 		this._closeClient();
-	}
-
-	/*
-	 * Called when close operation is done.
-	 */
-	,_onClose(callback, json, error) {
 		this.emit('closed');
-
-		if (callback)
-			callback(this, null, error);
 	}
 
+	
 	,_closeClient() {
 		this._connected = false;
 		this.clearToken();
@@ -203,18 +188,25 @@ module.exports = new Class({
 		this._addRequest();
 	}
 
-	,lbSend(method, url, params, callback) {
+	,async lbSend(method, url, params) {
 		var request = new XMLHttpRequest();
 		request.open(method, `api/${url}`, true);
 		request.setRequestHeader('Content-Type',
 			'application/json;charset=utf-8');
 		if (this.token)
 			request.setRequestHeader('Authorization', this.token);
+
+		this._addRequest();
+		return await new Promise((resolve, reject) => {
+			function callback(data, err) {
+				if (err) return reject(err);
+				resolve(data);
+			}
+
 			request.onreadystatechange =
 				this._onStateChange.bind(this, request, callback);
 			request.send(params && JSON.stringify(params));
-
-		this._addRequest();
+		});
 	}
 
 	,_addRequest() {

js/vn/locale.js

@@ -1,101 +1,97 @@
-var yaml = require('js-yaml');
-vnLocaleStrings = {};
+const yaml = require('js-yaml');
+
+const locales = {};
+let fallbackLang = 'en';
+let lang = null;
 
 /**
  * Class to manage the internationalization.
  */
 module.exports =
 {
-	language: null
-	,defaultLang: 'en'
+	init() {
+		if (lang) return;
+		this.loads = {};
+		this.locales = locales;
+		this.fallbackLang = fallbackLang;
 
-	,init() {
-		if (this.language)
-			return;
-
-		var language = this.defaultLang;
-		var languages = navigator.languages;
+		const languages = navigator.languages;
 
 		if (languages && languages.length > 0)
-			language = languages[0];
+			lang = languages[0];
 		else if (navigator.language)
-			language = navigator.language;
+			lang = navigator.language;
 
-		this.language = language.substr(0, 2);
-	}
+		lang = lang ? lang.substr(0, 2) : fallbackLang;
+		this.language = lang;
+	},
 
-	,load(path, callback) {
+	async load(path) {
 		this.init();
+		await Promise.all([
+			this.loadLang(path, fallbackLang),
+			this.loadLang(path, lang)
+		]);
+	},
 
-		var data = {
-			path: path,
-			callback: callback,
-			defOk: false,
-			orgOk: this.defaultLang === this.language
-		};
+	/**
+	 * @returns {Promise}
+	 */
+	loadLang(path, lang) {
+		let langLoad = this.loads[lang];
+		if (!langLoad)
+			langLoad = this.loads[lang] = {};
 
-		data.def = this.createRequest(data, true, this.defaultLang);
+		if (langLoad[path])
+			return Promise.resolve();
+		langLoad[path] = true;
 
-		if (!data.orgOk)
-			data.org = this.createRequest(data, false, this.language);
-	}
-
-	,createRequest(data, isDef, lang) {
-		var langFile = data.path +'/locale/'+ lang +'.yml'+ Vn.getVersion();
-
-		var request = new XMLHttpRequest();
+		const langFile = `${path}/locale/${lang}.yml${Vn.getVersion()}`;
+		const request = new XMLHttpRequest();
 		request.open('get', langFile, true);
-		request.onreadystatechange =
-			this.onRequestReady.bind(this, request, data, isDef);
-		request.send();
-		return request;
-	}
 
-	,onRequestReady(request, data, isDef) {
+		return new Promise(
+			(resolve, reject) => {
+				request.onreadystatechange =
+					() => this.onRequestReady(request, resolve, reject);
+				request.send();
+			})
+			.then(translations => {
+				this.add(translations, lang);
+			})
+			.catch(err => {
+				langLoad[path] = false;
+				console.warn(err);
+			});
+	},
+
+	onRequestReady(request, resolve, reject) {
 		if (request.readyState != 4)
 			return;
+		if (request.status < 200 || request.status >= 400)
+			return reject(new Error(`HTTP ${request.status}: ${request.statusText}`));
 
-		if (isDef) {
-			this.loadFromRequest(request);
-			data.defOk = true;
-		} else
-			data.orgOk = true;
+		resolve(yaml.safeLoad(request.responseText));
+	},
 	
-		if (data.orgOk && data.defOk) {
-			if (data.org != null)
-				this.loadFromRequest(data.org)
-			if (data.callback)
-				data.callback();
+	add(translations, myLang) {
+		if (!translations) return;
+		myLang = myLang || lang;
+		let langLocales = locales[myLang];
+		if (!langLocales)
+			langLocales = locales[myLang] = {};
+		for (const str in translations)
+			langLocales[str] = translations[str];
 	}
 }
 
-	,loadFromRequest(request) {
-		if (request.status !== 200)
-			return false;
-	
-		try {
-			this.add(yaml.safeLoad(request.responseText));
-			return true;
-		} catch (e) {
-			console.error(e);
-		}
-
-		return false
-	}
-	
-	,loadScript(path, callback) {
-		this.init();
-		Vn.includeJs(path +'/locale/'+ this.language, callback);
-	}
-	
-	,add(translations) {
-		for (var str in translations)
-			vnLocaleStrings[str] = translations[str];
-	}
+function getString(stringId, lang) {
+	return locales[lang] ? locales[lang][stringId] : null;
 }
 
 window._ = function(stringId) {
-	var string = vnLocaleStrings[stringId];
-	return string ? string : stringId;
+	let string = getString(stringId, lang);
+	if (!string)
+		string = getString(stringId, fallbackLang);
+	return string || stringId;
 }
-

js/vn/vn.js

@@ -238,19 +238,6 @@ Vn = module.exports = {
 		this.currentCallback = callback;
 	}
 
-	/**
-	 * Includes an entire Javascript library including it's localized file.
-	 *
-	 * @param {string} libName The folder of the library
-	 * @param {Array<string>} files Array with every library file name
-	 */
-	,includeLib(libName, files) {
-		Vn.Locale.loadScript('js/'+ libName +'.js');
-
-		for (var i = 0; i < files.length; i++)
-			this.include('js/'+ libName +'/'+ files[i]);
-	}
-
 	/**
 	 * Includes a new Javascript in the current document, if the script
 	 * is already included, does nothing and calls the callback.

package.json

@@ -8,8 +8,10 @@
     "url": "https://git.verdnatura.es/hedera-web"
   },
   "devDependencies": {
+    "@babel/preset-env": "^7.20.2",
     "archiver": "^5.3.1",
     "assets-webpack-plugin": "^7.1.1",
+    "babel-loader": "^9.1.0",
     "bundle-loader": "^0.5.6",
     "css-loader": "^6.7.1",
     "eslint": "^8.15.0",
@@ -32,6 +34,7 @@
   "dependencies": {
     "js-yaml": "^3.12.1",
     "mootools": "^1.5.2",
+    "promise-polyfill": "^8.2.3",
     "require-yaml": "0.0.1",
     "tinymce": "^5.0.0"
   },

webpack.config.js

@@ -19,6 +19,15 @@ const baseConfig = {
 	module: {
 		rules: [
 			{
+				test: /\.m?js$/,
+				exclude: /(node_modules|bower_components)/,
+				use: {
+					loader: 'babel-loader',
+						options: {
+						presets: ['@babel/preset-env']
+					}
+				}
+			}, {
 				test: /\.css$/,
 				use: ['style-loader', 'css-loader'],
 			}, {