v2 release

resources/js/components/Button/CreateRelationCustomButton.vue

@@ -0,0 +1,27 @@
+<template>
+  <button
+    @click="$emit('click')"
+    type="button"
+    class="rounded dim font-bold text-sm text-primary inline-flex items-center focus:outline-none active:outline-none focus:shadow-outline active:shadow-outline pl-1 pr-2"
+  >
+    <icon type="add" width="24" height="24" view-box="0 0 24 24" />
+    <span>{{ setLabel(__('Create')) }}</span>
+  </button>
+</template>
+
+<script>
+export default {
+  props: {
+    label: {},
+    field: {}
+  },
+
+  methods: {
+    setLabel(defaultLabel) {
+      return (
+          this.field.createRelationButtonLabel || defaultLabel
+      )
+    },
+  }
+}
+</script>

resources/js/components/Detail/BroadcasterBelongsToField.vue

@@ -0,0 +1,27 @@
+<template>
+  <panel-item :field="field">
+    <template slot="value">
+      <router-link
+          v-if="field.viewable && field.value"
+          :to="{
+          name: 'detail',
+          params: {
+            resourceName: field.resourceName,
+            resourceId: field.belongsToId,
+          },
+        }"
+          class="no-underline font-bold dim text-primary"
+      >
+        {{ field.value }}
+      </router-link>
+      <p v-else-if="field.value">{{ field.value }}</p>
+      <p v-else>&mdash;</p>
+    </template>
+  </panel-item>
+</template>
+
+<script>
+export default {
+  props: ['resource', 'resourceName', 'resourceId', 'field'],
+}
+</script>

resources/js/components/Detail/ListenerCurrencyField.vue

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

resources/js/components/Detail/ListenerField.vue

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

resources/js/components/Detail/ListenerHiddenField.vue

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

resources/js/components/broadcaster-belongsto-field/FormField.vue → resources/js/components/Form/BroadcasterBelongsToField.vue

@@ -74,11 +74,12 @@
           </option>
         </select-control>
 
-        <create-relation-button
+        <create-relation-custom-button
             v-if="canShowNewRelationModal"
             @click="openRelationModal"
             class="ml-1"
             :dusk="`${field.attribute}-inline-create`"
+            :field="this.field"
         />
       </div>
 
@@ -391,6 +392,13 @@ export default {
       )
     },
 
+    // added
+    isReadonlyWithCreateRelationButton() {
+      return (
+          this.field.readonlyWithCreateRelationButton || _.get(this.field, 'extraAttributes.readonlyWithCreateRelationButton')
+      )
+    },
+
     shouldShowTrashed() {
       return (
           this.softDeletes &&
@@ -406,12 +414,13 @@ export default {
       }).authorizedToCreate
     },
 
+    // changed
     canShowNewRelationModal() {
       return (
           this.field.showCreateRelationButton &&
           !this.shownViaNewRelationModal &&
           !this.isLocked &&
-          !this.isReadonly &&
+          (!this.isReadonly || this.isReadonlyWithCreateRelationButton) &&
           this.authorizedToCreate
       )
     },

resources/js/components/Form/ListenerHiddenField.vue

@@ -0,0 +1,48 @@
+<template>
+  <input :id="field.name" type="hidden" v-model="value" />
+</template>
+
+<script>
+import { FormField } from 'laravel-nova'
+export default {
+  mixins: [FormField],
+  props: ['resourceName', 'resourceId', 'field'],
+
+  created() {
+    Nova.$on(this.field.listensTo, this.messageReceived)
+  },
+
+  data: () => ({
+    calculating: false,
+    field_values: {}
+  }),
+
+  methods: {
+    /*
+     * Set the initial, internal value for the field.
+     */
+    setInitialValue() {
+      this.value = this.field.value || ''
+    },
+
+    messageReceived(message) {
+      this.field_values[message.field_name] = message.value;
+      this.calculateValue()
+    },
+
+    calculateValue: _.debounce(function () {
+      this.calculating = true;
+
+      Nova.request().post(
+          `/gldrenthe89/nova-calculated-field/calculate/${this.resourceName}/${this.field.attribute}`,
+          this.field_values
+      ).then((response) => {
+        this.value = response.data.value;
+        this.calculating = false;
+      }).catch(() => {
+        this.calculating = false;
+      });
+    }, 500),
+  },
+}
+</script>

resources/js/components/broadcaster-belongsto-field/IndexField.vue → resources/js/components/Index/BroadcasterBelongsToField.vue

@@ -1,13 +1,3 @@
-<!--<template>-->
-<!--    <span>{{ field.value }}</span>-->
-<!--</template>-->
-
-<!--<script>-->
-<!--export default {-->
-<!--    props: ['resourceName', 'field'],-->
-<!--}-->
-<!--</script>-->
-
 <template>
     <div :class="`text-${field.textAlign}`">
     <span>

resources/js/components/Index/ListenerHiddenField.vue

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

resources/js/field.js

