|
26 | 26 | <button @onclick=toggleDetailsView class="btn btn-outline"><span class=@toggleIcon></span></button> |
27 | 27 | <PlayButtonWithDropdown Song="SongViewModel" /> |
28 | 28 | <PlusButtonWithMenu Song="SongViewModel" /> |
29 | | - </div> |
30 | | - @if (showDetails) |
| 29 | + </div> @if (showDetails) |
31 | 30 | { |
32 | 31 | <div class="d-flex justify-content-between mb-2 pt-2 ps-2 g-0"> |
33 | 32 | <div class=""> |
34 | 33 | <button class="btn btn-outline-danger" @onclick=delete><span class="oi oi-delete me-1"></span>Delete</button> |
35 | 34 | </div> |
36 | 35 | <div class=""> |
37 | | - <button class="btn btn-outline-success" @onclick=togglePlaylistModalVisibility><span class="oi oi-list me-1"></span>Playlists</button> |
38 | | - </div> |
39 | | - <div class=""> |
40 | | - <button class="btn btn-outline-info" disabled><span class="oi oi-pencil me-1"></span>Edit</button> |
| 36 | + <button class="btn btn-outline-info" @onclick=toggleEditModalVisibility><span class="oi oi-pencil me-1"></span>Edit</button> |
41 | 37 | </div> |
42 | 38 | </div> |
43 | 39 | } |
44 | 40 | </div> |
45 | 41 | } |
46 | 42 |
|
47 | | -@if (!isPlaylistModalHidden) |
| 43 | +@if (!isEditModalHidden) |
48 | 44 | { |
49 | | - <FluentDialog Hidden=@isPlaylistModalHidden> |
50 | | - <AddToPlaylistModal Song=SongViewModel Closed=@togglePlaylistModalVisibility /> |
| 45 | + <FluentDialog Hidden=@isEditModalHidden> |
| 46 | + <div class="modal-dialog"> |
| 47 | + <div class="modal-content"> |
| 48 | + <div class="modal-header"> |
| 49 | + <h5 class="modal-title">Edit Song</h5> |
| 50 | + </div> |
| 51 | + <div class="modal-body"> |
| 52 | + <div class="mb-3"> |
| 53 | + <label for="songName" class="form-label">Title</label> |
| 54 | + <input type="text" class="form-control" id="songName" @bind="editedName" /> |
| 55 | + </div> |
| 56 | + <div class="mb-3"> |
| 57 | + <label for="songArtist" class="form-label">Artist</label> |
| 58 | + <input type="text" class="form-control" id="songArtist" @bind="editedArtist" /> |
| 59 | + </div> |
| 60 | + <div class="mb-3"> |
| 61 | + <label for="songAlbum" class="form-label">Album</label> |
| 62 | + <input type="text" class="form-control" id="songAlbum" @bind="editedAlbum" /> |
| 63 | + </div> |
| 64 | + </div> |
| 65 | + <div class="modal-footer"> |
| 66 | + <button type="button" class="btn btn-secondary" @onclick=cancelEdit>Cancel</button> |
| 67 | + <button type="button" class="btn btn-primary" @onclick=saveEdit>Save</button> |
| 68 | + </div> |
| 69 | + </div> |
| 70 | + </div> |
51 | 71 | </FluentDialog> |
52 | 72 | } |
53 | 73 |
|
|
65 | 85 | [Parameter] |
66 | 86 | public EventCallback<int> OnDeleted { get; set; } |
67 | 87 |
|
| 88 | + [Parameter] |
| 89 | + public EventCallback OnUpdated { get; set; } |
| 90 | + |
68 | 91 | private bool showDetails { get; set; } |
69 | | - private bool isPlaylistModalHidden = true; private void toggleDetailsView() => showDetails = !showDetails; |
| 92 | + private bool isEditModalHidden = true; |
| 93 | + private string editedName = string.Empty; |
| 94 | + private string editedArtist = string.Empty; |
| 95 | + private string editedAlbum = string.Empty; |
| 96 | + |
| 97 | + private void toggleDetailsView() => showDetails = !showDetails; |
70 | 98 | private string toggleIcon => showDetails ? "oi oi-chevron-top" : "oi oi-chevron-bottom"; |
71 | 99 |
|
72 | 100 | private bool isDeleteConfirmationOpen = false; |
|
82 | 110 | } |
83 | 111 | } |
84 | 112 |
|
85 | | - void togglePlaylistModalVisibility() => isPlaylistModalHidden = !isPlaylistModalHidden; |
| 113 | + void toggleEditModalVisibility() |
| 114 | + { |
| 115 | + if (isEditModalHidden) |
| 116 | + { |
| 117 | + // Opening modal - populate with current values |
| 118 | + editedName = SongViewModel.Name; |
| 119 | + editedArtist = SongViewModel.Artist; |
| 120 | + editedAlbum = SongViewModel.Album; |
| 121 | + } |
| 122 | + isEditModalHidden = !isEditModalHidden; |
| 123 | + } |
| 124 | + |
| 125 | + void cancelEdit() |
| 126 | + { |
| 127 | + isEditModalHidden = true; |
| 128 | + } |
| 129 | + |
| 130 | + async Task saveEdit() |
| 131 | + { |
| 132 | + try |
| 133 | + { |
| 134 | + await svc.UpdateSongAsync(SongViewModel.SongId, editedName, editedArtist, editedAlbum); |
| 135 | + |
| 136 | + // Update the local model |
| 137 | + SongViewModel.Name = editedName; |
| 138 | + SongViewModel.Artist = editedArtist; |
| 139 | + SongViewModel.Album = editedAlbum; |
| 140 | + |
| 141 | + isEditModalHidden = true; |
| 142 | + await OnUpdated.InvokeAsync(); |
| 143 | + } |
| 144 | + catch (Exception ex) |
| 145 | + { |
| 146 | + logger.LogError(ex, "Error updating song"); |
| 147 | + // You could show an error message here |
| 148 | + } |
| 149 | + } |
86 | 150 | } |
0 commit comments