Add option: "Download as pdf"

src/app/constant.js

@@ -57,7 +57,11 @@ export const DOWNLOAD_FORMATS = {
   download_raster: {
     format: 'geotiff',
     url:    'geotiff'
-  }
+  },
+  download_pdf: {
+    format: 'pdf',
+    url: 'pdf'
+  },
 };
 
 /**

src/app/core/layers/layer.js

@@ -20,6 +20,8 @@ const deprecate             = require('util-deprecate');
 
 // Base Class of all Layer
 function Layer(config={}, options={}) {
+  //DEV CODE
+  config.download_pdf = true;
 
   this.config = config;
 
@@ -62,6 +64,7 @@ function Layer(config={}, options={}) {
     this.config.urls.xls         = `${vectorUrl}xls/${suffixUrl}`;
     this.config.urls.gpx         = `${vectorUrl}gpx/${suffixUrl}`;
     this.config.urls.gpkg        = `${vectorUrl}gpkg/${suffixUrl}`;
+    this.config.urls.pdf         = `/html2pdf/`; //@since 3.10.0
     this.config.urls.geotiff     = `${rasterUrl}geotiff/${suffixUrl}`;
     this.config.urls.editing     = `${vectorUrl}editing/${suffixUrl}`;
     this.config.urls.commit      = `${vectorUrl}commit/${suffixUrl}`;

src/app/core/layers/map/maplayer.js

@@ -2,14 +2,14 @@ const { base, inherit } = require('utils');
 const G3WObject         = require('core/g3wobject');
 
 function MapLayer(config={}) {
-  this.config = config;
-  this.id = config.id;
-  this.iframe_internal = config.iframe_internal || false;
-  this.extent = config.extent;
-  this.projection = config.projection;
-  this.layer = null;
-  this.layers = config.layers || []; // store all enabled layers
-  this.allLayers = []; // store all layers
+  this.config                 = config;
+  this.id                     = config.id;
+  this.iframe_internal        = config.iframe_internal || false;
+  this.extent                 = config.extent;
+  this.projection             = config.projection;
+  this.layer                  = null;
+  this.layers                 = config.layers || []; // store all enabled layers
+  this.allLayers              = []; // store all layers
   this.showSpinnerWhenLoading = true;
   base(this);
 }
@@ -40,7 +40,7 @@ proto.checkLayersDisabled = function(resolution, mapUnits) {
   this.allLayers.forEach(layer => this.checkLayerDisabled(layer, resolution, mapUnits));
 };
 
-proto.setupCustomMapParamsToLegendUrl = function(params={}){
+proto.setupCustomMapParamsToLegendUrl = function(params={}) {
   //to owerwrite for each map layer subclass
 };
 

src/app/core/layers/mixins/download.js

@@ -24,6 +24,7 @@ export default {
       case 'gpx':       return this.getGpx({data, options});
       case 'gpkg':      return this.getGpkg({data, options});
       case 'geotiff':   return this.getGeoTIFF({ data, options });
+      case 'pdf':       return this.getPdf({ data, options });
     }
   },
 
@@ -110,6 +111,23 @@ export default {
       httpMethod: "POST"
     })
   },
+  /**
+   * Get csv layer format
+   * 
+   * @param data
+   * 
+   * @returns {Promise | Promise<unknown>}
+   * 
+   * @since 3.10.0
+   */
+  getPdf({ data = {} } = {}) {
+    data.filtertoken = this.getFilterToken();
+    return XHR.fileDownload({
+      url: this.getUrl('pdf'),
+      data,
+      httpMethod: "POST"
+    })
+  },
 
   /**
    * Check if it has a format to download

src/app/gui/queryresults/queryresultsservice.js

@@ -1490,7 +1490,13 @@ class QueryResultsService extends G3WObject {
     this.setLayerActionTool({
       layer,
       component: layer[name].active ? DownloadFormats : null,
-      config: layer[name].active ? this.state.actiontools[name][layer.id] : null
+      config: layer[name].active
+        ? {
+            ...this.state.actiontools[name][layer.id],
+            //for download layer need to filter pdf format because it works only for a single feature
+            downloads: this.state.actiontools[name][layer.id].downloads.filter(d => 'pdf' !== d.format)
+          }
+        : null
     })
   }
 
@@ -1502,8 +1508,9 @@ class QueryResultsService extends G3WObject {
    * @param features
    * @param action
    * @param index
+   * @param html
    */
