The Framework Code

File List

{% set ajax = TRUE %}
{% set fwutils = TRUE %}
{% set fwdom = TRUE %}
{% set validate = TRUE %}
{% set usebootbox = FALSE %}

{% extends '@content/page.twig' %}

{% import '@content/iconmacro.twig' as i %}
{% import '@util/formmacro.twig' as f %}
{% import '@util/modalmacro.twig' as m %}

{% block setup %}
    const clicks = [
        ['delb', framework.dodelbean, ''],
        ['admb', framework.dotoggle, '{{constant('\\Config\\Framework::ADMINROLE')}}'],
        ['confirm', framework.dotoggle, 'confirm'],
        ['active', framework.dotoggle, 'active'],
        ['devb', framework.dotoggle, '{{constant('\\Config\\Framework::DEVELROLE')}}'],
        ['editb', framework.goedit],
        ['mailb', doMail],
    ];
    function doMail(e)
    {
        window.location = e.target.getAttribute('href');
    }
{% endblock setup %}

{% block onload %}
    fwdom.on('#adduform', 'submit', fwdom.nosubmit);
    fwdom.mkjQ('#adduform').parsley();
    fwdom.on('#addb', 'click', function(e){
        fwdom.stop(e);
        this.disabled = true;
        let data = {admin : 0, devel : 0};
        let aform = document.getElementById('adduform');
        for (let x of ['input:checked', 'input[type="text"]', 'input[type="password"]', 'input[type="email"]'])
        {
            aform.querySelectorAll(x).forEach(function(el, index){
                 data[el.getAttribute('name')] = el.value;
            });
        }
        framework.beanCreate('user', data, function(ret){
            bootstrap.Modal.getOrCreateInstance(document.getElementById('addu')).hide();
            framework.addElement(document.getElementById('utab'), 'tr', {'data-id': data},
                '<td>'+data.login+'</td>'+
                '<td><a href="mailto:'+data.email+'">'+data.email+'</a></td>'+
                '<td>'+framework.mktoggle('confirm', data.confirm)+'</td>'+
                '<td>'+framework.mktoggle('active', data.active)+'</td>'+
                '<td>'+framework.mktoggle('admb', data.admin)+'</td>'+
                '<td>'+framework.mktoggle('devb', data.devel)+'</td>'+
                '<td>{{i.edit('editb')}}</td>' +
                '<td>{{i.delete('delb')}}</td>'
            );
            framework.doBGFade('#utab:last-child', [245,255,159], [255,255,255], 'transparent', 75, 20, 4);
        }, 'addb');
    });
    document.getElementById('utab').addEventListener('click', function(e){ e.data = {bean: 'user', clicks: clicks}; framework.containerClick(e);});
{% endblock onload %}

{% if not page is defined %}
    {% set page = 1 %}
    {% set pagesize = 10 %}
{% endif %}

{% set pages = siteinfo.pagecount('user', pagesize) %}

{% block headerbody %}
    <h1>Users</h1>
{% endblock headerbody %}

{% block main %}
    <section class="row">
        <article class="offset-md-1 col-md-9">
            {% include '@util/paginate.twig' with { page : page, pagesize: pagesize, pages: pages} %}
            <table class="table table-striped table-hover">
                <thead>
                    <tr>
                        <th>Login</th>
                        <th>Email</th>
                        <th>Confirmed</th>
                        <th>Active</th>
                        <th>Admin</th>
                        <th>Developer</th>
                        <th colspan="2">&nbsp;</th>
                    </tr>
                </thead>
                <tbody id="utab">
                    {% for u in siteinfo.users(page, pagesize) %}
                        <tr data-id="{{u.id}}">
                            <td>{{u.login}}</td>
                            <td><a href="mailto:{{u.email}}" class="mailb">{{u.email}}</a></td>
                            <td>{{f.tick(u.isconfirmed, 'confirm')}}</td>
                            <td>{{f.tick(u.isactive, 'active')}}</td>
                            <td>{{f.tick(u.isadmin, 'admb')}}</td>
                            <td>{{f.tick(u.isdeveloper, 'devb')}}</td>
                            <td>{{i.edit('editb')}}</td>
                            <td>{{i.delete('delb')}}</td>
                        </tr>
                    {% else %}
                        <tr><td colspan="8">No users defined</td></tr>
                    {% endfor %}
                </tbody>
            </table>
            {% include '@util/paginate.twig' with { page : page, pagesize: pagesize, pages: pages} %}
            <p>{{m.invoke('addu', 'Add User')}}</p>
        </article>
    </section>
    {{m.open({id: 'addu', title: 'Add A New User'})}}
    <div class="modal-body">
        {{f.startform({id: 'adduform', method: 'post'})}}
            {{f.text({label: 'User Name', id: 'un', name: 'login', ph: 'username - alphanumeric characters only', required: TRUE, valid: {
                trigger: 'change',
                'remote-reverse': 'false',
                remote: base~'/ajax/unique/'~constant('Config\\Framework::USER')~'/login/{value}',
                'remote-message': 'That user name is not available',
                type: 'alphanum'
            } })}}
            {{f.password({label: 'Password', id: 'pw', name: 'password', ph: '************', required: TRUE})}}
            {{f.password({label: 'Repeat Password', id: 'rpw', name: 'repeat', ph: '************', required: TRUE, valid: {
                trigger: 'change',
                'equal-to': '#pw'
            } })}}
            {{f.email({label: 'Email Address', id: 'em', name: 'email', ph: 'pat@smith.com', valid: {trigger: 'change'}, required: TRUE})}}
            {{f.checkbox({label: 'Roles', group: TRUE, labels: ['Admin', 'Developer'], values: [1, 1], names: ['admin', 'devel']})}}
        {{f.endform()}}
    </div>
    {{m.close({action: 'Add', id: 'addb'})}}
{% endblock main %}

{% block pagefooter %}
{% endblock pagefooter %}