Skip to content

Commit

Permalink
fix(Page Properties): keep custom template after update (#29669)
Browse files Browse the repository at this point in the history 
### 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
  • Loading branch information
@rjvelazco
rjvelazco authored Aug 21, 2024
1 parent 9b94424 commit 7ad6b2a
Showing 1 changed file with 136 additions and 139 deletions.
275 changes: 136 additions & 139 deletions dotCMS/src/main/webapp/WEB-INF/velocity/static/htmlpage_assets/template_custom_field.vtl
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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;",
Expand All @@ -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
Expand All @@ -195,7 +192,7 @@ dojo.ready(function(){
onComplete: onTemplateFetchComplete
};

window.top._templateStore.fetch(templateFetchParams);
templateStore.fetch(templateFetchParams);
});
</script>

Expand Down

0 comments on commit 7ad6b2a

Please sign in to comment.