{{extend "rbac_man_roles_layout.html"}}

{{block content_main}}
{{use "jquery", css_only=True}}
{{use "jqutils", ajaxForm=True}}
{{include "inc_select2.html"}}
<style type="text/css">
<!--
#role-users {overflow:auto;}
#role-users li {list-style:none; float:left; margin: 2px 4px; padding: 4px; background-color:#e7eef8;}
#role-users li img{margin-right:4px;cursor:pointer;}
#role-permissions {overflow:auto;}
#role-permissions li {list-style:none; float:left; margin: 2px 4px; padding: 4px; background-color:#e7eef8;}
#role-permissions li img{margin-right:4px;cursor:pointer;}
-->
</style>

<div class="content">
    <div class="panel">
        <div class="panel-content">
            <h2>{{=_('Role')}}: {{=object.name}}</h2>
            <table class="table table-bordered">
                {{<< view.body}}
            </table>
            <a class="btn btn-primary" href="{{=url_for('plugs.rbac_man.views.RoleView.edit', id=object.id)}}">编辑</a>
            {{if not object.reserve:}}
                <a class="btn btn-blue" href="/config/roles/delete/{{=object.id}}">{{=_('Delete')}}</a>
            {{pass}}
        </div>
        
        <div class="panel-content">
            <h2 class="line">{{=_('Users List')}}</h2>
            <div id="role-users">
            {{for user in object.users.all().order_by('username'):}}
                <li class="rounded">
                    <img src="/static/images/cross_grey_small.png" rel="{{=object.id}}_{{=user.id}}"/>
                    <span class="role-name">{{=user.username}}</span>
                    {{if hasattr(user, 'nickname') and user.nickname:}}
                        <span class="role-nickname">({{=user.nickname}})</span>
                    {{pass}}
                </li>
            {{pass}}
            </div>
            <div class="separate">
                <input id="role-username" type="hidden"></input>
                <a class="btn btn-primary" href="javascript:void(0)" id="role-add">{{=_('Add')}}</a>
            </div>
            <div class="separate">
                <textarea id="role-usernames" style="width:400px;height:200px"></textarea>
                <div>说明:支持多帐号人名，逗号分割或一行一个名字，批量增加权限，比如zhangsan,lisi,wangwu</div>
                <a class="btn btn-primary" href="javascript:void(0)" id="role-batch-add">批量增加</a>
                
            </div>
        </div>
        
        <div class="panel-content">
            <h2 class="line">{{=_('Permissions')}}</h2>
            <div id="role-permissions">
            {{for p in object.permissions.all().order_by('name'):}}
                <li class="rounded"><img src="/static/images/cross_grey_small.png" rel="{{=object.id}}_{{=p.id}}"/><span class="role-name" title="{{=p.description}}">{{=p.name}}</span></li>
            {{pass}}
            </div>
            <div class="separate">
                <input id="role-perm" type="hidden"></input>
                <a class="btn btn-primary" href="javascript:void(0)" id="perm-add">{{=_('Add')}}</a>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    var del_user = function(){
        var self = $(this);
        var ids = $(this).attr('rel').split('_');
        var user_id = ids[1];
        var role_id = ids[0];
        $.ajax({
            type: 'POST',
            url: '/admin/roles/deluser',
            data: {user_id:user_id, 'role_id':role_id},
            dataType: 'json',
            success: function(r){
                if(r.success){
                    show_message(r.message);
                    self.parent('li').remove();
                }else{
                    show_message(r.message, 'error');
                }
            }
        });
    }
    
    $(function(){
        $('#role-users img').click(del_user);
        $('#perm-add').click(function(){
            if (!$('#role-perm').val()){
                alert('Please select an permission first.');
            }else{
                $.ajax({
                    type: 'POST',
                    url: '/admin/roles/addperm',
                    data: {perm_id:$('#role-perm').val(), 'role_id':{{=object.id}}},
                    dataType: 'json',
                    success: function(r){
                        if(r.success){
                            show_message(r.message);
                            var e = $(template('<li class="rounded"><img src="/static/images/cross_grey_small.png" rel="{{=object.id}}_${id}"/><span class="role-name">${name}</span></li>', r.data));
                            e.appendTo($('#role-permissions')).effect('highlight', 5000);
                            e.find('img').click(del_user);
                            $('.rselect').rselect('clear');
                        }else{
                            show_message(r.message, 'error');
                        }
                    }
                });
            }
        });
    });
</script>
<script type="text/javascript">
    var del_perm = function(){
        var self = $(this);
        var ids = $(this).attr('rel').split('_');
        var perm_id = ids[1];
        var role_id = ids[0];
        $.ajax({
            type: 'POST',
            url: '/admin/roles/delperm',
            data: {perm_id:perm_id, 'role_id':role_id},
            dataType: 'json',
            success: function(r){
                if(r.success){
                    show_message(r.message);
                    self.parent('li').remove();
                }else{
                    show_message(r.message, 'error');
                }
            }
        });
    }
    
    $(function(){
        
        simple_select2('#role-username', {ajax:{url:'/users/search'}, width:'200px'});
        simple_select2('#role-perm', {ajax:{url:'/admin/permissions/search'}, width:'200px', dataLabel:'title'});

        $('#role-permissions img').click(del_perm);
        $('#role-add').click(function(){
            if (!$('#role-username').val()){
                alert('Please select an user first.');
            }else{
                $.ajax({
                    type: 'POST',
                    url: '/admin/roles/adduser',
                    data: {user_id:$('#role-username').val(), 'role_id':{{=object.id}}},
                    dataType: 'json',
                    success: function(r){
                        if(r.success){
                            show_message(r.message);
                            var userTmpl = [
                                '<li class="rounded">',
                                '<img src="/static/images/cross_grey_small.png" rel="{{=object.id}}_${id}"/>',
                                '<span class="role-name">${username}</span>'
                            ];
                            if(r.data.nickname) {
                                userTmpl.push('<span class="role-nickname">(${nickname})</span>');
                            }
                            userTmpl.push('</li>');
                            var e = $(template(userTmpl.join(''), r.data));
                            e.appendTo($('#role-users')).effect('highlight', 5000);
                            e.find('img').click(del_user);
                            $('.rselect').rselect('clear');
                        }else{
                            show_message(r.message, 'error');
                        }
                    }
                });
            }
        });
        $("#role-batch-add").click(function(){
            if(!$("#role-usernames").val()) {
                alert('请先填写好批量增加用户列表.');
            } else {
                $.ajax({
                    type: 'POST',
                    url: '/admin/roles/addbatchuser',
                    data: {'user_ids':$('#role-usernames').val(), 'role_id':{{=object.id}}},
                    dataType: 'json',
                    
                    success: function(r){
                        if(r.success){
                            show_message(r.message);
                            document.location.reload();
                        }else{
                            show_message(r.message, 'error');
                        }

                    }
                });
            }
        });
    });
</script>

{{end}}
