Refactoriza carga de layouts dinámicos (10463275) · Commits · REDMIC Project / Client / Web

client-app/src/detail/activity/ActivityDetailView.js

+40 −32

Original line number	Diff line number	Diff line
		@@ -52,15 +52,6 @@ define([
		this._onEvt('ME_OR_ANCESTOR_HIDDEN', lang.hitch(this, this._onActivityDetailsHidden));
		},

		_onGotExternalConfig: function(evt) {

		var configValue = evt[this.externalConfigPropName];

		this._publish(this.getChannel('SET_PROPS'), {
		detailLayouts: configValue
		});
		},

		_itemAvailable: function(res) {

		this.inherited(arguments);
		@@ -73,46 +64,56 @@ define([
		this._emitEvt('GET_EXTERNAL_CONFIG', {
		propertyName: this.externalConfigPropName
		});

		this._prepareCustomWidgets();
		},

		_requestAncestorsData: function(res) {

		this._emitEvt('REQUEST', {
		method: 'POST',
		target: this.ancestorsTarget,
		action: '_search',
		params: {
		const params = {
		path: {
		path: res?.data?.path
		},
		query: {
		returnFields: ['id', 'path', 'name']
		}
		}
		};

		this._emitEvt('REQUEST', {
		method: 'POST',
		target: this.ancestorsTarget,
		action: '_search',
		params
		});
		},

		_prepareSpatialExtension: function() {

		var wkt = this._activityData.spatialExtension;
		const wkt = this._activityData.spatialExtension;
		if (!wkt) {
		return;
		}

		var mapInstance = this._getWidgetInstance('spatialExtension');
		this._once(mapInstance.getChannel('BBOX_CHANGED'), lang.hitch(this, this._showSpatialExtension, wkt));
		const widgetKey = 'spatialExtension',
		mapInstance = this._getWidgetInstance(widgetKey);

		this._once(mapInstance.getChannel('BBOX_CHANGED'), () => this._showSpatialExtension(wkt));

		this._showWidget(widgetKey);
		},

		this._showWidget('spatialExtension');
		_onGotExternalConfig: function(evt) {

		const configValue = evt[this.externalConfigPropName];

		this._publish(this.getChannel('SET_PROPS'), {
		detailLayouts: configValue
		});
		},

		_dataAvailable: function(res) {

		var data = res.data,
		ancestors = data.data;
		const ancestorsData = res.data.data;

		this._activityData.ancestors = ancestors;
		this._activityData.ancestors = ancestorsData;

		this._dataToInfo();
		},
		@@ -127,29 +128,36 @@ define([

		_showSpatialExtension: function(wkt) {

		var mapInstance = this._getWidgetInstance('spatialExtension');
		const widgetKey = 'spatialExtension',
		mapInstance = this._getWidgetInstance(widgetKey);

		this._once(mapInstance.getChannel('WKT_ADDED'), (res) => this._lastWktLayer = res.layer);

		this._publish(mapInstance.getChannel('ADD_WKT'), {
		wkt,
		id: 'spatialExtension'
		id: widgetKey
		});
		},

		_onActivityDetailsHidden: function() {

		this._removeSpatialExtension();
		this._removeCustomWidgets();
		},

		_removeSpatialExtension: function() {

		const widgetKey = 'spatialExtension';

		if (this._lastWktLayer) {
		var mapInstance = this._getWidgetInstance('spatialExtension');
		const mapInstance = this._getWidgetInstance(widgetKey);

		this._publish(mapInstance.getChannel('REMOVE_LAYER'), {
		layer: this._lastWktLayer
		});
		}

		this._hideWidget('spatialExtension');

		this._removeCustomWidgets();
		this._hideWidget(widgetKey);
		}
		});
		});

client-app/src/detail/activity/_ActivityLayoutWidget.js

+102 −159

Original line number	Diff line number	Diff line
		@@ -21,7 +21,8 @@ define([
		GOT_USER_GRANTS_FOR_ACTIVITY: 'gotUserGrantsForActivity',
		TIMESERIES_LINE_CHARTS_DATA: 'timeseriesLineChartsData',
		TIMESERIES_WINDROSE_DATA: 'timeseriesWindroseData'
		}
		},
		_detailLayoutWidgets: []
		};

		lang.mixin(this, this.config, args);
		@@ -29,91 +30,73 @@ define([

		_onDetailLayoutsPropSet: function(evt) {

		var currentElementId = this.pathVariableId,
		activityDetailLayouts = evt.value && evt.value[currentElementId];
		const currentElementId = this.pathVariableId,
		activityDetailLayouts = evt.value?.[currentElementId];

		if (!activityDetailLayouts \|\| !activityDetailLayouts.length) {
		if (!activityDetailLayouts?.length) {
		// TODO medida temporal por retrocompatibilidad con activityCategory
		this._prepareActivityCategoryCustomWidgets();
		return;
		}

		this._processActivityDetailLayouts(currentElementId, activityDetailLayouts);
		activityDetailLayouts.forEach((layout) => this._processActivityDetailLayout(currentElementId, layout));
		},

		_processActivityDetailLayouts: function(activityId, layouts) {
		_processActivityDetailLayout: function(activityId, layout) {

		layouts.forEach(lang.hitch(this, function(layout) {

		var layoutType = layout.type,
		layoutConfig = layout.config \|\| {},
		layoutCheckGrants = layout.checkGrants \|\| false;
		const layoutType = layout?.type;

		if (!layoutType) {
		return;
		}

		var grantedCallback = lang.hitch(this, this._prepareDetailLayoutWidgets, layoutType, layoutConfig);
		const layoutConfig = layout?.config ?? {},
		layoutCheckGrants = layout?.checkGrants ?? false;

		if (!layoutCheckGrants) {
		this._prepareDetailLayoutWidgets(layoutType, layoutConfig);
		return;
		}

		if (layoutCheckGrants) {
		var notGrantedCallback = lang.hitch(this, this._onLayoutNotGranted),
		dfd = new Deferred();
		const dfd = new Deferred();

		dfd.then(grantedCallback, notGrantedCallback);
		dfd.then(
		(resolvedGrants) => this._onLayoutGranted(layout, resolvedGrants),
		(rejectedGrants) => this._onLayoutNotGranted(layout, rejectedGrants));

		this._checkUserGrantsForActivityData(activityId, dfd);
		} else {
		grantedCallback();
		}
		}));
		},

		_checkUserGrantsForActivityData: function(activityId, dfd) {

		var channelToSubscribe = this._buildChannel(this.credentialsChannel, 'GOT_USER_GRANTS_FOR_ACTIVITY');

		this._once(channelToSubscribe, lang.hitch(this, function(grantsDfd, res) {

		if (res.accessGranted) {
		grantsDfd.resolve(true);
		} else {
		grantsDfd.reject(false);
		}
		}, dfd));
		this._once(this._buildChannel(this.credentialsChannel, 'GOT_USER_GRANTS_FOR_ACTIVITY'), (res) => {
		res?.accessGranted ? dfd.resolve() : dfd.reject();
		});

		var channelToPublish = this._buildChannel(this.credentialsChannel, 'GET_USER_GRANTS_FOR_ACTIVITY');
		this._publish(channelToPublish, {
		this._publish(this._buildChannel(this.credentialsChannel, 'GET_USER_GRANTS_FOR_ACTIVITY'), {
		activityId: activityId
		});
		},

		_onLayoutNotGranted: function(grantsDfd) {
		_onLayoutGranted: function(layout, resolvedGrants) {

		// TODO mostrar al usuario un aviso de que existen datos en la actividad, pero no tiene permiso.
		// Ofrecerle identificarse.
		},
		const layoutType = layout.type,
		layoutConfig = layout.config ?? {};

		_prepareCustomWidgets: function() {
		// TODO medida temporal por retrocompatibilidad con activityCategory

		var currentElementId = this.pathVariableId,
		detailLayout = this.detailLayouts && this.detailLayouts[currentElementId],
		detailLayoutWidgetsCount = this._detailLayoutWidgets && this._detailLayoutWidgets.length;
		layoutConfig.accessGranted = true;

		if (!detailLayout \|\| !detailLayoutWidgetsCount) {
		this._prepareActivityCategoryCustomWidgets();
		}
		this._prepareDetailLayoutWidgets(layoutType, layoutConfig);
		},

		_prepareDetailLayoutWidgets: function(detailLayout, layoutConfig, grantsDfd) {
		_onLayoutNotGranted: function(layout, rejectedGrants) {

		if (!this._detailLayoutWidgets) {
		this._detailLayoutWidgets = [];
		}
		// TODO mostrar al usuario un aviso de que existen datos en la actividad, pero no tiene permiso.
		// Ofrecerle identificarse.
		},

		if (grantsDfd !== undefined) {
		layoutConfig.accessGranted = grantsDfd;
		}
		_prepareDetailLayoutWidgets: function(detailLayout, layoutConfig) {

		var prepareWidgetsMethod;
		let prepareWidgetsMethod;

		if (detailLayout === 'citationMap') {
		prepareWidgetsMethod = '_prepareCitationActivityWidgets';
		@@ -140,127 +123,94 @@ define([
		return;
		}

		var widgetKey = this[prepareWidgetsMethod](layoutConfig);

		if (widgetKey instanceof Array) {
		this._detailLayoutWidgets = this._detailLayoutWidgets.concat(widgetKey);
		} else {
		this._detailLayoutWidgets.push(widgetKey);
		}
		this[prepareWidgetsMethod](layoutConfig);
		},

		_prepareActivityCategoryCustomWidgets: function() {
		// TODO borrar cuando se deje de usar activityCategory

		if (!this._detailLayoutWidgets) {
		this._detailLayoutWidgets = [];
		}

		var activityCategory = this._activityData.activityCategory,
		widgetKey;
		const activityCategory = this._activityData.activityCategory;

		if (activityCategory === 'ci') {
		widgetKey = this._prepareCitationActivityWidgets();
		this._prepareCitationActivityWidgets();
		} else if (activityCategory === 'ml') {
		widgetKey = this._prepareMapLayerActivityWidgets();
		this._prepareMapLayerActivityWidgets();
		} else if (['tr', 'at', 'pt'].indexOf(activityCategory) !== -1) {
		widgetKey = this._prepareTrackingActivityWidgets();
		this._prepareTrackingActivityWidgets();
		} else if (activityCategory === 'if') {
		widgetKey = this._prepareInfrastructureActivityWidgets();
		this._prepareInfrastructureActivityWidgets();
		} else if (activityCategory === 'ar') {
		widgetKey = this._prepareAreaActivityWidgets();
		this._prepareAreaActivityWidgets();
		} else if (activityCategory === 'ft') {
		widgetKey = this._prepareFixedTimeseriesActivityWidgets();
		this._prepareFixedTimeseriesActivityWidgets();
		} else if (activityCategory === 'ec') {
		widgetKey = this._prepareEmbeddedContentsActivityWidgets();
		}

		if (widgetKey) {
		if (widgetKey instanceof Array) {
		this._detailLayoutWidgets = this._detailLayoutWidgets.concat(widgetKey);
		} else {
		this._detailLayoutWidgets.push(widgetKey);
		}
		this._prepareEmbeddedContentsActivityWidgets();
		}
		},

		_prepareCitationActivityWidgets: function(layoutConfig) {

		var key = 'activityCitation',
		const key = 'activityCitation',
		config = this._getActivityCitationConfig(layoutConfig);

		this._addWidget(key, config);

		return key;
		this._addCustomWidget(key, config);
		},

		_prepareMapLayerActivityWidgets: function(layoutConfig) {

		var key = 'activityMapLayer',
		const key = 'activityMapLayer',
		config = this._getActivityMapLayerConfig(layoutConfig);

		this._addWidget(key, config);

		return key;
		this._addCustomWidget(key, config);
		},

		_prepareTrackingActivityWidgets: function(layoutConfig) {

		var key = 'activityTracking',
		const key = 'activityTracking',
		config = this._getActivityTrackingConfig(layoutConfig);

		this._addWidget(key, config);

		return key;
		this._addCustomWidget(key, config);
		},

		_prepareInfrastructureActivityWidgets: function(layoutConfig) {

		var key = 'activityInfrastructure',
		const key = 'activityInfrastructure',
		config = this._getActivityInfrastructureConfig(layoutConfig);

		this._addWidget(key, config);

		return key;
		this._addCustomWidget(key, config);
		},

		_prepareAreaActivityWidgets: function(layoutConfig) {

		var key = 'activityArea',
		const key = 'activityArea',
		config = this._getActivityAreaConfig(layoutConfig);

		this._addWidget(key, config);

		return key;
		this._addCustomWidget(key, config);
		},

		_prepareFixedObservationSeriesActivityWidgets: function(layoutConfig) {

		var mapKey = 'activityFixedObservationSeriesMap',
		const mapKey = 'activityFixedObservationSeriesMap',
		mapConfig = this._getActivityFixedObservationSeriesMapConfig(layoutConfig);

		this._addWidget(mapKey, mapConfig);
		this._addCustomWidget(mapKey, mapConfig);

		var listKey = 'activityFixedObservationSeriesList',
		const listKey = 'activityFixedObservationSeriesList',
		listConfig = this._getActivityFixedObservationSeriesListConfig(mapKey, layoutConfig);

		this._addWidget(listKey, listConfig);

		return [mapKey, listKey];
		this._addCustomWidget(listKey, listConfig);
		},

		_prepareFixedTimeseriesActivityWidgets: function(layoutConfig) {

		var mapKey = 'activityFixedTimeseriesMap',
		const mapKey = 'activityFixedTimeseriesMap',
		mapConfig = this._getActivityFixedTimeseriesMapConfig(layoutConfig);

		this._addWidget(mapKey, mapConfig);
		this._addCustomWidget(mapKey, mapConfig);

		var timeseriesDataChannel = this._getWidgetInstance(mapKey).getChannel('TIMESERIES_DATA');
		const timeseriesDataChannel = this._getWidgetInstance(mapKey).getChannel('TIMESERIES_DATA');

		this._subscribe(timeseriesDataChannel, lang.hitch(this, this._onTimeseriesDataPublished, layoutConfig));

		return mapKey;
		},

		_onTimeseriesDataPublished: function(layoutConfig, data) {
		@@ -271,7 +221,7 @@ define([

		_onTimeseriesLineChartsDataPublished: function(layoutConfig, data) {

		var lineChartsKey = 'activityFixedTimeseriesLineCharts',
		const lineChartsKey = 'activityFixedTimeseriesLineCharts',
		lineChartsConfig = this._getActivityFixedTimeseriesLineChartsConfig(layoutConfig),
		lineChartsDataChannel = this.getChannel('TIMESERIES_LINE_CHARTS_DATA'),
		siteName = data.site.name;
		@@ -286,53 +236,48 @@ define([
		}
		this._lineChartsWidgetKey = lineChartsKey;

		this._addWidget(lineChartsKey, lineChartsConfig);
		this._addCustomWidget(lineChartsKey, lineChartsConfig);

		this._publish(lineChartsDataChannel, data);
		},

		_onTimeseriesWindroseDataPublished: function(layoutConfig, data) {

		var allowedSpeedParameters = [
		const allowedSpeedParameters = [
		61, // velocidad viento media
		66 // velocidad viento máxima
		],
		allowedDirectionParameters = [
		];
		const allowedDirectionParameters = [
		62, // dirección viento media
		67 // dirección viento máxima
		],
		filteredMeasurements = data.measurements.filter(lang.hitch(this, this._filterWindroseMeasurements, {
		allowedSpeedParameters: allowedSpeedParameters,
		allowedDirectionParameters: allowedDirectionParameters
		}));
		];

		const filteredMeasurements = data.measurements.filter((measurement) => {

		const paramId = measurement.parameter.id;
		return allowedSpeedParameters.includes(paramId) \|\| allowedDirectionParameters.includes(paramId);
		});

		if (this._windroseWidgetKeys) {
		this._windroseWidgetKeys.forEach(lang.hitch(this, this._destroyWidget));
		}
		this._windroseWidgetKeys = [];

		for (var i = 0; i < filteredMeasurements.length - 1; i += 2) {
		for (let i = 0; i < filteredMeasurements.length - 1; i += 2) {
		this._onEachWindroseDataPair({
		index: i ? i - 1 : 0,
		layoutConfig: layoutConfig,
		measurements: [filteredMeasurements[i], filteredMeasurements[i + 1]],
		site: data.site,
		allowedSpeedParameters: allowedSpeedParameters,
		allowedDirectionParameters: allowedDirectionParameters
		allowedSpeedParameters,
		allowedDirectionParameters
		});
		}
		},

		_filterWindroseMeasurements: function(args, measurement) {

		var paramId = measurement.parameter.id;

		return args.allowedSpeedParameters.includes(paramId) \|\| args.allowedDirectionParameters.includes(paramId);
		},

		_onEachWindroseDataPair: function(args) {

		var windroseKey = 'activityFixedTimeseriesWindrose' + args.index,
		const windroseKey = 'activityFixedTimeseriesWindrose' + args.index,
		windroseConfig = this._getActivityFixedTimeseriesWindroseConfig(args.layoutConfig),
		windroseDataChannel = this.getChannel('TIMESERIES_WINDROSE_DATA') + args.index,
		siteName = args.site.name,
		@@ -349,7 +294,7 @@ define([

		this._windroseWidgetKeys.push(windroseKey);

		this._addWidget(windroseKey, windroseConfig);
		this._addCustomWidget(windroseKey, windroseConfig);

		this._publish(windroseDataChannel, {
		measurements: args.measurements
		@@ -358,43 +303,41 @@ define([

		_prepareEmbeddedContentsActivityWidgets: function(layoutConfig) {

		var embeddedContents = this._activityData.embeddedContents,
		keys = [];

		var embeddedContent = layoutConfig && layoutConfig.content;
		const embeddedContents = this._activityData.embeddedContents,
		layoutEmbeddedContent = layoutConfig?.content;

		if (embeddedContent) {
		embeddedContents.push({embeddedContent: embeddedContent});
		if (layoutEmbeddedContent) {
		embeddedContents.push({embeddedContent: layoutEmbeddedContent});
		}

		for (var i = 0; i < embeddedContents.length; i++) {
		var embeddedContentObj = embeddedContents[i],
		for (let i = 0; i < embeddedContents.length; i++) {
		const embeddedContentObj = embeddedContents[i],
		embeddedContentValue = embeddedContentObj.embeddedContent,
		embeddedContentParentNode = globalThis.document.createElement('object');

		embeddedContentParentNode.innerHTML = embeddedContentValue;

		var key = 'embeddedContent' + i,
		const key = 'embeddedContent' + i,
		node = embeddedContentParentNode.firstChild,
		config = this._getActivityEmbeddedContentsConfig(node, i, layoutConfig);

		keys.push(key);

		this._addWidget(key, config);
		this._addCustomWidget(key, config);
		}

		return keys;
		},

		_prepareSupersetDashboardActivityWidget: function(layoutConfig) {

		var dashboardId = layoutConfig.id,
		const dashboardId = layoutConfig.id,
		key = 'superset-' + dashboardId,
		config = this._getSupersetDashboardConfig(layoutConfig);

		this._addWidget(key, config);
		this._addCustomWidget(key, config);
		},

		_addCustomWidget: function(key, config) {

		return key;
		this._addWidget(key, config);
		this._detailLayoutWidgets.push(key);
		},

		_removeCustomWidgets: function() {
		@@ -404,7 +347,7 @@ define([
		}

		while (this._detailLayoutWidgets.length) {
		var key = this._detailLayoutWidgets.pop();
		const key = this._detailLayoutWidgets.pop();
		this._destroyWidget(key);
		}
		}