Dev

applications/Unity.GrantManager/modules/Unity.Identity.Web/src/Pages/Identity/Roles/Index.cshtml

@@ -31,12 +31,21 @@
     </abp-script-bundle>
 }
 
+<div class="container-fluid px-0">
+    <div class="action-bar p-2 filter-search-action-bar">
+        <div class="unity-page-titlebar">
+            <h4>@L["Roles"]</h4>
+        </div>
 
-@section content_toolbar {
-    @await Component.InvokeAsync(typeof(AbpPageToolbarViewComponent), new { pageName = typeof(IndexModel).FullName })
-}
-<abp-card id="IdentityRolesWrapper">
-    <abp-card-body>
-        <abp-table id="IdentityRolesTable" striped-rows="false" class="nowrap"></abp-table>
-    </abp-card-body>
-</abp-card>
+        <div class="filter-search-action-bar_search-wrapper">
+            <input type="search" id="search-roles" placeholder="Search" class="tbl-search">
+        </div>
+
+        <div class="btn-group" id="app_custom_buttons"></div>
+
+        <div id="dynamicButtonContainerId" class="dynamic-buttons-div button-gap-1"></div>
+    </div>
+    <div class="p-3 pt-0">
+        <abp-table id="IdentityRolesTable"></abp-table>
+    </div>
+</div>

applications/Unity.GrantManager/modules/Unity.Identity.Web/src/Pages/Identity/Roles/index.css

@@ -16,11 +16,6 @@
     margin: 0.25rem;
 }
 
-#AbpContentToolbar {
-    display: flex !important;
-    background-color: transparent;
-}
-
 #IdentityRolesWrapper {
     background-color: transparent;
 }

applications/Unity.GrantManager/modules/Unity.Identity.Web/src/Pages/Identity/Roles/index.js

