From 026e00c5f26e8807d78225d0bf5ffd9695a7d103 Mon Sep 17 00:00:00 2001
From: EngincanV <enginveske@gmail.com>
Date: Thu, 11 Feb 2021 10:47:42 +0300
Subject: [PATCH] Add abp tag helpers to edit organization and event page

---
 src/EventHub.Web/Pages/Events/Edit.cshtml     | 67 +++++++++----------
 src/EventHub.Web/Pages/Events/Edit.cshtml.cs  |  2 +-
 src/EventHub.Web/Pages/Events/Edit.js         |  9 +++
 .../Pages/Organizations/Edit.cshtml           | 47 +++++--------
 .../Pages/Organizations/Edit.cshtml.cs        |  1 +
 src/EventHub.Web/Pages/Organizations/Edit.js  |  4 ++
 6 files changed, 66 insertions(+), 64 deletions(-)

diff --git a/src/EventHub.Web/Pages/Events/Edit.cshtml b/src/EventHub.Web/Pages/Events/Edit.cshtml
index c34bb77..b706e87 100644
--- a/src/EventHub.Web/Pages/Events/Edit.cshtml
+++ b/src/EventHub.Web/Pages/Events/Edit.cshtml
@@ -12,22 +12,10 @@
 <input type="hidden" value="@Model.Url" id="event-detail-url"/>
 <div class="container mb-4">
     <h1>Edit Event</h1>
-
-    <ul class="nav nav-pills mt-3 mb-3" id="pills-tab" role="tablist">
-        <li class="nav-item">
-            <a class="nav-link active" id="event-info-tab" data-toggle="pill" href="#event-info" role="tab" aria-controls="event-info" aria-selected="true">Event Information</a>
-        </li>
-        <li class="nav-item">
-            <a class="nav-link" id="event-timing-tab" data-toggle="pill" href="#event-timing" role="tab" aria-controls="event-timing" aria-selected="false">Event Timing</a>
-        </li>
-        <li class="nav-item">
-            <a class="nav-link" id="event-cover-image-tab" data-toggle="pill" href="#event-cover-image" role="tab" aria-controls="event-cover-image" aria-selected="false">Event Cover Image</a>
-        </li>
-    </ul>
-    <div class="tab-content" id="pills-tabContent">
-        <div class="tab-pane fade show active" id="event-info" role="tabpanel" aria-labelledby="event-info-tab">
-            <form method="post">
-                <abp-input asp-for="Event.Id" />
+    <abp-tabs tab-style="Pill">
+        <abp-tab title="Event Information">
+            <form method="post" class="mt-3">
+                <abp-input asp-for="Event.Id"/>
                 <abp-input asp-for="Event.Title"/>
                 <abp-input asp-for="Event.Description"/>
                 <abp-input asp-for="Event.IsOnline"/>
@@ -46,9 +34,9 @@
 
                 <abp-button size="Large" button-type="Primary" type="submit" text="@L["Submit"].Value"/>
             </form>
-        </div>
-        <div class="tab-pane fade" id="event-timing" role="tabpanel" aria-labelledby="event-timing-tab">
-            <div class="alert alert-info" role="alert">
+        </abp-tab>
+        <abp-tab title="Event Timing">
+            <div class="alert alert-info mt-3" role="alert" >
                 Note: You can not change the event timing more than two times.
             </div>
             <div class="alert alert-warning mt-3" role="alert">
@@ -59,11 +47,11 @@
                 <abp-input asp-for="EventTiming.StartTime"/>
                 <abp-input asp-for="EventTiming.EndTime"/>
 
-                <abp-button size="Large" button-type="Primary" type="submit" text="@L["Submit"].Value"/>
-            </form>
-        </div>
-        <div class="tab-pane fade" id="event-cover-image" role="tabpanel" aria-labelledby="event-cover-image-tab">
-            <form method="post" id="cover-image-form">
+                <abp-button size="Large" button-type="Primary" type="button" id="btn-event-timing" text="@L["Submit"].Value"/>
+            </form>   
+        </abp-tab>
+        <abp-tab title="Event Cover Image">
+            <form method="post" id="cover-image-form" class="mt-3">
                 <input type="hidden" id="event-id" value="@Model.Event.Id"/>
                 <abp-row>
                     <abp-column size="_12" v-align="Center">
@@ -77,16 +65,27 @@
                         </div>
                     </abp-column>
                 </abp-row>
