Fixing user,device,role listing pages

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

@@ -39,9 +39,17 @@ if (uriMatcher.match("/{context}/api/data-tables/invoker")) {
 
     for (var key in allParams) {
         if (allParams.hasOwnProperty(key)) {
-            if (key == "limit" || key == "offset" || key == "filter") {
+            if(key == "limit" || key == "offset"){
                 targetURL = appendQueryParam(targetURL, key, allParams[key]);
             }
+            if(key == "filter"){
+                if(allParams[key]){
+                    var searchPayload = JSON.parse(allParams[key]);
+                    for (var key in searchPayload) {
+                        targetURL = appendQueryParam(targetURL, key, searchPayload[key]);
+                    }
+                }
+            }
         }
     }
 

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

@@ -20,7 +20,6 @@ function onRequest(context) {
     var userModule = require("/app/modules/business-controllers/user.js")["userModule"];
     var username = request.getParameter("username");
     var user = userModule.getUser(username)["content"];
-    var userModule = require("/app/modules/user.js")["userModule"];
 
     var userName = request.getParameter("username");
 

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

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2015, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ * Copyright (c) 2016, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
  *
  * WSO2 Inc. licenses this file to you under the Apache License,
  * Version 2.0 (the "License"); you may not use this file except
@@ -10,45 +10,28 @@
  *
  * Unless required by applicable law or agreed to in writing,
  * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * either express or implied. See the License for the
+ * KIND, either express or implied. See the License for the
  * specific language governing permissions and limitations
  * under the License.
  */
 
-var deviceMgtAPIsBasePath = "/api/device-mgt/v1.0";
-
-/**
- * Checks if provided input is valid against RegEx input.
- *
- * @param regExp Regular expression
- * @param inputString Input string to check
- * @returns {boolean} Returns true if input matches RegEx
- */
-function inputIsValid(regExp, inputString) {
-    regExp = new RegExp(regExp);
-    return regExp.test(inputString);
-}
-
-/**
- * Sorting function of users
- * listed on User Management page in WSO2 Devicemgt Console.
- */
 $(function () {
     var sortableElem = '.wr-sortable';
     $(sortableElem).sortable({
         beforeStop: function () {
-            $(this).sortable('toArray');
+            var sortedIDs = $(this).sortable('toArray');
         }
     });
     $(sortableElem).disableSelection();
 });
 
+var apiBasePath = "/api/device-mgt/v1.0";
 var modalPopup = ".wr-modalpopup";
 var modalPopupContainer = modalPopup + " .modalpopup-container";
 var modalPopupContent = modalPopup + " .modalpopup-content";
 var body = "body";
-//var isInit = true;
+var isInit = true;
 $(".icon .text").res_text(0.2);
 
 /*
@@ -90,11 +73,11 @@ function getSelectedUsernames() {
 /**
  * Following click function would execute
  * when a user clicks on "Invite" link
- * on User Management page in WSO2 Devicemgt Console.
+ * on User Management page in WSO2 MDM Console.
  */
 $("a.invite-user-link").click(function () {
     var usernameList = getSelectedUsernames();
-    var inviteUserAPI = deviceMgtAPIsBasePath + "/users/send-invitation";
+    var inviteUserAPI = apiBasePath + "/users/send-invitation";
 
     if (usernameList.length == 0) {
         $(modalPopupContent).html($("#errorUsers").html());
@@ -108,18 +91,13 @@ $("a.invite-user-link").click(function () {
         invokerUtil.post(
             inviteUserAPI,
             usernameList,
-            // success callback
+            function () {
-            function (data, textStatus, jqXHR) {
-                if (jqXHR.status == 200) {
                 $(modalPopupContent).html($('#invite-user-success-content').html());
                 $("a#invite-user-success-link").click(function () {
                     hidePopup();
                 });
-                }
             },
-            // error callback
+            function () {
-            function (jqXHR) {
-                console.log("error in invite-user API, status code: " + jqXHR.status);
                 $(modalPopupContent).html($('#invite-user-error-content').html());
                 $("a#invite-user-error-link").click(function () {
                     hidePopup();
@@ -136,30 +114,31 @@ $("a.invite-user-link").click(function () {
 /**
  * Following click function would execute
  * when a user clicks on "Remove" link
- * on User Listing page in WSO2 Devicemgt Console.
+ * on User Listing page in WSO2 MDM Console.
  */
-function removeUser(username) {
+function removeUser(uname, uid) {
-    var removeUserAPI = deviceMgtAPIsBasePath + "/users/" + username;
+    var username = uname;
+    var userid = uid;
+    var removeUserAPI = apiBasePath + "/users/" + username;
     $(modalPopupContent).html($('#remove-user-modal-content').html());
     showPopup();
 
     $("a#remove-user-yes-link").click(function () {
         invokerUtil.delete(
             removeUserAPI,
-            // success callback
+            function () {
-            function (data, textStatus, jqXHR) {
+                $("#" + userid).remove();
-                if (jqXHR.status == 200) {
+                // get new user-list-count
+                var newUserListCount = $(".user-list > span").length;
+                // update user-listing-status-msg with new user-count
+                $("#user-listing-status-msg").text("Total number of Users found : " + newUserListCount);
                 // update modal-content with success message
                 $(modalPopupContent).html($('#remove-user-success-content').html());
                 $("a#remove-user-success-link").click(function () {
                     hidePopup();
-                        location.reload();
                 });
-                }
             },
-            // error callback
+            function () {
-            function (jqXHR) {
-                console.log("error in remove-user API, status code: " + jqXHR.status);
                 $(modalPopupContent).html($('#remove-user-error-content').html());
                 $("a#remove-user-error-link").click(function () {
                     hidePopup();
@@ -207,23 +186,19 @@ function resetPassword(uname) {
             //resetPasswordFormData.username = user;
             resetPasswordFormData.newPassword = unescape(confirmedPassword);
 
-            var resetPasswordServiceURL = deviceMgtAPIsBasePath + "/admin/users/"+ user +"/credentials";
+            var resetPasswordServiceURL = apiBasePath + "/admin/users/"+ user +"/credentials";
 
             invokerUtil.post(
                 resetPasswordServiceURL,
                 resetPasswordFormData,
-                // success callback
+                function (data, textStatus, jqXHR) {   // The success callback
-                function (data, textStatus, jqXHR) {
                     if (jqXHR.status == 200) {
                         $(modalPopupContent).html($('#reset-password-success-content').html());
                         $("a#reset-password-success-link").click(function () {
                             hidePopup();
                         });
                     }
-                },
+                }, function (jqXHR) {    // The error callback
-                // error callback
-                function (jqXHR) {
-                    console.log("error in reset-password API, status code: " + jqXHR.status);
                     var payload = JSON.parse(jqXHR.responseText);
                     $(errorMsg).text(payload.message);
                     $(errorMsgWrapper).removeClass("hidden");
@@ -253,7 +228,7 @@ $("#search-btn").click(function () {
  * when a user clicks on the list item
  * initial mode and with out select mode.
  */
-function initiateViewOption() {
+function InitiateViewOption() {
     if ($("#can-view").val()) {
         $(location).attr('href', $(this).data("url"));
     } else {
@@ -262,52 +237,45 @@ function initiateViewOption() {
     }
 }
 
-function loadUsers() {
+function loadUsers(searchParam) {
-    var loadingContentIcon = "#loading-content";
+
-    $(loadingContentIcon).show();
+
+    $("#loading-content").show();
+
 
     var dataFilter = function(data){
         data = JSON.parse(data);
 
         var objects = [];
 
-        $(data.users).each(
+        $(data.users).each(function( index ) {
-            function (index) {
+            objects.push({
-                objects.push(
+                filter: data.users[index].username,
-                    {
-                        username: data.users[index].username,
                 firstname: data.users[index].firstname ? data.users[index].firstname: '' ,
                 lastname: data.users[index].lastname ? data.users[index].lastname : '',
                 emailAddress : data.users[index].emailAddress ? data.users[index].emailAddress: '',
-                        DT_RowId : "user-" + data.users[index].username
+                DT_RowId : "role-" + data.users[index].username})
-                    }
+        });
-                )
-            }
-        );
 
-        var json = {
+        json = {
             "recordsTotal": data.count,
             "recordsFiltered": data.count,
             "data": objects
         };
 
         return JSON.stringify( json );
-    };
+    }
 
     var fnCreatedRow = function( nRow, aData, iDataIndex ) {
-        console.log(JSON.stringify(aData));
         $(nRow).attr('data-type', 'selectable');
         $(nRow).attr('data-username', aData["username"]);
-    };
+    }
 
     var columns = [
         {
             class: "remove-padding icon-only content-fill",
             data: null,
-            defaultContent:
+            defaultContent: '<div class="thumbnail icon"> <i class="square-element text fw fw-user" style="font-size: 30px;"></i> </div>'
-                '<div class="thumbnail icon">' +
-                    '<i class="square-element text fw fw-user" style="font-size: 30px;"></i>' +
-                '</div>'
         },
         {
             class: "fade-edge",
@@ -318,81 +286,123 @@ function loadUsers() {
         },
         {
             class: "fade-edge remove-padding-top",
-            data: null,
+            data: 'filter',
-            render: function (data, type, row, meta) {
+            render: function ( filter, type, row, meta ) {
-                return '<i class="fw-user"></i> ' + data.username;
+                return '<i class="fw-user"></i> ' + filter;
             }
         },
         {
             class: "fade-edge remove-padding-top",
             data: null,
             render: function ( data, type, row, meta ) {
-                return '<a href="mailto:' + data.emailAddress + ' " class="wr-list-email"><i class="fw-mail"></i> ' +
+                return '<a href="mailto:' + data.emailAddress + ' " class="wr-list-email"> <i class="fw-mail"></i> ' + data.emailAddress + ' </a>';
-                    data.emailAddress + ' </a>';
             }
         },
         {
             class: "text-right content-fill text-left-on-grid-view no-wrap",
             data: null,
             render: function ( data, type, row, meta ) {
-                return '<a href="/emm/users/edit-user?username=' + data.username + '" ' +
+                return '<a href="/emm/users/edit-user?username=' + data.username + '" data-username="' + data.username +
-                            'data-username="' + data.username + '" ' +
+                    '" data-click-event="edit-form" class="btn padding-reduce-on-grid-view edit-user-link"> ' +
-                            'data-click-event="edit-form" ' +
+                    '<span class="fw-stack"> <i class="fw fw-ring fw-stack-2x"></i> <i class="fw fw-edit fw-stack-1x"></i>' +
-                            'class="btn padding-reduce-on-grid-view edit-user-link">' +
+                    ' </span> <span class="hidden-xs hidden-on-grid-view">Edit</span> </a>' +
-                                '<span class="fw-stack">' +
+
-                                    '<i class="fw fw-ring fw-stack-2x"></i>' +
+                    '<a href="#" data-username="' + data.username + '" data-userid=' + data.username +
-                                    '<i class="fw fw-edit fw-stack-1x"></i>' +
+                    ' data-click-event="remove-form" onclick="javascript:removeUser(\'' + data.username + '\', \'' +
-                                '</span>' +
+                    data.username + '\')" class="btn padding-reduce-on-grid-view remove-user-link">' +
-                                '<span class="hidden-xs hidden-on-grid-view">&nbsp;&nbsp;Edit</span>' +
+                    '<span class="fw-stack"> <i class="fw fw-ring fw-stack-2x"></i> <i class="fw fw-delete fw-stack-1x">' +
-                        '</a>' +
+                    '</i> </span> <span class="hidden-xs hidden-on-grid-view">Remove</span> </a>' +
-                        '<a href="#" ' +
+
-                            'data-username="' + data.username + '" ' +
+                    '<a href="#" data-username="' + data.username + '" data-userid="' + data.username +
-                            'data-user-id="' + data.username + '" ' +
+                    '" data-click-event="edit-form" onclick="javascript:resetPassword(\'' + data.username +
-                            'data-click-event="edit-form" ' +
+                    '\')" class="btn padding-reduce-on-grid-view remove-user-link"> <span class="fw-stack"> <i class="fw fw-ring fw-stack-2x">' +
-                            'onclick="javascript:resetPassword(\'' + data.username + '\')" ' +
+                    '</i> <i class="fw fw-key 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"><' +
-                            'class="btn padding-reduce-on-grid-view remove-user-link">' +
+                    '/i> <i class="fw fw-circle fw-stack-2x"></i> <i class="fw fw-refresh fw-stack-1x fw-inverse">' +
-                                '<span class="fw-stack">' +
+                    '</i> </span> </span> <span class="hidden-xs hidden-on-grid-view">Reset</span> </a>'
-                                    '<i class="fw fw-ring fw-stack-2x"></i>' +
-                                    '<i class="fw fw-key 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-refresh fw-stack-1x fw-inverse"></i> ' +
-                                    '</span>' +
-                                '</span>' +
-                                '<span class="hidden-xs hidden-on-grid-view">&nbsp;&nbsp;Reset Password</span>' +
-                        '</a>' +
-                        '<a href="#" ' +
-                            'data-username="' + data.username + '" ' +
-                            'data-user-id=' + data.username + ' ' +
-                            'data-click-event="remove-form" ' +
-                            'onclick="javascript:removeUser(\'' + data.username + '\', \'' + data.username + '\')" ' +
-                            'class="btn padding-reduce-on-grid-view remove-user-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">&nbsp;&nbsp;Remove</span> ' +
-                        '</a>'
             }
         }
 
     ];
 
-    $("#user-grid").datatables_extended_serverside_paging(
+
-        null, '/api/device-mgt/v1.0/users', dataFilter, columns, fnCreatedRow, null
+    var options = {
-    );
+        "placeholder": "Search By Username",
+        "searchKey" : "filter"
+    };
+
+
+    $('#user-grid').datatables_extended_serverside_paging(null, '/api/device-mgt/v1.0/users', dataFilter, columns, fnCreatedRow, null, options);
 
     $("#loading-content").hide();
+
+
+
+    // $("#loading-content").show();
+    // var userListing = $("#user-listing");
+    // var userListingSrc = userListing.attr("src");
+    // $.template("user-listing", userListingSrc, function (template) {
+    //     var serviceURL = apiBasePath + "/users";
+    //     if (searchParam) {
+    //         serviceURL = serviceURL + "?filter=" + searchParam;
+    //     }
+    //     var successCallback = function (data) {
+    //         if (!data) {
+    //             $('#ast-container').addClass('hidden');
+    //             $('#user-listing-status-msg').text('No users are available to be displayed.');
+    //             return;
+    //         }
+    //         var canRemove = $("#can-remove").val();
+    //         var canEdit = $("#can-edit").val();
+    //         var canResetPassword = $("#can-reset-password").val();
+    //         data = JSON.parse(data);
+    //         var viewModel = {};
+    //         viewModel.users = data.users;
+    //         for (var i = 0; i < viewModel.users.length; i++) {
+    //             viewModel.users[i].userid = viewModel.users[i].username.replace(/[^\w\s]/gi, '');
+    //             if (canRemove) {
+    //                 viewModel.users[i].canRemove = true;
+    //             }
+    //             if (canEdit) {
+    //                 viewModel.users[i].canEdit = true;
+    //             }
+    //             if (canResetPassword) {
+    //                 viewModel.users[i].canResetPassword = true;
+    //             }
+    //             viewModel.users[i].adminUser = $("#user-table").data("user");
+    //         }
+    //         if (data.count > 0) {
+    //             $('#ast-container').removeClass('hidden');
+    //             $('#user-listing-status-msg').text("");
+    //             var content = template(viewModel);
+    //             $("#ast-container").html(content);
+    //         } else {
+    //             $('#ast-container').addClass('hidden');
+    //             $('#user-listing-status-msg').text('No users are available to be displayed.');
+    //         }
+    //         $("#loading-content").hide();
+    //         if (isInit) {
+    //             $('#user-grid').datatables_extended();
+    //             isInit = false;
+    //         }
+    //         $(".icon .text").res_text(0.2);
+    //     };
+    //     invokerUtil.get(serviceURL,
+    //                     successCallback,
+    //                     function (message) {
+    //                         $('#ast-container').addClass('hidden');
+    //                         $('#user-listing-status-msg').
+    //                             text('Invalid search query. Try again with a valid search query');
+    //                     }
+    //     );
+    // });
 }
 
 $(document).ready(function () {
     loadUsers();
 
     $(".viewEnabledIcon").click(function () {
-        initiateViewOption();
+        InitiateViewOption();
     });
-
     if (!$("#can-invite").val()) {
         $("#invite-user-button").remove();
     }

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

@@ -81,31 +81,58 @@
     </div>
 
     <div id="user-table" data-user={{adminUser}}>
-        <table class="table table-striped table-hover list-table display responsive nowrap data-table grid-view"
+        <!--<table class="table table-striped table-hover list-table display responsive nowrap data-table grid-view"-->
-               id="user-grid">
+        <!--id="user-grid">-->
+        <!--<thead>-->
+        <!--<tr class="sort-row">-->
+        <!--<th class="no-sort"></th>-->
+        <!--<th class="no-sort"></th>-->
+        <!--<th>By Username</th>-->
+        <!--<th class="no-sort"></th>-->
+        <!--<th class="no-sort"></th>-->
+        <!--</tr>-->
+        <!--<tr class="filter-row filter-box">-->
+        <!--<th colspan="4">-->
+        <!--<label class="wr-input-label" for="search-by-username">-->
+        <!--By Username-->
+        <!--</label>-->
+        <!--<input id="search-by-username" type="text" class="form-control"-->
+        <!--placeholder="Search By Username">-->
+        <!--</th>-->
+        <!--<th style="vertical-align:bottom;">-->
+        <!--<button id="search-btn" class="wr-btn">-->
+        <!--Search-->
+        <!--</button>-->
+        <!--</th>-->
+        <!--</tr>-->
+        <!--<tr class="bulk-action-row" id="invite-user-button">-->
+        <!--<th colspan="5">-->
+        <!--<ul class="tiles">-->
+        <!--<li class="square">-->
+        <!--<a href="#" data-click-event="remove-form" class="btn square-element invite-user-link"-->
+        <!--data-toggle="modal" data-target="#modalDemo">-->
+        <!--<span class="icon fw-stack">-->
+        <!--<i class="fw fw-ring fw-stack-2x"></i>-->
+        <!--<i class="fw fw-invitation fw-stack-1x"></i>-->
+        <!--</span>-->
+        <!--Invite Selected-->
+        <!--</a>-->
+        <!--</li>-->
+        <!--</ul>-->
+        <!--</th>-->
+        <!--</tr>-->
+        <!--</thead>-->
+        <!--<tbody id="ast-container">-->
+
+        <!--<br class="c-both"/>-->
+        <!--</tbody>-->
+        <!--</table>-->
+        <table class="table table-striped table-hover list-table display responsive nowrap data-table grid-view" id="user-grid">
             <thead>
             <tr class="sort-row">
-                <th class="no-sort"></th>
-                <th class="no-sort"></th>
                 <th>By Username</th>
-                <th class="no-sort"></th>
-                <th class="no-sort"></th>
-            </tr>
-            <tr class="filter-row filter-box">
-                <th colspan="4">
-                    <label class="wr-input-label" for="search-by-username">
-                        By Username
-                    </label>
-                    <input id="search-by-username" type="text" class="form-control"
-                           placeholder="Search By Username">
-                </th>
-                <th style="vertical-align:bottom;">
-                    <button id="search-btn" class="wr-btn">
-                        Search
-                    </button>
-                </th>
             </tr>
-            <tr class="bulk-action-row" id="invite-user-button">
+            <tr class="bulk-action-row">
                 <th colspan="5">
                     <ul class="tiles">
                         <li class="square">

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

@@ -28,7 +28,7 @@ function onRequest(context) {
     });
 
     var page = {};
-    var userModule = require("/app/modules/user.js")["userModule"];
+    var userModule = require("/app/modules/business-controllers/user.js")["userModule"];
     var deviceMgtProps = require("/app/modules/conf-reader/main.js")["conf"];
 
     page["adminUser"] = deviceMgtProps["adminUser"];

components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.data-tables-extended/public/js/dataTables.extended.serversidepaging.js

@@ -30,32 +30,40 @@
  */
 
 $.fn.datatables_extended_serverside_paging = function (settings , url, dataFilter,
-                                                        columns, fnCreatedRow, fnDrawCallback) {
+                                                       columns, fnCreatedRow, fnDrawCallback, options) {
     var elem = $(this);
 
     // EMM related function
-    if (initiateViewOption) {
+    if (InitiateViewOption) {
-        $(".viewEnabledIcon").bind("click", initiateViewOption);
+        $(".viewEnabledIcon").bind("click", InitiateViewOption);
     }
     //--- End of EMM related codes
 
     $(elem).DataTable(
         $.extend({},{
             serverSide: true,
+            processing: false,
+            searching: true,
+            ordering:  false,
+            filter: false,
             bSortCellsTop: true,
             ajax : {
                 url: "/emm/api/data-tables/invoker",
                 data : function (params) {
-                    var filter = "";
                     var i;
+                    var searchParams = {};
                     for (i = 0; i < params.columns.length; i++) {
-                        // console.log(i);
+                        searchParams[params.columns[i].data] = encodeURIComponent(params.columns[i].search.value);
-                        filter += "&" + params.columns[i].data + "=" + params.columns[i].search.value;
                     }
-                    // console.log(filter);
+                    if(options) {
+                        searchParams[options.searchKey] = encodeURIComponent(params.search.value);
+                    }
+                    params.filter = JSON.stringify(searchParams);
                     params.offset = params.start;
                     params.limit = params.length;
-                    params.filter = filter;
+                    // if(params.search.value){
+                    //     params.filter = params.search.value;
+                    // }
                     params.url = url;
                 },
                 dataFilter: dataFilter
@@ -72,7 +80,7 @@
             'lip' +
             '>',
             language: {
-                searchPlaceholder: 'Search by Role name',
+                searchPlaceholder: options.placeholder,
                 search: ''
             },
             fnCreatedRow: fnCreatedRow,
@@ -216,7 +224,7 @@
                         $(button).addClass("active").html('Select');
                         $(button).parent().next().children().addClass("disabled");
                         // EMM related function
-                        $(".viewEnabledIcon").bind("click", initiateViewOption);
+                        $(".viewEnabledIcon").bind("click", InitiateViewOption);
                         //--- End of EMM related codes
                     }
                 });