@@ -64,6 +77,7 @@ import MapTrigger from '../map/MapTrigger.vue'
import MapSearch from '../map/MapSearch.vue'
import SearchAreasInputAutocomplete from '../search/SearchAreasInputAutocomplete.vue'
import SearchAreasResults from '../search/SearchAreasResults.vue'
+import TabsFake from '../tabs/TabsFake.vue'
export default {
name: 'search-areas',
@@ -75,15 +89,16 @@ export default {
MapTrigger,
MapSearch,
SearchAreasInputAutocomplete,
- SearchAreasResults
+ SearchAreasResults,
+ TabsFake
},
mixins: [ mixinAxiosHelpers ],
props: {
- autocompleteAreaTypes: {
- type: Array, // [ { name: String, options: [ { id: Number, name: String } ] } ]
- required: true
+ configAutocomplete: {
+ required: true,
+ type: Object // { id: String, placeholder: String }
},
endpointAutocomplete: {
type: String,
@@ -109,9 +124,6 @@ export default {
type: Number,
default: 9
},
- query: {
- type: String
- },
noResultsText: {
required: true,
type: String
@@ -120,6 +132,10 @@ export default {
required: true,
type: String
},
+ tabs: {
+ required: true,
+ type: Array // [{ id: String, title: String }]
+ },
textDownload: {
type: String,
required: true
@@ -131,137 +147,240 @@ export default {
textMap: {
type: String,
required: true
+ },
+ results: {
+ type: Object,
+ required: true
}
},
data () {
return {
+ config: {
+ queryStringParams: ['search_term', 'geo_type'],
+ queryStringParamsFilters: ['db_type', 'is_type', 'special_status', 'designation', 'governance', 'iucn_category']
+ },
activeFilterOptions: [],
- areaType: '',
- currentPage: 0,
- defaultPage: 1,
+ filterGroupsWithPreSelected: [],
isFilterPaneActive: false,
+ isFilterPaneDisabled: false,
isMapPaneActive: false,
- pageItemsStart: 0,
- pageItemsEnd: 0,
- requestedPage: 0,
- results: [], // { geo_type: String, title: String, total: Number, areas: [{ areas: String, country: String, image: String, region: String, title: String, url: String }] }]
+ isMapPaneDisabled: false,
+ loadingResults: false,
+ newResults: this.results, // { geo_type: String, title: String, total: Number, areas: [{ areas: String, country: String, image: String, region: String, title: String, url: String }
searchTerm: '',
- totalItems: 0,
+ tabIdDefault: this.tabs[2].id,
+ tabIdSelected: this.tabs[2].id
}
},
created () {
- if(this.query) { this.searchTerm = this.query }
- },
-
- mounted () {
- if(this.query) { this.ajaxSubmission() }
+ this.handleQueryString()
},
computed: {
hasResults () {
- return this.results.length > 0
+ return this.newResults.length > 0
}
},
methods: {
- ajaxSubmission () {
+ ajaxSubmission (resetFilters=false, pagination=false, requestedPage=1) {
+ if(!pagination) { this.loadingResults = true }
+
let data = {
params: {
- area_type: this.areaType,
filters: this.activeFilterOptions,
- items_per_page: 3,
- search_term: this.searchTerm
+ items_per_page: 9,
+ requested_page: requestedPage,
+ search_term: this.searchTerm,
+ geo_type: this.tabIdSelected
}
}
this.axiosSetHeaders()
-
+
axios.get(this.endpointSearch, data)
.then(response => {
- console.log('success', response.data)
+ if(pagination){
+ this.newResults.areas = this.newResults.areas.concat(response.data.areas.areas)
+ } else {
+ this.updateProperties(response, resetFilters)
+ }
- this.updateProperties(response)
+ this.loadingResults = false
})
.catch(function (error) {
- console.log(error)
+ console.log('error', error)
})
},
- changePage (newPage) {
- this.categoryId = this.defaultCategory
- this.requestedPage = newPage
+ disableFilters () {
+ this.isFilterPaneActive = false
+ this.isFilterPaneDisabled = true
},
- updateCategory (categoryId) {
- this.categoryId = categoryId
- this.requestedPage = this.defaultPage
+ disableMap () {
+ this.isFilterPaneActive = false
+ this.isMapPaneDisabled = true
},
- updateFilters (filters) {
- this.$eventHub.$emit('reset-pagination')
- this.activeFilterOptions = filters
- this.ajaxSubmission()
+ enableFilters () {
+ this.isFilterPaneDisabled = false
},
- updateProperties (response) {
- const results = ('data' in response && Array.isArray(response.data)) ? response.data : []
+ enableMap () {
+ this.isMapPaneDisabled = false
+ },
- this.results = results
+ getFilteredSearchResults() {
+ this.ajaxSubmission()
},
- updateResults (newResults, geoType, isFirstPage) {
- this.results.map(result => {
- if(result.geoType == geoType) {
- if(isFirstPage) {
- result.areas.splice(0, result.areas.length, ...newResults)
- } else {
- result.areas = result.areas.concat(newResults)
- }
- }
- return result
+ /**
+ * If a query string is present in the URL,
+ * Initialise the state of the component based on its parameters
+ * @see created()
+ */
+ handleQueryString () {
+ const paramsFromUrl = new URLSearchParams(window.location.search)
+
+ let params = []
+
+ this.config.queryStringParams.forEach(param => {
+ if(paramsFromUrl.has(param)) { params.push(param) }
+ })
+
+ if(params.includes('search_term')) {
+ this.searchTerm = paramsFromUrl.get('search_term')
+ }
+
+ if(params.includes('geo_type')) {
+ this.tabIdSelected = paramsFromUrl.get('geo_type')
+ }
+
+ let filterParams = []
+
+ this.config.queryStringParamsFilters.forEach(param => {
+ if(paramsFromUrl.has(`filters[${param}][]`)) { filterParams.push(param) }
})
+
+ if(paramsFromUrl.has('filters[location][type]')) { filterParams.push('location[type]') }
+ if(paramsFromUrl.has('filters[location][options][]')) { filterParams.push('location[options]') }
+
+ this.filterGroups.map(filterGroup => {
+ return filterGroup.filters.map(filter => {
+ filterParams.forEach(key => {
+ if(filter.id == key){
+ filter.preSelected = paramsFromUrl.getAll(`filters[${key}][]`)
+ }
+
+ if(filter.id == 'location' && key == 'location[type]') {
+ filter.preSelected = [{
+ type: paramsFromUrl.get('filters[location][type]'),
+ options: paramsFromUrl.getAll('filters[location][options][]')
+ }]
+ }
+ })
+
+ return filter
+ })
+ })
+
+ this.filterGroupsWithPreSelected = this.filterGroups
+
+ this.updateDisabledComponents('site')
},
- updateSearchTerm (searchParams) {
- this.resetFilters()
- this.$eventHub.$emit('reset-pagination')
- this.areaType = searchParams.type
- this.searchTerm = searchParams.search_term
- this.ajaxSubmission()
+ updateDisabledComponents (selectedTabId) {
+ if(selectedTabId == 'site') {
+ this.enableFilters()
+ this.enableMap()
+ } else {
+ this.disableFilters()
+ this.disableMap()
+ }
},
- requestMore (paginationParams) {
- const isFirstPage = paginationParams.requestedPage == 1
+ updateFilters (filters) {
+ this.$eventHub.$emit('reset:pagination')
+ this.activeFilterOptions = filters
+ this.getFilteredSearchResults()
+ this.updateQueryString({ filters: filters })
+ },
- let data = {
- params: {
- area_type: this.areaType,
- filters: this.activeFilterOptions,
- geo_type: paginationParams.geoType,
- items_per_page: this.items_per_page,
- requested_page: paginationParams.requestedPage,
- search_term: this.searchTerm
- }
- }
+ updateProperties (response, resetFilters) {
+ this.newResults = response.data.areas
+
+ if(resetFilters) this.filterGroupsWithPreSelected = response.data.filters
+ },
- axios.get(this.endpointPagination, data)
- .then(response => {
- this.updateResults(response.data, paginationParams.geoType, isFirstPage)
- })
- .catch(function (error) {
- console.log(error)
+ updateQueryString (params) {
+ let searchParams = new URLSearchParams(window.location.search)
+
+ const key = Object.keys(params)[0]
+
+ if(key == 'filters') {
+ const filters = params.filters
+
+ Object.keys(filters).forEach(key => {
+ let queryKey = `filters[${key}][]`
+ let queryValues = filters[key]
+
+ if(key == 'location') {
+ this.updateQueryStringParam(searchParams, 'filters[location][type]', filters[key].type)
+
+ queryKey = 'filters[location][options][]'
+ queryValues = filters[key].options
+ }
+
+ if(searchParams.has(queryKey)) { searchParams.delete(queryKey) }
+
+ queryValues.forEach(value => {
+ searchParams.append(queryKey, value)
+ })
})
+ }
+
+ if(key == 'search_term') {
+ searchParams = new URLSearchParams()
+
+ this.updateQueryStringParam(searchParams, key, params[key])
+ this.updateQueryStringParam(searchParams, 'geo_type', 'site')
+ }
+
+ if(key == 'geo_type') {
+ this.updateQueryStringParam(searchParams, key, params[key])
+ }
+
+ const newUrl = `${window.location.pathname}?${searchParams.toString()}`
+
+ window.history.pushState({ query: 1 }, null, newUrl)
},
- resetPagination (geoType) {
- this.results.map(result => {
- if(result.geoType == geoType) {
- result.areas.splice(3)
- }
- return result
- })
+ updateQueryStringParam (params, key, value) {
+ params.has(key) ? params.set(key, value) : params.append(key, value)
+ },
+
+ updateSelectedTab (selectedTabId) {
+ this.updateDisabledComponents(selectedTabId)
+ this.tabIdSelected = selectedTabId
+ this.resetPagination()
+ this.getFilteredSearchResults()
+ this.updateQueryString({ geo_type: selectedTabId })
+ },
+
+ updateSearchTerm (searchParams) {
+ this.resetFilters()
+ this.resetPagination()
+ this.resetSearchTerm(searchParams)
+ this.resetTabs()
+ this.ajaxSubmission(true)
+ this.updateQueryString({ search_term: searchParams.search_term })
+ },
+
+ requestMore (requestedPage) {
+ this.ajaxSubmission(false, true, requestedPage)
},
resetFilters () {
@@ -269,6 +388,19 @@ export default {
this.$eventHub.$emit('reset:filter-options')
},
+ resetPagination () {
+ this.$eventHub.$emit('reset:pagination')
+ },
+
+ resetSearchTerm (searchParams) {
+ this.searchTerm = searchParams.search_term
+ },
+
+ resetTabs () {
+ this.tabIdSelected = this.tabIdDefault
+ this.$eventHub.$emit('reset:tabs')
+ },
+
toggleFilterPane () {
this.isFilterPaneActive = !this.isFilterPaneActive
},
diff --git a/app/javascript/components/search/SearchAreasGeoType.vue b/app/javascript/components/search/SearchAreasGeoType.vue
deleted file mode 100644
index a738f4056..000000000
--- a/app/javascript/components/search/SearchAreasGeoType.vue
+++ /dev/null
@@ -1,87 +0,0 @@
-
-
-
-
{{ title }} ({{ total }})
-
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/app/javascript/components/search/SearchAreasHome.vue b/app/javascript/components/search/SearchAreasHome.vue
index 0bb55afe0..0305314f6 100644
--- a/app/javascript/components/search/SearchAreasHome.vue
+++ b/app/javascript/components/search/SearchAreasHome.vue
@@ -1,8 +1,8 @@
@@ -17,23 +17,22 @@ export default {
components: { SearchAreasInputAutocomplete },
props: {
- autocompleteAreaTypes: {
- type: Array, // [ { name: String, options: [ { id: Number, name: String } ] } ]
- required: true
+ config: {
+ required: true,
+ type: Object // { id: String, placeholder: String }
},
endpointAutocomplete: {
- type: String,
- required: true
+ required: true,
+ type: String
},
endpointSearch: {
- type: String,
- required: true
+ required: true,
+ type: String
}
},
data () {
return {
- areaType: '',
searchTerm: '',
}
},
@@ -43,13 +42,12 @@ export default {
let endpoint = this.endpointSearch
endpoint = endpoint.replace('SEARCHTERM', this.searchTerm)
- endpoint = endpoint.replace('TYPE', this.areaType)
+ endpoint = endpoint.replace('TYPE', this.config.id)
window.location.href = endpoint
},
updateSearchTerm (searchParams) {
- this.areaType = searchParams.type
this.searchTerm = searchParams.search_term
this.ajaxSubmission()
}
diff --git a/app/javascript/components/search/SearchAreasInputAutocomplete.vue b/app/javascript/components/search/SearchAreasInputAutocomplete.vue
index 1da9eb997..7352cb604 100644
--- a/app/javascript/components/search/SearchAreasInputAutocomplete.vue
+++ b/app/javascript/components/search/SearchAreasInputAutocomplete.vue
@@ -9,7 +9,7 @@
v-model="searchTerm"
class="search__search-input"
type="text"
- :placeholder="selectedPlaceholder"
+ :placeholder="config.placeholder"
v-on:keyup="updateAutocomplete"
v-on:keyup.enter="submit"
>
@@ -20,49 +20,26 @@
class="search__search-icon--delete"
@click="resetSearchTerm"
/>
-
-
-
-
@@ -83,23 +60,21 @@ export default {
],
props: {
+ config: {
+ required: true,
+ type: Object // { id: String, placeholder: String }
+ },
endpoint: {
required: true,
type: String
},
- prePopulatedSearchTerm: String,
- types: {
- required: true,
- type: Array // [ { id: String, title: String, placeholder: String } ] } ]
- }
+ prePopulatedSearchTerm: String
},
data () {
return {
autocomplete: [], // [ { title: String, url: String } ]
- searchTerm: '',
- typeDropdownActive: false,
- selectedTypeIndex: 0,
+ searchTerm: ''
}
},
@@ -107,24 +82,12 @@ export default {
hasAutocompleteOptions () {
return this.autocomplete.length > 0
},
- hasMultipleTypes () {
- return this.types.length > 1
- },
searchParams () {
return {
- type: this.selectedTypeId,
- search_term: this.searchTerm
+ search_term: this.searchTerm,
+ type: this.config.id
}
},
- selectedPlaceholder () {
- return this.types[this.selectedTypeIndex].placeholder
- },
- selectedTypeId () {
- return this.types[this.selectedTypeIndex].id
- },
- selectedTypeTitle () {
- return this.types[this.selectedTypeIndex].title
- },
showResetIcon () {
return this.searchTerm.length != 0
}
@@ -132,9 +95,6 @@ export default {
mounted () {
if(this.prePopulatedSearchTerm) { this.searchTerm = this.prePopulatedSearchTerm }
- // this.addTabFromSearchListener()
- // this.addArrowKeyListeners()
- // this.addTabForwardFromResetListener()
},
methods: {
@@ -157,21 +117,6 @@ export default {
})
},
- updateType (type, index) {
- this.selectedTypeIndex = index
- this.type = type.id
- this.placeholder = type.placeholder
- this.toggleTypes()
- this.resetSearchTerm()
- this.resetAutocomplete()
- },
-
- toggleTypes () {
- if(!this.hasMultipleTypes) { return false }
-
- this.typeDropdownActive = !this.typeDropdownActive
- },
-
resetSearchTerm () {
this.searchTerm = ''
this.resetAutocomplete()
diff --git a/app/javascript/components/search/SearchAreasResults.vue b/app/javascript/components/search/SearchAreasResults.vue
index 0cce2bbc3..c088acaea 100644
--- a/app/javascript/components/search/SearchAreasResults.vue
+++ b/app/javascript/components/search/SearchAreasResults.vue
@@ -2,16 +2,10 @@
-
@@ -25,13 +19,13 @@
\ No newline at end of file
diff --git a/app/javascript/components/search/SearchSite.vue b/app/javascript/components/search/SearchSite.vue
index 11236383c..81a4eb4cc 100644
--- a/app/javascript/components/search/SearchSite.vue
+++ b/app/javascript/components/search/SearchSite.vue
@@ -8,6 +8,7 @@
@@ -93,7 +94,7 @@ export default {
mounted () {
if(this.query) {
- console.log('here')
+
this.searchTerm = this.query
this.ajaxSubmission()
}
@@ -102,10 +103,14 @@ export default {
methods: {
ajaxSubmission () {
let data = {
- ancestor: this.categoryId,
- items_per_page: this.itemsPerPage,
- requested_page: this.requestedPage,
- search_term: this.searchTerm
+ params: {
+ filters: {
+ ancestor: this.categoryId,
+ },
+ items_per_page: this.itemsPerPage,
+ requested_page: this.requestedPage,
+ search_term: this.searchTerm
+ }
}
if(this.categoryId <= 0) {
@@ -114,7 +119,7 @@ export default {
this.axiosSetHeaders()
- axios.post(this.endpoint, data)
+ axios.get(this.endpoint, data)
.then(response => {
console.log('success', response)
this.updateProperties(response.data)
@@ -127,7 +132,7 @@ export default {
resetAll () {
this.categoryId = this.defaultCategory
this.requestedPage = this.defaultPage
- this.$eventHub.$emit('reset-search')
+ this.$eventHub.$emit('reset:tabs')
},
updateCategory (categoryId) {
diff --git a/app/javascript/components/search/SearchSiteResults.vue b/app/javascript/components/search/SearchSiteResults.vue
index da4307579..0d6dbb1ce 100644
--- a/app/javascript/components/search/SearchSiteResults.vue
+++ b/app/javascript/components/search/SearchSiteResults.vue
@@ -44,7 +44,7 @@ export default {
computed: {
hasResults () {
- return this.results != undefined && 0
+ return this.results != undefined && this.results.length > 0
}
}
}
diff --git a/app/javascript/components/tabs/TabFake.vue b/app/javascript/components/tabs/TabFake.vue
index 5a0217fa0..24c73aa01 100644
--- a/app/javascript/components/tabs/TabFake.vue
+++ b/app/javascript/components/tabs/TabFake.vue
@@ -14,11 +14,11 @@ export default {
props: {
id: {
- type: Number,
+ type: String,
required: true
},
selectedId: {
- type: Number,
+ type: String,
required: true
},
title: {
@@ -29,7 +29,7 @@ export default {
computed: {
isActive () {
- return this.id == this.selectedId
+ return this.id === this.selectedId
}
},
diff --git a/app/javascript/components/tabs/Tabs.vue b/app/javascript/components/tabs/Tabs.vue
index 289e494a4..d33897116 100644
--- a/app/javascript/components/tabs/Tabs.vue
+++ b/app/javascript/components/tabs/Tabs.vue
@@ -1,50 +1,42 @@