Поля

Json

Основы

Содержит все Базовые методы.

Поле Json предназначено для удобной работы с типом данных json. В большинстве случаев оно используется с массивами объектов через TableBuilder, но также поддерживает режим работы с одним объектом.

В базе данных поле должно быть типа "text" или "json". Также необходимо указать cast — "array", "json" или "collection".

Набор полей

Предположим, что структура вашего json имеет следующий вид:

[{"title": "title", "value": "value", "active": true}]
[{"title": "title", "value": "value", "active": true}]

Это набор объектов с полями "title", "value" и "active". Чтобы указать такой набор полей, используется метод fields().

fields(FieldsContract|Closure|iterable $fields)
fields(FieldsContract|Closure|iterable $fields)

Пример:

// torchlight! {"summaryCollapsedIndicator": "namespaces"}
// [tl! collapse:4]
use MoonShine\UI\Fields\Json;
use MoonShine\UI\Fields\Position;
use MoonShine\UI\Fields\Switcher;
use MoonShine\UI\Fields\Text;
Json::make('Product Options', 'options')
    ->fields([
        Position::make(),
        Text::make('Title'),
        Text::make('Value'),
        Switcher::make('Active'),
    ])
// torchlight! {"summaryCollapsedIndicator": "namespaces"}
// [tl! collapse:4]
use MoonShine\UI\Fields\Json;
use MoonShine\UI\Fields\Position;
use MoonShine\UI\Fields\Switcher;
use MoonShine\UI\Fields\Text;
Json::make('Product Options', 'options')
    ->fields([
        Position::make(),
        Text::make('Title'),
        Text::make('Value'),
        Switcher::make('Active'),
    ])

json_fields json_fields_dark

Поля также можно передавать через замыкание, что позволяет получить доступ к контексту поля и его данным.

// torchlight! {"summaryCollapsedIndicator": "namespaces"}
// [tl! collapse:4]
use MoonShine\UI\Fields\Json;
use MoonShine\UI\Fields\Position;
use MoonShine\UI\Fields\Switcher;
use MoonShine\UI\Fields\Text;
Json::make('Product Options', 'options')
    ->fields(
        static fn(Json $ctx) => $ctx->getData()->getOriginal()->is_active ? [
            Position::make(),
            Text::make('Title'),
            Text::make('Value'),
            Switcher::make('Active')
        ] : [
            Text::make('Title')
        ]
    )
// torchlight! {"summaryCollapsedIndicator": "namespaces"}
// [tl! collapse:4]
use MoonShine\UI\Fields\Json;
use MoonShine\UI\Fields\Position;
use MoonShine\UI\Fields\Switcher;
use MoonShine\UI\Fields\Text;
Json::make('Product Options', 'options')
    ->fields(
        static fn(Json $ctx) => $ctx->getData()->getOriginal()->is_active ? [
            Position::make(),
            Text::make('Title'),
            Text::make('Value'),
            Switcher::make('Active')
        ] : [
            Text::make('Title')
        ]
    )

Режим "Ключ/Значение"

Когда ваши данные имеют структуру ключ/значение, как в следующем примере {"key": "value"}, используется метод keyValue().

keyValue(
    string $key = 'Key',
    string $value = 'Value',
    ?FieldContract $keyField = null,
    ?FieldContract $valueField = null,
)
keyValue(
    string $key = 'Key',
    string $value = 'Value',
    ?FieldContract $keyField = null,
    ?FieldContract $valueField = null,
)
  • $key — заголовок поля "ключ",
  • $value — заголовок поля "значение",
  • $keyField — возможность заменить поле "ключ" на своё (по умолчанию — Text),
  • $valueField — возможность заменить поле "значение" на своё (по умолчанию — Text).

Пример:

Json::make('Data')
    ->keyValue()
Json::make('Data')
    ->keyValue()

json_key_value json_key_value_dark

Пример с изменением типов полей:

