improve user display for crud usage

Author: Guite

src/system/UsersBundle/src/Entity/User.php

@@ -22,6 +22,7 @@
 use Zikula\CoreBundle\Doctrine\DBAL\CustomTypes;
 use Zikula\LegalBundle\Entity\LegalAwareUserInterface;
 use Zikula\LegalBundle\Entity\LegalAwareUserTrait;
+use Zikula\UsersBundle\ProfileConstant;
 use Zikula\UsersBundle\Repository\UserRepository;
 use Zikula\UsersBundle\UsersConstant;
 
@@ -127,6 +128,17 @@ public function setId(?int $id): self
         return $this;
     }
 
+    public function getFullName(): string
+    {
+        $firstName = $this->getAttributeValue(ProfileConstant::ATTRIBUTE_NAME_FIRST_NAME);
+        $lastName = $this->getAttributeValue(ProfileConstant::ATTRIBUTE_NAME_LAST_NAME);
+        if ('' !== $firstName && '' !== $lastName) {
+            return $firstName . ' ' . $lastName;
+        }
+
+        return '';
+    }
+
     public function getActivated(): int
     {
         return $this->activated;

templates/bundles/EasyAdminBundle/crud/field/user.html.twig

@@ -1,15 +1,30 @@
-{# based on association.html.twig #}
+{# based on association.html.twig and EAB demo #}
 {# @var ea \EasyCorp\Bundle\EasyAdminBundle\Context\AdminContext #}
 {# @var field \EasyCorp\Bundle\EasyAdminBundle\Dto\FieldDto #}
 {# @var entity \EasyCorp\Bundle\EasyAdminBundle\Dto\EntityDto #}
-{% if 'toMany' == field.customOptions.get('associationType') %}
-    <span class="badge badge-secondary">{{ field.formattedValue }}</span>
-{% else %}
-    {#% if field.customOptions.get('relatedUrl') is not null %}
-        <a href="{{ field.customOptions.get('relatedUrl') }}">{{ field.formattedValue }}</a>
+{% set user = field.value %}
+{% if user %}
+    {% if 'toMany' == field.customOptions.get('associationType') %}
+        <span class="badge badge-secondary">{{ field.formattedValue }}</span>
     {% else %}
-        {{ field.formattedValue }}
-    {% endif %#}
-    {{ field.value.id|profileLinkByUserId }}
-    <span class="avatar">{{ userAvatar(field.value.id, {rating: 'g'}) }}</span>
+        <div class="user-card d-flex align-items-center gap-2">
+            <span class="avatar">{{ userAvatar(field.value.id, {size: 32, rating: 'g', class: 'rounded-circle'}) }}</span>
+            <div class="user-info">
+                <span class="user-name">{{ user.id|profileLinkByUserId }}</span>
+                {% if 'ROLE_ADMIN' in user.roles %}
+                    <span class="badge badge-danger ms-1">{{ 'Admin'|trans }}</span>
+                {% elseif 'ROLE_EDITOR' in user.roles %}
+                    <span class="badge badge-warning ms-1">{{ 'Editor'|trans }}</span>
+                {% endif %}
+            </div>
+        </div>
+
+        {#% if field.customOptions.get('relatedUrl') is not null %}
+            <a href="{{ field.customOptions.get('relatedUrl') }}">{{ field.formattedValue }}</a>
+        {% else %}
+            {{ field.formattedValue }}
+        {% endif %#}
+    {% endif %}
+{% else %}
+    {#<span class="text-muted">{{ 'common.not_assigned'|trans }}</span>#}
 {% endif %}

templates/bundles/EasyAdminBundle/crud/field/user_autocomplete.html.twig

@@ -0,0 +1,17 @@
+{# based on EAB demo #}
+<div style="display: flex; align-items: center; gap: 10px; padding: 4px 0;">
+    <span class="avatar">{{ userAvatar(entity.id, {size: 32, rating: 'g', class: 'rounded-circle'}) }}</span>
+    <div style="min-width: 0; line-height: 1.3">
+        <div style="font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
+            {% if entity.fullName %}
+                {{ entity.fullName }}
+                <span style="font-weight: normal; color: #6c757d;">@{{ entity.username }}</span>
+            {% else %}
+                {{ entity.username }}
+            {% endif %}
+        </div>
+        <div style="font-size: 0.85em; color: #6c757d; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
+            {{ entity.email }}
+        </div>
+    </div>
+</div>