Skip to content

Added hideToggles option #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 24 commits into
base: master
Choose a base branch
from
Open

Added hideToggles option #3

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
7101c99
upd: added hideToggles option
Mar 27, 2019
42ec5ab
upd: fill fields based on the seleted location
Mar 27, 2019
67f60a1
upd: added do not store option - it uses no internal storage for the …
Mar 27, 2019
4ab7160
upd: option to manually fill the related fields
Mar 27, 2019
52f4b75
upd: prod build
Mar 27, 2019
2df5103
upd: broader types for the autocomplete. ref: renamed nameField to ad…
Mar 27, 2019
9fb475c
upd: changed google maps key retrieval
Apr 3, 2019
7536fcb
upd: get first occurence of locality component in all results, not ju…
May 19, 2022
66ef956
upd: fallback to administrative_area_1 when locality is not present
Jul 13, 2022
c1568f7
add: timezone autoselect functionality using google timezone api [sc-…
alexander-ivanov-ampeco Jul 25, 2022
4b122fe
upd: call timezone api only if timezone field is present [cl-49574]
alexander-ivanov-ampeco Jul 25, 2022
a1daecb
upd: use same key for timezone api [sc-49574]
alexander-ivanov-ampeco Aug 8, 2022
4509e3b
upd: expect all timezones as a parameter [sc-49574]
alexander-ivanov-ampeco Aug 9, 2022
37a1ae4
Merge pull request #1 from ampeco/feature/sc-49574-multi-time-zones-a…
alexander-ivanov-ampeco Aug 9, 2022
f0ade95
ref: component to always set timezone, stop expecting all timezones p…
alexander-ivanov-ampeco Aug 10, 2022
f823749
ref: form field to call the BE for looking up timezones based on coor…
alexander-ivanov-ampeco Aug 18, 2022
7caab2c
wip: nova-address field google picker poplation for debug [sc-55763][…
petko-ampeco Sep 19, 2022
a67baae
add: fix jquery style for the region-value emit event [sc-55763]
petko-ampeco Sep 21, 2022
ae58466
upd: emit state-value event when country is US or AU
Sep 30, 2022
f953c35
Add states region option
petko-ampeco Oct 3, 2022
af8f0da
Merge pull request #2 from ampeco/feature/sc-57782-google-address-picker
petko-ampeco Oct 4, 2022
6270d5a
compile for production
petko-ampeco Oct 4, 2022
ba4ebb2
fix: populating the city field and the state/region field [fixes sc-9…
alexander-ivanov-ampeco Jul 7, 2023
6220f30
fix: state and city name when country does not have states
petko-ampeco Sep 29, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
upd: added do not store option - it uses no internal storage for the … 
…field itseld and counts on the latitude, longitude and name fields instead
  • Loading branch information
Alexander (SASh) Alexiev committed Mar 27, 2019
commit 67f60a11d76a5a2f8849850730cdaa93f9f3bd13
92 changes: 70 additions & 22 deletions dist/js/field.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -963,16 +963,33 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
administrative_area_level_1: this.field.administrative_area_level_1 || false,
locality: this.field.locality || false,
postal_code: this.field.postal_code || false,
name: this.field.name || false,
name_field: this.field.name_field || false,
latitude_field: this.field.latitude_field || false,
longitude_field: this.field.longitude_field || false
longitude_field: this.field.longitude_field || false,
relatedValues: {},
relatedWatchers: [],
addressIsInitializing: this.field.do_not_store ? true : false
};
},

mounted: function mounted() {
var _this2 = this;

if (this.field.withMap) {
this.initMap();
}
if (this.field.do_not_store) {

this.$parent.$children.forEach(function (component) {
if (component.field && [_this2.field.latitude_field, _this2.field.longitude_field, _this2.field.name_field].includes(component.field.attribute)) {
var comp = component;
_this2.relatedWatchers.push(component.$watch('value', function (value) {
_this2.relatedValues[comp.field.attribute] = value;
_this2.initializeAddress();
}));
}
});
}
},

methods: {
Expand All @@ -992,6 +1009,7 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
return res.long_name;
},
getAddressData: function getAddressData(addressData, placeResultData, id) {
this.forgetRelatedWatchers();
this.addressData.latitude = addressData.latitude;
this.addressData.longitude = addressData.longitude;
this.addressData.formatted_address = placeResultData.formatted_address;
Expand All @@ -1005,7 +1023,30 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });

this.refreshMap();
},

forgetRelatedWatchers: function forgetRelatedWatchers() {
this.addressIsInitializing = false;
this.relatedWatchers.forEach(function (watcher) {
return watcher();
});
},
initializeAddress: function initializeAddress() {
if (this.field.name_field && this.relatedValues[this.field.name_field]) {
var v = this.relatedValues[this.field.name_field];
if (this.field.name_field_array_key) {
v = v[this.field.name_field_array_key];
}
this.addressData.formatted_address = v;
this.$refs.address.update(this.addressData.formatted_address);
}
if (this.field.latitude_field && this.relatedValues[this.field.latitude_field]) {
this.addressData.latitude = this.relatedValues[this.field.latitude_field];
this.refreshMap();
}
if (this.field.longitude_field && this.relatedValues[this.field.longitude_field]) {
this.addressData.longitude = this.relatedValues[this.field.longitude_field];
this.refreshMap();
}
},
refreshAddressData: function refreshAddressData() {
this.geocode(new google.maps.LatLng(this.addressData.latitude, this.addressData.longitude));
this.refreshMap();
Expand All @@ -1029,9 +1070,9 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
this.map = new google.maps.Map(element, options);

// get formatted address for the latitude and longitude
if (!this.addressData.address) {
this.geocode(center);
}
// if(!this.addressData.address) {
// this.geocode(center)
// }
// adding initial marker
this.marker = new google.maps.Marker({
position: center,
Expand All @@ -1040,6 +1081,7 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });

var _this = this;
google.maps.event.addListener(this.map, 'click', function (event) {
_this.forgetRelatedWatchers();
if (_this.marker) {
_this.marker.setMap(null);
}
Expand Down Expand Up @@ -1073,7 +1115,6 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
this.geocoder.geocode({ 'location': latLng }, function (results, status) {
if (status === 'OK') {
if (results[0]) {
console.log(results);
_this.addressData.latitude = latLng.lat();
_this.addressData.longitude = latLng.lng();
_this.addressData.formatted_address = results[0].formatted_address;
Expand Down Expand Up @@ -1102,9 +1143,11 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
*/
setInitialValue: function setInitialValue() {
this.value = this.field.value || '';
if (this.value) {
this.addressData = JSON.parse(this.value);
this.$refs.address.update(this.addressData.formatted_address);
if (this.field.do_not_store) {} else {
if (this.value) {
this.addressData = JSON.parse(this.value);
this.$refs.address.update(this.addressData.formatted_address);
}
}
},

Expand All @@ -1113,6 +1156,9 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
* Fill the given FormData object with the field's internal value.
*/
fill: function fill(formData) {
if (this.field.do_not_store) {
return;
}
formData.append(this.field.attribute, this.value || '');
},

Expand All @@ -1124,24 +1170,24 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
this.value = value;
},
updateFields: function updateFields(addressData) {
var _this2 = this;
var _this3 = this;

this.$nextTick(function () {

Nova.$emit(_this2.field.countryCode + '-value', addressData.countryCode);
Nova.$emit(_this2.field.country + '-value', addressData.country);
Nova.$emit(_this2.field.locality + '-value', addressData.locality);
Nova.$emit(_this2.field.administrative_area_level_1 + '-value', addressData.administrative_area_level_1);
Nova.$emit(_this3.field.countryCode + '-value', addressData.countryCode);
Nova.$emit(_this3.field.country + '-value', addressData.country);
Nova.$emit(_this3.field.locality + '-value', addressData.locality);
Nova.$emit(_this3.field.administrative_area_level_1 + '-value', addressData.administrative_area_level_1);
var name = addressData.name;
if (_this2.field.name_array_key) {
if (_this3.field.name_field_array_key) {
name = {};
name[_this2.field.name_array_key] = addressData.name;
name[_this3.field.name_field_array_key] = addressData.name;
}

Nova.$emit(_this2.field.name + '-value', name);
Nova.$emit(_this2.field.latitude_field + '-value', addressData.latitude);
Nova.$emit(_this2.field.longitude_field + '-value', addressData.longitude);
Nova.$emit(_this2.field.postal_code + '-value', addressData.postal_code);
Nova.$emit(_this3.field.name_field + '-value', name);
Nova.$emit(_this3.field.latitude_field + '-value', addressData.latitude);
Nova.$emit(_this3.field.longitude_field + '-value', addressData.longitude);
Nova.$emit(_this3.field.postal_code + '-value', addressData.postal_code);
});
}
},
Expand All @@ -1156,7 +1202,9 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
this.value = JSON.stringify(newAddressData);
this.mapOptions.center = new google.maps.LatLng(newAddressData.latitude, newAddressData.longitude);

this.updateFields(newAddressData);
if (!this.addressIsInitializing) {
this.updateFields(newAddressData);
}
},
deep: true
}
Expand Down
85 changes: 66 additions & 19 deletions resources/js/components/FormField.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,16 +109,32 @@ export default {
administrative_area_level_1: this.field.administrative_area_level_1 || false,
locality: this.field.locality || false,
postal_code: this.field.postal_code || false,
name: this.field.name || false,
name_field: this.field.name_field || false,
latitude_field: this.field.latitude_field || false,
longitude_field: this.field.longitude_field || false,
relatedValues: {},
relatedWatchers: [],
addressIsInitializing: this.field.do_not_store ? true : false,
}
},

mounted: function () {
if(this.field.withMap) {
this.initMap()
}
if (this.field.do_not_store){

this.$parent.$children.forEach(component => {
if (component.field && [this.field.latitude_field, this.field.longitude_field, this.field.name_field].includes(component.field.attribute)){
const comp = component;
this.relatedWatchers.push( component.$watch('value', value => {
this.relatedValues[comp.field.attribute] = value;
this.initializeAddress();
}) );
}
})

}
},

methods: {
Expand All @@ -136,6 +152,7 @@ export default {
return res.long_name;
},
getAddressData: function (addressData, placeResultData, id) {
this.forgetRelatedWatchers()
this.addressData.latitude = addressData.latitude;
this.addressData.longitude = addressData.longitude;
this.addressData.formatted_address = placeResultData.formatted_address;
Expand All @@ -149,7 +166,28 @@ export default {

this.refreshMap()
},

forgetRelatedWatchers: function(){
this.addressIsInitializing = false;
this.relatedWatchers.forEach(watcher => watcher());
},
initializeAddress: function(){
if (this.field.name_field && this.relatedValues[this.field.name_field]){
let v = this.relatedValues[this.field.name_field];
if (this.field.name_field_array_key){
v = v[this.field.name_field_array_key]
}
this.addressData.formatted_address = v;
this.$refs.address.update(this.addressData.formatted_address);
}
if (this.field.latitude_field && this.relatedValues[this.field.latitude_field]) {
this.addressData.latitude = this.relatedValues[this.field.latitude_field];
this.refreshMap()
}
if (this.field.longitude_field && this.relatedValues[this.field.longitude_field]) {
this.addressData.longitude = this.relatedValues[this.field.longitude_field];
this.refreshMap()
}
},
refreshAddressData() {
this.geocode(new google.maps.LatLng(this.addressData.latitude, this.addressData.longitude))
this.refreshMap()
Expand All @@ -175,9 +213,9 @@ export default {
this.map = new google.maps.Map(element, options);

// get formatted address for the latitude and longitude
if(!this.addressData.address) {
this.geocode(center)
}
// if(!this.addressData.address) {
// this.geocode(center)
// }
// adding initial marker
this.marker = new google.maps.Marker({
position: center,
Expand All @@ -188,6 +226,7 @@ export default {

var _this = this;
google.maps.event.addListener(this.map, 'click', function(event) {
_this.forgetRelatedWatchers()
if (_this.marker) {
_this.marker.setMap(null);
}
Expand Down Expand Up @@ -224,7 +263,6 @@ export default {
this.geocoder.geocode({'location': latLng}, function(results, status) {
if (status === 'OK') {
if (results[0]) {
console.log(results)
_this.addressData.latitude = latLng.lat()
_this.addressData.longitude = latLng.lng()
_this.addressData.formatted_address = results[0].formatted_address
Expand Down Expand Up @@ -252,16 +290,23 @@ export default {
*/
setInitialValue() {
this.value = this.field.value || ''
if(this.value) {
this.addressData = JSON.parse(this.value)
this.$refs.address.update(this.addressData.formatted_address);
if (this.field.do_not_store) {

} else {
if(this.value) {
this.addressData = JSON.parse(this.value)
this.$refs.address.update(this.addressData.formatted_address);
}
}
},

/**
* Fill the given FormData object with the field's internal value.
*/
fill(formData) {
if (this.field.do_not_store){
return;
}
formData.append(this.field.attribute, this.value || '')
},

Expand All @@ -274,20 +319,20 @@ export default {
updateFields(addressData){
this.$nextTick(() => {

Nova.$emit(this.field.countryCode + '-value', addressData.countryCode)
Nova.$emit(this.field.country + '-value', addressData.country)
Nova.$emit(this.field.locality + '-value', addressData.locality)
Nova.$emit(this.field.countryCode + '-value', addressData.countryCode);
Nova.$emit(this.field.country + '-value', addressData.country);
Nova.$emit(this.field.locality + '-value', addressData.locality);
Nova.$emit(this.field.administrative_area_level_1 + '-value', addressData.administrative_area_level_1);
var name = addressData.name;
if (this.field.name_array_key){
name = {}
name[this.field.name_array_key] = addressData.name;
if (this.field.name_field_array_key){
name = {};
name[this.field.name_field_array_key] = addressData.name;
}

Nova.$emit(this.field.name + '-value', name)
Nova.$emit(this.field.latitude_field + '-value', addressData.latitude)
Nova.$emit(this.field.longitude_field + '-value', addressData.longitude)
Nova.$emit(this.field.postal_code + '-value', addressData.postal_code)
Nova.$emit(this.field.name_field + '-value', name);
Nova.$emit(this.field.latitude_field + '-value', addressData.latitude);
Nova.$emit(this.field.longitude_field + '-value', addressData.longitude);
Nova.$emit(this.field.postal_code + '-value', addressData.postal_code);

})
}
Expand All @@ -305,7 +350,9 @@ export default {
this.value = JSON.stringify(newAddressData)
this.mapOptions.center = new google.maps.LatLng(newAddressData.latitude, newAddressData.longitude)

if (!this.addressIsInitializing){
this.updateFields(newAddressData)
}
},
deep: true
}
Expand Down
13 changes: 10 additions & 3 deletions src/AddressField.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,11 +71,11 @@ public function postalCode($field)
]);
}

public function name($field, $inArrayKey=null)
public function nameField($field, $inArrayKey=null)
{
return $this->withMeta([
'name' => $field,
'name_array_key' => $inArrayKey,
'name_field' => $field,
'name_field_array_key' => $inArrayKey,
]);
}

Expand All @@ -98,13 +98,20 @@ public function countries($list){
'countries' => $list
]);
}


public function initLocation($latitude, $longitude){
return $this->withMeta([
'lat' => $latitude,
'lng' => $longitude,
]);
}

public function doNotStore(){
$this->fillUsing(function(){});
$this->withMeta(['do_not_store' => true]);
return $this;
}

public function zoom($zoom)
{
Expand Down