(refs #241)Checkbox for manager is replaced with toggle buttons

This commit is contained in:
takezoe
2014-03-06 02:46:40 +09:00
parent 9bd1f0a492
commit 716eddac7b

View File

@@ -31,8 +31,11 @@
<ul id="member-list" class="collaborator"> <ul id="member-list" class="collaborator">
@members.map { case (userName, isManager) => @members.map { case (userName, isManager) =>
<li data-name="@userName"> <li data-name="@userName">
<input type="checkbox" class="is_manager" id="is_manager_@userName" @if(isManager){checked}/> <div class="btn-group is_manager" data-toggle="buttons-radio">
<a href="@path/@url(userName)">@userName</a> <button type="button" class="is_manager_@userName btn btn-default btn-mini @if(!isManager){active}" value="false">Member</button>
<button type="button" class="is_manager_@userName btn btn-default btn-mini @if(isManager){active}" value="true">Manager</button>
</div>
<a href="@url(userName)">@userName</a>
<a href="#" class="remove">(remove)</a> <a href="#" class="remove">(remove)</a>
</li> </li>
} }
@@ -62,6 +65,10 @@
} }
<script> <script>
$(function(){ $(function(){
$('input[type=submit]').click(function(){
updateMembers();
});
$('#addMember').click(function(){ $('#addMember').click(function(){
$('#error-memberName').text(''); $('#error-memberName').text('');
var userName = $('#memberName').val(); var userName = $('#memberName').val();
@@ -88,14 +95,13 @@ $(function(){
// add member // add member
$('#member-list').append($('<li>') $('#member-list').append($('<li>')
.data('name', userName) .data('name', userName)
.append($('<input type="checkbox" class="is_manager">').attr('id', 'is_manager_' + userName)) .append($('<div class="btn-group is_manager" data-toggle="buttons-radio">')
.append($('<button type="button" class="btn btn-default btn-mini active" value="false">Member</button>').addClass('is_manager_' + userName))
.append($('<button type="button" class="btn btn-default btn-mini" value="true">Manager</button>').addClass('is_manager_' + userName)))
.append(' ')
.append($('<a>').attr('href', '@path/' + userName).text(userName)) .append($('<a>').attr('href', '@path/' + userName).text(userName))
.append(' ') .append(' ')
.append($('<a>').attr('href', '#').addClass('remove').text('(remove)'))); .append($('<a>').attr('href', '#').addClass('remove').text('(remove)')));
$('#members').val('');
// update hidden value
updateMembers();
} else { } else {
$('#error-memberName').text('User does not exist.'); $('#error-memberName').text('User does not exist.');
} }
@@ -103,23 +109,14 @@ $(function(){
}); });
$(document).on('click', '.remove', function(){ $(document).on('click', '.remove', function(){
// remove member
$(this).parent().remove(); $(this).parent().remove();
// update hidden value
updateMembers();
$('#members').val(members);
}); });
// Don't submit form by ENTER key // Don't submit form by ENTER key
$('#memberName').keypress(function(e){ $('#memberName').keypress(function(e){
console.log(e.keyCode);
return !(e.keyCode == 13); return !(e.keyCode == 13);
}); });
$('.is_manager').change(function(){
updateMembers();
});
$('#delete').click(function(){ $('#delete').click(function(){
return confirm('Once you delete this group, there is no going back.\nAre you sure?'); return confirm('Once you delete this group, there is no going back.\nAre you sure?');
}); });
@@ -127,9 +124,10 @@ $(function(){
function updateMembers(){ function updateMembers(){
var members = $('#member-list li').map(function(i, e){ var members = $('#member-list li').map(function(i, e){
var userName = $(e).data('name'); var userName = $(e).data('name');
return userName + ':' + $('#is_manager_' + userName).prop('checked'); return userName + ':' + $('.is_manager_' + userName + '.active').attr('value');
}).get().join(','); }).get().join(',');
$('#members').val(members); $('#members').val(members);
return true;
} }
}); });
</script> </script>