Merge pull request #63 from Geoportail-Luxembourg/GSLUX-631-Backgroun…

…d-KO

GSLUX-631: Background selector KO

cypress/e2e/background-selection.cy.ts

@@ -38,4 +38,49 @@ describe('Background selector', () => {
       expect(layers[0].get('id')).to.eq(502)
     })
   })
+
+  describe('When background is blank in permalink', () => {
+    describe('When there is no layer in permalink', () => {
+      beforeEach(() => {
+        cy.visit(
+          '/theme/main?version=3&lang=fr&layers=&opacities=&bgLayer=blank'
+        )
+      })
+
+      it('shows a notification message when in permalink there is no layer', () => {
+        cy.visit(
+          '/theme/main?version=3&lang=fr&layers=&opacities=&bgLayer=blank'
+        )
+        cy.get('[data-cy="alertNotifications"]')
+          .find('.lux-alert')
+          .should('have.class', 'lux-alert-info')
+          .contains(
+            "Aucune couche n'étant définie pour cette carte, une couche de fond a automatiquement été ajoutée."
+          )
+      })
+
+      it('replaces the bg in permalink by the default bg', () => {
+        cy.visit(
+          '/theme/main?version=3&lang=fr&layers=&opacities=&bgLayer=blank'
+        )
+        cy.url().should('contain', 'bgLayer=basemap_2015_global')
+      })
+    })
+
+    describe('When there is a layer in permalink', () => {
+      beforeEach(() => {
+        cy.visit(
+          '/theme/main?version=3&lang=fr&layers=269&opacities=1&bgLayer=blank'
+        )
+      })
+
+      it('does NOT show a notification message', () => {
+        cy.get('[data-cy="alertNotifications"]').should('not.exist')
+      })
+
+      it('keeps the bg blank', () => {
+        cy.url().should('contain', 'bgLayer=blank')
+      })
+    })
+  })
 })

package.json

@@ -7,8 +7,8 @@
     "dev": "vite",
     "build": "run-p type-check build-only",
     "build-only": "vite build",
-    "build:lib:prod": "npx vite build --config vite-dist.config.ts",
-    "build:lib:dev": "npx vite build --config vite-dist.config.ts --base=/dev/main.html/",
+    "build:lib:prod": "npx vite build --mode prod --config vite-dist.config.ts --minify=esbuild --debug",
+    "build:lib:dev": "npx vite build --mode dev --config vite-dist.config.ts --minify=false --base=/dev/main.html/ --debug",
     "preview": "vite preview",
     "test": "npm run test:unit",
     "test:unit": "vitest --environment jsdom --root .",

src/App.vue

@@ -7,6 +7,7 @@ import { MapLibreLayerType } from './composables/map/map.model'
 import HeaderBar from './components/header/header-bar.vue'
 import FooterBar from './components/footer/footer-bar.vue'
 
+import AlertNotifications from '@/components/alert-notifications/alert-notifications.vue'
 import StyleSelector from '@/components/style-selector/style-selector.vue'
 import RemoteLayers from '@/components/remote-layers/remote-layers.vue'
 import LayerMetadata from '@/components/layer-metadata/layer-metadata.vue'
@@ -15,17 +16,22 @@ import LayerPanel from '@/components/layer-panel/layer-panel.vue'
 import MapContainer from '@/components/map/map-container.vue'
 import SliderComparator from '@/components/slider/slider-comparator.vue'
 
+import { statePersistorBgLayerService } from '@/services/state-persistor/state-persistor-layer-background.service'
 import { statePersistorLayersService } from '@/services/state-persistor/state-persistor-layers.service'
 import { statePersistorThemeService } from '@/services/state-persistor/state-persistor-theme.service'
 import { statePersistorLayersOpenService } from '@/services/state-persistor/state-persistor-layersopen.service'
 import { statePersistorStyleService } from '@/services/state-persistor/state-persistor-bgstyle.service'
+import { statePersistorMyMapService } from '@/services/state-persistor/state-persistor-mymap.service'
 import { useAppStore } from '@/stores/app.store'
-import useMap from './composables/map/map.composable'
+import useMap from '@/composables/map/map.composable'
 
+// Important, keep order!
+statePersistorMyMapService.bootstrap()
 statePersistorLayersService.bootstrap()
 statePersistorThemeService.bootstrap()
 statePersistorLayersOpenService.bootstrapLayersOpen()
 statePersistorStyleService.bootstrapStyle()
+statePersistorBgLayerService.bootstrap()
 
 const { layersOpen, styleEditorOpen } = storeToRefs(useAppStore())
 
