From 4ca7a344a02dbfef040b3f1433ba564ed1b5cd35 Mon Sep 17 00:00:00 2001 From: Stephen Kilbourn Date: Tue, 24 Oct 2023 19:34:14 -0600 Subject: [PATCH 01/23] WIP: add param on submit and clear on reset --- src/components/SearchFilter.vue | 60 +++++++++++++++++++++++++++++++-- 1 file changed, 57 insertions(+), 3 deletions(-) diff --git a/src/components/SearchFilter.vue b/src/components/SearchFilter.vue index c359eb8bc..34bc5c178 100644 --- a/src/components/SearchFilter.vue +++ b/src/components/SearchFilter.vue @@ -111,6 +111,7 @@ {{ $t('submit') }} + print query {{ $t('reset') }} @@ -138,6 +139,17 @@ import CqlLogicalOperator from '../models/cql2/operators/logical'; import { CqlEqual } from '../models/cql2/operators/comparison'; import { stacRequest } from '../store/utils'; +const allowedQueryParams = [ + 'q', + 'datetime', + 'bbox', + 'limit', + 'ids', + 'collections', + 'sortby', + 'filters', + 'itemsPerPage']; + function getQueryDefaults() { return { q: [], @@ -151,6 +163,10 @@ function getQueryDefaults() { }; } +function getQueryValues() { + return {...getQueryDefaults()}; +} + function getDefaults() { return { sortOrder: 1, @@ -202,6 +218,10 @@ export default { value: { type: Object, default: () => ({}) + }, + searchLink: { + type: Object, + default: () => ({}) } }, data() { @@ -297,7 +317,7 @@ export default { immediate: true, deep: true, handler(value) { - let query = Object.assign(getQueryDefaults(), value); + let query = Object.assign(getQueryValues(), value); if (Array.isArray(query.datetime)) { query.datetime = query.datetime.map(Utils.dateFromUTC); } @@ -312,7 +332,8 @@ export default { }); } } - } + }, + $route() {}, }, beforeCreate() { formId++; @@ -494,10 +515,12 @@ export default { let filters = this.buildFilter(); this.$set(this.query, 'filters', filters); this.$emit('input', this.query, false); + this.updateQueryParams(); }, async onReset() { Object.assign(this, getDefaults()); this.$emit('input', {}, true); + this.removeQueryParams(); }, setLimit(limit) { limit = Number.parseInt(limit, 10); @@ -575,8 +598,39 @@ export default { else { return null; } + }, + async updateQueryParams() { + const currentParams = this.$route.query; + console.log('current parameters in url: ', JSON.stringify(currentParams)); + const currentQuery = this.query; + const newQuery = {}; + for (const [key, value] of Object.entries(currentQuery)) { + if ( allowedQueryParams.includes(key) && value && value.length) { + newQuery[key] = value; + } + } + const params = {...currentParams, ...newQuery}; + console.log('my new query: ', JSON.stringify(newQuery)) + if (JSON.stringify(currentParams) !== JSON.stringify(params)) { + this.$router.replace({query: {...params}}); + } + }, + removeQueryParams() { + this.$router.replace({name: "search"}); + }, + getQueryParams() { + const currentParams = this.$route.query; + // remove invalid query params + const cleanParams = {}; + for (const [key, value] of Object.entries(currentParams)) { + if ( allowedQueryParams.includes(key) && value && value.length) { + cleanParams[key]=value; + } + } + console.log(cleanParams); + return cleanParams; } - } + }, }; From 03efc9a06f120f8e66dddc86c2a71d44c5eb04a4 Mon Sep 17 00:00:00 2001 From: Stephen Kilbourn Date: Thu, 2 Nov 2023 16:48:44 -0600 Subject: [PATCH 02/23] implement loading filter values from params --- src/components/SearchFilter.vue | 78 +++++++++++++++++++-------------- 1 file changed, 46 insertions(+), 32 deletions(-) diff --git a/src/components/SearchFilter.vue b/src/components/SearchFilter.vue index 34bc5c178..8a8e6468b 100644 --- a/src/components/SearchFilter.vue +++ b/src/components/SearchFilter.vue @@ -111,7 +111,6 @@ {{ $t('submit') }} - print query {{ $t('reset') }} @@ -164,14 +163,29 @@ function getQueryDefaults() { } function getQueryValues() { - return {...getQueryDefaults()}; + const searchURL = new URL(window.location); + const params = searchURL.searchParams; + const urlParams = {}; + const arrayParams = ['bbox', 'collections', 'ids'] + allowedQueryParams.forEach((allowedParam) => { + if (params.has(allowedParam)) { + if( arrayParams.includes(allowedParam)) { + urlParams[allowedParam] = params.get(allowedParam).split(','); + } else { + urlParams[allowedParam] = params.get(allowedParam); + } + } + }); + + const combinedQuery = { ...getQueryDefaults(), ...urlParams}; + return combinedQuery; } function getDefaults() { return { sortOrder: 1, sortTerm: null, - provideBBox: false, + provideBBox: true, query: getQueryDefaults(), filtersAndOr: 'and', filters: [], @@ -179,6 +193,24 @@ function getDefaults() { }; } +function updateQueryString(key, value) { + console.log(`update called for ${key}: ${value}`); + // remove parameters if new value is null + const searchURL = new URL(window.location); + if (value === null || value.length === 0 || value.value === null) { + searchURL.searchParams.delete(key); + window.history.pushState({}, '', searchURL); + return; + } + if(key === 'sortTerm') { + searchURL.searchParams.set(key, value.value); + } else { + searchURL.searchParams.set(key, value); + } + + window.history.pushState({}, '', searchURL); +} + let formId = 0; export default { @@ -486,9 +518,11 @@ export default { }, sortFieldSet(value) { this.sortTerm = value; + updateQueryString('sortTerm', value); }, sortDirectionSet(value) { this.sortOrder = value; + updateQueryString('sortOrder', value); }, buildFilter() { if (this.filters.length === 0) { @@ -515,7 +549,6 @@ export default { let filters = this.buildFilter(); this.$set(this.query, 'filters', filters); this.$emit('input', this.query, false); - this.updateQueryParams(); }, async onReset() { Object.assign(this, getDefaults()); @@ -531,15 +564,18 @@ export default { limit = null; } this.$set(this.query, 'limit', limit); + updateQueryString('limit', limit); }, addSearchTerm(term) { if (!Utils.hasText(term)) { return; } this.query.q.push(term); + updateQueryString('q', term); }, setSearchTerms(terms) { this.$set(this.query, 'q', terms); + updateQueryString('q', terms); }, setBBox(bounds) { let bbox = null; @@ -560,6 +596,7 @@ export default { } } this.$set(this.query, 'bbox', bbox); + updateQueryString('bbox', bbox); }, setDateTime(datetime) { if (datetime.find(dt => dt instanceof Date)) { @@ -569,6 +606,7 @@ export default { datetime = null; } this.$set(this.query, 'datetime', datetime); + updateQueryString('datetime', datetime); }, addCollection(collection) { if (!this.collectionSelectOptions.taggable) { @@ -579,16 +617,20 @@ export default { this.selectedCollections.push(opt); this.collections.push(opt); this.query.collections.push(collection); + updateQueryString('collections', collection); }, setCollections(collections) { this.selectedCollections = collections; this.$set(this.query, 'collections', collections.map(c => c.value)); + updateQueryString('collections', collections.map(c => c.value)); }, addId(id) { this.query.ids.push(id); + updateQueryString('ids', id); }, setIds(ids) { this.$set(this.query, 'ids', ids); + updateQueryString('ids', ids); }, formatSort() { if (this.sortTerm && this.sortTerm.value && this.sortOrder) { @@ -599,37 +641,9 @@ export default { return null; } }, - async updateQueryParams() { - const currentParams = this.$route.query; - console.log('current parameters in url: ', JSON.stringify(currentParams)); - const currentQuery = this.query; - const newQuery = {}; - for (const [key, value] of Object.entries(currentQuery)) { - if ( allowedQueryParams.includes(key) && value && value.length) { - newQuery[key] = value; - } - } - const params = {...currentParams, ...newQuery}; - console.log('my new query: ', JSON.stringify(newQuery)) - if (JSON.stringify(currentParams) !== JSON.stringify(params)) { - this.$router.replace({query: {...params}}); - } - }, removeQueryParams() { this.$router.replace({name: "search"}); }, - getQueryParams() { - const currentParams = this.$route.query; - // remove invalid query params - const cleanParams = {}; - for (const [key, value] of Object.entries(currentParams)) { - if ( allowedQueryParams.includes(key) && value && value.length) { - cleanParams[key]=value; - } - } - console.log(cleanParams); - return cleanParams; - } }, }; From 94318fba2c64aec1ea7d153c02c4291227a1708e Mon Sep 17 00:00:00 2001 From: Stephen Kilbourn Date: Fri, 3 Nov 2023 10:20:08 -0600 Subject: [PATCH 03/23] check & show geospatial map based on url param --- src/components/SearchFilter.vue | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/components/SearchFilter.vue b/src/components/SearchFilter.vue index 8a8e6468b..5634bec2a 100644 --- a/src/components/SearchFilter.vue +++ b/src/components/SearchFilter.vue @@ -27,7 +27,7 @@ - {{ $t('search.filterBySpatialExtent') }} + {{ $t('search.filterBySpatialExtent') }} @@ -181,11 +181,17 @@ function getQueryValues() { return combinedQuery; } +function bboxProvided() { + const searchURL = new URL(window.location); + const hasBbox = searchURL.searchParams.has('bbox'); + return hasBbox; + } + function getDefaults() { return { sortOrder: 1, sortTerm: null, - provideBBox: true, + provideBBox: bboxProvided(), query: getQueryDefaults(), filtersAndOr: 'and', filters: [], From dcec953954e2fe690d9890e6329bb01517e04994 Mon Sep 17 00:00:00 2001 From: Stephen Kilbourn Date: Fri, 3 Nov 2023 13:12:49 -0600 Subject: [PATCH 04/23] overwrite defaults with url params --- src/components/SearchFilter.vue | 38 ++++++++++++++++++++++++++++----- 1 file changed, 33 insertions(+), 5 deletions(-) diff --git a/src/components/SearchFilter.vue b/src/components/SearchFilter.vue index 5634bec2a..25824d72b 100644 --- a/src/components/SearchFilter.vue +++ b/src/components/SearchFilter.vue @@ -166,7 +166,7 @@ function getQueryValues() { const searchURL = new URL(window.location); const params = searchURL.searchParams; const urlParams = {}; - const arrayParams = ['bbox', 'collections', 'ids'] + const arrayParams = ['bbox', 'collections', 'ids']; allowedQueryParams.forEach((allowedParam) => { if (params.has(allowedParam)) { if( arrayParams.includes(allowedParam)) { @@ -191,7 +191,7 @@ function getDefaults() { return { sortOrder: 1, sortTerm: null, - provideBBox: bboxProvided(), + provideBBox: false, query: getQueryDefaults(), filtersAndOr: 'and', filters: [], @@ -199,8 +199,35 @@ function getDefaults() { }; } +function overwriteDefaults() { + const searchURL = new URL(window.location); + const params = searchURL.searchParams; + const permittedOverwrites = ['sortOrder', 'sortTerm', 'provideBBox']; + const numericParams=['sortOrder', 'limit']; + const defaultOverwrites = { + provideBBox: bboxProvided() + }; + + + permittedOverwrites.forEach((allowedValue) => { + if(params.has(allowedValue)) { + // sortTerm is a json object, not a string + if (allowedValue === 'sortTerm') { + defaultOverwrites[allowedValue] = JSON.parse(params.get(allowedValue)); + } + else if(numericParams.includes(allowedValue)) { + defaultOverwrites[allowedValue] = parseInt(params.get(allowedValue)); + } else { + defaultOverwrites[allowedValue] = params.get(allowedValue); + } + } + }); + + return {...getDefaults(), ...defaultOverwrites}; + +} + function updateQueryString(key, value) { - console.log(`update called for ${key}: ${value}`); // remove parameters if new value is null const searchURL = new URL(window.location); if (value === null || value.length === 0 || value.value === null) { @@ -208,8 +235,9 @@ function updateQueryString(key, value) { window.history.pushState({}, '', searchURL); return; } + // sortTerm is an object if(key === 'sortTerm') { - searchURL.searchParams.set(key, value.value); + searchURL.searchParams.set(key, JSON.stringify(value)); } else { searchURL.searchParams.set(key, value); } @@ -272,7 +300,7 @@ export default { collections: [], collectionsLoadingTimer: null, additionalCollectionCount: 0 - }, getDefaults()); + }, overwriteDefaults()); }, computed: { ...mapState(['itemsPerPage', 'uiLanguage']), From 8d6af73e05be4c33241d209f2d31ad52940c1712 Mon Sep 17 00:00:00 2001 From: Stephen Kilbourn Date: Fri, 3 Nov 2023 15:28:33 -0600 Subject: [PATCH 05/23] submit form on load if query params present --- src/components/SearchFilter.vue | 36 ++++++++++++++++++++++----------- 1 file changed, 24 insertions(+), 12 deletions(-) diff --git a/src/components/SearchFilter.vue b/src/components/SearchFilter.vue index 25824d72b..35909ee3c 100644 --- a/src/components/SearchFilter.vue +++ b/src/components/SearchFilter.vue @@ -110,7 +110,7 @@ - {{ $t('submit') }} + {{ $t('submit') }} {{ $t('reset') }} @@ -138,17 +138,6 @@ import CqlLogicalOperator from '../models/cql2/operators/logical'; import { CqlEqual } from '../models/cql2/operators/comparison'; import { stacRequest } from '../store/utils'; -const allowedQueryParams = [ - 'q', - 'datetime', - 'bbox', - 'limit', - 'ids', - 'collections', - 'sortby', - 'filters', - 'itemsPerPage']; - function getQueryDefaults() { return { q: [], @@ -167,10 +156,25 @@ function getQueryValues() { const params = searchURL.searchParams; const urlParams = {}; const arrayParams = ['bbox', 'collections', 'ids']; + const allowedQueryParams = [ + 'q', + 'datetime', + 'bbox', + 'limit', + 'ids', + 'collections', + 'sortby', + 'filters', + 'itemsPerPage']; + allowedQueryParams.forEach((allowedParam) => { if (params.has(allowedParam)) { if( arrayParams.includes(allowedParam)) { urlParams[allowedParam] = params.get(allowedParam).split(','); + // bbox bust be array of numbers + if(allowedParam === 'bbox') { + urlParams[allowedParam] = urlParams[allowedParam].map(Number); + } } else { urlParams[allowedParam] = params.get(allowedParam); } @@ -428,6 +432,14 @@ export default { } Promise.all(promises).finally(() => this.loaded = true); }, + mounted() { + // submit form if loaded with url params + const searchURL = new URL(window.location); + const params = searchURL.searchParams; + if(params.size > 1) { + document.getElementById("submitBtn").click(); + } + }, methods: { resetSearchCollection() { clearTimeout(this.collectionsLoadingTimer); From 01bd9da6ad39f8b708cf47d5b34acab9e47343cf Mon Sep 17 00:00:00 2001 From: Stephen Kilbourn Date: Wed, 8 Nov 2023 17:03:50 -0700 Subject: [PATCH 06/23] allow bbox input via text or map --- src/components/SearchFilter.vue | 90 +++++++++++++++++++++++++++++++-- src/locales/en/texts.json | 4 ++ 2 files changed, 90 insertions(+), 4 deletions(-) diff --git a/src/components/SearchFilter.vue b/src/components/SearchFilter.vue index 35909ee3c..36b73ad70 100644 --- a/src/components/SearchFilter.vue +++ b/src/components/SearchFilter.vue @@ -28,7 +28,80 @@ {{ $t('search.filterBySpatialExtent') }} - + @@ -118,7 +191,7 @@ diff --git a/src/components/SearchFilter.vue b/src/components/SearchFilter.vue index 1ee849bde..c6b7562b1 100644 --- a/src/components/SearchFilter.vue +++ b/src/components/SearchFilter.vue @@ -40,66 +40,7 @@ {{ $t('search.defineBbox.text') }} - - - - - - - - - - - - - - - - - - - - - - - - + @@ -196,6 +137,7 @@ import Multiselect from 'vue-multiselect'; import { mapGetters, mapState } from "vuex"; import refParser from '@apidevtools/json-schema-ref-parser'; +import BBoxEntry from './BBoxEntry.vue'; import Utils, { schemaMediaType } from '../utils'; import { ogcQueryables } from "../rels"; @@ -339,6 +281,7 @@ export default { name: 'SearchFilter', components: { BBadge, + BBoxEntry, BDropdown, BDropdownItem, BForm, From 71df2ed6ecc644c5988a0ddfa7940243d1dc8ae9 Mon Sep 17 00:00:00 2001 From: Stephen Kilbourn Date: Thu, 9 Nov 2023 16:11:11 -0700 Subject: [PATCH 09/23] fix linting error --- src/components/SearchFilter.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/SearchFilter.vue b/src/components/SearchFilter.vue index c6b7562b1..619d88991 100644 --- a/src/components/SearchFilter.vue +++ b/src/components/SearchFilter.vue @@ -266,7 +266,7 @@ function updateUrlParamString(key, value) { if(key === 'sortTerm') { searchURL.searchParams.set(key, JSON.stringify(value)); } else if(key ==='datetime') { - const dateFormattedForPicker = `${JSON.stringify(value['0'])}/${JSON.stringify(value['1'])}` + const dateFormattedForPicker = `${JSON.stringify(value['0'])}/${JSON.stringify(value['1'])}`; searchURL.searchParams.set(key, dateFormattedForPicker.replaceAll('"','')); } else { searchURL.searchParams.set(key, value); From cfc913d36d2dce8a439d26d52fd9a225bc82de38 Mon Sep 17 00:00:00 2001 From: Stephen Kilbourn Date: Fri, 10 Nov 2023 11:27:45 -0700 Subject: [PATCH 10/23] add manual BBoxEntry Component to search --- src/components/SearchFilter.vue | 139 ++------------------------------ 1 file changed, 7 insertions(+), 132 deletions(-) diff --git a/src/components/SearchFilter.vue b/src/components/SearchFilter.vue index 619d88991..d9bf73751 100644 --- a/src/components/SearchFilter.vue +++ b/src/components/SearchFilter.vue @@ -124,7 +124,7 @@ - {{ $t('submit') }} + {{ $t('submit') }} {{ $t('reset') }} @@ -166,52 +166,6 @@ function getQueryDefaults() { }; } -function getUrlParamValues() { - const searchURL = new URL(window.location); - const params = searchURL.searchParams; - const urlParams = {}; - const arrayParams = ['bbox', 'collections', 'ids']; - const allowedQueryParams = [ - 'q', - 'datetime', - 'bbox', - 'limit', - 'ids', - 'collections', - 'sortby', - 'filters', - 'itemsPerPage']; - - allowedQueryParams.forEach((allowedParam) => { - if (params.has(allowedParam)) { - if( arrayParams.includes(allowedParam)) { - urlParams[allowedParam] = params.get(allowedParam).split(','); - // bbox bust be array of numbers - if(allowedParam === 'bbox') { - urlParams[allowedParam] = urlParams[allowedParam].map(Number); - } - } else if(allowedParam === 'datetime') { - // datetime must be array of date objects - urlParams[allowedParam] = params.get(allowedParam); - const dateArray= urlParams['datetime'].split('/').map( day => new Date(day)); - urlParams[allowedParam] = dateArray; - } else { - // all others are strings - urlParams[allowedParam] = params.get(allowedParam); - } - } - }); - - const combinedQuery = { ...getQueryDefaults(), ...urlParams}; - return combinedQuery; -} - -function bboxProvided() { - const searchURL = new URL(window.location); - const hasBbox = searchURL.searchParams.has('bbox'); - return hasBbox; - } - function getDefaults() { return { sortOrder: 1, @@ -225,56 +179,6 @@ function getDefaults() { }; } -function overwriteDefaults() { - const searchURL = new URL(window.location); - const params = searchURL.searchParams; - const permittedOverwrites = ['sortOrder', 'sortTerm', 'provideBBox']; - const numericParams=['sortOrder', 'limit']; - const defaultOverwrites = { - provideBBox: bboxProvided(), - bboxSelectionStyle: bboxProvided() ? 'text' : 'map', - }; - - - permittedOverwrites.forEach((allowedValue) => { - if(params.has(allowedValue)) { - // sortTerm is a json object, not a string - if (allowedValue === 'sortTerm') { - defaultOverwrites[allowedValue] = JSON.parse(params.get(allowedValue)); - } - else if(numericParams.includes(allowedValue)) { - defaultOverwrites[allowedValue] = parseInt(params.get(allowedValue)); - } else { - defaultOverwrites[allowedValue] = params.get(allowedValue); - } - } - }); - - return {...getDefaults(), ...defaultOverwrites}; - -} - -function updateUrlParamString(key, value) { - // remove parameters if new value is null - const searchURL = new URL(window.location); - if (value === null || value.length === 0 || value.value === null) { - searchURL.searchParams.delete(key); - window.history.pushState({}, '', searchURL); - return; - } - // sortTerm is an object - if(key === 'sortTerm') { - searchURL.searchParams.set(key, JSON.stringify(value)); - } else if(key ==='datetime') { - const dateFormattedForPicker = `${JSON.stringify(value['0'])}/${JSON.stringify(value['1'])}`; - searchURL.searchParams.set(key, dateFormattedForPicker.replaceAll('"','')); - } else { - searchURL.searchParams.set(key, value); - } - - window.history.pushState({}, '', searchURL); -} - let formId = 0; export default { @@ -288,8 +192,8 @@ export default { BFormGroup, BFormInput, BFormCheckbox, - BFormRadio, BFormRadioGroup, + BFormRadio, QueryableInput: () => import('./QueryableInput.vue'), Loading, Map: () => import('./Map.vue'), @@ -316,10 +220,6 @@ export default { value: { type: Object, default: () => ({}) - }, - searchLink: { - type: Object, - default: () => ({}) } }, data() { @@ -332,7 +232,7 @@ export default { collections: [], collectionsLoadingTimer: null, additionalCollectionCount: 0 - }, overwriteDefaults()); + }, getDefaults()); }, computed: { ...mapState(['itemsPerPage', 'uiLanguage']), @@ -415,7 +315,7 @@ export default { immediate: true, deep: true, handler(value) { - let query = Object.assign(getUrlParamValues(), value); + let query = Object.assign(getQueryDefaults(), value); if (Array.isArray(query.datetime)) { query.datetime = query.datetime.map(Utils.dateFromUTC); } @@ -430,8 +330,7 @@ export default { }); } } - }, - $route() {}, + } }, beforeCreate() { formId++; @@ -460,14 +359,6 @@ export default { } Promise.all(promises).finally(() => this.loaded = true); }, - mounted() { - // submit form if loaded with url params - const searchURL = new URL(window.location); - const params = searchURL.searchParams; - if(params.size > 1) { - document.getElementById("submitBtn").click(); - } - }, methods: { resetSearchCollection() { clearTimeout(this.collectionsLoadingTimer); @@ -592,11 +483,9 @@ export default { }, sortFieldSet(value) { this.sortTerm = value; - updateUrlParamString('sortTerm', value); }, sortDirectionSet(value) { this.sortOrder = value; - updateUrlParamString('sortOrder', value); }, buildFilter() { if (this.filters.length === 0) { @@ -627,7 +516,6 @@ export default { async onReset() { Object.assign(this, getDefaults()); this.$emit('input', {}, true); - this.removeQueryParams(); }, setLimit(limit) { limit = Number.parseInt(limit, 10); @@ -638,24 +526,20 @@ export default { limit = null; } this.$set(this.query, 'limit', limit); - updateUrlParamString('limit', limit); }, addSearchTerm(term) { if (!Utils.hasText(term)) { return; } this.query.q.push(term); - updateUrlParamString('q', term); }, setSearchTerms(terms) { this.$set(this.query, 'q', terms); - updateUrlParamString('q', terms); }, updateBBoxArray(entry, position) { const bbox = this.query.bbox; bbox[position] = Number(entry); this.$set(this.query, 'bbox', bbox); - updateUrlParamString('bbox', bbox); }, setBBox(bounds) { let bbox = null; @@ -676,7 +560,6 @@ export default { } } this.$set(this.query, 'bbox', bbox); - updateUrlParamString('bbox', bbox); }, setDateTime(datetime) { if (datetime.find(dt => dt instanceof Date)) { @@ -686,7 +569,6 @@ export default { datetime = null; } this.$set(this.query, 'datetime', datetime); - updateUrlParamString('datetime', datetime); }, addCollection(collection) { if (!this.collectionSelectOptions.taggable) { @@ -697,20 +579,16 @@ export default { this.selectedCollections.push(opt); this.collections.push(opt); this.query.collections.push(collection); - updateUrlParamString('collections', collection); }, setCollections(collections) { this.selectedCollections = collections; this.$set(this.query, 'collections', collections.map(c => c.value)); - updateUrlParamString('collections', collections.map(c => c.value)); }, addId(id) { this.query.ids.push(id); - updateUrlParamString('ids', id); }, setIds(ids) { this.$set(this.query, 'ids', ids); - updateUrlParamString('ids', ids); }, formatSort() { if (this.sortTerm && this.sortTerm.value && this.sortOrder) { @@ -720,11 +598,8 @@ export default { else { return null; } - }, - removeQueryParams() { - this.$router.replace({name: "search"}); - }, - }, + } + } }; From 933adc4dcd1d2df22fe62f6b798fa077d675ef8e Mon Sep 17 00:00:00 2001 From: Stephen Kilbourn Date: Mon, 13 Nov 2023 13:14:38 -0700 Subject: [PATCH 11/23] switch to tabs --- src/components/BBoxEntry.vue | 30 ++++++++++++++++++++---------- src/components/SearchFilter.vue | 27 ++++++++++++++------------- 2 files changed, 34 insertions(+), 23 deletions(-) diff --git a/src/components/BBoxEntry.vue b/src/components/BBoxEntry.vue index fe82cd867..ed8d5a432 100644 --- a/src/components/BBoxEntry.vue +++ b/src/components/BBoxEntry.vue @@ -1,10 +1,10 @@ + + diff --git a/src/components/SearchFilter.vue b/src/components/SearchFilter.vue index d9bf73751..4b5efafc2 100644 --- a/src/components/SearchFilter.vue +++ b/src/components/SearchFilter.vue @@ -30,18 +30,15 @@ {{ $t('search.filterBySpatialExtent') }} @@ -132,7 +129,7 @@ - - diff --git a/src/components/SearchFilter.vue b/src/components/SearchFilter.vue index 39d049645..acb16fbbd 100644 --- a/src/components/SearchFilter.vue +++ b/src/components/SearchFilter.vue @@ -35,7 +35,7 @@ - + From fb0683e9ca0e84d082c6ff1b9f1a799a634e911e Mon Sep 17 00:00:00 2001 From: Stephen Kilbourn Date: Tue, 14 Nov 2023 13:55:35 -0700 Subject: [PATCH 14/23] Update src/components/BBoxEntry.vue Co-authored-by: Matthias Mohr --- src/components/BBoxEntry.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/BBoxEntry.vue b/src/components/BBoxEntry.vue index 807337a5c..f4826603f 100644 --- a/src/components/BBoxEntry.vue +++ b/src/components/BBoxEntry.vue @@ -77,7 +77,7 @@ export default { type: [Array, null], default: () => ([-180, -80, 180, 80]), validator(value) { - return value.length === 4 && value.every((e) => typeof e === 'number'); + return Array.isArray(value) && value.length === 4 && value.every((e) => typeof e === 'number'); } } }, From 5a965381e80e4c604ec65172b1e0f8b8a901c893 Mon Sep 17 00:00:00 2001 From: Stephen Kilbourn Date: Wed, 22 Nov 2023 17:13:28 -0700 Subject: [PATCH 15/23] map tab to initialize with query.bbox and set areaselect to that bbox --- src/components/Map.vue | 11 ++++++++++- src/components/SearchFilter.vue | 4 ++-- src/components/map/leaflet-areaselect.js | 16 ++++++++++++++++ 3 files changed, 28 insertions(+), 3 deletions(-) diff --git a/src/components/Map.vue b/src/components/Map.vue index 5d522d215..f3d61caa3 100644 --- a/src/components/Map.vue +++ b/src/components/Map.vue @@ -90,6 +90,10 @@ export default { fitBoundsOnce: { type: Boolean, default: false + }, + bbox: { + type: Array, + default: null, } }, data() { @@ -161,6 +165,9 @@ export default { } }, watch: { + bbox: function(newVal) { + return newVal; + }, uiLanguage() { // This recreates the component so that it picks up the new translations this.ix++; @@ -419,9 +426,11 @@ export default { minWidth: 20, minHeight: 20, minHorizontalSpacing: 20, - minVerticalSpacing: 20 + minVerticalSpacing: 20, + bbox: this.bbox, }); this.areaSelect.addTo(this.map); + this.areaSelect.setInitialBounds(this.bbox); this.areaSelect.on("change", () => this.emitBounds()); this.emitBounds(); }, diff --git a/src/components/SearchFilter.vue b/src/components/SearchFilter.vue index acb16fbbd..a3ae6e937 100644 --- a/src/components/SearchFilter.vue +++ b/src/components/SearchFilter.vue @@ -31,8 +31,8 @@ diff --git a/src/components/Map.vue b/src/components/Map.vue index e75e84013..a31462261 100644 --- a/src/components/Map.vue +++ b/src/components/Map.vue @@ -426,10 +426,13 @@ export default { minVerticalSpacing: 20, bbox: this.bbox, }); - this.areaSelect.addTo(this.map); - this.areaSelect.setInitialBounds(this.bbox); + this.areaSelect.addTo(this.map, this.bbox); this.areaSelect.on("change", () => this.emitBounds()); - this.emitBounds(); + + // don't emit bounds on load if already known in order to avoid rounding box entries + if(!this.bbox) { + this.emitBounds(); + } }, emitBounds() { this.$emit('bounds', this.areaSelect.getBounds()); diff --git a/src/components/SearchFilter.vue b/src/components/SearchFilter.vue index 6cdc9cf35..335ed1516 100644 --- a/src/components/SearchFilter.vue +++ b/src/components/SearchFilter.vue @@ -31,11 +31,11 @@