diff --git a/resources/views/pages/en/advanced/js_events.blade.php b/resources/views/pages/en/advanced/js_events.blade.php index c04b429d..10aede8a 100644 --- a/resources/views/pages/en/advanced/js_events.blade.php +++ b/resources/views/pages/en/advanced/js_events.blade.php @@ -1,158 +1,161 @@ - -Blade directives - - - Blade directives are used to quickly declare events for components. - - - - - -@@defineEvent(string|JsEvent $event, ?string $name = null, ?string $call = null) - - - -
  • $event - event
    • -
  • $name - component name
    • -
  • $call - callback function.
    • -     - - -
    -
    -     - - - - -@@defineEventWhen(mixed $condition, string|JsEvent $event, ?string $name = null, ?string $call = null) - - - -
  • $condition - condition for the event
    • -
  • $event - event
    • -
  • $name - component name
    • -
  • $call - callback function.
    • -     - - -
    -
    -     - -AlpineJs helper - - - AlpineJs helper class for generating events. - - - - - -AlpineJs::event(string|JsEvent $event, ?string $name = null, ?string $call = null) - - - -
  • $event - event
    • -
  • $name - component name
    • -
  • $call - callback function.
    • -     - - -use MoonShine\Components\FormBuilder; -use MoonShine\Enums\JsEvent; -use MoonShine\Support\AlpineJs; - -FormBuilder::make('/crud/update', 'PUT') - ->name('main-form') - ->async(asyncEvents: [AlpineJs::event(JsEvent::TABLE_UPDATED, 'index', 'asyncRequest')]) // [tl! focus] - - - - - -AlpineJs::eventBlade(string|JsEvent $event, ?string $name = null, ?string $call = null) - - - -
  • $event - event
    • -
  • $name - component name
    • -
  • $call - callback function.
    • -     - - -use MoonShine\Components\FormBuilder; -use MoonShine\Enums\JsEvent; -use MoonShine\Support\AlpineJs; - -FormBuilder::make('/crud/update', 'PUT') - ->name('main-form') - ->customAttributes([ + Blade-директивы + + + Blade-директивы используются для быстрого объявления событий у компонентов. + + + + + + @@defineEvent(string|JsEvent $event, ?string $name = null, ?string $call = null, array $params = []) + + + +
  • $event - событие,
    • +
  • $name - название компонента,
    • +
  • $call - callback функция.
    • +
  • $params - параметры события.
    • +     + + +
    + // @table-updated-index.window="asyncRequest" + @@defineEvent('table-updated', 'index', 'asyncRequest') + > +
    +     + + + + + @@defineEventWhen(mixed $condition, string|JsEvent $event, ?string $name = null, ?string $call = null, array $params = []) + + + +
  • $condition - условие для события,
    • +
  • $event - событие,
    • +
  • $name - название компонента,
    • +
  • $call - callback функция.
    • +
  • $params - параметры события.
    • +     + + +
    + // @table-updated-index.window="asyncRequest" + @@defineEventWhen(true, 'table-updated', 'index', 'asyncRequest') + > +
    +     + + Помощник AlpineJs + + + AlpineJs класс-помощник, для формирования событий. + + + + + + AlpineJs::event(string|JsEvent $event, ?string $name = null, array $params = []) + + + +
  • $event - событие,
    • +
  • $name - название компонента,
    • +
  • $params - параметры события
    • +     + + + use MoonShine\Components\FormBuilder; + use MoonShine\Enums\JsEvent; + use MoonShine\Support\AlpineJs; + + FormBuilder::make('/crud/update', 'PUT') + ->name('main-form') + ->async(asyncEvents: [AlpineJs::event(JsEvent::TABLE_UPDATED, 'index', ['var' => 'foo])]) // [tl! focus] + + + + + + AlpineJs::eventBlade(string|JsEvent $event, ?string $name = null, ?string $call = null, array $params = []) + + + +
  • $event - событие,
    • +
  • $name - название компонента,
    • +
  • $call - callback функция.
    • +
  • $params - параметры события
    • +     + + + use MoonShine\Components\FormBuilder; + use MoonShine\Enums\JsEvent; + use MoonShine\Support\AlpineJs; + + FormBuilder::make('/crud/update', 'PUT') + ->name('main-form') + ->customAttributes([ // @form-reset-main-form.window="formReset" AlpineJs::eventBlade(JsEvent::FORM_RESET, 'main-form') => 'formReset', // [tl! focus] - ]); - - -Default events - - - There are several default events defined in the MoonShine admin panel, - the names of which can be conveniently obtained via enum JsEvent. - - - -
  • JsEvent::FRAGMENT_UPDATED - fragment update,
    • -
  • JsEvent::TABLE_UPDATED - table update,
    • -
  • JsEvent::TABLE_REINDEX - updating table indexes when sorting,
    • -
  • JsEvent::TABLE_ROW_UPDATED - updating a row in the table,
    • -
  • JsEvent::CARDS_UPDATED - updating the Cards list,
    • -
  • JsEvent::FORM_RESET - form reset,
    • -
  • JsEvent::FORM_SUBMIT - submitting the form,
    • -
  • JsEvent::MODAL_TOGGLED - opening / closing a modal window,
    • -
  • JsEvent::OFF_CANVAS_TOGGLED - opening / closing Offcanvas,
    • -
  • JsEvent::TOAST - call Toast.
    • -     - -Calling events via Response - - - In MoonShine you can return events to MoonShineJsonResponse, which will then be called.
    - To do this, you need to use the events() method. -     - - -events(array $events) - - - -
  • $events - array of events to be called.
    • -     - - -use MoonShine\Enums\JsEvent; -use MoonShine\Http\Responses\MoonShineJsonResponse; -use MoonShine\Support\AlpineJs; - -//... - -return MoonShineJsonResponse::make() - ->events([ + ]); + + + События по умолчанию + + + В админ-панели MoonShine определены несколько событий по умолчанию, + названия которых можно удобно получить через enum JsEvent. + + + +
  • JsEvent::FRAGMENT_UPDATED - обновление фрагмента,
    • +
  • JsEvent::TABLE_UPDATED - обновление таблицы,
    • +
  • JsEvent::TABLE_REINDEX - обновление индексов таблицы при сортировке,
    • +
  • JsEvent::TABLE_ROW_UPDATED - обновление строки в таблице,
    • +
  • JsEvent::CARDS_UPDATED - обновление списка Сards,
    • +
  • JsEvent::FORM_RESET - сброс формы,
    • +
  • JsEvent::FORM_SUBMIT - отправка формы,
    • +
  • JsEvent::MODAL_TOGGLED - открытие / закрытие модального окна,
    • +
  • JsEvent::OFF_CANVAS_TOGGLED - открытие / закрытие Offcanvas,
    • +
  • JsEvent::TOAST - вызов Toast.
    • +     + + Вызов событий через Response + + + В MoonShine можно вернуть события в MoonShineJsonResponse, которые потом будут вызваны.
    + Для этого необходимо воспользоваться методом events(). +     + + + events(array $events) + + + +
  • $events - массив вызываемых событий.
    • +     + + + use MoonShine\Enums\JsEvent; + use MoonShine\Http\Responses\MoonShineJsonResponse; + use MoonShine\Support\AlpineJs; + + //... + + return MoonShineJsonResponse::make() + ->events([ AlpineJs::event(JsEvent::TABLE_UPDATED, 'index'), - ]); // [tl! focus:-2] - + ]); // [tl! focus:-2] +     diff --git a/resources/views/pages/en/recipes.blade.php b/resources/views/pages/en/recipes.blade.php index e0cbb52a..02f3c487 100644 --- a/resources/views/pages/en/recipes.blade.php +++ b/resources/views/pages/en/recipes.blade.php @@ -16,6 +16,7 @@ ['url' => '#change-field-logic', 'label' => 'Changing field logic'], ['url' => '#images-in-linked-table', 'label' => 'Saving images in a linked table'], ['url' => '#custom-select-filter', 'label' => 'Custom select filter'], + ['url' => '#async-metrics', 'label' => 'Async metrics'], ] ]" > @@ -36,5 +37,6 @@ ]) @include('pages.en.recipes.images-in-linked-table', ['title' => 'Saving images in a linked table']) @include('pages.en.recipes.custom-select-filter', ['title' => 'Custom select filter']) +@include('pages.en.recipes.async-metrics', ['title' => 'Async metrics']) diff --git a/resources/views/pages/en/recipes/async-metrics.blade.php b/resources/views/pages/en/recipes/async-metrics.blade.php new file mode 100644 index 00000000..82ea79ea --- /dev/null +++ b/resources/views/pages/en/recipes/async-metrics.blade.php @@ -0,0 +1,42 @@ + + + + Metrics with form parameters + + + +$startDate = request()->date('_form.start_date'); +$endDate = request()->date('_form.end_date'); + +FormBuilder::make() + ->dispatchEvent(AlpineJs::event(JsEvent::FRAGMENT_UPDATED, 'metrics')) + ->fields([ + Flex::make([ + Date::make('Start date'), + Date::make('End date'), + ]), + ]), + +Fragment::make([ + FlexibleRender::make("$startDate - $endDate"), + + LineChartMetric::make('Orders') + ->line([ + 'Profit' => Order::query() + ->selectRaw('SUM(price) as sum, DATE_FORMAT(created_at, "%d.%m.%Y") as date') + ->whereBetween('created_at', [$startDate, $endDate]) + ->groupBy('date') + ->pluck('sum', 'date') + ->toArray(), + ]) + ->line([ + 'Avg' => Order::query() + ->selectRaw('AVG(price) as average, DATE_FORMAT(created_at, "%d.%m.%Y") as date') + ->whereBetween('created_at', [$startDate, $endDate]) + ->groupBy('date') + -> pluck('avg', 'date') + ->toArray(), + ], '#EC4176'), +])->name('metrics'), + + diff --git a/resources/views/pages/ru/advanced/js_events.blade.php b/resources/views/pages/ru/advanced/js_events.blade.php index e25d204e..9e757d7b 100644 --- a/resources/views/pages/ru/advanced/js_events.blade.php +++ b/resources/views/pages/ru/advanced/js_events.blade.php @@ -16,17 +16,18 @@ -@@defineEvent(string|JsEvent $event, ?string $name = null, ?string $call = null) +@@defineEvent(string|JsEvent $event, ?string $name = null, ?string $call = null, array $params = [])
  • $event - событие,
  • $name - название компонента,
  • $call - callback функция.
    • +
  • $params - параметры события.
    •  -
    // @table-updated-index.window="asyncRequest" @@defineEvent('table-updated', 'index', 'asyncRequest') > @@ -36,7 +37,7 @@ -@@defineEventWhen(mixed $condition, string|JsEvent $event, ?string $name = null, ?string $call = null) +@@defineEventWhen(mixed $condition, string|JsEvent $event, ?string $name = null, ?string $call = null, array $params = []) @@ -44,10 +45,11 @@
  • $event - событие,
  • $name - название компонента,
  • $call - callback функция.
    • +
  • $params - параметры события.
    •  -
    // @table-updated-index.window="asyncRequest" @@defineEventWhen(true, 'table-updated', 'index', 'asyncRequest') > @@ -63,13 +65,13 @@ -AlpineJs::event(string|JsEvent $event, ?string $name = null, ?string $call = null) +AlpineJs::event(string|JsEvent $event, ?string $name = null, array $params = [])
  • $event - событие,
  • $name - название компонента,
    • -
  • $call - callback функция.
    • +
  • $params - параметры события
    •  @@ -79,19 +81,20 @@ FormBuilder::make('/crud/update', 'PUT') ->name('main-form') - ->async(asyncEvents: [AlpineJs::event(JsEvent::TABLE_UPDATED, 'index', 'asyncRequest')]) // [tl! focus] + ->async(asyncEvents: [AlpineJs::event(JsEvent::TABLE_UPDATED, 'index', ['var' => 'foo])]) // [tl! focus] -AlpineJs::eventBlade(string|JsEvent $event, ?string $name = null, ?string $call = null) +AlpineJs::eventBlade(string|JsEvent $event, ?string $name = null, ?string $call = null, array $params = [])
  • $event - событие,
  • $name - название компонента,
  • $call - callback функция.
    • +
  • $params - параметры события
    •  diff --git a/resources/views/pages/ru/recipes.blade.php b/resources/views/pages/ru/recipes.blade.php index 3e0c0562..bdc419a9 100644 --- a/resources/views/pages/ru/recipes.blade.php +++ b/resources/views/pages/ru/recipes.blade.php @@ -16,6 +16,7 @@ ['url' => '#change-field-logic', 'label' => 'Изменение логики поля'], ['url' => '#images-in-linked-table', 'label' => 'Сохранение изображений в связанной таблице'], ['url' => '#custom-select-filter', 'label' => 'Кастомный фильтр с селектом'], + ['url' => '#async-metrics', 'label' => 'Async метрики'], ] ]" > @@ -36,5 +37,6 @@ ]) @include('pages.ru.recipes.images-in-linked-table', ['title' => 'Сохранение изображений в связанной таблице']) @include('pages.ru.recipes.custom-select-filter', ['title' => 'Кастомный фильтр с селектом']) +@include('pages.ru.recipes.async-metrics', ['title' => 'Async метрики']) diff --git a/resources/views/pages/ru/recipes/async-metrics.blade.php b/resources/views/pages/ru/recipes/async-metrics.blade.php new file mode 100644 index 00000000..1fd19526 --- /dev/null +++ b/resources/views/pages/ru/recipes/async-metrics.blade.php @@ -0,0 +1,42 @@ + + + + Метрики с параметрами формы + + + +$startDate = request()->date('_form.start_date'); +$endDate = request()->date('_form.end_date'); + +FormBuilder::make() + ->dispatchEvent(AlpineJs::event(JsEvent::FRAGMENT_UPDATED, 'metrics')) + ->fields([ + Flex::make([ + Date::make('Start date'), + Date::make('End date'), + ]), + ]), + +Fragment::make([ + FlexibleRender::make("$startDate - $endDate"), + + LineChartMetric::make('Orders') + ->line([ + 'Profit' => Order::query() + ->selectRaw('SUM(price) as sum, DATE_FORMAT(created_at, "%d.%m.%Y") as date') + ->whereBetween('created_at', [$startDate, $endDate]) + ->groupBy('date') + ->pluck('sum', 'date') + ->toArray(), + ]) + ->line([ + 'Avg' => Order::query() + ->selectRaw('AVG(price) as avg, DATE_FORMAT(created_at, "%d.%m.%Y") as date') + ->whereBetween('created_at', [$startDate, $endDate]) + ->groupBy('date') + ->pluck('avg', 'date') + ->toArray(), + ], '#EC4176'), +])->name('metrics'), + +