Chapters

32 Chapters | 4:16:27 |

01

¡Hola ÚLTIMA PILA!

4:01
02

Mapeador de activos

5:18
03

Módulos JavaScript

6:33
04

paquetes JavaScript de terceros

5:05
05

CSS

6:22
06

Tailwind CSS

9:24
07

Stimulus (estímulo)

6:45
08

Paquetes Symfony UX

6:47
09

Turbo Drive

5:42
10

Marcos Turbo

8:43
11

¡Popover!

11:44
12

Formularios de envío automático

3:37
13

Paginación y ordenación por columnas

8:04
14

Tablas de datos con Turbo Frames

7:03
15

Ver Transiciones

7:04
16

Notificaciones Toast

3:46
17

Tostadas más elegantes: Auto-cierre y Desvanecimiento

7:34
18

Turbo Streams: Actualiza cualquier elemento

5:23
19

Diálogo HTML para Módulos

13:18
20

¡Modal AJAX!

8:29
21

Fantástica UX modal con un estado de carga

8:04
22

Cosas extravagantes en el Éxito del Formulario Modal

8:30
23

¡Más con Modales divertidos! Editar y borrar

10:05
24

Respuestas Turbo Streams

4:24
25

Componentes Twig

10:52
26

Componente Twig modal

11:54
27

Componentes en vivo

11:47
28

Validación en tiempo real y campos de formulario dependientes

11:37
29

Pruebas, Parte 1: Twig y Componentes Vivos

5:32
30

Pruebas Parte 2: Pruebas funcionales

12:36
31

Rendimiento

9:16
32

Bonus: Más sobre Flowbite

11:08

> Symfony 6 > 30 días con LAST Stack

Buy Access to Course

26.

Componente Twig modal

Autoplay

Keep on Learning!

If you liked what you've learned so far, dive in! Subscribe to get
access to this tutorial plus video, code and script downloads.

Start your All-Access Pass

Buy just this tutorial for $12.00

Previous Challenge

Next Challenge

With a Subscription, click any sentence in the script to jump to that part of the video!

Hoy es un buen día. Hoy vamos a combinar nuestro sistema modal con componentes Twig para conseguir un objetivo Quiero poder añadir rápidamente un modal en cualquier parte de nuestra app.

Comienza en base.html.twig. En la parte inferior, copia el marcado modal. Ya ves... es bastante: no es algo que queramos copiar y pegar en otro sitio:

            
Copy Code

Show All Lines

                        97 lines
            |
            templates/base.html.twig
        
            <!DOCTYPE html>
        
            <html>
        
Show Lines

                                                    // ... lines 3 - 15
                            
                <body class="bg-black text-white font-mono">
        
Show Lines

                                                    // ... lines 17 - 51
                            
                    <div
        
                        data-controller="modal"
        
                        data-action="turbo:before-cache@window->modal#close"
        
                    >
        
                        <dialog
        
                            class="open:flex bg-gray-800 rounded-lg shadow-xl inset-0 w-full md:w-fit md:max-w-[50%] md:min-w-[50%] animate-fade-in backdrop:bg-slate-600 backdrop:opacity-80"
        
                            data-modal-target="dialog"
        
                            data-action="close->modal#close click->modal#clickOutside"
        
                        >
        
                            <div class="flex grow p-5">
        
                                <div class="grow overflow-auto p-1">
        
                                    <turbo-frame
        
                                        id="modal"
        
                                        data-modal-target="dynamicContent"
        
                                        data-action="turbo:before-fetch-request->modal#showLoading"
        
                                        class="aria-busy:opacity-50 transition-opacity"
        
                                    >
        
                                        {{ include('_frameSuccessStreams.html.twig', { frame: 'modal' }) }}
        
                                    </turbo-frame>
        
                                </div>
        
                            </div>
        
                        </dialog>
        
                        <template data-modal-target="loadingTemplate">
        
                            <div class="bg-space-pattern bg-cover rounded-lg p-8">
        
                                <div class="space-y-2">
        
                                    <div class="h-4 bg-gray-700 rounded w-3/4 animate-pulse"></div>
        
                                    <div class="h-4 bg-gray-700 rounded animate-pulse"></div>
        
                                    <div class="h-4 bg-gray-700 rounded animate-pulse"></div>
        
                                    <div class="h-4"></div>
        
                                    <div class="h-4 bg-gray-700 rounded animate-pulse"></div>
        
                                    <div class="h-4 bg-gray-700 rounded w-1/2 animate-pulse"></div>
        
                                    <div class="h-4 bg-gray-700 rounded w-3/4 animate-pulse"></div>
        
                                    <div class="h-4"></div>
        
                                    <div class="h-4 bg-gray-700 rounded w-1/2 animate-pulse"></div>
        
                                </div>
        
                            </div>
        
                        </template>
        
                    </div>
        
Show Lines

                                                    // ... lines 91 - 94
                            
                </body>
        
            </html>

