Skip to content

Commit

Permalink
feat: Js events, recipe async metrics
Browse files Browse the repository at this point in the history
  • Loading branch information
@lee-to
lee-to committed Aug 28, 2024
1 parent fd59abb commit f477e88
Show file tree
Hide file tree
Showing 6 changed files with 251 additions and 157 deletions.
301 changes: 152 additions & 149 deletions resources/views/pages/en/advanced/js_events.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,158 +1,161 @@
<x-page title="Js events" :sectionMenu="[
<x-page title="Js события" :sectionMenu="[
'Разделы' => [
['url' => '#blade-directives', 'label' => 'Blade directives'],
['url' => '#helper', 'label' => 'AlpineJs helper'],
['url' => '#default-events', 'label' => 'Default events'],
['url' => '#response-events', 'label' => 'Calling events via Response'],
['url' => '#blade-directives', 'label' => 'Blade-директивы'],
['url' => '#helper', 'label' => 'Помощник AlpineJs'],
['url' => '#default-events', 'label' => 'События по умолчанию'],
['url' => '#response-events', 'label' => 'Вызов событий через Response'],
]
]">

<x-sub-title id="blade-directives">Blade directives</x-sub-title>

<x-p>
<em>Blade directives</em> are used to quickly declare events for components.
</x-p>

<x-moonshine::divider label="@defineEvent" />

<x-code language="php">
@@defineEvent(string|JsEvent $event, ?string $name = null, ?string $call = null)
</x-code>

<x-ul>
<li><code>$event</code> - event</li>
<li><code>$name</code> - component name</li>
<li><code>$call</code> - callback function.</li>
</x-ul>

<x-code language="php">
<div x-data="myComponent"
// @table-updated-index.window="asyncRequest"
@@defineEvent('table-updated', 'index', 'asyncRequest')
>
</div>
</x-code>

<x-moonshine::divider label="@defineEventWhen" />

<x-code language="php">
@@defineEventWhen(mixed $condition, string|JsEvent $event, ?string $name = null, ?string $call = null)
</x-code>

<x-ul>
<li><code>$condition</code> - condition for the event</li>
<li><code>$event</code> - event</li>
<li><code>$name</code> - component name</li>
<li><code>$call</code> - callback function.</li>
</x-ul>

<x-code language="php">
<div x-data="myComponent"
// @table-updated-index.window="asyncRequest"
@@defineEventWhen(true, 'table-updated', 'index', 'asyncRequest')
>
</div>
</x-code>

<x-sub-title id="helper">AlpineJs helper</x-sub-title>

<x-p>
<em>AlpineJs</em> helper class for generating events.
</x-p>

<x-moonshine::divider label="AlpineJs::event()" />

<x-code language="php">
AlpineJs::event(string|JsEvent $event, ?string $name = null, ?string $call = null)
</x-code>

<x-ul>
<li><code>$event</code> - event</li>
<li><code>$name</code> - component name</li>
<li><code>$call</code> - callback function.</li>
</x-ul>

<x-code language="php">
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]
</x-code>

<x-moonshine::divider label="AlpineJs::eventBlade()" />

<x-code language="php">
AlpineJs::eventBlade(string|JsEvent $event, ?string $name = null, ?string $call = null)
</x-code>

<x-ul>
<li><code>$event</code> - event</li>
<li><code>$name</code> - component name</li>
<li><code>$call</code> - callback function.</li>
</x-ul>

<x-code language="php">
use MoonShine\Components\FormBuilder;
use MoonShine\Enums\JsEvent;
use MoonShine\Support\AlpineJs;

FormBuilder::make('/crud/update', 'PUT')
->name('main-form')
->customAttributes([
<x-sub-title id="blade-directives">Blade-директивы</x-sub-title>

<x-p>
<em>Blade-директивы</em> используются для быстрого объявления событий у компонентов.
</x-p>

<x-moonshine::divider label="@defineEvent" />

<x-code language="php">
@@defineEvent(string|JsEvent $event, ?string $name = null, ?string $call = null, array $params = [])
</x-code>

<x-ul>
<li><code>$event</code> - событие,</li>
<li><code>$name</code> - название компонента,</li>
<li><code>$call</code> - callback функция.</li>
<li><code>$params</code> - параметры события.</li>
</x-ul>

<x-code language="php">
<div x-data="myComponent">
// @table-updated-index.window="asyncRequest"
@@defineEvent('table-updated', 'index', 'asyncRequest')
>
</div>
</x-code>

<x-moonshine::divider label="@defineEventWhen" />

<x-code language="php">
@@defineEventWhen(mixed $condition, string|JsEvent $event, ?string $name = null, ?string $call = null, array $params = [])
</x-code>

<x-ul>
<li><code>$condition</code> - условие для события,</li>
<li><code>$event</code> - событие,</li>
<li><code>$name</code> - название компонента,</li>
<li><code>$call</code> - callback функция.</li>
<li><code>$params</code> - параметры события.</li>
</x-ul>

<x-code language="php">
<div x-data="myComponent">
// @table-updated-index.window="asyncRequest"
@@defineEventWhen(true, 'table-updated', 'index', 'asyncRequest')
>
</div>
</x-code>

<x-sub-title id="helper">Помощник AlpineJs</x-sub-title>

<x-p>
<em>AlpineJs</em> класс-помощник, для формирования событий.
</x-p>

<x-moonshine::divider label="AlpineJs::event()" />

<x-code language="php">
AlpineJs::event(string|JsEvent $event, ?string $name = null, array $params = [])
</x-code>

<x-ul>
<li><code>$event</code> - событие,</li>
<li><code>$name</code> - название компонента,</li>
<li><code>$params</code> - параметры события</li>
</x-ul>

<x-code language="php">
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]
</x-code>

<x-moonshine::divider label="AlpineJs::eventBlade()" />

<x-code language="php">
AlpineJs::eventBlade(string|JsEvent $event, ?string $name = null, ?string $call = null, array $params = [])
</x-code>

<x-ul>
<li><code>$event</code> - событие,</li>
<li><code>$name</code> - название компонента,</li>
<li><code>$call</code> - callback функция.</li>
<li><code>$params</code> - параметры события</li>
</x-ul>

<x-code language="php">
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]
]);
</x-code>

