Choose layer fields to download before saving file

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';
@@ -360,6 +361,55 @@ proto.isWmsUseLayerIds = function() {
   return this.config.wms_use_layer_ids;
 };
 
+/**
+ * @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.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(); //from SelectionMixin
+        // 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);
+};
+
 /**
  * @returns {*|null} source type of layer
  */
@@ -1372,4 +1422,9 @@ Layer.EDITOPS = {
  */
 Layer.SELECTION_STATE = SELECTION_STATE;
 
+/**
+ * @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;

src/app/gui/queryresults/queryresultsservice.js

@@ -1535,7 +1535,7 @@ class QueryResultsService extends G3WObject {
         ({layer, type, data}= {}) => {
           return CatalogLayersStoresRegistry
             .getLayerById(layer.id)
-            .getDownloadFilefromDownloadDataType(type, { data }) ||
+            .downloadAsFile(type, { data }) ||
           Promise.resolve();
         },
         {
@@ -1649,7 +1649,7 @@ class QueryResultsService extends G3WObject {
   downloadGpx({ id: layerId } = {}, feature) {
     CatalogLayersStoresRegistry
       .getLayerById(layerId)
-      .getGpx({ 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(); })
   }
@@ -1660,7 +1660,8 @@ class QueryResultsService extends G3WObject {
   downloadXls({ id: layerId } = {}, feature) {
     CatalogLayersStoresRegistry
       .getLayerById(layerId)
-      .getXls({ fid: feature ? feature.attributes[G3W_FID] : null })
+      .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(); })
   }

src/components/CatalogLayerContextMenu.vue

@@ -552,24 +552,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('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('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',
 
@@ -777,86 +817,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.getGeoTIFF({
-          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.getShp()
-          .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.getCsv()
-          .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.getXls()
-          .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.getGpx()
-          .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.getGpkg()
-          .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}) {
@@ -1081,7 +1134,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;
@@ -1215,6 +1270,7 @@
     created() {
       VM.$on('show-layer-context-menu', this.onShowLayerContextMenu );
       VM.$on('hide-layer-context-menu', this._hideMenu)
+      GUI.on('choose_layer_fields_to_download', _choose_layer_fields_to_download);
     },
 
   };