Slim down QueryResultsService.setActionsForLayers() function

[Raruto]

The following function is nearly 250 lines long:

g3w-client/src/app/gui/queryresults/queryresultsservice.js

Lines 386 to 634 in e8996a7

	proto.setActionsForLayers = function(layers, options={add: false}) {
	const {add} = options;
	if (!add) {
	this.unlistenerlayeractionevents = [];
	layers.forEach(layer => {
	/**
	* set eventually layer action tool and need to be reactive
	* @type {{}}
	*/
	this.state.layeractiontool[layer.id] = Vue.observable({
	component: null,
	config: null
	});
	const currentactiontoolslayer = {};
	const currentationfeaturelayer = {};
	layer.features.forEach((feature, index)=> {
	currentactiontoolslayer[index] = null;
	currentationfeaturelayer[index] = null;
	});
	this.state.currentactiontools[layer.id] = Vue.observable(currentactiontoolslayer);
	this.state.currentactionfeaturelayer[layer.id] = Vue.observable(currentationfeaturelayer);
	const is_external_layer_or_wms = layer.external || (layer.source ? layer.source.type === 'wms' : false);
	if (!this.state.layersactions[layer.id]) this.state.layersactions[layer.id] = [];
	/**
	* An action is an object contains
	* {
	* id: Unique action Id => required True
	download: if is action download or not => required False
	class: calss fontawsome to show icon => required True,
	state: need to be reactive. Used for example to toggled state of action icon => required False
	hint: Tooltip text => required False
	init: Method called when action is loaded => required False
	clear: Method called before clear the service. Used for example to clear unwatch => require False
	change: Method called when feature of layer is changed
	cbk: Method called when action is cliccked => required True
	}
	*
	* }
	*/
	//in case of geometry
	if (layer.hasgeometry) {
	this.state.layersactions[layer.id].push({
	id: 'gotogeometry',
	download: false,
	mouseover: true,
	class: GUI.getFontClass('marker'),
	hint: 'sdk.mapcontrols.query.actions.zoom_to_feature.hint',
	cbk: throttle(this.goToGeometry.bind(this))
	});
	}
	// in case of relations
	if (this._relations) {
	const relations = this._relations[layer.id] && this._relations[layer.id].filter(relation =>{
	return relation.type === 'MANY';
	});
	if (relations && relations.length) {
	const chartRelationIds = [];
	relations.forEach(relation => {
	const id = this.plotLayerIds.find(id => id === relation.referencingLayer);
	id && chartRelationIds.push(id);
	});
	this.state.layersactions[layer.id].push({
	id: 'show-query-relations',
	download: false,
	class: GUI.getFontClass('relation'),
	hint: 'sdk.mapcontrols.query.actions.relations.hint',
	cbk: this.showQueryRelations,
	relations,
	chartRelationIds
	});
	const state = this.createActionState({
	layer
	});
	chartRelationIds.length && this.state.layersactions[layer.id].push({
	id: 'show-plots-relations',
	download: false,
	opened: true,
	class: GUI.getFontClass('chart'),
	state,
	hint: 'sdk.mapcontrols.query.actions.relations_charts.hint',
	cbk: throttle(this.showRelationsChart.bind(this, chartRelationIds))
	});
	}
	}
	/**
	*
	* Check if layer has atlas
	*/
	this.getAtlasByLayerId(layer.id).length && this.state.layersactions[layer.id].push({
	id: `printatlas`,
	download: true,
	class: GUI.getFontClass('print'),
	hint: `sdk.tooltips.atlas`,
	cbk: this.printAtlas.bind(this)
	});
	const state = this.createActionState({
	layer
	});
	if (layer.downloads.length === 1) {
	const [format] = layer.downloads;
	const cbk = this.downloadFeatures.bind(this, format);
	layer[format] = Vue.observable({
	active: false
	});
	this.state.layersactions[layer.id].push({
	id: `download_${format}_feature`,
	download: true,
	state,
	class: GUI.getFontClass('download'),
	hint: `sdk.tooltips.download_${format}`,
	cbk: (layer, feature, action, index)=>{
	action.state.toggled[index] = !action.state.toggled[index];
	if (action.state.toggled[index]) cbk(layer, feature, action, index);
	else this.setCurrentActionLayerFeatureTool({
	index,
	action,
	layer
	})
	}
	});
	} else if (layer.downloads.length > 1 ){
	// SET CONSTANT TO AVOID TO CHANGE ALL THINGS
	const ACTIONTOOLSDOWNLOADFORMATS = DownloadFormats.name;
	const downloads = [];
	layer.downloads.forEach(format => {
	downloads.push({
	id: `download_${format}_feature`,
	download: true,
	format,
	class: GUI.getFontClass(format),
	hint: `sdk.tooltips.download_${format}`,
	cbk: (layer, feature, action, index)=> {
	//used to untoggle downloads action
	this.downloadFeatures(format, layer, feature, action, index);
	const downloadsaction = this.state.layersactions[layer.id].find(action => action.id === 'downloads');
	if (this.state.query.type !== 'polygon') downloadsaction.cbk(layer, feature, downloadsaction, index);
	}
	});
	});
	this.state.actiontools[ACTIONTOOLSDOWNLOADFORMATS] = this.state.actiontools[ACTIONTOOLSDOWNLOADFORMATS] || {};
	// set config of actionstools
	this.state.actiontools[ACTIONTOOLSDOWNLOADFORMATS][layer.id] = {
	downloads // ARE DOWNLOAD ACTIONS,
	};
	// used to
	//check if has download actions
	this.state.layersactions[layer.id].push({
	id: `downloads`,
	download: true,
	class: GUI.getFontClass('download'),
	state,
	toggleable: true,
	hint: `Downloads`,
	change({features}) {
	features.forEach((feature, index) =>{
	if (this.state.toggled[index] === undefined) VM.$set(this.state.toggled, index, false);
	else this.state.toggled[index] = false;
	});
	},
	cbk: (layer, feature, action, index) => {
	action.state.toggled[index] = !action.state.toggled[index];
	this.setCurrentActionLayerFeatureTool({
	layer,
	index,
	action,
	component: action.state.toggled[index] ? DownloadFormats : null
	});
	}
	});
	}
	/*
	Check if si external layer or wms
	*/
	!is_external_layer_or_wms && this.state.layersactions[layer.id].push({
	id: 'removefeaturefromresult',
	download: false,
	mouseover: true,
	class: GUI.getFontClass('minus-square'),
	style: {
	color: 'red'
	},
	hint: 'sdk.mapcontrols.query.actions.remove_feature_from_results.hint',
	cbk: this.removeFeatureLayerFromResult.bind(this)
	});
	/**
	* check if selection is active
	*/
	if (layer.selection.active !== undefined) {
	// selection action
	const state = this.createActionState({
	layer
	});
	this.state.layersactions[layer.id].push({
	id: 'selection',
	download: false,
	class: GUI.getFontClass('success'),
	hint: 'sdk.mapcontrols.query.actions.add_selection.hint',
	state,
	init: ({feature, index, action}={})=>{
	layer.selection.active !== void 0 && this.checkFeatureSelection({
	layerId: layer.id,
	index,
	feature,
	action
	})
	},
	cbk: throttle(this.addToSelection.bind(this))
	});
	this.listenClearSelection(layer, 'selection');
	//end selection action
	}
	/*
	If not wms of external layer show copy link to feature
	*/
	!is_external_layer_or_wms && layer.hasgeometry && this.state.layersactions[layer.id].push({
	id: 'link_zoom_to_fid',
	download: false,
	class: GUI.getFontClass('link'),
	hint: 'sdk.mapcontrols.query.actions.copy_zoom_to_fid_url.hint',
	hint_change: {
	hint: 'sdk.mapcontrols.query.actions.copy_zoom_to_fid_url.hint_change',
	duration: 1000
	},
	cbk: this.copyZoomToFidUrl.bind(this)
	});
	layer.editable && this.state.layersactions[layer.id].push({
	id: 'editing',
	class: GUI.getFontClass('pencil'),
	hint: 'Editing',
	cbk: (layer, feature) => {
	const layerId = layer.id;
	const featureId = feature.attributes[G3W_FID];
	feature.geometry && this.mapService.zoomToGeometry(feature.geometry);
	setTimeout(()=>{
	this.editFeature({
	layerId,
	featureId
	});
	}, 300)
	}
	});
	});
	this.addActionsForLayers(this.state.layersactions, this.state.layers);
	}
	};

If possible, consider simplifying it by using subroutines.

[volterra79]

@Raruto agree