Merge pull request #1209 from geoadmin/fix-pb-1236-infobox-change-lan…

…guage PB-1236: infobox doesn't change language when open
geoadmin · Jan 21, 2025 · d9b3be2 · d9b3be2
2 parents 4a133e2 + b524adc
commit d9b3be2
Show file tree

Hide file tree

Showing 9 changed files with 111 additions and 15 deletions.
diff --git a/src/modules/menu/components/activeLayers/MenuActiveLayersList.vue b/src/modules/menu/components/activeLayers/MenuActiveLayersList.vue
@@ -23,10 +23,9 @@ const { compact } = toRefs(props)
 const activeLayersList = ref(null)
 // used to deactivate the hover change of color on layer whenever one of them is dragged
 const aLayerIsDragged = ref(false)
-const showLayerDescriptionForLayer = ref(null)
 const showLayerDetailIndex = ref(null)
 const layerDetailFocusMoveButton = ref(null)
-
+const showDescriptionForLayerId = ref(null)
 const store = useStore()
 // Users are used to have layers ordered top to bottom (the first layer is on top), but we store them in the opposite order.
 // So here we swap the order of this array to match the desired order on the UI
@@ -96,15 +95,16 @@ function onToggleLayerDetail(index) {
                 :class="{ 'drag-in-progress': aLayerIsDragged }"
                 :show-layer-detail="showLayerDetailIndex === reverseIndex(index)"
                 :focus-move-button="layerDetailFocusMoveButton"
-                @show-layer-description-popup="showLayerDescriptionForLayer = layer"
+                @show-layer-description-popup="showDescriptionForLayerId = layer.id"
                 @toggle-layer-detail="onToggleLayerDetail"
                 @move-layer="onMoveLayer"
-            />
-            <LayerDescriptionPopup
-                v-if="showLayerDescriptionForLayer"
-                :layer="showLayerDescriptionForLayer"
-                @close="showLayerDescriptionForLayer = null"
-            />
+            >
+                <LayerDescriptionPopup
+                    v-if="showDescriptionForLayerId === layer.id"
+                    :layer="layer"
+                    @close="showDescriptionForLayerId = null"
+                />
+            </MenuActiveLayersListItem>
         </div>
         <div v-show="activeLayers.length === 0" class="p-1 ps-3" data-cy="menu-section-no-layers">
             -

diff --git a/src/modules/menu/components/activeLayers/MenuActiveLayersListItem.vue b/src/modules/menu/components/activeLayers/MenuActiveLayersListItem.vue
@@ -171,6 +171,7 @@ function changeStyle(newStyle) {
     <div
         ref="menuLayerItem"
         class="menu-layer-item"
+        v-bind="$attrs"
         :class="{ compact: compact }"
         :data-cy="`menu-active-layer-${id}-${index}`"
     >
@@ -345,6 +346,7 @@ function changeStyle(newStyle) {
             </div>
         </div>
     </div>
+    <slot />
 </template>
 
 <style lang="scss" scoped>

diff --git a/src/store/modules/features.store.js b/src/store/modules/features.store.js
@@ -684,7 +684,7 @@ export default {
                             lang: rootState.i18n.lang,
                             screenWidth: rootState.ui.width,
                             screenHeight: rootState.ui.height,
-                            mapExtent: flattenExtent(rootState.getters.mapExtent),
+                            mapExtent: flattenExtent(getters.extent),
                             coordinate: rootState.map.clickInfo?.coordinate,
                         })
                     )

diff --git a/src/store/modules/layers.store.js b/src/store/modules/layers.store.js
@@ -174,8 +174,9 @@ const getters = {
      *
      * @returns {number}
      */
-    getIndexOfActiveLayerById: (state) => (layerId) =>
-        state.activeLayers.findIndex((layer) => layer.id === layerId),
+    getIndexOfActiveLayerById: (state) => (layerId) => {
+        return state.activeLayers.findIndex((layer) => layer.id === layerId)
+    },
 
     /**
      * All layers in the config that have the flag `background` to `true` (that can be shown as a

diff --git a/src/utils/components/SimpleWindow.vue b/src/utils/components/SimpleWindow.vue
@@ -104,9 +104,9 @@ onMounted(() => {
                 class="card-header d-flex align-items-center justify-content-sm-end"
                 data-cy="window-header"
             >
-                <span v-if="title" data-cy="simple-window-title" class="me-auto text-truncate">{{
-                    i18n.t(title)
-                }}</span>
+                <span v-if="title" data-cy="simple-window-title" class="me-auto text-truncate">
+                    {{ i18n.t(title) }}</span
+                >
                 <span v-else class="me-auto" />
                 <PrintButton v-if="allowPrint && showBody" :content="contentRef"></PrintButton>
                 <button

diff --git a/tests/cypress/fixtures/html-popup-german.fixture.html b/tests/cypress/fixtures/html-popup-german.fixture.html
@@ -0,0 +1,44 @@
+<div class="chbabskulturgueter htmlpopup-container">
+    <div class="htmlpopup-header">
+        <span
+            >Ich bin ein Testfenster</span
+        >
+        (Ich bin ein Testfenster)
+    </div>
+    <div class="htmlpopup-content">
+        <table>
+            <tr>
+                <td class="cell-left">Beschreibung</td>
+                <td>Ich bin ein Testfenster</td>
+            </tr>
+            <tr>
+                <td class="cell-left">Y-Coordinate</td>
+                <td>Ich bin ein Testfenster</td>
+            </tr>
+            <tr>
+                <td class="cell-left">X-Coordinate</td>
+                <td>Ich bin ein Testfenster</td>
+            </tr>
+            <tr>
+                <td class="cell-left">Stadt</td>
+                <td>Ich bin ein Testfenster</td>
+            </tr>
+            <tr>
+                <td class="cell-left">Kanton</td>
+                <td>Ich bin ein Testfenster</td>
+            </tr>
+            <tr>
+                <td class="cell-left"></td>
+                <td>
+                    <a data-cy="more-info-link" href="https://api3.geo.admin.ch/rest/services/ech/MapServer/ch.bav.haltestellen-oev/8577026/extendedHtmlPopup">
+                        Mehr Informationen
+                    </a>
+                </td>
+            </tr>
+            <tr>
+                <td class="cell-left"></td>
+                <td><a href="#">Link zum Object</a></td>
+            </tr>
+        </table>
+    </div>
+</div>
diff --git a/tests/cypress/tests-e2e/drawing.cy.js b/tests/cypress/tests-e2e/drawing.cy.js
@@ -263,6 +263,7 @@ describe('Drawing module tests', () => {
                         ])
                     )
                 cy.get('[data-cy="drawing-style-text-button"]').click()
+                cy.get('[data-cy="drawing-style-text-popup"]').should('not.exist')
 
                 // changing/editing the description of this marker
                 const description = 'A description for this marker'

diff --git a/tests/cypress/tests-e2e/infobox.cy.js b/tests/cypress/tests-e2e/infobox.cy.js
@@ -107,6 +107,38 @@ describe('The infobox', () => {
         })
         generateInfoboxTestsForMapSelector('[data-cy="ol-map"]')
     })
+
+    context('Changes the language of the infobox', () => {
+        beforeEach(() => {
+            cy.goToMapView({ layers: layer })
+            cy.intercept('**/MapServer/**/htmlPopup**&lang=de**', {
+                fixture: 'html-popup-german.fixture.html',
+            }).as('htmlPopupGerman')
+        })
+        it('changes the language of the infobox', () => {
+            cy.get('[data-cy="ol-map"]').click()
+            cy.waitUntilState((_, getters) => {
+                return getters.selectedFeatures.length > 0
+            })
+            const htmlPopupCalls = 10
+            cy.get('@htmlPopup.all').should('have.length', htmlPopupCalls)
+
+            cy.clickOnLanguage('de')
+
+            cy.closeMenuIfMobile()
+
+            cy.wait(['@layers', '@topics', '@topic-ech', '@featureDetail', '@htmlPopupGerman'])
+            cy.get('@htmlPopup.all').should('have.length', htmlPopupCalls)
+            cy.get('.htmlpopup-content')
+                .should('be.visible')
+                .should('contain', 'Beschreibung')
+                .should('contain', 'Ich bin ein Testfenster')
+                .should('contain', 'Stadt')
+                .should('contain', 'Kanton')
+                .should('contain', 'Mehr Informationen')
+                .should('contain', 'Link zum Object')
+        })
+    })
     // since we've been serving fake tiles to Cesium, the location popup is broken as Cesium can't return proper coordinates
     // we need to fix this Cesium fake tile issue before reactivating this test context
     // TODO : BGDIINF_SB-3181

