From 7ad6b2a65e4fc3583395a6e40eb11553c321bd70 Mon Sep 17 00:00:00 2001
From: Rafael Velazco <rjvelazco21@gmail.com>
Date: Wed, 21 Aug 2024 08:59:40 -0400
Subject: [PATCH] fix(Page Properties): keep custom template after update
 (#29669)

### Proposed Changes
* fix(template): Page content is deleted after changing page properties
  - #29569
* fix(template): Page content is deleted when changing language
  - #29572
* fix(template): Keep custom template after update
  - #29034

## Videos

### Page content is deleted after changing page properties


https://github.com/user-attachments/assets/b1348572-89b9-404d-9df3-7cae19bd688a

### Page content is deleted when changing language


https://github.com/user-attachments/assets/4f3079da-77bf-4616-a031-7a3802c40d39

### Keep custom template after update


https://github.com/user-attachments/assets/23217700-1800-4ed7-ad7e-9ccc75fafac3
---
 .../htmlpage_assets/template_custom_field.vtl | 275 +++++++++---------
 1 file changed, 136 insertions(+), 139 deletions(-)

diff --git a/dotCMS/src/main/webapp/WEB-INF/velocity/static/htmlpage_assets/template_custom_field.vtl b/dotCMS/src/main/webapp/WEB-INF/velocity/static/htmlpage_assets/template_custom_field.vtl
index 94c6937a6e56..e906b927dca2 100644
--- a/dotCMS/src/main/webapp/WEB-INF/velocity/static/htmlpage_assets/template_custom_field.vtl
+++ b/dotCMS/src/main/webapp/WEB-INF/velocity/static/htmlpage_assets/template_custom_field.vtl
@@ -1,49 +1,137 @@
 <script type="application/javascript">
+// Global Constants
+const hostId = "$request.getSession().getAttribute('CMS_SELECTED_HOST_ID')";
+const defaultTemplateName = '$config.getStringProperty("DEFAULT_TEMPLATE_NAME", "System Template")'; // try to preload the default template.
 
 dojo.require("dotcms.dojo.data.TemplateReadStore");
 
+// UTILS
+
+/**
+* Normalizes the key of a template
+*
+*/
+const normalizeKey = function (template) {
+    return template.fullTitle.replace(new RegExp("\\("+template.hostName+"\\)"), '').replace(/\s+/g,'').toLowerCase();
+}
+
+/**
+* Returns a map of templates by name and by id
+*
+*/
+const getTemplatesMaps = (templates) => {
+    const mapByName = templates.reduce(function(map, template) {
+        const key = normalizeKey(template);
+        if (!map[key]) {
+            map[key] = template;
+        }
+
+        return map;
+    }, {});
+
+    const mapById = templates.reduce(function(map, template) {
+        map[template.identifier] = template;
+        return map;
+    }, {});
+
+
+    return {
+        mapByName,
+        mapById
+    }
+}
+
+// UTILS END
+/**
+* Fetches the template image from the server
+*
+*/
+function fetchTemplateImage(templateId) {
+    fetch("/api/v1/templates/image", {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json"
+        },
+        body: JSON.stringify({ templateId})
+    }).then(async (response) => {
+        // The ok value represents the result of the response status 200 codes
+        if (response.ok) {
+            const result = await response.json();
+
+            getTemplateCallBack(result); // here we pass the result of the json response to the callback function
+        } else {
+            throw new Error("Error fetching template image");
+        }
+    })
+    .catch((error) => {
+        const imageEl = dojo.byId("templateThumbnailHolder");
+        imageEl.src = "/html/images/shim.gif";
+        imageEl.style.border = "0px";
+    });
+};
+
+/**
+* Callback function to handle the template fetch
+*
+*/
+const onTemplateFetchComplete = function(templates, currentRequest){
+    const templateId = dojo.byId("template").value;
+    const isTemplateValid  = templateId && templateId != "0";
+
+    console.log("templateId", templateId);
+
+    if(!templates || templates.length === 0){
+        return;
+    }
+
+    const { mapById, mapByName } = getTemplatesMaps(templates);
+    const normalizedName = defaultTemplateName.replace(/\s+/g,'').toLowerCase();
+    const template = isTemplateValid ? mapById[templateId]:mapByName[normalizedName];
+
+    if(!template){
+        return;
+    }
+
+    const { identifier, fullTitle } = template;
+    // We set the values directly into the components because setting it direcrtly into`templateSel` fires another load operation.
+    dojo.byId("currentTemplateId").value = identifier;
+    dojo.byId("template").value = identifier;
+    dijit.byId('templateSel').set("displayedValue", fullTitle);
+    fetchTemplateImage(identifier);
+};
+
+/**
+* Handles the template change event
+*
+*/
 function templateChanged() {
-    var templateSel=dijit.byId("templateSel");
-    var value=templateSel.get('value');
+    const templateSel=dijit.byId("templateSel");
+    const value=templateSel.get('value');
+
+    if(!value) {
+        return;
+    }
+
     if(value == "0") {
-        var store=window.top._templateStore;
-        store.hostId="";
         templateSel.set("value","");
         templateSel.filter();
+
+        return;
     }
-    else if(value) {
-        dojo.byId("template").value=value;
-        fetch("/api/v1/templates/image", {
-            method: "POST",
-            headers: {
-                "Content-Type": "application/json"
-            },
-            body: JSON.stringify({
-                templateId: value
-            })
-        }).then(async (response) => {
-            // The ok value represents the result of the response status 200 codes
-            if (response.ok) {
-                const result = await response.json();
-
-                getTemplateCallBack(result); // here we pass the result of the json response to the callback function
-            } else {
-                throw new Error("Error fetching template image");
-            }
-        })
-        .catch((error) => {
-            var imageEl = dojo.byId("templateThumbnailHolder");
-            imageEl.src = "/html/images/shim.gif";
-            imageEl.style.border = "0px";
-        });
-    }
+
+    dojo.byId("template").value=value;
+    fetchTemplateImage(value);
 }
 
