Merge pull request #756 from geoadmin/develop

New Release v1.13.0 - #minor

Author: ltshb

package-lock.json

@@ -39,7 +39,7 @@
         "@fortawesome/free-solid-svg-icons": "^6.5.1",
         "@fortawesome/vue-fontawesome": "^3.0.6",
         "@geoblocks/cesium-compass": "^0.5.0",
-        "@geoblocks/mapfishprint": "^0.2.7",
+        "@geoblocks/mapfishprint": "github:geoblocks/mapfishprint#4c47539f391af3c641f9455efe0d31ebdc145cfe",
         "@geoblocks/ol-maplibre-layer": "^0.1.3",
         "@ivanv/vue-collapse-transition": "^1.0.2",
         "@mapbox/togeojson": "^0.16.2",

package.json

@@ -195,7 +195,7 @@ const generateClassForLayerConfig = (layerConfig, id, allOtherLayers, lang) => {
  * @param {String} layerId The unique layer ID used in our backends
  * @returns {Promise<String>} HTML content of the layer's legend
  */
-export const getLayerLegend = (lang, layerId) => {
+export const getLayerDescription = (lang, layerId) => {
     return new Promise((resolve, reject) => {
         axios
             .get(`${API_BASE_URL}rest/services/all/MapServer/${layerId}/legend?lang=${lang}`)

src/api/layers/layers.api.js

@@ -16,6 +16,31 @@ const PRINTING_DEFAULT_POLL_INTERVAL = 2000 // interval between each polling of
 const PRINTING_DEFAULT_POLL_TIMEOUT = 600000 // ms (10 minutes)
 
 const SERVICE_PRINT_URL = `${API_SERVICES_BASE_URL}print3/print/default`
+
+class GeoAdminCustomizer extends BaseCustomizer {
+    /** @param {string[]} layerIDsToExclude List of layer names to exclude from the print */
+    constructor(layerIDsToExclude) {
+        super()
+        this.layerIDsToExclude = layerIDsToExclude
+        this.layerFilter = this.layerFilter.bind(this)
+    }
+
+    /**
+     * Filter out layers that should not be printed. This function is automatically called when the
+     * encodeMap is called using this customizer.
+     *
+     * @param {State} layerState
+     * @returns {boolean} True to convert this layer, false to skip it
+     */
+    layerFilter(layerState) {
+        if (this.layerIDsToExclude.includes(layerState.layer.get('id'))) {
+            return false
+        }
+        // Call parent layerFilter method for other layers
+        return super.layerFilter(layerState)
+    }
+}
+
 /**
  * Tool to transform an OpenLayers map into a "spec" for MapFishPrint3 (meaning a big JSON) that can
  * then be used as request body for printing.
@@ -169,6 +194,8 @@ export class PrintError extends Error {
  *   Default is `false`
  * @param {CoordinateSystem} [config.projection=null] The projection used by the map, necessary when
  *   the grid is to be printed (it can otherwise be null). Default is `null`
+ * @param {String[]} [config.excludedLayerIDs=[]] List of the IDs of OpenLayers layer to exclude
+ *   from the print. Default is `[]`
  */
 async function transformOlMapToPrintParams(olMap, config) {
     const {
@@ -181,6 +208,7 @@ async function transformOlMapToPrintParams(olMap, config) {
         lang = null,
         printGrid = false,
         projection = null,
+        excludedLayerIDs = [],
     } = config
 
     if (!qrCodeUrl) {
@@ -202,6 +230,8 @@ async function transformOlMapToPrintParams(olMap, config) {
         throw new PrintError('Missing projection to print the grid')
     }
 
+    const customizer = new GeoAdminCustomizer(excludedLayerIDs)
+
     const attributionsOneLine = attributions.length > 0 ? `© ${attributions.join(', ')}` : ''
 
     try {
@@ -210,7 +240,7 @@ async function transformOlMapToPrintParams(olMap, config) {
             scale,
             printResolution: PRINTING_RESOLUTION,
             dpi: PRINTING_RESOLUTION,
-            customizer: new BaseCustomizer([0, 0, 10000, 10000]),
+            customizer: customizer,
         })
         if (printGrid) {
             encodedMap.layers.unshift({
@@ -239,7 +269,7 @@ async function transformOlMapToPrintParams(olMap, config) {
             layout: layout.name,
         }
         if (layersWithLegends.length > 0) {
-            spec.attributes.legends = {
+            spec.attributes.legend = {
                 name: i18n.global.t('legend'),
                 classes: layersWithLegends.map((layer) => {
                     return {
@@ -277,6 +307,8 @@ async function transformOlMapToPrintParams(olMap, config) {
  *   Default is `false`
  * @param {CoordinateSystem} [config.projection=null] The projection used by the map, necessary when
  *   the grid is to be printed (it can otherwise be null). Default is `null`
+ * @param {String[]} [config.excludedLayerIDs=[]] List of IDs of OpenLayers layer to exclude from
+ *   the print. Default is `[]`
  * @returns {Promise<MFPReportResponse>} A job running on our printing backend (needs to be polled
  *   using {@link waitForPrintJobCompletion} to wait until its completion)
  */
@@ -291,6 +323,7 @@ export async function createPrintJob(map, config) {
         lang = null,
         printGrid = false,
         projection = null,
+        excludedLayerIDs = [],
     } = config
     try {
         const printingSpec = await transformOlMapToPrintParams(map, {
@@ -303,6 +336,7 @@ export async function createPrintJob(map, config) {
             lang,
             printGrid,
             projection,
+            excludedLayerIDs,
         })
         log.debug('Starting print for spec', printingSpec)
         return await requestReport(SERVICE_PRINT_URL, printingSpec)

src/api/print.api.js

@@ -1,7 +1,7 @@
 import axios from 'axios'
 
 import GeoAdminGroupOfLayers from '@/api/layers/GeoAdminGroupOfLayers.class'
-import { API_BASE_URL } from '@/config'
+import { API_BASE_URL, ENVIRONMENT } from '@/config'
 import {
     getBackgroundLayerFromLegacyUrlParams,
     getLayersFromLegacyUrlParams,
@@ -51,7 +51,13 @@ const readTopicTreeRecursive = (node, availableLayers) => {
             try {
                 children.push(readTopicTreeRecursive(topicChild, availableLayers))
             } catch (err) {
-                log.error(`Child ${topicChild.id} can't be loaded`, err)
+                if (ENVIRONMENT === 'development') {
+                    log.warn(
+                        `Child ${topicChild.id} can't be loaded, probably due to data integration work ongoing: ${err.message}`
+                    )
+                } else {
+                    log.error(`Child ${topicChild.id} can't be loaded`, err)
+                }
             }
         })
         return new GeoAdminGroupOfLayers({ id: `${node.id}`, name: node.label, layers: children })

src/api/topics.api.js

@@ -156,7 +156,8 @@ function removeLastPointOnDeleteKeyUp(event) {
 }
 
 async function closeDrawing() {
-    store.dispatch('setShowLoadingBar', { loading: true, ...dispatcher })
+    const requester = 'closing-drawing'
+    store.dispatch('setLoadingBarRequester', { requester, ...dispatcher })
 
     log.debug(
         `Closing drawing menu: isModified=${isDrawingModified.value}, isNew=${isNewDrawing.value}, isEmpty=${isDrawingEmpty.value}`
@@ -175,7 +176,7 @@ async function closeDrawing() {
     }
 
     await store.dispatch('toggleDrawingOverlay', dispatcher)
-    store.dispatch('setShowLoadingBar', { loading: false, ...dispatcher })
+    store.dispatch('clearLoadingBarRequester', { requester, ...dispatcher })
 }
 </script>
 

src/modules/drawing/DrawingModule.vue

@@ -6,7 +6,6 @@ import { computed, ref, toRefs, watch } from 'vue'
 import { useStore } from 'vuex'
 
 import EditableFeature, { EditableFeatureTypes } from '@/api/features/EditableFeature.class'
-import { IS_TESTING_WITH_CYPRESS } from '@/config'
 import FeatureAreaInfo from '@/modules/infobox/components/FeatureAreaInfo.vue'
 import DrawingStyleColorSelector from '@/modules/infobox/components/styling/DrawingStyleColorSelector.vue'
 import DrawingStyleIconSelector from '@/modules/infobox/components/styling/DrawingStyleIconSelector.vue'
@@ -60,18 +59,11 @@ watch(description, () => {
 })
 
 // Here we need to declare the debounce method globally otherwise it does not work (it is based
-// on closure which will not work if the debounce mehtod is defined in a watcher)
+// on closure which will not work if the debounce method is defined in a watcher)
 // The title debounce needs to be quick in order to be displayed on the map
-// NOTE: to avoid race condition on cypress between the update of a feature and the closing of
-// the drawing we need to speed up the debouncing, otherwise the dispatch changeFeatureTitle
-// will trigger a save kml when the features have been already removed from the KML drawing layer
-// resulting in an empty drawing.
-const debounceTitleUpdate = debounce(updateFeatureTitle, IS_TESTING_WITH_CYPRESS ? 1 : 100)
+const debounceTitleUpdate = debounce(updateFeatureTitle, 100)
 // The description don't need a quick debounce as it is not displayed on the map
-const debounceDescriptionUpdate = debounce(
-    updateFeatureDescription,
-    IS_TESTING_WITH_CYPRESS ? 1 : 300
-)
+const debounceDescriptionUpdate = debounce(updateFeatureDescription, 300)
 
 function updateFeatureTitle() {
     store.dispatch('changeFeatureTitle', {

src/modules/infobox/components/styling/FeatureStyleEdit.vue

@@ -0,0 +1,6 @@
+/**
+ * The name of the OpenLayer layer that is used to render the print area.
+ *
+ * @type {String}
+ */
+export const PRINT_AREA_LAYER_ID = 'printAreaLayer'

src/modules/map/components/openlayers/utils/printConstants.js

@@ -6,7 +6,9 @@ import { getGenerateQRCodeUrl } from '@/api/qrcode.api.js'
 import { createShortLink } from '@/api/shortlink.api.js'
 import log from '@/utils/logging'
 
-// const dispatcher = { dispatcher: 'usePrint.composable' }
+import { PRINT_AREA_LAYER_ID } from './printConstants'
+
+const dispatcher = { dispatcher: 'usePrint.composable' }
 
 /** @enum */
 export const PrintStatus = {
@@ -35,8 +37,9 @@ export function usePrint(map) {
      * @returns {Promise<String | null>}
      */
     async function print(printGrid = false, printLegend = false) {
+        const requester = 'print-map'
         try {
-            // TODO PB-362 : show laoding bar
+            store.dispatch('setLoadingBarRequester', { requester, ...dispatcher })
             if (currentJobReference.value) {
                 await abortCurrentJob()
             }
@@ -59,7 +62,8 @@ export function usePrint(map) {
                     : [],
                 lang: store.state.i18n.lang,
                 printGrid: printGrid,
-                projection: store.state.map.projection,
+                projection: store.state.position.projection,
+                excludedLayerIDs: [PRINT_AREA_LAYER_ID],
             })
             currentJobReference.value = printJob.ref
             const result = await waitForPrintJobCompletion(printJob)
@@ -70,7 +74,7 @@ export function usePrint(map) {
             printStatus.value = PrintStatus.FINISHED_FAILED
             return null
         } finally {
-            // TODO PB-362 : hide laoding bar
+            store.dispatch('clearLoadingBarRequester', { requester, ...dispatcher })
             currentJobReference.value = null
         }
     }

src/modules/map/components/openlayers/utils/usePrint.composable.js

@@ -7,6 +7,8 @@ import { Fill, Style } from 'ol/style'
 import { computed, watch } from 'vue'
 import { useStore } from 'vuex'
 
+import { PRINT_AREA_LAYER_ID } from './printConstants'
+
 const dispatcher = { dispatcher: 'print-area-renderer.composable' }
 
 function createWorldPolygon() {
@@ -36,6 +38,7 @@ function createWorldPolygon() {
             features: [worldPolygon],
         }),
         style: transparentStyle,
+        id: PRINT_AREA_LAYER_ID,
     })
     return vectorLayer
 }

src/modules/map/components/openlayers/utils/usePrintAreaRenderer.composable.js

@@ -14,7 +14,7 @@ import { useStore } from 'vuex'
 
 import AbstractLayer from '@/api/layers/AbstractLayer.class'
 import GeoAdminGroupOfLayers from '@/api/layers/GeoAdminGroupOfLayers.class'
-import LayerLegendPopup from '@/modules/menu/components/LayerLegendPopup.vue'
+import LayerDescriptionPopup from '@/modules/menu/components/LayerDescriptionPopup.vue'
 import TextSearchMarker from '@/utils/components/TextSearchMarker.vue'
 import TextTruncate from '@/utils/components/TextTruncate.vue'
 import { LV95 } from '@/utils/coordinates/coordinateSystems'
@@ -46,7 +46,7 @@ const { item, compact, depth, search } = toRefs(props)
 // Declaring own properties (ex-data)
 
 const showChildren = ref(false)
-const showLayerLegend = ref(false)
+const showLayerDescription = ref(false)
 
 // Mapping the store to the component
 const store = useStore()
@@ -67,7 +67,7 @@ const activeLayers = computed(() => store.state.layers.activeLayers)
 const openThemesIds = computed(() => store.state.topics.openedTreeThemesIds)
 
 const hasChildren = computed(() => item.value?.layers?.length > 0)
-const hasLegend = computed(() => canBeAddedToTheMap.value && item.value?.hasDescription)
+const hasDescription = computed(() => canBeAddedToTheMap.value && item.value?.hasDescription)
 const isPhoneMode = computed(() => store.getters.isPhoneMode)
 
 /**
@@ -272,11 +272,11 @@ function containsLayer(layers, searchText) {
                 <FontAwesomeIcon icon="fa fa-search-plus" />
             </button>
             <button
-                v-if="hasLegend"
+                v-if="hasDescription"
                 class="btn"
                 :class="{ 'btn-lg': !compact }"
                 :data-cy="`catalogue-tree-item-info-${item.id}`"
-                @click.stop="showLayerLegend = true"
+                @click.stop="showLayerDescription = true"
             >
                 <FontAwesomeIcon icon="info-circle" />
             </button>
@@ -297,7 +297,11 @@ function containsLayer(layers, searchText) {
                 />
             </ul>
         </CollapseTransition>
-        <LayerLegendPopup v-if="showLayerLegend" :layer="item" @close="showLayerLegend = false" />
+        <LayerDescriptionPopup
+            v-if="showLayerDescription"
+            :layer="item"
+            @close="showLayerDescription = false"
+        />
     </div>
 </template>