-                
+                                
                 <abp-button class="btn-block" id="event-cover-image-btnSubmit" button-type="Primary" type="submit" text="@L["Submit"].Value" />
             </form>
-        </div>
-        <abp-modal centered="true" scrollable="true" size="Small" id="cover-image-preview-modal">
-            <abp-modal-header title="Cover Image Preview"></abp-modal-header>
-            <abp-modal-body>
-                <img class="img-fluid" id="img-upload" alt="event-cover-image-preview"/>
-            </abp-modal-body>
-            <abp-modal-footer buttons="@(AbpModalButtons.Close)"></abp-modal-footer>
-        </abp-modal>
-    </div>
+        </abp-tab>
+    </abp-tabs>
+    <abp-modal centered="true" scrollable="true" size="Large" id="event-timing-preview-modal">
+        <abp-modal-header title="Event Timing Preview"></abp-modal-header>
+        <abp-modal-body>
+            If you change the event times, an informational email will be sent to all attendees.
+        </abp-modal-body>
+        <abp-modal-footer>
+            <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
+            <button type="button" id="event-timing-confirm" class="btn btn-success">Confirm</button>
+        </abp-modal-footer>
+    </abp-modal>
+
+    <abp-modal centered="true" scrollable="true" size="Small" id="cover-image-preview-modal">
+        <abp-modal-header title="Cover Image Preview"></abp-modal-header>
+        <abp-modal-body>
+            <img class="img-fluid" id="img-upload" alt="event-cover-image-preview"/>
+        </abp-modal-body>
+        <abp-modal-footer buttons="@(AbpModalButtons.Close)"></abp-modal-footer>
+    </abp-modal>
 </div>
\ No newline at end of file
diff --git a/src/EventHub.Web/Pages/Events/Edit.cshtml.cs b/src/EventHub.Web/Pages/Events/Edit.cshtml.cs
index ee1b9ad..0446285 100644
--- a/src/EventHub.Web/Pages/Events/Edit.cshtml.cs
+++ b/src/EventHub.Web/Pages/Events/Edit.cshtml.cs
@@ -168,7 +168,7 @@ namespace EventHub.Web.Pages.Events
 
         [Required]
         [DataType(DataType.Upload)]
-        [MaxFileSize(EventConsts.MaxCoverImageFileSize)] 
+        // [MaxFileSize(EventConsts.MaxCoverImageFileSize)] 
         [AllowedExtensions(new string[] { ".jpg", ".png", ".jpeg" })]
         public IFormFile CoverImageFile { get; set; }
     }
diff --git a/src/EventHub.Web/Pages/Events/Edit.js b/src/EventHub.Web/Pages/Events/Edit.js
index b57517a..b57c847 100644
--- a/src/EventHub.Web/Pages/Events/Edit.js
+++ b/src/EventHub.Web/Pages/Events/Edit.js
@@ -19,6 +19,15 @@ $(function () {
         }
     });
     
