From c9158edab45ac435dbf4ad0f162153c6757009cd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Halil=20=C4=B0brahim=20Kalkan?= <hi_kalkan@yahoo.com>
Date: Thu, 7 Dec 2017 16:54:50 +0300
Subject: [PATCH] Modal HTML should include modal tag too.

---
 .../AspNetCore/Mvc/RazorPages/AbpPageModel.cs |   6 +
 .../Pages/Identity/Users/EditModal.cshtml     | 110 ++++++++++--------
 .../Pages/Identity/Users/EditModal.cshtml.cs  |  23 ++--
 .../modules/identity/helpers/ModalManager.js  |  56 +++------
 .../modules/identity/views/users/index.js     |   4 +-
 5 files changed, 94 insertions(+), 105 deletions(-)

diff --git a/src/Volo.Abp.AspNetCore.Mvc/Volo/Abp/AspNetCore/Mvc/RazorPages/AbpPageModel.cs b/src/Volo.Abp.AspNetCore.Mvc/Volo/Abp/AspNetCore/Mvc/RazorPages/AbpPageModel.cs
index eec6fcf081..c164ae6b8e 100644
--- a/src/Volo.Abp.AspNetCore.Mvc/Volo/Abp/AspNetCore/Mvc/RazorPages/AbpPageModel.cs
+++ b/src/Volo.Abp.AspNetCore.Mvc/Volo/Abp/AspNetCore/Mvc/RazorPages/AbpPageModel.cs
@@ -1,4 +1,5 @@
 using System;
+using Microsoft.AspNetCore.Mvc;
 using Microsoft.AspNetCore.Mvc.RazorPages;
 using Microsoft.Extensions.Logging;
 using Microsoft.Extensions.Logging.Abstractions;
@@ -22,5 +23,10 @@ namespace Volo.Abp.AspNetCore.Mvc.RazorPages
 
         protected ILogger Logger => _lazyLogger.Value;
         private Lazy<ILogger> _lazyLogger => new Lazy<ILogger>(() => LoggerFactory?.CreateLogger(GetType().FullName) ?? NullLogger.Instance, true);
+
+        protected virtual NoContentResult NoContent() //TODO: Is that true to return empty result like that?
+        {
+            return new NoContentResult();
+        }
     }
 }
diff --git a/src/Volo.Abp.Identity.Web/Pages/Identity/Users/EditModal.cshtml b/src/Volo.Abp.Identity.Web/Pages/Identity/Users/EditModal.cshtml
index ca45284272..f4a13bed0d 100644
--- a/src/Volo.Abp.Identity.Web/Pages/Identity/Users/EditModal.cshtml
+++ b/src/Volo.Abp.Identity.Web/Pages/Identity/Users/EditModal.cshtml
@@ -7,65 +7,73 @@
     Layout = null;
 }
 
-@* TODO: partial *@
-<div class="modal-header">
-    <h5 class="modal-title" id="userModalLabel">@Localizer["UpdateUser"]</h5>
-    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-        <span aria-hidden="true">&times;</span>
-    </button>
-</div>
+@* TODO: tag helpers for modal and tabs *@
 
-<div class="modal-body">
-    <form id="updateUserForm" method="post" asp-page="/Identity/Users/EditModal">
-        @* TODO: Remove id when model manager implemented *@
-        <!-- Nav tabs -->
-        <ul class="nav nav-tabs" role="tablist">
-            <li class="nav-item">
-                <a class="nav-link active" data-toggle="tab" href="#userInformations" role="tab">@Localizer["UserInformations"]</a>
-            </li>
-            <li class="nav-item">
-                <a class="nav-link" data-toggle="tab" href="#roles" role="tab">@Localizer["Roles"]</a>
-            </li>
-        </ul>
+<div class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            
+            <div class="modal-header">
+                <h5 class="modal-title" id="userModalLabel">@Localizer["UpdateUser"]</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
 
-        <!-- Tab panes -->
-        <div class="tab-content pt-3">
+            <div class="modal-body">
+                <form id="updateUserForm" method="post" asp-page="/Identity/Users/EditModal">
+                    @* TODO: Remove id when model manager implemented *@
+                    <!-- Nav tabs -->
+                    <ul class="nav nav-tabs" role="tablist">
+                        <li class="nav-item">
+                            <a class="nav-link active" data-toggle="tab" href="#EditUser_UserInfoTab" role="tab">@Localizer["UserInformations"]</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" data-toggle="tab" href="#EditUser_RolesTab" role="tab">@Localizer["Roles"]</a>
+                        </li>
+                    </ul>
 
-            <div class="tab-pane active" id="userInformations" role="tabpanel">
+                    <!-- Tab panes -->
+                    <div class="tab-content pt-3">
 
-                <input asp-for="UserInfo.Id" />
+                        <div class="tab-pane active" id="EditUser_UserInfoTab" role="tabpanel">
 
