369 lines
11 KiB
Plaintext
369 lines
11 KiB
Plaintext
@model IEnumerable<Fab2ApprovalSystem.Models.Role>
|
|
|
|
@{
|
|
ViewBag.Title = "Roles Assignment";
|
|
}
|
|
@{
|
|
Layout = "_AdminLayout.cshtml";
|
|
}
|
|
|
|
|
|
<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 type="text/javascript" src="~/Scripts/jqwidgets/jqxpanel.js"></script>
|
|
<script type="text/javascript" src="~/Scripts/jqwidgets/jqxtree.js"></script>
|
|
|
|
@*<nav class="navbar navbar-default" role="navigation" style="font-size: 11px">
|
|
<div class="container-fluid">
|
|
|
|
<ul class="nav navbar-nav" id="myTab">
|
|
<li><a href=@Url.Action("Index", "Admin")>Manage Users</a></li>
|
|
</ul>
|
|
|
|
<!-- /.navbar-collapse -->
|
|
</div><!-- /.container-fluid -->
|
|
</nav>*@
|
|
|
|
<div class="row">
|
|
<div class="col-md-2">
|
|
<div class="control-group">
|
|
<label for="jqxTreeWidget">WorkFlow Roles</label>
|
|
<div class="controls">
|
|
<div id='jqxTreeWidget'>
|
|
</div>
|
|
</div>
|
|
<input type="checkbox" id="chkShowInactive"/><label for="chkShowInactive">Show Inactive Roles?</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<div class="control-group">
|
|
<label for="lstUserRoles" id="selectionlog" style="font-size: 10px; font-family: Verdana; font-weight: bold; color:crimson">Current Users:</label>
|
|
|
|
<div class="controls">
|
|
<div id='lstUserRoles'>
|
|
</div>
|
|
</div>
|
|
<input style="margin-top: 20px;" type="button" id='jqxButtonRemove' value="Remove selected items" />
|
|
</div>
|
|
</div>
|
|
<div class="col-md-8">
|
|
<div class="control-group">
|
|
<label for="lstAllUsers">All Users</label>
|
|
<div style="font-size: 10px; font-family: Verdana; font-weight: bold; color:crimson" ></div>
|
|
<div class="controls">
|
|
<div id='lstAllUsers'>
|
|
</div>
|
|
<input style="margin-top: 20px;" type="button" id='jqxButtonAdd' value="Add selected items" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script language="javascript">
|
|
|
|
var currentSubRoleID;
|
|
|
|
$("#chkShowInactive").click(function () {
|
|
LoadTree();
|
|
});
|
|
|
|
$(document).ready(function () {
|
|
var url = "/Admin/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
|
|
});
|
|
|
|
|
|
|
|
// POPLUATE THE TREE
|
|
LoadTree();
|
|
|
|
});
|
|
|
|
function LoadTree() {
|
|
|
|
var newurl = "/Admin/AllSubRoles";
|
|
var newsource =
|
|
{
|
|
datatype: "json",
|
|
datafields: [
|
|
{ name: 'id' },
|
|
{ name: 'parentid' },
|
|
{ name: 'text' },
|
|
{ name: 'value' }
|
|
],
|
|
id: 'id',
|
|
url: newurl,
|
|
data: {
|
|
showInactiveRoles: $("#chkShowInactive").is(":checked"),
|
|
},
|
|
async: false
|
|
|
|
|
|
};
|
|
|
|
var newdataAdapter = new $.jqx.dataAdapter(newsource);
|
|
|
|
// perform Data Binding.
|
|
newdataAdapter.dataBind();
|
|
var records = newdataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label' }]);
|
|
|
|
$('#jqxTreeWidget').jqxTree({ theme: "arctic", source: records, height: '400px', width: '200px' })
|
|
|
|
.on('select', function (event) {
|
|
var args = event.args;
|
|
var item = $('#jqxTreeWidget').jqxTree('getItem', args.element);
|
|
var parentitem = $('#jqxTreeWidget').jqxTree('getItem', item.parentElement);
|
|
|
|
if (parentitem != undefined) {
|
|
//$("#selectionlog").children().remove();
|
|
//$("#selectionlog").text('Current Users:' + parentitem.label + ' (' + item.label + ')');
|
|
$("#selectionlog").text('Current Users:' + parentitem.label + ' (' + item.label + ')');
|
|
|
|
displayUserRoles(item.id);
|
|
currentSubRoleID = item.id;
|
|
|
|
//alert(parentitem.label);
|
|
}
|
|
|
|
});
|
|
;
|
|
// 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 = "/Admin/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 tempValue;
|
|
var items = $("#lstUserRoles").jqxListBox('getSelectedItems');
|
|
if (items.length > 0) {
|
|
for (var i = items.length - 1; i >= 0; i--) {
|
|
|
|
tempValue = items[i].value;
|
|
$("#lstUserRoles").jqxListBox('removeItem', tempValue);
|
|
if (userids == null)
|
|
userids = tempValue;
|
|
else
|
|
userids += "~" + tempValue;
|
|
break;
|
|
|
|
};
|
|
|
|
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 = '/Admin/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 = '/Admin/DeleteUserRoles';
|
|
//if (arrayOfValues.length == 0)
|
|
// return false;
|
|
|
|
$.ajax({
|
|
type: "Post",
|
|
url: urlString,
|
|
data: {
|
|
|
|
subRole: subRoleID,
|
|
Users: userids
|
|
}
|
|
|
|
});
|
|
|
|
return false;
|
|
};
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|