Version increased

Reviewed-on: verdnatura/hedera-web#76

.dockerignore

@@ -0,0 +1,2 @@
+debian
+node_modules

.eslintrc.yml

@@ -8,4 +8,8 @@ rules:
     no-mixed-spaces-and-tabs: 0
     no-console: 0
     no-cond-assign: 0
-    no-unexpected-multiline: 0
+    no-unexpected-multiline: 0
+    brace-style: [error, 1tbs]
+    space-before-function-paren: [error, never]
+    padded-blocks: [error, never]
+    func-call-spacing: [error, never]

.gitignore

@@ -2,3 +2,4 @@ node_modules
 build/
 config.my.php
 .vscode/
+.quasar

Dockerfile

@@ -0,0 +1,52 @@
+# Not using buster because of bug: https://bugs.php.net/bug.php?id=78870
+FROM debian:bookworm-slim
+
+ARG DEBIAN_FRONTEND=noninteractive
+
+RUN apt-get update \
+    && apt-get install -y --no-install-recommends \
+        curl \
+        ca-certificates \
+        gnupg2
+
+# Apache
+
+RUN apt-get install -y --no-install-recommends \
+        apache2 \
+        libapache2-mod-php \
+    && . /etc/apache2/envvars \
+    && ln -sfT /dev/stderr "$APACHE_LOG_DIR/error.log" \
+    && ln -sfT /dev/stdout "$APACHE_LOG_DIR/access.log" \
+    && ln -sfT /dev/stdout "$APACHE_LOG_DIR/other_vhosts_access.log"
+
+RUN a2dissite 000-default
+
+# NodeJs
+
+RUN curl -fsSL https://deb.nodesource.com/setup_20.x | bash - \
+    && apt-get install -y --no-install-recommends nodejs
+
+# Hedera
+
+RUN curl -sL https://apt.verdnatura.es/conf/verdnatura.gpg | apt-key add - \
+    && echo "deb http://apt.verdnatura.es/ bookworm main" \
+        > /etc/apt/sources.list.d/vn.list \
+    && apt-get update \
+    && apt-get install -y --no-install-recommends \
+        php-apcu \
+        php-image-text \
+        php-text-captcha \
+        php-zip \
+        hedera-web \
+        cron
+
+ARG BUILD_ID=unknown
+ARG VERSION
+ENV VERSION $VERSION
+RUN echo $VERSION
+
+RUN apt-get update \
+    && apt-get install -y php-vn-lib hedera-web=$VERSION \
+    && rm -rf /var/lib/apt/lists/*
+
+CMD ["apachectl", "-D", "FOREGROUND"]

Jenkinsfile

@@ -0,0 +1,102 @@
+#!/usr/bin/env groovy
+
+def BRANCH_ENV = [
+    test: 'test',
+    master: 'production'
+]
+def remote = [:]
+
+node {
+    stage('Setup') {
+        env.NODE_ENV = BRANCH_ENV[env.BRANCH_NAME] ?: 'dev'
+
+        echo "NODE_NAME: ${env.NODE_NAME}"
+        echo "WORKSPACE: ${env.WORKSPACE}"
+    }
+}
+pipeline {
+    agent any
+    environment {
+        PROJECT_NAME = 'hedera-web'
+    }
+    stages {
+        stage('Debuild') {
+            when {
+                anyOf {
+                    branch 'master'
+                    branch 'test'
+                }
+            }
+            agent {
+                docker {
+                    image 'registry.verdnatura.es/verdnatura/debuild:2.23.4-vn7'
+                    registryUrl 'https://registry.verdnatura.es/'
+                    registryCredentialsId 'docker-registry'
+                }
+            }
+            steps {
+                sh 'debuild -us -uc -b'
+                sh 'mkdir -p debuild'
+                sh 'mv ../hedera-web_* debuild'
+
+                script {
+                    def files = findFiles(glob: 'debuild/*.changes')
+                    files.each { file -> env.CHANGES_FILE = file.name }
+                }
+
+                configFileProvider([
+                    configFile(fileId: "dput.cf", variable: 'DPUT_CONFIG')
+                ]) {
+                    sshagent(credentials: ['jenkins-agent']) {
+                        sh 'dput --config "$DPUT_CONFIG" verdnatura "debuild/$CHANGES_FILE"'
+                    }
+                }
+            }
+        }
+        stage('Deploy') {
+            when {
+                anyOf {
+                    branch 'master'
+                    branch 'test'
+                }
+            }
+            environment {
+                CREDS = credentials('docker-registry')
+                IMAGE = "$REGISTRY/verdnatura/hedera-web"
+            }
+            steps {
+                script {
+                    def packageJson = readJSON file: 'package.json'
+                    env.VERSION = "${packageJson.version}"
+                    env.TAG = "${packageJson.version}-build${env.BUILD_ID}"
+                }
+
+                sh 'docker-compose build --build-arg BUILD_ID=$BUILD_ID --parallel'
+                sh 'docker login --username $CREDS_USR --password $CREDS_PSW $REGISTRY'
+                sh 'docker push $IMAGE:$TAG'
+
+                script {
+                    if (env.BRANCH_NAME == 'master') {
+                        sh 'docker tag $IMAGE:$TAG $IMAGE:latest'
+                        sh 'docker push $IMAGE:latest'
+                    }
+                }
+
+                withKubeConfig([
+                    serverUrl: "$KUBERNETES_API",
+                    credentialsId: 'kubernetes',
+                    namespace: 'salix'
+                ]) {
+                    sh 'kubectl set image deployment/hedera-web-$BRANCH_NAME hedera-web-$BRANCH_NAME=$IMAGE:$TAG'
+                    sh 'kubectl set image deployment/hedera-web-cron-$BRANCH_NAME hedera-web-cron-$BRANCH_NAME=$IMAGE:$TAG'
+                }
+            }
+        }
+    }
+    post {
+        unsuccessful {
+            setEnv()
+            sendEmail()
+        }
+    }
+}

README.md

@@ -1,3 +1,58 @@
 # Hedera
 
-Hedera is the main page for Verdnatura.
+Hedera is the main web shop page for Verdnatura.
+
+## Prerequisites
+
+Required applications.
+ * PHP >= 8.4
+ * Node.js >= 20.0
+
+Take a look to *debian/control* file to see additional dependencies.
+
+Copy config.php to *config.my.php* and place your DB config there.
+
+### Installing dependencies and launching
+
+Pull from repository.
+
+Run this commands on project root directory to install Node dependencies.
+```
+$ npm install
+```
+
+Install project dependences (debian/control).
+
+Pull from repository [php-vn-lib](https://gitea.verdnatura.es/verdnatura/php-vn-lib) and install [dependences](https://gitea.verdnatura.es/verdnatura/php-vn-lib/src/branch/master/debian/control) of this project.
+
+Configure config.php file.
+
+Launch project fronted.
+```
+$ npm run front
+```
+
+Launch salix backend.
+```
+$ npm run db
+$ npm run back
+```
+Launch project backend.
+```
+$ php -S 127.0.0.1:3001 -t . index.php
+```
+
+### Command line
+
+Run server side method from command line.
+```
+$ php hedera-web.php -m method_path 
+```
+
+## Built with
+
+ * [nodejs](https://nodejs.org/)
+ * [php](https://www.php.net/)
+ * [Webpack](https://webpack.js.org/)
+ * [MooTools](https://mootools.net/)
+ * [TinyMCE](https://www.tinymce.com/)

apache.conf

@@ -1,14 +1,22 @@
-# Alias /hedera-web /usr/share/hedera-web/
-# Alias /image-db /var/lib/hedera-web/image-db/
-
 <IfModule mod_mime.c>
 	AddType text/x-yaml .yml
 </IfModule>
 
+<IfModule mpm_prefork_module>
+	ServerLimit 30
+	MaxRequestWorkers 30
+	MaxRequestsPerChild 1000
+</IfModule>
+
+<VirtualHost *:80>
+	DocumentRoot /usr/share/hedera-web/
+</VirtualHost>
+
 <Directory /usr/share/hedera-web/>
 	Options -Indexes -FollowSymLinks
 	AllowOverride None
 	Require all granted
+	SetEnvIf Authorization .+ HTTP_AUTHORIZATION=$0
 	
 	<FilesMatch "\.(css|js|json|yml|php|xml|html|svg)$">
 		SetOutputFilter DEFLATE
@@ -16,13 +24,7 @@
 	
 	<FilesMatch "\.(ttf|otf|eot|woff)$">
 		<IfModule mod_headers.c>
-		Header set Access-Control-Allow-Origin "*"
+			Header set Access-Control-Allow-Origin "*"
 		</IfModule>
 	</FilesMatch>
 </Directory>
-
-<Directory /var/lib/hedera-web/image-db/>
-	Options Indexes FollowSymLinks MultiViews
-	AllowOverride FileInfo Options
-	Require all granted
-</Directory>

app.js

@@ -1,71 +1,41 @@
+__webpack_public_path__ = _PUBLIC_PATH;
 
-var assetsPath;
+import 'promise-polyfill/src/polyfill';
+import 'hedera/hedera';
+const locales = require('./import').locales;
+const packageJson = require('./package.json');
 
-if (_DEV_MODE)
-{
-	var host = window.location.host.split(':')[0];
-	assetsPath = 'http://'+ host +':'+ _DEV_SERVER_PORT +'/'+ _PUBLIC_PATH;
-}
-else
-	assetsPath = _PUBLIC_PATH;
-
-__webpack_public_path__ = assetsPath;
-
-require ('hedera/hedera');
-
-window.onload = function ()
-{
-	loadLocale (main);
+window.onload = function() {
+	loadLocale(main);
 }
 
-function main (req)
-{
-	if (req)
-		onLocaleLoad (req);
-
-	hederaWeb = new Hedera.App ();
-	hederaWeb.run ();
+function main() {
+	Vn.setVersion(packageJson.version);
+	const hederaWeb = new Hedera.App();
+	window.hederaWeb = hederaWeb;
+	hederaWeb.run();
 }
 
-function loadLocale (cb)
-{
-	Vn.Locale.init ();
+function loadLocale(callback) {
+	Vn.Locale.init();
 	var lang = Vn.Locale.language;
 
-	var req = require.context ('js', true, /locale\/en.yml$/);
-	onLocaleLoad (req);
+	var req = require.context('js', true, /locale\/en.yml$/);
+	onLocaleLoad(Vn.Locale.fallbackLang, req);
 
-	switch (lang)
-	{
-		case 'ca':
-			require ([], function () {
-				cb (require.context ('js', true, /locale\/ca.yml$/)); });
-			break;
-		case 'es':
-			require ([], function () {
-				cb (require.context ('js', true, /locale\/es.yml$/)); });
-			break;
-		case 'fr':
-			require ([], function () {	
-				cb (require.context ('js', true, /locale\/fr.yml$/)); });
-			break;
-		case 'mn':
-			require ([], function () {	
-				cb (require.context ('js', true, /locale\/mn.yml$/)); });
-			break;
-		case 'pt':
-			require ([], function () {	
-				cb (require.context ('js', true, /locale\/pt.yml$/)); });
-			break;
-		default:
-			cb ();
-	}
+	const loadFn = locales[lang];
+	if (loadFn)
+		loadFn(function(req) {
+			onLocaleLoad(lang, req);
+			callback();
+		});
+	else
+		callback();
 }
 
-function onLocaleLoad (req)
-{
-	var keys = req.keys ();
+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);
 }

config.php

@@ -12,18 +12,19 @@
  *
  *  - http://www.mydomain.org -> config.www.php
  *  - http://test.mydomain.org -> config.test.php
+ * 
+ * Put the password in base64.
  */
 return [
-
-/**
- * Database parameters.
- */
-'db' => [
-	 'host'   => 'localhost'
-	,'port'   => 3306
-	,'schema' => 'hedera-web'
-	,'user'   => 'hedera-web'
-	,'pass'   => ''
-]
-
+	/**
+	 * Database parameters.
+	 */
+	'db' => [
+		'host'   => 'localhost'
+		,'port'   => 3306
+		,'schema' => 'hedera'
+		,'user'   => 'hedera-web'
+		,'pass'   => '' // base64 encoded
+		,'tz'     => 'Europe/madrid'
+	]
 ];

debian/changelog

@@ -1,4 +1,4 @@
-hedera-web (2.0.4) stable; urgency=low
+hedera-web (24.14.11) stable; urgency=low
 
   * Initial Release.
 

debian/compat