+    $("#btn-event-timing").click(function () {
+        $("#event-timing-preview-modal").modal("show");
+    });
+    
+    $("#event-timing-confirm").click(function () {
+        $("#Event_Timing_Form").submit();
+        $("#event-timing-preview-modal").modal("hide");
+    })
+    
     $("#Event_Timing_Form").submit(function (e) {
         e.preventDefault();
         
diff --git a/src/EventHub.Web/Pages/Organizations/Edit.cshtml b/src/EventHub.Web/Pages/Organizations/Edit.cshtml
index 08e7943..3de96e1 100644
--- a/src/EventHub.Web/Pages/Organizations/Edit.cshtml
+++ b/src/EventHub.Web/Pages/Organizations/Edit.cshtml
@@ -2,6 +2,7 @@
 @inject IHtmlLocalizer<EventHubResource> L
 @using EventHub.Localization
 @using Microsoft.AspNetCore.Mvc.Localization
+@using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Modal
 @model EventHub.Web.Pages.Organizations.EditPageModel
 
 @section scripts {
@@ -11,28 +12,20 @@
 <div class="container mb-4">
     <h1>@L["EditOrganization"]</h1>
 
-    <ul class="nav nav-pills mt-3 mb-3" id="pills-tab" role="tablist">
-        <li class="nav-item">
-            <a class="nav-link active" id="profile-info-tab" data-toggle="pill" href="#profile-info" role="tab" aria-controls="profile-info" aria-selected="true">@L["ProfileInfo"]</a>
-        </li>
-        <li class="nav-item">
-            <a class="nav-link" id="profile-picture-tab" data-toggle="pill" href="#profile-picture" role="tab" aria-controls="profile-picture" aria-selected="false">@L["ProfilePicture"]</a>
-        </li>
-    </ul>
-    <div class="tab-content" id="pills-tabContent">
-        <div class="tab-pane fade show active" id="profile-info" role="tabpanel" aria-labelledby="profile-info-tab">
-            <abp-dynamic-form abp-model="Organization" submit-button="true"/>
-        </div>
-        <div class="tab-pane fade" id="profile-picture" role="tabpanel" aria-labelledby="profile-picture-tab">
+    <abp-tabs tab-style="Pill">
+        <abp-tab title="@(L["ProfileInfo"].Value)">
+            <abp-dynamic-form abp-model="Organization" submit-button="true" class="mt-3"/>
+        </abp-tab>
+        <abp-tab title="@(L["ProfilePicture"].Value)">
             <form method="post" id="EditOrganizationProfileForm" enctype="multipart/form-data">
                 <input type="hidden" id="organization-id" value="@Model.Organization.Id"/>
-                <input type="hidden" id="organization-name" value="@Model.Name" />
+                <input type="hidden" id="organization-name" value="@Model.Name"/>
                 <abp-row>
                     <abp-column size="_12" v-align="Center">
                         <div class="form-group">
                             <label>@L["ProfilePicture"]</label>
                             <div class="custom-file">
-                                <input id="organization-profile-picture" type="file" class="custom-file-input form-control">
+                                <input id="organization-profile-picture" type="file" class="custom-file-input form-control" required="required">
                                 <label id="choose-cover-image" class="custom-file-label" for="customFile">@L["ChooseOrganizationProfilePicture"]</label>
                                 <small id="Organization_ProfilePictureInfoText" class="form-text text-muted mt-2">@L["OrganizationProfilePictureInfo"]</small>
                             </div>
@@ -43,18 +36,14 @@
                     @L["Submit"]
                 </button>
             </form>
-            <div class="modal fade" id="picturePreviewModal" role="dialog">
-                <div class="modal-dialog">
-                    <div class="modal-content">
-                        <div class="modal-body">
-                            <img class="img-fluid" id="img-upload" alt=""/>
-                        </div>
-                        <div class="modal-footer">
-                            <button type="button" class="btn btn-primary btn-block" data-dismiss="modal">@L["Close"]</button>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
+        </abp-tab>
+    </abp-tabs>
+    
+    <abp-modal centered="true" scrollable="true" size="Large" id="profile-picture">
+        <abp-modal-header title="Profile Picture Preview"></abp-modal-header>
+        <abp-modal-body>
+            <img class="img-fluid" id="img-upload" alt=""/>
+        </abp-modal-body>
+        <abp-modal-footer buttons="@(AbpModalButtons.Close)"></abp-modal-footer>
+    </abp-modal>
 </div>
\ No newline at end of file
diff --git a/src/EventHub.Web/Pages/Organizations/Edit.cshtml.cs b/src/EventHub.Web/Pages/Organizations/Edit.cshtml.cs
index 7377b0d..fb7d634 100644
--- a/src/EventHub.Web/Pages/Organizations/Edit.cshtml.cs
+++ b/src/EventHub.Web/Pages/Organizations/Edit.cshtml.cs
@@ -86,6 +86,7 @@ namespace EventHub.Web.Pages.Organizations
         [Required]
         public Guid OrganizationId { get; set; }
 
+        [Required]
         [DataType(DataType.Upload)]
         [MaxFileSize(OrganizationConsts.MaxProfilePictureFileSize)] 
         [AllowedExtensions(new string[] { ".jpg", ".png", ".jpeg" })]
diff --git a/src/EventHub.Web/Pages/Organizations/Edit.js b/src/EventHub.Web/Pages/Organizations/Edit.js
index 4f9cacf..abbfe4b 100644
--- a/src/EventHub.Web/Pages/Organizations/Edit.js
+++ b/src/EventHub.Web/Pages/Organizations/Edit.js
@@ -76,6 +76,10 @@ $(function () {
         var organizationId = document.getElementById("organization-id").value;
         var organizationName = document.getElementById("organization-name").value;
 
+        if(!$(this).valid()) {
+            return false;
+        }
+        
         if(file === undefined) {
             file = null;
         }