refactor(ui/design): card grid, SMTP split, TemplateEdit vertical-stack
Templates: <h4> in flex header, Expand/Collapse moved into a Bulk actions dropdown, hover-visible kebab on tree nodes with aria-labels. TreeView CSS gets a .tv-kebab opacity-on-hover utility. TemplateCreate: form-control (not -sm) for primary inputs; accessible Back button. TemplateEdit: Properties card vertical-stacked with Save at the bottom-right and Parent rendered as readonly plaintext. Add-member forms (Attributes, Alarms, Scripts, Compositions) reflowed from horizontal row g-2 align-items-end into cards with stacked col-12 inputs (Scripts gets rows=10). Lock/Unlock badges show full words. Per-row Delete moved into a kebab dropdown. Tab nav gains role="tablist" / role="tab" / aria-selected / aria-controls and panels get role="tabpanel". Validation entries get consistent strong-and- muted styling. SharedScripts: migrated from table to card grid (col-lg-6) matching Sites; cards show code preview + param/return badges + Edit + kebab. Search filter, empty state CTA, @key. SharedScriptForm: small ?-icon tooltips next to Parameters and Return Definition labels. ExternalSystems: SMTP split out to its own page; remaining tabs ( External Systems, DB Connections, Notification Lists, API Methods, API Keys) unified as card grids with per-tab search + empty-state CTA. Tab nav gets full ARIA instrumentation. Header gains a link to the new SMTP page. New page SmtpConfiguration.razor at /design/smtp: vertical-stacked form using the existing Credentials field on the entity. ExternalSystemForm: AuthConfig placeholder updates based on the selected AuthType (None / ApiKey / BasicAuth). DbConnectionForm: form-text below Connection String noting that the value is stored in plain text and is admin-only. ApiMethodForm: Script textarea rows=10; JSON example placeholders for Params and Returns. NotificationListForm: form-control sizing on Name/email inputs; thead.table-dark -> table-light on the recipients table.
This commit is contained in:
Joseph Doherty
@@ -11,10 +11,14 @@
|
||||
@inject NavigationManager NavigationManager
|
||||
|
||||
<div class="container-fluid mt-3">
|
||||
<h4 class="mb-3">Integration Definitions</h4>
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<h4 class="mb-0">Integration Definitions</h4>
|
||||
<a class="btn btn-outline-secondary btn-sm"
|
||||
href="/design/smtp">Email configuration →</a>
|
||||
</div>
|
||||
|
||||
<ToastNotification @ref="_toast" />
|
||||
<ConfirmDialog @ref="_confirmDialog" />
|
||||
<ConfirmDialog @ref="_confirmDialog" ConfirmButtonClass="btn-danger" />
|
||||
|
||||
@if (_loading)
|
||||
{
|
||||
@@ -26,33 +30,74 @@
|
||||
}
|
||||
else
|
||||
{
|
||||
<ul class="nav nav-tabs mb-3">
|
||||
<li class="nav-item">
|
||||
<button class="nav-link @(_tab == "extsys" ? "active" : "")" @onclick='() => _tab = "extsys"'>
|
||||
<ul class="nav nav-tabs mb-3" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link @(_tab == "extsys" ? "active" : "")"
|
||||
role="tab"
|
||||
aria-selected="@(_tab == "extsys" ? "true" : "false")"
|
||||
aria-controls="int-tab-extsys"
|
||||
@onclick='() => _tab = "extsys"'>
|
||||
External Systems <span class="badge bg-secondary">@_externalSystems.Count</span>
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<button class="nav-link @(_tab == "dbconn" ? "active" : "")" @onclick='() => _tab = "dbconn"'>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link @(_tab == "dbconn" ? "active" : "")"
|
||||
role="tab"
|
||||
aria-selected="@(_tab == "dbconn" ? "true" : "false")"
|
||||
aria-controls="int-tab-dbconn"
|
||||
@onclick='() => _tab = "dbconn"'>
|
||||
Database Connections <span class="badge bg-secondary">@_dbConnections.Count</span>
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<button class="nav-link @(_tab == "notif" ? "active" : "")" @onclick='() => _tab = "notif"'>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link @(_tab == "notif" ? "active" : "")"
|
||||
role="tab"
|
||||
aria-selected="@(_tab == "notif" ? "true" : "false")"
|
||||
aria-controls="int-tab-notif"
|
||||
@onclick='() => _tab = "notif"'>
|
||||
Notification Lists <span class="badge bg-secondary">@_notificationLists.Count</span>
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<button class="nav-link @(_tab == "inbound" ? "active" : "")" @onclick='() => _tab = "inbound"'>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link @(_tab == "inbound" ? "active" : "")"
|
||||
role="tab"
|
||||
aria-selected="@(_tab == "inbound" ? "true" : "false")"
|
||||
aria-controls="int-tab-inbound"
|
||||
@onclick='() => _tab = "inbound"'>
|
||||
Inbound API Methods <span class="badge bg-secondary">@_apiMethods.Count</span>
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link @(_tab == "apikeys" ? "active" : "")"
|
||||
role="tab"
|
||||
aria-selected="@(_tab == "apikeys" ? "true" : "false")"
|
||||
aria-controls="int-tab-apikeys"
|
||||
@onclick='() => _tab = "apikeys"'>
|
||||
API Keys <span class="badge bg-secondary">@_apiKeys.Count</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@if (_tab == "extsys") { @RenderExternalSystems() }
|
||||
else if (_tab == "dbconn") { @RenderDbConnections() }
|
||||
else if (_tab == "notif") { @RenderNotificationLists() @RenderSmtpConfig() }
|
||||
else if (_tab == "inbound") { @RenderInboundApiMethods() @RenderApiKeyMethodAssignments() }
|
||||
@if (_tab == "extsys")
|
||||
{
|
||||
<div role="tabpanel" id="int-tab-extsys">@RenderExternalSystems()</div>
|
||||
}
|
||||
else if (_tab == "dbconn")
|
||||
{
|
||||
<div role="tabpanel" id="int-tab-dbconn">@RenderDbConnections()</div>
|
||||
}
|
||||
else if (_tab == "notif")
|
||||
{
|
||||
<div role="tabpanel" id="int-tab-notif">@RenderNotificationLists()</div>
|
||||
}
|
||||
else if (_tab == "inbound")
|
||||
{
|
||||
<div role="tabpanel" id="int-tab-inbound">@RenderInboundApiMethods()</div>
|
||||
}
|
||||
else if (_tab == "apikeys")
|
||||
{
|
||||
<div role="tabpanel" id="int-tab-apikeys">@RenderApiKeys()</div>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
|
||||
@@ -63,27 +108,44 @@
|
||||
|
||||
// External Systems
|
||||
private List<ExternalSystemDefinition> _externalSystems = new();
|
||||
private string _extsysSearch = "";
|
||||
private IEnumerable<ExternalSystemDefinition> FilteredExternalSystems =>
|
||||
string.IsNullOrWhiteSpace(_extsysSearch)
|
||||
? _externalSystems
|
||||
: _externalSystems.Where(es => es.Name?.Contains(_extsysSearch, StringComparison.OrdinalIgnoreCase) ?? false);
|
||||
|
||||
// Database Connections
|
||||
private List<DatabaseConnectionDefinition> _dbConnections = new();
|
||||
private string _dbConnSearch = "";
|
||||
private IEnumerable<DatabaseConnectionDefinition> FilteredDbConnections =>
|
||||
string.IsNullOrWhiteSpace(_dbConnSearch)
|
||||
? _dbConnections
|
||||
: _dbConnections.Where(dc => dc.Name?.Contains(_dbConnSearch, StringComparison.OrdinalIgnoreCase) ?? false);
|
||||
|
||||
// SMTP Configuration
|
||||
private List<SmtpConfiguration> _smtpConfigs = new();
|
||||
private bool _showSmtpForm;
|
||||
private SmtpConfiguration? _editingSmtp;
|
||||
private string _smtpHost = "", _smtpFromAddress = "", _smtpAuthType = "OAuth2";
|
||||
private int _smtpPort = 587;
|
||||
private string? _smtpFormError;
|
||||
|
||||
// API Key list
|
||||
// API Keys
|
||||
private List<ApiKey> _apiKeys = new();
|
||||
private string _apiKeySearch = "";
|
||||
private IEnumerable<ApiKey> FilteredApiKeys =>
|
||||
string.IsNullOrWhiteSpace(_apiKeySearch)
|
||||
? _apiKeys
|
||||
: _apiKeys.Where(k => k.Name?.Contains(_apiKeySearch, StringComparison.OrdinalIgnoreCase) ?? false);
|
||||
|
||||
// Notification Lists
|
||||
private List<NotificationList> _notificationLists = new();
|
||||
private Dictionary<int, List<NotificationRecipient>> _recipients = new();
|
||||
private string _notifSearch = "";
|
||||
private IEnumerable<NotificationList> FilteredNotificationLists =>
|
||||
string.IsNullOrWhiteSpace(_notifSearch)
|
||||
? _notificationLists
|
||||
: _notificationLists.Where(n => n.Name?.Contains(_notifSearch, StringComparison.OrdinalIgnoreCase) ?? false);
|
||||
|
||||
// Inbound API Methods
|
||||
private List<ApiMethod> _apiMethods = new();
|
||||
private string _apiMethodSearch = "";
|
||||
private IEnumerable<ApiMethod> FilteredApiMethods =>
|
||||
string.IsNullOrWhiteSpace(_apiMethodSearch)
|
||||
? _apiMethods
|
||||
: _apiMethods.Where(m => m.Name?.Contains(_apiMethodSearch, StringComparison.OrdinalIgnoreCase) ?? false);
|
||||
|
||||
private ToastNotification _toast = default!;
|
||||
private ConfirmDialog _confirmDialog = default!;
|
||||
@@ -110,7 +172,6 @@
|
||||
}
|
||||
|
||||
_apiMethods = (await InboundApiRepository.GetAllApiMethodsAsync()).ToList();
|
||||
_smtpConfigs = (await NotificationRepository.GetAllSmtpConfigurationsAsync()).ToList();
|
||||
_apiKeys = (await InboundApiRepository.GetAllApiKeysAsync()).ToList();
|
||||
}
|
||||
catch (Exception ex) { _errorMessage = ex.Message; }
|
||||
@@ -120,27 +181,67 @@
|
||||
// ==== External Systems ====
|
||||
private RenderFragment RenderExternalSystems() => __builder =>
|
||||
{
|
||||
<div class="d-flex justify-content-between mb-2">
|
||||
<h6 class="mb-0">External Systems</h6>
|
||||
<button class="btn btn-primary btn-sm" @onclick='() => NavigationManager.NavigateTo("/design/external-systems/create")'>Add</button>
|
||||
<div class="d-flex justify-content-between align-items-center mb-2">
|
||||
<h5 class="mb-0">External Systems</h5>
|
||||
<button class="btn btn-primary btn-sm" @onclick='() => NavigationManager.NavigateTo("/design/external-systems/create")'>Add External System</button>
|
||||
</div>
|
||||
|
||||
<table class="table table-sm table-striped">
|
||||
<thead class="table-dark"><tr><th>Name</th><th>URL</th><th>Auth</th><th>Retries</th><th>Delay</th><th style="width:120px;">Actions</th></tr></thead>
|
||||
<tbody>
|
||||
@foreach (var es in _externalSystems)
|
||||
@if (_externalSystems.Count == 0)
|
||||
{
|
||||
<div class="text-center py-5 text-muted">
|
||||
<p class="mb-3">No external systems configured.</p>
|
||||
<button class="btn btn-primary btn-sm"
|
||||
@onclick='() => NavigationManager.NavigateTo("/design/external-systems/create")'>
|
||||
Add your first external system
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="mb-3" style="max-width: 320px;">
|
||||
<input class="form-control form-control-sm"
|
||||
placeholder="Filter by name…"
|
||||
@bind="_extsysSearch" @bind:event="oninput" />
|
||||
</div>
|
||||
|
||||
@if (!FilteredExternalSystems.Any())
|
||||
{
|
||||
<p class="text-muted small">No external systems match the filter.</p>
|
||||
}
|
||||
|
||||
<div class="row g-3">
|
||||
@foreach (var es in FilteredExternalSystems)
|
||||
{
|
||||
<tr>
|
||||
<td>@es.Name</td><td class="small">@es.EndpointUrl</td><td><span class="badge bg-secondary">@es.AuthType</span></td>
|
||||
<td class="small">@es.MaxRetries</td><td class="small">@es.RetryDelay.TotalSeconds s</td>
|
||||
<td>
|
||||
<button class="btn btn-outline-primary btn-sm py-0 px-1 me-1" @onclick='() => NavigationManager.NavigateTo($"/design/external-systems/{es.Id}/edit")'>Edit</button>
|
||||
<button class="btn btn-outline-danger btn-sm py-0 px-1" @onclick="() => DeleteExtSys(es)">Delete</button>
|
||||
</td>
|
||||
</tr>
|
||||
<div class="col-lg-6 col-12" @key="es.Id">
|
||||
<div class="card h-100">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between align-items-start mb-2">
|
||||
<h5 class="card-title mb-0">@es.Name</h5>
|
||||
<div class="d-flex gap-1">
|
||||
<button class="btn btn-outline-primary btn-sm" @onclick='() => NavigationManager.NavigateTo($"/design/external-systems/{es.Id}/edit")'>Edit</button>
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-outline-secondary btn-sm"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
aria-label="@($"More actions for {es.Name}")">⋮</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end">
|
||||
<li><button class="dropdown-item text-danger" @onclick="() => DeleteExtSys(es)">Delete</button></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="small text-muted text-truncate mb-1" title="@es.EndpointUrl">@es.EndpointUrl</p>
|
||||
<div>
|
||||
<span class="badge bg-secondary me-1">@es.AuthType</span>
|
||||
<span class="badge bg-light text-dark me-1">Max @es.MaxRetries retries</span>
|
||||
<span class="badge bg-light text-dark">Delay @es.RetryDelay.TotalSeconds s</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
}
|
||||
};
|
||||
|
||||
private async Task DeleteExtSys(ExternalSystemDefinition es)
|
||||
@@ -153,27 +254,66 @@
|
||||
// ==== Database Connections ====
|
||||
private RenderFragment RenderDbConnections() => __builder =>
|
||||
{
|
||||
<div class="d-flex justify-content-between mb-2">
|
||||
<h6 class="mb-0">Database Connections</h6>
|
||||
<button class="btn btn-primary btn-sm" @onclick='() => NavigationManager.NavigateTo("/design/db-connections/create")'>Add</button>
|
||||
<div class="d-flex justify-content-between align-items-center mb-2">
|
||||
<h5 class="mb-0">Database Connections</h5>
|
||||
<button class="btn btn-primary btn-sm" @onclick='() => NavigationManager.NavigateTo("/design/db-connections/create")'>Add Database Connection</button>
|
||||
</div>
|
||||
|
||||
<table class="table table-sm table-striped">
|
||||
<thead class="table-dark"><tr><th>Name</th><th>Connection String</th><th>Retries</th><th>Delay</th><th style="width:120px;">Actions</th></tr></thead>
|
||||
<tbody>
|
||||
@foreach (var dc in _dbConnections)
|
||||
@if (_dbConnections.Count == 0)
|
||||
{
|
||||
<div class="text-center py-5 text-muted">
|
||||
<p class="mb-3">No database connections configured.</p>
|
||||
<button class="btn btn-primary btn-sm"
|
||||
@onclick='() => NavigationManager.NavigateTo("/design/db-connections/create")'>
|
||||
Add your first database connection
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="mb-3" style="max-width: 320px;">
|
||||
<input class="form-control form-control-sm"
|
||||
placeholder="Filter by name…"
|
||||
@bind="_dbConnSearch" @bind:event="oninput" />
|
||||
</div>
|
||||
|
||||
@if (!FilteredDbConnections.Any())
|
||||
{
|
||||
<p class="text-muted small">No database connections match the filter.</p>
|
||||
}
|
||||
|
||||
<div class="row g-3">
|
||||
@foreach (var dc in FilteredDbConnections)
|
||||
{
|
||||
<tr>
|
||||
<td>@dc.Name</td><td class="small text-muted text-truncate" style="max-width:400px;">@dc.ConnectionString</td>
|
||||
<td class="small">@dc.MaxRetries</td><td class="small">@dc.RetryDelay.TotalSeconds s</td>
|
||||
<td>
|
||||
<button class="btn btn-outline-primary btn-sm py-0 px-1 me-1" @onclick='() => NavigationManager.NavigateTo($"/design/db-connections/{dc.Id}/edit")'>Edit</button>
|
||||
<button class="btn btn-outline-danger btn-sm py-0 px-1" @onclick="() => DeleteDbConn(dc)">Delete</button>
|
||||
</td>
|
||||
</tr>
|
||||
<div class="col-lg-6 col-12" @key="dc.Id">
|
||||
<div class="card h-100">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between align-items-start mb-2">
|
||||
<h5 class="card-title mb-0">@dc.Name</h5>
|
||||
<div class="d-flex gap-1">
|
||||
<button class="btn btn-outline-primary btn-sm" @onclick='() => NavigationManager.NavigateTo($"/design/db-connections/{dc.Id}/edit")'>Edit</button>
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-outline-secondary btn-sm"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
aria-label="@($"More actions for {dc.Name}")">⋮</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end">
|
||||
<li><button class="dropdown-item text-danger" @onclick="() => DeleteDbConn(dc)">Delete</button></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="small text-muted text-truncate mb-1" title="@dc.ConnectionString">@dc.ConnectionString</p>
|
||||
<div>
|
||||
<span class="badge bg-light text-dark me-1">Max @dc.MaxRetries retries</span>
|
||||
<span class="badge bg-light text-dark">Delay @dc.RetryDelay.TotalSeconds s</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
}
|
||||
};
|
||||
|
||||
private async Task DeleteDbConn(DatabaseConnectionDefinition dc)
|
||||
@@ -186,39 +326,73 @@
|
||||
// ==== Notification Lists ====
|
||||
private RenderFragment RenderNotificationLists() => __builder =>
|
||||
{
|
||||
<div class="d-flex justify-content-between mb-2">
|
||||
<h6 class="mb-0">Notification Lists</h6>
|
||||
<button class="btn btn-primary btn-sm" @onclick='() => NavigationManager.NavigateTo("/design/notification-lists/create")'>Add List</button>
|
||||
<div class="d-flex justify-content-between align-items-center mb-2">
|
||||
<h5 class="mb-0">Notification Lists</h5>
|
||||
<button class="btn btn-primary btn-sm" @onclick='() => NavigationManager.NavigateTo("/design/notification-lists/create")'>Add Notification List</button>
|
||||
</div>
|
||||
|
||||
@foreach (var list in _notificationLists)
|
||||
@if (_notificationLists.Count == 0)
|
||||
{
|
||||
<div class="card mb-2">
|
||||
<div class="card-header d-flex justify-content-between align-items-center py-2">
|
||||
<strong>@list.Name</strong>
|
||||
<div>
|
||||
<button class="btn btn-outline-primary btn-sm py-0 px-1 me-1" @onclick='() => NavigationManager.NavigateTo($"/design/notification-lists/{list.Id}/edit")'>Edit</button>
|
||||
<button class="btn btn-outline-danger btn-sm py-0 px-1" @onclick="() => DeleteNotifList(list)">Delete</button>
|
||||
<div class="text-center py-5 text-muted">
|
||||
<p class="mb-3">No notification lists configured.</p>
|
||||
<button class="btn btn-primary btn-sm"
|
||||
@onclick='() => NavigationManager.NavigateTo("/design/notification-lists/create")'>
|
||||
Add your first notification list
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="mb-3" style="max-width: 320px;">
|
||||
<input class="form-control form-control-sm"
|
||||
placeholder="Filter by name…"
|
||||
@bind="_notifSearch" @bind:event="oninput" />
|
||||
</div>
|
||||
|
||||
@if (!FilteredNotificationLists.Any())
|
||||
{
|
||||
<p class="text-muted small">No notification lists match the filter.</p>
|
||||
}
|
||||
|
||||
<div class="row g-3">
|
||||
@foreach (var list in FilteredNotificationLists)
|
||||
{
|
||||
var recips = _recipients.GetValueOrDefault(list.Id);
|
||||
<div class="col-lg-6 col-12" @key="list.Id">
|
||||
<div class="card h-100">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between align-items-start mb-2">
|
||||
<h5 class="card-title mb-0">@list.Name</h5>
|
||||
<div class="d-flex gap-1">
|
||||
<button class="btn btn-outline-primary btn-sm" @onclick='() => NavigationManager.NavigateTo($"/design/notification-lists/{list.Id}/edit")'>Edit</button>
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-outline-secondary btn-sm"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
aria-label="@($"More actions for {list.Name}")">⋮</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end">
|
||||
<li><button class="dropdown-item text-danger" @onclick="() => DeleteNotifList(list)">Delete</button></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@if (recips == null || recips.Count == 0)
|
||||
{
|
||||
<p class="text-muted small fst-italic mb-0">No recipients.</p>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div>
|
||||
@foreach (var r in recips)
|
||||
{
|
||||
<span class="badge bg-light text-dark me-1 mb-1">@r.Name <@r.EmailAddress></span>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body p-2">
|
||||
@{
|
||||
var recips = _recipients.GetValueOrDefault(list.Id);
|
||||
}
|
||||
@if (recips == null || recips.Count == 0)
|
||||
{
|
||||
<span class="text-muted small">No recipients.</span>
|
||||
}
|
||||
else
|
||||
{
|
||||
@foreach (var r in recips)
|
||||
{
|
||||
<span class="badge bg-light text-dark me-1 mb-1">
|
||||
@r.Name <@r.EmailAddress>
|
||||
</span>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
};
|
||||
@@ -233,28 +407,69 @@
|
||||
// ==== Inbound API Methods ====
|
||||
private RenderFragment RenderInboundApiMethods() => __builder =>
|
||||
{
|
||||
<div class="d-flex justify-content-between mb-2">
|
||||
<h6 class="mb-0">Inbound API Methods</h6>
|
||||
<button class="btn btn-primary btn-sm" @onclick='() => NavigationManager.NavigateTo("/design/api-methods/create")'>Add Method</button>
|
||||
<div class="d-flex justify-content-between align-items-center mb-2">
|
||||
<h5 class="mb-0">Inbound API Methods</h5>
|
||||
<button class="btn btn-primary btn-sm" @onclick='() => NavigationManager.NavigateTo("/design/api-methods/create")'>Add API Method</button>
|
||||
</div>
|
||||
|
||||
<table class="table table-sm table-striped">
|
||||
<thead class="table-dark"><tr><th>Name</th><th>Timeout</th><th>Script (preview)</th><th style="width:120px;">Actions</th></tr></thead>
|
||||
<tbody>
|
||||
@foreach (var m in _apiMethods)
|
||||
@if (_apiMethods.Count == 0)
|
||||
{
|
||||
<div class="text-center py-5 text-muted">
|
||||
<p class="mb-3">No API methods configured.</p>
|
||||
<button class="btn btn-primary btn-sm"
|
||||
@onclick='() => NavigationManager.NavigateTo("/design/api-methods/create")'>
|
||||
Add your first API method
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="mb-3" style="max-width: 320px;">
|
||||
<input class="form-control form-control-sm"
|
||||
placeholder="Filter by name…"
|
||||
@bind="_apiMethodSearch" @bind:event="oninput" />
|
||||
</div>
|
||||
|
||||
@if (!FilteredApiMethods.Any())
|
||||
{
|
||||
<p class="text-muted small">No API methods match the filter.</p>
|
||||
}
|
||||
|
||||
<div class="row g-3">
|
||||
@foreach (var m in FilteredApiMethods)
|
||||
{
|
||||
<tr>
|
||||
<td><code>POST /api/@m.Name</code></td>
|
||||
<td>@m.TimeoutSeconds s</td>
|
||||
<td class="small font-monospace text-truncate" style="max-width:300px;">@m.Script[..Math.Min(60, m.Script.Length)]</td>
|
||||
<td>
|
||||
<button class="btn btn-outline-primary btn-sm py-0 px-1 me-1" @onclick='() => NavigationManager.NavigateTo($"/design/api-methods/{m.Id}/edit")'>Edit</button>
|
||||
<button class="btn btn-outline-danger btn-sm py-0 px-1" @onclick="() => DeleteApiMethod(m)">Delete</button>
|
||||
</td>
|
||||
</tr>
|
||||
var preview = m.Script.Length > 80 ? m.Script[..80] + "…" : m.Script;
|
||||
<div class="col-lg-6 col-12" @key="m.Id">
|
||||
<div class="card h-100">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between align-items-start mb-2">
|
||||
<div>
|
||||
<h5 class="card-title mb-1">@m.Name</h5>
|
||||
<code class="small">POST /api/@m.Name</code>
|
||||
</div>
|
||||
<div class="d-flex gap-1">
|
||||
<button class="btn btn-outline-primary btn-sm" @onclick='() => NavigationManager.NavigateTo($"/design/api-methods/{m.Id}/edit")'>Edit</button>
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-outline-secondary btn-sm"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
aria-label="@($"More actions for {m.Name}")">⋮</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end">
|
||||
<li><button class="dropdown-item text-danger" @onclick="() => DeleteApiMethod(m)">Delete</button></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="small text-muted font-monospace mb-2"
|
||||
style="white-space: pre-wrap; word-break: break-all;"
|
||||
title="@m.Script">@preview</pre>
|
||||
<span class="badge bg-light text-dark">Timeout @m.TimeoutSeconds s</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
}
|
||||
};
|
||||
|
||||
private async Task DeleteApiMethod(ApiMethod m)
|
||||
@@ -264,115 +479,56 @@
|
||||
catch (Exception ex) { _toast.ShowError(ex.Message); }
|
||||
}
|
||||
|
||||
// ==== SMTP Configuration ====
|
||||
private RenderFragment RenderSmtpConfig() => __builder =>
|
||||
// ==== API Keys ====
|
||||
private RenderFragment RenderApiKeys() => __builder =>
|
||||
{
|
||||
<hr class="my-3" />
|
||||
<div class="d-flex justify-content-between mb-2">
|
||||
<h6 class="mb-0">SMTP Configuration</h6>
|
||||
@if (_smtpConfigs.Count == 0)
|
||||
{
|
||||
<button class="btn btn-primary btn-sm" @onclick="ShowSmtpAddForm">Add SMTP Config</button>
|
||||
}
|
||||
<div class="d-flex justify-content-between align-items-center mb-2">
|
||||
<h5 class="mb-0">API Keys</h5>
|
||||
</div>
|
||||
|
||||
@if (_showSmtpForm)
|
||||
@if (_apiKeys.Count == 0)
|
||||
{
|
||||
<div class="card mb-2"><div class="card-body">
|
||||
<div class="row g-2 align-items-end">
|
||||
<div class="col-md-3"><label class="form-label small">Host</label><input type="text" class="form-control form-control-sm" @bind="_smtpHost" /></div>
|
||||
<div class="col-md-1"><label class="form-label small">Port</label><input type="number" class="form-control form-control-sm" @bind="_smtpPort" /></div>
|
||||
<div class="col-md-2"><label class="form-label small">Auth Type</label>
|
||||
<select class="form-select form-select-sm" @bind="_smtpAuthType"><option>OAuth2</option><option>Basic</option></select></div>
|
||||
<div class="col-md-3"><label class="form-label small">From Address</label><input type="email" class="form-control form-control-sm" @bind="_smtpFromAddress" /></div>
|
||||
<div class="col-md-3">
|
||||
<button class="btn btn-success btn-sm me-1" @onclick="SaveSmtpConfig">Save</button>
|
||||
<button class="btn btn-outline-secondary btn-sm" @onclick="() => _showSmtpForm = false">Cancel</button></div>
|
||||
</div>
|
||||
@if (_smtpFormError != null) { <div class="text-danger small mt-1">@_smtpFormError</div> }
|
||||
</div></div>
|
||||
}
|
||||
|
||||
@foreach (var smtp in _smtpConfigs)
|
||||
{
|
||||
<div class="card mb-2">
|
||||
<div class="card-body py-2">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<span class="small">
|
||||
<strong>@smtp.Host</strong>:@smtp.Port |
|
||||
Auth: <span class="badge bg-secondary">@smtp.AuthType</span> |
|
||||
From: @smtp.FromAddress
|
||||
</span>
|
||||
<button class="btn btn-outline-primary btn-sm py-0 px-1" @onclick="() => { _editingSmtp = smtp; _smtpHost = smtp.Host; _smtpPort = smtp.Port; _smtpAuthType = smtp.AuthType; _smtpFromAddress = smtp.FromAddress; _showSmtpForm = true; }">Edit</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center py-5 text-muted">
|
||||
<p class="mb-3">No API keys configured. Add your first API key from the Admin section.</p>
|
||||
</div>
|
||||
}
|
||||
};
|
||||
|
||||
private void ShowSmtpAddForm()
|
||||
{
|
||||
_showSmtpForm = true;
|
||||
_editingSmtp = null;
|
||||
_smtpHost = string.Empty;
|
||||
_smtpPort = 587;
|
||||
_smtpAuthType = "OAuth2";
|
||||
_smtpFromAddress = string.Empty;
|
||||
_smtpFormError = null;
|
||||
}
|
||||
|
||||
private async Task SaveSmtpConfig()
|
||||
{
|
||||
_smtpFormError = null;
|
||||
if (string.IsNullOrWhiteSpace(_smtpHost) || string.IsNullOrWhiteSpace(_smtpFromAddress)) { _smtpFormError = "Host and From Address required."; return; }
|
||||
try
|
||||
else
|
||||
{
|
||||
if (_editingSmtp != null)
|
||||
{
|
||||
_editingSmtp.Host = _smtpHost.Trim();
|
||||
_editingSmtp.Port = _smtpPort;
|
||||
_editingSmtp.AuthType = _smtpAuthType;
|
||||
_editingSmtp.FromAddress = _smtpFromAddress.Trim();
|
||||
await NotificationRepository.UpdateSmtpConfigurationAsync(_editingSmtp);
|
||||
}
|
||||
else
|
||||
{
|
||||
var smtp = new SmtpConfiguration(_smtpHost.Trim(), _smtpAuthType, _smtpFromAddress.Trim()) { Port = _smtpPort };
|
||||
await NotificationRepository.AddSmtpConfigurationAsync(smtp);
|
||||
}
|
||||
await NotificationRepository.SaveChangesAsync();
|
||||
_showSmtpForm = false;
|
||||
_toast.ShowSuccess("SMTP configuration saved.");
|
||||
await LoadAllAsync();
|
||||
}
|
||||
catch (Exception ex) { _smtpFormError = ex.Message; }
|
||||
}
|
||||
<div class="mb-3" style="max-width: 320px;">
|
||||
<input class="form-control form-control-sm"
|
||||
placeholder="Filter by name…"
|
||||
@bind="_apiKeySearch" @bind:event="oninput" />
|
||||
</div>
|
||||
|
||||
// ==== API Key → Method Assignments ====
|
||||
private RenderFragment RenderApiKeyMethodAssignments() => __builder =>
|
||||
{
|
||||
<hr class="my-3" />
|
||||
<div class="d-flex justify-content-between mb-2">
|
||||
<h6 class="mb-0">API Keys</h6>
|
||||
</div>
|
||||
@if (!FilteredApiKeys.Any())
|
||||
{
|
||||
<p class="text-muted small">No API keys match the filter.</p>
|
||||
}
|
||||
|
||||
<table class="table table-sm table-striped">
|
||||
<thead class="table-dark"><tr><th>Key Name</th><th>Enabled</th><th style="width:120px;">Actions</th></tr></thead>
|
||||
<tbody>
|
||||
@foreach (var key in _apiKeys)
|
||||
<div class="row g-3">
|
||||
@foreach (var key in FilteredApiKeys)
|
||||
{
|
||||
<tr>
|
||||
<td>@key.Name</td>
|
||||
<td><span class="badge @(key.IsEnabled ? "bg-success" : "bg-secondary")">@(key.IsEnabled ? "Enabled" : "Disabled")</span></td>
|
||||
<td>
|
||||
<button class="btn btn-outline-primary btn-sm py-0 px-1" @onclick="() => ToggleApiKeyEnabled(key)">
|
||||
@(key.IsEnabled ? "Disable" : "Enable")
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<div class="col-lg-6 col-12" @key="key.Id">
|
||||
<div class="card h-100">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between align-items-start mb-2">
|
||||
<h5 class="card-title mb-0">@key.Name</h5>
|
||||
<span class="badge @(key.IsEnabled ? "bg-success" : "bg-secondary")">
|
||||
@(key.IsEnabled ? "Enabled" : "Disabled")
|
||||
</span>
|
||||
</div>
|
||||
<div class="d-flex gap-1">
|
||||
<button class="btn btn-outline-primary btn-sm"
|
||||
@onclick="() => ToggleApiKeyEnabled(key)">
|
||||
@(key.IsEnabled ? "Disable" : "Enable")
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
}
|
||||
};
|
||||
|
||||
private async Task ToggleApiKeyEnabled(ApiKey key)
|
||||
|
||||
Reference in New Issue
Block a user