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