dillingham/nova-items-field

Laravel Nova array items field with sorting & validation

Nova Items Field

Laravel Nova array items field with sorting, validation & many display options

Installation

composer require dillingham/nova-items-field

Usage

use NovaItemsField\Items;

function fields() {
    return [
        Items::make('Emails'),
    ]
}

and be sure to cast the property as an array on your eloquent model

public $casts = [
    'emails' => 'array'
];

Validation

Use Laravel's built in array validation

Items::make('Emails')->rules([
    'emails.*' => 'email|min:10',
]),

Manually setting the attribute may be needed in some cases.

Items::make('Long Text', 'attribute')->rules([
    'attribute.*' => 'email|min:10',
]),

Array processing

Use the array to perform other actions by making an observer

function saving($user)
{
    foreach($user->emails as $email)
    {
        //
    }
}

Replace item vue component

Here's a brief walkthrough to customize the vue item - view

Additional options

function	description	default
->max(number)	limit number of items allowed	false
->draggable()	turn on drag/drop sorting	false
->fullWidth()	increase the width of field area	false
->maxHeight(pixel)	limit the height of the list	false
->listFirst()	move add new to the bottom	false
->inputType(text)	text, date, etc	"text"
->placeholder($value)	the new item input text	"Add a new item"
->deleteButtonValue($value)	value for delete button	"x"
->createButtonValue($value)	value for create button	"Add"
->hideCreateButton()	hide the "add" button	false

---

Author

Hi 👋, Im Brian Dillingham, creator of this Nova package and others

Hope you find it useful. Feel free to reach out with feedback.

Follow me on twitter: @im_brian_d

nova-items-field's Issues

Can we have fillUsing, displayUsing callback support please?

Those callback functions are not getting called. In src/Items.php :: resolve() function we are not checking callback function to call at all. Thanks

REQUEST: Autocomplete values

Hi Brian!

Great package, btw. It's been very helpful to me.

I'm trying to add a functionality where I could type a few letters, then trigger an autocomplete?

Specifically, import this vue component: https://github.com/paliari/v-autocomplete

One way to do it is add meta parameters that:

• Tells if the items should use autocomplete component
• Specify the api route/url
• Specify what value of the searched object will be saved on the item field

Is this something that aligns with the objective of this package?

Localization

Is there any way to work with localisation? We have a multi language panel but if you enable ->translatable() it goves you this error:

Also if you make it translatable, and you have 3 fields in english, and you want to set the German values for example, it will not prefill 3 fields with the english values so you can change those to German, so you'll have to manually order them and add them in the right order, otherwise your whole translation system breaks

Can we use textarea instead input tag for long texts?

Required Validation rule is't working

Required validation is't working.

Fields not showing on Edit Page

Hello,
Firstly, Thanks for your awesome Laravel packages!

Secondly, I have an issue when I'm edition an object.
I can't see the values and I can't add new vaules, when I click on the add buttom I get the following error in the console:

TypeError: this.items.push is not a function
    at addItem (nova-items-field:1)
    at Ft (vendor.js?id=d88619c66954395ff82b:1)
    at HTMLAnchorElement.n (vendor.js?id=d88619c66954395ff82b:1)
    at HTMLAnchorElement.Zr.o._wrapper (vendor.js?id=d88619c66954395ff82b:1)

I've add the field in the $casts property of the module, yet I can't add.

Would love to get you input on that, Thanks!

Readonly not working

Readonly not working:

Items::make('field')->readonly()

add maxHeight() option

I would say to let the developer style it however they want
But in some cases it may effect the behavior
It might be nice to conditionally do things when height is set

->maxHeight(300)

    max-height: 300px;
    overflow-y: auto;

Nova 4 support

Display Help Text

Hello, the package is very helpful.
Could you display the help text as in other nova fields.

Items::make('Celebration Dates')->help('Example date: 2020-01-01');

Doesn't work inside BelongsToMany field

Trying to use the Items field within a BelongtoMany field, and the inputted values aren't being passed in the request.

BelongsToMany::make('Individual Site Queries', 'sites', SiteResource::class)->fields(function () {
                return [
                    Text::make('Version', 'version')->sortable()->readonly(),
                    Text::make('Query File', 'query_file')->hideWhenCreating()->readonly()->sortable(),
                    Boolean::make('Template Syntax', 'template_syntax')->sortable()->help('Does this query support Array injection via PHP variables?'),
                    Items::make('Headers', 'headers')->draggable(),
                    Code::make('SQL Query')->resolveUsing(function () {
                        return isset($this->pivot) && $this->pivot->query_file ? Storage::get($this->pivot->query_file) : null;
                    })->rules('required')->language('sql')->temporary(),

                ];
            }),

Have tried referencing column via sites.headers and leaving second parameter blank, but always get the same output. No error on frontend however field in database doesn't update. Works outside of BelongsToMany field though just fine.

