PB 1151: add warning message kml import partially out of bounds

src/modules/i18n/locales/de.json

@@ -249,6 +249,7 @@
     "feedback_unsupported_format": "Dieser Dateityp wird leider nicht unterstützt. Bitte verwenden Sie eine .pdf, .zip, .jpg, .jpeg, .kml, .kmz oder .gpx Datei.",
     "field_required": "Dieses Feld ist erforderlich",
     "file_imported_success": "Datei erfolgreich importiert",
+    "file_imported_partially_out_of_bounds": "Die importierte Datei liegt teilweise innerhalb der Schweizer Grenzen. Einige Funktionalitäten stehen möglicherweise nicht zur Verfügung.",
     "file_is_not_kml": "Dieses File ist keine KML Datei. ",
     "file_name": "Zeichnungsname",
     "file_too_large": "Die Datei ist zu gross (maximal erlaubte Grösse: {maxFileSize}).",

src/modules/i18n/locales/en.json

@@ -249,6 +249,7 @@
     "feedback_unsupported_format": "This file format is not supported. Thanks for using another format for you attachment.",
     "field_required": "This field is required",
     "file_imported_success": "File successfully imported",
+    "file_imported_partially_out_of_bounds": "The imported file is partially within the swiss boundaries. Some functionalities might not be available.",
     "file_is_not_kml": "The file is not a KML file.",
     "file_name": "Drawing name",
     "file_too_large": "The file is too large (max size allowed {maxFileSize}).",

src/modules/i18n/locales/fr.json

@@ -249,6 +249,7 @@
     "feedback_unsupported_format": "Le format du fichier n’est pas pris en charge, merci d’utiliser un autre format pour votre pièce jointe.",
     "field_required": "Ce champ est requis",
     "file_imported_success": "Fichier importé avec succès",
+    "file_imported_partially_out_of_bounds": "Le fichier importé se trouve partiellement à l'intérieur des frontières suisses. Certaines fonctionnalités peuvent ne pas être disponibles.",
     "file_is_not_kml": "Ce fichier n'est pas un fichier KML.",
     "file_name": "Nom du dessin",
     "file_too_large": "Ce fichier est trop volumineux (taille maximale autorisée : {maxFileSize})",

src/modules/i18n/locales/it.json

@@ -249,6 +249,7 @@
     "feedback_unsupported_format": "Il formato del file selezionato non è supportato dal sistema, per favore utilizzare un altro formato per il vostro allegato.",
     "field_required": "Questo campo è obbligatorio",
     "file_imported_success": "File importato con successo",
+    "file_imported_partially_out_of_bounds": "Il file importato si trova parzialmente all'interno dei confini svizzeri. Alcune funzionalità potrebbero non essere disponibili.",
     "file_is_not_kml": "Questo file non è un file KML.",
     "file_name": "Nome del disegno",
     "file_too_large": "Il file é troppo grande  (dimensione massima consentita: {maxFileSize})",

src/modules/i18n/locales/rm.json

@@ -247,6 +247,7 @@
     "feedback_unsupported_format": "Tip da datoteca betg supportà. Duvrai empè da quai pdf, .zip, .jpg, .jpeg, .kml, .kmz u .gpx",
     "field_required": "Quest champ è obligatoric",
     "file_imported_success": "Datoteca importada cun success",
+    "file_imported_partially_out_of_bounds": "Il dossier importà na sa chatta betg cumplettamain entaifer ils cunfins svizzers. Tschertas funcziuns na fissan forsa betg disponiblas.",
     "file_is_not_kml": "Questa datoteca nun è ina datoteca KML",
     "file_name": "Zeichnungsname",
     "file_too_large": "Questa datoteca è memia grond (grondezza maximala lubida: {maxFileSize})",

src/modules/menu/components/advancedTools/ImportFile/ImportFileLocalTab.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { computed, ref, toRefs } from 'vue'
+import { useStore } from 'vuex'
 
 import ImportFileButtons from '@/modules/menu/components/advancedTools/ImportFile/ImportFileButtons.vue'
 import generateErrorMessageFromErrorType from '@/modules/menu/components/advancedTools/ImportFile/parser/errors/generateErrorMessageFromErrorType.utils'
@@ -26,9 +27,12 @@ const errorFileLoadingMessage = ref(null)
 const isFormValid = ref(false)
 const activateValidation = ref(false)
 const importSuccessMessage = ref('')
