i11n implementada en todos los modulos

This commit is contained in:
Juan Ferrer Toribio 2017-01-25 13:33:55 +01:00
parent 278d764575
commit 0f74612fd1
31 changed files with 210 additions and 173 deletions

View File

@ -1,19 +1,20 @@
import {module} from './module'; import './module';
import {bootstrap} from './bootstrap'; import './spliting';
import * as spliting from './spliting'; import './configroutes';
import * as routes from './configroutes'; import './config';
import * as run from './run'; import './run';
import * as configNgTranslate from './translate'; import './components';
import * as components from './components';
import title from './styles/title.css'; import './styles/title.css';
import padding from './styles/layout.css'; import './styles/layout.css';
import margin from './styles/margin.scss'; import './styles/margin.scss';
import layout from './styles/padding.scss'; import './styles/padding.scss';
import background from './styles/background.scss'; import './styles/background.scss';
import border from './styles/border.scss'; import './styles/border.scss';
import fontStyle from './styles/font-style.scss'; import './styles/font-style.scss';
import misc from './styles/misc.scss'; import './styles/misc.scss';
import display from './styles/display.css'; import './styles/display.css';
import {bootstrap} from './bootstrap';
bootstrap(); bootstrap();

8
@salix/app/src/config.js Normal file
View File

@ -0,0 +1,8 @@
import {module} from './module';
config.$inject = ['$translatePartialLoaderProvider'];
export function config($translatePartialLoaderProvider) {
$translatePartialLoaderProvider.addPart('app');
$translatePartialLoaderProvider.addPart('crud');
}
module.config(config);

View File

@ -1,41 +1,40 @@
import * as core from 'core'; import * as core from 'core';
import * as spliting from './spliting'; import './spliting';
import * as deps from './spliting/deps.json'; import * as deps from './spliting/deps.json';
function loader(module) { function loader(module) {
function load($ocLazyLoad, $q){ load.$inject = ['$ocLazyLoad', '$q'];
function load($ocLazyLoad, $q) {
return $q((resolve) => { return $q((resolve) => {
core.splitingRegister.execute(module).then(function (dependencies) { core.splitingRegister.execute(module).then(function (dependencies) {
var array = dependencies.map((item) => { return { name: item } }); var array = dependencies.map((item) => { return { name: item } });
resolve($ocLazyLoad.load(array)); resolve($ocLazyLoad.load(array));
}); });
}); });
} }
load.$inject = ['$ocLazyLoad', '$q'];
return load; return load;
} }
function getParams(route) { config.$inject = ['$stateProvider', '$urlRouterProvider'];
var params = "",
temporalParams = [];
if (!route.params) {
return params;
}
Object.keys(route.params).forEach(key => {
temporalParams.push(key + `= "${route.params[key]}"`);
});
return temporalParams.join(" ");
}
function config($stateProvider, $urlRouterProvider) { function config($stateProvider, $urlRouterProvider) {
core.splitingRegister.registerGraph(deps); core.splitingRegister.registerGraph(deps);
$urlRouterProvider.otherwise('/clients'); $urlRouterProvider.otherwise('/clients');
for (var file in routes) function getParams(route) {
{ let params = "",
temporalParams = [];
if (!route.params) {
return params;
}
Object.keys(route.params).forEach(key => {
temporalParams.push(key + `= "${route.params[key]}"`);
});
return temporalParams.join(" ");
}
for (let file in routes) {
let fileRoutes = routes[file].routes; let fileRoutes = routes[file].routes;
let module = routes[file].module; let module = routes[file].module;
@ -44,12 +43,10 @@ function config($stateProvider, $urlRouterProvider) {
url: route.url, url: route.url,
template: `<${route.component} ${getParams(route)}></${route.component}>`, template: `<${route.component} ${getParams(route)}></${route.component}>`,
resolve: { resolve: {
loader: loader(module) loader: loader(module)
} }
}); });
}); });
} }
} }
config.$inject = ['$stateProvider', '$urlRouterProvider'];
core.module.config(config); core.module.config(config);

View File

@ -12,5 +12,3 @@ export function run ($rootScope, $state) {
}); });
} }
module.run(run); module.run(run);

View File

