diff --git a/app/src/components/MapBox.vue b/app/src/components/MapBox.vue index 4d5385a..8f78dd9 100644 --- a/app/src/components/MapBox.vue +++ b/app/src/components/MapBox.vue @@ -95,7 +95,7 @@ const noResultsFound = ref(false) const scanStore = useScanStore() const { - storeURL, + urlParams, activeSubCategory, storeSelectedScan, storeSelectedGeom, @@ -694,9 +694,9 @@ onMounted(() => { } }) - watch(storeURL, async (newValue) => { + watch(urlParams, async (newUrlParams) => { console.log('--------- REQUETE GEOSERVER --------') - console.log('NEW URL:', newValue) + console.log('NEW URL:', newUrlParams.url) vectorLayers.value.geom.getSource().clear() vectorLayers.value.geomMouseOver.getSource().clear() vectorLayers.value.geomCouple.getSource().clear() @@ -716,12 +716,12 @@ onMounted(() => { } // Pour afficher les emprises de scans if (activeTab.value.includes('cartotheque')) { - vectorLayers.value.emprises.getSource().setUrl(newValue) + vectorLayers.value.emprises.getSource().setUrl(newUrlParams) } vectorLayers.value.emprises.getSource().refresh() scanStore.updateLoading(true) - await scanStore.storeGet(newValue) + await scanStore.storeGet(newUrlParams) scanStore.updateLoading(false) }) diff --git a/app/src/components/cartotheque/CritereSelection.vue b/app/src/components/cartotheque/CritereSelection.vue index 63866dd..fe92328 100644 --- a/app/src/components/cartotheque/CritereSelection.vue +++ b/app/src/components/cartotheque/CritereSelection.vue @@ -127,7 +127,7 @@ import { TITLE_ALL_COLLECTIONS, TITLE_ALL_SUPPORTS, TITLE_ALL_EMULSIONS } from ' const scanStore = useScanStore() const { - storeURL, + urlParams, storeCritereSelection, activeTab, collectionsOptions, @@ -201,7 +201,7 @@ const showScaleMaxOptions = ref(false) const showCommanditaireOptions = ref(false) const showProducteurOptions = ref(false) -watch(storeURL, async () => { +watch(urlParams, async () => { await loadInitialOptions() }) diff --git a/app/src/components/store/scan.js b/app/src/components/store/scan.js index 46200a4..a141f37 100644 --- a/app/src/components/store/scan.js +++ b/app/src/components/store/scan.js @@ -111,8 +111,9 @@ export const useScanStore = defineStore('scan', () => { ['phototheque', 'phototheque_etranger'].includes(activeTab.value), ) - function createCqlFilter(excludeFields = []) { - let cqlFilter = '' + function getFilters(excludeFields = []) { + let urlFilters = '' + let dataFilters = null const { yearMin, @@ -129,51 +130,58 @@ export const useScanStore = defineStore('scan', () => { let [minX, minY, maxX, maxY] = storeGeometry.value.bbox if (isPhototheque.value){ - // TODO: quand l'API gérera le post, passer directement le WKT de la geom en POST - cqlFilter = `&geom-intersect---geomEmprise=POLYGON((${minX} ${maxY},${minX} ${minY},${maxX} ${minY}, ${maxX} ${maxY},${minX} ${maxY}));3857` - if (activeTab.value === 'phototheque') {cqlFilter += '&isFrance=true'} else {cqlFilter += '&isFrance=false'} - if (commanditaire && !excludeFields.includes('commandita')) cqlFilter += `&isadCommanditaire=${commanditaire}` - if (producteur && !excludeFields.includes('producteur')) cqlFilter += `&producteur=${producteur}` - if (support && !excludeFields.includes('support')) cqlFilter += `&isadPvaSupport=${support}` - if (emulsion && !excludeFields.includes('emulsion')) cqlFilter += `&pvaSpectre=${emulsion}` - if (yearMin) {cqlFilter += `&min---pvaAnnee=${yearMin}`} - if (yearMax) {cqlFilter += `&max---pvaAnnee=${yearMax}`} + // On passe l'emprise en POST + dataFilters = {"geom-intersect---geomEmprise" : `${storeGeometry.value.wkt};3857`} + // Puis on complète l'url + if (activeTab.value === 'phototheque') {urlFilters += 'isFrance=true'} else {urlFilters += 'isFrance=false'} + if (commanditaire && !excludeFields.includes('commandita')) urlFilters += `&isadCommanditaire=${commanditaire}` + if (producteur && !excludeFields.includes('producteur')) urlFilters += `&producteur=${producteur}` + if (support && !excludeFields.includes('support')) urlFilters += `&isadPvaSupport=${support}` + if (emulsion && !excludeFields.includes('emulsion')) urlFilters += `&pvaSpectre=${emulsion}` + if (yearMin) {urlFilters += `&min---pvaAnnee=${yearMin}`} + if (yearMax) {urlFilters += `&max---pvaAnnee=${yearMax}`} } else { // On doit toujours avoir un bbox. GPF de merde qui empêche les requêtes POST. // Donc on fait un filtrage géométrique plus loin (après le fetch) - cqlFilter = `BBOX(geom,${minX},${minY},${maxX},${maxY})` + urlFilters = `BBOX(geom,${minX},${minY},${maxX},${maxY})` - if (yearMin) {cqlFilter += `%20AND%20date_pub%3E%3D${yearMin}`} - if (yearMax) {cqlFilter += `%20AND%20date_fin%3C%3D${yearMax}`} + if (yearMin) {urlFilters += `%20AND%20date_pub%3E%3D${yearMin}`} + if (yearMax) {urlFilters += `%20AND%20date_fin%3C%3D${yearMax}`} if (scaleMin && scaleMax) { - cqlFilter += `%20AND%20echelle%20BETWEEN%20${scaleMin}%20AND%20${scaleMax}` + urlFilters += `%20AND%20echelle%20BETWEEN%20${scaleMin}%20AND%20${scaleMax}` } else if (scaleMin && !scaleMax) { - cqlFilter += `%20AND%20echelle%3E%3D${scaleMin}` + urlFilters += `%20AND%20echelle%3E%3D${scaleMin}` } else if (scaleMax && !scaleMin) { - cqlFilter += `%20AND%20echelle%3C%3D${scaleMax}` + urlFilters += `%20AND%20echelle%3C%3D${scaleMax}` } if (collection && !excludeFields.includes('collection')) - cqlFilter += `%20AND%20collection%3D'${collection}'` + urlFilters += `%20AND%20collection%3D'${collection}'` } - return cqlFilter + return {urlFilters:urlFilters, dataFilters:dataFilters} } - let storeURL = computed(() => { + let urlParams = computed(() => { if (storeGeometry.value.bbox && storeGeometry.value.bbox.length > 0) { - let cqlFilter = createCqlFilter() - - if(isPhototheque.value){ - return `${config.API_PHOTO_URL}${cqlFilter}` + let filters = getFilters() + + // Si photothèque + let url = `${config.API_PHOTO_URL}${filters.urlFilters}` + + // Sinon + if(!isPhototheque.value){ + url = ( + `${config.GEOSERVER_URL}` + + `&request=GetFeature&typeNames=geotheque_mtd:scans&outputFormat=application/json` + + `&cql_filter=${filters.urlFilters}` + + `&apikey=${config.APIKEY}` + ) } - return ( - `${config.GEOSERVER_URL}` + - `&request=GetFeature&typeNames=geotheque_mtd:scans&outputFormat=application/json` + - `&cql_filter=${cqlFilter}` + - `&apikey=${config.APIKEY}` - ) + + // On retourne l'url et les data + return {url: url, data: filters.dataFilters} } return '' }) @@ -319,20 +327,20 @@ export const useScanStore = defineStore('scan', () => { return filteredOptions && filteredOptions.map((option) => option.name) } - async function storeGet(url) { - if (!url) { + async function storeGet(urlParams) { + if (!urlParams) { return } if (activeTab.value.includes('phototheque')) { - await storeGetPhoto(url) + await storeGetPhoto(urlParams) } else { - await storeGetScan(url) + await storeGetScan(urlParams) } } - async function storeGetScan(url) { + async function storeGetScan(urlParams) { try { - const response = await fetch(url) + const response = await fetch(urlParams) // On gère pas le POST ici, tout doit être dans l'url if (response.ok) { const data = await response.json() let list = data.features.map((feature, index) => ({ @@ -360,7 +368,7 @@ export const useScanStore = defineStore('scan', () => { } } - async function fetchAll(url) { + async function fetchAll(urlParams) { // Fonction permettant de récupérer toutes les entités (sans limite de 500) // L'api est paginée avec "page" et "limit", on a de plus un "total" qui indique le nb d'entités let allData = [] @@ -368,9 +376,9 @@ export const useScanStore = defineStore('scan', () => { const limit = 500 let total = 0 do { - const pagedUrl = url.includes('?') ? `${url}&page=${page}&limit=${limit}` : `${url}?page=${page}&limit=${limit}` + const pagedUrl = urlParams.url.includes('?') ? `${urlParams.url}&page=${page}&limit=${limit}` : `${urlParams.url}?page=${page}&limit=${limit}` try { - const response = await fetch(pagedUrl) + const response = await fetch(pagedUrl, urlParams.data ? {method: 'POST', body: JSON.stringify(urlParams.data)} : {}) if (response.ok) { const data = await response.json() if (data.entities && data.entities.length > 0) { @@ -392,10 +400,10 @@ export const useScanStore = defineStore('scan', () => { return allData } - async function storeGetPhoto(url) { + async function storeGetPhoto(urlParams) { // Sert à récupérer les infos et ajouter une échelle dans les propriétés ainsi que le nom complet à la place du nom classique try { - const entities = await fetchAll(url) + const entities = await fetchAll(urlParams) var list = entities.map(entity => (apiToMission(entity))) // On classe par ordre décroissant list.sort((a, b) => b.name.localeCompare(a.name)) @@ -478,7 +486,7 @@ export const useScanStore = defineStore('scan', () => { return { storeScansData, storeGeometry, - storeURL, + urlParams, storeGet, updateGeometry, updateSelectedScan,