+/**
+* Get the template callback
+*
+*/
 function getTemplateCallBack(data) {
-    var imageInode = data.identifier;
-    var imageExtension = data.extension;
-    
-    var imageEl=dojo.byId("templateThumbnailHolder");
+    const imageInode = data.identifier;
+    const imageExtension = data.extension;
+    const imageEl=dojo.byId("templateThumbnailHolder");
+
     if (isInodeSet(imageInode)) {
     	imageEl.src = "/dA/" + imageInode + "/250w";
         imageEl.style.border = '1px solid #B6CBEB';
@@ -56,16 +144,18 @@ function getTemplateCallBack(data) {
 }
 
 dojo.ready(function(){
-    var hostId = "$request.getSession().getAttribute('CMS_SELECTED_HOST_ID')";
-    var templateId = dojo.byId("template").value;
-    var templateStore = new dotcms.dojo.data.TemplateReadStore({
+    const templateId = dojo.byId("template").value;
+    const isTemplateValid  = templateId && templateId != "0";
+
+    const currentTemplateIdElement = dojo.byId("currentTemplateId");
+    currentTemplateIdElement.value = templateId;
+
+    const templateStore = new dotcms.dojo.data.TemplateReadStore({
         hostId: hostId,
         templateSelected: templateId
     });
 
-    window.top._templateStore=templateStore;
-
-    var templateSelect=new dijit.form.FilteringSelect({
+    const templateSelect=new dijit.form.FilteringSelect({
         id:"templateSel",
         name:"templateSel",
         style:"width:350px;",
@@ -83,107 +173,14 @@ dojo.ready(function(){
         invalidMessage: '$text.get("Invalid-option-selected")'
     },"templateHolder");
 
+    if (isTemplateValid){
+       fetchTemplateImage(templateId);
 
-    var val  = dojo.byId("template").value;
-    if (val != undefined && val != "" && val != "0"){
-        fetch("/api/v1/templates/image", {
-            method: "POST",
-            headers: {
-                "Content-Type": "application/json"
-            },
-            body: JSON.stringify({
-                templateId: val
-            })
-        }).then(async (response) => {
-            // The ok value represents the result of the response status 200 codes
-            if (response.ok) {
-                const result = await response.json();
-
-                getTemplateCallBack(result); // here we pass the result of the json response to the callback function
-            } else {
-                throw new Error("Error fetching template image");
-            }
-        })
-        .catch((error) => {
-            var imageEl = dojo.byId("templateThumbnailHolder");
-            imageEl.src = "/html/images/shim.gif";
-            imageEl.style.border = "0px";
-        });
-
-        var templateSel=dijit.byId("templateSel");
-        templateSel.set("value",val);
+        const templateSel = dijit.byId("templateSel");
+        templateSel.set("value", templateId);
     }
 
-    var currentTemplateIdElement = dojo.byId("currentTemplateId");
-    currentTemplateIdElement.value = val;
-
-
-
-    // try to preload the default template.
-    var defaultTemplateName = '$config.getStringProperty("DEFAULT_TEMPLATE_NAME", "System Template")';
-
-    var onTemplateFetchComplete = function(templates, currentRequest){
-
-        var normalizeKey = function (obj) {
-            return obj.fullTitle.replace(new RegExp("\\("+obj.hostName+"\\)"), '').replace(/\s+/g,'').toLowerCase();
-        }
-
-        if((templates) && (templates.length > 0)){
-            var templatesMapByName = templates.reduce(function(map, obj) {
-                var key = normalizeKey(obj);
-                if (!(key in map)){
-                    map[key] = obj;
-                }
-                return map;
-            }, {});
-
-            var templatesMapById = templates.reduce(function(map, obj) {
-                map[obj.identifier] = obj;
-                return map;
-            }, {});
-
-            var obj = val != undefined && val != "" && val != "0"? templatesMapById[val]:null;
-
-            if (!obj) {
-                var normalizedTemplateName = defaultTemplateName.replace(/\s+/g,'').toLowerCase();
-                var obj = templatesMapByName[normalizedTemplateName];
-            }
-
-            if(obj){
-                var value = obj.identifier;
-                var fullTitle = obj.fullTitle;
-                // We set the values directly into the components because setting it direcrtly into`templateSel` fires another load operation.
-                dojo.byId("currentTemplateId").value = value;
-                dojo.byId("template").value = value;
-                dijit.byId('templateSel').set("displayedValue", fullTitle);
-                fetch("/api/v1/templates/image", {
-                    method: "POST",
-                    headers: {
-                        "Content-Type": "application/json"
-                    },
-                    body: JSON.stringify({
-                        templateId: value
-                    })
-                }).then(async (response) => {
-                    // The ok value represents the result of the response status 200 codes
-                    if (response.ok) {
-                        const result = await response.json();
-
-                        getTemplateCallBack(result); // here we pass the result of the json response to the callback function
-                    } else {
-                        throw new Error("Error fetching template image");
-                    }
-                })
-                .catch((error) => {
-                    var imageEl = dojo.byId("templateThumbnailHolder");
-                    imageEl.src = "/html/images/shim.gif";
-                    imageEl.style.border = "0px";
-                });
-            }
-        }
-    };
-
-    var templateFetchParams = {
+    const templateFetchParams = {
         query: {
             fullTitle: '*',
             hostId: hostId
@@ -195,7 +192,7 @@ dojo.ready(function(){
         onComplete: onTemplateFetchComplete
     };
 
-    window.top._templateStore.fetch(templateFetchParams);
+    templateStore.fetch(templateFetchParams);
 });
 </script>