Cópialo y luego bórralo. Vamos a crear un componente Modal, esta vez a mano. Crea un nuevo archivo en templates/components/ llamado Modal.html.twig, y pégalo:

            
Copy Code

                        40 lines
            |
            templates/components/Modal.html.twig
        
            <div
        
                data-controller="modal"
        
                data-action="turbo:before-cache@window->modal#close"
        
            >
        
                <dialog
        
                    class="open:flex bg-gray-800 rounded-lg shadow-xl inset-0 w-full md:w-fit md:max-w-[50%] md:min-w-[50%] animate-fade-in backdrop:bg-slate-600 backdrop:opacity-80"
        
                    data-modal-target="dialog"
        
                    data-action="close->modal#close click->modal#clickOutside"
        
                >
        
                    <div class="flex grow p-5">
        
                        <div class="grow overflow-auto p-1">
        
                            <turbo-frame
        
                                id="modal"
        
                                data-modal-target="dynamicContent"
        
                                data-action="turbo:before-fetch-request->modal#showLoading"
        
                                class="aria-busy:opacity-50 transition-opacity"
        
                            >
        
                                {{ include('_frameSuccessStreams.html.twig', { frame: 'modal' }) }}
        
                            </turbo-frame>
        
                        </div>
        
                    </div>
        
                </dialog>
        
                <template data-modal-target="loadingTemplate">
        
                    <div class="bg-space-pattern bg-cover rounded-lg p-8">
        
                        <div class="space-y-2">
        
                            <div class="h-4 bg-gray-700 rounded w-3/4 animate-pulse"></div>
        
                            <div class="h-4 bg-gray-700 rounded animate-pulse"></div>
        
                            <div class="h-4 bg-gray-700 rounded animate-pulse"></div>
        
                            <div class="h-4"></div>
        
                            <div class="h-4 bg-gray-700 rounded animate-pulse"></div>
        
                            <div class="h-4 bg-gray-700 rounded w-1/2 animate-pulse"></div>
        
                            <div class="h-4 bg-gray-700 rounded w-3/4 animate-pulse"></div>
        
                            <div class="h-4"></div>
        
                            <div class="h-4 bg-gray-700 rounded w-1/2 animate-pulse"></div>
        
                        </div>
        
                    </div>
        
                </template>
        
            </div>

Como dije con el Button, no necesitamos una clase PHP para un componente. Como no tenemos ninguna, lo llamaremos "componente anónimo".

Encima, renderiza attributes... luego añade .defaults() para que podamos mover estos dos atributos a eso. Pega... luego cada uno de ellos necesita un cambio de imagen para encajar como claves y valores Twig en lugar de atributos HTML:

            
Copy Code

Show All Lines

                        42 lines
            |
            templates/components/Modal.html.twig
        
            <div
        
                {{ attributes.defaults({
        
                    'data-controller': 'modal',
        
                    'data-action': 'turbo:before-cache@window->modal#close',
        
                }) }}
        
            >
        
Show Lines

                                                    // ... lines 7 - 40
                            
            </div>

¡Me gusta! Sobre base.html.twig, renderiza esto con <twig:Modal>. ¡Qué fácil!

Añadir bloques al componente

Sin embargo, fíjate bien en Modal.html.twig: hay algunas cosas que no deberían estar aquí. Por ejemplo, ¡el <turbo-frame>! No todos los modales necesitan un marco. Muchas veces, renderizaremos un modal con contenido simple y codificado dentro.

Copia esto y sustitúyelo, por supuesto, por {% block content %} y {% endblock %}:

            
Copy Code

Show All Lines

                        35 lines
            |
            templates/components/Modal.html.twig
        
            <div
        
Show Lines

                                                    // ... lines 2 - 5
                            
            >
        
                <dialog
        
Show Lines

                                                    // ... lines 8 - 10
                            
                >
        
                    <div class="flex grow p-5">
        
                        <div class="grow overflow-auto p-1">
        
                            {% block content %}{% endblock %}
        
                        </div>
        
                    </div>
        
                </dialog>
        
Show Lines

                                                    // ... lines 18 - 33
                            
            </div>

En base.html.twig, pega el marco... y añade una etiqueta de cierre:

            
Copy Code

Show All Lines

                        67 lines
            |
            templates/base.html.twig
        
            <!DOCTYPE html>
        
            <html>
        
Show Lines

                                                    // ... lines 3 - 15
                            
                <body class="bg-black text-white font-mono">
        
Show Lines

                                                    // ... lines 17 - 54
                            
                    <twig:Modal>
        
                        <turbo-frame
        
                            id="modal"
        
                            data-modal-target="dynamicContent"
        
                            data-action="turbo:before-fetch-request->modal#showLoading"
        
                            class="aria-busy:opacity-50 transition-opacity"
        
                        >
        
                            {{ include('_frameSuccessStreams.html.twig', { frame: 'modal' }) }}
        
                        </turbo-frame>
        
                    </twig:Modal>
        
                </body>
        
            </html>

¡Sigamos! ¿La plantilla de carga de aquí abajo? Sí, también es algo específico de este modal. Si nuestro modal es un mensaje hardcoded, ¡no necesitará esto en absoluto!

Copia el div de carga , bórralo, luego alrededor del <template> añade: ifblock('loading_template'):

            
Copy Code

Show All Lines

                        25 lines
            |
            templates/components/Modal.html.twig
        
            <div
        
Show Lines

                                                    // ... lines 2 - 5
                            
            >
        
Show Lines

                                                    // ... lines 7 - 18
                            
                {% if block('loading_template') %}
        
                    <template data-modal-target="loadingTemplate">
        
                        {% block loading_template %}{% endblock %}
        
                    </template>
        
                {% endif %}
        
            </div>

Así que si pasamos el bloque, renderízalo dentro de <template>.

De vuelta en base.html.twig, en cualquier lugar, define ese bloque. Pero en lugar de la etiqueta normal{% block %} -que funcionaría-, cuando estás dentro de un componente Twig, puedes utilizar una sintaxis especial <twig:block> con name="loading_template". Luego, pega:

            
Copy Code

Show All Lines

                        82 lines
            |
            templates/base.html.twig
        
            <!DOCTYPE html>
        
            <html>
        
Show Lines

                                                    // ... lines 3 - 15
                            
                <body class="bg-black text-white font-mono">
        
Show Lines

                                                    // ... lines 17 - 54
                            
                    <twig:Modal>
        
                        <turbo-frame
        