@@ -1 +1 @@
-9
+10

debian/control

@@ -5,12 +5,12 @@ Build-Depends: build-essential, debhelper, nodejs
 Standards-Version: 3.9.3
 Section: misc
 Homepage: https://verdnatura.es
-Vcs-Git: https://git.verdnatura.es/hedera-web
+Vcs-Git: https://gitea.verdnatura.es/verdnatura/hedera-web
 
 Package: hedera-web
 Architecture: all
-Depends: apache2 | httpd, nodejs, php5-cli, php5-mysql, php5-mcrypt, php5-ldap, php5-ssh2, php5-apcu, php-vn-lib
-Suggests: php-text-captcha, php5-imap
+Depends: apache2 | httpd, nodejs, php-cli, php-vn-lib, php-apcu, php-imap, php-soap, libphp-phpmailer, php-gd, php-pear
+Suggests: php-image-text, php-text-captcha, php-zip, cron
 Section: misc
 Priority: optional
 Description: Verdnatura's web page

debian/copyright

@@ -1,6 +1,6 @@
 Format: http://dep.debian.net/deps/dep5
 Name: hedera-web
-Source: git://www.verdnatura.es/var/git/hedera-web
+Source: https://gitea.verdnatura.es/verdnatura/hedera-web
 
 Files: *
 Copyright: 2011-2015 Juan Ferrer Toribio <juan@verdnatura.es>

debian/cron.d

@@ -1,7 +1,8 @@
 MAILTO=webmaster
-*/4 *  * * *   root  hedera-web.php -m tpv/confirm-mail
-*/2 *  * * *   root  hedera-web.php -m edi/load
-0 23   * * *   root  hedera-web.php -m edi/clean
-0 5    * * *   root  hedera-web.php -m edi/update
-*/1 *  * * *   root  hedera-web.php -m misc/mail
-0 5    * * *   root  hedera-web.php -m misc/exchange-rate
+*/1    *  * * *   root  hedera-web.php -m misc/mail
+*/2    *  * * *   root  hedera-web.php -m edi/load
+0     23  * * *   root  hedera-web.php -m edi/clean
+0      5  * * *   root  hedera-web.php -m edi/update
+0      0  * * *   root  hedera-web.php -m image/sync
+0      1  * * *   root  /usr/share/hedera-web/utils/image-clean.sh > /dev/null
+0    */1  * * *   root  /usr/share/hedera-web/utils/update-browscap.sh > /dev/null

debian/install