-                <div class="form-group">
-                    <label asp-for="UserInfo.UserName"></label>
-                    <input asp-for="UserInfo.UserName" class="form-control" />
-                </div>
-                <div class="form-group">
-                    <label asp-for="UserInfo.Email"></label>
-                    <input asp-for="UserInfo.Email" class="form-control" />
-                </div>
-                <div class="form-group">
-                    <label asp-for="UserInfo.PhoneNumber"></label>
-                    <input asp-for="UserInfo.PhoneNumber" class="form-control" />
-                </div>
+                            <input asp-for="UserInfo.Id"/>
 
-            </div>
-            <div class="tab-pane" id="roles" role="tabpanel">
-                <div class="user-role-checkbox-list">
-                    @for (var i = 0; i < Model.Roles.Length; i++)
-                    {
-                        <div class="form-check">
-                            <input asp-for="@Model.Roles[i].IsAssigned" class="form-check-input" />
-                            <label asp-for="@Model.Roles[i].IsAssigned">@Model.Roles[i].Name</label>
-                            <input asp-for="@Model.Roles[i].Name" />
+                            <div class="form-group">
+                                <label asp-for="UserInfo.UserName"></label>
+                                <input asp-for="UserInfo.UserName" class="form-control"/>
+                            </div>
+                            <div class="form-group">
+                                <label asp-for="UserInfo.Email"></label>
+                                <input asp-for="UserInfo.Email" class="form-control"/>
+                            </div>
+                            <div class="form-group">
+                                <label asp-for="UserInfo.PhoneNumber"></label>
+                                <input asp-for="UserInfo.PhoneNumber" class="form-control"/>
+                            </div>
+
+                        </div>
+                        <div class="tab-pane" id="EditUser_RolesTab" role="tabpanel">
+                            @for (var i = 0; i < Model.Roles.Length; i++)
+                            {
+                                <div class="form-check">
+                                    <input asp-for="@Model.Roles[i].IsAssigned" class="form-check-input"/>
+                                    <label asp-for="@Model.Roles[i].IsAssigned">@Model.Roles[i].Name</label>
+                                    <input asp-for="@Model.Roles[i].Name"/>
+                                </div>
+                            }
                         </div>
-                    }
-                </div>
+
+                    </div>
+                </form>
+            </div>
+
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">@Localizer["Close"]</button>
+                <button type="submit" class="btn btn-primary" id="btnUpdateUserSave">@Localizer["Save"]</button>
             </div>
 
         </div>
-    </form>
-</div>
-<div class="modal-footer">
-    <button type="button" class="btn btn-secondary" data-dismiss="modal">@Localizer["Close"]</button>
-    <button type="submit" class="btn btn-primary" id="btnUpdateUserSave">@Localizer["Save"]</button>
+    </div>
 </div>
\ No newline at end of file
diff --git a/src/Volo.Abp.Identity.Web/Pages/Identity/Users/EditModal.cshtml.cs b/src/Volo.Abp.Identity.Web/Pages/Identity/Users/EditModal.cshtml.cs
index 0c73b265dd..e2946f7f5e 100644
--- a/src/Volo.Abp.Identity.Web/Pages/Identity/Users/EditModal.cshtml.cs
+++ b/src/Volo.Abp.Identity.Web/Pages/Identity/Users/EditModal.cshtml.cs
@@ -28,23 +28,11 @@ namespace Volo.Abp.Identity.Web.Pages.Identity.Users
         public async Task OnGetAsync(Guid id)
         {
             UserInfo = ObjectMapper.Map<IdentityUserDto, UserInfoViewModel>(await _identityUserAppService.GetAsync(id));
-            
+
             Roles = ObjectMapper.Map<List<IdentityRoleDto>, AssignedRoleViewModel[]>(
                 await _identityRoleAppService.GetAllListAsync()
             );
 
-            await SetAssignedRoles();
-        }
-
-        public async Task OnPostAsync()
-        {
-            var input = ObjectMapper.Map<UserInfoViewModel, IdentityUserUpdateDto>(UserInfo);
-            input.RoleNames = Roles.Where(r => r.IsAssigned).Select(r => r.Name).ToArray();
-            await _identityUserAppService.UpdateAsync(UserInfo.Id, input);
-        }
-
-        private async Task SetAssignedRoles()
-        {
             var userRoleNames = (await _identityUserAppService.GetRolesAsync(UserInfo.Id)).Items.Select(r => r.Name).ToList();
             foreach (var role in Roles)
             {
@@ -55,6 +43,15 @@ namespace Volo.Abp.Identity.Web.Pages.Identity.Users
             }
         }
 
