HardwareSelectionModal.razor 5.8 KB

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