Fixing devices listing issue

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

@@ -169,12 +169,12 @@ function toTitleCase(str) {
 function loadDevices(searchType, searchParam) {
     var serviceURL;
     if (groupName && groupOwner && $.hasPermission("LIST_OWN_DEVICES")) {
-        serviceURL = "/devicemgt_admin/groups/owner/" + groupOwner + "/name/" + groupName + "/devices";
+        serviceURL = "/api/device-mgt/v1.0/groups/owner/" + groupOwner + "/name/" + groupName + "/devices";
     } else if ($.hasPermission("LIST_DEVICES")) {
-        serviceURL = "/devicemgt_admin/devices";
+        serviceURL = "/api/device-mgt/v1.0/devices";
     } else if ($.hasPermission("LIST_OWN_DEVICES")) {
         //Get authenticated users devices
-        serviceURL = "/devicemgt_admin/users/devices?username=" + currentUser;
+        serviceURL = "/api/device-mgt/v1.0/users/devices?username=" + currentUser;
     } else {
         $("#loading-content").remove();
         $('#device-table').addClass('hidden');
@@ -227,29 +227,21 @@ function loadDevices(searchType, searchParam){
         return type;
     }
 
-    $('#device-grid').datatables_extended ({
+    var columns = [
-        serverSide: true,
+        {
-        processing: false,
+            targets: 0,
-        searching: true,
+            data: 'name',
-        ordering:  false,
+            class: 'remove-padding icon-only content-fill',
-        filter: false,
+            render: function (data, type, row, meta) {
-        pageLength : 16,
+                return '<div class="thumbnail icon"><img class="square-element text fw " src="' + getDeviceTypeThumb(
-        ajax: { url : '/devicemgt/api/devices', data : {url : serviceURL},
+                        row.deviceType) + '"/></div>';
-                dataSrc: function ( json ) {
-                    $('#device-grid').removeClass('hidden');
-                    $("#loading-content").remove();
-                    var $list = $("#device-table :input[type='search']");
-                    $list.each(function(){
-                        $(this).addClass("hidden");
-                    });
-                    return json.data;
             }
         },
-        columnDefs: [
+        {
-            { targets: 0, data: 'name', className: 'remove-padding icon-only content-fill' , render: function ( data, type, row, meta ) {
+            targets: 1,
-                return '<div class="thumbnail icon"><img class="square-element text fw " src="' + getDeviceTypeThumb(row.type) + '"/></div>';
+            data: 'name',
-            }},
+            class: 'fade-edge',
-            { targets: 1, data: 'name', className: 'fade-edge' , render: function ( name, type, row, meta ) {
+            render: function (name, type, row, meta) {
                 var model = getPropertyValue(row.properties, 'DEVICE_MODEL');
                 var vendor = getPropertyValue(row.properties, 'VENDOR');
                 var html = '<h4>' + name + '</h4>';
@@ -257,10 +249,16 @@ function loadDevices(searchType, searchParam){
                     html += '<div>(' + vendor + '-' + model + ')</div>';
                 }
                 return html;
-            }},
+            }
-            { targets: 2, data: 'enrolmentInfo.owner', className: 'fade-edge remove-padding-top'},
+        },
+        {targets: 2,
+            data: 'user',
+            class: 'fade-edge remove-padding-top',
+        },
         {
-                targets: 3, data: 'enrolmentInfo.status', className: 'fade-edge remove-padding-top',
+            targets: 3,
+            data: 'status',
+            class: 'fade-edge remove-padding-top',
             render: function (status, type, row, meta) {
                 var html;
                 switch (status) {
@@ -278,68 +276,93 @@ function loadDevices(searchType, searchParam){
                         break;
                 }
                 return html;
-            }},
+            }
+        },
         {
-                targets: 4, data: 'type', className: 'fade-edge remove-padding-top',
+            targets: 4,
+            data: 'deviceType',
+            class: 'fade-edge remove-padding-top',
             render: function (status, type, row, meta) {
-                    return getDeviceTypeLabel(row.type);
+                return getDeviceTypeLabel(row.deviceType);
             }
         },
         {
-                targets: 5, data: 'enrolmentInfo.ownership', className: 'fade-edge remove-padding-top',
+            targets: 5,
+            data: 'ownership',
+            class: 'fade-edge remove-padding-top',
             render: function (status, type, row, meta) {
-                    if (getDeviceTypeCategory(row.type) == 'mobile') {
+                if (getDeviceTypeCategory(row.deviceType) == 'mobile') {
                     return row.enrolmentInfo.ownership;
                 } else {
                     return null;
                 }
             }
         },
-            { targets: 6, data: 'enrolmentInfo.status' , className: 'text-right content-fill text-left-on-grid-view no-wrap' ,
+        {
+            targets: 6,
+            data: 'status',
+            class: 'text-right content-fill text-left-on-grid-view no-wrap',
             render: function (status, type, row, meta) {
-                var deviceType = row.type;
+                var deviceType = row.deviceType;
                 var deviceIdentifier = row.deviceIdentifier;
                 var html = '<span></span>';
                 if (status != 'REMOVED') {
-                    html = '<a href="device/' + deviceType + '?id=' + deviceIdentifier + '" data-click-event="remove-form"' +
+                    html =
-                    ' class="btn padding-reduce-on-grid-view"><span class="fw-stack"><i class="fw fw-ring fw-stack-2x"></i>' +
+                        '<a href="device/' + deviceType + '?id=' + deviceIdentifier + '" 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</span></a>';
-                    html += '<a href="device/' + deviceType + '/analytics?deviceId=' + deviceIdentifier + '&deviceName=' + row.name + '" ' +
+                    html += '<a href="device/' + deviceType + '/analytics?deviceId=' + deviceIdentifier + '&deviceName='
-                            'data-click-event="remove-form" class="btn padding-reduce-on-grid-view"><span class="fw-stack">' +
+                            + row.name + '" ' +
-                            '<i class="fw fw-ring fw-stack-2x"></i><i class="fw fw-statistics fw-stack-1x"></i></span>' +
+                            '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>';
 
                     if (!groupName || !groupOwner) {
-                        html += '<a href="#" data-click-event="remove-form" class="btn padding-reduce-on-grid-view group-device-link" ' +
+                        html +=
-                                'data-deviceid="' + deviceIdentifier + '" data-devicetype="' + deviceType + '" data-devicename="' +
+                            '<a href="#" data-click-event="remove-form" class="btn padding-reduce-on-grid-view group-device-link" '
+                            +
+                            'data-deviceid="' + deviceIdentifier + '" data-devicetype="' + deviceType
+                            + '" data-devicename="' +
                             row.name + '"><span class="fw-stack"><i class="fw fw-ring fw-stack-2x"></i>' +
                             '<i class="fw fw-grouping fw-stack-1x"></i></span>' +
                             '<span class="hidden-xs hidden-on-grid-view">Group</span></a>';
                     }
 
-                    html += '<a href="#" data-click-event="remove-form" class="btn padding-reduce-on-grid-view edit-device-link" ' +
+                    html +=
-                            'data-deviceid="' + deviceIdentifier + '" data-devicetype="' + deviceType + '" data-devicename="' + row.name + '">' +
+                        '<a href="#" data-click-event="remove-form" class="btn padding-reduce-on-grid-view edit-device-link" '
+                        +
+                        'data-deviceid="' + deviceIdentifier + '" data-devicetype="' + deviceType
+                        + '" data-devicename="' + row.name + '">' +
                         '<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-device-link" ' +
+                    html +=
-                            'data-deviceid="' + deviceIdentifier + '" data-devicetype="' + deviceType + '" data-devicename="' + row.name + '">' +
+                        '<a href="#" data-click-event="remove-form" class="btn padding-reduce-on-grid-view remove-device-link" '
+                        +
+                        'data-deviceid="' + deviceIdentifier + '" data-devicetype="' + deviceType
+                        + '" data-devicename="' + row.name + '">' +
                         '<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>';
                 }
                 return html;
-            }}
+            }
-        ],
+        }
-        "createdRow": function( row, data, dataIndex ) {
+    ];
+
+    var fnCreatedRow = function (row, data, dataIndex) {
         $(row).attr('data-type', 'selectable');
         $(row).attr('data-deviceid', data.deviceIdentifier);
         $(row).attr('data-devicetype', data.type);
         var model = getPropertyValue(data.properties, 'DEVICE_MODEL');
         var vendor = getPropertyValue(data.properties, 'VENDOR');
-            var owner = data.enrolmentInfo.owner;
+        var owner = data.user;
-            var status = data.enrolmentInfo.status;
+        var status = data.status;
-            var ownership = data.enrolmentInfo.ownership;
+        var ownership = data.ownership;
         var deviceType = data.type;
         var category = getDeviceTypeCategory(deviceType);
         $.each($('td', row), function (colIndex) {
@@ -372,12 +395,52 @@ function loadDevices(searchType, searchParam){
                     break;
             }
         });
-        },
+    };
-        "fnDrawCallback": function( oSettings ) {
+
+    var dataFilter = function (data) {
+        data = JSON.parse(data);
+        var objects = [];
+
+        $(data.devices).each(function (index) {
+            objects.push(
+                {
+                    model: getPropertyValue(data.devices[index].properties, "DEVICE_MODEL"),
+                    vendor: getPropertyValue(data.devices[index].properties, "VENDOR"),
+                    user: data.devices[index].enrolmentInfo.owner,
+                    status: data.devices[index].enrolmentInfo.status,
+                    ownership: data.devices[index].enrolmentInfo.ownership,
+                    deviceType: data.devices[index].type,
+                    deviceIdentifier: data.devices[index].deviceIdentifier,
+                    name: data.devices[index].name
+                }
+            );
+        });
+
+        var json = {
+            "recordsTotal": data.count,
+            "recordsFiltered": data.count,
+            "data": objects
+        };
+        return JSON.stringify(json);
+    };
+
+    $('#device-grid').datatables_extended_serverside_paging(
+        null,
+        serviceURL,
+        dataFilter,
+        columns,
+        fnCreatedRow,
+        function () {
             $(".icon .text").res_text(0.2);
+            $('#device-grid').removeClass('hidden');
+            $("#loading-content").remove();
             attachDeviceEvents();
+        }, {
+            "placeholder": "Search By Device Name",
+            "searchKey": "name"
         }
-    });
+    );
+
     $(deviceCheckbox).click(function () {
         addDeviceSelectedClass(this);
     });
@@ -483,16 +546,17 @@ function attachDeviceEvents() {
             var deviceId = $(this).data("deviceid");
             var deviceType = $(this).data("devicetype");
             $(modalPopupContent).html($('#group-device-modal-content').html());
-            $('#user-groups').html('<div style="height:100px" data-state="loading" data-loading-text="Loading..." data-loading-style="icon-only" data-loading-inverse="true"></div>');
+            $('#user-groups').html(
+                '<div style="height:100px" data-state="loading" data-loading-text="Loading..." data-loading-style="icon-only" data-loading-inverse="true"></div>');
             $("a#group-device-yes-link").hide();
             showPopup();
 
             var serviceURL;
             if ($.hasPermission("LIST_ALL_GROUPS")) {
-                serviceURL = "/devicemgt_admin/groups/all";
+                serviceURL = "/api/device-mgt/v1.0/groups/all";
             } else if ($.hasPermission("LIST_GROUPS")) {
                 //Get authenticated users groups
-                serviceURL = "/devicemgt_admin/groups/user/" + currentUser + "/all";
+                serviceURL = "/api/device-mgt/v1.0/groups/user/" + currentUser + "/all";
             }
 
             invokerUtil.get(serviceURL, function (data) {
@@ -507,7 +571,7 @@ function attachDeviceEvents() {
                 $("a#group-device-yes-link").show();
                 $("a#group-device-yes-link").click(function () {
                     var selectedGroup = $('#assign-group-selector').val();
-                    serviceURL = "/devicemgt_admin/groups/owner/" + selectedGroup + "/devices";
+                    serviceURL = "/api/device-mgt/v1.0/groups/owner/" + selectedGroup + "/devices";
                     var device = {"id": deviceId, "type": deviceType};
                     invokerUtil.post(serviceURL, device, function (data) {
                         $(modalPopupContent).html($('#group-associate-device-200-content').html());
@@ -545,7 +609,7 @@ function attachDeviceEvents() {
     $("a.remove-device-link").click(function () {
         var deviceId = $(this).data("deviceid");
         var deviceType = $(this).data("devicetype");
-        var serviceURL = "/devicemgt_admin/devices/type/" + deviceType + "/id/" + deviceId;
+        var serviceURL = "/api/device-mgt/v1.0/devices/type/" + deviceType + "/id/" + deviceId;
 
         $(modalPopupContent).html($('#remove-device-modal-content').html());
         showPopup();
@@ -576,7 +640,7 @@ function attachDeviceEvents() {
         var deviceId = $(this).data("deviceid");
         var deviceType = $(this).data("devicetype");
         var deviceName = $(this).data("devicename");
-        var serviceURL = "/devicemgt_admin/devices/type/" + deviceType + "/id/" + deviceId;
+        var serviceURL = "/api/device-mgt/v1.0/devices/type/" + deviceType + "/id/" + deviceId;
 
         $(modalPopupContent).html($('#edit-device-modal-content').html());
         $('#edit-device-name').val(deviceName);