Merge pull request #102 from Timmoth/#100-unintuitive-empty-input-fields

Highlight input field backgrounds

Shared.Rcl/AccessPoints/AccessPointCardComponent.razor

@@ -1,61 +1,99 @@
 @using RackPeek.Domain.Resources.Hardware.AccessPoints
-@using RackPeek.Domain.Resources.Models
 @using RackPeek.Domain.Resources.Hardware.Desktops
+@using RackPeek.Domain.Resources.Models
+
+@inject UpdateAccessPointUseCase UpdateUseCase
 @inject DeleteAccessPointUseCase DeleteUseCase
 @inject RenameAccessPointUseCase RenameUseCase
 @inject CloneAccessPointUseCase CloneUseCase
-
 @inject NavigationManager Nav
 
 <div class="border border-zinc-800 rounded p-4 bg-zinc-900">
     <div class="flex justify-between items-center mb-3">
+
         <div class="text-zinc-100 hover:text-emerald-300">
             <NavLink href="@($"resources/hardware/{AccessPoint.Name}")" class="block">
                 @AccessPoint.Name
             </NavLink>
         </div>
-        
-        <div class="flex justify-between items-center mb-3">
-            @if (!string.IsNullOrWhiteSpace(AccessPoint.Model))
+
+        <div class="flex gap-3 text-xs">
+            @if (!_isEditing)
             {
-                <span class="text-xs text-zinc-400">
-                    @AccessPoint.Model
-                </span>
-            }
-            <div class="flex items-center gap-2">
-                <button class="text-xs text-blue-400 hover:text-blue-300 transition"
-                        title="Rename service"
+                <button class="text-zinc-400 hover:text-zinc-200"
+                        @onclick="BeginEdit">
+                    Edit
+                </button>
+
+                <button class="text-blue-400 hover:text-blue-300"
                         @onclick="OpenRename">
                     Rename
                 </button>
-                <button
-                    class="text-xs text-emerald-400 hover:text-emerald-300 transition"
-                    title="Clone service"
-                    @onclick="OpenClone">
+
+                <button class="text-emerald-400 hover:text-emerald-300"
+                        @onclick="OpenClone">
                     Clone
                 </button>
-                <button
-                    class="text-xs text-red-400 hover:text-red-300 transition"
-                    title="Delete server"
-                    @onclick="ConfirmDelete">
+
+                <button class="text-red-400 hover:text-red-300"
+                        @onclick="ConfirmDelete">
                     Delete
                 </button>
-            </div>
-        </div>
+            }
+            else
+            {
+                <button class="text-emerald-400 hover:text-emerald-300"
+                        @onclick="Save">
+                    Save
+                </button>
 
+                <button class="text-zinc-500 hover:text-zinc-300"
+                        @onclick="Cancel">
+                    Cancel
+                </button>
+            }
+        </div>
     </div>
 
-    <div class="text-sm">
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
 
-        @if (AccessPoint.Speed is not null)
-        {
-            <div>
-                <div class="text-zinc-400 mb-1">Speed</div>
+        <!-- Model -->
+        <div>
+            <div class="text-zinc-400 mb-1">Model</div>
+
+            @if (_isEditing)
+            {
+                <input class="w-full px-3 py-2 rounded-md
+                              bg-zinc-800 text-zinc-100
+                              border border-zinc-600"
+                       @bind="_edit.Model" />
+            }
+            else if (!string.IsNullOrWhiteSpace(AccessPoint.Model))
+            {
+                <div class="text-zinc-300">@AccessPoint.Model</div>
+            }
+        </div>
+
+        <!-- Speed -->
+        <div>
+            <div class="text-zinc-400 mb-1">Speed (Gbps)</div>
+
+            @if (_isEditing)
+            {
+                <input type="number"
+                       step="0.1"
+                       class="w-full px-3 py-2 rounded-md
+                              bg-zinc-800 text-zinc-100
+                              border border-zinc-600"
+                       @bind="_edit.Speed" />
+            }
+            else if (AccessPoint.Speed is not null)
+            {
                 <div class="text-zinc-300">
                     @AccessPoint.Speed Gbps
                 </div>
-            </div>
-        }
+            }
+        </div>
 
     </div>
 </div>
@@ -63,12 +101,13 @@
 <ConfirmModal
     IsOpen="_confirmDeleteOpen"
     IsOpenChanged="v => _confirmDeleteOpen = v"
-    Title="Delete server"
+    Title="Delete access point"
     ConfirmText="Delete"
     ConfirmClass="bg-red-600 hover:bg-red-500"
     OnConfirm="DeleteServer">
     Are you sure you want to delete <strong>@AccessPoint.Name</strong>?
 </ConfirmModal>
+
 <StringValueModal
     IsOpen="_renameOpen"
     IsOpenChanged="v => _renameOpen = v"
