Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(Page Properties): keep custom template after update #29669

Merged
merged 2 commits into from
Aug 21, 2024
Merged

fix(Page Properties): keep custom template after update #29669

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b64687d
fix(Page Properties): keep custom template on update
rjvelazco Aug 20, 2024
c40509c
Merge branch 'master' into issue-29034-templates-the-template-dropdow…
rjvelazco Aug 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
275 changes: 136 additions & 139 deletions dotCMS/src/main/webapp/WEB-INF/velocity/static/htmlpage_assets/template_custom_field.vtl
View file
Open in desktop
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