From 688b832f46cb1df9d4b6971d6940d66abdd308f0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Halil=20=C4=B0brahim=20Kalkan?= Date: Wed, 6 Dec 2017 11:30:50 +0300 Subject: [PATCH] Refactor user page. --- .../Pages/Identity/Users/Index.cshtml | 21 +-- .../Volo.Abp.Identity.Web.csproj | 5 + .../identity/helpers/datatables_helper.js | 77 +++++++++ .../modules/identity/helpers/jquery.js | 20 +++ .../modules/identity/views/users/index.js | 148 +++++------------- 5 files changed, 152 insertions(+), 119 deletions(-) create mode 100644 src/Volo.Abp.Identity.Web/wwwroot/modules/identity/helpers/datatables_helper.js create mode 100644 src/Volo.Abp.Identity.Web/wwwroot/modules/identity/helpers/jquery.js diff --git a/src/Volo.Abp.Identity.Web/Pages/Identity/Users/Index.cshtml b/src/Volo.Abp.Identity.Web/Pages/Identity/Users/Index.cshtml index ef78235178..4071a86409 100644 --- a/src/Volo.Abp.Identity.Web/Pages/Identity/Users/Index.cshtml +++ b/src/Volo.Abp.Identity.Web/Pages/Identity/Users/Index.cshtml @@ -10,11 +10,12 @@ @section scripts { + + } - -
+
@@ -22,21 +23,21 @@
-
- +
- - - - - - + + + + + +
@L["Actions"]@L["UserName"]@L["EmailAddress"]@L["PhoneNumber"]
@L["Actions"]@L["UserName"]@L["EmailAddress"]@L["PhoneNumber"]
diff --git a/src/Volo.Abp.Identity.Web/Volo.Abp.Identity.Web.csproj b/src/Volo.Abp.Identity.Web/Volo.Abp.Identity.Web.csproj index 8198fcb8d1..5623c6007e 100644 --- a/src/Volo.Abp.Identity.Web/Volo.Abp.Identity.Web.csproj +++ b/src/Volo.Abp.Identity.Web/Volo.Abp.Identity.Web.csproj @@ -17,6 +17,11 @@ + + + + + diff --git a/src/Volo.Abp.Identity.Web/wwwroot/modules/identity/helpers/datatables_helper.js b/src/Volo.Abp.Identity.Web/wwwroot/modules/identity/helpers/datatables_helper.js new file mode 100644 index 0000000000..a9f6372bf6 --- /dev/null +++ b/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 += '' + action.text + ''; + } + + htmlContent = '
' + + '' + + '
' + + actionLinks + + '
' + + '
'; + } else { + htmlContent = '-'; //TODO: ...? + } + + return htmlContent; + } + } + }; + +})(); + diff --git a/src/Volo.Abp.Identity.Web/wwwroot/modules/identity/helpers/jquery.js b/src/Volo.Abp.Identity.Web/wwwroot/modules/identity/helpers/jquery.js new file mode 100644 index 0000000000..549dcdd621 --- /dev/null +++ b/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; + }; + +})(); \ No newline at end of file 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 adbd86dc69..0be81bab6f 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 @@ -1,44 +1,14 @@ $(function () { - var _identityUserAppService = volo.abp.identity.identityUser; - 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 - }); - } + var _l = abp.localization.getResource('AbpIdentityWeb'); //TODO: AbpIdentityWeb to const - //set sorting filter - 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; - } - } + var _identityUserAppService = volo.abp.identity.identityUser; - //set searching filter - if (requestData.search && requestData.search.value !== "") { - inputFilter.filter = requestData.search.value; - } + var _$wrapper = $('#IdentityUsersWrapper'); + var _$table = _$wrapper.find('table'); - if (callback) { - _identityUserAppService.getList(inputFilter).done(function (result) { - callback({ - recordsTotal: result.totalCount, - recordsFiltered: result.totalCount, - data: result.items - }); - }); - } - }, - //TODO: localize strings after imlementation of js localization + var _dataTable = _$table.DataTable({ + order: [[1, "asc"]], + ajax: abp.libs.datatables.createAjax(_identityUserAppService.getList), 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))) { - _identityUserAppService.delete(id).done(function () { - dataTable.ajax.reload(); - }); + if (confirm(_l('UserDeletionConfirmationMessage', userName))) { + _identityUserAppService + .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); \ No newline at end of file +}); \ No newline at end of file