mesa-fab-approval/Fab2ApprovalSystem/Views/Workflow/Index.cshtml

@model IEnumerable<Fab2ApprovalSystem.Models.Role>

@{
    ViewBag.Title = "Index";
}
<link rel="stylesheet" href="~/Scripts/jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="~/Scripts/jqwidgets/styles/jqx.energyblue.css" type="text/css" />
<link rel="stylesheet" href="~/Scripts/jqwidgets/styles/jqx.arctic.css" type="text/css" />
<link rel="stylesheet" href="/Content/kendo/kendo.blueopal.min.css" />
<script type="text/javascript" src="~/Scripts/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="~/Scripts/jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="~/Scripts/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="~/Scripts/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="~/Scripts/jqwidgets/jqxlistbox.js"></script>
<script>

</script>

<table  cellpadding="10" cellspacing="2">
   <tr >
       <td>
           <div style="font-size: 15px; font-family: Verdana; font-weight:bold">WorkFlow Roles</div>
       </td>
       <td>
           <div style="font-size: 15px; font-family: Verdana; font-weight: bold" >Current Users in Role:</div>
           <div style="font-size: 15px; font-family: Verdana; font-weight: bold; color:crimson"  id="selectionlog"></div>
            </td>
       <td>
           <div style="font-size: 15px; font-family: Verdana; font-weight:bold" >All Users</div>
       </td>
       

   </tr>
    <tr>
        <td>
            <div style="padding: 4px; overflow-y: auto; -ms-overflow-y: auto; overflow-x: hidden; -ms-overflow-x: hidden; width: 200px; height: 500px;">                
                @(
                    Html.Kendo().TreeView()
                        .Name("treeRoles")
                        .BindTo((IEnumerable<TreeViewItemModel>)ViewBag.ToplevelNode)
                        .Events(events => events
                            .Select("onSelectRoles")
                            )
                )
            </div>

           



            
        </td>
               
        <td valign="top">

            <div id='content'>
                <div id='lstUserRoles'>
                </div>
                <div>
                    <input style="margin-top: 20px;" type="button" id='jqxButtonRemove' value="Remove selected items" />
                </div>


            </div>
        </td>        
        <td valign="top">

            <div id='content'>              
                <div id='lstAllUsers'>

                </div>
                <div>
                    <input style="margin-top: 20px;" type="button" id='jqxButtonAdd' value="Add selected items" />
                </div>
            </div>
        </td>

    </tr>

</table>

    

    <script language="javascript">

        var currentSubRoleID;

        $(document).ready(function () {
            var url = "/Workflow/GetAllUserList";
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'UserID' },
                    { name: 'FullName' }
                ],
                id: 'id',
                url: url
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            // Create a jqxListBox
            $("#lstAllUsers").jqxListBox({
                multipleextended: true, theme: "arctic", source: dataAdapter, displayMember: "FullName", valueMember: "UserID", width: 200, height: 250
            });
           


            // display an empty list box for the selected user roles Listbox.
            displayUserRoles(-1);


        }


        );



        function onSelectRoles(e) {

           
            var data = $('#treeRoles').data('kendoTreeView').dataItem(e.node);
            
            var parent = this.parent(e.node); // `this` refers to the treeview object
            if (parent.length) {
                var parentText = this.text(parent);                
                $("#selectionlog").children().remove();
                $("#selectionlog").text(parentText + ' (' + data.text + ')');
                displayUserRoles(data.id);
                currentSubRoleID = data.id
            }
                                            
        }


        
        function displayUserRoles(id)        
        {
            var url = "/Workflow/GetAllUserListBySubRole?SubRole=" + id;
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'UserID' },
                    { name: 'FullName' }
                ],
                id: 'id',
                url: url
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            // Create a jqxListBox
            $("#lstUserRoles").jqxListBox({
                 multipleextended: true, theme: "arctic", source: dataAdapter, displayMember: "FullName", valueMember: "UserID", width: 200, height: 250
            });
            $("#lstUserRoles").on('select', function (event) {
                if (event.args) {
                    var item = event.args.item;
                    if (item) {
                        var valueelement = $("<div></div>");
                        valueelement.text("Value: " + item.value);
                        var labelelement = $("<div></div>");
                        labelelement.text("Label: " + item.label);

                    }
                }
            });


        }
               

        $("#jqxButtonAdd").jqxButton({
            theme: 'energyblue'
        });

        $("#jqxButtonRemove").jqxButton({
            theme: 'energyblue'
        });

        $('#jqxButtonAdd').on('click', function () {
            // get selected items.
            var bfound = false;
            var userids;
            var itemsToAdd = $('#lstAllUsers').jqxListBox('getSelectedItems');
            if (itemsToAdd.length > 0) {

                for (var i = 0; i < itemsToAdd.length; i++) {

                    if (itemsToAdd[i].label != undefined) {

                        var tempvalue = itemsToAdd[i].value;
                        var templabel = itemsToAdd[i].label;

                        //if (i < itemsToAdd.length - 1)
                        //{
                        // check if the item exists in the role seleced for the user
                        var itemsAdded = $("#lstUserRoles").jqxListBox('getItems');
                        for (var x = 0; x < itemsAdded.length; x++) {
                            if (itemsAdded[x].label == templabel) {
                                bfound = true;
                                break;
                            };
                        };

                        if (!bfound) {
                            $("#lstUserRoles").jqxListBox('addItem', { label: templabel, value: tempvalue });
                            if (userids == null)
                                userids = tempvalue;
                            else
                                userids += "~" + tempvalue;
                        }

                        bfound = false;

                    }
                };

                // add the selected item into the DB.
               
                if (currentSubRoleID == undefined) {
                    alert('Please select a SubRole to add the users to');
                    return;
                }


                //
                if (userids != null) {
                    //alert(currentSubRoleID);
                    //alert("UserIds: " + userids);

                    AddRoles(currentSubRoleID, userids)
                }

            }

            // unselect all the selected items
            $("#lstAllUsers").jqxListBox({ selectedIndex: -1 });
                           
        });


        $('#jqxButtonRemove').on('click', function () {
            // get  items.
            var userids;
            var items = $("#lstUserRoles").jqxListBox('getSelectedItems');
            if (items.length > 0) {
                for (var i = items.length - 1; i >= 0; i--) {

                    $("#lstUserRoles").jqxListBox('removeItem', items[i].value);
                    if (userids == null)
                        userids = items[i].value;
                    else
                        userids += "~" + items[i].value;

                };

                if (currentSubRoleID == undefined) {
                    alert('Please select a SubRole to delete the users from Role');
                    return;
                }


                //
                if (userids != null) {
                    //alert(currentSubRoleID);
                    //alert("UserIds: " + userids);

                    DeleteRoles(currentSubRoleID, userids)
                }

            }
            
        });



        var AddRoles = function (subRoleID, userids) {                      
            var urlString = '/Workflow/AddUserRoles';
            //if (arrayOfValues.length == 0)
            //    return false;

            $.ajax({
                type: "Post",
                url: urlString,
                data: {
                    
                    subRole: subRoleID,
                    Users: userids
                }
               
            });

            return false;
        };


        var DeleteRoles = function (subRoleID, userids) {
            var urlString = '/Workflow/DeleteUserRoles';
            //if (arrayOfValues.length == 0)
            //    return false;

            $.ajax({
                type: "Post",
                url: urlString,
                data: {

                    subRole: subRoleID,
                    Users: userids
                }

            });

            return false;
        };


    </script>