Skip to content

Commit 541193e

Browse files
stlgaitsgitbook-bot
stlgaits
authored and
gitbook-bot
committed
GITBOOK-29: Estelle's Oct 29 changes - update code examples with attributes in cookbook
1 parent d2c9068 commit 541193e

File tree

1 file changed

+50
-84
lines changed

1 file changed

+50
-84
lines changed

‎docs/cookbook/admin_panel/grids.md‎

Lines changed: 50 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,10 @@
11
# Customizing your grids
22

3-
<div data-full-width="false">
4-
5-
<figure><img src="../../.gitbook/assets/full_talk_grid.png" alt="Overview of an admin dashboard"></figure>
6-
7-
</div>
8-
9-
<div data-full-width="false">
3+
<div data-full-width="false"><figure><img src="../../.gitbook/assets/full_talk_grid.png" alt="Overview of an admin dashboard"><figcaption></figcaption></figure></div>
104

115
Based on the grid generated by default, our goal here is to obtain a nicely customized grid with autocomplete filters and more!
126

13-
<figure><img src="../../.gitbook/assets/basic_talk_grid.png" alt="Overview of an admin dashboard"></figure>
14-
15-
</div>
7+
<figure><img src="../../.gitbook/assets/basic_talk_grid.png" alt="Overview of an admin dashboard"><figcaption></figcaption></figure>
168

179
Let's imagine we have the following grid.
1810

@@ -34,21 +26,20 @@ use Sylius\Bundle\GridBundle\Builder\Field\DateTimeField;
3426
use Sylius\Bundle\GridBundle\Builder\Field\StringField;
3527
use Sylius\Bundle\GridBundle\Builder\GridBuilderInterface;
3628
use Sylius\Bundle\GridBundle\Grid\AbstractGrid;
37-
use Sylius\Bundle\GridBundle\Grid\ResourceAwareGridInterface;
29+
use Sylius\Component\Grid\Attribute\AsGrid;
3830

39-
final class TalkGrid extends AbstractGrid implements ResourceAwareGridInterface
31+
#[AsGrid(
32+
name: 'app_talk',
33+
resourceClass: Talk::class,
34+
)]
35+
final class TalkGrid extends AbstractGrid
4036
{
4137
public function __construct()
4238
{
4339
// TODO inject services if required
4440
}
4541

46-
public static function getName(): string
47-
{
48-
return 'app_talk';
49-
}
50-
51-
public function buildGrid(GridBuilderInterface $gridBuilder): void
42+
public function __invoke(GridBuilderInterface $gridBuilder): void
5243
{
5344
$gridBuilder
5445
// see https://github.com/Sylius/SyliusGridBundle/blob/master/docs/field_types.md
@@ -95,22 +86,13 @@ final class TalkGrid extends AbstractGrid implements ResourceAwareGridInterface
9586
)
9687
;
9788
}
98-
99-
public function getResourceClass(): string
100-
{
101-
return Talk::class;
102-
}
10389
}
10490
```
105-
{% endcode %}
91+
{% endcode %}
10692

10793
## Fields
10894

109-
<div data-full-width="false">
110-
111-
<figure><img src="../../.gitbook/assets/clean_talk_grid.png" alt="Overview of an admin dashboard"></figure>
112-
113-
</div>
95+
<div data-full-width="false"><figure><img src="../../.gitbook/assets/clean_talk_grid.png" alt="Overview of an admin dashboard"><figcaption></figcaption></figure></div>
11496

11597
Let's clean up our grid and remove unnecessary fields.
11698

@@ -132,16 +114,15 @@ use Sylius\Bundle\GridBundle\Builder\Field\DateTimeField;
132114
use Sylius\Bundle\GridBundle\Builder\Field\StringField;
133115
use Sylius\Bundle\GridBundle\Builder\GridBuilderInterface;
134116
use Sylius\Bundle\GridBundle\Grid\AbstractGrid;
135-
use Sylius\Bundle\GridBundle\Grid\ResourceAwareGridInterface;
117+
use Sylius\Component\Grid\Attribute\AsGrid;
136118

137-
final class TalkGrid extends AbstractGrid implements ResourceAwareGridInterface
119+
#[AsGrid(
120+
name: 'app_talk',
121+
resourceClass: Talk::class,
122+
)]
123+
final class TalkGrid extends AbstractGrid
138124
{
139-
public static function getName(): string
140-
{
141-
return 'app_talk';
142-
}
143-
144-
public function buildGrid(GridBuilderInterface $gridBuilder): void
125+
public function __invoke(GridBuilderInterface $gridBuilder): void
145126
{
146127
$gridBuilder
147128
->addField(
@@ -172,30 +153,17 @@ final class TalkGrid extends AbstractGrid implements ResourceAwareGridInterface
172153
)
173154
;
174155
}
175-
176-
public function getResourceClass(): string
177-
{
178-
return Talk::class;
179-
}
180156
}
181157
```
182158
{% endcode %}
183159

184-
We have removed the "description", "endsAt" and "track" grid fields.
160+
We have removed the `description`, `endsAt` and `track` grid fields.
185161

186-
<div data-full-width="false">
187-
188-
<figure><img src="../../.gitbook/assets/clean_talk_grid.png" alt="Overview of an admin dashboard"></figure>
189-
190-
</div>
162+
<div data-full-width="false"><figure><img src="../../.gitbook/assets/clean_talk_grid.png" alt="Overview of an admin dashboard"><figcaption></figcaption></figure></div>
191163

192164
## Adding the speaker avatar using Twig field
193165

