CpuModal.razor 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
  1. @using System.ComponentModel.DataAnnotations
  2. @using RackPeek.Domain.Resources.Hardware.Models
  3. @if (IsOpen)
  4. {
  5. <div class="fixed inset-0 z-50 flex items-center justify-center">
  6. <!-- Backdrop -->
  7. <div class="absolute inset-0 bg-black/70" @onclick="Cancel"></div>
  8. <!-- Modal -->
  9. <div class="relative bg-zinc-900 border border-zinc-800 rounded w-full max-w-md p-4">
  10. <!-- Header -->
  11. <div class="flex justify-between items-center mb-4">
  12. <div class="text-zinc-100 text-sm font-medium">
  13. @(IsEdit ? "Modify CPU" : "Add CPU")
  14. </div>
  15. <button
  16. class="text-zinc-400 hover:text-zinc-200"
  17. @onclick="Cancel">
  18. </button>
  19. </div>
  20. <!-- Form -->
  21. <EditForm Model="_model" OnValidSubmit="HandleValidSubmit">
  22. <DataAnnotationsValidator />
  23. <ValidationSummary class="text-xs text-red-400 mb-3" />
  24. <div class="space-y-3 text-sm">
  25. <div>
  26. <label class="block text-zinc-400 mb-1">Model</label>
  27. <InputText
  28. class="w-full bg-zinc-800 border border-zinc-700 rounded px-2 py-1 text-zinc-100"
  29. @bind-Value="_model.Model" />
  30. </div>
  31. <div class="grid grid-cols-2 gap-3">
  32. <div>
  33. <label class="block text-zinc-400 mb-1">Cores</label>
  34. <InputNumber
  35. class="w-full bg-zinc-800 border border-zinc-700 rounded px-2 py-1 text-zinc-100"
  36. @bind-Value="_model.Cores" />
  37. </div>
  38. <div>
  39. <label class="block text-zinc-400 mb-1">Threads</label>
  40. <InputNumber
  41. class="w-full bg-zinc-800 border border-zinc-700 rounded px-2 py-1 text-zinc-100"
  42. @bind-Value="_model.Threads" />
  43. </div>
  44. </div>
  45. </div>
  46. <!-- Actions -->
  47. <div class="flex justify-between items-center mt-5">
  48. @if (IsEdit)
  49. {
  50. <button
  51. type="button"
  52. class="text-red-400 hover:text-red-300 text-sm"
  53. @onclick="HandleDelete">
  54. Delete CPU
  55. </button>
  56. }
  57. else
  58. {
  59. <span></span>
  60. }
  61. <div class="flex gap-2">
  62. <button
  63. 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
  69. type="submit"
  70. class="px-3 py-1 rounded bg-emerald-600 text-black hover:bg-emerald-500">
  71. @(IsEdit ? "Update" : "Add")
  72. </button>
  73. </div>
  74. </div>
  75. </EditForm>
  76. </div>
  77. </div>
  78. }
  79. @code {
  80. [Parameter] public bool IsOpen { get; set; }
  81. [Parameter] public EventCallback<bool> IsOpenChanged { get; set; }
  82. [Parameter] public Cpu? Value { get; set; }
  83. [Parameter] public EventCallback<Cpu> OnSubmit { get; set; }
  84. // NEW: delete callback
  85. [Parameter] public EventCallback<Cpu> OnDelete { get; set; }
  86. private CpuFormModel _model = new();
  87. private bool IsEdit => Value is not null;
  88. protected override void OnParametersSet()
  89. {
  90. if (IsOpen)
  91. {
  92. _model = Value is null
  93. ? new CpuFormModel()
  94. : new CpuFormModel
  95. {
  96. Model = Value.Model,
  97. Cores = Value.Cores,
  98. Threads = Value.Threads
  99. };
  100. }
  101. }
  102. private async Task HandleValidSubmit()
  103. {
  104. var cpu = new Cpu
  105. {
  106. Model = _model.Model,
  107. Cores = _model.Cores,
  108. Threads = _model.Threads
  109. };
  110. await OnSubmit.InvokeAsync(cpu);
  111. await Close();
  112. }
  113. private async Task HandleDelete()
  114. {
  115. if (Value is not null)
  116. {
  117. await OnDelete.InvokeAsync(Value);
  118. await Close();
  119. }
  120. }
  121. private async Task Cancel()
  122. {
  123. await Close();
  124. }
  125. private async Task Close()
  126. {
  127. _model = new();
  128. await IsOpenChanged.InvokeAsync(false);
  129. }
  130. private class CpuFormModel
  131. {
  132. [Required]
  133. public string? Model { get; set; }
  134. [Range(1, 1024)]
  135. public int? Cores { get; set; }
  136. [Range(1, 2048)]
  137. public int? Threads { get; set; }
  138. }
  139. }