Merge pull request #3 from RingierIMU/master

Send through the ResourceId from Listener Field

Author: codebykyle

dist/js/field.js

@@ -15,6 +15,7 @@
         "laravel-nova": "^1.0"
     },
     "dependencies": {
+        "numeral": "^2.0.6",
         "vue": "^2.5.0"
     }
 }

package.json

@@ -1,64 +1,73 @@
 <template>
-    <default-field :field="field" :errors="errors">
-        <template slot="field">
-            <input
-                :id="field.name"
-                :type="this.field.type"
-                class="w-full form-control form-input form-input-bordered"
-                :class="errorClasses"
-                :placeholder="field.name"
-                :value="value"
-                @input="setFieldAndMessage"
-            />
-        </template>
-    </default-field>
+  <default-field :field="field" :errors="errors">
+    <template slot="field">
+      <input
+        :id="field.name"
+        :type="this.field.type"
+        class="w-full form-control form-input form-input-bordered"
+        :class="errorClasses"
+        :placeholder="field.name"
+        :value="value | moneyFormat(field.numberFormat)"
+        @input="setFieldAndMessage"
+      />
+    </template>
+  </default-field>
 </template>
 
 <script>
-import { FormField, HandlesValidationErrors } from 'laravel-nova'
+import { FormField, HandlesValidationErrors } from "laravel-nova";
+import numeral from "numeral";
 
 export default {
-    mixins: [FormField, HandlesValidationErrors],
+  mixins: [FormField, HandlesValidationErrors],
 
-    props: ['resourceName', 'resourceId', 'field'],
+  props: ["resourceName", "resourceId", "field"],
 
-    methods: {
-        setFieldAndMessage(el) {
-            const rawValue = el.target.value;
-            let parsedValue = rawValue;
+  methods: {
+    setFieldAndMessage(el) {
+      const rawValue = el.target.value;
+      let parsedValue = rawValue;
 
-            if (this.field.type === 'number') {
-                parsedValue = Number(rawValue)
-            }
+      if (this.field.type === "number") {
+        parsedValue = Number(rawValue);
+      }
 
-            Nova.$emit(this.field.broadcastTo, {
-                'field_name': this.field.attribute,
-                'value': parsedValue
-            });
+      Nova.$emit(this.field.broadcastTo, {
+        field_name: this.field.attribute,
+        value: parsedValue
+      });
 
-            this.value = parsedValue;
-        },
-
-        /*
-         * Set the initial, internal value for the field.
-         */
-        setInitialValue() {
-            this.value = this.field.value || ''
-        },
+      this.value = parsedValue;
+    },
 
-        /**
-         * Fill the given FormData object with the field's internal value.
-         */
-        fill(formData) {
-            formData.append(this.field.attribute, this.value || '')
-        },
+    /*
+     * Set the initial, internal value for the field.
+     */
+    setInitialValue() {
+      this.value = this.field.value || "";
+    },
 
-        /**
-         * Update the field's internal value.
-         */
-        handleChange(value) {
-            this.value = value
-        },
+    /**
+     * Fill the given FormData object with the field's internal value.
+     */
+    fill(formData) {
+      formData.append(this.field.attribute, this.value || "");
     },
-}
-</script>
+
+    /**
+     * Update the field's internal value.
+     */
+    handleChange(value) {
+      this.value = value;
+    }
+  },
+  filters: {
+    moneyFormat(number, format) {
+      if (!format) {
+        return number;
+      }
+      return numeral(number).format(format);
+    }
+  }
+};
+</script>

resources/js/components/broadcaster-field/FormField.vue

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

resources/js/components/listener-field/DetailField.vue

@@ -1,96 +1,135 @@
 <template>
-    <default-field :field="field" :errors="errors">
-        <template slot="field">
-            <div class="relative flex items-stretch">
-                <input
-                    :id="field.name"
-                    type="text"
-                    class="w-full form-control form-input form-input-bordered"
-                    :class="errorClasses"
-                    :placeholder="field.name"
-                    v-model="value"
-                />
-
-                <div class="absolute rotating text-80 flex justify-center items-center pin-y pin-r mr-3" v-show="calculating">
-                    <svg class="w-4 h-4" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M457.373 9.387l-50.095 50.102C365.411 27.211 312.953 8 256 8 123.228 8 14.824 112.338 8.31 243.493 7.971 250.311 13.475 256 20.301 256h10.015c6.352 0 11.647-4.949 11.977-11.293C48.159 131.913 141.389 42 256 42c47.554 0 91.487 15.512 127.02 41.75l-53.615 53.622c-20.1 20.1-5.855 54.628 22.627 54.628H480c17.673 0 32-14.327 32-32V32.015c0-28.475-34.564-42.691-54.627-22.628zM480 160H352L480 32v128zm11.699 96h-10.014c-6.353 0-11.647 4.949-11.977 11.293C463.84 380.203 370.504 470 256 470c-47.525 0-91.468-15.509-127.016-41.757l53.612-53.616c20.099-20.1 5.855-54.627-22.627-54.627H32c-17.673 0-32 14.327-32 32v127.978c0 28.614 34.615 42.641 54.627 22.627l50.092-50.096C146.587 484.788 199.046 504 256 504c132.773 0 241.176-104.338 247.69-235.493.339-6.818-5.165-12.507-11.991-12.507zM32 480V352h128L32 480z" class=""></path></svg>
-                </div>
-            </div>
-        </template>
-    </default-field>
+  <default-field :field="field" :errors="errors">
+    <template slot="field">
+      <div class="relative flex items-stretch">
+        <input
+          :id="field.name"
+          type="text"
+          class="w-full form-control form-input form-input-bordered"
+          :class="errorClasses"
+          :placeholder="field.name"
+          :value="value | moneyFormat(field.numberFormat)"
+          @input="setFieldAndMessage"
+        />
+
+        <div
+          class="absolute rotating text-80 flex justify-center items-center pin-y pin-r mr-3"
+          v-show="calculating"
+        >
+          <svg class="w-4 h-4" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+            <path
+              fill="currentColor"
+              d="M457.373 9.387l-50.095 50.102C365.411 27.211 312.953 8 256 8 123.228 8 14.824 112.338 8.31 243.493 7.971 250.311 13.475 256 20.301 256h10.015c6.352 0 11.647-4.949 11.977-11.293C48.159 131.913 141.389 42 256 42c47.554 0 91.487 15.512 127.02 41.75l-53.615 53.622c-20.1 20.1-5.855 54.628 22.627 54.628H480c17.673 0 32-14.327 32-32V32.015c0-28.475-34.564-42.691-54.627-22.628zM480 160H352L480 32v128zm11.699 96h-10.014c-6.353 0-11.647 4.949-11.977 11.293C463.84 380.203 370.504 470 256 470c-47.525 0-91.468-15.509-127.016-41.757l53.612-53.616c20.099-20.1 5.855-54.627-22.627-54.627H32c-17.673 0-32 14.327-32 32v127.978c0 28.614 34.615 42.641 54.627 22.627l50.092-50.096C146.587 484.788 199.046 504 256 504c132.773 0 241.176-104.338 247.69-235.493.339-6.818-5.165-12.507-11.991-12.507zM32 480V352h128L32 480z"
+              class
+            />
+          </svg>
+        </div>
+      </div>
+    </template>
+  </default-field>
 </template>
 
 <style lang="scss">