@@ -1,6 +1,5 @@
-(function ($) {
+$(function () {
     let l = abp.localization.getResource('AbpIdentity');
-
     let _identityRoleAppService = volo.abp.identity.identityRole;
     let _permissionsModal = new abp.ModalManager(
         abp.appPath + 'AbpPermissionManagement/PermissionManagementModal'
@@ -78,6 +77,10 @@
                 [
                     {
                         title: l("Actions"),
+                        orderable: false,
+                        className: 'notexport text-center',
+                        name: 'rowActions',
+                        index: 0,
                         rowAction: {
                             items: abp.ui.extensions.entityActions.get('identity.role').actions.toArray()
                         }
@@ -113,36 +116,46 @@
         },
         0 //adds as the first contributor
     );
-
-    $(function () {
-        let _$table = $('#IdentityRolesTable');        
 
-        _dataTable = _$table.DataTable(
-            abp.libs.datatables.normalizeConfiguration({
-                order: [[1, 'asc']],
-                searching: true,
-                processing: true,
-                serverSide: true,
-                scrollX: true,
-                paging: true,
-                ajax: abp.libs.datatables.createAjax(
-                    _identityRoleAppService.getList
-                ),
-                columnDefs: abp.ui.extensions.tableColumns.get('identity.role').columns.toArray()
-            })
-        );
+    $.fn.dataTable.Buttons.defaults.dom.button.className = 'btn flex-none';
+    let actionButtons = [
+        ...commonTableActionButtons(l('Roles'))
+    ];
 
-        _createModal.onResult(function () {
-            _dataTable.ajax.reloadEx();
-        });
+    let dt = $('#IdentityRolesTable');
+    let listColumns = abp.ui.extensions.tableColumns.get('identity.role').columns.toArray();
+    let defaultVisibleColumns = listColumns.map((item) => { return item['data']; });
 
-        _editModal.onResult(function () {
-            _dataTable.ajax.reloadEx();
-        });
+    _dataTable = initializeDataTable({
+        dt,
+        defaultVisibleColumns,
+        listColumns,
+        maxRowsPerPage: 25,
+        defaultSortColumn: 1,
+        dataEndpoint: _identityRoleAppService.getList,
+        data: {},
+        responseCallback: function (result) {
+            return {
+                recordsTotal: result.totalCount,
+                recordsFiltered: result.items.length,
+                data: result.items
+            };
+        },
+        actionButtons,
+        pagingEnabled: true,
+        reorderEnabled: false,
+        languageSetValues: {},
+        dataTableName: 'IdentityRolesTable',
+        dynamicButtonContainerId: 'dynamicButtonContainerId',
+        useNullPlaceholder: true,
+        externalSearchId: 'search-roles'
+    });
+
+    _createModal.onResult(function () {
+        _dataTable.ajax.reloadEx();
+    });
 
-        $('#AbpContentToolbar button[name=CreateRole]').click(function (e) {
-            e.preventDefault();
-            _createModal.open();
-        });
+    _editModal.onResult(function () {
+        _dataTable.ajax.reloadEx();
     });
-})(jQuery);
+});

applications/Unity.GrantManager/modules/Unity.Identity.Web/src/Pages/Identity/Users/Index.cshtml

@@ -32,11 +32,21 @@
     </abp-script-bundle>
 }
 
-@section content_toolbar {
-    @await Component.InvokeAsync(typeof(AbpPageToolbarViewComponent), new { pageName = typeof(IndexModel).FullName })
-}
-<abp-card id="UsersWrapper">
-    <abp-card-body>
-        <abp-table id="UsersTable" striped-rows="false" class="nowrap"></abp-table>
-    </abp-card-body>
-</abp-card>
+<div class="container-fluid px-0">
+    <div class="action-bar p-2 filter-search-action-bar">
+        <div class="unity-page-titlebar">
+            <h4>@L["Users"]</h4>
+        </div>
+
+        <div class="filter-search-action-bar_search-wrapper">
+            <input type="search" id="search-users" placeholder="Search" class="tbl-search">
+        </div>
+
+        <div class="btn-group" id="app_custom_buttons"></div>
+
+        <div id="dynamicButtonContainerId" class="dynamic-buttons-div button-gap-1"></div>
+    </div>
+    <div class="p-3 pt-0">
+        <abp-table id="UsersTable"></abp-table>
+    </div>
+</div>

applications/Unity.GrantManager/modules/Unity.Identity.Web/src/Pages/Identity/Users/index.css

@@ -25,11 +25,6 @@
     cursor: pointer;
 }
 
-#AbpContentToolbar {
-    display: flex !important;
-    background-color: transparent;
-}
-
 #UsersWrapper {
     background-color: transparent;
 }

applications/Unity.GrantManager/modules/Unity.Identity.Web/src/Pages/Identity/Users/index.js

@@ -1,5 +1,6 @@
-(function ($) {
-    let l = abp.localization.getResource('AbpIdentity');
+$(function () {
+    const l = abp.localization.getResource('AbpIdentity');
+    const lg = abp.localization.getResource('GrantManager');
 
     let _identityUserAppService = volo.abp.identity.identityUser;
     let _userImportService = unity.grantManager.identity.userImport;
@@ -63,30 +64,30 @@
         )
 
         $('#ImportUserSearchButton').click(function (e) {
-            e.preventDefault();            
+            e.preventDefault();
             _filterDataTable.ajax.reloadEx();
             $('#import-user-btn').attr('disabled', true);
-        });        
+        });
 
         $('#cancel-import-btn').click(function (e) {
             _importModal.close();
         });
 
-        _filterDataTable.on('select', function (e, dt, type, indexes) {            
+        _filterDataTable.on('select', function (e, dt, type, indexes) {
             if (type === 'row') {
-                let selectedData = _filterDataTable.row(indexes).data();                
+                let selectedData = _filterDataTable.row(indexes).data();
                 $('#import-user-id').val(selectedData.userGuid);
                 $('#import-user-btn').removeAttr('disabled');
-            }            
+            }
         });
 
         _filterDataTable.on('deselect', function (e, dt, type, indexes) {
             $('#import-user-id').val();
             $('#import-user-btn').attr('disabled', true);
-        });     
+        });
 
         _importModal.onResult(function () {
-            _dataTable.ajax.reloadEx();
+            dataTable.ajax.reloadEx();
         });
     }
 
