feat: Delete and Update track

src/EventHub.Application.Contracts/Events/DeleteTractDto.cs

@@ -0,0 +1,6 @@
+namespace EventHub.Events;
+
+public class DeleteTractDto
+{
+    public string Name { get; set; }
+}

src/EventHub.Application.Contracts/Events/IEventAppService.cs

@@ -27,6 +27,8 @@ namespace EventHub.Events
 
         Task AddTrackAsync(Guid id, AddTractDto input);
 
+        Task DeleteTrackAsync(Guid id, Guid trackId);
+
         Task AddSessionAsync(Guid id, AddSessionDto input);
 
         Task<IRemoteStreamContent> GetCoverImageAsync(Guid id);

src/EventHub.Application/Events/EventAppService.cs

@@ -270,6 +270,14 @@ namespace EventHub.Events
             await _eventRepository.UpdateAsync(@event);
         }
 
+        public async Task DeleteTrackAsync(Guid id, Guid trackId)
+        {
+            var @event = await _eventRepository.GetAsync(id, true);
+            await CheckOwnerControlAsync(@event);
+
+            @event.RemoveTrack(trackId);
+        }
+
         [Authorize]
         public async Task AddSessionAsync(Guid id, AddSessionDto input)
         {

src/EventHub.Domain.Shared/EventHubErrorCodes.cs

@@ -17,5 +17,6 @@
         public const string UserNotFound = "EventHub:UserNotFound";
         public const string OrganizationNotFound = "EventHub:OrganizationNotFound";
         public const string TrackNameAlreadyExist = "EventHub:TrackNameAlreadyExist";
+        public const string TrackNotFound = "EventHub:TrackNotFound";
     }
 }

src/EventHub.Domain.Shared/Localization/EventHub/en.json

@@ -153,6 +153,7 @@
     "Online": "Online",
     "InPerson": "In Person",
     "UpgradeToPremium": "Upgrade To Premium",
-    "EventHub:TrackNameAlreadyExist": "The track {Name} already exists"
+    "EventHub:TrackNameAlreadyExist": "The track {Name} already exists",
+    "EventHub:TrackNotFound": "The track not found!"
   }
 }

src/EventHub.Domain/Events/Event.cs

@@ -139,6 +139,19 @@ namespace EventHub.Events
 
             return this;
         }
+        
+        public Event RemoveTrack(Guid trackId)
+        {
+            var track = Tracks.SingleOrDefault(x => x.Id == trackId);
+            if (track is null)
+            {
+                throw new BusinessException(EventHubErrorCodes.TrackNotFound);
+            }
+            
+            Tracks.Remove(track);
+
+            return this;
+        }
 
         public Event AddSession(
             Guid trackId,

src/EventHub.HttpApi/Controllers/Events/EventController.cs

@@ -88,6 +88,13 @@ namespace EventHub.Controllers.Events
 			await _eventAppService.AddTrackAsync(id, input);
 		}
 
+		[HttpPost]
+		[Route("{id}/tracks/{trackId}")]
+		public async Task DeleteTrackAsync(Guid id, Guid trackId)
+		{
+			await _eventAppService.DeleteTrackAsync(id, trackId);
+		}
+
 		[HttpPost]
 		[Route("{id}/sessions")]
 		public async Task AddSessionAsync(Guid id, AddSessionDto input)

src/EventHub.Web/Pages/Events/Components/CreateEventArea/_addTrackSection.cshtml

@@ -16,7 +16,14 @@
                             <div class="col-md-3">
                                 <div class="track-item mb-4">
                                     <span class="track-name">@track.Name</span>
-                                    <a href="javascript:;" data-bs-toggle="modal" data-bs-target="#editTrackModal" class="mt-3 d-block text-info"><small><i class="fa fa-edit me-1"></i>Edit</small></a>
+                                        <abp-row>
+                                            <abp-column>
+                                                <a id="@track.Id" data-track-name="@track.Name" href="javascript:;" data-bs-toggle="modal" data-bs-target="#EditTrackModal" class="mt-3 d-block text-info edit-track-button"><small><i class="fa fa-edit me-1"></i>Edit</small></a>
+                                            </abp-column>
+                                            <abp-column>
+                                                <a id="@track.Id" href="javascript:;" class="mt-3 d-block text-info delete-track-button"><small><i class="fa fa-trash me-1"></i>Delete</small></a>
+                                            </abp-column>
+                                        </abp-row>
                                 </div>
                             </div>   
                         }
