Committing group listing back end pagination UI

components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/api/group-api.jag

@@ -80,4 +80,8 @@ if (!user) {
     }
 }
 
+if (result) {
+    print(result);
+}
+
 %>

components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/cdmf.page.groups/groups.hbs

@@ -37,7 +37,7 @@
             <div>
                 <span id="permission" data-permission="{{permissions.list}}"></span>
                 {{#if groupCount}}
-                    <div class="container-fluid">
+                    <div class="container-fluid" id="group-listing" data-current-user="{{currentUser.username}}">
                         <table class="table table-striped table-hover list-table display responsive nowrap data-table table-selectable grid-view"
                                id="group-grid">
                             <thead>
@@ -270,9 +270,6 @@
 {{/zone}}
 
 {{#zone "bottomJs"}}
-    <script id="group-listing" data-current-user="{{currentUser.username}}"
-            src="{{@page.publicUri}}/templates/listing.hbs"
-            type="text/x-handlebars-template"></script>
     {{#if groupCount}}
         {{js "js/listing.js"}}
     {{/if}}

components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/cdmf.page.groups/public/js/listing.js

@@ -97,30 +97,7 @@ function toTitleCase(str) {
 
 function loadGroups() {
     var groupListing = $("#group-listing");
-    var groupListingSrc = groupListing.attr("src");
     var currentUser = groupListing.data("currentUser");
-    $.template("group-listing", groupListingSrc, function (template) {
-
-        var successCallback = function (data) {
-            data = JSON.parse(data);
-            var viewModel = {};
-            viewModel.groups = data.data;
-            $('#group-grid').removeClass('hidden');
-            var content = template(viewModel);
-            $("#ast-container").html(content);
-
-            /*
-             * On group checkbox select add parent selected style class
-             */
-            $(groupCheckbox).click(function () {
-                addGroupSelectedClass(this);
-            });
-            attachEvents();
-
-            $('#group-grid').datatables_extended();
-            $(".icon .text").res_text(0.2);
-        };
-
     var serviceURL;
     if ($.hasPermission("LIST_ALL_GROUPS")) {
         serviceURL = "/devicemgt_admin/groups?start=0&rowCount=1000";
@@ -135,10 +112,82 @@ function loadGroups() {
         return;
     }
 
-        invokerUtil.get(serviceURL, successCallback, function (message) {
-            displayErrors(message.content);
+    $('#group-grid').datatables_extended ({
+        serverSide: true,
+        processing: false,
+        searching: true,
+        ordering:  false,
+        filter: false,
+        pageLength : 16,
+        ajax: { url : '/devicemgt/api/groups', data : {url : serviceURL},
+            dataSrc: function ( json ) {
+                $('#group-grid').removeClass('hidden');
+                var $list = $("#group-listing :input[type='search']");
+                $list.each(function(){
+                    $(this).addClass("hidden");
                 });
-
+                return json.data;
+            }
+        },
+        columnDefs: [
+            { targets: 0, data: 'id', className: 'remove-padding icon-only content-fill' , render: function ( data, type, row, meta ) {
+                return '<div class="thumbnail icon"><img class="square-element text fw " src="public/cdmf.page.groups/images/group-icon.png"/></div>';
+            }},
+            { targets: 1, data: 'name', className: 'fade-edge' , render: function ( name, type, row, meta ) {
+                return '<h4 data-groupid="' + row.id + '">' + name + '</h4>';
+            }},
+            { targets: 2, data: 'owner', className: 'fade-edge remove-padding-top'},
+            { targets: 3, data: 'id', className: 'text-right content-fill text-left-on-grid-view no-wrap' ,
+                render: function ( id, type, row, meta ) {
+                    var html;
+                    html = '<a href="devices?groupName=' + row.name + '&groupOwner=' + row.owner + '" data-click-event="remove-form" class="btn padding-reduce-on-grid-view">' +
+                        '<span class="fw-stack"><i class="fw fw-ring fw-stack-2x"></i><i class="fw fw-view fw-stack-1x"></i></span>' +
+                        '<span class="hidden-xs hidden-on-grid-view">View Devices</span></a>';
+
+                    html += '<a href="analytics?groupName=' + row.name + '&groupOwner=' + row.owner + '" data-click-event="remove-form" class="btn padding-reduce-on-grid-view">' +
+                        '<span class="fw-stack"><i class="fw fw-ring fw-stack-2x"></i><i class="fw fw-statistics fw-stack-1x"></i></span>' +
+                        '<span class="hidden-xs hidden-on-grid-view">Analytics</span></a>';
+
+                    html += '<a href="#" data-click-event="remove-form" class="btn padding-reduce-on-grid-view share-group-link" data-group-name="' + row.name + '" ' +
+                        'data-group-owner="' + row.owner + '"><span class="fw-stack"><i class="fw fw-ring fw-stack-2x"></i><i class="fw fw-share fw-stack-1x"></i></span>' +
+                        '<span class="hidden-xs hidden-on-grid-view">Share</span></a>';
+
+                    html += '<a href="#" data-click-event="remove-form" class="btn padding-reduce-on-grid-view edit-group-link" data-group-name="' + row.name + '" ' +
+                        'data-group-owner="' + row.owner + '" data-group-description="' + row.description + '"><span class="fw-stack"><i class="fw fw-ring fw-stack-2x"></i>' +
+                        '<i class="fw fw-edit fw-stack-1x"></i></span><span class="hidden-xs hidden-on-grid-view">Edit</span></a>';
+
+                    html += '<a href="#" data-click-event="remove-form" class="btn padding-reduce-on-grid-view remove-group-link" data-group-name="' + row.name + '" ' +
+                        'data-group-owner="' + row.owner + '"><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">Delete</span></a>';
+
+                    return html;
+                }}
+        ],
+        "createdRow": function( row, data, dataIndex ) {
+            $(row).attr('data-type', 'selectable');
+            $(row).attr('data-groupid', data.id);
+            $.each($('td', row), function (colIndex) {
+                switch(colIndex) {
+                    case 1:
+                        $(this).attr('data-grid-label', "Name");
+                        $(this).attr('data-search', data.name);
+                        $(this).attr('data-display', data.name);
+                        break;
+                    case 2:
+                        $(this).attr('data-grid-label', "Owner");
+                        $(this).attr('data-search', data.owner);
+                        $(this).attr('data-display', data.owner);
+                        break;
+                }
+            });
+        },
+        "fnDrawCallback": function( oSettings ) {
+            $(".icon .text").res_text(0.2);
+            attachEvents();
+        }
+    });
+    $(groupCheckbox).click(function () {
+        addGroupSelectedClass(this);
     });
 }