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
@@ -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">← 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>
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user