HardwareOrSystemSelectionModal.razor 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
  1. @using System.ComponentModel.DataAnnotations
  2. @using RackPeek.Domain.Persistence
  3. @using RackPeek.Domain.Resources.Hardware
  4. @using RackPeek.Domain.Resources.SystemResources
  5. @inject IResourceCollection Repo
  6. @if (IsOpen)
  7. {
  8. <div class="fixed inset-0 z-50 flex items-center justify-center">
  9. <!-- Backdrop -->
  10. <div class="absolute inset-0 bg-black/70" @onclick="Cancel"></div>
  11. <!-- Modal -->
  12. <div class="relative bg-zinc-900 border border-zinc-800 rounded w-full max-w-lg p-4">
  13. <!-- Header -->
  14. <div class="flex justify-between items-center mb-4">
  15. <div class="text-zinc-100 text-sm font-medium">
  16. @Title
  17. </div>
  18. <button class="text-zinc-400 hover:text-zinc-200" @onclick="Cancel">
  19. ✕
  20. </button>
  21. </div>
  22. <EditForm Model="_model" OnValidSubmit="HandleAccept">
  23. <DataAnnotationsValidator/>
  24. <div class="space-y-3 text-sm">
  25. <!-- Search -->
  26. <div>
  27. @* ReSharper disable once CSharpWarnings::CS8619 *@
  28. <InputText class="w-full bg-zinc-800 border border-zinc-700 rounded px-2 py-1 text-zinc-100"
  29. placeholder="Search hardware or systems…"
  30. Value="@_search"
  31. ValueChanged="OnSearchChanged"
  32. ValueExpression="() => _search"
  33. @oninput="OnSearchInput"/>
  34. </div>
  35. <!-- Selection -->
  36. <div>
  37. <InputSelect class="w-full bg-zinc-800 border border-zinc-700 rounded px-2 py-1 text-zinc-100"
  38. @bind-Value="_model.Value">
  39. <option value="">Select hardware or system…</option>
  40. @foreach (var group in FilteredItems)
  41. {
  42. <optgroup label="@group.Key">
  43. @foreach (var item in group.Value)
  44. {
  45. <option value="@item.Value">@item.Label</option>
  46. }
  47. </optgroup>
  48. }
  49. </InputSelect>
  50. @* Optional helper text *@
  51. @if (!string.IsNullOrWhiteSpace(_model.Value) && _lookup.TryGetValue(_model.Value!, out var selected))
  52. {
  53. <div class="mt-2 text-xs text-zinc-400">
  54. Selected: <span class="text-zinc-200">@selected.Type</span>
  55. <span class="text-zinc-600">•</span>
  56. <span>@selected.Group</span>
  57. </div>
  58. }
  59. </div>
  60. </div>
  61. <!-- Actions -->
  62. <div class="flex justify-end items-center mt-5 gap-2">
  63. <button type="button"
  64. class="px-3 py-1 rounded border border-zinc-700 text-zinc-300 hover:bg-zinc-800"
  65. @onclick="Cancel">
  66. Cancel
  67. </button>
  68. <button type="submit"
  69. class="px-3 py-1 rounded bg-emerald-600 text-black hover:bg-emerald-500"
  70. disabled="@(!CanAccept)">
  71. Accept
  72. </button>
  73. </div>
  74. </EditForm>
  75. </div>
  76. </div>
  77. }
  78. @code {
  79. /* ---------- Parameters ---------- */
  80. [Parameter] public bool IsOpen { get; set; }
  81. [Parameter] public EventCallback<bool> IsOpenChanged { get; set; }
  82. [Parameter] public string Title { get; set; } = "Select hardware or system";
  83. [Parameter] public string? Value { get; set; }
  84. [Parameter] public EventCallback<string?> OnAccept { get; set; }
  85. private SelectionFormModel _model = new();
  86. private string _search = string.Empty;
  87. private List<SelectionItem> _items = new();
  88. private Dictionary<string, SelectionItem> _lookup = new();
  89. private bool CanAccept => !string.IsNullOrWhiteSpace(_model.Value);
  90. /* ---------- Lifecycle ---------- */
  91. protected override async Task OnParametersSetAsync()
  92. {
  93. if (!IsOpen) return;
  94. // Load both sets
  95. var hardware = (await Repo.GetAllOfTypeAsync<Hardware>())
  96. .Select(h => SelectionItem.Hardware(h.Name, h.Kind))
  97. .ToList();
  98. var systems = (await Repo.GetAllOfTypeAsync<SystemResource>())
  99. .Select(s => SelectionItem.System(s.Name, string.IsNullOrWhiteSpace(s.Type) ? "System" : s.Type!))
  100. .ToList();
  101. _items = hardware
  102. .Concat(systems)
  103. .OrderBy(i => i.TypeSort)
  104. .ThenBy(i => i.Group)
  105. .ThenBy(i => i.Label)
  106. .ToList();
  107. _lookup = _items.ToDictionary(i => i.Value, i => i);
  108. _model = new SelectionFormModel { Value = Value };
  109. _search = string.Empty;
  110. }
  111. private IReadOnlyDictionary<string, List<SelectionItem>> FilteredItems =>
  112. _items
  113. .Where(i =>
  114. string.IsNullOrWhiteSpace(_search) ||
  115. i.Label.Contains(_search.Trim(), StringComparison.OrdinalIgnoreCase) ||
  116. i.Group.Contains(_search.Trim(), StringComparison.OrdinalIgnoreCase))
  117. .GroupBy(i => $"{i.Type} — {i.Group}")
  118. .ToDictionary(
  119. g => g.Key,
  120. g => g.OrderBy(i => i.Label).ToList());
  121. private async Task HandleAccept()
  122. {
  123. await OnAccept.InvokeAsync(_model.Value);
  124. await Close();
  125. }
  126. private async Task Cancel()
  127. {
  128. await Close();
  129. }
  130. private async Task Close()
  131. {
  132. _model = new SelectionFormModel();
  133. _search = string.Empty;
  134. await IsOpenChanged.InvokeAsync(false);
  135. }
  136. private void OnSearchChanged(string? value)
  137. {
  138. _search = value ?? string.Empty;
  139. }
  140. private void OnSearchInput(ChangeEventArgs e)
  141. {
  142. _search = e.Value?.ToString() ?? string.Empty;
  143. if (FilteredItems.SelectMany(g => g.Value).All(i => i.Value != _model.Value))
  144. _model.Value = null;
  145. }
  146. private sealed class SelectionFormModel
  147. {
  148. [Required] public string? Value { get; set; }
  149. }
  150. private sealed record SelectionItem(
  151. string Type,
  152. string Group,
  153. string Label,
  154. string Value,
  155. int TypeSort)
  156. {
  157. public static SelectionItem Hardware(string name, string kind)
  158. {
  159. return new SelectionItem("Hardware", kind, name, $"{name}", 0);
  160. }
  161. public static SelectionItem System(string name, string category)
  162. {
  163. return new SelectionItem("System", category, name, $"{name}", 1);
  164. }
  165. }
  166. }