viernes, 25 de octubre de 2013

FOSUserBundle - Parte III - Sustitución de plantillas (Overriding Templates) - layout.html.twig

El modo de sustituir plantillas hechas en FOSUserBundle es muy sencillo, teniendo nuestro bundle hijo de éste.

Tenemos que fijarnos dentro de la carpeta:

"vendor/friendsofsymfony/user-bundle/FOS/UserBundle/Resources/views"


dentro de que carpeta esta ubicada la plantilla a sustituir, y luego copiar esta plantilla en la misma ubicación dentro de nuestro bundle hijo y por último, obligatoriamente, se debe limpiar la caché para poder apreciar los cambios, aún si estamos en dev.

Lo primero que vamos a sustituir es la plantilla layout.html.twig, por lo tanto copiamos el archivo:

vendor/friendsofsymfony/user-bundle/FOS/UserBundle/Resources/views/layout.html.twig

a:

src/Petramas/MyFOSUserBundle/Resources/views/layout.html.twig

luego lo editamos modificando su contenido de esto:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
    </head>
    <body>
        <div>
            {% if is_granted("IS_AUTHENTICATED_REMEMBERED") %}
                {{ 'layout.logged_in_as'|trans({'%username%': app.user.username}, 'FOSUserBundle') }} |
                <a href="{{ path('fos_user_security_logout') }}">
                    {{ 'layout.logout'|trans({}, 'FOSUserBundle') }}
                </a>
            {% else %}
                <a href="{{ path('fos_user_security_login') }}">{{ 'layout.login'|trans({}, 'FOSUserBundle') }}</a>
            {% endif %}
        </div>

        {% for type, messages in app.session.flashbag.all() %}
            {% for message in messages %}
                <div class="flash-{{ type }}">
                    {{ message }}
                </div>
            {% endfor %}
        {% endfor %}

        <div>
            {% block fos_user_content %}
            {% endblock fos_user_content %}
        </div>
    </body>
</html>

a esto:

{% block fos_user_content %}
{% endblock fos_user_content %}

el resto de código eliminado lo colocaremos en nuestro layout.html.twig de nuestro MainBundle asi:

{% for type, flashMessage in app.session.flashbag.all() %}
<div class="alert alert-{{ type }} fade in">
    <button class="close" data-dismiss="alert" type="button">×</button>
    {% if flashMessage.title is defined %}
    <strong>{{ flashMessage.title }}</strong>
    {{ flashMessage.message }}
    {% else %}
    {{ type }}
    {% endif %}
</div>
{% endfor %}

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    {% if is_granted("IS_AUTHENTICATED_REMEMBERED") %}
    <ul class="nav navbar-nav">
        <li class="dropdown">
            <a href="#" data-toggle="dropdown" class="dropdown-toggle">Menú<span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li>
                    <a href="#">Recepción <span class="right-caret"></span></a>
                    <ul class="dropdown-menu sub-menu">
                        <li class="disabled"><a href="#">Verificación de ingresos</a></li>
                        <li><a href="{{ path('recepcionmaterial') }}">Registrar ingreso de material</a></li>
                        <li class="disabled"><a href="#">Liquidación de servicios</a></li>
                        <li class="disabled"><a href="#">Aceptación de liquidación</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">Disposición final <span class="right-caret"></span></a>
                    <ul class="dropdown-menu sub-menu">
                        <li class="disabled"><a href="#">Programación de horas</a></li>
                        <li class="disabled"><a href="#">Reasignación de plataforma</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">Monitoreo de servicios <span class="right-caret"></span></a>
                    <ul class="dropdown-menu sub-menu">
                        <li><a href="{{ path('incidencia') }}">Incidencias</a></li>
                        <li><a href="{{ path('incidenciaresolucion') }}">Resolución de incidencias</a></li>
                        <li class="disabled"><a href="#">Monitoreo de indicadores</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">Venta de materiales <span class="right-caret"></span></a>
                    <ul class="dropdown-menu sub-menu">
                        <li><a href="{{ path('pedido') }}">Pedidos</a></li>
                        <li><a href="{{ path('pedidodetalle') }}">Detalle de pedidos</a></li>
                        <li class="disabled"><a href="#">Aceptación de pedidos</a></li>
                        <li class="disabled"><a href="#">Registrar salidas</a></li>
                        <li class="disabled"><a href="#">Stocks de materiales</a></li>
                        <li class="disabled"><a href="#">Proyección de materiales</a></li>
                        <li><a href="{{ path('liquidacionmaterial') }}">Liquidación de materiales</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{ app.user.username }} <span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="{{ path('fos_user_profile_show') }}">Perfil</a></li>
                <li><a href="{{ path('fos_user_change_password') }}">Cambiar contraseña</a></li>
                <li class="divider"></li>
                <li><a href="{{ path('fos_user_security_logout') }}">{{ 'layout.logout'|trans({}, 'FOSUserBundle') }}</a></li>
            </ul>
        </li>
    </ul>
    {% else %}
        {{ render(controller('FOSUserBundle:Security:login')) }}
    {% endif %}
</div>

Con esto hemos refactorizado el contenido de nuestro navbar para que contenga el formulario de login del mismo FOSUserBundle en el caso que no estemos loggeados y si lo estamos, entonces nos muestra un dropdown con nuestro nombre de usuario, el cuál, al hacerle click nos muestra las opciones de ver nuestro perfil, cambiar nuestra contraseña y salir.