Компоненты

Fragment

Основы

Fragment позволяет обернуть определённую область страницы и обновлять только её при вызове событий. Компонент использует для этого Laravel Blade директиву @fragment.

make(iterable $components = [])
make(iterable $components = [])
 namespaces
use MoonShine\Crud\Components\Fragment;
use MoonShine\UI\Fields\Text;
 
protected function components(): iterable
{
    return [
        Fragment::make([
            Text::make('Name', 'first_name')
        ])->name('fragment-name')
    ];
}
 namespaces
use MoonShine\Crud\Components\Fragment;
use MoonShine\UI\Fields\Text;
 
protected function components(): iterable
{
    return [
        Fragment::make([
            Text::make('Name', 'first_name')
        ])->name('fragment-name')
    ];
}

Асинхронное взаимодействие

Обновление через события

Fragment::make($components)->name('fragment-name'),
Fragment::make($components)->name('fragment-name'),

Например, вызовем событие при успешной отправке формы:

FormBuilder::make()
    ->async(events: AlpineJs::event(JsEvent::FRAGMENT_UPDATED, 'fragment-name'))
FormBuilder::make()
    ->async(events: AlpineJs::event(JsEvent::FRAGMENT_UPDATED, 'fragment-name'))

Вы также можете передать дополнительные параметры с запросом через массив:

Fragment::make($components)
    ->name('fragment-name')
    ->updateWith(params: ['resourceItem' => request('resourceItem')]),
Fragment::make($components)
    ->name('fragment-name')
    ->updateWith(params: ['resourceItem' => request('resourceItem')]),

Передача параметров

Метод withSelectorsParams() позволяет передавать значения полей с запросом, используя селекторы элементов.

Fragment::make($components)
    ->withSelectorsParams([
        'start_date' => '#start_date',
        'end_date' => '#end_date'
    ])
    ->name('fragment-name'),
Fragment::make($components)
    ->withSelectorsParams([
        'start_date' => '#start_date',
        'end_date' => '#end_date'
    ])
    ->name('fragment-name'),

Вызов событий

При успешном обновлении Fragment может также вызвать дополнительные события. Рассмотрим пример обновления фрагментов поочередно при нажатии на кнопку:

Fragment::make([
    FlexibleRender::make('<p> Step 1: ' . time() . '</p>')
])
    ->updateWith(
        events: [
            AlpineJs::event(JsEvent::FRAGMENT_UPDATED, 'fg-step-2'),
        ],
    )
    ->name('fg-step-1'),
 
Fragment::make([
    FlexibleRender::make('<p> Step 2: ' . time() . '</p>')
])
    ->name('fg-step-2'),
 
// ...
 
ActionButton::make('Start')
    ->dispatchEvent([AlpineJs::event(JsEvent::FRAGMENT_UPDATED, 'fg-step-1')]),
Fragment::make([
    FlexibleRender::make('<p> Step 1: ' . time() . '</p>')
])
    ->updateWith(
        events: [
            AlpineJs::event(JsEvent::FRAGMENT_UPDATED, 'fg-step-2'),
        ],
    )
    ->name('fg-step-1'),
 
Fragment::make([
    FlexibleRender::make('<p> Step 2: ' . time() . '</p>')
])
    ->name('fg-step-2'),
 
// ...
 
ActionButton::make('Start')
    ->dispatchEvent([AlpineJs::event(JsEvent::FRAGMENT_UPDATED, 'fg-step-1')]),

Обработка ответа

Подробности в разделе Js

Fragment::make($components)
    ->updateWith(
        callback: AsyncCallback::with(afterResponse: 'afterResponseFunction')
    )
    ->name('fragment-name'),
Fragment::make($components)
    ->updateWith(
        callback: AsyncCallback::with(afterResponse: 'afterResponseFunction')
    )
    ->name('fragment-name'),

Параметры запроса URL

Вы можете включить параметры текущего URL запроса (например, ?param=value) в запрос фрагмента.

Это позволит сохранить все параметры из URL строки текущего запроса при загрузке фрагмента.

Fragment::make($components)
    ->name('fragment-name')
    ->withQueryParams(),
Fragment::make($components)
    ->name('fragment-name')
    ->withQueryParams(),

Автообновление

Метод autoUpdate() позволяет автоматически обновлять содержимое фрагмента с заданным интервалом.

autoUpdate(int $ms)
autoUpdate(int $ms)
  • $ms — интервал обновления в миллисекундах (должен быть больше 0).
 namespaces
use MoonShine\Crud\Components\Fragment;
use MoonShine\UI\Components\Metrics\ValueMetric;
 
Fragment::make([
    ValueMetric::make('Metric')
        ->value(random_int(1, 1000))
        ->columnSpan(6),
])
    ->name('fragment-metric')
    ->withQueryParams()
    ->autoUpdate(5000),
 namespaces
use MoonShine\Crud\Components\Fragment;
use MoonShine\UI\Components\Metrics\ValueMetric;
 
Fragment::make([
    ValueMetric::make('Metric')
        ->value(random_int(1, 1000))
        ->columnSpan(6),
])
    ->name('fragment-metric')
    ->withQueryParams()
    ->autoUpdate(5000),

В данном примере фрагмент с метрикой будет автоматически обновляться каждые 5 секунд.