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

src/modules/drawing/components/DrawingExporter.vue

@@ -8,6 +8,8 @@ import { generateGpxString, generateKmlString } from '@/modules/drawing/lib/expo
 import DropdownButton, { DropdownItem } from '@/utils/components/DropdownButton.vue'
 import { generateFilename } from '@/utils/utils'
 
+const dispatcher = { dispatcher: 'DrawingExporter.vue' }
+
 const exportOptions = [new DropdownItem('kml', 'KML'), new DropdownItem('gpx', 'GPX')]
 
 const drawingLayer = inject('drawingLayer')
@@ -42,6 +44,10 @@ function exportDrawing() {
         type = 'application/vnd.google-earth.kml+xml;charset=UTF-8'
     }
     saveAs(new Blob([content], { type }), fileName)
+    store.dispatch('setIsDrawingExportedOrShared', {
+        exported: true,
+        ...dispatcher,
+    })
 }
 </script>
 

src/modules/drawing/components/DrawingToolbox.vue

@@ -15,6 +15,7 @@ import useSaveKmlOnChange from '@/modules/drawing/useKmlDataManagement.composabl
 import ModalWithBackdrop from '@/utils/components/ModalWithBackdrop.vue'
 import { useTippyTooltip } from '@/utils/composables/useTippyTooltip'
 import debounce from '@/utils/debounce'
+import WarningMessage from '@/utils/WarningMessage.class'
 
 const dispatcher = { dispatcher: 'DrawingToolbox.vue' }
 
@@ -33,6 +34,7 @@ const isDesktopMode = computed(() => store.getters.isDesktopMode)
 const isPhoneMode = computed(() => store.getters.isPhoneMode)
 const isDrawingEmpty = computed(() => store.getters.isDrawingEmpty)
 const currentDrawingMode = computed(() => store.state.drawing.mode)
+const isDrawingExportedOrShared = computed(() => store.getters.isDrawingExportedOrShared)
 const isDrawingLineOrMeasure = computed(() =>
     [EditableFeatureTypes.LINEPOLYGON, EditableFeatureTypes.MEASURE].includes(
         currentDrawingMode.value
@@ -89,6 +91,12 @@ watch(activeKmlLayer, () => {
 })
 
 function closeDrawing() {
+    if (!isDrawingExportedOrShared.value) {
+        store.dispatch('addWarnings', {
+            warnings: [new WarningMessage('drawing_not_exported_or_shared')],
+            ...dispatcher,
+        })
+    }
     emits('closeDrawing')
 }
 

src/modules/drawing/components/SharePopup.vue

@@ -6,6 +6,11 @@ import { createShortLink } from '@/api/shortlink.api'
 import router from '@/router'
 import { encodeLayerId } from '@/router/storeSync/layersParamParser'
 import log from '@/utils/logging'
+import { useStore } from 'vuex'
+
+const dispatcher = { dispatcher: 'SharePopup.vue' }
+
+const store = useStore()
 
 const props = defineProps({
     kmlLayer: {
@@ -87,6 +92,10 @@ async function updateShareUrl() {
             shareUrl.value = fileUrl.value
         }
     }
+    store.dispatch('setIsDrawingExportedOrShared', {
+        shared: true,
+        ...dispatcher,
+    })
 }
 async function updateAdminShareUrl() {
     if (adminUrl.value) {
@@ -97,6 +106,10 @@ async function updateAdminShareUrl() {
             adminShareUrl.value = adminUrl.value
         }
     }
+    store.dispatch('setIsDrawingExportedOrShared', {
+        shared: true,
+        ...dispatcher,
+    })
 }
 </script>
 

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

@@ -181,6 +181,7 @@ export default function useDrawingModeInteraction({
         feature.setStyle(featureStyleFunction)
         // see https://openlayers.org/en/latest/apidoc/module-ol_interaction_Draw-Draw.html#finishDrawing
         interaction.finishDrawing()
+        store.dispatch('setIsDrawingExportedOrShared', { exported: false, ...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_exported_or_shared": "Achtung, Ihre Zeichnung wurde nicht exportiert oder 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_exported_or_shared": "Attention, your drawing has not been exported or 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_exported_or_shared": "Attention, votre dessin n'a pas été exporté ou 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_exported_or_shared": "Attenzione, il disegno non è stato esportato o 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_exported_or_shared": "Attenziun, Voss dissegn nè ni vegnì exportà ni 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/store/modules/drawing.store.js

@@ -69,18 +69,40 @@ export default {
          * @type {String | null}
          */
         name: null,
+
+        /**
+         * Flag to indicate if the drawing is exported or shared
+         *
+         * @type {{ exported: boolean; shared: boolean }}
+         */
+        isDrawingExportedOrShared: { exported: true, shared: false },
     },
     getters: {
         isDrawingEmpty(state) {
             return state.featureIds.length === 0
         },
+        isDrawingExportedOrShared(state) {
+            return (
+                state.isDrawingExportedOrShared.exported || state.isDrawingExportedOrShared.shared
+            )
+        },
     },
     actions: {
         setDrawingMode({ commit }, { mode, dispatcher }) {
             if (mode in EditableFeatureTypes || mode === null) {
                 commit('setDrawingMode', { mode, dispatcher })
             }
         },
+        setIsDrawingExportedOrShared(
+            { commit, state },
+            { exported = null, shared = null, dispatcher }
+        ) {
+            commit('setIsDrawingExportedOrShared', {
+                exported: exported === null ? state.isDrawingExportedOrShared.exported : exported,
+                shared: shared === null ? state.isDrawingExportedOrShared.shared : shared,
+                dispatcher,
+            })
+        },
         async loadAvailableIconSets({ commit }, { dispatcher }) {
             const iconSets = await loadAllIconSetsFromBackend()
             if (iconSets?.length > 0) {
@@ -130,6 +152,10 @@ export default {
     },
     mutations: {
         setDrawingMode: (state, { mode }) => (state.mode = mode),
+        setIsDrawingExportedOrShared: (state, { exported, shared }) => {
+            state.isDrawingExportedOrShared.exported = exported
+            state.isDrawingExportedOrShared.shared = shared
+        },
         setIconSets: (state, { iconSets }) => (state.iconSets = iconSets),
         addDrawingFeature: (state, { featureId }) => state.featureIds.push(featureId),
         deleteDrawingFeature: (state, { featureId }) =>

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

@@ -1001,6 +1001,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')
@@ -1070,6 +1082,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'