Add select2 controller to select roles to share a group

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

@@ -119,10 +119,9 @@
                         <div id="user-names">
                             <h4>
                                 Select user role(s)
-                                <br><br>
-                                <div style="max-height: 200px; overflow: auto" id="rolesListing">
-                                </div>
                             </h4>
+                            <div class="wr-input-control" id="rolesListing">
+                            </div>
                         </div>
                     </div>
                     <div class="modal-footer">
@@ -402,3 +401,19 @@
         {{js "js/listing.js"}}
     {{/if}}
 {{/zone}}
+
+{{#zone "topCss"}}
+    <style>
+        .select2-dropdown {
+            z-index: 999999999;
+        }
+
+        .wr-input-control {
+            color: black;
+        }
+
+        .select2-selection__choice {
+            font-size: medium;
+        }
+    </style>
+{{/zone}}

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

@@ -391,14 +391,7 @@ function attachEvents() {
         listAllRoles(groupId);
         var shareGroupNextLink = $("a#share-group-next-link");
         shareGroupNextLink.click(function () {
-            var roles = [];
-            $('.modal .roleCheckBoxes').each(
-                function () {
-                    if ($(this).is(':checked')) {
-                        roles.push($(this).data('role-name'));
-                    }
-                }
-            );
+            var roles = $("#roles").val();
             updateGroupShare(groupId, roles);
         });
 
@@ -505,15 +498,11 @@ function markAlreadySavedUsersRoles(groupId) {
         data = JSON.parse(data);
         if (xhr.status == 200) {
             if (data.roles.length > 0) {
+                var selectedValues = [];
                 for (var i = 0; i < data.roles.length; i++) {
-                    $('.roleCheckBoxes').each(
-                        function () {
-                            if (data.roles[i] == $(this).data('role-name')) {
-                                $(this).attr('checked', true);
-                            }
-                        }
-                    );
+                    selectedValues.push(data.roles[i]);
                 }
+                $("#roles").val(selectedValues).trigger("change");
             } else {
                 return;
             }
@@ -533,22 +522,16 @@ function listAllRoles(groupId) {
         data = JSON.parse(data);
         if (xhr.status == 200) {
             if (data.roles.length > 0) {
-                var html = "<br/>";
+                var html = '<select id="roles" class="form-control select2" multiple="multiple">';
                 for (var i = 0; i < data.roles.length; i++) {
-                    html += '<div class="wr-input-control"><label class="wr-input-control checkbox">' +
-                            '<input class="roleCheckBoxes" type="checkbox" data-role-name="' + data.roles[i] + '" />' +
-                            '<span class="helper" title="' + data.roles[i] + '">' + data.roles[i] +
-                            '</span></label></div>';
-                    $('.roleCheckBoxes').each(
-                        function () {
-                            if (data.roles[i] == $(this).data('role-name')) {
-                                $(this).attr('checked', true);
-                            }
-                        }
-                    );
+                    html += '<option value="' + data.roles[i] + '">' + data.roles[i] + '</option>';
                 }
+                html += '</select>';
                 $("#rolesListing").html(html);
                 markAlreadySavedUsersRoles(groupId);
+                $("select.select2[multiple=multiple]").select2({
+                                                                   tags: false
+                                                               });
             } else {
                 $("#rolesListing").html("No roles available");
             }