Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
197 lines (186 sloc) 8.07 KB
<!DOCTYPE html>
<html>
<head>
<!-- JS -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
// Add group to selected groups
$('#groupAddBtn').click(function() {
var options = $("select#users option:selected").clone();
if (options.length == 0) {
return alert("Please select one or more users to add");
}
var options_full_name = $("select#users_full_name option:selected").clone();
//debugger;
//Clone selected user list
var options_selected = $("select#users_selected").clone();
// We need to avoid duplicate for that we need list of already selected users and list of selected users which
// intent to add after clicking on add button
// we need to compare the entries from to be copied with selected user names and in case match found (already in selected list) then give a message that user is already selected .. also need to be fixed for multiple selection ..how we will give the message ..single or multiple?
// Initialize an array to hold the newly selected users and already selected users
var users_newly_selected = [];
var users_already_selected = [];
//Fetch full user list
var users_all = document.getElementById('users');
var len_users_already_selected = document.getElementById('users_selected').options.length;
// Loop through all the users and check for selected users on UI and store them in a array
for (var i = 0; i < users_all.length; i++) {
if (users_all.options[i].selected) {
//console.log("User all val",document.getElementById('users').options[i].attr('value'));
users_newly_selected.push(users_all.options[i].text);
}
}
// Loop through already selected user list and store them in an array
for (var i = 0; i < len_users_already_selected; i++) {
var user_already_selected_text = document.getElementById('users_selected').options[i].text;
users_already_selected.push(user_already_selected_text);
}
// Now make a logic to check if user in users_newly_selected in present in users_already_selected list. This is to ensure that we don't copy duplicate and do not copy to right side list if user is already there
var users_already_exists_list = [];
//var users_newly_selected_updated = [];
// list of users which are already in selected list we should not copy them in selected list
// Logic to support IE 11 because of crash as => and included are not supported
//users_already_exists_list = users_newly_selected.filter(function(n) { return users_already_selected.indexOf(n) >=0});
users_already_exists_list = users_newly_selected.filter((n) => users_already_selected.includes(n))
//users_full_name_already_exists_list = users_full_name_newly_selected.filter((n) => users_full_name_already_selected.includes(n))
//End of alternate logic to support IE11
//warn user
if (users_already_exists_list.length != 0) {
alert('These users were already member of the group: '+users_already_exists_list.join(", "));
}
// Remove already selected user from the master selected list
for (var j = 0; j < users_already_exists_list.length; j++){
users_newly_selected.splice($.inArray(users_already_exists_list[j], users_newly_selected),1);
users_full_name_newly_selected.splice($.inArray(users_full_name_already_exists_list[j], users_full_name_newly_selected),1);
}
// Update user selected select with new entries
$.each(users_newly_selected, function(key, value) {
$('select#users_selected')
.append($("<option></option>")
.attr("value",value)
.attr("class",value)
.attr("title",value)
.text(value));
});
//update array for filter with new additions
filter_users_data_selected();
});
// Remove group from selected groups box
$('#groupRemoveBtn').click(function() {
if ($('select#users_selected option:selected').length == 0) {
return alert("Please select one or more users to remove");
}
$('select#users_selected option:selected').remove();
});
});
</script>
<script type="text/javascript">
//globals
var options_org_selected = [];
var options_all = [];
var options_selected = [];
var options_full_name = [];
var select;
var select_selected;
var select_full_name;
var select_selected_full_name;
// Store data of both the select box while loading this is needed for filtering
function filter_users_data() {
select = document.getElementById("users");
for (var i = 0; i < select.options.length; i++) {
var txt = select.options[i].text;
options_all.push(txt);
}
} // end of filter_users_data
function filter_users_data_selected() {
// Clear array needed in case of new additions in the selected list
options_selected = [];
select_selected = document.getElementById("users_selected");
for (var i = 0; i < select_selected.options.length; i++) {
var txt = select_selected.options[i].text;
options_selected.push(txt);
}
} // end of filter_users_data_selected
// Filter users based on provided keyword .. we do search on each char and both on login name and full name finally we sync the filtered user full name list with the login name
function filter_users() {
var keyword = document.getElementById("search").value;
console.log("keyword",keyword);
select.innerHTML = '';
select_full_name.innerHTML = '';
var keyword_regx = new RegExp(keyword.toLowerCase());
// loop through all the users full name which we have made previously
for (var j = 0; j < options_full_name.length; j++) {
if ((keyword_regx.test(options_full_name[j].toLowerCase())) ||
(keyword_regx.test(options_all[j].toLowerCase()))){
var temp = document.createElement("option");
var att = document.createAttribute("value");
att.value = options_full_name[j];
temp.setAttributeNode(att);
temp.innerHTML = options_full_name[j];
select_full_name.appendChild(temp);
// Sync filtered user full name list with user login list
var temp1 = document.createElement("option");
var att1 = document.createAttribute("value");
att1.value = options_all[j];
temp1.setAttributeNode(att1);
temp1.innerHTML = options_all[j];
select.appendChild(temp1);
}
}
} // end of filter_users
// Filter selected users based on provided keyword
function filter_users_selected() {
var keyword = document.getElementById("search_selected").value;
select_selected.innerHTML = '';
select_selected_full_name.innerHTML = '';
var keyword_regx = new RegExp(keyword.toLowerCase());
// loop through all the users full name which we have made previously
for (var j = 0; j < options_full_name_selected.length; j++) {
if ((keyword_regx.test(options_full_name_selected[j].toLowerCase())) ||
(keyword_regx.test(options_selected[j].toLowerCase()))){
var temp = document.createElement("option");
var att = document.createAttribute("value");
att.value = options_full_name_selected[j];
temp.setAttributeNode(att);
temp.innerHTML = options_full_name_selected[j];
select_selected_full_name.appendChild(temp);
// Sync filtered user full name list with user login list
var temp1 = document.createElement("option");
var att1 = document.createAttribute("value");
att1.value = options_selected[j];
temp1.setAttributeNode(att1);
temp1.innerHTML = options_selected[j];
select_selected.appendChild(temp1);
}
}
} // end of filter_selected
</script>
<title>Demo</title>
</head>
<body>
<h1>Demo</h1>
<table cellspacing="0" cellpadding="5" border="0">
<tr>
<td>
<select name="users" id="users" multiple size="10" style="min-width:40mm;width:auto;">
<option title="User1" value="User1">User1</option>
<option title="User2" value="User2">User2</option>
<option title="User3" value="User3">User3</option>
<option title="User4" value="User4">User4</option>
<option title="User5" value="User5">User5</option>
</select>
</td>
<td width="50">
<input type='button' value=">>" id="groupAddBtn">
<br><br>
<input type='button' value="<<" id="groupRemoveBtn">
</td>
<td>
<select name="users_selected" id="users_selected" multiple size="10" style="min-width:40mm;width:auto;"> </select>
</td>
</tr>
</table>
</div>
</body>
</html>
You can’t perform that action at this time.