From da6ff6e7fa0c2f8f9cf2372083f0c4aaaee18991 Mon Sep 17 00:00:00 2001 From: dilanua Date: Thu, 21 Jul 2016 18:04:51 +0530 Subject: [PATCH] Refactoring user-listing page --- .../cdmf.page.users/public/js/listing.js | 274 ++++++++++-------- .../public/templates/listing.hbs | 5 + .../app/pages/cdmf.page.users/users.hbs | 7 +- .../app/pages/cdmf.page.users/users.js | 7 +- 4 files changed, 171 insertions(+), 122 deletions(-) diff --git a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/cdmf.page.users/public/js/listing.js b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/cdmf.page.users/public/js/listing.js index 6c29b73a401..2ef13959c3a 100644 --- a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/cdmf.page.users/public/js/listing.js +++ b/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 - * KIND, either express or implied. See the License for the + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY 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. * @@ -35,10 +37,10 @@ function inputIsValid(regExp, inputString) { $(function () { var sortableElem = '.wr-sortable'; $(sortableElem).sortable({ - beforeStop: function () { - var sortedIDs = $(this).sortable('toArray'); - } - }); + beforeStop: function () { + $(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).attr('data-username')); - } + usernameList.push($(this).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, - usernameList, - function () { + inviteUserAPI, + usernameList, + // 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 removeUserAPI = "/devicemgt_admin/users?username=" + username; + var userId = uid; + var removeUserAPI = deviceMgtAPIsBasePath + "/users/" + username; $(modalPopupContent).html($('#remove-user-modal-content').html()); showPopup(); $("a#remove-user-yes-link").click(function () { invokerUtil.delete( - removeUserAPI, - function () { - $("#" + userid).remove(); + removeUserAPI, + function (data, textStatus, jqXHR) { + 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.newPassword = window.btoa(unescape(encodeURIComponent(confirmedPassword))); + //resetPasswordFormData.username = user; + resetPasswordFormData.newPassword = unescape(confirmedPassword); + + var resetPasswordServiceURL = deviceMgtAPIsBasePath + "/admin/users/"+ user +"/credentials"; invokerUtil.post( - resetPasswordServiceURL, - resetPasswordFormData, - function (data) { // The success callback - data = JSON.parse(data); - if (data.statusCode == 201) { - $(modalPopupContent).html($('#reset-password-success-content').html()); - $("a#reset-password-success-link").click(function () { - 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"); - } + resetPasswordServiceURL, + resetPasswordFormData, + // 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(); + }); } + }, + // 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) { - $("#loading-content").show(); - var userListing = $("#user-listing"); - var userListingSrc = userListing.attr("src"); - $.template("user-listing", userListingSrc, function (template) { - var serviceURL = "/devicemgt_admin/users"; - if (searchParam) { - serviceURL = serviceURL + "/view-users?username=" + searchParam; - } - var successCallback = function (data) { - if (!data) { - $('#ast-container').addClass('hidden'); - $('#user-listing-status-msg').text('No users are available to be displayed.'); - return; +function loadUsers() { + var loadingContentIcon = "#loading-content"; + $(loadingContentIcon).show(); + + var dataFilter = function (data) { + data = JSON.parse(data); + + var objects = []; + + $(data.users).each(function (index) { + objects.push({ + 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 : "role-" + data.users[index].username}) + }); + + var 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: + '
' + + '' + + '
' + }, + { + class: "fade-edge", + data: null, + render: function (data, type, row, meta) { + return '

' + data.firstname + ' ' + data.lastname + '

'; } - var canRemove = $("#can-remove").val(); - var canEdit = $("#can-edit").val(); - var canResetPassword = $("#can-reset-password").val(); - data = JSON.parse(data); - data = data.responseContent; - var viewModel = {}; - viewModel.users = data; - 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"); + }, + { + class: "fade-edge remove-padding-top", + data: null, + render: function (data, type, row, meta) { + return ' ' + data.username; } - 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.'); + }, + { + class: "fade-edge remove-padding-top", + data: null, + render: function (data, type, row, meta) { + return ' ' + + data.emailAddress + ' '; } - $("#loading-content").hide(); - if (isInit) { - $('#user-grid').datatables_extended(); - isInit = false; + }, + { + class: "text-right content-fill text-left-on-grid-view no-wrap", + data: null, + render: function (data, type, row, meta) { + return ' ' + + '' + + '' + + ' ' + + + '' + + ' ' + + ' ' + + + ' ' + + '' + + ' ' + + '<' + + '/i> ' + + ' ' } - $(".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'); - } - ); - }); + } + + ]; + + $('#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(); } -}); \ No newline at end of file +}); diff --git a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/cdmf.page.users/public/templates/listing.hbs b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/cdmf.page.users/public/templates/listing.hbs index 6414e6de93f..db67d769730 100644 --- a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/cdmf.page.users/public/templates/listing.hbs +++ b/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 @@ + + + + + diff --git a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/cdmf.page.users/users.hbs b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/cdmf.page.users/users.hbs index 493f395a702..d54c3a1d558 100644 --- a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/cdmf.page.users/users.hbs +++ b/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

- +

Retype new password

- +

@@ -338,6 +336,7 @@ + {{/zone}} {{#zone "common-navigation"}} diff --git a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/cdmf.page.users/users.js b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/cdmf.page.users/users.js index 74f3d583fc2..d0085bd39df 100644 --- a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/cdmf.page.users/users.js +++ b/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; } \ No newline at end of file