fix: cover image problem

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

@@ -43,7 +43,7 @@
                         </div>
                         <div class="col-6 text-end">
                             <button id="SkipThisStepButtonInTrackSection" data-target-step="@CreateEventAreaViewComponent.ProgressStepType.Preview" class="btn btn-link step-transition text-decoration-none">Skip This Step</button>
-                            <button id="NextStepButtonInTrackSection" data-target-step="@CreateEventAreaViewComponent.ProgressStepType.NewSession" class="btn btn-primary step-transition">Next Step <i class="fa fa-arrow-right ms-2"></i></button>
+                            <button id="NextStepButtonInTrackSection" data-target-step="@CreateEventAreaViewComponent.ProgressStepType.NewSession" class="btn btn-primary step-transition" @(Model.Any() ? "" : "disabled")>Next Step <i class="fa fa-arrow-right ms-2"></i></button>
                         </div>
                     </div>
                 </div>

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

@@ -1,11 +1,16 @@
+@using EventHub.Web
 @using EventHub.Web.Pages.Events.Components.CreateEventArea
 @using Microsoft.AspNetCore.Http
+@using Microsoft.Extensions.Options
 @model EventHub.Web.Pages.Events.Components.CreateEventArea.CreateEventAreaViewComponent.NewEventViewModel
