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:
@@ -109,6 +109,120 @@ body {
|
||||
.table tbody tr td { vertical-align: middle; }
|
||||
.table thead th { font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
|
||||
|
||||
/* ── List actions ─────────────────────────────────────── */
|
||||
.table .template-actions,
|
||||
.table .service-actions {
|
||||
width: 1%;
|
||||
white-space: nowrap;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* ── Service template catalog and filters ─────────────── */
|
||||
.service-template-grid > thead > tr > th {
|
||||
--bs-table-bg: #dce7f6;
|
||||
--bs-table-color: #243a55;
|
||||
border-bottom: 2px solid #aec0db;
|
||||
}
|
||||
|
||||
.service-template-grid .template-key-filter .btn-outline-secondary {
|
||||
--bs-btn-bg: #fff;
|
||||
}
|
||||
|
||||
.service-template-catalog,
|
||||
.template-language-statuses {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: .375rem;
|
||||
}
|
||||
|
||||
.service-template-language-code {
|
||||
padding: .15rem .4rem;
|
||||
border: 1px solid #dce3eb;
|
||||
border-radius: .25rem;
|
||||
background: #fff;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.template-key-filter {
|
||||
min-width: 9rem;
|
||||
max-width: 32rem;
|
||||
font-weight: 400;
|
||||
letter-spacing: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.template-key-filter-controls {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: .375rem;
|
||||
}
|
||||
|
||||
.template-key-filter-controls .form-control {
|
||||
flex: 1 1 9rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.template-language-statuses {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.template-language-status {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
gap: .25rem;
|
||||
padding: .2rem .4rem;
|
||||
border: 1px solid;
|
||||
border-radius: .25rem;
|
||||
font-size: .75rem;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.template-language-present {
|
||||
color: #146c43;
|
||||
background: #e8f5ec;
|
||||
border-color: #b7dcc0;
|
||||
}
|
||||
|
||||
.template-language-missing {
|
||||
color: #825800;
|
||||
background: #fff4df;
|
||||
border-color: #f3d19e;
|
||||
}
|
||||
|
||||
/* ── Service language actions ─────────────────────────── */
|
||||
.service-language-table .service-language-actions {
|
||||
width: 1%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.service-language-table .service-language-action-buttons {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: .5rem;
|
||||
}
|
||||
|
||||
.service-language-table .service-language-action-buttons > .btn {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.service-language-table .form-control {
|
||||
min-width: 4rem;
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.service-language-table .service-language-action-buttons {
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.service-language-table .service-language-action-buttons > .btn {
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Empty state ──────────────────────────────────────── */
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
@@ -134,9 +248,7 @@ body {
|
||||
.editor-card-header-bar {
|
||||
background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
|
||||
color: #fff;
|
||||
font-size: .9rem;
|
||||
font-weight: 600;
|
||||
padding: .75rem 1.25rem;
|
||||
padding: 1rem 1.25rem;
|
||||
border-bottom: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -145,6 +257,20 @@ body {
|
||||
|
||||
.editor-card-body { padding: 1.5rem 1.5rem 1rem; }
|
||||
|
||||
.editor-card-header-bar .editor-card-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: .625rem;
|
||||
min-width: 0;
|
||||
margin: 0;
|
||||
font-size: 1.375rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.editor-card-title > .bi { flex-shrink: 0; }
|
||||
.editor-card-title > span { min-width: 0; overflow-wrap: anywhere; }
|
||||
|
||||
.editor-card-footer {
|
||||
background-color: #f8f9fa;
|
||||
border-top: 1px solid #e9ecef;
|
||||
@@ -175,6 +301,82 @@ body {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* ── Template service context ─────────────────────────── */
|
||||
.template-editor-breadcrumbs .breadcrumb-item {
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.template-service-context {
|
||||
margin: 0 0 .5rem;
|
||||
}
|
||||
|
||||
.template-service-context > dt {
|
||||
margin-bottom: .25rem;
|
||||
color: #6b7280;
|
||||
font-size: .75rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.template-service-context > dd {
|
||||
margin: 0;
|
||||
color: #1f2937;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.35;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.template-service-edit-link:focus-visible {
|
||||
outline: 2px solid #0d6efd;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* ── Template language sheet ──────────────────────────── */
|
||||
.template-language-sheet {
|
||||
min-width: 0;
|
||||
border: 1px solid #dce3eb;
|
||||
border-radius: .5rem;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.template-language-sheet > .nav-tabs {
|
||||
flex-wrap: nowrap;
|
||||
gap: .25rem;
|
||||
margin: 0;
|
||||
padding: .5rem .5rem 0;
|
||||
border-bottom: 0;
|
||||
border-radius: .5rem .5rem 0 0;
|
||||
background: #f3f6fb;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.template-language-sheet > .nav-tabs .nav-link {
|
||||
flex: 0 0 auto;
|
||||
margin-bottom: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.template-language-sheet > .nav-tabs .nav-link.active {
|
||||
border-color: #dce3eb #dce3eb #fff;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.template-language-sheet > .nav-tabs .nav-link:focus-visible {
|
||||
outline: 2px solid #0d6efd;
|
||||
outline-offset: -3px;
|
||||
}
|
||||
|
||||
.template-language-sheet > #languagePanes {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.template-language-sheet .language-pane > :last-child {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
/* ── Email template preview ───────────────────────────── */
|
||||
.template-preview-panel {
|
||||
border: 1px solid #dce3eb;
|
||||
|
||||
@@ -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