Поля

Json

Основы

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

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

В базе данных поле должно быть текстового или json типа. Также требуется cast eloquent модели в массив, json или коллекцию.

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

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

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

json_key_value json_key_value_dark

По умолчанию ключи и значения являются полями 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']),
        ),
    ];
}
 
//...
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)
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')
            ])
    ];
}
 
//...
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')
            ])
    ];
}
 
//...

json_fields json_fields_dark

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

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

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

json_only_value json_only_value_dark

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

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

default(mixed $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']
            ])
    ];
}
 
//...
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
)
creatable(
    Closure|bool|null $condition = null,
    ?int $limit = null,
    ?ActionButton $button = null
)

-$condition - условие выполнения метода, -$limit - количество записей, которые можно добавить, -$button - пользовательская кнопка добавления.

removable(
    Closure|bool|null $condition = null,
    array $attributes = []
)
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(limit: 6)
            ->removable()
    ];
}
 
//...

json_removable json_removable_dark

Пользовательская кнопка добавления

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')
            ->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()
    ];
}
 
//...
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"}]}
{"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()
   ];
}
 
//...
use MoonShine\Fields\Json;
 
//...
 
public function fields(): array
{
   return [
       Json::make('Data', 'data.content')
           ->fields([
               Text::make('Title'),
               Text::make('Value'),
           ])->removable()
   ];
}
 
//...

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

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

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

json_vertical json_vertical_dark

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

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

asRelation(ModelResource $resource)
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()
    ];
}
//...
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(), чтобы установить поле в таблице базы данных!

json_relation json_relation_dark

Фильтр

Если поле используется для построения фильтра, то необходимо использовать метод 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()
    ];
}
 
//...
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)
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()
        ])
    ];
}
 
//...
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)
/**
 * @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'
                ])
            )
    ];
}
 
//...
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)
/**
 * @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%;'
                ])
            )
    ];
}
 
//...
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%;'
                ])
            )
    ];
}
 
//...