First commit

.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

README.md

@@ -0,0 +1,2 @@
+# Nova Tags
+

composer.json

@@ -0,0 +1,29 @@
+{
+  "name": "64robots/nova-tags",
+  "description": "A Laravel Nova field.",
+  "keywords": [
+    "laravel",
+    "nova"
+  ],
+  "license": "MIT",
+  "require": {
+    "php": ">=7.1.0"
+  },
+  "autoload": {
+    "psr-4": {
+      "R64\\Tags\\": "src/"
+    }
+  },
+  "extra": {
+    "laravel": {
+      "providers": [
+        "R64\\Tags\\FieldServiceProvider"
+      ]
+    }
+  },
+  "config": {
+    "sort-packages": true
+  },
+  "minimum-stability": "dev",
+  "prefer-stable": true
+}

mix-manifest.json

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

nova-imports/BelongsToFieldStorage.js

@@ -0,0 +1,12 @@
+export default {
+    fetchAvailableResources(resourceName, fieldAttribute, params) {
+        return Nova.request().get(
+            `/nova-api/${resourceName}/associatable/${fieldAttribute}`,
+            params
+        )
+    },
+
+    determineIfSoftDeletes(resourceName) {
+        return Nova.request().get(`/nova-api/${resourceName}/soft-deletes`)
+    },
+}

package.json

@@ -0,0 +1,22 @@
+{
+  "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",
+    "element-ui": "^2.4.7",
+    "laravel-mix": "^2.1.14",
+    "laravel-nova": "^1.0",
+    "vue-multiselect": "^2.1.0"
+  },
+  "dependencies": {
+    "vue": "^2.5.0"
+  }
+}

resources/js/components/DetailField.vue

@@ -0,0 +1,13 @@
+<template>
+    <panel-item :field="field" />
+</template>
+
+<script>
+import DisplayCommaSeparated from './DisplayCommaSeparated';
+
+export default {
+  mixins: [DisplayCommaSeparated],
+
+  props: ['resource', 'resourceName', 'resourceId', 'field']
+};
+</script>

resources/js/components/DisplayCommaSeparated.js

@@ -0,0 +1,8 @@
+export default {
+  created() {
+    const values = this.field.value.map(
+      field => (this.field.labelKey ? field[this.field.labelKey] : field)
+    );
+    this.$set(this.field, 'value', values.join(', '));
+  }
+};

resources/js/components/FormField.vue

@@ -0,0 +1,123 @@
+<template>
+  <default-field :field="field">
+    <template slot="field">
+      <Multiselect
+        v-model="value"
+        :tag-placeholder="tagPlaceholder"
+        :placeholder="placeholder"
+        :label="label"
+        :track-by="key"
+        :options="availableResources"
+        :multiple="true"
+        :taggable="true"
+        @tag="addTag"
+      />
+
+      <p v-if="hasError" class="my-2 text-danger">
+        {{ firstError }}
+      </p>
+    </template>
+  </default-field>
+</template>
+
+<script>
+import 'vue-multiselect/dist/vue-multiselect.min.css';
+import Multiselect from 'vue-multiselect';
+import FormField from 'laravel-nova/src/mixins/FormField';
+import HandlesValidationErrors from 'laravel-nova/src/mixins/HandlesValidationErrors';
+import storage from '../../../nova-imports/BelongsToFieldStorage';
+
+export default {
+  components: { Multiselect },
+
+  mixins: [FormField, HandlesValidationErrors],
+
+  props: ['resourceName', 'resourceId', 'field'],
+
+  data() {
+    return {
+      availableResources: []
+    };
+  },
+
+  computed: {
+    key() {
+      return this.field.valueKey || 'id';
+    },
+
+    label() {
+      return this.field.labelKey || 'name';
+    },
+
+    placeholder() {
+      return this.field.placeholder === undefined
+        ? this.__('Search or add a tag')
+        : this.field.placeholder;
+    },
+
+    tagPlaceholder() {
+      return this.field.tagPlaceholder === undefined
+        ? this.__('Add this as new tag')
+        : this.field.tagPlaceholder;
+    }
+  },
+
+  created() {
+    this.getAvailableResources();
+  },
+
+  methods: {
+    /*
+    * Add a new tag with random id
+    */
+    addTag(newTag) {
+      const tag = {
+        [this.label]: newTag,
+        [this.key]:
+          newTag.substring(0, 2) + Math.floor(Math.random() * 10000000)
+      };
+      this.availableResources.push(tag);
+      this.value.push(tag);
+    },
+
+    /*
+    * Set the initial, internal value for the field.
+    */
+    setInitialValue() {
+      let resources = this.field.value || [];
+
+      resources = resources.map(resource => ({
+        [this.key]: resource[this.key],
+        [this.label]: resource[this.label]
+      }));
+
+      this.value = resources;
+    },
+
+    /**
+     * Get the resources that may be related to this resource.
+     */
+    getAvailableResources() {
+      return storage
+        .fetchAvailableResources(
+          this.resourceName,
+          this.field.attribute,
+          this.queryParams
+        )
+        .then(({ data: { resources } }) => {
+          this.availableResources = resources.map(resource => ({
+            [this.key]: resource.value,
+            [this.label]: resource.display
+          }));
+        });
+    },
+
+    /**
+     * Fill the given FormData object with the field's internal value.
+     */
+    fill(formData) {
+      formData.append(this.field.attribute, JSON.stringify(this.value) || '');
+    }
+  }
+};
+</script>

resources/js/components/IndexField.vue

@@ -0,0 +1,13 @@
+<template>
+  <span>{{ field.value }}</span>
+</template>
+
+<script>
+import DisplayCommaSeparated from './DisplayCommaSeparated';
+
+export default {
+  mixins: [DisplayCommaSeparated],
+
+  props: ['resourceName', 'field']
+};
+</script>

resources/js/field.js

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

resources/sass/field.scss

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

src/FieldServiceProvider.php

@@ -0,0 +1,33 @@
+<?php
+
+namespace R64\Tags;
+
+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('nova-fields-tags', __DIR__.'/../dist/js/field.js');
+            Nova::style('nova-fields-tags', __DIR__.'/../dist/css/field.css');
+        });
+    }
+
+    /**
+     * Register any application services.
+     *
+     * @return void
+     */
+    public function register()
+    {
+        //
+    }
+}