SonataAdminBundle/Resources/views/Form/form_admin_fields.html.twig

{#

This file is part of the Sonata package.

(c) Thomas Rabaix <thomas.rabaix@sonata-project.org>

For the full copyright and license information, please view the LICENSE
file that was distributed with this source code.

#}

{% extends 'form_div_layout.html.twig' %}

{% block form_widget -%}
    {{ parent() }}
    {% if sonata_help is defined and sonata_help %}
        <span class="help-block sonata-ba-field-widget-help">{{ sonata_help|raw }}</span>
    {% endif %}
{%- endblock form_widget %}

{% block form_widget_simple %}
    {% set attr = attr|merge({'class': attr.class|default('') ~ ' form-control'}) %}
    {{ parent() }}
{% endblock form_widget_simple %}

{% block textarea_widget %}
    {% set attr = attr|merge({'class': attr.class|default('') ~ ' form-control'}) %}
    {{ parent() }}
{% endblock textarea_widget %}

{# Labels #}
{% block form_label %}
{% spaceless %}

    {% set label_class = "" %}
    {% if sonata_admin.admin and sonata_admin.admin.getConfigurationPool().getOption('form_type') == 'horizontal' %}
        {% set label_class = " control-label col-sm-3" %}
    {% else %}
        {% set label_class = " control-label" %}
    {% endif%}

    {#{{ sonata_admin.admin.getConfigurationPool().getOption('form_type') }}#}
    {% if label is not sameas(false) %}
        {% set label_attr = label_attr|merge({'class': label_attr.class|default('') ~ label_class }) %}

        {% if not compound %}
            {% set label_attr = label_attr|merge({'for': id}) %}
        {% endif %}
        {% if required %}
            {% set label_attr = label_attr|merge({'class': (label_attr.class|default('') ~ ' required')|trim}) %}
        {% endif %}

        {% if label is empty %}
            {% set label = name|humanize %}
        {% endif %}

        {% if in_list_checkbox is defined and in_list_checkbox and widget is defined %}
            <label{% for attrname,attrvalue in attr %} {{attrname}}="{{attrvalue}}"{% endfor %}>
                {{ widget|raw }}
                <span>
                    {% if not sonata_admin.admin %}
                        {{- label|trans({}, translation_domain) -}}
                    {% else %}
                        {{- label|trans({}, sonata_admin.field_description.translationDomain) -}}
                    {% endif%}
                </span>
            </label>
        {% else %}
            <label{% for attrname, attrvalue in label_attr %} {{ attrname }}="{{ attrvalue }}"{% endfor %}>
                {% if not sonata_admin.admin%}
                    {{- label|trans({}, translation_domain) -}}
                {% else %}
                    {{ sonata_admin.admin.trans(label, {}, sonata_admin.field_description.translationDomain) }}
                {% endif %}
            </label>
        {% endif %}
    {% endif %}
{% endspaceless %}
{% endblock form_label %}

{% block widget_container_attributes_choice_widget %}
    {% spaceless %}
        id="{{ id }}"
        {% for attrname,attrvalue in attr %}{{attrname}}="{% if attrname == 'class' %}list-unstyled {% endif%}{{attrvalue}}" {% endfor %}
        {% if "class" not in attr %}class="list-unstyled"{%endif %}
    {% endspaceless %}
{% endblock %}

{% block choice_widget_expanded %}
{% spaceless %}
    <ul {{ block('widget_container_attributes') }}>
        {% for child in form %}
            <li>
                {{ form_widget(child, {'horizontal': false, 'horizontal_input_wrapper_class': ''}) }} {# {'horizontal': false, 'horizontal_input_wrapper_class': ''} needed to avoid MopaBootstrapBundle messing with the DOM #}
                {{ form_label(child) }}
            </li>
        {% endfor %}
    </ul>
{% endspaceless %}
{% endblock choice_widget_expanded %}

{% block choice_widget %}
{% spaceless %}
    {% if compound %}
        <ul {{ block('widget_container_attributes_choice_widget') }}>
        {% for child in form %}
            <li>
                {% set form_widget_content %}
                    {{ form_widget(child, {'horizontal': false, 'horizontal_input_wrapper_class': ''}) }} {# {'horizontal': false, 'horizontal_input_wrapper_class': ''} needed to avoid MopaBootstrapBundle messing with the DOM #}
                {% endset %}
                {{ form_label(child, child.vars.label|default(null), { 'in_list_checkbox' : true, 'widget' : form_widget_content } ) }}
            </li>
        {% endfor %}
        </ul>
    {% else %}
    {% if sonata_admin.admin and not sonata_admin.admin.getConfigurationPool().getOption('use_select2') %}
        {% set attr = attr|merge({'class': attr.class|default('') ~ ' form-control'}) %}
    {% endif %}
    <select {{ block('widget_attributes') }}{% if multiple %} multiple="multiple"{% endif %}>
        {% if empty_value is not none %}
            <option value="">
                {% if not sonata_admin.admin %}
                    {{- empty_value|trans({}, translation_domain) -}}
                {% else %}
                    {{- empty_value|trans({}, sonata_admin.field_description.translationDomain) -}}
                {% endif%}
            </option>
        {% endif %}
        {% if preferred_choices|length > 0 %}
            {% set options = preferred_choices %}
            {{ block('choice_widget_options') }}
            {% if choices|length > 0 %}
                <option disabled="disabled">{{ separator }}</option>
            {% endif %}
        {% endif %}
        {% set options = choices %}
        {{ block('choice_widget_options') }}
    </select>
    {% endif %}
{% endspaceless %}
{% endblock choice_widget %}

{% block form_row %}
    {% set label_class = "" %}
    {% set div_class = "" %}
    {% if sonata_admin.admin and sonata_admin.admin.getConfigurationPool().getOption('form_type') == 'horizontal' %}
        {% set label_class = "control-label col-sm-3" %}
        {% set div_class = "col-sm-9 col-md-9" %}
        {% set wrapper_class = "" %}
    {% else %}
        {% set label_class = "control-label" %}
        {% set wrapper_class = "form-group" %}
    {% endif%}

    {% if sonata_admin is not defined or not sonata_admin_enabled or not sonata_admin.field_description %}
        <div class="{{ wrapper_class }}{% if errors|length > 0%} has-error{% endif %}">
            {{ form_label(form, label|default(null)) }}
            <div class="{% if label is sameas(false) %}sonata-collection-row-without-label{% endif %}">
                {{ form_widget(form, {'horizontal': false, 'horizontal_input_wrapper_class': ''}) }} {# {'horizontal': false, 'horizontal_input_wrapper_class': ''} needed to avoid MopaBootstrapBundle messing with the DOM #}
                {% if errors|length > 0 %}
                    <div class="help-block sonata-ba-field-error-messages">
                        {{ form_errors(form) }}
                    </div>
                {% endif %}
            </div>
        </div>
    {% else %}
        <div class="form-group{% if errors|length > 0%} has-error{%endif%}" id="sonata-ba-field-container-{{ id }}">
            {% block label %}
                {% if sonata_admin.field_description.options.name is defined %}
                    {{ form_label(form, sonata_admin.field_description.options.name, { 'attr' : {'class' : label_class} }) }}
                {% else %}
                    {{ form_label(form, label|default(null), { 'attr' : {'class' : label_class} }) }}
                {% endif %}
            {% endblock %}

            {% set has_label = sonata_admin.field_description.options.name is defined or label is not sameas(false) %}
            <div class="{{ div_class }} sonata-ba-field sonata-ba-field-{{ sonata_admin.edit }}-{{ sonata_admin.inline }} {% if errors|length > 0 %}sonata-ba-field-error{% endif %} {% if not has_label %}sonata-collection-row-without-label{% endif %}">

                {{ form_widget(form, {'horizontal': false, 'horizontal_input_wrapper_class': ''}) }} {# {'horizontal': false, 'horizontal_input_wrapper_class': ''} needed to avoid MopaBootstrapBundle messing with the DOM #}

                {% if errors|length > 0 %}
                    <div class="help-block sonata-ba-field-error-messages">
                        {{ form_errors(form) }}
                    </div>
                {% endif %}

                {% if sonata_admin.field_description.help %}
                    <span class="help-block sonata-ba-field-help">{{ sonata_admin.admin.trans(sonata_admin.field_description.help, {}, sonata_admin.field_description.translationDomain)|raw }}</span>
                {% endif %}
            </div>
        </div>
    {% endif %}
{% endblock form_row %}

{% block sonata_type_native_collection_widget_row %}
{% spaceless %}
    <div class="sonata-collection-row">
        {% if allow_delete %}
            <a href="#" class="btn sonata-collection-delete"><i class="fa fa-minus-circle"></i></a>
        {% endif %}
        {{ form_row(child) }}
    </div>
{% endspaceless %}
{% endblock sonata_type_native_collection_widget_row %}

{% block sonata_type_native_collection_widget %}
{% spaceless %}
    {% if prototype is defined %}
        {% set child = prototype %}
        {% set attr = attr|merge({'data-prototype': block('sonata_type_native_collection_widget_row'), 'data-prototype-name': prototype.vars.name, 'class': attr.class|default('') }) %}
    {% endif %}
    <div {{ block('widget_container_attributes') }}>
        {{ form_errors(form) }}
        {% for child in form %}
            {{ block('sonata_type_native_collection_widget_row') }}
        {% endfor %}
        {{ form_rest(form) }}
        {% if allow_add %}
            <div><a href="#" class="btn sonata-collection-add"><i class="fa fa-plus-circle"></i></a></div>
        {% endif %}
    </div>
{% endspaceless %}
{% endblock sonata_type_native_collection_widget %}

{% block sonata_type_immutable_array_widget %}
    {% spaceless %}
        <div {{ block('widget_container_attributes') }}>
            {{ form_errors(form) }}

            {% for key, child in form %}
                {{ block('sonata_type_immutable_array_widget_row') }}
            {% endfor %}

            {{ form_rest(form) }}
        </div>
    {% endspaceless %}
{% endblock sonata_type_immutable_array_widget %}

{% block sonata_type_immutable_array_widget_row %}
    {% spaceless %}
        <div class="form-group{% if errors|length > 0%} error{%endif%}" id="sonata-ba-field-container-{{ id }}-{{ key }}">

            {{ form_label(child) }}

            {% set div_class = "" %}
            {% if sonata_admin.admin and sonata_admin.admin.getConfigurationPool().getOption('form_type') == 'horizontal' %}
                {% set div_class = "col-sm-9 col-md-9" %}
            {% endif%}

            <div class="{{ div_class }} sonata-ba-field sonata-ba-field-{{ sonata_admin.edit }}-{{ sonata_admin.inline }} {% if errors|length > 0 %}sonata-ba-field-error{% endif %}">
                {{ form_widget(child, {'horizontal': false, 'horizontal_input_wrapper_class': ''}) }} {# {'horizontal': false, 'horizontal_input_wrapper_class': ''} needed to avoid MopaBootstrapBundle messing with the DOM #}
            </div>

            {% if errors|length > 0 %}
                <div class="help-block sonata-ba-field-error-messages">
                    {{ form_errors(child) }}
                </div>
            {% endif %}
        </div>
    {% endspaceless %}
{% endblock %}

{% block sonata_type_model_autocomplete_widget %}
{% spaceless %}

    {{ form_widget(form.title) }}

    {% for child in form %}
        {% if not child.rendered %}
            {{ form_widget(child) }}
        {% endif %}
    {% endfor %}

    <script>
        (function ($) {
            var autocompleteInput = $("#{{ form.title.vars.id }}");
            autocompleteInput.select2({
                placeholder: "{{ placeholder }}",
                allowClear: {{ required ? 'false' : 'true' }},
                enable: {{ disabled ? 'false' : 'true' }},
                readonly: {{ read_only ? 'true' : 'false' }},
                minimumInputLength: {{ minimum_input_length }},
                multiple: {{ multiple ? 'true' : 'false' }},
                ajax: {
                    url:  "{{ url ?: url(route.name, route.parameters|default([])) }}",
                    dataType: 'json',
                    quietMillis: 100,
                    data: function (term, page) { // page is the one-based page number tracked by Select2
                        return {
                                //search term
                                "{{ req_param_name_search }}": term,

                                // page size
                                "{{ req_param_name_items_per_page }}": {{ items_per_page }},

                                // page number
                                "{{ req_param_name_page_number }}": page,

                                // admin
                                'uniqid': "{{ sonata_admin.admin.uniqid }}",
                                'code':   "{{ sonata_admin.admin.code }}",
                                'field':  "{{ name }}"

                                // other parameters
                                {% if req_params is not empty %},
                                    {%- for key, value in req_params -%}
                                        "{{- key|e('js') -}}": "{{- value|e('js') -}}"
                                        {%- if not loop.last -%}, {% endif -%}
                                    {%- endfor -%}
                                {% endif %}
                            };
                    },
                    results: function (data, page) {
                        // notice we return the value of more so Select2 knows if more results can be loaded
                        return {results: data.items, more: data.more};
                    }
                },
                formatResult: function (item) {
                    return {% block sonata_type_model_autocomplete_dropdown_item_format %}'<div class="sonata-autocomplete-dropdown-item">'+item.label+'</div>'{% endblock %};// format of one dropdown item
                },
                formatSelection: function (item) {
                    return {% block sonata_type_model_autocomplete_selection_format %}item.label{% endblock %};// format selected item '<b>'+item.label+'</b>';
                },
                dropdownCssClass: "{{ dropdown_css_class }}",
                escapeMarkup: function (m) { return m; } // we do not want to escape markup since we are displaying html in results
            });

            autocompleteInput.on("change", function(e) {

                // console.log("change "+JSON.stringify({val:e.val, added:e.added, removed:e.removed}));

                // add new input
                var el = null;
                if (undefined !== e.added) {

                    var addedItems = e.added;

                    if(!$.isArray(addedItems)) {
                        addedItems = [addedItems];
                    }

                    var length = addedItems.length;
                    for (var i = 0; i < length; i++) {
                        el = addedItems[i];
                        $("#{{ form.identifiers.vars.id }}").append('<input type="hidden" name="{{ form.identifiers.vars.full_name }}[]" value="'+el.id+'" />');
                    }
                }

                // remove input
                if (undefined !== e.removed && null !== e.removed) {
                    var removedItems = e.removed;

                    if(!$.isArray(removedItems)) {
                        removedItems = [removedItems];
                    }

                    var length = removedItems.length;
                    for (var i = 0; i < length; i++) {
                        el = removedItems[i];
                        $('#{{ form.identifiers.vars.id }} input:hidden[value="'+el.id+'"]').remove();
                    }
                }
            });

            // Initialise the autocomplete
            var data = [];
            {% if multiple -%}
                data = [
                {%- for key, label_text in value.labels -%}
                    {id: '{{ value.identifiers[key]|e('js') }}', label:'{{ label_text|e('js') }}'}
                    {%- if not loop.last -%}, {% endif -%}
                {%- endfor -%}
                ];
            {%- elseif value.labels[0] is defined -%}
                data = {id: '{{ value.identifiers[0]|e('js') }}', label:'{{ value.labels[0]|e('js') }}'};
            {%- endif  %}
            if (undefined==data.length || 0<data.length) { // Leave placeholder if no data set
                autocompleteInput.select2('data', data);
            }
        })(jQuery);
    </script>
{% endspaceless %}
{% endblock sonata_type_model_autocomplete_widget %}