BelongsToManyField to represent many to many relationship (nova) in field

Author: Benjacho

.gitignore

@@ -0,0 +1,10 @@
+/.idea
+/vendor
+/node_modules
+package-lock.json
+composer.phar
+composer.lock
+phpunit.xml
+.phpunit.result.cache
+.DS_Store
+Thumbs.db

composer.json

@@ -0,0 +1,29 @@
+{
+    "name": "benjacho/BelongsToManyField",
+    "description": "belongsToMany nova representation in field.",
+    "keywords": [
+        "laravel",
+        "nova"
+    ],
+    "license": "MIT",
+    "require": {
+        "php": ">=7.1.0"
+    },
+    "autoload": {
+        "psr-4": {
+            "Benjacho\\BelongsToManyField\\": "src/"
+        }
+    },
+    "extra": {
+        "laravel": {
+            "providers": [
+                "Benjacho\\BelongsToManyField\\FieldServiceProvider"
+            ]
+        }
+    },
+    "config": {
+        "sort-packages": true
+    },
+    "minimum-stability": "dev",
+    "prefer-stable": true
+}

dist/css/field.css

@@ -0,0 +1,4 @@
+{
+    "/js/field.js": "/js/field.js",
+    "/css/field.css": "/css/field.css"
+}

dist/js/field.js

@@ -0,0 +1,21 @@
+{
+    "private": true,
+    "scripts": {
+        "dev": "npm run development",
+        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+        "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",
+        "watch-poll": "npm run watch -- --watch-poll",
+        "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",
+        "prod": "npm run production",
+        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
+    },
+    "devDependencies": {
+        "cross-env": "^5.0.0",
+        "laravel-mix": "^1.0",
+        "laravel-nova": "^1.0"
+    },
+    "dependencies": {
+        "vue": "^2.5.0",
+        "vue-multiselect": "^2.1.3"
+    }
+}

dist/mix-manifest.json

@@ -0,0 +1,9 @@
+<template>
+    <panel-item :field="field" />
+</template>
+
+<script>
+export default {
+    props: ['resource', 'resourceName', 'resourceId', 'field'],
+}
+</script>

package.json

@@ -0,0 +1,60 @@
+<template>
+    <default-field :field="field" :errors="errors">
+        <template slot="field">
+            <multi-select
+                :options="options"
+                :multiple="true"
+                label="name"
+                track-by="name"
+                :class="errorClasses"
+                :placeholder="field.name"
+                v-model="value"
+            />
+        </template>
+    </default-field>
+</template>
+
+<script>
+import { FormField, HandlesValidationErrors } from 'laravel-nova';
+import MultiSelect from 'vue-multiselect';
+
+export default {
+    mixins: [FormField, HandlesValidationErrors],
+
+    props: ['resourceName', 'resourceId', 'field'],
+
+    components: {
+        MultiSelect
+    },
+
+    data(){
+        return {
+            options: [],
+        }
+    },
+
+    methods: {
+        /*
+         * Set the initial, internal value for the field.
+         */
+        setInitialValue() {
+            this.options = this.field.options;
+            this.value = this.field.value || ''
+        },
+
+        /**
+         * Fill the given FormData object with the field's internal value.
+         */
+        fill(formData) {
+            formData.append(this.field.attribute, JSON.stringify(this.value) || '')
+        },
+
+        /**
+         * Update the field's internal value.
+         */
+        handleChange(value) {
+            this.value = value
+        },
+    },
+}
+</script>

resources/js/components/DetailField.vue

@@ -0,0 +1,9 @@
+<template>
+    <span>{{ field.value }}</span>
+</template>
+
+<script>
+export default {
+    props: ['resourceName', 'field'],
+}
+</script>

resources/js/components/FormField.vue

@@ -0,0 +1,5 @@
+Nova.booting((Vue, router, store) => {
+    Vue.component('index-BelongsToManyField', require('./components/IndexField'))
+    Vue.component('detail-BelongsToManyField', require('./components/DetailField'))
+    Vue.component('form-BelongsToManyField', require('./components/FormField'))
+})

resources/js/components/IndexField.vue

@@ -0,0 +1 @@
+// Nova Tool CSS

resources/js/field.js

@@ -0,0 +1,48 @@
+<?php
+
+namespace Benjacho\BelongsToManyField;
+
+use Laravel\Nova\Fields\Field;
+use Laravel\Nova\Http\Requests\NovaRequest;
+
+class BelongsToManyField extends Field
+{
+    /**
+     * The field's component.
+     *
+     * @var string
+     */
+    public $component = 'BelongsToManyField';
+
+    public $relationModel;
+
+    public function options($options)
+    {
+        $options = collect($options);
+        return $this->withMeta(['options' => $options]);
+    }
+
+    public function relationModel($model)
+    {
+        $this->relationModel = $model;
+        return $this;
+    }
+
+    public function fillAttributeFromRequest(NovaRequest $request, $requestAttribute, $model, $attribute)
+    {
+        $requestValue = json_decode($request[$requestAttribute]);
+        $class = get_class($model);
+        $class::saved(function ($model) use ($requestValue, $attribute) {
+            $model->syncManyValues($requestValue, $attribute, $this->relationModel);
+        });
+    }
+
+    public function resolve($resource, $attribute = null)
+    {
+        parent::resolve($resource, $attribute);
+        $value = json_decode($resource->{$this->attribute});
+        if ($value) {
+            $this->value = $value;
+        }
+    }
+}

resources/sass/field.scss

@@ -0,0 +1,33 @@
+<?php
+
+namespace Benjacho\BelongsToManyField;
+
+use Laravel\Nova\Nova;
+use Laravel\Nova\Events\ServingNova;
+use Illuminate\Support\ServiceProvider;
+
+class FieldServiceProvider extends ServiceProvider
+{
+    /**
+     * Bootstrap any application services.
+     *
+     * @return void
+     */
+    public function boot()
+    {
+        Nova::serving(function (ServingNova $event) {
+            Nova::script('BelongsToManyField', __DIR__.'/../dist/js/field.js');
+            Nova::style('BelongsToManyField', __DIR__.'/../dist/css/field.css');
+        });
+    }
+
+    /**
+     * Register any application services.
+     *
+     * @return void
+     */
+    public function register()
+    {
+        //
+    }
+}

src/BelongsToManyField.php

@@ -0,0 +1,27 @@
+<?php
+/**
+ * Created by PhpStorm.
+ * User: benjamin
+ * Date: 2/6/19
+ * Time: 5:10 PM
+ */
+
+namespace Benjacho\BelongsToManyField;
+
+use Illuminate\Database\Eloquent\Relations\BelongsToMany;
+
+trait HasBelongsToMany
+{
+
+    public function model($relationModel): BelongsToMany
+    {
+        $model = app($relationModel);
+        return $this->belongsToMany($model);
+    }
+
+    public function syncManyValues($values, $attribute, $relationModel)
+    {
+        $arrayIds = array_column($values, 'id');
+        $this->model($relationModel)->sync($arrayIds);
+    }
+}

src/FieldServiceProvider.php

@@ -0,0 +1,5 @@
+let mix = require('laravel-mix')
+
+mix.setPublicPath('dist')
+   .js('resources/js/field.js', 'js')
+   .sass('resources/sass/field.scss', 'css')