@@ -31,7 +38,7 @@
                 <div class="card-footer bg-white border-0 p-5 pt-1"> 
                     <div class="row">
                         <div class="col-6">
-                            <a href="#" class="btn btn-secondary"><i class="fa fa-arrow-left me-2"></i> Previous Step </a>
+                            <button id="PreviousStepButtonInTrackSession" data-target-step="@CreateEventAreaViewComponent.ProgressStepType.NewEvent" class="btn btn-secondary step-transition"><i class="fa fa-arrow-left me-2"></i> Previous Step </button>
                         </div>
                         <div class="col-6 text-end">
                             <a href="#" class="btn btn-link">Skip This Step</a>
@@ -43,7 +50,7 @@
         </div> 
     </div>
     
-    @* Add Track modal *@
+    @* Add Track Modal *@
     <div class="modal fade" id="AddTrackModal" tabindex="-1" aria-labelledby="AddTrackModal" aria-hidden="true">
         <div class="modal-dialog modal-dialog-centered">
             <div class="modal-content">
@@ -51,18 +58,43 @@
                     <h5 class="modal-title">Add New Track</h5>
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
-                <div class="modal-body profile-content px-5">
+                <form  id="AddNewTrackForm" method="post">
-                    <div class="form-floating">
+                    <div class="modal-body profile-content px-5">
-                        <input type="text" class="form-control" id="TrackName" placeholder=" ">
+                        <div class="form-floating">
-                        <label for="TrackName">Track Name</label>
+                            <input type="text" class="form-control" id="TrackNameInput" placeholder=" " required>
+                            <label for="TrackNameInput">Track Name</label>
+                        </div>
                     </div>
+                    <div class="modal-footer border-0 p-5 pt-2">
+                        <button type="button" class="btn btn-secondary modal-close-button" data-bs-dismiss="modal">Close</button>
+                        <button type="submit" class="btn btn-primary">
+                            <i class="fa fa-plus me-2"></i> Add
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+    
+    @* Edit Track Modal *@
+    <div class="modal fade" id="EditTrackModal" tabindex="-1" aria-labelledby="EditTrackModal" aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered">
+            <div class="modal-content">
+                <div class="modal-header border-0 p-5 pb-2">
+                    <h5 class="modal-title">Edit This Track</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
-                <div class="modal-footer border-0 p-5 pt-2">
+                <form id="EditTrackForm">
-                    <button type="button" class="btn btn-secondary modal-close-button" data-bs-dismiss="modal">Close</button>
+                    <div class="modal-body profile-content px-5">
-                    <button id="AddNewTrackButton" type="button" class="btn btn-primary">
+                        <input type="hidden" id="TrackId" value="TrackIdPlaceHolder"/>
-                        <i class="fa fa-plus me-2"></i> Add
+                        <label for="TrackNameInput" class="mb-2">Edit Track Name</label>
-                    </button>
+                        <input type="text" class="form-control" id="TrackNameInput" placeholder="There is a track name here" required>
-                </div>
+                    </div>
+                    <div class="modal-footer border-0 p-5 pt-2">
+                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+                        <button type="submit" class="btn btn-primary"><i class="fa fa-check-circle me-2"></i>Save</button>
+                    </div>
+                </form>
             </div>
         </div>
     </div>

src/EventHub.Web/Pages/Events/Components/CreateEventArea/create-event-area.js