// torchlight! {"summaryCollapsedIndicator": "namespaces"}
// [tl! collapse:3]
use MoonShine\UI\Fields\Json;
use MoonShine\UI\Fields\Select;
use MoonShine\UI\Fields\Text;
Json::make('Label', 'data')
    ->keyValue(
        keyField: Select::make('Key')
            ->options(['vk' => 'VK', 'email' => 'E-mail']),
        valueField: Text::make('Value'),
    )
// torchlight! {"summaryCollapsedIndicator": "namespaces"}
// [tl! collapse:3]
use MoonShine\UI\Fields\Json;
use MoonShine\UI\Fields\Select;
use MoonShine\UI\Fields\Text;
Json::make('Label', 'data')
    ->keyValue(
        keyField: Select::make('Key')
            ->options(['vk' => 'VK', 'email' => 'E-mail']),
        valueField: Text::make('Value'),
    )

Режим "Только значения"

Если необходимо хранить только значения, как в примере ["value_1", "value_2"], используется метод onlyValue().

onlyValue(
    string $value = 'Value',
    ?FieldContract $valueField = null,
)
onlyValue(
    string $value = 'Value',
    ?FieldContract $valueField = null,
)
  • $value - заголовок поля "значение",
  • $valueField - возможность заменить поле "значение" на своё (по умолчанию — Text).

Пример:

Json::make('Data')
    ->onlyValue()
Json::make('Data')
    ->onlyValue()

json_only_value json_only_value_dark

Режим "Объект"

В большинстве случаев поле Json работает с массивом объектов через TableBuilder. Однако возможен и режим работы с объектом, например, {"title": "Title", "active": false}. Для этого используется метод object().

Пример:

Json::make('Product Options', 'options')
    ->fields([
        Text::make('Title'),
        Switcher::make('Active'),
    ])
    ->object()
Json::make('Product Options', 'options')
    ->fields([
        Text::make('Title'),
        Switcher::make('Active'),
    ])
    ->object()

Вложенные Json

Для создания более сложных структур может понадобиться использование вложенных полей Json и MoonShine это позволяет.

Пример:

Json::make('Products', 'products')
    ->fields([
        Text::make('Name', 'name'),
        Json::make('Prices', 'prices')
            ->fields([
                Number::make('Wholesale price', 'wholesale_price'),
                Number::make('Retail price', 'retail_price'),
            ])
            ->object(),
    ])
Json::make('Products', 'products')
    ->fields([
        Text::make('Name', 'name'),
        Json::make('Prices', 'prices')
            ->fields([
                Number::make('Wholesale price', 'wholesale_price'),
                Number::make('Retail price', 'retail_price'),
            ])
            ->object(),
    ])

Результат:

[
    {
        "name": "product 1",
        "prices": {
            "wholesale_price": 1000,
            "retail_price": 1200
        }
    }
]
[
    {
        "name": "product 1",
        "prices": {
            "wholesale_price": 1000,
            "retail_price": 1200
        }
    }
]

Значение по умолчанию

Как и в других полях, здесь есть возможность указать значение по умолчанию с помощью метода default(). В данном случае необходимо передать массив.

default(mixed $default)
default(mixed $default)

Пример:

Json::make('Data')
    ->keyValue('Key', 'Value')
    ->default([
        [
            'key' => 'Default key',
            'value' => 'Default value',
        ]
    ]),
Json::make('Product Options', 'options')
    ->fields([
        Text::make('Title'),
        Text::make('Value'),
        Switcher::make('Active'),
    ])
    ->default([
        [
            'title' => 'Default title',
            'value' => 'Default value',
            'active' => true,
        ]
    ]),
Json::make('Values')
    ->onlyValue()
    ->default([
        ['value' => 'Default value']
    ])
Json::make('Data')
    ->keyValue('Key', 'Value')
    ->default([
        [
            'key' => 'Default key',
            'value' => 'Default value',
        ]
    ]),
Json::make('Product Options', 'options')
    ->fields([
        Text::make('Title'),
        Text::make('Value'),
        Switcher::make('Active'),
    ])
    ->default([
        [
            'title' => 'Default title',
            'value' => 'Default value',
            'active' => true,
        ]
    ]),
