How to compute dynamically totals in an index CRUD view ?

[wehostadm]

Hi all,

I have a CRUD with an index CRUD view and I would like to compute some totals at the bottom of the table. How can I do that with easyadmin ?

Example :

ID  |   Column 1  |   Column 2
1        10                20
2        100              200
Total    110              220

Thanks,

[budzik]

Hi, here's a piece of code. Keep in mind that this is only a guideline. Take a look at https://symfony.com/bundles/EasyAdminBundle/current/design.html#overriding-templates for more information.

//YourCrudController

#[\Override]
public function configureCrud(Crud $crud): Crud
{
    return $crud
        ->overrideTemplate('crud/index', 'admin/index/my_index.html.twig')
    ;
}

//templates/admin/index/my_index.html.twig

This a copy of \vendor\easycorp\easyadmin-bundle\src\Resources\views\crud\index.html.twig I removed all blocks except {% block table_body %} commented code with (!!) I added on the fly at the end of the table should appear a row summing identifiers (id) hope it helps. Cheers and GL!

{# @var ea \EasyCorp\Bundle\EasyAdminBundle\Context\AdminContext #}
{# @var entities \EasyCorp\Bundle\EasyAdminBundle\Collection\EntityCollection #}
{# @var paginator \EasyCorp\Bundle\EasyAdminBundle\Orm\EntityPaginator #}
{% extends '@!EasyAdmin/crud/index.html.twig' %}

// !!set the idSumValue to 0
{% set idSumValue = 0 %}

{% block table_body %}
    {% for entity in entities %}
        {% if entity.isAccessible %}

            <tr data-id="{{ entity.primaryKeyValueAsString }}">
                {% if has_batch_actions %}
                    <td class="batch-actions-selector">
                        <div class="form-check">
                            <input type="checkbox" class="form-check-input form-batch-checkbox" id="form-batch-checkbox-{{ loop.index0 }}" value="{{ entity.primaryKeyValue }}">
                        </div>
                    </td>
                {% endif %}

                {% for field in entity.fields %}
                    {% set is_searchable = null == ea.crud.searchFields or field.property in ea.crud.searchFields %}

                    <td data-column="{{ field.property }}" data-label="{{ field.label|trans|e('html_attr') }}" class="{{ is_searchable ? 'searchable' }} {{ field.property == sort_field_name ? 'sorted' }} text-{{ field.textAlign }} {{ field.cssClass }}" dir="{{ ea.i18n.textDirection }}">
                        {{ include(field.templatePath, { field: field, entity: entity }, with_context = false) }}
                    </td>

                    // !!count idSumValue
                    {% if field.property == 'id' %}
                        {% set idSumValue = idSumValue + field.value %}
                    {% endif %}

                {% endfor %}

                {% block entity_actions %}
                    <td class="actions {{ ea.crud.showEntityActionsAsDropdown ? 'actions-as-dropdown' }}">
                        {% if entity.actions.count > 0 %}
                            {% if ea.crud.showEntityActionsAsDropdown %}
                                <div class="dropdown dropdown-actions">
                                    <a class="dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        {# don't use FontAwesome 'fa-ellipsis-h' icon here because it doesn't look good #}
                                        {# this icon is 'dots-horizontal' icon from https://heroicons.com/ #}
                                        <svg xmlns="http://www.w3.org/2000/svg" height="21" width="21" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
                                        </svg>
                                    </a>

                                    <div class="dropdown-menu dropdown-menu-right">
                                        {% for action in entity.actions %}
                                            {{ include(action.templatePath, { action: action, entity: entity, isIncludedInDropdown: ea.crud.showEntityActionsAsDropdown }, with_context = false) }}
                                        {% endfor %}
                                    </div>
                                </div>
                            {% else %}
                                {% for action in entity.actions %}
                                    {{ include(action.templatePath, { action: action, entity: entity, isIncludedInDropdown: ea.crud.showEntityActionsAsDropdown }, with_context = false) }}
                                {% endfor %}
                            {% endif %}
                        {% endif %}
                    </td>
                {% endblock entity_actions %}
            </tr>

        {% endif %}
    {% else %}
        {% block table_body_empty %}
            {% for i in 1..14 %}
                <tr class="empty-row">
                    <td><span></span></td>
                    <td><span></span></td>
                    <td><span></span></td>
                    <td><span></span></td>
                    <td><span></span></td>
                    <td><span></span></td>
                </tr>

                {% if 3 == loop.index %}
                    <tr class="no-results">
                        <td colspan="100">
                            {{ t('datagrid.no_results', ea.i18n.translationParameters, 'EasyAdminBundle')|trans }}
                        </td>
                    </tr>
                {% endif %}
            {% endfor %}
        {% endblock table_body_empty %}

    {% endfor %}

    // !!display the idSumValue
    <tr>
        <td colspan="100">
            {{ idSumValue }}
        </td>
    </tr>

    {% if some_results_are_hidden %}
        <tr class="datagrid-row-empty">
            <td class="text-center" colspan="100">
                <span class="datagrid-row-empty-message"><i class="fa fa-lock mr-1"></i> {{ 'datagrid.hidden_results'|trans({}, 'EasyAdminBundle') }}</span>
            </td>
        </tr>
    {% endif %}
{% endblock table_body %}

[wehostadm]

@budzik Thanks for your help :) I think this feature could be good to implement in EasyAdmin