The Framework Code

twigs/framework/admin/roco.twig

File List

{% set ajax = TRUE %}
{% set fwutils = TRUE %}
{% set validate = TRUE %}
{# Role names and Context names pages are identical apart from the typology #}

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

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

{% set ctype = type|capitalize %}

{% block setup %}
    const clicks = [
        ['delb', framework.dodelbean, ''],
        ['fixed', framework.dotoggle, 'fixed'],
    ]
{% endblock setup %}

{% block onload %}
    fwdom.mkjQ('#nrform').parsley();
    fwdom.on('#addb', 'click', function(e){
        fwdom.stop(e);
        const btn = this;
        btn.disabled = true;
        const pn = document.getElementById('nrname').value;
        if (!pn.match(/^[a-zA-Z][a-zA-Z0-9]*$/))
        {
            framework.alert('"'+pn+'" is not a valid {{beantype}} name. Letters and numbers only');
            btn.disabled = false;
            return;
        }
        let sp = null;
        for (let r of document.getElementsByClassName('rname'))
        {
            let t = r.innerHTML;
            if (t == pn)
            {
                framework.alert('That {{beantype}} name already exists');
                btn.disabled = false;
                return;
            }
            if (t > pn)
            {
                sp = r;
                break;
            }
        };

        framework.ajax('{{base}}/ajax/bean/{{beantype}}/', {
            method: 'post',
            data: {name : pn},
        }).done(function(data){
            framework.addElement(document.getElementById('rtab'), 'tr', {'data-id': data},
                '<td>'+pn+'</td><td>'+framework.mktoggle('fixed', 0)+'</td><td>{{i.delete('delb')}}</td>', sp);
            bootstrap.Modal.getOrCreateInstance(document.getElementById('nroco')).hide();
        }).fail(function(jqXHR, textStatus, errorThrown){
            framework.alert('<h3>Failed to create new {{beantype}} name</h3>'+jqXHR.responseText);
        }).always(function(e){
            btn.disabled = false;
        });
    });
    fwdom.on('#rtab', 'click', function(e){e.data = {bean: '{{beantype}}', clicks}; framework.containerClick(e);});

    fwdom.on('#nroco', 'show.bs.modal', function(e){
        document.getElementById('nrform').reset();
    });
{% endblock onload %}

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

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

{% block headerbody %}
    <h1>{{ctype}} Names</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>Name</th>
                        <th>Fixed</th>
                        <th>&nbsp;</th>
                    </tr>
                </thead>
                <tbody id="rtab">
                    {% for r in attribute(siteinfo, fcall, [page, pagesize]) %}
                        <tr data-id="{{r.id}}">
                            <td class="rname">{{r.name}}</td>
                            <td>{{f.tick(r.fixed, 'fixed')}}</td>
                            <td>{% if r.fixed %}&nbsp;{% else %}{{i.delete('delb')}}{% endif %}</td>
                        </tr>
                    {% else %}
                        <tr><td colspan="3">No {{type}} names defined</td></tr>
                    {% endfor %}
                </tbody>
            </table>
            {% include '@util/paginate.twig' with { page : page, pagesize: pagesize, pages: pages} %}
            {{m.invoke('nroco', "Add #{ctype} Name")}}
        </article>
    </section>
    {{m.open({id: 'nroco', title: "New #{ctype} Name"})}}
    <div class="modal-body">
        {{f.startform({method: 'post', id: 'nrform', on:{submit: 'function(e){fwdom.stop(e);}'} })}}
            <div class="form-group">
                {{f.text({id: 'nrname', label: 'Name', ph: ctype ~ ' Name', required: TRUE, valid: { trigger: 'change',
                'remote-reverse': 'false', remote: "#{base}/ajax/unique/#{beantype}/name/{value}",
                'remote-message': "That #{type} name is not available", type: 'alphanum'} })}}
            </div>
       {{f.endform()}}
    </div>
    {{m.close({action: 'Add', id: 'addb'})}}
{% endblock main %}

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