feat: add google map type option field component (#648)

* feat: add google map type option field component

* refactor: refactor indentation

* refactor: get google map api key from admin settings

includes/class-assets.php

@@ -76,6 +76,7 @@ public function enqueue_admin_scripts( $hook ) {
             wp_enqueue_script( 'dokan-vue-vendor' );
             wp_localize_script( 'dokan-vue-vendor', 'dokan', $localize_script );
             wp_enqueue_script( 'dokan-vue-bootstrap' );
+            $this->load_gmap_script();
 
             // allow other plugins to load scripts before the main app loads
             do_action( 'dokan-vue-admin-scripts' );

src/admin/components/Fields.vue

@@ -176,28 +176,43 @@
                 </div>
             </td>
         </tr>
+
+        <tr :class="id" v-if="'gmap' == fieldData.type">
+            <th scope="row">
+                <label :for="sectionId + '[' + fieldData.name + ']'">{{ fieldData.label }}</label>
+            </th>
+
+            <td>
+                <input type="hidden" :name="sectionId + '[' + fieldData.name + ']'" :value="Object.assign( fieldValue[fieldData.name], gmapData )">
+                <gmap @updateGmap="updateGmapData" :gmapKey="getGmapApiKey()" :location="getMapLocation( fieldValue[fieldData.name] )" />
+                <p class="description" v-html="fieldData.desc"></p>
+            </td>
+        </tr>
     </div>
 </template>
 
 <script>
     import colorPicker from "admin/components/ColorPicker.vue";
     let TextEditor = dokan_get_lib('TextEditor');
+    let Gmap = dokan_get_lib('Gmap');
 
     export default {
         name: 'Fields',
 
         components: {
             colorPicker,
             TextEditor,
+            Gmap
         },
 
         data() {
             return {
-                repeatableItem: {}
+                repeatableItem: {},
+                gmapData: {}
             }
         },
 
-        props: ['id', 'fieldData', 'sectionId', 'fieldValue'],
+        props: ['id', 'fieldData', 'sectionId', 'fieldValue', 'allSettingsValues'],
 
         beforeMount() {
             if ( 'multicheck' === this.fieldData.type && ! this.fieldValue[ this.fieldData.name ] ) {
@@ -227,6 +242,27 @@
 
             removeItem( optionVal, name ) {
                 this.fieldValue[name].splice( optionVal, 1 );
+            },
+
+            getMapLocation(savedLocation) {
+                return {
+                    latitude: savedLocation.latitude ? savedLocation.latitude : 23.709921,
+                    longitude: savedLocation.longitude ? savedLocation.longitude: 90.40714300000002,
+                    address: savedLocation.address ? savedLocation.address : 'Dhaka',
+                    zoom: 10
+                }
+            },
+
+            updateGmapData( payload ) {
+                this.gmapData = payload;
+            },
+
+            getGmapApiKey() {
+                let settings = this.allSettingsValues;
+
+                if ( 'dokan_general' in settings && 'gmap_api_key' in settings.dokan_general  ) {
+                    return settings.dokan_general.gmap_api_key
+                }
             }
         }
 

src/admin/components/Gmap.vue

@@ -0,0 +1,138 @@
+<template>
+    <div v-if="loadMap" class="gmap-wrap regular-text">
+        <input ref="searchAddress" class="search-address regular-text" type="text" :placeholder="__( 'Search Address', 'dokan') ">
+        <div id="gmap" ref="gmapArea"></div>
+    </div>
+    <p v-else>
+        {{ __( 'Please enter google map API key', 'dokan' ) }}
+    </p>
+</template>
+
+<script>
+export default {
+    name: 'Gmap',
+
+    props: {
+        gmapKey: {
+            type: [String, Function]
+        },
+        location: {
+            type: Object,
+            default() {
+                return {
+                    latitude: 23.709921,
+                    longitude: 90.40714300000002,
+                    address: 'dhaka',
+                    zoom: 10
+                }
+            }
+        }
+    },
+
+    data() {
+        return {
+            gmap: '',
+            marker: '',
+            loadMap: this.gmapKey.length > 1
+        }
+    },
+
+    mounted() {
+        this.renderMap();
+    },
+
+    methods: {
+        setMap() {
+            this.gmap = new google.maps.Map( this.getMapArea(), {
+                center: this.getCenter(),
+                zoom: this.location.zoom,
+                mapTypeId: google.maps.MapTypeId.ROADMAP
+            });
+        },
+
+        setMarker() {
+            this.marker = new google.maps.Marker( {
+                position: this.getCenter(),
+                map: this.gmap
+            } );
+        },
+
+        GetGeocoder() {
+            return new google.maps.Geocoder;
+        },
+
+        getSearchAddress() {
+            if ( this.location.address ) {
+                this.$refs['searchAddress'].value = this.location.address
+            }
+
+            return this.$refs['searchAddress'];
+        },
+
+        setAutoComplete() {
+            let autocomplete = new google.maps.places.Autocomplete( this.getSearchAddress() );
+
+            autocomplete.addListener( 'place_changed', () => {
+                let place    = autocomplete.getPlace();
+                let location = place.geometry.location;
+
+                this.updateMap( location.lat(), location.lng(), place.formatted_address );
+            } );
+        },
+
+        updateMap( latitude, longitude, formatted_address ) {
+            let curpoint = new google.maps.LatLng( latitude, longitude )
+
+            this.$emit( 'updateGmap', {
+                latitude: curpoint.lat(),
+                longitude: curpoint.lng(),
+                address: formatted_address
+            } );
+
+            this.gmap.setCenter( curpoint );
+            this.marker.setPosition( curpoint );
+
+            if ( ! formatted_address ) {
+                this.GetGeocoder.geocode( {
+                    location: {
+                        lat: latitude,
+                        lng: longitude
+                    }
+                }, function ( results, status ) {
+                    if ( 'OK' === status ) {
+                        address.val( results[0].formatted_address );
+                    }
+                } )
+            }
+        },
+
+        renderMap() {
+            if ( ! this.loadMap ) {
+                return;
+            }
+
+            this.setMap();
+            this.setMarker();
+            this.setAutoComplete();
+        },
+
+        getCenter() {
+            return new google.maps.LatLng( this.location.latitude, this.location.longitude );
+        },
+
+        getMapArea() {
+            return this.$refs['gmapArea'];
+        }
+    }
+};
+</script>
+
+<style scoped>
+    .gmap-wrap #gmap {
+        width: 100%;
+        height: 300px;
+    }
+    .search-address {
+        padding: 5px;
+    }
+</style>

src/admin/pages/Settings.vue

@@ -30,6 +30,7 @@
                                         :id="fieldId"
                                         :field-data="field"
                                         :field-value="settingValues[index]"
+                                        :all-settings-values="settingValues"
                                         @openMedia="showMedia"
                                         :key="fieldId"
                                     ></fields>

src/utils/Bootstrap.js

@@ -37,6 +37,7 @@ import Search from "admin/components/Search.vue"
 import Datepicker from "admin/components/Datepicker.vue"
 import VueSweetalert2 from 'vue-sweetalert2';
 import ColorPicker from "admin/components/ColorPicker.vue"
+import Gmap from "admin/components/Gmap.vue"
 
 
 import "vue-multiselect/dist/vue-multiselect.min.css"
@@ -96,6 +97,7 @@ window.dokan.libs['Datepicker']  = Datepicker;
 window.dokan.libs['Multiselect'] = Multiselect;
 window.dokan.libs['ColorPicker'] = ColorPicker;
 window.dokan.libs['debounce']    = Debounce;
+window.dokan.libs['Gmap']        = Gmap;
 
 window.dokan.libs['ContentLoading']  = {
   VclCode,