From 7ff1d809c8cec76d0a04ddb71d7037b54e82c096 Mon Sep 17 00:00:00 2001
From: Alper Ebicoglu <ebicoglu@users.noreply.github.com>
Date: Tue, 3 Jul 2018 14:41:35 +0300
Subject: [PATCH] Added text & icon support #283

---
 .../datatables/datatables-extensions.js       | 109 ++++++++++++------
 .../Localization/Resources/AbpUi/en.json      |   3 +-
 .../Localization/Resources/AbpUi/tr.json      |   3 +-
 3 files changed, 79 insertions(+), 36 deletions(-)

diff --git a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared/wwwroot/libs/abp/aspnetcore-mvc-ui-theme-shared/datatables/datatables-extensions.js b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared/wwwroot/libs/abp/aspnetcore-mvc-ui-theme-shared/datatables/datatables-extensions.js
index 3561d1a4bd..14c510b686 100644
--- a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared/wwwroot/libs/abp/aspnetcore-mvc-ui-theme-shared/datatables/datatables-extensions.js
+++ b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared/wwwroot/libs/abp/aspnetcore-mvc-ui-theme-shared/datatables/datatables-extensions.js
@@ -26,14 +26,22 @@
            targets: 0,
            rowAction: 
            {
-                text: 'My actions',
+                text: 'My actions', 
+                icon: 'bolt' //see fa icon set https://fontawesome.com/v4.7.0/icons/
                 items:
                     [
                         {
                             text: "My first action",
-                            visible: function () {
-                                return true;
-                            },
+                            icon: "thumbs-o-down", 
+                            visible: true // or you can use functions eg: function(){ return true/false;} ,
+                            action: function (data) {
+                                console.log(data.record);
+                            }
+                        },
+                         {
+                            text: "My second action",
+                            icon: "thumbs-o-up",
+                            visible: true, 
                             action: function (data) {
                                 console.log(data.record);
                             }
@@ -42,17 +50,40 @@
            }
         },
     *************************************************************************/
+    var localize = function (key) {
+        return abp.localization.getResource('AbpUi')(key);
+    }
+
     var recordActions = function () {
         if (!$.fn.dataTableExt) {
             return;
         }
 
+        var getVisibilityValue = function (visibilityField, record) {
+            if (visibilityField === undefined) {
+                return true;
+            }
+
+            if (abp.utils.isFunction(visibilityField)) {
+                return visibilityField(record);
+            } else {
+                return visibilityField;
+            }
+        }
+
         var _createDropdownItem = function (record, fieldItem) {
             var $li = $('<li/>');
             var $a = $('<a/>');
 
-            if (fieldItem.text) {
+            if (fieldItem.displayNameHtml) {
                 $a.html(fieldItem.text);
+            } else {
+                if (fieldItem.icon) {
+                    var icon = fieldItem.iconClass ? fieldItem.iconClass : "fa fa-" + fieldItem.icon;
+                    $a.append($("<i>").addClass(icon + " mr-1"));
+                }
+
+                $a.append(fieldItem.text);
             }
 
             if (fieldItem.action) {
@@ -78,25 +109,31 @@
             return $li;
         }
 
-        var getVisibilityValue = function(visibilityField, record) {
-            if (visibilityField === undefined) {
-                return true;
-            }
-
-            if (abp.utils.isFunction(visibilityField)) {
-                return visibilityField(record);
-            } else {
-                return visibilityField;
-            }
-        }
-
         var _createButtonDropdown = function (record, field) {
             var $container = $('<div/>')
                 .addClass('dropdown')
                 .addClass('action-button');
 
-            var $dropdownButton = $('<button/>')
-                .html(field.text)
+            var $dropdownButton = $('<button/>');
+
+            if (field.icon !== undefined) {
+                //setting field.icon=null will show no icon.
+                if (field.icon) {
+                    $dropdownButton.append($("<i>").addClass("fa fa-" + field.icon + " mr-1"));
+                }
+            } else if (field.iconClass) {
+                $dropdownButton.append($("<i>").addClass(field.iconClass));
+            } else {
+                $dropdownButton.append($("<i>").addClass("fa fa-cog mr-1"));
+            }
+
+            if (field.text) {
+                $dropdownButton.append(field.text);
+            } else {
+                $dropdownButton.append(localize("DatatableActionDropdownDefaultText"));
+            }
+
+            $dropdownButton
                 .addClass('btn btn-primary btn-sm dropdown-toggle')
                 .attr('data-toggle', 'dropdown')
                 .attr('aria-haspopup', 'true')
@@ -139,12 +176,13 @@
 
         var _createSingleButton = function (record, field) {
             $(field.element).data(record);
+
             var isVisible = getVisibilityValue(field.visible, record);
 
             if (isVisible) {
                 return field.element;
             }
-          
+
             return "";
         };
 
@@ -202,28 +240,31 @@
         };
 
         var _existingApiRenderRowActionsFunction = $.fn.dataTableExt.oApi.renderRowActions;
-        $.fn.dataTableExt.oApi.renderRowActions = function (tableInstance, nRow, aData, iDisplayIndex, iDisplayIndexFull) {
-            if (_existingApiRenderRowActionsFunction) {
-                _existingApiRenderRowActionsFunction(tableInstance, nRow, aData, iDisplayIndex, iDisplayIndexFull);
-            }
+        $.fn.dataTableExt.oApi.renderRowActions =
+            function (tableInstance, nRow, aData, iDisplayIndex, iDisplayIndexFull) {
+                if (_existingApiRenderRowActionsFunction) {
+                    _existingApiRenderRowActionsFunction(tableInstance, nRow, aData, iDisplayIndex, iDisplayIndexFull);
+                }
 
-            renderRowActions(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);
-                }
+        $.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);
-            }
-        });
+                    renderRowActions(this, nRow, aData, iDisplayIndex, iDisplayIndexFull);
+                }
+            });
 
     }();
 
diff --git a/framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/en.json b/framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/en.json
index 75f7e88ee5..7a92833224 100644
--- a/framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/en.json
+++ b/framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/en.json
@@ -31,6 +31,7 @@
     "Submit": "Submit",
     "PagerNext": "Next",
     "PagerPrevious": "Previous",
-    "PagerInfo": "Showing {0} to {1} of {2} entries."
+    "PagerInfo": "Showing {0} to {1} of {2} entries.",
+    "DatatableActionDropdownDefaultText": "Actions"
   }
 }
\ No newline at end of file
diff --git a/framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/tr.json b/framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/tr.json
index 861892c0ca..c11f9acd3e 100644
--- a/framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/tr.json
+++ b/framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/tr.json
@@ -28,6 +28,7 @@
     "Login": "Giriş",
     "Register": "Kaydol",
     "Logout": "Çıkış",
-    "Submit": "Gönder"
+    "Submit": "Gönder",
+    "DatatableActionDropdownDefaultText": "İşlemler"
   }
 }
\ No newline at end of file