├── .gitignore ├── composer.json ├── dist ├── js │ └── field.js └── mix-manifest.json ├── license.md ├── package.json ├── readme.md ├── resources └── js │ ├── components │ ├── DetailField.vue │ ├── DetailFieldItem.vue │ ├── FormField.vue │ └── IndexField.vue │ └── field.js ├── src ├── ArrayRules.php ├── FieldServiceProvider.php └── Items.php ├── todo.md └── webpack.mix.js /.gitignore: -------------------------------------------------------------------------------- 1 | /.idea 2 | /vendor 3 | /node_modules 4 | package-lock.json 5 | composer.phar 6 | composer.lock 7 | phpunit.xml 8 | .phpunit.result.cache 9 | .DS_Store 10 | Thumbs.db 11 | -------------------------------------------------------------------------------- /composer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "dillingham/nova-items-field", 3 | "description": "Nova field to handle array columns", 4 | "keywords": [ 5 | "laravel", 6 | "nova" 7 | ], 8 | "license": "MIT", 9 | "require": { 10 | "php": ">=7.1.0" 11 | }, 12 | "autoload": { 13 | "psr-4": { 14 | "NovaItemsField\\": "src/" 15 | } 16 | }, 17 | "extra": { 18 | "laravel": { 19 | "providers": [ 20 | "NovaItemsField\\FieldServiceProvider" 21 | ] 22 | } 23 | }, 24 | "config": { 25 | "sort-packages": true 26 | }, 27 | "minimum-stability": "dev", 28 | "prefer-stable": true 29 | } 30 | -------------------------------------------------------------------------------- /dist/mix-manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "/js/field.js": "/js/field.js" 3 | } -------------------------------------------------------------------------------- /license.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Brian Dillingham 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "scripts": { 4 | "dev": "npm run development", 5 | "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", 6 | "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", 7 | "watch-poll": "npm run watch -- --watch-poll", 8 | "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js", 9 | "prod": "npm run production", 10 | "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js" 11 | }, 12 | "devDependencies": { 13 | "cross-env": "^5.0.0", 14 | "laravel-mix": "^1.0", 15 | "laravel-nova": "^1.0" 16 | }, 17 | "dependencies": { 18 | "vue": "^2.5.0", 19 | "vuedraggable": "^2.17.0" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | ## Nova Items Field 2 | 3 | [![Latest Version on Github](https://img.shields.io/github/release/dillingham/nova-items-field.svg?style=flat-square)](https://packagist.org/packages/dillingham/nova-items-field) 4 | [![Total Downloads](https://img.shields.io/packagist/dt/dillingham/nova-items-field.svg?style=flat-square)](https://packagist.org/packages/dillingham/nova-items-field) [![Twitter Follow](https://img.shields.io/twitter/follow/im_brian_d?color=%231da1f1&label=Twitter&logo=%231da1f1&logoColor=%231da1f1&style=flat-square)](https://twitter.com/im_brian_d) 5 | 6 | Laravel Nova array items field with sorting, validation & many [display options](https://github.com/dillingham/nova-items-field#additional-options) 7 | 8 | ![nova-array-input-field](https://user-images.githubusercontent.com/29180903/51337942-7d1be300-1a56-11e9-84fa-66f5b285c279.png) 9 | 10 | ### Installation 11 | ``` 12 | composer require dillingham/nova-items-field 13 | ``` 14 | 15 | ### Usage 16 | 17 | ```php 18 | use NovaItemsField\Items; 19 | ``` 20 | ```php 21 | function fields() { 22 | return [ 23 | Items::make('Emails'), 24 | ] 25 | } 26 | ``` 27 | and be sure to [cast](https://laravel.com/docs/5.7/eloquent-mutators#array-and-json-casting) the property as an array on your eloquent model 28 | ```php 29 | public $casts = [ 30 | 'emails' => 'array' 31 | ]; 32 | ``` 33 | ### Validation 34 | Use Laravel's built in [array validation](https://laravel.com/docs/5.7/validation#validating-arrays) 35 | ```php 36 | Items::make('Emails')->rules([ 37 | 'emails.*' => 'email|min:10', 38 | ]), 39 | ``` 40 | Manually setting the attribute may be needed in some cases. 41 | ```php 42 | Items::make('Long Text', 'attribute')->rules([ 43 | 'attribute.*' => 'email|min:10', 44 | ]), 45 | ``` 46 | ### Array processing 47 | 48 | Use the array to perform other actions by making an [observer](https://nova.laravel.com/docs/1.0/resources/#resource-events) 49 | 50 | ```php 51 | function saving($user) 52 | { 53 | foreach($user->emails as $email) 54 | { 55 | // 56 | } 57 | } 58 | ``` 59 | 60 | ### Replace item vue component 61 | 62 | Here's a brief walkthrough to customize the vue item - [view](https://github.com/dillingham/nova-items-field/issues/10#issuecomment-527315057) 63 | 64 | 65 | 66 | ### Additional options 67 | 68 | | function | description | default | 69 | | - | - | - | 70 | | `->max(number)` | limit number of items allowed | false | 71 | | `->draggable()` | turn on drag/drop sorting | false | 72 | | `->fullWidth()` | increase the width of field area | false | 73 | | `->maxHeight(pixel)` | limit the height of the list | false | 74 | | `->listFirst()`| move add new to the bottom | false | 75 | | `->inputType(text)` | text, date, etc | "text" | 76 | | `->placeholder($value)` | the new item input text | "Add a new item" | 77 | | `->deleteButtonValue($value)` | value for delete button | "x" | 78 | | `->createButtonValue($value)` | value for create button | "Add" | 79 | | `->hideCreateButton()` | hide the "add" button | false | 80 | 81 | 82 | --- 83 | 84 | # Author 85 | 86 | Hi 👋, Im Brian Dillingham, creator of this Nova package [and others](https://novapackages.com/collaborators/dillingham) 87 | 88 | Hope you find it useful. Feel free to reach out with feedback. 89 | 90 | Follow me on twitter: [@im_brian_d](https://twitter.com/im_brian_d) 91 | -------------------------------------------------------------------------------- /resources/js/components/DetailField.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 25 | -------------------------------------------------------------------------------- /resources/js/components/DetailFieldItem.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | -------------------------------------------------------------------------------- /resources/js/components/FormField.vue: -------------------------------------------------------------------------------- 1 | 72 | 73 | 95 | 96 | 191 | -------------------------------------------------------------------------------- /resources/js/components/IndexField.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 13 | -------------------------------------------------------------------------------- /resources/js/field.js: -------------------------------------------------------------------------------- 1 | Nova.booting((Vue, router, store) => { 2 | Vue.component('index-nova-items-field', require('./components/IndexField')) 3 | Vue.component('detail-nova-items-field', require('./components/DetailField')) 4 | Vue.component('form-nova-items-field', require('./components/FormField')) 5 | Vue.component('detail-nova-items-field-item', require('./components/DetailFieldItem')) 6 | }) 7 | -------------------------------------------------------------------------------- /src/ArrayRules.php: -------------------------------------------------------------------------------- 1 | rules = $rules; 19 | } 20 | 21 | /** 22 | * Determine if the validation rule passes. 23 | * 24 | * @param string $attribute 25 | * @param mixed $value 26 | * @return bool 27 | */ 28 | public function passes($attribute, $value) 29 | { 30 | $input = [$attribute => json_decode($value)]; 31 | 32 | $validator = \Validator::make($input, $this->rules, [], [ "$attribute.*" => 'input']); 33 | 34 | $this->message = $validator->errors(); 35 | 36 | return $validator->passes(); 37 | } 38 | 39 | /** 40 | * Get the validation error message. 41 | * 42 | * @return string 43 | */ 44 | public function message() 45 | { 46 | return $this->message; 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /src/FieldServiceProvider.php: -------------------------------------------------------------------------------- 1 | fillUsing(function($request, $model, $attribute, $requestAttribute) { 28 | $model->$attribute = $this->isNullValue($request->$attribute) ? null : json_decode($request->$attribute, true); 29 | }); 30 | 31 | $this->withMeta([ 32 | 'max' => $this->max, 33 | 'items' => $this->items, 34 | 'listFirst' => $this->listFirst, 35 | 'inputType' => $this->inputType, 36 | 'draggable' => $this->draggable, 37 | 'fullWidth' => $this->fullWidth, 38 | 'maxHeight' => $this->maxHeight, 39 | 'placeholder' => $this->placeholder, 40 | 'hideCreateButton' => $this->hideCreateButton, 41 | 'createButtonValue' => $this->createButtonValue, 42 | 'deleteButtonValue' => $this->deleteButtonValue, 43 | 'detailItemComponent' => $this->detailItemComponent, 44 | ]); 45 | } 46 | 47 | public function rules($rules) 48 | { 49 | if (!is_array($rules)) { 50 | abort(500, 'Nova Items Field requires array of validation rules'); 51 | } 52 | 53 | $this->rules = [ new ArrayRules($rules) ]; 54 | 55 | return $this; 56 | } 57 | 58 | public function values($values) 59 | { 60 | if (is_array($values) && count($values)) { 61 | $this->items = $values; 62 | } 63 | 64 | return $this; 65 | } 66 | 67 | public function max($max) 68 | { 69 | $this->max = $max; 70 | 71 | return $this; 72 | } 73 | 74 | public function hideCreateButton($hideCreateButton = true) 75 | { 76 | $this->hideCreateButton = $hideCreateButton; 77 | 78 | return $this; 79 | } 80 | 81 | public function inputType($inputType) 82 | { 83 | $this->inputType = $inputType; 84 | 85 | return $this; 86 | } 87 | 88 | public function fullWidth($fullWidth = true) 89 | { 90 | $this->fullWidth = $fullWidth; 91 | 92 | return $this; 93 | } 94 | 95 | public function maxHeight($maxHeight) 96 | { 97 | $this->maxHeight = $maxHeight; 98 | 99 | return $this; 100 | } 101 | 102 | public function draggable($draggable = true) 103 | { 104 | $this->draggable = $draggable; 105 | 106 | return $this; 107 | } 108 | 109 | public function placeholder($placeholder) 110 | { 111 | $this->placeholder = $placeholder; 112 | 113 | return $this; 114 | } 115 | 116 | public function listFirst($listFirst = true) 117 | { 118 | $this->listFirst = $listFirst; 119 | 120 | return $this; 121 | } 122 | 123 | public function deleteButtonValue($deleteButtonValue) 124 | { 125 | $this->deleteButtonValue = $deleteButtonValue; 126 | 127 | return $this; 128 | } 129 | 130 | public function createButtonValue($createButtonValue) 131 | { 132 | $this->createButtonValue = $createButtonValue; 133 | 134 | return $this; 135 | } 136 | 137 | public function detailItemComponent($detailItemComponent) 138 | { 139 | $this->detailItemComponent = $detailItemComponent; 140 | 141 | return $this; 142 | } 143 | } 144 | -------------------------------------------------------------------------------- /todo.md: -------------------------------------------------------------------------------- 1 | # TODO 2 | 3 | I'd like to see a way to make associative arrays 4 | 5 | Im thinking declairing the keys like so 6 | 7 | And it would make a 3 column row of inputs 8 | 9 | ```php 10 | Items::make('People') 11 | ->keys(['name', 'phone', 'email']) 12 | ->rules([ 13 | 'people.*.name' => 'alpha|min:2', 14 | 'people.*.phone' => 'digits:10', 15 | 'people.*.email' => 'email|min:6', 16 | ]), 17 | ``` 18 | 19 | Futher down the line maybe declairing input types too 20 | 21 | ```php 22 | Items::make('People') 23 | ->fullWidth() 24 | ->keys([ 25 | 'name' => 'text', 26 | 'phone' => 'tel', 27 | 'email' => 'email', 28 | 'color' => 'color', 29 | 'type' => ['type-1', 'type-2'], // select 30 | ]) 31 | ``` 32 | 33 | Maybeeeee one day, probably not :) 34 | 35 | ```php 36 | Items::make('People') 37 | ->keys([ 38 | 'user_id' => BelongsTo::make('User'), 39 | 'type' => Select::make('Type')->options(['type-1', 'type-2]), 40 | ])->rules([ 41 | 'people.*.user_id' => 'exists' 42 | ]) 43 | ``` -------------------------------------------------------------------------------- /webpack.mix.js: -------------------------------------------------------------------------------- 1 | let mix = require('laravel-mix') 2 | 3 | mix.setPublicPath('dist').js('resources/js/field.js', 'js') --------------------------------------------------------------------------------