Add support for timezones and custom formating to ModelTable

Wirecloud · Jun 15, 2019 · d140886 · d140886
1 parent 8f76878
commit d140886
Show file tree

Hide file tree

Showing 7 changed files with 50 additions and 99 deletions.
diff --git a/src/wirecloud/commons/static/js/StyledElements/ModelTable.js b/src/wirecloud/commons/static/js/StyledElements/ModelTable.js
@@ -121,7 +121,7 @@
                         if (!today) {
                             today = new Date();
                         }
-                        cellContent = formatDate.call(this, item, column.field, today, column.dateparser);
+                        cellContent = formatDate.call(this, item, column, today);
                     }
                 } else if (column.type === 'number') {
                     cellContent = getFieldValue(item, column.field);
@@ -475,42 +475,62 @@
         return currentNode;
     };
 
-    var formatDate = function formatDate(item, field, today, dateparser) {
-        var date, m, shortVersion, fullVersion, element, tooltip;
+    var renderDate = function renderDate(format, m) {
+        if (format === "relative") {
+            return m.fromNow();
+        } else if (format === "calendar") {
+            let timezone = m.format(" z");
+            return (m.calendar() + timezone).trim();
+        } else {
+            return m.format(format).trim();
+        }
+    };
 
-        date = getFieldValue(item, field);
+    var formatDate = function formatDate(item, column, today) {
+        var date, m, fullVersion, element, tooltip;
+
+        date = getFieldValue(item, column.field);
 
         // Convert the input to a Date object
-        if (typeof dateparser === 'function') {
-            date = dateparser(date);
+        if (typeof column.dateparser === 'function') {
+            date = column.dateparser(date);
         } else if (!(date instanceof Date)) {
             date = new Date(date);
         }
 
         m = moment(date);
-        shortVersion = m.fromNow(); // Relative date
-        fullVersion = m.format('LLLL'); // Complete date
+        if (column.timezone != null) {
+            m.tz(column.timezone);
+        }
+        const format = column.format != null ? column.format : "relative";
+        const tooltipFormat = column.tooltip != null ? column.tooltip : "LLLL z";
+        const shortVersion = renderDate(format, m);
 
         element = document.createElement('span');
         element.textContent = shortVersion;
-        tooltip = new this.Tooltip({
-            content: fullVersion,
-            placement: ['bottom', 'top', 'right', 'left']
-        });
-        tooltip.bind(element);
+        if (tooltipFormat !== "none") {
+            fullVersion = m.format(tooltipFormat);
+            tooltip = new this.Tooltip({
+                content: fullVersion,
+                placement: ['bottom', 'top', 'right', 'left']
+            });
+            tooltip.bind(element);
+        }
 
-        // Update the realite date
-        var timer = setInterval(function () {
-            // Clear timer if deleted.
-            if (!element.ownerDocument.body.contains(element)) {
-                clearInterval(timer);
-            }
+        if (format === "relative" || format === "calendar") {
+            // Update rendered date form time to time
+            var timer = setInterval(function () {
+                // Clear timer if deleted.
+                if (!element.ownerDocument.body.contains(element)) {
+                    clearInterval(timer);
+                }
 
-            var newTime = m.fromNow();
-            if (element.textContent !== newTime) {
-                element.textContent = newTime;
-            }
-        }, 1000);
+                const newTime = renderDate(format, m);
+                if (element.textContent !== newTime) {
+                    element.textContent = newTime;
+                }
+            }, 1000);
+        }
 
         return element;
     };

diff --git a/src/wirecloud/commons/static/js/lib/moment-timezone-with-data.min.js b/src/wirecloud/commons/static/js/lib/moment-timezone-with-data.min.js
diff --git a/src/wirecloud/commons/static/js/lib/moment-with-locales.min.js b/src/wirecloud/commons/static/js/lib/moment-with-locales.min.js
diff --git a/src/wirecloud/defaulttheme/templates/wirecloud/views/base.html b/src/wirecloud/defaulttheme/templates/wirecloud/views/base.html
@@ -72,6 +72,7 @@ <h4>{% trans "Your browser seems to lack some required features" %}</h4>
 
 {% compress js %}
 <script type="text/javascript" src="{% static "js/lib/moment-with-locales.min.js" %}"></script>
+<script type="text/javascript" src="{% static "js/lib/moment-timezone-with-data.min.js" %}"></script>
 <script type="text/javascript" src="{% static "js/lib/urlify.js" %}"></script>
 {% endcompress %}
 

diff --git a/src/wirecloud/defaulttheme/templates/wirecloud/views/base_plain.html b/src/wirecloud/defaulttheme/templates/wirecloud/views/base_plain.html
@@ -27,6 +27,7 @@
         <script type="text/javascript" src="{% url "wirecloud.javascript_translation_catalogue" %}?language={{ LANGUAGE_CODE }}&amp;v={{ WIRECLOUD_VERSION_HASH }}"></script>
         {% compress js %}
         <script type="text/javascript" src="{% static "js/lib/moment-with-locales.min.js" %}"></script>
+        <script type="text/javascript" src="{% static "js/lib/moment-timezone-with-data.min.js" %}"></script>
         {% wirecloud_bootstrap "classic" %}
         {% extra_javascripts "classic" %}
         {% endcompress %}

diff --git a/src/wirecloud/fiwarelabtheme/templates/wirecloud/views/base_plain.html b/src/wirecloud/fiwarelabtheme/templates/wirecloud/views/base_plain.html
@@ -27,6 +27,7 @@
         <script type="text/javascript" src="{% url "wirecloud.javascript_translation_catalogue" %}?language={{ LANGUAGE_CODE }}&amp;v={{ WIRECLOUD_VERSION_HASH }}"></script>
         {% compress js %}
         <script type="text/javascript" src="{% static "js/lib/moment-with-locales.min.js" %}"></script>
+        <script type="text/javascript" src="{% static "js/lib/moment-timezone-with-data.min.js" %}"></script>
         {% wirecloud_bootstrap "classic" %}
         {% extra_javascripts "classic" %}
         {% endcompress %}

diff --git a/src/wirecloud/fiwaretheme/templates/wirecloud/views/base_plain.html b/src/wirecloud/fiwaretheme/templates/wirecloud/views/base_plain.html
@@ -24,6 +24,7 @@
         <script type="text/javascript" src="{% url "wirecloud.javascript_translation_catalogue" %}?language={{ LANGUAGE_CODE }}&amp;v={{ WIRECLOUD_VERSION_HASH }}"></script>
         {% compress js %}
         <script type="text/javascript" src="{% static "js/lib/moment-with-locales.min.js" %}"></script>
+        <script type="text/javascript" src="{% static "js/lib/moment-timezone-with-data.min.js" %}"></script>
         {% wirecloud_bootstrap "classic" %}
         {% extra_javascripts "classic" %}
         {% endcompress %}