dohertj2/scadalink-design
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor(ui/design): card grid, SMTP split, TemplateEdit vertical-stack

Browse Source 
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
2026-05-12 03:32:39 -04:00
parent da2c0d714e
commit b6e2ec8a50
12 changed files with 1039 additions and 408 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/ScadaLink.CentralUI/Components/Pages/Design/ApiMethodForm.razor
View File

@@ -30,15 +30,17 @@
</div>
<div class="mb-3">
<label class="form-label">Params (JSON)</label>
<input type="text" class="form-control" @bind="_params" />
<input type="text" class="form-control" @bind="_params"
placeholder='[{"name":"id","type":"Int32"}]' />
</div>
<div class="mb-3">
<label class="form-label">Returns (JSON)</label>
<input type="text" class="form-control" @bind="_returns" />
<input type="text" class="form-control" @bind="_returns"
placeholder='{"type":"Boolean"}' />
</div>
<div class="mb-3">
<label class="form-label">Script</label>
<textarea class="form-control font-monospace" rows="5" @bind="_script" style="font-size: 0.85rem;"></textarea>
<textarea class="form-control font-monospace" rows="10" @bind="_script" style="font-size: 0.85rem;"></textarea>
</div>
@if (_formError != null)

1
src/ScadaLink.CentralUI/Components/Pages/Design/DbConnectionForm.razor
View File

@@ -27,6 +27,7 @@
<div class="mb-3">
<label class="form-label">Connection String</label>
<input type="text" class="form-control" @bind="_connectionString" />
<div class="form-text">Treat as sensitive — visible to admins only.</div>
</div>
<div class="mb-3">
<label class="form-label">Max Retries</label>

12
src/ScadaLink.CentralUI/Components/Pages/Design/ExternalSystemForm.razor
View File

@@ -33,11 +33,13 @@
<select class="form-select" @bind="_authType">
<option>ApiKey</option>
<option>BasicAuth</option>
<option>None</option>
</select>
</div>
<div class="mb-3">
<label class="form-label">Auth Config (JSON)</label>
<input type="text" class="form-control" @bind="_authConfig" />
<input type="text" class="form-control" @bind="_authConfig"
placeholder="@_authConfigPlaceholder" />
</div>
<div class="mb-3">
<label class="form-label">Max Retries</label>
@@ -74,6 +76,14 @@
private ExternalSystemDefinition? _existing;
// Per-AuthType placeholder that hints at the expected JSON shape for AuthConfig.
private string _authConfigPlaceholder => _authType switch
{
"ApiKey" => "{\"key\":\"xyz\"}",
"BasicAuth" => "{\"username\":\"u\",\"password\":\"p\"}",
_ => "{}"
};
protected override async Task OnInitializedAsync()
{
if (Id.HasValue)

564
src/ScadaLink.CentralUI/Components/Pages/Design/ExternalSystems.razor
View File

@@ -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 &lt;@r.EmailAddress&gt;</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 &lt;@r.EmailAddress&gt;
</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)

12
src/ScadaLink.CentralUI/Components/Pages/Design/NotificationListForm.razor
View File

@@ -44,25 +44,25 @@
<div class="card mb-3">
<div class="card-body">
<div class="mb-2">
<label class="form-label small">Name</label>
<input type="text" class="form-control form-control-sm" @bind="_recipientName" />
<label class="form-label">Name</label>
<input type="text" class="form-control" @bind="_recipientName" />
</div>
<div class="mb-2">
<label class="form-label small">Email</label>
<input type="email" class="form-control form-control-sm" @bind="_recipientEmail" />
<label class="form-label">Email</label>
<input type="email" class="form-control" @bind="_recipientEmail" />
</div>
@if (_recipientFormError != null)
{
<div class="text-danger small mt-2">@_recipientFormError</div>
}
<div class="mt-3">
<button class="btn btn-success btn-sm" @onclick="SaveRecipient">Add</button>
<button class="btn btn-success" @onclick="SaveRecipient">Add</button>
</div>
</div>
</div>
<table class="table table-sm table-striped">
<thead class="table-dark">
<thead class="table-light">
<tr>
<th>Name</th>
<th>Email</th>

14
src/ScadaLink.CentralUI/Components/Pages/Design/SharedScriptForm.razor
View File

@@ -30,12 +30,22 @@
disabled="@(Id.HasValue)" />
</div>
<div class="mb-2">
<label class="form-label small">Parameters (JSON)</label>
<label class="form-label small">
Parameters (JSON)
<span class="text-muted" title='JSON array of {name, type} objects. Example: [{"name":"id","type":"Int32"},{"name":"label","type":"String"}]'>
<i class="bi bi-question-circle"></i>
</span>
</label>
<input type="text" class="form-control form-control-sm" @bind="_formParameters"
placeholder='e.g. [{"name":"x","type":"Int32"}]' />
</div>
<div class="mb-2">
<label class="form-label small">Return Definition (JSON)</label>
<label class="form-label small">
Return Definition (JSON)
<span class="text-muted" title='JSON object with a type field. Example: {"type":"Boolean"} or {"type":"List","itemType":"Int32"}'>
<i class="bi bi-question-circle"></i>
</span>
</label>
<input type="text" class="form-control form-control-sm" @bind="_formReturn"
placeholder='e.g. {"type":"Boolean"}' />
</div>

138
src/ScadaLink.CentralUI/Components/Pages/Design/SharedScripts.razor
View File

