MOBILE-4563 data: Fix template rendering

An error was displayed when a field had no content.
Also, only fields as the only child of elements were correctly rendered.

Author: albertgasset

src/addons/mod/data/services/data-helper.ts

@@ -217,49 +217,55 @@ export class AddonModDataHelperProvider {
             return '';
         }
 
-        // Replace the fields found on template.
-        fields.forEach((field) => {
-            let replace = `[[${field.name}]]`;
-            replace = replace.replace(/[-[\]/{}()*+?.\\^$|]/g, '\\$&');
-            let replaceRegex = new RegExp(replace, 'gi');
-
-            const valuesInsideTags = new RegExp('>\\[\\[' + field.name + '\\]\\]<','gi');
-
-            if (template.match(valuesInsideTags)?.length) {
-                // Replace field by a generic directive.
-                const hasOffline = entry.hasOffline ? 'true' : 'false';
-
-                const render = `><addon-mod-data-field-plugin [field]="fields[${field.id}]" mode="${mode}" [database]="database" \
-                    [value]="entries[${entry.id}].contents[${field.id}]" [recordHasOffline]="${hasOffline}" \
-                    (gotoEntry)="gotoEntry($event)"></addon-mod-data-field-plugin><`;
-
-                template = template
-                    .replace(valuesInsideTags, render)
-                    .replace(replaceRegex, entry.contents[field.id].content);
-            } else {
-                // Replace field by a generic directive.
-                const render = `<addon-mod-data-field-plugin [field]="fields[${field.id}]" mode="${mode}" [database]="database" \
-                [value]="entries[${entry.id}].contents[${field.id}]" [recordHasOffline]="${entry.hasOffline ? 'true' : 'false'}" \
-                (gotoEntry)="gotoEntry($event)"></addon-mod-data-field-plugin>`;
-
-                template = template.replace(replaceRegex, render);
-            }
+        const replaceAll = (text: string, pattern: string, replacement: string): string => {
+            const escapedPattern = pattern.replace(/[-[\]/{}()*+?.\\^$|]/g, '\\$&');
+
+            return text.replace(new RegExp(escapedPattern, 'gi'), replacement);
+        };
 
-            // Replace the field name tag.
-            replace = `[[${field.name}#name]]`;
-            replace = replace.replace(/[-[\]/{}()*+?.\\^$|]/g, '\\$&');
-            replaceRegex = new RegExp(replace, 'gi');
+        const replaceFields = (template: string, useRawContent: boolean): string => {
+            fields.forEach((field) => {
+                if (useRawContent) {
+                    // Replace field with unprocessed content.
+                    template = replaceAll(template, `[[${field.name}]]`, entry.contents[field.id]?.content ?? '');
+                } else {
+                    // Replace field by a generic directive.
+                    const render = `<addon-mod-data-field-plugin [field]="fields[${field.id}]" mode="${mode}" \
+                         [database]="database" [value]="entries[${entry.id}].contents[${field.id}]" \
+                         [recordHasOffline]="${entry.hasOffline ? 'true' : 'false'}" \
+                         (gotoEntry)="gotoEntry($event)"></addon-mod-data-field-plugin>`;
+                    template = replaceAll(template, `[[${field.name}]]`, render);
+                }
 
-            template = template.replace(replaceRegex, field.name);
+                // Replace the field name tag.
+                template = replaceAll(template, `[[${field.name}#name]]`, field.name);
 
-            // Replace the field description tag.
-            replace = `[[${field.name}#description]]`;
-            replace = replace.replace(/[-[\]/{}()*+?.\\^$|]/g, '\\$&');
-            replaceRegex = new RegExp(replace, 'gi');
+                // Replace the field description tag.
+                template = replaceAll(template, `[[${field.name}#description]]`, field.description);
+            });
 
-            template = template.replace(replaceRegex, field.description);
+            return template;
+        };
+
+        // First, replace fields inside attributes.
+        // We can't use convertTextToHTMLElement because it removes elements that
+        // are not allowed as a child of <div>, like <li> or <tr>.
+        const templateElement = document.createElement('template');
+        templateElement.innerHTML = template;
+        templateElement.content.querySelectorAll('*').forEach((element) => {
+           for (const name of element.getAttributeNames()) {
+                const value = element.getAttribute(name) ?? '';
+                if (value.match(/\[\[.*\]\]/)) {
+                    element.setAttribute(name, replaceFields(value, true));
+                }
+           }
         });
+        template = templateElement.innerHTML;
+
+        // Replace fields inside elements.
+        template = replaceFields(template, false);
 
+        // Replace actions.
         for (const action in actions) {
             const replaceRegex = new RegExp(`##${action}##`, 'gi');
             // Is enabled?

src/addons/mod/data/tests/behat/links.feature

@@ -30,7 +30,7 @@ Feature: Users can manage entries in database activities
   @javascript
   Scenario: Create links in list template
     Given I set the following fields to these values:
-      | Repeated entry | <div class="colleague-entry-value mt-4"><span class="colleague-entry-value-title font-weight-bold">[[Email-Adresse#name]]</span><p><a href="mailto:[[Email-Adresse]]">[[Email-Adresse]]</a></p></div> |
+      | Repeated entry | <div class="colleague-entry-value mt-4"><span class="colleague-entry-value-title font-weight-bold">[[Email-Adresse#name]]</span><p><a href="mailto:[[Email-Adresse]]">Mail: [[Email-Adresse]]</a></p></div> |
     And I click on "Save" "button" in the "sticky-footer" "region"
 
     And I entered the data activity "Test database name" on course "Course 1" as "teacher1" in the app