Commit 57d64207 authored by Pedro Eduardo Trujillo's avatar Pedro Eduardo Trujillo
Browse files

Refactoriza nuevo diseño de mapa en partes 

Limpia de lógica común las extensiones del diseño de mapa, creando
nuevas extensiones que aportan esta funcionalidad común. De esta manera,
se puede hacer tanto implícita como explícitamente la dependencia entre
extensiones del mismo diseño, favoreciendo la reutilización del código y
facilitando su mantenimiento.
parent e2e1e68a

client-app/src/design/map/_AddAtlasComponent.js

+6 −51
Original line number Diff line number Diff line
@@ -2,17 +2,15 @@ define([ 
	'dojo/_base/declare'

	, 'dojo/_base/lang'

	, 'src/component/atlas/Atlas'

	, 'src/component/layout/TabsDisplayer'

	, 'src/component/mapQuery/QueryOnMap'

	, 'src/design/map/_AddTabsDisplayerComponent'

], function(

	declare

	, lang

	, Atlas

	, TabsDisplayer

	, QueryOnMap

	, _AddTabsDisplayerComponent

) {



	return declare(null, {

	return declare(_AddTabsDisplayerComponent, {

		// summary:

		//   Lógica de diseño para añadir un componente Atlas, junto con otros para mostrarlo y para gestionar

		//   pulsaciones sobre el mapa.
@@ -25,17 +23,9 @@ define([ 


			const parentChannel = this.getChannel();



			this.mergeComponentAttribute('tabsDisplayerConfig', {

				parentChannel

			});



			this.mergeComponentAttribute('atlasConfig', {

				parentChannel

			});



			this.mergeComponentAttribute('queryOnMapConfig', {

				parentChannel

			});

		},



		createDesignControllerComponents: function() {
@@ -45,26 +35,12 @@ define([ 
			const mapInstance = inheritedComponents.map,

				mapChannel = mapInstance?.getChannel();



			let tabsDisplayer = inheritedComponents.tabsDisplayer;



			if (!tabsDisplayer) {

				tabsDisplayer = this._createDesignTabDisplayerComponent();

				lang.mixin(inheritedComponents, {tabsDisplayer});

			}



			const tabsDisplayerChannel = tabsDisplayer.getChannel(),

				addTabChannel = tabsDisplayer.getChannel('ADD_TAB');

			const tabsDisplayer = inheritedComponents.tabsDisplayer,

				addTabChannel = tabsDisplayer?.getChannel('ADD_TAB');



			const atlas = this._createDesignAtlasComponent(mapChannel, addTabChannel);



			const queryOnMap = this._createDesignQueryOnMapComponent(mapChannel, tabsDisplayerChannel);



			return lang.mixin(inheritedComponents, {atlas, queryOnMap});

		},



		_createDesignTabDisplayerComponent: function() {



			return new TabsDisplayer(this.tabsDisplayerConfig);

			return lang.mixin(inheritedComponents, {atlas});

		},



		_createDesignAtlasComponent: function(mapChannel, addTabChannel) {
@@ -74,27 +50,6 @@ define([ 
			});



			return new Atlas(this.atlasConfig);

		},



		_createDesignQueryOnMapComponent: function(mapChannel, tabsDisplayerChannel) {



			this.mergeComponentAttribute('queryOnMapConfig', {

				mapChannel, tabsDisplayerChannel

			});



			return new QueryOnMap(this.queryOnMapConfig);

		},



		populateDesignLayoutNodes: function() {



			this.inherited(arguments);



			const tabsDisplayerInstance = this.getComponentInstance('tabsDisplayer'),

				additionalContentNode = this.getLayoutNode('additionalContent');



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

				node: additionalContentNode

			});

		}

	});

});

client-app/src/design/map/_AddBrowserComponent.js

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

	'dojo/_base/declare'

	, 'dojo/_base/lang'

	, 'src/component/browser/_BrowserSelectionManager'

	, 'src/component/browser/_ButtonsInRow'

	, 'src/component/browser/_DragAndDrop'

	, 'src/component/browser/_Framework'

	, 'src/component/browser/_GeoJsonParser'

	, 'src/component/browser/_HierarchicalSelect'

	, 'src/component/browser/_MultiTemplate'

	, 'src/component/browser/_Select'

	, 'src/component/browser/bars/Total'

	, 'src/component/browser/ListImpl'

	, 'src/component/layout/genericDisplayer/GenericWithTopbarDisplayerImpl'

	, 'src/component/layout/TabsDisplayer'

	, 'src/component/textSearch/TextSearchSuggestionsRequestImpl'

	, 'src/design/map/_AddTabsDisplayerComponent'

	, 'templates/DefaultList'

], function(

	declare

	, lang

	, _BrowserSelectionManager

	, _ButtonsInRow

	, _DragAndDrop

	, _Framework

	, _GeoJsonParser

	, _HierarchicalSelect

	, _MultiTemplate

	, _Select

	, Total

	, ListImpl

	, GenericWithTopbarDisplayerImpl

	, TabsDisplayer

	, TextSearchSuggestionsRequestImpl

	, _AddTabsDisplayerComponent

	, TemplateDefaultList

) {



	const browserComponentExtensionDefinitions = {

		dragAndDrop: _DragAndDrop,

		hierarchicalSelect: _HierarchicalSelect,

		select: _Select

		multiTemplate: _MultiTemplate,

		select: _Select,

		selectionManager: _BrowserSelectionManager

	};



	return declare(null, {

	return declare(_AddTabsDisplayerComponent, {

		// summary:

		//   Lógica de diseño para añadir un componente Browser, junto con otros para mostrarlo y filtrar contenido.

		//   Debe asociarse como mixin a un componente al instanciarlo, junto con la parte de controlador y alguna
@@ -48,8 +54,11 @@ define([ 
				enabledBrowserExtensions: {

					dragAndDrop: false,

					hierarchicalSelect: false,

					select: false

				}

					select: false,

					selectionManager: false,

					multiTemplate: false

				},

				browserTabIconClass: 'fa fa-table'

			};



			const inheritedDefaultConfig = this.inherited(arguments) || {};
@@ -64,10 +73,6 @@ define([ 
			const parentChannel = this.getChannel(),

				target = this._getTarget?.();



			this.mergeComponentAttribute('tabsDisplayerConfig', {

				parentChannel

			});



			this.mergeComponentAttribute('searchConfig', {

				parentChannel,

				target
@@ -81,9 +86,9 @@ define([ 
				rowConfig: {

					buttonsConfig: {

						listButton: [{

							icon: "fa-map-marker",

							icon: 'fa-map-marker',

							title: 'mapCentering',

							btnId: "mapCentering",

							btnId: 'mapCentering',

							returnItem: true

						}]

					}
@@ -104,13 +109,6 @@ define([ 


			const inheritedComponents = this.inherited(arguments);



			let tabsDisplayer = inheritedComponents.tabsDisplayer;



			if (!tabsDisplayer) {

				tabsDisplayer = this._createDesignTabDisplayerComponent();

				lang.mixin(inheritedComponents, {tabsDisplayer});

			}



			const browser = this._createDesignBrowserComponent(),

				browserWrapper = this._createDesignBrowserWrapperComponent(browser),

				search = this._createDesignSearchComponent(browserWrapper);
@@ -118,11 +116,6 @@ define([ 
			return lang.mixin(inheritedComponents, {browserWrapper, browser, search});

		},



		_createDesignTabDisplayerComponent: function() {



			return new TabsDisplayer(this.tabsDisplayerConfig);

		},



		_createDesignBrowserComponent: function() {



			return new this._BrowserComponentDefinition(this.browserConfig);
@@ -142,6 +135,13 @@ define([ 
			return new TextSearchSuggestionsRequestImpl(this.searchConfig);

		},



		_setOwnCallbacksForEvents: function() {



			this.inherited(arguments);



			this.on('ME_OR_ANCESTOR_HIDDEN', () => this._addBrowserComponentOnHide());

		},



		populateDesignLayoutNodes: function() {



			this.inherited(arguments);
@@ -156,12 +156,11 @@ define([ 
				content: searchInstance

			});



			const tabsDisplayerInstance = this.getComponentInstance('tabsDisplayer'),

				additionalContentNode = this.getLayoutNode('additionalContent');

			const tabsDisplayerInstance = this.getComponentInstance('tabsDisplayer');



			this._publish(tabsDisplayerInstance.getChannel('ADD_TAB'), {

				title: this.browserConfig.title || this.i18n.geographicData,

				iconClass: 'fa fa-table',

				iconClass: this.browserTabIconClass,

				channel: browserWrapperChannel,

				prepend: true

			});
@@ -169,10 +168,6 @@ define([ 
			this._publish(tabsDisplayerInstance.getChannel('SHOW_TAB'), {

				channel: browserWrapperChannel

			});



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

				node: additionalContentNode

			});

		},



		_defineSubscriptions: function() {
@@ -189,11 +184,18 @@ define([ 


		_subDesignBrowserComponentButtonEvent: function(evt) {



			var publicCallback = `${evt.btnId}Callback`,

			const publicCallback = `${evt.btnId}Callback`,

				privateCallback = `_${evt.btnId}Callback`;



			this[publicCallback]?.(evt);

			this[privateCallback]?.(evt);

		},



		_addBrowserComponentOnHide: function() {



			const browserInstance = this.getComponentInstance('browser');



			this._publish(browserInstance.getChannel('CLEAR'));

		}

	});

});

client-app/src/design/map/_AddMapLayerComponent.js

+4 −4
Original line number Diff line number Diff line
@@ -73,12 +73,12 @@ define([ 
			if (this.mapLayerDefinition === 'cluster') {

				this.mergeComponentAttribute('mapLayerConfig', {

					categoryStyle: 'bubbles',

					getMarkerCategory: lang.hitch(this, this._getMarkerCategory),

					getPopupContent: lang.hitch(this, this._getPopupContent)

					getMarkerCategory: feature => this._getMarkerCategory(feature),

					getPopupContent: data => this._getPopupContent(data)

				});

			} else if (this.mapLayerDefinition === 'geojson') {

				this.mergeComponentAttribute('mapLayerConfig', {

					onEachFeature: lang.hitch(this, this._bindPopupToFeature)

					onEachFeature: (feature, layer) => this._bindPopupToFeature(feature, layer)

				});

			}
@@ -176,7 +176,7 @@ define([ 
		_bindPopupToFeature: function(feature, layer) {



			layer.bindPopup(this.mapLayerPopupTemplate?.({

				feature: feature,

				feature,

				i18n: this.i18n

			}));

		}

client-app/src/design/map/_AddQueryOnMapComponent.js

0 → 100644
+54 −0
Original line number Diff line number Diff line 
define([

	'dojo/_base/declare'

	, 'dojo/_base/lang'

	, 'src/component/mapQuery/QueryOnMap'

	, 'src/design/map/_AddTabsDisplayerComponent'

], function(

	declare

	, lang

	, QueryOnMap

	, _AddTabsDisplayerComponent

) {



	return declare(_AddTabsDisplayerComponent, {

		// summary:

		//   Lógica de diseño para añadir un componente QueryOnMap, para gestionar pulsaciones sobre el mapa.

		//   Debe asociarse como mixin a un componente al instanciarlo, junto con la parte de controlador y alguna

		//   maquetación de este diseño.



		_setConfigurations: function() {



			this.inherited(arguments);



			const parentChannel = this.getChannel();



			this.mergeComponentAttribute('queryOnMapConfig', {

				parentChannel

			});

		},



		createDesignControllerComponents: function() {



			const inheritedComponents = this.inherited(arguments);



			const mapInstance = inheritedComponents.map,

				mapChannel = mapInstance?.getChannel();



			const tabsDisplayer = inheritedComponents.tabsDisplayer,

				tabsDisplayerChannel = tabsDisplayer?.getChannel();



			const queryOnMap = this._createDesignQueryOnMapComponent(mapChannel, tabsDisplayerChannel);



			return lang.mixin(inheritedComponents, {queryOnMap});

		},



		_createDesignQueryOnMapComponent: function(mapChannel, tabsDisplayerChannel) {



			this.mergeComponentAttribute('queryOnMapConfig', {

				mapChannel, tabsDisplayerChannel

			});



			return new QueryOnMap(this.queryOnMapConfig);

		}

	});

});

client-app/src/design/map/_AddTabsDisplayerComponent.js

0 → 100644
+54 −0
Original line number Diff line number Diff line 
define([

	'dojo/_base/declare'

	, 'dojo/_base/lang'

	, 'src/component/layout/TabsDisplayer'

], function(

	declare

	, lang

	, TabsDisplayer

) {



	return declare(null, {

		// summary:

		//   Lógica de diseño para añadir un componente TabsContainer, para mostrar contenidos junto al mapa.

		//   Debe asociarse como mixin a un componente al instanciarlo, junto con la parte de controlador y alguna

		//   maquetación de este diseño.



		_setConfigurations: function() {



			this.inherited(arguments);



			const parentChannel = this.getChannel();



			this.mergeComponentAttribute('tabsDisplayerConfig', {

				parentChannel

			});

		},



		createDesignControllerComponents: function() {



			const inheritedComponents = this.inherited(arguments);



			const tabsDisplayer = this._createDesignTabDisplayerComponent();



			return lang.mixin(inheritedComponents, {tabsDisplayer});

		},



		_createDesignTabDisplayerComponent: function() {



			return new TabsDisplayer(this.tabsDisplayerConfig);

		},



		populateDesignLayoutNodes: function() {



			this.inherited(arguments);



			const tabsDisplayerInstance = this.getComponentInstance('tabsDisplayer'),

				additionalContentNode = this.getLayoutNode('additionalContent');



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

				node: additionalContentNode

			});

		}

	});

});