Un campo Flexible fácil y completo para Laravel Nova, perfecto para grupos de campos repetidos y flexibles.

Inicio rápido

Aquí tienes una guía muy resumida para empezar lo antes posible. Consulta la documentación completa en https://whitecube.github.io/nova-flexible-content

Instalación

composer require whitecube/nova-flexible-content

Uso

Un campo flexible permite gestionar fácilmente grupos de campos repetibles y ordenables. A diferencia de las pocas soluciones existentes para Laravel Nova, esta no tiene restricciones sobre qué campos puedes usar dentro de estos grupos. Eso significa que puedes usar todos los tipos de campo de Laravel Nova, así como cualquier campo creado por la comunidad.

Agregando layouts

Un layout representa un grupo de campos que se pueden repetir dentro del campo Flexible. Puedes agregar tantos layouts como desees. Si solo se define un layout, el campo se comportará como un simple Repetidor, y al agregar más layouts obtendrás un Contenido Flexible. Ambos conceptos son similares a sus primos en el Plugin ACF de Wordpress.

Los layouts se pueden agregar usando el siguiente método en tus campos Flexible:

 addLayout(string $title, string $name, array $fields)

El parámetro $name se usa para almacenar el layout elegido en el valor del campo. Elígelo con cuidado, probablemente lo usarás para identificar los layouts en tu aplicación.

use Whitecube\NovaFlexibleContent\Flexible;

/**
 * Get the fields displayed by the resource.
 *
 * @param  \Illuminate\Http\Request  $request
 * @return array
 */
public function fields(Request $request)
{
    return [
        // ...

        Flexible::make('Content')
            ->addLayout('Simple content section', 'wysiwyg', [
                Text::make('Title'),
                Markdown::make('Content')
            ])
            ->addLayout('Video section', 'video', [
                Text::make('Title'),
                Image::make('Video Thumbnail', 'thumbnail'),
                Text::make('Video ID (YouTube)', 'video'),
                Text::make('Video Caption', 'caption')
            ])
    ];
}

Personalizando la etiqueta del botón

Puedes cambiar el texto predeterminado del botón "Añadir layout" de la siguiente manera:

Flexible::make('Content')
    ->button('Add something amazing!');

Usando valores de Flexible en las vistas

Si estás usando Laravel 6 o versiones anteriores, o no quieres usar casts, por favor usa un accessor en tu modelo con el trait HasFlexible.

Laravel 7 trae casts personalizados, y los campos de contenido flexible son el caso de uso perfecto para ellos. El campo almacena sus valores como una única cadena JSON, lo que significa que esta cadena debe ser analizada antes de poder usarse en tu aplicación. Esto se puede hacer trivialmente usando la clase FlexibleCast de este paquete:

namespace App;

use Illuminate\Database\Eloquent\Model;
use Whitecube\NovaFlexibleContent\Value\FlexibleCast;

class MyModel extends Model
{
    protected $casts = [
        'flexible-content' => FlexibleCast::class
    ];
}

Por defecto, la clase FlexibleCast recopilará instancias básicas de Layout. Si deseas mapear los layouts en instancias de Layout personalizadas, también es posible. Primero, crea un cast flexible personalizado ejecutando php artisan flexible:cast MyFlexibleCast. Esto creará el archivo en el directorio App\Casts.

Luego mapea fácilmente tus clases de layout personalizadas a las claves correspondientes:

namespace App\Casts;

class MyFlexibleCast extends FlexibleCast
{
    protected $layouts = [
        'wysiwyg' => \App\Nova\Flexible\Layouts\WysiwygLayout::class,
        'video' => \App\Nova\Flexible\Layouts\VideoLayout::class,
    ]
}

Si necesitas más control, puedes sobrescribir el método getLayoutMappings en su lugar.

La colección de layouts

Las colecciones devueltas por el cast FlexibleCast y el trait HasFlexible extienden la Illuminate\Support\Collection original. Estas colecciones de layout personalizadas exponen un método find(string $name) que devuelve el primer layout que tenga el $name de layout dado.

La instancia de Layout

Los layouts son una especie de modelos falsos. Usan el trait HasAttributes de Laravel, lo que significa que puedes definir accessors y mutators para los atributos del layout. Además, también es posible acceder a las propiedades del Layout usando los siguientes métodos:

name()

Devuelve el nombre del layout.

title()

Devuelve el título del layout (tal como se muestra en Nova).

key()

Devuelve la clave única del layout (el identificador único del layout).

Ir más allá

Al usar el campo Flexible Content, te encontrarás rápidamente con algunos casos de uso donde los conceptos básicos descritos anteriormente no son suficientes. Por eso desarrollamos el paquete de manera extensible, haciendo posible agregar fácilmente comportamientos y/o capacidades personalizadas al campo y su salida.

Clases de Layout personalizadas

A veces, las definiciones de addLayout pueden volverse bastante largas, o quizás quieras que sean compartidas con otros campos Flexible. La respuesta a esto es extraer tu Layout a su propia clase. Consulta la documentación para más información.

Clases de Preset predefinidas

Además de las clases de Layout reutilizables, puedes ir un paso más allá y crear clases Preset para tus campos Flexible. Estas te permiten reutilizar todo tu campo Flexible en cualquier lugar que desees. También facilitan hacer que tus campos Flexible sean dinámicos, por ejemplo, si quieres agregar Layouts condicionalmente. Y por último, pero no menos importante, también tienen el beneficio adicional de limpiar tus clases de Recurso Nova, si tu campo Flexible tiene muchas definiciones addLayout. Consulta la documentación para más información.

Clases de Resolver personalizadas

Por defecto, el campo aprovecha una columna JSON en la tabla de tu modelo. En algunos casos, realmente te gustaría usar este campo, pero por alguna razón un atributo JSON no es el camino a seguir. Por ejemplo, podrías querer almacenar los valores en otra tabla (lo que significa que usarás el campo Flexible Content en lugar de un campo tradicional BelongsToMany o HasMany). ¡No te preocupes, te tenemos cubierto!