+@inject IOptions<EventHubUrlOptions> UrlOptions
 
 @{
   var organizations = new List<SelectListItem>();
   var countries = new List<SelectListItem>();
   var languages = new List<SelectListItem>();
+  var eventId = ViewData["EventId"] as Guid?;
+  
   @if (ViewData["StepType"]!.ToString() == CreateEventAreaViewComponent.ProgressStepType.NewEvent.ToString())
   {
     organizations = ViewData["Organizations"] as List<SelectListItem>;
@@ -82,7 +87,14 @@
                     <h4 class="mb-4">Cover Image</h4>
                     <div class="row">
                       <div class="col-6">
-                        <div class="image-area"><img id="imageResult" src="#" alt="" class="img-fluid rounded shadow-sm mx-auto d-block"></div>
+                        @if (eventId.HasValue)
+                        {
+                          <div class="image-area img-fluid rounded shadow-sm mx-auto d-block" style="background-image: url(@(UrlOptions.Value.Api.EnsureEndsWith('/') + $"api/eventhub/event/cover-image/{eventId}")" alt="@Model.Title"></div>
+                        }
+                        else
+                        {
+                          <div class="image-area"><img id="imageResult" src="#" alt="" class="img-fluid rounded shadow-sm mx-auto d-block"></div>
+                        }
                       </div>
                       <div class="col-6">
                         <div>
@@ -136,7 +148,8 @@
                     <span asp-validation-for="@Model.Language" class="text-danger"></span>
                   </div>
                   <div class="col-md-12 text-end">
-                    <button id="CreateEventButton" disabled type="submit" class="btn btn-primary btn-lg">
+                    <button id="CreateEventButton" disabled type="submit" class="btn btn-primary btn-lg" 
+                            data-url="@(eventId.HasValue ? Url.ActionLink("Update", "Event", new {Area = "eventhub", id = eventId!.Value}, null) : Url.ActionLink("Create", "Event", new {Area = "eventhub"}, null))">
                             Next Step
                     </button>
                   </div>

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

@@ -1,13 +1,19 @@
+@using EventHub.Web
 @using EventHub.Web.Pages.Events
 @using EventHub.Web.Pages.Events.Components.CreateEventArea
 @using Microsoft.AspNetCore.Http
+@using Microsoft.Extensions.Options
 @model EventHub.Web.Pages.Events.Components.CreateEventArea.CreateEventAreaViewComponent.NewEventViewModel
+@inject IOptions<EventHubUrlOptions> UrlOptions
 
 @{
     var organizationName = "";
     var countryName = "";
+    Guid? eventId = null; 
     @if (ViewData["StepType"]!.ToString() == CreateEventAreaViewComponent.ProgressStepType.Preview.ToString())
     {
+        eventId = ViewData["EventId"] as Guid?;
+        
         organizationName = ViewData["OrganizationName"] as string;
         if (organizationName.IsNullOrWhiteSpace())
         {
@@ -74,7 +80,7 @@
                             <span>Cover Image:</span>
                         </div>
                         <div class="col-md-8"> 
-                            <img src="https://api.openeventhub.com/api/eventhub/event/cover-image/3a003fb9-611a-db0c-82b2-7299ff8e8ce7" class="w-100 rounded-3">
+                            <div class="w-100 rounded-3 event-thumbnail" style="background-image: url(@(UrlOptions.Value.Api.EnsureEndsWith('/') + $"api/eventhub/event/cover-image/{eventId}")" alt="@Model.Title"></div>
                         </div>
                     </div>
                     @if (Model.IsOnline != null && Model.IsOnline!.Value)

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

@@ -1,5 +1,6 @@
 (function () {
     abp.widgets.CreateEventArea = function ($wrapper) {
+        var l = abp.localization.getResource('EventHub');
         toastr.options.timeOut = 500;
         toastr.options.preventDuplicates = true;
         
@@ -28,7 +29,9 @@
             $('#CreateEventButton').removeAttr('disabled')
             FocusTrackNameInputInModalEventHandler("AddTrackModal")
             FocusTrackNameInputInModalEventHandler("EditTrackModal")
-
+            NewEventFormInputAreaChangeHandler();
+            FilFileInputChangeEventHandler();
+            
             if (eventIdInput.val().length === 36) {
                 // TODO: Add organization in UppdateEventDto
                 $('#OrganizationId').prop("disabled", true).removeAttr('name');
@@ -39,21 +42,46 @@
                 if (!$(this).valid()) {
                     return false;
                 }
-                var input = $(this).serializeFormToObject();
+                
+                var formData = new FormData();
+                formData = FillNewEventFormData(formData);
 
+                var httpMetod = 'POST'
                 if (eventIdInput.val().length === 36) {
-                    eventApiService.update(eventIdInput.val(), input).then(function () {
+                    httpMetod = 'PUT'
-                        abp.notify.success('Updated event');
-                        SwitchToTrackCreation()
-                    });
-                } else {
-                    eventApiService.create(input).then(function (eventCreatedResponse) {
-                        abp.notify.success('Created event as a draft');
-                        eventIdInput.val(eventCreatedResponse.id);
-                        eventUrlCodeInput.val(eventCreatedResponse.urlCode);
-                        SwitchToTrackCreation()
-                    });
                 }
+
+                $.ajax({
+                    xhr: function() {
+                        var xhr = new window.XMLHttpRequest();
+                        xhr.upload.addEventListener("progress", function(evt) {
+                            if (evt.lengthComputable) {
+                                var percentComplete = evt.loaded / evt.total;
+                                percentComplete = parseInt(percentComplete * 100);
+                                if(percentComplete !== 100){
+                                    $('#CreateEventButton').prop( "disabled", true);
+                                }
+                            }
+                        }, false);
+
+                        return xhr;
+                    },
+                    url: $('#CreateEventButton').data('url'),
+                    data: formData,
+                    type: httpMetod,
+                    contentType: false,
+                    processData: false,
+                    success: function(response){
+                        if (eventIdInput.val().length === 36) {
+                            abp.notify.success('Updated event');
+                        }else{
+                            abp.notify.success('Created event as a draft');
+                            eventIdInput.val(response.id);
+                            eventUrlCodeInput.val(response.urlCode);   
+                        }
+                        SwitchToTrackCreation()
+                    }
+                });
             });
 
             function SwitchToTrackCreation() {
@@ -61,7 +89,7 @@
                 $('#CreateTrackContainer').css('display', '');
                 ScrollToWrapperBegin();
             }
-
+            
             AddNewTrackSubmitFormEventHandler();
             OpenEditTrackModalClickEventHandler();
             EditTrackSubmitFormEventHandler();
@@ -75,6 +103,23 @@
 
             PrevieousOrNextStepTransitionEventHandler()
         };
+        
+        function FillNewEventFormData(formData) {
+            var fileInput = document.getElementById('Event_CoverImageFile');
+            formData.append("OrganizationId", $('#OrganizationId').val().trim());
+            formData.append("Title", $('#inputTitle').val().trim());
+            formData.append("StartTime", $('#inputStartdate').val().trim());
+            formData.append("EndTime", $('#inputEnddate').val().trim());
+            formData.append("Description", $('#inputDescription').val().trim());
+            formData.append("CoverImageStreamContent",  fileInput.files[0]);
+            formData.append("IsOnline", $('#IsOnline').val().trim());
+            formData.append("OnlineLink", $('#inputOnlineLink').val().trim());
+            formData.append("CountryId", $('#CountryId').val().trim());
+            formData.append("City", $('#inputCity').val().trim());
+            formData.append("Language", $('#Language').val().trim());
+            formData.append("Capacity", $('#inputCapacity').val().trim());
+            return formData;
+        }
 
         function AddNewTrackSubmitFormEventHandler() {
             var addNewTrackForm = $('#AddNewTrackForm');
@@ -328,6 +373,101 @@
                 $('button[type=submit]').removeAttr('disabled')
             }
         }
+        
+        function NewEventFormInputAreaChangeHandler() {
+            var isOnline = $("#IsOnline option:selected").val()
+            if (isOnline === "True") {
+                $(".event-link-group").show();
+                $(".event-location-group").hide();
+            } else {
+                $(".event-link-group").hide();
+                $(".event-location-group").show();
+            }
+
+            $('#IsOnline').on('change', '', function () {
+                var isOnline = $("#IsOnline option:selected").val()
+                if (isOnline === "True") {
+                    $("#CountryId").attr("required", false);
+                    $("#inputCity").attr("required", false);
+                    $(".event-link-group").show();
+                    $(".event-location-group").hide();
+                } else {
+                    $("#CountryId").attr("required", true);
+                    $("#inputCity").attr("required", true);
+                    $(".event-link-group").hide();
+                    $(".event-location-group").show();
+                }
+            });
+        }
+        
+        function FilFileInputChangeEventHandler() {
+            var file;
+            var infoArea = document.getElementById('upload-label');
+            var fileInput = document.getElementById('Event_CoverImageFile');
+            
+            if (fileInput !== null) {
+                fileInput.addEventListener('change', function () {
+                    var showFile = true;
+
+                    file = fileInput.files[0];
+
+                    if (file === undefined) {
+                        $('#Event_CoverImageFile').val('');
+                        $('#imageResult').attr('src', '#');
+                        infoArea.textContent = 'Choose file'
+                        return;
+                    }
+
+                    var permittedExtensions = ["jpg", "jpeg", "png"]
+                    var fileExtension = $(this).val().split('.').pop();
+                    if (permittedExtensions.indexOf(fileExtension) === -1) {
+                        showFile = false;
+                        abp.message.error(l('EventCoverImageExtensionNotAllowed'))
+                            .then(() => {
+                                $('#Event_CoverImageFile').val('');
+                                file = null;
+                            });
+                    } else if (file.size > 1024 * 1024) {
+                        showFile = false;
+                        abp.message.error(l('EventCoverImageSizeExceedMessage'))
+                            .then(() => {
+                                $('#Event_CoverImageFile').val('');
+                                file = null;
+                            });
+                    }
+
+                    var img = new Image();
+                    img.onload = function () {
+                        var imageError = true;
+                        var sizes = {
+                            width: this.width,
+                            height: this.height
+                        };
+                        URL.revokeObjectURL(this.src);
+
+                        if (showFile && imageError) {
+                            readURL(file);
+                        }
+                    }
+
+                    var objectURL = URL.createObjectURL(file);
+                    img.src = objectURL;
+                });
+
+                function readURL(input) {
+                    if (input) {
+                        var reader = new FileReader();
+
+                        reader.onload = function (e) {
+                            $('#imageResult').attr('src', e.target.result);
+                            infoArea.textContent = 'File name: ' + input.name;
+                        }
+
+                        reader.readAsDataURL(input);
+                    }
+                }
+            }
+        }
 
         return {
             getFilters: getFilters,

src/EventHub.Web/Pages/Events/New.js

@@ -1,94 +0,0 @@
-$(function () {
-    var l = abp.localization.getResource('EventHub');
-
-    var isOnline = $("#Event_IsOnline option:selected").val()
-    if (isOnline === "True") {
-        $(".event-link-group").show();
-        $(".event-location-group").hide();
-    } else {
-        $(".event-link-group").hide();
-        $(".event-location-group").show();
-    }
-
-    $('#Event_IsOnline').on('change', '', function () {
-        var isOnline = $("#Event_IsOnline option:selected").val()
-        if (isOnline === "True") {
-            $("#Event_CountryId").attr("required", false);
-            $("#inputCity").attr("required", false);
-            $(".event-link-group").show();
-            $(".event-location-group").hide();
-        } else {
-            $("#Event_CountryId").attr("required", true);
-            $("#inputCity").attr("required", true);
-            $(".event-link-group").hide();
-            $(".event-location-group").show();
-        }
-    });
-
-    var infoArea = document.getElementById('upload-label');
-    var fileInput = document.getElementById('Event_CoverImageFile');
-    var file;
-
-    if (fileInput !== null) {
-        fileInput.addEventListener('change', function () {
-            var showFile = true;
-
-            file = fileInput.files[0];
-
-            if (file === undefined) {
-                $('#Event_CoverImageFile').val('');
-                $('#imageResult').attr('src', '#');
-                infoArea.textContent = 'Choose file'
-                return;
-            }
-
-            var permittedExtensions = ["jpg", "jpeg", "png"]
-            var fileExtension = $(this).val().split('.').pop();
-            if (permittedExtensions.indexOf(fileExtension) === -1) {
-                showFile = false;
-                abp.message.error(l('EventCoverImageExtensionNotAllowed'))
-                    .then(() => {
-                        $('#Event_CoverImageFile').val('');
-                        file = null;
-                    });
-            } else if (file.size > 1024 * 1024) {
-                showFile = false;
-                abp.message.error(l('EventCoverImageSizeExceedMessage'))
-                    .then(() => {
-                        $('#Event_CoverImageFile').val('');
-                        file = null;
-                    });
-            }
-
-            var img = new Image();
-            img.onload = function () {
-                var imageError = true;
-                var sizes = {
-                    width: this.width,
-                    height: this.height
-                };
-                URL.revokeObjectURL(this.src);
-
-                if (showFile && imageError) {
-                    readURL(file);
-                }
-            }
-
-            var objectURL = URL.createObjectURL(file);
-            img.src = objectURL;
-        });
-
-        function readURL(input) {
-            if (input) {
-                var reader = new FileReader();
-
-                reader.onload = function (e) {
-                    $('#imageResult').attr('src', e.target.result);
-                    infoArea.textContent = 'File name: ' + input.name;
-                }
-
-                reader.readAsDataURL(input);
-            }
-        }
-    }
-});