Show Lines

                                                    // ... lines 57 - 62
                            
                        </turbo-frame>
        
                        <twig:block name="loading_template">
        
                            <div class="bg-space-pattern bg-cover rounded-lg p-8">
        
                                <div class="space-y-2">
        
                                    <div class="h-4 bg-gray-700 rounded w-3/4 animate-pulse"></div>
        
                                    <div class="h-4 bg-gray-700 rounded animate-pulse"></div>
        
                                    <div class="h-4 bg-gray-700 rounded animate-pulse"></div>
        
                                    <div class="h-4"></div>
        
                                    <div class="h-4 bg-gray-700 rounded animate-pulse"></div>
        
                                    <div class="h-4 bg-gray-700 rounded w-1/2 animate-pulse"></div>
        
                                    <div class="h-4 bg-gray-700 rounded w-3/4 animate-pulse"></div>
        
                                    <div class="h-4"></div>
        
                                    <div class="h-4 bg-gray-700 rounded w-1/2 animate-pulse"></div>
        
                                </div>
        
                            </div>
        
                        </twig:block>
        
                    </twig:Modal>
        
                </body>
        
            </html>

Acabamos de mover un montón de cosas. Y aún así... ¡el modal existente sigue funcionando! Y ahora, tenemos un componente modal más esbelto y eficaz que podemos reutilizar en otros lugares.

Hagamos exactamente eso. Quiero añadir un enlace de borrado en cada fila que, al hacer clic, abra un modal con una confirmación. Abre _row.html.twig. Copia el enlace de edición, pégalo y llámalo eliminar:

            
Copy Code

Show All Lines

                        19 lines
            |
            templates/voyage/_row.html.twig
        
            <tr class="even:bg-gray-700 odd:bg-gray-600" id="voyage-list-item-{{ voyage.id }}">
        
Show Lines

                                                    // ... lines 2 - 4
                            
                <td class="px-6 py-4 whitespace-nowrap">
        
Show Lines

                                                    // ... lines 6 - 11
                            
                    <a
        
                        href="{{ path('app_voyage_edit', {'id': voyage.id}) }}"
        
                        class="ml-4 text-yellow-400 hover:text-yellow-600"
        
                        data-turbo-frame="modal"
        
                    >edit</a>
        
                </td>
        
            </tr>

Para que esto funcione, una opción es crear una nueva página independiente de confirmación de eliminación, apuntar a ella y... ¡listo! El data-turbo-frame="modal"cargaría esa página en el modal.

Pero como ya hemos hecho eso antes, vamos a probar algo diferente. Elimina el href, cámbialo por un button, elimina el atributo data-turbo-frame... y cambia los colores amarillos por rojos:

            
Copy Code

Show All Lines

                        17 lines
            |
            templates/voyage/_row.html.twig
        
            <tr class="even:bg-gray-700 odd:bg-gray-600" id="voyage-list-item-{{ voyage.id }}">
        
Show Lines

                                                    // ... lines 2 - 4
                            
                <td class="px-6 py-4 whitespace-nowrap">
        
Show Lines

                                                    // ... lines 6 - 11
                            
                    <button
        
                        class="ml-4 text-red-400 hover:text-red-600"
        
                    >delete</button>
        
                </td>
        
            </tr>

Vamos a comprobar el aspecto. ¡Qué bonito!

De vuelta, pegaré un modal:

            
Copy Code

Show All Lines

                        24 lines
            |
            templates/voyage/_row.html.twig
        
            <tr class="even:bg-gray-700 odd:bg-gray-600" id="voyage-list-item-{{ voyage.id }}">
        
Show Lines

                                                    // ... lines 2 - 4
                            
                <td class="px-6 py-4 whitespace-nowrap">
        
Show Lines

                                                    // ... lines 6 - 14
                            
                    <twig:Modal>
        
                        <svg class="mx-auto mb-4 text-gray-400 w-12 h-12 dark:text-gray-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M12 9v4" /><path d="M12 16v.01" /></svg>
        
                        <h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">
        
                            Delete this thrilling voyage???
        
                        </h3>
        
                    </twig:Modal>
        
                </td>
        
            </tr>

Aquí no hay nada especial. La gran diferencia es que, en lugar de un <turbo-frame>, el contenido que necesitamos está justo aquí. Cuando actualizamos, cada fila tiene ahora un cuadro de diálogo de borrado en su interior. ¡Pero no pasa nada! No está abierto, así que es invisible.

Ahora viene la parte complicada. Cuando hagamos clic en este botón, tendremos que abrir este modal. Para que esto ocurra, necesitamos que el botón viva físicamente dentro del elementodata-controller="modal" para que pueda llamar a la acción open en el controlador modal Stimulus.

Para permitirlo, dentro de la plantilla modal, añade un nuevo bloque llamado trigger,endblock:

            
Copy Code

Show All Lines

                        27 lines
            |
            templates/components/Modal.html.twig
        
            <div
        
Show Lines

                                                    // ... lines 2 - 5
                            
            >
        
                {% block trigger %}{% endblock %}
        
Show Lines

                                                    // ... lines 8 - 25
                            
            </div>

Ahora, si tienes un botón que activa la apertura del modal, ¡puedes ponerlo aquí! En _row.html.twig, copia el botón, quítalo, pon<twig:block name="trigger"> y pégalo.

Y como estamos dentro del modal, añade data-action="modal#open":

            
Copy Code

Show All Lines

                        29 lines
            |
            templates/voyage/_row.html.twig
        
            <tr class="even:bg-gray-700 odd:bg-gray-600" id="voyage-list-item-{{ voyage.id }}">
        
Show Lines

                                                    // ... lines 2 - 4
                            
                <td class="px-6 py-4 whitespace-nowrap flex">
        
Show Lines

                                                    // ... lines 6 - 12
                            
                    <twig:Modal>
        
                        <twig:block name="trigger">
        
                            <button
        
                                class="ml-4 text-red-400 hover:text-red-600"
        
                                data-action="modal#open"
        
                            >delete</button>
        
                        </twig:block>
        
Show Lines

                                                    // ... lines 20 - 25
                            
                    </twig:Modal>
        
                </td>
        
            </tr>

¡Probemos esto! ¡Qué emoción! ¡Actualiza! El estilo se ha vuelto raro. Antes teníamos tres etiquetas a, que son elementos en línea. Ahora tenemos dos elementos en línea y un elemento de bloque. Así que es algo que cambia ligeramente, pero tiene fácil arreglo. Arriba, en <td>, añade una clase flex:

            
Copy Code