@@ -86,5 +92,6 @@ function resizeMap() {
     </main>
 
     <footer-bar class="fixed bottom-5 sm:static z-20" />
+    <alert-notifications />
   </div>
 </template>

src/assets/main.css

@@ -190,6 +190,28 @@
   .lux-slider-layer-label {
     @apply w-32 bg-white hover:cursor-default absolute bottom-14 p-2 right-7 font-bold;
   }
+
+  .lux-alert {
+    @apply p-4 mb-5 border;
+  }
+
+  .lux-alert-info {
+    background-color: var(--alert-info-primary);
+    border-color: var(--alert-info-secondary);
+    color: var(--alert-info-tertiary);
+  }
+
+  .lux-alert-danger {
+    background-color: var(--alert-danger-primary);
+    border-color: var(--alert-danger-secondary);
+    color: var(--alert-danger-tertiary);
+  }
+
+  .lux-alert-warning {
+    background-color: var(--alert-warning-primary);
+    border-color: var(--alert-warning-secondary);
+    color: var(--alert-warning-tertiary);
+  }
 }
 
 .fa-solid {
@@ -198,6 +220,15 @@
 
 @layer base {
   :root {
+    --alert-info-primary: #d9edf7;
+    --alert-info-secondary: #bce8f1;
+    --alert-info-tertiary: #31708f;
+    --alert-danger-primary: #f2dede;
+    --alert-danger-secondary: #ebccd1;
+    --alert-danger-tertiary: #a94442;
+    --alert-warning-primary: #fcf850;
+    --alert-warning-secondary: #faebcc;
+    --alert-warning-tertiary: #8a6d3b;
     --color-default: #333;
     --color-primary: #2980b9;
     --color-secondary: #97bbd3;

src/assets/ol.css

@@ -1,14 +1,22 @@
-@import 'main.css';
-
 @tailwind components;
 
 @layer components {
+  .ol-outlined {
+    outline: 5px auto -webkit-focus-ring-color;
+    outline-offset: -2px;
+  }
+
+  .ol-btn {
+    @apply bg-white border text-primary py-[6px] px-[12px] hover:bg-primary hover:text-white leading-snug focus:bg-[#e6e6e6] focus:border-[#8c8c8c] focus:[color:var(--color-primary)] focus:ol-outlined;
+    border: 1px solid var(--button-bg-color);
+  }
+
   .ol-control {
     @apply absolute rounded p-1;
   }
 
   .ol-control button {
-    @apply w-10 h-10 text-xl text-center font-normal indent-0 block lux-btn m-[-1px] p-0 border-[1px] border-[color:var(--color-btn-ol)];
+    @apply w-10 h-10 text-xl text-center font-normal indent-0 block ol-btn m-[-1px] p-0 border-[1px] border-[color:var(--color-btn-ol)];
     font-family: 'geoportail-icons-wc';
   }
 

src/bundle/lib.ts

@@ -8,6 +8,7 @@ import { defineCustomElement } from '@/bundle/runtime-dom/apiCustomElement'
 initProjections()
 
 import '../assets/main.css' // Tell Vite to build the css
+import AlertNotifications from '@/components/alert-notifications/alert-notifications.vue'
 import DropdownList from '@/components/common/dropdown-list.vue'
 import MapContainer from '@/components/map/map-container.vue'
 import BackgroundSelector from '@/components/background-selector/background-selector.vue'
@@ -21,8 +22,12 @@ import useMap from '@/composables/map/map.composable'
 import { useAppStore } from '@/stores/app.store'
 import { useMapStore } from '@/stores/map.store'
 import { useThemeStore } from '@/stores/config.store'
+import { statePersistorBgLayerService } from '@/services/state-persistor/state-persistor-layer-background.service'
 import { statePersistorLayersService } from '@/services/state-persistor/state-persistor-layers.service'
 import { statePersistorThemeService } from '@/services/state-persistor/state-persistor-theme.service'
+import { statePersistorLayersOpenService } from '@/services/state-persistor/state-persistor-layersopen.service'
+import { statePersistorStyleService } from '@/services/state-persistor/state-persistor-bgstyle.service'
+import { statePersistorMyMapService } from '@/services/state-persistor/state-persistor-mymap.service'
 import { themeSelectorService } from '@/components/theme-selector/theme-selector.service'
 
 import i18next from 'i18next'
@@ -77,6 +82,7 @@ export {
   backend,
   VueDOMPurifyHTML,
   I18NextVue,
+  AlertNotifications,
   DropdownList,
   MapContainer,
   BackgroundSelector,
@@ -90,7 +96,11 @@ export {
   useAppStore,
   useMapStore,
   useThemeStore,
+  statePersistorBgLayerService,
   statePersistorLayersService,
   statePersistorThemeService,
+  statePersistorLayersOpenService,
+  statePersistorStyleService,
+  statePersistorMyMapService,
   themeSelectorService,
 }

src/components/alert-notifications/alert-notifications.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+
+import { useAlertNotificationsStore } from '@/stores/alert-notifications.store'
+import Notification from './notification-item.vue'
+
+const alertNotificationsStore = useAlertNotificationsStore()
+const { notifications } = storeToRefs(alertNotificationsStore)
+
+function onClose(index: number) {
+  alertNotificationsStore.removeNotification(index)
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      v-if="notifications.length"
+      class="lux-notifications fixed w-[500px] top-10 left-1/2 ml-[-250px] z-50"
+      data-cy="alertNotifications"
+    >
+      <Notification
+        v-for="(notification, index) in notifications"
+        :key="index"
+        :notification="notification"
+        @close="() => onClose(index)"
+      />
+    </div>
+  </Teleport>
+</template>

src/components/alert-notifications/notification-item.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { ShallowRef, shallowRef } from 'vue'
+import { AlertNotificationModel } from '@/stores/alert-notifications.store.model'
+
+defineEmits<{
+  (e: 'close'): void
+}>()
+
+const props = defineProps<{
+  notification: AlertNotificationModel
+}>()
+const show: ShallowRef<boolean> = shallowRef(true)
+
+function onEnter(el: Element, done: () => void) {
+  setTimeout(() => {
+    show.value = false
+  }, props.notification.duration)
+
+  done()
+}
+</script>
+
+<template>
+  <Transition
+    name="fade-out"
+    appear
+    leave-active-class="duration-200 ease-in"
+    leave-from-class="opacity-100"
+    leave-to-class="transform opacity-0"
+    @enter="onEnter"
+    @after-leave="$emit('close')"
+  >
+    <div
+      v-if="show"
+      class="lux-alert"
+      :class="`lux-${props.notification.type}`"
+      role="alert"
+    >
+      {{ props.notification.message }}
+    </div>
+  </Transition>
+</template>

src/components/background-selector/background-selector.vue

@@ -5,9 +5,11 @@ import { storeToRefs } from 'pinia'
 
 import { IBackgroundLayer } from '@/composables/background-layer/background-layer.model'
 import useBackgroundLayer from '@/composables/background-layer/background-layer.composable'
+
+import { useAlertNotificationsStore } from '@/stores/alert-notifications.store'
 import { useThemeStore } from '@/stores/config.store'
 import { useMapStore } from '@/stores/map.store'
-import { statePersistorBgLayerService } from '@/services/state-persistor/state-persistor-layer-background.service'
+
 import BackgroundSelectorItem from './background-selector-item.vue'
 import { bgConfigFixture } from '@/__fixtures__/background.config.fixture'
 import { ThemeNodeModel } from '@/composables/themes/themes.model'
@@ -18,8 +20,6 @@ const mapStore = useMapStore()
 const themeStore = useThemeStore()
 const { bgLayer: bgLayerContext } = storeToRefs(mapStore)
 
-statePersistorBgLayerService.bootstrap()
-
 const props = defineProps({
   isOpen: {
     type: Boolean,
@@ -43,7 +43,7 @@ watch(
         {
           id: bgl.id,
         },
-        bgLayersContext.find((l: ThemeNodeModel) => bgl.id == l.id),
+        bgLayersContext.find((l: ThemeNodeModel) => bgl.id === l.id),
         {
           name: bgl.icon_id,
         }
@@ -66,8 +66,7 @@ watch(
       backgroundLayer.setBgLayer(backgroundLayer.defaultSelectedBgId.value)
 
       if (bgLayerContext === null) {
-        // TODO: implement alert message
-        console.log(
+        useAlertNotificationsStore().addNotification(
           t(
             "Aucune couche n'étant définie pour cette carte, une couche de fond a automatiquement été ajoutée.",
             { ns: 'client' }

src/composables/background-layer/background-layer.composable.ts

@@ -1,7 +1,10 @@
 import { computed } from 'vue'
+import { storeToRefs } from 'pinia'
+
 import { bgConfigFixture } from '@/__fixtures__/background.config.fixture'
 
 import useLayers from '@/composables/layers/layers.composable'
+import { useAppStore } from '@/stores/app.store'
 import type { Layer } from '@/stores/map.store.model'
 import { useMapStore } from '@/stores/map.store'
 import { useThemeStore } from '@/stores/config.store'
@@ -12,16 +15,23 @@ import {
 import useThemes from '@/composables/themes/themes.composable'
 
 export default function useBackgroundLayer() {
+  const appStore = useAppStore()
+  const { mapId } = storeToRefs(appStore)
   const theme = useThemes()
   const mapStore = useMapStore()
   const layers = useLayers()
   const defaultSelectedBgId = computed(() => {
-    const theme_name = useThemeStore().theme?.name
-    if (theme_name) {
-      const defaultBgLayers = bgConfigFixture()
-        .bg_layer_theme_defaults as BgLayerDefaultsType
-      return defaultBgLayers[theme_name] || getDefaultSelectedId()
+    if (!mapId.value) {
+      const themeName = useThemeStore().theme?.name
+
+      if (themeName) {
+        const defaultBgLayers = bgConfigFixture()
+          .bg_layer_theme_defaults as BgLayerDefaultsType
+
+        return defaultBgLayers[themeName] || getDefaultSelectedId()
+      }
     }
+
     return getDefaultSelectedId()
   })