[LiveComponent] Multiple URL query params in one LiveProp DTO

[Nayte91]

Hello,

Part of the discussion about faceted search menu and results page combo (challenge 1), I'm searching to map different url parameters into one object.

In a symfony controller, you can welcome several query params in a single DTO with the MapQueryString attribute.

I wonder if we can, also in live components, group several query params into one property class?

In a live component, currently, when you have multiple query parameters to welcome, you must declare them one by one; then eventually, in a method, regroup them into an array or a DTO to do some logic. It can be cumbersome if you have a lot of potential query parameters. Plus, and I feel like it's more important, aligning behavior of component controllers (like a LC), with regular controllers is very important as it drastically lowers the mind burden and learning curve.

Context: you got a FacetedSearchMenu component, with multiple parameters that you want to reflect on url, and you group those in a FacetFilter DTO to pass to repository or whatever.

If I may help in any way,
Best regards,

[Nayte91]

Possibilities:

• new #[LiveQueryString] attribute?
• make #[mapQueryString] works on a LC (without extending AbstractController?)
• make url: true works on a DTO

[smnandre]

I'm having doubt here... are DTO as LiveProp supposed to work already, even with URL ....

https://symfony.com/bundles/ux-live-component/current/index.html#supported-data-types

[Nayte91]

Interesting point, did you achieve any minimal working example? Because I try since 1hour, and I always throw errors:

An exception has been thrown during the rendering of a template ("Warning: Undefined property: App\Component\ArticleResults::$name").

class ArticleResults
{
    use DefaultActionTrait;
    use ComponentToolsTrait;

//    #[LiveProp(url: true)]
//    public ?string $name = null;
//    #[LiveProp(url: true)]
//    public ?string $status= null;
//    #[LiveProp(writable: true, url: true)]
//    public ?int $page = 1;

    #[LiveProp(writable: true, url: true)]
    public ?Filter $filter = null;

    private ItemsPage $articlesPage;

    public functiondoStuff(): foo {...}
}

class Filter
{
    public function __construct(
        public ?int $page = 1,
        public ?string $name = null,
        public ?string $status = null,
    ) {}
}

I may miss something goofy here, but for me and based also on the DTO part of the doc, I can't make it work 😢

[smnandre]

The error message you quote may indicate you try to mount "name" directly on ArticleResults in your template, no ?

[smnandre]

search-filters.mov

[smnandre]

(sorry for the support page ... i was working on something else 😅 )

[smnandre]

<?php

namespace App\Twig;

use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
use Symfony\UX\LiveComponent\Attribute\LiveProp;
use Symfony\UX\LiveComponent\DefaultActionTrait;

#[AsLiveComponent]
final class Search
{
    use DefaultActionTrait;

    #[LiveProp(writable: ['search', 'size', 'type'], fieldName: 's', url: true)]
    public SearchFilters $filters;

    public function mount(): void
    {
        $this->filters ??= new SearchFilters();
    }

    public function getResults(): array
    {
        $results = [
            ['name' => 'Gorilla', 'size' => 'lg',  'type' => 'animal'],
            ['name' => 'Banana', 'size' => 'md',  'type' => 'fruit'],
            ['name' => 'Apple', 'size' => 'sm',  'type' => 'fruit'],
            ['name' => 'Lion', 'size' => 'lg',  'type' => 'animal'],
            ['name' => 'Strawberry', 'size' => 'sm',  'type' => 'fruit'],
            ['name' => 'Elephant', 'size' => 'lg',  'type' => 'animal'],
            ['name' => 'Orange', 'size' => 'md',  'type' => 'fruit'],
            ['name' => 'Tiger', 'size' => 'lg',  'type' => 'animal'],
            ['name' => 'Pineapple', 'size' => 'md',  'type' => 'fruit'],
            ['name' => 'Zebra', 'size' => 'lg',  'type' => 'animal'],
        ];

        $results = array_filter($results, function($result) {
            return $this->filters->search === '' || str_contains($result['name'], $this->filters->search);
        });

        $results = array_filter($results, function($result) {
            return $this->filters->size === '' || $this->filters->size === $result['size'];
        });

        $results = array_filter($results, function($result) {
            return $this->filters->type === '' || $this->filters->type === $result['type'];
        });

        return $results;
    }
}

<?php

namespace App\Twig;

use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
use Symfony\UX\LiveComponent\DefaultActionTrait;

final class SearchFilters
{
    public string $search = '';

    public string $type = '';

    public string $size = '';
}

<div{{ attributes }}>

    <h2>dump(this.filters)</h2>
    {{ dump(this.filters) }}

    <hr />

    <h2>Filters</h2>
    <div style="display: grid; grid-template-columns: 1fr 1fr 1fr;">

        <div>
            <label>Search</label>
            <input type="search" class="form-control" data-model="s[search]" />
        </div>

        <div>
            <label>Size</label>
            <select class="form-control" data-model="s[size]">
                <option value="">Size</option>
                <option value="sm">Small</option>
                <option value="md">Medium</option>
                <option value="lg">Large</option>
            </select>
        </div>

        <div>
            <label>Type</label>
            <label>
                <input type="radio" class="form-check" data-model="s[type]" value="animal" />
                Animal
            </label>
            <label>
                <input type="radio" class="form-check-input" data-model="s[type]" value="fruit" />
                Fruit
            </label>
        </div>
    </div>

    <hr />

    <div>
        <h2>Results</h2>

        {% for result in this.results %}
            <div id="{{ result.name }}" style="padding: 1rem 0; border-bottom: 2px dotted #eee;">
                <div class="d-flex justify-content-between">
                    <h5>{{ result.name }}</h5>
                    <span>{{ result.size }}</span>
                    <span>{{ result.type }}</span>
                </div>
            </div>
        {% endfor %}
    </div>

</div>

[smnandre]

(please do not look too much at the code quality 😆 )