194-
<div data-full-width="false">
195-
196-
<figure><img src="../../.gitbook/assets/talk_grid_with_avatar.png" alt="Overview of an admin dashboard"></figure>
197-
198-
</div>
166+
<div data-full-width="false"><figure><img src="../../.gitbook/assets/talk_grid_with_avatar.png" alt="Overview of an admin dashboard"><figcaption></figcaption></figure></div>
199167

200168
Now, let's add the speaker avatar into our talk grid.
201169

@@ -207,14 +175,18 @@ namespace App\Grid;
207175
use Sylius\Bundle\GridBundle\Builder\Field\TwigField;
208176
use Sylius\Bundle\GridBundle\Builder\GridBuilderInterface;
209177
use Sylius\Bundle\GridBundle\Grid\AbstractGrid;
210-
use Sylius\Bundle\GridBundle\Grid\ResourceAwareGridInterface;
178+
use Sylius\Component\Grid\Attribute\AsGrid;
211179
// ...
212180

213-
final class TalkGrid extends AbstractGrid implements ResourceAwareGridInterface
181+
#[AsGrid(
182+
name: 'app_talk',
183+
resourceClass: Talk::class,
184+
)]
185+
final class TalkGrid extends AbstractGrid
214186
{
215187
// ...
216188

217-
public function buildGrid(GridBuilderInterface $gridBuilder): void
189+
public function __invoke(GridBuilderInterface $gridBuilder): void
218190
{
219191
$gridBuilder
220192
->addField(
@@ -230,22 +202,17 @@ final class TalkGrid extends AbstractGrid implements ResourceAwareGridInterface
230202
}
231203
```
232204

233-
templates/talk/grid/speaker_avatar.html.twig
234-
{% import '@SyliusBootstrapAdminUi/shared/helper/avatar.html.twig' as avatar %}
235-
236-
{% set avatar_path = data.avatar.path is defined ? vich_uploader_asset(data.avatar) : null %}
237-
205+
{% code title="templates/talk/grid/speaker_avatar.html.twig" lineNumbers="true" %}
206+
```php
238207
{{ avatar.default(avatar_path, 'img-thumbnail') }}
208+
```
209+
{% endcode %}
239210

240211
## Filters
241212

242213
### Adding an autocomplete filter
243214

244-
<div data-full-width="false">
245-
246-
<figure><img src="../../.gitbook/assets/autocomplete_filter.png" alt="Overview of an admin dashboard"></figure>
247-
248-
</div>
215+
<div data-full-width="false"><figure><img src="../../.gitbook/assets/autocomplete_filter.png" alt="Overview of an admin dashboard"><figcaption></figcaption></figure></div>
249216

250217
We'd like to filter our talks by a specific speaker.
251218

@@ -296,11 +263,16 @@ declare(strict_types=1);
296263
namespace App\Grid\Filter;
297264

298265
use App\Form\SpeakerAutocompleteType;
266+
use Sylius\Component\Grid\Attribute\AsFilter;
299267
use Sylius\Component\Grid\Data\DataSourceInterface;
300268
use Sylius\Component\Grid\Filter\EntityFilter;
301-
use Sylius\Component\Grid\Filtering\ConfigurableFilterInterface;
269+
use Sylius\Component\Grid\Filtering\FilterInterface;
302270

303-
final class SpeakerFilter implements ConfigurableFilterInterface
271+
#[AsFilter(
272+
formType: SpeakerAutocompleteType::class,
273+
template: '@SyliusBootstrapAdminUi/shared/grid/filter/select.html.twig',
274+
)]
275+
final class SpeakerFilter implements FilterInterface
304276
{
305277
public function __construct(
306278
private readonly EntityFilter $entityFilter,
@@ -312,21 +284,11 @@ final class SpeakerFilter implements ConfigurableFilterInterface
312284
// We simply reuse the logic of the built-in EntityFilter provided by the Sylius Grid package.
313285
$this->entityFilter->apply($dataSource, $name, $data, $options);
314286
}
315-
316-
public static function getFormType(): string
317-
{
318-
return SpeakerAutocompleteType::class;
319-
}
320-
321-
public static function getType(): string
322-
{
323-
return self::class;
324-
}
325287
}
326288
```
327289
{% endcode %}
328290

329-
Then, we add our SpeakerFilter to our grid.
291+
Then, we add our `SpeakerFilter` to our grid.
330292

331293
{% code title="src/Grid/TalkGrid.php" lineNumbers="true" %}
332294
```php
@@ -341,22 +303,26 @@ use Sylius\Bundle\GridBundle\Builder\Filter\Filter;
341303
use Sylius\Bundle\GridBundle\Builder\GridBuilderInterface;
342304
use Sylius\Bundle\GridBundle\Grid\AbstractGrid;
343305
use Sylius\Bundle\GridBundle\Grid\ResourceAwareGridInterface;
306+
use Sylius\Component\Grid\Attribute\AsGrid;
344307
// ...
345308

346-
final class TalkGrid extends AbstractGrid implements ResourceAwareGridInterface
309+
#[AsGrid(
310+
name: 'app_talk',
311+
resourceClass: Talk::class,
312+
)]
313+
final class TalkGrid extends AbstractGrid
347314
{
348315
// ...
349316

350-
public function buildGrid(GridBuilderInterface $gridBuilder): void
317+
public function __invoke(GridBuilderInterface $gridBuilder): void
351318
{
352319
$gridBuilder
353320
->addFilter(
354321
Filter::create(name: 'speaker', type: SpeakerFilter::class)
355322
->setLabel('app.ui.speaker')
356-
->setOptions(['fields' => ['speaker.id']]), // TODO, we need to check if this is necessary
357-
)
323+
);
324+
358325
// ...
359-
;
360326
}
361327

362328
// ...

0 commit comments

Comments
 (0)