@@ -86,14 +125,45 @@
     Label="New resource name"
     Value="@($"{AccessPoint.Name}-copy")"
     OnSubmit="HandleCloneSubmit" />
-@code {
-    [Parameter] [EditorRequired] public AccessPoint AccessPoint { get; set; } = default!;
-}
 
 @code {
-    private bool _confirmDeleteOpen;
+    [Parameter][EditorRequired]
+    public AccessPoint AccessPoint { get; set; } = default!;
 
-    [Parameter] public EventCallback<string> OnDeleted { get; set; }
+    [Parameter]
+    public EventCallback<string> OnDeleted { get; set; }
+
+    bool _isEditing;
+    bool _confirmDeleteOpen;
+    bool _renameOpen;
+    bool _cloneOpen;
+
+    AccessPointEditModel _edit = new();
+
+    void BeginEdit()
+    {
+        _edit = AccessPointEditModel.From(AccessPoint);
+        _isEditing = true;
+    }
+
+    async Task Save()
+    {
+        _isEditing = false;
+
+        await UpdateUseCase.ExecuteAsync(
+            AccessPoint.Name,
+            _edit.Model,
+            _edit.Speed);
+
+        // update local view model
+        AccessPoint.Model = _edit.Model;
+        AccessPoint.Speed = _edit.Speed;
+    }
+
+    void Cancel()
+    {
+        _isEditing = false;
+    }
 
     void ConfirmDelete()
     {
@@ -110,12 +180,6 @@
             await OnDeleted.InvokeAsync(AccessPoint.Name);
     }
 
-}
-
-@code
-{
-    bool _renameOpen;
-
     void OpenRename()
     {
         _renameOpen = true;
@@ -127,11 +191,6 @@
         Nav.NavigateTo($"resources/hardware/{newName}");
     }
 
-}
-@code
-{
-    bool _cloneOpen;
-
     void OpenClone()
     {
         _cloneOpen = true;
@@ -140,8 +199,21 @@
     async Task HandleCloneSubmit(string newName)
     {
         await CloneUseCase.ExecuteAsync(AccessPoint.Name, newName);
-
         Nav.NavigateTo($"resources/hardware/{newName}");
     }
 
-}
+    public class AccessPointEditModel
+    {
+        public string? Model { get; set; }
+        public double? Speed { get; set; }
+
+        public static AccessPointEditModel From(AccessPoint ap)
+        {
+            return new AccessPointEditModel
+            {
+                Model = ap.Model,
+                Speed = ap.Speed
+            };
+        }
+    }
+}

Shared.Rcl/Firewalls/FirewallCardComponent.razor

@@ -69,7 +69,15 @@
             <div class="text-zinc-400 mb-1">Model</div>
             @if (_isEditing)
             {
-                <input class="input"
+                <input
+                    class="w-full px-3 py-2 rounded-md
+                           bg-zinc-800 text-zinc-100
+                           border border-zinc-600
+                           placeholder-zinc-500
+                           focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500
+                           hover:border-zinc-400
+                           transition-colors duration-150
+                           cursor-text"
                        @bind="_edit.Model"/>
             }
             else if (!string.IsNullOrWhiteSpace(Firewall.Model))

Shared.Rcl/Routers/RouterCardComponent.razor

@@ -66,7 +66,15 @@
             <div class="text-zinc-400 mb-1">Model</div>
             @if (_isEditing)
             {
-                <input class="input"
+                <input
+                    class="w-full px-3 py-2 rounded-md
+                           bg-zinc-800 text-zinc-100
+                           border border-zinc-600
+                           placeholder-zinc-500
+                           focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500
+                           hover:border-zinc-400
+                           transition-colors duration-150
+                           cursor-text"
                        @bind="_edit.Model"/>
             }
             else if (!string.IsNullOrWhiteSpace(Router.Model))

Shared.Rcl/Services/ServiceCardComponent.razor

@@ -66,7 +66,15 @@
             <div class="text-zinc-400 mb-1">IP</div>
             @if (_isEditing)
             {
-                <input class="input"
+                <input
+                    class="w-full px-3 py-2 rounded-md
+                           bg-zinc-800 text-zinc-100
+                           border border-zinc-600
+                           placeholder-zinc-500
+                           focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500
+                           hover:border-zinc-400
+                           transition-colors duration-150
+                           cursor-text"
                        @bind="_edit.Ip"/>
             }
             else if (!string.IsNullOrWhiteSpace(Service.Network?.Ip))
@@ -81,7 +89,6 @@
             @if (_isEditing)
             {
                 <input type="number"
-                       class="input"
                        @bind="_edit.Port"/>
             }
             else if (Service.Network?.Port.HasValue == true)
