Phraseanet/templates/web/admin/search-engine/general-aggregation.html.twig

<div class="general-aggregation-layout">
    <button type="submit" id="elasticsearch_settings_save_facets" name="elasticsearch_settings[save]"
            class="btn btn-primary">{{ 'Save' | trans }}</button>
    <div id="basket-filter" class="facet-filter unstyled" style="float: right; padding-top: 27px;">
        {#<span class="filter-title">{{ 'See' | trans }} : </span>#}
        <span class="filter-item">
              <label id="aggregated-list" class="checkbox inline" for="basketFilter">
                  <input type="checkbox" class="checkbox " value="aggregated" checked
                         style="margin-top: 1px">
                  {{ 'Aggregated' | trans }}
              </label>
          </span>
        <span class="filter-item" style="margin-left: 10px">
              <label id="not-aggregated-list" class="checkbox inline" for="basketFilter">
                  <input type="checkbox" class="checkbox " value="not-aggregated" checked
                         style="margin-top: 1px">
                  {{ 'Not aggregated' | trans }}
              </label>
          </span>

    </div>
    <ul class="unstyled aggregation-collection">
        {% for formdata in form %}
            {% set attr = formdata.vars['attr']|join(',') %}
            {% set label = formdata.vars['label']|join(',') %}
            {% if attr == 'aggregate' %}
                <li id="{{ label }}" class="field-row  {% if label starts with '#_' %}lightblue{% endif %}">

                    <table>
                        <tbody>
                        <tr>
                            <td class="handle">
                                <i class="fa fa-arrows" aria-hidden="true"></i>
                            </td>
                            <td>
                                {{ form_label(formdata, null, {
                                    'label_attr': {'class': 'label-aggregation'}
                                }) }}
                            </td>
                            <td>
                                {{ form_widget(formdata) }}
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </li>
            {% endif %}
        {% endfor %}
    </ul>
    <input type="hidden" id="listValues" name="facet_list_values"/>
</div>

<script type="text/javascript">
    /*Add a sort for the  list*/
    function filterFacet() {
        $.each($(".aggregate option:selected"), function () {
            if ($(this).val() == 0) {
                $(this).closest('.field-row').addClass('not-aggregated')
            }
            else {
                $(this).closest('.field-row').addClass('aggregated')
            }
        });
        $('#aggregated-list input').click(function () {
            $('.aggregated').toggleClass('hidden');
        });
        $('#not-aggregated-list input').click(function () {
            $('.not-aggregated').toggleClass('hidden');
        });
    }
    /*Get the order of new list*/
    var sortEventHandler = function (event, ui) {
        $('#listValues').val(JSON.stringify($('form').serializeArray()));
    };
    $(document).ready(function () {
        $('.lightblue .label-aggregation').css('color','mediumblue');
        $('.aggregation-collection').sortable({
            handle: ".handle",
            stop: sortEventHandler
        });
        // sortEventHandler(null, null);   // enforce build list
        filterFacet();
        $("#elasticsearch_settings_save_facets").click(function(){sortEventHandler(null, null);});
    });
</script>