PB-901: Modify name of KML file

src/api/files.api.js

@@ -120,6 +120,7 @@ export const getKmlUrl = (id) => {
  * @returns {Promise<KmlMetadata>}
  */
 export const createKml = (kml) => {
+    console.log('createKml', kml)
     return new Promise((resolve, reject) => {
         const form = buildKmlForm(kml)
         form.append('author', 'web-mapviewer')
@@ -156,6 +157,7 @@ export const createKml = (kml) => {
  * @returns {Promise<KmlMetadata>}
  */
 export const updateKml = (id, adminId, kml) => {
+    console.log('updateKml name', kml)
     return new Promise((resolve, reject) => {
         validateId(id, reject)
         validateAdminId(adminId, reject)
@@ -230,6 +232,7 @@ export const getKmlFromUrl = (url) => {
  * @returns {Promise<KmlMetadata>} KML metadata
  */
 export const getKmlMetadataByAdminId = (adminId) => {
+    console.log('getKmlMetadataByAdminId', adminId)
     return new Promise((resolve, reject) => {
         validateAdminId(adminId, reject)
         axios

src/modules/drawing/components/DrawingToolbox.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { computed, inject, ref } from 'vue'
+import { computed, inject, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useStore } from 'vuex'
 
@@ -17,7 +17,6 @@ import DrawingHeader from './DrawingHeader.vue'
 const dispatcher = { dispatcher: 'DrawingToolbox.vue' }
 
 const drawingLayer = inject('drawingLayer')
-
 const { saveState, debounceSaveDrawing } = useSaveKmlOnChange()
 const i18n = useI18n()
 const store = useStore()
@@ -38,6 +37,16 @@ const isDrawingLineOrMeasure = computed(() =>
     )
 )
 const activeKmlLayer = computed(() => store.getters.activeKmlLayer)
+const activeKmlLayerIndex = computed(() =>
+    store.getters.getIndexOfActiveLayerById(activeKmlLayer.value.id)
+)
+const activeKmlLayerName = ref(activeKmlLayer.value?.name)
+const isActiveLayerNameEditMode = ref(false)
+
+// This is necessary to update the layer name in case the sanitized name is different
+watch(activeKmlLayer, () => {
+    activeKmlLayerName.value = activeKmlLayer.value?.name
+})
 
 const isDrawingStateError = computed(() => saveState.value < 0)
 /** Return a different translation key depending on the saving status */
@@ -67,6 +76,18 @@ function onCloseClearConfirmation(confirmed) {
         store.dispatch('setDrawingMode', { mode: null, ...dispatcher })
     }
 }
+
+async function onSaveName() {
+    isActiveLayerNameEditMode.value = !isActiveLayerNameEditMode.value
+    if (activeKmlLayerName.value === activeKmlLayer.value.name) return
+    store.dispatch('updateLayer', {
+        index: activeKmlLayerIndex.value,
+        layer: { ...activeKmlLayer.value, name: activeKmlLayerName.value },
+        ...dispatcher,
+    })
+    await debounceSaveDrawing()
+}
+
 function closeDrawing() {
     emits('closeDrawing')
 }
@@ -87,6 +108,41 @@ function onDeleteLastPoint() {
                 class="card text-center drawing-toolbox-content shadow-lg rounded-bottom rounded-top-0 rounded-start-0"
                 :class="{ 'rounded-bottom-0': isPhoneMode }"
             >
+                <div
+                    class="d-flex justify-content-center align-items-center gap-2 p-4"
+                    v-if="activeKmlLayer"
+                >
+                    <label for="activeKmlLayerName" class="mr-3">
+                        {{ i18n.t('file_name') }}
+                    </label>
+                    <div class="input-group">
+                        <input
+                            id="activeKmlLayerName"
+                            v-model="activeKmlLayerName"
+                            type="string"
+                            class="form-control"
+                            :disabled="!isActiveLayerNameEditMode"
+                            :placeholder="`${i18n.t('draw_layer_label')}`"
+                        />
+                        <button
+                            v-if="!isActiveLayerNameEditMode"
+                            class="btn btn-outline-secondary"
+                            type="button"
+                            @click="isActiveLayerNameEditMode = !isActiveLayerNameEditMode"
+                        >
+                            {{ i18n.t('edit_button') }}
+                        </button>
+                        <button
+                            v-else
+                            class="btn btn-outline-secondary"
+                            type="button"
+                            @click="onSaveName"
+                        >
+                            {{ i18n.t('save_button') }}
+                        </button>
+                    </div>
+                </div>
+
                 <div class="card-body position-relative container">
                     <div
                         class="row justify-content-start g-2"

src/modules/drawing/lib/export-utils.js

@@ -4,6 +4,7 @@ import { LineString, Polygon } from 'ol/geom'
 import { Circle, Icon } from 'ol/style'
 import Style from 'ol/style/Style'
 
+import DOMPurify from 'dompurify'
 import i18n from '@/modules/i18n/index'
 import { WGS84 } from '@/utils/coordinates/coordinateSystems'
 import { featureStyleFunction } from '@/utils/featureStyleUtils'
@@ -74,14 +75,15 @@ export function generateGpxString(projection, features = []) {
  * @param features {Feature[]} Features (OpenLayers) to be converted to KML format
  * @returns {string}
  */
-export function generateKmlString(projection, features = []) {
+export function generateKmlString(projection, features = [], fileName) {
     log.debug(`Generate KML for ${features.length} features`)
     if (!projection) {
         log.error('Cannot generate KML string without projection')
         return ''
     }
     let kmlString = EMPTY_KML_DATA
     let exportFeatures = []
+    console.log('features', features)
     features.forEach((f) => {
         const clone = f.clone()
         clone.setId(f.getId())
@@ -131,10 +133,10 @@ export function generateKmlString(projection, features = []) {
 
         // Remove empty placemark added to have <Document> tag
         kmlString = kmlString.replace(/<Placemark\/>/g, '')
-
+        const clean = DOMPurify.sanitize(fileName, {USE_PROFILES: { xml: true }})
         kmlString = kmlString.replace(
             /<Document>/,
-            `<Document><name>${i18n.global.t('draw_layer_label')}</name>`
+            `<Document><name>${clean ? clean : i18n.global.t('draw_layer_label')}</name>`
         )
     }
     return kmlString

src/modules/drawing/useKmlDataManagement.composable.js

@@ -84,7 +84,8 @@ export default function useSaveKmlOnChange(drawingLayerDirectReference) {
             saveState.value = DrawingState.SAVING
             const kmlData = generateKmlString(
                 projection.value,
-                drawingLayer.getSource().getFeatures()
+                drawingLayer.getSource().getFeatures(),
+                activeKmlLayer.value?.name
             )
             if (online.value) {
                 await saveOnlineDrawing(kmlData)
@@ -106,6 +107,7 @@ export default function useSaveKmlOnChange(drawingLayerDirectReference) {
         if (!activeKmlLayer.value?.adminId) {
             // creation of the new KML (copy or new)
             const kmlMetadata = await createKml(kmlData)
+            console.log('kmlMetadata', kmlMetadata)
             const kmlLayer = new KMLLayer({
                 kmlFileUrl: getKmlUrl(kmlMetadata.id),
                 visible: true,
@@ -114,9 +116,11 @@ export default function useSaveKmlOnChange(drawingLayerDirectReference) {
                 kmlData: kmlData,
                 kmlMetadata: kmlMetadata,
             })
+            console.log('kmlLayer', kmlLayer)
             // If there's already an activeKmlLayer, but without adminId, it means we are copying it and editing it.
             // Meaning we must remove the old one from the layers; it will otherwise be there twice
             // (once the pristine "old" KML, and once the new copy)
+            console.log('create activeKmlLayer', activeKmlLayer.value)
             if (activeKmlLayer.value) {
                 await store.dispatch('removeLayer', {
                     layerId: activeKmlLayer.value.id,
@@ -128,6 +132,8 @@ export default function useSaveKmlOnChange(drawingLayerDirectReference) {
                 ...dispatcher,
             })
         } else {
+            console.log('update activeKmlLayer', activeKmlLayer.value)
+
             // if a KMLLayer is already defined, we update it
             const kmlMetadata = await updateKml(
                 activeKmlLayer.value.fileId,
@@ -150,6 +156,7 @@ export default function useSaveKmlOnChange(drawingLayerDirectReference) {
             opacity: 1,
             kmlData: kmlData,
         })
+        console.log('kmlLayer', kmlLayer)
         if (!temporaryKml.value) {
             await store.dispatch('addSystemLayer', { layer: kmlLayer, ...dispatcher })
         } else {

src/store/modules/layers.store.js

@@ -144,6 +144,11 @@ const getters = {
             (layer) => layer.visible && layer.type === LayerTypes.KML && !layer.isExternal
         ) ?? null,
 
+    getIndexOfActiveLayerById: (state) => (layerId) =>
+        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
      * background layer).
@@ -395,6 +400,7 @@ const actions = {
      * @param {string} dispatcher Action dispatcher name
      */
     updateLayer({ commit, getters }, { index, layer, dispatcher }) {
+        console.log('updateLayer', index, layer.name)
         if (layer instanceof AbstractLayer) {
             commit('updateLayer', { index, layer, dispatcher })
         } else {
@@ -411,7 +417,7 @@ const actions = {
 
             const updatedLayer = layer2Update.clone()
             Object.entries(layer).forEach((entry) => (updatedLayer[entry[0]] = entry[1]))
-
+            console.log('updatedLayer', updatedLayer)
             commit('updateLayer', { index, layer: updatedLayer, dispatcher })
         }
     },