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:
@@ -1,300 +1,102 @@
|
||||
@using HrynCo.NotificationService.Web.Controllers.Admin.ViewModels
|
||||
|
||||
@model EmailTemplateEditViewModel
|
||||
@{
|
||||
Layout = "~/Views/Shared/_EditorLayout.cshtml";
|
||||
ViewData["Title"] = Model.PageTitle;
|
||||
ViewData["EditorTitle"] = Model.PageTitle;
|
||||
}
|
||||
|
||||
<form id="templateForm" asp-action="Save" asp-controller="AdminTemplates" method="post">
|
||||
var active = Math.Clamp(Model.ActiveLanguageIndex, 0, Math.Max(0, Model.Languages.Count - 1));
|
||||
}
|
||||
@section Breadcrumbs {
|
||||
<nav aria-label="Breadcrumb" class="template-editor-breadcrumbs"><ol class="breadcrumb"><li class="breadcrumb-item"><a href="/admin/services">Services</a></li><li class="breadcrumb-item"><a href="/admin/services/@Model.ServiceId">@Model.ServiceName</a></li><li class="breadcrumb-item active" aria-current="page">@Model.PageTitle</li></ol></nav>
|
||||
}
|
||||
<form id="templateForm" asp-action="Save" asp-controller="AdminTemplates" asp-route-serviceId="@Model.ServiceId" method="post">
|
||||
@Html.AntiForgeryToken()
|
||||
<input asp-for="Id" type="hidden" />
|
||||
<input type="hidden" name="IsNew" value="@Model.IsNew" />
|
||||
<input asp-for="ServiceNameFilter" type="hidden" />
|
||||
<input asp-for="Revision" type="hidden" />
|
||||
<input asp-for="ServiceId" type="hidden" /><input asp-for="ServiceName" type="hidden" />
|
||||
<input asp-for="KeyFilter" type="hidden" />
|
||||
|
||||
@if (!ViewData.ModelState.IsValid)
|
||||
{
|
||||
<div class="alert alert-danger mb-3">
|
||||
@foreach (var error in ViewData.ModelState.Values.SelectMany(v => v.Errors))
|
||||
<input type="hidden" id="ActiveLanguageIndex" name="ActiveLanguageIndex" value="@active" />
|
||||
<div asp-validation-summary="All" class="text-danger mb-3" role="alert"></div>
|
||||
<div class="row g-3 mb-3">
|
||||
<div class="col-md-6">
|
||||
<dl class="template-service-context">
|
||||
<dt>Service</dt>
|
||||
<dd>@Model.ServiceName</dd>
|
||||
</dl>
|
||||
<div class="form-text"><a href="/admin/services/@Model.ServiceId/edit" class="template-service-edit-link">Edit Service and language codes</a></div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label asp-for="Key" class="form-label fw-semibold">Template Key</label>
|
||||
<input asp-for="Key" class="form-control" readonly="@(!Model.IsNew)" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label asp-for="VariablesJson" class="form-label fw-semibold">Shared variables (JSON)</label>
|
||||
<textarea asp-for="VariablesJson" class="form-control font-monospace" rows="4"></textarea>
|
||||
<div class="form-text">One contract for every language: <code>[{"name":"UserName","required":true}]</code></div>
|
||||
</div>
|
||||
<p class="text-muted">Every configured service language has a tab. Leave all three content fields blank for an unused language; clear them to remove an existing version. Shared variables and the template remain.</p>
|
||||
@if (Model.Languages.Count == 0) { <p>No service languages configured. You can save the key and shared variables now, then add language codes in Edit Service.</p> }
|
||||
<div class="template-language-sheet mb-3" hidden="@(Model.Languages.Count == 0)">
|
||||
<div class="nav nav-tabs" role="tablist" aria-label="Template languages" id="languageTabs">
|
||||
@for (var i = 0; i < Model.Languages.Count; i++)
|
||||
{
|
||||
<div>@error.ErrorMessage</div>
|
||||
<button type="button" role="tab" id="language-tab-@i" aria-controls="language-pane-@i"
|
||||
aria-selected="@(i == active ? "true" : "false")" tabindex="@(i == active ? 0 : -1)"
|
||||
class="nav-link @(i == active ? "active" : "")" data-pane="language-pane-@i">@Model.Languages[i].LanguageCode</button>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
<ul class="nav nav-tabs template-editor-tabs mb-3" id="templateEditorTabs" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link active" id="edit-tab" data-bs-toggle="tab" data-bs-target="#edit-pane" type="button" role="tab" aria-controls="edit-pane" aria-selected="true">
|
||||
Edit
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" id="preview-tab" data-bs-toggle="tab" data-bs-target="#preview-pane" type="button" role="tab" aria-controls="preview-pane" aria-selected="false">
|
||||
Preview
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane fade show active" id="edit-pane" role="tabpanel" aria-labelledby="edit-tab" tabindex="0">
|
||||
<div class="row g-3 mb-3">
|
||||
<div class="col-md-5">
|
||||
<label asp-for="ServiceName" class="form-label fw-semibold">Service Name</label>
|
||||
<input asp-for="ServiceName" class="form-control" readonly="@(!Model.IsNew)" />
|
||||
<span asp-validation-for="ServiceName" class="text-danger small"></span>
|
||||
</div>
|
||||
<div class="col-md-5">
|
||||
<label asp-for="Key" class="form-label fw-semibold">Key</label>
|
||||
<input asp-for="Key" class="form-control" readonly="@(!Model.IsNew)" />
|
||||
<span asp-validation-for="Key" class="text-danger small"></span>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<label asp-for="LanguageCode" class="form-label fw-semibold">Language</label>
|
||||
<input asp-for="LanguageCode" class="form-control" readonly="@(!Model.IsNew)" />
|
||||
<span asp-validation-for="LanguageCode" class="text-danger small"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label asp-for="Subject" class="form-label fw-semibold">Subject</label>
|
||||
<input asp-for="Subject" class="form-control" />
|
||||
<span asp-validation-for="Subject" class="text-danger small"></span>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label asp-for="HtmlBody" class="form-label fw-semibold">HTML Body</label>
|
||||
<textarea asp-for="HtmlBody" class="form-control font-monospace" rows="10"></textarea>
|
||||
<span asp-validation-for="HtmlBody" class="text-danger small"></span>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label asp-for="TextBody" class="form-label fw-semibold">Text Body</label>
|
||||
<textarea asp-for="TextBody" class="form-control font-monospace" rows="5"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label asp-for="VariablesJson" class="form-label fw-semibold">Variables (JSON)</label>
|
||||
<textarea asp-for="VariablesJson" class="form-control font-monospace" rows="4"
|
||||
placeholder='[{"name":"UserName","required":true}]'></textarea>
|
||||
<span asp-validation-for="VariablesJson" class="text-danger small"></span>
|
||||
<div class="form-text">JSON array of <code>{"name":"...", "required":true|false}</code></div>
|
||||
</div>
|
||||
<div id="languagePanes">
|
||||
@for (var i = 0; i < Model.Languages.Count; i++)
|
||||
{
|
||||
<section class="language-pane" id="language-pane-@i" role="tabpanel" aria-labelledby="language-tab-@i" hidden="@(i != active)">
|
||||
<input asp-for="Languages[i].LanguageCode" type="hidden" class="language-code" />
|
||||
<div class="mb-3">
|
||||
<label asp-for="Languages[i].Subject" class="form-label fw-semibold">Subject</label>
|
||||
<input asp-for="Languages[i].Subject" class="form-control" data-content="subject" />
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label asp-for="Languages[i].HtmlBody" class="form-label fw-semibold">HTML Body</label>
|
||||
<textarea asp-for="Languages[i].HtmlBody" class="form-control font-monospace" rows="10" data-content="html"></textarea>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label asp-for="Languages[i].TextBody" class="form-label fw-semibold">Text Body</label>
|
||||
<textarea asp-for="Languages[i].TextBody" class="form-control font-monospace" rows="5" data-content="text"></textarea>
|
||||
</div>
|
||||
</section>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="tab-pane fade" id="preview-pane" role="tabpanel" aria-labelledby="preview-tab" tabindex="0">
|
||||
<div class="template-preview-panel mb-3">
|
||||
<div class="template-preview-panel-header">
|
||||
<div>
|
||||
<div class="template-preview-title">Preview</div>
|
||||
<div class="template-preview-subtitle">Rendered with sample values from the variable list.</div>
|
||||
</div>
|
||||
<span id="previewStatus" class="badge text-bg-secondary">Ready</span>
|
||||
</div>
|
||||
|
||||
<div class="template-preview-body">
|
||||
<div class="template-preview-source template-preview-section-block">
|
||||
<div class="template-preview-section-title">Sample values</div>
|
||||
<div id="previewVariables" class="template-preview-variables"></div>
|
||||
<div class="form-text mt-2">Change these values to see the rendered output update immediately.</div>
|
||||
</div>
|
||||
|
||||
<div class="template-preview-output">
|
||||
<div class="template-preview-section-title">Rendered subject</div>
|
||||
<div id="previewSubject" class="template-preview-subject"></div>
|
||||
|
||||
<div class="template-preview-section-title mt-3">Rendered HTML</div>
|
||||
<iframe id="previewHtmlFrame" class="template-preview-frame" title="Email HTML preview"></iframe>
|
||||
|
||||
<div class="template-preview-section-title mt-3">Rendered text</div>
|
||||
<pre id="previewText" class="template-preview-text mb-0"></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="template-preview-panel mb-3">
|
||||
<div class="template-preview-panel-header">
|
||||
<div>
|
||||
<div class="template-preview-title">Selected language preview: <span id="previewLanguage"></span></div>
|
||||
<div class="template-preview-subtitle">Sample values use the shared contract. External content is blocked in this preview.</div>
|
||||
</div>
|
||||
<span id="previewStatus" class="badge text-bg-secondary" role="status">Ready</span>
|
||||
</div>
|
||||
<div class="template-preview-body">
|
||||
<div class="template-preview-source template-preview-section-block">
|
||||
<div class="template-preview-section-title">Sample values</div>
|
||||
<div id="previewVariables" class="template-preview-variables"></div>
|
||||
</div>
|
||||
<div class="template-preview-output">
|
||||
<div class="template-preview-section-title">Rendered subject</div>
|
||||
<div id="previewSubject" class="template-preview-subject"></div>
|
||||
<div class="template-preview-section-title mt-3">Rendered HTML</div>
|
||||
<iframe id="previewHtmlFrame" class="template-preview-frame" sandbox="" referrerpolicy="no-referrer" title="Email HTML preview"></iframe>
|
||||
<div class="template-preview-section-title mt-3">Rendered text</div>
|
||||
<pre id="previewText" class="template-preview-text mb-0"></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@section FormActions {
|
||||
<button type="submit" form="templateForm" class="btn btn-primary">
|
||||
<i class="bi bi-floppy me-1"></i> Save
|
||||
</button>
|
||||
<a href="/admin/templates@(string.IsNullOrWhiteSpace(Model.ServiceNameFilter) && string.IsNullOrWhiteSpace(Model.KeyFilter) ? string.Empty : $"?serviceName={Uri.EscapeDataString(Model.ServiceNameFilter ?? string.Empty)}&key={Uri.EscapeDataString(Model.KeyFilter ?? string.Empty)}")" class="btn btn-secondary">
|
||||
<i class="bi bi-x-lg me-1"></i> Cancel
|
||||
</a>
|
||||
}
|
||||
|
||||
@section Scripts {
|
||||
<script>
|
||||
(function () {
|
||||
const subjectField = document.getElementById('Subject');
|
||||
const htmlField = document.getElementById('HtmlBody');
|
||||
const textField = document.getElementById('TextBody');
|
||||
const variablesField = document.getElementById('VariablesJson');
|
||||
const previewVariablesHost = document.getElementById('previewVariables');
|
||||
const previewSubject = document.getElementById('previewSubject');
|
||||
const previewText = document.getElementById('previewText');
|
||||
const previewFrame = document.getElementById('previewHtmlFrame');
|
||||
const previewStatus = document.getElementById('previewStatus');
|
||||
const previewTab = document.getElementById('preview-tab');
|
||||
|
||||
if (!subjectField || !htmlField || !textField || !variablesField || !previewVariablesHost || !previewSubject || !previewText || !previewFrame || !previewStatus) {
|
||||
return;
|
||||
}
|
||||
|
||||
function escapeHtml(value) {
|
||||
return String(value)
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/"/g, '"')
|
||||
.replace(/'/g, ''');
|
||||
}
|
||||
|
||||
function parseVariables() {
|
||||
const raw = variablesField.value?.trim() || '[]';
|
||||
const parsed = JSON.parse(raw);
|
||||
|
||||
if (!Array.isArray(parsed)) {
|
||||
throw new Error('Variables JSON must be an array.');
|
||||
}
|
||||
|
||||
return parsed
|
||||
.filter(item => item && typeof item.Name === 'string' && item.Name.trim().length > 0)
|
||||
.map(item => ({
|
||||
name: item.Name.trim(),
|
||||
required: !!item.Required
|
||||
}));
|
||||
}
|
||||
|
||||
function buildSampleValue(name) {
|
||||
return `Sample ${name}`;
|
||||
}
|
||||
|
||||
function renderVariableInputs() {
|
||||
let variables = [];
|
||||
|
||||
try {
|
||||
variables = parseVariables();
|
||||
previewStatus.className = 'badge text-bg-secondary';
|
||||
previewStatus.textContent = 'Ready';
|
||||
} catch (error) {
|
||||
previewVariablesHost.innerHTML = `<div class="alert alert-warning mb-0">${escapeHtml(error.message || 'Invalid variables JSON')}</div>`;
|
||||
previewStatus.className = 'badge text-bg-danger';
|
||||
previewStatus.textContent = 'Invalid JSON';
|
||||
updatePreview();
|
||||
return;
|
||||
}
|
||||
|
||||
if (variables.length === 0) {
|
||||
previewVariablesHost.innerHTML = '<div class="text-muted small">No variables defined.</div>';
|
||||
updatePreview();
|
||||
return;
|
||||
}
|
||||
|
||||
const currentValues = readVariableValues();
|
||||
previewVariablesHost.innerHTML = variables.map(variable => {
|
||||
const value = Object.prototype.hasOwnProperty.call(currentValues, variable.name)
|
||||
? currentValues[variable.name]
|
||||
: buildSampleValue(variable.name);
|
||||
return `
|
||||
<div class="mb-2">
|
||||
<label class="form-label small fw-semibold mb-1">${escapeHtml(variable.name)}${variable.required ? ' *' : ''}</label>
|
||||
<input type="text" class="form-control form-control-sm preview-variable-input" data-variable-name="${escapeHtml(variable.name)}" value="${escapeHtml(value)}" />
|
||||
</div>
|
||||
`;
|
||||
}).join('');
|
||||
|
||||
previewVariablesHost.querySelectorAll('.preview-variable-input').forEach(input => {
|
||||
input.addEventListener('input', updatePreview);
|
||||
});
|
||||
|
||||
updatePreview();
|
||||
}
|
||||
|
||||
function readVariableValues() {
|
||||
const values = {};
|
||||
previewVariablesHost.querySelectorAll('.preview-variable-input').forEach(input => {
|
||||
values[input.dataset.variableName] = input.value;
|
||||
});
|
||||
return values;
|
||||
}
|
||||
|
||||
function interpolate(text, values) {
|
||||
let result = text || '';
|
||||
|
||||
Object.keys(values).forEach(key => {
|
||||
const token = new RegExp(`\\{\\{${key.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}\\}\\}`, 'g');
|
||||
result = result.replace(token, values[key] ?? '');
|
||||
});
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
function updatePreview() {
|
||||
let values = {};
|
||||
|
||||
try {
|
||||
values = readVariableValues();
|
||||
} catch (error) {
|
||||
values = {};
|
||||
}
|
||||
|
||||
const renderedSubject = interpolate(subjectField.value, values);
|
||||
const renderedHtml = interpolate(htmlField.value, values);
|
||||
const renderedText = interpolate(textField.value, values);
|
||||
|
||||
previewSubject.textContent = renderedSubject || '(empty subject)';
|
||||
previewText.textContent = renderedText || '(empty text body)';
|
||||
previewFrame.srcdoc = `
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 24px;
|
||||
background: #eef2f7;
|
||||
color: #1f2937;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
.email-shell {
|
||||
max-width: 640px;
|
||||
margin: 0 auto;
|
||||
background: #ffffff;
|
||||
border: 1px solid #dbe3ee;
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 12px 30px rgba(15, 23, 42, .08);
|
||||
}
|
||||
.email-body {
|
||||
padding: 28px 36px;
|
||||
}
|
||||
img { max-width: 100%; height: auto; }
|
||||
a { color: #2563eb; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="email-shell">
|
||||
<div class="email-body">
|
||||
${renderedHtml || '<div style="color:#6b7280">No HTML body provided.</div>'}
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>`;
|
||||
}
|
||||
|
||||
variablesField.addEventListener('input', renderVariableInputs);
|
||||
subjectField.addEventListener('input', updatePreview);
|
||||
htmlField.addEventListener('input', updatePreview);
|
||||
textField.addEventListener('input', updatePreview);
|
||||
if (previewTab) {
|
||||
previewTab.addEventListener('shown.bs.tab', updatePreview);
|
||||
}
|
||||
|
||||
renderVariableInputs();
|
||||
})();
|
||||
</script>
|
||||
}
|
||||
</form>
|
||||
@section FormActions {
|
||||
<button type="submit" form="templateForm" class="btn btn-primary"><i class="bi bi-floppy me-1"></i> Save</button>
|
||||
<a id="cancelTemplate" href="@Url.Action("Index", "AdminTemplates", new { serviceId = Model.ServiceId, key = Model.KeyFilter })" class="btn btn-secondary">Cancel</a>
|
||||
}
|
||||
@section Scripts {
|
||||
<script src="~/js/email-template-editor.js" asp-append-version="true"></script>
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user