@@ -114,7 +115,7 @@
         modalClass: "importUser"
     });
 
-    let _dataTable = null;
+    let dataTable = null;
 
     abp.ui.extensions.entityActions.get('identity.user').addContributor(
         function (actionList) {
@@ -159,7 +160,7 @@
                             _identityUserAppService
                                 .delete(data.record.id)
                                 .then(function () {
-                                    _dataTable.ajax.reloadEx();
+                                    dataTable.ajax.reload();
                                     abp.notify.success(l('SuccessfullyDeleted'));
                                 });
                         },
@@ -175,6 +176,11 @@
                 [
                     {
                         title: l("Actions"),
+                        sortable: false,
+                        orderable: false,
+                        className: 'notexport text-center',
+                        name: 'rowActions',
+                        index: 0,
                         rowAction: {
                             items: abp.ui.extensions.entityActions.get('identity.user').actions.toArray()
                         }
@@ -212,27 +218,56 @@
     _importModal.onOpen(function () {
         setTimeout(() => {
             _filterDataTable.columns.adjust().draw();
-        });   
+        });
     });
 
-    $(function () {
-        let _$table = $('#UsersTable');
-        _dataTable = _$table.DataTable(
-            abp.libs.datatables.normalizeConfiguration({
-                order: [[1, 'asc']],
-                processing: true,
-                serverSide: true,
-                scrollX: true,
-                paging: true,
-                ajax: abp.libs.datatables.createAjax(
-                    _identityUserAppService.getList
-                ),
-                columnDefs: abp.ui.extensions.tableColumns.get('identity.user').columns.toArray()
-            })
-        );
-
-        _editModal.onResult(function () {
-            _dataTable.ajax.reloadEx();
-        });
+    $.fn.dataTable.Buttons.defaults.dom.button.className = 'btn flex-none';
+    let actionButtons = [
+        {
+            text: '<i class="fl fl-add-to align-middle"></i> <span>' + lg('Common:Command:Create') + '</span>',
+            titleAttr: lg('Common:Command:Create'),
+            id: 'CreateIntakeButton',
+            className: 'btn-light rounded-1',
+            action: function (e, dt, node, config) {
+                e.preventDefault();
+                _importModal.open();
+            }
+        },
+        ...commonTableActionButtons(l('Users'))
+    ];
+
+    let tableResponseCallback = function (result) {
+        return {
+            recordsTotal: result.totalCount,
+            recordsFiltered: result.items.length,
+            data: result.items
+        };
+    };
+
+    let dt = $('#UsersTable');
+    let listColumns = abp.ui.extensions.tableColumns.get('identity.user').columns.toArray();
+    let defaultVisibleColumns = listColumns.map((item) => { return item['data']; });
+
+    dataTable = initializeDataTable({
+        dt,
+        defaultVisibleColumns,
+        listColumns,
+        maxRowsPerPage: 25,
+        defaultSortColumn: 1,
+        dataEndpoint: _identityUserAppService.getList,
+        data: {},
+        responseCallback: tableResponseCallback,
+        actionButtons,
+        pagingEnabled: true,
+        reorderEnabled: false,
+        languageSetValues: {},
+        dataTableName: 'UsersTable',
+        dynamicButtonContainerId: 'dynamicButtonContainerId',
+        useNullPlaceholder: true,
+        externalSearchId: 'search-users'
+    });
+
+    _editModal.onResult(function () {
+        dataTable.ajax.reload();
     });
-})(jQuery);
+});