feat: placeholder, helper text, dontStore method, current address...

README.md

@@ -71,6 +71,21 @@ AddressMetadata::make('long')->fromValue('longitude')->disabled(),
 AddressMetadata::make('long')->fromValue('longitude')->invisible(),
 ```
 
+By default, the formatted address will be stored on the property provided in the GoogleAutocomplete field. If you don't want to store it, you can use the `dontStore` method:
+
+
+```php
+use YieldStudio\NovaGoogleAutocomplete\AddressMetadata;
+use YieldStudio\NovaGoogleAutocomplete\GoogleAutocomplete;
+
+// Formatted address will not be stored
+GoogleAutocomplete::make('Address')->withValues(['latitude', 'longitude'])->dontStore(),
+
+// This field will be stored
+AddressMetadata::make('lat')->fromValue('latitude'),
+AddressMetadata::make('long')->fromValue('longitude'),
+```
+
 ### Combine Values
 
 If you want to concatenate certain elements of the geocoded object that is returned by Google, using `{{` and `}}`, wrap the key like you would above; like so:

dist/js/field.js.LICENSE.txt

@@ -1,5 +1,14 @@
+/*!
+ * The buffer module from node.js, for the browser.
+ *
+ * @author   Feross Aboukhadijeh <http://feross.org>
+ * @license  MIT
+ */
+
 /*!
  * vuex v4.1.0
  * (c) 2022 Evan You
  * @license MIT
  */
+
+/*! ieee754. BSD-3-Clause License. Feross Aboukhadijeh <https://feross.org/opensource> */

resources/js/components/AddressMetadata/FormField.vue

@@ -1,32 +1,37 @@
 <template>
     <div :class="{ invisible: field.invisible }">
-        <DefaultField :field="field">
+        <DefaultField
+            :field="field"
+            :errors="errors"
+            :show-help-text="showHelpText"
+            :full-width-content="fullWidthContent"
+        >
             <template #field>
                 <input
                     :id="field.name"
                     type="text"
                     :disabled="field.disabled"
                     class="w-full form-control form-input form-input-bordered"
                     :class="errorClasses"
-                    :placeholder="field.name"
+                    :placeholder="field.placeholder"
                     v-model="value"
                 />
-                <p v-if="hasError" class="help-text error-text mt-2 text-danger">
-                    {{ firstError }}
-                </p>
             </template>
         </DefaultField>
     </div>
 </template>
 
 <script>
-import { FormField, HandlesValidationErrors } from 'laravel-nova';
+import {FormField, HandlesValidationErrors} from 'laravel-nova';
 
 export default {
     mixins: [FormField, HandlesValidationErrors],
     props: ['resourceName', 'resourceId', 'field'],
-
     mounted() {
+        Nova.$on('address-metadata-clear', () => {
+            this.value = '';
+        });
+
         if (this.field.asJson) {
             Nova.$on('address-metadata-update', locationObject => {
                 this.value = JSON.stringify(locationObject);

resources/js/components/GoogleAutocomplete/FormField.vue

@@ -1,46 +1,66 @@
 <template>
-    <DefaultField :field="field">
+    <DefaultField
+        :field="field"
+        :errors="errors"
+        :show-help-text="showHelpText"
+        :full-width-content="fullWidthContent"
+    >
         <template #field>
-            <div class="form-group">
-                <vue-google-autocomplete
-                    ref="address"
-                    :id="field.attribute"
-                    class="w-full form-control form-input form-input-bordered"
-                    :class="errorClasses"
-                    :country="field.countries"
-                    :types="field.type"
-                    :placeholder="value.trim().length === 0 ? field.name : __('update_address')"
-                    v-model="value"
-                    v-on:keypress.enter.prevent=""
-                    v-on:placechanged="getAddressData"
-                />
+            <vue-google-autocomplete
+                ref="searchField"
+                :id="field.attribute"
+                class="w-full form-control form-input form-input-bordered"
+                :class="errorClasses"
+                :country="field.countries"
+                :types="field.type"
+                :placeholder="placeholder"
+                v-model="search"
+                v-on:keypress.enter.prevent=""
+                v-on:placechanged="getAddressData"
+            />
+            <div v-if="!field.dontStore && value && value.trim().length > 0">
+                <span class="inline-block mt-1 italic">{{ __('nga_current_address', {address: value}) }}</span>
+                <button @click="clear" type="button" class="text-red-500 inline-block ml-2">{{ __('nga_clear') }}</button>
             </div>
-            <p v-if="hasError" class="help-text error-text mt-2 text-danger">
-                {{ firstError }}
-            </p>
         </template>
     </DefaultField>
 </template>
 
 <script>
-import { FormField, HandlesValidationErrors } from 'laravel-nova';
+import {FormField, HandlesValidationErrors} from 'laravel-nova';
 import VueGoogleAutocomplete from 'vue-google-autocomplete';
 
 export default {
-    components: { VueGoogleAutocomplete },
+    components: {VueGoogleAutocomplete},
     mixins: [FormField, HandlesValidationErrors],
     props: ['resourceName', 'resourceId', 'field'],
-
-    data: function() {
+    data: function () {
         return {
-            address: '',
+            search: '',
+            value: '',
         };
     },
+    computed: {
+        placeholder() {
+            if (this.field.placeholder) {
+                return this.field.placeholder;
+            }
+
+            return this.__('nga_search');
+        }
+    },
     methods: {
+        clear(){
+            this.$refs.searchField.$refs.autocomplete.value = '';
+            this.value = '';
+            Nova.$emit('address-metadata-clear');
+        },
         getAddressData(addressData, placeResultData) {
             // Save current data address as a string
             this.handleChange(placeResultData.formatted_address);
 
+            this.$refs.searchField.$refs.autocomplete.value = '';
+
             const retrievedAddress = {};
 
             // Emmit events to by catch up for the other AddressMetadata fields

src/FieldServiceProvider.php

@@ -27,7 +27,7 @@ public function boot(): void
         Nova::serving(function (ServingNova $event) {
             Nova::script('google-autocomplete', __DIR__ . '/../dist/js/field.js');
             Nova::remoteScript('https://maps.googleapis.com/maps/api/js?key='.config('nova-google-autocomplete.api_key').'&libraries=places');
-            Nova::translations(__DIR__ . '/../resources/lang/' . app()->getLocale() . '.json');
+            Nova::translations(resource_path('lang/vendor/nova-google-autocomplete/' . app()->getLocale() . '.json'));
         });
     }
 }

src/GoogleAutocomplete.php

@@ -28,6 +28,11 @@ public function countries(string|array $list): self
         ]);
     }
 
+    public function dontStore(): self
+    {
+        return $this->fillUsing(fn () => null)->onlyOnForms()->withMeta(['dontStore' => true]);
+    }
+
     /**
      * Pass a place type
      * https://developers.google.com/places/supported_types#table3