refactor(ui/admin): DataConnectionForm uses OpcUaEndpointEditor and typed model

src/ScadaLink.CentralUI/Components/Pages/Admin/DataConnectionForm.razor

@@ -5,6 +5,11 @@
 @using ScadaLink.Security
 @using ScadaLink.Commons.Entities.Sites
 @using ScadaLink.Commons.Interfaces.Repositories
+@using ScadaLink.Commons.Types.DataConnections
+@using ScadaLink.Commons.Types.Flattening
+@using ScadaLink.Commons.Serialization
+@using ScadaLink.Commons.Validators
+@using ScadaLink.CentralUI.Components.Forms
 @attribute [Authorize(Policy = AuthorizationPolicies.RequireAdmin)]
 @inject ISiteRepository SiteRepository
 @inject NavigationManager NavigationManager
@@ -27,7 +32,9 @@
                     <label class="form-label small">Site</label>
                     @if (_siteLocked)
                     {
-                        <input type="text" class="form-control form-control-sm" value="@_siteName" disabled />
+                        <select class="form-select form-select-sm" disabled>
+                            <option>@_siteName</option>
+                        </select>
                     }
                     else
                     {
@@ -40,56 +47,41 @@
                         </select>
                     }
                 </div>
-                <div class="mb-2">
+                <div class="mb-3">
                     <label class="form-label small">Name</label>
                     <input type="text" class="form-control form-control-sm" @bind="_formName" />
                 </div>
-                <div class="mb-3">
-                    <label class="form-label small">Protocol</label>
-                    <select class="form-select form-select-sm" @bind="_formProtocol">
-                        <option value="">Select...</option>
-                        <option value="OpcUa">OPC UA</option>
-                        <option value="Custom">Custom</option>
-                    </select>
-                </div>
 
-                <h6 class="text-muted border-bottom pb-1">Primary Endpoint</h6>
+                <OpcUaEndpointEditor Title="Primary Endpoint"
-                <div class="mb-3">
+                                     IdPrefix="primary"
-                    <label class="form-label small">Configuration</label>
+                                     Config="_primaryConfig"
-                    <input type="text" class="form-control form-control-sm" @bind="_formConfiguration"
+                                     IsLegacy="_primaryIsLegacy"
-                           placeholder='e.g. {"endpoint":"opc.tcp://..."}' />
+                                     Errors="_primaryErrors" />
-                </div>
 
-                <h6 class="text-muted border-bottom pb-1">Backup Endpoint</h6>
+                <h6 class="text-muted border-bottom pb-1 mt-3">Backup Endpoint</h6>
                 @if (!_showBackup)
                 {
                     <div class="mb-3">
                         <button type="button" class="btn btn-outline-secondary btn-sm"
-                                @onclick="() => _showBackup = true">
+                                @onclick="EnableBackup">Add Backup Endpoint</button>
-                            Add Backup Endpoint
-                        </button>
                     </div>
                 }
                 else
                 {
-                    <div class="mb-2">
+                    <OpcUaEndpointEditor Title="Backup Endpoint"
-                        <label class="form-label small">Configuration</label>
+                                         IdPrefix="backup"
-                        <textarea class="form-control form-control-sm" rows="4"
+                                         Config="_backupConfig"
-                                  @bind="_formBackupConfiguration"
+                                         IsLegacy="_backupIsLegacy"
-                                  placeholder='{"Host": "backup-host", "Port": 50101}' />
+                                         Errors="_backupErrors" />
-                    </div>
                     <div class="mb-2">
                         <label class="form-label small">Failover Retry Count</label>
                         <input type="number" class="form-control form-control-sm" style="max-width: 120px;"
-                               min="1" max="20"
+                               min="1" max="20" @bind="_formFailoverRetryCount" />
-                               @bind="_formFailoverRetryCount" />
                         <div class="form-text">Retries on active endpoint before switching to backup (default: 3)</div>
                     </div>
                     <div class="mb-3">
                         <button type="button" class="btn btn-outline-danger btn-sm"
-                                @onclick="RemoveBackup">
+                                @onclick="RemoveBackup">Remove Backup</button>
-                            Remove Backup
-                        </button>
                     </div>
                 }
 
@@ -117,11 +109,14 @@
     private string _siteName = string.Empty;
     private bool _siteLocked;
     private string _formName = string.Empty;
-    private string _formProtocol = string.Empty;
+    private OpcUaEndpointConfig _primaryConfig = new();
-    private string? _formConfiguration;
+    private OpcUaEndpointConfig _backupConfig = new();
+    private bool _primaryIsLegacy;
+    private bool _backupIsLegacy;
     private bool _showBackup;
