Refactor user page.

pull/179/head
Halil İbrahim Kalkan 7 years ago
parent fad5f849e3
commit 688b832f46

@ -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">
<div class="card" id="IdentityUsersWrapper">
<div class="card-header">
<div class="row">
<div class="col-md-6">
@ -22,14 +23,14 @@
</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>
<th>@L["Actions"]</th>

@ -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>

@ -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;
}
}
};
})();

@ -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;
};
})();

@ -1,44 +1,14 @@
$(function () {
var _identityUserAppService = volo.abp.identity.identityUser;
var _localize = abp.localization.getResource('AbpIdentityWeb');
var _l = abp.localization.getResource('AbpIdentityWeb'); //TODO: AbpIdentityWeb to const
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
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);
Loading…
Cancel
Save