feat(templates): add service language template management
Add normalized service and template catalogs, scoped administration, migration, validation, and regression coverage. Ref: IT-1601
This commit is contained in:
@@ -0,0 +1,130 @@
|
||||
(() => {
|
||||
const form = document.getElementById('templateForm');
|
||||
const tabs = document.getElementById('languageTabs');
|
||||
const panes = document.getElementById('languagePanes');
|
||||
const activeField = document.getElementById('ActiveLanguageIndex');
|
||||
const variablesField = document.getElementById('VariablesJson');
|
||||
const samples = document.getElementById('previewVariables');
|
||||
let dirty = false;
|
||||
const sampleValues = new Map();
|
||||
|
||||
function escapeHtml(value) {
|
||||
return String(value).replaceAll('&', '&').replaceAll('<', '<')
|
||||
.replaceAll('>', '>').replaceAll('"', '"').replaceAll("'", ''');
|
||||
}
|
||||
|
||||
function activePane() {
|
||||
return panes.querySelector('.language-pane:not([hidden])');
|
||||
}
|
||||
|
||||
function selectPane(pane, focus = false) {
|
||||
Array.from(panes.children).forEach(item => { item.hidden = item !== pane; });
|
||||
Array.from(tabs.children).forEach(tab => {
|
||||
const selected = tab.dataset.pane === pane.id;
|
||||
tab.classList.toggle('active', selected);
|
||||
tab.setAttribute('aria-selected', String(selected));
|
||||
tab.tabIndex = selected ? 0 : -1;
|
||||
if (selected && focus) tab.focus();
|
||||
});
|
||||
activeField.value = Array.from(panes.children).indexOf(pane);
|
||||
updatePreview();
|
||||
}
|
||||
|
||||
function readVariables() {
|
||||
const variables = JSON.parse(variablesField.value);
|
||||
if (!Array.isArray(variables)) throw new Error('Variables must be an array.');
|
||||
const names = new Set();
|
||||
variables.forEach(variable => {
|
||||
if (!variable || typeof variable.name !== 'string' || !variable.name.trim() || typeof variable.required !== 'boolean')
|
||||
throw new Error('Every variable needs a name and a boolean required property.');
|
||||
if (Object.keys(variable).some(key => !['name', 'required'].includes(key)))
|
||||
throw new Error('Use only name and required properties for each variable.');
|
||||
if (names.has(variable.name)) throw new Error('Variable names must be unique.');
|
||||
names.add(variable.name);
|
||||
});
|
||||
return variables;
|
||||
}
|
||||
|
||||
function renderSamples() {
|
||||
const status = document.getElementById('previewStatus');
|
||||
samples.replaceChildren();
|
||||
try {
|
||||
const variables = readVariables();
|
||||
variables.forEach((variable, index) => {
|
||||
const wrapper = document.createElement('div');
|
||||
wrapper.className = 'mb-2';
|
||||
const label = document.createElement('label');
|
||||
label.htmlFor = `sample-${index}`;
|
||||
label.className = 'form-label';
|
||||
label.textContent = variable.name + (variable.required ? ' *' : '');
|
||||
const input = document.createElement('input');
|
||||
input.id = label.htmlFor;
|
||||
input.dataset.variableName = variable.name;
|
||||
input.className = 'form-control form-control-sm';
|
||||
input.value = sampleValues.get(variable.name) ?? `Sample ${variable.name}`;
|
||||
sampleValues.set(variable.name, input.value);
|
||||
input.addEventListener('input', () => { sampleValues.set(variable.name, input.value); updatePreview(); });
|
||||
wrapper.append(label, input);
|
||||
samples.append(wrapper);
|
||||
});
|
||||
status.textContent = 'Ready';
|
||||
status.className = 'badge text-bg-secondary';
|
||||
} catch (error) {
|
||||
status.textContent = error.message;
|
||||
status.className = 'badge text-bg-danger';
|
||||
}
|
||||
updatePreview();
|
||||
}
|
||||
|
||||
function interpolate(text, html = false) {
|
||||
let result = text;
|
||||
samples.querySelectorAll('input').forEach(input => {
|
||||
const name = input.dataset.variableName;
|
||||
const value = html ? escapeHtml(input.value) : input.value;
|
||||
result = result.split(`{{${name}}}`).join(value);
|
||||
});
|
||||
return result;
|
||||
}
|
||||
|
||||
function updatePreview() {
|
||||
const pane = activePane();
|
||||
if (!pane) {
|
||||
document.getElementById('previewLanguage').textContent = '(no versions)';
|
||||
document.getElementById('previewSubject').textContent = '';
|
||||
document.getElementById('previewText').textContent = '';
|
||||
document.getElementById('previewHtmlFrame').srcdoc = '';
|
||||
return;
|
||||
}
|
||||
document.getElementById('previewLanguage').textContent = pane.querySelector('.language-code').value;
|
||||
document.getElementById('previewSubject').textContent = interpolate(pane.querySelector('[data-content="subject"]').value);
|
||||
document.getElementById('previewText').textContent = interpolate(pane.querySelector('[data-content="text"]').value);
|
||||
const html = interpolate(pane.querySelector('[data-content="html"]').value, true);
|
||||
document.getElementById('previewHtmlFrame').srcdoc = `<!doctype html><html><head><meta charset="utf-8"><meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline'; img-src data:; base-uri 'none'; form-action 'none'"><style>body{font-family:Arial,sans-serif;padding:20px;color:#1f2937;background:white}img{max-width:100%}</style></head><body>${html}</body></html>`;
|
||||
}
|
||||
|
||||
tabs.addEventListener('click', event => {
|
||||
const tab = event.target.closest('[role="tab"]');
|
||||
if (tab) selectPane(document.getElementById(tab.dataset.pane));
|
||||
});
|
||||
tabs.addEventListener('keydown', event => {
|
||||
const offsets = { ArrowLeft: -1, ArrowRight: 1, Home: -tabs.children.length, End: tabs.children.length };
|
||||
if (!(event.key in offsets)) return;
|
||||
event.preventDefault();
|
||||
const buttons = Array.from(tabs.children);
|
||||
if (!buttons.length) return;
|
||||
let index = buttons.indexOf(event.target) + offsets[event.key];
|
||||
if (event.key === 'Home') index = 0;
|
||||
if (event.key === 'End') index = buttons.length - 1;
|
||||
const tab = buttons[(index + buttons.length) % buttons.length];
|
||||
selectPane(document.getElementById(tab.dataset.pane), true);
|
||||
});
|
||||
panes.addEventListener('input', updatePreview);
|
||||
variablesField.addEventListener('input', renderSamples);
|
||||
form.addEventListener('input', () => { dirty = true; });
|
||||
form.addEventListener('submit', () => { dirty = false; });
|
||||
window.addEventListener('beforeunload', event => {
|
||||
if (dirty) { event.preventDefault(); event.returnValue = ''; }
|
||||
});
|
||||
|
||||
renderSamples();
|
||||
})();
|
||||
@@ -0,0 +1,36 @@
|
||||
(() => {
|
||||
const form = document.getElementById('serviceForm');
|
||||
const rows = document.getElementById('serviceLanguages');
|
||||
const alert = document.getElementById('serviceLanguageAlert');
|
||||
let sequence = rows.children.length;
|
||||
let dirty = false;
|
||||
function reindex() {
|
||||
Array.from(rows.children).forEach((row, index) => row.querySelectorAll('[name]').forEach(input => {
|
||||
input.name = input.name.replace(/Languages\[\d+\]/, `Languages[${index}]`);
|
||||
}));
|
||||
}
|
||||
document.getElementById('addServiceLanguage').addEventListener('click', () => {
|
||||
const fragment = document.createElement('template');
|
||||
fragment.innerHTML = document.getElementById('serviceLanguageRow').innerHTML.replaceAll('__index__', String(sequence++));
|
||||
rows.append(fragment.content);
|
||||
reindex();
|
||||
rows.lastElementChild.querySelector('input:not([type="hidden"])').focus();
|
||||
dirty = true;
|
||||
});
|
||||
rows.addEventListener('click', event => {
|
||||
const button = event.target.closest('.remove-service-language');
|
||||
if (!button) return;
|
||||
if (Number(button.dataset.count) > 0) {
|
||||
alert.textContent = `Cannot remove this language: ${button.dataset.count} version(s) use it. Save other changes, then use the separate delete language and versions confirmation.`;
|
||||
return;
|
||||
}
|
||||
button.closest('tr').remove();
|
||||
reindex();
|
||||
dirty = true;
|
||||
});
|
||||
form.addEventListener('input', () => { dirty = true; });
|
||||
form.addEventListener('submit', () => { dirty = false; });
|
||||
window.addEventListener('beforeunload', event => {
|
||||
if (dirty) { event.preventDefault(); event.returnValue = ''; }
|
||||
});
|
||||
})();
|
||||
Reference in New Issue
Block a user