ENH: New datetime customization function.

CHANGELOG.md

@@ -10,6 +10,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 * `caosdb-v-property-linkified` css class to denote properties that have been
   linkified already.
+* `caosdb-f-property-datetime-value` css class for special handling of datetime properties.  Also
+  there is now very basic customization (via variable `BUILD_MODULE_EXT_COSMETICS_CUSTOMDATETIME`)
+  for how datetime values can be displayed, which comes along with the new css classes
+  `caosdb-v-property-datetime-customized` and `caosdb-v-property-datetime-customized-newvalue`.
 
 ### Changed (for changes in existing functionality)
 

build.properties.d/00_default.properties

@@ -52,6 +52,7 @@ BUILD_MODULE_EXT_BOOKMARKS=ENABLED
 BUILD_MODULE_EXT_ADD_QUERY_TO_BOOKMARKS=DISABLED
 BUILD_MODULE_EXT_ANNOTATION=ENABLED
 BUILD_MODULE_EXT_COSMETICS_LINKIFY=DISABLED
+BUILD_MODULE_EXT_COSMETICS_CUSTOMDATETIME=DISABLED
 BUILD_MODULE_EXT_QRCODE=ENABLED
 BUILD_MODULE_SHOW_ID_IN_LABEL=DISABLED
 

src/core/js/ext_cosmetics.js

@@ -4,6 +4,7 @@
  * Copyright (C) 2021-2023 IndiScale GmbH <info@indiscale.com>
  * Copyright (C) 2021 Timm Fitschen <t.fitschen@indiscale.com>
  * Copyright (C) 2023 Florian Spreckelsen <f.spreckelsen@indiscale.com>
