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 > 30 días con LAST Stack

Buy Access to Course

13.

Paginación y ordenación por columnas

|

|

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 Chapter

Next Chapter

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

Login Subscribe

Login or register to check out the script

10 Comments

Sort By

Login or Register to join the conversation

KB 2 years ago

To save a few lines of code, you could of course also work with a macro for the table header. For example, I built the following macro according to this tutorial:

{% macro sortColumnHeader(sortName, sortNiceName, sort, sortDirection) %}
    <a href="{{ path('app_customer_index', {
        ...app.request.query.all(),
        sort: sortName,
        sortDirection: sort == sortName and sortDirection == 'ASC' ? 'DESC' : 'ASC',
    }) }}">
        {{ sortNiceName}} {{ _self.sortArrow(sortName, sort, sortDirection) }}
    </a>
{% endmacro %}

1 |

sadikoff KB 2 years ago edited

Hi @KB

Yeah that is a good example for twig macro usage, thanks for sharing it!

Cheers!

1 |

Quentin 2 years ago edited

I was encountering a bug on the arrow of the column sorting the first time I load the page (wrong direction).

Just found that it was due to ASC (in uppercase) in the controller vs asc/desc (in lowercase) in the Twig macro !

|

MolloKhan SFCASTS Quentin 2 years ago edited

Hey @Quentin

Oh, right, it makes sense because asc is not equal (===) to ASC. When I doubt what type of string I'm getting, I transform it into lowercase first.

Cheers!

|

Brandon 2 years ago edited

Ryan,
I'm trying to use LiveComponent to sort my columns. I have no problem passing the sortDirection to the live component, and I use a small Stimulus controller to flip from 'ASC' to 'DESC', but I'm struggling to figure out how to also send the column I want to sort by with the direction, this is my button:

            <button
                    data-controller="sort"
                    type="button"
                    data-model="sortDirection"
                    data-value="DESC"
                    data-action="live#update"
                    data-bs-toggle="tooltip"
                    data-bs-placement="top"
                    title="Sort"
            >
            </button>

Any suggestions?

|

weaverryan SFCASTS Brandon 2 years ago

Hey @Brandon!

Try changing this to trigger a #[LiveAction] instead - e.g. public function sort(string $direction, string $field). Inside, you'll use those 2 arguments to set those 2 properties. On the frontend, the data-action-name attribute allows you to specify which live action you want to call and its arguments.

Let me know if this helps!

Cheers!

|

Brandon weaverryan 2 years ago edited

Ryan,

On the frontend, the data-action-name attribute allows you to specify which live action you want to call and its arguments.

How do I send multiple arguments? Can't the button only have one data-model and data-value?
In my component I have this:

#[LiveProp(writable: true)]
public ?string $sortDirection = null;

#[LiveProp(writable: true)]
public ?string $column = null;

And my button has no problem sending the data-model="sortDirection" & data-value="DESC". Should I change this to a form and have two hidden fields?

|

weaverryan SFCASTS Brandon 2 years ago

Hey @Brandon!

It should look like this:

<button
    data-action="live#action"
    data-action-name="sort(direction=asc, field={{ fieldName }})"
>...some text</button>

The confusion, I think, is that because you want to change 2 models with one click, we're going to completely forgo data-model and instead just trigger a LiveAction (which can then change the models for us). So no data-model needed at all.

FYI - in the next release (2.14.0), data-action-name will go away in favor of another syntax. Updating will involve a simple "find" for data-action-name in your app and a syntax change. So nothing fundamental is changing - but I wanted to give you a head's up!

Cheers!

|

Veselin-D 2 years ago

I am curious why do you prefer pagerfanta over your own knp-pagination bundle? Is it a matter of taste or pagerfanta is more performance efficient? I personally find knp pagination bundle more flexible and easier to use.

|

Victor SFCASTS Veselin-D 2 years ago

Hey Veselin-D,

Actually, that's mostly a matter of taste. Indeed, most bundles are great and feature-rich, though Pagerfanta might be older that's why Ryan just got to use to it :) Feel free to use any of it that you like more... or know better. Though Pagerfanta seems more active (at least the bundle) lately with their releases.

Cheers!

1 |

Symfony 6.4 Tailwind CSS 3 Flowbite 2 Stimulus 3 Turbo 7

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
    }
}

What JavaScript libraries does this tutorial use?

// importmap.php

return [
  'app' => [
    'path' => './assets/app.js',
    'entrypoint' => true,
  ],
  'js-confetti' => [
    'version' => '0.11.0',
  ],
  '@hotwired/stimulus' => [
    'version' => '3.2.2',
  ],
  '@symfony/stimulus-bundle' => [
    'path' => './vendor/symfony/stimulus-bundle/assets/dist/loader.js',
  ],
  'tom-select' => [
    'version' => '2.3.1',
  ],
  'tom-select/dist/css/tom-select.default.css' => [
    'version' => '2.3.1',
    'type' => 'css',
  ],
  '@hotwired/turbo' => [
    'version' => '7.3.0',
  ],
  'stimulus-popover' => [
    'version' => '6.2.0',
  ],
  'debounce' => [
    'version' => '1.2.1',
  ],
  'turbo-view-transitions' => [
    'version' => '0.3.0',
  ],
  'stimulus-use' => [
    'version' => '0.52.1',
  ],
  'flowbite' => [
    'version' => '2.2.1',
  ],
  '@popperjs/core' => [
    'version' => '2.11.8',
  ],
  'flowbite-datepicker' => [
    'version' => '1.2.6',
  ],
];

Previous Chapter

Next Chapter