From c8c662be4c7e52d7504ed173b48f9187ff125aa4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mauro=20Ferr=C3=A3o?= <maurofmferrao@gmail.com>
Date: Thu, 8 Feb 2024 10:28:49 +0000
Subject: [PATCH] Bugfix/multiple fixes for 4.0.7 (#2357)

* Percentage replacements in code editor break CSS rules
relates to xibosignageltd/xibo-private#613

* Marquee templates: No Data message doesn't show
relates to xibosignageltd/xibo-private#612
---
 modules/templates/article-static.xml |   7 +-
 modules/templates/dataset-static.xml | 100 +++++++++++++++------------
 ui/src/core/forms.js                 |   4 +-
 3 files changed, 65 insertions(+), 46 deletions(-)

diff --git a/modules/templates/article-static.xml b/modules/templates/article-static.xml
index de42429722..b3e7166b25 100644
--- a/modules/templates/article-static.xml
+++ b/modules/templates/article-static.xml
@@ -1381,7 +1381,12 @@ if (items.length > 0) {
 
 // No data message
 if (items.length <= 0 && properties.noDataMessage && properties.noDataMessage !== '') {
-    items.push(properties.noDataMessage);
+    // Add message to the target content
+    $(target).find('#content').after(
+        $('<div>')
+            .addClass('no-data-message')
+            .append(properties.noDataMessage)
+    );
 }
 
 // Copyright
diff --git a/modules/templates/dataset-static.xml b/modules/templates/dataset-static.xml
index 327c75ab11..113aa72cc1 100644
--- a/modules/templates/dataset-static.xml
+++ b/modules/templates/dataset-static.xml
@@ -3328,25 +3328,22 @@ $(target).xiboLayoutAnimate(properties);
 // -------------------------------------------
 
 // Get selected columns
-var selectedColumns = JSON.parse(properties.selectedColumns);
-
-// If we don't have selected columns, stop rendering here
-if (selectedColumns === null || Object.values(selectedColumns).length === 0) {
-    return;
-}
+var selectedColumns = (properties.selectedColumns) ? JSON.parse(properties.selectedColumns) : [];
 
 // Convert to array and sort by play order
 selectedColumns = Object.values(selectedColumns);
-selectedColumns.sort(function(a, b) { return a.playOrder - b.playOrder; });
+selectedColumns.sort(function(a, b) {return a.playOrder - b.playOrder;});
 
 // Get dataset columns from meta.mapping
 var columnInfo = {};
-for (var i = 0; i < meta.mapping.length; i++) {
-    var column = meta.mapping[i];
-    columnInfo[column.dataSetColumnId] = {
-        name: column.heading,
-        type: column.dataTypeId
-    };
+if (meta) {
+    for (var i = 0; i < meta.mapping.length; i++) {
+        var column = meta.mapping[i];
+        columnInfo[column.dataSetColumnId] = {
+            name: column.heading,
+            type: column.dataTypeId
+        };
+    }
 }
 
 // Generate template from chosen fields
@@ -3360,7 +3357,7 @@ for (var col in selectedColumns) {
     if (isMedia) {
         properties.template += ' is-media-item';
     }
-    
+
     properties.template += '" style="';
 
     for (var style in selectedColumns[col]) {
@@ -3396,13 +3393,54 @@ for (var col in selectedColumns) {
     properties.template += '">[' + columnInfo[column.colId].name + '|' + column.colId + ']</span>';
 }
 
-// No data message
+
+// Clear containers
+$(target).find('#content').empty();
+$(target).find('.no-data-message').remove();
+
+var hasAddedItems = false;
 if (items.length <= 0 && properties.noDataMessage && properties.noDataMessage !== '') {
-    items.push(properties.noDataMessage);
+    // No data message
+    // Add message to the target content
+    $(target).find('#content').after(
+        $('<div>')
+            .addClass('no-data-message')
+            .append(properties.noDataMessage)
+    );
+} else {
+    // Add items to container
+    for (var i = 0; i < items.length; i++) {
+        var item = items[i];
+
+        // Replace the template with the item content
+        var content = properties.template.replace(/\[(.*?)\]/g, function(match, column) {
+            var itemId = column.split('|')[0];
+            var itemCol = column.split('|')[1];
+            var itemType = (itemCol) ? columnInfo[itemCol].type : '';
+            var itemValue = item[itemId];
+
+            // If this is an image column, wrap it in an image tag
+            if (itemType === 4 || itemType === 5) {
+                itemValue = itemValue ? '<img style="width: 100%; height: 100%;" src="' + itemValue + '" />' : '';
+            }
+
+            return itemValue ? itemValue : '';
+        });
+
+        // Add the content to the target
+        if(content != "") {
+            hasAddedItems = true;
+            $(target).find('#content').append(
+                $('<div>')
+                    .addClass('item')
+                    .append(content)
+            );
+        }
+    }
 }
 
 // Copyright
-if (properties.copyright) {
+if (hasAddedItems && properties.copyright) {
     var copyrightTemplate = '<span class="marquee-item marquee-copyright" style="';
 
     if (properties.copyrightFontFamily) {
@@ -3426,36 +3464,10 @@ if (properties.copyright) {
 
     copyrightTemplate += '">' + properties.copyright + '</span>';
 
-    items.push(copyrightTemplate);
-}
-
-// Clear container
-$(target).find('#content').empty();
-
-// Add items to container
-for (var i = 0; i < items.length; i++) {
-    var item = items[i];
-
-    // Replace the template with the item content
-    var content = properties.template.replace(/\[(.*?)\]/g, function (match, column) {
-        var itemId = column.split('|')[0];
-        var itemCol = column.split('|')[1];
-        var itemType = (itemCol) ? columnInfo[itemCol].type : '';
-        var itemValue = item[itemId];
-
-        // If this is an image column, wrap it in an image tag
-        if (itemType === 4 || itemType === 5) {
-            itemValue = itemValue ? '<img style="width: 100%; height: 100%;" src="' + itemValue + '" />' : '';
-        }
-
-        return itemValue ? itemValue : '';
-    });
-
-    // Add the content to the target
     $(target).find('#content').append(
         $('<div>')
             .addClass('item')
-            .append(content)
+            .append(copyrightTemplate)
     );
 }
 
diff --git a/ui/src/core/forms.js b/ui/src/core/forms.js
index 44baac2ba5..dc26cd2ab7 100644
--- a/ui/src/core/forms.js
+++ b/ui/src/core/forms.js
@@ -2735,7 +2735,9 @@ window.forms = {
     const replaceHTML = function(htmlString) {
       htmlString = htmlString.replace(/\%(.*?)\%/g, function(_m, group) {
         // Replace trimmed match with the value of the base object
-        return group.split('.').reduce((a, b) => a[b], baseObject);
+        return group.split('.').reduce((a, b) => {
+          return (a[b]) || `%${b}%`;
+        }, baseObject);
       });
 
       return htmlString;