@@ -16,7 +16,7 @@
</div>
<ToastNotification @ref="_toast" />
<ConfirmDialog @ref="_confirmDialog" />
<ConfirmDialog @ref="_confirmDialog" ConfirmButtonClass="btn-danger" />
@if (_loading)
{
@@ -26,46 +26,81 @@
{
<div class="alert alert-danger">@_errorMessage</div>
}
else if (_scripts.Count == 0)
{
<div class="text-center py-5 text-muted">
<p class="mb-3">No shared scripts configured.</p>
<button class="btn btn-primary btn-sm"
@onclick='() => NavigationManager.NavigateTo("/design/shared-scripts/create")'>
Create your first script
</button>
</div>
}
else
{
<table class="table table-sm table-striped table-hover">
<thead class="table-dark">
<tr>
<th>ID</th>
<th>Name</th>
<th>Code (preview)</th>
<th>Parameters</th>
<th>Returns</th>
<th style="width: 160px;">Actions</th>
</tr>
</thead>
<tbody>
@if (_scripts.Count == 0)
{
<tr>
<td colspan="6" class="text-muted text-center">No shared scripts configured.</td>
</tr>
}
@foreach (var script in _scripts)
{
<tr>
<td>@script.Id</td>
<td><strong>@script.Name</strong></td>
<td class="small text-muted font-monospace text-truncate" style="max-width: 300px;">
@script.Code[..Math.Min(60, script.Code.Length)]@(script.Code.Length > 60 ? "..." : "")
</td>
<td class="small text-muted">@(script.ParameterDefinitions ?? "—")</td>
<td class="small text-muted">@(script.ReturnDefinition ?? "—")</td>
<td>
<button class="btn btn-outline-primary btn-sm py-0 px-1 me-1"
@onclick='() => NavigationManager.NavigateTo($"/design/shared-scripts/{script.Id}/edit")'>Edit</button>
<button class="btn btn-outline-danger btn-sm py-0 px-1"
@onclick="() => DeleteScript(script)">Delete</button>
</td>
</tr>
}
</tbody>
</table>
<div class="mb-3" style="max-width: 320px;">
<input class="form-control form-control-sm"
placeholder="Filter by name or code…"
@bind="_search" @bind:event="oninput" />
</div>
@if (!FilteredScripts.Any())
{
<p class="text-muted small">No shared scripts match the filter.</p>
}
<div class="row g-3">
@foreach (var s in FilteredScripts)
{
var preview = s.Code.Length > 80
? s.Code[..80] + "…"
: s.Code;
var paramCount = CountJsonArrayEntries(s.ParameterDefinitions);
<div class="col-lg-6 col-12" @key="s.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">@s.Name</h5>
<div class="d-flex gap-1">
<button class="btn btn-outline-primary btn-sm"
@onclick='() => NavigationManager.NavigateTo($"/design/shared-scripts/{s.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 {s.Name}")">⋮</button>
<ul class="dropdown-menu dropdown-menu-end">
<li>
<button class="dropdown-item text-danger"
@onclick="() => DeleteScript(s)">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="@s.Code">@preview</pre>
<div>
<span class="badge bg-light text-dark me-1">@paramCount params</span>
@if (!string.IsNullOrWhiteSpace(s.ReturnDefinition))
{
<span class="badge bg-light text-dark">returns</span>
}
else
{
<span class="badge bg-light text-dark">void</span>
}
</div>
</div>
</div>
</div>
}
</div>
}
</div>
@@ -79,10 +114,18 @@
private List<SharedScript> _scripts = new();
private bool _loading = true;
private string? _errorMessage;
private string _search = "";
private ToastNotification _toast = default!;
private ConfirmDialog _confirmDialog = default!;
private IEnumerable<SharedScript> FilteredScripts =>
string.IsNullOrWhiteSpace(_search)
? _scripts
: _scripts.Where(s =>
(s.Name?.Contains(_search, StringComparison.OrdinalIgnoreCase) ?? false) ||
(s.Code?.Contains(_search, StringComparison.OrdinalIgnoreCase) ?? false));
protected override async Task OnInitializedAsync()
{
await LoadDataAsync();
@@ -128,4 +171,21 @@
_toast.ShowError($"Delete failed: {ex.Message}");
}
}
/// <summary>
/// Best-effort count of JSON array entries by tallying top-level objects.
/// Returns 0 if the parameter definition is null/empty/malformed.
/// </summary>
private static int CountJsonArrayEntries(string? json)
{
if (string.IsNullOrWhiteSpace(json)) return 0;
try
{
using var doc = System.Text.Json.JsonDocument.Parse(json);
if (doc.RootElement.ValueKind == System.Text.Json.JsonValueKind.Array)
return doc.RootElement.GetArrayLength();
}
catch { /* fall through */ }
return 0;
}
}

222
src/ScadaLink.CentralUI/Components/Pages/Design/SmtpConfiguration.razor Normal file
View File