-    @-webkit-keyframes rotating {
-        from{
-            transform: rotate(0deg);
-        }
-        to{
-            transform: rotate(360deg);
-        }
-    }
-    .rotating {
-        animation: rotating 2s linear infinite;
-    }
+@-webkit-keyframes rotating {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+.rotating {
+  animation: rotating 2s linear infinite;
+}
 </style>
 
 <script>
-import { FormField, HandlesValidationErrors } from 'laravel-nova'
-import _ from 'lodash'
+import { FormField, HandlesValidationErrors } from "laravel-nova";
+import _ from "lodash";
+import numeral from "numeral";
 
 export default {
-    mixins: [FormField, HandlesValidationErrors],
+  mixins: [FormField, HandlesValidationErrors],
+
+  props: ["resourceName", "resourceId", "field"],
+
+  created() {
+    Nova.$on(this.field.listensTo, this.messageReceived);
+    this.field_values["resourceId"] = parseInt(this.resourceId);
+  },
+
+  data: () => ({
+    calculating: false,
+    field_values: {}
+  }),
+
+  methods: {
+    messageReceived(message) {
+      this.field_values[message.field_name] = message.value;
+      this.calculateValue();
+    },
 
-    props: ['resourceName', 'resourceId', 'field'],
+    setFieldAndMessage(el) {
+      const rawValue = el.target.value;
+      let parsedValue = rawValue;
 
-    created() {
-        Nova.$on(this.field.listensTo, this.messageReceived)
+      if (this.field.type === "number") {
+        parsedValue = Number(rawValue);
+      }
+
+      Nova.$emit(this.field.broadcastTo, {
+        field_name: this.field.attribute,
+        value: parsedValue
+      });
+
+      this.value = parsedValue;
     },
 
-    data: () => ({
-        calculating: false,
-        field_values: {}
-    }),
-
-    methods: {
-        messageReceived(message) {
-            this.field_values[message.field_name] = message.value;
-            this.calculateValue()
-        },
-
-        calculateValue: _.debounce(function () {
-            this.calculating = true;
-
-            Nova.request().post(
-                `/codebykyle/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),
-
-        /*
-         * Set the initial, internal value for the field.
-         */
-        setInitialValue() {
-            this.value = this.field.value || ''
-        },
-
-        /**
-         * Fill the given FormData object with the field's internal value.
-         */
-        fill(formData) {
-            formData.append(this.field.attribute, this.value || '')
-        },
-
-        /**
-         * Update the field's internal value.
-         */
-        handleChange(value) {
-            this.value = value
-        },
+    calculateValue: _.debounce(function() {
+      this.calculating = true;
+
+      Nova.request()
+        .post(
+          `/codebykyle/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),
+
+    /*
+     * Set the initial, internal value for the field.
+     */
+    setInitialValue() {
+      this.value = this.field.value || "";
     },
-}
+
+    /**
+     * Fill the given FormData object with the field's internal value.
+     */
+    fill(formData) {
+      formData.append(this.field.attribute, this.value || "");
+    },
+
+    /**
+     * Update the field's internal value.
+     */
+    handleChange(value) {
+      this.value = value;
+    }
+  },
+  filters: {
+    moneyFormat(number, format) {
+      if (!format) {
+        return number;
+      }
+      return numeral(number).format(format);
+    }
+  }
+};
 </script>

resources/js/components/listener-field/FormField.vue

@@ -50,6 +50,18 @@ public function setType($type) : Element
         ]);
     }
 
+    /**
+     * Allows us to set the format of the number according to numeral.js
+     * @param $broadcastChannel
+     * @return Element
+     */
+    public function numberFormat($format) : Element
+    {
+        return $this->withMeta([
+            'numberFormat' => $format
+        ]);
+    }
+
     /**
      * Tells the client side component which channel to broadcast on
      * @param $broadcastChannel
@@ -61,4 +73,5 @@ public function broadcastTo($broadcastChannel):Element
             'broadcastTo' => $broadcastChannel
         ]);
     }
+
 }