PB-580: add warning when leaving drawing mode without export or share

src/modules/drawing/components/SharePopup.vue

@@ -1,12 +1,17 @@
 <script setup>
 import { computed, onUnmounted, ref, toRefs, watch } from 'vue'
+import { useStore } from 'vuex'
 
 import KMLLayer from '@/api/layers/KMLLayer.class'
 import { createShortLink } from '@/api/shortlink.api'
 import router from '@/router'
 import { encodeLayerId } from '@/router/storeSync/layersParamParser'
 import log from '@/utils/logging'
 
+const dispatcher = { dispatcher: 'SharePopup.vue' }
+
+const store = useStore()
+
 const props = defineProps({
     kmlLayer: {
         type: KMLLayer,
@@ -60,6 +65,10 @@ async function copyShareUrl() {
     try {
         await navigator.clipboard.writeText(shareUrl.value)
         fileUrlCopied.value = true
+        store.dispatch('setIsDrawingShared', {
+            value: true,
+            ...dispatcher,
+        })
         fileTimeout = setTimeout(() => {
             fileUrlCopied.value = false
         }, 5000)
@@ -71,6 +80,10 @@ async function copyAdminShareUrl() {
     try {
         await navigator.clipboard.writeText(adminShareUrl.value)
         adminUrlCopied.value = true
+        store.dispatch('setIsDrawingShared', {
+            value: true,
+            ...dispatcher,
+        })
         adminTimeout = setTimeout(() => {
             adminUrlCopied.value = false
         }, 5000)
@@ -81,7 +94,7 @@ async function copyAdminShareUrl() {
 async function updateShareUrl() {
     if (fileUrl.value) {
         try {
-            shareUrl.value = await createShortLink(fileUrl.value)
+            shareUrl.value = await createShortLink(fileUrl.value, shareUrl.value)
         } catch (error) {
             // Fallback to normal url
             shareUrl.value = fileUrl.value

src/modules/drawing/components/useDrawingModeInteraction.composable.js

@@ -181,6 +181,7 @@ export default function useDrawingModeInteraction({
         feature.setStyle(geoadminStyleFunction)
         // see https://openlayers.org/en/latest/apidoc/module-ol_interaction_Draw-Draw.html#finishDrawing
         interaction.finishDrawing()
+        store.dispatch('setIsDrawingModified', { value: true, ...dispatcher })
         store.dispatch('addDrawingFeature', { featureId: feature.getId(), ...dispatcher })
         store.dispatch('setDrawingMode', { mode: null, ...dispatcher })
         if (drawEndCallback) {

src/modules/i18n/locales/de.json

@@ -171,6 +171,7 @@
     "draw_type_marker": "Linie / Fläche",
     "drawing_attached": "Zeichnung als Anhang hinzugefügt",
     "drawing_empty_cannot_edit_name": "Bitte fügen Sie der Zeichnung etwas hinzu, bevor Sie ihren Namen bearbeiten.",
+    "drawing_not_shared": "Achtung, Ihre Zeichnung wurde nicht geteilt.",
     "drawing_too_large": "Ihre Zeichnung ist zu gross, entfernen Sie einige Details.",
     "drop_invalid_url": "URL ist ungültig.",
     "drop_me_here": "Datei hier ablegen (KML, KMZ, GPX, COG)",

src/modules/i18n/locales/en.json

@@ -171,6 +171,7 @@
     "draw_type_marker": "Line / surface",
     "drawing_attached": "Drawing added as attachment",
     "drawing_empty_cannot_edit_name": "Please add something to the drawing before editing its name.",
+    "drawing_not_shared": "Attention, your drawing has not been shared.",
     "drawing_too_large": "Your drawing is too large, remove some features",
     "drop_invalid_url": "URL is not valid.",
     "drop_me_here": "Drop file here (KML, KMZ, GPX, COG)",

src/modules/i18n/locales/fr.json

@@ -171,6 +171,7 @@
     "draw_type_marker": "Trait / surface",
     "drawing_attached": "Dessin ajouté en pièce jointe",
     "drawing_empty_cannot_edit_name": "Veuillez ajouter quelque chose au dessin avant de modifier son nom.",
+    "drawing_not_shared": "Attention, votre dessin n'a pas été partagé.",
     "drawing_too_large": "Ton dessin est trop grand, enlève quelques éléments",
     "drop_invalid_url": "URL non valide.",
     "drop_me_here": "Déposer le fichier ici (KML, KMZ, GPX, COG)",

src/modules/i18n/locales/it.json

@@ -171,6 +171,7 @@
     "draw_type_marker": "Linea / superficie",
     "drawing_attached": "Disegno aggiunto come allegato",
     "drawing_empty_cannot_edit_name": "Aggiungere qualcosa al disegno prima di modificarne il nome.",
+    "drawing_not_shared": "Attenzione, il disegno non è stato condiviso.",
     "drawing_too_large": "Il suo disegno è troppo grande, rimuova alcuni elementi",
     "drop_invalid_url": "URL non valido",
     "drop_me_here": "Lasciare qui il file (KML, KMZ, GPX, COG)",

src/modules/i18n/locales/rm.json

@@ -171,6 +171,7 @@
     "draw_type_marker": "Lingia / surfatscha",
     "drawing_attached": "Dissegn è agiuntà sco agiunta.",
     "drawing_empty_cannot_edit_name": "Bitte fügen Sie der Zeichnung etwas hinzu, bevor Sie ihren Namen bearbeiten.",
+    "drawing_not_shared": "Attenziun, Voss dissegn nè ni vegnì dividì.",
     "drawing_too_large": "Tes dissegn è memia grond, stizza intgins detagls",
     "drop_invalid_url": "URL è nunvalid",
     "drop_me_here": "Dar giu la datoteca (KML, KMZ, GPX, COG)",

src/router/storeSync/LayerParamConfig.class.js

@@ -191,6 +191,13 @@ function dispatchLayersFromUrlIntoStore(to, store, urlParamValue) {
                             dispatcher: STORE_DISPATCHER_ROUTER_PLUGIN,
                         })
                     )
+
+                    promisesForAllDispatch.push(
+                        store.dispatch('setIsVisitWithAdminId', {
+                            value: true,
+                            dispatcher: STORE_DISPATCHER_ROUTER_PLUGIN,
+                        })
+                    )
                 }
                 log.debug(`  Add layer ${parsedLayer.id} to active layers`, layerObject)
             }

src/store/modules/drawing.store.js

@@ -90,18 +90,51 @@ export default {
          * @type {String | null}
          */
         editingMode: EditMode.OFF,
+
+        /**
+         * Flag to indicate if the drawing is exported or shared
+         *
+         * @type {{ exported: boolean; shared: boolean }}
+         */
+        isDrawingShared: false,
+
+        isDrawingModified: false,
+
+        isVisitWithAdminId: false,
     },
     getters: {
         isDrawingEmpty(state) {
             return state.featureIds.length === 0
         },
+
+        showWarningUnsharedDrawing(state) {
+            return !state.isVisitWithAdminId && !state.isDrawingShared && state.isDrawingModified
+        },
     },
     actions: {
         setDrawingMode({ commit }, { mode, dispatcher }) {
             if (mode in EditableFeatureTypes || mode === null) {
                 commit('setDrawingMode', { mode, dispatcher })
             }
         },
+        setIsDrawingShared({ commit, state }, { value = null, dispatcher }) {
+            commit('setIsDrawingShared', {
+                value: value === null ? state.isDrawingShared : value,
+                dispatcher,
+            })
+        },
+        setIsDrawingModified({ commit, state }, { value = null, dispatcher }) {
+            commit('setIsDrawingModified', {
+                value: value === null ? state.isDrawingModified : value,
+                dispatcher,
+            })
+        },
+        setIsVisitWithAdminId({ commit, state }, { value = null, dispatcher }) {
+            commit('setIsVisitWithAdminId', {
+                value: value === null ? state.isVisitWithAdminId : value,
+                dispatcher,
+            })
+        },
         async loadAvailableIconSets({ commit }, { dispatcher }) {
             const iconSets = await loadAllIconSetsFromBackend()
             if (iconSets?.length > 0) {
@@ -165,6 +198,9 @@ export default {
     },
     mutations: {
         setDrawingMode: (state, { mode }) => (state.mode = mode),
+        setIsDrawingShared: (state, { value }) => (state.isDrawingShared = value),
+        setIsDrawingModified: (state, { value }) => (state.isDrawingModified = value),
+        setIsVisitWithAdminId: (state, { value }) => (state.isVisitWithAdminId = value),
         setIconSets: (state, { iconSets }) => (state.iconSets = iconSets),
         addDrawingFeature: (state, { featureId }) => state.featureIds.push(featureId),
         deleteDrawingFeature: (state, { featureId }) =>

src/views/MapView.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, defineAsyncComponent, onMounted } from 'vue'
+import { computed, defineAsyncComponent, onMounted, onUnmounted } from 'vue'
 import { useStore } from 'vuex'
 
 import I18nModule from '@/modules/i18n/I18nModule.vue'
@@ -20,6 +20,9 @@ import AppVersion from '@/utils/components/AppVersion.vue'
 import DragDropOverlay from '@/utils/components/DragDropOverlay.vue'
 import LoadingBar from '@/utils/components/LoadingBar.vue'
 import log from '@/utils/logging'
+import WarningMessage from '@/utils/WarningMessage.class'
+
+const dispatcher = { dispatcher: 'MavView.vue' }
 
 const DrawingModule = defineAsyncComponent(() => import('@/modules/drawing/DrawingModule.vue'))
 
@@ -31,7 +34,7 @@ const activeKmlLayer = computed(() => store.getters.activeKmlLayer)
 const isPhoneMode = computed(() => store.state.ui.mode === UIModes.PHONE)
 const showLoadingBar = computed(() => store.getters.showLoadingBar)
 const showDragAndDropOverlay = computed(() => store.state.ui.showDragAndDropOverlay)
-
+const showWarningUnsharedDrawing = computed(() => store.getters.showWarningUnsharedDrawing)
 const loadDrawingModule = computed(() => {
     return (
         (!activeKmlLayer.value || activeKmlLayer.value?.kmlData) &&
@@ -42,6 +45,23 @@ const loadDrawingModule = computed(() => {
 
 onMounted(() => {
     log.info(`Map view mounted`)
+    window.addEventListener('beforeunload', beforeUnloadHandler)
+})
+
+const beforeUnloadHandler = (event) => {
+    if (showWarningUnsharedDrawing.value) {
+        store.dispatch('addWarnings', {
+            warnings: [new WarningMessage('drawing_not_shared')],
+            ...dispatcher,
+        })
+        event.returnValue = true
+        event.preventDefault()
+        return
+    }
+}
+
+onUnmounted(() => {
+    window.removeEventListener('beforeunload', beforeUnloadHandler)
 })
 </script>
 

tests/cypress/tests-e2e/drawing.cy.js

@@ -1058,6 +1058,18 @@ describe('Drawing module tests', () => {
             })
             // close the drawing mode to close the popover else it is not possible to close it since the drawing header is overlapping the popover
             cy.closeDrawingMode()
+            cy.closeMenuIfMobile()
+
+            cy.log(
+                'Check that the warning window is displayed when closing the drawing module without exporting or sharing'
+            )
+            cy.get('[data-cy="warning-window-body"]').contains(
+                'Attention, your drawing has not been exported or shared.'
+            )
+            cy.get('[data-cy="warning-window-close"]').click({ force: true }) // force is needed because the warning window is covered by the Testsite banner
+
+            cy.openMenuIfMobile()
+
             cy.get('[data-cy="menu-tray-drawing-section"]').should('be.visible').click()
             // it changes the name of the KML file
             cy.log('Check that the KML file can be renamed')
@@ -1127,6 +1139,13 @@ describe('Drawing module tests', () => {
             })
 
             cy.task('clearFolder', downloadsFolder)
+            cy.closeDrawingMode()
+            cy.closeMenuIfMobile()
+
+            cy.log(
+                'Check that the warning window is not displayed when closing the drawing module when the drawing got exported or shared'
+            )
+            cy.get('[data-cy="warning-window-body"]').should('not.exist')
         })
         it('generates short links when sharing a drawing', () => {
             const publicShortlink = 'https://s.geo.admin.ch/public-shortlink'