Show All Lines

                        29 lines
            |
            templates/voyage/_row.html.twig
        
            <tr class="even:bg-gray-700 odd:bg-gray-600" id="voyage-list-item-{{ voyage.id }}">
        
Show Lines

                                                    // ... lines 2 - 4
                            
                <td class="px-6 py-4 whitespace-nowrap flex">
        
Show Lines

                                                    // ... lines 6 - 26
                            
                </td>
        
            </tr>

Y ahora... mucho mejor. Y lo que es más importante, cuando pulsamos Eliminar, ¡el modal se abre! Sin embargo, ya me conoces, quiero que esto sea perfecto. Y no estoy contento con el tamaño que tiene. Cuando abro el formulario de edición, tiene sentido que ocupe la mitad del ancho de la pantalla. Pero cuando abro el de borrar, deberíamos dejar que se redujera al tamaño del contenido que hay dentro.

Para ello, en este caso, quiero pasarle una nueva bandera llamada allowSmallWidthestablecida en true:

            
Copy Code

Show All Lines

                        29 lines
            |
            templates/voyage/_row.html.twig
        
            <tr class="even:bg-gray-700 odd:bg-gray-600" id="voyage-list-item-{{ voyage.id }}">
        
Show Lines

                                                    // ... lines 2 - 4
                            
                <td class="px-6 py-4 whitespace-nowrap flex">
        
Show Lines

                                                    // ... lines 6 - 12
                            
                    <twig:Modal :allowSmallWidth="true">
        
Show Lines

                                                    // ... lines 14 - 25
                            
                    </twig:Modal>
        
                </td>
        
            </tr>

He añadido este : porque, si paso allowSmallWidth="true", pasará la cadena true. Al añadir dos puntos, esto se convierte en código Twig, por lo que pasará el booleano true. Ambos funcionarían... pero me gusta ser más estricto.

Con el Button, aprendimos que si quieres que esto se convierta en una variable en lugar de un atributo, puedes añadir una propiedad pública con ese mismo nombre. Y podríamos crear un nuevo archivo Modal.php.

Pero hay otra forma de convertir un atributo en una variable cuando se utiliza un componente anónimo. En la parte superior de Modal.html.twig, añade una etiqueta propsque es especial para los componentes Twig. Añade allowSmallWidth y ponla por defecto enfalse:

            
Copy Code

Show All Lines

                        28 lines
            |
            templates/components/Modal.html.twig
        
            {% props allowSmallWidth=false %}
        
Show Lines

                                                    // ... lines 2 - 28

Genial, ¿eh? A continuación, queremos hacer que este ancho mínimo sea condicional. Digamos{{ allowSmallWidth }} - si es cierto, no renderiza nada, sino renderiza elmd:min-w-[50%]:

            
Copy Code

Show All Lines

                        28 lines
            |
            templates/components/Modal.html.twig
        
            {% props allowSmallWidth=false %}
        
            <div
        
Show Lines

                                                    // ... lines 3 - 6
                            
            >
        
Show Lines

                                                    // ... lines 8 - 9
                            
                <dialog
        
                    class="open:flex bg-gray-800 rounded-lg shadow-xl inset-0 w-full md:w-fit md:max-w-[50%] {{ allowSmallWidth ? '' : 'md:min-w-[50%] ' }}animate-fade-in backdrop:bg-slate-600 backdrop:opacity-80"
        
Show Lines

                                                    // ... lines 12 - 13
                            
                >
        
Show Lines

                                                    // ... lines 15 - 19
                            
                </dialog>
        
Show Lines

                                                    // ... lines 21 - 26
                            
            </div>

De vuelta a la página, el enlace de edición sigue abriéndose a media anchura... pero el enlace de borrado, ¡ah, es bonito y pequeño! ¡Ahora se merece un contenido de verdad! En _row.html.twig, después de <h3>, añadiré algo de estilo... luego quiero un botón de cancelar que cierre el modal. Para eso, podemos ir a la vieja escuela. Añade un <form method="dialog">, y dentro un <twig:Button> que diga Cancelar. Y quiero que el botón parezca un enlace, así que añade variant="link":

            
Copy Code

Show All Lines

                        36 lines
            |
            templates/voyage/_row.html.twig
        
            <tr class="even:bg-gray-700 odd:bg-gray-600" id="voyage-list-item-{{ voyage.id }}">
        
Show Lines

                                                    // ... lines 2 - 4
                            
                <td class="px-6 py-4 whitespace-nowrap flex">
        
Show Lines

                                                    // ... lines 6 - 12
                            
                    <twig:Modal :allowSmallWidth="true">
        
Show Lines

                                                    // ... lines 14 - 26
                            
                        <div class="flex justify-between">
        
                            <form method="dialog">
        
                                <twig:Button variant="link">Cancel</twig:Button>
        
                            </form>
        
Show Lines

                                                    // ... line 31
                            
                        </div>
        
                    </twig:Modal>
        
                </td>
        
            </tr>

Eso aún no existe, así que en la clase Button, añádelo: variant y sólo necesita text-white:

            
Copy Code

Show All Lines

                        24 lines
            |
            src/Twig/Components/Button.php
        
Show Lines

                                                    // ... lines 1 - 7
                            
            class Button
        
            {
        
Show Lines

                                                    // ... lines 10 - 12
                            
                public function getVariantClasses(): string
        
                {
        
                    return match ($this->variant) {
        
Show Lines

                                                    // ... lines 16 - 18
                            
                        'link' => 'text-white',
        
Show Lines

                                                    // ... line 20
                            
                    };
        
                }
        
            }

Después del formulario, para renderizar el botón de eliminar, incluye voyage/_delete_form.html.twig:

            
Copy Code

Show All Lines

                        36 lines
            |
            templates/voyage/_row.html.twig
        
            <tr class="even:bg-gray-700 odd:bg-gray-600" id="voyage-list-item-{{ voyage.id }}">
        