-    private string? _formBackupConfiguration;
     private int _formFailoverRetryCount = 3;
+    private ValidationResult? _primaryErrors;
+    private ValidationResult? _backupErrors;
     private string? _formError;
 
     protected override async Task OnInitializedAsync()
@@ -139,11 +134,17 @@
                     _siteName = _sites.FirstOrDefault(s => s.Id == _formSiteId)?.Name ?? $"Site {_formSiteId}";
                     _siteLocked = true;
                     _formName = _editingConnection.Name;
-                    _formProtocol = _editingConnection.Protocol;
+
-                    _formConfiguration = _editingConnection.PrimaryConfiguration;
+                    (_primaryConfig, _primaryIsLegacy) =
-                    _formBackupConfiguration = _editingConnection.BackupConfiguration;
+                        OpcUaEndpointConfigSerializer.Deserialize(_editingConnection.PrimaryConfiguration);
-                    _formFailoverRetryCount = _editingConnection.FailoverRetryCount;
+
-                    _showBackup = _editingConnection.BackupConfiguration != null;
+                    if (!string.IsNullOrWhiteSpace(_editingConnection.BackupConfiguration))
+                    {
+                        (_backupConfig, _backupIsLegacy) =
+                            OpcUaEndpointConfigSerializer.Deserialize(_editingConnection.BackupConfiguration);
+                        _showBackup = true;
+                        _formFailoverRetryCount = _editingConnection.FailoverRetryCount;
+                    }
                 }
             }
             catch (Exception ex)
@@ -161,6 +162,7 @@
                 _siteLocked = true;
             }
         }
+
         _loading = false;
     }
 
@@ -169,25 +171,38 @@
         _formError = null;
         if (_formSiteId == 0) { _formError = "Site is required."; return; }
         if (string.IsNullOrWhiteSpace(_formName)) { _formError = "Name is required."; return; }
-        if (string.IsNullOrWhiteSpace(_formProtocol)) { _formError = "Protocol is required."; return; }
+
+        _primaryErrors = OpcUaEndpointConfigValidator.Validate(_primaryConfig, "Primary.");
+        _backupErrors = _showBackup
+            ? OpcUaEndpointConfigValidator.Validate(_backupConfig, "Backup.")
+            : null;
+
+        if (!_primaryErrors.IsValid || (_backupErrors is { IsValid: false }))
+        {
+            _formError = "Fix the errors below before saving.";
+            return;
+        }
+
+        var primaryJson = OpcUaEndpointConfigSerializer.Serialize(_primaryConfig);
+        var backupJson = _showBackup ? OpcUaEndpointConfigSerializer.Serialize(_backupConfig) : null;
 
         try
         {
             if (_editingConnection != null)
             {
                 _editingConnection.Name = _formName.Trim();
-                _editingConnection.Protocol = _formProtocol;
+                _editingConnection.Protocol = "OpcUa";
-                _editingConnection.PrimaryConfiguration = _formConfiguration?.Trim();
+                _editingConnection.PrimaryConfiguration = primaryJson;
-                _editingConnection.BackupConfiguration = _showBackup ? _formBackupConfiguration?.Trim() : null;
+                _editingConnection.BackupConfiguration = backupJson;
                 _editingConnection.FailoverRetryCount = _showBackup ? _formFailoverRetryCount : 3;
                 await SiteRepository.UpdateDataConnectionAsync(_editingConnection);
             }
             else
             {
-                var conn = new DataConnection(_formName.Trim(), _formProtocol, _formSiteId)
+                var conn = new DataConnection(_formName.Trim(), "OpcUa", _formSiteId)
                 {
-                    PrimaryConfiguration = _formConfiguration?.Trim(),
+                    PrimaryConfiguration = primaryJson,
-                    BackupConfiguration = _showBackup ? _formBackupConfiguration?.Trim() : null,
+                    BackupConfiguration = backupJson,
                     FailoverRetryCount = _showBackup ? _formFailoverRetryCount : 3
                 };
                 await SiteRepository.AddDataConnectionAsync(conn);
@@ -201,15 +216,15 @@
         }
     }
 
+    private void EnableBackup() => _showBackup = true;
+
     private void RemoveBackup()
     {
         _showBackup = false;
-        _formBackupConfiguration = null;
+        _backupConfig = new OpcUaEndpointConfig();
+        _backupIsLegacy = false;
         _formFailoverRetryCount = 3;
     }
 
-    private void GoBack()
+    private void GoBack() => NavigationManager.NavigateTo("/admin/connections");
-    {
-        NavigationManager.NavigateTo("/admin/connections");
-    }
 }