Merge pull request #166 from Geoportail-Luxembourg/GSLUX-639-style-pa…

…nel-export

GSLUX-639: Export style panel

cypress/e2e/header-bar.cy.ts

@@ -35,6 +35,19 @@ describe('Header bar', () => {
           cy.get('[data-cy="layerPanel"]').should('not.exist')
         })
       })
+
+      describe('When style panel is open', () => {
+        beforeEach(() => {
+          cy.get('[data-cy="myLayersButton"]').click()
+          cy.get('[data-cy="openStylePanel"]').click()
+          cy.get('[data-cy="selectedThemeIcon"]').click()
+        })
+
+        it('opens the theme grid and closes the style panel', () => {
+          cy.get('[data-cy="themeGrid"]').should('be.visible')
+          cy.get('[data-cy="stylePanel"]').should('not.exist')
+        })
+      })
     })
 
     describe('When side panel is NOT opened', () => {

src/App.vue

@@ -64,10 +64,7 @@ onUnmounted(() => window.removeEventListener('resize', map.resize))
 
       <main class="flex grow">
         <!-- Layer panel -->
-        <div
-          v-if="layersOpen && !styleEditorOpen"
-          class="w-full md:w-80 bg-secondary z-10"
-        >
+        <div v-if="layersOpen" class="w-full md:w-80 bg-secondary z-10">
           <layer-panel />
         </div>
 

src/bundle/lib.ts

@@ -45,7 +45,7 @@ import { proxyUrlHelper } from '@/services/proxyurl/proxyurl.helper'
 import { styleUrlHelper } from '@/services/styleurl/styleurl.helper'
 import { themeSelectorService } from '@/components/theme-selector/theme-selector.service'
 import MapLibreLayer from '@/lib/ol-mapbox-layer'
-import StyleSelector from '@/components/style-selector/style-selector.vue'
+import StylePanel from '@/components/style-selector/style-panel.vue'
 import { clearLayersCache } from '@/stores/layers.cache'
 
 import i18next, { InitOptions } from 'i18next'
@@ -154,6 +154,6 @@ export {
   statePersistorMyMapService,
   themeSelectorService,
   MapLibreLayer,
-  StyleSelector,
+  StylePanel,
   clearLayersCache,
 }

src/components/layer-manager/layer-item/layer-item-background.vue

@@ -41,6 +41,7 @@ function getLabel() {
     <span class="flex-1 text-left cursor-default">{{ getLabel() }}</span>
     <button
       v-if="showEditButton"
+      data-cy="openStylePanel"
       class="fa fa-pencil"
       :aria-label="t('Open editor panel', { ns: 'app' })"
       :title="t('Open editor panel', { ns: 'app' })"

src/stores/app.store.ts

@@ -57,6 +57,9 @@ export const useAppStore = defineStore(
 
     function setThemeGridOpen(open: boolean) {
       themeGridOpen.value = open
+      if (themeGridOpen.value) {
+        styleEditorOpen.value = false
+      }
     }
 
     function toggleThemeGrid() {
@@ -68,6 +71,7 @@ export const useAppStore = defineStore(
         themeGridOpen.value = true
         layersOpen.value = true
         myMapsOpen.value = false
+        styleEditorOpen.value = false
         myLayersTabOpen.value && (myLayersTabOpen.value = false)
       }
     }