OtherCardComponent.razor 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261
  1. @using RackPeek.Domain.Resources.OtherHardware
  2. @using Shared.Rcl.Hardware
  3. @inject UpdateOtherUseCase UpdateUseCase
  4. @inject IGetResourceByNameUseCase<Other> GetByNameUseCase
  5. @inject IDeleteResourceUseCase<Other> DeleteUseCase
  6. @inject IRenameResourceUseCase<Other> RenameUseCase
  7. @inject ICloneResourceUseCase<Other> CloneUseCase
  8. @inject NavigationManager Nav
  9. <div class="border border-zinc-800 rounded p-4 bg-zinc-900"
  10. data-testid=@($"other-item-{Other.Name.Replace(" ", "-")}")>
  11. <div class="flex justify-between items-center mb-3">
  12. <div class="text-zinc-100 hover:text-emerald-300">
  13. <NavLink href="@($"resources/hardware/{Uri.EscapeDataString(Other.Name)}")"
  14. class="block"
  15. data-testid=@($"other-item-{Other.Name.Replace(" ", "-")}-link")>
  16. @Other.Name
  17. </NavLink>
  18. </div>
  19. <div class="flex gap-3 text-xs">
  20. @if (!_isEditing)
  21. {
  22. <button data-testid="edit-other-button"
  23. class="text-zinc-400 hover:text-zinc-200"
  24. @onclick="BeginEdit">
  25. Edit
  26. </button>
  27. <button data-testid="rename-other-button"
  28. class="text-blue-400 hover:text-blue-300 transition"
  29. @onclick="OpenRename">
  30. Rename
  31. </button>
  32. <button data-testid="clone-other-button"
  33. class="text-emerald-400 hover:text-emerald-300 transition"
  34. @onclick="OpenClone">
  35. Clone
  36. </button>
  37. <button data-testid="delete-other-button"
  38. class="text-red-400 hover:text-red-300 transition"
  39. @onclick="ConfirmDelete">
  40. Delete
  41. </button>
  42. }
  43. else
  44. {
  45. <button data-testid="save-other-button"
  46. class="text-emerald-400 hover:text-emerald-300"
  47. @onclick="Save">
  48. Save
  49. </button>
  50. <button data-testid="cancel-other-button"
  51. class="text-zinc-500 hover:text-zinc-300"
  52. @onclick="Cancel">
  53. Cancel
  54. </button>
  55. }
  56. </div>
  57. </div>
  58. <div class="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
  59. <!-- Model -->
  60. <div data-testid="other-model-section">
  61. <div class="text-zinc-400 mb-1">Model</div>
  62. @if (_isEditing)
  63. {
  64. <input data-testid="other-model-input"
  65. class="w-full px-3 py-2 rounded-md bg-zinc-800 text-zinc-100 border border-zinc-600"
  66. @bind="_edit.Model" />
  67. }
  68. else if (!string.IsNullOrWhiteSpace(Other.Model))
  69. {
  70. <div class="text-zinc-300"
  71. data-testid="other-model-value">
  72. @Other.Model
  73. </div>
  74. }
  75. </div>
  76. <!-- Description -->
  77. <div data-testid="other-description-section">
  78. <div class="text-zinc-400 mb-1">Description</div>
  79. @if (_isEditing)
  80. {
  81. <input data-testid="other-description-input"
  82. class="w-full px-3 py-2 rounded-md bg-zinc-800 text-zinc-100 border border-zinc-600"
  83. @bind="_edit.Description" />
  84. }
  85. else if (!string.IsNullOrWhiteSpace(Other.Description))
  86. {
  87. <div class="text-zinc-300"
  88. data-testid="other-description-value">
  89. @Other.Description
  90. </div>
  91. }
  92. </div>
  93. <!-- Ports -->
  94. <PortGroupEditor T="Other"
  95. Resource="Other"
  96. OnResourceChanged="r => Other = r"
  97. TestIdPrefix="other-ports" />
  98. <ResourceTagEditor Resource="Other"
  99. TestIdPrefix="other" />
  100. <ResourceLabelEditor Resource="Other"
  101. TestIdPrefix="other" />
  102. <div class="md:col-span-2"
  103. data-testid="other-notes-section">
  104. <div class="text-zinc-400 mb-1">Notes</div>
  105. @if (_isEditing)
  106. {
  107. <MarkdownEditor @bind-Value="_edit.Notes"
  108. ShowActionButtons="false"
  109. TestIdPrefix="other-notes-editor" />
  110. }
  111. else
  112. {
  113. <MarkdownViewer Value="@Other.Notes"
  114. ShowEditButton="false"
  115. TestIdPrefix="other-notes-viewer" />
  116. }
  117. </div>
  118. </div>
  119. </div>
  120. <ConfirmModal IsOpen="_confirmDeleteOpen"
  121. IsOpenChanged="v => _confirmDeleteOpen = v"
  122. Title="Delete Other Hardware"
  123. ConfirmText="Delete"
  124. ConfirmClass="bg-red-600 hover:bg-red-500"
  125. OnConfirm="DeleteOther"
  126. TestIdPrefix="Other">
  127. Are you sure you want to delete <strong>@Other.Name</strong>?
  128. </ConfirmModal>
  129. <StringValueModal IsOpen="_renameOpen"
  130. IsOpenChanged="v => _renameOpen = v"
  131. Title="Rename Other Hardware"
  132. Description="Enter a new name for this hardware"
  133. Label="New name"
  134. Value="@Other.Name"
  135. OnSubmit="HandleRenameSubmit"
  136. TestIdPrefix="other-rename" />
  137. <StringValueModal IsOpen="_cloneOpen"
  138. IsOpenChanged="v => _cloneOpen = v"
  139. Title="Clone resource"
  140. Description="Enter a name for the cloned resource"
  141. Label="New resource name"
  142. Value="@($"{Other.Name}-copy")"
  143. OnSubmit="HandleCloneSubmit"
  144. TestIdPrefix="other-clone" />
  145. @code {
  146. [Parameter] [EditorRequired] public Other Other { get; set; } = default!;
  147. [Parameter] public EventCallback<string> OnDeleted { get; set; }
  148. bool _isEditing;
  149. bool _confirmDeleteOpen;
  150. OtherEditModel _edit = new();
  151. void BeginEdit()
  152. {
  153. _edit = OtherEditModel.From(Other);
  154. _isEditing = true;
  155. }
  156. async Task Save()
  157. {
  158. _isEditing = false;
  159. await UpdateUseCase.ExecuteAsync(
  160. Other.Name,
  161. _edit.Model,
  162. _edit.Description,
  163. _edit.Notes);
  164. Other = await GetByNameUseCase.ExecuteAsync(Other.Name);
  165. }
  166. void Cancel()
  167. {
  168. _isEditing = false;
  169. }
  170. void ConfirmDelete()
  171. {
  172. _confirmDeleteOpen = true;
  173. }
  174. async Task DeleteOther()
  175. {
  176. _confirmDeleteOpen = false;
  177. await DeleteUseCase.ExecuteAsync(Other.Name);
  178. if (OnDeleted.HasDelegate)
  179. await OnDeleted.InvokeAsync(Other.Name);
  180. }
  181. bool _renameOpen;
  182. void OpenRename()
  183. {
  184. _renameOpen = true;
  185. }
  186. async Task HandleRenameSubmit(string newName)
  187. {
  188. await RenameUseCase.ExecuteAsync(Other.Name, newName);
  189. Nav.NavigateTo($"resources/hardware/{Uri.EscapeDataString(newName)}");
  190. }
  191. bool _cloneOpen;
  192. void OpenClone()
  193. {
  194. _cloneOpen = true;
  195. }
  196. async Task HandleCloneSubmit(string newName)
  197. {
  198. await CloneUseCase.ExecuteAsync(Other.Name, newName);
  199. Nav.NavigateTo($"resources/hardware/{Uri.EscapeDataString(newName)}");
  200. }
  201. public class OtherEditModel
  202. {
  203. public string? Model { get; set; }
  204. public string? Description { get; set; }
  205. public string? Notes { get; set; }
  206. public static OtherEditModel From(Other other)
  207. {
  208. return new OtherEditModel
  209. {
  210. Model = other.Model,
  211. Description = other.Description,
  212. Notes = other.Notes
  213. };
  214. }
  215. }
  216. }