From e7fe92c070e9f70fe4110e4f0d922d134d6f5804 Mon Sep 17 00:00:00 2001
From: Yohan Boniface <yohanboniface@free.fr>
Date: Fri, 10 Jan 2025 15:49:05 +0100
Subject: [PATCH] feat: display map's "created at" and "modified at" in the
 caption

---
 umap/static/umap/js/modules/caption.js | 26 +++++++++++++++++++-------
 umap/static/umap/map.css               | 10 ++++++++--
 umap/tests/integration/test_caption.py |  1 +
 umap/views.py                          |  7 +++++++
 4 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/umap/static/umap/js/modules/caption.js b/umap/static/umap/js/modules/caption.js
index 7e316945a..e44c2e509 100644
--- a/umap/static/umap/js/modules/caption.js
+++ b/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) {
diff --git a/umap/static/umap/map.css b/umap/static/umap/map.css
index 156dd791f..838faa330 100644
--- a/umap/static/umap/map.css
+++ b/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  */
diff --git a/umap/tests/integration/test_caption.py b/umap/tests/integration/test_caption.py
index 8e3785848..f6896647d 100644
--- a/umap/tests/integration/test_caption.py
+++ b/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):
diff --git a/umap/views.py b/umap/views.py
index 08de5a7a3..227875567 100644
--- a/umap/views.py
+++ b/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