Json

# Основы

Поле Json включает в себя все базовые методы.

У Json существует несколько методов, чтобы задать структуру поля: keyValue(), onlyValue() и fields().

В базе поле должно иметь тип text или json. Также cast eloquent модели array или json или collection.

# Ключ/Значение

Самый простой способ работы с полем Json это использование метода keyValue().
В результате будет получен простой json {key: value} . 

keyValue(
    string $key = 'Key',
    string $value = 'Value'
)
use MoonShine\Fields\Json; 
 
//...
 
public function fields(): array
{
    return [
        Json::make('Data') 
            ->keyValue() 
    ];
}
 
//...

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

use MoonShine\Fields\Json; 
use MoonShine\Fields\Select;
 
//...
 
public function fields(): array
{
    return [
        Json::make('Label', 'data')->keyValue(
            keyField: Select::make('Key')->options(['vk' => 'VK', 'email' => 'E-mail']),
            valueField: Select::make('Value')->options(['1' => '1', '2' => '2']),
        ), 
    ];
}
 
//...

# С набором полей

Для более расширенного использования воспользуйтесь методом fields() и передайте необходимый набор полей.
В результате будет формироваться json следующего вида [{title: 'title', value: 'value', active: 'active'}] 

fields(Fields|Closure|array $fields)
use MoonShine\Fields\Json; 
use MoonShine\Fields\Position; 
use MoonShine\Fields\Switcher; 
use MoonShine\Fields\Text; 
 
//...
 
public function fields(): array
{
    return [
        Json::make('Product Options', 'options') 
            ->fields([
                Position::make(),
                Text::make('Title'),
                Text::make('Value'),
                Switcher::make('Active')
            ]) 
    ];
}
 
//...

# Только значение

Иногда требуется сохранять в базе данных только значения, для этого можно воспользоваться методом onlyValue().
В результате будет получен json ['value'] . 

onlyValue(string $value = 'Value')
use MoonShine\Fields\Json; 
 
//...
 
public function fields(): array
{
    return [
        Json::make('Data') 
            ->onlyValue() 
    ];
}
 
//...

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

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

default(mixed $default)
use MoonShine\Fields\Json;
use MoonShine\Fields\Switcher;
use MoonShine\Fields\Text;
 
//...
 