@@ -1,4 +1,6 @@
-conf/*                      etc/hedera-web
+apache.conf                 etc/hedera-web
+config.php                  etc/hedera-web
+php.ini                     etc/hedera-web
 web                         usr/share/php/vn
 doc/*                       usr/share/doc/hedera-web
 hedera-web.php              usr/share/hedera-web
@@ -8,9 +10,10 @@ js                          usr/share/hedera-web
 pages                       usr/share/hedera-web
 reports                     usr/share/hedera-web
 rest                        usr/share/hedera-web
+utils                       usr/share/hedera-web
 index.php                   usr/share/hedera-web
 package.json                usr/share/hedera-web
 build                       usr/share/hedera-web
 README.md                   usr/share/hedera-web
 webpack.config.json         usr/share/hedera-web
-build                       usr/share/hedera-web
+build-deps/node_modules     usr/share/hedera-web

debian/links

@@ -1,2 +1,3 @@
+usr/share/hedera-web/hedera-web.php  usr/bin/hedera-web.php
 etc/hedera-web/apache.conf           etc/apache2/conf-available/hedera-web.conf
-usr/share/hedera-web/hedera-web.php  usr/bin/hedera-web.php
+etc/hedera-web/php.ini               etc/php/8.2/apache2/conf.d/99-hedera-web.ini

debian/postinst

@@ -2,14 +2,15 @@
 
 set -e
 
-(cd /usr/share/hedera-web && npm install --production)
+/usr/share/hedera-web/utils/update-browscap.sh > /dev/null
 
 if [ -e /usr/share/apache2/apache2-maintscript-helper ]
 then
     . /usr/share/apache2/apache2-maintscript-helper
+    apache2_invoke enmod rewrite
+    apache2_invoke enmod headers
     apache2_invoke enconf hedera-web.conf
 fi
 
-service php5-fpm restart
-service cron restart
-
+#service php7.3-fpm restart
+#service cron restart

debian/postrm

@@ -8,5 +8,5 @@ then
     apache2_invoke disconf hedera-web.conf
 fi
 
-rm -rf /usr/share/hedera-web/node_modules
-service cron restart
+#rm -rf /usr/share/hedera-web/node_modules
+#service cron restart

debian/rules

@@ -10,5 +10,9 @@ clean:
 	dh_clean $@
 	
 build:
-	npm --production run build
+	npm install --no-audit --prefer-offline
+	npm --omit=dev run build
 
+	mkdir -p build-deps
+	cp package.json package-lock.json build-deps
+	(cd build-deps && npm install --omit=dev --no-audit --prefer-offline)

debian/source.lintian-overrides

@@ -0,0 +1 @@
+hedera-web: package-contains-npm-ignore-file

docker-compose.yml

@@ -0,0 +1,9 @@
+version: '3.7'
+services:
+  main:
+    image: registry.verdnatura.es/verdnatura/hedera-web:${TAG:?}
+    build:
+      context: .
+      dockerfile: Dockerfile
+      args:
+        - VERSION=${VERSION:?}

env.php

@@ -2,12 +2,11 @@
 
 require_once __DIR__.'/../php-vn-lib/env.php';
 
-set_include_path (__DIR__.PATH_SEPARATOR.get_include_path ());
+set_include_path(__DIR__.PATH_SEPARATOR.get_include_path());
 
 $vnAutoloadMap['vn/web'] = __DIR__.'/web';
 
 const _ENABLE_DEBUG = TRUE;
 const _DEV_MODE = TRUE;
-const _CONFIG_DIR = __DIR__.'/../../.config';
 const _LOG_DIR = '/tmp';
 const _DATA_DIR = '/tmp';

forms/account/address-list/address-list.js

@@ -1,34 +0,0 @@
-
-Hedera.AddressList = new Class
-({
-	Extends: Hedera.Form
-
-	,activate: function ()
-	{
-		this.$.userModel.setInfo ('c', 'myClient', 'hedera');
-		this.$.addresses.setInfo ('a', 'myAddress', 'hedera');
-	}
-	
-	,onAddAddressClick: function ()
-	{
-		this.hash.setAll ({
-			form: 'account/address',
-			address: 0
-		});
-	}
-	
-	,onReturnClick: function ()
-	{
-		window.history.back();
-	}
-	
-	,onRemoveAddressClick: function (button)
-	{
-		if (confirm (_('AreYouSureDeleteAddress')))
-		{
-			button.lot.set ('isActive', false);
-			button.lot.refresh ();
-		}
-	}
-});
-

forms/account/address-list/index.js

@@ -0,0 +1,43 @@
+import './style.scss';
+
+export default new Class({
+	Extends: Hedera.Form,
+	Template: require('./ui.xml')
+
+	,activate() {
+		this.$.userModel.setInfo('c', 'myClient', 'hedera');
+		this.$.addresses.setInfo('a', 'myAddress', 'hedera');
+	}
+	
+	,onAddAddressClick() {
+		this.hash.setAll({
+			form: 'account/address',
+			address: 0
+		});
+	}
+	
+	,onReturnClick() {
+		window.history.back();
+	}
+
+	,onSetDefaultClick(event, addressId) {
+		if (event.defaultPrevented) return;
+		this.$.defaultAddress.value = addressId;
+		Htk.Toast.showMessage(_('DefaultAddressModified'));
+	}
+	
+	,async onRemoveAddressClick(form) {
+		if (confirm(_('AreYouSureDeleteAddress'))) {
+			await form.set('isActive', false);
+			await form.refresh();
+		}
+	}
+	
+	,onEditAddressClick(address) {
+		this.hash.setAll({
+			form: 'account/address',
+			address
+		});
+	}
+});
+

forms/account/address-list/locale/ca.yml

@@ -1,7 +1,8 @@
-Addresses: Direccions
+Addresses: Adreces
 Return: Tornar
 AddAddress: Afegir adreça
 SetAsDefault: Establir com per defecte
 RemoveAddress: Esborrar direcció
 EditAddress: Modificar direcció
 AreYouSureDeleteAddress: Estàs segur de que vols eliminar la direcció?
+DefaultAddressModified: Adreça per defecte modificada

forms/account/address-list/locale/en.yml

@@ -5,3 +5,4 @@ SetAsDefault: Set as default
 RemoveAddress: Remove address
 EditAddress: Edit address
 AreYouSureDeleteAddress: Are you sure you want to delete the address?
+DefaultAddressModified: Default address modified

forms/account/address-list/locale/es.yml

@@ -5,3 +5,4 @@ SetAsDefault: Establecer como predeterminada
 RemoveAddress: Borrar dirección
 EditAddress: Modificar dirección
 AreYouSureDeleteAddress: ¿Estás seguro de que quieres borrar la dirección?
+DefaultAddressModified: Dirección por defecto modificada

forms/account/address-list/locale/fr.yml

@@ -5,3 +5,4 @@ SetAsDefault: Définir par défaut
 RemoveAddress: Supprimer l'adresse
 EditAddress: Changement d'adresse
 AreYouSureDeleteAddress: Souhaitez-vous vraiment supprier l'adresse?
+DefaultAddressModified: Adresse par défaut modifiée

forms/account/address-list/locale/pt.yml

@@ -5,3 +5,4 @@ SetAsDefault: Selecionar como pre-determinado
 RemoveAddress: Eliminar Morada
 EditAddress: Modificar Morada
 AreYouSureDeleteAddress: Tens certeza que queres eliminar esta morada?
+DefaultAddressModified: Endereço padrão modificado

forms/account/address-list/style.css

@@ -1 +0,0 @@
-

forms/account/address-list/style.scss

@@ -0,0 +1,6 @@
+
+hedera-address-list {
+	.htk-list .side {
+		padding-right: 16px;
+	}
+}

forms/account/address-list/ui.xml

@@ -3,62 +3,66 @@
 	<db-form id="user-form">
 		<db-model property="model" id="user-model" updatable="true">
 			SELECT id, defaultAddressFk
-				FROM myClient
+				FROM myClient c
 		</db-model>
 	</db-form>
 	<db-model id="addresses" updatable="true">
 		SELECT a.id, a.nickname, p.name province, a.postalCode,
-				a.city, a.street, a.isActive, c.country
+		a.city, a.street, a.isActive
 			FROM myAddress a
 			LEFT JOIN vn.province p ON p.id = a.provinceFk
-			JOIN vn.country c ON c.id = p.countryFk
 				WHERE a.isActive
 	</db-model>
 </vn-group>
-<h1 id="title">
-	_Addresses
-</h1>
+<div id="title">
+	<h1><t>Addresses</t></h1>
+</div>
 <div id="actions">
 	<htk-bar-button
 		icon="add"
 		tip="_AddAddress"
-		on-click="onAddAddressClick"/>
+		on-click="this.onAddAddressClick()"/>
 </div>
-<div id="main" class="address-list">
-	<div class="card list">
+<div id="form" class="hedera-address-list">
+	<div class="box vn-w-sm">
 		<htk-radio-group
 			id="default-address"
-			lot="user-form"
-			name="defaultAddressFk"/>
-		<htk-repeater model="addresses">
+			column="defaultAddressFk"
+			form="user-form"/>
+		<htk-repeater model="addresses" form-id="address" class="htk-list">
 			<custom>
-			<a
-				class="list-row"
-				href="#!form=account/address&amp;address={{id}}"
-				title="_EditAddress">
-				<div class="actions">
+			<div class="item clickable" on-click="this.onSetDefaultClick($event, address.id)">
+				<div class="side">
 					<htk-radio
-						lot="iter"
-						name="id"
 						radio-group="default-address"
-						tip="_SetAsDefault"/>
-					<htk-button
-						lot="iter"
-						name="id"
-						tip="_RemoveAddress"
-						icon="delete"
-						on-click="onRemoveAddressClick"/>
+						val="{{address.id}}"
+						tip="_SetAsDefault"
+						name="test"/>
 				</div>
-				<p class="important">
-					{{nickname}}
-				</p>
-				<p>
-					{{street}}
-				</p>
-				<p>
-					{{postalCode}}, {{city}}
-				</p>
-			</a>
+				<div class="content">
+					<p class="important">
+						{{address.nickname}}
+					</p>
+					<p>
+						{{address.street}}
+					</p>
+					<p>
+						{{address.postalCode}}, {{address.city}}
+					</p>
+				</div>
+				<div
+					class="actions"
+					on-click="$event.preventDefault()">
+					<htk-button
+						icon="delete"
+						tip="_RemoveAddress"
+						on-click="this.onRemoveAddressClick($iter)"/>
+					<htk-button
+						icon="edit"
+						tip="_EditAddress"
+						on-click="this.onEditAddressClick(address.id)"/>
+				</div>
+			</div>
 			</custom>
 		</htk-repeater>
 	</div>

forms/account/address/address.js

@@ -1,35 +0,0 @@
-
-Hedera.Address = new Class
-({
-	Extends: Hedera.Form
-
-	,activate: function ()
-	{
-		this.$.model.setInfo ('a', 'myAddress', 'hedera', ['id'], 'id');
-		this.$.model.setDefault ('clientFk', 'a',
-			new Sql.Function ({schema: 'account', name: 'userGetId'}));
-	}
-	
-	,onStatusChange: function (form)
-	{
-		if (form.ready && this.$.params.$.address == 0)
-			form.insertRow ();
-	}
-	
-	,onOperationsDone: function ()
-	{
-		Htk.Toast.showMessage (_('AddressChangedSuccessfully'));
-		this.onReturnClick ();
-	}
-
-	,onAcceptClick: function ()
-	{
-		this.$.iter.performOperations ();
-	}
-
-	,onReturnClick: function ()
-	{
-		window.history.back();
-	}
-});
-

forms/account/address/index.js

@@ -0,0 +1,20 @@
+export default new Class({
+	Extends: Hedera.Form,
+	Template: require('./ui.xml'),
+
+	activate() {
+		this.$.model.setInfo('a', 'myAddress', 'hedera', ['id'], 'id');
+		this.$.model.setDefault('clientFk', 'a',
+			new Sql.Function({schema: 'account', name: 'myUser_getId'}));
+	},
+	
+	onStatusChange() {
+		if (this.$.iter.ready && this.hash.$.address == 0)
+			this.$.iter.insertRow();
+	},
+	
+	onOperationsDone() {
+		Htk.Toast.showMessage(_('AddressChangedSuccessfully'));
+		window.history.back()
+	}
+});

forms/account/address/style.css

@@ -1 +0,0 @@
-

forms/account/address/ui.xml

@@ -3,75 +3,81 @@
 	<vn-lot-query id="params">
 		<vn-spec name="address" type="Number"/>
 	</vn-lot-query>
-	<db-form id="iter" on-status-changed="onStatusChange">
+	<db-form id="iter" on-status-changed="this.onStatusChange()">
 		<db-model
 		 	id="model"
 			property="model"
 			updatable="true"
 			mode="ON_DEMAND"
 			lot="params"
-			on-operations-done="onOperationsDone">
+			on-operations-done="this.onOperationsDone()">
 			SELECT a.id, a.street, a.nickname, a.city,
-					a.postalCode, a.provinceFk, c.id countryFk
+					a.postalCode, a.provinceFk, p.countryFk
 				FROM myAddress a
 					LEFT JOIN vn.province p ON p.id = a.provinceFk
-					JOIN vn.country c ON c.id = p.countryFk
 				WHERE a.id = #address
 		</db-model>
 	</db-form>
 </vn-group>
-<h1 id="title">
-	_AddEditAddress
-</h1>
+<div id="title">
+	<h1><t>Configuration</t></h1>
+</div>
 <div id="actions">
-	<htk-bar-button
-		icon="ok"
-		tip="_Accept"
-		on-click="onAcceptClick"/>
 	<htk-bar-button
 		icon="close"
 		tip="_Return"
-		on-click="onReturnClick"/>
+		on-click="window.history.back()"/>
+	<htk-bar-button
+		icon="check"
+		tip="_Accept"
+		on-click="iter.performOperations()"/>
 </div>
-<div id="main" class="address">
-	<div class="card form">
-		<div>
-			<label>_Name</label>
-			<htk-entry lot="iter" name="nickname"/>
+<div id="form" class="hedera-address">
+	<div class="form box vn-w-sm vn-pa-lg">
+		<h5 class="vn-mb-md">
+			<t>AddEditAddress</t>
+		</h5>
+		<div class="form-group">
+			<htk-entry
+				placeholder="_Name"
+				form="iter" column="nickname"/>
 		</div>
-		<div>
-			<label>_Address</label>
-			<htk-entry lot="iter" name="street"/>
+		<div class="form-group">
+			<htk-entry
+				placeholder="_Address"
+				form="iter" column="street"/>
 		</div>
-		<div>
-			<label>_City</label>
-			<htk-entry lot="iter" name="city"/>
+		<div class="form-group">
+			<htk-entry
+				placeholder="_City"
+				form="iter" column="city"/>
 		</div>
-		<div>
-			<label>_ZipCode</label>
-			<htk-entry lot="iter" name="postalCode"/>
+		<div class="form-group">
+			<htk-entry
+				placeholder="_ZipCode"
+				form="iter" column="postalCode"/>
 		</div>
-		<div>
-			<label>_Country</label>
-			<htk-combo>
-				<vn-param
-					id="country"
-					property="param"
-					lot="iter"
-					name="country"
-					one-way="true"/>
+		<div class="form-group">
+			<htk-combo
+				placeholder="_Country"
+				form="iter" column="countryFk"
+				id="country"
+				one-way="true"
+				one-time="true">
 				<db-model property="model">
-					SELECT id, country FROM vn.country
-						ORDER BY country
+					SELECT id, name FROM vn.country
+						ORDER BY name
 				</db-model>
 			</htk-combo>
 		</div>
-		<div>
-			<label>_Province</label>
-			<htk-combo lot="iter" name="province_id">
-				<db-model property="model" lot="iter">
+		<div class="form-group">
+			<htk-combo
+				placeholder="_Province"
+				column="provinceFk"
+				form="iter">
+				<db-model property="model" lot="country">
 					SELECT id, name FROM vn.province
-						WHERE countryFk = #country
+						WHERE countryFk = #id
 						ORDER BY name
 				</db-model>
 			</htk-combo>

forms/account/conf/conf.js

@@ -1,95 +0,0 @@
-
-Hedera.Conf = new Class
-({
-	Extends: Hedera.Form
-
-	,activate: function ()
-	{
-		this.$.userModel.setInfo ('c', 'myClient', 'hedera');
-
-		if (this.hash.$.changePass)
-			this.onPassChangeClick ();
-	}
-	
-	,onChangePassOpen: function ()
-	{
-		this.hash.assign ({changePass: true});
-	}
-
-	,onChangePassClose: function ()
-	{
-		this.hash.assign ({changePass: undefined});
-	}
-	
-	,onPassChangeClick: function ()
-	{
-		this.$.oldPassword.value = '';
-		this.$.newPassword.value = '';
-		this.$.repeatPassword.value = '';
-
-		var recoverPass = this.$.user.get ('recoverPass');
-		this.$.oldPassword.style.display = recoverPass ? 'none' : 'block';
-		this.$.changePassword.show ();
-		
-		var focusInput;
-
-		if (recoverPass)
-			focusInput = this.$.newPassword;
-		else
-			focusInput = this.$.oldPassword;
-	
-		focusInput.focus ();
-		focusInput.select ();
-	}
-
-	,onPassModifyClick: function ()
-	{
-		try {
-			var oldPassword = this.$.oldPassword.value;
-			var newPassword = this.$.newPassword.value;
-			var repeatedPassword = this.$.repeatPassword.value;
-
-			if (newPassword == '' && repeatedPassword == '')
-				throw new Error (_('Passwords empty'));
-			if (newPassword !== repeatedPassword)
-				throw new Error (_('Passwords doesn\'t match'));
-		
-			var params = {	
-				oldPassword: oldPassword,
-				newPassword: newPassword
-			};
-			this.conn.send ('core/change-password', params,
-				this._onPassChange.bind (this));
-		}
-		catch (e)
-		{
-			Htk.Toast.showError (e.message);
-		}
-	}
-	
-	,_onPassChange: function (json, error)
-	{
-		if (json)
-		{
-			this.$.changePassword.hide ();
-			Htk.Toast.showMessage (_('Password changed!'));
-			this.$.user.refresh ();
-		}
-		else
-		{
-			Htk.Toast.showError (error.message);
-			this.$.oldPassword.select ();
-		}
-	}
-	
-	,onPassInfoClick: function ()
-	{
-		this.$.passwordInfo.show ();
-	}
-	
-	,onAddressesClick: function ()
-	{
-		this.hash.setAll ({form: 'account/address-list'});
-	}
-});
-

forms/account/conf/index.js

@@ -0,0 +1,13 @@
+import './style.scss';
+
+export default new Class({
+	Extends: Hedera.Form,
+	Template: require('./ui.xml'),
+	
+	activate() {
+		this.$.userModel.setInfo('c', 'myClient', 'hedera');
+		this.$.userModel.setInfo('u', 'myUser', 'account');
+		this.$.changePassword.conn = this.conn
+		this.$.changePassword.user = this.gui.user
+	}
+});

forms/account/conf/locale/ca.yml

@@ -1,4 +1,5 @@
 Configuration: Configuració
+Personal information: Dades personals
 Username: Nom d'usuari
 Password: Contrasenya
 Email: Correu electrònic
@@ -9,7 +10,7 @@ Receive invoices by email: Rebre factures per correu electrònic
 Old password: Contrasenya antiga
 New password: Nova contrasenya
 Repeat password: Repetir contrasenya
-Info: Info
+Requirements: Requisits
 Modify: Modificar
 Password requirements: Requisits de contrasenya
 characters long: caràcters de longitud

forms/account/conf/locale/en.yml

@@ -1,4 +1,5 @@
 Configuration: Configuration
+Personal information: Personal information
 Username: Username
 Password: Password
 Email: Email
@@ -9,7 +10,7 @@ Receive invoices by email: Receive invoices by email
 Old password: Old password
 New password: New password
 Repeat password: Repeat password
-Info: Info
+Requirements: Requirements
 Modify: Modify
 Password requirements: Password requirements
 characters long: characters long

forms/account/conf/locale/es.yml

@@ -1,4 +1,5 @@
 Configuration: Configuración
+Personal information: Datos personales
 Username: Nombre de usuario
 Password: Contraseña
 Email: Correo electrónico
@@ -9,7 +10,7 @@ Receive invoices by email: Recibir facturas por correo electrónico
 Old password: Contaseña antigua
 New password: Nueva contraseña
 Repeat password: Repetir contraseña
-Info: Info
+Requirements: Requisitos
 Modify: Modificar
 Password requirements: Requisitos de constraseña
 characters long: carácteres de longitud

forms/account/conf/locale/fr.yml

@@ -1,4 +1,5 @@
 Configuration: Configuration
+Personal information: Informations personnelles
 Username: Utilisateur
 Password: Mot de passe
 Email: Courriel
@@ -9,7 +10,7 @@ Receive invoices by email: Recevoir des factures par e-mail
 Old password: Ancien mot de passe
 New password: Nouveau mot de passe
 Repeat password: Répéter le mot de passe
-Info: Info
+Requirements: Exigences
 Modify: Modifier
 Password requirements: Mot de passe exigences
 characters long: Longs caractères

forms/account/conf/locale/pt.yml

@@ -1,25 +1,26 @@
 Configuration: Configuração
+Personal information: Dados pessoais
 Username: Nome de usuario
-Password: Palavra-Passe
+Password: Palavra-passe
 Email: E-Mail
 Display name: Nome para mostrar
 Language: Idioma
 Billing: Facturação
 Receive invoices by email: Receber facturas por e-mail
-Old password: Palavra-Passe antiga
-New password: Nova Palavra-Passe
-Repeat password: Repetir Palavra-Passe
-Info: Info
+Old password: Palavra-passe antiga
+New password: Nova Palavra-passe
+Repeat password: Repetir Palavra-passe
+Requirements: Requisitos
 Modify: Modificar
-Password requirements: Requisitos de Palavra-Passe
+Password requirements: Requisitos de Palavra-passe
 characters long: caracteres
 alphabetic characters: caracteres alfabéticos
 capital letters: letras maiúsculas
 digits: dígitos
 symbols: 'símbolos. Ej: $%&.'
-Password changed!: Palavra-Passe Modificada!
-Password doesn't meet the requirements: Palavra-Passe não atende aos requisitos
+Password changed!: Palavra-passe Modificada!
+Password doesn't meet the requirements: Palavra-passe não atende aos requisitos
 Passwords doesn't match: As Palavras-Passe não coincidem!
-Passwords empty: Palavra-Passe vazia
+Passwords empty: Palavra-passe vazia
 Addresses: Moradas
-Change password: Mudar Palavra-Passe
+Change password: Mudar Palavra-passe

forms/account/conf/style.css

@@ -1,20 +0,0 @@
-
-.conf .form-group input[type=password]
-{
-	margin-bottom: 0.5em;
-}
-
-.pass-change
-{
-	max-width: 15em;
-}
-
-.pass-info
-{
-	max-width: 17em;
-}
-.pass-info ul
-{
-	list-style-type: none;
-	padding-left: 1.5em;
-}

forms/account/conf/style.scss

@@ -0,0 +1,4 @@
+
+.pass-info ul {
+	list-style-type: none;
+}

forms/account/conf/ui.xml

@@ -1,118 +1,72 @@
 <vn>
 <vn-group>
-	<db-lot id="password-form">
-		SELECT length, nAlpha, nUpper, nDigits, nPunct
-			FROM account.userPassword
-	</db-lot>
-	<db-form id="user">
+	<db-form id="user-form">
 		<db-model property="model" id="user-model" updatable="true">
-			SELECT u.id, u.name, u.email, u.recoverPass,
-					u.nickname, u.lang, c.isToBeMailed, c.id clientFk
-				FROM account.userView u
+			SELECT u.id, u.name, u.email, u.nickname,
+					u.lang, c.isToBeMailed, c.id clientFk
+				FROM account.myUser u
 					LEFT JOIN myClient c
 						ON u.id = c.id
 		</db-model>
 	</db-form>
 </vn-group>
-<h1 id="title">
-	_Configuration
-</h1>
+<div id="title">
+	<h1><t>Configuration</t></h1>
+</div>
 <div id="actions">
 	<htk-bar-button
 		icon="place"
 		tip="_Addresses"
-		on-click="onAddressesClick"/>
+		on-click="hash.setAll({form: 'account/address-list'})"/>
 	<htk-bar-button
-		icon="preferences"
+		icon="lock_reset"
 		tip="_Change password"
-		on-click="onPassChangeClick"/>
+		on-click="this.$.changePassword.open()"/>
 </div>
-<div id="main" class="conf">
-	<div class="card form">
-		<div>
-			<label for="user-name">_Username</label>
-			<htk-text lot="user" name="name"/>
+<div id="form" class="conf">
+	<div class="form box vn-w-sm vn-pa-lg">
+		<h5 class="vn-mb-md">
+			<t>Personal information</t>
+		</h5>
+		<div class="form-group">
+			<htk-entry
+				placeholder="_Username"
+				disabled="true"
+				form="user-form"
+				column="name"/>
 		</div>
-		<div>
-			<label for="email">_Email</label>
-			<htk-entry lot="user" name="email"></htk-entry>
+		<div class="form-group">
+			<htk-entry
+				placeholder="_Email"
+				form="user-form"
+				column="email">
+			</htk-entry>
 		</div>
-		<div>
-			<label for="nickname">_Display name</label>
-			<htk-entry lot="user" name="nickname"/>
+		<div class="form-group">
+			<htk-entry
+				placeholder="_Display name"
+				form="user-form"
+				column="nickname"/>
 		</div>
-		<div>
-			<label for="lang">_Language</label>
-			<htk-combo lot="user" name="lang"
-				value-field="code">
+		<div class="form-group">
+			<htk-combo
+				placeholder="_Language"
+				form="user-form"
+				column="lang">
 				<db-model property="model">
-					SELECT code, name FROM language WHERE active
+					<custom>
+						SELECT code, name FROM language WHERE isActive
+					</custom>
 				</db-model>
 			</htk-combo>
 		</div>
-		<div>
-			<span>
-				<htk-check id="mail" lot="user" name="isToBeMailed"/> 
-				<label for="mail">_Receive invoices by email</label>
-			</span>
+		<div class="form-group">
+			<label>
+				<htk-check form="user-form" column="isToBeMailed"/>
+				<t>Receive invoices by email</t>
+			</label>
 		</div>
 	</div>
 </div>
-<htk-popup
-	id="change-password"
-	on-open="onChangePassOpen"
-	on-closed="onChangePassClose"
-	modal="true">
-	<div property="child-node" class="htk-dialog pass-change">
-		<div>
-			<input
-				id="old-password"
-				type="password"
-				placeholder="_Old password"/>
-			<input
-				id="new-password"
-				type="password"
-				placeholder="_New password"/>
-			<input
-				id="repeat-password"
-				type="password"
-				placeholder="_Repeat password"/>
-		</div>
-		<div class="button-bar">
-			<button class="thin" on-click="onPassModifyClick">
-				_Modify
-			</button>
-			<button class="thin" on-click="onPassInfoClick">
-				_Info
-			</button>
-			<div class="clear"/>
-		</div>
-	</div>
-</htk-popup>
-<htk-popup
-	id="password-info"
-	modal="true">
-	<div property="child-node" class="htk-dialog pass-info">
-		<h3>
-			_Password requirements
-		</h3>
-		<ul>
-			<li>
-				{{passwordForm.length}} <span>_characters long</span>
-			</li>
-			<li>
-				{{passwordForm.nAlpha}} <span>_alphabetic characters</span>
-			</li>
-			<li>
-				{{passwordForm.nUpper}} <span>_capital letters</span>
-			</li>
-			<li>
-				{{passwordForm.nDigits}} <span>_digits</span>
-			</li>
-			<li>
-				{{passwordForm.nPunct}} <span>_symbols</span>
-			</li>
-		</ul>
-	</div>
-</htk-popup>
+<htk-change-password id="change-password"/>
 </vn>

forms/admin/access-log/access-log.js

@@ -1,6 +0,0 @@
-
-Hedera.AccessLog = new Class
-({
-	Extends: Hedera.Form
-});
-

forms/admin/access-log/index.js

@@ -0,0 +1,7 @@
+import './style.scss';
+
+export default new Class({
+	Extends: Hedera.Form,
+	Template: require('./ui.xml')
+});
+

forms/admin/access-log/locale/pt.yml

@@ -1,6 +1,6 @@
 AccessLog: Registro de acessos
-'UserNumber:': 'Nº usuario:'
-'User:': 'Usuario:'
+'UserNumber:': 'Nº utilizador:'
+'User:': 'Utilizador:'
 'Phone:': 'Telefone:'
 'Mobile:': 'Telemóvel:'
 Access: Acceso

forms/admin/access-log/style.css

@@ -1,12 +0,0 @@
-
-.access-log .card
-{
-	max-width: 28em;
-}
-
-.access-log .form > p
-{
-	font-size: 1.2em;
-	margin: .1em 0;
-}
-

forms/admin/access-log/style.scss

@@ -0,0 +1,12 @@
+
+.access-log .form > p {
+	font-size: 1.2rem;
+	margin: .1em 0;
+}
+
+/* List */
+
+.access-log .htk-list {
+	margin-top: 16px;
+}
+

