fix issue where type label would render incorrectly when used with nova-mega-filter

Author: milewski

dist/js/field.js

@@ -0,0 +1,15 @@
+/*!
+ * Determine if an object is a Buffer
+ *
+ * @author   Feross Aboukhadijeh <https://feross.org>
+ * @license  MIT
+ */
+
+/**
+ * @license
+ * Lodash <https://lodash.com/>
+ * Copyright JS Foundation and other contributors <https://js.foundation/>
+ * Released under MIT license <https://lodash.com/license>
+ * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
+ * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
+ */

dist/js/field.js.LICENSE.txt

@@ -1,3 +1,3 @@
 {
     "/js/field.js": "/js/field.js"
-}
+}

dist/mix-manifest.json

@@ -10,11 +10,12 @@
         "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"
+        "cross-env": "^7.0.2",
+        "laravel-mix": "^5.0.4",
+        "laravel-nova": "^1.2.0",
+        "vue-template-compiler": "^2.6.11"
     },
     "dependencies": {
-        "vue": "^2.5.0"
+        "vue": "^2.6.11"
     }
 }

package.json

@@ -4,11 +4,9 @@ export default {
             originalValue: this.field.value
         }
     },
-    created() {
-
-        const resource = this.field.resources.find(resource => resource.className === this.field.value)
-
-        this.field.value = resource.label
-
+    computed: {
+        label() {
+            return this.field.resources.find(resource => resource.className === this.field.value).label
+        }
     }
 }

resources/js/ReplaceValueWithLabel.js

@@ -2,7 +2,7 @@
 
     <div>
 
-        <panel :panel="{ name: field.value, fields: standardFields }"/>
+        <panel :panel="{ name: label, fields: standardFields }"/>
 
         <template v-for="({type, fields}) of relationalFields">
 
@@ -28,8 +28,8 @@
     import ReplaceValueWithLabel from '../ReplaceValueWithLabel'
 
     export default {
-        props: ['resource', 'resourceName', 'resourceId', 'field'],
-        mixins: [ReplaceValueWithLabel],
+        props: [ 'resource', 'resourceName', 'resourceId', 'field' ],
+        mixins: [ ReplaceValueWithLabel ],
         computed: {
             relationalFields() {
 
@@ -51,7 +51,7 @@
             },
             standardFields() {
 
-                return this.fields.filter(field => !['has-one-field', 'has-many-field', 'belongs-to-many-field'].includes(field.component))
+                return this.fields.filter(field => ![ 'has-one-field', 'has-many-field', 'belongs-to-many-field' ].includes(field.component))
 
             },
             fields() {

resources/js/components/DetailField.vue

@@ -53,27 +53,22 @@
 
 <script>
 
-    import {FormField, HandlesValidationErrors} from 'laravel-nova'
+    import { FormField, HandlesValidationErrors } from 'laravel-nova'
 
     export default {
-        mixins: [FormField, HandlesValidationErrors],
-
-        props: ['resourceName', 'resourceId', 'field'],
-
+        mixins: [ FormField, HandlesValidationErrors ],
+        props: [ 'resourceName', 'resourceId', 'field' ],
         computed: {
-
             shouldDisableTypeSelect() {
                 return this.resourceId
             }
-
         },
-
         methods: {
             /*
              * Set the initial, internal value for the field.
              */
             setInitialValue() {
-                this.value = this.field.value || this.field.default
+                this.value = this.field.value || this.field.default || null
             },
 
             /**

resources/js/components/FormField.vue

@@ -1,14 +1,14 @@
 <template>
-    <span>{{ field.value }}</span>
+    <span>{{ label }}</span>
 </template>
 
 <script>
 
     import ReplaceValueWithLabel from '../ReplaceValueWithLabel'
 
     export default {
-        props: ['resourceName', 'field'],
-        mixins: [ReplaceValueWithLabel]
+        props: [ 'resourceName', 'field' ],
+        mixins: [ ReplaceValueWithLabel ]
     }
 
 </script>

resources/js/components/IndexField.vue

@@ -1,5 +1,9 @@
+import IndexField from './components/IndexField'
+import DetailField from './components/DetailField'
+import FormField from './components/FormField'
+
 Nova.booting((Vue, router, store) => {
-    Vue.component('index-inline-morph-to', require('./components/IndexField'))
-    Vue.component('detail-inline-morph-to', require('./components/DetailField'))
-    Vue.component('form-inline-morph-to', require('./components/FormField'))
+    Vue.component('index-inline-morph-to', IndexField)
+    Vue.component('detail-inline-morph-to', DetailField)
+    Vue.component('form-inline-morph-to', FormField)
 })

resources/js/field.js

@@ -1,4 +1,4 @@
 const mix = require('laravel-mix')
 
 mix.setPublicPath('dist')
-    .js('resources/js/field.js', 'js')
+   .js('resources/js/field.js', 'js')