EasyAdmin3: clickable table-row (link to EDIT-page)

Question

I don't like the "edit"-button at the end of each entity on the INDEX-Page (EasyAdmin 3 / symfony 5) and I would like to have the table-row clickable and it shall send me directly to the EDIT-page.

I guess the solution must be using Javascript, so I started:

PHP-file

class PersonCrudController extends AbstractCrudController {
   [...]
   
    public function configureFields(string $pageName): iterable {
        [...]
        yield TextField::new('fullName',  'Name')->onlyOnIndex()->setCssClass('js-row-action');
        [...]
    }

   [...]
}

javascript-file

// call functions once page is loaded
document.addEventListener("DOMContentLoaded", function() {
    makeTableRowClickable();
});

function makeTableRowClickable() {
    let elements = document.getElementsByClassName('js-row-action');

    for (let i = 0; i < elements.length; i++) {
        let td = elements[i];
        let tr = td.parentNode;

        tr.addEventListener("click", function (e) {
            alert('click the row, Jack!');
        });
    }
}

open questions

1. How do I generate the URL of the EDIT-page?
2. How can I set a data attribute with the URL into any (hidden) field so that I can use it in the javascript?

Any ideas? Many thanks!

Answer 1

Here is my solution (you have to update the twig-template)

index.html.twig (my overriding file)

identify the URL for the edit-page and add the link as href-attribute into the TR-tag

{#
    EXAMPLES:
    templates/bundles/EasyAdminBundle/layout.html.twig      ===> extends '@!EasyAdmin/layout.html.twig'
    templates/bundles/EasyAdminBundle/crud/index.html.twig  ===> extends '@!EasyAdmin/crud/index.html.twig'
#}

{# DO THIS: the '!' symbol tells Symfony to extend from the original template #}
{% extends '@!EasyAdmin/crud/index.html.twig' %}


{% block table_body %}

    {% for entity in entities %}
        {% if not entity.isAccessible %}
            {% set some_results_are_hidden = true %}
        {% else %}

            {# generation of the EDIT-link #}
            {% set editUrl = ea_url()
                    .setController(ea.crud.controllerFqcn)
                    .setAction('edit')
                    .setEntityId(entity.primaryKeyValue) %}


            {# add href-attribute and insert the URL #}
            <tr data-id="{{ entity.primaryKeyValueAsString }}" href="{{ editUrl }}">

[...]

{% endblock table_body %}

javasript-file

identify the href-attribute and send user to url

// call functions once page is loaded
document.addEventListener("DOMContentLoaded", function() {
    makeTableRowClickable();
});

function makeTableRowClickable() {
    let elements = document.getElementsByClassName('js-row-action');

    for (let i = 0; i < elements.length; i++) {
        let td  = elements[i];
        let tr  = td.parentNode;
        let url = tr.getAttribute('href');

        tr.addEventListener("click", function (e) {
            location.href = url;
        });
    }
}

crud-controller (php)

add a css-class that can be catched by javascript

class PersonCrudController extends AbstractCrudController {
   [...]
   
    public function configureFields(string $pageName): iterable {
        [...]
        yield TextField::new('fullName',  'Name')->onlyOnIndex()->setCssClass('js-row-action');
        [...]
    }

   [...]
}

dashboard-controller (php)

link the javascript-file to the dashboard-controller to have it as default everywhere

class DashboardController extends AbstractDashboardController
{
    [...]
    public function configureAssets(): Assets {
        $assets = parent::configureAssets();
        $assets->addJsFile('js/row_clickable.js');

        return $assets;
    }
    [...]
}

Have fun!

Answer 2

I improved the code grouping all in one jquery instruction:

$('.js-row-action').each(function () {
    $(this).find('span').html('<a href="' + 
$(this).siblings('td.actions').find('a').attr('href') + ' ">' + 
$(this).find('span').text() + '</a>');
});

Answer 3

I found an alternative solution that converts the text in a link, and javascript find and takes yo to the edit URL.

public function configureFields(string $pageName): iterable
{
    return [
        TextField::new('firstName')->setCssClass('js-row-action'),

...

public function configureAssets(Assets $assets): Assets
{
    return $assets->addJsFile('js/admin.js');
}

....

$('.js-row-action').each(function () {
    $(this).find('span').html('<a href="#">' + $(this).find('span').text() + 
'</a>');
});

$('.js-row-action').click(function () {
    window.location.href =  
    (this).siblings('td.actions').find('a').attr('href');
});

Answer 4

pure javascript version

for (let [key, element] of Object.entries(document.getElementsByClassName('edit-entity'))) {        
    element.innerHTML = '<a href="'+element.parentElement.querySelector('td.actions a').getAttribute('href')+'">'+element.innerHTML+'</a>';
}

CrudController configureFields

yield Field::new('column')->setCssClass('edit-entity');

Answer 5

Work for me. Symfony 6.1, EasyAdminBundle 4

In crud-controller (PHP)

    public function configureFields(string $pageName): iterable
    {
    //....
    yield IdField::new('id')->onlyOnIndex()        
    ->setTemplatePath('admin/field/linkedit.html.twig');
    yield TextField::new('anyfield')->setLabel("Title")
    ->setTemplatePath('admin/field/linkedit.html.twig');
    //....
    }

Template (TWIG)

    {# admin/field/linkedit.html.twig #}
    {% set editUrl = ea_url()
                        .setController(ea.crud.controllerFqcn)
                        .setAction('edit')
                        .setEntityId(entity.primaryKeyValue) %}
    <a href="{{ editUrl }}" id="Edit_{{ entity.primaryKeyValueAsString }}">{{ field.value }}</a>

"editUrl" variable used from this answer https://stackoverflow.com/a/65017290/19516399

Answer 6

Thanks for the inspiring posts. Here is my solution with plain javascript:

Use another field as edit link

E.g. link "name" to the edit action instead of separate "Edit" link

// src/Controller/Admin/FooCrudController.php

public function configureFields(string $pageName): iterable
{
    // Add the trigger css class name:
    yield TextField::new('name')->setCssClass('use-as-edit-link');
    ...
}

public function configureAssets(): Assets
{
    $assets = parent::configureAssets();
    $assets->addJsFile('js/easyadmin/move-edit-link.js');

    return $assets;
}

 

// /public/js/easyadmin/move-edit-link.js

/* jshint esversion: 6 */
document.addEventListener("DOMContentLoaded", function(event)
{
    // Remove the "edit" link and link the field with css class 'use-as-edit-link' instead

    // Get all elements with class "action-edit"
    const editLinks = document.querySelectorAll('.action-edit');

    // Loop through each edit link
    editLinks.forEach(editLink => {
        // Get the href attribute of the current edit link
        const href = editLink.getAttribute('href');

        // Hide the original edit link cell by setting its style to "display: none;"
        editLink.style.display = 'none';

        // Find the closest parent row of the edit link
        const row = editLink.closest('tr');

        // Find the element with class "use-as-edit-link" within the same row
        const useAsEditLink = row.querySelector('.use-as-edit-link');

        // Update the innerHTML of the use-as-edit-link element to create a link
        useAsEditLink.innerHTML = `<a href="${href}">${useAsEditLink.innerHTML}</a>`;
    });

});