forms/admin/access-log/ui.xml

@@ -1,54 +1,50 @@
 <vn>
 <vn-group>
-	<db-form id="client">
+	<db-form v-model="user">
 		<db-model property="model" lot="hash">
-			SELECT Id_Cliente, Cliente, Telefono, movil
-				FROM vn2008.Clientes WHERE Id_Cliente = #user
+			SELECT u.id, u.name user, u.nickname, u.email, c.phone, r.name role
+				FROM account.user u
+					JOIN account.role r ON r.id = u.role
+					LEFT JOIN vn.client c ON c.id = u.id 
+				WHERE u.id = #user
 		</db-model>
 	</db-form>
 </vn-group>
-<h1 id="title">
-	_AccessLog
-</h1>
-<div id="main" class="access-log">
-	<div class="card form">
-		<p>
-			{{client.Id_Cliente}}
-		</p>
-		<p>
-			{{client.Cliente}}
-		</p>
-		<p>
-			{{client.Telefono}}
-		</p>
-		<p>
-			{{client.movil}}
-		</p>
-	</div>
-	<div class="card">
-		<div>
-			<htk-repeater>
-				<db-model property="model" lot="hash">
-					SELECT u.stamp, a.platform, a.browser, a.version, a.javascript, a.cookies
-						FROM visitUser u
-							JOIN visitAccess c ON c.id = u.access
-							JOIN visitAgent a ON a.id = c.agent
-						WHERE u.user = #user
-						ORDER BY u.stamp DESC
-						LIMIT 8
-				</db-model>
-				<custom>
-					<div class="list-row">
-						<p>
-							<htk-text lot="iter" name="stamp" format="_%a, %e %b %Y at %T"/>
-						</p>
-						<p>
-							{{platform}} - {{browser}} {{version}}
-						</p>
-					</div>
-				</custom>
-			</htk-repeater>
+<div id="title">
+	<h1><t>AccessLog</t></h1>
+</div>
+<div id="form" class="access-log">
+	<div class="box vn-w-xs vn-pa-lg">
+		<div class="form">
+			<h4>{{user.nickname}}</h4>
+			<p>#{{user.id}} - {{user.user}}</p>
+			<p>{{user.role}}</p>
+			<p>{{user.email}}</p>
+			<p>{{user.phone}}</p>
 		</div>
 	</div>
+	<htk-repeater form-id="iter" class="box vn-w-xs htk-list vn-mt-md">
+		<db-model property="model" lot="hash">
+			SELECT u.stamp, a.platform, a.browser, a.version, a.javascript, a.cookies
+				FROM visitUser u
+					JOIN visitAccess c ON c.id = u.accessFk
+					JOIN visitAgent a ON a.id = c.agentFk
+				WHERE u.userFk = #user
+				ORDER BY u.stamp DESC
+				LIMIT 8
+		</db-model>
+		<custom>
+			<div class="item">
+				<div class="content">
+					<p>
+						{{Vn.Value.format(iter.stamp, _('%a, %e %b %Y at %T'))}}
+					</p>
+					<p>
+						{{iter.platform}} - {{iter.browser}} {{iter.version}}
+					</p>
+				</div>
+			</div>
+		</custom>
+	</htk-repeater>
 </div>
 </vn>

forms/admin/connections/connections.js

@@ -1,45 +0,0 @@
-
-Hedera.Connections = new Class
-({
-	Extends: Hedera.Form
-	
-	,_timeoutId: null
-
-	,onModelStatusChange: function (model)
-	{
-		if (!model.ready)
-			return;
-
-		if (this._timeoutId)
-			clearTimeout (this._timeoutId);
-			
-		this._timeoutId = setTimeout (this.onRefreshClick.bind (this), 60000);
-	}
-	
-	,deactivate: function ()
-	{
-		clearTimeout (this._timeoutId);
-	}
-	
-	,onRefreshClick: function ()
-	{
-		this.$.sessions.refresh ();	
-	}
-
-	,onChangeUserClick: function (button, form)
-	{
-		this.gui.supplantUser (form.get ('user'),
-			this._onUserSupplant.bind (this));
-	}
-	
-	,_onUserSupplant: function ()
-	{
-		this.hash.setAll ({form: 'ecomerce/orders'});
-	}
-	
-	,sessionsFunc: function ()
-	{
-		return 1;
-	}
-});
-

forms/admin/connections/index.js

@@ -0,0 +1,33 @@
+import './style.scss';
+
+export default new Class({
+	Extends: Hedera.Form,
+	Template: require('./ui.xml')
+	
+	,_timeoutId: null
+
+	,onModelStatusChange() {
+		if (!this.$.sessions.ready)
+			return;
+
+		if (this._timeoutId)
+			clearTimeout(this._timeoutId);
+			
+		this._timeoutId = setTimeout(
+			() => this.$.sessions.refresh(), 60000);
+	}
+	
+	,deactivate() {
+		clearTimeout(this._timeoutId);
+	}
+
+	,async onChangeUserClick(userName) {
+		await this.gui.supplantUser(userName);
+		this.hash.setAll({form: 'ecomerce/orders'});
+	}
+	
+	,sessionsFunc() {
+		return 1;
+	}
+});
+

forms/admin/connections/style.css

@@ -1,10 +0,0 @@
-
-.action-bar .connections-sum
-{
-	padding: .4em;
-	margin-top: .9em;
-	margin-right: .5em;
-	background-color: #1e88e5;
-	border-radius: 0.1em;
-	box-shadow: 0 0 0.4em #666;
-}

