vendor/easycorp/easyadmin-bundle/src/Resources/views/crud/index.html.twig line 1

Open in your IDE?
  1. {# @var ea \EasyCorp\Bundle\EasyAdminBundle\Context\AdminContext #}
  2. {# @var entities \EasyCorp\Bundle\EasyAdminBundle\Collection\EntityDtoCollection #}
  3. {# @var paginator \EasyCorp\Bundle\EasyAdminBundle\Orm\EntityPaginator #}
  4. {% extends ea.templatePath('layout') %}
  5. {% trans_default_domain ea.i18n.translationDomain %}
  7. {# TODO: change this when reenabling batch actions #}
  8. {% set has_batch_actions = false and batch_form is defined and ea.crud.actions.batchActions|length > 0 %}
  10. {% block body_id entities|length > 0 ? 'ea-index-' ~ entities|first.name : '' %}
  11. {% block body_class 'index' ~ (entities|length > 0 ? ' index-' ~ entities|first.name : '') %}
  13. {% block content_title %}
  14.     {%- apply spaceless -%}
  15.         {% set default_title = ea.crud.defaultPageTitle('index')|trans(ea.i18n.translationParameters, 'EasyAdminBundle') %}
  16.         {{ ea.crud.customPageTitle is null ? default_title|raw : ea.crud.customPageTitle('index')|trans(ea.i18n.translationParameters)|raw }}
  17.     {%- endapply -%}
  18. {% endblock %}
  20. {% block page_actions %}
  21.     {% block global_actions %}
  22.         {% for action in global_actions %}
  23.             {{ include(action.templatePath, { action: action }, with_context = false) }}
  24.         {% endfor %}
  25.     {% endblock global_actions %}
  26. {% endblock page_actions %}
  28. {% block content_header %}
  29.     {{ parent() }}
  31.     {# TODO:
  32.     {% block batch_actions %}
  33.         {% for batchAction in ea.crud.actions.batchActions %}
  34.             {{ include(batchAction.templatePath, { action: batchAction }, with_context = false) }}
  35.         {% endfor %}
  37.         {{ include('@EasyAdmin/crud/includes/_batch_action_modal.html.twig', {}, with_context = false) }}
  38.     {% endblock %}
  39.     #}
  40. {% endblock content_header %}
  42. {% block main %}
  43.     {# sort can be multiple; let's consider the sorting field the first one #}
  44.     {% set sort_field_name = app.request.get('sort')|keys|first %}
  45.     {% set sort_order = app.request.get('sort')|first %}
  46.     {% set some_results_are_hidden = false %}
  47.     {% set has_footer = entities|length != 0 %}
  48.     {% set has_search = ea.crud.isSearchEnabled %}
  49.     {% set has_filters = filters|length > 0 %}
  50.     {% set has_datagrid_tools = has_search or has_filters %}
  52.     {% if has_datagrid_tools %}
  53.         <div class="datagrid-header-tools">
  54.             <div class="datagrid-search">
  55.                 {% block search %}
  56.                     {% if has_search %}
  57.                         <div class="form-action form-action-search">
  58.                             <form method="get">
  59.                                 {% block search_form %}
  60.                                     {# reset the referrer and page number whenever a new query is performed #}
  61.                                     {% set query_parameters = ea.request.query.all|merge({
  62.                                         referrer: null, page: 1,
  63.                                     }) %}
  65.                                     {# browsers remove the query string when submitting forms using GET;
  66.                                        that's why all query string parameters are added as hidden form fields #}
  67.                                     {% for paramName, paramValue in query_parameters|ea_flatten_array %}
  68.                                         <input type="hidden" name="{{ paramName }}" value="{{ paramValue }}">
  69.                                     {% endfor %}
  71.                                     <div class="form-group">
  72.                                         <div class="form-widget">
  73.                                             <input class="form-control" type="search" name="query" value="{{ app.request.get('query') ?? '' }}" placeholder="{{ 'action.search'|trans(ea.i18n.translationParameters, 'EasyAdminBundle') }}">
  74.                                         </div>
  75.                                     </div>
  76.                                 {% endblock %}
  77.                             </form>
  78.                         </div>
  79.                     {% endif %}
  80.                 {% endblock search %}
  81.             </div>
  83.             <div class="datagrid-filters">
  84.                 {% block filters %}
  85.                     {% if filters|length > 0 %}
  86.                         {% set applied_filters = ea.request.query.all['filters']|default([])|keys %}
  87.                         <div class="btn-group action-filters">
  88.                             <a href="{{ ea_url().setAction('renderFilters').includeReferrer() }}" class="btn btn-secondary btn-labeled btn-labeled-right action-filters-button {{ applied_filters ? 'action-filters-applied' }}" data-modal="#modal-filters">
  89.                                 <i class="fa fa-filter fa-fw"></i> {{ 'filter.title'|trans(ea.i18n.translationParameters, 'EasyAdminBundle') }}{% if applied_filters %} <span class="text-primary">({{ applied_filters|length }})</span>{% endif %}
  90.                             </a>
  91.                             {% if applied_filters %}
  92.                                 <a href="{{ ea_url().unset('filters') }}" class="btn btn-secondary action-filters-reset">
  93.                                     <i class="fa fa-close"></i>
  94.                                 </a>
  95.                             {% endif %}
  96.                         </div>
  97.                     {% endif %}
  98.                 {% endblock filters %}
  99.             </div>
  100.         </div>
  101.     {% endif %}
  103.     <div class="content-panel">
  104.         <div class="content-panel-body with-rounded-top with-min-h-250 without-padding {{ not has_footer ? 'without-footer' }}">
  105.             <table class="table datagrid with-rounded-top {{ not has_footer ? 'with-rounded-bottom' }}">
  106.                 <thead>
  107.                 {% block table_head %}
  108.                     <tr>
  109.                         {% if has_batch_actions %}
  110.                             <th width="1px"><span><input type="checkbox" class="form-batch-checkbox-all"></span></th>
  111.                         {% endif %}
  113.                         {% set ea_sort_asc = constant('EasyCorp\\Bundle\\EasyAdminBundle\\Config\\Option\\SortOrder::ASC') %}
  114.                         {% set ea_sort_desc = constant('EasyCorp\\Bundle\\EasyAdminBundle\\Config\\Option\\SortOrder::DESC') %}
  115.                         {% for field in entities|first.fields ?? [] %}
  116.                             {% set is_sorting_field = ea.search.isSortingField(field.property) %}
  117.                             {% set next_sort_direction = is_sorting_field ? (ea.search.sortDirection(field.property) == ea_sort_desc ? ea_sort_asc : ea_sort_desc) : ea_sort_desc %}
  118.                             {% set column_icon = is_sorting_field ? (next_sort_direction == ea_sort_desc ? 'fa-arrow-up' : 'fa-arrow-down') : 'fa-sort' %}
  120.                             <th class="{{ is_sorting_field ? 'sorted' }} {{ field.isVirtual ? 'field-virtual' }} text-{{ field.textAlign }}" dir="{{ ea.i18n.textDirection }}">
  121.                                 {% if field.isSortable %}
  122.                                     <a href="{{ ea_url({ page: 1, sort: { (field.property): next_sort_direction } }).includeReferrer() }}">
  123.                                         {{ field.label|raw }} <i class="fa fa-fw {{ column_icon }}"></i>
  124.                                     </a>
  125.                                 {% else %}
  126.                                     <span>{{ field.label|raw }}</span>
  127.                                 {% endif %}
  128.                             </th>
  129.                         {% endfor %}
  131.                         <th {% if ea.crud.showEntityActionsAsDropdown %}width="10px"{% endif %} dir="{{ ea.i18n.textDirection }}">
  132.                             <span class="sr-only">{{ 'action.entity_actions'|trans(ea.i18n.translationParameters, 'EasyAdminBundle') }}</span>
  133.                         </th>
  134.                     </tr>
  135.                 {% endblock table_head %}
  136.                 </thead>
  138.                 <tbody>
  139.                 {% block table_body %}
  140.                     {% for entity in entities %}
  141.                         {% if not entity.isAccessible %}
  142.                             {% set some_results_are_hidden = true %}
  143.                         {% else %}
  144.                             <tr data-id="{{ entity.primaryKeyValueAsString }}">
  145.                                 {% if has_batch_actions %}
  146.                                     <td><input type="checkbox" class="form-batch-checkbox" value="{{ entity.primaryKeyValue }}"></td>
  147.                                 {% endif %}
  149.                                 {% for field in entity.fields %}
  150.                                     <td class="{{ field.property == sort_field_name ? 'sorted' }} text-{{ field.textAlign }} {{ field.cssClass }}" dir="{{ ea.i18n.textDirection }}">
  151.                                         {{ include(field.templatePath, { field: field, entity: entity }, with_context = false) }}
  152.                                     </td>
  153.                                 {% endfor %}
  155.                                 {% block entity_actions %}
  156.                                     <td class="actions">
  157.                                         {% if not ea.crud.showEntityActionsAsDropdown %}
  158.                                             {% for action in entity.actions %}
  159.                                                 {{ include(action.templatePath, { action: action, entity: entity, isIncludedInDropdown: ea.crud.showEntityActionsAsDropdown }, with_context = false) }}
  160.                                             {% endfor %}
  161.                                         {% else %}
  162.                                             <div class="dropdown dropdown-actions">
  163.                                                 <a class="dropdown-toggle btn btn-secondary btn-sm" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  164.                                                     <i class="fa fa-fw fa-ellipsis-h"></i>
  165.                                                 </a>
  167.                                                 <div class="dropdown-menu dropdown-menu-right">
  168.                                                     {% for action in entity.actions %}
  169.                                                         {{ include(action.templatePath, { action: action, isIncludedInDropdown: ea.crud.showEntityActionsAsDropdown }, with_context = false) }}
  170.                                                     {% endfor %}
  171.                                                 </div>
  172.                                             </div>
  173.                                         {% endif %}
  174.                                     </td>
  175.                                 {% endblock entity_actions %}
  176.                             </tr>
  178.                         {% endif %}
  179.                     {% else %}
  180.                         <tr>
  181.                             <td class="no-results" colspan="100">
  182.                                 {{ 'datagrid.no_results'|trans(ea.i18n.translationParameters, 'EasyAdminBundle') }}
  183.                             </td>
  184.                         </tr>
  185.                     {% endfor %}
  187.                     {% if some_results_are_hidden %}
  188.                         <tr class="datagrid-row-empty">
  189.                             <td class="text-center" colspan="{{ entities|first.fields|length + 1 }}">
  190.                                 <span class="datagrid-row-empty-message"><i class="fa fa-lock mr-1"></i> {{ 'datagrid.hidden_results'|trans({}, 'EasyAdminBundle') }}</span>
  191.                             </td>
  192.                         </tr>
  193.                     {% endif %}
  194.                 {% endblock table_body %}
  195.                 </tbody>
  196.             </table>
  197.         </div>
  199.         {% if entities|length > 0 %}
  200.             <div class="content-panel-footer without-padding without-border">
  201.                 {% block paginator %}
  202.                     {{ include(ea.templatePath('crud/paginator')) }}
  203.                 {% endblock paginator %}
  204.             </div>
  205.         {% endif %}
  206.     </div>
  208.     {% block delete_form %}
  209.         {{ include('@EasyAdmin/crud/includes/_delete_form.html.twig', with_context = false) }}
  210.     {% endblock delete_form %}
  212.     {% if filters|length > 0 %}
  213.         {{ include('@EasyAdmin/crud/includes/_filters_modal.html.twig') }}
  214.     {% endif %}
  215. {% endblock main %}
  217. {% block body_javascript %}
  218.     {{ parent() }}
  220.     <script type="text/javascript">
  221.         $(function() {
  222.             const customSwitches = document.querySelectorAll('td.field-boolean .custom-control.custom-switch input[type="checkbox"]');
  223.             for (i = 0; i < customSwitches.length; i++) {
  224.                 customSwitches[i].addEventListener('change', function () {
  225.                     const customSwitch = this;
  226.                     const newValue = this.checked;
  227.                     const oldValue = !newValue;
  228.                     const fieldName = this.closest('.custom-switch').dataset.fieldname;
  230.                     const toggleUrl = "{{ ea_url().setAction('edit')|raw }}"
  231.                         + "&entityId=" + this.closest('[data-id]').dataset.id
  232.                         + "&fieldName=" + fieldName
  233.                         + "&newValue=" + newValue.toString();
  235.                     let toggleRequest = $.ajax({ type: "GET", url: toggleUrl, data: {} });
  237.                     toggleRequest.done(function(result) {});
  239.                     toggleRequest.fail(function() {
  240.                         // in case of error, restore the original value and disable the toggle
  241.                         customSwitch.checked = oldValue;
  242.                         customSwitch.disabled = true;
  243.                         customSwitch.closest('.custom-switch').classList.add('disabled');
  244.                     });
  245.                 });
  246.             }
  248.             $('.action-delete').on('click', function(e) {
  249.                 e.preventDefault();
  250.                 const id = $(this).parents('[data-id]').first().data('id');
  252.                 $('#modal-delete').modal({ backdrop: true, keyboard: true })
  253.                     .off('click', '#modal-delete-button')
  254.                     .on('click', '#modal-delete-button', function () {
  255.                         let deleteForm = $('#delete-form');
  256.                         deleteForm.attr('action', deleteForm.attr('action').replace('__entityId_placeholder__', id));
  257.                         deleteForm.trigger('submit');
  258.                     });
  259.             });
  261.             {% if filters|length > 0 %}
  262.             // HTML5 specifies that a <script> tag inserted with innerHTML should not execute
  263.             // https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML#Security_considerations
  264.             // That's why we can't use just 'innerHTML'. See https://stackoverflow.com/a/47614491/2804294
  265.             let setInnerHTML = function(element, htmlContent) {
  266.                 element.innerHTML = htmlContent;
  267.                 Array.from(element.querySelectorAll('script')).forEach(oldScript => {
  268.                     const newScript = document.createElement('script');
  269.                     Array.from(oldScript.attributes)
  270.                         .forEach(attr => newScript.setAttribute(attr.name, attr.value));
  271.                     newScript.appendChild(document.createTextNode(oldScript.innerHTML));
  272.                     oldScript.parentNode.replaceChild(newScript, oldScript);
  273.                 });
  274.             };
  276.             document.querySelector('.action-filters-button').addEventListener('click', function(event) {
  277.                 let filterButton = event.currentTarget;
  278.                 let filterModal = document.querySelector(filterButton.dataset.modal);
  279.                 let filterModalBody = filterModal.querySelector('.modal-body');
  281.                 $(filterModal).modal({ backdrop: true, keyboard: true });
  282.                 filterModalBody.innerHTML = '<div class="fa-3x px-3 py-3 text-muted text-center"><i class="fas fa-circle-notch fa-spin"></i></div>';
  284.                 $.get(filterButton.getAttribute('href'), function (response) {
  285.                     setInnerHTML(filterModalBody, response);
  286.                 });
  288.                 event.preventDefault();
  289.                 event.stopPropagation();
  290.             });
  291.             {% endif %}
  294.             {% if has_batch_actions %}
  295.             const titleContent = $('.content-header-title > .title').html();
  296.             $(document).on('click', '.deselect-batch-button', function () {
  297.                 $(this).closest('.content').find(':checkbox.form-batch-checkbox-all').prop('checked', false).trigger('change');
  298.             });
  299.             $(document).on('change', '.form-batch-checkbox-all', function () {
  300.                 $(this).closest('.content').find(':checkbox.form-batch-checkbox').prop('checked', $(this).prop('checked')).trigger('change');
  301.             });
  302.             $(document).on('change', '.form-batch-checkbox', function () {
  303.                 const $content = $(this).closest('.content');
  304.                 let $input = $content.find(':hidden#batch_form_ids');
  305.                 let ids = $input.val() ? $input.val().split(',') : [];
  306.                 const id = $(this).val();
  308.                 if ($(this).prop('checked')) {
  309.                     if (-1 === ids.indexOf(id)) {
  310.                         ids.push(id);
  311.                     }
  312.                 } else {
  313.                     ids = ids.filter(function(value) { return value !== id });
  314.                     $content.find(':checkbox.form-batch-checkbox-all').prop('checked', false);
  315.                 }
  317.                 if (0 === ids.length) {
  318.                     $content.find('.global-actions').show();
  319.                     $content.find('.batch-actions').hide();
  320.                     $content.find('table').removeClass('table-batch');
  321.                 } else {
  322.                     $content.find('.batch-actions').show();
  323.                     $content.find('.global-actions').hide();
  324.                     $content.find('table').addClass('table-batch');
  325.                 }
  327.                 $input.val(ids.join(','));
  328.                 $content.find('.content-header-title > .title').html(0 === ids.length ? titleContent : '');
  329.             });
  331.             $('button[name="batch_form[name]"].ask-confirm-batch-button').on('click', function (event) {
  332.                 event.preventDefault();
  333.                 event.stopPropagation();
  334.                 let $button = $(this);
  336.                 $('#modal-batch-action').modal({ backdrop : true, keyboard : true })
  337.                     .off('click', '#modal-batch-action-button')
  338.                     .on('click', '#modal-batch-action-button', function () {
  339.                         $button.unbind('click');
  340.                         $button.trigger('click');
  341.                     });
  342.             });
  343.             {% endif %}
  344.         });
  345.     </script>
  347.     {% if app.request.get('query') is not empty %}
  348.         <script type="text/javascript">
  349.             const search_query = "{{ ea.search.query|default('')|e('js') }}";
  350.             // the original query is prepended to allow matching exact phrases in addition to single words
  351.             $('#main').find('table tbody td:not(.actions)').highlight($.merge([search_query], search_query.split(' ')));
  352.         </script>
  353.     {% endif %}
  354. {% endblock %}