Refactor user page.

src/Volo.Abp.Identity.Web/Pages/Identity/Users/Index.cshtml

@@ -10,11 +10,12 @@
 
 @section scripts {
     <!-- TODO: Use minified on production, normal in development -->
+    <script type="text/javascript" src="~/modules/identity/helpers/jquery.js"></script>
+    <script type="text/javascript" src="~/modules/identity/helpers/datatables_helper.js"></script>
     <script type="text/javascript" src="~/modules/identity/views/users/index.js"></script>
 }
 
-
+<div class="card" id="IdentityUsersWrapper">
-<div class="card">
     <div class="card-header">
         <div class="row">
             <div class="col-md-6">
@@ -22,21 +23,21 @@
             </div>
             <div class="col-md-6 text-right">
                 <!-- Button trigger modal -->
-                <button type="button" class="btn btn-primary create-user" data-toggle="modal">
+                <button type="button" class="btn btn-primary create-user-button" data-toggle="modal">
                     @L["CreateUser"]
                 </button>
             </div>
         </div>
     </div>
     <div class="card-body">
-        <table id="IdentityUsersTable" class="table table-striped nowrap">
+        <table class="table table-striped nowrap">
             <thead>
-            <tr>
+                <tr>
-                <th>@L["Actions"]</th>
+                    <th>@L["Actions"]</th>
-                <th>@L["UserName"]</th>
+                    <th>@L["UserName"]</th>
-                <th>@L["EmailAddress"]</th>
+                    <th>@L["EmailAddress"]</th>
-                <th>@L["PhoneNumber"]</th>
+                    <th>@L["PhoneNumber"]</th>
-            </tr>
+                </tr>
             </thead>
         </table>
     </div>

src/Volo.Abp.Identity.Web/Volo.Abp.Identity.Web.csproj

@@ -17,6 +17,11 @@
     <EmbeddedResource Include="wwwroot\**\*.*" />
   </ItemGroup>
 
+  <ItemGroup>
+    <None Remove="wwwroot\modules\identity\helpers\datatables_helper.js" />
+    <None Remove="wwwroot\modules\identity\helpers\jquery.js" />
+  </ItemGroup>
+
   <ItemGroup>
     <EmbeddedResource Include="Pages\Identity\Users\Index.cshtml" />
   </ItemGroup>

src/Volo.Abp.Identity.Web/wwwroot/modules/identity/helpers/datatables_helper.js

@@ -0,0 +1,77 @@
+var abp = abp;
+(function () {
+
+    var datatables = abp.utils.createNamespace(abp, 'libs.datatables');
+
+    datatables.createAjax = function(serverMethod, inputAction) {
+        return function (requestData, callback, settings) {
+            var input = inputAction ? inputAction() : {};
+
+            //Paging
+            if (settings.oInit.paging) {
+                input.maxResultCount = requestData.length;
+                input.skipCount = requestData.start;
+            }
+
+            //Sorting
+            if (requestData.order && requestData.order.length > 0) {
+                var orderingField = requestData.order[0];
+                if (requestData.columns[orderingField.column].data) {
+                    input.sorting = requestData.columns[orderingField.column].data + " " + orderingField.dir;
+                }
+            }
+
+            //Text filter
+            if (requestData.search && requestData.search.value !== "") {
+                input.filter = requestData.search.value;
+            }
+
+            if (callback) {
+                serverMethod(input).then(function (result) {
+                    callback({
+                        recordsTotal: result.totalCount,
+                        recordsFiltered: result.totalCount,
+                        data: result.items
+                    });
+                });
+            }
+        }
+    }
+
+    //TODO: Implement like we did before!
+    datatables.createActionColumn = function (actions) {
+        return {
+            targets: 0,
+            data: null,
+            orderable: false,
+            autoWidth: false,
+            defaultContent: '',
+            render: function (list, type, record, meta) {
+                var htmlContent;
+
+                if (actions && actions.length) {
+                    var actionLinks = '';
+                    for (var i = 0; i < actions.length; ++i) {
+                        var action = actions[i];
+                        actionLinks += '<a class="dropdown-item" href="#">' + action.text + '</a>';
+                    }
+
+                    htmlContent = '<div class="dropdown">' +
+                        '<button class="btn btn-primary btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">' +
+                        'Actions' +
+                        '</button>' +
+                        '<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">' +
+                        actionLinks +
+                        '</div>' +
+                        '</div>';
+                } else {
+                    htmlContent = '-'; //TODO: ...?
+                }
+
+                return htmlContent;
+            }
+        }
+    };
+
+})();
+

src/Volo.Abp.Identity.Web/wwwroot/modules/identity/helpers/jquery.js

@@ -0,0 +1,20 @@
+(function () {
+
+    $.fn.serializeFormToObject = function () {
+        //serialize to array
+        var data = $(this).serializeArray();
+
+        //add also disabled items
+        $(':disabled[name]', this)
+            .each(function () {
+                data.push({ name: this.name, value: $(this).val() });
+            });
+
+        //map to object
+        var obj = {};
+        data.map(function (x) { obj[x.name] = x.value; });
+
+        return obj;
+    };
+
+})();

src/Volo.Abp.Identity.Web/wwwroot/modules/identity/views/users/index.js