@ -25,12 +25,12 @@ html [bg-dark-bar], .bg-dark-bar {
html [bg-dark-menu], .bg-dark-menu { html [bg-dark-menu], .bg-dark-menu {
background-color: darken($bg-dark-menu, 35%); background-color: darken($bg-dark-menu, 35%);
} }
/* utilizado para mostrar el color default en el consignatario */ /* Color para items seleccionados */
.bg-dark-item{ .bg-dark-item{
background-color: $bg-dark-bar; background-color: $bg-dark-bar;
color: $color-white; color: $color-white;
} }
/* utilizado para mostrar el color inactivo en el consignatario */ /* Color para items inactivos */
.bg-opacity-item{ .bg-opacity-item{
opacity: 0.6; opacity: 0.6;
} }

View File

@ -1,14 +0,0 @@
import {module} from './module';
configNgTranslate.$inject = ['$translateProvider', '$translatePartialLoaderProvider'];
export function configNgTranslate($translateProvider, $translatePartialLoaderProvider) {
for(let mod of ['app', 'crud'])
$translatePartialLoaderProvider.addPart(mod);
let conf = {urlTemplate: '/static/locale/{part}/{lang}.json'};
$translateProvider
.useSanitizeValueStrategy(null)
.useLoader('$translatePartialLoader', conf)
.preferredLanguage('es');
}
module.config(configNgTranslate);

21
@salix/core/src/config.js Normal file
View File

@ -0,0 +1,21 @@
import {module} from './module';
config.$inject = ['$translateProvider', '$translatePartialLoaderProvider'];
export function config($translateProvider, $translatePartialLoaderProvider) {
$translatePartialLoaderProvider.addPart('core');
let conf = {urlTemplate: '/static/locale/{part}/{lang}.json'};
let langs = ['en', 'es'];
let localLangs = {
'en_US': 'en',
'en_UK': 'en',
'es_ES': 'es',
'es_AR': 'es'
};
$translateProvider
.useSanitizeValueStrategy('escape')
.useLoader('$translatePartialLoader', conf)
.registerAvailableLanguageKeys(langs, localLangs)
.determinePreferredLanguage();
}
module.config(config);

View File

@ -1,8 +1,10 @@
require('./mdl-override.css'); import './mdl-override.css';
export * from './module'; export * from './module';
export * from './util'; export * from './util';
import './config';
export {SplitingRegister as splitingRegister} from './splitingregister'; export {SplitingRegister as splitingRegister} from './splitingregister';
export {NAME as RESOLVEDEFAULTCOMPONENT, ResolveDefaultComponent} from './resolveDefaultComponents'; export {NAME as RESOLVEDEFAULTCOMPONENT, ResolveDefaultComponent} from './resolveDefaultComponents';
export {NAME as INTERPOLATE, Interpolate} from './interpolate'; export {NAME as INTERPOLATE, Interpolate} from './interpolate';

View File

@ -7,9 +7,7 @@ export function directive() {
link: function($scope, $element, $attrs) { link: function($scope, $element, $attrs) {
var input = $element[0]; var input = $element[0];
input.focus(); input.focus();
var len = input.value ? input.value.length : 0; input.select();
input.setSelectionRange(0, len);
// input.select();
} }
}; };
} }

View File

@ -0,0 +1,4 @@
{
"Accept": "Accept",
"Cancel": "Cancel"
}

View File

@ -0,0 +1,4 @@
{
"Accept": "Aceptar",
"Cancel": "Cancelar"
}

View File

@ -3,4 +3,3 @@ import * as core from 'core';
export const NAME = 'crud'; export const NAME = 'crud';
export const module = vendors.ng.module(NAME, []); export const module = vendors.ng.module(NAME, []);

View File