@@ -1,11 +1,11 @@
 (function () {
-    var stepType = {
-        "NewEvent": "NewEvent",
-        "NewTrack": "NewTrack",
-        "NewSession": "NewSession"
-    }
-
     abp.widgets.CreateEventArea = function ($wrapper) {
+        var stepType = {
+            "NewEvent": "NewEvent",
+            "NewTrack": "NewTrack",
+            "NewSession": "NewSession"
+        }
+        
         var widgetManager = $wrapper.data('abp-widget-manager');
         var eventApiService = eventHub.controllers.events.event;
         var eventIdInput = $('#EventId');
@@ -21,7 +21,9 @@
         }
 
         var init = function () {
-            console.log(filter)
+            FocusTrackNameInputInModalEventHandler("AddTrackModal")
+            FocusTrackNameInputInModalEventHandler("EditTrackModal")
+            
             if (eventIdInput.val().length === 36) {
                 // TODO: Add organization in UppdateEventDto
                 $('#OrganizationId').prop("disabled", true).removeAttr('name');
@@ -55,23 +57,85 @@
                 ScrollToWrapperBegin();
             }
 
-            AddNewTrackButtonClickEventHandler();
+            AddNewTrackSubmitFormEventHandler();
+            OpenEditTrackModalClickEventHandler();
+            EditTrackSubmitFormEventHandler();
+            DeleteTrackButtonClickEventHandler();
+
+            PrevieousOrNextStepTransitionEventHandler()
         };
 
-        function AddNewTrackButtonClickEventHandler() {
+        function AddNewTrackSubmitFormEventHandler() {
-            var addNewTrackButton = $('#AddNewTrackButton');
+            var addNewTrackForm = $('#AddNewTrackForm');
-            addNewTrackButton.click(function (e) {
+            addNewTrackForm.submit(function (e) {
                 e.preventDefault();
-                var trackName = $('#TrackName').val().trim();
+                var trackName = addNewTrackForm.find('#TrackNameInput').val().trim();
                 eventApiService.addTrack(eventIdInput.val(), {name: trackName}).then(function () {
                     $('#AddTrackModal').modal('hide');
                     abp.notify.success('Added the track');
+                    FillFilter(stepType.NewTrack);
+                    widgetManager.refresh();
+                });
+            });
+        }
+        
+        function FocusTrackNameInputInModalEventHandler(elementId) {
+            $('#'+ elementId).on('shown.bs.modal', function () {
+                $(this).find('input[type=text]').trigger('focus')
+            });
+        }
+        
+        function OpenEditTrackModalClickEventHandler() {
+            $('.edit-track-button').click(function (e) {
+                var editTrackModal = $('#EditTrackModal');
+                var clickedTrackId = this.id;
+                var trackName = $('#' + clickedTrackId).data('track-name');
+                editTrackModal.find('#TrackNameInput').val(trackName);
+                editTrackModal.find('#TrackId').val(clickedTrackId);
+            });
+        }
+
+        function EditTrackSubmitFormEventHandler() {
+            var editTrackForm = $('#EditTrackForm');
+            editTrackForm.submit(function (e) {
+                e.preventDefault();
+                var trackId = editTrackForm.find('#TrackId').val();
+                var oldTrackName = $('#' + trackId).data('track-name');
+                var trackName = editTrackForm.find('#TrackNameInput').val().trim();
+                if (trackName === oldTrackName){
+                    abp.notify.error('Track name must be different from the previous name.');
+                    return;
+                }
+                eventApiService.deleteTrack(eventIdInput.val(), trackId).then(function () {
+                    eventApiService.addTrack(eventIdInput.val(), {name: trackName}).then(function () {
+                        $('#EditTrackModal').modal('hide');
+                        abp.notify.success('Updated the track');
+                        FillFilter(stepType.NewTrack)
+                        widgetManager.refresh();
+                    });
+                });
+            });
+        }
+        
+        function DeleteTrackButtonClickEventHandler() {
+            $('.delete-track-button').click(function (e) {
+                eventApiService.deleteTrack(eventIdInput.val(), this.id).then(function () {
+                    abp.notify.success('Successfully deleted');
                     FillFilter(stepType.NewTrack)
                     widgetManager.refresh();
                 });
             });
         }
 
+        function PrevieousOrNextStepTransitionEventHandler() {
+            $('.step-transition').click(function (e) {
+                var clickedButtonId = this.id;
+                var targetStep = $('#' + clickedButtonId).data('target-step');
+                FillFilter(targetStep);
+                widgetManager.refresh();
+            });
+        }
+
         function FillFilter(stepType) {
             filter.stepType = stepType;
             filter.eventUrlCode = eventUrlCodeInput.val();
@@ -83,6 +147,22 @@
             }, 100);
         }
 
+        $(document).ajaxSend(function( event, jqxhr, settings, exception ) {
+            ButtonsBusy(true)
+        });
+        
+        $(document).ajaxComplete(function( event, jqxhr, settings, exception ) {
+            ButtonsBusy(false)
+        });
+
+        function ButtonsBusy(isBusy) {
+            if (isBusy){
+                $('button[type=submit]').attr('disabled', 'disabled')
+            }else{
+                $('button[type=submit]').removeAttr('disabled')
+            }
+        }
+
         return {
             getFilters: getFilters,
             init: init,