Refactoring group sharing modal

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

@@ -115,67 +115,37 @@
                         </div>
                         <div id="user-names">
                             <h4>
-                                Enter user name to manage group sharing
+                                Select user roles to manage group sharing
                                 <br><br>
-                                <input type="text" id="share-user-selector" class="form-control modal-input operationDataKeys">
+                                <div style="max-height: 200px; overflow: scroll">
-                                </input>
+                                    <br />
-                            </h4>
+                                    {{#each userRoles}}
-                        </div>
+                                        <div class="wr-input-control">
-                    </div>
+                                            <label class="wr-input-control checkbox">
-                    <div class="modal-footer">
+                                                <input class="roleCheckBoxes" type="checkbox"
-                        <div class="buttons">
+                                                       data-role-name="{{this}}" />
-                            <a href="#" id="share-group-next-link" class="btn-operations">
+                                            <span class="helper"
-                                Next
+                                                  title="{{this}}">{{this}}</span>
-                            </a>
+                                            </label>
-
-                            <a href="#" id="share-group-w1-cancel-link" class="btn-operations btn-default">
-                                Cancel
-                            </a>
-                        </div>
-                    </div>
-                </div>
-
-                <div id="share-group-w2-modal-content" class="hide">
-                    <div class="modal-header">
-                        <h3 class="pull-left modal-title">
-                            <span>
-                                <span class="fw-stack">
-                                    <i class="fw fw-ring fw-stack-2x"></i>
-                                    <i class="fw fw-share fw-stack-1x"></i>
-                                </span> Group Sharing
-                            </span>
-                        </h3>
-                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i
-                                class="fw fw-cancel"></i></button>
                                         </div>
-                    <div class="modal-body add-margin-top-2x add-margin-bottom-2x">
+                                    {{/each}}
-                        <div id="notification-error-msg" class="alert alert-danger hidden" role="alert">
-                            <i class="icon fw fw-error"></i><span></span>
                                 </div>
-                        <div id="user-roles">
-                            <h4>
-                                Select sharing roles
-                                <br><br>
                             </h4>
                         </div>
-                        {{#if permissions.CREATE_GROUP_ROLES}}
-                            <div class="buttons">
-                                <a href="#" id="share-group-w2-add-new-role-link" class="btn-operations">
-                                    <span class="fw-stack"><i class="fw fw-ring fw-stack-2x"></i><i class="fw fw-add fw-stack-1x"></i></span> Add New Role
-                                </a>
-                            </div>
-                        {{/if}}
                     </div>
                     <div class="modal-footer">
                         <div class="buttons">
-                            <a href="#" id="share-group-yes-link" class="btn-operations">
+                            {{#if permissions.CREATE_GROUP_ROLES}}
-                                OK
+                                <a href="{{@app.context}}/role/add" class="btn-operations">
+                                    New Role
                                 </a>
-
+                                <a href="#" id="share-group-new-role-from-selection" class="btn-operations">
-                            <a href="#" id="share-group-w2-cancel-link" class="btn-operations btn-default">
+                                    New Role from Selection
-                                Cancel
+                                </a>
+                            {{/if}}
+                            <a href="#" id="share-group-next-link" class="btn-operations">
+                                Next
                             </a>
-
                         </div>
                     </div>
                 </div>
@@ -201,25 +171,10 @@
                             <h4>
                                 Enter Group Sharing Role Name
                                 <br><br>
-                                <input type="text" id="group-sharing-role-name" class="form-control modal-input operationDataKeys"/>
+                                <input type="text" id="group-sharing-role-name"
-                                <br><br>
+                                       class="form-control modal-input operationDataKeys" />
-                                Role Permissions
                                 <br><br>
                             </h4>
-                            <table class="table">
-                                <tbody id="permission-table-container">
-                                {{#each groupPermissions}}
-                                    <tr>
-                                        <td>{{this}}</td>
-                                        <td>
-                                            <a href="#" class="btn-operations btn-default" onclick="togglePermissionAction(this)" data-value="unchecked">
-                                                <span class="fw-stack"><i class="fw fw-ring fw-stack-2x"></i><i class="fw fw-add fw-stack-1x"></i></span>
-                                            </a>
-                                        </td>
-                                    </tr>
-                                {{/each}}
-                                </tbody>
-                            </table>
                         </div>
                     </div>
                     <div class="modal-footer">
@@ -239,7 +194,43 @@
                     <div class="content">
                         <div class="row">
                             <div class="col-lg-5 col-md-6 col-centered">
-                                <h3>Group sharing updated successfully.</h3>
+                                <h3>Group was successfully updated.</h3>
+                                <br />
+                                Do you need to Add / Remove users to the chosen roles?
+                                <div class="buttons">
+                                    <a href="{{@app.context}}/users" id="share-group-add-users-yes-link"
+                                       class="btn-operations">
+                                        Yes
+                                    </a>
+
+                                    <a href="#" class="btn-operations btn-default" data-dismiss="modal">
+                                        No
+                                    </a>
+                                </div>
+                                <br />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div id="create-combined-role-200-content" class="hide">
+                    <div class="content">
+                        <div class="row">
+                            <div class="col-lg-5 col-md-6 col-centered">
+                                <h3>New Role was successfully created.</h3>
+                                <br />
+                                Do you need to Add / Remove users to the chosen roles?
+                                <div class="buttons">
+                                    <a href="{{@app.context}}/users" id="share-group-add-users-yes-link"
+                                       class="btn-operations">
+                                        Yes
+                                    </a>
+
+                                    <a href="#" class="btn-operations btn-default" data-dismiss="modal">
+                                        No
+                                    </a>
+                                </div>
+                                <br />
                             </div>
                         </div>
                     </div>
@@ -256,7 +247,8 @@
                                         Yes
                                     </a>
 
-                                    <a href="#" id="remove-group-cancel-link" class="btn-operations btn-default">
+                                    <a href="#" id="remove-group-cancel-link" class="btn-operations btn-default"
+                                       data-dismiss="modal">
                                         Cancel
                                     </a>
                                 </div>

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

@@ -23,6 +23,10 @@ function onRequest(context) {
     var groupPermissions = require("/app/pages/cdmf.page.groups/public/group-permissions.json");
     var currentUser = session.get(constants.USER_SESSION_KEY);
     var page = {};
+    var rolesResult = userModule.getRoles();
+    if (rolesResult.status == "success") {
+        page.userRoles = rolesResult.content;
+    }
     if (currentUser) {
         page.permissions = userModule.getUIPermissions();
         page.permissions.list = stringify(page.permissions);

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

@@ -155,33 +155,49 @@ function loadGroups() {
             render: function (id, type, row, meta) {
                 var html;
                 if ($.hasPermission("VIEW_GROUP_DEVICES")) {
-                    html = '<a href="devices?groupId=' + row.groupId + '&groupName=' + row.name + '" data-click-event="remove-form" class="btn padding-reduce-on-grid-view">' +
+                    html = '<a href="devices?groupId=' + row.groupId + '&groupName=' + row.name
-                        '<span class="fw-stack"><i class="fw fw-ring fw-stack-2x"></i><i class="fw fw-view 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-view fw-stack-1x"></i></span>'
+                           +
                            '<span class="hidden-xs hidden-on-grid-view">View Devices</span></a>';
 
-                    html += '<a href="group/' + row.name + '/' + row.groupId + '/analytics" data-click-event="remove-form" class="btn padding-reduce-on-grid-view">' +
+                    html += '<a href="group/' + row.name + '/' + row.groupId
-                        '<span class="fw-stack"><i class="fw fw-ring fw-stack-2x"></i><i class="fw fw-statistics fw-stack-1x"></i></span>' +
+                            + '/analytics" 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>';
                 } else {
                     html = '';
                 }
                 if ($.hasPermission("SHARE_GROUP")) {
-                    html += '<a href="#" data-click-event="remove-form" class="btn padding-reduce-on-grid-view share-group-link" data-group-id="' + row.groupId + '" ' +
+                    html +=
-                        '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>' +
+                        '<a href="#" data-click-event="remove-form" class="btn padding-reduce-on-grid-view share-group-link" data-group-id="'
+                        + row.groupId + '" ' +
+                        '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>';
                 } else {
                     html += '';
                 }
                 if ($.hasPermission("UPDATE_GROUP")) {
-                    html += '<a href="#" data-click-event="remove-form" class="btn padding-reduce-on-grid-view edit-group-link" data-group-name="' + row.name + '" ' +
+                    html +=
-                        'data-group-owner="' + row.owner + '" data-group-description="' + row.description + '" data-group-id="' + row.groupId + '"><span class="fw-stack"><i class="fw fw-ring fw-stack-2x"></i>' +
+                        '<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
+                        + '" data-group-id="' + row.groupId
+                        + '"><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>';
                 } else {
                     html += '';
                 }
                 if ($.hasPermission("REMOVE_GROUP")) {
-                    html += '<a href="#" data-click-event="remove-form" class="btn padding-reduce-on-grid-view remove-group-link" data-group-id="' + row.groupId + '" ' +
+                    html +=
-                        '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>' +
+                        '<a href="#" data-click-event="remove-form" class="btn padding-reduce-on-grid-view remove-group-link" data-group-id="'
+                        + row.groupId + '" ' +
+                        '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>';
                 } else {
                     html += '';
@@ -352,33 +368,37 @@ function attachEvents() {
     $("a.share-group-link").click(function () {
         var groupId = $(this).data("group-id");
         var groupOwner = $(this).data("group-owner");
+
         $(modalPopupContent).html($('#share-group-w1-modal-content').html());
-        $("a#share-group-next-link").show();
         showPopup();
-        $("a#share-group-next-link").click(function () {
+
-            var successCallback = function (data) {
+        markAlreadySavedUsersRoles(groupId);
-                if(data === 'true') {
+        var shareGroupNextLink = $("a#share-group-next-link");
-                    getAllRoles(groupId, selectedUser);
+        shareGroupNextLink.click(function () {
-                } else {
+            var roles = [];
-                    var errorMsgWrapper = "#notification-error-msg";
+            $('.modal .roleCheckBoxes').each(
-                    var errorMsg = "#notification-error-msg span";
+                function () {
-                    $(errorMsg).text("User does not exist.");
+                    if ($(this).is(':checked')) {
-                    $(errorMsgWrapper).removeClass("hidden");
+                        roles.push($(this).data('role-name'));
                     }
                 }
-            var selectedUser = $('#share-user-selector').val();
+            );
-            if (selectedUser == $("#group-listing").data("current-user")) {
+            updateGroupShare(groupId, roles);
-                $("#user-names").html("Please specify a user other than current user.");
-                $("a#share-group-next-link").hide();
-            } else {
-                invokerUtil.get("/api/device-mgt/v1.0/users/checkUser?username=" + selectedUser,
-                    successCallback, function (message) {
-                        displayErrors(message);
         });
+
+        var shareGroupNewRoleFromSelectionLink = $("a#share-group-new-role-from-selection");
+        shareGroupNewRoleFromSelectionLink.click(function () {
+            var roles = [];
+            $('.modal .roleCheckBoxes').each(
+                function () {
+                    if ($(this).is(':checked')) {
+                        roles.push($(this).data('role-name'));
                     }
-        });
+                }
-        $("a#share-group-w1-cancel-link").click(function () {
+            );
-            hidePopup();
+            addNewRole(roles);
+            // $(modalPopupContent).html($('#share-group-w3-modal-content').html());
+            // createNewRole(roles);
         });
     });
 
@@ -464,115 +484,40 @@ function attachEvents() {
     });
 }
 
-function getAllRoles(groupId, selectedUser) {
+function markAlreadySavedUsersRoles(groupId) {
-    $(modalPopupContent).html($('#share-group-w2-modal-content').html());
-    $("a#share-group-yes-link").hide();
     var successCallback = function (data, textStatus, xhr) {
         data = JSON.parse(data);
         if (xhr.status == 200) {
             if (data.roles.length > 0) {
-                generateRoleMap(groupId, selectedUser, data.roles);
+                for (var i = 0; i < data.roles.length; i++) {
-            } else {
+                    $('.roleCheckBoxes').each(
-                $('#user-roles').html("There is no any roles for this group.");
+                        function () {
-            }
+                            if (data.roles[i] == $(this).data('role-name')) {
-        } else {
+                                $(this).attr('checked', true);
-            displayErrors(xhr);
-        }
-    };
-
-    invokerUtil.get("/api/device-mgt/v1.0/groups/id/" + groupId + "/roles",
-        successCallback, function (message) {
-                displayErrors(message);
-        });
-
-    $("a#share-group-w2-cancel-link").click(function () {
-        hidePopup();
-    });
-}
-
-function generateRoleMap(groupId, selectedUser, allRoles) {
-    var successCallback = function (data, textStatus, xhr) {
-        data = JSON.parse(data);
-        if (xhr.status == 200) {
-            var userRoles = [];
-            if(data != "EMPTY") {
-                userRoles = data.roles;
-            }
-            var str = $('#user-roles').html();
-
-            for (var i = 0; i < allRoles.length; i++) {
-                var isChecked = '';
-                for (var j = 0; j < userRoles.length; j++) {
-                    if (allRoles[i] == userRoles[j]) {
-                        isChecked = 'checked';
-                        break;
                             }
                         }
-                str += '<label class="wr-input-control checkbox"><input type="checkbox" class="form-control modal-input operationDataKeys" id="user-role-' + allRoles[i] + '" value="' + allRoles[i]
+                    );
-                       + '" ' + isChecked + '/>' +'<span class="helper" title="Check to share this group role with user."> &nbsp;&nbsp;&nbsp;'+ allRoles[i] + '</span></label><br><br>';
-            }
-
-            $('#user-roles').html(str);
-            $("a#share-group-yes-link").show();
-            $("a#share-group-yes-link").show();
-            $("a#share-group-yes-link").click(function () {
-                var roles = [];
-                for (var i = 0; i < allRoles.length; i++) {
-                    if ($('#user-role-' + allRoles[i]).is(':checked')) {
-                        roles.push(allRoles[i]);
                 }
+            } else {
+                return;
             }
-                updateGroupShare(groupId, selectedUser, roles);
-            });
-            $("a#share-group-w2-add-new-role-link").click(function () {
-                addNewRole(groupId, selectedUser, allRoles);
-            });
         } else {
             displayErrors(xhr);
         }
     };
 
-    invokerUtil.get("/api/device-mgt/v1.0/groups/id/" + groupId + "/roles?userName=" + selectedUser,
+    invokerUtil.get("/api/device-mgt/v1.0/groups/id/" + groupId + "/roles",
                     successCallback, function (message) {
             displayErrors(message);
         });
-
-    $("a#share-group-w2-cancel-link").click(function () {
-        hidePopup();
-    });
 }
 
-function addNewRole(groupId, selectedUser, allRoles) {
+function addNewRole(roles) {
     $(modalPopupContent).html($('#share-group-w3-modal-content').html());
-    function getPermissions() {
-        var PERMISSION_PREFIX = '/permission/admin/';
-        var permissions = [];
-        $('#permission-table-container').find('tr').each(function () {
-            var row = $(this).closest('tr');
-            var permission = $(row).find('td:nth-child(1)').text();
-            var check = $(row).find('td:nth-child(2) a').data('value');
-            if(check === 'checked') {
-                permission = PERMISSION_PREFIX + permission;
-                permissions.push(permission);
-            }
-        });
-        return permissions;
-    };
     $("a#share-group-w3-yes-link").click(function () {
-        var successCallback = function (data, status, jqXHR) {
-            if(status == "success") {
-                getAllRoles(groupId, selectedUser);
-            }
-        }
         var roleName = $('#group-sharing-role-name').val();
-        var users = [];
         if (roleName) {
-            var groupRoleInfo = {"roleName": roleName, "permissions": getPermissions(), "users": users};
+            createNewCombinedRole(roleName, roles);
-            var currentUser = $("#group-listing").data("current-user");
-            invokerUtil.post("/api/device-mgt/v1.0/groups/id/" + groupId + "/roles/create?userName=" + currentUser,
-                groupRoleInfo, successCallback, function (message) {
-                    displayErrors(message);
-                });
         } else {
             var errorMsgWrapper = "#notification-error-msg";
             var errorMsg = "#notification-error-msg span";
@@ -599,7 +544,7 @@ function togglePermissionAction(element) {
     }
 }
 
-function updateGroupShare(groupId, selectedUser, roles) {
+function updateGroupShare(groupId, roles) {
     var successCallback = function (data) {
         $(modalPopupContent).html($('#share-group-200-content').html());
         setTimeout(function () {
@@ -608,9 +553,19 @@ function updateGroupShare(groupId, selectedUser, roles) {
         }, 2000);
     };
 
-    var deviceGroupShare = {"username": selectedUser, "groupRoles": roles };
     invokerUtil.post("/api/device-mgt/v1.0/groups/id/" + groupId + "/share",
-                deviceGroupShare, successCallback, function (message) {
+                     roles, successCallback, function (message) {
+            displayErrors(message);
+        });
+}
+
+function createNewCombinedRole(roleName, roleList) {
+    var successCallback = function (data, status, jqXHR, isLast) {
+        $(modalPopupContent).html($('#create-combined-role-200-content').html());
+        showPopup();
+    };
+    invokerUtil.post("/api/device-mgt/v1.0/roles/create-combined-role/" + roleName, roleList,
+                     successCallback, function (message) {
             displayErrors(message);
         });
 }