Show Lines

                                                    // ... lines 2 - 4
                            
                <td class="px-6 py-4 whitespace-nowrap flex">
        
Show Lines

                                                    // ... lines 6 - 12
                            
                    <twig:Modal :allowSmallWidth="true">
        
Show Lines

                                                    // ... lines 14 - 26
                            
                        <div class="flex justify-between">
        
                            <form method="dialog">
        
                                <twig:Button variant="link">Cancel</twig:Button>
        
                            </form>
        
                            {{ include('voyage/_delete_form.html.twig') }}
        
                        </div>
        
                    </twig:Modal>
        
                </td>
        
            </tr>

Ah, y esa plantilla tiene incorporado confirm. Elimínalo porque ahora tenemos algo mucho mejor.

¡Momento de la verdad! Actualiza y borra. ¡Queda genial! Cancelar cierra el modal... y borrar funciona. Y no debería sorprender que funcione. El formulario de borrado no está dentro de un <turbo-frame>. Así que cuando hacemos clic en borrar, se activa un envío de formulario normal que redirige y provoca una navegación normal por toda la página.

Vale, sé que esto ya es un día completo, pero quiero utilizar el modal en un punto más. Y es un caso de uso genial.

En la página de inicio, en mi código PHP y Symfony, no lo mostraré, pero ya he añadido lógica para filtrar esta lista por los planetas. Sólo que no añadí ninguna casilla de verificación de planetas a la página porque... en realidad no tenemos espacio para ellas.

Así que ésta es mi idea: añade un enlace aquí que abra un modal que contenga las opciones de filtrado adicionales.

Abre main/homepage.html.twig y busca esa entrada. Empieza añadiendo un<div class="w-1/3 flex">... añade el cierre al otro lado de la entrada... luego elimina w-1/3 de la entrada. Estamos haciendo espacio para ese enlace:

            
Copy Code

Show All Lines

                        149 lines
            |
            templates/main/homepage.html.twig
        
Show Lines

                                                    // ... lines 1 - 27
                            
            {% block body %}
        
                <div class="flex">
        
Show Lines

                                                    // ... lines 30 - 36
                            
                    <section class="flex-1 ml-10">
        
                        <form
        
                            method="GET"
        
                            action="{{ path('app_homepage') }}"
        
                            class="mb-6 flex justify-between"
        
                            data-controller="autosubmit"
        
                            data-turbo-frame="voyage-list"
        
                        >
        
                            <div class="w-1/3 flex">
        
                                <input
        
                                    type="search"
        
                                    name="query"
        
                                    value="{{ app.request.query.get('query') }}"
        
                                    aria-label="Search voyages"
        
                                    placeholder="Search voyages"
        
                                    class="px-4 py-2 rounded bg-gray-800 text-white placeholder-gray-400"
        
                                    data-action="autosubmit#debouncedSubmit"
        
                                    autofocus
        
                                >
        
                            </div>
        
Show Lines

                                                    // ... lines 57 - 59
                            
                        </form>
        
Show Lines

                                                    // ... lines 61 - 145
                            
                    </section>
        
                </div>
        
            {% endblock %}

Pero pegaré un modal completo:

            
Copy Code

Show All Lines

                        169 lines
            |
            templates/main/homepage.html.twig
        
Show Lines

                                                    // ... lines 1 - 27
                            
            {% block body %}
        
                <div class="flex">
        
Show Lines

                                                    // ... lines 30 - 36
                            
                    <section class="flex-1 ml-10">
        
                        <form
        
                            method="GET"
        
                            action="{{ path('app_homepage') }}"
        
                            class="mb-6 flex justify-between"
        
                            data-controller="autosubmit"
        
                            data-turbo-frame="voyage-list"
        
                        >
        
                            <div class="w-1/3 flex">
        
                                <input
        
                                    type="search"
        
                                    name="query"
        
                                    value="{{ app.request.query.get('query') }}"
        
                                    aria-label="Search voyages"
        
                                    placeholder="Search voyages"
        
                                    class="px-4 py-2 rounded bg-gray-800 text-white placeholder-gray-400"
        
                                    data-action="autosubmit#debouncedSubmit"
        
                                    autofocus
        
                                >
        
                                <twig:Modal>
        
                                    <twig:block name="trigger">
        
                                        <twig:Button
        
                                            variant="link"
        
                                            type="button"
        
                                            data-action="modal#open"
        
                                        >Options</twig:Button>
        
                                    </twig:block>
        
                                    <h3 class="text-white text-lg font-semibold mb-2">Search Options</h3>
        
                                    <hr class="mb-4">
        
                                    <div class="flex justify-end">
        
                                        <twig:Button
        
                                            variant="success"
        
                                            data-action="modal#close"
        
                                        >See Results</twig:Button>
        
                                    </div>
        
                                </twig:Modal>
        
                            </div>
        
Show Lines

                                                    // ... lines 77 - 79
                            
                        </form>
        
Show Lines

                                                    // ... lines 81 - 165
                            
                    </section>
        
                </div>
        
            {% endblock %}

Esto será invisible excepto por el desencadenante. Así que básicamente acabamos de añadir un botón que dice "opciones". Pero ya está configurado para abrir el modal. Dentro, para empezar, tenemos un h3 y un <twig:Button> que cierra el modal.

Pero el resultado cuando hago clic en opciones... ¡es bonito! Aunque, necesita un botón de cierre en la parte superior derecha. Podríamos añadirlo sólo a este modal... pero estaría bien que fuera una opción del componente modal.

¡Hagámoslo! En Modal.html.twig, añade una prop más llamada closeButtonpor defecto a false:

            
Copy Code

Show All Lines

                        37 lines
            |
            templates/components/Modal.html.twig
        
            {% props allowSmallWidth=false, closeButton=false %}
        
Show Lines

                                                    // ... lines 2 - 37

Si es así, al final de dialog, pegaré un botón de cerrar:

            
Copy Code