forms/admin/connections/style.scss

@@ -0,0 +1,9 @@
+
+.action-bar .connections-sum {
+	padding: .4em;
+	background-color: #1e88e5;
+	border-radius: .1em;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+}

forms/admin/connections/ui.xml

@@ -1,12 +1,12 @@
 <vn>
-<h1 id="title">
-	_Connections
-</h1>
+<div id="title">
+	<h1><t>Connections</t></h1>
+</div>
 <div id="actions">
 	<htk-bar-button
 		icon="refresh"
 		tip="_Refresh"
-		on-click="onRefreshClick"/>
+		on-click="sessions.refresh()"/>
 	<div class="connections-sum">
 		<htk-text>
 			<db-calc-sum
@@ -14,48 +14,50 @@
 				model="sessions"
 				func="sessionsFunc"/>
 		</htk-text> 
-		_connections
+		<t>connections</t>
 	</div>
 </div>
-<div id="main" class="connections">
-	<div class="card list">
-		<htk-repeater>
-			<db-model property="model" id="sessions" on-status-changed="onModelStatusChange">
-				SELECT vu.user userId, vu.stamp, u.nickname, s.lastUpdate, 
-						a.platform, a.browser, a.version, u.name user
-					FROM userSession s
-						JOIN visitUser vu ON vu.id = s.userVisit
-						JOIN visitAccess ac ON ac.id = vu.access
-						JOIN visitAgent a ON a.id = ac.agent
-						JOIN visit v ON v.id = a.visit
-						JOIN account.user u ON u.id = vu.user
-					ORDER BY lastUpdate DESC
-			</db-model>
-			<custom>
-				<a href="#!form=admin/access-log&amp;user={{userId}}"
-					class="list-row"
-					title="_Access log">
-					<div class="actions">
-						<htk-button
-							lot="iter"
-							name="id"
-							tip="_Supplant user"
-							icon="incognito"
-							on-click="onChangeUserClick"/>
-					</div>
+<div id="form" class="connections">
+	<htk-repeater form-id="iter" class="box htk-list vn-w-xs">
+		<db-model
+			property="model"
+			id="sessions"
+			on-status-changed="this.onModelStatusChange()">
+			SELECT vu.userFk userId, vu.stamp, u.nickname, s.lastUpdate, 
+					a.platform, a.browser, a.version, u.name user
+				FROM userSession s
+					JOIN visitUser vu ON vu.id = s.userVisitFk
+					JOIN visitAccess ac ON ac.id = vu.accessFk
+					JOIN visitAgent a ON a.id = ac.agentFk
+					JOIN visit v ON v.id = a.visitFk
+					JOIN account.user u ON u.id = vu.userFk
+				ORDER BY lastUpdate DESC
+		</db-model>
+		<custom>
+			<a class="item"
+				href="{{`#!form=admin/access-log&amp;user=${iter.userId}`}}"
+				title="_Access log">
+				<div class="content">
 					<p class="important">
-						{{nickname}}
+						{{iter.nickname}}
 					</p>
 					<p>
-						<htk-text lot="iter" name="stamp" format="%a, %T"/> - 
-						<htk-text lot="iter" name="lastUpdate" format="%T"/>
+						{{Vn.Value.format(iter.stamp, '%a, %T')}} - 
+						{{Vn.Value.format(iter.lastUpdate, '%T')}}
 					</p>
 					<p>
-						{{platform}} - {{browser}} {{version}}
+						{{iter.platform}} - {{iter.browser}} {{iter.version}}
 					</p>
-				</a>
-			</custom>
-		</htk-repeater>
-	</div>
+				</div>
+				<div class="actions"
+					on-click="$event.preventDefault()">
+					<htk-button
+						tip="_Supplant user"
+						icon="supervisor_account"
+						on-click="this.onChangeUserClick(iter.user)"/>
+				</div>
+			</a>
+		</custom>
+	</htk-repeater>
 </div>
 </vn>

forms/admin/items/index.js

@@ -0,0 +1,10 @@
+import './style.scss';
+
+export default new Class({
+	Extends: Hedera.Form,
+	Template: require('./ui.xml'),
+	
+	activate() {	
+		this.$.items.setInfo('i', 'item', 'vn', ['id']);
+	}
+});

forms/admin/items/items.js

@@ -1,6 +0,0 @@
-
-Hedera.Items = new Class
-({
-	Extends: Hedera.Form
-});
-

forms/admin/items/style.css

@@ -1,23 +0,0 @@
-
-/* Row */
-
-.items .list-row > .photo
-{
-	margin-right: 1em;
-	float: left;
-	border-radius: 50%;
-	height: 3.2em;
-	width: 3.2em;
-}
-.items .list-row > p
-{
-	margin: .1em 0;
-	margin-left: 5em;
-}
-
-/* Topbar */
-
-.action-bar .htk-search-entry
-{
-	margin: .8em .6em;
-}

forms/admin/items/style.scss

@@ -0,0 +1,6 @@
+
+.items .item .photo {
+	border-radius: 10px;
+	height: 80px;
+	width: 80px;
+}

forms/admin/items/ui.xml

@@ -1,44 +1,57 @@
 <vn>
-<h1 id="title">
-	_Items
-</h1>
-<div id="actions">
-	<htk-search-entry lot="hash" name="search"/>
+<div id="title">
+	<h1><t>Items</t></h1>
 </div>
