From 985405c76e5399113015d6d1e796e14e7fac5213 Mon Sep 17 00:00:00 2001
From: volterra79 <boccacci.francesco@gmail.com>
Date: Mon, 16 Oct 2023 16:00:45 +0200
Subject: [PATCH 01/19] :sparkles: Add TODO comment where show Ux interface to
 choose fields to download

---
 src/app/core/layers/layer.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/app/core/layers/layer.js b/src/app/core/layers/layer.js
index 71068fa71..81b3f3670 100644
--- a/src/app/core/layers/layer.js
+++ b/src/app/core/layers/layer.js
@@ -511,6 +511,9 @@ proto.getFilterToken = function () {
  */
 proto.getDownloadFilefromDownloadDataType = function(type, {data={}, options}) {
   data.filtertoken = this.getFilterToken();
+  /**
+   * @TODO add UX fields choose
+   */
   switch (type) {
     case 'shapefile': return this.getShp({data, options});
     case 'xls':       return this.getXls({data, options});

From a70e360de70b1717c17548bd65f302e546ecc6bc Mon Sep 17 00:00:00 2001
From: volterra79 <boccacci.francesco@gmail.com>
Date: Tue, 17 Oct 2023 08:54:18 +0200
Subject: [PATCH 02/19] :sparkles: Create GUI chooseLayerFields method to show
 and choose layer fields

---
 src/app/core/layers/layer.js           | 21 +++++++++
 src/components/DownloadFieldsLayer.vue | 65 ++++++++++++++++++++++++++
 src/index.prod.js                      | 18 +++++++
 3 files changed, 104 insertions(+)
 create mode 100644 src/components/DownloadFieldsLayer.vue

diff --git a/src/app/core/layers/layer.js b/src/app/core/layers/layer.js
index 81b3f3670..8e36a06ed 100644
--- a/src/app/core/layers/layer.js
+++ b/src/app/core/layers/layer.js
@@ -3,6 +3,7 @@ import { DOWNLOAD_FORMATS } from 'app/constant';
 import DataRouterService from 'services/data';
 import ProjectsRegistry from 'store/projects';
 import ApplicationService from 'services/application';
+import GUI from 'services/gui';
 
 const { t } = require('core/i18n/i18n.service');
 const { inherit, base, XHR } = require('core/utils/utils');
@@ -501,6 +502,20 @@ proto.getFilterToken = function () {
   return ApplicationService.getFilterToken();
 };
 
+/**
+ * @since v3.9.0
+ */
+proto.chooseFieldsToDownload = function() {
+  return new Promise((resolve, reject) => {
+
+    GUI.chooseLayerFields(this.getTableFields().map(({name, label}) => ({
+      name,
+      label,
+      selected: true
+    })))
+  })
+}
+
 /**
  *
  * DOWNLOAD METHODS
@@ -525,6 +540,7 @@ proto.getDownloadFilefromDownloadDataType = function(type, {data={}, options}) {
 };
 
 proto.getGeoTIFF = function({data={}}={}) {
+  this.chooseFieldsToDownload();
   data.filtertoken = this.getFilterToken();
   return XHR.fileDownload({
     url: this.getUrl('geotiff'),
@@ -534,6 +550,7 @@ proto.getGeoTIFF = function({data={}}={}) {
 };
 
 proto.getXls = function({data={}}={}) {
+  this.chooseFieldsToDownload();
   data.filtertoken = this.getFilterToken();
   return XHR.fileDownload({
     url: this.getUrl('xls'),
@@ -543,6 +560,7 @@ proto.getXls = function({data={}}={}) {
 };
 
 proto.getShp = function({data={}}={}) {
+  this.chooseFieldsToDownload();
   data.filtertoken = this.getFilterToken();
   return XHR.fileDownload({
     url: this.getUrl('shp'),
@@ -552,6 +570,7 @@ proto.getShp = function({data={}}={}) {
 };
 
 proto.getGpx = function({data={}}={}) {
+  this.chooseFieldsToDownload();
   data.filtertoken = this.getFilterToken();
   return XHR.fileDownload({
     url: this.getUrl('gpx'),
@@ -561,6 +580,7 @@ proto.getGpx = function({data={}}={}) {
 };
 
 proto.getGpkg = function({data={}}={}) {
+  this.chooseFieldsToDownload();
   data.filtertoken = this.getFilterToken();
   return XHR.fileDownload({
     url: this.getUrl('gpkg'),
@@ -570,6 +590,7 @@ proto.getGpkg = function({data={}}={}) {
 };
 
 proto.getCsv = function({data={}}={}) {
+  this.chooseFieldsToDownload();
   data.filtertoken = this.getFilterToken();
   return XHR.fileDownload({
     url: this.getUrl('csv'),
diff --git a/src/components/DownloadFieldsLayer.vue b/src/components/DownloadFieldsLayer.vue
new file mode 100644
index 000000000..9ccb39cd8
--- /dev/null
+++ b/src/components/DownloadFieldsLayer.vue
@@ -0,0 +1,65 @@
+<template>
+  <section id="g3w-fields-to-downloads">
+      <input
+        @click.stop = "selectAll"
+        :id         = "`select_all_fields_to_download`"
+        type        = "checkbox"
+        class       = "magic-checkbox"
+      >
+      <label
+        :for  = "`select_all_fields_to_download`"
+        style = "color: #FFF"> All
+      </label>
+    <divider/>
+    <div v-for="field in fields" :key="field.name">
+      <input
+        @click.stop = "selectField(field)"
+        :id         = "`${field.name}_${index}_select_field_to_download`"
+        type        = "checkbox"
+        class       = "magic-checkbox"
+      >
+      <label
+        :for  = "`${field.name}_${index}_select_field_to_download`"
+        style = "color: #FFF"> {{ field.label }}
+      </label>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'downloadfieldslayer',
+  props: {
+    fields: {
+      type: Array,
+      default: [],
+      required: true
+    }
+  },
+  data() {
+    return {
+      all: true
+    }
+  },
+  methods: {
+    selectField(field) {
+      field.selected = !field.selected;
+    },
+    selectAll() {
+      this.all = !this.all;
+    }
+  },
+  watch: {
+    all(bool) {
+      this
+        .fields
+        .forEach(field => field.selected = bool)
+    }
+  }
+};
+</script>
+<style scoped>
+  #g3w-fields-to-downloads label{
+    color: #000000 !important;
+  }
+</style>
diff --git a/src/index.prod.js b/src/index.prod.js
index 3ddb55524..a8d50cf04 100644
--- a/src/index.prod.js
+++ b/src/index.prod.js
@@ -44,6 +44,7 @@ import NavbaritemsLeftComponent from 'components/NavbaritemsLeft.vue';
 import NavbaritemsRightComponent from 'components/NavbaritemsRight.vue';
 import SidebarComponent from 'components/Sidebar.vue';
 import ViewportComponent from 'components/Viewport.vue';
+import DownloadFieldsLayer from "components/DownloadFieldsLayer.vue";
 
 //directives
 import vDisabled from 'directives/v-disabled';
@@ -1069,6 +1070,23 @@ const ApplicationTemplate = function({ApplicationService}) {
       });
     };
 
+    /**
+     * @since v3.9.0
+     */
+    GUI.chooseLayerFields = function(fields=[]) {
+      if (fields.length > 0) {
+
+        const DownloadFieldsLayerClass = Vue.extend(DownloadFieldsLayer);
+        const DownloadFieldsLayerInstance = new DownloadFieldsLayerClass({
+          propsData: {
+            fields
+          }
+        });
+        return GUI.showModalDialog({
+          message: DownloadFieldsLayerInstance.$mount().$el
+        })
+      }
+    }
   };
 
   base(this);

From 809a73301561eb85b79869034f77c5816872a56f Mon Sep 17 00:00:00 2001
From: volterra79 <boccacci.francesco@gmail.com>
Date: Tue, 17 Oct 2023 11:32:22 +0200
Subject: [PATCH 03/19] :recycle: Make getCsv, getXls,etc .. method private.
 Need to call layer getDownloadFilefromDownloadDataType method to download
 format

---
 src/app/core/layers/layer.js                  | 104 +++++++++++-------
 .../gui/queryresults/queryresultsservice.js   |   5 +-
 src/components/CatalogLayerContextMenu.vue    |  19 ++--
 src/index.prod.js                             |  48 ++++++--
 4 files changed, 116 insertions(+), 60 deletions(-)

diff --git a/src/app/core/layers/layer.js b/src/app/core/layers/layer.js
index 8e36a06ed..28a05bb12 100644
--- a/src/app/core/layers/layer.js
+++ b/src/app/core/layers/layer.js
@@ -506,14 +506,10 @@ proto.getFilterToken = function () {
  * @since v3.9.0
  */
 proto.chooseFieldsToDownload = function() {
-  return new Promise((resolve, reject) => {
-
-    GUI.chooseLayerFields(this.getTableFields().map(({name, label}) => ({
-      name,
-      label,
-      selected: true
-    })))
-  })
+  return GUI.chooseLayerFields(
+    this.getTableFields()
+      .map(({name, label}) => ({name, label, selected: true}))
+  )
 }
 
 /**
@@ -521,27 +517,37 @@ proto.chooseFieldsToDownload = function() {
  * DOWNLOAD METHODS
  */
 
-/** 
+
+/**
+ * Method to handle download layer in different format
  * @returns promise
  */
-proto.getDownloadFilefromDownloadDataType = function(type, {data={}, options}) {
-  data.filtertoken = this.getFilterToken();
-  /**
-   * @TODO add UX fields choose
-   */
-  switch (type) {
-    case 'shapefile': return this.getShp({data, options});
-    case 'xls':       return this.getXls({data, options});
-    case 'csv':       return this.getCsv({data, options});
-    case 'gpx':       return this.getGpx({data, options});
-    case 'gpkg':      return this.getGpkg({data, options});
-    case 'geotiff':   return this.getGeoTIFF({ data, options });
+proto.getDownloadFilefromDownloadDataType = async function(type, {data={}, options}={}) {
+  try {
+    const fields = await this.chooseFieldsToDownload();
+    data.ftod = fields.map(field => field.name).join();
+    data.filtertoken = this.getFilterToken();
+    switch (type) {
+      case 'shapefile': return this._getShp({data, options});
+      case 'xls':       return this._getXls({data, options});
+      case 'csv':       return this._getCsv({data, options});
+      case 'gpx':       return this._getGpx({data, options});
+      case 'gpkg':      return this._getGpkg({data, options});
+      case 'geotiff':   return this._getGeoTIFF({ data, options });
+    }
+  } catch(err) {
+    console.log(err)
   }
+
 };
 
-proto.getGeoTIFF = function({data={}}={}) {
-  this.chooseFieldsToDownload();
-  data.filtertoken = this.getFilterToken();
+/**
+ *
+ * @param data
+ * @returns {Promise<unknown>}
+ * @private
+ */
+proto._getGeoTIFF = async function({data={}}={}) {
   return XHR.fileDownload({
     url: this.getUrl('geotiff'),
     data,
@@ -549,9 +555,13 @@ proto.getGeoTIFF = function({data={}}={}) {
   })
 };
 
-proto.getXls = function({data={}}={}) {
-  this.chooseFieldsToDownload();
-  data.filtertoken = this.getFilterToken();
+/**
+ *
+ * @param data
+ * @returns {Promise<unknown>}
+ * @private
+ */
+proto._getXls = async function({data={}}={}) {
   return XHR.fileDownload({
     url: this.getUrl('xls'),
     data,
@@ -559,9 +569,13 @@ proto.getXls = function({data={}}={}) {
   })
 };
 
-proto.getShp = function({data={}}={}) {
-  this.chooseFieldsToDownload();
-  data.filtertoken = this.getFilterToken();
+/**
+ *
+ * @param data
+ * @returns {Promise<unknown>}
+ * @private
+ */
+proto._getShp = async function({data={}}={}) {
   return XHR.fileDownload({
     url: this.getUrl('shp'),
     data,
@@ -569,9 +583,13 @@ proto.getShp = function({data={}}={}) {
   })
 };
 
-proto.getGpx = function({data={}}={}) {
-  this.chooseFieldsToDownload();
-  data.filtertoken = this.getFilterToken();
+/**
+ *
+ * @param data
+ * @returns {Promise<unknown>}
+ * @private
+ */
+proto._getGpx = async function({data={}}={}) {
   return XHR.fileDownload({
     url: this.getUrl('gpx'),
     data,
@@ -579,9 +597,13 @@ proto.getGpx = function({data={}}={}) {
   })
 };
 
-proto.getGpkg = function({data={}}={}) {
-  this.chooseFieldsToDownload();
-  data.filtertoken = this.getFilterToken();
+/**
+ *
+ * @param data
+ * @returns {Promise<unknown>}
+ * @private
+ */
+proto._getGpkg = async function({data={}}={}) {
   return XHR.fileDownload({
     url: this.getUrl('gpkg'),
     data,
@@ -589,9 +611,13 @@ proto.getGpkg = function({data={}}={}) {
   })
 };
 
-proto.getCsv = function({data={}}={}) {
-  this.chooseFieldsToDownload();
-  data.filtertoken = this.getFilterToken();
+/**
+ *
+ * @param data
+ * @returns {Promise<unknown>}
+ * @private
+ */
+proto._getCsv = async function({data={}}={}) {
   return XHR.fileDownload({
     url: this.getUrl('csv'),
     data,
diff --git a/src/app/gui/queryresults/queryresultsservice.js b/src/app/gui/queryresults/queryresultsservice.js
index 6a1822c1b..e159a1829 100644
--- a/src/app/gui/queryresults/queryresultsservice.js
+++ b/src/app/gui/queryresults/queryresultsservice.js
@@ -1634,7 +1634,7 @@ class QueryResultsService extends G3WObject {
   downloadGpx({ id: layerId } = {}, feature) {
     CatalogLayersStoresRegistry
       .getLayerById(layerId)
-      .getGpx({ fid: feature ? feature.attributes[G3W_FID] : null })
+      .getDownloadFilefromDownloadDataType('gpx', {data:{ fid: feature ? feature.attributes[G3W_FID] : null }})
       .catch((err) => { GUI.notify.error(t("info.server_error")); })
       .finally(()  => { this.layerMenu.loading.shp = false; this._hideMenu(); })
   }
@@ -1645,7 +1645,8 @@ class QueryResultsService extends G3WObject {
   downloadXls({ id: layerId } = {}, feature) {
     CatalogLayersStoresRegistry
       .getLayerById(layerId)
-      .getXls({ fid: feature ? feature.attributes[G3W_FID] : null })
+      .getDownloadFilefromDownloadDataType('xls',
+        { data: {fid: feature ? feature.attributes[G3W_FID] : null }})
       .catch(err  => { GUI.notify.error(t("info.server_error")); })
       .finally(() => { this.layerMenu.loading.shp = false; this._hideMenu(); })
   }
diff --git a/src/components/CatalogLayerContextMenu.vue b/src/components/CatalogLayerContextMenu.vue
index fb84163f6..333b895bf 100644
--- a/src/components/CatalogLayerContextMenu.vue
+++ b/src/components/CatalogLayerContextMenu.vue
@@ -430,8 +430,8 @@
         const caller_download_id = ApplicationService.setDownload(true);
         this.layerMenu.loading.geotiff = true;
         const layer = CatalogLayersStoresRegistry.getLayerById(layerId);
-        layer.getGeoTIFF({
-          data:  map_extent ? {
+        layer.getDownloadFilefromDownloadDataType('geotiff',{
+          data: map_extent ? {
             map_extent: GUI.getService('map').getMapExtent().toString()
           } : undefined
         })
@@ -447,7 +447,7 @@
         const caller_download_id = ApplicationService.setDownload(true);
         this.layerMenu.loading.shp = true;
         const layer = CatalogLayersStoresRegistry.getLayerById(layerId);
-        layer.getShp()
+        layer.getDownloadFilefromDownloadDataType('shapefile')
           .catch(err => GUI.notify.error(t("info.server_error")))
           .finally(() => {
             this.layerMenu.loading.shp = false;
@@ -460,8 +460,11 @@
         const caller_download_id = ApplicationService.setDownload(true);
         this.layerMenu.loading.csv = true;
         const layer = CatalogLayersStoresRegistry.getLayerById(layerId);
-        layer.getCsv()
-          .catch(err => GUI.notify.error(t("info.server_error")))
+
+        layer.getDownloadFilefromDownloadDataType('csv')
+          .catch(err => {
+            GUI.notify.error(t("info.server_error"))
+          })
           .finally(() => {
             this.layerMenu.loading.csv = false;
             ApplicationService.setDownload(false, caller_download_id);
@@ -473,7 +476,7 @@
         const caller_download_id = ApplicationService.setDownload(true);
         this.layerMenu.loading.xls = true;
         const layer = CatalogLayersStoresRegistry.getLayerById(layerId);
-        layer.getXls()
+        layer.getDownloadFilefromDownloadDataType('xls')
           .catch(err => GUI.notify.error(t("info.server_error")))
           .finally(() => {
             this.layerMenu.loading.xls = false;
@@ -486,7 +489,7 @@
         const caller_download_id = ApplicationService.setDownload(true);
         this.layerMenu.loading.gpx = true;
         const layer = CatalogLayersStoresRegistry.getLayerById(layerId);
-        layer.getGpx()
+        layer.getDownloadFilefromDownloadDataType('gpx')
           .catch(err => GUI.notify.error(t("info.server_error")))
           .finally(() => {
             this.layerMenu.loading.gpx = false;
@@ -499,7 +502,7 @@
         const caller_download_id = ApplicationService.setDownload(true);
         this.layerMenu.loading.gpkg = true;
         const layer = CatalogLayersStoresRegistry.getLayerById(layerId);
-        layer.getGpkg()
+        layer.getDownloadFilefromDownloadDataType('gpkg')
           .catch(err => GUI.notify.error(t("info.server_error")))
           .finally(() => {
             this.layerMenu.loading.gpkg = false;
diff --git a/src/index.prod.js b/src/index.prod.js
index a8d50cf04..55dfb3d70 100644
--- a/src/index.prod.js
+++ b/src/index.prod.js
@@ -1071,22 +1071,48 @@ const ApplicationTemplate = function({ApplicationService}) {
     };
 
     /**
+     * Method to show and choose al layer fields
      * @since v3.9.0
      */
     GUI.chooseLayerFields = function(fields=[]) {
-      if (fields.length > 0) {
+      return new Promise((resolve, reject) => {
+        if (fields.length > 0) {
 
-        const DownloadFieldsLayerClass = Vue.extend(DownloadFieldsLayer);
-        const DownloadFieldsLayerInstance = new DownloadFieldsLayerClass({
-          propsData: {
-            fields
-          }
-        });
-        return GUI.showModalDialog({
-          message: DownloadFieldsLayerInstance.$mount().$el
-        })
-      }
+          const DownloadFieldsLayerClass    = Vue.extend(DownloadFieldsLayer);
+          const DownloadFieldsLayerInstance = new DownloadFieldsLayerClass({
+            propsData: {
+              fields
+            }
+          });
+          const message                     = DownloadFieldsLayerInstance.$mount().$el;
+
+          const dialog = GUI.showModalDialog({
+            message,
+            closeButton: false,
+            buttons: {
+              ok: {
+                label: 'Ok',
+                className: 'btn-success',
+                callback() {
+                  resolve(fields.filter(field => field.selected));
+                }
+              }
+            }
+          });
+
+          /**
+           * @TODO
+           */
+          dialog.on("shown.bs.modal", evt => evt.target.click());
+
+          DownloadFieldsLayerInstance.$on('selected-fields', bool => dialog.find('button.btn-success').prop('disabled', !bool));
+
+        } else {
+          resolve(fields);
+        }
+      })
     }
+
   };
 
   base(this);

From 3a7dbcbb06e7b99d0ba827c14be67d15ddead3d1 Mon Sep 17 00:00:00 2001
From: volterra79 <boccacci.francesco@gmail.com>
Date: Tue, 17 Oct 2023 11:33:23 +0200
Subject: [PATCH 04/19] :recycle: Clean component adding selected-fields event
 emit

---
 src/components/DownloadFieldsLayer.vue | 54 ++++++++++++++++----------
 1 file changed, 33 insertions(+), 21 deletions(-)

diff --git a/src/components/DownloadFieldsLayer.vue b/src/components/DownloadFieldsLayer.vue
index 9ccb39cd8..641a60177 100644
--- a/src/components/DownloadFieldsLayer.vue
+++ b/src/components/DownloadFieldsLayer.vue
@@ -1,29 +1,35 @@
 <template>
-  <section id="g3w-fields-to-downloads">
+  <div id="g3w-fields-to-downloads">
+    <h4 style="font-weight: bold">Seleziona campi</h4>
+    <section class="g3w-fields-to-downloads-inputs">
       <input
         @click.stop = "selectAll"
         :id         = "`select_all_fields_to_download`"
         type        = "checkbox"
         class       = "magic-checkbox"
+        :checked    = "all"
       >
       <label
         :for  = "`select_all_fields_to_download`"
         style = "color: #FFF"> All
       </label>
-    <divider/>
-    <div v-for="field in fields" :key="field.name">
-      <input
-        @click.stop = "selectField(field)"
-        :id         = "`${field.name}_${index}_select_field_to_download`"
-        type        = "checkbox"
-        class       = "magic-checkbox"
-      >
-      <label
-        :for  = "`${field.name}_${index}_select_field_to_download`"
-        style = "color: #FFF"> {{ field.label }}
-      </label>
-    </div>
-  </section>
+      <divider/>
+      <div v-for="field in fields" :key="field.name">
+        <input
+          @click.stop = "selectField(field)"
+          :id         = "`${field.name}_${index}_select_field_to_download`"
+          type        = "checkbox"
+          class       = "magic-checkbox"
+          :checked    = "field.selected"
+        >
+        <label
+          :for  = "`${field.name}_${index}_select_field_to_download`"
+          style = "color: #FFF"> {{ field.label }}
+        </label>
+      </div>
+    </section>
+  </div>
+
 </template>
 
 <script>
@@ -44,18 +50,24 @@ export default {
   methods: {
     selectField(field) {
       field.selected = !field.selected;
+      if (field.selected) {
+        this.all = undefined === this.fields.find(field => !field.selected);
+        this.$emit('selected-fields', true);
+      } else {
+        this.all = false;
+        this.$emit('selected-fields', undefined !== this.fields.find(field => field.selected));
+      }
     },
     selectAll() {
       this.all = !this.all;
-    }
-  },
-  watch: {
-    all(bool) {
+
       this
         .fields
-        .forEach(field => field.selected = bool)
+        .forEach(field => field.selected = this.all)
+
+      this.$emit('selected-fields', this.all);
     }
-  }
+  },
 };
 </script>
 <style scoped>

From fb1ed712550a51131d6fc79aa08b8bb215fee096 Mon Sep 17 00:00:00 2001
From: volterra79 <boccacci.francesco@gmail.com>
Date: Tue, 17 Oct 2023 11:37:09 +0200
Subject: [PATCH 05/19] :globe_with_meridians: Add translations

---
 src/components/DownloadFieldsLayer.vue | 4 ++--
 src/locales/de.js                      | 8 +++++++-
 src/locales/en.js                      | 8 +++++++-
 src/locales/fi.js                      | 8 +++++++-
 src/locales/fr.js                      | 6 ++++++
 src/locales/it.js                      | 6 ++++++
 src/locales/ro.js                      | 6 ++++++
 src/locales/se.js                      | 6 ++++++
 8 files changed, 47 insertions(+), 5 deletions(-)

diff --git a/src/components/DownloadFieldsLayer.vue b/src/components/DownloadFieldsLayer.vue
index 641a60177..6cba265ce 100644
--- a/src/components/DownloadFieldsLayer.vue
+++ b/src/components/DownloadFieldsLayer.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="g3w-fields-to-downloads">
-    <h4 style="font-weight: bold">Seleziona campi</h4>
+    <h4 style="font-weight: bold" v-t="'download.fields.title'"></h4>
     <section class="g3w-fields-to-downloads-inputs">
       <input
         @click.stop = "selectAll"
@@ -11,7 +11,7 @@
       >
       <label
         :for  = "`select_all_fields_to_download`"
-        style = "color: #FFF"> All
+        style = "color: #FFF" v-t="'download.fields.all'">
       </label>
       <divider/>
       <div v-for="field in fields" :key="field.name">
diff --git a/src/locales/de.js b/src/locales/de.js
index 9ee2f16a7..2e9ee36cd 100644
--- a/src/locales/de.js
+++ b/src/locales/de.js
@@ -542,6 +542,12 @@ export default {
       no_data: "Keine Daten",
       nodatafilterd: "Keine passenden Datensätze gefunden",
       infoFiltered: "(gefiltert aus _MAX_ Gesamtsätzen)"
-    }
+    },
+    download: {
+      fields: {
+        all: 'All',
+        title: 'Select fields to download'
+      }
+    },
   },
 };
\ No newline at end of file
diff --git a/src/locales/en.js b/src/locales/en.js
index de37f7fb7..e69322367 100644
--- a/src/locales/en.js
+++ b/src/locales/en.js
@@ -542,6 +542,12 @@ export default {
       no_data: "No data",
       nodatafilterd: "No matching records found",
       infoFiltered: "(filtered from _MAX_ total records)"
-    }
+    },
+    download: {
+      fields: {
+        all: 'All',
+        title: 'Select fields to download'
+      }
+    },
   },
 };
diff --git a/src/locales/fi.js b/src/locales/fi.js
index fe18910e3..923fd6df1 100644
--- a/src/locales/fi.js
+++ b/src/locales/fi.js
@@ -542,6 +542,12 @@ export default {
       no_data: "Ei tietoja",
       nodatafilterd: "Vastaavia tietueita ei löytynyt",
       infoFiltered: "(filtered from _MAX_ total records)"
-    }
+    },
+    download: {
+      fields: {
+        all: 'All',
+        title: 'Select fields to download'
+      }
+    },
   },
 };
\ No newline at end of file
diff --git a/src/locales/fr.js b/src/locales/fr.js
index e0b3de948..2425be6ef 100644
--- a/src/locales/fr.js
+++ b/src/locales/fr.js
@@ -543,6 +543,12 @@ export default {
       info: "Afficher _START_ à _END_ sur _TOTAL_ lignes",
       nodatafilterd: "Aucun résultat trouvé",
       infoFiltered: "(Filtré par _MAX_ rangs totaux)"
+    },
+    download: {
+      fields: {
+        all: 'All',
+        title: 'Select fields to download'
+      }
     }
   },
 };
\ No newline at end of file
diff --git a/src/locales/it.js b/src/locales/it.js
index 3713d9123..6cb505684 100644
--- a/src/locales/it.js
+++ b/src/locales/it.js
@@ -548,5 +548,11 @@ export default {
       nodatafilterd: "Nessun risultato trovato",
       infoFiltered: "(Filtrati da _MAX_ total righe)"
     },
+    download: {
+      fields: {
+        all: 'Tutti',
+        title: 'Seleziona campi da scaricare'
+      }
+    },
   },
 };
\ No newline at end of file
diff --git a/src/locales/ro.js b/src/locales/ro.js
index 03986b04b..f5d1b47b3 100644
--- a/src/locales/ro.js
+++ b/src/locales/ro.js
@@ -542,6 +542,12 @@ export default {
       no_data: "Fără date",
       nodatafilterd: "Niciun rezultat",
       infoFiltered: "(filtrat din _MAX_ de rezultate totale)"
+    },
+    download: {
+      fields: {
+        all: 'All',
+        title: 'Select fields to download'
+      }
     }
   },
 };
\ No newline at end of file
diff --git a/src/locales/se.js b/src/locales/se.js
index f304571c4..f9ab9a987 100644
--- a/src/locales/se.js
+++ b/src/locales/se.js
@@ -543,6 +543,12 @@ export default {
       no_data: "Inga uppgifter",
       nodatafilterd: "Inga motsvarande poster hittades",
       infoFiltered: "(filtered from _MAX_ total records)"
+    },
+    download: {
+      fields: {
+        all: 'All',
+        title: 'Select fields to download'
+      }
     }
   },
 };

From 18e115d49f57783d08d1f4abb64169c0fcc1a63b Mon Sep 17 00:00:00 2001
From: volterra79 <boccacci.francesco@gmail.com>
Date: Tue, 17 Oct 2023 14:19:43 +0200
Subject: [PATCH 06/19] Renamed component from DownloadFiledsLayer to
 ChooseLayerFields.vue. Add grid class in case of fields number plus than 6

---
 ...dFieldsLayer.vue => ChooseLayerFields.vue} | 48 ++++++++++++-------
 src/index.prod.js                             |  9 ++--
 2 files changed, 34 insertions(+), 23 deletions(-)
 rename src/components/{DownloadFieldsLayer.vue => ChooseLayerFields.vue} (57%)

diff --git a/src/components/DownloadFieldsLayer.vue b/src/components/ChooseLayerFields.vue
similarity index 57%
rename from src/components/DownloadFieldsLayer.vue
rename to src/components/ChooseLayerFields.vue
index 6cba265ce..ca281c5be 100644
--- a/src/components/DownloadFieldsLayer.vue
+++ b/src/components/ChooseLayerFields.vue
@@ -1,7 +1,7 @@
 <template>
-  <div id="g3w-fields-to-downloads">
+  <div id="g3w-fields-to-choose">
     <h4 style="font-weight: bold" v-t="'download.fields.title'"></h4>
-    <section class="g3w-fields-to-downloads-inputs">
+    <section class="g3w-fields-to-choose-inputs">
       <input
         @click.stop = "selectAll"
         :id         = "`select_all_fields_to_download`"
@@ -10,23 +10,26 @@
         :checked    = "all"
       >
       <label
-        :for  = "`select_all_fields_to_download`"
+        :for  = "`select_all_fields_to_choose`"
         style = "color: #FFF" v-t="'download.fields.all'">
       </label>
       <divider/>
-      <div v-for="field in fields" :key="field.name">
-        <input
-          @click.stop = "selectField(field)"
-          :id         = "`${field.name}_${index}_select_field_to_download`"
-          type        = "checkbox"
-          class       = "magic-checkbox"
-          :checked    = "field.selected"
-        >
-        <label
-          :for  = "`${field.name}_${index}_select_field_to_download`"
-          style = "color: #FFF"> {{ field.label }}
-        </label>
-      </div>
+      <section class="inputs-body" :class="{grid: gridClass}">
+        <template v-for="field in fields" >
+          <input
+            @click.stop = "selectField(field)"
+            :id         = "`${field.name}_${index}_select_field_to_choose`"
+            type        = "checkbox"
+            class       = "magic-checkbox"
+            :checked    = "field.selected"
+          >
+          <label
+            :for  = "`${field.name}_${index}_select_field_to_choose`"
+            style = "color: #FFF"> {{ field.label }}
+          </label>
+        </template>
+
+      </section>
     </section>
   </div>
 
@@ -44,7 +47,12 @@ export default {
   },
   data() {
     return {
-      all: true
+      all: true,
+    }
+  },
+  computed: {
+    gridClass() {
+      return this.fields.length > 6
     }
   },
   methods: {
@@ -71,7 +79,11 @@ export default {
 };
 </script>
 <style scoped>
-  #g3w-fields-to-downloads label{
+  #g3w-fields-to-choose label{
     color: #000000 !important;
   }
+  #g3w-fields-to-choose .inputs-body.grid {
+    display: grid;
+    grid-template-columns: 50% 50%
+  }
 </style>
diff --git a/src/index.prod.js b/src/index.prod.js
index 55dfb3d70..c7ad7ca15 100644
--- a/src/index.prod.js
+++ b/src/index.prod.js
@@ -44,7 +44,7 @@ import NavbaritemsLeftComponent from 'components/NavbaritemsLeft.vue';
 import NavbaritemsRightComponent from 'components/NavbaritemsRight.vue';
 import SidebarComponent from 'components/Sidebar.vue';
 import ViewportComponent from 'components/Viewport.vue';
-import DownloadFieldsLayer from "components/DownloadFieldsLayer.vue";
+import ChooseLayerFields from "./components/ChooseLayerFields.vue";
 
 //directives
 import vDisabled from 'directives/v-disabled';
@@ -1078,16 +1078,15 @@ const ApplicationTemplate = function({ApplicationService}) {
       return new Promise((resolve, reject) => {
         if (fields.length > 0) {
 
-          const DownloadFieldsLayerClass    = Vue.extend(DownloadFieldsLayer);
-          const DownloadFieldsLayerInstance = new DownloadFieldsLayerClass({
+          const ChooseLayerFieldsClass    = Vue.extend(ChooseLayerFields);
+          const ChooseLayerFieldsInstance = new ChooseLayerFieldsClass({
             propsData: {
               fields
             }
           });
-          const message                     = DownloadFieldsLayerInstance.$mount().$el;
 
           const dialog = GUI.showModalDialog({
-            message,
+            message: ChooseLayerFieldsInstance.$mount().$el,
             closeButton: false,
             buttons: {
               ok: {

From c102d9a8344b93348c328f32358d973da1439176 Mon Sep 17 00:00:00 2001
From: volterra79 <boccacci.francesco@gmail.com>
Date: Tue, 17 Oct 2023 14:24:10 +0200
Subject: [PATCH 07/19] :bug: Renamed component instance

---
 src/index.prod.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/index.prod.js b/src/index.prod.js
index c7ad7ca15..1b80c0639 100644
--- a/src/index.prod.js
+++ b/src/index.prod.js
@@ -1104,7 +1104,7 @@ const ApplicationTemplate = function({ApplicationService}) {
            */
           dialog.on("shown.bs.modal", evt => evt.target.click());
 
-          DownloadFieldsLayerInstance.$on('selected-fields', bool => dialog.find('button.btn-success').prop('disabled', !bool));
+          ChooseLayerFieldsInstance.$on('selected-fields', bool => dialog.find('button.btn-success').prop('disabled', !bool));
 
         } else {
           resolve(fields);

From f7aa93739931c06958cfb85f529826270301082b Mon Sep 17 00:00:00 2001
From: volterra79 <boccacci.francesco@gmail.com>
Date: Tue, 17 Oct 2023 14:26:24 +0200
Subject: [PATCH 08/19] Comments

---
 src/index.prod.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/index.prod.js b/src/index.prod.js
index 1b80c0639..cb0aee8cf 100644
--- a/src/index.prod.js
+++ b/src/index.prod.js
@@ -1100,7 +1100,9 @@ const ApplicationTemplate = function({ApplicationService}) {
           });
 
           /**
-           * @TODO
+           * @TODO find a better way to focus
+           * Once is show, need to bee clicked otherwise we need do
+           * click twice time ok button if no start selection is changed
            */
           dialog.on("shown.bs.modal", evt => evt.target.click());
 

From 1ffed1a5b7403a585113b57ef67b0d8c6c2d770c Mon Sep 17 00:00:00 2001
From: volterra79 <boccacci.francesco@gmail.com>
Date: Tue, 17 Oct 2023 14:35:19 +0200
Subject: [PATCH 09/19] Comments

---
 src/components/ChooseLayerFields.vue | 29 +++++++++++++++++++++-------
 1 file changed, 22 insertions(+), 7 deletions(-)

diff --git a/src/components/ChooseLayerFields.vue b/src/components/ChooseLayerFields.vue
index ca281c5be..b99b8a668 100644
--- a/src/components/ChooseLayerFields.vue
+++ b/src/components/ChooseLayerFields.vue
@@ -1,10 +1,10 @@
 <template>
   <div id="g3w-fields-to-choose">
-    <h4 style="font-weight: bold" v-t="'download.fields.title'"></h4>
+    <h4 class="title" v-t="'download.fields.title'"></h4>
     <section class="g3w-fields-to-choose-inputs">
       <input
         @click.stop = "selectAll"
-        :id         = "`select_all_fields_to_download`"
+        :id         = "`select_all_fields_to_choose`"
         type        = "checkbox"
         class       = "magic-checkbox"
         :checked    = "all"
@@ -47,32 +47,42 @@ export default {
   },
   data() {
     return {
-      all: true,
+      all: true, // Boolen -  Change when select_all_fields_to_choose is change
     }
   },
   computed: {
     gridClass() {
-      return this.fields.length > 6
+      return this.fields.length > 6; // Boolean. Set a gid css class if there are more than 6 fields
     }
   },
   methods: {
+    /**
+     * Method to change field selected boolean poperty
+     * @param field
+     */
     selectField(field) {
       field.selected = !field.selected;
+      //if selected
       if (field.selected) {
+        //set all value if all fields have selected to true
         this.all = undefined === this.fields.find(field => !field.selected);
-        this.$emit('selected-fields', true);
       } else {
+        //noo all fields are selected. Sett all to false
         this.all = false;
-        this.$emit('selected-fields', undefined !== this.fields.find(field => field.selected));
       }
+      //need emit event selected-fields that pass true or false base if one field at least is selected
+      this.$emit('selected-fields', (field.selected || undefined !== this.fields.find(field => field.selected)));
     },
+    /**
+     * Method called when input checkbox select all is changed
+     */
     selectAll() {
       this.all = !this.all;
 
       this
         .fields
         .forEach(field => field.selected = this.all)
-
+      //emit event
       this.$emit('selected-fields', this.all);
     }
   },
@@ -82,6 +92,11 @@ export default {
   #g3w-fields-to-choose label{
     color: #000000 !important;
   }
+
+  #g3w-fields-to-choose .title {
+    font-weight: bold;
+  }
+
   #g3w-fields-to-choose .inputs-body.grid {
     display: grid;
     grid-template-columns: 50% 50%

From 6293db709efd596595d80482d9dc839dc9ed7063 Mon Sep 17 00:00:00 2001
From: volterra79 <boccacci.francesco@gmail.com>
Date: Tue, 17 Oct 2023 14:38:19 +0200
Subject: [PATCH 10/19] Comments

---
 src/app/core/layers/layer.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/app/core/layers/layer.js b/src/app/core/layers/layer.js
index 28a05bb12..681666961 100644
--- a/src/app/core/layers/layer.js
+++ b/src/app/core/layers/layer.js
@@ -536,6 +536,9 @@ proto.getDownloadFilefromDownloadDataType = async function(type, {data={}, optio
       case 'geotiff':   return this._getGeoTIFF({ data, options });
     }
   } catch(err) {
+    /**
+     * @TODO handle error
+     */
     console.log(err)
   }
 
@@ -629,6 +632,7 @@ proto.getSourceType = function() {
   return this.config.source ? this.config.source.type : null;
 };
 
+
 proto.isGeoLayer = function() {
   return this.state.geolayer;
 };

From 04f39260a74b24a941e16da939496178bad9f36f Mon Sep 17 00:00:00 2001
From: volterra79 <boccacci.francesco@gmail.com>
Date: Tue, 17 Oct 2023 14:38:39 +0200
Subject: [PATCH 11/19] If no fields reject

---
 src/index.prod.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/index.prod.js b/src/index.prod.js
index cb0aee8cf..1ec3f28f6 100644
--- a/src/index.prod.js
+++ b/src/index.prod.js
@@ -1109,7 +1109,7 @@ const ApplicationTemplate = function({ApplicationService}) {
           ChooseLayerFieldsInstance.$on('selected-fields', bool => dialog.find('button.btn-success').prop('disabled', !bool));
 
         } else {
-          resolve(fields);
+          reject(fields);
         }
       })
     }

From 8a3ff0be3cb70b967cf9a28b18a5b44466b21e71 Mon Sep 17 00:00:00 2001
From: Raruto <Raruto@users.noreply.github.com>
Date: Wed, 18 Oct 2023 10:52:48 +0200
Subject: [PATCH 12/19] move code related to `ChooseLayerFields.vue`  into
 `CatalogLayerContextMenu.vue`

---
 src/app/core/layers/layer.js                  | 199 ++++++------------
 .../gui/queryresults/queryresultsservice.js   |   6 +-
 src/components/App.vue                        |  10 +-
 src/components/CatalogLayerContextMenu.vue    |  81 +++++--
 src/components/ChooseLayerFields.vue          |  64 ++++--
 src/index.prod.js                             |  45 ----
 6 files changed, 178 insertions(+), 227 deletions(-)

diff --git a/src/app/core/layers/layer.js b/src/app/core/layers/layer.js
index 681666961..01790fce7 100644
--- a/src/app/core/layers/layer.js
+++ b/src/app/core/layers/layer.js
@@ -1,16 +1,21 @@
-import ApplicationState from 'store/application-state';
-import { DOWNLOAD_FORMATS } from 'app/constant';
-import DataRouterService from 'services/data';
-import ProjectsRegistry from 'store/projects';
-import ApplicationService from 'services/application';
-import GUI from 'services/gui';
-
-const { t } = require('core/i18n/i18n.service');
+import ApplicationState      from 'store/application-state';
+import { DOWNLOAD_FORMATS }  from 'app/constant';
+import DataRouterService     from 'services/data';
+import ProjectsRegistry      from 'store/projects';
+import ApplicationService    from 'services/application';
+import GUI                   from 'services/gui';
+
+const { t }                  = require('core/i18n/i18n.service');
 const { inherit, base, XHR } = require('core/utils/utils');
-const G3WObject = require('core/g3wobject');
-const { geometryFields, parseAttributes } =  require('core/utils/geo');
-const Relations = require('core/relations/relations');
-const ProviderFactory = require('core/layers/providersfactory');
+const G3WObject              = require('core/g3wobject');
+const {
+  geometryFields,
+  parseAttributes,
+}                            = require('core/utils/geo');
+const Relations              = require('core/relations/relations');
+const ProviderFactory        = require('core/layers/providersfactory');
+
+const deprecate              = require('util-deprecate');
 
 // Base Class of all Layer
 function Layer(config={}, options={}) {
@@ -503,129 +508,52 @@ proto.getFilterToken = function () {
 };
 
 /**
- * @since v3.9.0
- */
-proto.chooseFieldsToDownload = function() {
-  return GUI.chooseLayerFields(
-    this.getTableFields()
-      .map(({name, label}) => ({name, label, selected: true}))
-  )
-}
-
-/**
- *
- * DOWNLOAD METHODS
- */
-
-
-/**
- * Method to handle download layer in different format
- * @returns promise
- */
-proto.getDownloadFilefromDownloadDataType = async function(type, {data={}, options}={}) {
-  try {
-    const fields = await this.chooseFieldsToDownload();
-    data.ftod = fields.map(field => field.name).join();
-    data.filtertoken = this.getFilterToken();
-    switch (type) {
-      case 'shapefile': return this._getShp({data, options});
-      case 'xls':       return this._getXls({data, options});
-      case 'csv':       return this._getCsv({data, options});
-      case 'gpx':       return this._getGpx({data, options});
-      case 'gpkg':      return this._getGpkg({data, options});
-      case 'geotiff':   return this._getGeoTIFF({ data, options });
-    }
-  } catch(err) {
-    /**
-     * @TODO handle error
-     */
-    console.log(err)
-  }
-
-};
-
-/**
- *
- * @param data
- * @returns {Promise<unknown>}
- * @private
- */
-proto._getGeoTIFF = async function({data={}}={}) {
-  return XHR.fileDownload({
-    url: this.getUrl('geotiff'),
-    data,
-    httpMethod: "POST"
-  })
-};
-
-/**
- *
- * @param data
- * @returns {Promise<unknown>}
- * @private
- */
-proto._getXls = async function({data={}}={}) {
-  return XHR.fileDownload({
-    url: this.getUrl('xls'),
-    data,
-    httpMethod: "POST"
-  })
-};
-
-/**
- *
- * @param data
- * @returns {Promise<unknown>}
- * @private
- */
-proto._getShp = async function({data={}}={}) {
-  return XHR.fileDownload({
-    url: this.getUrl('shp'),
-    data,
-    httpMethod: "POST"
-  })
-};
-
-/**
- *
- * @param data
- * @returns {Promise<unknown>}
- * @private
- */
-proto._getGpx = async function({data={}}={}) {
-  return XHR.fileDownload({
-    url: this.getUrl('gpx'),
-    data,
-    httpMethod: "POST"
-  })
-};
-
-/**
- *
- * @param data
- * @returns {Promise<unknown>}
- * @private
- */
-proto._getGpkg = async function({data={}}={}) {
-  return XHR.fileDownload({
-    url: this.getUrl('gpkg'),
-    data,
-    httpMethod: "POST"
-  })
-};
-
-/**
- *
- * @param data
- * @returns {Promise<unknown>}
- * @private
+ * @TODO error handling
+ * 
+ * [FILE DOWNLOAD] Export layer in different formats
+ * 
+ * @param { 'shp' | 'shapefile' | 'xls' | 'csv' | 'gpx' | 'gpkg' | 'geotiff' } type
+ * @param { Object } opts
+ * @param opts.data
+ * @param opts.options
+ * 
+ * @returns { Promise }
+ * 
+ * @listens GUI~before_download_layer           since 3.9.0
+ * @fires   GUI~choose_layer_fields_to_download since 3.9.0
  */
-proto._getCsv = async function({data={}}={}) {
-  return XHR.fileDownload({
-    url: this.getUrl('csv'),
-    data,
-    httpMethod: "POST"
+proto.downloadAsFile = function(type, {
+  data = {},
+  options,
+} = {}) {
+  return new Promise((resolve, reject) => {
+    GUI.once(
+      'before_download_layer',
+      async (fields) => {
+        data.ftod        = fields.map(field => field.name).join();
+        data.filtertoken = this.getFilterToken();
+        // alias
+        if ('shapefile' === type) {
+          type = 'shp';
+        }
+        // allowed download types
+        if (['shp', 'xls', 'csv', 'gpx', 'gpkg', 'geotiff'].includes(type)) {
+          resolve(
+            XHR.fileDownload({
+              url: this.getUrl(type),
+              data,
+              httpMethod: "POST",
+            })
+          );
+        }
+      }
+    );
+    GUI.emit(
+      'choose_layer_fields_to_download',
+      this.getTableFields().map(({ name, label }) => ({ name, label, selected: true }))
+    );
   })
+  .catch(console.warn);
 };
 
 proto.getSourceType = function() {
@@ -1401,4 +1329,9 @@ Layer.SELECTION_STATE = {
   EXCLUDE: '__EXCLUDE__'
 };
 
+/**
+ * @deprecated since 3.9.0. Will be deleted in 4.x. Use Layer.downloadAsFile(type, options) instead
+ */
+Layer.prototype.getDownloadFilefromDownloadDataType = deprecate(Layer.prototype.downloadAsFile, '[G3W-CLIENT] Layer::getDownloadFilefromDownloadDataType(type, options) is deprecated');
+
 module.exports = Layer;
diff --git a/src/app/gui/queryresults/queryresultsservice.js b/src/app/gui/queryresults/queryresultsservice.js
index e159a1829..094079da7 100644
--- a/src/app/gui/queryresults/queryresultsservice.js
+++ b/src/app/gui/queryresults/queryresultsservice.js
@@ -1520,7 +1520,7 @@ class QueryResultsService extends G3WObject {
         ({layer, type, data}= {}) => {
           return CatalogLayersStoresRegistry
             .getLayerById(layer.id)
-            .getDownloadFilefromDownloadDataType(type, { data }) ||
+            .downloadAsFile(type, { data }) ||
           Promise.resolve();
         },
         {
@@ -1634,7 +1634,7 @@ class QueryResultsService extends G3WObject {
   downloadGpx({ id: layerId } = {}, feature) {
     CatalogLayersStoresRegistry
       .getLayerById(layerId)
-      .getDownloadFilefromDownloadDataType('gpx', {data:{ fid: feature ? feature.attributes[G3W_FID] : null }})
+      .downloadAsFile('gpx', {data:{ fid: feature ? feature.attributes[G3W_FID] : null }})
       .catch((err) => { GUI.notify.error(t("info.server_error")); })
       .finally(()  => { this.layerMenu.loading.shp = false; this._hideMenu(); })
   }
@@ -1645,7 +1645,7 @@ class QueryResultsService extends G3WObject {
   downloadXls({ id: layerId } = {}, feature) {
     CatalogLayersStoresRegistry
       .getLayerById(layerId)
-      .getDownloadFilefromDownloadDataType('xls',
+      .downloadAsFile('xls',
         { data: {fid: feature ? feature.attributes[G3W_FID] : null }})
       .catch(err  => { GUI.notify.error(t("info.server_error")); })
       .finally(() => { this.layerMenu.loading.shp = false; this._hideMenu(); })
diff --git a/src/components/App.vue b/src/components/App.vue
index 76c3c29b7..9557eef2d 100644
--- a/src/components/App.vue
+++ b/src/components/App.vue
@@ -268,12 +268,12 @@
 </template>
 
 <script>
-import CookieLaw from 'vue-cookie-law';
-import HeaderItem from 'components/HeaderItem.vue';
-import ProjectsRegistry from 'store/projects';
+import CookieLaw          from 'vue-cookie-law';
+import HeaderItem         from 'components/HeaderItem.vue';
+import ProjectsRegistry   from 'store/projects';
 import ApplicationService from 'services/application';
-import GUI from 'services/gui';
-import { resizeMixin } from 'mixins';
+import GUI                from 'services/gui';
+import { resizeMixin }    from 'mixins';
 import { LOCAL_ITEM_IDS } from "constant";
 
 const { uniqueId } = require('core/utils/utils');
diff --git a/src/components/CatalogLayerContextMenu.vue b/src/components/CatalogLayerContextMenu.vue
index 333b895bf..a48a73701 100644
--- a/src/components/CatalogLayerContextMenu.vue
+++ b/src/components/CatalogLayerContextMenu.vue
@@ -217,24 +217,64 @@
 <script>
   import { Chrome as ChromeComponent } from 'vue-color';
 
-  import LayerOpacityPicker from "components/LayerOpacityPicker.vue";
-
-  import { CatalogEventBus as VM } from 'app/eventbus';
-  import CatalogLayersStoresRegistry from 'store/catalog-layers';
-  import ApplicationService from 'services/application';
-  import GUI from 'services/gui';
-
-  const { t } = require('core/i18n/i18n.service');
-  const shpwrite = require('shp-write');
-  const TableComponent = require('gui/table/vue/table');
-  const { downloadFile } = require('core/utils/utils');
-
+  import LayerOpacityPicker            from 'components/LayerOpacityPicker.vue';
+  import ChooseLayerFields             from 'components/ChooseLayerFields.vue';
+  import { CatalogEventBus as VM }     from 'app/eventbus';
+  import CatalogLayersStoresRegistry   from 'store/catalog-layers';
+  import ApplicationService            from 'services/application';
+  import GUI                           from 'services/gui';
+
+  const { t }                          = require('core/i18n/i18n.service');
+  const shpwrite                       = require('shp-write');
+  const TableComponent                 = require('gui/table/vue/table');
+  const { downloadFile }               = require('core/utils/utils');
 
   const OFFSETMENU = {
     top: 50,
     left: 15
   };
 
+  /**
+   * Show ChooseLayerFields modal
+   * 
+   * @listens ChooseLayerFields~selected-fields since 3.9.0
+   * @fires GUI~before_download_layer           since 3.9.0
+   */
+  function _choose_layer_fields_to_download(fields = []) {
+
+    /** @TODO error handling */
+    // skip when ..
+    // if (!fields.length) {
+    // GUI.emit('invalid_layer_fields_to_download');  
+    // }
+
+    const modal = new (Vue.extend(ChooseLayerFields))({ propsData: { fields }});
+
+    const dialog = GUI.showModalDialog({
+      message: modal.$mount().$el,
+      closeButton: false,
+      buttons: {
+        ok: {
+          label: 'Ok',
+          className: 'btn-success',
+          callback() {
+            GUI.emit('before_download_layer', fields.filter(field => field.selected))
+          }
+        }
+      }
+    });
+
+    /**
+     * @TODO find a better way to set focus.
+     * Once shown, need to be clicked otherwise,
+     * the user need click twice "ok button"
+     * when initial selection is not changed 
+     */
+    dialog.on("shown.bs.modal", evt => evt.target.click());
+
+    modal.$on('selected-fields', bool => dialog.find('button.btn-success').prop('disabled', !bool));
+  }
+
   export default {
     name: 'Cataloglayermenu',
     props: {
@@ -430,7 +470,7 @@
         const caller_download_id = ApplicationService.setDownload(true);
         this.layerMenu.loading.geotiff = true;
         const layer = CatalogLayersStoresRegistry.getLayerById(layerId);
-        layer.getDownloadFilefromDownloadDataType('geotiff',{
+        layer.downloadAsFile('geotiff',{
           data: map_extent ? {
             map_extent: GUI.getService('map').getMapExtent().toString()
           } : undefined
@@ -447,7 +487,7 @@
         const caller_download_id = ApplicationService.setDownload(true);
         this.layerMenu.loading.shp = true;
         const layer = CatalogLayersStoresRegistry.getLayerById(layerId);
-        layer.getDownloadFilefromDownloadDataType('shapefile')
+        layer.downloadAsFile('shp')
           .catch(err => GUI.notify.error(t("info.server_error")))
           .finally(() => {
             this.layerMenu.loading.shp = false;
@@ -461,7 +501,7 @@
         this.layerMenu.loading.csv = true;
         const layer = CatalogLayersStoresRegistry.getLayerById(layerId);
 
-        layer.getDownloadFilefromDownloadDataType('csv')
+        layer.downloadAsFile('csv')
           .catch(err => {
             GUI.notify.error(t("info.server_error"))
           })
@@ -476,7 +516,7 @@
         const caller_download_id = ApplicationService.setDownload(true);
         this.layerMenu.loading.xls = true;
         const layer = CatalogLayersStoresRegistry.getLayerById(layerId);
-        layer.getDownloadFilefromDownloadDataType('xls')
+        layer.downloadAsFile('xls')
           .catch(err => GUI.notify.error(t("info.server_error")))
           .finally(() => {
             this.layerMenu.loading.xls = false;
@@ -489,7 +529,7 @@
         const caller_download_id = ApplicationService.setDownload(true);
         this.layerMenu.loading.gpx = true;
         const layer = CatalogLayersStoresRegistry.getLayerById(layerId);
-        layer.getDownloadFilefromDownloadDataType('gpx')
+        layer.downloadAsFile('gpx')
           .catch(err => GUI.notify.error(t("info.server_error")))
           .finally(() => {
             this.layerMenu.loading.gpx = false;
@@ -502,7 +542,7 @@
         const caller_download_id = ApplicationService.setDownload(true);
         this.layerMenu.loading.gpkg = true;
         const layer = CatalogLayersStoresRegistry.getLayerById(layerId);
-        layer.getDownloadFilefromDownloadDataType('gpkg')
+        layer.downloadAsFile('gpkg')
           .catch(err => GUI.notify.error(t("info.server_error")))
           .finally(() => {
             this.layerMenu.loading.gpkg = false;
@@ -778,6 +818,10 @@
         return layer.geolayer && layer.visible;
       },
 
+      _chooseFields() {
+
+      }
+
     },
 
     created() {
@@ -793,6 +837,7 @@
         this.layerMenu.top = $(evt.target).offset().top - $(this.$refs['layer-menu']).height() + ($(evt.target).height()/ 2);
         $('.catalog-menu-wms[data-toggle="tooltip"]').tooltip();
       });
+      GUI.on('choose_layer_fields_to_download', _choose_layer_fields_to_download);
     },
 
   };
diff --git a/src/components/ChooseLayerFields.vue b/src/components/ChooseLayerFields.vue
index b99b8a668..a6a269a90 100644
--- a/src/components/ChooseLayerFields.vue
+++ b/src/components/ChooseLayerFields.vue
@@ -1,7 +1,14 @@
+<!--
+  @file
+  @since 3.9.0
+-->
 <template>
   <div id="g3w-fields-to-choose">
+
     <h4 class="title" v-t="'download.fields.title'"></h4>
+
     <section class="g3w-fields-to-choose-inputs">
+      
       <input
         @click.stop = "selectAll"
         :id         = "`select_all_fields_to_choose`"
@@ -13,7 +20,9 @@
         :for  = "`select_all_fields_to_choose`"
         style = "color: #FFF" v-t="'download.fields.all'">
       </label>
+      
       <divider/>
+      
       <section class="inputs-body" :class="{grid: gridClass}">
         <template v-for="field in fields" >
           <input
@@ -30,62 +39,71 @@
         </template>
 
       </section>
+    
     </section>
-  </div>
 
+  </div>
 </template>
 
 <script>
 export default {
-  name: 'downloadfieldslayer',
+
+  name: 'chooselayerfields',
+
   props: {
+
     fields: {
       type: Array,
       default: [],
-      required: true
-    }
+      required: true,
+    },
+
   },
+
   data() {
     return {
       all: true, // Boolen -  Change when select_all_fields_to_choose is change
     }
   },
+
   computed: {
+
     gridClass() {
       return this.fields.length > 6; // Boolean. Set a gid css class if there are more than 6 fields
-    }
+    },
+
   },
+
   methods: {
+
     /**
-     * Method to change field selected boolean poperty
+     * Changes `field.selected` boolean poperty
+     * 
      * @param field
+     * 
+     * @fires selected-fields since 3.9.0
      */
     selectField(field) {
       field.selected = !field.selected;
-      //if selected
-      if (field.selected) {
-        //set all value if all fields have selected to true
-        this.all = undefined === this.fields.find(field => !field.selected);
-      } else {
-        //noo all fields are selected. Sett all to false
-        this.all = false;
-      }
-      //need emit event selected-fields that pass true or false base if one field at least is selected
-      this.$emit('selected-fields', (field.selected || undefined !== this.fields.find(field => field.selected)));
+      this.all = field.selected
+        ? undefined === this.fields.find(field => !field.selected)                  // check if all fields are selected
+        : false;                                                                    // false = not all fields are selected
+      this.$emit(
+        'selected-fields',
+        (field.selected || undefined !== this.fields.find(field => field.selected)) // check if at least one field is selected 
+      );
     },
+
     /**
-     * Method called when input checkbox select all is changed
+     * Select all fields
      */
     selectAll() {
       this.all = !this.all;
-
-      this
-        .fields
-        .forEach(field => field.selected = this.all)
-      //emit event
+      this.fields.forEach(field => field.selected = this.all)
       this.$emit('selected-fields', this.all);
-    }
+    },
   },
+
 };
 </script>
 <style scoped>
diff --git a/src/index.prod.js b/src/index.prod.js
index 1ec3f28f6..3ddb55524 100644
--- a/src/index.prod.js
+++ b/src/index.prod.js
@@ -44,7 +44,6 @@ import NavbaritemsLeftComponent from 'components/NavbaritemsLeft.vue';
 import NavbaritemsRightComponent from 'components/NavbaritemsRight.vue';
 import SidebarComponent from 'components/Sidebar.vue';
 import ViewportComponent from 'components/Viewport.vue';
-import ChooseLayerFields from "./components/ChooseLayerFields.vue";
 
 //directives
 import vDisabled from 'directives/v-disabled';
@@ -1070,50 +1069,6 @@ const ApplicationTemplate = function({ApplicationService}) {
       });
     };
 
-    /**
-     * Method to show and choose al layer fields
-     * @since v3.9.0
-     */
-    GUI.chooseLayerFields = function(fields=[]) {
-      return new Promise((resolve, reject) => {
-        if (fields.length > 0) {
-
-          const ChooseLayerFieldsClass    = Vue.extend(ChooseLayerFields);
-          const ChooseLayerFieldsInstance = new ChooseLayerFieldsClass({
-            propsData: {
-              fields
-            }
-          });
-
-          const dialog = GUI.showModalDialog({
-            message: ChooseLayerFieldsInstance.$mount().$el,
-            closeButton: false,
-            buttons: {
-              ok: {
-                label: 'Ok',
-                className: 'btn-success',
-                callback() {
-                  resolve(fields.filter(field => field.selected));
-                }
-              }
-            }
-          });
-
-          /**
-           * @TODO find a better way to focus
-           * Once is show, need to bee clicked otherwise we need do
-           * click twice time ok button if no start selection is changed
-           */
-          dialog.on("shown.bs.modal", evt => evt.target.click());
-
-          ChooseLayerFieldsInstance.$on('selected-fields', bool => dialog.find('button.btn-success').prop('disabled', !bool));
-
-        } else {
-          reject(fields);
-        }
-      })
-    }
-
   };
 
   base(this);

From e2e112a2a2287d798ea64540b420bbb26e883054 Mon Sep 17 00:00:00 2001
From: volterra79 <boccacci.francesco@gmail.com>
Date: Mon, 23 Oct 2023 15:13:18 +0200
Subject: [PATCH 13/19] Fix merge

---
 src/app/core/layers/layer.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/core/layers/layer.js b/src/app/core/layers/layer.js
index a24e1af81..44b71dc77 100644
--- a/src/app/core/layers/layer.js
+++ b/src/app/core/layers/layer.js
@@ -11,7 +11,7 @@ const G3WObject              = require('core/g3wobject');
 const {
   geometryFields,
   parseAttributes,
-}                            = require('core/utils/geo');
+}                            = require('utils/geo');
 const Relations              = require('core/relations/relations');
 const ProviderFactory        = require('core/layers/providersfactory');
 

From fb66d8ad9583c24f4ddaac213704c1e72ab7d398 Mon Sep 17 00:00:00 2001
From: volterra79 <boccacci.francesco@gmail.com>
Date: Mon, 23 Oct 2023 15:14:30 +0200
Subject: [PATCH 14/19] Clean Code

---
 src/app/core/layers/layer.js | 26 ++++++++++++--------------
 1 file changed, 12 insertions(+), 14 deletions(-)

diff --git a/src/app/core/layers/layer.js b/src/app/core/layers/layer.js
index 44b71dc77..baf6dc1b5 100644
--- a/src/app/core/layers/layer.js
+++ b/src/app/core/layers/layer.js
@@ -50,20 +50,18 @@ function Layer(config={}, options={}) {
     const rasterUrl = project.getRasterUrl();
 
     this.config.urls.filtertoken = `${vectorUrl}filtertoken/${suffixUrl}`;
-    this.config.urls.data = `${vectorUrl}data/${suffixUrl}`;
-    this.config.urls.shp = `${vectorUrl}shp/${suffixUrl}`;
-    this.config.urls.csv = `${vectorUrl}csv/${suffixUrl}`;
-    this.config.urls.xls = `${vectorUrl}xls/${suffixUrl}`;
-    this.config.urls.gpx = `${vectorUrl}gpx/${suffixUrl}`;
-    this.config.urls.gpkg = `${vectorUrl}gpkg/${suffixUrl}`;
-    this.config.urls.geotiff = `${rasterUrl}geotiff/${suffixUrl}`;
-    this.config.urls.editing = `${vectorUrl}editing/${suffixUrl}`;
-    this.config.urls.commit = `${vectorUrl}commit/${suffixUrl}`;
-    this.config.urls.config = `${vectorUrl}config/${suffixUrl}`;
-    this.config.urls.unlock = `${vectorUrl}unlock/${suffixUrl}`;
-    this.config.urls.widget = {
-      unique: `${vectorUrl}widget/unique/data/${suffixUrl}`
-    };
+    this.config.urls.data        = `${vectorUrl}data/${suffixUrl}`;
+    this.config.urls.shp         = `${vectorUrl}shp/${suffixUrl}`;
+    this.config.urls.csv         = `${vectorUrl}csv/${suffixUrl}`;
+    this.config.urls.xls         = `${vectorUrl}xls/${suffixUrl}`;
+    this.config.urls.gpx         = `${vectorUrl}gpx/${suffixUrl}`;
+    this.config.urls.gpkg        = `${vectorUrl}gpkg/${suffixUrl}`;
+    this.config.urls.geotiff     = `${rasterUrl}geotiff/${suffixUrl}`;
+    this.config.urls.editing     = `${vectorUrl}editing/${suffixUrl}`;
+    this.config.urls.commit      = `${vectorUrl}commit/${suffixUrl}`;
+    this.config.urls.config      = `${vectorUrl}config/${suffixUrl}`;
+    this.config.urls.unlock      = `${vectorUrl}unlock/${suffixUrl}`;
+    this.config.urls.widget      = { unique: `${vectorUrl}widget/unique/data/${suffixUrl}` };
 
     /**
      * @since 3.8.0

From d871f8e523a75e3355df7c9c29260636a5e27d3d Mon Sep 17 00:00:00 2001
From: volterra79 <boccacci.francesco@gmail.com>
Date: Fri, 1 Dec 2023 11:01:11 +0100
Subject: [PATCH 15/19] Clean code

---
 src/app/core/layers/layer.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/app/core/layers/layer.js b/src/app/core/layers/layer.js
index 2f493b1cf..357a45b19 100644
--- a/src/app/core/layers/layer.js
+++ b/src/app/core/layers/layer.js
@@ -3,9 +3,9 @@ import DataRouterService                from 'services/data';
 import ProjectsRegistry                 from 'store/projects';
 import GUI                              from 'services/gui';
 import DownloadMixin                    from 'core/layers/mixins/download';
+import RelationsMixin                   from 'core/layers/mixins/relations';
 import SelectionMixin                   from 'core/layers/mixins/selection';
 import { SELECTION as SELECTION_STATE } from 'core/layers/mixins/selection';
-import RelationsMixin                   from 'core/layers/mixins/relations';
 
 const { t }                 = require('core/i18n/i18n.service');
 const {
@@ -378,7 +378,6 @@ proto.isWmsUseLayerIds = function() {
  *
  * @listens GUI~before_download_layer           since 3.9.0
  * @fires   GUI~choose_layer_fields_to_download since 3.9.0
- * @returns {*|null} source type of layer
  */
 proto.downloadAsFile = function(type, {
   data = {},
@@ -389,7 +388,7 @@ proto.downloadAsFile = function(type, {
       'before_download_layer',
       async (fields) => {
         data.ftod        = fields.map(field => field.name).join();
-        data.filtertoken = this.getFilterToken();
+        data.filtertoken = this.getFilterToken(); //from SelectionMixin
         // alias
         if ('shapefile' === type) {
           type = 'shp';
@@ -414,6 +413,9 @@ proto.downloadAsFile = function(type, {
   .catch(console.warn);
 };
 
+/**
+ * @returns {*|null} source type of layer
+ */
 proto.getSourceType = function() {
   return this.config.source ? this.config.source.type : null;
 };

From 66eef13973bffa5001aa922d29a9322bd62c2660 Mon Sep 17 00:00:00 2001
From: volterra79 <boccacci.francesco@gmail.com>
Date: Mon, 8 Jan 2024 16:48:43 +0100
Subject: [PATCH 16/19] Remove _.isNull lodash dependency

---
 src/app/core/editing/history.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/app/core/editing/history.js b/src/app/core/editing/history.js
index cae25cb9a..a82f37b52 100644
--- a/src/app/core/editing/history.js
+++ b/src/app/core/editing/history.js
@@ -300,13 +300,15 @@ proto.canCommit = function() {
 //cauUdo method
 proto.canUndo = function() {
   const steps = (this._states.length - 1) - this.getCurrentStateIndex();
-  this.state.undo = !_.isNull(this._current) && (this._maxSteps > steps);
+  this.state.undo = (null !== this._current) && (this._maxSteps > steps);
   return this.state.undo;
 };
 
-// Caon Redo function
+// Can Redo function
 proto.canRedo = function() {
-  this.state.redo = this.getLastState() && this.getLastState().id != this._current || _.isNull(this._current) && this._states.length > 0;
+  this.state.redo = (
+    (this.getLastState() && this.getLastState().id != this._current))
+    || (null ===this._current && this._states.length > 0);
   return this.state.redo;
 };
 

From 8b2567d6610258a3af5652c1dfe5f357fa97cf50 Mon Sep 17 00:00:00 2001
From: volterra79 <boccacci.francesco@gmail.com>
Date: Wed, 31 Jan 2024 16:48:33 +0100
Subject: [PATCH 17/19] Fix merge. Add removed GUI import

---
 src/app/core/layers/layer.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/app/core/layers/layer.js b/src/app/core/layers/layer.js
index 5f4b183b0..59f0700ba 100644
--- a/src/app/core/layers/layer.js
+++ b/src/app/core/layers/layer.js
@@ -1,5 +1,6 @@
 import { GEOMETRY_FIELDS as geometryFields } from 'app/constant';
 import ApplicationState                      from 'store/application-state';
+import GUI                                   from 'services/gui';
 import DataRouterService                     from 'services/data';
 import ProjectsRegistry                      from 'store/projects';
 import DownloadMixin                         from 'core/layers/mixins/download';

From 8ba61e95c8fb52aa69b12dd8797a1bb5e3970193 Mon Sep 17 00:00:00 2001
From: volterra79 <boccacci.francesco@gmail.com>
Date: Wed, 31 Jan 2024 17:05:35 +0100
Subject: [PATCH 18/19] Clean code

---
 src/components/CatalogLayerContextMenu.vue | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/components/CatalogLayerContextMenu.vue b/src/components/CatalogLayerContextMenu.vue
index d1286d9f1..e59231100 100644
--- a/src/components/CatalogLayerContextMenu.vue
+++ b/src/components/CatalogLayerContextMenu.vue
@@ -1087,7 +1087,9 @@
           menu.maxHeight = height >= maxH ? maxH : null;
           menu.overflowY = height >= maxH ? 'scroll' : null;
           menu.top = (height >= maxH ? contextmenu : menuentry).offset().top;
-          menu.left = this.isMobile() ? 0 :  menuentry.offset().left + menuentry.width() + ((menuentry.outerWidth() - menuentry.width()) /2) + OFFSETMENU.left;
+          menu.left = this.isMobile()
+            ? 0
+            :  menuentry.offset().left + menuentry.width() + ((menuentry.outerWidth() - menuentry.width()) /2) + OFFSETMENU.left;
           await this.$nextTick();
         }
         menu.show = bool;
@@ -1167,10 +1169,6 @@
         return layer.geolayer && layer.visible;
       },
 
-      _chooseFields() {
-
-      }
-
     },
 
     created() {
@@ -1183,7 +1181,7 @@
         this.layerMenu.show = true;
         this.layerMenu.colorMenu.color = layerstree.color;
         await this.$nextTick();
-        this.layerMenu.top = $(evt.target).offset().top - $(this.$refs['layer-menu']).height() + ($(evt.target).height()/ 2);
+        this.layerMenu.top = $(evt.target).offset().top - $(this.$refs['layer-menu']).height() + ($(evt.target).height() / 2);
         $('.catalog-menu-wms[data-toggle="tooltip"]').tooltip();
       });
       GUI.on('choose_layer_fields_to_download', _choose_layer_fields_to_download);

From 57d0b229bc112502d81c635898d5c3732f5a9af9 Mon Sep 17 00:00:00 2001
From: volterra79 <boccacci.francesco@gmail.com>
Date: Wed, 31 Jan 2024 17:36:39 +0100
Subject: [PATCH 19/19] Create common _downloadFile method

---
 src/components/CatalogLayerContextMenu.vue | 134 +++++++++++----------
 1 file changed, 72 insertions(+), 62 deletions(-)

diff --git a/src/components/CatalogLayerContextMenu.vue b/src/components/CatalogLayerContextMenu.vue
index e59231100..42fb5898d 100644
--- a/src/components/CatalogLayerContextMenu.vue
+++ b/src/components/CatalogLayerContextMenu.vue
@@ -768,89 +768,99 @@
         }, 600);
       },
 
-      downloadGeoTIFF(layerId, map_extent=false) {
+      /**
+       * @since v3.10.0
+       * @param type
+       * @param layerId
+       * @param options
+       * @private
+       */
+      _downloadFile({type, layerId, options={}}) {
         const caller_download_id = ApplicationService.setDownload(true);
-        this.layerMenu.loading.geotiff = true;
+        this.layerMenu.loading[type] = true;
         const layer = CatalogLayersStoresRegistry.getLayerById(layerId);
-        layer.downloadAsFile('geotiff',{
-          data: map_extent ? {
-            map_extent: GUI.getService('map').getMapExtent().toString()
-          } : undefined
-        })
-          .catch(err => GUI.notify.error(t("info.server_error")))
+        layer.downloadAsFile(type, options)
+          .catch(err => {
+            console.warn(err);
+            GUI.notify.error(t("info.server_error"))
+          })
           .finally(() => {
-            this.layerMenu.loading.geotiff = false;
+            this.layerMenu.loading[type] = false;
             ApplicationService.setDownload(false, caller_download_id);
             this._hideMenu();
           })
       },
 
+      /**
+       * @FIXME add description
+       * @param layerId
+       * @param map_extent
+       */
+      downloadGeoTIFF(layerId, map_extent=false) {
+        this._downloadFile({
+          type: 'geotiff',
+          layerId,
+          options: {
+            data: map_extent ? {
+              map_extent: GUI.getService('map').getMapExtent().toString()
+            } : undefined
+          }
+        })
+      },
+
+      /**
+       * @FIXME add description
+       * @param layerId
+       */
       downloadShp(layerId) {
-        const caller_download_id = ApplicationService.setDownload(true);
-        this.layerMenu.loading.shp = true;
-        const layer = CatalogLayersStoresRegistry.getLayerById(layerId);
-        layer.downloadAsFile('shp')
-          .catch(err => GUI.notify.error(t("info.server_error")))
-          .finally(() => {
-            this.layerMenu.loading.shp = false;
-            ApplicationService.setDownload(false, caller_download_id);
-            this._hideMenu();
-          })
+        this._downloadFile({
+          type: 'shp',
+          layerId,
+        })
       },
 
+      /**
+       * @FIXME add description
+       * @param layerId
+       */
       downloadCsv(layerId) {
-        const caller_download_id = ApplicationService.setDownload(true);
-        this.layerMenu.loading.csv = true;
-        const layer = CatalogLayersStoresRegistry.getLayerById(layerId);
-
-        layer.downloadAsFile('csv')
-          .catch(err => {
-            GUI.notify.error(t("info.server_error"))
-          })
-          .finally(() => {
-            this.layerMenu.loading.csv = false;
-            ApplicationService.setDownload(false, caller_download_id);
-            this._hideMenu();
-          })
+        this._downloadFile({
+          type: 'csv',
+          layerId,
+        })
       },
 
+      /**
+       * @FIXME add description
+       * @param layerId
+       */
       downloadXls(layerId) {
-        const caller_download_id = ApplicationService.setDownload(true);
-        this.layerMenu.loading.xls = true;
-        const layer = CatalogLayersStoresRegistry.getLayerById(layerId);
-        layer.downloadAsFile('xls')
-          .catch(err => GUI.notify.error(t("info.server_error")))
-          .finally(() => {
-            this.layerMenu.loading.xls = false;
-            ApplicationService.setDownload(false, caller_download_id);
-            this._hideMenu();
-          })
+        this._downloadFile({
+          type: 'xls',
+          layerId,
+        })
       },
 
+      /**
+       * @FIXME add description
+       * @param layerId
+       */
       downloadGpx(layerId) {
-        const caller_download_id = ApplicationService.setDownload(true);
-        this.layerMenu.loading.gpx = true;
-        const layer = CatalogLayersStoresRegistry.getLayerById(layerId);
-        layer.downloadAsFile('gpx')
-          .catch(err => GUI.notify.error(t("info.server_error")))
-          .finally(() => {
-            this.layerMenu.loading.gpx = false;
-            ApplicationService.setDownload(false, caller_download_id);
-            this._hideMenu();
-          })
+        this._downloadFile({
+          type: 'gpx',
+          layerId,
+        })
       },
 
+      /**
+       * @FIXME add description
+       * @param layerId
+       */
       downloadGpkg(layerId) {
-        const caller_download_id = ApplicationService.setDownload(true);
-        this.layerMenu.loading.gpkg = true;
-        const layer = CatalogLayersStoresRegistry.getLayerById(layerId);
-        layer.downloadAsFile('gpkg')
-          .catch(err => GUI.notify.error(t("info.server_error")))
-          .finally(() => {
-            this.layerMenu.loading.gpkg = false;
-            ApplicationService.setDownload(false, caller_download_id);
-            this._hideMenu();
-          })
+        this._downloadFile({
+          type: 'gpkg',
+          layerId,
+        })
       },
 
       changeLayerMapPosition({position, layer}) {