@@ -1,21 +1,28 @@
 Nova.booting((Vue, router, store) => {
-    Vue.component('index-broadcaster-field', require('./components/broadcaster-field/IndexField'));
-    Vue.component('detail-broadcaster-field', require('./components/broadcaster-field/DetailField'));
-    Vue.component('form-broadcaster-field', require('./components/broadcaster-field/FormField'));
+    // Detail
+    Vue.component('detail-broadcaster-field', require('./components/Detail/BroadcasterField'));
+    Vue.component('detail-broadcaster-belongsto-field', require('./components/Detail/BroadcasterBelongsToField'));
+    Vue.component('detail-broadcaster-select-field', require('./components/Detail/BroadcasterSelectField'));
+    Vue.component('detail-listener-currency-field', require('./components/Detail/ListenerCurrencyField'));
+    Vue.component('detail-listener-field', require('./components/Detail/ListenerField'));
+    Vue.component('detail-listener-hidden-field', require('./components/Detail/ListenerHiddenField'));
 
-    Vue.component('index-broadcaster-select-field', require('./components/broadcaster-select-field/IndexField'));
-    Vue.component('detail-broadcaster-select-field', require('./components/broadcaster-select-field/DetailField'));
-    Vue.component('form-broadcaster-select-field', require('./components/broadcaster-select-field/FormField'));
+    // Form
+    Vue.component('form-broadcaster-field', require('./components/Form/BroadcasterField'));
+    Vue.component('form-broadcaster-belongsto-field', require('./components/Form/BroadcasterBelongsToField'));
+    Vue.component('form-broadcaster-select-field', require('./components/Form/BroadcasterSelectField'));
+    Vue.component('form-listener-currency-field', require('./components/Form/ListenerCurrencyField'));
+    Vue.component('form-listener-field', require('./components/Form/ListenerField'));
+    Vue.component('form-listener-hidden-field', require('./components/Form/ListenerHiddenField'));
 
-    Vue.component('index-broadcaster-belongsto-field', require('./components/broadcaster-belongsto-field/IndexField'));
-    Vue.component('detail-broadcaster-belongsto-field', require('./components/broadcaster-belongsto-field/DetailField'));
-    Vue.component('form-broadcaster-belongsto-field', require('./components/broadcaster-belongsto-field/FormField'));
+    // Index
+    Vue.component('index-broadcaster-field', require('./components/Index/BroadcasterField'));
+    Vue.component('index-broadcaster-belongsto-field', require('./components/Index/BroadcasterBelongsToField'));
+    Vue.component('index-broadcaster-select-field', require('./components/Index/BroadcasterSelectField'));
+    Vue.component('index-listener-currency-field', require('./components/Index/ListenerCurrencyField'));
+    Vue.component('index-listener-field', require('./components/Index/ListenerField'));
+    Vue.component('index-listener-hidden-field', require('./components/Index/ListenerHiddenField'));
 
-    Vue.component('index-listener-field', require('./components/listener-field/IndexField'));
-    Vue.component('detail-listener-field', require('./components/listener-field/DetailField'));
-    Vue.component('form-listener-field', require('./components/listener-field/FormField'));
-
-    Vue.component('index-listener-currency-field', require('./components/listener-currency-field/IndexField'));
-    Vue.component('detail-listener-currency-field', require('./components/listener-currency-field/DetailField'));
-    Vue.component('form-listener-currency-field', require('./components/listener-currency-field/FormField'));
+    // Button
+    Vue.component('create-relation-custom-button', require('./components/Button/CreateRelationCustomButton'));
 })

src/BroadcasterBelongsToField.php

@@ -4,8 +4,6 @@
 
 use Laravel\Nova\Element;
 use Laravel\Nova\Fields\BelongsTo;
-use Laravel\Nova\Fields\Field;
-use Laravel\Nova\Fields\ResourceRelationshipGuesser;
 
 class BroadcasterBelongsToField extends BelongsTo
 {
@@ -59,10 +57,39 @@ public function setType($type) : Element
      * @param string|array $broadcastChannel
      * @return Element
      */
-    public function broadcastTo($broadcastChannel) : Element
+    public function broadcastTo($broadcastChannel): Element
     {
         return $this->withMeta([
             'broadcastTo' => $broadcastChannel
         ]);
     }
+
+    /**
+     * Tells the client side component to show create relation button while field wil be readonly.
+     *
+     * @param  bool  $callback
+     * @return BroadcasterBelongsToField
+     */
+    public function readonlyWithCreateRelationButton($callback = true): Element
+    {
+        $this->readonlyCallback = $callback;
+        $this->showCreateRelationButtonCallback = $callback;
+
+        return $this->withMeta([
+            'readonlyWithCreateRelationButton' => $callback
+        ]);
+    }
+
+    /**
+     * Tells the client side component which label to use for the create relation button.
+     *
+     * @param $label
+     * @return BroadcasterBelongsToField
+     */
+    public function labelForCreateRelationButton($label): Element
+    {
+        return $this->withMeta([
+            'createRelationButtonLabel' => $label
+        ]);
+    }
 }