public function fields(): array
{
    return [
        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 содержит только одну запись, метод creatable() позволяет добавлять записи, а метод removable() позволяет удалять существующие. 

creatable(
    Closure|bool|null $condition = null,
    ?int $limit = null,
    ?ActionButton $button = null
)
  • $condition - условие выполнения метода,
  • $limit - количество записей которые можно добавить,
  • $button - кастомная кнопка добавления.
removable(
    Closure|bool|null $condition = null,
    array $attributes = []
)
  • $condition - условие выполнения метода,
  • $attributes - дополнительные атрибуты кнопки.
use MoonShine\Fields\Json;
 
//...
 
public function fields(): array
{
    return [
        Json::make('Data')
            ->keyValue()
            ->creatable(limit: 6) 
            ->removable() 
    ];
}
 
//...
Кастомная кнопка добавления 
use MoonShine\Fields\Json;
 
//...
 
public function fields(): array
{
    return [
        Json::make('Data')
            ->keyValue()
            ->creatable(
                button: ActionButton::make('New', '#')->primary()
            ) 
    ];
}
 
//...
Атрибуты для кнопки удаления 
use MoonShine\Fields\Json;
 
//...
 
public function fields(): array
{
    return [
        Json::make('Data', 'data.content')->fields([
            Text::make('Title'),
            Image::make('Image'),
            Text::make('Value'),
        ])
            ->removable(attributes: ['@click.prevent' => 'customAsyncRemove']) 
            ->creatable()
    ];
}
 
//...

# Вложенные значения

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

{"info": [{"title": "Info title", "value": "Info value"}], "content": [{"title": "Content title", "value": "Content value"}]}
use MoonShine\Fields\Json;
 
//...
 
public function fields(): array
{
    return [
        Json::make('Data', 'data.content') 
            ->fields([
                Text::make('Title'),
                Text::make('Value'),
            ])->removable()
    ];
}
 
//...

# Вертикальное отображение

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

vertical()
use MoonShine\Fields\Json;
 
//...
 
public function fields(): array
{
    return [
        Json::make('Data')
            ->keyValue()
            ->vertical() 
    ];
}
 
//...

# Отношения через Json

Поле Json может работать с отношениями, для этого используется метод asRelation(), которому необходимо предать ModelResource отношения и задать массив редактируемых полей. 

asRelation(ModelResource $resource)
use MoonShine\Fields\ID;
use MoonShine\Fields\Json;
use MoonShine\Fields\Relationships\BelongsTo;
use MoonShine\Fields\Text;
 
//...
 
public function fields(): array
{
    return [
        Json::make('Comments', 'comments')
            ->asRelation(new CommentResource()) 
            ->fields([
                ID::make(),
                BelongsTo::make('Article')
                    ->setColumn('article_id')
                    ->searchable(),
                BelongsTo::make('User')
                    ->setColumn('user_id'),
                Text::make('Text')->required(),
            ]) 
            ->creatable()
            ->removable()
    ];
}
 
//...

Для отношений, наличие поля ID в методе fields обязательно!

При использовании BelongsTo обязательно необходимо через метод setColumn() задать поле в таблице базы данных!

# Фильтр

Если поле используется для построения фильтра, то необходимо воспользоваться методом filterMode(). Данный метод адаптирует поведение поля и устанавливает creatable = false. 

use MoonShine\Fields\Json;
use MoonShine\Fields\Text;
 
//...
 
public function filters(): array
{
    return [
        Json::make('Data')
            ->fields([
                Text::make('Title', 'title'),
                Text::make('Value', 'value')
            ])
            ->filterMode() 
    ];
}
 
//...

# Кнопки

Метод buttons() позволяет добавить дополнительные кнопки к полю Json. 

buttons(array $buttons)
use MoonShine\ActionButtons\ActionButton;
use MoonShine\Fields\Json;
 
//...
 
public function fields(): array
{
    return [
        Json::make('Data', 'data.content')->fields([
            Text::make('Title'),
            Image::make('Image'),
            Text::make('Value'),
        ])->buttons([
            ActionButton::make('', '#')
                ->icon('heroicons.outline.trash')
                ->onClick(fn() => 'remove()', 'prevent')
                ->customAttributes(['class' => 'btn-secondary'])
                ->showInLine()
        ]) 
    ];
}
 
//...

# Модификация

У поля Json существуют методы с помощью которых можно модифицировать кнопку удаления или изменить TableBuilder для превью и формы.

modifyRemoveButton()

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

/**
 * @param  Closure(ActionButton $button, self $field): ActionButton  $callback
 */
modifyRemoveButton(Closure $callback)
use MoonShine\ActionButtons\ActionButton;
use MoonShine\Fields\Json;
 
//...
 
public function fields(): array
{
    return [
        Json::make('Data')
            ->modifyRemoveButton(
                fn(ActionButton $button) => $button->customAttributes([
                    'class' => 'btn-secondary'
                ])
            ) 
    ];
}
 
//...
modifyTable()

Метод modifyTable() позволяет изменить TableBuilder для превью и формы. 

/**
 * @param  Closure(TableBuilder $table, bool $preview): TableBuilder $callback
 */
modifyTable(Closure $callback)
use MoonShine\Components\TableBuilder;
use MoonShine\Fields\Json;
 
//...
 
public function fields(): array
{
    return [
        Json::make('Data')
            ->modifyTable(
                fn(TableBuilder $table, bool $preview) => $table->customAttributes([
                    'style' => 'width: 50%;'
                ])
            ) 
    ];
}
 
//...
Поля
Image
Поля
BelongsTo