<x-sub-title id="default-events">Default events</x-sub-title>

<x-p>
There are several default events defined in the <strong>MoonShine</strong> admin panel,
the names of which can be conveniently obtained via enum <em>JsEvent</em>.
</x-p>

<x-ul>
<li><code>JsEvent::FRAGMENT_UPDATED</code> - fragment update,</li>
<li><code>JsEvent::TABLE_UPDATED</code> - table update,</li>
<li><code>JsEvent::TABLE_REINDEX</code> - updating table indexes when sorting,</li>
<li><code>JsEvent::TABLE_ROW_UPDATED</code> - updating a row in the table,</li>
<li><code>JsEvent::CARDS_UPDATED</code> - updating the Cards list,</li>
<li><code>JsEvent::FORM_RESET</code> - form reset,</li>
<li><code>JsEvent::FORM_SUBMIT</code> - submitting the form,</li>
<li><code>JsEvent::MODAL_TOGGLED</code> - opening / closing a modal window,</li>
<li><code>JsEvent::OFF_CANVAS_TOGGLED</code> - opening / closing Offcanvas,</li>
<li><code>JsEvent::TOAST</code> - call Toast.</li>
</x-ul>

<x-sub-title id="response-events">Calling events via Response</x-sub-title>

<x-p>
In <strong>MoonShine</strong> you can return events to <em>MoonShineJsonResponse</em>, which will then be called.<br />
To do this, you need to use the <code>events()</code> method.
</x-p>

<x-code language="php">
events(array $events)
</x-code>

<x-ul>
<li><code>$events</code> - array of events to be called.</li>
</x-ul>

<x-code language="php">
use MoonShine\Enums\JsEvent;
use MoonShine\Http\Responses\MoonShineJsonResponse;
use MoonShine\Support\AlpineJs;

//...

return MoonShineJsonResponse::make()
->events([
]);
</x-code>

<x-sub-title id="default-events">События по умолчанию</x-sub-title>

<x-p>
В админ-панели <strong>MoonShine</strong> определены несколько событий по умолчанию,
названия которых можно удобно получить через enum <em>JsEvent</em>.
</x-p>

<x-ul>
<li><code>JsEvent::FRAGMENT_UPDATED</code> - обновление фрагмента,</li>
<li><code>JsEvent::TABLE_UPDATED</code> - обновление таблицы,</li>
<li><code>JsEvent::TABLE_REINDEX</code> - обновление индексов таблицы при сортировке,</li>
<li><code>JsEvent::TABLE_ROW_UPDATED</code> - обновление строки в таблице,</li>
<li><code>JsEvent::CARDS_UPDATED</code> - обновление списка Сards,</li>
<li><code>JsEvent::FORM_RESET</code> - сброс формы,</li>
<li><code>JsEvent::FORM_SUBMIT</code> - отправка формы,</li>
<li><code>JsEvent::MODAL_TOGGLED</code> - открытие / закрытие модального окна,</li>
<li><code>JsEvent::OFF_CANVAS_TOGGLED</code> - открытие / закрытие Offcanvas,</li>
<li><code>JsEvent::TOAST</code> - вызов Toast.</li>
</x-ul>

<x-sub-title id="response-events">Вызов событий через Response</x-sub-title>

<x-p>
В <strong>MoonShine</strong> можно вернуть события в <em>MoonShineJsonResponse</em>, которые потом будут вызваны.<br />
Для этого необходимо воспользоваться методом <code>events()</code>.
</x-p>

<x-code language="php">
events(array $events)
</x-code>

<x-ul>
<li><code>$events</code> - массив вызываемых событий.</li>
</x-ul>

<x-code language="php">
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]
</x-code>
]); // [tl! focus:-2]
</x-code>

</x-page>
2 changes: 2 additions & 0 deletions resources/views/pages/en/recipes.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'],
]
]"
>
Expand All @@ -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'])

</x-page>
42 changes: 42 additions & 0 deletions resources/views/pages/en/recipes/async-metrics.blade.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<x-recipe id="async-metrics" title="{{ $title ?? 'Recipe' }}">

<x-p>
Metrics with form parameters
</x-p>

<x-code language="php">
$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'),
</x-code>
</x-recipe>
Loading

0 comments on commit f477e88

Please sign in to comment.