add max() items count

Setting a restriction may be useful in some cases

\Items::make('Emails')->max(5) would prevent any more than 5 being submitted

Need to strip any items past 5 on submit as well as lock form

How can I set a minimum number of items?

I see I can use ->max($n) to limit the maximum number of items, but how can I set a minimum number of items?

Validation rules only seems to work for each individual item, not for the overall field.

Readonly functionality

Hello, love the package! I think it might be nice if you can apply the ->readonly() method to the fields, in some cases I want to disable editing but still show the values in the array.

Thank you for your consideration.

Feature Request/ Select option.

Furthermore, it would be nice to have the option to select from the list/option along with free text.

values() method not working

Hi, first of all thanks for your work! I've been trying to add some pre-defined values, fetched from a database, however the values() method is not working. Passing something like
Items::make('Colors')->placeholder("Color name")->values(['test value'])
has no result.

hideCreateButton option

Adding a value and pressing enter might be the desired user experience.

Unable to validate emails

Any idea why I can show emails from my database but can't validate? Here is my code.. Sorry it's not much to go off of but I'm not sure what else to include. I'm not getting any error messages..

Items::make('Recipients', 'credentials->emails')
         ->rules([
                'credentials->emails.*' => 'email|min:10',
          ])
         ->placeholder('Add new email'),

Thanks!

toggleFormButton

Some lists may be better suited with a "Add Row" button

Custom Index and Detail View

Would be nice if there was a possibility to easily overwrite how data is displayed.

Or is there some easy way I don't see? :)

Column type in migration

Hi,

What column type should i use in the migration for storing the value of this field?

//Tim

Possible bug with translations?

I am trying to make translatable field using this package. But i couldn't figure out a way to do it. I am keep getting Array to string conversion error. Anyone can tell me a way?

// Model
namespace App;

use Illuminate\Database\Eloquent\Model;
use Spatie\Translatable\HasTranslations;

class MapInfo extends Model
{
    use HasTranslations;

    public $translatable =  ['title', 'info'];
    public $casts = [
        'info' => 'array'
    ];
}

// Nova Resource Fields
...
 public function fields(Request $request)
    {
        return [
            ID::make()->sortable(),
            Translatable::make([
                Text::make(__('Title')),
                Items::make(__('Info'))
            ]),
        ];
    }

// Observer
namespace App\Observers;

use App\MapInfo;
use Illuminate\Support\Facades\Log;

class MapInfoObserver
{
....
    function saving(MapInfo $mapinfo)
    {
        // not sure what to do here so i log and see the output
        Log::info($mapinfo);
    }

// Log file
[2019-09-08 05:30:03] local.INFO: {"title":{"en":"asd","zh-cn":"asd"},"translations_info_en":[],"translations_info_zh-cn":[],"floor_id":1}  
[2019-09-08 05:30:03] local.ERROR: Array to string conversion {"userId":1,"exception":"[object] (ErrorException(code: 0): Array to string conversion at /Users/muzafferdede/Desktop/Code/dts/vendor/laravel/framework/src/Illuminate/Support/Str.php:353)
[stacktrace]
#0 /Users/muzafferdede/Desktop/Code/dts/vendor/laravel/framework/src/Illuminate/Support/Str.php(353): Illuminate\\Foundation\\Bootstrap\\HandleExceptions->handleError(8, 'Array to string...', '/Users/muzaffer...', 353, Array)
#1 /Users/muzafferdede/Desktop/Code/dts/vendor/laravel/framework/src/Illuminate/Database/QueryException.php(56): Illuminate\\Support\\Str::replaceArray('?', Array, 'insert into `ma...')
#....

i believe it is something simple but i am too tired to find it out all night, please help :(

REQUEST: Save data as JSON

It would be useful to be able to save the data as a JSON array, since it's not always possible to cast to an "array". Something like ->saveAsJson() would be fantastic.

This would help with the compatibility with other packages or cases that don't use a specific model. (In my case: https://github.com/optimistdigital/nova-settings)

Create button overflow issue

Text may overflow from create button, but I'm not sure how it should be fixed.

Otherwise the package works great!

->min(value)

is there an option for Min number of items, I can't see one in the docs

Validation is not working when the library is used on an action

When the library is used inside folder app/Nova/Actions/ on an action it doesn't validate email addresses.

Field Doesnt Shown (Laravel 7.0, Nova 3.0)

Hi, items field doesn't shown on creating page.

My model $casts

protected $casts = [
'campaign_info_texts' => 'array'
];

My nova resource

Items::make('Kampanya Bilgilendirme Açıklamları', 'campaign_info_texts')
          ->placeholder('Kampanya Bilgilendirme Açıklaması')
          ->createButtonValue('Ekle')
          ->listFirst(true)
          ->draggable()
          ->max(15),

Nova create resource

But fields doesn't shown on creating page.