+ * Copyright (C) 2023 Daniel Hornung <d.hornung@indiscale.com>
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as
@@ -31,11 +32,35 @@ var cosmetics = new function () {
 
     /**
      * Cut-off length of links. When linkify processes the links any href
-     * longer than this will be cut off at character 25 and "[...]" will be
+     * longer than this will be cut off at the end and "[...]" will be
      * appended for the link text.
      */
     var _link_cut_off_length = 40;
 
+    var _custom_datetime = function () {
+        $('.caosdb-f-property-datetime-value').each(function (index) {
+            if (!($(this).hasClass("caosdb-v-property-datetime-customized"))) {
+                var result = this.innerText.replace(/T/, " ").replace(/\+.*/, "");
+                result = `<span class="caosdb-v-property-datetime-customized-newvalue">${result}</span>`;
+
+                // add class to highlight that this has been customized already
+                $(this).addClass("caosdb-v-property-datetime-customized")
+                $(this).hide();
+                $(this).after(result);
+            }
+        });
+    }
+
+  /**
+   * Remove all the custom datetime elements again, for example when entering the edit mode.
+   */
+  var _custom_datetime_clear = function() {
+    $('.caosdb-v-property-datetime-customized-newvalue').each(function () {
+      $(this).remove();
+    }
+                                                             )
+  }
+
     var _linkify = function () {
         $('.caosdb-f-property-text-value').each(function (index) {
             if (!($(this).hasClass("caosdb-v-property-linkified")) && (/https?:\/\//.test(this.innerText))) {
@@ -57,6 +82,22 @@ var cosmetics = new function () {
         });
     }
 
+    /**
+     * Customize datetime formatting.
+     *
+     * A listener detects edit-mode changes and previews
+     */
+    var custom_datetime = function () {
+        _custom_datetime();
+
+        // edit-mode-listener to delete replacement
+        document.body.addEventListener(edit_mode.start_edit.type, _custom_datetime_clear, true);
+        // edit-mode-listener to recreate
+        document.body.addEventListener(edit_mode.end_edit.type, _custom_datetime, true);
+        // preview listener
+        document.body.addEventListener(preview.previewReadyEvent.type, _custom_datetime, true);
+    }
+
     /**
      * Convert any substring of a text-value beginning with 'http(s)://' into a
      * link.
@@ -73,6 +114,10 @@ var cosmetics = new function () {
     }
 
     this.init = function () {
+        this.custom_datetime = custom_datetime;
+        if ("${BUILD_MODULE_EXT_COSMETICS_CUSTOMDATETIME}" == "ENABLED") {
+            custom_datetime();
+        }
         this.linkify = linkify;
         if ("${BUILD_MODULE_EXT_COSMETICS_LINKIFY}" == "ENABLED") {
             linkify();

src/core/xsl/entity.xsl

@@ -297,6 +297,7 @@
     <xsl:param name="value"/>
     <xsl:param name="reference"/>
     <xsl:param name="boolean"/>
+    <xsl:param name="datetime"/>
     <xsl:choose>
       <xsl:when test="normalize-space($value)!=''">
         <xsl:choose>
@@ -322,6 +323,14 @@
               <xsl:value-of select="normalize-space($value)"/>
             </xsl:element>
           </xsl:when>
+          <xsl:when test="$datetime='true'">
+            <xsl:element name="span">
+              <xsl:attribute name="class">
+                <xsl:value-of select="'caosdb-f-property-single-raw-value caosdb-property-datetime-value caosdb-f-property-datetime-value caosdb-v-property-datetime-value'"/>
+              </xsl:attribute>
+              <xsl:value-of select="$value"/>
+            </xsl:element>
+          </xsl:when>
           <xsl:otherwise>
             <xsl:element name="span">
               <xsl:attribute name="class">
@@ -362,6 +371,9 @@
             <xsl:with-param name="boolean">
               <xsl:value-of select="'false'"/>
             </xsl:with-param>
+            <xsl:with-param name="datetime">
+              <xsl:value-of select="'false'"/>
+            </xsl:with-param>
           </xsl:call-template>
         </xsl:for-each>
         <xsl:for-each select="Record|RecordType|File|Property">
@@ -375,6 +387,9 @@
             <xsl:with-param name="boolean">
               <xsl:value-of select="'false'"/>
             </xsl:with-param>
+            <xsl:with-param name="datetime">
+              <xsl:value-of select="'false'"/>
+            </xsl:with-param>
           </xsl:call-template>
         </xsl:for-each>
       </xsl:element>
@@ -398,6 +413,9 @@
               <xsl:with-param name="boolean">
                 <xsl:value-of select="../@datatype='LIST&lt;BOOLEAN>'"/>
               </xsl:with-param>
+              <xsl:with-param name="datetime">
+                <xsl:value-of select="../@datatype='LIST&lt;DATETIME>'"/>
+              </xsl:with-param>
             </xsl:call-template>
           </xsl:element>
         </xsl:for-each>
@@ -449,6 +467,9 @@
               <xsl:with-param name="boolean">
                 <xsl:value-of select="@datatype='BOOLEAN'"/>
               </xsl:with-param>
+              <xsl:with-param name="datetime">
+                <xsl:value-of select="@datatype='DATETIME'"/>
+              </xsl:with-param>
             </xsl:call-template>
           </xsl:otherwise>
         </xsl:choose>

src/doc/extension/module.md

 # How to add a module to CaosDB WebUI
-The CaosDB WebUI is organized in modules which can easily be added and on a module basis enabled or disabled.
+The CaosDB WebUI is organized in modules which can easily be added and enabled or disabled per module.
 
-There are a few steps necessary to create a new module.
+Only a few steps are necessary to create a new module.
 
 ## Create the module file
 
-Create a new file for each new module. We have the convention, that extensions
-which are optional and should stay that way and also custom extensions for
-special purposes to name the file starting with `ext_`. E.g.
-`ext_flight_preview.js`.
+Create a new file for each new module.  We have the convention that extensions which are optional
+(and also custom extensions for special purposes) are saved in files starting with `ext_`,
+e.g. `ext_flight_preview.js`.
 
-This file should define one function that wraps every thing and which is
+This file should define one function that wraps everything, this function is then
 enabled at the bottom of the file:
 
 ```js

test/core/js/modules/ext_cosmetics.js.js

 /*
  * This file is a part of the CaosDB Project.
  *
- * Copyright (C) 2021 IndiScale GmbH <info@indiscale.com>
+ * Copyright (C) 2021-2023 IndiScale GmbH <info@indiscale.com>
  * Copyright (C) 2021 Timm Fitschen <t.fitschen@indiscale.com>
+ * Copyright (C) 2023 Daniel Hornung <d.hornung@indiscale.com>
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as
@@ -36,6 +37,30 @@ QUnit.module("ext_cosmetics.js", {
     }
 });
 
+QUnit.test("custom datetime", function (assert) {
+    assert.ok(cosmetics.custom_datetime, "custom_datetime available");
+    var test_cases = [
+        ["1234-56-78", "1234-56-78"],
+        ["9876-54-32T12:34:56", "9876-54-32 12:34:56"],
+        ["2023-03-78T99:99:99+0800", "2023-03-78 99:99:99"],
+    ];
+
+    for (let test_case of test_cases) {
+        const container = $('<div></div>');
+        $(document.body).append(container);
+        const text_value = $(`<span class="caosdb-f-property-datetime-value">${test_case[0]}</span>`);
+        container.append(text_value);
+        assert.equal($(container).find(" ").length, 0, "Test original datetime.");
+      cosmetics.custom_datetime();
+      const newValueElement =
+            container[0].querySelector("span.caosdb-v-property-datetime-customized-newvalue");
+      assert.ok(newValueElement, "Datetime customization: Test if result exists.");
+      assert.equal(newValueElement.innerHTML, test_case[1],
+                   "Datetime customization: compared result.");
+        container.remove();
+    }
+});
+
 QUnit.test("linkify - https", function (assert) {
     assert.ok(cosmetics.linkify, "linkify available");
     var test_cases = [