Show All Lines

                        37 lines
            |
            templates/components/Modal.html.twig
        
            {% props allowSmallWidth=false, closeButton=false %}
        
            <div
        
Show Lines

                                                    // ... lines 3 - 6
                            
            >
        
Show Lines

                                                    // ... lines 8 - 9
                            
                <dialog
        
Show Lines

                                                    // ... lines 11 - 13
                            
                >
        
Show Lines

                                                    // ... lines 15 - 19
                            
                    {% if closeButton %}
        
                        <button
        
                            class="absolute right-4 top-3 text-white flex items-center opacity-70 transition-opacity hover:opacity-100"
        
                            data-action="modal#close"
        
                            type="button"
        
                        >
        
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 6l-12 12" /><path d="M6 6l12 12" /></svg>
        
                        </button>
        
                    {% endif %}
        
                </dialog>
        
Show Lines

                                                    // ... lines 30 - 35
                            
            </div>

De nuevo, aquí no hay nada especial: algo de estilo absoluto, un icono... y la parte importante: llama a modal#close.

En homepage.html.twig encuentra ese modal y añade closeButton="true"... pero con el : como la última vez:

            
Copy Code

Show All Lines

                        169 lines
            |
            templates/main/homepage.html.twig
        
Show Lines

                                                    // ... lines 1 - 27
                            
            {% block body %}
        
                <div class="flex">
        
Show Lines

                                                    // ... lines 30 - 36
                            
                    <section class="flex-1 ml-10">
        
                        <form
        
Show Lines

                                                    // ... lines 39 - 43
                            
                        >
        
                            <div class="w-1/3 flex">
        
Show Lines

                                                    // ... lines 46 - 56
                            
                                <twig:Modal :closeButton="true">
        
Show Lines

                                                    // ... lines 58 - 74
                            
                                </twig:Modal>
        
                            </div>
        
Show Lines

                                                    // ... lines 77 - 79
                            
                        </form>
        
Show Lines

                                                    // ... lines 81 - 165
                            
                    </section>
        
                </div>
        
            {% endblock %}

¡Vamos a verlo! ¡Me encanta!

Por último, vamos a escarchar este pastel. Cerca de la parte inferior del contenido, pegaré las casillas de verificación del planeta:

            
Copy Code

Show All Lines

                        184 lines
            |
            templates/main/homepage.html.twig
        
Show Lines

                                                    // ... lines 1 - 27
                            
            {% block body %}
        
                <div class="flex">
        
Show Lines

                                                    // ... lines 30 - 36
                            
                    <section class="flex-1 ml-10">
        
                        <form
        
Show Lines

                                                    // ... lines 39 - 43
                            
                        >
        
                            <div class="w-1/3 flex">
        
Show Lines

                                                    // ... lines 46 - 56
                            
                                <twig:Modal :closeButton="true">
        
Show Lines

                                                    // ... lines 58 - 65
                            
                                    <h3 class="text-white text-lg font-semibold mb-2">Search Options</h3>
        
                                    <hr class="mb-4">
        
                                    <h4 class="text-white text-sm font-semibold mb-2">
        
                                        Planets
        
                                    </h4>
        
                                    {% for planet in planets %}
        
                                        <div class="flex items-center mb-4">
        
                                            <input
        
                                                type="checkbox"
        
                                                class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
        
                                                name="planets[]"
        
                                                value="{{ planet.id }}"
        
                                                id="planet-search-{{ planet.id }}"
        
                                                {{ planet.id in searchPlanets ? 'checked' : '' }}
        
                                            >
        
                                            <label for="planet-search-{{ planet.id }}" class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">{{ planet.name }}</label>
        
                                        </div>
        
                                    {% endfor %}
        
Show Lines

                                                    // ... lines 84 - 89
                            
                                </twig:Modal>
        
                            </div>
        
Show Lines

                                                    // ... lines 92 - 94
                            
                        </form>
        
Show Lines

                                                    // ... lines 96 - 180
                            
                    </section>
        
                </div>
        
            {% endblock %}

¡Esto es más código aburrido! Mi controlador Symfony ya está configurado para leer el parámetro planets y filtrar la consulta.

Prueba final. Ábrelo. ¡Precioso! Ahora observa: haz clic en algunos. Cuando pulse "Ver resultados", la tabla debería actualizarse. Bum. ¡Se ha actualizado!

Pero lo mejor es... ¡cómo ha funcionado! Piénsalo: Pulso este botón... y la tabla se recarga. Eso significa que el formulario se está enviando. Pero... ¿qué lo ha provocado? Mira el botón: no hay código para enviar el formulario. Entonces, ¿qué está pasando?

Recuerda: este button, las casillas de verificación del planeta y este modal viven físicamente dentro del elemento <form>. ¿Y qué ocurre cuando pulsas un botón que vive dentro de un formulario? ¡Envía el formulario! Ejecutamos el modal#close, pero también permitimos que el navegador realice el comportamiento por defecto: enviar el formulario. ¡Esto es tecnología alienígena antigua en acción!

En cuanto al botón de cierre, he sido un poco astuto. Cuando lo añadí, incluí untype="button". Eso le dice al navegador que no envíe ningún formulario que pueda estar dentro. Por eso, cuando hacemos clic en "X", no se actualiza nada. Pero cuando hacemos clic en "ver resultados", el formulario se envía.

¡Woh! ¡El mejor día de todos! Mañana veremos los componentes en vivo, en los que tomamos componentes Twig y dejamos que se reproduzcan en la página mediante Ajax cuando el usuario interactúa con ellos.

5 Comments

Sort By

ThierryGTH 2 months ago

Hi everyone !
Thanks again for that great tutorial !
I need to load an <turbo-frame> modal (exactly like you do) but triggered from an stimulus controller (action).
To do that I tried by putting an empty a tag in my html like <a href="my_url" id="myIdLinkToLoadTurboFrame" data-turbo-frame="turbo_frame_id"></a>.
And in my stimulus controller I do this.element.querySelector('#myIdLinkToLoadTurboFrame').click();
Work fine with Firefox, but doesn't work at all with Chrome and Safari.
Is it possible to trigger the same action of clicking the data-turbo-frame link but from an stimulus controller ?
Cheers!

