feat: display map's "created at" and "modified at" in the caption (#2424

)

fix #2110 


![image](https://github.com/user-attachments/assets/a7db6197-4cc6-417e-b480-8e1434d73687)

umap/static/umap/js/modules/caption.js

@@ -3,13 +3,14 @@ import * as Utils from './utils.js'
 
 const TEMPLATE = `
 <div class="umap-caption">
-  <hgroup>
-    <h3>
-      <i class="icon icon-16 icon-caption icon-block"></i>
-      <span class="map-name" data-ref="name"></span>
-    </h3>
-    <h4 data-ref="author"></h4>
-  </hgroup>
+  <div class="header">
+    <i class="icon icon-16 icon-caption icon-block"></i>
+    <hgroup>
+      <h3><span class="map-name" data-ref="name"></span></h3>
+      <h4 data-ref="author"></h4>
+      <h5 class="dates" data-ref="dates"></h5>
+    </hgroup>
+  </div>
   <div class="umap-map-description text" data-ref="description"></div>
   <div class="datalayer-container" data-ref="datalayersContainer"></div>
   <div class="credits-container">
@@ -65,6 +66,17 @@ export default class Caption extends Utils.WithTemplate {
       // Create the legend when the panel is actually on the DOM
       this._umap.eachDataLayerReverse((datalayer) => datalayer.renderLegend())
     })
+    if (this._umap.properties.created_at) {
+      const created_at = translate('Created at {date}', {
+        date: new Date(this._umap.properties.created_at).toLocaleDateString(),
+      })
+      const modified_at = translate('Modified at {date}', {
+        date: new Date(this._umap.properties.modified_at).toLocaleDateString(),
+      })
+      this.elements.dates.innerHTML = `${created_at} - ${modified_at}`
+    } else {
+      this.elements.dates.hidden = true
+    }
   }
 
   addDataLayer(datalayer, parent) {

umap/static/umap/map.css

@@ -694,8 +694,14 @@ a.umap-control-caption,
 .datalayer-name {
     cursor: pointer;
 }
-.umap-caption .umap-map-author {
-    padding-inline-start: 31px;
+.umap-caption .dates {
+    color: var(--color-mediumGray);
+}
+.umap-caption .header {
+    display: flex;
+}
+.umap-caption .header i.icon {
+    flex-shrink: 0;
 }
 .umap-browser .main-toolbox {
     padding-left: 4px; /* Align with toolbox below  */

umap/tests/integration/test_caption.py

@@ -25,6 +25,7 @@ def test_caption(live_server, page, map):
         panel.locator(".caption-item .off").get_by_text(non_loaded.name)
     ).to_be_visible()
     expect(panel.locator(".caption-item").get_by_text(hidden.name)).to_be_hidden()
+    expect(panel.get_by_text("Created at")).to_be_visible()
 
 
 def test_caption_should_display_owner_as_author(live_server, page, map):

umap/views.py

@@ -614,6 +614,13 @@ def get_map_properties(self):
             "defaultLabelKeys": settings.UMAP_LABEL_KEYS,
         }
         created = bool(getattr(self, "object", None))
+        if created:
+            properties.update(
+                {
+                    "created_at": self.object.created_at,
+                    "modified_at": self.object.modified_at,
+                }
+            )
         if (created and self.object.owner) or (not created and not user.is_anonymous):
             edit_statuses = Map.EDIT_STATUS
             datalayer_statuses = DataLayer.EDIT_STATUS