@@ -0,0 +1,222 @@
@page "/design/smtp"
@using ScadaLink.Security
@using ScadaLink.Commons.Interfaces.Repositories
@using SmtpConfigurationEntity = ScadaLink.Commons.Entities.Notifications.SmtpConfiguration
@attribute [Authorize(Policy = AuthorizationPolicies.RequireDesign)]
@inject INotificationRepository NotificationRepository
@inject NavigationManager NavigationManager
<div class="container-fluid mt-3">
<div class="d-flex justify-content-between align-items-center mb-3">
<h4 class="mb-0">SMTP Configuration</h4>
</div>
<ToastNotification @ref="_toast" />
<ConfirmDialog @ref="_confirmDialog" ConfirmButtonClass="btn-danger" />
@if (_loading)
{
<LoadingSpinner IsLoading="true" />
}
else if (_errorMessage != null)
{
<div class="alert alert-danger">@_errorMessage</div>
}
else
{
@if (_smtpConfigs.Count == 0 && !_showForm)
{
<div class="text-center py-5 text-muted">
<p class="mb-3">No SMTP configuration set.</p>
<button class="btn btn-primary btn-sm" @onclick="ShowAddForm">
Add SMTP configuration
</button>
</div>
}
else
{
@foreach (var smtp in _smtpConfigs)
{
<div class="card mb-3" @key="smtp.Id">
<div class="card-header d-flex justify-content-between align-items-center">
<strong>@smtp.Host</strong>
@if (_editingSmtp?.Id != smtp.Id || !_showForm)
{
<button class="btn btn-outline-primary btn-sm" @onclick="() => StartEdit(smtp)">Edit</button>
}
</div>
<div class="card-body small">
<div class="row g-2">
<div class="col-md-4 text-muted">Host</div>
<div class="col-md-8">@smtp.Host:@smtp.Port</div>
<div class="col-md-4 text-muted">Auth Type</div>
<div class="col-md-8"><span class="badge bg-secondary">@smtp.AuthType</span></div>
<div class="col-md-4 text-muted">From Address</div>
<div class="col-md-8">@smtp.FromAddress</div>
<div class="col-md-4 text-muted">Credentials</div>
<div class="col-md-8">@(string.IsNullOrWhiteSpace(smtp.Credentials) ? "(not set)" : "(stored)")</div>
</div>
</div>
</div>
}
@if (_showForm)
{
<div class="card mb-3">
<div class="card-header">@(_editingSmtp != null ? "Edit SMTP Configuration" : "Add SMTP Configuration")</div>
<div class="card-body">
<div class="row g-3">
<div class="col-12">
<label class="form-label">Host</label>
<input type="text" class="form-control" @bind="_host" placeholder="smtp.example.com" />
</div>
<div class="col-md-4">
<label class="form-label">Port</label>
<input type="number" class="form-control" @bind="_port" min="1" max="65535" />
</div>
<div class="col-md-8">
<label class="form-label">Auth Type</label>
<select class="form-select" @bind="_authType">
<option>OAuth2</option>
<option>Basic</option>
</select>
</div>
<div class="col-12">
<label class="form-label">Credentials</label>
<input type="password" class="form-control" @bind="_credentials"
placeholder="OAuth2 client secret or SMTP password" />
<div class="form-text">Treat as sensitive — visible to admins only.</div>
</div>
<div class="col-12">
<label class="form-label">From Address</label>
<input type="email" class="form-control" @bind="_fromAddress"
placeholder="noreply@example.com" />
</div>
@if (_formError != null)
{
<div class="col-12"><div class="text-danger small">@_formError</div></div>
}
<div class="col-12 text-end">
<button class="btn btn-outline-secondary me-1" @onclick="CancelForm">Cancel</button>
<button class="btn btn-success" @onclick="Save">Save</button>
</div>
</div>
</div>
</div>
}
else if (_smtpConfigs.Count == 0)
{
<button class="btn btn-primary btn-sm" @onclick="ShowAddForm">Add SMTP configuration</button>
}
}
}
</div>
@code {
private bool _loading = true;
private string? _errorMessage;
private List<SmtpConfigurationEntity> _smtpConfigs = new();
private bool _showForm;
private SmtpConfigurationEntity? _editingSmtp;
private string _host = string.Empty;
private int _port = 587;
private string _authType = "OAuth2";
private string? _credentials;
private string _fromAddress = string.Empty;
private string? _formError;
private ToastNotification _toast = default!;
private ConfirmDialog _confirmDialog = default!;
protected override async Task OnInitializedAsync()
{
await LoadAsync();
}
private async Task LoadAsync()
{
_loading = true;
_errorMessage = null;
try
{
_smtpConfigs = (await NotificationRepository.GetAllSmtpConfigurationsAsync()).ToList();
}
catch (Exception ex)
{
_errorMessage = ex.Message;
}
_loading = false;
}
private void ShowAddForm()
{
_editingSmtp = null;
_host = string.Empty;
_port = 587;
_authType = "OAuth2";
_credentials = null;
_fromAddress = string.Empty;
_formError = null;
_showForm = true;
}
private void StartEdit(SmtpConfigurationEntity smtp)
{
_editingSmtp = smtp;
_host = smtp.Host;
_port = smtp.Port;
_authType = smtp.AuthType;
_credentials = smtp.Credentials;
_fromAddress = smtp.FromAddress;
_formError = null;
_showForm = true;
}
private void CancelForm()
{
_showForm = false;
_formError = null;
}
private async Task Save()
{
_formError = null;
if (string.IsNullOrWhiteSpace(_host) || string.IsNullOrWhiteSpace(_fromAddress))
{
_formError = "Host and From Address are required.";
return;
}
try
{
if (_editingSmtp != null)
{
_editingSmtp.Host = _host.Trim();
_editingSmtp.Port = _port;
_editingSmtp.AuthType = _authType;
_editingSmtp.Credentials = _credentials?.Trim();
_editingSmtp.FromAddress = _fromAddress.Trim();
await NotificationRepository.UpdateSmtpConfigurationAsync(_editingSmtp);
}
else
{
var smtp = new SmtpConfigurationEntity(_host.Trim(), _authType, _fromAddress.Trim())
{
Port = _port,
Credentials = _credentials?.Trim()
};
await NotificationRepository.AddSmtpConfigurationAsync(smtp);
}
await NotificationRepository.SaveChangesAsync();
_showForm = false;
_toast.ShowSuccess("SMTP configuration saved.");
await LoadAsync();
}
catch (Exception ex)
{
_formError = ex.Message;
}
}
}

26
src/ScadaLink.CentralUI/Components/Pages/Design/TemplateCreate.razor
View File

