Merge pull request #183 from aspnetzero/Alper/datatables-record-actions

Added record actions plugin to datatables

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

@@ -13,6 +13,7 @@
     <script type="text/javascript" src="~/modules/identity/helpers/ResourceLoader.js"></script>
     <script type="text/javascript" src="~/modules/identity/helpers/ModalManager.js"></script>
     <script type="text/javascript" src="~/modules/identity/views/users/index.js"></script>
+    <script type="text/javascript" src="~/modules/identity/helpers/datatables/datatables.record-actions.js"></script>
 }
 
 <abp-card id="IdentityUsersWrapper">

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

@@ -16,6 +16,10 @@
     <EmbeddedResource Include="Localization\Resources\**\*.json" />
   </ItemGroup>
 
+  <ItemGroup>
+    <Content Remove="wwwroot\modules\identity\helpers\datatables\datatables.record-actions.js" />
+  </ItemGroup>
+
   <ItemGroup>
     <ProjectReference Include="..\Volo.Abp.AspNetCore.Mvc.UI.Bootstrap\Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.csproj" />
     <ProjectReference Include="..\Volo.Abp.Identity.Application.Contracts\Volo.Abp.Identity.Application.Contracts.csproj" />

src/Volo.Abp.Identity.Web/wwwroot/modules/identity/helpers/datatables/datatables.record-actions.js

@@ -0,0 +1,176 @@
+/************************************************************************
+* RECORD-ACTIONS extension for datatables                               *
+*************************************************************************/
+(function ($) {
+
+    if (!$.fn.dataTableExt) {
+        return;
+    }
+
+    var _createDropdownItem = function (record, fieldItem) {
+        var $li = $('<li/>');
+        var $a = $('<a/>');
+
+        if (fieldItem.text) {
+            $a.html(fieldItem.text);
+        }
+
+        if (fieldItem.action) {
+            $a.click(function (e) {
+                e.preventDefault();
+
+                if (!$(this).closest('li').hasClass('disabled')) {
+                    fieldItem.action({
+                        record: record
+                    });
+                }
+            });
+        }
+
+        $a.appendTo($li);
+        return $li;
+    }
+
+    var _createButtonDropdown = function (record, field) {
+        var $container = $('<div/>')
+            .addClass('dropdown')
+            .addClass('action-button');
+
+        var $dropdownButton = $('<button/>')
+            .html(field.text)
+            .addClass('btn btn-primary btn-sm dropdown-toggle')
+            .attr('data-toggle', 'dropdown')
+            .attr('aria-haspopup', 'true')
+            .attr('aria-expanded', 'false');
+
+        if (field.cssClass) {
+            $dropdownButton.addClass(field.cssClass);
+        }
+
+        var $dropdownItemsContainer = $('<ul/>').addClass('dropdown-menu');
+
+        for (var i = 0; i < field.items.length; i++) {
+            var fieldItem = field.items[i];
+
+            if (fieldItem.visible && !fieldItem.visible({ record: record })) {
+                continue;
+            }
+
+            var $dropdownItem = _createDropdownItem(record, fieldItem);
+
+            if (fieldItem.enabled && !fieldItem.enabled({ record: record })) {
+                $dropdownItem.addClass('disabled');
+            }
+
+            $dropdownItem.appendTo($dropdownItemsContainer);
+        }
+
+        if ($dropdownItemsContainer.find('li').length > 0) {
+            $dropdownItemsContainer.appendTo($container);
+            $dropdownButton.appendTo($container);
+        }
+
+        if ($dropdownItemsContainer.children().length === 0) {
+            return "";
+        }
+
+        return $container;
+    };
+
+    var _createSingleButton = function (record, field) {
+        $(field.element).data(record);
+
+        if (field.visible === undefined) {
+            return field.element;
+        }
+
+        var isVisibilityFunction = typeof field.visible === "function";
+        if (isVisibilityFunction) {
+            if (field.visible()) {
+                return field.element;
+            }
+        } else {
+            if (field.visible) {
+                return field.element;
+            }
+        }
+
+        return "";
+    };
+
+    var _createRowAction = function (record, field, tableInstance) {
+        if (field.items && field.items.length > 1) {
+            return _createButtonDropdown(record, field, tableInstance);
+        } else if (field.element) {
+            var $singleActionButton = _createSingleButton(record, field);
+            if ($singleActionButton != "") {
+                return $singleActionButton.clone(true);
+            }
+        }
+
+        return "";
+    }
+
+    var hideColumnWithoutRedraw = function (tableInstance, colIndex) {
+        tableInstance.fnSetColumnVis(colIndex, false, false);
+    }
+
+    var hideEmptyColumn = function(cellContent, tableInstance, colIndex) {
+        if (cellContent == "") {
+            hideColumnWithoutRedraw(tableInstance, colIndex);
+        }
+    };
+
+    var renderRowActions = function (tableInstance, nRow, aData, iDisplayIndex, iDisplayIndexFull) {
+        var columns;
+        if (tableInstance.aoColumns) {
+            columns = tableInstance.aoColumns;
+        } else {
+            columns = tableInstance.fnSettings().aoColumns;
+        }
+
+        if (!columns) {
+            return;
+        }
+
+        var cells = $(nRow).children("td");
+
+        for (var colIndex = 0; colIndex < columns.length; colIndex++) {
+            var column = columns[colIndex];
+            if (column.rowAction) {
+                var $actionContainer = _createRowAction(aData, column.rowAction, tableInstance);
+                hideEmptyColumn($actionContainer, tableInstance, colIndex);
+
+                var $actionButton = $(cells[colIndex]).find(".action-button");
+                if ($actionButton.length === 0) {
+                    $(cells[colIndex]).append($actionContainer);
+                }
+            }
+        }
+    };
+
+    var _existingApiRenderRowActionsFunction = $.fn.dataTableExt.oApi.renderRowActions;
+    $.fn.dataTableExt.oApi.renderRowActions = function (tableInstance, nRow, aData, iDisplayIndex, iDisplayIndexFull) {
+        if (_existingApiRenderRowActionsFunction) {
+            _existingApiRenderRowActionsFunction(tableInstance, nRow, aData, iDisplayIndex, iDisplayIndexFull);
+        }
+
+        renderRowActions(tableInstance, nRow, aData, iDisplayIndex, iDisplayIndexFull);
+    };
+
+    if (!$.fn.dataTable) {
+        return;
+    }
+
+    var _existingDefaultFnRowCallback = $.fn.dataTable.defaults.fnRowCallback;
+    $.extend(true, $.fn.dataTable.defaults, {
+        fnRowCallback: function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
+            if (_existingDefaultFnRowCallback) {
+                _existingDefaultFnRowCallback(this, nRow, aData, iDisplayIndex, iDisplayIndexFull);
+            }
+
+            renderRowActions(this, nRow, aData, iDisplayIndex, iDisplayIndexFull);
+        }
+    });
+
+})(jQuery);

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

