Skip to content

Commit

Permalink
Merge branch 'maps-integreation' into feature/maps-search-bar
Browse files Browse the repository at this point in the history
  • Loading branch information
jeffdowdle committed Dec 6, 2023
2 parents 2120448 + 18bd3a3 commit 1a933da
Show file tree
Hide file tree
Showing 34 changed files with 1,147 additions and 194 deletions.
21 changes: 15 additions & 6 deletions examples/nuxt-app/app.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -46,16 +46,25 @@ export default defineAppConfig({
},
mapPinStyleFn: {
vsbaPinIcons: (feature) => {
const projectType = feature ? feature['field_mappintype_name'][0] : ''
const projectType =
feature && feature['field_mappintype_name']
? feature['field_mappintype_name'][0]
: ''
switch (projectType) {
case 'Early childhood':
return '#7c1792'
case 'New school':
return '#8A2A2B'
case 'School upgrade':
return '#df4809'
case 'New school':
return '#ff941a'
case 'Planning project':
return '#FF9E1B'
case 'Early childhood':
return '#87189D'
case 'Tech school':
return '#00B2A9'
case 'Non-government grant':
return '#71C5E8'
default:
return '#a13434'
return '#333333'
}
}
},
Expand Down
56 changes: 33 additions & 23 deletions examples/nuxt-app/components/global/VSBAMapPopupContent.vue
Original file line number Diff line number Diff line change
@@ -1,42 +1,52 @@
<template>
<div class="vsba-map-popup-content" v-if="!hasMultiple">
<p class="rpl-type-p-small">
{{ selectedFeature[0].field_about_project_processed[0] }}
</p>
<RplTextLink
class="rpl-type-p-small rpl-u-margin-t-4"
:url="formatUrl(selectedFeature[0].url[0])"
<div class="vsba-map-popup-content">
<h4 class="rpl-type-p-small">What's happening?</h4>

<p
v-if="feature.field_project_title?.length === 1"
class="rpl-type-p-small"
>
View page
</RplTextLink>
{{ feature.title[0] }}
</p>
<RplContent v-else class="vsba-map-popup-list">
<ul>
<li v-for="project in feature.field_project_title" :key="project">
{{ project }}
</li>
</ul>
</RplContent>
<p class="rpl-type-p-small rpl-u-margin-t-3">
<RplTextLink :url="formatUrl(feature.url[0])">
View {{ feature.title[0] }}
</RplTextLink>
</p>
</div>
</template>
<script setup lang="ts">
interface Props {
selectedFeature: any
feature: any
}
const props = withDefaults(defineProps<Props>(), {})
const hasMultiple = computed(() => {
return (
Array.isArray(props.selectedFeature) && props.selectedFeature.length > 1
)
})
const formatUrl = (str) => str.replace(/\/site-(\d+)/, '')
const url = computed(() => {
if (!hasMultiple && props.selectedFeature[0].url) {
return props.selectedFeature[0].url[0].replace(/\/site-(\d+)/, '')
}
return false
})
</script>
<style>
.vsba-map-popup-content {
display: flex;
flex-direction: column;
padding: var(--rpl-sp-4);
}
.vsba-map-popup-list ul {
font-size: var(--rpl-type-size-1);
line-height: var(--rpl-type-lh-3);
letter-spacing: var(--rpl-type-ls-1);
}
.vsba-map-popup-list ul li:before {
top: 0.6rem;
}
</style>
61 changes: 43 additions & 18 deletions examples/nuxt-app/components/global/VSBAProjectAreaLayer.vue
Original file line number Diff line number Diff line change
Expand Up @@ -27,10 +27,15 @@ const props = withDefaults(defineProps<Props>(), {
areaDataKey: 'field_postcode'
})
const areas = computed(() => {
const matches = props.results.filter((itm) => {
return !itm.lat && itm[props.areaDataKey]
})
return matches
})
const mappedAreas = computed(() => {
return props.results
.filter((itm) => !itm.lat && itm[props.areaDataKey])
.map((area) => `'${area[props.areaDataKey]}'`)
return areas.value.map((area) => `'${area[props.areaDataKey]}'`)
})
const shapeFormat = new GeoJSON()
Expand All @@ -49,16 +54,16 @@ const defaultStyleFn = new Style({
}),
stroke: new Stroke({
color: props.lineColor,
width: 1
width: 2
})
})
const mouseOverStyleFn = new Style({
fill: new Fill({
color: [26, 26, 26, 0.3]
color: [26, 26, 26, 0.15]
}),
stroke: new Stroke({
color: props.lineColor,
width: 1
width: 2
})
})
Expand Down Expand Up @@ -97,21 +102,41 @@ onMounted(async () => {
}
map.on('singleclick', function (evt) {
const clickedFeatures = []
// We need to keep track of features that are clicked outside of the shape layer, so that pins can take priority over the shape
const outOfLayerClickedFeatures = []
// Get the features at the click position
const feature = map.forEachFeatureAtPixel(evt.pixel, layerFilter, {
hitTolerance: 5
})
if (feature) {
const matchingResult = props.results.find((itm) => {
return itm.field_postcode[0] === feature?.get('postcode')
})
map.forEachFeatureAtPixel(
evt.pixel,
(f, layer) => {
if (layer.get('title') === layerIdentifier) {
clickedFeatures.push(f)
} else {
outOfLayerClickedFeatures.push(f)
}
},
{
hitTolerance: 5
}
)
popup.value.isArea = true
popup.value.feature = [matchingResult]
popup.value.isOpen = true
popup.value.position = feature.getGeometry().flatCoordinates
centerOnPopup(map, popup)
if (outOfLayerClickedFeatures.length || !clickedFeatures.length) {
return
}
const feature = clickedFeatures[0]
const matchingResult = areas.value.filter((itm) => {
return itm.field_postcode[0] === feature?.get('postcode')
})
popup.value.isArea = true
popup.value.feature = Array.isArray(matchingResult)
? matchingResult
: [matchingResult]
popup.value.isOpen = true
popup.value.position = evt.coordinate
centerOnPopup(map, popup)
})
// Add a pointermove event listener to the map to detect shape hover
map.on('pointermove', function (evt) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,11 @@ Feature: Custom Collection
And the search autocomplete request is stubbed with "/search-listing/suggestions/none" fixture
Given I am using a "macbook-16" device

@mockserver
@mockserver @focus
Scenario: Custom collection
Given the "/api/tide/elasticsearch/sdp_data_pipelines_scl/_search" network request is stubbed with fixture "/landingpage/custom-collection/response" and status 200 as alias "cslReq"
Given I visit the page "/custom-collection"
Then the landing page component "TideCustomCollection" should exist
Then the landing page component "TideDataDrivenMap" should exist
And the custom collection component should have a search input bar
And the custom collection component results count should read "Displaying 1-10 of 282 results"
And the "cslReq" network request should be made to the elasticsearch endpoint
Expand All @@ -22,15 +22,15 @@ Feature: Custom Collection
Scenario: Error
Given the "/api/tide/elasticsearch/sdp_data_pipelines_scl/_search" network request is stubbed with fixture "/landingpage/custom-collection/response" and status 400 as alias "cslReq"
Given I visit the page "/custom-collection"
Then the landing page component "TideCustomCollection" should exist
Then the landing page component "TideDataDrivenMap" should exist
And the custom collection component should display the error "Sorry! Something went wrong. Please try again later."

@mockserver
Scenario: No results
Given the "/api/tide/elasticsearch/sdp_data_pipelines_scl/_search" network request is stubbed with fixture "/landingpage/custom-collection/response-no-items" and status 200 as alias "cslReq"
Given I visit the page "/custom-collection"
Then the landing page component "TideCustomCollection" should exist
And the custom collection component should display the error "Sorry! We couldn't find any matches for ''."
Then the landing page component "TideDataDrivenMap" should exist
And the custom collection component should display the error "Sorry! We couldn't find any matches."



21 changes: 21 additions & 0 deletions examples/nuxt-app/test/features/data-table/table-filters.feature
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
Feature: Custom Collection

As an editor I want to be able to add a view of results in a search index to a landing page with filters

Background:
Given the page endpoint for path "/" returns fixture "/map-table/ise/page" with status 200
Given the site endpoint returns fixture "/site/reference" with status 200
And the search autocomplete request is stubbed with "/search-listing/suggestions/none" fixture
Given I am using a "macbook-16" device

@mockserver
Scenario: On load
Given the "/api/tide/elasticsearch/sdp_data_pipelines_ise/_search" network request is stubbed with fixture "/map-table/ise/response" and status 200 as alias "cslReq"
Given the "/api/tide/elasticsearch/sdp_data_pipelines_ise/_search" aggregation request is stubbed with fixture "/map-table/ise/aggregations" and status 200 as alias "aggReq"
Given I visit the page "/"
Then the landing page component "TideDataDrivenMap" should exist
And the custom collection component should have a search input bar
And the custom collection component results count should read "Displaying 1-10 of 8269 results"
And the "cslReq" network request should be made to the elasticsearch endpoint
And the "aggReq" network request should be made to the elasticsearch endpoint
And the search listing layout should be "table"
33 changes: 26 additions & 7 deletions examples/nuxt-app/test/features/maps/vsba.feature
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,32 @@ Feature: School buildings map
Given the site endpoint returns fixture "/site/vsba" with status 200
And the search autocomplete request is stubbed with "/search-listing/suggestions/none" fixture
Given I am using a "macbook-16" device
Given the "/api/tide/elasticsearch/elasticsearch_index_develop_node/_search" network request is stubbed with fixture "/landingpage/maps/vsba/response" and status 200 as alias "searchReq"
Given the "/api/tide/elasticsearch/elasticsearch_index_develop_node/_search" aggregation request is stubbed with fixture "/landingpage/maps/vsba/aggregations" and status 200 as alias "aggReq"
Given the "/api/tide/app-search/vic-postcode-localities/_search" network request is stubbed with fixture "/landingpage/maps/vsba/localities" and status 200 as alias "localitiesReq"
Given I visit the page "/map"

@mockserver
Scenario: On load
Given the "/api/tide/elasticsearch/elasticsearch_index_develop_node/_search" network request is stubbed with fixture "/landingpage/maps/vsba/response" and status 200 as alias "searchReq"
Given I visit the page "/map"
Then the landing page component "TideCustomCollection" should exist
And the custom collection component should have a search input bar
And the custom collection component results count should read "Displaying 1-10 of 2105 results"
And the "searchReq" network request should be made to the elasticsearch endpoint
And the search listing layout should be "table"
Then the landing page component "TideDataDrivenMap" should exist
Then the custom collection component should have a search input bar
And the ripple map component should be visible
And the data map component tabs should exist
And the data map tabs should be labelled:
| Map |
| List |

@mockserver @focus
Scenario: Search for postcode
Then the ripple map component should be visible
When I enter the term "3012" into the location search input
Then the location search results should contain "West Footscray"
When I click the location search term "West Footscray"


@mockserver
Scenario: Switch to list view
When I click the tab labelled "List"
Then the search listing layout should be "table"
And the custom collection component results count should read "Displaying 1-5 of 2106 results"

Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@
},
{
"uuid": "55555555-5555-5555-5555-555555555555",
"component": "TideCustomCollection",
"component": "TideDataDrivenMap",
"id": "123",
"title": "Cameras save lives",
"props": {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -155,7 +155,7 @@
"camera_type": "Fixed Camera",
"certificate": "https://content.vic.gov.au/sites/default/files/2023-04/A56_Surrey_Hills_intersection-of-mont-albert-road-and-union-road_camera_cert_310323.pdf",
"site_type": "Intersection",
"reason": "Demonstrated accident risk",
"reason": "Someone complained",
"how_cameras_work": "https://www.vic.gov.au/camera-accuracy",
"latitude": "-37.8204019",
"longitude": "145.0981877",
Expand All @@ -180,7 +180,7 @@
"camera_type": "Fixed Camera",
"certificate": "https://content.vic.gov.au/sites/default/files/2023-05/A59_Echuca-intersection-of-Ogilvie-Ave-and-High-St-camera-cert_090523.pdf",
"site_type": "Intersection",
"reason": "Demonstrated accident risk",
"reason": "Someone complained",
"how_cameras_work": "https://www.vic.gov.au/camera-accuracy",
"latitude": "-36.140432",
"longitude": "144.750963",
Expand Down Expand Up @@ -255,7 +255,7 @@
"camera_type": "Fixed Camera",
"certificate": "https://content.vic.gov.au/sites/default/files/2023-03/B12_Bayswater_North_intersection-of-canterbury-road-and-bayswater-road_camera_cert.pdf",
"site_type": "Intersection",
"reason": "Demonstrated accident risk",
"reason": "Marginal seat",
"how_cameras_work": "https://www.vic.gov.au/camera-accuracy",
"latitude": "-37.832238",
"longitude": "145.269109",
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
{
"took": 1,
"timed_out": false,
"_shards": {
"total": 5,
"successful": 5,
"skipped": 0,
"failed": 0
},
"hits": {
"total": {
"value": 2129,
"relation": "eq"
},
"max_score": null,
"hits": []
},
"aggregations": {
"category": {
"doc_count_error_upper_bound": 0,
"sum_other_doc_count": 0,
"buckets": [
{
"key": "Early childhood",
"doc_count": 274
},
{
"key": "New school",
"doc_count": 87
},
{
"key": "Non-government grant",
"doc_count": 198
},
{
"key": "Planning",
"doc_count": 13
},
{
"key": "School upgrade",
"doc_count": 991
},
{
"key": "Tech school",
"doc_count": 10
}
]
}
}
}
Loading

0 comments on commit 1a933da

Please sign in to comment.