| Reply |

weaverryan SFCASTS ThierryGTH 2 months ago

Hey @ThierryGTH!

Thanks again for that great tutorial !

Really glad you enjoyed it!

Is it possible to trigger the same action of clicking the data-turbo-frame link but from an stimulus controller ?

Here's how I would probably handle this:

A) Pass the url - my_url - into your Stimulus controller as a value so you have access to the URL
B) Instead of trying to click the link, find the frame and set its src:

// use this.element.querySelector('#turbo_frame_id') if the frame is inside the controller
document.getElementElementById('turbo_frame_id').src = this.urlValue;

That should be all you need. The frame will see that the src just changed and start doing its thing. In fact, I think when you have data-turbo-frame="turbo_frame_id", all that does internally is take the href and put it onto the src of the turbo-frame. Then the frame handles things from there.

Cheers!

| Reply |

ThierryGTH weaverryan 2 months ago

Thank you very much !
That's work perfectly and it's much prettier setting src than virtually clicking a tag.
The issue with Chrome and Safari was just because I was using data-action=click-> inside an select option tag :
<select><option data-action="click->myController#myFunctionToClickVirtualy>Add item</></select>
The solution is to handle at the select level :
<select data-action="myController#myOnChangeFunctionToManageWhatToDoDependingValue"><option value="addItem">Add item</option></select>
Cheers!

| Reply |

escobarcampos 4 months ago

Hi!
Before, I was always using stimulus_controller('modal') instead of data-controller="modal" in twig... something I learned from your other Stimulus tutorial and that I grew used to. I was using stimulus_target() and stimulus_action() the same way. This does not work inside the twig component's default attributes though.

If i use this in Modal.html.twig

<div {{ attributes.defaults({
    stimulus_controller('modal'),
    stimulus_action('turbo:before-cache@window->modal', 'close')
}) }}
>

it complains: A hash key must be followed by a colon (:). Unexpected token "punctuation" of value "(" ("punctuation" expected with value ":").

Looking forward to finishing this great course!

| Reply |

weaverryan SFCASTS escobarcampos 4 months ago

Hey @escobarcampos!

Before, I was always using stimulus_controller('modal') instead of data-controller="modal" in twig... something I learned from your other Stimulus tutorial

Yea, I created these helpers and get used to them... then recently got accustomed to the attribute names. Now those feel better to me. But, both are fine!

This does not work inside the twig component's default attributes though.

You can do this - here's the reference in general about this (there's a note in this section) - https://symfony.com/bundles/ux-twig-component/current/index.html#component-attributes - I think you could combine them in this way, but I could be totally borking the syntax 🫠

<div {{ attributes.defaults({
    ...stimulus_controller('modal'),
    ...stimulus_action('turbo:before-cache@window->modal', 'close')
}) }}

The .defaults() functions accepts a "hash" (i.e. associative array) and stimulus_controller('modal') returns an iterable object. So, iirc, using ... to spread that will work. But let me know. It's not super smooth, and it may even have some escaping differences... I can't quite remember. This definitely helped push me towards just using the attributes.

Cheers!

| Reply |

Symfony 6.4

What PHP libraries does this tutorial use?

// composer.json
{
    "require": {
        "php": ">=8.2",
        "ext-ctype": "*",
        "ext-iconv": "*",
        "babdev/pagerfanta-bundle": "4.x-dev", // 4.x-dev
        "doctrine/doctrine-bundle": "^2.10", // 2.12.x-dev
        "doctrine/doctrine-migrations-bundle": "^3.2", // 3.4.x-dev
        "doctrine/orm": "^2.16", // 2.18.x-dev
        "knplabs/knp-time-bundle": "dev-main", // dev-main
        "pagerfanta/doctrine-orm-adapter": "4.x-dev", // 4.x-dev
        "pagerfanta/twig": "4.x-dev", // 4.x-dev
        "symfony/asset": "6.4.*", // 6.4.x-dev
        "symfony/asset-mapper": "6.4.*", // 6.4.x-dev
        "symfony/console": "6.4.x-dev", // 6.4.x-dev
        "symfony/dotenv": "6.4.x-dev", // 6.4.x-dev
        "symfony/flex": "^2", // 2.x-dev
        "symfony/form": "6.4.x-dev", // 6.4.x-dev
        "symfony/framework-bundle": "6.4.x-dev", // 6.4.x-dev
        "symfony/monolog-bundle": "^3.0", // dev-master
        "symfony/runtime": "6.4.x-dev", // 6.4.x-dev
        "symfony/security-csrf": "6.4.x-dev", // 6.4.x-dev
        "symfony/stimulus-bundle": "2.x-dev", // 2.x-dev
        "symfony/twig-bundle": "6.4.x-dev", // 6.4.x-dev
        "symfony/ux-autocomplete": "2.x-dev", // 2.x-dev
        "symfony/ux-live-component": "2.x-dev", // 2.x-dev
        "symfony/ux-turbo": "2.x-dev", // 2.x-dev
        "symfony/ux-twig-component": "2.x-dev", // 2.x-dev
        "symfony/validator": "6.4.x-dev", // 6.4.x-dev
        "symfony/web-link": "6.4.*", // 6.4.x-dev
        "symfony/yaml": "6.4.x-dev", // 6.4.x-dev
        "symfonycasts/dynamic-forms": "dev-main", // dev-main
        "symfonycasts/tailwind-bundle": "dev-main", // dev-main
        "tales-from-a-dev/flowbite-bundle": "dev-main", // dev-main
        "twig/extra-bundle": "^2.12|^3.0", // 3.x-dev
        "twig/twig": "^2.12|^3.0" // 3.x-dev
    },
    "require-dev": {
        "doctrine/doctrine-fixtures-bundle": "^3.4", // 3.6.x-dev
        "phpunit/phpunit": "^9.5", // 9.6.x-dev
        "symfony/browser-kit": "6.4.*", // 6.4.x-dev
        "symfony/css-selector": "6.4.*", // 6.4.x-dev
        "symfony/debug-bundle": "6.4.x-dev", // 6.4.x-dev
        "symfony/maker-bundle": "^1.51", // dev-main
        "symfony/panther": "^2.1", // v2.1.1
        "symfony/phpunit-bridge": "7.1.x-dev", // 7.1.x-dev
        "symfony/stopwatch": "6.4.x-dev", // 6.4.x-dev
        "symfony/web-profiler-bundle": "6.4.x-dev", // 6.4.x-dev
        "zenstruck/browser": "1.x-dev", // 1.x-dev
        "zenstruck/foundry": "^1.36" // 1.x-dev
    }
}