@@ -11,7 +11,9 @@
<div class="container-fluid mt-3">
<div class="mb-3">
<button class="btn btn-outline-secondary btn-sm" @onclick="GoBack">&larr; Back</button>
<button class="btn btn-outline-secondary btn-sm"
aria-label="Back to Templates"
@onclick="GoBack">← Back</button>
</div>
<h4 class="mb-3">Create Template</h4>
@@ -24,13 +26,13 @@
{
<div class="card">
<div class="card-body">
<div class="mb-2">
<label class="form-label small">Name</label>
<input type="text" class="form-control form-control-sm" @bind="_createName" />
<div class="mb-3">
<label class="form-label">Name</label>
<input type="text" class="form-control" @bind="_createName" />
</div>
<div class="mb-2">
<label class="form-label small">Parent Template</label>
<select class="form-select form-select-sm" @bind="_createParentId">
<div class="mb-3">
<label class="form-label">Parent Template</label>
<select class="form-select" @bind="_createParentId">
<option value="0">(None - root template)</option>
@foreach (var t in _templates)
{
@@ -38,17 +40,17 @@
}
</select>
</div>
<div class="mb-2">
<label class="form-label small">Description</label>
<input type="text" class="form-control form-control-sm" @bind="_createDescription" />
<div class="mb-3">
<label class="form-label">Description</label>
<input type="text" class="form-control" @bind="_createDescription" />
</div>
@if (_formError != null)
{
<div class="text-danger small mt-2">@_formError</div>
}
<div class="mt-3">
<button class="btn btn-success btn-sm me-1" @onclick="CreateTemplate">Create</button>
<button class="btn btn-outline-secondary btn-sm" @onclick="GoBack">Cancel</button>
<button class="btn btn-success me-1" @onclick="CreateTemplate">Create</button>
<button class="btn btn-outline-secondary" @onclick="GoBack">Cancel</button>
</div>
</div>
</div>

359
src/ScadaLink.CentralUI/Components/Pages/Design/TemplateEdit.razor
View File

@@ -14,10 +14,12 @@
<div class="container-fluid mt-3">
<ToastNotification @ref="_toast" />
<ConfirmDialog @ref="_confirmDialog" />
<ConfirmDialog @ref="_confirmDialog" ConfirmButtonClass="btn-danger" />
<div class="mb-3">
<button class="btn btn-outline-secondary btn-sm" @onclick="GoBack">&larr; Templates</button>
<button class="btn btn-outline-secondary btn-sm"
aria-label="Back to Templates"
@onclick="GoBack">← Templates</button>
</div>
@if (_loading)
@@ -173,7 +175,13 @@
<ul class="mb-0 small">
@foreach (var err in _validationResult.Errors)
{
<li>[@err.Category] @err.Message @(err.EntityName != null ? $"({err.EntityName})" : "")</li>
<li class="mb-1">
<strong>@err.Category</strong> @err.Message
@if (err.EntityName != null)
{
<span class="text-muted">(@err.EntityName)</span>
}
</li>
}
</ul>
</div>
@@ -185,7 +193,9 @@
<ul class="mb-0 small">
@foreach (var warn in _validationResult.Warnings)
{
<li>[@warn.Category] @warn.Message</li>
<li class="mb-1">
<strong>@warn.Category</strong> <span class="text-muted">@warn.Message</span>
</li>
}
</ul>
</div>
@@ -201,49 +211,64 @@
<div class="card mb-3">
<div class="card-header">Template Properties</div>
<div class="card-body">
<div class="row g-2 align-items-end">
<div class="col-md-3">
<label class="form-label small">Name</label>
<input type="text" class="form-control form-control-sm" @bind="_editName" />
<div class="row g-3">
<div class="col-12">
<label class="form-label">Name</label>
<input type="text" class="form-control" @bind="_editName" />
</div>
<div class="col-md-4">
<label class="form-label small">Description</label>
<input type="text" class="form-control form-control-sm" @bind="_editDescription" />
<div class="col-12">
<label class="form-label">Description</label>
<input type="text" class="form-control" @bind="_editDescription" />
</div>
<div class="col-md-3">
<label class="form-label small">Parent Template</label>
<div class="form-control-plaintext form-control-sm">
@(_selectedTemplate.ParentTemplateId is int pid
? _templates.FirstOrDefault(t => t.Id == pid)?.Name ?? $"#{pid}"
: "(none)")
</div>
<div class="col-12">
<label class="form-label">Parent Template</label>
<input type="text" readonly class="form-control form-control-plaintext"
value="@(_selectedTemplate.ParentTemplateId is int pid
? _templates.FirstOrDefault(t => t.Id == pid)?.Name ?? $"#{pid}"
: "(none)")" />
</div>
<div class="col-md-2">
<button class="btn btn-primary btn-sm" @onclick="UpdateTemplateProperties">Save Properties</button>
<div class="col-12 text-end">
<button class="btn btn-primary" @onclick="UpdateTemplateProperties">Save Properties</button>
</div>
</div>
</div>
</div>
@* Tabs: Attributes, Alarms, Scripts, Compositions *@
<ul class="nav nav-tabs mb-3">
<li class="nav-item">
<button class="nav-link @(_activeTab == "attributes" ? "active" : "")" @onclick='() => _activeTab = "attributes"'>
<ul class="nav nav-tabs mb-3" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link @(_activeTab == "attributes" ? "active" : "")"
role="tab"
aria-selected="@(_activeTab == "attributes" ? "true" : "false")"
aria-controls="tmpl-tab-attributes"
@onclick='() => _activeTab = "attributes"'>
Attributes <span class="badge bg-secondary">@_attributes.Count</span>
</button>
</li>
<li class="nav-item">
<button class="nav-link @(_activeTab == "alarms" ? "active" : "")" @onclick='() => _activeTab = "alarms"'>
<li class="nav-item" role="presentation">
<button class="nav-link @(_activeTab == "alarms" ? "active" : "")"
role="tab"
aria-selected="@(_activeTab == "alarms" ? "true" : "false")"
aria-controls="tmpl-tab-alarms"
@onclick='() => _activeTab = "alarms"'>
Alarms <span class="badge bg-secondary">@_alarms.Count</span>
</button>
</li>
<li class="nav-item">
<button class="nav-link @(_activeTab == "scripts" ? "active" : "")" @onclick='() => _activeTab = "scripts"'>
<li class="nav-item" role="presentation">
<button class="nav-link @(_activeTab == "scripts" ? "active" : "")"
role="tab"
aria-selected="@(_activeTab == "scripts" ? "true" : "false")"
aria-controls="tmpl-tab-scripts"
@onclick='() => _activeTab = "scripts"'>
Scripts <span class="badge bg-secondary">@_scripts.Count</span>
</button>
</li>
<li class="nav-item">
<button class="nav-link @(_activeTab == "compositions" ? "active" : "")" @onclick='() => _activeTab = "compositions"'>
<li class="nav-item" role="presentation">
<button class="nav-link @(_activeTab == "compositions" ? "active" : "")"
role="tab"
aria-selected="@(_activeTab == "compositions" ? "true" : "false")"
aria-controls="tmpl-tab-compositions"
@onclick='() => _activeTab = "compositions"'>
Compositions <span class="badge bg-secondary">@_compositions.Count</span>
</button>
</li>
@@ -251,19 +276,19 @@
@if (_activeTab == "attributes")
{
@RenderAttributesTab()
<div role="tabpanel" id="tmpl-tab-attributes">@RenderAttributesTab()</div>
}
else if (_activeTab == "alarms")
{
@RenderAlarmsTab()
<div role="tabpanel" id="tmpl-tab-alarms">@RenderAlarmsTab()</div>
}
else if (_activeTab == "scripts")
{
@RenderScriptsTab()
<div role="tabpanel" id="tmpl-tab-scripts">@RenderScriptsTab()</div>
}
else if (_activeTab == "compositions")
{
@RenderCompositionsTab()
<div role="tabpanel" id="tmpl-tab-compositions">@RenderCompositionsTab()</div>
}
};
@@ -383,48 +408,52 @@
private RenderFragment RenderAttributesTab() => __builder =>
{
<div class="d-flex justify-content-between align-items-center mb-2">
<h6 class="mb-0">Attributes</h6>
<h5 class="mb-0">Attributes</h5>
<button class="btn btn-primary btn-sm" @onclick="() => { _showAttrForm = true; _attrFormError = null; _attrName = string.Empty; _attrValue = null; _attrIsLocked = false; _attrDataSourceRef = null; }">Add Attribute</button>
</div>
@if (_showAttrForm)
{
<div class="card mb-2">
<div class="card mb-3">
<div class="card-header">Add Attribute</div>
<div class="card-body">
<div class="row g-2 align-items-end">
<div class="col-md-2">
<label class="form-label small">Name</label>
<input type="text" class="form-control form-control-sm" @bind="_attrName" />
<div class="row g-3">
<div class="col-12">
<label class="form-label">Name</label>
<input type="text" class="form-control" @bind="_attrName" />
</div>
<div class="col-md-2">
<label class="form-label small">Data Type</label>
<select class="form-select form-select-sm" @bind="_attrDataType">
<div class="col-12">
<label class="form-label">Data Type</label>
<select class="form-select" @bind="_attrDataType">
@foreach (var dt in Enum.GetValues<DataType>())
{
<option value="@dt">@dt</option>
}
</select>
</div>
<div class="col-md-2">
<label class="form-label small">Value</label>
<input type="text" class="form-control form-control-sm" @bind="_attrValue" />
<div class="col-12">
<label class="form-label">Value</label>
<input type="text" class="form-control" @bind="_attrValue" />
</div>
<div class="col-md-2">
<label class="form-label small">Data Source Ref</label>
<input type="text" class="form-control form-control-sm" @bind="_attrDataSourceRef" placeholder="Tag path" />
<div class="col-12">
<label class="form-label">Data Source Ref</label>
<input type="text" class="form-control" @bind="_attrDataSourceRef" placeholder="Tag path" />
</div>
<div class="col-md-1">
<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" @bind="_attrIsLocked" id="attrLocked" />
<label class="form-check-label small" for="attrLocked">Locked</label>
<label class="form-check-label" for="attrLocked">Locked</label>
</div>
</div>
<div class="col-md-3">
<button class="btn btn-success btn-sm me-1" @onclick="AddAttribute">Add</button>
<button class="btn btn-outline-secondary btn-sm" @onclick="() => _showAttrForm = false">Cancel</button>
@if (_attrFormError != null)
{
<div class="col-12"><div class="text-danger small">@_attrFormError</div></div>
}
<div class="col-12 text-end">
<button class="btn btn-outline-secondary me-1" @onclick="() => _showAttrForm = false">Cancel</button>
<button class="btn btn-success" @onclick="AddAttribute">Add</button>
</div>
</div>
@if (_attrFormError != null) { <div class="text-danger small mt-1">@_attrFormError</div> }
</div>
</div>
}
@@ -437,7 +466,7 @@
<th>Value</th>
<th>Data Source</th>
<th>Lock</th>
<th style="width: 80px;">Actions</th>
<th style="width: 60px;">Actions</th>
</tr>
</thead>
<tbody>
@@ -451,16 +480,26 @@
<td>
@if (attr.IsLocked)
{
<span class="badge bg-danger" title="Locked">L</span>
<span class="badge bg-danger" aria-label="Locked">Locked</span>
}
else
{
<span class="badge bg-light text-dark" title="Unlocked">U</span>
<span class="badge bg-light text-dark" aria-label="Unlocked">Unlocked</span>
}
</td>
<td>
<button class="btn btn-outline-danger btn-sm py-0 px-1"
@onclick="() => DeleteAttribute(attr)">Delete</button>
<div class="dropdown">
<button class="btn btn-outline-secondary btn-sm py-0 px-1"
data-bs-toggle="dropdown"
aria-expanded="false"
aria-label="@($"More actions for {attr.Name}")">⋮</button>
<ul class="dropdown-menu dropdown-menu-end">
<li>
<button class="dropdown-item text-danger"
@onclick="() => DeleteAttribute(attr)">Delete</button>
</li>
</ul>
</div>
</td>
</tr>
}
@@ -472,48 +511,52 @@
private RenderFragment RenderAlarmsTab() => __builder =>
{
<div class="d-flex justify-content-between align-items-center mb-2">
<h6 class="mb-0">Alarms</h6>
<h5 class="mb-0">Alarms</h5>
<button class="btn btn-primary btn-sm" @onclick="() => { _showAlarmForm = true; _alarmFormError = null; _alarmName = string.Empty; _alarmPriority = 500; _alarmTriggerConfig = null; _alarmIsLocked = false; }">Add Alarm</button>
</div>
@if (_showAlarmForm)
{
<div class="card mb-2">
<div class="card mb-3">
<div class="card-header">Add Alarm</div>
<div class="card-body">
<div class="row g-2 align-items-end">
<div class="col-md-2">
<label class="form-label small">Name</label>
<input type="text" class="form-control form-control-sm" @bind="_alarmName" />
<div class="row g-3">
<div class="col-12">
<label class="form-label">Name</label>
<input type="text" class="form-control" @bind="_alarmName" />
</div>
<div class="col-md-2">
<label class="form-label small">Trigger Type</label>
<select class="form-select form-select-sm" @bind="_alarmTriggerType">
<div class="col-12">
<label class="form-label">Trigger Type</label>
<select class="form-select" @bind="_alarmTriggerType">
@foreach (var tt in Enum.GetValues<AlarmTriggerType>())
{
<option value="@tt">@tt</option>
}
</select>
</div>
<div class="col-md-1">
<label class="form-label small">Priority</label>
<input type="number" class="form-control form-control-sm" @bind="_alarmPriority" min="0" max="1000" />
<div class="col-12">
<label class="form-label">Priority</label>
<input type="number" class="form-control" @bind="_alarmPriority" min="0" max="1000" />
</div>
<div class="col-md-3">
<label class="form-label small">Trigger Config (JSON)</label>
<input type="text" class="form-control form-control-sm" @bind="_alarmTriggerConfig" />
<div class="col-12">
<label class="form-label">Trigger Config (JSON)</label>
<input type="text" class="form-control" @bind="_alarmTriggerConfig" />
</div>
<div class="col-md-1">
<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" @bind="_alarmIsLocked" id="alarmLocked" />
<label class="form-check-label small" for="alarmLocked">Locked</label>
<label class="form-check-label" for="alarmLocked">Locked</label>
</div>
</div>
<div class="col-md-3">
<button class="btn btn-success btn-sm me-1" @onclick="AddAlarm">Add</button>
<button class="btn btn-outline-secondary btn-sm" @onclick="() => _showAlarmForm = false">Cancel</button>
@if (_alarmFormError != null)
{
<div class="col-12"><div class="text-danger small">@_alarmFormError</div></div>
}
<div class="col-12 text-end">
<button class="btn btn-outline-secondary me-1" @onclick="() => _showAlarmForm = false">Cancel</button>
<button class="btn btn-success" @onclick="AddAlarm">Add</button>
</div>
</div>
@if (_alarmFormError != null) { <div class="text-danger small mt-1">@_alarmFormError</div> }
</div>
</div>
}
@@ -526,7 +569,7 @@
<th>Priority</th>
<th>Config</th>
<th>Lock</th>
<th style="width: 80px;">Actions</th>
<th style="width: 60px;">Actions</th>
</tr>
</thead>
<tbody>
@@ -538,12 +581,28 @@
<td>@alarm.PriorityLevel</td>
<td class="small text-muted text-truncate" style="max-width: 200px;">@(alarm.TriggerConfiguration ?? "—")</td>
<td>
@if (alarm.IsLocked) { <span class="badge bg-danger">L</span> }
else { <span class="badge bg-light text-dark">U</span> }
@if (alarm.IsLocked)
{
<span class="badge bg-danger" aria-label="Locked">Locked</span>
}
else
{
<span class="badge bg-light text-dark" aria-label="Unlocked">Unlocked</span>
}
</td>
<td>
<button class="btn btn-outline-danger btn-sm py-0 px-1"
@onclick="() => DeleteAlarm(alarm)">Delete</button>
<div class="dropdown">
<button class="btn btn-outline-secondary btn-sm py-0 px-1"
data-bs-toggle="dropdown"
aria-expanded="false"
aria-label="@($"More actions for {alarm.Name}")">⋮</button>
<ul class="dropdown-menu dropdown-menu-end">
<li>
<button class="dropdown-item text-danger"
@onclick="() => DeleteAlarm(alarm)">Delete</button>
</li>
</ul>
</div>
</td>
</tr>
}
@@ -555,44 +614,48 @@
private RenderFragment RenderScriptsTab() => __builder =>
{
<div class="d-flex justify-content-between align-items-center mb-2">
<h6 class="mb-0">Scripts</h6>
<h5 class="mb-0">Scripts</h5>
<button class="btn btn-primary btn-sm" @onclick="() => { _showScriptForm = true; _scriptFormError = null; _scriptName = string.Empty; _scriptCode = string.Empty; _scriptTriggerType = null; _scriptTriggerConfig = null; _scriptIsLocked = false; }">Add Script</button>
</div>
@if (_showScriptForm)
{
<div class="card mb-2">
<div class="card mb-3">
<div class="card-header">Add Script</div>
<div class="card-body">
<div class="row g-2">
<div class="col-md-3">
<label class="form-label small">Name</label>
<input type="text" class="form-control form-control-sm" @bind="_scriptName" />
<div class="row g-3">
<div class="col-12">
<label class="form-label">Name</label>
<input type="text" class="form-control" @bind="_scriptName" />
</div>
<div class="col-md-2">
<label class="form-label small">Trigger Type</label>
<input type="text" class="form-control form-control-sm" @bind="_scriptTriggerType" placeholder="e.g. ValueChange" />
<div class="col-12">
<label class="form-label">Trigger Type</label>
<input type="text" class="form-control" @bind="_scriptTriggerType" placeholder="e.g. ValueChange" />
</div>
<div class="col-md-3">
<label class="form-label small">Trigger Config (JSON)</label>
<input type="text" class="form-control form-control-sm" @bind="_scriptTriggerConfig" />
<div class="col-12">
<label class="form-label">Trigger Config (JSON)</label>
<input type="text" class="form-control" @bind="_scriptTriggerConfig" />
</div>
<div class="col-md-1">
<div class="form-check mt-4">
<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" @bind="_scriptIsLocked" id="scriptLocked" />
<label class="form-check-label small" for="scriptLocked">Locked</label>
<label class="form-check-label" for="scriptLocked">Locked</label>
</div>
</div>
<div class="col-12">
<label class="form-label">Code</label>
<textarea class="form-control font-monospace" rows="10" @bind="_scriptCode"
style="font-size: 0.85rem;"></textarea>
</div>
@if (_scriptFormError != null)
{
<div class="col-12"><div class="text-danger small">@_scriptFormError</div></div>
}
<div class="col-12 text-end">
<button class="btn btn-outline-secondary me-1" @onclick="() => _showScriptForm = false">Cancel</button>
<button class="btn btn-success" @onclick="AddScript">Add</button>
</div>
</div>
<div class="mt-2">
<label class="form-label small">Code</label>
<textarea class="form-control form-control-sm font-monospace" rows="6" @bind="_scriptCode"
style="font-size: 0.8rem;"></textarea>
</div>
<div class="mt-2">
<button class="btn btn-success btn-sm me-1" @onclick="AddScript">Add</button>
<button class="btn btn-outline-secondary btn-sm" @onclick="() => _showScriptForm = false">Cancel</button>
</div>
@if (_scriptFormError != null) { <div class="text-danger small mt-1">@_scriptFormError</div> }
</div>
</div>
}
@@ -604,7 +667,7 @@
<th>Trigger</th>
<th>Code (preview)</th>
<th>Lock</th>
<th style="width: 80px;">Actions</th>
<th style="width: 60px;">Actions</th>
</tr>
</thead>
<tbody>
@@ -613,14 +676,32 @@
<tr>
<td>@script.Name</td>
<td class="small">@(script.TriggerType ?? "—")</td>
<td class="small text-muted text-truncate font-monospace" style="max-width: 300px;">@script.Code[..Math.Min(80, script.Code.Length)]@(script.Code.Length > 80 ? "..." : "")</td>
<td class="small text-muted text-truncate font-monospace"
style="max-width: 300px;"
title="@script.Code">@script.Code[..Math.Min(80, script.Code.Length)]@(script.Code.Length > 80 ? "..." : "")</td>
<td>
@if (script.IsLocked) { <span class="badge bg-danger">L</span> }
else { <span class="badge bg-light text-dark">U</span> }
@if (script.IsLocked)
{
<span class="badge bg-danger" aria-label="Locked">Locked</span>
}
else
{
<span class="badge bg-light text-dark" aria-label="Unlocked">Unlocked</span>
}
</td>
<td>
<button class="btn btn-outline-danger btn-sm py-0 px-1"
@onclick="() => DeleteScript(script)">Delete</button>
<div class="dropdown">
<button class="btn btn-outline-secondary btn-sm py-0 px-1"
data-bs-toggle="dropdown"
aria-expanded="false"
aria-label="@($"More actions for {script.Name}")">⋮</button>
<ul class="dropdown-menu dropdown-menu-end">
<li>
<button class="dropdown-item text-danger"
@onclick="() => DeleteScript(script)">Delete</button>
</li>
</ul>
</div>
</td>
</tr>
}
@@ -632,22 +713,23 @@
private RenderFragment RenderCompositionsTab() => __builder =>
{
<div class="d-flex justify-content-between align-items-center mb-2">
<h6 class="mb-0">Compositions</h6>
<h5 class="mb-0">Compositions</h5>
<button class="btn btn-primary btn-sm" @onclick="() => { _showCompForm = true; _compFormError = null; _compInstanceName = string.Empty; _compComposedTemplateId = 0; }">Add Composition</button>
</div>
@if (_showCompForm)
{
<div class="card mb-2">
<div class="card mb-3">
<div class="card-header">Add Composition</div>
<div class="card-body">
<div class="row g-2 align-items-end">
<div class="col-md-3">
<label class="form-label small">Instance Name</label>
<input type="text" class="form-control form-control-sm" @bind="_compInstanceName" />
<div class="row g-3">
<div class="col-12">
<label class="form-label">Instance Name</label>
<input type="text" class="form-control" @bind="_compInstanceName" />
</div>
<div class="col-md-4">
<label class="form-label small">Composed Template</label>
<select class="form-select form-select-sm" @bind="_compComposedTemplateId">
<div class="col-12">
<label class="form-label">Composed Template</label>
<select class="form-select" @bind="_compComposedTemplateId">
<option value="0">Select template...</option>
@foreach (var t in _templates.Where(t => _selectedTemplate == null || t.Id != _selectedTemplate.Id))
{
@@ -655,12 +737,15 @@
}
</select>
</div>
<div class="col-md-3">
<button class="btn btn-success btn-sm me-1" @onclick="AddComposition">Add</button>
<button class="btn btn-outline-secondary btn-sm" @onclick="() => _showCompForm = false">Cancel</button>
@if (_compFormError != null)
{
<div class="col-12"><div class="text-danger small">@_compFormError</div></div>
}
<div class="col-12 text-end">
<button class="btn btn-outline-secondary me-1" @onclick="() => _showCompForm = false">Cancel</button>
<button class="btn btn-success" @onclick="AddComposition">Add</button>
</div>
</div>
@if (_compFormError != null) { <div class="text-danger small mt-1">@_compFormError</div> }
</div>
</div>
}
@@ -670,7 +755,7 @@
<tr>
<th>Instance Name</th>
<th>Composed Template</th>
<th style="width: 80px;">Actions</th>
<th style="width: 60px;">Actions</th>
</tr>
</thead>
<tbody>
@@ -680,8 +765,18 @@
<td><code>@comp.InstanceName</code></td>
<td>@(_templates.FirstOrDefault(t => t.Id == comp.ComposedTemplateId)?.Name ?? $"#{comp.ComposedTemplateId}")</td>
<td>
<button class="btn btn-outline-danger btn-sm py-0 px-1"
@onclick="() => DeleteComposition(comp)">Delete</button>
<div class="dropdown">
<button class="btn btn-outline-secondary btn-sm py-0 px-1"
data-bs-toggle="dropdown"
aria-expanded="false"
aria-label="@($"More actions for {comp.InstanceName}")">⋮</button>
<ul class="dropdown-menu dropdown-menu-end">
<li>
<button class="dropdown-item text-danger"
@onclick="() => DeleteComposition(comp)">Delete</button>
</li>
</ul>
</div>
</td>
</tr>
}

