feat: add a back button to importers dialog (#2364)

![image](https://github.com/user-attachments/assets/99445f06-f48f-4b0b-88f6-f696e067416d)

umap/static/umap/js/modules/importer.js

@@ -64,7 +64,10 @@ export default class Importer extends Utils.WithTemplate {
     this.TYPES = ['geojson', 'csv', 'gpx', 'kml', 'osm', 'georss', 'umap']
     this.IMPORTERS = []
     this.loadImporters()
-    this.dialog = new Dialog({ className: 'importers dark' })
+    this.dialog = new Dialog({
+      className: 'importers dark',
+      back: () => this.showImporters(),
+    })
   }
 
   loadImporters() {
@@ -172,7 +175,7 @@ export default class Importer extends Utils.WithTemplate {
       button.addEventListener('click', () => plugin.open(this))
       grid.appendChild(button)
     }
-    this.dialog.open({ template: element, cancel: false, accept: false })
+    this.dialog.open({ template: element, cancel: false, accept: false, back: false })
   }
 
   build() {

umap/static/umap/js/modules/ui/dialog.js

@@ -6,6 +6,7 @@ const TEMPLATE = `
     <form method="dialog" data-ref="form">
       <ul class="buttons">
         <li><i class="icon icon-16 icon-close" data-close></i></li>
+        <li hidden data-ref="back"><i class="icon icon-16 icon-back"></i></li>
       </ul>
       <h3 data-ref="message" id="${Math.round(Date.now()).toString(36)}"></h3>
       <fieldset data-ref="fieldset" role="document">
@@ -123,6 +124,10 @@ export default class Dialog extends WithTemplate {
     } else {
       this.elements.template.innerHTML = dialog.template || ''
     }
+    this.elements.back.hidden = !dialog.back
+    if (dialog.back) {
+      this.elements.back.addEventListener('click', dialog.back)
+    }
 
     this.focusable = this.getFocusable()
     this.hasFormData = this.elements.fieldset.elements.length > 0