diff --git a/tests/cypress/tests-e2e/layers.cy.js b/tests/cypress/tests-e2e/layers.cy.js
@@ -905,20 +905,36 @@ describe('Test of layer handling', () => {
                 const layerId = visibleLayerIds[0]
                 // mocking up the backend response for the legend
                 const fakeHtmlResponse = '<div>Test</div>'
+                const germanText = 'Test in German'
+                const fakeHtmlResponseGerman = `<div>${germanText}</div>`
                 cy.intercept(
                     `**/rest/services/all/MapServer/${layerId}/legend**`,
                     fakeHtmlResponse
                 ).as('legend')
+                cy.intercept(
+                    `**/rest/services/all/MapServer/${layerId}/legend**?lang=de**`,
+                    fakeHtmlResponseGerman
+                ).as('legendGerman')
                 // opening layer settings
                 cy.openLayerSettings(layerId)
                 // clicking on the layer info button
                 cy.get(`[data-cy^="button-show-description-layer-${layerId}-"]`)
                     .should('be.visible')
                     .click()
                 // checking that the backend has been requested for this layer's legend
+                const legendCalls = 1
                 cy.wait('@legend')
+                cy.get('@legend.all').should('have.length', legendCalls)
                 // checking that the content of the popup is our mocked up content
                 cy.get('[data-cy="layer-description"]').should('be.visible').contains('Test')
+
+                // Changes the language to see if the legend is displayed in the correct language
+                cy.viewport(900, 800)
+                cy.clickOnLanguage('de')
+                cy.wait('@legendGerman')
+                cy.get('@legend.all').should('have.length', legendCalls)
+
+                cy.get('[data-cy="layer-description"]').should('be.visible').contains(germanText)
             })
         })
         context('Timestamp management', () => {