-<div id="main" class="items">
-	<div class="card list">
-		<htk-repeater empty-message="_Enter a search term">
-			<db-model property="model" lot="hash">
-				SELECT Id_Article, Article, Medida, Categoria, Foto
-					FROM vn2008.Articles
-					WHERE Article LIKE CONCAT('%', #search, '%')
-						OR Id_Article = #search
-						ORDER BY Article LIMIT 50
-			</db-model>
-			<custom>
-				<div class="list-row">
+<div id="actions">
+	<htk-search-entry form="hash" column="search"/>
+</div>
+<div id="form" class="items">
+	<htk-repeater 
+		class="htk-list rows box vn-w-xs"
+		form-id="iter"
+		empty-message="_Enter a search term">
+		<db-model property="model" id="items" lot="hash">
+			SELECT i.id, i.longName, i.size, i.category,
+					i.value5, i.value6, i.value7,
+					i.image, im.updated
+				FROM vn.item i
+					LEFT JOIN image im
+						ON im.collectionFk = 'catalog'
+						AND im.name = i.image
+				WHERE i.longName LIKE CONCAT('%', #search, '%')
+					OR i.id = #search
+				ORDER BY i.longName LIMIT 50
+		</db-model>
+		<custom>
+			<div class="item">
+				<div class="side vn-mr-md">
 					<htk-image
-						lot="iter"
-						name="Foto"
+						form="$iter"
+						column="image"
+						stamp-column="updated"
 						class="photo"
 						directory="catalog"
 						subdir="200x200"
-						full-dir="900x900"
+						full-dir="1600x900"
 						editable="true"
 						conn="conn"/>
-					<p class="concept">
-						{{Article}} {{Medida}} {{Categoria}}
-					</p>
-					<p>
-						@{{Id_Article}}
-					</p>
-					<p>
-						{{Foto}}
-					</p>
-					<div class="clear"/>
 				</div>
-			</custom>
-		</htk-repeater>
-	</div>
+				<div class="content">
+					<p class="important">
+						{{iter.longName}}
+					</p>
+					<p class="tags">
+						{{iter.value5}} {{iter.value6}} {{iter.value7}}
+					</p>
+					<p>
+						{{iter.id}}
+					</p>
+					<p>
+						{{iter.image}}
+					</p>
+				</div>
+			</div>
+		</custom>
+	</htk-repeater>
 </div>
 </vn>

forms/admin/links/index.js

@@ -0,0 +1,7 @@
+import './style.scss';
+
+export default new Class({
+	Extends: Hedera.Form,
+	Template: require('./ui.xml')
+});
+

forms/admin/links/links.js

@@ -1,6 +0,0 @@
-
-Hedera.Links = new Class
-({
-	Extends: Hedera.Form
-});
-

forms/admin/links/style.css

@@ -1,13 +0,0 @@
-
-.cpanel .list-row:hover
-{
-	background-color: rgba(1, 1, 1, 0.05);
-}
-.cpanel .list-row > .htk-image
-{
-	margin: 0;
-	margin-right: 1em;
-	float: left;
-	height: 2.8em;
-	width: 2.8em;
-}

forms/admin/links/style.scss

@@ -0,0 +1,50 @@
+
+.cpanel .items > div {
+	max-width: 900px;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	gap: 16px;
+	margin: 0 auto;
+}
+.cpanel .item {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	margin: 0;
+	width: 140px;
+	padding: 15px;
+	text-align: center;
+	transition: background-color 250ms ease-out;
+}
+.cpanel .item:hover {
+	background-color: rgba(1, 1, 1, 0.05);
+}
+.cpanel .item > .htk-image {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	margin: 0;
+	float: left;
+	height: 80px;
+}
+.cpanel .item > .htk-image > img {
+	max-height: 60px;
+	max-width: 60px;
+	padding: 0;
+}
+.cpanel .item > h6 {
+	flex: none;
+	margin: .1em 0;
+	font-size: .9rem;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+}
+.cpanel .item > .text-secondary {
+	flex: none;
+	margin: 0;
+	font-size: .8rem;
+	height: 40px;
+	overflow: hidden;
+}

forms/admin/links/ui.xml

@@ -1,29 +1,31 @@
 <vn>
-<h1 id="title">
-	_ControlPanel
-</h1>
-<div id="main" class="cpanel">
-	<div class="card list">
-		<htk-repeater>
-			<db-model property="model">
+<div id="title">
+	<h1><t>ControlPanel</t></h1>
+</div>
+<div id="form" class="cpanel">
+	<htk-repeater form-id="iter" class="items">
+		<db-model property="model">
+			<custom>
 				SELECT image, name, description, link FROM link
 					ORDER BY name
-			</db-model>
-			<custom>
-				<a class="list-row" href="{{link}}" target="_blank">
-					<htk-image
-						value="{{image}}"
-						directory="link"
-						subdir="full"/>
-					<p class="important">
-						{{name}}
-					</p>
-					<p>
-						{{description}}
-					</p>
-				</a>
 			</custom>
-		</htk-repeater>
-	</div>
+		</db-model>
+		<custom>
+			<a class="item box"
+				href="{{iter.link}}"
+				target="_blank">
+				<htk-image
+					value="{{iter.image}}"
+					directory="link"
+					subdir="full"/>
+				<h6>
+					{{iter.name}}
+				</h6>
+				<p class="text-secondary">
+					{{iter.description}}
+				</p>
+			</a>
+		</custom>
+	</htk-repeater>
 </div>
 </vn>

forms/admin/photos/index.js

@@ -0,0 +1,201 @@
+import './style.scss';
+
+var Status = {
+	 NONE      : 0
+	,WAITING   : 1
+	,UPLOADING : 2
+	,UPLOADED  : 3
+};
+
+export default new Class({
+	Extends: Hedera.Form,
+	Template: require('./ui.xml')
+
+	,filesData: []
+	,uploadCount: 0
+	,isUploading: false
+
+	,activate() {
+		this.$.schema.value = 'catalog';
+	}
+
+	,addFiles(files) {
+		if (!files)
+			return;
+
+		for (var i = 0; i < files.length; i++)
+			this.addFile(files[i]);
+	}
+
+	,addFile(file) {
+		var doc = document;
+		var li = doc.createElement('div');
+
+		var div = doc.createElement('div');
+		div.className = 'thumb';
+		li.appendChild(div);
+
+		var thumb = doc.createElement('img');
+		thumb.file = file;
+		div.appendChild(thumb);
+
+		var reader = new FileReader();
+		reader.onload = function(e) {
+			thumb.src = e.target.result; 
+		};
+		reader.readAsDataURL(file);
+
+		var name = doc.createElement('input');
+		name.type = 'text';
+		name.value = getFileName(file.name);
+		li.appendChild(name);
+
+		var statusNode = doc.createElement('div');
+		statusNode.className = 'status';
+		li.appendChild(statusNode);
+
+		var fileData = {
+			li: li,
+			file: file,
+			name: name,
+			statusNode: statusNode
+		};
+
+		var button = new Htk.Button({
+			tip: 'Remove',
+			icon: 'delete'
+		});
+		button.node.addEventListener('click',
+			() => this.onFileRemove(fileData));
+		li.appendChild(button.node);
+
+		this.filesData.push(fileData);
+
+		this.$.fileList.appendChild(li);
+		this.setImageStatus(fileData, Status.NONE, 'add', _('Pending upload'));
+	}
+
+	,async onUploadClick() {
+		if (this.isUploading) return;
+	
+		const uploadQueue = [];
+		let hasFiles = false;
+
+		for (const fileData of this.filesData) {
+			if (fileData.status !== Status.NONE) continue;
+			this.setImageStatus(
+				fileData, Status.WAITING, 'cloud_upload', _('Waiting for upload'));
+			fileData.name.disabled = true;
+			uploadQueue.push(fileData);
+			hasFiles = true;
+		}
+
+		if (!hasFiles) {
+			Htk.Toast.showWarning(_('There are no files to upload'));
+			return;
+		}
+
+		this.isUploading = true;
+		let hasErrors = false;
+		
+		for (const fileData of uploadQueue) {
+			this.setImageStatus(
+				fileData, Status.UPLOADING, 'upload', _('Uploading file'));
+
+			const formData = new FormData();
+			formData.append('updateMatching', this.$.updateMatching.value);
+			formData.append('image', fileData.file);
+			formData.append('name', fileData.name.value);
+			formData.append('schema', this.$.schema.value);
+			formData.append('srv', 'json:image/upload');
+
+			try {
+				await this.conn.sendFormData(formData);
+				this.setImageStatus(
+					fileData, Status.UPLOADED, 'cloud_done', _('Image uploaded'));
+			} catch(err) {
+				this.setImageStatus(
+					fileData, Status.NONE, 'error', err.message);
+				fileData.name.disabled = false;
+				hasErrors = true;
+			}
+		}
+
+		this.isUploading = false;
+
+		if (hasErrors)
+			Htk.Toast.showError(_('Some errors happened on upload'));
+		else
+			Htk.Toast.showMessage(_('Upload finished successfully'));
+	}
+
+	,setImageStatus(fileData, status, icon, title) {
+		fileData.status = status;
+
+		var statusNode = fileData.statusNode;
+		Vn.Node.removeChilds(statusNode);
+	
+		var iconNode = new Htk.Icon({name: icon});
+		statusNode.appendChild(iconNode.node);
+		statusNode.title = title ? title : '';
+	}
+
+	,onFileRemove(fileData) {
+		this.$.fileList.removeChild(fileData.li);
+
+		for (var i = 0; i < this.filesData.length; i++)
+		if (this.filesData[i] === fileData) {
+			this.filesData.splice(i, 1);
+			break;
+		}
+	}
+
+	,onClearClick() {
+		this.filesData = [];
+		Vn.Node.removeChilds(this.$.fileList);
+	}
+
+	,onDropzoneClick() {
+		this.$.file.click();
+	}
+
+	,onFileChange() {
+		this.addFiles(this.$.file.files);
+	}
+
+	,onDragEnter() {
+		this.$.dropzone.classList.add('dragover');
+	}
+
+	,onDragLeave() {
+		this.$.dropzone.classList.remove('dragover');
+	}
+
+	,onDragOver(event) {
+		event.preventDefault();
+	}
+
+	,onDragEnd(event) {
+		this.$.dropzone.classList.remove('dragover');
+		event.dataTransfer.clearData();
+	}
+
+	,onDrop(event) {
+		event.preventDefault();
+		this.addFiles(event.dataTransfer.files);
+	}
+});
+
+function getFileName(path) {
+	var barIndex = path.lastIndexOf('/');
+	if (barIndex === -1)
+		barIndex = path.lastIndexOf('\\');
+	if (barIndex === -1)
+		barIndex = 0;
+
+	var dotIndex = path.lastIndexOf('.');
+	if (dotIndex === -1)
+		dotIndex = 0;
+
+	return path.substr(barIndex, dotIndex);
+}

forms/admin/photos/locale/ca.yml

@@ -1,6 +1,8 @@
 Images: Imatges
 Collection: Col·lecció
 Click or drop files here: Prem o deixa anar els arxius aquí
+Pending upload: Pujada pendent
+Update items with matching id: Actualitzar els elements amb id coincident
 Clear all: Netejar tot
 Upload files: Pujar arxius
 Waiting for upload: Esperant per pujar

forms/admin/photos/locale/en.yml

@@ -1,6 +1,8 @@
 Images: Images
 Collection: Collection
 Click or drop files here: Click or drop files here
+Pending upload: Pending upload
+Update items with matching id: Update items with matching id
 Clear all: Clear all
 Upload files: Upload files
 Waiting for upload: Waiting for upload

forms/admin/photos/locale/es.yml

@@ -1,6 +1,8 @@
 Images: Imágenes
 Collection: Colección
 Click or drop files here: Pulsa o suelta los archivos aquí
+Pending upload: Subida pendiente
+Update items with matching id: Actualizar ítems con id coincidente
 Clear all: Limpiar todo
 Upload files: Subir archivos
 Waiting for upload: Esperando para subir

forms/admin/photos/locale/fr.yml

@@ -1,6 +1,8 @@
 Images: Images
 Collection: Collection
 Click or drop files here: Cliquez ici ou déposer des fichiers
+Pending upload: Hausse en attente
+Update items with matching id: Mettre à jour les éléments avec l'identifiant correspondant
 Clear all: Tout effacer
 Upload files: Upload Files
 Waiting for upload: En attente de télécharger

forms/admin/photos/locale/pt.yml

@@ -1,6 +1,8 @@
 Images: Imagens
 Collection: Coleção
 Click or drop files here: Clique ou solte arquivos aqui
+Pending upload: Ascensão pendente
+Update items with matching id: Atualizar itens com id correspondente
 Clear all: Limpar tudo
 Upload files: Fazer upload de arquivos
 Waiting for upload: Esperando para enviar

forms/admin/photos/photos.js

@@ -1,235 +0,0 @@
-(function() {
-
-var Status = {
-	 NONE      : 0
-	,WAITING   : 1
-	,UPLOADING : 2
-	,UPLOADED  : 3
-};
-
-Hedera.Photos = new Class
-({
-	Extends: Hedera.Form
-	,filesData: []
-	,uploadCount: 0
-	,errors: false
-	,uploadQueue: []
-	,isUploading: false
-
-	,activate: function ()
-	{
-		this.$.schema.value = 'catalog';
-	}
-
-	,addFiles: function (files)
-	{
-		if (!files)
-			return;
-
-		for (var i = 0; i < files.length; i++)
-			this.addFile (files[i]);
-	}
-
-	,addFile: function (file)
-	{
-		var doc = document;
-		var div = doc.createElement ('div');
-
-		var button = new Htk.Button ({
-			tip: 'Remove',
-			icon: 'delete'
-		});
-		button.on ('click', this.onFileRemove, this);
-		div.appendChild (button.node);
-
-		var thumb = doc.createElement ('img');
-		thumb.file = file;
-		thumb.className = 'thumb';
-		div.appendChild (thumb);
-
-		var reader = new FileReader ();
-		reader.onload = function (e) { thumb.src = e.target.result; };
-		reader.readAsDataURL(file);
-
-		var name = doc.createElement ('input');
-		name.type = 'text';
-		name.value = getFileName (file.name);
-		div.appendChild (name);
-
-		var statusNode = doc.createElement ('span');
-		statusNode.className = 'status';
-		div.appendChild (statusNode);
-
-		var fileData = {
-			div: div,
-			file: file,
-			name: name,
-			statusNode: statusNode,
-			status: Status.NONE
-		};
-		this.filesData.push (fileData);
-		button.value = fileData;
-
-		this.$.fileList.appendChild (div);
-	}
-
-	,onUploadClick: function ()
-	{
-		var filesData = this.filesData;
-		var count = 0;
-
-		for (var i = 0; i < filesData.length; i++)
-		{
-			var fileData = filesData[i];
-
-			if (fileData.status === Status.NONE)
-			{
-				this.setImageStatus (
-					fileData, Status.WAITING, 'cloud-upload', _('Waiting for upload'));
-				fileData.name.disabled = true;
-				this.uploadQueue.push (fileData);
-				count++;
-			}
-		}
-
-		if (count === 0)
-			Htk.Toast.showWarning (_('There are no files to upload'));
-		else
-			this.uploadNextFile ();
-	}
-
-	,uploadNextFile: function ()
-	{
-		if (this.isUploading)
-			return;
-
-		this.isUploading = true;
-
-		var fileData = this.uploadQueue.shift ();
-		this.setImageStatus (
-			fileData, Status.UPLOADING, 'upload', _('Uploading file'));
-
-		var formData = new FormData();
-		formData.append ('image', fileData.file);
-		formData.append ('name', fileData.name.value);
-		formData.append ('schema', this.$.schema.value);
-		formData.append ('srv', 'json:image/upload');
-		this.conn.sendFormData (formData,
-			this.onFileUpload.bind (this, fileData));
-	}
-
-	,onFileUpload: function (fileData, data, error)
-	{
-		this.isUploading = false;
-
-		if (data)
-		{
-			this.setImageStatus (
-				fileData, Status.UPLOADED, 'ok', _('Image uploaded'));
-		}
-		else
-		{
-			this.setImageStatus (
-				fileData, Status.NONE, 'error', error.message);
-			fileData.name.disabled = false;
-			this.errors = true;
-		}
-
-		if (this.uploadQueue.length === 0)
-		{
-			if (this.errors)
-				Htk.Toast.showError (_('Some errors happened on upload'));
-			else
-				Htk.Toast.showMessage (_('Upload finished successfully'));
-
-			this.errors = false;
-		}
-		else
-			this.uploadNextFile ();
-	}
-
-	,setImageStatus: function (fileData, status, icon, title)
-	{
-		fileData.status = status;
-
-		var statusNode = fileData.statusNode;
-		Vn.Node.removeChilds (statusNode);
-	
-		var iconNode = new Htk.Icon ({icon: icon});
-		statusNode.appendChild (iconNode.node);
-		statusNode.title = title ? title : '';
-	}
-
-	,onFileRemove: function (button)
-	{
-		var fileData = button.value;
-		this.$.fileList.removeChild (fileData.div);
-
-		for (var i = 0; i < this.filesData.length; i++)
-		if (this.filesData[i] === fileData)
-		{
-			this.filesData.splice (i, 1);
-			break;
-		}
-	}
-
-	,onClearClick: function ()
-	{
-		this.filesData = [];
-		Vn.Node.removeChilds (this.$.fileList);
-	}
-
-	,onDropzoneClick: function ()
-	{
-		this.$.file.click ();
-	}
-
-	,onFileChange: function ()
-	{
-		this.addFiles (this.$.file.files);
-	}
-
-	,onDragEnter: function ()
-	{
-		Vn.Node.addClass (this.$.dropzone, 'dragover');
-	}
-
-	,onDragLeave: function ()
-	{
-		Vn.Node.removeClass (this.$.dropzone, 'dragover');
-	}
-
-	,onDragOver: function (event)
-	{
-		event.preventDefault ();
-	}
-
-	,onDragEnd: function (event)
-	{
-		Vn.Node.removeClass (this.$.dropzone, 'dragover');
-		event.dataTransfer.clearData ();
-	}
-
-	,onDrop: function (event)
-	{
-		event.preventDefault ();
-		this.addFiles (event.dataTransfer.files);
-	}
-});
-
-function getFileName (path)
-{
-	var barIndex = path.lastIndexOf ('/');
-	if (barIndex === -1)
-		barIndex = path.lastIndexOf ('\\');
-	if (barIndex === -1)
-		barIndex = 0;
-
-	var dotIndex = path.lastIndexOf ('.');
-	if (dotIndex === -1)
-		dotIndex = 0;
-
-	return path.substr (barIndex, dotIndex);
-}
-
-})();

forms/admin/photos/style.css

@@ -1,63 +0,0 @@
-
-/* Dropzone */
-
-.photos .dropzone
-{
-	background-color:  white;
-	border-style: dashed;
-	border-radius: .4em;
-	border-color: #2196F3;
-	padding: 2em 1em;
-	text-align: center;
-	color: #666;
-	cursor: pointer;
-}
-.photos .dropzone.dragover
-{
-	color: #CCC;
-	border-style: solid;
-}
-.photos input[type=file]
-{
-	display: none;
-}
-
-/* File list */
-
-.photos .file-list
-{
-	margin-top: 1em;
-}
-.photos .file-list > div
-{
-	height: 2.5em;
-}
-.photos .file-list .thumb
-{
-	max-height: 2em;
-	max-width: 2em;
-	vertical-align: middle;
-	margin: 0 1em;
-}
-.photos .file-list input
-{
-	max-width: 10em;
-}
-.photos .file-list .status
-{
-	margin-left: .5em;
-	cursor: pointer;
-}
-
-/* Footer */
-
-.photos .footer
-{
-	margin-top: 1.5em;
-	text-align: center;
-}
-.photos .footer > button
-{
-	font-size: 1.2em;
-	margin-left: 1em;
-}

forms/admin/photos/style.scss

@@ -0,0 +1,81 @@
+
+/* Dropzone */
+
+.photos .dropzone {
+	background-color:  white;
+	border-style: dashed;
+	border-radius: .4em;
+	border-color: #2196F3;
+	padding: 2em 1em;
+	text-align: center;
+	color: #666;
+	cursor: pointer;
+}
+.photos .dropzone.dragover {
+	color: #CCC;
+	border-style: solid;
+}
+.photos input[type=file] {
+	display: none;
+}
+
+/* File list */
+
+.photos .file-list {
+	margin-top: 1em;
+}
+.photos .file-list > div {
+	height: 2.5em;
+	display: flex;
+	align-items: center;
+}
+.photos .file-list > div > * {
+	overflow: hidden;
+}
+.photos .file-list .thumb {
+	width: 2em;
+	padding-right: .5em;
+	text-align: center;
+}
+.photos .file-list .thumb > img {
+	max-height: 2em;
+	max-width: 2em;
+	vertical-align: middle;
+}
+.photos .file-list input {
+	flex: 1;
+	min-width: 0;
+}
+.photos .file-list .status {
+	cursor: pointer;
+	width: 1.2em;
+	padding-left: .5em;
+	padding-right: .5em;
+}
+.photos .file-list .status > .htk-icon {
+	display: block;
+}
+.photos .file-list .htk-button {
+	opacity: .2;
+}
+.photos .file-list .htk-button:hover {
+	background-color: transparent;
+	opacity: 1;
+}
+.photos .file-list .htk-button > img {
+	display: block;
+}
+
+/* Footer */
+
+.photos .update-matching {
+	margin-top: 1.5em;
+}
+.photos .footer {
+	margin-top: 1.5em;
+	text-align: center;
+}
+.photos .footer > button {
+	font-size: 1.2rem;
+	margin-left: 1em;
+}

forms/admin/photos/ui.xml

@@ -1,14 +1,16 @@
 <vn>
-<h1 id="title">
-	_Images
-</h1>
-<div id="main" class="photos">
-	<div class="card form">
+<div id="title">
+	<h1><t>Images</t></h1>
+</div>
+<div id="form" class="photos">
+	<div class="box form vn-w-sm vn-pa-lg">
 		<div class="form-group">
-			<label>_Collection</label>
+			<label><t>Collection</t></label>
 			<htk-combo id="schema">
 				<db-model property="model">
-					SELECT name, `desc` FROM imageCollection ORDER BY `desc`
+					<custom>
+						SELECT name, `desc` FROM imageCollection ORDER BY `desc`
+					</custom>
 				</db-model>
 			</htk-combo>
 		</div>
@@ -20,7 +22,7 @@
 			on-drop="onDrop"
 			on-dragend="onDragEnd"
 			on-click="onDropzoneClick">
-			_Click or drop files here
+			<t>Click or drop files here</t>
 		</div>
 		<input
 			 id="file"
@@ -29,12 +31,18 @@
 			 name="image"
 			 on-change="onFileChange"/>
 		<div id="file-list" class="file-list"/>
+		<div class="update-matching">
+			<label>
+				<htk-check id="update-matching" value="true"/>
+				<t>Update items with matching id</t>
+			</label>
+		</div>
 		<div class="footer">
 			<button class="thin" on-click="onClearClick">
-				_Clear all
+				<t>Clear all</t>
 			</button>
 			<button class="thin" on-click="onUploadClick">
-				_Upload files
+				<t>Upload files</t>
 			</button>
 		</div>
 	</div>

forms/admin/queries/index.js

@@ -0,0 +1,93 @@
+import './style.scss';
+
+export default new Class({
+	Extends: Hedera.Form,
+	Template: require('./ui.xml')
+	
+	,activate() {
+		this.$.resultIndex.value = 0;
+	}
+	
+	,clean() {
+		if (this._grid) {
+			this.$.gridHolder.removeChild(this._grid.node);
+			this._grid.unref();
+			this._grid = null;
+		}
+	}
+	
+	,onExecuteClick() {
+		this.clean();
+		
+		var model = new Db.Model({
+			conn: this.conn,
+			query: this.$.sql.value,
+			resultIndex: this.$.resultIndex.value,
+			updatable: this.$.updatable.value
+		});
+		model.on('status-changed', this.onModelChange, this);
+	}
+	
+	,onCleanClick() {
+		this.clean();
+	}
+	
+	,onModelChange(model, status) {
+		if (status !== Db.Model.Status.LOADING) {
+			model.disconnect('status-changed', this.onModelChange, this);
+			model.unref();
+		}
+
+		if (status !== Db.Model.Status.READY)
+			return;
+
+		Htk.Toast.showMessage(_('Query executed!'));
+
+		var gridHolder = this.$.gridHolder;
+		
+		if (gridHolder.firstChild)
+			gridHolder.removeChilds(gridHolder.firstChild);
+
+		var grid = new Htk.Grid();
+		
+		var columns = model.columns;
+		
+		for (var i = 0; i < columns.length; i++) {
+			var c = columns[i];
+		
+			switch (c.type) {
+				case Db.Conn.Type.BOOLEAN:
+					var column = new Htk.ColumnCheck();
+					break;
+				case Db.Conn.Type.INTEGER:
+					var column = new Htk.ColumnSpin();
+					break;
+				case Db.Conn.Type.DOUBLE:
+					var column = new Htk.ColumnSpin({digits: 2});
+					break;
+				case Db.Conn.Type.DATE:
+					var column = new Htk.ColumnDate({format: '%a, %e %b %Y'});
+					break;
+				case Db.Conn.Type.DATE_TIME:
+					var column = new Htk.ColumnDate({format: '%a, %e %b %Y, %T'});
+					break;
+				case Db.Conn.Type.STRING:
+				default:
+					var column = new Htk.ColumnText();
+			}
+		
+			column.setProperties({
+				title: c.name,
+				editable: this.$.updatable.value,
+				columnIndex: i
+			});
+			
+			grid.appendColumn(column);
+		}
+		
+		grid.model = model;
+		gridHolder.appendChild(grid.node);
+		this._grid = grid;
+	}
+});
+

forms/admin/queries/queries.js

@@ -1,102 +0,0 @@
-
-Hedera.Queries = new Class
-({
-	Extends: Hedera.Form
-	
-	,activate: function  ()
-	{
-		this.$.resultIndex.value = 0;
-	}
-	
-	,clean: function ()
-	{
-		if (this._grid)
-		{
-			this.$.gridHolder.removeChild (this._grid.node);
-			this._grid.unref ();
-			this._grid = null;
-		}
-	}
-	
-	,_onExecuteClick: function ()
-	{
-		this.clean ();
-		
-		var model = new Db.Model ({
-			conn: this.conn,
-			query: this.$.sql.value,
-			resultIndex: this.$.resultIndex.value,
-			updatable: this.$.updatable.value
-		});
-		model.on ('status-changed', this._onModelChange, this);
-	}
-	
-	,_onCleanClick: function ()
-	{
-		this.clean ();
-	}
-	
-	,_onModelChange: function (model, status)
-	{
-		if (status !== Db.Model.Status.LOADING)
-		{
-			model.disconnect ('status-changed', this._onModelChange, this);
-			model.unref ();
-		}
-
-		if (status !== Db.Model.Status.READY)
-			return;
-
-		Htk.Toast.showMessage (_('Query executed!'));
-
-		var gridHolder = this.$.gridHolder;
-		
-		if (gridHolder.firstChild)
-			gridHolder.removeChilds (gridHolder.firstChild);
-
-		var grid = new Htk.Grid ();
-		
-		var columns = model.columns;
-		
-		for (var i = 0; i < columns.length; i++)
-		{
-			var c = columns[i];
-		
-			switch (c.type)
-			{
-				case Db.Conn.Type.BOOLEAN:
-					var column = new Htk.ColumnCheck ();
-					break;
-				case Db.Conn.Type.INTEGER:
-					var column = new Htk.ColumnSpin ();
-					break;
-				case Db.Conn.Type.DOUBLE:
-					var column = new Htk.ColumnSpin ({digits: 2});
-					break;
-				case Db.Conn.Type.DATE:
-					var column = new Htk.ColumnDate ({format: '%a, %e %b %Y'});
-					break;
-				case Db.Conn.Type.DATE_TIME:
-					var column = new Htk.ColumnDate ({format: '%a, %e %b %Y, %T'});
-					break;
-				case Db.Conn.Type.STRING:
-				default:
-					var column = new Htk.ColumnText ();
-			}
-		
-			column.setProperties ({
-				title: c.name,
-				editable: this.$.updatable.value,
-				columnIndex: i
-			});
-			
-			grid.appendColumn (column);
-		}
-		
-		grid.model = model;
-		gridHolder.appendChild (grid.node);
-		this._grid = grid;
-	
-	}
-});
-

forms/admin/queries/style.scss

@@ -1,16 +1,10 @@
 
-.queries .card
-{
-	max-width: 40em;
-}
-.queries textarea
-{
+.queries textarea {
 	display: block;
 	width: 100%;
 	height: 8em;
 }
-.queries .result
-{
+.queries .result {
 	margin-top: 1em;
 	overflow: auto;
 }

forms/admin/queries/ui.xml

@@ -1,37 +1,37 @@
 <vn>
-<h1 id="title">
-	_Queries
-</h1>
+<div id="title">
+	<h1><t>Queries</t></h1>
+</div>
 <div id="actions">
 	<htk-bar-button
 		icon="ok"
 		tip="_Execute"
-		on-click="_onExecuteClick"/>
+		on-click="this.onExecuteClick()"/>
 	<htk-bar-button
 		icon="delete"
 		tip="_Clean"
-		on-click="_onCleanClick"/>
+		on-click="this.onCleanClick()"/>
 </div>
-<div id="main" class="queries">
-	<div class="card form">
-		<div>
-			<label>_SQL query</label>
+<div id="form" class="queries">
+	<div class="box form vn-w-sm vn-pa-lg">
+		<div class="form-group">
+			<label><t>SQL query</t></label>
 			<textarea
 				id="sql"
 				autocorrect="off"
 				autocapitalize="off"
 				spellcheck="false"/>
 		</div>
-		<div>
-			<label>_Result index</label>
+		<div class="form-group">
+			<label><t>Result index</t></label>
 			<htk-spin id="result-index"/>
 		</div>
-		<div>
-			<label>_Updatable</label>
+		<div class="form-group">
+			<label><t>Updatable</t></label>
 			<htk-check id="updatable"/>
 		</div>
 	</div>
-	<div class="card result">
+	<div class="box result">
 		<div id="grid-holder"/>
 	</div>
 </div>

forms/admin/users/index.js

@@ -0,0 +1,20 @@
+import './style.scss';
+
+export default new Class({
+	Extends: Hedera.Form,
+	Template: require('./ui.xml')
+
+	,rendererFunc(scope, form) {
+		var isEnabled = form.$.active
+		scope.$.disabled.style.display = isEnabled ?
+			'none' : 'block';
+		scope.$.impersonate.node.style.display = isEnabled ?
+			'block' : 'none';
+	}
+
+	,async onChangeUserClick(userName) {
+		await this.gui.supplantUser(userName);
+		this.hash.setAll({form: 'ecomerce/orders'});
+	}
+});
+

forms/admin/users/style.scss

@@ -1,14 +1,11 @@
 
-.users ._disabled
-{
+.users-box.item > .actions {
+	display: flex;
+}
+.users-box .disabled {
 	color: white;
 	background-color: #F66;
 	border-radius: .2em;
 	padding: .3em;
 	font-size: .8em;
 }
-.action-bar .htk-search-entry
-{
-	margin: .8em;
-}
-

forms/admin/users/ui.xml

@@ -1,46 +1,48 @@
 <vn>
-<h1 id="title">
-	_User management
-</h1>
-<div id="actions">
-	<htk-search-entry lot="hash" name="user"/>
+<div id="title">
+	<h1><t>User management</t></h1>
 </div>
-<div id="main" class="users">
-	<div class="card list">
-		<htk-repeater renderer="rendererFunc">
-			<db-model property="model" lot="hash">
-				SELECT u.id, u.name, u.nickname, u.active
-					FROM account.user u
-					WHERE u.name LIKE CONCAT('%', #user, '%')
-						OR u.nickname LIKE CONCAT('%', #user, '%')
-						OR u.id = #user
-					ORDER BY u.name LIMIT 200
-			</db-model>
-			<custom>
-				<a
-					class="list-row"
-					href="#!form=admin/access-log&amp;user={{id}}"
-					title="_AccessLog">
-					<div class="actions">
-						<span id="disabled">
-							_Disabled
-						</span>
-						<htk-button
-							id="impersonate"
-							value="{{id}}"
-							tip="_AccessAsUser"
-							icon="incognito"
-							on-click="onChangeUserClick"/>
-					</div>
+<div id="actions">
+	<htk-search-entry form="hash" column="user"/>
+</div>
+<div id="form" class="users">
+	<htk-repeater
+		form-id="iter"
+		renderer="rendererFunc"
+		class="htk-list box vn-w-xs">
+		<db-model property="model" lot="hash">
+			SELECT u.id, u.name, u.nickname, u.active
+				FROM account.user u
+				WHERE u.name LIKE CONCAT('%', #user, '%')
+					OR u.nickname LIKE CONCAT('%', #user, '%')
+					OR u.id = #user
+				ORDER BY u.name LIMIT 200
+		</db-model>
+		<custom>
+			<a class="users-box item"
+				href="{{`#!form=admin/access-log&amp;user=${iter.id}`}}"
+				title="_Access log">
+				<div class="content">
 					<p class="important">
-						{{nickname}}
+						{{iter.nickname}}
 					</p>
 					<p>
-						@{{id}} - {{name}}
+						#{{iter.id}} - {{iter.name}}
 					</p>
-				</a>
-			</custom>
-		</htk-repeater>
-	</div>
+				</div>
+				<div class="actions"
+					on-click="$event.preventDefault()">
+					<span id="disabled" class="disabled">
+						<t>Disabled</t>
+					</span>
+					<htk-button
+						id="impersonate"
+						icon="supervisor_account"
+						tip="_Impersonate user"
+						on-click="this.onChangeUserClick(iter.name)"/>
+				</div>
+			</a>
+		</custom>
+	</htk-repeater>
 </div>
 </vn>

forms/admin/users/users.js

@@ -1,26 +0,0 @@
-
-Hedera.Users = new Class
-({
-	Extends: Hedera.Form
-
-	,rendererFunc: function (scope, lot)
-	{
-		var isEnabled = lot.$.active;
-		scope.$.disabled.style.display = isEnabled ?
-			'none' : 'block';
-		scope.$.impersonate.node.style.display = isEnabled ?
-			'block' : 'none';
-	}
-
-	,onChangeUserClick: function (button)
-	{
-		this.gui.supplantUser (button.value,
-			this.onUserSupplant.bind (this));
-	}
-	
-	,onUserSupplant: function ()
-	{
-		this.hash.setAll ({form: 'ecomerce/orders'});
-	}
-});
-

forms/admin/visits/index.js

@@ -0,0 +1,15 @@
+import './style.scss';
+
+export default new Class({
+	Extends: Hedera.Form,
+	Template: require('./ui.xml')
+
+	,activate() {
+		if (!this.hash.$.to)
+			this.hash.assign({
+				from: Date.vnNew(),
+				to: Date.vnNew()
+			});
+	}
+});
+

forms/admin/visits/style.css

@@ -1,13 +0,0 @@
-
-.visits .card
-{
-	max-width: 28em;
-}
-
-.visits .summary p
-{
-	margin: 0;
-	font-size: 1.4em;
-	text-align: right;
-}
-

forms/admin/visits/style.scss

@@ -0,0 +1,12 @@
+
+.visits .box {
+	margin-bottom: 16px;
+}
+.visits .box:last-child {
+	margin-bottom: 0;
+}
+.visits .summary p {
+	font-size: 1.4rem;
+	margin: 0;
+	text-align: right;
+}

forms/admin/visits/ui.xml

@@ -3,76 +3,85 @@
 	<vn-spec name="from" type="Date"/>
 	<vn-spec name="to" type="Date"/>
 </vn-lot-query>
-<h1 id="title">
-	_Visits
-</h1>
+<div id="title">
+	<h1><t>Visits</t></h1>
+</div>
 <div id="actions">
 	<htk-bar-button
 		icon="refresh"
 		tip="_Refresh"
-		on-click="onRefreshClick"/>
+		on-click="visits.refresh()"/>
 	<htk-bar-button
-		icon="user-info"
+		icon="visibility"
 		tip="_Connections"
-		on-click="onSessionsClick"/>
+		on-click="this.hash.setAll({form: 'admin/connections'})"/>
 </div>
-<div id="main" class="visits">
-	<div class="card form">
-		<div>
-			<label>_From</label>
-			<htk-date-chooser lot="params" name="from"/>
+<div id="form" class="visits">
+	<div class="vn-w-xs">
+		<div class="form vn-pa-lg box">
+			<div class="form-group">
+				<label><t>From</t></label>
+				<htk-date-chooser
+					form="params"
+					column="from"/>
+			</div>
+			<div class="form-group">
+				<label><t>To</t></label>
+				<htk-date-chooser
+					form="params"
+					column="to"/>
+			</div>
 		</div>
-		<div>
-			<label>_To</label>
-			<htk-date-chooser lot="params" name="to"/>
+		<div class="summary vn-pa-lg box">
+			<p>
+				<htk-text>
+					<db-calc-sum
+						property="param"
+						model="visits"
+						column-name="visits"/>
+				</htk-text> 
+				<t>visits</t>,
+				<htk-text>
+					<db-calc-sum
+						property="param"
+						model="visits"
+						column-name="newVisits"/>
+				</htk-text> 
+				<t>news</t>
+			</p>
 		</div>
-	</div>
-	<div class="summary card form">
-		<p>
-			<htk-text>
-				<db-calc-sum
-					property="param"
-					model="visits"
-					column-name="visits"/>
-			</htk-text> 
-			<span>_visits</span>,
-			<htk-text>
-				<db-calc-sum
-					property="param"
-					model="visits"
-					column-name="newVisits"/>
-			</htk-text> 
-			<span>_news</span>
-		</p>
-	</div>
-	<div class="card list ">
-		<htk-repeater empty-message="_Select date interval">
+		<htk-repeater
+			class="box htk-list"
+			form-id="iter"
+			empty-message="_Select date interval">
 			<db-model property="model" id="visits" lot="params">
-				SELECT browser
-						,MIN(CAST(version AS DECIMAL(4,1))) minVersion
-						,MAX(CAST(version AS DECIMAL(4,1))) maxVersion
-						,MAX(c.stamp) lastVisit
-						,COUNT(DISTINCT c.id) visits
-						,SUM(a.firstAccess = c.id AND v.firstAgent = a.id) newVisits
+				SELECT browser,
+						MIN(CAST(version AS DECIMAL(4,1))) minVersion,
+						MAX(CAST(version AS DECIMAL(4,1))) maxVersion,
+						MAX(c.stamp) lastVisit,
+						COUNT(DISTINCT c.id) visits,
+						SUM(a.firstAccessFk = c.id AND v.firstAgentFk = a.id) newVisits
 					FROM visitUser e
-						JOIN visitAccess c ON e.access = c.id
-						JOIN visitAgent a ON c.agent = a.id
-						JOIN visit v ON a.visit = v.id
+						JOIN visitAccess c ON c.id = e.accessFk
+						JOIN visitAgent a ON a.id = c.agentFk
+						JOIN visit v ON v.id = a.visitFk
 					WHERE c.stamp BETWEEN TIMESTAMP(#from,'00:00:00') AND TIMESTAMP(#to,'23:59:59')
-					GROUP BY browser
-					ORDER BY visits DESC
+					GROUP BY browser ORDER BY visits DESC
 			</db-model>
 			<custom>
-				<div class="list-row">
-					<p class="important">
-						{{browser}} {{minVersion}} - {{maxVersion}}
-					</p>
-					<p>
-						{{visits}} <span>_visits</span>, {{newVisits}} <span>_news</span>
-					</p>
-					<p>
-						<htk-text lot="iter" name="lastVisit" format="_%a, %e %b %Y at %T"/>
-					</p>
+				<div class="item">
+					<div class="content">
+						<p class="important">
+							{{iter.browser}} {{iter.minVersion}} - {{iter.maxVersion}}
+						</p>
+						<p>
+							{{iter.visits}} <t>visits</t>, 
+							{{iter.newVisits}} <t>news</t>
+						</p>
+						<p>
+							{{Vn.Value.format(iter.lastVisit, _('%a, %e %b %Y at %T'))}}
+						</p>
+					</div>
 				</div>
 			</custom>
 		</htk-repeater>

forms/admin/visits/visits.js

@@ -1,25 +0,0 @@
-
-Hedera.Visits = new Class
-({
-	Extends: Hedera.Form
-
-	,activate: function ()
-	{
-		if (!this.hash.$.to)
-			this.hash.assign ({
-				from: new Date (),
-				to: new Date ()
-			});
-	}
-	
-	,onRefreshClick: function ()
-	{
-		this.$.visits.refresh ();	
-	}
-	
-	,onSessionsClick: function ()
-	{
-		this.hash.setAll ({form: 'admin/connections'});
-	}
-});
-

forms/agencies/packages/index.js

@@ -0,0 +1,7 @@
+import './style.scss';
+
+export default new Class({
+	Extends: Hedera.Form,
+	Template: require('./ui.xml'),
+});
+

forms/agencies/packages/locale/ca.yml

@@ -1,5 +1,4 @@
 ListByAgency: Paquets per agència
-ShowByProvince: Mostrar desglose per província
 Agency: Agència
 Exps: Exps.
 Bundles: Paquets

forms/agencies/packages/locale/en.yml

@@ -1,5 +1,4 @@
 ListByAgency: Bundles by agency
-ShowByProvince: Show breakdown by province
 Agency: Agency
 Exps: Exps.
 Bundles: Bundles

forms/agencies/packages/locale/es.yml

@@ -1,5 +1,4 @@
 ListByAgency: Bultos por agencia
-ShowByProvince: Mostrar desglose por provincia
 Agency: Agencia
 Exps: Exps.
 Bundles: Bultos

forms/agencies/packages/locale/fr.yml

@@ -1,5 +1,4 @@
 ListByAgency: Liste par agence
-ShowByProvince: Montrer par province
 Agency: Agence
 Exps: Expéditeur
 Bundles: Cartons

forms/agencies/packages/locale/pt.yml

@@ -1,5 +1,4 @@
 ListByAgency: Bultos por agencia
-ShowByProvince: Mostrar desglosse por Distrito
 Agency: Agencia
 Exps: Exps.
 Bundles: Bultos

forms/agencies/packages/packages.js

@@ -1,14 +0,0 @@
-
-Hedera.Packages = new Class
-({
-	Extends: Hedera.Form
-	
-	,onShowClick: function  (column, agencyId)
-	{
-		this.hash.setAll ({
-			form: 'agencies/provinces',
-			agency: agencyId
-		});
-	}
-});
-

forms/agencies/packages/style.css

@@ -1,4 +0,0 @@
-.packages .card
-{
-	max-width: 35em;
-}

forms/agencies/packages/ui.xml

@@ -1,18 +1,15 @@
 <vn>
-<h1 id="title">
-	_ListByAgency
-</h1>
-<div id="main" class="packages">
-	<div class="card">
+<div id="title">
+	<h1><t>ListByAgency</t></h1>
+</div>
+<div id="form" class="packages">
+	<div class="box vn-w-sm">
 		<htk-grid>
 			<db-model property="model">
-				CALL vn2008.agencia_volume ()
+				<custom>
+					CALL vn.agencyVolume()
+				</custom>
 			</db-model>
-			<htk-column-button
-				column="agency_id"
-				icon="show"
-				tip="_ShowByProvince"
-				on-clicked="onShowClick"/>
 			<htk-column-text title="_Agency" column="Agencia"/>
 			<htk-column-spin title="_Exps" column="expediciones"/>
 			<htk-column-spin title="_Bundles" column="Bultos"/>