Json::make('Values')
    ->onlyValue()
    ->default([
        ['value' => 'Default value']
    ])

Фильтрация "пустых" значений

По умолчанию поле Json фильтрует все пустые значения, но это поведение можно отключить.

Json::make('data')->stopFilteringEmpty()
Json::make('data')->stopFilteringEmpty()

Добавление/Удаление

По умолчанию поле Json содержит только один элемент. Метод creatable() позволяет добавлять новые элементы, а removable() — удалять их.

creatable(
    Closure|bool|null $condition = null,
    ?int $limit = null,
    ?ActionButtonContract $button = null,
)
creatable(
    Closure|bool|null $condition = null,
    ?int $limit = null,
    ?ActionButtonContract $button = null,
)
  • $condition - условие, при котором метод должен быть применён,
  • $limit - ограничение на количество возможных элементов,
  • $button - возможность заменить кнопку добавления на свою.
removable(
    Closure|bool|null $condition = null,
    array $attributes = [],
)
removable(
    Closure|bool|null $condition = null,
    array $attributes = [],
)
  • $condition - условие, при котором метод должен быть применён,
  • $attributes - HTML атрибуты для кнопки удаления.

Пример:

Json::make('Data')
    ->keyValue()
    ->creatable(limit: 6)
    ->removable()
Json::make('Data')
    ->keyValue()
    ->creatable(limit: 6)
    ->removable()

json_removable json_removable_dark

Кастомизация кнопки добавления

// torchlight! {"summaryCollapsedIndicator": "namespaces"}
// [tl! collapse:2]
use MoonShine\UI\Components\ActionButton;
use MoonShine\UI\Fields\Json;
Json::make('Data')
    ->keyValue()
    ->creatable(
        button: ActionButton::make('New')->primary()
    )
// torchlight! {"summaryCollapsedIndicator": "namespaces"}
// [tl! collapse:2]
use MoonShine\UI\Components\ActionButton;
use MoonShine\UI\Fields\Json;
Json::make('Data')
    ->keyValue()
    ->creatable(
        button: ActionButton::make('New')->primary()
    )

HTML атрибуты для кнопки удаления

Json::make('Data', 'data.content')
    ->fields([
        Text::make('Title'),
        Image::make('Image'),
        Text::make('Value'),
    ])
    ->removable(attributes: ['@click.prevent' => 'customAsyncRemove'])
    ->creatable()
Json::make('Data', 'data.content')
    ->fields([
        Text::make('Title'),
        Image::make('Image'),
        Text::make('Value'),
    ])
    ->removable(attributes: ['@click.prevent' => 'customAsyncRemove'])
    ->creatable()

Вертикальный режим

Метод vertical() позволяет изменить отображение таблицы из горизонтального режима на вертикальный.

Пример:

Json::make('Data')
    ->vertical()
Json::make('Data')
    ->vertical()

json_vertical json_vertical_dark

Сортировка перетаскиванием

Даёт возможность перетаскивать строки, тем самым изменяя сортировку. По умолчанию режим включён. Если требуется его отключить, вызовите метод reorderable(false).

->reorderable(false)
->reorderable(false)

Если необходимо указать обработчик (endpoint), воспользуйтесь методом modifyTable и задайте reorderable($url) через TableBuilder.

Применение в фильтрах

Если поле используется в фильтрах, необходимо включить режим фильтрации с помощью метода filterMode(). Этот метод адаптирует поведение поля для фильтрации и отключает возможность добавления новых элементов.

Json::make('Data')
    ->fields([
        Text::make('Title', 'title'),
        Text::make('Value', 'value')
    ])
    ->filterMode()
Json::make('Data')
    ->fields([
        Text::make('Title', 'title'),
        Text::make('Value', 'value')
    ])
    ->filterMode()

Кнопки

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

buttons(array $buttons)
buttons(array $buttons)

Пример:

Json::make('Data', 'data.content')
    ->fields([
        Text::make('Title'),
        Image::make('Image'),
        Text::make('Value'),
    ])
    ->buttons([
        ActionButton::make('')
            ->icon('trash')
            ->onClick(fn() => 'remove()', 'prevent')
            ->secondary()
            ->showInLine()
    ])
