Fix error handling for Import Operation.
Remove some old icons
This commit is contained in:
Paulo Gustavo Veiga
@@ -1,39 +1,209 @@
|
||||
<%@ include file="/jsp/init.jsp" %>
|
||||
<style type="text/css">
|
||||
#sharingContainer {
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
overflow: scroll;
|
||||
height: 180px;
|
||||
width: 100%;
|
||||
overflow-y: scroll;
|
||||
border-top: 1px solid #d3d3d3;
|
||||
border-bottom: 1px solid #d3d3d3;
|
||||
}
|
||||
|
||||
#sharingContainer table {
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
#collabEmails {
|
||||
float: left;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
#roleBtn {
|
||||
float: left;
|
||||
margin: 0px 10px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<p>Who has access</p>
|
||||
<p><strong>Who has access:</strong></p>
|
||||
|
||||
<div id="sharingContainer">
|
||||
<table class="table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Name</td>
|
||||
<td>Email</td>
|
||||
<td><a href="">Action</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<table class="table" id="collabsTable">
|
||||
</table>
|
||||
|
||||
</div>
|
||||
|
||||
<form method="post" id="dialogMainForm" action="#" class="well form-inline">
|
||||
<label for="collabEmails" class="control-label">Add People:
|
||||
<input type="text" id="collabEmails" name="collabEmail" placeholder="Enter collaborators emails separared by comas."/>
|
||||
</label>
|
||||
</form>
|
||||
<div class="well">
|
||||
<div id="errorMsg" class="alert alert-error"></div>
|
||||
<p>Add People: </p>
|
||||
<input type="text" id="collabEmails" name="collabEmails"
|
||||
placeholder="Enter collaborators emails separared by comas."/>
|
||||
|
||||
<div class="btn-group" id="roleBtn">
|
||||
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Can edit
|
||||
<span class="caret"> </span>
|
||||
</a>
|
||||
<ul class="dropdown-menu" data-role="editor" id="shareRole">
|
||||
<li><a href="#" data-role="editor">Can edit</a></li>
|
||||
<li><a href="#" data-role="viewer">Can view</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<button id="addBtn" class="btn btn-primary">Add</button>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
$("#errorMsg").hide();
|
||||
|
||||
function onClickShare(aElem) {
|
||||
var role = $(aElem).attr('data-role');
|
||||
var roleDec = role == 'viewer' ? "Can view" : "Can edit";
|
||||
var btnElem = $(aElem).parent().parent().parent().find(".dropdown-toggle");
|
||||
btnElem.text(roleDec).append(' <span class="caret"> </span>');
|
||||
return role;
|
||||
}
|
||||
|
||||
function addCollaborator(email, role) {
|
||||
// Add row to the table ...
|
||||
var tableElem = $("#collabsTable");
|
||||
var rowTemplate = '\
|
||||
<tr data-collab="{email}" data-role="{role}">\
|
||||
<td>{email}</td>\
|
||||
<td>\
|
||||
<div class="btn-group">\
|
||||
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#""></a>\
|
||||
<ul class="dropdown-menu">\
|
||||
<li><a href="#" data-role="editor">Can edit</a></li>\
|
||||
<li><a href="#" data-role="viewer">Can view</a></li>\
|
||||
</ul>\
|
||||
</div>\
|
||||
</td>\
|
||||
<td><a href="#">x</a></td>\
|
||||
</tr>';
|
||||
|
||||
var rowStr = rowTemplate.replace(/{email}/g, email);
|
||||
rowStr = rowStr.replace(/{role}/g, role);
|
||||
var elem = tableElem.append(rowStr);
|
||||
|
||||
// Register change role event ...
|
||||
var rowElem = $("#collabsTable tr:last");
|
||||
$(rowElem.find(".dropdown-menu a").click(function() {
|
||||
var role = onClickShare(this);
|
||||
rowElem.attr('data-role', role);
|
||||
event.preventDefault();
|
||||
}));
|
||||
rowElem.find('.dropdown-menu a[data-role="' + role + '"]').click();
|
||||
|
||||
// Register remove event ...
|
||||
rowElem.find("td:last a").click(function(event) {
|
||||
var email = rowElem.attr('data-collab');
|
||||
removeCollab(email);
|
||||
event.preventDefault();
|
||||
});
|
||||
}
|
||||
|
||||
var removeCollab = function(email) {
|
||||
// Remove html entry ...
|
||||
$('#collabsTable tr[data-collab="' + email + '"]').detach();
|
||||
};
|
||||
|
||||
$(function() {
|
||||
var loadedCollabs = [
|
||||
{email:'paulo1@pveiga.com.ar',role:'viewer'},
|
||||
{email:'paulo2@pveiga.com.ar',role:'editor'},
|
||||
{email:'paulo3@pveiga.com.ar',role:'editor'}
|
||||
];
|
||||
|
||||
// Init table will all values ...
|
||||
for (var i = 0; i < loadedCollabs.length; i++) {
|
||||
var collab = loadedCollabs[i];
|
||||
addCollaborator(collab.email, collab.role);
|
||||
}
|
||||
});
|
||||
|
||||
$("#addBtn").click(function(event) {
|
||||
var i,email;
|
||||
var emailsStr = $("#collabEmails").val();
|
||||
var role = $("#shareRole").attr('data-role');
|
||||
|
||||
// Clear previous state ...
|
||||
$("#errorMsg").text("").hide();
|
||||
|
||||
// Split emails ...
|
||||
var valid = true;
|
||||
if (emailsStr.length > 0) {
|
||||
var emails = jQuery.grep(emailsStr.split(/[;|,|\s]/), function(val) {
|
||||
return val.length > 0
|
||||
});
|
||||
|
||||
var model = buildCollabModel();
|
||||
for (i = 0; i < emails.length; i++) {
|
||||
email = emails[i];
|
||||
if (!isValidEmailAddress(email)) {
|
||||
reportError("Invalid email address:" + email);
|
||||
valid = false;
|
||||
}
|
||||
|
||||
// Is there a collab with the same email ?
|
||||
var useExists = jQuery.grep(model,
|
||||
function(val) {
|
||||
return val.email == email;
|
||||
}).length > 0;
|
||||
if (useExists) {
|
||||
reportError(email + " is already in the shared list");
|
||||
valid = false;
|
||||
}
|
||||
|
||||
}
|
||||
} else {
|
||||
reportError("Emails address can not be empty");
|
||||
valid = false;
|
||||
}
|
||||
|
||||
|
||||
if (valid) {
|
||||
// Emails are valid, add them as rows ...
|
||||
$("#collabEmails").val("");
|
||||
for (i = 0; i < emails.length; i++) {
|
||||
email = emails[i];
|
||||
addCollaborator(email, role);
|
||||
}
|
||||
} else {
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
// Register change event ...
|
||||
$("#shareRole a").click(function() {
|
||||
var role = onClickShare(this);
|
||||
$(this).parent().attr('data-role', role);
|
||||
|
||||
event.preventDefault();
|
||||
});
|
||||
|
||||
function isValidEmailAddress(emailAddress) {
|
||||
var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
|
||||
return pattern.test(emailAddress);
|
||||
}
|
||||
|
||||
function reportError(msg) {
|
||||
$('#errorMsg').show();
|
||||
$('#errorMsg').append("<p>" + msg + "</p>");
|
||||
}
|
||||
|
||||
function buildCollabModel() {
|
||||
return $('#collabsTable tr').map(function() {
|
||||
return {
|
||||
email: $(this).attr('data-collab'),
|
||||
role: $(this).attr('data-role')
|
||||
};
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
// Hook for interaction with the main parent window ...
|
||||
var submitDialogForm = function() {
|
||||
$('#dialogMainForm').submit();
|
||||
|
||||
console.log(buildCollabModel());
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user