74
src/ScadaLink.CentralUI/Components/Pages/Design/Templates.razor
View File

@@ -13,7 +13,7 @@
<div class="container-fluid mt-3">
<ToastNotification @ref="_toast" />
<ConfirmDialog @ref="_confirmDialog" />
<ConfirmDialog @ref="_confirmDialog" ConfirmButtonClass="btn-danger" />
<RenameFolderDialog @bind-IsVisible="_showRenameFolderDialog"
FolderId="_renameFolderId"
@@ -50,14 +50,30 @@
}
else
{
<h6 class="mb-2">Templates</h6>
<div class="btn-group btn-group-sm mb-2">
<button class="btn btn-outline-secondary" title="New folder at root"
@onclick="() => OpenNewFolderDialog(null)">+ Folder</button>
<button class="btn btn-outline-secondary" title="New template at root"
@onclick='() => NavigationManager.NavigateTo("/design/templates/create")'>+ Template</button>
<button class="btn btn-outline-secondary" @onclick="() => _tree.ExpandAll()">Expand</button>
<button class="btn btn-outline-secondary" @onclick="() => _tree.CollapseAll()">Collapse</button>
<div class="d-flex justify-content-between align-items-center mb-3">
<h4 class="mb-0">Templates</h4>
<div class="d-flex gap-2">
<div class="dropdown">
<button class="btn btn-outline-secondary btn-sm dropdown-toggle"
data-bs-toggle="dropdown" aria-expanded="false">
Bulk actions
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li>
<button class="dropdown-item" @onclick="() => _tree.ExpandAll()">Expand all folders</button>
</li>
<li>
<button class="dropdown-item" @onclick="() => _tree.CollapseAll()">Collapse all folders</button>
</li>
</ul>
</div>
<button class="btn btn-outline-secondary btn-sm"
title="New folder at root"
@onclick="() => OpenNewFolderDialog(null)">+ Folder</button>
<button class="btn btn-primary btn-sm"
title="New template at root"
@onclick='() => NavigationManager.NavigateTo("/design/templates/create")'>+ Template</button>
</div>
</div>
<div style="max-height: calc(100vh - 160px); overflow-y: auto; padding: 4px;">
@@ -230,21 +246,61 @@
<span class="badge rounded-pill bg-secondary-subtle text-secondary-emphasis">@node.Children.Count</span>
</span>
}
@RenderNodeKebab(node)
break;
case TmplNodeKind.Template:
<span class="tv-glyph"><i class="bi bi-file-earmark-text"></i></span>
<span class="tv-label @(node.Children.Count > 0 ? "fw-semibold" : "")"
title="@node.Label">@node.Label</span>
@RenderNodeKebab(node)
break;
case TmplNodeKind.Composition:
<span class="tv-glyph"><i class="bi bi-arrow-return-right"></i></span>
<span class="tv-label" title="@node.Label">@node.Label</span>
@RenderNodeKebab(node)
break;
}
};
private RenderFragment RenderNodeKebab(TmplNode node) => __builder =>
{
<span class="tv-kebab dropdown ms-auto" @onclick:stopPropagation="true">
<button type="button"
class="btn btn-link btn-sm p-0 px-1 text-secondary tv-kebab-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
aria-label="@($"More actions for {node.Label}")">
<i class="bi bi-three-dots-vertical"></i>
</button>
<ul class="dropdown-menu dropdown-menu-end">
@switch (node.Kind)
{
case TmplNodeKind.Folder:
<li><button class="dropdown-item" @onclick="() => OpenNewFolderDialog(node.EntityId)">New Folder</button></li>
<li><button class="dropdown-item" @onclick='() => NavigationManager.NavigateTo($"/design/templates/create?folderId={node.EntityId}")'>New Template</button></li>
<li><button class="dropdown-item" @onclick="() => OpenRenameFolderDialog(node.EntityId, node.Label)">Rename</button></li>
<li><button class="dropdown-item" @onclick="() => OpenMoveFolderDialog(node.EntityId, node.Label)">Move to Folder…</button></li>
<li><hr class="dropdown-divider" /></li>
<li><button class="dropdown-item text-danger" @onclick="() => DeleteFolder(node.EntityId, node.Label)">Delete</button></li>
break;
case TmplNodeKind.Template:
<li><button class="dropdown-item" @onclick='() => NavigationManager.NavigateTo($"/design/templates/create?parentId={node.EntityId}")'>New Derived Template</button></li>
<li><button class="dropdown-item" @onclick="() => OpenMoveTemplateDialog(node.EntityId, node.Label)">Move to Folder…</button></li>
<li><hr class="dropdown-divider" /></li>
<li><button class="dropdown-item text-danger" @onclick="() => DeleteTemplate(node.Template!)">Delete</button></li>
break;
case TmplNodeKind.Composition:
<li><button class="dropdown-item" @onclick='() => NavigationManager.NavigateTo($"/design/templates/{node.Composition!.ComposedTemplateId}")'>Open composed template</button></li>
break;
}
</ul>
</span>
};
private void OnTreeNodeSelected(object? key)
{
if (key is not string s) return;

17
src/ScadaLink.CentralUI/Components/Shared/TreeView.razor.css
View File

@@ -133,3 +133,20 @@
[role="treeitem"][aria-expanded="true"] > .tv-row .tv-toggle .bi-chevron-right {
transform: rotate(90deg);
}
/* Per-row kebab (More actions): hidden by default, revealed on row hover or when
the dropdown is open. Consumers render `<span class="tv-kebab ...">` inside
NodeContent to opt in. */
.tv-row .tv-kebab {
flex: 0 0 auto;
opacity: 0;
transition: opacity 0.1s linear;
margin-left: 0.25rem;
}
.tv-row:hover .tv-kebab,
.tv-row:focus-within .tv-kebab,
.tv-row .tv-kebab.show,
.tv-row .tv-kebab .show {
opacity: 1;
}