Refactoring user-listing page

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

@@ -1,21 +1,23 @@
 /*
- * Copyright (c) 2016, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ * Copyright (c) 2015, 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
  * in compliance with the License.
  * You may obtain a copy of the License at
  *
- * http://www.apache.org/licenses/LICENSE-2.0
+ *      http://www.apache.org/licenses/LICENSE-2.0
  *
  * 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
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
- * KIND, either express or implied. See the License for the
+ * 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.
  *
@@ -35,10 +37,10 @@ function inputIsValid(regExp, inputString) {
 $(function () {
     var sortableElem = '.wr-sortable';
     $(sortableElem).sortable({
-                                 beforeStop: function () {
+        beforeStop: function () {
-                                     var sortedIDs = $(this).sortable('toArray');
+            $(this).sortable('toArray');
-                                 }
+        }
-                             });
+    });
     $(sortableElem).disableSelection();
 });
 
@@ -46,11 +48,9 @@ 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);
 
-var resetPasswordServiceURL = "/devicemgt_admin/users/reset-password";
-
 /*
  * set popup maximum height function.
  */
@@ -80,11 +80,9 @@ function hidePopup() {
  */
 function getSelectedUsernames() {
     var usernameList = [];
-    var userList = $("#user-grid").find('> tbody > tr');
+    var userList = $("#user-grid").find('tr.DTTT_selected');
     userList.each(function () {
-        if ($(this).hasClass('DTTT_selected')) {
+        usernameList.push($(this).data('username'));
-            usernameList.push($(this).attr('data-username'));
-        }
     });
     return usernameList;
 }
@@ -96,7 +94,7 @@ function getSelectedUsernames() {
  */
 $("a.invite-user-link").click(function () {
     var usernameList = getSelectedUsernames();
-    var inviteUserAPI = "/devicemgt_admin/users/email-invitation";
+    var inviteUserAPI = deviceMgtAPIsBasePath + "/users/send-invitation";
 
     if (usernameList.length == 0) {
         $(modalPopupContent).html($("#errorUsers").html());
@@ -108,20 +106,25 @@ $("a.invite-user-link").click(function () {
 
     $("a#invite-user-yes-link").click(function () {
         invokerUtil.post(
-                inviteUserAPI,
+            inviteUserAPI,
-                usernameList,
+            usernameList,
-                function () {
+            // The success callback
+            function (data, textStatus, jqXHR) {
+                if (jqXHR.status == 200) {
                     $(modalPopupContent).html($('#invite-user-success-content').html());
                     $("a#invite-user-success-link").click(function () {
                         hidePopup();
                     });
-                },
-                function () {
-                    $(modalPopupContent).html($('#invite-user-error-content').html());
-                    $("a#invite-user-error-link").click(function () {
-                        hidePopup();
-                    });
                 }
+            },
+            // The error callback
+            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();
+                });
+            }
         );
     });
 
@@ -137,16 +140,17 @@ $("a.invite-user-link").click(function () {
  */
 function removeUser(uname, uid) {
     var username = uname;
-    var userid = uid;
+    var userId = uid;
-    var removeUserAPI = "/devicemgt_admin/users?username=" + username;
+    var removeUserAPI = deviceMgtAPIsBasePath + "/users/" + username;
     $(modalPopupContent).html($('#remove-user-modal-content').html());
     showPopup();
 
     $("a#remove-user-yes-link").click(function () {
         invokerUtil.delete(
-                removeUserAPI,
+            removeUserAPI,
-                function () {
+            function (data, textStatus, jqXHR) {
-                    $("#" + userid).remove();
+                if (jqXHR.status == 200) {
+                    $("#" + userId).remove();
                     // get new user-list-count
                     var newUserListCount = $(".user-list > span").length;
                     // update user-listing-status-msg with new user-count
@@ -156,13 +160,16 @@ function removeUser(uname, uid) {
                     $("a#remove-user-success-link").click(function () {
                         hidePopup();
                     });
-                },
-                function () {
-                    $(modalPopupContent).html($('#remove-user-error-content').html());
-                    $("a#remove-user-error-link").click(function () {
-                        hidePopup();
-                    });
                 }
+            },
+            // The error callback
+            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();
+                });
+            }
         );
     });
 
@@ -202,29 +209,30 @@ function resetPassword(uname) {
             $(errorMsgWrapper).removeClass("hidden");
         } else {
             var resetPasswordFormData = {};
-            resetPasswordFormData.username = user;
+            //resetPasswordFormData.username = user;
-            resetPasswordFormData.newPassword = window.btoa(unescape(encodeURIComponent(confirmedPassword)));
+            resetPasswordFormData.newPassword = unescape(confirmedPassword);
+
+            var resetPasswordServiceURL = deviceMgtAPIsBasePath + "/admin/users/"+ user +"/credentials";
 
             invokerUtil.post(
-                    resetPasswordServiceURL,
+                resetPasswordServiceURL,
-                    resetPasswordFormData,
+                resetPasswordFormData,
-                    function (data) {   // The success callback
+                // The success callback
-                        data = JSON.parse(data);
+                function (data, textStatus, jqXHR) {
-                        if (data.statusCode == 201) {
+                    if (jqXHR.status == 200) {
-                            $(modalPopupContent).html($('#reset-password-success-content').html());
+                        $(modalPopupContent).html($('#reset-password-success-content').html());
-                            $("a#reset-password-success-link").click(function () {
+                        $("a#reset-password-success-link").click(function () {
-                                hidePopup();
+                            hidePopup();
-                            });
+                        });
-                        }
-                    }, function (data) {    // The error callback
-                        if (data.statusCode == 400) {
-                            $(errorMsg).text("Old password does not match with the provided value.");
-                            $(errorMsgWrapper).removeClass("hidden");
-                        } else {
-                            $(errorMsg).text("An unexpected error occurred. Please try again later.");
-                            $(errorMsgWrapper).removeClass("hidden");
-                        }
                     }
+                },
+                // The 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");
+                }
             );
         }
     });
@@ -250,7 +258,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 {
@@ -259,74 +267,112 @@ function InitiateViewOption() {
     }
 }
 
-function loadUsers(searchParam) {
+function loadUsers() {
-    $("#loading-content").show();
+    var loadingContentIcon = "#loading-content";
-    var userListing = $("#user-listing");
+    $(loadingContentIcon).show();
-    var userListingSrc = userListing.attr("src");
+
-    $.template("user-listing", userListingSrc, function (template) {
+    var dataFilter = function (data) {
-        var serviceURL = "/devicemgt_admin/users";
+        data = JSON.parse(data);
-        if (searchParam) {
+
-            serviceURL = serviceURL + "/view-users?username=" + searchParam;
+        var objects = [];
-        }
+
-        var successCallback = function (data) {
+        $(data.users).each(function (index) {
-            if (!data) {
+            objects.push({
-                $('#ast-container').addClass('hidden');
+                username: data.users[index].username,
-                $('#user-listing-status-msg').text('No users are available to be displayed.');
+                firstname: data.users[index].firstname ? data.users[index].firstname: '' ,
-                return;
+                lastname: data.users[index].lastname ? data.users[index].lastname : '',
-            }
+                emailAddress : data.users[index].emailAddress ? data.users[index].emailAddress: '',
-            var canRemove = $("#can-remove").val();
+                DT_RowId : "role-" + data.users[index].username})
-            var canEdit = $("#can-edit").val();
+        });
-            var canResetPassword = $("#can-reset-password").val();
+
-            data = JSON.parse(data);
+        var json = {
-            data = data.responseContent;
+            "recordsTotal": data.count,
-            var viewModel = {};
+            "recordsFiltered": data.count,
-            viewModel.users = data;
+            "data": objects
-            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.length > 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,
+        return JSON.stringify(json);
-                        function (message) {
+    };
-                            $('#ast-container').addClass('hidden');
+
-                            $('#user-listing-status-msg').text('Invalid search query. Try again with a valid search query');
+    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:
+                '<div class="thumbnail icon">' +
+                    '<i class="square-element text fw fw-user" style="font-size: 30px;"></i>' +
+                '</div>'
+        },
+        {
+            class: "fade-edge",
+            data: null,
+            render: function (data, type, row, meta) {
+                return '<h4>' + data.firstname + ' ' + data.lastname + '</h4>';
+            }
+        },
+        {
+            class: "fade-edge remove-padding-top",
+            data: null,
+            render: function (data, type, row, meta) {
+                return '<i class="fw-user"></i> ' + data.username;
+            }
+        },
+        {
+            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> ' +
+                    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 + '" data-username="' + data.username +
+                    '" data-click-event="edit-form" class="btn padding-reduce-on-grid-view edit-user-link"> ' +
+                    '<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>' +
+
+                    '<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">Remove</span> </a>' +
+
+                    '<a href="#" data-username="' + data.username + '" data-user-id="' + data.username +
+                    '" data-click-event="edit-form" onclick="javascript:resetPassword(\'' + 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-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">Reset</span> </a>'
+            }
+        }
+
+    ];
+
+    $('#user-grid').datatables_extended_serverside_paging(null, '/api/device-mgt/v1.0/users', dataFilter, columns, fnCreatedRow, null);
+
+    $("#loading-content").hide();
 }
 
 $(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/public/templates/listing.hbs

@@ -52,6 +52,11 @@
                                 <span class="fw-stack">
                                        <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">Reset</span>
                     </a>

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

@@ -298,15 +298,13 @@
                         Enter new password
                         <br><br>
                         <div>
-                            <input type="password" class="form-control modal-input operationDataKeys" id="new-password"
+                            <input type="password" class="form-control modal-input operationDataKeys" id="new-password" data-key="message"/>
-                                   data-key="message"/>
                         </div>
                         <br>
                         Retype new password
                         <br><br>
                         <div>
-                            <input type="password" class="form-control modal-input operationDataKeys"
+                            <input type="password" class="form-control modal-input operationDataKeys" id="confirmed-password" data-key="message"/>
-                                   id="confirmed-password" data-key="message"/>
                         </div>
                         <br>
                     </h4>
@@ -338,6 +336,7 @@
             </div>
         </div>
     </div>
+
 {{/zone}}
 {{#zone "common-navigation"}}
     <!--Later add the navigation menu from here-->

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

@@ -26,13 +26,13 @@ function onRequest(context) {
             return options.fn(this);
         }
     });
+
     var page = {};
     var userModule = require("/app/modules/user.js")["userModule"];
     var deviceMgtProps = require("/app/conf/devicemgt-props.js").config();
+
+    page["adminUser"] = deviceMgtProps["adminUser"];
     page["permissions"] = userModule.getUIPermissions();
-    if (userModule.isAuthorized("/permission/admin/device-mgt/users/delete")) {
-        page["removePermitted"] = true;
-    }
 
     if (userModule.isAuthorized("/permission/admin/device-mgt/users/remove")) {
         page["removePermitted"] = true;
@@ -51,6 +51,5 @@ function onRequest(context) {
         page["resetPasswordPermitted"] = true;
     }
 
-    page["adminUser"] = deviceMgtProps.adminUser;
     return page;
 }