+        public async Task<IActionResult> OnPostAsync()
+        {
+            var input = ObjectMapper.Map<UserInfoViewModel, IdentityUserUpdateDto>(UserInfo);
+            input.RoleNames = Roles.Where(r => r.IsAssigned).Select(r => r.Name).ToArray();
+            await _identityUserAppService.UpdateAsync(UserInfo.Id, input);
+
+            return NoContent();
+        }
+
         public class UserInfoViewModel
         {
             [HiddenInput]
diff --git a/src/Volo.Abp.Identity.Web/wwwroot/modules/identity/helpers/ModalManager.js b/src/Volo.Abp.Identity.Web/wwwroot/modules/identity/helpers/ModalManager.js
index d9579cfdac..cc5bf6a226 100644
--- a/src/Volo.Abp.Identity.Web/wwwroot/modules/identity/helpers/ModalManager.js
+++ b/src/Volo.Abp.Identity.Web/wwwroot/modules/identity/helpers/ModalManager.js
@@ -1,5 +1,6 @@
 /**
  * TODO: Document & prepare typescript definitions
+ * TODO: Refactor & test more
  */
 var abp = abp || {};
 (function ($) {
@@ -7,46 +8,15 @@ var abp = abp || {};
     abp.modals = abp.modals || {};
 
     abp.ModalManager = (function () {
-
-        var _normalizeOptions = function (options) {
-            if (!options.modalId) {
-                options.modalId = 'Modal_' + (Math.floor((Math.random() * 1000000))) + new Date().getTime();
-            }
-        }
-
-        function _removeContainer(modalId) {
-            var _containerId = modalId + 'Container';
-            var _containerSelector = '#' + _containerId;
-
-            var $container = $(_containerSelector);
-            if ($container.length) {
-                $container.remove();
-            }
-        };
-
-        function _createContainer(modalId) {
-            _removeContainer(modalId);
-
-            var _containerId = modalId + 'Container';
-            return $('<div id="' + _containerId + '"></div>')
-                .append(
-                    '<div id="' + modalId + '" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">' +
-                    '  <div class="modal-dialog" role="document">' +
-                    '    <div class="modal-content"></div>' +
-                    '  </div>' +
-                    '</div>'
-                ).appendTo('body');
-        }
-
+        
         return function (options) {
 
-            _normalizeOptions(options);
-
             var _options = options;
+
+            var _$modalContainer = null;
             var _$modal = null;
             var _$form = null;
-            var _modalId = options.modalId;
-            var _modalSelector = '#' + _modalId;
+            var _modalId = 'Modal_' + (Math.floor((Math.random() * 1000000))) + new Date().getTime();
             var _modalObject = null;
 
             var _publicApi = null;
@@ -55,6 +25,16 @@ var abp = abp || {};
 
             var _onCloseCallbacks = [];
 
+            function _removeContainer() {
+                _$modalContainer && _$modalContainer.remove();
+            };
+
+            function _createContainer() {
+                _removeContainer();
+                _$modalContainer = $('<div id="' + _modalId + 'Container' + '"></div>').appendTo('body');
+                return _$modalContainer;
+            }
+
             function _saveModal() {
                 if (_modalObject && _modalObject.save) {
                     _modalObject.save();
@@ -64,7 +44,7 @@ var abp = abp || {};
             }
 
             function _initAndShowModal() {
-                _$modal = $(_modalSelector);
+                _$modal = _$modalContainer.find('.modal');
 
                 _$form = _$modal.find('form');
                 if (!_$form.length) {
@@ -123,11 +103,9 @@ var abp = abp || {};
                 _getResultCallback = getResultCallback;
 
                 _createContainer(_modalId)
-                    .find('.modal-content')
                     .load(options.viewUrl, $.param(_args), function (response, status, xhr) {
                         if (status == "error") {
-                            //abp.message.warn(abp.localization.abpWeb('InternalServerError'));
-                            //TODO: ERROR!
+                            //TODO: ERROR message!
                             return;
                         };
 
diff --git a/src/Volo.Abp.Identity.Web/wwwroot/modules/identity/views/users/index.js b/src/Volo.Abp.Identity.Web/wwwroot/modules/identity/views/users/index.js
index fb2b2e5231..0ba1441197 100644
--- a/src/Volo.Abp.Identity.Web/wwwroot/modules/identity/views/users/index.js
+++ b/src/Volo.Abp.Identity.Web/wwwroot/modules/identity/views/users/index.js
@@ -49,14 +49,14 @@
     });
 
     //Update user command
-    _$table.on('click', '.update-user', function () {
+    _$table.on('click', '.update-user', function () { //TODO: To action list!
         _editModal.open({
             id: $(this).data('id')
         });
     });
 
     //Delete user command
-    _$table.on('click', '.delete-user', function () {
+    _$table.on('click', '.delete-user', function () { //TODO: To action list!
         var id = $(this).data('id');
         var userName = $(this).data('userName');