-  async downloadFeatures(type, layer, features = [], action, index) {
+  async downloadFeatures(type, layer, features = [], action, index, html) {
 
     if (features && !Array.isArray(features)) {
       features = [features];
@@ -1514,6 +1521,11 @@ class QueryResultsService extends G3WObject {
       fids: features.map(f => f.attributes[G3W_FID]).join(',')
     };
 
+    //In case of pdf type need to add html element
+    if ('pdf' === type) {
+      data.html = html;
+    }
+
     /**
      * A function that che be called in case of querybypolygon
      *
@@ -2096,12 +2108,12 @@ class QueryResultsService extends G3WObject {
           format,
           class: GUI.getFontClass(format),
           hint: `sdk.tooltips.download_${format}`,
-          cbk: (layer, feature, action, index) => {
+          cbk: (layer, feature, action, index, html) => {
             // un-toggle downloads action
-            this.downloadFeatures(format, layer, feature, action, index);
+            this.downloadFeatures(format, layer, feature, action, index, html);
             if ('polygon' !== this.state.query.type) {
               const downloadsaction = this.state.layersactions[layer.id].find(action => 'downloads' === action.id);
-              downloadsaction.cbk(layer, feature, downloadsaction, index);
+              downloadsaction.cbk(layer, feature, downloadsaction, index, html);
             }
           }
         });

src/components/QueryResults.vue

@@ -102,7 +102,7 @@
                       ></span>
                     </span>
                     </template>
-                    <!--        DOWNLOAD        -->
+                    <!--        END DOWNLOAD        -->
                   </template>
                   <span
                     v-if                    = "layer.external || (layer.source && 'wms' !== layer.source.type )"
@@ -273,11 +273,14 @@
                           </td>
                         </tr>
                         <tr
-                          v-show="!collapsedFeatureBox(layer,feature) || hasOneLayerAndOneFeature(layer)"
-                          :id   = "`${layer.id}_${index}`"
-                          class = "featurebox-body"
+                          v-show = "!collapsedFeatureBox(layer,feature) || hasOneLayerAndOneFeature(layer)"
+                          :id    = "`${layer.id}_${index}`"
+                          class  = "featurebox-body"
                         >
-                          <td :colspan="getColSpan(layer)">
+                          <td
+                            :colspan              = "getColSpan(layer)"
+                            :feature-html-content = "`${layer.id}_${index}`"
+                          > <!-- @since v3.10.0  Reference to content of feature html response -->
                             <tabs
                               :fields  = "getQueryFields(layer, feature)"
                               :layerid = "layer.id"
@@ -380,7 +383,10 @@
                         :id    = "`${layer.id}_${index}`"
                         class  = "featurebox-body"
                       >
-                        <td :colspan="getColSpan(layer)">
+                        <td
+                          :colspan              = "getColSpan(layer)"
+                          :feature-html-content = "`${layer.id}_${index}`"
+                        ><!--@since v3.10.0  Reference to content of feature html response-->
                           <table class="feature_attributes">
                             <template v-for="attribute in layer.attributes.filter(attribute => attribute.show)">
                               <template v-if="isJSON(getLayerField({layer, feature, fieldName: attribute.name}))">
@@ -546,6 +552,17 @@
     },
     methods: {
 
+      /**
+       * @since v3.10.0
+       *
+       * @param { Array.<string> } downloads
+       *
+       * return {Array} return array of download formats enable of layer features
+       */
+      getLayerDownloads(downloads=[]) {
+        return downloads.filter(d => 'pdf' !== d);
+      },
+
       /**
        * @param { Object } layer
        * 

src/components/QueryResultsAction.vue

@@ -65,7 +65,7 @@
       }
     },
     async created() {
-      if (this.action.init){
+      if (this.action.init) {
         this.action.init({layer: this.layer, feature: this.feature, index:this.featureIndex, action:this.action});
       }
       if (typeof this.action.condition === 'function') {

src/components/QueryResultsActionDownloadFormats.vue

@@ -63,10 +63,20 @@ export default {
     },
   },
   methods: {
-    async download(){
+    async download() {
       try {
-        const download = this.config.downloads.find(a => a.format === this.download_format);
-        await download.cbk(this.layer, this.feature ? this.feature : this.layer.features, download, this.featureIndex);
+        const download = this.config.downloads.find(action => action.format === this.download_format);
+        await download.cbk(
+          this.layer,
+          this.feature
+            ? this.feature
+            : this.layer.features,
+          download,
+          this.featureIndex,
+          'pdf' === download.format
+           ? document.querySelector(`[feature-html-content="${this.layer.id}_${this.featureIndex}"]`).innerHTML
+           : null
+        );
       }
       catch(e) {console.warn(e) }
     }

src/locales/de.js

@@ -190,6 +190,7 @@ export default {
         download_gpkg: "GPKG herunterladen",
         download_csv: "CSV herunterladen",
         download_xls: "XLS herunterladen",
+        download_pdf: "PDF herunterladen",
         show_chart: "Diagramm anzeigen",
         atlas: "Atlas drucken"
       },
@@ -248,6 +249,9 @@ export default {
             download_xls: {
               hint: "Feature XLS herunterladen"
             },
+            download_pdf: {
+              hint: "Feature PDF herunterladen"
+            },
             atlas: {
               hint: "Atlas drucken"
             },

src/locales/en.js

@@ -190,6 +190,7 @@ export default {
         download_gpkg: "Download GPKG",
         download_csv: "Download CSV",
         download_xls: "Download XLS",
+        download_pdf: "Download PDF",
         show_chart: "Show Chart",
         atlas: "Print Atlas"
       },
@@ -248,6 +249,9 @@ export default {
             download_xls: {
               hint: "Download feature XLS"
             },
+            download_pdf: {
+              hint: "Download feature PDF"
+            },
             atlas: {
               hint: "Print Atlas"
             },

src/locales/fi.js

@@ -190,6 +190,7 @@ export default {
         download_gpkg: "Lataa GPKG-tiedosto",
         download_csv: "Lataa CSV-tiedosto",
         download_xls: "Lataa XLS-tiedosto",
+        download_pdf: "Lataa PDF-tiedosto",
         show_chart: "Näytä kaavio",
         atlas: "Tulosta Atlas"
       },
@@ -248,6 +249,9 @@ export default {
             download_xls: {
               hint: "Lataa ominaisuuden XLS-tiedosto"
             },
+            download_pdf: {
+              hint: "Lataa ominaisuuden PDF-tiedosto"
+            },
             atlas: {
               hint: "Tulosta Atlas"
             },

src/locales/fr.js

@@ -189,6 +189,7 @@ export default {
         download_gpkg: "Télécharger GPKG",
         download_csv: "Télécharger CSV",
         download_xls: "Télécharger XLS",
+        download_pdf: "Télécharger PDF",
         show_chart: "Montrer graphique",
         atlas: "Imprimer l'Atlas"
       },
@@ -247,6 +248,9 @@ export default {
             download_xls: {
               hint: "Télécharger le XLS"
             },
+            download_pdf: {
+              hint: "Télécharger le PDF"
+            },
             atlas: {
               hint: "Imprimer l'Atlas"
             },

src/locales/it.js

@@ -191,6 +191,7 @@ export default {
         download_gpkg: "Scarica GPKG",
         download_csv: "Scarica CSV",
         download_xls: "Scarica XLS",
+        download_pdf: "Scarica PDF",
         show_chart: "Mostra Grafico",
         atlas: "Stampa Atlas"
       },
@@ -249,6 +250,9 @@ export default {
             download_xls: {
               hint: "Scarica la feature in XLS"
             },
+            download_pdf: {
+              hint: "Scarica la feature in PDF"
+            },
             atlas: {
               hint: "Stampa Atlas"
             },

src/locales/ro.js

@@ -190,6 +190,7 @@ export default {
         download_gpkg: "Descarcă GPKG",
         download_csv: "Descarcă CSV",
         download_xls: "Descarcă XLS",
+        download_pdf: "Descarcă PDF",
         show_chart: "Arată Diagrama",
         atlas: "Tipărire Atlas"
       },
@@ -248,6 +249,9 @@ export default {
             download_xls: {
               hint: "Descarcă entitate în XLS"
             },
+            download_pdf: {
+              hint: "Descarcă entitate în PDF"
+            },
             atlas: {
               hint: "Tipărire Atlas"
             },

src/locales/se.js

@@ -190,6 +190,7 @@ export default {
         download_gpkg: "Ladda GPKG-fil",
         download_csv: "Ladda CSV-fil",
         download_xls: "Ladda XLS-fil",
+        download_pdf: "Ladda PDF-fil",
         show_chart: "Visa diagram", //Tero 9.12.2020
         atlas: "Skriv ut Atlas"
       },
@@ -248,6 +249,9 @@ export default {
             download_xls: {
               hint: "Ladda egenskapens XLS-fil"
             },
+            download_pdf: {
+              hint: "Ladda egenskapens PDF-fil"
+            },
             atlas: {
               hint: "Skriv ut Atlas"
             },

src/mixins/fields.js

@@ -5,7 +5,7 @@
 
 export default {
   methods: {
-    getFieldService(){
+    getFieldService() {
       if (undefined === this._fieldsService) {
         this._fieldsService = require('gui/fields/fieldsservice');
       }
@@ -14,19 +14,19 @@ export default {
     getFieldType(field) {
       return this.getFieldService().getType(field);
     },
-    isSimple(field){
+    isSimple(field) {
       return this.getFieldService().isSimple(field);
     },
-    isLink(field){
+    isLink(field) {
       return this.getFieldService().isLink(field);
     },
-    isImage(field){
+    isImage(field) {
       return this.getFieldService().isImage(field);
     },
-    isPhoto(field){
+    isPhoto(field) {
       return this.getFieldService().isPhoto(field);
     },
-    isVue(field){
+    isVue(field) {
       return this.getFieldService().isVue(field);
     },
     sanitizeFieldValue(value) {