@@ -95,7 +102,15 @@
             <div class="text-zinc-400 mb-1">Protocol</div>
             @if (_isEditing)
             {
-                <input class="input"
+                <input
+                    class="w-full px-3 py-2 rounded-md
+                           bg-zinc-800 text-zinc-100
+                           border border-zinc-600
+                           placeholder-zinc-500
+                           focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500
+                           hover:border-zinc-400
+                           transition-colors duration-150
+                           cursor-text"
                        @bind="_edit.Protocol"/>
             }
             else if (!string.IsNullOrWhiteSpace(Service.Network?.Protocol))
@@ -109,7 +124,15 @@
             <div class="text-zinc-400 mb-1">URL</div>
             @if (_isEditing)
             {
-                <input class="input"
+                <input
+                    class="w-full px-3 py-2 rounded-md
+                           bg-zinc-800 text-zinc-100
+                           border border-zinc-600
+                           placeholder-zinc-500
+                           focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500
+                           hover:border-zinc-400
+                           transition-colors duration-150
+                           cursor-text"
                        @bind="_edit.Url"/>
             }
             else if (!string.IsNullOrWhiteSpace(Service.Network?.Url))

Shared.Rcl/Switches/SwitchCardComponent.razor

@@ -67,7 +67,15 @@
             <div class="text-zinc-400 mb-1">Model</div>
             @if (_isEditing)
             {
-                <input class="input"
+                <input
+                    class="w-full px-3 py-2 rounded-md
+                           bg-zinc-800 text-zinc-100
+                           border border-zinc-600
+                           placeholder-zinc-500
+                           focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500
+                           hover:border-zinc-400
+                           transition-colors duration-150
+                           cursor-text"
                        @bind="_edit.Model"/>
             }
             else if (!string.IsNullOrWhiteSpace(Switch.Model))

Shared.Rcl/Systems/SystemCardComponent.razor

@@ -71,7 +71,14 @@
 
             @if (_isEditing)
             {
-                <select class="input"
+                <select                      class="w-full px-3 py-2 rounded-md
+                           bg-zinc-800 text-zinc-100
+                           border border-zinc-600
+                           placeholder-zinc-500
+                           focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500
+                           hover:border-zinc-400
+                           transition-colors duration-150
+                           cursor-text"
                         @bind="_edit.Type">
                     @foreach (var type in SystemResource.ValidSystemTypes)
                     {
@@ -91,7 +98,15 @@
             <div class="text-zinc-400 mb-1">OS</div>
             @if (_isEditing)
             {
-                <input class="input"
+                <input
+                    class="w-full px-3 py-2 rounded-md
+                           bg-zinc-800 text-zinc-100
+                           border border-zinc-600
+                           placeholder-zinc-500
+                           focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500
+                           hover:border-zinc-400
+                           transition-colors duration-150
+                           cursor-text"
                        @bind="_edit.Os"/>
             }
             else if (!string.IsNullOrWhiteSpace(System.Os))
@@ -106,7 +121,14 @@
             @if (_isEditing)
             {
                 <input type="number"
-                       class="input"
+                       class="w-full px-3 py-2 rounded-md
+                           bg-zinc-800 text-zinc-100
+                           border border-zinc-600
+                           placeholder-zinc-500
+                           focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500
+                           hover:border-zinc-400
+                           transition-colors duration-150
+                           cursor-text"
                        @bind="_edit.Cores"/>
             }
             else if (System.Cores.HasValue)
@@ -121,7 +143,14 @@
             @if (_isEditing)
             {
                 <input type="number"
-                       class="input"
+                       class="w-full px-3 py-2 rounded-md
+                           bg-zinc-800 text-zinc-100
+                           border border-zinc-600
+                           placeholder-zinc-500
+                           focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500
+                           hover:border-zinc-400
+                           transition-colors duration-150
+                           cursor-text"
                        @bind="_edit.Ram"/>
             }
             else if (System.Ram.HasValue)

Shared.Rcl/Ups/UpsCardComponent.razor

@@ -63,7 +63,15 @@
             <div class="text-zinc-400 mb-1">Model</div>
             @if (_isEditing)
             {
-                <input class="input"
+                <input
+                    class="w-full px-3 py-2 rounded-md
+                           bg-zinc-800 text-zinc-100
+                           border border-zinc-600
+                           placeholder-zinc-500
+                           focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500
+                           hover:border-zinc-400
+                           transition-colors duration-150
+                           cursor-text"
                        @bind="_edit.Model"/>
             }
             else if (!string.IsNullOrWhiteSpace(Ups.Model))
@@ -78,7 +86,14 @@
             @if (_isEditing)
             {
                 <input type="number"
-                       class="input"
+                       class="w-full px-3 py-2 rounded-md
+                           bg-zinc-800 text-zinc-100
+                           border border-zinc-600
+                           placeholder-zinc-500
+                           focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500
+                           hover:border-zinc-400
+                           transition-colors duration-150
+                           cursor-text"
                        @bind="_edit.Va"/>
             }
             else if (Ups.Va is not null)