Merge pull request #206 from charithag/master

Restructure group related UIs

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

@@ -19,5 +19,105 @@
 {{/zone}}
 
 {{#zone "content"}}
-    {{unit "cdmf.unit.group.create"}}
+    <div class="container container-bg  white-bg">
+        <div class="col-md-12 col-lg-6 col-centered wr-content wr-login col-centered sign-panel">
+
+            <p class="page-sub-title">Add New Group</p>
+
+            <p>Create new device group on IoT Server</p>
+
+            <!-- validation -->
+        <span class="wr-validation-summary hidden center-block col-centered">
+		    <strong class="label label-danger col-centered"></strong>
+		</span>
+
+            <hr/>
+            <form method="GET" class="form-login-box" action="groups">
+                <label class="wr-input-label">Group Name</label>
+
+                <div class="wr-input-control">
+                    <input type="text right" id="name" placeholder="Group Name">
+                </div>
+
+                <label class="wr-input-label">Description</label>
+
+                <div class="wr-input-control">
+                    <input type="text right" id="description" placeholder="Description">
+                </div>
+
+                <div class="wr-input-control">
+                    <button class="wr-btn" id="add-group-btn">
+                        &nbsp;&nbsp;&nbsp;&nbsp;Add&nbsp;&nbsp;&nbsp;&nbsp;</button>
+                    <button class="wr-btn" onclick="history.go(-1)">&nbsp;&nbsp;&nbsp;&nbsp;Cancel&nbsp;&nbsp;&nbsp;&nbsp;</button>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <div id="group-400-content" class="hide">
+        <div class="modal-content">
+            <div class="row">
+                <div class="col-md-7 col-centered center-container">
+                    <h4>Exception at backend. Try Later.</h4>
+                    <br/>
+                    <div class="buttons">
+                        <a href="#" id="group-400-link" class="btn-operations">
+                            &nbsp;&nbsp;&nbsp;&nbsp;Ok&nbsp;&nbsp;&nbsp;&nbsp;
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div id="group-403-content" class="hide">
+        <div class="modal-content">
+            <div class="row">
+                <div class="col-md-7 col-centered center-container">
+                    <h4>Operation not permitted.</h4>
+                    <br/>
+                    <div class="buttons">
+                        <a href="#" id="group-403-link" class="btn-operations">
+                            &nbsp;&nbsp;&nbsp;&nbsp;Ok&nbsp;&nbsp;&nbsp;&nbsp;
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div id="group-409-content" class="hide">
+        <div class="modal-content">
+            <div class="row">
+                <div class="col-md-7 col-centered center-container">
+                    <h4>Group Name already exists.</h4>
+                    <br/>
+                    <div class="buttons">
+                        <a href="#" id="group-409-link" class="btn-operations">
+                            &nbsp;&nbsp;&nbsp;&nbsp;Ok&nbsp;&nbsp;&nbsp;&nbsp;
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div id="group-unexpected-error-content" class="hide">
+        <div class="modal-content">
+            <div class="row">
+                <div class="col-md-7 col-centered center-container">
+                    <h4>Unexpected error occurred!</h4>
+                    <br/>
+                    <div class="buttons">
+                        <a href="#" id="group-unexpected-error-link" class="btn-operations">
+                            &nbsp;&nbsp;&nbsp;&nbsp;Ok&nbsp;&nbsp;&nbsp;&nbsp;
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+{{/zone}}
+{{#zone "bottomJs"}}
+    {{js "js/group-add.js"}}
 {{/zone}}

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

@@ -27,20 +27,10 @@ $(function () {
             $('.wr-validation-summary').removeClass("hidden");
             return false;
         } else {
-            var addGroupAPI = "../api/group/add";
             var group = {"name": name, "description": description};
-            var postRequest = $.ajax({
-                                         url: addGroupAPI,
-                                         method: "POST",
-                                         contentType: "application/json",
-                                         accept: "application/json",
-                                         data: JSON.stringify(group)
-                                     });
 
-            postRequest.done(function (data, textStatus, jqxhr) {
+            var successCallback = function (data) {
-                var status = JSON.parse(jqxhr.responseText).data.statusCode;
+                if (data.status == 201) {
-                console.log(status);
-                if (status == 200) {
                     $('.wr-validation-summary strong').text("Group created. You will be redirected to groups");
                     $('.wr-validation-summary').removeClass("hidden");
                     $('.wr-validation-summary strong').removeClass("label-danger");
@@ -51,16 +41,12 @@ $(function () {
                 } else {
                     displayErrors(status);
                 }
-            });
+            };
 
-            postRequest.fail(function (jqXHR, textStatus) {
+            invokerUtil.post("/common/group_manager/groups", group,
-                displayErrors(status);
+                             successCallback, function (message) {
-            });
+                        displayErrors(message.content);
-
+                    });
-            //invokerUtil.post("/common/group_manager/group", group,
-            //                successCallback, function (message) {
-            //            console.log(message.content);
-            //        });
 
             return false;
         }

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

@@ -33,8 +33,244 @@
         <div class="wr-hidden-operations wr-advance-operations"></div>
         <div class="col-md-12 wr-page-content">
             <div>
-                {{unit "cdmf.unit.group.listing"}}
+                {{#if groupCount}}
+                    <div class="container-fluid">
+                        <table class="table table-striped table-hover list-table display responsive nowrap data-table table-selectable grid-view"
+                               id="group-grid">
+                            <thead>
+                            <tr class="sort-row">
+                                <th class="no-sort"></th>
+                                <th class="no-sort"></th>
+                                <th>By Owner</th>
+                                <th class="no-sort"></th>
+                            </tr>
+                            <tr class="filter-row filter-box">
+                                <th></th>
+                                <th></th>
+                                <th data-for="By Owner" class="text-filter"></th>
+                                <th></th>
+                            </tr>
+                            </thead>
+                            <tbody id="ast-container"></tbody>
+                        </table>
+                    </div>
+                {{else}}
+                    <div id="ast-container" class="ast-container list-view">
+                        <div class="ctrl-info-panel col-centered text-center wr-login">
+                            <h2>You don't have any group registered at the moment.</h2>
+                            <br/>
+                            {{#if permissions.ADD_GROUP}}
+                                <p class="text-center">
+                                    <a href="{{@app.context}}/group/add" class="wr-btn">
+                                        <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 Group
+                                    </a>
+                                </p>
+                            {{/if}}
+                        </div>
+                    </div>
+                {{/if}}
+
+                <div id="share-group-w1-modal-content" class="hide">
+                    <div class="content">
+                        <div class="row">
+                            <div class="col-lg-5 col-md-6 col-centered">
+                                <h3>Select user to manage group sharing</h3>
+                                <div id="user-names">Loading...</div>
+                                <div class="buttons">
+                                    <a href="#" id="share-group-next-link" class="btn-operations">
+                                        &nbsp;&nbsp;&nbsp;&nbsp;Next&nbsp;&nbsp;&nbsp;&nbsp;
+                                    </a>
+                                    &nbsp;&nbsp;
+                                    <a href="#" id="share-group-w1-cancel-link" class="btn-operations">
+                                        &nbsp;&nbsp;&nbsp;&nbsp;Cancel&nbsp;&nbsp;&nbsp;&nbsp;
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div id="share-group-w2-modal-content" class="hide">
+                    <div class="content">
+                        <div class="row">
+                            <div class="col-lg-5 col-md-6 col-centered">
+                                <h3>Select sharing roles</h3>
+                                <br/>
+                                <div id="user-roles">Loading...</div>
+                                <div class="buttons">
+                                    <a href="#" id="share-group-yes-link" class="btn-operations">
+                                        &nbsp;&nbsp;&nbsp;&nbsp;OK&nbsp;&nbsp;&nbsp;&nbsp;
+                                    </a>
+                                    &nbsp;&nbsp;
+                                    <a href="#" id="share-group-w2-cancel-link" class="btn-operations">
+                                        &nbsp;&nbsp;&nbsp;&nbsp;Cancel&nbsp;&nbsp;&nbsp;&nbsp;
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div id="share-group-200-content" class="hide">
+                    <div class="content">
+                        <div class="row">
+                            <div class="col-lg-5 col-md-6 col-centered">
+                                <h3>Group sharing updated successfully.</h3>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div id="remove-group-modal-content" class="hide">
+                    <div class="content">
+                        <div class="row">
+                            <div class="col-lg-5 col-md-6 col-centered">
+                                <h3>Do you really want to remove this group from your Group List?</h3>
+
+                                <div class="buttons">
+                                    <a href="#" id="remove-group-yes-link" class="btn-operations">
+                                        &nbsp;&nbsp;&nbsp;&nbsp;Yes&nbsp;&nbsp;&nbsp;&nbsp;
+                                    </a>
+                                    &nbsp;&nbsp;
+                                    <a href="#" id="remove-group-cancel-link" class="btn-operations">
+                                        &nbsp;&nbsp;&nbsp;&nbsp;Cancel&nbsp;&nbsp;&nbsp;&nbsp;
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div id="remove-group-200-content" class="hide">
+                    <div class="content">
+                        <div class="row">
+                            <div class="col-lg-5 col-md-6 col-centered">
+                                <h3>Group was successfully removed.</h3>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div id="edit-group-modal-content" class="hide">
+                    <div class="content">
+                        <div class="row">
+                            <div class="col-lg-5 col-md-6 col-centered">
+                                <h3>Please enter new name and description for the group</h3>
+                                <br/>
+
+                                <div>
+                                    <input id="edit-group-name" style="color:#3f3f3f;padding:5px" type="text"
+                                           value=""
+                                           placeholder="Group Name" size="60">
+                                </div>
+                                <br/>
+
+                                <div>
+                                    <input id="edit-group-description" style="color:#3f3f3f;padding:5px" type="text"
+                                           value=""
+                                           placeholder="Group Description" size="60">
+                                </div>
+                                <div class="buttons">
+                                    <a href="#" id="edit-group-yes-link" class="btn-operations">
+                                        &nbsp;&nbsp;&nbsp;&nbsp;Update&nbsp;&nbsp;&nbsp;&nbsp;
+                                    </a>
+                                    &nbsp;&nbsp;
+                                    <a href="#" id="edit-group-cancel-link" class="btn-operations">
+                                        &nbsp;&nbsp;&nbsp;&nbsp;Cancel&nbsp;&nbsp;&nbsp;&nbsp;
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div id="edit-group-200-content" class="hide">
+                    <div class="content">
+                        <div class="row">
+                            <div class="col-lg-5 col-md-6 col-centered">
+                                <h3>Group was successfully updated.</h3>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div id="group-400-content" class="hide">
+                    <div class="content">
+                        <div class="row">
+                            <div class="col-lg-5 col-md-6 col-centered">
+                                <h3>Exception at backend. Try Later.</h3>
+
+                                <div class="buttons">
+                                    <a href="#" id="group-400-link" class="btn-operations">
+                                        &nbsp;&nbsp;&nbsp;&nbsp;Ok&nbsp;&nbsp;&nbsp;&nbsp;
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div id="group-403-content" class="hide">
+                    <div class="content">
+                        <div class="row">
+                            <div class="col-lg-5 col-md-6 col-centered">
+                                <h3>Operation not permitted.</h3>
+
+                                <div class="buttons">
+                                    <a href="#" id="group-403-link" class="btn-operations">
+                                        &nbsp;&nbsp;&nbsp;&nbsp;Ok&nbsp;&nbsp;&nbsp;&nbsp;
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div id="group-409-content" class="hide">
+                    <div class="content">
+                        <div class="row">
+                            <div class="col-lg-5 col-md-6 col-centered">
+                                <h3>Group does not exist.</h3>
+
+                                <div class="buttons">
+                                    <a href="#" id="group-409-link" class="btn-operations">
+                                        &nbsp;&nbsp;&nbsp;&nbsp;Ok&nbsp;&nbsp;&nbsp;&nbsp;
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div id="group-unexpected-error-content" class="hide">
+                    <div class="content">
+                        <div class="row">
+                            <div class="col-lg-5 col-md-6 col-centered">
+                                <h3>Unexpected error occurred!</h3>
+
+                                <div class="buttons">
+                                    <a href="#" id="group-unexpected-error-link" class="btn-operations">
+                                        &nbsp;&nbsp;&nbsp;&nbsp;Ok&nbsp;&nbsp;&nbsp;&nbsp;
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
     </div>
-{{/zone}}
+{{/zone}}
+
+{{#zone "bottomJs"}}
+    <script id="group-listing" data-current-user="{{currentUser.username}}"
+            src="{{@unit.publicUri}}/templates/listing.hbs"
+            type="text/x-handlebars-template"></script>
+    {{#if groupCount}}
+        {{js "js/listing.js"}}
+    {{/if}}
+{{/zone}}

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

@@ -87,14 +87,8 @@ function loadGroups() {
     var groupListingSrc = groupListing.attr("src");
     var currentUser = groupListing.data("currentUser");
     $.template("group-listing", groupListingSrc, function (template) {
-        var serviceURL = "api/group/all";
 
-        var getGroupsRequest = $.ajax({
+        var successCallback = function (data) {
-                                          url: serviceURL,
-                                          method: "GET"
-                                      });
-
-        getGroupsRequest.done(function (data) {
             data = JSON.parse(data);
             var viewModel = {};
             viewModel.groups = data.data;
@@ -112,7 +106,12 @@ function loadGroups() {
 
             $('#group-grid').datatables_extended();
             $(".icon .text").res_text(0.2);
-        });
+        };
+
+        invokerUtil.get("/common/group_manager/groups?start=0&rowCount=1000",
+                        successCallback, function (message) {
+                    displayErrors(message.content);
+                });
 
     });
 }
@@ -199,24 +198,16 @@ function hidePopup() {
  * Following functions should be triggered after AJAX request is made.
  */
 function attachEvents() {
-    /**
-     * Following click function would execute
-     * when a user clicks on "Share" link
-     * on Group Management page in WSO2 IoT Server Console.
-     */
-    $(".view-group-link").click(function () {
-        var groupId = $(this).data("groupid");
-        window.location = "devices?groupId=" + groupId;
-    });
 
     /**
      * Following click function would execute
      * when a user clicks on "Share" link
-     * on Group Management page in WSO2 IoT Server Console.
+     * on Group Management page in WSO2 Device Management Server Console.
      */
     $("a.share-group-link").click(function () {
-        var groupId = $(this).data("groupid");
         var username = $("#group-listing").data("current-user");
+        var groupName = $(this).data("group-name");
+        var groupOwner = $(this).data("group-owner");
         $(modalPopupContent).html($('#share-group-w1-modal-content').html());
         $('#user-names').html('<div style="height:100px" data-state="loading" data-loading-text="Loading..." data-loading-style="icon-only" data-loading-inverse="true"></div>');
         showPopup();
@@ -250,86 +241,7 @@ function attachEvents() {
                 $("a#share-group-next-link").show();
                 $("a#share-group-next-link").click(function () {
                     var selectedUser = $('#share-user-selector').val();
-                    $(modalPopupContent).html($('#share-group-w2-modal-content').html());
+                    getAllRoles(groupName, groupOwner, selectedUser);
-                    $('#user-roles').html('<div style="height:100px" data-state="loading" data-loading-text="Loading..." data-loading-style="icon-only" data-loading-inverse="true"></div>');
-                    $("a#share-group-yes-link").hide();
-
-                    var roleMappingRequest = $.ajax({
-                                                        url: "api/group/id/" + groupId + "/" + selectedUser + "/rolemapping",
-                                                        method: "GET",
-                                                        contentType: "application/json",
-                                                        accept: "application/json"
-                                                    });
-
-                    roleMappingRequest.done(function (data, txtStatus, jqxhr) {
-                        var roleMap = JSON.parse(data);
-                        var status = jqxhr.status;
-                        if (status == 200) {
-                            roleMap = roleMap.data;
-                            var str = '';
-                            var isChecked = '';
-                            var hasRoles;
-                            for (var role in roleMap) {
-                                if (roleMap[role].assigned == true) {
-                                    isChecked = 'checked';
-                                }
-                                str += '<label class="checkbox-text"><input type="checkbox" id="user-role-' + roleMap[role].role + '" value="' + roleMap[role].role
-                                       + '" ' + isChecked + '/>' + roleMap[role].role + '</label>&nbsp;&nbsp;&nbsp;&nbsp;';
-                                hasRoles = true;
-                            }
-                            if (!hasRoles) {
-                                str = "There is no any roles for this group";
-                                return;
-                            }
-                            $('#user-roles').html(str);
-                            $("a#share-group-yes-link").show();
-                            $("a#share-group-yes-link").click(function () {
-                                var updatedRoleMap = [];
-                                for (var role in roleMap) {
-                                    if ($('#user-role-' + roleMap[role].role).is(':checked') != roleMap[role].assigned) {
-                                        roleMap[role].assigned = $('#user-role-' + roleMap[role].role).is(':checked');
-                                        updatedRoleMap.push(roleMap[role]);
-                                    }
-                                }
-
-                                var roleUpdateRequest = $.ajax({
-                                                                   url: "api/group/id/" + groupId + "/" + selectedUser + "/roleupdate",
-                                                                   method: "POST",
-                                                                   contentType: "application/json",
-                                                                   accept: "application/json",
-                                                                   data: JSON.stringify(updatedRoleMap)
-                                                               });
-
-                                roleUpdateRequest.done(function (data, txtStatus,
-                                                                 jqxhr) {
-                                    var status = jqxhr.status;
-                                    if (status == 200) {
-                                        $(modalPopupContent).html($('#share-group-200-content').html());
-                                        setTimeout(function () {
-                                            hidePopup();
-                                            location.reload(false);
-                                        }, 2000);
-                                    } else {
-                                        displayErrors(status);
-                                    }
-                                });
-
-                                roleUpdateRequest.fail(function (jqXHR) {
-                                    displayErrors(jqXHR);
-                                });
-                            });
-                        } else {
-                            displayErrors(status);
-                        }
-                    });
-
-                    roleMappingRequest.fail(function (jqXHR) {
-                        displayErrors(jqXHR);
-                    });
-
-                    $("a#share-group-w2-cancel-link").click(function () {
-                        hidePopup();
-                    });
                 });
             } else {
                 displayErrors(status);
@@ -351,23 +263,15 @@ function attachEvents() {
      * on Group Management page in WSO2 IoT Server Console.
      */
     $("a.remove-group-link").click(function () {
-        var groupId = $(this).data("groupid");
+        var groupName = $(this).data("group-name");
-        var removeGroupApi = "api/group/id/" + groupId + "/remove";
+        var groupOwner = $(this).data("group-owner");
 
         $(modalPopupContent).html($('#remove-group-modal-content').html());
         showPopup();
 
         $("a#remove-group-yes-link").click(function () {
-            var deleteRequest = $.ajax({
+            var successCallback = function (data) {
-                                           url: removeGroupApi,
+                if (data.status == 200) {
-                                           method: "DELETE",
-                                           contentType: "application/json",
-                                           accept: "application/json"
-                                       });
-
-            deleteRequest.done(function (data, txtStatus, jqxhr) {
-                var status = jqxhr.status;
-                if (status == 200) {
                     $(modalPopupContent).html($('#remove-group-200-content').html());
                     setTimeout(function () {
                         hidePopup();
@@ -376,11 +280,12 @@ function attachEvents() {
                 } else {
                     displayErrors(status);
                 }
-            });
+            };
 
-            deleteRequest.fail(function (jqXHR) {
+            invokerUtil.delete("/common/group_manager/groups/" + groupOwner + "/" + groupName,
-                displayErrors(jqXHR);
+                               successCallback, function (message) {
-            });
+                        displayErrors(message.content);
+                    });
         });
 
         $("a#remove-group-cancel-link").click(function () {
@@ -395,10 +300,9 @@ function attachEvents() {
      * on Device Management page in WSO2 MDM Console.
      */
     $("a.edit-group-link").click(function () {
-        var groupId = $(this).data("groupid");
+        var groupName = $(this).data("group-name");
-        var groupName = $(this).data("groupname");
+        var groupOwner = $(this).data("group-owner");
-        var groupDescription = $(this).data("groupdescription");
+        var groupDescription = $(this).data("group-description");
-        var editGroupApi = "api/group/id/" + groupId + "/update";
 
         $(modalPopupContent).html($('#edit-group-modal-content').html());
         $('#edit-group-name').val(groupName);
@@ -408,19 +312,10 @@ function attachEvents() {
         $("a#edit-group-yes-link").click(function () {
             var newGroupName = $('#edit-group-name').val();
             var newGroupDescription = $('#edit-group-description').val();
-            var group = {"name": newGroupName, "description": newGroupDescription};
+            var group = {"name": newGroupName, "description": newGroupDescription, "owner": groupOwner};
-
-            var groupUpdateRequest = $.ajax({
-                                                url: editGroupApi,
-                                                method: "POST",
-                                                contentType: "application/json",
-                                                accept: "application/json",
-                                                data: JSON.stringify(group)
-                                            });
 
-            groupUpdateRequest.done(function (data, txtStatus, jqxhr) {
+            var successCallback = function (data) {
-                var status = jqxhr.status;
+                if (data.status == 200) {
-                if (status == 200) {
                     $(modalPopupContent).html($('#edit-group-200-content').html());
                     $("h4[data-groupid='" + groupId + "']").html(newGroupName);
                     setTimeout(function () {
@@ -429,11 +324,12 @@ function attachEvents() {
                 } else {
                     displayErrors(status);
                 }
-            });
+            };
 
-            groupUpdateRequest.fail(function (jqXHR) {
+            invokerUtil.put("/common/group_manager/groups/" + groupOwner + "/" + groupName,
-                displayErrors(jqXHR);
+                            successCallback, function (message) {
-            });
+                        displayErrors(message.content);
+                    });
         });
 
         $("a#edit-group-cancel-link").click(function () {
@@ -442,6 +338,105 @@ function attachEvents() {
     });
 }
 
+function getAllRoles(groupName, groupOwner, selectedUser) {
+    $(modalPopupContent).html($('#share-group-w2-modal-content').html());
+    $('#user-roles').html('<div style="height:100px" data-state="loading" data-loading-text="Loading..." data-loading-style="icon-only" data-loading-inverse="true"></div>');
+    $("a#share-group-yes-link").hide();
+    var successCallback = function (data) {
+        if (data.status == 200) {
+            if (data.data.length > 0) {
+                generateRoleMap(groupName, groupOwner, selectedUser, data.data);
+            } else {
+                $('#user-roles').html("There is no any roles for this group.");
+            }
+        } else {
+            displayErrors(status);
+        }
+    };
+
+    invokerUtil.get("/common/group_manager/groups/" + groupOwner + "/" + groupName + "/share/roles",
+                    successCallback, function (message) {
+                displayErrors(message.content);
+            });
+
+    $("a#share-group-w2-cancel-link").click(function () {
+        hidePopup();
+    });
+}
+
+function generateRoleMap(groupName, groupOwner, selectedUser, allRoles) {
+    var successCallback = function (data) {
+        if (data.status == 200) {
+            var userRoles = data.data;
+            var roleMap = [];
+            var str = '';
+            var isChecked = '';
+
+            for (var role in allRoles) {
+                var objRole = {"role": allRoles[role], "assigned": false};
+                for (var usrRole in userRoles) {
+                    if (allRoles[role] == userRoles[usrRole]) {
+                        objRole.assigned = true;
+                        isChecked = 'checked';
+                        break;
+                    }
+                }
+                str += '<label class="checkbox-text"><input type="checkbox" id="user-role-' + roleMap[role].role + '" value="' + roleMap[role].role
+                       + '" ' + isChecked + '/>' + roleMap[role].role + '</label>&nbsp;&nbsp;&nbsp;&nbsp;';
+                roleMap.push(objRole);
+            }
+
+            $('#user-roles').html(str);
+            $("a#share-group-yes-link").show();
+            var isOngoing;
+            $("a#share-group-yes-link").click(function () {
+                if (isOngoing) {
+                    return false;
+                }
+                $("a#share-group-yes-link").html("Wait...");
+                isOngoing = true;
+                for (var role in roleMap) {
+                    if ($('#user-role-' + roleMap[role].role).is(':checked') != roleMap[role].assigned) {
+                        roleMap[role].assigned = $('#user-role-' + roleMap[role].role).is(':checked');
+                        updateGroupShare(groupName, groupOwner, selectedUser, roleMap[role]);
+                    }
+                }
+            });
+        } else {
+            displayErrors(status);
+        }
+    };
+
+    invokerUtil.get("/common/group_manager/groups/" + groupOwner + "/" + groupName + "/share/roles?userName=" + selectedUser,
+                    successCallback, function (message) {
+                displayErrors(message.content);
+            });
+
+    $("a#share-group-w2-cancel-link").click(function () {
+        hidePopup();
+    });
+}
+
+function updateGroupShare(groupName, groupOwner, selectedUser, role) {
+    var successCallback = function (data) {
+        var status = data.status;
+        if (status == 200) {
+            $(modalPopupContent).html($('#share-group-200-content').html());
+            setTimeout(function () {
+                hidePopup();
+                location.reload(false);
+            }, 2000);
+        } else {
+            displayErrors(status);
+        }
+    };
+
+    invokerUtil.put("/common/group_manager/groups/" + groupOwner + "/" + groupName + "/share/roles?userName=" + selectedUser,
+                    role, successCallback, function (message) {
+                displayErrors(message.content);
+            });
+}
+
 function displayErrors(jqXHR) {
     showPopup();
     if (jqXHR.status == 400) {
@@ -466,4 +461,4 @@ function displayErrors(jqXHR) {
         });
         console.log("Error code: " + jqXHR.status);
     }
-}
+}

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

@@ -1,19 +1,19 @@
 {{#each groups}}
-    <tr data-type="selectable" data-groupid="{{id}}">
+    <tr data-type="selectable" data-group-name="{{name}}" data-group-owner="{{owner}}">
         <td class="remove-padding icon-only content-fill">
             <div class="thumbnail icon">
                 <img class="square-element text fw "
-                     src="public/cdmf.unit.group.listing/images/group-icon.png"/>
+                     src="public/cdmf.page.groups/images/group-icon.png"/>
             </div>
         </td>
         <td class="fade-edge">
-            <h4 data-groupid="{{id}}">{{name}}</h4>
+            <h4>{{name}}</h4>
         </td>
         <td class="fade-edge remove-padding-top" data-search="{{owner}}"
             data-display="{{owner}}"
             data-grid-label="Owner">{{owner}}</td>
         <td class="text-right content-fill text-left-on-grid-view no-wrap">
-            <a href="devices?groupId={{id}}&groupName={{name}}"
+            <a href="devices?groupName={{name}}&groupOwner={{owner}}"
                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>
@@ -21,7 +21,7 @@
                 </span>
                 <span class="hidden-xs hidden-on-grid-view">View Devices</span>
             </a>
-            <a href="analytics?groupId={{id}}&groupName={{name}}"
+            <a href="analytics?groupName={{name}}&groupOwner={{owner}}"
                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>
@@ -31,7 +31,7 @@
             </a>
             <a href="#" data-click-event="remove-form"
                class="btn padding-reduce-on-grid-view share-group-link"
-               data-groupid="{{id}}">
+               data-group-name="{{name}}" data-group-owner="{{owner}}">
                 <span class="fw-stack">
                     <i class="fw fw-ring fw-stack-2x"></i>
                     <i class="fw fw-share fw-stack-1x"></i>
@@ -40,8 +40,8 @@
             </a>
             <a href="#" data-click-event="remove-form"
                class="btn padding-reduce-on-grid-view edit-group-link"
-               data-groupid="{{id}}" data-groupname="{{name}}"
+               data-group-name="{{name}}" data-group-owner="{{owner}}"
-               data-groupdescription="{{description}}">
+               data-group-description="{{description}}">
                 <span class="fw-stack">
                     <i class="fw fw-ring fw-stack-2x"></i>
                     <i class="fw fw-edit fw-stack-1x"></i>
@@ -50,7 +50,7 @@
             </a>
             <a href="#" data-click-event="remove-form"
                class="btn padding-reduce-on-grid-view remove-group-link"
-               data-groupid="{{id}}">
+               data-group-name="{{name}}" data-group-owner="{{owner}}">
                 <span class="fw-stack">
                     <i class="fw fw-ring fw-stack-2x"></i>
                     <i class="fw fw-delete fw-stack-1x"></i>

components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.group.create/create.hbs

@@ -1,101 +0,0 @@
-<div class="container container-bg  white-bg">
-    <div class="col-md-12 col-lg-6 col-centered wr-content wr-login col-centered sign-panel">
-
-        <p class="page-sub-title">Add New Group</p>
-
-        <p>Create new device group on IoT Server</p>
-
-        <!-- validation -->
-        <span class="wr-validation-summary hidden center-block col-centered">
-		    <strong class="label label-danger col-centered"></strong>
-		</span>
-
-        <hr/>
-        <form method="GET" class="form-login-box" action="groups">
-            <label class="wr-input-label">Group Name</label>
-
-            <div class="wr-input-control">
-                <input type="text right" id="name" placeholder="Group Name">
-            </div>
-
-            <label class="wr-input-label">Description</label>
-
-            <div class="wr-input-control">
-                <input type="text right" id="description" placeholder="Description">
-            </div>
-
-            <div class="wr-input-control">
-                <button class="wr-btn" id="add-group-btn">&nbsp;&nbsp;&nbsp;&nbsp;Add&nbsp;&nbsp;&nbsp;&nbsp;</button>
-                <button class="wr-btn" onclick="javascript:history.go(-1)">&nbsp;&nbsp;&nbsp;&nbsp;Cancel&nbsp;&nbsp;&nbsp;&nbsp;</button>
-            </div>
-        </form>
-    </div>
-</div>
-
-<div id="group-400-content" class="hide">
-    <div class="modal-content">
-        <div class="row">
-            <div class="col-md-7 col-centered center-container">
-                <h4>Exception at backend. Try Later.</h4>
-                <br/>
-                <div class="buttons">
-                    <a href="#" id="group-400-link" class="btn-operations">
-                        &nbsp;&nbsp;&nbsp;&nbsp;Ok&nbsp;&nbsp;&nbsp;&nbsp;
-                    </a>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
-<div id="group-403-content" class="hide">
-    <div class="modal-content">
-        <div class="row">
-            <div class="col-md-7 col-centered center-container">
-                <h4>Operation not permitted.</h4>
-                <br/>
-                <div class="buttons">
-                    <a href="#" id="group-403-link" class="btn-operations">
-                        &nbsp;&nbsp;&nbsp;&nbsp;Ok&nbsp;&nbsp;&nbsp;&nbsp;
-                    </a>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
-<div id="group-409-content" class="hide">
-    <div class="modal-content">
-        <div class="row">
-            <div class="col-md-7 col-centered center-container">
-                <h4>Group Name already exists.</h4>
-                <br/>
-                <div class="buttons">
-                    <a href="#" id="group-409-link" class="btn-operations">
-                        &nbsp;&nbsp;&nbsp;&nbsp;Ok&nbsp;&nbsp;&nbsp;&nbsp;
-                    </a>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
-<div id="group-unexpected-error-content" class="hide">
-    <div class="modal-content">
-        <div class="row">
-            <div class="col-md-7 col-centered center-container">
-                <h4>Unexpected error occurred!</h4>
-                <br/>
-                <div class="buttons">
-                    <a href="#" id="group-unexpected-error-link" class="btn-operations">
-                        &nbsp;&nbsp;&nbsp;&nbsp;Ok&nbsp;&nbsp;&nbsp;&nbsp;
-                    </a>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
-{{#zone "bottomJs"}}
-    {{js "js/group-add.js"}}
-{{/zone}}

components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.group.create/create.json

@@ -1,3 +0,0 @@
-{
-  "version": "1.0.0"
-}

components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.group.listing/listing.hbs

@@ -1,240 +0,0 @@
-{{#if groupCount}}
-    <div class="container-fluid">
-        <table class="table table-striped table-hover list-table display responsive nowrap data-table table-selectable grid-view"
-               id="group-grid">
-            <thead>
-            <tr class="sort-row">
-                <th class="no-sort"></th>
-                <th class="no-sort"></th>
-                <th>By Owner</th>
-                <th class="no-sort"></th>
-            </tr>
-            <tr class="filter-row filter-box">
-                <th></th>
-                <th></th>
-                <th data-for="By Owner" class="text-filter"></th>
-                <th></th>
-            </tr>
-            </thead>
-
-            <tbody id="ast-container"></tbody>
-        </table>
-
-    </div>
-{{else}}
-    <div id="ast-container" class="ast-container list-view">
-        <div class="ctrl-info-panel col-centered text-center wr-login">
-            <h2>You don't have any group registered at the moment.</h2>
-            <br/>
-            {{#if permissions.ADD_GROUP}}
-                <p class="text-center">
-                    <a href="{{@app.context}}/group/add" class="wr-btn">
-                    <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 Group
-                    </a>
-                </p>
-            {{/if}}
-        </div>
-    </div>
-{{/if}}
-
-<div id="share-group-w1-modal-content" class="hide">
-    <div class="content">
-        <div class="row">
-            <div class="col-lg-5 col-md-6 col-centered">
-                <h3>Select user to manage group sharing</h3>
-                <div id="user-names">Loading...</div>
-                <div class="buttons">
-                    <a href="#" id="share-group-next-link" class="btn-operations">
-                        &nbsp;&nbsp;&nbsp;&nbsp;Next&nbsp;&nbsp;&nbsp;&nbsp;
-                    </a>
-                    &nbsp;&nbsp;
-                    <a href="#" id="share-group-w1-cancel-link" class="btn-operations">
-                        &nbsp;&nbsp;&nbsp;&nbsp;Cancel&nbsp;&nbsp;&nbsp;&nbsp;
-                    </a>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
-<div id="share-group-w2-modal-content" class="hide">
-    <div class="content">
-        <div class="row">
-            <div class="col-lg-5 col-md-6 col-centered">
-                <h3>Select sharing roles</h3>
-                <br/>
-                <div id="user-roles">Loading...</div>
-                <div class="buttons">
-                    <a href="#" id="share-group-yes-link" class="btn-operations">
-                        &nbsp;&nbsp;&nbsp;&nbsp;OK&nbsp;&nbsp;&nbsp;&nbsp;
-                    </a>
-                    &nbsp;&nbsp;
-                    <a href="#" id="share-group-w2-cancel-link" class="btn-operations">
-                        &nbsp;&nbsp;&nbsp;&nbsp;Cancel&nbsp;&nbsp;&nbsp;&nbsp;
-                    </a>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
-<div id="share-group-200-content" class="hide">
-    <div class="content">
-        <div class="row">
-            <div class="col-lg-5 col-md-6 col-centered">
-                <h3>Group sharing updated successfully.</h3>
-            </div>
-        </div>
-    </div>
-</div>
-
-<div id="remove-group-modal-content" class="hide">
-    <div class="content">
-        <div class="row">
-            <div class="col-lg-5 col-md-6 col-centered">
-                <h3>Do you really want to remove this group from your Group List?</h3>
-
-                <div class="buttons">
-                    <a href="#" id="remove-group-yes-link" class="btn-operations">
-                        &nbsp;&nbsp;&nbsp;&nbsp;Yes&nbsp;&nbsp;&nbsp;&nbsp;
-                    </a>
-                    &nbsp;&nbsp;
-                    <a href="#" id="remove-group-cancel-link" class="btn-operations">
-                        &nbsp;&nbsp;&nbsp;&nbsp;Cancel&nbsp;&nbsp;&nbsp;&nbsp;
-                    </a>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
-<div id="remove-group-200-content" class="hide">
-    <div class="content">
-        <div class="row">
-            <div class="col-lg-5 col-md-6 col-centered">
-                <h3>Group was successfully removed.</h3>
-            </div>
-        </div>
-    </div>
-</div>
-
-<div id="edit-group-modal-content" class="hide">
-    <div class="content">
-        <div class="row">
-            <div class="col-lg-5 col-md-6 col-centered">
-                <h3>Please enter new name and description for the group</h3>
-                <br/>
-
-                <div>
-                    <input id="edit-group-name" style="color:#3f3f3f;padding:5px" type="text"
-                           value=""
-                           placeholder="Group Name" size="60">
-                </div>
-                <br/>
-
-                <div>
-                    <input id="edit-group-description" style="color:#3f3f3f;padding:5px" type="text"
-                           value=""
-                           placeholder="Group Description" size="60">
-                </div>
-                <div class="buttons">
-                    <a href="#" id="edit-group-yes-link" class="btn-operations">
-                        &nbsp;&nbsp;&nbsp;&nbsp;Update&nbsp;&nbsp;&nbsp;&nbsp;
-                    </a>
-                    &nbsp;&nbsp;
-                    <a href="#" id="edit-group-cancel-link" class="btn-operations">
-                        &nbsp;&nbsp;&nbsp;&nbsp;Cancel&nbsp;&nbsp;&nbsp;&nbsp;
-                    </a>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
-<div id="edit-group-200-content" class="hide">
-    <div class="content">
-        <div class="row">
-            <div class="col-lg-5 col-md-6 col-centered">
-                <h3>Group was successfully updated.</h3>
-            </div>
-        </div>
-    </div>
-</div>
-
-<div id="group-400-content" class="hide">
-    <div class="content">
-        <div class="row">
-            <div class="col-lg-5 col-md-6 col-centered">
-                <h3>Exception at backend. Try Later.</h3>
-
-                <div class="buttons">
-                    <a href="#" id="group-400-link" class="btn-operations">
-                        &nbsp;&nbsp;&nbsp;&nbsp;Ok&nbsp;&nbsp;&nbsp;&nbsp;
-                    </a>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
-<div id="group-403-content" class="hide">
-    <div class="content">
-        <div class="row">
-            <div class="col-lg-5 col-md-6 col-centered">
-                <h3>Operation not permitted.</h3>
-
-                <div class="buttons">
-                    <a href="#" id="group-403-link" class="btn-operations">
-                        &nbsp;&nbsp;&nbsp;&nbsp;Ok&nbsp;&nbsp;&nbsp;&nbsp;
-                    </a>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
-<div id="group-409-content" class="hide">
-    <div class="content">
-        <div class="row">
-            <div class="col-lg-5 col-md-6 col-centered">
-                <h3>Group does not exist.</h3>
-
-                <div class="buttons">
-                    <a href="#" id="group-409-link" class="btn-operations">
-                        &nbsp;&nbsp;&nbsp;&nbsp;Ok&nbsp;&nbsp;&nbsp;&nbsp;
-                    </a>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
-<div id="group-unexpected-error-content" class="hide">
-    <div class="content">
-        <div class="row">
-            <div class="col-lg-5 col-md-6 col-centered">
-                <h3>Unexpected error occurred!</h3>
-
-                <div class="buttons">
-                    <a href="#" id="group-unexpected-error-link" class="btn-operations">
-                        &nbsp;&nbsp;&nbsp;&nbsp;Ok&nbsp;&nbsp;&nbsp;&nbsp;
-                    </a>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
-
-{{#zone "bottomJs"}}
-    <script id="group-listing" data-current-user="{{currentUser.username}}"
-            src="{{@unit.publicUri}}/templates/listing.hbs"
-            type="text/x-handlebars-template"></script>
-    {{#if groupCount}}
-        {{js "js/listing.js"}}
-    {{/if}}
-{{/zone}}

components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.group.listing/listing.json

@@ -1,4 +0,0 @@
-{
-  "version": "1.0.0",
-  "index": 30
-}