Commit 40b83226 authored by Pedro Eduardo Trujillo's avatar Pedro Eduardo Trujillo
Browse files

Revisa componente App y sus layout

parent ba3c402c

client-app/src/app/App.js

+44 −69
Original line number Diff line number Diff line 
define([

	'dojo/_base/declare'

	, 'dojo/_base/lang'

	, 'dojo/dom'

	, 'put-selector'

	, 'src/app/component/Analytics'
@@ -16,7 +15,6 @@ define([ 
	, 'src/app/component/Router'

	, 'src/app/util/CheckBrowser'

	, 'src/component/base/_Module'

	, 'src/component/base/_Store'

	, 'src/component/notification/Alert'

	, 'src/component/notification/CommunicationCenter'

	, 'src/redmicConfig'
@@ -24,7 +22,6 @@ define([ 
	, 'templates/LoadingCustom'

], function(

	declare

	, lang

	, dom

	, put

	, Analytics
@@ -40,7 +37,6 @@ define([ 
	, Router

	, CheckBrowser

	, _Module

	, _Store

	, Alert

	, CommunicationCenter

	, redmicConfig
@@ -48,14 +44,13 @@ define([ 
	, LoadingCustomTemplate

) {



	var rootNode = dom.byId('rootContainer'),

	const rootNode = dom.byId('rootContainer'),

		nativeLoadingNode = dom.byId('loadingContainer');



	var hideNativeLoadingNode = function() {

	const hideNativeLoadingNode = function() {



		if (nativeLoadingNode) {

			put('!', nativeLoadingNode);

			nativeLoadingNode = undefined;

		}

	};
@@ -94,9 +89,9 @@ define([ 
		//	_prevModuleKey: String

		//		Clave del módulo antiguo dentro de moduleStore.



		constructor: function(args) {

		postMixInProperties: function() {



			this.config = {

			const defaultConfig = {

				ownChannel: this.rootChannel,

				events: {

					GET_CREDENTIALS: 'getCredentials',
@@ -112,58 +107,60 @@ define([ 
				_reconnectTimeout: 10000

			};



			lang.mixin(this, this.config, args);

			this._mergeOwnAttributes(defaultConfig);



			this.inherited(arguments);

		},



		_initialize: function() {



			var parentChannel = this.getChannel();

			const parentChannel = this.getChannel();



			this._router = new Router({

				parentChannel: parentChannel

				parentChannel

			});



			new CookieLoader();



			new RestManagerImpl({

				parentChannel: parentChannel

				parentChannel

			});



			new CommunicationCenter({

				parentChannel: parentChannel

				parentChannel

			});



			new Alert({

				parentChannel: parentChannel

				parentChannel

			});



			new Analytics({

				parentChannel: parentChannel

				parentChannel

			});



			new MetaTags({

				parentChannel: parentChannel

				parentChannel

			});



			this._credentials = new Credentials({

				parentChannel: parentChannel

				parentChannel

			});



			this._externalConfig = new ExternalConfig({

				parentChannel: parentChannel

				parentChannel

			});



			this._moduleStore = new ModuleStore({

				parentChannel: parentChannel

				parentChannel

			});



			this._loading = new Loading({

				parentChannel: parentChannel,

				parentChannel,

				globalNode: rootNode

			});



			new Auth({

				parentChannel: parentChannel

				parentChannel

			});

		},
@@ -209,6 +206,8 @@ define([ 


		postCreate: function() {



			this.inherited(arguments);



			this._emitEvt('GET_CREDENTIALS');

		},
@@ -235,27 +234,33 @@ define([ 
				this._showReconnectingMessage();

			}



			setTimeout(lang.hitch(this, this._emitEvt, 'GET_CREDENTIALS'), this._reconnectTimeout);

			setTimeout(() => this._emitEvt('GET_CREDENTIALS'), this._reconnectTimeout);

		},



		_subChangeModule: function(req) {



			var route = req.route,

				locationQuery = req.locationQuery,

				routeChanged = this._changeModule(route);

			const route = req.route;



			if (!routeChanged) {

			this._currModuleKey = route;

			if (this._currModuleKey === this._prevModuleKey) {

				return;

			}

			this._prevModuleKey = route;



			this._once(this._loading.getChannel('LOADING_DRAWN'), () => this._onLoadingDrawn());



			this._publish(this._loading.getChannel('LOADING'), {

				instant: !this._currModuleInstance

			});



			this._emitEvt('MODULE_CHANGED', {

				route: route

				route

			});

		},



		_showReconnectingMessage: function() {



			var template = LoadingCustomTemplate({

			const template = LoadingCustomTemplate({

				message: this.i18n.tryingToReconnect,

				iconClass: 'hourglass-spin'

			});
@@ -266,31 +271,6 @@ define([ 
			hideNativeLoadingNode();

		},



		_changeModule: function(route) {

			//	summary:

			//		Actualiza el módulo que se visualiza.

			//	tags:

			//		private

			//	route:

			//		ruta del nuevo módulo



			this._currModuleKey = route;



			if (this._currModuleKey === this._prevModuleKey) {

				return false;

			}



			this._prevModuleKey = this._currModuleKey;



			this._once(this._loading.getChannel('LOADING_DRAWN'), lang.hitch(this, this._onLoadingDrawn));



			this._publish(this._loading.getChannel('LOADING'), {

				instant: !this._currModuleInstance

			});



			return true;

		},



		_onLoadingDrawn: function() {



			if (this._currModuleInstance) {
@@ -328,18 +308,15 @@ define([ 
			//	tags:

			//		private



			if (!instance || !instance.getChannel) {

			if (!instance?.getChannel) {

				this._publish(this._router.getChannel('GO_TO_ERROR_ROUTE'), {});

				return;

			}



			this._currModuleInstance = instance;

			this._once(instance.getChannel('DESTROYED'), () => this._onModuleDestroyed(this._currModuleKey));



			this._once(this._currModuleInstance.getChannel('DESTROYED'), lang.hitch(this, this._onModuleDestroyed,

				this._currModuleKey));



			this._once(this._currLayoutInstance.getChannel('MODULE_SHOWN'), lang.hitch(this, this._onModuleShown));



			this._once(this._currLayoutInstance.getChannel('MODULE_SHOWN'), () => this._onModuleShown());

			this._publish(this._currLayoutInstance.getChannel('SHOW_MODULE'), {

				moduleKey: this._currModuleKey,

				moduleInstance: instance
@@ -352,7 +329,7 @@ define([ 
			//	tags:

			//		private



			this._once(this._currModuleInstance.getChannel('HIDDEN'), lang.hitch(this, this._onModuleHidden));

			this._once(this._currModuleInstance.getChannel('HIDDEN'), () => this._onModuleHidden());



			this._publish(this._currModuleInstance.getChannel('HIDE'));

		},
@@ -401,7 +378,7 @@ define([ 
			//	layout:

			//		Instancia del layout a mostrar



			this._once(layout.getChannel('SHOWN'), lang.hitch(this, this._onLayoutShown));

			this._once(layout.getChannel('SHOWN'), () => this._onLayoutShown());



			this._publish(layout.getChannel('SHOW'), {

				node: rootNode
@@ -427,7 +404,7 @@ define([ 
				return;

			}



			this._once(this._currLayoutInstance.getChannel('HIDDEN'), lang.hitch(this, this._onLayoutHidden));

			this._once(this._currLayoutInstance.getChannel('HIDDEN'), () => this._onLayoutHidden());

			this._publish(this._currLayoutInstance.getChannel('HIDE'));

		},
@@ -438,7 +415,7 @@ define([ 
			//	tags:

			//		private



			this._once(this._currLayoutInstance.getChannel('DESTROYED'), lang.hitch(this, this._onLayoutDestroyed));

			this._once(this._currLayoutInstance.getChannel('DESTROYED'), () => this._onLayoutDestroyed());

			this._publish(this._currLayoutInstance.getChannel('DESTROY'));

		},
@@ -447,21 +424,19 @@ define([ 
			delete this._currLayoutInstance;

		},



		_onModuleShown: function(/*Object*/ res) {

		_onModuleShown: function() {



			this._publish(this._loading.getChannel('LOADED'));

		},



		_onModuleHidden: function(/*Object*/ res) {

		_onModuleHidden: function() {

			//	summary:

			//		Se ejecuta cuando el módulo actual se ha terminado de cerrar. Lo desconecta y abre el siguiente

			//		módulo tras recibir la confirmación de desconexión del actual.

			//	tags:

			//		private

			//	res:

			//		Respuesta recibida en la suscripción



			this._once(this._currModuleInstance.getChannel('DISCONNECTED'), lang.hitch(this, this._openModule));

			this._once(this._currModuleInstance.getChannel('DISCONNECTED'), () => this._openModule());

			this._publish(this._currModuleInstance.getChannel('DISCONNECT'));

		},

client-app/src/app/component/layout/InnerLayoutImpl.js

+32 −42
Original line number Diff line number Diff line 
define([

	'dojo/_base/declare'

	, 'dojo/_base/lang'

	, 'dojo/aspect'

	, 'dojo/dom-class'

	, 'put-selector'

	, 'src/util/Credentials'

	, 'src/app/component/layout/Layout'

	, 'src/app/component/sidebar/MainSidebarImpl'

	, 'src/app/component/Topbar'
@@ -12,13 +9,11 @@ define([ 
	, 'src/component/selection/Selector'

	, 'src/component/socket/Socket'

	, 'src/component/socket/Task'

	, 'src/util/Credentials'

], function(

	declare

	, lang

	, aspect

	, domClass

	, put

	, Credentials

	, Layout

	, MainSidebarImpl

	, Topbar
@@ -26,6 +21,7 @@ define([ 
	, Selector

	, Socket

	, Task

	, Credentials

) {



	return declare(Layout, {
@@ -37,71 +33,65 @@ define([ 
		//		Inicialmente, crea los módulos y estructuras necesarias para la parte interna de la app. También se

		//		encarga de actualizar el estado de sidebar.



		constructor: function(args) {

		postMixInProperties: function() {



			this.config = {

			const defaultConfig = {

				ownChannel: this.innerAppOwnChannel,

				events: {

					UPDATE_ACTIVE: 'updateActive'

				},

				actions: {

					UPDATE_ACTIVE: 'updateActive',

					TOGGLE_SIDEBAR: 'toggleSidebar'

				},

				'class': 'mainContainer',

				reducedWidthClass: 'reducedWidth',

				contentContainerClass: 'contentContainer',

				collapseButtonClass: 'collapseSidebarButton',

				uncollapsedSidebarClass: 'uncollapsedSidebar',

				overlaySidebarBackgroundClass: 'overlaySidebarBackground',



				innerAppEvents: {

					UPDATE_ACTIVE: 'updateActive'

				},

				innerAppActions: {

					UPDATE_ACTIVE: 'updateActive',

					TOGGLE_SIDEBAR: 'toggleSidebar'

				}

				overlaySidebarBackgroundClass: 'overlaySidebarBackground'

			};



			lang.mixin(this, this.config, args);

			this._mergeOwnAttributes(defaultConfig);



			aspect.after(this, '_mixEventsAndActions', lang.hitch(this, this._mixEventsAndActionsInnerApp));

			aspect.after(this, '_setOwnCallbacksForEvents', lang.hitch(this,

				this._setInnerAppOwnCallbacksForEvents));



			aspect.before(this, '_defineSubscriptions', lang.hitch(this, this._defineInnerAppSubscriptions));

			aspect.before(this, '_definePublications', lang.hitch(this, this._defineInnerAppPublications));

			this.inherited(arguments);

		},



		_mixEventsAndActionsInnerApp: function () {

		_setOwnCallbacksForEvents: function() {



			lang.mixin(this.events, this.innerAppEvents);

			lang.mixin(this.actions, this.innerAppActions);

			delete this.innerAppEvents;

			delete this.innerAppActions;

		},



		_setInnerAppOwnCallbacksForEvents: function() {

			this.inherited(arguments);



			this._onEvt('MODULE_SHOWN', lang.hitch(this, this._onAppModuleShown));

			this._onEvt('RESIZE', lang.hitch(this, this._onAppResize));

			this._onEvt('MODULE_SHOWN', evt => this._onAppModuleShown(evt));

			this._onEvt('RESIZE', () => this._onAppResize());

		},



		_defineInnerAppSubscriptions: function() {

		_defineSubscriptions: function() {



			this.subscriptionsConfig.push({

				channel: this.getChannel('TOGGLE_SIDEBAR'),

				callback: '_subToggleSidebar',

				options: {

					predicate: lang.hitch(this, this._chkModuleCanResize)

					predicate: () => this._chkModuleCanResize()

				}

			});



			this.inherited(arguments);

		},



		_defineInnerAppPublications: function() {

		_definePublications: function() {



			this.publicationsConfig.push({

				event: 'UPDATE_ACTIVE',

				channel: this.sidebar.getChannel('UPDATE_ACTIVE')

			});



			this.inherited(arguments);

		},



		_initialize: function() {



			this.inherited(arguments);



			this._createStructure();

			this._createModules();

			this._createListeners();
@@ -141,7 +131,7 @@ define([ 
				return;

			}



			var overlayMainSidebarIsOpen = domClass.contains(this.ownerDocumentBody, this.uncollapsedSidebarClass);

			const overlayMainSidebarIsOpen = domClass.contains(this.ownerDocumentBody, this.uncollapsedSidebarClass);



			if (overlayMainSidebarIsOpen) {

				this._appClickHandler.resume();
@@ -161,7 +151,7 @@ define([ 
			//	summary:

			//		Manda a actualizar el item activo del sidebar



			var moduleKey = evt.key;

			const moduleKey = evt.key;



			this._emitEvt('UPDATE_ACTIVE', {

				path: moduleKey
@@ -221,11 +211,11 @@ define([ 


		_createListeners: function() {



			this._appClickHandler = this._listenGlobalClicks(lang.hitch(this, this._onAppClicked));

			this._appClickHandler = this._listenGlobalClicks((evt) => this._onAppClicked(evt));

			this._appClickHandler.pause();

		},



		_getNode: function() {

		_getContentNode: function() {

			//	summary:

			//		Retorna el nodo donde se van a mostrar los módulos.

			//	tags:
@@ -283,7 +273,7 @@ define([ 


		_onAppClicked: function(evt) {



			var nodeDoesNotBelongToMainSidebar = !this._checkClickBelongsToNode(evt, this.sidebar.domNode),

			const nodeDoesNotBelongToMainSidebar = !this._checkClickBelongsToNode(evt, this.sidebar.domNode),

				nodeBelongsToSidebarOverlay = this._checkClickBelongsToNode(evt, this._overlaySidebarBackground);



			if (nodeDoesNotBelongToMainSidebar && nodeBelongsToSidebarOverlay) {

client-app/src/app/component/layout/Layout.js

+9 −10
Original line number Diff line number Diff line 
define([

	'dojo/_base/declare'

	, 'dojo/_base/lang'

	, 'src/app/component/layout/_LayoutItfc'

	, 'src/component/base/_Module'

	, 'src/component/base/_Show'

], function(

	declare

	, lang

	, _LayoutItfc

	, _Module

	, _Show
@@ -18,10 +16,9 @@ define([ 
		//	Description:

		//		Recibe órdenes para mostrar en pantalla los diferentes módulos de la aplicación.



		constructor: function(args) {

		postMixInProperties: function() {



			this.config = {

				ownChannel: 'app',

			const defaultConfig = {

				events: {

					MODULE_SHOWN: 'moduleShown'

				},
@@ -31,7 +28,9 @@ define([ 
				}

			};



			lang.mixin(this, this.config, args);

			this._mergeOwnAttributes(defaultConfig);



			this.inherited(arguments);

		},



		_defineSubscriptions: function() {
@@ -52,18 +51,18 @@ define([ 


		_setOwnCallbacksForEvents: function() {



			this._onEvt('HIDE', lang.hitch(this, this._onAppHide));

			this._onEvt('HIDE', () => this._onAppHide());

		},



		_subShowModule: function(req) {



			var moduleKey = req.moduleKey,

			const moduleKey = req.moduleKey,

				moduleInstance = req.moduleInstance;



			this._once(moduleInstance.getChannel('SHOWN'), lang.hitch(this, this._onModuleShown, moduleKey));

			this._once(moduleInstance.getChannel('SHOWN'), () => this._onModuleShown(moduleKey));



			this._publish(moduleInstance.getChannel('SHOW'), {

				node: this._getNode(),

				node: this._getContentNode(),

				metaTags: true

			});

		},

client-app/src/app/component/layout/OuterLayoutImpl.js

+6 −6
Original line number Diff line number Diff line 
define([

	'dojo/_base/declare'

	, 'dojo/_base/lang'

	, 'src/app/component/layout/Layout'

], function(

	declare

	, lang

	, Layout

) {
@@ -13,18 +11,20 @@ define([ 
		//		Implementación del componente Layout, encargada de mostrar las vistas de la parte externa de la

		//		aplicación.



		constructor: function(args) {

		postMixInProperties: function() {



			this.config = {

			const defaultConfig = {

				ownChannel: this.outerAppOwnChannel,

				'class': 'outerApp',

				baseClass: ''

			};



			lang.mixin(this, this.config, args);

			this._mergeOwnAttributes(defaultConfig);



			this.inherited(arguments);

		},



		_getNode: function() {

		_getContentNode: function() {



			return this.domNode;

		}

client-app/src/app/component/layout/_LayoutItfc.js

+1 −1
Original line number Diff line number Diff line
@@ -18,7 +18,7 @@ define([ 


			return lang.mixin(this.inherited(arguments), {

				'_doResize': {},

				'_getNode': {},

				'_getContentNode': {},

				'_onAppHide': {}

			});

		}