@ -7,6 +7,7 @@ var concat = require('gulp-concat');
var extend = require('gulp-extend'); var extend = require('gulp-extend');
var babel = require('gulp-babel'); var babel = require('gulp-babel');
var fs = require('fs'); var fs = require('fs');
var merge = require('merge-stream');
var del = require('del'); var del = require('del');
var webpack = require('webpack'); var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server'); var WebpackDevServer = require('webpack-dev-server');
@ -52,7 +53,7 @@ gulp.task('spliting', function() {
// Webpack // Webpack
gulp.task('webpack', ['spliting'], function(callback) { gulp.task('webpack', ['spliting'], function(cb) {
var myDevConfig = Object.create(webpackConfig); var myDevConfig = Object.create(webpackConfig);
myDevConfig.debug = true; myDevConfig.debug = true;
@ -61,7 +62,7 @@ gulp.task('webpack', ['spliting'], function(callback) {
devCompiler.run(function(err, stats) { devCompiler.run(function(err, stats) {
if (err) throw new gutil.PluginError('webpack', err); if (err) throw new gutil.PluginError('webpack', err);
gutil.log('[webpack]', stats.toString({colors: true})); gutil.log('[webpack]', stats.toString({colors: true}));
callback(); cb();
}); });
}); });
@ -100,16 +101,19 @@ gulp.task('webpack-dev-server', ['spliting'], function() {
var localeFiles = './**/locale/*.json'; var localeFiles = './**/locale/*.json';
gulp.task('locales', function() { gulp.task('locales', function() {
var streams = [];
var modules = ['core', 'crud', 'app', 'login']; var modules = ['core', 'crud', 'app', 'login'];
var langs = ['es', 'en']; var langs = ['es', 'en'];
for(var mod of modules) for(var mod of modules)
for(var lang of langs) { for(var lang of langs) {
var localeFiles = `./${mod}/**/locale/${lang}.json`; var localeFiles = `./${mod}/**/locale/${lang}.json`;
gulp.src(localeFiles) streams.push(gulp.src(localeFiles)
.pipe(extend(`${lang}.json`)) .pipe(extend(`${lang}.json`))
.pipe(gulp.dest(`${buildDir}/locale/${mod}`)); .pipe(gulp.dest(`${buildDir}/locale/${mod}`)));
} }
return merge(streams);
}); });
// Routes // Routes

View File

@ -0,0 +1,10 @@
import {module} from './module';
config.$inject = ['$translatePartialLoaderProvider', '$httpProvider'];
export function config($translatePartialLoaderProvider, $httpProvider) {
$translatePartialLoaderProvider.addPart('login');
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
}
module.config(config);

View File

@ -1,4 +1,4 @@
export * from './module' export * from './module';
import './config';
export {NAME as LOGIN, COMPONENT as LOGIN_COMPONENT} from './login/login'
export {component as Login} from './login/login'

View File

@ -0,0 +1,6 @@
{
"User": "User",
"Password": "Password",
"Do not close session": "Do not close session",
"Enter": "Enter"
}

View File

@ -0,0 +1,6 @@
{
"User": "Usuario",
"Password": "Contraseña",
"Do not close session": "No cerrar sesión",
"Enter": "Entrar"
}

View File

@ -1,14 +1,16 @@
<div class="vn-login"> <div>
<div class="box-wrapper"> <div class="box-wrapper">
<div class="box"> <div class="box">
<img src="./logo.svg"/> <img src="./logo.svg"/>
<form name="form" ng-submit="login.submit()"> <form name="form" ng-submit="$ctrl.submit()">
<vn-textfield label="User" field="login.model.email"></vn-textfield> <vn-textfield label="User" field="$ctrl.model.email"></vn-textfield>
<vn-password label="Password" field="login.model.password"></vn-password> <vn-password label="Password" field="$ctrl.model.password"></vn-password>
<vn-check label="Do not close session" field="login.model.remember"></vn-check> <vn-check label="Do not close session" field="$ctrl.model.remember"></vn-check>
<div class="footer"> <div class="footer">
<vn-submit label="Enter"></vn-submit> <vn-submit label="Enter"></vn-submit>
<vn-spinner enable="login.loading"></vn-spinner> <div class="spinner-wrapper">
<vn-spinner enable="$ctrl.loading"></vn-spinner>
</div>
</div> </div>
</form> </form>
</div> </div>

View File

@ -1,65 +1,57 @@
import {module} from '../module'; import {module} from '../module';
import template from './login.html'; import './login.scss';
import style from './login.scss';
export const COMPONENT = export const component = {
{ template: require('./login.html'),
template: template, controller: controller
controller: controller, };
controllerAs: 'login' module.component('vnLogin', component);
};
module.component('vnLogin', COMPONENT);
controller.$inject = ['$http', '$element']; controller.$inject = ['$http', '$element'];
function controller($http, $element) { function controller($http, $element) {
var self = this; Object.assign(this, {
this.submit = function() { submit: function() {
let model = this.model; let model = this.model;
if (!(model && model.email && model.password)) { if (!(model && model.email && model.password)) {
showMessage('Please insert your email and password'); this.showMessage('Please insert your email and password');
return; return;
}
this.loading = true;
model.appId = window.location.href;
$http.post('/account', this.model).then(
(json) => this.onLoginOk(json),
(json) => this.onLoginErr(json)
);
},
onLoginOk: function(json) {
this.loading = false;
let data = json.data;
window.location = `${data.location}?access_token=${data.location}`;
},
onLoginErr: function(json) {
this.loading = false;
this.model.password = '';
let message;
switch (json.status) {
case 401:
message = 'Invalid credentials';
break;
case -1:
message = 'Can\'t contact with server';
break;
default:
message = 'Something went wrong';
}
this.showMessage(message);
},
showMessage: function(message) {
let snackbar = $element.find('vn-snackbar').controller('vnSnackbar');
snackbar.show({message: message});
} }
});
this.loading = true;
model.appId = window.location.href;
$http.post('/account', this.model).then(
onLoginOk,
onLoginErr
);
};
function onLoginOk(response) {
self.loading = false;
window.location = response.data.location + '?access_token=' + response.data.accessToken;
}
function onLoginErr(response) {
self.loading = false;
self.model.password = '';
let message;
switch (response.status) {
case 401:
message = 'Invalid credentials';
break;
case -1:
message = 'Can\'t contact with server';
break;
default:
message = 'Something went wrong';
}
showMessage(message);
}
function showMessage(message) {
let snackbar = $element.find('vn-snackbar').controller('vnSnackbar');
snackbar.show({message: message});
}
} }
module.config(['$httpProvider', function($httpProvider) {
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
}
]);

View File

@ -1,6 +1,5 @@
.vn-login vn-login > div {
{
position: absolute; position: absolute;
height: 100%; height: 100%;
width: 100%; width: 100%;
@ -11,15 +10,13 @@
font-weight: normal; font-weight: normal;
background-color: #3c393b; background-color: #3c393b;
.box-wrapper .box-wrapper {
{
position: relative; position: relative;
max-width: 22em; max-width: 22em;
margin: auto; margin: auto;
height: inherit; height: inherit;
} }
.box .box {
{
box-sizing: border-box; box-sizing: border-box;
position: absolute; position: absolute;
top: 50%; top: 50%;
@ -30,20 +27,21 @@
box-shadow: 0 0 1em 0 rgba(1,1,1,.6); box-shadow: 0 0 1em 0 rgba(1,1,1,.6);
border-radius: .5em; border-radius: .5em;
} }
img img {
{
width: 100%; width: 100%;
padding-bottom: 1em; padding-bottom: 1em;
} }
.footer .footer {
{
margin-top: 1em; margin-top: 1em;
margin-left: 3em;
text-align: center; text-align: center;
position: relative;
} }
input[type=submit] .spinner-wrapper {
{ position: absolute;
display: inline; width: 0;
top: .3em;
right: 4em;
overflow: visible;
} }
} }

View File

@ -39,6 +39,7 @@
"gulp-wrap": "^0.13.0", "gulp-wrap": "^0.13.0",
"html-loader": "^0.4.4", "html-loader": "^0.4.4",
"json-loader": "^0.5.4", "json-loader": "^0.5.4",
"merge-stream": "^1.0.1",
"node-sass": "^3.11.0", "node-sass": "^3.11.0",
"pre-commit": "^1.1.3", "pre-commit": "^1.1.3",
"raw-loader": "*", "raw-loader": "*",

View File

@ -1,4 +1,4 @@
import * as _ngPaging from 'angular-paging'; import 'angular-paging';
export const ngPaging = { export const ngPaging = {
name: 'bw.paging' name: 'bw.paging'

View File

@ -1,6 +0,0 @@
import * as _ngTranslate from 'angular-translate';
import * as _ngTranslateLoader from 'angular-translate-loader-partial';
export const ngTranslate = {
name: 'pascalprecht.translate'
};

View File

@ -0,0 +1,6 @@
import 'angular-translate';
import 'angular-translate-loader-partial';
export const ngTranslate = {
name: 'pascalprecht.translate'
};

View File

@ -1,8 +0,0 @@
import * as _angular from 'angular';
export const ng = {
module: _angular.module,
bootstrap: _angular.bootstrap,
$$minErr :_angular.$$minErr,
angular:_angular
}

8
@salix/vendor/src/angular.js vendored Normal file
View File

@ -0,0 +1,8 @@
import * as angular from 'angular';
export const ng = {
module: angular.module,
bootstrap: angular.bootstrap,
$$minErr :angular.$$minErr,
angular: angular
}

View File

@ -0,0 +1,4 @@
import * as mdl from 'material-design-lite';
import 'material-design-lite/dist/material.orange-deep_orange.min.css';
export const materialdesignlite = mdl;

View File

@ -1,4 +0,0 @@
import * as _materialdesignlite from 'material-design-lite';
import * as css from 'material-design-lite/dist/material.orange-deep_orange.min.css';
export const materialdesignlite = _materialdesignlite;

View File

@ -1,4 +1,4 @@
import * as _oclazyload from 'oclazyload'; import 'oclazyload';
import {getComponentName} from './util'; import {getComponentName} from './util';
export const oclazyload = { export const oclazyload = {

View File

@ -1,4 +1,4 @@
import * as _uirouter from 'angular-ui-router'; import 'angular-ui-router';
import {getComponentName} from './util'; import {getComponentName} from './util';
export const uirouter = { export const uirouter = {

View File

@ -1,6 +1,6 @@
export * from './angular-vendor'; export * from './angular';
export * from './oclazyload-vendor'; export * from './oc-lazy-load';
export * from './uirouter-vendor'; export * from './ui-router';
export * from './angular-translate-vendor'; export * from './angular-translate';
export * from './materialdesignlite-vendor'; export * from './material-design-lite';
export * from './angular-paging'; export * from './angular-paging';