PB-1613 : sending ready event in print legend view

Author: pakb

packages/mapviewer/src/modules/menu/components/LayerDescription.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, onMounted, ref, watch } from 'vue'
+import { computed, nextTick, onMounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useStore } from 'vuex'
 
@@ -22,6 +22,8 @@ const { layer, layerId, transformUrlIntoQrcode } = defineProps({
     },
 })
 
+const emits = defineEmits(['loaded'])
+
 const htmlContent = ref('')
 
 const { t } = useI18n()
@@ -51,7 +53,11 @@ watch(
         }
     }
 )
-watch(htmlContent, transformATagIntoQRCodes)
+watch(htmlContent, () => {
+    nextTick(() => {
+        transformATagIntoQRCodes()
+    })
+})
 
 onMounted(async () => {
     if (!isExternal.value && layer) {
@@ -67,6 +73,7 @@ function transformATagIntoQRCodes() {
             a.innerHTML = `<img width="90" src="${getGenerateQRCodeUrl(a.href)}" alt="">`
         })
     }
+    emits('loaded')
 }
 </script>
 

packages/mapviewer/src/views/PrintLegendView.vue

@@ -1,14 +1,29 @@
 <script setup>
-import { computed } from 'vue'
+import log from '@geoadmin/log'
+import { computed, ref, watch } from 'vue'
 import { useStore } from 'vuex'
 
+import { sendMapReadyEventToParent } from '@/api/iframePostMessageEvent.api'
 import LayerDescription from '@/modules/menu/components/LayerDescription.vue'
 import usePrintViewCommons from '@/views/usePrintViewCommons.composable'
 
 const { printLayout, printContainerStyle } = usePrintViewCommons()
 
+const loadedLayerDescriptions = ref(0)
+
 const store = useStore()
 const visibleLayers = computed(() => store.getters.visibleLayers)
+const visibleLayersCount = computed(() => visibleLayers.value.length)
+
+watch(visibleLayersCount, () => {
+    loadedLayerDescriptions.value = 0
+})
+watch(loadedLayerDescriptions, () => {
+    if (loadedLayerDescriptions.value === visibleLayersCount.value) {
+        log.debug('All layer descriptions loaded. Sending map ready event to parent window.')
+        sendMapReadyEventToParent()
+    }
+})
 </script>
 
 <template>
@@ -23,6 +38,7 @@ const visibleLayers = computed(() => store.getters.visibleLayers)
             :layer="layer"
             :layer-id="layer.id"
             transform-url-into-qrcode
+            @loaded="loadedLayerDescriptions++"
         />
     </div>
 </template>
@@ -31,7 +47,7 @@ const visibleLayers = computed(() => store.getters.visibleLayers)
 .print-legend-view {
     display: grid;
     gap: 20px;
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: repeat(2, 1fr);
 }
 
 @media print {