@@ -6,3 +6,16 @@
 .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;
+}

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

@@ -35,16 +35,37 @@
                     orderable: false,
                     autoWidth: false,
                     defaultContent: '',
-                    render: function (list, type, record, meta) {
-                        return '<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">' +
-                            l('Actions') +
-                            '</button>' +
-                            '<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">' +
-                            '<a class="dropdown-item update-user" href="#" data-id="' + record.id + '">' + l('Edit') + '</a>' +
-                            '<a class="dropdown-item delete-user" href="#" data-id="' + record.id + '">' + l('Delete') + '</a>' +
-                            '</div>' +
-                            '</div>';
+                    rowAction: {
+                        text: '<i class="fa fa-cog"></i> ' + l('Actions') + ' <span class="caret"></span>',
+                        items:
+                        [
+                            {
+                                text: l('Edit'),
+                                visible: function () {
+                                    return true;
+                                },
+                                action: function (data) {
+                                    _editModal.open({
+                                        id: data.record.id
+                                    });
+                                }
+                            },
+                            {
+                                text: l('Delete'),
+                                visible: function () {
+                                    return true;
+                                },
+                                action: function (data) {
+                                    if (confirm(l('UserDeletionConfirmationMessage', data.record.userName))) {
+                                        _identityUserAppService
+                                            .delete(data.record.id)
+                                            .then(function () {
+                                                _dataTable.ajax.reload();
+                                            });
+                                    }
+                                }
+                            }
+                        ]
                     }
                 },
                 {
@@ -62,27 +83,6 @@
             ]
         }); 
 
-        //Update user command
-        _$table.on('click', '.update-user', function () { //TODO: To action list!
-            _editModal.open({
-                id: $(this).data('id')
-            });
-        });
-
-        //Delete user command
-        _$table.on('click', '.delete-user', function () { //TODO: To action list!
-            var id = $(this).data('id');
-            var userName = $(this).data('userName');
-
-            if (confirm(l('UserDeletionConfirmationMessage', userName))) {
-                _identityUserAppService
-                    .delete(id)
-                    .then(function () {
-                        _dataTable.ajax.reload();
-                    });
-            }
-        });
-
         _createModal.onResult(function () {
             _dataTable.ajax.reload();
         });

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

@@ -6,3 +6,33 @@
 .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;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

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

@@ -1 +1 @@
-.dataTable{width:100% !important;border-spacing:0 !important;}.table td,.table th{padding:8px 10px;}
+.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;}