From 4aa6c4ed6415a27bc17ce66409630e37c3a5928c Mon Sep 17 00:00:00 2001 From: Josh Dassinger Date: Thu, 29 Aug 2024 14:02:02 -0500 Subject: [PATCH 1/5] SSR-776 Make Google Maps pins clickable --- src/iss-components/google-map/google-map.vue | 84 +++++++++++++++----- src/layouts/tpa-search/tpa-search.vue | 28 ++++--- 2 files changed, 81 insertions(+), 31 deletions(-) diff --git a/src/iss-components/google-map/google-map.vue b/src/iss-components/google-map/google-map.vue index 0c901dec..9372d6ae 100644 --- a/src/iss-components/google-map/google-map.vue +++ b/src/iss-components/google-map/google-map.vue @@ -8,13 +8,14 @@ export default { name: 'google-map', props: { - addresses: Array, + providers: Array, zipCode: String }, data() { return { country: 'USA', - geocoder: null + geocoder: null, + infoWindow: null }; }, computed: { @@ -23,12 +24,12 @@ export default { } }, watch: { - async addresses(newAddresses) { - this.createMapWithMarkersForAddresses(newAddresses); + async providers(newProviders) { + this.createMapWithMarkersForAddresses(newProviders); } }, beforeMount() { - this.createMapWithMarkersForAddresses(this.addresses); + this.createMapWithMarkersForAddresses(this.providers); }, methods: { async getMap(center) { @@ -50,20 +51,60 @@ export default { this.geocoder = new Geocoder(); } }, - async addMarkersToMap(map, positions) { - const { AdvancedMarkerElement } = await window.google.maps.importLibrary('marker'); - positions?.forEach((position) => new AdvancedMarkerElement({ map, position })); + async addMarkersToMap(map, providers) { + const { AdvancedMarkerElement, PinElement } = await window.google.maps.importLibrary('marker'); + providers?.forEach((provider, index) => { + const pin = new PinElement({ + glyph: String.fromCharCode('A'.charCodeAt(0) + index), + glyphColor: '#000000', + borderColor: '#000000' + }); + const marker = new AdvancedMarkerElement({ + map, + position: provider.position, + title: provider.companyName, + content: pin.element + }); + this.createMarkerInfoWindows(marker, provider); + }); }, - async getLocationsFromAddresses(addresses) { + createMarkerInfoWindows(marker, provider) { + const directionsUrl = this.createGetDirectionsUrl(provider); + const content = `
+ ${provider.companyName} +
${provider.addressLine1} +
${provider.addressLine2} +
Get directions +
`; + + const infoWindow = new window.google.maps.InfoWindow({ + content + }); + + marker.addListener('click', () => { + this.infoWindow?.close(); + this.infoWindow = infoWindow; + infoWindow.open(marker.map, marker); + }); + }, + createGetDirectionsUrl(provider) { + return `https://maps.google.com/maps?saddr=&daddr=${encodeURIComponent(provider.fullAddress)}`; + }, + async getLocationsFromAddresses(providers) { await this.setGeocoder(); - const geocodeShopAddressPromises = addresses?.map((address) => this.geocoder.geocode({ address })) ?? []; + const geocodeShopAddressPromises = providers?.map((provider) => this.geocoder.geocode({ address: provider.fullAddress })) ?? []; const geocodeShopAddressResults = await Promise.all(geocodeShopAddressPromises); - return geocodeShopAddressResults.map((result) => - (result?.results?.length > 0 - ? result.results[0].geometry?.location - : null)) - .filter((loc) => loc != null); + + return providers.map((provider, index) => { + const { results } = geocodeShopAddressResults[index]; + let position = null; + if (results && results.length > 0) { + position = results[0].geometry?.location; + } + + return { ...provider, position }; + }).filter((provider) => provider.position != null); }, async getBoundsFromAddress(address) { await this.setGeocoder(); @@ -72,16 +113,17 @@ export default { ? result.results[0].geometry?.bounds : null; }, - async createMapWithMarkersForAddresses(addresses) { - const shopPositions = await this.getLocationsFromAddresses(addresses); + async createMapWithMarkersForAddresses(providers) { + const providerPositions = await this.getLocationsFromAddresses(providers); const zipBounds = await this.getBoundsFromAddress(this.zipCodeAddress); - const map = await this.getMap(zipBounds?.getCenter()); + const map = await this.getMap(zipBounds.getCenter()); - await this.addMarkersToMap(map, shopPositions); + await this.addMarkersToMap(map, providerPositions); - const positionsToDisplay = shopPositions.concat(zipBounds?.getNorthEast(), zipBounds?.getSouthWest()); + const positionsToDisplay = providerPositions.map((provider) => provider.position) + .concat(zipBounds?.getNorthEast(), zipBounds?.getSouthWest()); const bounds = this.getBounds(positionsToDisplay); - map?.fitBounds(bounds); + map.fitBounds(bounds); } } }; diff --git a/src/layouts/tpa-search/tpa-search.vue b/src/layouts/tpa-search/tpa-search.vue index 4aab4f05..e384eec2 100644 --- a/src/layouts/tpa-search/tpa-search.vue +++ b/src/layouts/tpa-search/tpa-search.vue @@ -46,7 +46,7 @@
- this.getProviderAddress(provider)) ?? [] - ); + return this.providers?.map((provider) => ({ + ...provider, + fullAddress: this.getFullProviderAddress(provider), + addressLine1: this.getProviderAddress(provider), + addressLine2: this.getProviderCityZipState(provider) + })) ?? []; }, providerButtonData() { return ( @@ -350,7 +352,17 @@ export default { this.providers = providers; this.selectedProviderNumber = providerNumber; }, + getFullProviderAddress(provider) { + const addressLine1 = this.getProviderAddress(provider); + const addressLine2 = this.getProviderCityZipState(provider); + const joinString = + addressLine1.length > 0 && addressLine2.length > 0 ? ', ' : ''; + return [addressLine1, addressLine2].join(joinString); + }, getProviderAddress(provider) { + return toTitleCase(provider?.address?.streetAddress); + }, + getProviderCityZipState(provider) { const city = toTitleCase(provider?.address?.city); const state = provider?.address?.state ?? ''; const zipCode = provider?.address?.zipCode ?? ''; @@ -368,11 +380,7 @@ export default { if (zipCode) { addressLine2 += zipCode; } - - const addressLine1 = toTitleCase(provider?.address?.streetAddress); - const joinString = - addressLine1.length > 0 && addressLine2.length > 0 ? ', ' : ''; - return [addressLine1, addressLine2].join(joinString); + return addressLine2; }, async getProviderButtonData() { this.reloadingProviders = true; From 266ebc4e1ce5e81b7ca4cce6432ee6776471794f Mon Sep 17 00:00:00 2001 From: Josh Dassinger Date: Thu, 29 Aug 2024 15:37:03 -0500 Subject: [PATCH 2/5] SSR-776 Fix unit test --- .../__snapshots__/google-map.spec.js.snap | 1 + .../google-map/google-map.spec.js | 62 ++++++++++++++----- src/iss-components/google-map/google-map.vue | 18 +++--- 3 files changed, 55 insertions(+), 26 deletions(-) diff --git a/src/iss-components/google-map/__snapshots__/google-map.spec.js.snap b/src/iss-components/google-map/__snapshots__/google-map.spec.js.snap index 74a1d74d..87f5298e 100644 --- a/src/iss-components/google-map/__snapshots__/google-map.spec.js.snap +++ b/src/iss-components/google-map/__snapshots__/google-map.spec.js.snap @@ -20,5 +20,6 @@ Object { ], }, }, + "infoWindow": null, } `; diff --git a/src/iss-components/google-map/google-map.spec.js b/src/iss-components/google-map/google-map.spec.js index b26d36a2..3b4b9d37 100644 --- a/src/iss-components/google-map/google-map.spec.js +++ b/src/iss-components/google-map/google-map.spec.js @@ -21,12 +21,19 @@ const mockGeocoderInstance2 = { }; const mockGeocoder = jest.fn(() => (mockGeocoderInstance1)); -const mockAdvancedMarkerElement = jest.fn(); +const mockAdvancedMarkerInstance = { + addListener: jest.fn() +}; + +const mockAdvancedMarkerElement = jest.fn(() => (mockAdvancedMarkerInstance)); +const mockPinElement = jest.fn(); +const mockInfoWindow = jest.fn(); const mockImportLibrary = jest.fn().mockImplementation(() => (Promise.resolve({ Map: mockMap, Geocoder: mockGeocoder, - AdvancedMarkerElement: mockAdvancedMarkerElement + AdvancedMarkerElement: mockAdvancedMarkerElement, + PinElement: mockPinElement }))); const mockExtend = jest.fn(); @@ -36,7 +43,8 @@ const setupGoogleMock = () => { global.window.google = { maps: { importLibrary: mockImportLibrary, - LatLngBounds: jest.fn(() => (mockLatLngBound)) + LatLngBounds: jest.fn(() => (mockLatLngBound)), + InfoWindow: mockInfoWindow } }; }; @@ -46,6 +54,7 @@ beforeEach(() => { mockMap.mockClear(); mockGeocoder.mockClear(); mockAdvancedMarkerElement.mockClear(); + mockPinElement.mockClear(); // clear methods mockExtend.mockClear(); @@ -150,7 +159,13 @@ describe('Google Map', () => { const zipCode = '00882'; const [address1, address2, position1, position2] = ['a1', 'a2', 'p1', 'p2']; - const addresses = [address1, address2]; + const providers = [ + { + fullAddress: address1 + }, + { + fullAddress: address2 + }]; mockGeocode.mockImplementation((obj) => { let result = {}; if (obj.address.includes(zipCode)) { @@ -171,7 +186,7 @@ describe('Google Map', () => { return Promise.resolve(result); }); - const propsData = { addresses, zipCode }; + const propsData = { providers, zipCode }; const { wrapper } = getMountedComponent({}, {}, propsData); await awaitingSetupTicks(wrapper); @@ -198,8 +213,6 @@ describe('Google Map', () => { test('watch addresses creates map with expected markers', async () => { // Arrange const zipCode = '00882'; - const { wrapper } = getMountedComponent({}, { zipCode }); - await awaitingSetupTicks(wrapper); const mockGetCenter = jest.fn(); const mockNorthEast = jest.fn(); @@ -238,10 +251,18 @@ describe('Google Map', () => { } return Promise.resolve(result); }); - const newAddresses = [address1, address2]; + const providers = [ + { + fullAddress: address1 + }, + { + fullAddress: address2 + }]; // Act - await wrapper.vm.$options.watch.addresses.call(wrapper.vm, newAddresses); + const { wrapper } = getMountedComponent({}, { zipCode }); + await awaitingSetupTicks(wrapper); + await wrapper.vm.$options.watch.providers.call(wrapper.vm, providers); await awaitingSetupTicks(wrapper); // Assert @@ -260,9 +281,9 @@ describe('Google Map', () => { expect(mockExtend).toBeCalledTimes(6); expect(mockFitBounds).toBeCalledTimes(2); - expect(mockGetCenter).toBeCalledTimes(1); - expect(mockNorthEast).toBeCalledTimes(1); - expect(mockSouthWest).toBeCalledTimes(1); + expect(mockGetCenter).toBeCalledTimes(2); + expect(mockNorthEast).toBeCalledTimes(2); + expect(mockSouthWest).toBeCalledTimes(2); }); describe('method', () => { test('getMap calls map constructor with expected parameters', async () => { @@ -295,6 +316,15 @@ describe('Google Map', () => { await awaitingSetupTicks(wrapper); const numberOfExtendCallsDuringMount = 2; + mockGeocode.mockImplementation((obj) => { + const result = { + results: [ + { geometry: { location: 'p1' } } + ] + }; + return Promise.resolve(result); + }); + // Act const result = wrapper.vm.getBounds(locations); @@ -362,7 +392,7 @@ describe('Google Map', () => { expect(mockGeocode).toHaveBeenCalledTimes(numberOfCallsFromMount); // Act - await wrapper.vm.getLocationsFromAddresses(addresses); + await wrapper.vm.getLocationsFromAddresses(addresses?.map((a) => ({fullAddress: a}))); await wrapper.vm.$nextTick(); // Assert @@ -374,7 +404,7 @@ describe('Google Map', () => { // Arrange const wrapper = shallowMount(googleMap, {}); await awaitingSetupTicks(wrapper); - const addresses = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6', 'a7', 'a8']; + const addresses = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6', 'a7', 'a8'].map((a) => ({fullAddress: a})); mockGeocode.mockImplementationOnce(() => null) .mockImplementationOnce(() => ({ results: null })) .mockImplementationOnce(() => ({ results: [] })) @@ -402,7 +432,7 @@ describe('Google Map', () => { const expectedResult = ['some value', 'some other value']; // Act - const result = await wrapper.vm.getLocationsFromAddresses(addresses); + const result = (await wrapper.vm.getLocationsFromAddresses(addresses)).map(a => a.position); // Assert expect(result.length).toBe(2); @@ -477,7 +507,7 @@ describe('Google Map', () => { Promise.resolve(obj.address.includes(zipCode) ? zipCodeGeocodeResult : shopGeocodeResult)); - const addresses = ['a1', 'a2']; + const addresses = [{fullAddress:'a1'}, {fullAddress:'a2'}]; const { wrapper } = getMountedComponent({}, { zipCode }); await awaitingSetupTicks(wrapper); diff --git a/src/iss-components/google-map/google-map.vue b/src/iss-components/google-map/google-map.vue index 9372d6ae..1cf5840f 100644 --- a/src/iss-components/google-map/google-map.vue +++ b/src/iss-components/google-map/google-map.vue @@ -25,11 +25,11 @@ export default { }, watch: { async providers(newProviders) { - this.createMapWithMarkersForAddresses(newProviders); + await this.createMapWithMarkersForAddresses(newProviders); } }, - beforeMount() { - this.createMapWithMarkersForAddresses(this.providers); + async beforeMount() { + await this.createMapWithMarkersForAddresses(this.providers); }, methods: { async getMap(center) { @@ -77,9 +77,7 @@ export default {
Get directions `; - const infoWindow = new window.google.maps.InfoWindow({ - content - }); + const infoWindow = new window.google.maps.InfoWindow({ content }); marker.addListener('click', () => { this.infoWindow?.close(); @@ -96,15 +94,15 @@ export default { const geocodeShopAddressPromises = providers?.map((provider) => this.geocoder.geocode({ address: provider.fullAddress })) ?? []; const geocodeShopAddressResults = await Promise.all(geocodeShopAddressPromises); - return providers.map((provider, index) => { - const { results } = geocodeShopAddressResults[index]; + return providers?.map((provider, index) => { + const results = geocodeShopAddressResults[index]?.results; let position = null; if (results && results.length > 0) { position = results[0].geometry?.location; } return { ...provider, position }; - }).filter((provider) => provider.position != null); + }).filter((provider) => provider.position != null) ?? []; }, async getBoundsFromAddress(address) { await this.setGeocoder(); @@ -116,7 +114,7 @@ export default { async createMapWithMarkersForAddresses(providers) { const providerPositions = await this.getLocationsFromAddresses(providers); const zipBounds = await this.getBoundsFromAddress(this.zipCodeAddress); - const map = await this.getMap(zipBounds.getCenter()); + const map = await this.getMap(zipBounds?.getCenter()); await this.addMarkersToMap(map, providerPositions); From 20774378ec59f015752c66a88cb9c212bb36d671 Mon Sep 17 00:00:00 2001 From: Josh Dassinger Date: Thu, 29 Aug 2024 15:39:59 -0500 Subject: [PATCH 3/5] SSR-776 Missed spec File --- src/layouts/tpa-search/tpa-search.spec.js | 58 ++++++++++++++++++++++- src/layouts/tpa-search/tpa-search.vue | 2 +- 2 files changed, 57 insertions(+), 3 deletions(-) diff --git a/src/layouts/tpa-search/tpa-search.spec.js b/src/layouts/tpa-search/tpa-search.spec.js index 5687b9ca..1e1b1945 100644 --- a/src/layouts/tpa-search/tpa-search.spec.js +++ b/src/layouts/tpa-search/tpa-search.spec.js @@ -177,7 +177,7 @@ describe('TPA search page', () => { // Assert expect(map.exists()).toBeTruthy(); expect(map.classes()).toContain('mb-4'); - expect(map.props().addresses).toEqual(expectedAddresses); + expect(map.props().providers.map(p => p.fullAddress)).toEqual(expectedAddresses); expect(map.props().zipCode).toBe(zipCode); }); test('search radius filter', async () => { @@ -582,7 +582,7 @@ describe('TPA search page', () => { ]; // Act - const result = wrapper.vm.providerAddresses; + const result = wrapper.vm.providerAddresses.map(pa => pa.fullAddress); // Assert expect(result).toEqual(expectedResult); @@ -1015,6 +1015,33 @@ describe('TPA search page', () => { ['address', 'city', null, 'zip', 'Address, City zip'], ['address', 'city', 'ST', null, 'Address, City, ST'], [null, null, null, null, ''] + ])( + 'getFullProviderAddress returns expected', + (streetAddress, city, state, zipCode, expected) => { + // Arrange + const { wrapper } = getMountedComponent(); + const provider = { + address: { + streetAddress, + city, + state, + zipCode + } + }; + + // Act + const result = wrapper.vm.getFullProviderAddress(provider); + + // Assert + expect(result).toEqual(expected); + } + ); + test.each([ + ['address', 'city', 'ST', 'zip', 'Address'], + ['address', null, 'ST', 'zip', 'Address'], + ['address', 'city', null, 'zip', 'Address'], + ['address', 'city', 'ST', null, 'Address'], + [null, null, null, null, ''] ])( 'getProviderAddress returns expected', (streetAddress, city, state, zipCode, expected) => { @@ -1036,6 +1063,33 @@ describe('TPA search page', () => { expect(result).toEqual(expected); } ); + test.each([ + ['address', 'city', 'ST', 'zip', 'City, ST zip'], + ['address', null, 'ST', 'zip', 'ST zip'], + ['address', 'city', null, 'zip', 'City zip'], + ['address', 'city', 'ST', null, 'City, ST'], + [null, null, null, null, ''] + ])( + 'getProviderCityZipState returns expected', + (streetAddress, city, state, zipCode, expected) => { + // Arrange + const { wrapper } = getMountedComponent(); + const provider = { + address: { + streetAddress, + city, + state, + zipCode + } + }; + + // Act + const result = wrapper.vm.getProviderCityZipState(provider); + + // Assert + expect(result).toEqual(expected); + } + ); describe('getProviderButtonData', () => { test.each([null, undefined, {}])( 'returns empty list when getTpaProviders returns no data', diff --git a/src/layouts/tpa-search/tpa-search.vue b/src/layouts/tpa-search/tpa-search.vue index e384eec2..c5b9e22c 100644 --- a/src/layouts/tpa-search/tpa-search.vue +++ b/src/layouts/tpa-search/tpa-search.vue @@ -431,7 +431,7 @@ export default { return { buttonLabel: provider?.companyName ?? '', buttonLabelSubCopy: distance === null ? '' : `${distance} mi`, - buttonBodyCopy: `${this.getProviderAddress(provider)}
${ + buttonBodyCopy: `${this.getFullProviderAddress(provider)}
${ cellNumber ?? '' }`, value: provider?.providerNumber ?? '' From 6933a7ade7f25263b4f40e0602e7741ed22e616c Mon Sep 17 00:00:00 2001 From: Josh Dassinger Date: Fri, 30 Aug 2024 08:05:30 -0500 Subject: [PATCH 4/5] SSR-776 Linting and Map Pins zIndex --- src/iss-components/google-map/google-map.spec.js | 13 ++++++------- src/iss-components/google-map/google-map.vue | 3 ++- src/layouts/tpa-search/tpa-search.spec.js | 4 ++-- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/iss-components/google-map/google-map.spec.js b/src/iss-components/google-map/google-map.spec.js index 3b4b9d37..631cfe71 100644 --- a/src/iss-components/google-map/google-map.spec.js +++ b/src/iss-components/google-map/google-map.spec.js @@ -316,7 +316,7 @@ describe('Google Map', () => { await awaitingSetupTicks(wrapper); const numberOfExtendCallsDuringMount = 2; - mockGeocode.mockImplementation((obj) => { + mockGeocode.mockImplementation(() => { const result = { results: [ { geometry: { location: 'p1' } } @@ -329,8 +329,7 @@ describe('Google Map', () => { const result = wrapper.vm.getBounds(locations); // Assert - expect(mockExtend).toHaveBeenCalledTimes( - numberOfExtendCallsDuringMount + numberOfExtendCallsPostMount); + expect(mockExtend).toHaveBeenCalledTimes(numberOfExtendCallsDuringMount + numberOfExtendCallsPostMount); expect(result).toBe(mockLatLngBound); } ); @@ -392,7 +391,7 @@ describe('Google Map', () => { expect(mockGeocode).toHaveBeenCalledTimes(numberOfCallsFromMount); // Act - await wrapper.vm.getLocationsFromAddresses(addresses?.map((a) => ({fullAddress: a}))); + await wrapper.vm.getLocationsFromAddresses(addresses?.map((a) => ({ fullAddress: a }))); await wrapper.vm.$nextTick(); // Assert @@ -404,7 +403,7 @@ describe('Google Map', () => { // Arrange const wrapper = shallowMount(googleMap, {}); await awaitingSetupTicks(wrapper); - const addresses = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6', 'a7', 'a8'].map((a) => ({fullAddress: a})); + const addresses = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6', 'a7', 'a8'].map((a) => ({ fullAddress: a })); mockGeocode.mockImplementationOnce(() => null) .mockImplementationOnce(() => ({ results: null })) .mockImplementationOnce(() => ({ results: [] })) @@ -432,7 +431,7 @@ describe('Google Map', () => { const expectedResult = ['some value', 'some other value']; // Act - const result = (await wrapper.vm.getLocationsFromAddresses(addresses)).map(a => a.position); + const result = (await wrapper.vm.getLocationsFromAddresses(addresses)).map((a) => a.position); // Assert expect(result.length).toBe(2); @@ -507,7 +506,7 @@ describe('Google Map', () => { Promise.resolve(obj.address.includes(zipCode) ? zipCodeGeocodeResult : shopGeocodeResult)); - const addresses = [{fullAddress:'a1'}, {fullAddress:'a2'}]; + const addresses = [{ fullAddress: 'a1' }, { fullAddress: 'a2' }]; const { wrapper } = getMountedComponent({}, { zipCode }); await awaitingSetupTicks(wrapper); diff --git a/src/iss-components/google-map/google-map.vue b/src/iss-components/google-map/google-map.vue index 1cf5840f..b3f1a7f5 100644 --- a/src/iss-components/google-map/google-map.vue +++ b/src/iss-components/google-map/google-map.vue @@ -63,7 +63,8 @@ export default { map, position: provider.position, title: provider.companyName, - content: pin.element + content: pin.element, + zIndex: 1000 - index }); this.createMarkerInfoWindows(marker, provider); }); diff --git a/src/layouts/tpa-search/tpa-search.spec.js b/src/layouts/tpa-search/tpa-search.spec.js index 1e1b1945..e74394cf 100644 --- a/src/layouts/tpa-search/tpa-search.spec.js +++ b/src/layouts/tpa-search/tpa-search.spec.js @@ -177,7 +177,7 @@ describe('TPA search page', () => { // Assert expect(map.exists()).toBeTruthy(); expect(map.classes()).toContain('mb-4'); - expect(map.props().providers.map(p => p.fullAddress)).toEqual(expectedAddresses); + expect(map.props().providers.map((p) => p.fullAddress)).toEqual(expectedAddresses); expect(map.props().zipCode).toBe(zipCode); }); test('search radius filter', async () => { @@ -582,7 +582,7 @@ describe('TPA search page', () => { ]; // Act - const result = wrapper.vm.providerAddresses.map(pa => pa.fullAddress); + const result = wrapper.vm.providerAddresses.map((pa) => pa.fullAddress); // Assert expect(result).toEqual(expectedResult); From 563d9f18ab83eb8b75f94391717ca9e5ac1f0643 Mon Sep 17 00:00:00 2001 From: Josh Dassinger Date: Fri, 30 Aug 2024 11:36:05 -0500 Subject: [PATCH 5/5] SSR-776 PR Feedback Make Google Maps component more generic --- .../google-map/google-map.spec.js | 8 +-- src/iss-components/google-map/google-map.vue | 59 +++++++++---------- src/layouts/tpa-search/tpa-search.spec.js | 2 +- src/layouts/tpa-search/tpa-search.vue | 7 +-- 4 files changed, 37 insertions(+), 39 deletions(-) diff --git a/src/iss-components/google-map/google-map.spec.js b/src/iss-components/google-map/google-map.spec.js index 631cfe71..331c78e1 100644 --- a/src/iss-components/google-map/google-map.spec.js +++ b/src/iss-components/google-map/google-map.spec.js @@ -159,7 +159,7 @@ describe('Google Map', () => { const zipCode = '00882'; const [address1, address2, position1, position2] = ['a1', 'a2', 'p1', 'p2']; - const providers = [ + const markers = [ { fullAddress: address1 }, @@ -186,7 +186,7 @@ describe('Google Map', () => { return Promise.resolve(result); }); - const propsData = { providers, zipCode }; + const propsData = { markers, zipCode }; const { wrapper } = getMountedComponent({}, {}, propsData); await awaitingSetupTicks(wrapper); @@ -251,7 +251,7 @@ describe('Google Map', () => { } return Promise.resolve(result); }); - const providers = [ + const markers = [ { fullAddress: address1 }, @@ -262,7 +262,7 @@ describe('Google Map', () => { // Act const { wrapper } = getMountedComponent({}, { zipCode }); await awaitingSetupTicks(wrapper); - await wrapper.vm.$options.watch.providers.call(wrapper.vm, providers); + await wrapper.vm.$options.watch.markers.call(wrapper.vm, markers); await awaitingSetupTicks(wrapper); // Assert diff --git a/src/iss-components/google-map/google-map.vue b/src/iss-components/google-map/google-map.vue index b3f1a7f5..b3de8c7d 100644 --- a/src/iss-components/google-map/google-map.vue +++ b/src/iss-components/google-map/google-map.vue @@ -8,7 +8,7 @@ export default { name: 'google-map', props: { - providers: Array, + markers: Array, zipCode: String }, data() { @@ -24,12 +24,12 @@ export default { } }, watch: { - async providers(newProviders) { - await this.createMapWithMarkersForAddresses(newProviders); + async markers(newMarkers) { + await this.createMapWithMarkersForAddresses(newMarkers); } }, async beforeMount() { - await this.createMapWithMarkersForAddresses(this.providers); + await this.createMapWithMarkersForAddresses(this.markers); }, methods: { async getMap(center) { @@ -51,59 +51,58 @@ export default { this.geocoder = new Geocoder(); } }, - async addMarkersToMap(map, providers) { + async addMarkersToMap(map, markers) { const { AdvancedMarkerElement, PinElement } = await window.google.maps.importLibrary('marker'); - providers?.forEach((provider, index) => { - const pin = new PinElement({ + markers?.forEach((marker, index) => { + const pinElement = new PinElement({ glyph: String.fromCharCode('A'.charCodeAt(0) + index), glyphColor: '#000000', borderColor: '#000000' }); - const marker = new AdvancedMarkerElement({ + const markerElement = new AdvancedMarkerElement({ map, - position: provider.position, - title: provider.companyName, - content: pin.element, + position: marker.position, + title: marker.title, + content: pinElement.element, zIndex: 1000 - index }); - this.createMarkerInfoWindows(marker, provider); + this.createMarkerInfoWindows(markerElement, marker); }); }, - createMarkerInfoWindows(marker, provider) { - const directionsUrl = this.createGetDirectionsUrl(provider); + createMarkerInfoWindows(markerElement, marker) { + const directionsUrl = this.createGetDirectionsUrl(marker); const content = `
- ${provider.companyName} -
${provider.addressLine1} -
${provider.addressLine2} + ${marker.title} + ${marker.addressLines?.map((address) => `
${address} `).join()}
Get directions
`; const infoWindow = new window.google.maps.InfoWindow({ content }); - marker.addListener('click', () => { + markerElement.addListener('click', () => { this.infoWindow?.close(); this.infoWindow = infoWindow; - infoWindow.open(marker.map, marker); + infoWindow.open(markerElement.map, markerElement); }); }, - createGetDirectionsUrl(provider) { - return `https://maps.google.com/maps?saddr=&daddr=${encodeURIComponent(provider.fullAddress)}`; + createGetDirectionsUrl(marker) { + return `https://maps.google.com/maps?saddr=&daddr=${encodeURIComponent(marker.fullAddress)}`; }, - async getLocationsFromAddresses(providers) { + async getLocationsFromAddresses(markers) { await this.setGeocoder(); - const geocodeShopAddressPromises = providers?.map((provider) => this.geocoder.geocode({ address: provider.fullAddress })) ?? []; + const geocodeShopAddressPromises = markers?.map((marker) => this.geocoder.geocode({ address: marker.fullAddress })) ?? []; const geocodeShopAddressResults = await Promise.all(geocodeShopAddressPromises); - return providers?.map((provider, index) => { + return markers?.map((marker, index) => { const results = geocodeShopAddressResults[index]?.results; let position = null; if (results && results.length > 0) { position = results[0].geometry?.location; } - return { ...provider, position }; - }).filter((provider) => provider.position != null) ?? []; + return { ...marker, position }; + }).filter((marker) => marker.position != null) ?? []; }, async getBoundsFromAddress(address) { await this.setGeocoder(); @@ -112,14 +111,14 @@ export default { ? result.results[0].geometry?.bounds : null; }, - async createMapWithMarkersForAddresses(providers) { - const providerPositions = await this.getLocationsFromAddresses(providers); + async createMapWithMarkersForAddresses(markers) { + const markerPositions = await this.getLocationsFromAddresses(markers); const zipBounds = await this.getBoundsFromAddress(this.zipCodeAddress); const map = await this.getMap(zipBounds?.getCenter()); - await this.addMarkersToMap(map, providerPositions); + await this.addMarkersToMap(map, markerPositions); - const positionsToDisplay = providerPositions.map((provider) => provider.position) + const positionsToDisplay = markerPositions.map((marker) => marker.position) .concat(zipBounds?.getNorthEast(), zipBounds?.getSouthWest()); const bounds = this.getBounds(positionsToDisplay); map.fitBounds(bounds); diff --git a/src/layouts/tpa-search/tpa-search.spec.js b/src/layouts/tpa-search/tpa-search.spec.js index e74394cf..393938b8 100644 --- a/src/layouts/tpa-search/tpa-search.spec.js +++ b/src/layouts/tpa-search/tpa-search.spec.js @@ -177,7 +177,7 @@ describe('TPA search page', () => { // Assert expect(map.exists()).toBeTruthy(); expect(map.classes()).toContain('mb-4'); - expect(map.props().providers.map((p) => p.fullAddress)).toEqual(expectedAddresses); + expect(map.props().markers.map((p) => p.fullAddress)).toEqual(expectedAddresses); expect(map.props().zipCode).toBe(zipCode); }); test('search radius filter', async () => { diff --git a/src/layouts/tpa-search/tpa-search.vue b/src/layouts/tpa-search/tpa-search.vue index c5b9e22c..de33f4bb 100644 --- a/src/layouts/tpa-search/tpa-search.vue +++ b/src/layouts/tpa-search/tpa-search.vue @@ -46,7 +46,7 @@ ({ - ...provider, + title: provider.companyName, fullAddress: this.getFullProviderAddress(provider), - addressLine1: this.getProviderAddress(provider), - addressLine2: this.getProviderCityZipState(provider) + addressLines: [this.getProviderAddress(provider), this.getProviderCityZipState(provider)] })) ?? []; }, providerButtonData() {