Adding missed role-listing changes

components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.role.listing/listing.hbs

@@ -47,19 +47,6 @@
             <th>By Role Name</th>
             <th class="no-sort"></th>
         </tr>
-        <tr class="filter-row filter-box">
-            <th colspan="2">
-                <label class="wr-input-label" for="search-by-name">
-                    By Role Name
-                </label>
-                <input id="search-by-name" type="text" class="form-control" placeholder="Search By Role Name">
-            </th>
-            <th style="vertical-align:bottom;">
-                <button id="search-btn" class="wr-btn">
-                    Search
-                </button>
-            </th>
-        </tr>
         <tr class="bulk-action-row">
             <th colspan="3"></th>
         </tr>

components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.role.listing/public/js/role-listing.js

@@ -16,10 +16,12 @@
  * under the License.
  */
 var loadRoleBasedActionURL = function (action, rolename) {
-    var href = $("#ast-container").data("app-context") + "role/" + action + "/" + rolename;
+    var href = $("#ast-container").data("app-context") + "roles/" + action + "?rolename=" + rolename;
     $(location).attr('href', href);
 };
 
+var apiBasePath = "/api/device-mgt/v1.0";
+
 /**
  * Following function would execute
  * when a user clicks on the list item
@@ -49,7 +51,7 @@ var loadPaginatedObjects = function (objectGridId, objectGridContainer, objectGr
                     var content = template(data.viewModel);
                     $(objectGridContainer).html(content);
                     if (isInit) {
-                                    $('#role-grid').datatables_extended();
+                        $('#role-grid').datatables_extended_serverside_paging();
                         isInit = false;
                     }
                     $("#dt-select-all").addClass("hidden");
@@ -73,46 +75,72 @@ var loadPaginatedObjects = function (objectGridId, objectGridContainer, objectGr
 function loadRoles(searchQuery) {
     var loadingContent = $("#loading-content");
     loadingContent.show();
-    var serviceURL = "/devicemgt_admin/roles";
+
-    if (searchQuery) {
+    var dataFilter = function(data){
-        serviceURL = serviceURL + "/search?filter=" + searchQuery;
-    }
-    var callback = function (data) {
-        if (data != null || data == "null") {
         data = JSON.parse(data);
-            var canRemove = $("#can-remove").val();
-            var canEdit = $("#can-edit").val();
-            var roles = [];
-            for(var i=0; i<data.responseContent.length; i++){
-                roles.push({"roleName":data.responseContent[i]});
-                if(canRemove != null && canRemove != undefined) {
-                    roles[i].canRemove = true;
-                }
 
-                if(canEdit != null && canEdit != undefined) {
+        var objects = [];
-                    roles[i].canEdit = true;
+
+        $(data.roles).each(function( index ) {
+            objects.push({name: data.roles[index], DT_RowId : "role-" + data.roles[index]})
+        });
+
+        json = {
+            "recordsTotal": data.count,
+            "recordsFiltered": data.count,
+            "data": objects
+        };
+
+        return JSON.stringify( json );
     }
+
+    var fnCreatedRow = function( nRow, aData, iDataIndex ) {
+        $(nRow).attr('data-type', 'selectable');
     }
 
-            data = {
+    var columns = [
-                "viewModel": {
+        {
-                    "roles": roles
+            class: "remove-padding icon-only content-fill",
+            data: null,
+            defaultContent: '<div class="thumbnail icon"> <i class="square-element text fw fw-user" style="font-size: 30px;"></i></div>'
         },
-                "length": roles.length
+        {
+            class: "fade-edge remove-padding-top",
+            data: "name",
+            defaultContent: ''
+        },
+        {
+            class: "text-right content-fill text-left-on-grid-view no-wrap",
+            data: null,
+            render: function ( data, type, row, meta ) {
+                return '<a onclick="javascript:loadRoleBasedActionURL(\'edit-role\', \'' + data.name + '\')" data-role="' + data.name +
+                    '" data-click-event="edit-form" class="btn padding-reduce-on-grid-view edit-role-link"><span class="fw-stack fw-lg">' +
+                    '<i class="fw fw-ring fw-stack-2x"></i><i class="fw fw-user fw-stack-1x"></i>' +
+                    '<span class="fw-stack fw-move-right fw-move-bottom"><i class="fw fw-circle fw-stack-2x fw-stroke fw-inverse"></i>' +
+                    '<i class="fw fw-circle fw-stack-2x"></i><i class="fw fw-edit fw-stack-1x fw-inverse"></i></span></span>' +
+                    '<span class="hidden-xs hidden-on-grid-view">Edit</span></a>' +
+                    '<a onclick="javascript:loadRoleBasedActionURL(\'edit-role-permission\', \'' + data.name +
+                    '\')" data-role="' + data.name + '" data-click-event="edit-form" class="btn padding-reduce-on-grid-view edit-permission-link">' +
+                    '<span class="fw-stack fw-lg"><i class="fw fw-ring fw-stack-2x"></i><i class="fw fw-security-policy fw-stack-1x"></i>' +
+                    '<span class="fw-stack fw-move-right fw-move-bottom"><i class="fw fw-circle fw-stack-2x fw-stroke fw-inverse"></i>' +
+                    '<i class="fw fw-circle fw-stack-2x"></i><i class="fw fw-edit fw-stack-1x fw-inverse"></i></span></span>' +
+                    '<span class="hidden-xs hidden-on-grid-view">Edit Permission</span></a>' +
+                    '<a data-role="' + data.name + '" data-click-event="remove-form" class="btn padding-reduce-on-grid-view remove-role-link">' +
+                    '<span class="fw-stack"><i class="fw fw-ring fw-stack-2x"></i><i class="fw fw-delete fw-stack-1x"></i></span>' +
+                    '<span class="hidden-xs hidden-on-grid-view">Remove</span></a>'
             }
         }
-        return data;
+    ];
+
+    var options = {
+        "placeholder": "Search By Role Name",
+        "searchKey" : "filter"
     };
 
-    loadPaginatedObjects("#role-grid", "#ast-container", "#role-listing", serviceURL, callback);
+    $('#role-grid').datatables_extended_serverside_paging(null, '/api/device-mgt/v1.0/roles', dataFilter, columns, fnCreatedRow, null, options);
+
     loadingContent.hide();
-    var sortableElem = '.wr-sortable';
+
-    $(sortableElem).sortable({
-        beforeStop: function () {
-            var sortedIDs = $(this).sortable('toArray');
-        }
-    });
-    $(sortableElem).disableSelection();
 }
 
 var modalPopup = ".wr-modalpopup";
@@ -153,7 +181,7 @@ function hidePopup() {
  */
 $("#role-grid").on("click", ".remove-role-link", function () {
     var role = $(this).data("role");
-    var removeRoleAPI = "/devicemgt_admin/roles?rolename=" + role;
+    var removeRoleAPI = apiBasePath + "/roles/" + role;
 
     $(modalPopupContent).html($('#remove-role-modal-content').html());
     showPopup();