Previous Challenge

Next Challenge

Componente Twig modal

Share this awesome video!

Keep on Learning!

Añadir bloques al componente

5 Comments

Delete comment?

What PHP libraries does this tutorial use?

	<!DOCTYPE html>
	<html>
Show Lines	// ... lines 3 - 15
	<body class="bg-black text-white font-mono">
Show Lines	// ... lines 17 - 51
	<div
	data-controller="modal"
	data-action="turbo:before-cache@window->modal#close"
	>
	<dialog
	class="open:flex bg-gray-800 rounded-lg shadow-xl inset-0 w-full md:w-fit md:max-w-[50%] md:min-w-[50%] animate-fade-in backdrop:bg-slate-600 backdrop:opacity-80"
	data-modal-target="dialog"
	data-action="close->modal#close click->modal#clickOutside"
	>
	<div class="flex grow p-5">
	<div class="grow overflow-auto p-1">
	<turbo-frame
	id="modal"
	data-modal-target="dynamicContent"
	data-action="turbo:before-fetch-request->modal#showLoading"
	class="aria-busy:opacity-50 transition-opacity"
	>
	{{ include('_frameSuccessStreams.html.twig', { frame: 'modal' }) }}
	</turbo-frame>
	</div>
	</div>
	</dialog>

	<template data-modal-target="loadingTemplate">
	<div class="bg-space-pattern bg-cover rounded-lg p-8">
	<div class="space-y-2">
	<div class="h-4 bg-gray-700 rounded w-3/4 animate-pulse"></div>
	<div class="h-4 bg-gray-700 rounded animate-pulse"></div>
	<div class="h-4 bg-gray-700 rounded animate-pulse"></div>
	<div class="h-4"></div>
	<div class="h-4 bg-gray-700 rounded animate-pulse"></div>
	<div class="h-4 bg-gray-700 rounded w-1/2 animate-pulse"></div>
	<div class="h-4 bg-gray-700 rounded w-3/4 animate-pulse"></div>
	<div class="h-4"></div>
	<div class="h-4 bg-gray-700 rounded w-1/2 animate-pulse"></div>
	</div>
	</div>
	</template>
	</div>
Show Lines	// ... lines 91 - 94
	</body>
	</html>

	<div
	{{ attributes.defaults({
	'data-controller': 'modal',
	'data-action': 'turbo:before-cache@window->modal#close',
	}) }}
	>
Show Lines	// ... lines 7 - 40
	</div>

	<div
Show Lines	// ... lines 2 - 5
	>
	<dialog
Show Lines	// ... lines 8 - 10
	>
	<div class="flex grow p-5">
	<div class="grow overflow-auto p-1">
	{% block content %}{% endblock %}
	</div>
	</div>
	</dialog>
Show Lines	// ... lines 18 - 33
	</div>

	<tr class="even:bg-gray-700 odd:bg-gray-600" id="voyage-list-item-{{ voyage.id }}">
Show Lines	// ... lines 2 - 4
	<td class="px-6 py-4 whitespace-nowrap">
Show Lines	// ... lines 6 - 11
	<a
	href="{{ path('app_voyage_edit', {'id': voyage.id}) }}"
	class="ml-4 text-yellow-400 hover:text-yellow-600"
	data-turbo-frame="modal"
	>edit</a>
	</td>
	</tr>

	{% props allowSmallWidth=false %}
Show Lines	// ... lines 2 - 28

Show Lines	// ... lines 1 - 7
	class Button
	{
Show Lines	// ... lines 10 - 12
	public function getVariantClasses(): string
	{
	return match ($this->variant) {
Show Lines	// ... lines 16 - 18
	'link' => 'text-white',
Show Lines	// ... line 20
	};
	}
	}

Show Lines	// ... lines 1 - 27
	{% block body %}
	<div class="flex">
Show Lines	// ... lines 30 - 36
	<section class="flex-1 ml-10">
	<form
	method="GET"
	action="{{ path('app_homepage') }}"
	class="mb-6 flex justify-between"
	data-controller="autosubmit"
	data-turbo-frame="voyage-list"
	>
	<div class="w-1/3 flex">
	<input
	type="search"
	name="query"
	value="{{ app.request.query.get('query') }}"
	aria-label="Search voyages"
	placeholder="Search voyages"
	class="px-4 py-2 rounded bg-gray-800 text-white placeholder-gray-400"
	data-action="autosubmit#debouncedSubmit"
	autofocus
	>
	</div>
Show Lines	// ... lines 57 - 59
	</form>
Show Lines	// ... lines 61 - 145
	</section>
	</div>
	{% endblock %}

	{% props allowSmallWidth=false, closeButton=false %}
Show Lines	// ... lines 2 - 37

Componente Twig modal

Keep on Learning!

Crear el componente modal

Añadir bloques al componente

Eliminar el modal con contenido personalizado

Abrir el modal

Tamaño Modal Condicional y la Etiqueta props

Ocultar las opciones de búsqueda en un modal

Añadir un botón de cierre del modal

5 Comments

What PHP libraries does this tutorial use?