The Framework Code

File List

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

{% set x = context.web.addCSP('script-src', "'unsafe-inline'") %}

{% set allownew = view is not defined and object is not defined %}
{% set inline = view is not defined %}

{% set validate = allownew %}
{% set editable = FALSE %}

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

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

{% block css %}
    <link rel="stylesheet" href="{{assets}}/css/inline.min.css"/>
{% endblock css %}

{% block scripts %}
    <script src="{{assets}}/js/fw-editable.js?v=1"></script>
{% endblock scripts %}

{% block setup %}
    {%if inline %} {# only want this if we are doing inline edits  #}
        function mkinline(type, name, msg, id, value)
        {
            return '{{f.editable({type: f.wrap('type'), field: f.wrap('name'), title: f.wrap('msg'), key: f.wrap('id'), value: f.wrap('value')})}}';
        }
    {% endif %}
{% endblock setup %}

{% block onload %}
    {%if inline %}
        document.querySelectorAll('.ppedit').forEach(function(edb){
            fweditable.editable(edb, {
                op: 'bean',
                bean: '{{constant('Config\\Framework::PAGE')}}',
                source: kname,
                update: fweditable.editUpdate
            });
        });
        document.querySelectorAll('.tabppedit').forEach(function(edb){
            fweditable.editable(edb, {
                op: 'table',
                bean: '{{constant('Config\\Framework::PAGE')}}',
                source: kname,
                update: fweditable.editUpdate
            });
        });
    {% endif %}
    {% if allownew %}
        fwdom.on('#nfform', 'submit', fwdom.nosubmit);
        fwdom.mkjQ('#nfform').parsley();
        fwdom.on('#addb', 'click', function(e){
            fwdom.stop(e);
            const pn = document.getElementById('nfname').value.toLowerCase();
            let sp = null;
            for (let f of document.getElementsByClasssName('fname'))
            {
                const t = f.innerHTML;
                if (t == pn)
                {
                    framework.alert('That field already exists');
                    return;
                }
                if (t > pn)
                {
                    sp = this;
                    break;
                }
            }
        })
        fwdom.on('#nfield', 'show.bs.modal', function(e){
            document.getElementById('nfform).reset();
        })
    {% else %}
        $('#searchb').on('click', function(e){
            fwdom.stop(e);
            framework.ajax(base + '/ajax/tablesearch/{{bean.name}}'+'/'+document.getElementById('fname').value+'/'+document.getElementById('fop').value, {
                method: 'get',
                data: {value:  document.getElementById('fval').value},
            }).done(function(data){
                var bdy = document.getElementById('sres'.querySelector('article');
                if (data.length == 0)
                {
                    bdy.innerHtml = '<div class="alert alert-warning">No results</div>';
                }
                else
                {
                    htm = ''
                    for (let bn of data)
                    {
                        htm += '<table class="table table-striped table-hover border my-2"><tbody>';
                        for (var fld in bn)
                        {
                            htm += '<tr><td width="10em">' + fld + '</td><td>' + bn[fld] + '</td></tr>';
                        }
                        bdy.innerHTML = htm + '</tbody></table>';
                    }
                }
                $('#tsearch').modal('hide');
            }).fail(function(jx){
                framework.alert('<h3>Search failed</h3>'+jx.responseText);
            });
        });
    {% endif %}
{% endblock onload %}

{% block headerbody %}
    <h1>Bean &ldquo;{{bean.name}}&rdquo;</h1>
{% endblock headerbody %}

{% set foptions = [] %}
{% block main %}
    {% include '@util/message.twig' with {userow: ''} %}
    <section class="row">
        <article class="mx-auto col">
            <table class="table table-responsive table-striped">
                <tbody>
                    {% for name,type in bean.fields %}
                        {% set foptions = foptions|merge([{value: name}]) %}
                        <tr>
                            <td class="fname">{% if view is defined or name == 'id' %}{{name}}{% else %}{{f.editable({type: 'text', field: 'name', title: 'Enter new field name', key: name, value: name, class: 'tabppedit'})}}{% endif %}</td>
                            <td>{% if view is defined or name == 'id' %}{{type}}{% else %}{{f.editable({type: 'text', field: 'type', title: 'Enter new field type', key: name, value: type, class: 'tabppedit'})}}{% endif %}</td>
                            {% if object is defined %}
                                {% set x = attribute(object, name) %}
                                {% if name ends with '_id' %}
                                    {% set xn = name|split('_') %}
                                    <td><a href="{{base}}/admin/{{ view is defined ? 'view' : 'edit'}}/table/{{xn[0]}}/{{x}}">{{xn[0]}} {{x}}</a></td>
                                {% else %}
                                    <td>{% if view is defined  or name == 'id' %}{{x}}{% else %}{{f.editable({type: 'text', field: name, title: 'Enter '~name, key: object.getID, value: x, class: 'ppedit'})}}{% endif %}</td>
                                {% endif %}
                            {% endif %}
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
            {% if allownew %}
                <p>{{m.invoke('#nfield', 'Add Field')}}</p>
            {% else %}
                <p>{{m.invoke('#tsearch', 'Search')}}</p>
            {% endif %}
        </article>
    </section>
    {% if allownew %}
        {{m.open({is: 'nfield', title: 'New Field'})}}
        <div class="modal-body">
            <form action="#" method="POST" id="nfform">
                {{f.text({label: 'Name', id: 'nfname', ph: 'Field Name', required: TRUE, valid: {pattern: '[A-Za-z][a-zA-Z0-9]*'} })}}
                {{f.text({label: 'Sample Value', id: 'nsamp', ph: 'Sample field value'})}}
            </form>
        </div>
        {{m.close({action: 'Add', id: 'addb'})}}
    {% else %}
        {{m.open({id: 'tsearch', title: 'Search'})}}
        <div class="modal-body">
            <form action="#" method="POST" id="sform">
                {{f.select({label: 'Field', id: 'fname', ph: 'Field Name', required: TRUE, options: foptions })}}
                {{f.select({label: 'Operator', id: 'fop', ph: 'Comparison', required: TRUE, options: [
                   {value: 1, text: '=' },
                   {value: 2, text:  '!=' },
                   {value: 3, text:  'like' },
                   {value: 4, text:  'contains' },
                   {value: 5, text:  '>' },
                   {value: 6, text:  '>=' },
                   {value: 7, text:  '<' },
                   {value: 8, text:  '<=' },
                   {value: 9, text:  'regexp' },
                   {value: 10, text:  'is NULL' },
                   {value: 11, text:  'is not NULL' },
                ]})}}
                {{f.text({label: 'Value', id: 'fval', ph: 'Field Value'})}}
            </form>
        </div>
        {{m.close({action: 'Search', id: 'searchb'})}}
    {% endif %}
    <section id="sres" class="row">
        <article class="mx-auto col">
        </article>
    </section>
{% endblock main %}

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