Json::make('Data', 'data.content')
    ->fields([
        Text::make('Title'),
        Image::make('Image'),
        Text::make('Value'),
    ])
    ->buttons([
        ActionButton::make('')
            ->icon('trash')
            ->onClick(fn() => 'remove()', 'prevent')
            ->secondary()
            ->showInLine()
    ])

Модификаторы

Поле Json предоставляет возможность модифицировать кнопки или таблицу в режимах "preview" или "default", вместо их полного замещения.

Модификатор кнопки удаления

Метод modifyRemoveButton() позволяет изменить кнопку удаления.

/**
 * @param  Closure(ActionButton $button, self $field): ActionButton  $callback
 */
modifyRemoveButton(Closure $callback)
/**
 * @param  Closure(ActionButton $button, self $field): ActionButton  $callback
 */
modifyRemoveButton(Closure $callback)

Пример:

// torchlight! {"summaryCollapsedIndicator": "namespaces"}
// [tl! collapse:2]
use MoonShine\UI\Components\ActionButton;
use MoonShine\UI\Fields\Json;
Json::make('Data')
    ->modifyRemoveButton(
        fn(ActionButton $button) => $button->customAttributes([
            'class' => 'btn-secondary'
        ])
    )
// torchlight! {"summaryCollapsedIndicator": "namespaces"}
// [tl! collapse:2]
use MoonShine\UI\Components\ActionButton;
use MoonShine\UI\Fields\Json;
Json::make('Data')
    ->modifyRemoveButton(
        fn(ActionButton $button) => $button->customAttributes([
            'class' => 'btn-secondary'
        ])
    )

Модификатор кнопки добавления

Метод modifyCreateButton() позволяет изменить кнопку добавления.

/**
 * @param  Closure(ActionButton $button, self $field): ActionButton  $callback
 */
modifyCreateButton(Closure $callback)
/**
 * @param  Closure(ActionButton $button, self $field): ActionButton  $callback
 */
modifyCreateButton(Closure $callback)
// torchlight! {"summaryCollapsedIndicator": "namespaces"}
// [tl! collapse:2]
use MoonShine\UI\Components\ActionButton;
use MoonShine\UI\Fields\Json;
Json::make('Data')
    ->creatable()
    ->modifyCreateButton(
        fn(ActionButton $button) => $button->customAttributes([
            'class' => 'btn-primary'
        ])
    )
// torchlight! {"summaryCollapsedIndicator": "namespaces"}
// [tl! collapse:2]
use MoonShine\UI\Components\ActionButton;
use MoonShine\UI\Fields\Json;
Json::make('Data')
    ->creatable()
    ->modifyCreateButton(
        fn(ActionButton $button) => $button->customAttributes([
            'class' => 'btn-primary'
        ])
    )

Модификатор таблицы

Метод modifyTable() позволяет модифицировать таблицу (TableBuilder) для всех визуальных режимов поля.

/**
 * @param  Closure(TableBuilder $table, bool $preview): TableBuilder $callback
 */
modifyTable(Closure $callback)
/**
 * @param  Closure(TableBuilder $table, bool $preview): TableBuilder $callback
 */
modifyTable(Closure $callback)

Пример:

// torchlight! {"summaryCollapsedIndicator": "namespaces"}
// [tl! collapse:2]
use MoonShine\UI\Components\Table\TableBuilder;
use MoonShine\UI\Fields\Json;
Json::make('Data')
    ->modifyTable(
        fn(TableBuilder $table, bool $preview) => $table->customAttributes([
            'style' => 'width: 50%;'
        ])
    )
// torchlight! {"summaryCollapsedIndicator": "namespaces"}
// [tl! collapse:2]
use MoonShine\UI\Components\Table\TableBuilder;
use MoonShine\UI\Fields\Json;
Json::make('Data')
    ->modifyTable(
        fn(TableBuilder $table, bool $preview) => $table->customAttributes([
            'style' => 'width: 50%;'
        ])
    )