@@ -1,44 +1,14 @@
 $(function () {
-    var _identityUserAppService = volo.abp.identity.identityUser;
+    var _l = abp.localization.getResource('AbpIdentityWeb'); //TODO: AbpIdentityWeb to const
-    var _localize = abp.localization.getResource('AbpIdentityWeb');
-
-    var dataTable = $('#IdentityUsersTable').DataTable({
-        order: [[1, "asc"]],
-        ajax: function (requestData, callback, settings) {
-            var inputFilter = {};
-
-            //set paging filters
-            if (settings.oInit.paging) {
-                inputFilter = $.extend(inputFilter, {
-                    maxResultCount: requestData.length,
-                    skipCount: requestData.start
-                });
-            }
 
-            //set sorting filter
+    var _identityUserAppService = volo.abp.identity.identityUser;
-            if (requestData.order && requestData.order.length > 0) {
-                var orderingField = requestData.order[0];
-                if (requestData.columns[orderingField.column].data) {
-                    inputFilter.sorting = requestData.columns[orderingField.column].data + " " + orderingField.dir;
-                }
-            }
 
-            //set searching filter
+    var _$wrapper = $('#IdentityUsersWrapper');
-            if (requestData.search && requestData.search.value !== "") {
+    var _$table = _$wrapper.find('table');
-                inputFilter.filter = requestData.search.value;
-            }
 
-            if (callback) {
+    var _dataTable = _$table.DataTable({
-                _identityUserAppService.getList(inputFilter).done(function (result) {
+        order: [[1, "asc"]],
-                    callback({
+        ajax: abp.libs.datatables.createAjax(_identityUserAppService.getList),
-                        recordsTotal: result.totalCount,
-                        recordsFiltered: result.totalCount,
-                        data: result.items
-                    });
-                });
-            }
-        },
-        //TODO: localize strings after imlementation of js localization
         columnDefs: [
             {
                 targets: 0,
@@ -73,31 +43,52 @@
         ]
     });
 
-    $('#IdentityUsersTable').on('click', '.update-user', function () {
+    //Update user command
+    _$table.on('click', '.update-user', function () {
         var id = $(this).data('id');
 
-        $('#createUpdateUserModal').modal('show')
+        $('#createUpdateUserModal')
+            .modal('show')
             .find('.modal-content')
             .load(abp.appPath + 'Identity/Users/Update', { id: id });
     });
 
-    $('#IdentityUsersTable').on('click', '.delete-user', function () {
+    //Delete user command
+    _$table.on('click', '.delete-user', function () {
         var id = $(this).data('id');
         var userName = $(this).data('userName');
 
-        if (confirm(_localize('UserDeletionConfirmationMessage', userName))) {
+        if (confirm(_l('UserDeletionConfirmationMessage', userName))) {
-            _identityUserAppService.delete(id).done(function () {
+            _identityUserAppService
-                dataTable.ajax.reload();
+                .delete(id)
-            });
+                .then(function() {
+                    _dataTable.ajax.reload();
+                });
         }
     });
 
-    $('.create-user').click(function () {
+    //Create user command
+    _$wrapper.find('.create-user-button').click(function () {
         $('#createUpdateUserModal').modal('show')
             .find('.modal-content')
             .load(abp.appPath + 'Identity/Users/Create');
     });
 
+    //TODO: btnCreateUserSave and btnUpdateUserSave clicks should be handled in the modals. We may consider to create a model manager as before
+
+    function findAssignedRoleNames() {
+        var assignedRoleNames = [];
+
+        $(document).find('.user-role-checkbox-list input[type=checkbox]')
+            .each(function () {
+                if ($(this).is(':checked')) {
+                    assignedRoleNames.push($(this).attr('name'));
+                }
+            });
+
+        return assignedRoleNames;
+    }
+
     $('#createUpdateUserModal').on('click', '#btnCreateUserSave', function () {
         var $createUserForm = $('#createUserForm');
         var user = $createUserForm.serializeFormToObject();
@@ -105,7 +96,7 @@
 
         _identityUserAppService.create(user).done(function () {
             $('#createUpdateUserModal').modal('hide');
-            dataTable.ajax.reload();
+            _dataTable.ajax.reload();
         });
     });
 
@@ -116,68 +107,7 @@
 
         _identityUserAppService.update(user.Id, user).done(function () {
             $('#createUpdateUserModal').modal('hide');
-            dataTable.ajax.reload();
+            _dataTable.ajax.reload();
         });
     });
-});
+});
-
-
-function findAssignedRoleNames() {
-    var assignedRoleNames = [];
-
-    $(document).find('.user-role-checkbox-list input[type=checkbox]')
-        .each(function () {
-            if ($(this).is(':checked')) {
-                assignedRoleNames.push($(this).attr('name'));
-            }
-        });
-
-    return assignedRoleNames;
-}
-
-//TODO: move to common script file
-$.fn.serializeFormToObject = function () {
-    //serialize to array
-    var data = $(this).serializeArray();
-
-    //add also disabled items
-    $(':disabled[name]', this)
-        .each(function () {
-            data.push({ name: this.name, value: $(this).val() });
-        });
-
-    //map to object
-    var obj = {};
-    data.map(function (x) { obj[x.name] = x.value; });
-
-    return obj;
-};
-
-//TODO: move to common script file and also abp.localization is undefined
-/************************************************************************
-* Overrides default settings for datatables                             *
-*************************************************************************/
-(function ($) {
-    if (!$.fn.dataTable) {
-        return;
-    }
-
-    var currentLanguage = 'English'; //TODO: Get from current culture!
-
-    //TODO: This does not work!
-    //$.extend(true, $.fn.dataTable.defaults, {
-    //    language: {
-    //        url: '/modules/identity/libs/datatables/localizations/' + currentLanguage + '.json'
-    //    },
-    //    lengthMenu: [5, 10, 25, 50, 100, 250, 500],
-    //    pageLength: 10,
-    //    paging: true,
-    //    serverSide: true,
-    //    processing: true,
-    //    responsive: true,
-    //    pagingType: "bootstrap_full_number",
-    //    dom: 'rt<"bottom"ilp><"clear">',
-    //    order: []
-    //});
-
-})(jQuery);