Use new datatables simplified configuration.

modules/identity/src/Volo.Abp.Identity.Web/compilerconfig.json

@@ -1,10 +1,3 @@
 [
-  {
+  
-    "outputFile": "wwwroot/pages/identity/users/index.css",
-    "inputFile": "wwwroot/pages/identity/users/index.less"
-  },
-  {
-    "outputFile": "wwwroot/pages/identity/users/index.es5.js",
-    "inputFile": "wwwroot/pages/identity/users/index.js"
-  }
 ]

modules/identity/src/Volo.Abp.Identity.Web/wwwroot/pages/identity/roles/index.es5.js

@@ -1,6 +0,0 @@
-'use strict';
-
-$(function () {
-    $('#IdentityUsersTable').DataTable();
-});
-

modules/identity/src/Volo.Abp.Identity.Web/wwwroot/pages/identity/roles/index.es5.min.js

@@ -1 +0,0 @@
-"use strict";$(function(){$("#IdentityUsersTable").DataTable()});

modules/identity/src/Volo.Abp.Identity.Web/wwwroot/pages/identity/roles/index.js

@@ -12,24 +12,18 @@
         var _$wrapper = $('#IdentityRolesWrapper');
         var _$table = _$wrapper.find('table');
 
-        var _dataTable = _$table.DataTable({
+        var _dataTable = _$table.DataTable(abp.libs.datatables.normalizeConfiguration({
             order: [[1, "asc"]],
             ajax: abp.libs.datatables.createAjax(_identityRoleAppService.getList),
             columnDefs: [
                 {
-                    targets: 0,
-                    data: null,
-                    orderable: false,
-                    autoWidth: false,
-                    defaultContent: '',
                     rowAction: {
-                        text: '<i class="fa fa-cog"></i> ' + l('Actions') + ' <span class="caret"></span>',
                         items:
                             [
                                 {
                                     text: l('Edit'),
                                     visible: function () {
-                                        return true;
+                                        return true; //TODO: Check permission
                                     },
                                     action: function (data) {
                                         _editModal.open({
@@ -40,7 +34,7 @@
                                 {
                                     text: l('Permissions'),
                                     visible: function () {
-                                        return true;
+                                        return true; //TODO: Check permission
                                     },
                                     action: function (data) {
                                         _permissionsModal.open({
@@ -52,7 +46,7 @@
                                 {
                                     text: l('Delete'),
                                     visible: function () {
-                                        return true;
+                                        return true; //TODO: Check permission
                                     },
                                     confirmMessage: function (data) { return l('RoleDeletionConfirmationMessage', data.record.name)},
                                     action: function (data) {
@@ -67,11 +61,10 @@
                     }
                 },
                 {
-                    targets: 1,
                     data: "name"
                 }
             ]
-        });
+        }));
 
         _createModal.onResult(function () {
             _dataTable.ajax.reload();

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

@@ -1,92 +0,0 @@
-'use strict';
-
-(function ($) {
-
-    var l = abp.localization.getResource('AbpIdentity');
-
-    var _identityUserAppService = volo.abp.identity.identityUser;
-    var _editModal = new abp.ModalManager(abp.appPath + 'Identity/Users/EditModal');
-    var _createModal = new abp.ModalManager(abp.appPath + 'Identity/Users/CreateModal');
-    var _permissionsModal = new abp.ModalManager(abp.appPath + 'AbpPermissionManagement/PermissionManagementModal');
-
-    $(function () {
-
-        var _$wrapper = $('#IdentityUsersWrapper');
-        var _$table = _$wrapper.find('table');
-        var _dataTable = _$table.DataTable({
-            order: [[1, "asc"]],
-            ajax: abp.libs.datatables.createAjax(_identityUserAppService.getList),
-            columnDefs: [{
-                //TODO: Can we eleminate targets, data, orderable, autoWidth, defaultContent fields or make these values default
-                targets: 0,
-                data: null,
-                orderable: false,
-                autoWidth: false,
-                defaultContent: '',
-                rowAction: {
-                    text: '<i class="fa fa-cog"></i> ' + l('Actions') + ' <span class="caret"></span>', //TODO: Add icon option and set text as only l('Actions')
-                    items: [{
-                        //TODO: Allow to add icon
-                        text: l('Edit'),
-                        visible: function visible() {
-                            //TODO: Allow visible to be a boolean for simple cases (and true by default)
-                            return true;
-                        },
-                        action: function action(data) {
-                            _editModal.open({
-                                id: data.record.id
-                            });
-                        }
-                    }, {
-                        text: l('Permissions'),
-                        visible: function visible() {
-                            return true;
-                        },
-                        action: function action(data) {
-                            _permissionsModal.open({
-                                providerName: 'User',
-                                providerKey: data.record.id
-                            });
-                        }
-                    }, {
-                        text: l('Delete'),
-                        visible: function visible() {
-                            return true;
-                        },
-                        confirmMessage: function confirmMessage(data) {
-                            return l('UserDeletionConfirmationMessage', data.record.userName);
-                        },
-                        action: function action(data) {
-                            _identityUserAppService['delete'](data.record.id).then(function () {
-                                _dataTable.ajax.reload();
-                            });
-                        }
-                    }]
-                }
-            }, {
-                targets: 1,
-                data: "userName"
-            }, {
-                targets: 2,
-                data: "email"
-            }, {
-                targets: 3,
-                data: "phoneNumber"
-            }]
-        });
-
-        _createModal.onResult(function () {
-            _dataTable.ajax.reload();
-        });
-
-        _editModal.onResult(function () {
-            _dataTable.ajax.reload();
-        });
-
-        _$wrapper.find('button[name=CreateUser]').click(function (e) {
-            e.preventDefault();
-            _createModal.open();
-        });
-    });
-})(jQuery);
-

modules/identity/src/Volo.Abp.Identity.Web/wwwroot/pages/identity/users/index.es5.min.js

@@ -1 +0,0 @@
-"use strict";(function(n){var t=abp.localization.getResource("AbpIdentity"),i=volo.abp.identity.identityUser,r=new abp.ModalManager(abp.appPath+"Identity/Users/EditModal"),u=new abp.ModalManager(abp.appPath+"Identity/Users/CreateModal"),f=new abp.ModalManager(abp.appPath+"AbpPermissionManagement/PermissionManagementModal");n(function(){var o=n("#IdentityUsersWrapper"),s=o.find("table"),e=s.DataTable({order:[[1,"asc"]],ajax:abp.libs.datatables.createAjax(i.getList),columnDefs:[{targets:0,data:null,orderable:!1,autoWidth:!1,defaultContent:"",rowAction:{text:'<i class="fa fa-cog"><\/i> '+t("Actions")+' <span class="caret"><\/span>',items:[{text:t("Edit"),visible:function(){return!0},action:function(n){r.open({id:n.record.id})}},{text:t("Permissions"),visible:function(){return!0},action:function(n){f.open({providerName:"User",providerKey:n.record.id})}},{text:t("Delete"),visible:function(){return!0},confirmMessage:function(n){return t("UserDeletionConfirmationMessage",n.record.userName)},action:function(n){i["delete"](n.record.id).then(function(){e.ajax.reload()})}}]}},{targets:1,data:"userName"},{targets:2,data:"email"},{targets:3,data:"phoneNumber"}]});u.onResult(function(){e.ajax.reload()});r.onResult(function(){e.ajax.reload()});o.find("button[name=CreateUser]").click(function(n){n.preventDefault();u.open()})})})(jQuery);

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

@@ -11,26 +11,18 @@
 
         var _$wrapper = $('#IdentityUsersWrapper');
         var _$table = _$wrapper.find('table');
-        var _dataTable = _$table.DataTable({
+        var _dataTable = _$table.DataTable(abp.libs.datatables.normalizeConfiguration({
             order: [[1, "asc"]],
             ajax: abp.libs.datatables.createAjax(_identityUserAppService.getList),
             columnDefs: [
                 {
-                    //TODO: Can we eleminate targets, data, orderable, autoWidth, defaultContent fields or make these values default
-                    targets: 0,
-                    data: null,
-                    orderable: false,
-                    autoWidth: false,
-                    defaultContent: '',
                     rowAction: {
-                        text: '<i class="fa fa-cog"></i> ' + l('Actions') + ' <span class="caret"></span>', //TODO: Add icon option and set text as only l('Actions')
                         items:
                             [
                                 {
-                                    //TODO: Allow to add icon
                                     text: l('Edit'),
-                                    visible: function () { //TODO: Allow visible to be a boolean for simple cases (and true by default)
+                                    visible: function () {
-                                        return true;
+                                        return true; //TODO: Check permission
                                     },
                                     action: function (data) {
                                         _editModal.open({
@@ -41,7 +33,7 @@
                                 {
                                     text: l('Permissions'),
                                     visible: function () {
-                                        return true;
+                                        return true; //TODO: Check permission
                                     },
                                     action: function (data) {
                                         _permissionsModal.open({
@@ -53,9 +45,9 @@
                                 {
                                     text: l('Delete'),
                                     visible: function () {
-                                        return true;
+                                        return true; //TODO: Check permission
                                     },
-                                    confirmMessage: function (data) { return l('UserDeletionConfirmationMessage', data.record.userName)},
+                                    confirmMessage: function (data) { return l('UserDeletionConfirmationMessage', data.record.userName); },
                                     action: function (data) {
                                         _identityUserAppService
                                             .delete(data.record.id)
@@ -68,19 +60,16 @@
                     }
                 },
                 {
-                    targets: 1,
                     data: "userName"
                 },
                 {
-                    targets: 2,
                     data: "email"
                 },
                 {
-                    targets: 3,
                     data: "phoneNumber"
                 }
             ]
-        });
+        }));
 
         _createModal.onResult(function () {
             _dataTable.ajax.reload();

modules/tenant-management/src/Volo.Abp.TenantManagement.Web/Pages/TenantManagement/Tenants/Index.cshtml

@@ -4,9 +4,6 @@
 @using Volo.Abp.TenantManagement.Web.Pages.TenantManagement.Tenants
 @model IndexModel
 @inject IHtmlLocalizer<AbpTenantManagementResource> L
-@section styles {
-    <link rel="stylesheet" type="text/css" href="~/modules/multi-tenancy/views/tenants/index.css" />
-}
 @section scripts {
     <script type="text/javascript" src="~/modules/multi-tenancy/views/tenants/index.js"></script>
 }
@@ -22,13 +19,13 @@
         </abp-row>
     </abp-card-header>
     <abp-card-body>
-        <table class="table table-striped nowrap">
+        <abp-table striped-rows="true" class="nowrap">
             <thead>
-            <tr>
+                <tr>
-                <th>@L["Actions"]</th>
+                    <th>@L["Actions"]</th>
-                <th>@L["TenantName"]</th>
+                    <th>@L["TenantName"]</th>
-            </tr>
+                </tr>
             </thead>
-        </table>
+        </abp-table>
     </abp-card-body>
 </abp-card>

modules/tenant-management/src/Volo.Abp.TenantManagement.Web/compilerconfig.json

@@ -1,6 +1,2 @@
 [
-  {
-    "outputFile": "wwwroot/modules/multi-tenancy/views/tenants/index.css",
-    "inputFile": "wwwroot/modules/multi-tenancy/views/tenants/index.less"
-  }
 ]

modules/tenant-management/src/Volo.Abp.TenantManagement.Web/wwwroot/modules/multi-tenancy/views/tenants/index.css

@@ -1,21 +0,0 @@
-.dataTable {
-  width: 100% !important;
-  border-spacing: 0 !important;
-}
-.table td,
-.table th {
-  padding: 8px 10px;
-}
-.dataTable tbody tr td button {
-  cursor: pointer;
-}
-.dataTable tbody tr td div.dropdown ul.dropdown-menu li {
-  cursor: pointer;
-  padding: 5px;
-}
-.dataTable tbody tr td div.dropdown ul.dropdown-menu li a {
-  display: block;
-}
-.dataTable tbody tr td div.dropdown ul.dropdown-menu li:hover {
-  background: #f4f5f8;
-}

modules/tenant-management/src/Volo.Abp.TenantManagement.Web/wwwroot/modules/multi-tenancy/views/tenants/index.es5.js

@@ -1,6 +0,0 @@
-'use strict';
-
-$(function () {
-    $('#IdentityUsersTable').DataTable();
-});
-

modules/tenant-management/src/Volo.Abp.TenantManagement.Web/wwwroot/modules/multi-tenancy/views/tenants/index.es5.min.js

@@ -1 +0,0 @@
-"use strict";$(function(){$("#IdentityUsersTable").DataTable()});

modules/tenant-management/src/Volo.Abp.TenantManagement.Web/wwwroot/modules/multi-tenancy/views/tenants/index.js

@@ -9,29 +9,18 @@
     $(function () {
 
         var _$wrapper = $('#TenantsWrapper');
-        var _$table = _$wrapper.find('table');
 
-        var _dataTable = _$table.DataTable({
+        var _dataTable = _$wrapper.find('table').DataTable(abp.libs.datatables.normalizeConfiguration({
             order: [[1, "asc"]],
             ajax: abp.libs.datatables.createAjax(_tenantAppService.getList),
             columnDefs: [
                 {
-                    //TODO: Can we eleminate targets, data, orderable, autoWidth, defaultContent fields or make these values default
-                    targets: 0,
-                    data: null,
-                    orderable: false,
-                    autoWidth: false,
-                    defaultContent: '',
                     rowAction: {
-                        text: '<i class="fa fa-cog"></i> ' + l('Actions') + ' <span class="caret"></span>', //TODO: Add icon option and set text as only l('Actions')
                         items:
                             [
                                 {
-                                    //TODO: Allow to add icon
                                     text: l('Edit'),
-                                    visible: function () { //TODO: Allow visible to be a boolean for simple cases
+                                    visible: function () { return true; }, //TODO: Check permission
-                                        return true;
-                                    },
                                     action: function (data) {
                                         _editModal.open({
                                             id: data.record.id
@@ -40,9 +29,7 @@
                                 },
                                 {
                                     text: l('Delete'),
-                                    visible: function () {
+                                    visible: function () { return true; }, //TODO: Check permission
-                                        return true;
-                                    },
                                     confirmMessage: function (data) { return l('TenantDeletionConfirmationMessage', data.record.name)},
                                     action: function (data) {
                                         _tenantAppService
@@ -56,11 +43,10 @@
                     }
                 },
                 {
-                    targets: 1,
                     data: "name"
                 }
             ]
-        });
+        }));
 
         _createModal.onResult(function () {
             _dataTable.ajax.reload();

modules/tenant-management/src/Volo.Abp.TenantManagement.Web/wwwroot/modules/multi-tenancy/views/tenants/index.less

@@ -1,39 +0,0 @@
-//TODO: This code is duplicated for other pages too. Unify them.
-.dataTable {
-    width: 100% !important;
-    border-spacing: 0 !important;
-}
-
-.table td, .table th {
-    padding: 8px 10px;
-}
-
-.dataTable {
-    tbody {
-        tr {
-            td {
-
-                button {
-                    cursor: pointer;
-                }
-
-                div.dropdown {
-                    ul.dropdown-menu {
-                        li {
-                            cursor: pointer;
-                            padding: 5px;
-
-                            a {
-                                display: block;
-                            }
-                        }
-
-                        li:hover {
-                            background: #f4f5f8;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}

modules/tenant-management/src/Volo.Abp.TenantManagement.Web/wwwroot/modules/multi-tenancy/views/tenants/index.min.css

@@ -1 +0,0 @@
-.dataTable{width:100% !important;border-spacing:0 !important;}.table td,.table th{padding:8px 10px;}.dataTable tbody tr td button{cursor:pointer;}.dataTable tbody tr td div.dropdown ul.dropdown-menu li{cursor:pointer;padding:5px;}.dataTable tbody tr td div.dropdown ul.dropdown-menu li a{display:block;}.dataTable tbody tr td div.dropdown ul.dropdown-menu li:hover{background:#f4f5f8;}