-
+const warningSuccessMessage = ref(null)
+const store = useStore()
 const buttonState = computed(() => (loadingFile.value ? 'loading' : 'default'))
-
+const layerNotFullyWithinBounds = computed(
+    () => store.state.ui.lastImportedLayerIsPartiallyOutOfBounds
+)
 // Methods
 async function loadFile() {
     importSuccessMessage.value = ''
@@ -39,7 +43,12 @@ async function loadFile() {
     if (isFormValid.value && selectedFile.value) {
         try {
             await handleFileSource(selectedFile.value, false)
-            importSuccessMessage.value = 'file_imported_success'
+            importSuccessMessage.value = layerNotFullyWithinBounds.value
+                ? ''
+                : 'file_imported_success'
+            warningSuccessMessage.value = layerNotFullyWithinBounds.value
+                ? 'file_imported_partially_out_of_bounds'
+                : ''
         } catch (error) {
             errorFileLoadingMessage.value = generateErrorMessageFromErrorType(error)
             log.error(`Failed to load file`, error)
@@ -76,6 +85,7 @@ function validateForm(valid) {
             :invalid-message="errorFileLoadingMessage?.msg"
             :invalid-message-extra-params="errorFileLoadingMessage?.params"
             :valid-message="importSuccessMessage"
+            :warning-message="warningSuccessMessage"
             @validate="validateForm"
         />
         <ImportFileButtons class="mt-2" :button-state="buttonState" @load-file="loadFile" />

src/modules/menu/components/advancedTools/ImportFile/ImportFileOnlineTab.vue

@@ -26,12 +26,15 @@ const loading = ref(false)
 const fileUrlInput = ref(null)
 const fileUrl = ref('')
 const importSuccessMessage = ref('')
+const warningSuccessMessage = ref('')
 /** @type {Ref<ErrorMessage | null>} */
 const errorFileLoadingMessage = ref(null)
 const isFormValid = ref(false)
 const activateValidation = ref(false)
-
 const buttonState = computed(() => (loading.value ? 'loading' : 'default'))
+const layerNotFullyWithinBounds = computed(
+    () => store.state.ui.lastImportedLayerIsPartiallyOutOfBounds
+)
 
 watch(active, (value) => {
     if (value) {
@@ -67,10 +70,12 @@ function onUrlValidate(valid) {
 function onUrlChange() {
     errorFileLoadingMessage.value = null
     importSuccessMessage.value = ''
+    warningSuccessMessage.value = ''
 }
 
 async function loadFile() {
     importSuccessMessage.value = ''
+    warningSuccessMessage.value = ''
     errorFileLoadingMessage.value = null
     if (!validateForm()) {
         return
@@ -85,7 +90,10 @@ async function loadFile() {
                 dispatcher: 'Import File Online Tab',
             })
         }
-        importSuccessMessage.value = 'file_imported_success'
+        warningSuccessMessage.value = layerNotFullyWithinBounds.value
+            ? 'file_imported_partially_out_of_bounds'
+            : ''
+        importSuccessMessage.value = layerNotFullyWithinBounds.value ? '' : 'file_imported_success'
         setTimeout(() => (buttonState.value = 'default'), 3000)
     } catch (error) {
         log.error(`Failed to load file from url ${fileUrl.value}`, error)
@@ -122,6 +130,7 @@ async function loadFile() {
                 :invalid-message-params="errorFileLoadingMessage?.params"
                 :valid-message="importSuccessMessage"
                 :validate="validateUrl"
+                :warning-message="warningSuccessMessage"
                 data-cy="import-file-online-url"
                 @validate="onUrlValidate"
                 @change="onUrlChange"

src/modules/menu/components/advancedTools/ImportFile/useImportFile.composable.js

@@ -30,13 +30,32 @@ export default function useImportFile() {
         })
         try {
             const layer = await parseLayerFromFile(source, projection.value)
+
             // checking that the same layer is not already present before adding it
             if (store.getters.getActiveLayersById(layer.id).length === 0) {
                 await store.dispatch('addLayer', {
                     layer,
                     zoomToLayerExtent: true,
                     ...dispatcher,
                 })
+                const extent =
+                    layer.extent.length === 4
+                        ? layer.extent
+                        : [...layer.extent[0], ...layer.extent[1]]
+                const lastImportedLayerIsPartiallyOutOfBounds =
+                    projection.value.bounds.lowerX > extent[0] ||
+                    projection.value.bounds.lowerX > extent[2] ||
+                    projection.value.bounds.upperX < extent[0] ||
+                    projection.value.bounds.upperX < extent[2] ||
+                    projection.value.bounds.lowerY > extent[1] ||
+                    projection.value.bounds.lowerY > extent[3] ||
+                    projection.value.bounds.upperY < extent[1] ||
+                    projection.value.bounds.upperY < extent[3]
+
+                await store.dispatch('setLastImportedLayerIsPartiallyOutOfBounds', {
+                    lastImportedLayerIsPartiallyOutOfBounds,
+                    ...dispatcher,
+                })
             }
         } catch (error) {
             if (!sendErrorToStore) {

src/store/modules/ui.store.js

@@ -175,6 +175,14 @@ export default {
          * @type Boolean
          */
         showDragAndDropOverlay: false,
+
+        /**
+         * Flag telling if the last imported layer is partially out of bounds. It will be used for
+         * the message and CSS of the import file popup
+         *
+         * @type Boolean
+         */
+        lastImportedLayerIsPartiallyOutOfBounds: false,
     },
     getters: {
         showLoadingBar(state) {
@@ -451,6 +459,15 @@ export default {
         setShowDragAndDropOverlay({ commit }, { showDragAndDropOverlay, dispatcher }) {
             commit('setShowDragAndDropOverlay', { showDragAndDropOverlay, dispatcher })
         },
+        setLastImportedLayerIsPartiallyOutOfBounds(
+            { commit },
+            { lastImportedLayerIsPartiallyOutOfBounds, dispatcher }
+        ) {
+            commit('setLastImportedLayerIsPartiallyOutOfBounds', {
+                lastImportedLayerIsPartiallyOutOfBounds,
+                dispatcher,
+            })
+        },
     },
     mutations: {
         setSize(state, { height, width }) {
@@ -520,5 +537,11 @@ export default {
         removeWarning: (state, { warning }) => state.warnings.delete(warning),
         setShowDragAndDropOverlay: (state, { showDragAndDropOverlay }) =>
             (state.showDragAndDropOverlay = showDragAndDropOverlay),
+        setLastImportedLayerIsPartiallyOutOfBounds: (
+            state,
+            { lastImportedLayerIsPartiallyOutOfBounds }
+        ) =>
+            (state.lastImportedLayerIsPartiallyOutOfBounds =
+                lastImportedLayerIsPartiallyOutOfBounds),
     },
 }

src/utils/components/FileInput.vue

@@ -122,6 +122,14 @@ const props = defineProps({
         type: String,
         default: '',
     },
+    /**
+     * Message displayed when the imported file is valid, but has some issues that we should notify
+     * the user. Most common issue is when we have a layer which is partially out of bound
+     */
+    warningMessage: {
+        type: String,
+        default: '',
+    },
     /**
      * Mark the field as invalid
      *
@@ -290,6 +298,13 @@ function onFileSelected(evt) {
             <div v-if="validMessage" class="valid-feedback" data-cy="file-input-valid-feedback">
                 {{ i18n.t(validMessage) }}
             </div>
+            <div
+                v-if="warningMessage"
+                class="warning-feedback"
+                data-cy="file-input-warning-feedback"
+            >
+                {{ i18n.t(warningMessage) }}
+            </div>
         </div>
         <div v-if="description" class="form-text" data-cy="file-input-description">
             {{ i18n.t(description) }}
@@ -303,4 +318,12 @@ function onFileSelected(evt) {
 .local-file-input {
     cursor: pointer;
 }
+
+.warning-feedback {
+    display: block;
+    width: 100%;
+    margin-top: 0.25rem;
+    font-size: 0.875em;
+    color: $warning;
+}
 </style>

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

@@ -144,9 +144,11 @@ describe('The Import File Tool', () => {
         cy.get('[data-cy="file-input-text"]')
             .should('have.class', 'is-valid')
             .should('not.have.class', 'is-invalid')
-        cy.get('[data-cy="file-input-valid-feedback"]')
+        cy.get('[data-cy="file-input-warning-feedback"]')
             .should('be.visible')
-            .contains('File successfully imported')
+            .contains(
+                'The imported file is partially within the swiss boundaries. Some functionalities might not be available.'
+            )
         cy.get('[data-cy="import-file-load-button"]').should('be.visible').contains('Import')
         cy.get('[data-cy="import-file-online-content"]').should('not.be.visible')
         cy.readStoreValue('state.layers.activeLayers').should('have.length', 4)