Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
  • geocontrib/geocontrib-frontend
  • ext_matthieu/geocontrib-frontend
  • fnecas/geocontrib-frontend
  • MatthieuE/geocontrib-frontend
4 results
Show changes
Hide whitespace changes
Inline Side-by-side
Showing
with 3891 additions and 1627 deletions
src/services/edition-service.js
View file @ ee17a921
import { Draw } from 'ol/interaction'; import { Draw, Snap } from 'ol/interaction';
import GeometryType from 'ol/geom/GeometryType';
import Modify from 'ol/interaction/Modify'; import Modify from 'ol/interaction/Modify';
import Select from 'ol/interaction/Select'; import { Collection } from 'ol';
import MultiPoint from 'ol/geom/MultiPoint'; import MultiPoint from 'ol/geom/MultiPoint';
import Point from 'ol/geom/Point';
import { import {
Fill, Stroke, Style, Circle, Text //RegularShape, Circle as CircleStyle, Text,Icon Fill, Stroke, Style, Circle, Text //RegularShape, Circle as CircleStyle, Text,Icon
} from 'ol/style'; } from 'ol/style';
...@@ -12,53 +10,93 @@ import VectorLayer from 'ol/layer/Vector'; ...@@ -12,53 +10,93 @@ import VectorLayer from 'ol/layer/Vector';
import mapService from '@/services/map-service'; import mapService from '@/services/map-service';
import { buffer } from 'ol/extent'; import { buffer } from 'ol/extent';
// device detection
const isMobile = /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent)
//eslint-disable-next-line
|| /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4));
const editionService = { const editionService = {
drawnFeature: null, drawnFeature: null,
featureToEdit: null, featureToEdit: null,
editing_feature: {}, editing_feature: {},
geom_type: 'linestring', geom_type: 'linestring',
drawStyle: new Style({ // Création d'une collection filtrée
fill: new Fill({ filteredFeatures: new Collection(),
color: 'rgba(255, 255, 255, 0.2)' // Méthode pour créer un style basé sur la couleur actuelle
}), createDrawStyle(isEditing) {
stroke: new Stroke({ return [
color: 'rgba(0, 0, 255, 0.5)', new Style({
lineDash: [], // Style principal pour le polygone
width: 2 fill: new Fill({
}), color: isEditing ? 'rgba(255, 145, 0, .2)' : 'rgba(255, 255, 255, .2)',
image: new Circle({ }),
radius: 7, // Style principal pour la ligne et le tour du polygone
stroke: new Stroke({ stroke: new Stroke({
color: 'rgba(255, 0, 0, 0.5)', color: isEditing ? 'rgba(255, 145, 0, .9)' : 'rgba(255, 45, 0, 0.5)',
lineDash: [], lineDash: [],
width: 2 width: 2,
}), }),
fill: new Fill({ // Style principal pour le point
color: 'rgba(255, 255, 255, 0.5)' image: new Circle({
}) radius: 7,
}), stroke: new Stroke({
text: new Text({ color: 'rgba(255, 0, 0, 0.5)',
font: '12px Calibri,sans-serif', lineDash: [],
fill: new Fill({ color: '#000' }), width: 2
stroke: new Stroke({ }),
color: '#fff', fill: new Fill({
width: 1 color: isEditing ? 'rgba(255, 145, 0, 0.9)' : 'rgba(255, 255, 255, 0.5)'
})
}),
// Style pour le texte, pas utilisé mais peut être conservé au cas où
text: new Text({
font: '12px Calibri,sans-serif',
fill: new Fill({ color: '#000' }),
stroke: new Stroke({
color: '#fff',
width: 1
}),
text: ''
}),
zIndex: 50
}), }),
text: '' // Style pour afficher des points sur les sommets de ligne ou polygone (seulement en mode édition)
}), ...(isEditing
zIndex: 50 ? [
}), // Définition du style de point
new Style({
image: new Circle({
radius: 5,
stroke: new Stroke({
color: 'rgba(255, 145, 0, .9)',
width: 2,
}),
fill: new Fill({
color: 'rgba(255, 145, 0, .5)',
}),
}),
// Récupération des sommets où afficher les points uniquement pour ligne et polygone
geometry: function (feature) {
const geometry = feature.getGeometry();
if (geometry.getType() === 'LineString') {
return new MultiPoint(geometry.getCoordinates()); // Sommets de la ligne
} else if (geometry.getType() === 'Polygon') {
return new MultiPoint(geometry.getCoordinates()[0]); // Sommets du premier anneau
}
return null;
},
}),
]
: []),
];
},
// Méthode pour changer la couleur de la géométrie existante en passant en mode édition
toggleEditionColor(isEditing) {
const drawStyle = this.createDrawStyle(isEditing); // Re-crée le style
this.drawnItems.setStyle(drawStyle); // Applique le style à la couche
},
setEditingFeature(feature) { setEditingFeature(feature) {
this.editing_feature = feature; this.editing_feature = feature;
}, },
startEditFeature(feature){ initFeatureToEdit(feature) {
this.editing_feature = feature; this.editing_feature = feature;
this.draw.setActive(false); this.draw.setActive(false);
this.drawSource.addFeature(feature); this.drawSource.addFeature(feature);
...@@ -71,27 +109,26 @@ const editionService = { ...@@ -71,27 +109,26 @@ const editionService = {
this.drawSource = new VectorSource(); this.drawSource = new VectorSource();
this.drawnItems = new VectorLayer({ this.drawnItems = new VectorLayer({
source: this.drawSource, source: this.drawSource,
style: this.drawStyle, style: this.createDrawStyle(),
zIndex: 4000 zIndex: 4000
}); });
window.olMap = mapService.getMap();
mapService.getMap().addLayer(this.drawnItems); mapService.getMap().addLayer(this.drawnItems);
if (this.draw) { if (this.draw) {
mapService.getMap().removeInteraction(this.draw); mapService.getMap().removeInteraction(this.draw);
} }
let gType = GeometryType.POINT; let gType = 'Point';
if (geomType.toUpperCase().indexOf('POLYGON') >= 0) { if (geomType.toUpperCase().indexOf('POLYGON') >= 0) {
gType = GeometryType.POLYGON; gType = 'Polygon';
} }
else if (geomType.toUpperCase().indexOf('LINE') >= 0) { else if (geomType.toUpperCase().indexOf('LINE') >= 0) {
gType = GeometryType.LINE_STRING; gType = 'LineString';
} }
this.draw = new Draw({ this.draw = new Draw({
source: this.drawSource, source: this.drawSource,
type: gType, type: gType,
style: this.drawStyle, style: this.createDrawStyle()
//geometryName: layer.getGeomAttributeName()
}); });
mapService.getMap().addInteraction(this.draw); mapService.getMap().addInteraction(this.draw);
this.setEditingFeature(undefined); this.setEditingFeature(undefined);
...@@ -103,59 +140,11 @@ const editionService = { ...@@ -103,59 +140,11 @@ const editionService = {
this.draw.setActive(false); this.draw.setActive(false);
}); });
this.selectForUpdate = new Select({
style: [
this.drawStyle,
new Style({
image: new Circle({
radius: 5,
fill: new Fill({
color: 'orange',
}),
}),
geometry: function (feature) {
// return the coordinates of the first ring of the polygon
const coordinates = feature.getGeometry().getCoordinates()[0];
if (feature.getGeometry() instanceof Point){
return feature.getGeometry();
}
return new MultiPoint(coordinates);
},
})
],
filter: (feature) => {
if (this.featureToEdit && feature.id_ === this.featureToEdit.id) {
return true;
} else if (this.drawnFeature && feature.ol_uid === this.drawnFeature.ol_uid) {
return true;
} else if (!this.drawnFeature && !this.featureToEdit) {
return true;
}
return false;
}
});
// On mobile stop drawing when selecting a drawn point
if (isMobile) {
this.selectForUpdate.on('select', () => {
// Permet de stopper le dessin de ligne ou polygone sur mobile
if (this.draw.getActive() && (this.draw.sketchCoords_.length > 2 || this.draw.sketchCoords_[0].length > 3)) {
this.draw.finishDrawing();
}
});
}
this.modify = new Modify({ this.modify = new Modify({
style: this.drawStyle, style: this.createDrawStyle(),
features: this.selectForUpdate.getFeatures() features: this.filteredFeatures, // Limite la modification aux entités filtrées
}); });
// je garde ce bout de code pour l'implementation a venir du snapping
//snapping
// var snap = new Snap({
// source: this.drawSource
//});
// This workaround allows to avoid the ol freeze // This workaround allows to avoid the ol freeze
// referenced bug : https://github.com/openlayers/openlayers/issues/6310 // referenced bug : https://github.com/openlayers/openlayers/issues/6310
// May be corrected in a future version // May be corrected in a future version
...@@ -168,23 +157,18 @@ const editionService = { ...@@ -168,23 +157,18 @@ const editionService = {
} }
}; };
mapService.getMap().addInteraction(this.selectForUpdate);
mapService.getMap().addInteraction(this.modify); mapService.getMap().addInteraction(this.modify);
// je garde ce bout de code pour l'implementation a venir du snapping
//map.addInteraction(snap); // Supprime dynamiquement la feature des entités modifiables
this.drawSource.on('removefeature', (event) => {
const feature = event.feature;
this.filteredFeatures.remove(feature);
});
}, },
resetAllTools() { resetAllTools() {
if (this.draw) { if (this.draw) {
this.draw.setActive(false); this.draw.setActive(false);
} }
if (this.selectForDeletion) {
this.removeSelectInteraction(this.selectForDeletion);
}
if (this.selectForUpdate) {
this.removeSelectInteraction(this.selectForUpdate);
}
if (this.modify) { if (this.modify) {
this.modify.setActive(false); this.modify.setActive(false);
} }
...@@ -193,71 +177,58 @@ const editionService = { ...@@ -193,71 +177,58 @@ const editionService = {
interaction.getFeatures().clear(); interaction.getFeatures().clear();
interaction.setActive(false); interaction.setActive(false);
}, },
activeUpdateFeature() { activeUpdateFeature(isEditing) {
this.resetAllTools(); this.resetAllTools();
this.modify.setActive(true); if (isEditing) {
this.selectForUpdate.setActive(true); // Mise à jour des entités modifiables
this.selectForUpdate.getFeatures().push(this.editing_feature); this.drawSource.forEachFeature((feature) => {
if (
}, (this.featureToEdit && feature.id_ === this.featureToEdit.id) ||
activeDeleteFeature() { (this.drawnFeature && feature.ol_uid === this.drawnFeature.ol_uid) ||
this.resetAllTools(); (!this.drawnFeature && !this.featureToEdit)
if (!this.selectForDeletion) { ) {
const style = new Style({ this.filteredFeatures.push(feature);
fill: new Fill({
color: 'rgba(255, 0, 0, 0.2)'
}),
stroke: new Stroke({
color: 'rgba(255, 0, 0, 0.5)',
width: 2
}),
image: new Circle({
radius: 7,
fill: new Fill({
color: 'rgba(255, 0, 0, 0.5)'
})
}),
text: new Text({
font: '12px Calibri,sans-serif',
fill: new Fill({ color: 'rgba(255, 0, 0, 0.5)' }),
}),
zIndex: 50
});
this.selectForDeletion = new Select({
style: style,
filter: (feature) => {
if (this.featureToEdit && feature.id_ === this.featureToEdit.id) {
return true;
} else if (this.drawnFeature && feature.ol_uid === this.drawnFeature.ol_uid) {
return true;
} else if (!this.drawnFeature && !this.featureToEdit) {
return true;
}
return false;
}
});
mapService.getMap().addInteraction(this.selectForDeletion);
// Lorsque de nouvelles features sont sélectionnées
const selected_features = this.selectForDeletion.getFeatures();
this.listenerKey = selected_features.on('add', (evt) => {
var feature = evt.element;
if (feature) {
setTimeout(() => {
if (confirm('Etes-vous sur de vouloir supprimer cet objet ?')) {
// supprimer l'edition de la sélection
this.selectForDeletion.getFeatures().clear();
// supprimer l'edition de la carte
this.drawSource.removeFeature(feature);
this.editing_feature = undefined;
this.draw.setActive(true);
this.selectForDeletion.setActive(false);
}
}, 300);
} }
}); });
} else {
this.selectForDeletion.setActive(true); this.modify.setActive(true);
}
this.toggleEditionColor(isEditing);
},
/**
* Deletes the currently displayed feature from the map.
* This method removes the feature directly from the source without additional selection steps.
* It assumes that there is only one feature present in the source.
* Resets the color for future drawings to the default to ensure that the editing color
* is not displayed if the edit mode was active prior to deletion.
*/
removeFeatureFromMap() {
// Access the source where the features are stored
const source = this.drawSource; // Replace with the correct reference to your OpenLayers source
// Get all features from the source
const features = source.getFeatures();
// Check if there is a feature to delete
if (features.length > 0 && confirm('Etes-vous sur de vouloir supprimer cet objet ?')) {
try {
// Reset all other tools to ensure only the delete feature functionality is active
this.resetAllTools();
// Remove the feature from the source
const featureToRemove = features[0];
source.removeFeature(featureToRemove);
// Reinitialize the feature edited on the map
this.editing_feature = undefined;
// Toggle draw mode to create a new feature
this.draw.setActive(true);
// Reset color to default
this.toggleEditionColor(false);
// Return operation result after user confirmed to remove the feature
return true;
} catch (error) {
// Log an error if the feature cannot be removed
console.error('Error while deleting the feature: ', error);
}
} }
return false;
}, },
setFeatureToEdit(feature) { setFeatureToEdit(feature) {
...@@ -267,8 +238,44 @@ const editionService = { ...@@ -267,8 +238,44 @@ const editionService = {
removeActiveFeatures() { removeActiveFeatures() {
this.drawnFeature = null; this.drawnFeature = null;
this.featureToEdit = null; this.featureToEdit = null;
} },
addSnapInteraction(map) {
// The snap interaction must be added after the Modify and Draw interactions
// in order for its map browser event handlers to be fired first. Its handlers
// are responsible of doing the snapping.
// Since we can't give a list of source to snap,
// we use this workaround, an interaction collection: https://github.com/openlayers/openlayers/issues/7100
let interactions = [];
map.getLayers().forEach((layer) => {
if (layer instanceof VectorLayer) {
let interaction = new Snap({
source: layer.getSource()
});
interactions.push(interaction);
}
});
for(let snap of interactions ) {
map.addInteraction(snap);
}
},
removeSnapInteraction(map) {
// Find the double click interaction that is on the map.
let interactions = [];
map.getInteractions().forEach(function (interaction) {
if (interaction instanceof Snap) {
interactions.push(interaction);
}
});
// Remove the interaction from the map.
for(let snap of interactions ) {
map.removeInteraction(snap);
}
}
}; };
......
src/services/feature-api.js
View file @ ee17a921
import axios from '@/axios-client.js'; import axios from '@/axios-client.js';
import store from '../store'; import store from '../store';
const baseUrl = store.state.configuration.VUE_APP_DJANGO_API_BASE;
const featureAPI = { const featureAPI = {
async getFeaturesBbox(project_slug, queryParams) { async getFeaturesBbox(project_slug, queryString) {
const baseUrl = store.state.configuration.VUE_APP_DJANGO_API_BASE;
const response = await axios.get( const response = await axios.get(
`${baseUrl}projects/${project_slug}/feature-bbox/${queryParams ? '?' + queryParams : ''}` `${baseUrl}projects/${project_slug}/feature-bbox/${queryString ? '?' + queryString : ''}`
); );
if ( if (
response.status === 200 && response.status === 200 &&
...@@ -22,8 +21,28 @@ const featureAPI = { ...@@ -22,8 +21,28 @@ const featureAPI = {
} }
}, },
async getProjectFeature(project_slug, feature_id) {
const baseUrl = store.state.configuration.VUE_APP_DJANGO_API_BASE;
const response = await axios.get(
`${baseUrl}v2/features/${feature_id}/?project__slug=${project_slug}`
);
if (
response.status === 200 &&
response.data
) {
return response.data;
} else {
return null;
}
},
async getPaginatedFeatures(url) { async getPaginatedFeatures(url) {
const response = await axios.get(url); // Cancel any ongoing search request.
store.dispatch('CANCEL_CURRENT_SEARCH_REQUEST');
// Prepare the cancel token for the new request and store it.
const cancelToken = axios.CancelToken.source();
store.commit('SET_CANCELLABLE_SEARCH_REQUEST', cancelToken);
const response = await axios.get(url, { cancelToken: cancelToken.token });
if ( if (
response.status === 200 && response.status === 200 &&
response.data response.data
...@@ -35,6 +54,7 @@ const featureAPI = { ...@@ -35,6 +54,7 @@ const featureAPI = {
}, },
async getFeatureEvents(featureId) { async getFeatureEvents(featureId) {
const baseUrl = store.state.configuration.VUE_APP_DJANGO_API_BASE;
const response = await axios.get( const response = await axios.get(
`${baseUrl}features/${featureId}/events/` `${baseUrl}features/${featureId}/events/`
); );
...@@ -49,6 +69,7 @@ const featureAPI = { ...@@ -49,6 +69,7 @@ const featureAPI = {
}, },
async getFeatureAttachments(featureId) { async getFeatureAttachments(featureId) {
const baseUrl = store.state.configuration.VUE_APP_DJANGO_API_BASE;
const response = await axios.get( const response = await axios.get(
`${baseUrl}features/${featureId}/attachments/` `${baseUrl}features/${featureId}/attachments/`
); );
...@@ -63,6 +84,7 @@ const featureAPI = { ...@@ -63,6 +84,7 @@ const featureAPI = {
}, },
async getFeatureLinks(featureId) { async getFeatureLinks(featureId) {
const baseUrl = store.state.configuration.VUE_APP_DJANGO_API_BASE;
const response = await axios.get( const response = await axios.get(
`${baseUrl}features/${featureId}/feature-links/` `${baseUrl}features/${featureId}/feature-links/`
); );
...@@ -88,17 +110,16 @@ const featureAPI = { ...@@ -88,17 +110,16 @@ const featureAPI = {
return null; return null;
} }
}, },
// todo : fonction pour faire un post ou un put du signalement
async postOrPutFeature({ method, feature_id, feature_type__slug, project__slug, data }) { async postOrPutFeature({ method, feature_id, feature_type__slug, project__slug, data }) {
let url = `${baseUrl}features/`; const baseUrl = store.state.configuration.VUE_APP_DJANGO_API_BASE;
let url = `${baseUrl}v2/features/`;
if (method === 'PUT') { if (method === 'PUT') {
url += `${feature_id}/? url += `${feature_id}/?
feature_type__slug=${feature_type__slug} feature_type__slug=${feature_type__slug}
&project__slug=${project__slug}`; &project__slug=${project__slug}`;
} }
const response = await axios({ const response = await axios({
url, url,
method, method,
...@@ -112,7 +133,8 @@ const featureAPI = { ...@@ -112,7 +133,8 @@ const featureAPI = {
}, },
async updateFeature({ feature_id, feature_type__slug, project__slug, newStatus }) { async updateFeature({ feature_id, feature_type__slug, project__slug, newStatus }) {
const url = `${baseUrl}features/${feature_id}/?feature_type__slug=${feature_type__slug}&project__slug=${project__slug}`; const baseUrl = store.state.configuration.VUE_APP_DJANGO_API_BASE;
const url = `${baseUrl}v2/features/${feature_id}/?feature_type__slug=${feature_type__slug}&project__slug=${project__slug}`;
const response = await axios({ const response = await axios({
url, url,
...@@ -126,7 +148,39 @@ const featureAPI = { ...@@ -126,7 +148,39 @@ const featureAPI = {
} }
}, },
async projectFeatureBulkUpdateStatus(projecSlug, queryString, newStatus) {
const baseUrl = store.state.configuration.VUE_APP_DJANGO_API_BASE;
const url = `${baseUrl}projects/${projecSlug}/feature-bulk-modify/?${queryString}`;
const response = await axios({
url,
method: 'PUT',
data: { status: newStatus }
});
if (response.status === 200 && response.data) {
return response;
} else {
return null;
}
},
async projectFeatureBulkDelete(projecSlug, queryString) {
const baseUrl = store.state.configuration.VUE_APP_DJANGO_API_BASE;
const url = `${baseUrl}projects/${projecSlug}/feature-bulk-modify/?${queryString}`;
const response = await axios({
url,
method: 'DELETE'
});
if (response.status === 200 && response.data) {
return response;
} else {
return null;
}
},
async postComment({ featureId, comment }) { async postComment({ featureId, comment }) {
const baseUrl = store.state.configuration.VUE_APP_DJANGO_API_BASE;
const response = await axios.post( const response = await axios.post(
`${baseUrl}features/${featureId}/comments/`, { comment } `${baseUrl}features/${featureId}/comments/`, { comment }
); );
...@@ -140,10 +194,12 @@ const featureAPI = { ...@@ -140,10 +194,12 @@ const featureAPI = {
} }
}, },
async postCommentAttachment({ featureId, file, fileName, commentId, title }) { async postCommentAttachment({ featureId, file, fileName, title, isKeyDocument, commentId }) {
const baseUrl = store.state.configuration.VUE_APP_DJANGO_API_BASE;
const formdata = new FormData(); const formdata = new FormData();
formdata.append('file', file, fileName); formdata.append('file', file, fileName);
formdata.append('title', title); formdata.append('title', title);
formdata.append('is_key_document', isKeyDocument);
const response = await axios.put( const response = await axios.put(
`${baseUrl}features/${featureId}/comments/${commentId}/upload-file/`, formdata `${baseUrl}features/${featureId}/comments/${commentId}/upload-file/`, formdata
...@@ -157,6 +213,18 @@ const featureAPI = { ...@@ -157,6 +213,18 @@ const featureAPI = {
return null; return null;
} }
}, },
async getFeaturePosition(projectSlug, featureId, query) {
const searchParams = new URLSearchParams(query);
const baseUrl = store.state.configuration.VUE_APP_DJANGO_API_BASE;
const response = await axios.get(`${baseUrl}projects/${projectSlug}/feature/${featureId}/position-in-list/?${searchParams.toString()}`);
if (response && response.status === 200) {
return response.data;
} else if (response.status === 204) {
return response.statusText;
}
return null;
},
}; };
export default featureAPI; export default featureAPI;
src/services/featureType-api.js
View file @ ee17a921
import axios from '@/axios-client.js'; import axios from '@/axios-client.js';
import store from '../store'; import store from '@/store';
const baseUrl = store.state.configuration.VUE_APP_DJANGO_API_BASE; const baseUrl = store.state.configuration.VUE_APP_DJANGO_API_BASE;
const featureTypeAPI = { const featureTypeAPI = {
async deleteFeatureType(featureType_slug) { async deleteFeatureType(featureType_slug) {
const response = await axios.delete( const response = await axios.delete(
`${baseUrl}feature-types/${featureType_slug}` `${baseUrl}v2/feature-types/${featureType_slug}/`
); );
if ( if (
response.status === 204 response.status === 204
......
src/services/map-api.js
View file @ ee17a921
...@@ -10,14 +10,14 @@ const mapAPI = { ...@@ -10,14 +10,14 @@ const mapAPI = {
basemap['project'] = projectSlug; basemap['project'] = projectSlug;
if (newBasemapIds.includes(basemap.id)) { if (newBasemapIds.includes(basemap.id)) {
return axios return axios
.post(`${baseUrl}base-maps/`, basemap) .post(`${baseUrl}v2/base-maps/`, basemap)
.then((response) => response) .then((response) => response)
.catch((error) => { .catch((error) => {
throw error; throw error;
}); });
} else { } else {
return axios return axios
.put(`${baseUrl}base-maps/${basemap.id}/`, basemap) .put(`${baseUrl}v2/base-maps/${basemap.id}/`, basemap)
.then((response) => response) .then((response) => response)
.catch((error) => { .catch((error) => {
throw error; throw error;
......
src/services/map-service.js
View file @ ee17a921
import TileWMS from 'ol/source/TileWMS'; import TileWMS from 'ol/source/TileWMS';
import axios from '@/axios-client.js';
import { View, Map } from 'ol'; import { View, Map } from 'ol';
import { ScaleLine, Zoom, Attribution } from 'ol/control'; import { ScaleLine, Zoom, Attribution, FullScreen } from 'ol/control';
import TileLayer from 'ol/layer/Tile'; import TileLayer from 'ol/layer/Tile';
import { transform, transformExtent } from 'ol/proj.js'; import { transform, transformExtent, fromLonLat } from 'ol/proj';
import { defaults } from 'ol/interaction'; import { defaults } from 'ol/interaction';
import XYZ from 'ol/source/XYZ'; import XYZ from 'ol/source/XYZ';
import VectorTileLayer from 'ol/layer/VectorTile'; import VectorTileLayer from 'ol/layer/VectorTile';
...@@ -11,35 +10,44 @@ import VectorTileSource from 'ol/source/VectorTile'; ...@@ -11,35 +10,44 @@ import VectorTileSource from 'ol/source/VectorTile';
import { MVT, GeoJSON } from 'ol/format'; import { MVT, GeoJSON } from 'ol/format';
import { boundingExtent } from 'ol/extent'; import { boundingExtent } from 'ol/extent';
import Overlay from 'ol/Overlay'; import Overlay from 'ol/Overlay';
import { import { Fill, Stroke, Style, Circle } from 'ol/style';
Fill, Stroke, Style, Circle //RegularShape, Circle as CircleStyle, Text,Icon
} from 'ol/style';
import { asArray } from 'ol/color'; import { asArray } from 'ol/color';
import VectorSource from 'ol/source/Vector'; import VectorSource from 'ol/source/Vector';
import VectorLayer from 'ol/layer/Vector'; import VectorLayer from 'ol/layer/Vector';
import { fromLonLat } from 'ol/proj.js'; import WMTSTileGrid from 'ol/tilegrid/WMTS';
import OverlayPositioning from 'ol/OverlayPositioning'; import WMTS, { optionsFromCapabilities } from 'ol/source/WMTS';
import WMTSCapabilities from 'ol/format/WMTSCapabilities';
import Geolocation from 'ol/Geolocation.js';
import Feature from 'ol/Feature.js';
import Point from 'ol/geom/Point.js';
import { applyStyle } from 'ol-mapbox-style';
import { isEqual } from 'lodash';
let dictLayersToLeaflet = {};
let statusList = [ import axios from '@/axios-client.js';
{ import router from '@/router';
name: 'Brouillon', import store from '@/store';
value: 'draft', import { retrieveFeatureProperties } from '@/utils';
},
{ const parser = new WMTSCapabilities();
name: 'Publié',
value: 'published', let dictLayersToMap = {};
}, let layersCount = 0;
{
name: 'Archivé', const geolocationStyle = new Style({
value: 'archived', image: new Circle({
}, radius: 6,
{ fill: new Fill({
name: 'En attente de publication', color: '#3399CC',
value: 'pending', }),
}, stroke: new Stroke({
]; color: '#fff',
width: 2,
}),
}),
});
const mapService = { const mapService = {
layers: [], layers: [],
...@@ -52,50 +60,73 @@ const mapService = { ...@@ -52,50 +60,73 @@ const mapService = {
map: undefined, map: undefined,
queryParams: {},
geolocation: undefined, // for geolocation
geolocationSource: null, // for geolocation
positionFeature: null, // for geolocation
lastPosition: null, // for geolocation
getMap() { getMap() {
return this.map; return this.map;
}, },
destroyMap() { destroyMap() {
this.map = undefined; this.map = undefined;
}, },
createMap(el, options) { createMap(el, options) {
const { const {
lat, lat,
lng, lng,
mapDefaultViewCenter, mapDefaultViewCenter,
mapDefaultViewZoom, mapDefaultViewZoom,
maxZoom,
zoom, zoom,
zoomControl = true, zoomControl = true,
fullScreenControl = false,
geolocationControl = false,
interactions = { doubleClickZoom: false, mouseWheelZoom: false, dragPan: true }, interactions = { doubleClickZoom: false, mouseWheelZoom: false, dragPan: true },
controls = [
new Attribution({ collapsible: false }),
new ScaleLine({
units: 'metric',
}),
],
} = options; } = options;
if (el.innerHTML) { if (fullScreenControl) {
el.innerHTML = ''; controls.push(new FullScreen({ tipLabel: 'Mode plein écran' }));
} }
this.map = new Map({ const mapOptions = {
layers: [], layers: [],
target: el, target: el,
controls: [ controls,
new Attribution(),
new ScaleLine({
units: 'metric',
})],
interactions: defaults(interactions), interactions: defaults(interactions),
view: new View({ view: new View({
center: transform([ center: transform([ //* since 0 is considered false, check for number instead of just defined (though boolean will pass through)
!lng ? mapDefaultViewCenter[1] : lng, Number(lng) ? lng : mapDefaultViewCenter[1],
!lat ? mapDefaultViewCenter[0] : lat, Number(lat) ? lat : mapDefaultViewCenter[0],
], 'EPSG:4326', 'EPSG:3857'), ], 'EPSG:4326', 'EPSG:3857'),
zoom: !zoom ? mapDefaultViewZoom : zoom zoom: Number(mapDefaultViewZoom) ? mapDefaultViewZoom : zoom,
maxZoom
}), }),
}); };
this.map = new Map(mapOptions);
if (zoomControl) { if (zoomControl) {
this.map.addControl(new Zoom({ zoomInTipLabel: 'Zoomer', zoomOutTipLabel: 'Dézoomer' })); this.map.addControl(new Zoom({ zoomInTipLabel: 'Zoomer', zoomOutTipLabel: 'Dézoomer' }));
} }
if (geolocationControl) {
this.initGeolocation();
}
this.map.once('rendercomplete', () => { this.map.once('rendercomplete', () => {
this.map.updateSize(); this.map.updateSize();
}); });
...@@ -116,46 +147,111 @@ const mapService = { ...@@ -116,46 +147,111 @@ const mapService = {
overlay.setPosition(undefined); overlay.setPosition(undefined);
closer.blur(); closer.blur();
return false; return false;
}; };
} }
this.map.addOverlay(this.overlay); this.map.addOverlay(this.overlay);
this.map.on('click', this.onMapClick.bind(this)); this.map.on('click', this.onMapClick.bind(this));
// catch event from sidebarLayer to update layers order (since all maps use it now)
document.addEventListener('change-layers-order', (event) => {
// Reverse is done because the first layer in order has to be added in the map in last.
// Slice is done because reverse() changes the original array, so we make a copy first
this.updateOrder(event.detail.layers.slice().reverse());
});
return this.map; return this.map;
}, },
onMapClick(event) { addRouterToPopup({ featureId, featureTypeSlug, index }) {
let self = this;
const getFeaturePosition = async (searchParams) => {
const response = await axios.get(`${store.state.configuration.VUE_APP_DJANGO_API_BASE}projects/${router.history.current.params.slug}/feature/${featureId}/position-in-list/?${searchParams.toString()}`);
return response.data;
};
const goToBrowseFeatureDetail = async () => {
const currentQuery = { ...this.queryParams };
if (this.queryParams && this.queryParams.filter === 'feature_type_slug') { // when feature_type is the default filter of the project,
currentQuery['feature_type_slug'] = featureTypeSlug; // get its slug for the current feature
}
const searchParams = new URLSearchParams(currentQuery); // urlSearchParams allow to get rid of undefined values
if (!index >= 0) { // with mvt feature, there can't be an index
index = await getFeaturePosition(searchParams);
}
router.push({
name: 'details-signalement-filtre',
query: {
...Object.fromEntries(searchParams.entries()), // transform search params into object and spread it into query
offset: index
}
});
};
function goToFeatureDetail() {
router.push({
name: 'details-signalement',
params: {
slug_type_signal: featureTypeSlug,
slug_signal: featureId,
},
});
}
const goToFeatureTypeDetail = () => {
router.push({
name: 'details-type-signalement',
params: {
feature_type_slug: featureTypeSlug,
},
});
};
const isFeatureBrowsing = (router.history.current.name === 'project_detail' || router.history.current.name === 'liste-signalements');
const featureEl = document.getElementById('goToFeatureDetail');
if (featureEl) featureEl.onclick = isFeatureBrowsing ? goToBrowseFeatureDetail : goToFeatureDetail;
const featureTypeEl = document.getElementById('goToFeatureTypeDetail');
if (featureTypeEl) featureTypeEl.onclick = goToFeatureTypeDetail;
},
async onMapClick (event) {
//* retrieve features under pointer
const features = this.map.getFeaturesAtPixel(event.pixel, { const features = this.map.getFeaturesAtPixel(event.pixel, {
layerFilter(l) { layerFilter: (l) => l === this.mvtLayer || this.olLayer
return l === self.mvtLayer;
},
}); });
if (features && features.length > 0) { //* prepare popup content
const popupContent = this._createContentPopup(features[0], if (features && features.length > 0 && this.content) {
this.mvtLayer.featureTypes, this.mvtLayer.project_slug); const featureId = features[0].properties_ ? features[0].properties_.feature_id : features[0].id_;
this.content.innerHTML = popupContent; const isEdited = router.history.current.name === 'editer-signalement' &&
this.overlay.setPosition(event.coordinate); router.history.current.params.slug_signal === featureId; //* avoid opening popup on feature currently edited
} if (featureId && !isEdited) {
//const queryableLayerSelected = document.getElementById(`queryable-layers-selector-${this.wmsParams.basemapId}`).getElementsByClassName('selected')[0].textContent; const popupContent = await this._createContentPopup(features[0]);
if (this.layers) { this.content.innerHTML = popupContent.html;
this.overlay.setPosition(event.coordinate);
this.addRouterToPopup({
featureId,
featureTypeSlug: popupContent.feature_type ? popupContent.feature_type.slug : '',
index: popupContent.index,
});
}
} else if (this.layers) { // If no feature under the mouse pointer, attempt to find a query layer
const queryLayer = this.layers.find(x => x.query); const queryLayer = this.layers.find(x => x.query);
// pour compatibilité avec le proxy django
const proxyparams = [
'request',
'service',
'srs',
'version',
'bbox',
'height',
'width',
'layers',
'query_layers',
'info_format', 'x', 'y', 'i', 'j',
];
if (queryLayer) { if (queryLayer) {
// pour compatibilité avec le proxy django
const proxyparams = [
'request',
'service',
'srs',
'version',
'bbox',
'height',
'width',
'layers',
'query_layers',
'info_format', 'x', 'y', 'i', 'j',
];
const url = this.getFeatureInfoUrl(event, queryLayer); const url = this.getFeatureInfoUrl(event, queryLayer);
const urlInfos = url.split('?'); const urlInfos = url ? url.split('?') : [];
const urlParams = new URLSearchParams(urlInfos[1]); const urlParams = new URLSearchParams(urlInfos[1]);
const params = {}; const params = {};
Array.from(urlParams.keys()).forEach(param => { Array.from(urlParams.keys()).forEach(param => {
...@@ -164,42 +260,31 @@ const mapService = { ...@@ -164,42 +260,31 @@ const mapService = {
} }
}); });
params.url = urlInfos[0]; params.url = urlInfos[0];
let self = this;
axios.get( axios.get(
window.proxy_url, window.proxy_url,
{ { params }
params: params,
}
).then(response => { ).then(response => {
const data = response.data; const data = response.data;
var err = typeof data === 'object' ? null : data; const err = typeof data === 'object' ? null : data;
if (data.features || err) { if (data.features || err) this.showGetFeatureInfo(err, event, data, queryLayer);
self.showGetFeatureInfo(err, event, data, queryLayer); }).catch(error => {
} throw error;
}) });
.catch(error => {
throw (error);
}
);
} }
} }
}, },
showGetFeatureInfo: function (err, event, data, layer) {
showGetFeatureInfo: function (err, event, data, layer) {
let content; let content;
if (err) { if (err) {
content = ` content = `
<h4>${layer.options.title}</h4> <h4>${layer.options.title}</h4>
<p>Données de la couche inaccessibles</p> <p>Données de la couche inaccessibles</p>
`; `;
this.content.innerHTML = content; this.content.innerHTML = content;
this.overlay.setPosition(event.coordinate); this.overlay.setPosition(event.coordinate);
} else { } else { // Otherwise show the content in a popup
// Otherwise show the content in a popup
const contentLines = []; const contentLines = [];
let contentTitle; let contentTitle;
if (data.features.length > 0) { if (data.features.length > 0) {
...@@ -214,12 +299,12 @@ const mapService = { ...@@ -214,12 +299,12 @@ const mapService = {
this.content.innerHTML = content; this.content.innerHTML = content;
this.overlay.setPosition(event.coordinate); this.overlay.setPosition(event.coordinate);
} }
} }
}, },
getFeatureInfoUrl(event, layer) { getFeatureInfoUrl(event, layer) {
const olLayer = dictLayersToLeaflet[layer.id]; const olLayer = dictLayersToMap[layer.id];
const source = olLayer.getSource(); const source = olLayer.getSource();
const viewResolution = this.map.getView().getResolution(); const viewResolution = this.map.getView().getResolution();
let url; let url;
...@@ -229,69 +314,164 @@ const mapService = { ...@@ -229,69 +314,164 @@ const mapService = {
} }
return url; return url;
}, },
fitBounds(bounds) { fitBounds(bounds) {
let ext = boundingExtent([[bounds[0][1], bounds[0][0]], [bounds[1][1], bounds[1][0]]]); let ext = boundingExtent([[bounds[0][1], bounds[0][0]], [bounds[1][1], bounds[1][0]]]);
ext = transformExtent(ext, 'EPSG:4326', 'EPSG:3857'); ext = transformExtent(ext, 'EPSG:4326', 'EPSG:3857');
this.map.getView().fit(ext, { padding: [25, 25, 25, 25] }); this.map.getView().fit(ext, { padding: [25, 25, 25, 25], maxZoom: 16 });
}, },
fitExtent(ext) { fitExtent(ext) {
//ext = transformExtent(ext, 'EPSG:4326', 'EPSG:3857'); //ext = transformExtent(ext, 'EPSG:4326', 'EPSG:3857');
this.map.getView().fit(ext, { padding: [25, 25, 25, 25] }); this.map.getView().fit(ext, { padding: [25, 25, 25, 25] });
}, },
/**
* Add multiple layers to the map. If custom layers are defined, they will be added using `addConfigLayer`.
* If no custom layers are defined, a default basemap will be added based on the schema type (WMS, WMTS, or XYZ).
*
* @param {Array} layers - Array of layer configurations to be added.
* @param {string} serviceMap - URL or service for the map base layer.
* @param {Object} optionsMap - Options for the base layer (e.g., attribution, noWrap).
* @param {string} schemaType - Type of the base layer (either 'wms', 'wmts', or fallback to XYZ).
*
* @returns {void}
*/
addLayers: function (layers, serviceMap, optionsMap, schemaType) { addLayers: function (layers, serviceMap, optionsMap, schemaType) {
// Set the current layers to the provided layers array
this.layers = layers; this.layers = layers;
if (layers) { //* if admin has defined basemaps for this project
let count = 0;
layers.forEach((layer) => {
if (layer) { // Check if custom layers are defined (admin-defined basemaps)
count +=1; if (layers) {
const options = layer.options; // Reset the layer count for managing Z-index
if (options) { layersCount = 0;
options.noWrap = true;
options.opacity = layer.opacity; // Loop through each layer and add it using the addConfigLayer method
if (layer.schema_type === 'wms') { layers.forEach((layer) => {
if (layer.queryable) { if (!layer) {
options.title = layer.title; console.error('Layer is missing in the provided layers array.');
dictLayersToLeaflet[layer.id] = this.addWMSLayer(layer.service, options); } else {
} else { this.addConfigLayer(layer);
dictLayersToLeaflet[layer.id] = this.addWMSLayer(layer.service, options);
}
} else if (layer.schema_type === 'tms') {
const layerTms = new TileLayer({
source: new XYZ({
attributions: options.attribution,
url: layer.service.replace('{s}', '{a-c}')
})
});
this.map.addLayer(layerTms);
dictLayersToLeaflet[layer.id] = layerTms;
}
}
dictLayersToLeaflet[layer.id].setZIndex(count);
} }
}); });
} else { //* else when no basemaps defined }
// If no custom layers are defined, fall back to the base map
else {
// Ensure that options for the base map are provided
if (!optionsMap) {
console.error('Options for the base map are missing.');
return;
}
// Set noWrap to true to prevent map wrapping around the globe
optionsMap.noWrap = true; optionsMap.noWrap = true;
// Handle the base map based on the schema type (WMS, WMTS, or fallback)
if (schemaType === 'wms') { if (schemaType === 'wms') {
this.addWMSLayer(serviceMap, optionsMap); // Add WMS layer if the schema type is 'wms'
if (!serviceMap) {
console.error('Service URL is missing for WMS base layer.');
} else {
this.addWMSLayer(serviceMap, optionsMap);
}
} else if (schemaType === 'wmts') {
// Add WMTS layer if the schema type is 'wmts'
if (!serviceMap) {
console.error('Service URL is missing for WMTS base layer.');
} else {
this.addWMTSLayerFromCapabilities(serviceMap, optionsMap);
}
} else { } else {
const layer = new TileLayer({ // Default to XYZ tile layer if the schema type is not WMS or WMTS
source: new XYZ({ if (!serviceMap) {
attributions: optionsMap.attribution, console.error('Service URL is missing for XYZ base layer.');
url: serviceMap.replace('{s}', '{a-c}') } else {
}) const layer = new TileLayer({
}); source: new XYZ({
this.map.addLayer(layer); attributions: optionsMap.attribution, // Attribution for the layer
url: serviceMap.replace('{s}', '{a-c}') // Handle subdomains in the URL
})
});
this.map.addLayer(layer); // Add the layer to the map
}
}
}
},
/**
* Add a configuration layer (WMS, WMTS, or TMS) to the map based on the layer's schema type.
* The function handles multiple types of map layers and applies the necessary configurations.
*
* @param {Object} layer - The layer configuration object.
* @param {Object} layer.options - Options for the layer (e.g., opacity, noWrap).
* @param {string} layer.schema_type - Type of the layer ('wms', 'wmts', or 'tms').
* @param {string} layer.service - URL or service for the layer.
* @param {number} layer.opacity - Opacity of the layer.
*
* @returns {void}
*/
addConfigLayer: async function (layer) {
// Check if the layer object is provided
if (!layer) {
console.error('Layer object is missing');
return;
}
// Increment the layers count (to manage Z-index)
layersCount += 1;
// Extract options from the layer
const options = layer.options;
// Check if options are provided for the layer
if (!options) {
console.error(`Options are missing for layer: ${layer.id}`);
return;
}
// Set default layer options (noWrap and opacity)
options.noWrap = true; // Prevent wrapping of the layer around the globe
options['opacity'] = layer.opacity; // Set opacity based on the layer's configuration
// Handle WMS layers
if (layer.schema_type === 'wms') {
// Add title for queryable WMS layers
if (layer.queryable) options['title'] = layer.title;
dictLayersToMap[layer.id] = this.addWMSLayer(layer.service, options); // Add WMS layer
}
// Handle WMTS layers
else if (layer.schema_type === 'wmts') {
try {
const newLayer = await this.addWMTSLayerFromCapabilities(layer.service, options); // Add WMTS layer asynchronously
dictLayersToMap[layer.id] = newLayer;
} catch (error) {
console.error(`Error adding WMTS layer: ${layer.id}`, error);
}
}
// Handle TMS layers
else if (layer.schema_type === 'tms') {
try {
const newLayer = await this.addTMSLayer(layer.service, options); // Add TMS layer asynchronously
dictLayersToMap[layer.id] = newLayer;
} catch (error) {
console.error(`Error adding TMS layer: ${layer.id}`, error);
} }
} else {
console.error(`Unsupported schema type: ${layer.schema_type}`);
}
// Set Z-index for the layer if it was successfully added to the map
if (dictLayersToMap[layer.id]) {
dictLayersToMap[layer.id].setZIndex(layersCount);
} else {
console.error(`Failed to add layer to map: ${layer.id}`);
} }
}, },
addWMSLayer: function (url, options) { addWMSLayer: function (url, options) {
options.VERSION = '1.1.1'; // pour compatibilité avec le proxy django options.VERSION = options.version || '1.3.0'; // pour compatibilité avec le proxy django
const source = new TileWMS({ const source = new TileWMS({
attributions: options.attribution, attributions: options.attribution,
url: url, url: url,
...@@ -300,25 +480,183 @@ const mapService = { ...@@ -300,25 +480,183 @@ const mapService = {
}); });
const layer = new TileLayer({ const layer = new TileLayer({
source: source source: source,
opacity: parseFloat(options.opacity),
}); });
this.map.addLayer(layer); this.map.addLayer(layer);
return layer; return layer;
}, },
getWMTSLayerCapabilities: async function (url) {
// adapted from : https://openlayers.org/en/latest/examples/wmts-layer-from-capabilities.html
// get capabilities with request to the service
try {
const response = await fetch(url);
const text = await response.text();
const capabilities = parser.read(text);
return capabilities;
} catch (error) {
console.error(error);
}
},
addWMTSLayerFromCapabilities: async function (url, options) {
// adapted from : https://git.neogeo.fr/onegeo-suite/sites/onegeo-suite-site-maps-vuejs/-/blob/draft/src/services/MapService.ts
const wmtsCapabilities = await this.getWMTSLayerCapabilities(url);
const { layer, opacity, attributions, format, ignoreUrlInCapabiltiesResponse } = options;
let sourceOptions;
try {
if (format) {
sourceOptions = optionsFromCapabilities(wmtsCapabilities, { layer, format });
} else {
sourceOptions = optionsFromCapabilities(wmtsCapabilities, { layer });
}
}
catch (e) {
console.error(e);
if (e.message == 'projection is null') {
return 'Projection non reconnue';
}
else {
return 'Problème d\'analyse du getCapabilities';
}
}
if (ignoreUrlInCapabiltiesResponse) {
var searchMask = 'request(=|%3D)getCapabilities';
var regEx = new RegExp(searchMask, 'ig');
var replaceMask = '';
sourceOptions.urls[0] = url.replace(regEx, replaceMask);
}
sourceOptions.attributions = attributions;
sourceOptions.crossOrigin= 'anonymous';
if (layer === 'ORTHOIMAGERY.ORTHOPHOTOS') {
// un peu bourrin mais il semble y avoir qq chose de spécifique avec cette couche ORTHO
// https://geoservices.ign.fr/documentation/services/utilisation-web/affichage-wmts/openlayers-et-wmts
sourceOptions.tileGrid = new WMTSTileGrid({
origin: [-20037508,20037508],
resolutions: [
156543.03392804103,
78271.5169640205,
39135.75848201024,
19567.879241005125,
9783.939620502562,
4891.969810251281,
2445.9849051256406,
1222.9924525628203,
611.4962262814101,
305.74811314070485,
152.87405657035254,
76.43702828517625,
38.218514142588134,
19.109257071294063,
9.554628535647034,
4.777314267823517,
2.3886571339117584,
1.1943285669558792,
0.5971642834779396,
0.29858214173896974,
0.14929107086948493,
0.07464553543474241
],
matrixIds: ['0','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19'],
});
}
const newLayer = new TileLayer({
opacity: parseFloat(opacity) || 1,
source: new WMTS(sourceOptions),
});
this.map.addLayer(newLayer);
return newLayer;
},
/**
* Add a TMS (Tile Map Service) layer to the map.
* If the URL includes `.pbf` (vector tiles), it will apply a style from the provided options.
* The layer will be added to the map, and the style will be applied asynchronously if needed.
*
* @param {string} url - The URL of the TMS layer service.
* @param {Object} options - Configuration options for the TMS layer, including opacity and style.
* @param {string} options.style - URL to the style JSON (required for vector tiles).
* @param {number} options.opacity - Opacity of the layer (optional).
*
* @returns {VectorTileLayer} - The TMS layer added to the map.
*/
async addTMSLayer(url, options) {
// Check if the URL is missing
if (!url) {
console.error('TMS layer service URL is missing');
// Check if the options object is missing
} else if (!options) {
console.error('TMS layer options object is missing');
} else {
let layerTms;
// Check if the URL refers to PBF (vector tiles)
if (url.includes('pbf')) {
// Ensure that a style is provided for vector tiles
if (!options.style) {
console.error('TMS layer from PBF requires a style in the options');
} else {
// Handle PBF vector tiles
layerTms = new VectorTileLayer({
source: new VectorTileSource({
format: new MVT(), // Format for vector tiles (Mapbox Vector Tiles)
url: url.replace('{s}', '{a-c}'), // Handle subdomain pattern in the URL if present
attributions: options.attribution,
})
});
try {
// Fetch the style JSON from the provided URL
const response = await fetch(options.style);
const json = await response.json();
// Apply the fetched style to the layer (asynchronous)
await applyStyle(layerTms, json);
} catch (error) {
// Handle any errors during the fetch process
console.error('Error loading the style JSON:', error);
}
}
} else {
// Handle PNG raster tiles
layerTms = new TileLayer({
source: new XYZ({
url: url.replace('{s}', '{a-c}'), // Use the PNG TMS URL pattern
attributions: options.attribution,
})
});
}
// Set the opacity for the layer (default to 1.0 if not specified)
layerTms.setOpacity(parseFloat(options.opacity || 1.0));
// Add the TMS layer to the map
this.map.addLayer(layerTms);
// Return the TMS layer for further manipulation if needed
return layerTms;
}
},
// Remove the base layers (not the features) // Remove the base layers (not the features)
removeLayers: function () { removeLayers: function () {
Object.values(dictLayersToLeaflet).forEach(element => { Object.values(dictLayersToMap).forEach(element => {
this.map.removeLayer(element); this.map.removeLayer(element);
}); });
dictLayersToMap = {};
dictLayersToLeaflet = {};
}, },
updateOpacity(layerId, opacity) { updateOpacity(layerId, opacity) {
const layer = dictLayersToLeaflet[layerId]; const layer = dictLayersToMap[layerId];
layer.setOpacity(parseFloat(opacity)); if (layer) {
layer.setOpacity(parseFloat(opacity));
} else {
console.error(`Layer with id: ${layerId} couldn't be found for opacity update`);
}
}, },
updateOrder(layers) { updateOrder(layers) {
...@@ -331,24 +669,71 @@ const mapService = { ...@@ -331,24 +669,71 @@ const mapService = {
this.addLayers(layers); this.addLayers(layers);
}, },
retrieveFeatureColor: function (featureType, properties) { retrieveFeatureStyle: function (featureType, properties) {
const colorsStyle = featureType.colors_style; const { colors_style, customfield_set } = featureType;
if (featureType && colorsStyle && colorsStyle.custom_field_name) { let { color, opacity } = featureType;
const currentValue = properties[colorsStyle.custom_field_name]; if (colors_style && colors_style.custom_field_name && customfield_set) {
const colorStyle = colorsStyle.colors[currentValue]; const customField = customfield_set.find((el) => el.name === colors_style.custom_field_name);
return colorStyle ? colorStyle : featureType.color; if (customField) {
} else { const fieldType = customField.field_type;
return featureType.color; let currentValue = properties[colors_style.custom_field_name];
if (currentValue && typeof currentValue === 'string') currentValue = currentValue.trim(); // remove leading and trailing whitespaces
switch (fieldType) {
case 'list':
if (currentValue) {
color = colors_style.colors && colors_style.colors[currentValue];
opacity = colors_style.opacities && colors_style.opacities[currentValue];
}
break;
case 'char': //* if the custom field is supposed to be a string
//* check if its current value is empty or not, to select a color | https://redmine.neogeo.fr/issues/14048
color = colors_style.value.colors && colors_style.value.colors[currentValue ? 'Non vide' : 'Vide'];
opacity = colors_style.value.opacities && colors_style.value.opacities[currentValue ? 'Non vide' : 'Vide'];
break;
case 'boolean':
color = colors_style.value.colors && colors_style.value.colors[currentValue ? 'Coché' : 'Décoché'];
opacity = colors_style.value.opacities && colors_style.value.opacities[currentValue ? 'Coché' : 'Décoché'];
break;
}
}
} }
return { color, opacity };
}, },
addVectorTileLayer: function (url, projectId, projectSlug, featureTypes, formFilters) { addVectorTileLayer: function ({ url, project_slug, featureTypes, formFilters = {}, queryParams = {} }) {
let format_cfg = {/*featureClass: Feature*/ }; const projectId = project_slug.split('-')[0];
const format_cfg = {/*featureClass: Feature*/ };
const mvt = new MVT(format_cfg); const mvt = new MVT(format_cfg);
function customLoader(tile, src) {
tile.setLoader(function(extent, resolution, projection) {
const token = () => {
const re = new RegExp('csrftoken=([^;]+)');
const value = re.exec(document.cookie);
return (value != null) ? unescape(value[1]) : null;
};
fetch(src, {
credentials: 'include',
headers: {
'X-CSRFToken': token()
},
}).then(function(response) {
response.arrayBuffer().then(function(data) {
const format = tile.getFormat(); // ol/format/MVT configured as source format
const features = format.readFeatures(data, {
extent: extent,
featureProjection: projection
});
tile.setFeatures(features);
});
});
});
}
const options = { const options = {
urls: [], urls: [],
matrixSet: 'EPSG:3857' matrixSet: 'EPSG:3857',
tileLoadFunction: customLoader,
}; };
options.format = mvt; options.format = mvt;
const layerSource = new VectorTileSource(options); const layerSource = new VectorTileSource(options);
...@@ -360,107 +745,104 @@ const mapService = { ...@@ -360,107 +745,104 @@ const mapService = {
style: styleFunction, style: styleFunction,
source: layerSource source: layerSource
}); });
this.mvtLayer.featureTypes = featureTypes; this.featureTypes = featureTypes; // store featureTypes for popups
this.mvtLayer.project_slug = projectSlug; this.projectSlug = project_slug; // store projectSlug for popups
this.queryParams = queryParams; // store queryParams for popups
this.mvtLayer.setZIndex(30); this.mvtLayer.setZIndex(30);
this.map.addLayer(this.mvtLayer); this.map.addLayer(this.mvtLayer);
window.layerMVT = this.mvtLayer; window.layerMVT = this.mvtLayer;
}, },
/**
* Determines the style for a given feature based on its type and applicable filters.
*
* @param {Object} feature - The feature to style.
* @param {Array} featureTypes - An array of available feature types.
* @param {Object} formFilters - Filters applied through the form.
* @returns {ol.style.Style} - The OpenLayers style for the feature.
*/
getStyle: function (feature, featureTypes, formFilters) { getStyle: function (feature, featureTypes, formFilters) {
const properties = feature.getProperties(); const properties = feature.getProperties();
let featureType; let featureType;
// GeoJSON
if(properties.feature_type){ // Determine the feature type. Differentiate between GeoJSON and MVT sources.
if (properties && properties.feature_type) {
// Handle GeoJSON feature type
featureType = featureTypes featureType = featureTypes
.find((ft) => ft.slug === (properties.feature_type.slug || properties.feature_type)); .find((ft) => ft.slug === (properties.feature_type.slug || properties.feature_type));
} else { //MVT } else {
// Handle MVT feature type
featureType = featureTypes.find((x) => x.slug.split('-')[0] === '' + properties.feature_type_id); featureType = featureTypes.find((x) => x.slug.split('-')[0] === '' + properties.feature_type_id);
} }
const color = this.retrieveFeatureColor(featureType, properties);
const colorValue = if (featureType) {
color.value && color.value.length ? // Retrieve the style (color, opacity) for the feature.
color.value : typeof color === 'string' && color.length ? const { color, opacity } = this.retrieveFeatureStyle(featureType, properties);
color : '#000000'; let colorValue = '#000000'; // Default color
const rgbaColor = asArray(colorValue); // Determine the color value based on the feature type.
rgbaColor[3] = 0.5;//opacity if (color && color.value && color.value.length) {
const hiddenStyle = new Style(); colorValue = color.value;
} else if (typeof color === 'string' && color.length) {
const defaultStyle = new Style( colorValue = color;
{ }
// Convert the color value to RGBA and apply the opacity.
const rgbaColor = asArray(colorValue);
rgbaColor[3] = opacity || 0.5; // Default opacity
// Define the default style for the feature.
const defaultStyle = new Style({
image: new Circle({ image: new Circle({
fill: new Fill( fill: new Fill({ color: rgbaColor }),
{ stroke: new Stroke({ color: colorValue, width: 2 }),
color: rgbaColor,
},
),
stroke: new Stroke(
{
color: colorValue,
width: 2,
},
),
radius: 5, radius: 5,
}), }),
stroke: new Stroke( stroke: new Stroke({ color: colorValue, width: 2 }),
{ fill: new Fill({ color: rgbaColor }),
color: colorValue, });
width: 2,
},
),
fill: new Fill(
{
color: rgbaColor,
},
),
},
);
// Filtre sur le feature type // Define a hidden style to apply when filters are active.
if(formFilters){ const hiddenStyle = new Style();
if (formFilters.type && formFilters.type.selected) {
if (featureType.title !== formFilters.type.selected) { // Apply filters based on feature type, status, and title.
if (formFilters) {
if (formFilters.type && formFilters.type.length > 0 && !formFilters.type.includes(featureType.slug)) {
return hiddenStyle; return hiddenStyle;
} }
} if (formFilters.status && formFilters.status.length > 0 && !formFilters.status.includes(properties.status)) {
// Filtre sur le statut
if (formFilters.status && formFilters.status.selected.value) {
if (properties.status !== formFilters.status.selected.value) {
return hiddenStyle; return hiddenStyle;
} }
} if (formFilters.title && !properties.title.toLowerCase().includes(formFilters.title.toLowerCase())) {
// Filtre sur le titre
if (formFilters.title) {
if (!properties.title.toLowerCase().includes(formFilters.title.toLowerCase())) {
return hiddenStyle; return hiddenStyle;
} }
} }
}
return defaultStyle; // Return the default style if no filters are applied or if the feature passes the filters.
return defaultStyle;
} else {
console.error('No corresponding featureType found.');
return new Style();
}
}, },
addFeatures: function (features, filter, featureTypes, addToMap = true) { addFeatures: function ({ features, filter = {}, featureTypes, addToMap = true, project_slug, queryParams = {} }) {
console.log(addToMap); console.log('addToMap', addToMap);
const drawSource = new VectorSource(); const drawSource = new VectorSource();
let retour; let retour;
// TODO verifier utilité de cette boucle et remplacer par readFeatures plutot let index = 0;
features.forEach((feature) => { features.forEach((feature) => {
retour = new GeoJSON().readFeature(feature, { dataProjection: 'EPSG:4326', featureProjection: 'EPSG:3857' }); try {
drawSource.addFeature(retour); if (feature.properties) {
// const featureProperties = feature.properties ? feature.properties : feature; feature.properties['index'] = index;
// const featureType = featureTypes index += 1;
// .find((ft) => ft.slug === (featureProperties.feature_type.slug || featureProperties.feature_type)); }
// let filters = []; retour = new GeoJSON().readFeature(feature, { dataProjection: 'EPSG:4326', featureProjection: 'EPSG:3857' }, featureTypes);
// if (filter) { drawSource.addFeature(retour);
// const typeCheck = filter.featureType && featureProperties.feature_type.slug === filter.featureType; } catch (err) {
// const statusCheck = filter.featureStatus && featureProperties.status.value === filter.featureStatus; console.error(err);
// const titleCheck = filter.featureTitle && featureProperties.title.includes(filter.featureTitle); }
// filters = [typeCheck, statusCheck, titleCheck];
// }
// console.log(featureType, filters);
}); });
const styleFunction = (feature) => this.getStyle(feature, featureTypes, filter); const styleFunction = (feature) => this.getStyle(feature, featureTypes, filter);
const olLayer = new VectorLayer({ const olLayer = new VectorLayer({
...@@ -469,97 +851,166 @@ const mapService = { ...@@ -469,97 +851,166 @@ const mapService = {
}); });
olLayer.setZIndex(29); olLayer.setZIndex(29);
this.map.addLayer(olLayer); this.map.addLayer(olLayer);
this.olLayer = olLayer;
this.drawSource = drawSource;
this.featureTypes = featureTypes; // store featureTypes for popups
this.projectSlug = project_slug; // store projectSlug for popups
this.queryParams = queryParams; // store queryParams for popup routes
return drawSource; return drawSource;
}, },
removeFeatures: function () {
this.drawSource.clear();
},
addMapEventListener: function (eventName, callback) { addMapEventListener: function (eventName, callback) {
this.map.on(eventName, callback); this.map.on(eventName, callback);
}, },
_createContentPopup: function (feature, featureTypes, project_slug) { createCustomFiedsContent(featureType, feature) {
const formatDate = (current_datetime) => { const { customfield_set } = featureType;
let formatted_date = current_datetime.getFullYear() + '-' + ('0' + (current_datetime.getMonth() + 1)).slice(-2) + '-' + ('0' + current_datetime.getDate()).slice(-2) + ' ' + // generate html for each customField configured to be displayed
('0' + current_datetime.getHours()).slice(-2) + ':' + ('0' + current_datetime.getMinutes()).slice(-2); let rows = '';
return formatted_date; for (const { label, name } of customfield_set) {
}; const value = feature.getProperties()[name];
let feature_type; // check if the value is not null nor undefined (to allow false value if boolean)
let status; if (featureType.displayed_fields.includes(name) && value !== null && value !== undefined) {
let date_maj; rows += `<div class="customField-row">${label} : ${value}</div>`;
let feature_type_url; }
let feature_url;
if (feature.getProperties) {
status = feature.getProperties().status;
date_maj = feature.getProperties().updated_on;
feature_type_url = feature.getProperties().feature_type_url;
feature_url = feature.getProperties().feature_url;
} else {
status = feature.status;
date_maj = feature.updated_on;
feature_type_url = feature.feature_type_url;
feature_url = feature.feature_url;
}
if (featureTypes) { // => VectorTile
feature_type = featureTypes.find((x) => x.slug.split('-')[0] === '' + feature.getProperties().feature_type_id);
status = statusList.find((x) => x.value === feature.getProperties().status).name;
date_maj = formatDate(new Date(feature.getProperties().updated_on));
feature_type_url = '/geocontrib/projet/' + project_slug + '/type-signalement/' + feature_type.slug + '/';
feature_url = feature_type_url + 'signalement/' + feature.getProperties().feature_id + '/';
} else {
feature_type = feature.getProperties ? feature.getProperties().feature_type : feature.feature_type;
status = feature.getProperties ? feature.getProperties().status.label : feature.status.label;
} }
// wrap all rows into customFields container
return rows.length > 0 ?
`<div id="customFields">
<div class="ui divider"></div>
<h5>Champs personnalisés</h5>
${rows}
</div>` : '';
},
//* adapt link url for shared-project restricted navigation _createContentPopup: async function (feature) {
if (window.location.pathname.includes('projet-partage')) { const properties = await retrieveFeatureProperties(feature, this.featureTypes, this.projectSlug);
feature_url = feature_url.replace('projet', 'projet-partage'); const { feature_type, index, status, updated_on, created_on, creator, display_last_editor } = properties; // index is used to retrieve feature by query when browsing features
feature_type_url = feature_type_url.replace('projet', 'projet-partage'); const { displayed_fields } = feature_type;
} // generate html for each native fields
let author = ''; const statusHtml = `<div>Statut : ${status}</div>`;
const creator = feature.getProperties ? feature.getProperties().creator : feature.creator; const featureTypeHtml = `<div>Type de signalement : ${feature_type ? '<a id="goToFeatureTypeDetail" class="pointer">' + feature_type.title + '</a>' : 'Type de signalement inconnu'}</div>`;
if (creator) { const updatedOnHtml = `<div>Dernière mise à jour : ${updated_on}</div>`;
author = creator.full_name const createdOnHtml = `<div>Date de création : ${created_on}</div>`;
? `<div> const creatorHtml = creator ? `<div>Auteur : ${creator}</div>` : '';
Auteur : ${creator.first_name} ${creator.last_name} const lastEditorHtml = display_last_editor ? `<div>Dernier éditeur : ${display_last_editor}</div>` : '';
</div>` // wrapping up finale html to fill popup, filtering native fields to display and adding filtered customFields
: creator.username ? `<div>Auteur: ${creator.username}</div>` : ''; const html = `<h4>
} <a id="goToFeatureDetail" class="pointer">${feature.getProperties ? feature.getProperties().title : feature.title}</a>
</h4>
<div class="fields">
${displayed_fields.includes('status') ? statusHtml : ''}
${displayed_fields.includes('feature_type') ? featureTypeHtml : ''}
${displayed_fields.includes('updated_on') ? updatedOnHtml : ''}
${displayed_fields.includes('created_on') ? createdOnHtml : ''}
${displayed_fields.includes('display_creator') ? creatorHtml : ''}
${displayed_fields.includes('display_last_editor') ? lastEditorHtml : ''}
${this.createCustomFiedsContent(feature_type, feature)}
</div>`;
return { html, feature_type, index };
},
const title = feature.getProperties ? feature.getProperties().title : feature.title; zoom(zoomlevel) {
return ` this.map.getView().setZoom(zoomlevel);
<h4>
<a href="${feature_url}">${title}</a>
</h4>
<div>
Statut : ${status}
</div>
<div>
Type : <a href="${feature_type_url}"> ${feature_type.title} </a>
</div>
<div>
Dernière mise à jour : ${date_maj}
</div>
${author}
`;
}, },
zoomTo(location, zoomlevel, lon, lat) { zoomTo(location, zoomlevel, lon, lat) {
if (lon && lat) { if (lon && lat) {
location = [+lon, +lat]; location = [+lon, +lat];
} }
this.map.getView().setCenter(transform(location, 'EPSG:4326', 'EPSG:3857')); this.map.getView().setCenter(transform(location, 'EPSG:4326', 'EPSG:3857'));
this.map.getView().setZoom(zoomlevel); this.zoom(zoomlevel);
},
animateTo(center, zoom) {
this.map.getView().animate({ center, zoom });
}, },
addOverlay(loc) { addOverlay(loc, zoom) {
var pos = fromLonLat(loc); const pos = fromLonLat(loc);
var marker = new Overlay({ const marker = new Overlay({
position: pos, position: pos,
positioning: OverlayPositioning.CENTER_CENTER, positioning: 'center',
element: document.getElementById('marker'), element: document.getElementById('marker'),
stopEvent: false stopEvent: false,
}); });
this.map.addOverlay(marker); this.map.addOverlay(marker);
this.animateTo(pos, zoom);
},
initGeolocation() {
this.geolocation = new Geolocation({
// enableHighAccuracy must be set to true to have the heading value.
trackingOptions: {
enableHighAccuracy: true,
},
projection: this.map.getView().getProjection(),
});
// handle this.geolocation error.
this.geolocation.on('error', (error) => {
console.error(error.message);
});
this.positionFeature = new Feature();
this.positionFeature.setStyle( geolocationStyle );
this.geolocation.on('change:position', () => {
const currentPosition = this.geolocation.getPosition();
if (!currentPosition || !isEqual(this.lastPosition, currentPosition)) {
console.log('current position: ', currentPosition); // keeping this console.log for debug purpose in case needed
}
this.lastPosition = currentPosition;
this.changeTrackerPosition();
});
this.geolocationSource = new VectorSource({
features: [this.positionFeature],
});
new VectorLayer({
map: this.map,
source: this.geolocationSource,
});
},
changeTrackerPosition() {
if (this.lastPosition) {
this.positionFeature.setGeometry(new Point(this.lastPosition));
this.animateTo(this.lastPosition, 16);
}
},
displayGeolocationPoint(isVisible) {
let features = this.geolocationSource.getFeatures();
if (!features) return;
const hiddenStyle = new Style(); // hide the feature
for (let i = 0; i < features.length; i++) {
features[i].setStyle(isVisible ? geolocationStyle : hiddenStyle);
}
},
toggleGeolocation(isTracking) {
if (this.geolocation) {
this.geolocation.setTracking(isTracking);
if (this.geolocationSource) {
this.displayGeolocationPoint(isTracking);
if (isTracking) {
this.changeTrackerPosition();
}
}
}
},
getMapCenter() {
const location = this.map.getView().getCenter();
if (location) {
return transform(location, 'EPSG:3857', 'EPSG:4326');
}
return null;
} }
}; };
......
src/services/project-api.js
View file @ ee17a921
...@@ -4,7 +4,7 @@ const projectAPI = { ...@@ -4,7 +4,7 @@ const projectAPI = {
async getProject( baseUrl, projectSlug ) { async getProject( baseUrl, projectSlug ) {
const response = await axios.get( const response = await axios.get(
`${baseUrl}projects/${projectSlug}/` `${baseUrl}v2/projects/${projectSlug}/`
); );
if ( if (
response.status === 200 && response.status === 200 &&
...@@ -45,8 +45,8 @@ const projectAPI = { ...@@ -45,8 +45,8 @@ const projectAPI = {
} }
}, },
async getProjects({ baseUrl, filters, page, projectSlug, myaccount }) { async getProjects({ baseUrl, filters, page, projectSlug, myaccount, text }) {
let url = `${baseUrl}projects/`; let url = `${baseUrl}v2/projects/`;
if (projectSlug) { if (projectSlug) {
url += `${projectSlug}/`; url += `${projectSlug}/`;
} }
...@@ -54,6 +54,10 @@ const projectAPI = { ...@@ -54,6 +54,10 @@ const projectAPI = {
if (myaccount) { if (myaccount) {
url += '&myaccount=true'; url += '&myaccount=true';
} }
// Append search text if provided.
if (text) {
url += `&search=${encodeURIComponent(text)}`;
}
try { try {
if (Object.values(filters).some(el => el && el.length > 0)) { if (Object.values(filters).some(el => el && el.length > 0)) {
for (const filter in filters) { for (const filter in filters) {
...@@ -72,9 +76,9 @@ const projectAPI = { ...@@ -72,9 +76,9 @@ const projectAPI = {
} }
}, },
async getProjectTypes( baseUrl ) { async getProjectUsers( baseUrl, projectSlug) {
const response = await axios.get( const response = await axios.get(
`${baseUrl}project-types/` `${baseUrl}projects/${projectSlug}/utilisateurs/`
); );
if ( if (
response.status === 200 && response.status === 200 &&
...@@ -86,9 +90,23 @@ const projectAPI = { ...@@ -86,9 +90,23 @@ const projectAPI = {
} }
}, },
async getProjectTypes( baseUrl ) {
const response = await axios.get(
`${baseUrl}v2/projects/?is_project_type=true`
);
if (
response.status === 200 &&
response.data
) {
return response.data.results;
} else {
return null;
}
},
async deleteProject(baseUrl, projectSlug) { async deleteProject(baseUrl, projectSlug) {
const response = await axios.delete( const response = await axios.delete(
`${baseUrl}projects/${projectSlug}/` `${baseUrl}v2/projects/${projectSlug}/`
); );
if ( response.status === 204 ) { if ( response.status === 204 ) {
return 'success'; return 'success';
......
src/services/user-api.js 0 → 100644
View file @ ee17a921
import axios from '@/axios-client.js';
import store from '../store';
const baseUrl = store.state.configuration.VUE_APP_DJANGO_API_BASE;
const userAPI = {
async signup(data, url) {
try {
const response = await axios.post(url || `${baseUrl}v2/users/`, data);
return response; // Retourne directement la réponse si succès
} catch (err) {
console.error('Erreur lors de l\'inscription :', err.response || err);
return err.response || { status: 500, data: { detail: 'Erreur inconnue' } }; // 👈 Retourne la réponse d'erreur si disponible
}
},
};
export default userAPI;
src/store/index.js
View file @ ee17a921
...@@ -34,12 +34,16 @@ export default new Vuex.Store({ ...@@ -34,12 +34,16 @@ export default new Vuex.Store({
message: 'En cours de chargement' message: 'En cours de chargement'
}, },
logged: false, logged: false,
messageCount: 0,
messages: [], messages: [],
projectAttributes: [],
reloadIntervalId: null, reloadIntervalId: null,
staticPages: null, staticPages: null,
user: false, user: false,
usersGroups: [],
USER_LEVEL_PROJECTS: null, USER_LEVEL_PROJECTS: null,
user_permissions: null, user_permissions: null,
userToken: null
}, },
mutations: { mutations: {
...@@ -52,39 +56,43 @@ export default new Vuex.Store({ ...@@ -52,39 +56,43 @@ export default new Vuex.Store({
SET_CONFIG(state, payload) { SET_CONFIG(state, payload) {
state.configuration = payload; state.configuration = payload;
}, },
SET_USERS(state, payload) {
state.users = payload;
},
SET_COOKIE(state, cookie) {
state.cookie = cookie;
},
SET_STATIC_PAGES(state, staticPages) { SET_STATIC_PAGES(state, staticPages) {
state.staticPages = staticPages; state.staticPages = staticPages;
}, },
SET_USERS_GROUPS(state, usersGroups) {
state.usersGroups = usersGroups;
},
SET_USER_LEVEL_PROJECTS(state, USER_LEVEL_PROJECTS) { SET_USER_LEVEL_PROJECTS(state, USER_LEVEL_PROJECTS) {
state.USER_LEVEL_PROJECTS = USER_LEVEL_PROJECTS; state.USER_LEVEL_PROJECTS = USER_LEVEL_PROJECTS;
}, },
SET_LOGGED(state, value) { SET_LOGGED(state, value) {
state.logged = value; state.logged = value;
}, },
SET_USER_TOKEN(state, payload) {
state.userToken = payload;
},
SET_USER_PERMISSIONS(state, userPermissions) { SET_USER_PERMISSIONS(state, userPermissions) {
state.user_permissions = userPermissions; state.user_permissions = userPermissions;
}, },
SET_LEVELS_PERMISSIONS(state, levelsPermissions) { SET_LEVELS_PERMISSIONS(state, levelsPermissions) {
state.levelsPermissions = levelsPermissions; state.levelsPermissions = levelsPermissions;
}, },
SET_PROJECT_ATTRIBUTES(state, userPermissions) {
state.projectAttributes = userPermissions;
},
DISPLAY_MESSAGE(state, message) { DISPLAY_MESSAGE(state, message) {
state.messages = [message, ...state.messages]; message['counter'] = state.messageCount;
if (document.getElementById('content')) { state.messageCount += 1;
document.getElementById('content').scrollIntoView({ block: 'start', inline: 'nearest' }); state.messages = [message, ...state.messages]; // add new message at the beginning of the list
if (document.getElementById('scroll-top-anchor')) {
document.getElementById('scroll-top-anchor').scrollIntoView({ block: 'start', inline: 'nearest' });
} }
setTimeout(() => { setTimeout(() => {
state.messages = []; state.messages = state.messages.slice(0, -1); // remove one message from the end of the list
}, 3000); }, 3000);
}, },
DISCARD_MESSAGE(state, message) { DISCARD_MESSAGE(state, messageCount) {
state.messages = state.messages.filter((el) => el.comment !== message.comment); state.messages = state.messages.filter((mess) => mess.counter !== messageCount);
}, },
CLEAR_MESSAGES(state) { CLEAR_MESSAGES(state) {
state.messages = []; state.messages = [];
...@@ -105,6 +113,10 @@ export default new Vuex.Store({ ...@@ -105,6 +113,10 @@ export default new Vuex.Store({
RESET_CANCELLABLE_SEARCH_REQUEST(state) { RESET_CANCELLABLE_SEARCH_REQUEST(state) {
state.cancellableSearchRequest = []; state.cancellableSearchRequest = [];
}, },
REMOVE_LAST_CANCELLABLE_SEARCH_REQUEST(state) {
const updatedCancellableSearchRequest = state.cancellableSearchRequest.slice(0, -1);
state.cancellableSearchRequest = updatedCancellableSearchRequest;
},
SET_RELOAD_INTERVAL_ID(state, payload) { SET_RELOAD_INTERVAL_ID(state, payload) {
state.reloadIntervalId = payload; state.reloadIntervalId = payload;
...@@ -117,8 +129,13 @@ export default new Vuex.Store({ ...@@ -117,8 +129,13 @@ export default new Vuex.Store({
getters: { getters: {
permissions: state => state.user_permissions && state.projects.project ? permissions: state => state.user_permissions && state.projects.project ?
state.user_permissions[state.projects.project.slug] : state.user_permissions[state.projects.project.slug] : noPermissions,
noPermissions usersGroupsOptions: state => state.usersGroups.map((group) => ({
name: group.display_name,
value: group.codename,
isGlobal: group.is_global,
})),
usersGroupsFeatureOptions: (state, getters) => getters.usersGroupsOptions.filter((group) => !group.isGlobal)
}, },
actions: { actions: {
...@@ -165,52 +182,145 @@ export default new Vuex.Store({ ...@@ -165,52 +182,145 @@ export default new Vuex.Store({
const slug = router.history.current.params.slug; const slug = router.history.current.params.slug;
if (slug) { if (slug) {
router.push({ name: 'project_detail', params: { slug } }); router.push({ name: 'project_detail', params: { slug } }).catch(() => { // prevent redundant navigation error
console.error('Not critic: caught error from vue-router -> redundant navigation to same url.');
});
} else { //* not working at page load, routerHistory filled afterwards, could try history.back() } else { //* not working at page load, routerHistory filled afterwards, could try history.back()
router.push(routerHistory[routerHistory.length - 1] || '/'); router.push(routerHistory[routerHistory.length - 1] || '/').catch(() => { // prevent redundant navigation error
console.error('Not critic: caught error from vue-router -> redundant navigation to same url.');
});
} }
}, },
USER_INFO({ state, commit }) { /**
if (!state.user) { * Action to retrieve user information.
axios * - If a token is present in the URL, it indicates a Single Sign-On (SSO) attempt,
.get(`${this.state.configuration.VUE_APP_DJANGO_API_BASE}user_info/`) * in which case it logs out the user (if logged in) and connects via SSO with the token.
* - Otherwise, it fetches user information from the Django API endpoint:
* - If no user is logged in AND if the login should be done through SSO with a redirect,
* it navigates to the login platform. Afterward, the user will be redirected with the token and the original URL to open in Geocontrib.
* - Else if the response contains a login_url (to connect with OGS), the user is redirected to this url which will redirect the user
* to geocontrib after login, which will check again if the OGS session is activated
* - Otherwise, it displays a message that the user is not logged in but can still access the app as an anonymous user.
* A 'next' parameter is added to transfer to the OGS login page for redirection.
*/
async GET_USER_INFO({ state, commit, dispatch }) {
// Extract token from URL query parameters
const searchParams = new URLSearchParams(window.location.search);
const token = searchParams.get('token');
const url_redirect = searchParams.get('url_redirect');
const currentUrl = window.location.href;
// Check if token exists and SSO login URL is configured
if (token && state.configuration.VUE_APP_LOGIN_URL) {
// If user was previously connected through SSO, ensure they are logged out before reconnecting through SSO, in case user changed
await dispatch('LOGOUT');
dispatch('CONNECT_SSO_WITH_TOKEN', { token, url_redirect });
} else if (!state.user) {
// If user infos are not set, try to fetch them
return axios
.get(`${state.configuration.VUE_APP_DJANGO_API_BASE}user_info/`)
.then((response) => { .then((response) => {
// Update the user state with received user data
if (response && response.status === 200) { if (response && response.status === 200) {
const user = response.data.user; const user = response.data.user;
commit('SET_USER', user); commit('SET_USER', user);
// Fetch user related data
dispatch('GET_USER_LEVEL_PERMISSIONS');
dispatch('GET_USER_LEVEL_PROJECTS');
dispatch('projects/GET_PROJECTS');
return;
} }
}) })
.catch(() => { .catch(() => {
//* if an url to redirect to an external authentification system is present, do not redirect to the login page // If the instance is set to accept login with redirection
if (!state.configuration.VUE_APP_LOGIN_URL) { if (state.configuration.VUE_APP_SSO_LOGIN_URL_WITH_REDIRECT) {
const url = window.location.href; commit('DISPLAY_MESSAGE', {
if (url.includes('projet-partage')) { comment: 'Vous allez être redirigé vers la plateforme de connexion.'
const slug = url.split('projet-partage/')[1]; });
router.push({ name: 'login', params: { slug } }); // Call the SSO login plateform with url to redirect after login
} else { window.open(`${state.configuration.VUE_APP_SSO_LOGIN_URL_WITH_REDIRECT}/?url_redirect=${encodeURIComponent(currentUrl)}`, '_self');
router.push({ name: 'login' }); }
// If the user is not logged in, display an info message
commit('DISPLAY_MESSAGE', {
comment: `Vous n'êtes pas connecté actuellement.
Vous pouvez accéder à l'application en tant qu'utilisateur anonyme`
});
return;
});
}
},
/**
* Action to connect user through SSO with a token.
* If the app was opened with a token in the url, it attempts a login,
* if the login is succesfull, it set the user in the state
* and retrieve information that would have been retrieved in GET_USER_INFO when logged.
* If the url contained a url to redirect, it calls the router to open this page.
*/
async CONNECT_SSO_WITH_TOKEN({ state, commit, dispatch }, { token, url_redirect }) {
axios
.get(`${state.configuration.VUE_APP_DJANGO_API_BASE}login-token/?token=${token}`)
.then((response) => {
if (response && (response.status === 200 || response.status === 201)) {
const user = response.data;
commit('SET_USER', user);
dispatch('GET_USER_LEVEL_PROJECTS');
dispatch('GET_USER_LEVEL_PERMISSIONS');
commit('DISPLAY_MESSAGE', {
comment: `Vous êtes maintenant connecté ${user.first_name} ${user.last_name}`,
level: 'positive'
});
dispatch('projects/GET_PROJECTS');
if (url_redirect) {
// Prepare the url to redirect with vue-router that prefix the url with DOMAIN+BASE_URL
const substringToRemove = state.configuration.BASE_URL;
// Find the index of the string to remove
const index = url_redirect.indexOf(substringToRemove);
// If found, keep only the remaining part after the substring to remove
if (index !== -1) {
url_redirect = url_redirect.substring(index + substringToRemove.length);
} }
// catch error from the router, because of second redirection to feature when call with a feature's id
router.push(url_redirect).catch((e) => e);
} }
}
})
.catch((err) => {
console.error(err);
commit('DISPLAY_MESSAGE', {
comment: 'La connexion a échoué.',
level: 'negative'
}); });
});
},
async GET_USER_TOKEN({ state, commit }) {
const response = await axios.get(`${state.configuration.VUE_APP_DJANGO_API_BASE}get-token`);
if (
response.status === 200 &&
response.data
) {
commit('SET_USER_TOKEN', response.data);
} }
}, },
LOGOUT({ commit, dispatch }) { LOGOUT({ state, commit, dispatch }) {
axios return axios
.get(`${this.state.configuration.VUE_APP_DJANGO_API_BASE}logout/`) .get(`${state.configuration.VUE_APP_DJANGO_API_BASE}logout/`)
.then((response) => { .then((response) => {
if (response && response.status === 200) { if (response && response.status === 200) {
commit('SET_USER', false); commit('SET_USER', false);
commit('SET_USER_LEVEL_PROJECTS', null); commit('SET_USER_LEVEL_PROJECTS', null);
dispatch('GET_USER_LEVEL_PERMISSIONS'); dispatch('GET_USER_LEVEL_PERMISSIONS');
if (router.history.current.name !== 'index' && !window.location.pathname.includes('projet-partage')) { if (router.history.current.name !== 'index' &&
!window.location.pathname.includes('projet-partage') &&
!state.configuration.VUE_APP_LOGIN_URL
) {
router.push('/'); router.push('/');
} }
} }
}) })
.catch((error) => { .catch((error) => {
throw error; console.error(error);
}); });
}, },
...@@ -227,6 +337,19 @@ export default new Vuex.Store({ ...@@ -227,6 +337,19 @@ export default new Vuex.Store({
}); });
}, },
GET_USERS_GROUPS({ commit }) {
return axios
.get(`${this.state.configuration.VUE_APP_DJANGO_API_BASE}users-groups/`)
.then((response) => {
if (response && response.status === 200) {
commit('SET_USERS_GROUPS', response.data);
}
})
.catch((error) => {
throw error;
});
},
GET_USER_LEVEL_PROJECTS({ commit }) { GET_USER_LEVEL_PROJECTS({ commit }) {
return axios return axios
.get(`${this.state.configuration.VUE_APP_DJANGO_API_BASE}user-level-projects/`) .get(`${this.state.configuration.VUE_APP_DJANGO_API_BASE}user-level-projects/`)
...@@ -254,7 +377,7 @@ export default new Vuex.Store({ ...@@ -254,7 +377,7 @@ export default new Vuex.Store({
}, },
GET_LEVELS_PERMISSIONS({ commit }) { GET_LEVELS_PERMISSIONS({ commit }) {
return axios return axios
.get(`${this.state.configuration.VUE_APP_DJANGO_API_BASE}levels-permissions/`) .get(`${this.state.configuration.VUE_APP_DJANGO_API_BASE}v2/levels-permissions/`)
.then((response) => { .then((response) => {
if (response && response.status === 200) { if (response && response.status === 200) {
commit('SET_LEVELS_PERMISSIONS', response.data); commit('SET_LEVELS_PERMISSIONS', response.data);
...@@ -264,6 +387,26 @@ export default new Vuex.Store({ ...@@ -264,6 +387,26 @@ export default new Vuex.Store({
throw error; throw error;
}); });
}, },
GET_PROJECT_ATTRIBUTES({ commit }) {
return axios
.get(`${this.state.configuration.VUE_APP_DJANGO_API_BASE}project-attributes/`)
.then((response) => {
if (response && response.status === 200) {
commit('SET_PROJECT_ATTRIBUTES', response.data);
}
})
.catch((error) => {
throw error;
});
},
CANCEL_CURRENT_SEARCH_REQUEST({ state, commit }) {
if (state.cancellableSearchRequest.length > 0) {
const currentRequestCancelToken =
state.cancellableSearchRequest[state.cancellableSearchRequest.length - 1];
currentRequestCancelToken.cancel('Current search request was canceled');
commit('REMOVE_LAST_CANCELLABLE_SEARCH_REQUEST');
}
},
} }
}); });
src/store/modules/feature-type.store.js
View file @ ee17a921
import axios from '@/axios-client.js'; import axios from '@/axios-client.js';
import Vue from 'vue';
const getColorsStyles = (customForms) => customForms const getColorsStyles = (customForms) => customForms
.filter(customForm => customForm.options && customForm.options.length) .filter(customForm => customForm.options && customForm.options.length)
...@@ -8,14 +9,14 @@ const getColorsStyles = (customForms) => customForms ...@@ -8,14 +9,14 @@ const getColorsStyles = (customForms) => customForms
}); });
const pending2draftFeatures = (features) => { const pending2draftFeatures = (features) => {
const result = [];
for (const el of features) { for (const el of features) {
if (el.properties.status === 'pending') { if (el.properties && el.properties.status === 'pending') {
el.properties.status = 'draft'; el.properties.status = 'draft';
} else if (el.status === 'pending') {
el.status = 'draft';
} }
result.push(el);
} }
return result; return features;
}; };
const feature_type = { const feature_type = {
...@@ -30,6 +31,8 @@ const feature_type = { ...@@ -30,6 +31,8 @@ const feature_type = {
feature_types: [], feature_types: [],
fileToImport: null, fileToImport: null,
importFeatureTypeData: [], importFeatureTypeData: [],
preRecordedLists: [],
selectedPrerecordedListValues: {}
}, },
getters: { getters: {
...@@ -83,15 +86,21 @@ const feature_type = { ...@@ -83,15 +86,21 @@ const feature_type = {
SET_FILE_TO_IMPORT(state, payload) { SET_FILE_TO_IMPORT(state, payload) {
state.fileToImport = payload; state.fileToImport = payload;
}, },
SET_PRERECORDED_LISTS(state, payload) {
state.preRecordedLists = payload;
},
SET_SELECTED_PRERECORDED_LIST_VALUES(state, { name, values }) {
Vue.set(state.selectedPrerecordedListValues, name, values.slice(0, 10).map(el => { return { label: el };}));
}
}, },
actions: { actions: {
GET_PROJECT_FEATURE_TYPES({ commit }, project_slug) { GET_PROJECT_FEATURE_TYPES({ commit }, project_slug) {
return axios return axios
.get(`${this.state.configuration.VUE_APP_DJANGO_API_BASE}projects/${project_slug}/feature-types/`) .get(`${this.state.configuration.VUE_APP_DJANGO_API_BASE}v2/feature-types/?project__slug=${project_slug}`)
.then((response) => { .then((response) => {
if (response.status === 200 && response.data) { if (response.status === 200 && response.data) {
commit('SET_FEATURE_TYPES', response.data.feature_types); commit('SET_FEATURE_TYPES', response.data);
return response; return response;
} }
}) })
...@@ -100,63 +109,75 @@ const feature_type = { ...@@ -100,63 +109,75 @@ const feature_type = {
}); });
}, },
async GET_PRERECORDED_LISTS({ commit }) {
try {
const response = await axios.get(
`${this.state.configuration.VUE_APP_DJANGO_API_BASE}prerecorded-list-values/`
);
if (response.status === 200) {
commit('SET_PRERECORDED_LISTS', response.data.map(el => el.name));
}
} catch (err) {
console.error(err);
}
},
async GET_SELECTED_PRERECORDED_LIST_VALUES({ commit }, { name, pattern }) {
try {
let url = `${this.state.configuration.VUE_APP_DJANGO_API_BASE}prerecorded-list-values/${name}/`;
if (pattern) {
url += `?pattern=${pattern}`;
}
const response = await axios.get(url);
if (response.status === 200) {
commit('SET_SELECTED_PRERECORDED_LIST_VALUES', {
name,
values: response.data
});
}
} catch (err) {
console.error(err);
}
return;
},
async SEND_FEATURE_TYPE({ state, getters, rootState }, requestType) { async SEND_FEATURE_TYPE({ state, getters, rootState }, requestType) {
const data = { const data = {
title: state.form.title.value, title: state.form.title.value,
title_optional: state.form.title_optional.value, title_optional: state.form.title_optional.value,
enable_key_doc_notif: state.form.enable_key_doc_notif.value,
disable_notification: state.form.disable_notification.value,
geom_type: state.form.geom_type.value, geom_type: state.form.geom_type.value,
color: state.form.color.value, color: state.form.color.value,
colors_style: state.form.colors_style.value, colors_style: state.form.colors_style.value,
project: rootState.projects.project.slug, project: rootState.projects.project.slug,
customfield_set: state.customForms.map(el => { customfield_set: state.customForms
return {
position: el.position,
label: el.label,
name: el.name,
field_type: el.field_type,
options: el.options,
};
}),
//'is_editable': true,
}; };
if (requestType === 'post') { let url = `${this.state.configuration.VUE_APP_DJANGO_API_BASE}v2/feature-types/`;
return axios if (requestType === 'put') url += `${getters.feature_type.slug}/`;
.post(`${this.state.configuration.VUE_APP_DJANGO_API_BASE}feature-types/`, data) return axios({
.then((response) => { url,
if (response) { method: requestType,
const feature_type_slug = response.data.slug; data,
const status = response.status; }).then((response) => {
return { feature_type_slug, status }; if (response) {
} const feature_type_slug = response.data.slug;
}) const status = response.status;
.catch((error) => { return { feature_type_slug, status };
throw (error); }
}); })
} else if (requestType === 'put') { .catch((error) => error.response);
return axios
.put(`${this.state.configuration.VUE_APP_DJANGO_API_BASE}feature-types/${getters.feature_type.slug}/`, data)
.then((response) => {
if (response) {
const feature_type_slug = response.data.slug;
const status = response.status;
return { feature_type_slug, status };
}
})
.catch((error) => {
throw (error);
});
}
}, },
async SEND_FEATURE_SYMBOLOGY({ getters, rootState }, symbology) { async SEND_FEATURE_DISPLAY_CONFIG({ getters, rootState }, displayConfig) {
const data = { const data = {
title: getters.feature_type.title, title: getters.feature_type.title,
project: rootState.projects.project.slug, project: rootState.projects.project.slug,
...symbology ...displayConfig
}; };
return axios return axios
.put(`${this.state.configuration.VUE_APP_DJANGO_API_BASE}feature-types/${getters.feature_type.slug}/`, data) .put(`${this.state.configuration.VUE_APP_DJANGO_API_BASE}v2/feature-types/${getters.feature_type.slug}/`, data)
.then((response) => { .then((response) => {
if (response) { if (response) {
const feature_type_slug = response.data.slug; const feature_type_slug = response.data.slug;
...@@ -180,16 +201,15 @@ const feature_type = { ...@@ -180,16 +201,15 @@ const feature_type = {
if (!name && state.fileToImport) { if (!name && state.fileToImport) {
name = state.fileToImport.name; name = state.fileToImport.name;
} }
if (rootState.projects.project.moderation) { if (rootState.projects.project.moderation) {
if (state.fileToImport && state.fileToImport.size > 0) { //* if data in a binary file, read it as text if (state.fileToImport && state.fileToImport.size > 0) { //* if data in a binary file, read it as text
const textFile = await state.fileToImport.text(); const textFile = await state.fileToImport.text();
geojson = JSON.parse(textFile); geojson = JSON.parse(textFile);
} }
const unmoderatedFeatures = pending2draftFeatures(geojson.features); const unmoderatedFeatures = pending2draftFeatures(geojson.features || geojson);
geojson= { geojson = geojson.features ? {
type: 'FeatureCollection', features: unmoderatedFeatures type: 'FeatureCollection', features: unmoderatedFeatures
}; } : unmoderatedFeatures;
} }
const fileToImport = new File([JSON.stringify(geojson)], name, { type }); const fileToImport = new File([JSON.stringify(geojson)], name, { type });
...@@ -197,7 +217,7 @@ const feature_type = { ...@@ -197,7 +217,7 @@ const feature_type = {
formData.append('feature_type_slug', feature_type_slug); formData.append('feature_type_slug', feature_type_slug);
const url = const url =
this.state.configuration.VUE_APP_DJANGO_API_BASE + this.state.configuration.VUE_APP_DJANGO_API_BASE +
'import-tasks/'; 'v2/import-tasks/';
return axios return axios
.post(url, formData, { .post(url, formData, {
headers: { headers: {
...@@ -227,7 +247,7 @@ const feature_type = { ...@@ -227,7 +247,7 @@ const feature_type = {
formData.append('csv_file', state.fileToImport); formData.append('csv_file', state.fileToImport);
formData.append('feature_type_slug', feature_type_slug); formData.append('feature_type_slug', feature_type_slug);
const url = `${this.state.configuration.VUE_APP_DJANGO_API_BASE}import-tasks/`; const url = `${this.state.configuration.VUE_APP_DJANGO_API_BASE}v2/import-tasks/`;
return axios return axios
.post(url, formData, { .post(url, formData, {
...@@ -249,7 +269,7 @@ const feature_type = { ...@@ -249,7 +269,7 @@ const feature_type = {
}, },
GET_IMPORTS({ state, commit, dispatch }, { project_slug, feature_type }) { GET_IMPORTS({ state, commit, dispatch }, { project_slug, feature_type }) {
let url = `${this.state.configuration.VUE_APP_DJANGO_API_BASE}import-tasks/`; let url = `${this.state.configuration.VUE_APP_DJANGO_API_BASE}v2/import-tasks/`;
if (project_slug) { if (project_slug) {
url = url.concat('', `${url.includes('?') ? '&' : '?'}project_slug=${project_slug}`); url = url.concat('', `${url.includes('?') ? '&' : '?'}project_slug=${project_slug}`);
} }
...@@ -271,15 +291,19 @@ const feature_type = { ...@@ -271,15 +291,19 @@ const feature_type = {
} }
} }
} }
if (diffStatus.length > 0) { if (diffStatus.length > 0 && project_slug && feature_type) {
dispatch( try {
'feature/GET_PROJECT_FEATURES', dispatch(
{ 'feature/GET_PROJECT_FEATURES',
project_slug: project_slug, {
feature_type__slug: feature_type, project_slug: project_slug,
}, feature_type__slug: feature_type,
{ root: true } },
); { root: true }
);
} catch (err) {
console.error(err);
}
} }
commit('SET_IMPORT_FEATURE_TYPES_DATA', response.data); commit('SET_IMPORT_FEATURE_TYPES_DATA', response.data);
} }
......
src/store/modules/feature.store.js
View file @ ee17a921
import axios from '@/axios-client.js'; import axios from '@/axios-client.js';
import router from '../../router'; import router from '../../router';
import { objIsEmpty, findXformValue, activateFieldsNforceValues } from'@/utils';
const feature = { const feature = {
namespaced: true, namespaced: true,
...@@ -8,32 +9,14 @@ const feature = { ...@@ -8,32 +9,14 @@ const feature = {
attachmentsToDelete: [], attachmentsToDelete: [],
checkedFeatures: [], checkedFeatures: [],
clickedFeatures: [], clickedFeatures: [],
extra_form: [], extra_forms: [],
features: [], features: [],
features_count: 0, features_count: 0,
currentFeature: null, currentFeature: null,
form: null, form: null,
linkedFormset: [], //* used to edit in feature_edit linkedFormset: [], //* used to edit in feature_edit
linked_features: [], //* used to display in feature_detail linked_features: [], //* used to display in feature_detail
massMode: 'modify', massMode: 'edit-status',
statusChoices: [
{
name: 'Brouillon',
value: 'draft',
},
{
name: 'En attente de publication',
value: 'pending',
},
{
name: 'Publié',
value: 'published',
},
{
name: 'Archivé',
value: 'archived',
},
],
}, },
mutations: { mutations: {
SET_FEATURES(state, features) { SET_FEATURES(state, features) {
...@@ -50,17 +33,30 @@ const feature = { ...@@ -50,17 +33,30 @@ const feature = {
UPDATE_FORM(state, payload) { UPDATE_FORM(state, payload) {
state.form = payload; state.form = payload;
}, },
UPDATE_EXTRA_FORM(state, extra_form) { INIT_FORM(state) {
const index = state.extra_form.findIndex(el => el.label === extra_form.label); state.form = {
if (index !== -1) { title: state.currentFeature.properties.title,
state.extra_form[index] = extra_form; description: { value: state.currentFeature.properties.description },
status: { value: state.currentFeature.properties.status },
assigned_member: { value: state.currentFeature.properties.assigned_member },
};
},
UPDATE_FORM_FIELD(state, field) {
if (state.form[field.name].value !== undefined) {
state.form[field.name].value = field.value;
} else {
state.form[field.name] = field.value;
} }
}, },
SET_EXTRA_FORM(state, extra_form) { UPDATE_EXTRA_FORM(state, extra_form) {
state.extra_form = extra_form; const updatedExtraForms = state.extra_forms.map((field) => field.name === extra_form.name ? extra_form : field);
state.extra_forms = activateFieldsNforceValues(updatedExtraForms);
},
SET_EXTRA_FORMS(state, extra_forms) {
state.extra_forms = extra_forms;
}, },
CLEAR_EXTRA_FORM(state) { CLEAR_EXTRA_FORM(state) {
state.extra_form = []; state.extra_forms = [];
}, },
ADD_ATTACHMENT_FORM(state, attachmentFormset) { ADD_ATTACHMENT_FORM(state, attachmentFormset) {
state.attachmentFormset = [...state.attachmentFormset, attachmentFormset]; state.attachmentFormset = [...state.attachmentFormset, attachmentFormset];
...@@ -114,29 +110,21 @@ const feature = { ...@@ -114,29 +110,21 @@ const feature = {
}, },
}, },
getters: {
},
actions: { actions: {
async GET_PROJECT_FEATURES({ commit, rootState }, { async GET_PROJECT_FEATURES({ commit, dispatch, rootState }, {
project_slug, project_slug,
feature_type__slug, feature_type__slug,
ordering, ordering,
search, search,
limit, limit,
geojson = false geojson = false
}) { }) {
if (rootState.cancellableSearchRequest.length > 0) { dispatch('CANCEL_CURRENT_SEARCH_REQUEST', null, { root: true });
const currentRequestCancelToken =
rootState.cancellableSearchRequest[rootState.cancellableSearchRequest.length - 1];
currentRequestCancelToken.cancel();
}
const cancelToken = axios.CancelToken.source(); const cancelToken = axios.CancelToken.source();
commit('SET_CANCELLABLE_SEARCH_REQUEST', cancelToken, { root: true }); commit('SET_CANCELLABLE_SEARCH_REQUEST', cancelToken, { root: true });
commit('SET_FEATURES', []); commit('SET_FEATURES', []);
commit('SET_FEATURES_COUNT', 0); commit('SET_FEATURES_COUNT', 0);
let url = `${rootState.configuration.VUE_APP_DJANGO_API_BASE}projects/${project_slug}/feature/`; let url = `${rootState.configuration.VUE_APP_DJANGO_API_BASE}v2/features/?project__slug=${project_slug}`;
if (feature_type__slug) { if (feature_type__slug) {
url = url.concat('', `${url.includes('?') ? '&' : '?'}feature_type__slug=${feature_type__slug}`); url = url.concat('', `${url.includes('?') ? '&' : '?'}feature_type__slug=${feature_type__slug}`);
} }
...@@ -166,88 +154,145 @@ const feature = { ...@@ -166,88 +154,145 @@ const feature = {
if (error.message) { if (error.message) {
console.error(error); console.error(error);
} }
return error; throw error; // 'throw' instead of 'return', in order to pass inside the 'catch' error instead of 'then', to avoid initiating map in another component after navigation
} }
}, },
GET_PROJECT_FEATURE({ commit, rootState }, { project_slug, feature_id }) { GET_PROJECT_FEATURE({ commit, dispatch, rootState }, { project_slug, feature_id }) {
if (rootState.cancellableSearchRequest.length > 0) { dispatch('CANCEL_CURRENT_SEARCH_REQUEST', null, { root: true });
const currentRequestCancelToken =
rootState.cancellableSearchRequest[rootState.cancellableSearchRequest.length - 1];
currentRequestCancelToken.cancel();
}
const cancelToken = axios.CancelToken.source(); const cancelToken = axios.CancelToken.source();
commit('SET_CANCELLABLE_SEARCH_REQUEST', cancelToken, { root: true }); commit('SET_CANCELLABLE_SEARCH_REQUEST', cancelToken, { root: true });
//commit('SET_CURRENT_FEATURE', null); //? Est-ce que c'est nécessaire ? -> fait sauter l'affichage au clic sur un signalement lié (feature_detail) const url = `${rootState.configuration.VUE_APP_DJANGO_API_BASE}v2/features/${feature_id}/?project__slug=${project_slug}`;
const url = `${rootState.configuration.VUE_APP_DJANGO_API_BASE}projects/${project_slug}/feature/?id=${feature_id}`;
return axios return axios
.get(url, { cancelToken: cancelToken.token }) .get(url, { cancelToken: cancelToken.token })
.then((response) => { .then((response) => {
if (response.status === 200 && response.data.features) { if (response.status === 200 && response.data) {
const feature = response.data.features[0]; commit('SET_CURRENT_FEATURE', response.data);
commit('SET_CURRENT_FEATURE', feature);
} }
return response; return response;
}) })
.catch((error) => { .catch((error) => {
console.error('Error while getting feature for id = ', feature_id, error);
throw error; throw error;
}); });
}, },
SEND_FEATURE({ state, rootState, commit, dispatch }, routeName) { /**
commit('DISPLAY_LOADER', 'Le signalement est en cours de création', { root: true }); * Handles the entire lifecycle of a feature submission, from sending data to handling additional forms
function redirect(featureId) { * and managing redirections based on the operation performed (create or update).
dispatch( * @param {Object} context - Vuex action context, including state and dispatch functions.
'GET_PROJECT_FEATURE', * @param {Object} payload - Contains parameters like routeName, query, and extraForms for form handling.
*/
SEND_FEATURE({ state, rootState, rootGetters, commit, dispatch }, { routeName, query, extraForms }) {
/**
* Handles redirection after a feature operation, updating URL queries or navigating to new routes.
* @param {string} featureName - The name of the feature being handled.
* @param {Object} response - The server response object.
* @return {Object} - Either the server response or a string to trigger page reload.
*/
function redirect(featureName, response) {
// when modifying more than 2 features, exit this function (to avoid conflict with next feature call to GET_PROJECT_FEATURE)
if (routeName === 'editer-attribut-signalement') return response;
let newQuery = { ...query }; // create a copy of query from the route to avoid redundant navigation error since the router object would be modified
// Display a success message in the UI.
commit(
'DISPLAY_MESSAGE',
{ {
project_slug: rootState.projects.project.slug, comment: routeName === 'ajouter-signalement' ?
feature_id: featureId 'Le signalement a été crée' :
`Le signalement ${featureName} a été mis à jour`,
level: 'positive'
},
{ root: true },
);
// Construct the query for navigation based on the current state and feature details.
const slug_type_signal = rootState['feature-type'].current_feature_type_slug;
const project = rootState.projects.project;
if (routeName === 'ajouter-signalement' && !query.ordering) {
newQuery = {
ordering: project.feature_browsing_default_sort,
offset: 0,// if feature was just created, in both ordering it would be the first in project features list
};
if (project.feature_browsing_default_filter === 'feature_type_slug') {
newQuery['feature_type_slug'] = slug_type_signal;
} }
) }
.then(() => { if (query && query.ordering === '-updated_on') { // if the list is ordered by update time
commit('DISCARD_LOADER', null, { root: true }); newQuery.offset = 0;// it would be in first position (else, if ordered by creation, the position won't change anyway)
router.push({ }
name: 'details-signalement', // in fast edition avoid redundant navigation if query didn't change
params: { if (routeName === 'details-signalement-filtre' && parseInt(query.offset) === parseInt(newQuery.offset)) {
slug_type_signal: rootState['feature-type'].current_feature_type_slug, return 'reloadPage';
slug_signal: featureId, }
message: routeName === 'editer-signalement' ? 'Le signalement a été mis à jour' : 'Le signalement a été crée'
}, // Perform the actual route navigation if needed.
}); if (!objIsEmpty(newQuery)) {
dispatch('projects/GET_ALL_PROJECTS', null, { root:true }); //* & refresh project list router.push({
name: 'details-signalement-filtre',
params: { slug_type_signal },
query: newQuery,
}); });
} else {
router.push({
name: 'details-signalement',
params: { slug_type_signal },
});
}
return response;
} }
async function handleOtherForms(featureId) { /**
* Manages the uploading of attachments and linked features after the main feature submission.
* @param {number} featureId - The ID of the feature to which attachments and linked features relate.
* @param {string} featureName - The name of the feature for messaging purposes.
* @param {Object} response - The server response from the main feature submission.
* @return {Object} - Redirect response or a string to trigger page reload.
*/
async function handleOtherForms(featureId, featureName, response) {
await dispatch('SEND_ATTACHMENTS', featureId); await dispatch('SEND_ATTACHMENTS', featureId);
await dispatch('PUT_LINKED_FEATURES', featureId); await dispatch('PUT_LINKED_FEATURES', featureId);
redirect(featureId); return redirect(featureName, response);
} }
/**
* Prepares a GeoJSON object from the current state and extra forms provided in the payload.
* @return {Object} - A GeoJSON object representing the feature with additional properties.
*/
function createGeojson() { //* prepare feature data to send function createGeojson() { //* prepare feature data to send
const extraFormObject = {}; //* prepare an object to be flatten in properties of geojson const extraFormObject = {}; //* prepare an object to be flatten in properties of geojson
for (const field of state.extra_form) { // use extraForms from argument if defined, overiding data from the store, in order to not use mutation (in case of multiple features)
extraFormObject[field.name] = field.value; for (const field of extraForms || state.extra_forms) {
// send extra form only if there is a value defined or if no value, if there was a value before, in order to avoid sending empty value when user didn't touch the extraform
if (field.value !== null ||
(state.currentFeature.properties && state.currentFeature.properties[field.name])) {
extraFormObject[field.name] = field.value;
}
} }
return { let geojson = {
id: state.form.feature_id, id: state.form.feature_id || state.currentFeature.id,
type: 'Feature', type: 'Feature',
geometry: state.form.geometry,
properties: { properties: {
title: state.form.title, title: state.form.title,
description: state.form.description.value, description: state.form.description.value,
status: state.form.status.value, status: state.form.status.value.value || state.form.status.value,
project: rootState.projects.project.slug, project: rootState.projects.project.slug,
feature_type: rootState['feature-type'].current_feature_type_slug, feature_type: rootState['feature-type'].current_feature_type_slug,
assigned_member: state.form.assigned_member.value,
...extraFormObject ...extraFormObject
} }
}; };
// if not in the case of a non geographical feature type, add geometry to geojson, else send without geometry
if (rootGetters['feature-type/feature_type'].geom_type !== 'none') {
geojson['geometry'] = state.form.geometry || state.form.geom ||
state.currentFeature.geometry || state.currentFeature.properties.geom;
}
return geojson;
} }
const geojson = createGeojson(); const geojson = createGeojson(); // Construct the GeoJSON from current state.
let url = `${rootState.configuration.VUE_APP_DJANGO_API_BASE}features/`; let url = `${rootState.configuration.VUE_APP_DJANGO_API_BASE}v2/features/`;
if (routeName === 'editer-signalement') { if (routeName !== 'ajouter-signalement') {
url += `${state.form.feature_id}/? url += `${geojson.id}/?
feature_type__slug=${rootState['feature-type'].current_feature_type_slug} feature_type__slug=${rootState['feature-type'].current_feature_type_slug}
&project__slug=${rootState.projects.project.slug}`; &project__slug=${rootState.projects.project.slug}`;
} }
...@@ -257,54 +302,61 @@ const feature = { ...@@ -257,54 +302,61 @@ const feature = {
//* which could create regression //* which could create regression
return axios({ return axios({
url, url,
method: routeName === 'editer-signalement' ? 'PUT' : 'POST', method: routeName === 'ajouter-signalement' ? 'POST' : 'PUT',
data: geojson data: geojson
}).then((response) => { }).then((response) => {
if ((response.status === 200 || response.status === 201) && response.data) { if ((response.status === 200 || response.status === 201) && response.data) {
const featureId = response.data.id;
const featureName = response.data.properties.title;
// Handle additional forms if needed.
if (state.attachmentFormset.length > 0 || if (state.attachmentFormset.length > 0 ||
state.linkedFormset.length > 0 || state.linkedFormset.length > 0 ||
state.attachmentsToDelete.length > 0) { state.attachmentsToDelete.length > 0) {
handleOtherForms(response.data.id); return handleOtherForms(featureId, featureName, response);
} else { } else {
redirect(response.data.id); return redirect(featureName, response);
} }
} }
}) }).catch((error) => {
.catch((error) => { // If offline, store the edited feature in localeStorage to send them when back online
commit('DISCARD_LOADER', null, { root: true }); if (error.message === 'Network Error' || !rootState.isOnline) {
if (error.message === 'Network Error' || !rootState.isOnline) { let arraysOffline = [];
let arraysOffline = []; const localStorageArray = localStorage.getItem('geocontrib_offline');
const localStorageArray = localStorage.getItem('geocontrib_offline'); if (localStorageArray) {
if (localStorageArray) { arraysOffline = JSON.parse(localStorageArray);
arraysOffline = JSON.parse(localStorageArray);
}
const updateMsg = {
project: rootState.projects.project.slug,
type: routeName === 'editer-signalement' ? 'put' : 'post',
featureId: state.form.feature_id,
geojson: geojson
};
arraysOffline.push(updateMsg);
localStorage.setItem('geocontrib_offline', JSON.stringify(arraysOffline));
router.push({
name: 'offline-signalement',
params: {
slug_type_signal: rootState['feature-type'].current_feature_type_slug
},
});
}
else {
console.error(error);
throw error;
} }
throw error; const updateMsg = {
}); project: rootState.projects.project.slug,
type: routeName === 'ajouter-signalement' ? 'post' : 'put',
featureId: geojson.id,
geojson: geojson
};
arraysOffline.push(updateMsg);
localStorage.setItem('geocontrib_offline', JSON.stringify(arraysOffline));
router.push({
name: 'offline-signalement',
params: {
slug_type_signal: rootState['feature-type'].current_feature_type_slug
},
});
} else {
console.error('Error while sending feature', error);
throw error; // Re-throw the error for further handling.
}
throw error; // Ensure any error is thrown to be handled by calling code.
});
}, },
async SEND_ATTACHMENTS({ state, rootState, dispatch }, featureId) { async SEND_ATTACHMENTS({ state, rootState, dispatch }, featureId) {
const DJANGO_API_BASE = rootState.configuration.VUE_APP_DJANGO_API_BASE; const DJANGO_API_BASE = rootState.configuration.VUE_APP_DJANGO_API_BASE;
function addFile(attachment, attchmtId) { /**
* Adds a file to an existing attachment by uploading it to the server.
* @param {Object} attachment - The attachment object containing the file and other details.
* @param {number} attchmtId - The ID of the attachment to which the file is being added.
* @return {Promise<Object>} - The server's response to the file upload.
*/
function addFileToRequest(attachment, attchmtId) {
const formdata = new FormData(); const formdata = new FormData();
formdata.append('file', attachment.fileToImport, attachment.fileToImport.name); formdata.append('file', attachment.fileToImport, attachment.fileToImport.name);
return axios return axios
...@@ -318,10 +370,16 @@ const feature = { ...@@ -318,10 +370,16 @@ const feature = {
}); });
} }
/**
* Handles creating or updating an attachment, optionally uploading a file if included.
* @param {Object} attachment - The attachment data, including title, info, and optional file.
* @return {Promise<Object>} - The server response, either from creating/updating the attachment or from file upload.
*/
function putOrPostAttachement(attachment) { function putOrPostAttachement(attachment) {
const formdata = new FormData(); const formdata = new FormData();
formdata.append('title', attachment.title); formdata.append('title', attachment.title);
formdata.append('info', attachment.info); formdata.append('info', attachment.info);
formdata.append('is_key_document', attachment.is_key_document);
let url = `${DJANGO_API_BASE}features/${featureId}/attachments/`; let url = `${DJANGO_API_BASE}features/${featureId}/attachments/`;
if (attachment.id) { if (attachment.id) {
...@@ -334,16 +392,21 @@ const feature = { ...@@ -334,16 +392,21 @@ const feature = {
data: formdata data: formdata
}).then((response) => { }).then((response) => {
if (response && (response.status === 200 || response.status === 201) && attachment.fileToImport) { if (response && (response.status === 200 || response.status === 201) && attachment.fileToImport) {
return addFile(attachment, response.data.id); return addFileToRequest(attachment, response.data.id);
} }
return response; return response;
}) }).catch((error) => {
.catch((error) => { console.error(error);
console.error(error); return error;
return error; });
});
} }
/**
* Deletes attachments by dispatching a Vuex action.
* @param {number[]} attachmentsId - The IDs of the attachments to be deleted.
* @param {number} featureId - The ID of the feature related to the attachments.
* @return {Promise<Object>} - The server response to the deletion request.
*/
function deleteAttachement(attachmentsId, featureId) { function deleteAttachement(attachmentsId, featureId) {
const payload = { const payload = {
attachmentsId: attachmentsId, attachmentsId: attachmentsId,
...@@ -356,13 +419,11 @@ const feature = { ...@@ -356,13 +419,11 @@ const feature = {
const promisesResult = await Promise.all([ const promisesResult = await Promise.all([
...state.attachmentFormset.map((attachment) => putOrPostAttachement(attachment)), ...state.attachmentFormset.map((attachment) => putOrPostAttachement(attachment)),
...state.attachmentsToDelete.map((attachmentsId) => deleteAttachement(attachmentsId, featureId)) ...state.attachmentsToDelete.map((attachmentsId) => deleteAttachement(attachmentsId, featureId))
] ]);
);
state.attachmentsToDelete = []; state.attachmentsToDelete = [];
return promisesResult; return promisesResult;
}, },
DELETE_ATTACHMENTS({ commit }, payload) { DELETE_ATTACHMENTS({ commit }, payload) {
const url = `${this.state.configuration.VUE_APP_DJANGO_API_BASE}features/${payload.featureId}/attachments/${payload.attachmentsId}/`; const url = `${this.state.configuration.VUE_APP_DJANGO_API_BASE}features/${payload.featureId}/attachments/${payload.attachmentsId}/`;
return axios return axios
...@@ -394,7 +455,7 @@ const feature = { ...@@ -394,7 +455,7 @@ const feature = {
DELETE_FEATURE({ rootState }, payload) { DELETE_FEATURE({ rootState }, payload) {
const { feature_id, noFeatureType } = payload; const { feature_id, noFeatureType } = payload;
let url = `${rootState.configuration.VUE_APP_DJANGO_API_BASE}features/${feature_id}/?` + let url = `${rootState.configuration.VUE_APP_DJANGO_API_BASE}v2/features/${feature_id}/?` +
`project__slug=${rootState.projects.project.slug}`; `project__slug=${rootState.projects.project.slug}`;
if (!noFeatureType) { if (!noFeatureType) {
url +=`&feature_type__slug=${rootState['feature-type'].current_feature_type_slug}`; url +=`&feature_type__slug=${rootState['feature-type'].current_feature_type_slug}`;
...@@ -406,8 +467,36 @@ const feature = { ...@@ -406,8 +467,36 @@ const feature = {
return false; return false;
}); });
}, },
}, /**
* Initializes extra forms based on the current feature type and its custom fields.
* This function retrieves custom fields for the current feature type, assigns values to them based on the current feature's properties,
* and commits them to the store to be displayed in the form.
*
* @param {Object} context - The Vuex action context, including state, rootGetters, and commit function.
*/
INIT_EXTRA_FORMS({ state, rootGetters, commit }) {
const feature = state.currentFeature; // Current feature being edited or viewed.
const featureType = rootGetters['feature-type/feature_type']; // Retrieves the feature type from root getters.
const customFields = featureType.customfield_set; // Custom fields defined for the feature type.
if (customFields) {
commit('SET_EXTRA_FORMS',
activateFieldsNforceValues( // A hypothetical function to activate fields and enforce their values.
customFields.map((field) => {
// Determines the initial value for the field
let value = feature.properties ? feature.properties[field.name] : findXformValue(feature, field);
// If the field is a boolean and the value is null, sets it to false
if (field.field_type === 'boolean' && value === null) {
value = false;
}
// Returns a new object with the updated value and the rest of the field's properties
return { ...field, value };
})
).sort((a, b) => a.position - b.position) // Sorts fields by their user-defined position.
);
}
},
},
}; };
export default feature; export default feature;
src/store/modules/map.store.js
View file @ ee17a921
...@@ -83,7 +83,7 @@ const map = { ...@@ -83,7 +83,7 @@ const map = {
actions: { actions: {
GET_AVAILABLE_LAYERS({ commit }) { GET_AVAILABLE_LAYERS({ commit }) {
return axios return axios
.get(`${this.state.configuration.VUE_APP_DJANGO_API_BASE}layers/`) .get(`${this.state.configuration.VUE_APP_DJANGO_API_BASE}v2/layers/`)
.then((response) => (commit('SET_LAYERS', response.data))) .then((response) => (commit('SET_LAYERS', response.data)))
.catch((error) => { .catch((error) => {
throw error; throw error;
...@@ -92,7 +92,7 @@ const map = { ...@@ -92,7 +92,7 @@ const map = {
GET_BASEMAPS({ commit }, project_slug) { GET_BASEMAPS({ commit }, project_slug) {
return axios return axios
.get(`${this.state.configuration.VUE_APP_DJANGO_API_BASE}base-maps/?project__slug=${project_slug}`) .get(`${this.state.configuration.VUE_APP_DJANGO_API_BASE}v2/base-maps/?project__slug=${project_slug}`)
.then((response) => { .then((response) => {
if (response.status === 200 && response.data) { if (response.status === 200 && response.data) {
commit('SET_BASEMAPS', response.data); commit('SET_BASEMAPS', response.data);
...@@ -104,47 +104,47 @@ const map = { ...@@ -104,47 +104,47 @@ const map = {
}); });
}, },
INITIATE_MAP({ commit }, el) { //todo: since this function is not anymore called in different components, it would better to move it in project_details.vue INITIATE_MAP({ commit, rootState }, options) {
const mapDefaultViewCenter = [46, 2]; // defaultMapView.center; var mapDefaultViewCenter =
const mapDefaultViewZoom = 5; // defaultMapView.zoom; this.state.configuration.DEFAULT_MAP_VIEW.center;
mapService.createMap(el, { var mapDefaultViewZoom =
mapDefaultViewCenter: mapDefaultViewCenter, this.state.configuration.DEFAULT_MAP_VIEW.zoom;
mapDefaultViewZoom: mapDefaultViewZoom, mapService.createMap(options.el, {
mapDefaultViewZoom: options.zoom || mapDefaultViewZoom || 5,
mapDefaultViewCenter: options.center || mapDefaultViewCenter || [46.0, 2.0],
maxZoom: options.maxZoom || rootState.projects.project.map_max_zoom_level,
controls: options.controls,
zoomControl: options.zoomControl,
interactions : { doubleClickZoom :false, mouseWheelZoom:true, dragPan:true , ...options.interactions },
geolocationControl: true,
}); });
const map = { ...mapService.getMap() }; const map = { ...mapService.getMap() };
commit('SET_MAP', map); commit('SET_MAP', map);
mapService.addLayers(
null,
this.state.configuration.DEFAULT_BASE_MAP_SERVICE,
this.state.configuration.DEFAULT_BASE_MAP_OPTIONS,
this.state.configuration.DEFAULT_BASE_MAP_SCHEMA_TYPE,
);
}, },
async SAVE_BASEMAPS({ state, rootState, dispatch }, newBasemapIds) { async SAVE_BASEMAPS({ state, rootState, dispatch }, newBasemapIds) {
//* send new basemaps synchronously to create their ids in the order they were created in the form //* send new basemaps synchronously to create their ids in the order they were created in the form
let promisesResult = []; let promisesResult = [];
function postOrPut(basemapsToSend) { function postOrPut(basemapsToSend) {
if (basemapsToSend.length > 0) { if (basemapsToSend.length > 0) { //* execute the function recursively as long as there is still a basemap to send
let basemap = basemapsToSend.shift(); //* remove and return first item in array let basemap = basemapsToSend.shift(); //* remove and return first item in array
basemap['project'] = rootState.projects.project.slug; basemap['project'] = rootState.projects.project.slug;
let url = `${rootState.configuration.VUE_APP_DJANGO_API_BASE}base-maps/`; let url = `${rootState.configuration.VUE_APP_DJANGO_API_BASE}v2/base-maps/`;
if (!newBasemapIds.includes(basemap.id)) url += `${basemap.id}/`; if (!newBasemapIds.includes(basemap.id)) url += `${basemap.id}/`;
promisesResult.push( axios({
axios({ url,
url, method: newBasemapIds.includes(basemap.id) ? 'POST' : 'PUT',
method: newBasemapIds.includes(basemap.id) ? 'POST' : 'PUT', data: basemap,
data: basemap, })
.then((response) => {
postOrPut(basemapsToSend);
promisesResult.push(response);
}) })
.then((response) => { .catch((error) => {
postOrPut(basemapsToSend); postOrPut(basemapsToSend);
return response; promisesResult.push(error);
}) });
.catch((error) => {
postOrPut(basemapsToSend);
return error;
})
);
} }
} }
...@@ -153,16 +153,17 @@ const map = { ...@@ -153,16 +153,17 @@ const map = {
return dispatch('DELETE_BASEMAP', basemapId) return dispatch('DELETE_BASEMAP', basemapId)
.then((response) => response); .then((response) => response);
} }
//* save new or modifed basemap
postOrPut([...state.basemaps]); postOrPut([...state.basemaps]);
//* delete basemaps //* delete basemaps
const deletedResult = await Promise.all(state.basemapsToDelete.map((basemapId) => deleteBMap(basemapId))); const deletedResult = await Promise.all(state.basemapsToDelete.map((basemapId) => deleteBMap(basemapId)));
state.basemapsToDelete = []; state.basemapsToDelete = [];
//* return promises results
return [...promisesResult, ...deletedResult]; return [...promisesResult, ...deletedResult];
}, },
DELETE_BASEMAP({ commit }, basemapId) { DELETE_BASEMAP({ commit, rootState }, basemapId) {
const url = `${this.state.configuration.VUE_APP_DJANGO_API_BASE}base-maps/` + basemapId; const url = `${rootState.configuration.VUE_APP_DJANGO_API_BASE}v2/base-maps/${basemapId}/`;
return axios return axios
.delete(url) .delete(url)
.then((response) => { .then((response) => {
......
src/store/modules/projects.store.js
View file @ ee17a921
...@@ -8,6 +8,35 @@ const initialFilters = { ...@@ -8,6 +8,35 @@ const initialFilters = {
accessible: null accessible: null
}; };
/**
* Constructs the URL for the search request, appending search text and any active filters.
*
* @param {Object} rootState - The root state to access global configuration settings.
* @param {Object} filters - The current state of filters applied to the search.
* @param {String} text - The current search text.
* @returns {String} The fully constructed URL for the search request.
*/
function constructSearchUrl({ baseUrl, filters, text, page }) {
let url = `${baseUrl}v2/projects/?`;
// Append page number if provided.
if (page) {
url += `page=${page}`;
}
// Append search text if provided.
if (text) {
url += `&search=${encodeURIComponent(text)}`;
}
// Append each active filter to the URL.
Object.entries(filters).forEach(([key, value]) => {
if (value) {
url += `&${key}=${encodeURIComponent(value)}`;
}
});
return url;
}
const projectsStore = { const projectsStore = {
namespaced: true, namespaced: true,
...@@ -20,7 +49,7 @@ const projectsStore = { ...@@ -20,7 +49,7 @@ const projectsStore = {
last_comments: [], last_comments: [],
projects: [], projects: [],
project: null, project: null,
project_slug: null, projectUsers: [],
searchProjectsFilter: null, searchProjectsFilter: null,
}, },
...@@ -47,12 +76,12 @@ const projectsStore = { ...@@ -47,12 +76,12 @@ const projectsStore = {
state.project = project; state.project = project;
}, },
SET_PROJECTS_FILTER(state, payload) { SET_PROJECT_USERS(state, users) {
state.filters[payload.filter] = payload.value; state.projectUsers = users;
}, },
RESET_PROJECTS_FILTER(state) { SET_PROJECTS_FILTER(state, payload) {
state.filters = { ...initialFilters }; state.filters[payload.filter] = payload.value;
}, },
SET_PROJECTS_SEARCH_STATE(state, payload) { SET_PROJECTS_SEARCH_STATE(state, payload) {
...@@ -66,19 +95,6 @@ const projectsStore = { ...@@ -66,19 +95,6 @@ const projectsStore = {
}, },
actions: { actions: {
async GET_ALL_PROJECTS({ rootState, commit }) {
try {
const response = await axios
.get(`${rootState.configuration.VUE_APP_DJANGO_API_BASE}projects/`);
if (response.status === 200 && response.data) {
commit('SET_PROJECTS', response.data);
}
} catch (error) {
console.error(error);
throw error;
}
},
async GET_PROJECTS({ state, rootState, commit }, payload) { async GET_PROJECTS({ state, rootState, commit }, payload) {
let { page, myaccount, projectSlug } = payload || {}; let { page, myaccount, projectSlug } = payload || {};
if (!page) { if (!page) {
...@@ -91,6 +107,7 @@ const projectsStore = { ...@@ -91,6 +107,7 @@ const projectsStore = {
page, page,
projectSlug, projectSlug,
myaccount, myaccount,
text: state.searchProjectsFilter
}); });
commit('SET_PROJECTS', projects); commit('SET_PROJECTS', projects);
return; return;
...@@ -115,14 +132,19 @@ const projectsStore = { ...@@ -115,14 +132,19 @@ const projectsStore = {
return project; return project;
}, },
async GET_PROJECT_INFO({ rootState, dispatch }, slug) { async GET_PROJECT_USERS({ rootState, commit }, projectSlug) {
const baseUrl = rootState.configuration.VUE_APP_DJANGO_API_BASE;
const users = await projectAPI.getProjectUsers(baseUrl, projectSlug);
commit('SET_PROJECT_USERS', users);
return users;
},
async GET_PROJECT_INFO({ dispatch }, slug) {
const promises = [ const promises = [
dispatch('GET_PROJECT_LAST_MESSAGES', slug).then(response => response), dispatch('GET_PROJECT_LAST_MESSAGES', slug).then(response => response),
dispatch('feature-type/GET_PROJECT_FEATURE_TYPES', slug, { root: true }).then(response => response), dispatch('feature-type/GET_PROJECT_FEATURE_TYPES', slug, { root: true }).then(response => response),
dispatch('map/GET_BASEMAPS', slug, { root: true }).then(response => response)
]; ];
if (rootState.user) {
promises.push(dispatch('map/GET_BASEMAPS', slug, { root: true }).then(response => response));
}
const promiseResult = await Promise.all(promises); const promiseResult = await Promise.all(promises);
return promiseResult; return promiseResult;
...@@ -142,47 +164,52 @@ const projectsStore = { ...@@ -142,47 +164,52 @@ const projectsStore = {
}); });
}, },
async HANDLE_PROJECTS_SEARCH_REQUEST({ state, rootState, commit }, text) { /**
* Asynchronously handles the search request for projects, incorporating search text and applied filters.
* Cancels any ongoing search request to ensure that only the latest request is processed,
* which enhances the responsiveness of search functionality.
*
* @param {Object} context - Destructured to gain access to Vuex state, rootState, and commit function.
* @param {String} text - The search text used for filtering projects.
*/
async HANDLE_PROJECTS_SEARCH_REQUEST({ state, rootState, commit }, { page, text }) {
// Cancel any ongoing search request.
if (rootState.cancellableSearchRequest.length > 0) { if (rootState.cancellableSearchRequest.length > 0) {
const currentRequestCancelToken = const currentRequestCancelToken =
rootState.cancellableSearchRequest[rootState.cancellableSearchRequest.length - 1]; rootState.cancellableSearchRequest[rootState.cancellableSearchRequest.length - 1];
currentRequestCancelToken.cancel(); currentRequestCancelToken.cancel();
} }
// Prepare the cancel token for the new request and store it.
const cancelToken = axios.CancelToken.source(); const cancelToken = axios.CancelToken.source();
commit('SET_CANCELLABLE_SEARCH_REQUEST', cancelToken, { root: true }); commit('SET_CANCELLABLE_SEARCH_REQUEST', cancelToken, { root: true });
const url = `${rootState.configuration.VUE_APP_DJANGO_API_BASE}projects/?search=${text}`; // Construct the search URL with any applied filters.
let filteredUrl; const searchUrl = constructSearchUrl({
if (Object.values(state.filters).some(el => el && el.length > 0)) { baseUrl: rootState.configuration.VUE_APP_DJANGO_API_BASE,
filteredUrl = url; filters: state.filters,
for (const filter in state.filters) { text,
if (state.filters[filter]) { page
filteredUrl = filteredUrl.concat('', `&${filter}=${state.filters[filter]}`); });
}
}
}
const response = await axios.get( try {
filteredUrl ? filteredUrl : url, // Perform the search request.
{ const response = await axios.get(searchUrl, { cancelToken: cancelToken.token });
cancelToken: cancelToken.token,
} // Process successful response.
); if (response.status === 200 && response.data) {
if (response.status === 200) { commit('SET_PROJECTS', response.data);
const projects = response.data;
if (projects) {
commit('SET_PROJECTS', projects);
commit('SET_PROJECTS_SEARCH_STATE', { commit('SET_PROJECTS_SEARCH_STATE', {
isSearched: true, isSearched: true,
text: text text: text
}); });
} }
} catch (error) {
// Handle potential errors, such as request cancellation.
console.error('Search request canceled or failed', error);
} }
}, }
} }
}; };
export default projectsStore; export default projectsStore;
src/utils/index.js
View file @ ee17a921
import featureAPI from '@/services/feature-api';
import { isEqual, isNil } from 'lodash';
export function formatStringDate(stringDate) { export function formatStringDate(stringDate) {
const date = new Date(stringDate); const date = new Date(stringDate);
const formatted_date = date.getFullYear() + '/' + ('0' + (date.getMonth() + 1)).slice(-2) + '/' + ('0' + date.getDate()).slice(-2) + ' ' + if (date instanceof Date && !isNaN(date.valueOf())) {
('0' + date.getHours()).slice(-2) + ':' + ('0' + date.getMinutes()).slice(-2); const formatted_date = date.getFullYear() + '/' + ('0' + (date.getMonth() + 1)).slice(-2) + '/' + ('0' + date.getDate()).slice(-2) + ' ' +
return formatted_date; ('0' + date.getHours()).slice(-2) + ':' + ('0' + date.getMinutes()).slice(-2);
return formatted_date;
}
return stringDate;
} }
export function allowedStatus2change(statusChoices, isModerate, userStatus, isOwnFeature, currentRouteName) { export const statusChoices = [
if ( //* si admin, modérateur ou super contributeur, statuts toujours disponibles: Brouillon, Publié, Archivé {
userStatus === 'Modérateur' || name: 'Brouillon',
value: 'draft',
},
{
name: 'En attente de publication',
value: 'pending',
},
{
name: 'Publié',
value: 'published',
},
{
name: 'Archivé',
value: 'archived',
},
];
export function allowedStatus2change(user, isModerate, userStatus, isOwnFeature, currentRouteName) {
if ( //* si 'super-admin'(superuser) admin, modérateur ou super contributeur, statuts toujours disponibles: Brouillon, Publié, Archivé
user.is_superuser ||
userStatus === 'Modérateur' ||
userStatus === 'Administrateur projet' || userStatus === 'Administrateur projet' ||
(userStatus === 'Super Contributeur' && !isModerate) (userStatus === 'Super Contributeur' && !isModerate)
) { ) {
...@@ -19,6 +45,7 @@ export function allowedStatus2change(statusChoices, isModerate, userStatus, isOw ...@@ -19,6 +45,7 @@ export function allowedStatus2change(statusChoices, isModerate, userStatus, isOw
} else if (userStatus === 'Contributeur') { //* cas particuliers du contributeur } else if (userStatus === 'Contributeur') { //* cas particuliers du contributeur
if (currentRouteName === 'ajouter-signalement' || !isOwnFeature) { if (currentRouteName === 'ajouter-signalement' || !isOwnFeature) {
//* même cas à l'ajout d'une feature ou si feature n'a pas été créé par le contributeur //* même cas à l'ajout d'une feature ou si feature n'a pas été créé par le contributeur
//? Incohérence / Inutile ? Un contributeur ne peut pas modifier un signalement d'un autre utilisateur
return isModerate return isModerate
? statusChoices.filter( ? statusChoices.filter(
(el) => el.value === 'draft' || el.value === 'pending' (el) => el.value === 'draft' || el.value === 'pending'
...@@ -38,4 +65,230 @@ export function allowedStatus2change(statusChoices, isModerate, userStatus, isOw ...@@ -38,4 +65,230 @@ export function allowedStatus2change(statusChoices, isModerate, userStatus, isOw
} }
} }
return []; return [];
}
/**
* Determines the type of a property based on its value.
*
* This function inspects a given property and returns a string indicating its type,
* such as 'boolean', 'integer', 'decimal', 'date', 'text', or 'char'.
* It uses various checks to determine the appropriate type for different value formats.
*
* @param {any} prop - The property value to be evaluated.
* @returns {string} The determined type of the property ('boolean', 'integer', 'decimal', 'date', 'text', or 'char').
*/
export function transformProperties(prop) {
const type = typeof prop;
const regInteger = /^-?\d+$/; // Regular expression to match integer numbers
const regFloat = /^-?\d*\.\d+$/; // Regular expression to match decimal numbers
const regText = /[\r\n]/; // Regular expression to detect multiline text (newlines)
const regDate = /^\d{4}-\d{2}-\d{2}$|^\d{2}\/\d{2}\/\d{4}$/; // Regular expression to match common date formats
// Check if the property is a boolean or a string that represents a boolean
if (type === 'boolean' || (type === 'string' && (prop.toLowerCase() === 'true' || prop.toLowerCase() === 'false'))) {
return 'boolean';
} else if (regInteger.test(prop) || (type === 'number' && Number.isSafeInteger(prop))) {
// Check if the property is an integer or a string that represents an integer
return 'integer';
} else if (type === 'string' && regDate.test(prop.trim())) {
// More specific check for date strings using regular expressions
return 'date';
} else if (regFloat.test(prop) || (type === 'number' && !Number.isSafeInteger(prop))) {
// Check if the property is a decimal number or a string that represents a decimal
return 'decimal';
} else if (regText.test(prop) || (type === 'string' && prop.length > 255)) {
// Check if the property contains newline characters or is a long text
return 'text';
}
// Default case for all other types: assume it is a short text or character field
return 'char';
}
export function objIsEmpty(obj) {
for(const prop in obj) {
if(Object.hasOwn(obj, prop)) {
return false;
}
}
return true;
}
export const reservedKeywords = [
// todo : add keywords for mapstyle (strokewidth...)
'id',
'title',
'description',
'status',
'created_on',
'updated_on',
'archived_on',
'deletion_on',
'feature_type',
'feature_id',
'display_creator',
'display_last_editor',
'project',
'creator',
'lat',
'lon'
];
export const customFieldTypeChoices = [
{ name: 'Booléen', value: 'boolean' },
{ name: 'Chaîne de caractères', value: 'char' },
{ name: 'Date', value: 'date' },
{ name: 'Liste de valeurs', value: 'list' },
{ name: 'Liste de valeurs pré-enregistrées', value: 'pre_recorded_list' },
{ name: 'Liste à choix multiples', value: 'multi_choices_list' },
{ name: 'Nombre entier', value: 'integer' },
{ name: 'Nombre décimal', value: 'decimal' },
{ name: 'Texte multiligne', value: 'text' },
{ name: 'Notification à un groupe', value: 'notif_group' },
];
export const featureNativeFields = [
{ name: 'status', label: 'Statut', field_type: 'Champ GéoContrib' },
{ name: 'feature_type', label: 'Type', field_type: 'Champ GéoContrib' },
{ name: 'updated_on', label: 'Dernière mise à jour', field_type: 'Champ GéoContrib' },
{ name: 'created_on', label: 'Date de création', field_type: 'Champ GéoContrib' },
{ name: 'display_creator', label: 'Auteur', field_type: 'Champ GéoContrib' },
{ name: 'display_last_editor', label: 'Dernier éditeur', field_type: 'Champ GéoContrib' },
];
export const formatDate = (current_datetime) => {
let formatted_date = current_datetime.getFullYear() + '-' + ('0' + (current_datetime.getMonth() + 1)).slice(-2) + '-' + ('0' + current_datetime.getDate()).slice(-2) + '&nbsp;' +
('0' + current_datetime.getHours()).slice(-2) + ':' + ('0' + current_datetime.getMinutes()).slice(-2);
return formatted_date;
};
export const retrieveFeatureProperties = async (feature, featureTypes, projectSlug) => {
const properties = feature.getProperties();
let { feature_type, status, updated_on, created_on, creator, display_last_editor, index } = properties;
if (creator) {
creator = creator.full_name ? `${creator.first_name} ${creator.last_name}` : creator.username;
} else if (properties.feature_id) {
//* if *** MVT *** feature, retrieve display_creator and display_last_editor by fetching the feature details from API
const fetchedFeature = await featureAPI.getProjectFeature(projectSlug, properties.feature_id);
if (fetchedFeature) {
creator = fetchedFeature.properties.display_creator;
display_last_editor = fetchedFeature.properties.display_last_editor;
feature_type = fetchedFeature.properties.feature_type;
}
}
if (featureTypes && feature_type) {
feature_type = featureTypes.find((el) => el.slug === (feature_type.slug || feature_type));
}
if (updated_on && !isNaN(new Date(updated_on))) { //* check if date is already formatted
updated_on = formatDate(new Date(updated_on));
}
if (created_on && !isNaN(new Date(created_on))) { //* check if date is already formatted
created_on = formatDate(new Date(created_on));
}
if (status) {
if (status.label) { //* when the label is already in the feature
status = status.label;
} else if (featureTypes) { //* if not, retrieve the name/label from the list
status = statusChoices.find((el) => el.value === status).name;
}
}
return { feature_type, status, updated_on, created_on, creator, display_last_editor, index };
};
export function findXformValue(feature, customField) {
if (!feature) return null;
if (feature.properties) {
return feature.properties[customField.name] || null;
} else if (feature.feature_data) {
const field = feature.feature_data.find((el) => el.label === customField.label);
return field ? field.value : null;
}
return null;
}
export function isXtraFormActive(extraForms, config) { // return true if no config or if the condition is fullfilled
if (config) { // if conditional field configuration is not null
// get name and value in condition
const { conditionField, conditionValue } = config;
// get the customForm which activates conditional field
const conditioningXForm = extraForms.find((xForm) => xForm.name === conditionField);
// check if the conditioning extraform value match the condition value
if (conditioningXForm) {
// if the values to compare are null or undefined the field can't be activated
if (isNil(conditioningXForm.value) || isNil(conditionValue)) {
return false;
} else if (Array.isArray(conditionValue) && Array.isArray(conditioningXForm.value)) { // case of multiple list or prerecorded values list
return conditioningXForm.value.some((value) => conditionValue.includes(value));
} else if (typeof conditioningXForm.value === 'object' && conditioningXForm.value.label) { // case of simple list
return conditioningXForm.value.label === conditionValue.label;
} else {
return conditioningXForm.value === conditionValue; // more simple case of other fields
}
}
}
return true;
}
export function checkDeactivatedValues(extraForms) {
// if changes occured, update extraForms array with freshly checked active customForms
let newExtraForms = extraForms.map((xForm) => { // we use 'deactivate' instead of 'activate' because at initialization this property cannot be evaluated ...
const isDeactivated = !isXtraFormActive(extraForms, xForm.conditional_field_config); // ... if the component is not created to set this property, thus no extra form would appear at all
// toggle value to null to deactivate other fields conditioned by it
if (isDeactivated) {
xForm['value'] = null;
}
return { ...xForm, ['isDeactivated']: isDeactivated };
});
return newExtraForms;
}
export function checkFieldForcedValue(field, extraForms) {
field['disabled'] = false; //* create a property disabled and (re)set to false by default
if (field.forced_value_config) {
//* loop over each forced value config for this extraForm
for (const config of field.forced_value_config) {
//* find the extraForm field conditioning the forced value
const conditioningField = extraForms.find((xtraForm) => xtraForm.name === config.conditionField);
//* if found check that its value match the condtionValue
if (conditioningField && isEqual(conditioningField.value, config.conditionValue)) {
//* set this value with the forced value and disable the form field
field.value = config.forcedValue;
field.disabled = true;
}
}
}
return field;
}
export function activateFieldsNforceValues(extraForms) {
for (const [index, field] of extraForms.entries()) {
const checkedField = checkFieldForcedValue(field, extraForms);
//* each time a value changes, call this function recursively, until there is no more change
if (checkedField.value !== field.value) {
extraForms[index] = checkedField; //* update the value in extraForms
activateFieldsNforceValues(extraForms); //* call the function with new extraForms
}
}
//* when no more changes detected in the loop, check for deactivated extraForms
extraForms = checkDeactivatedValues(extraForms);
//* return extraForms from the lastly called function
return extraForms;
}
export function formatUserOption(user) {
let name = user.first_name || '';
if (user.last_name) {
name = name + ' ' + user.last_name;
}
return {
name: [name, user.username],
value: user.id,
};
} }
\ No newline at end of file
src/views/Account.vue
View file @ ee17a921
<template> <template>
<div <div id="account">
id="account"
class="page"
>
<h1>Mon compte</h1> <h1>Mon compte</h1>
<div class="ui stackable grid"> <div class="ui stackable grid">
......
src/views/AttachmentPreview.vue 0 → 100644
View file @ ee17a921
<template>
<div
v-if="(configuration.VUE_APP_SSO_LOGIN_URL_WITH_REDIRECT && !user) || !currentFeature"
class="no-access"
>
<h3>
🔒&nbsp;Vous n'avez pas accès à ce signalement
<span v-if="!user"> en tant qu'utilisateur anonyme&nbsp;🥸</span>
</h3>
<p v-if="!user">
Veuillez vous connectez afin de pouvoir visualiser le document
</p>
</div>
<div
v-else
:class="['preview', { is_pdf }]"
>
<embed
v-if="is_pdf"
:src="src"
type="application/pdf"
>
<div v-else>
<img
:src="src"
alt="Aperçu de l'image"
>
</div>
</div>
</template>
<script>
import { mapState } from 'vuex';
export default {
name: 'AttachmentPreview',
computed: {
...mapState([
'configuration',
'user'
]),
...mapState('feature', [
'currentFeature'
]),
src() {
return this.$route.query.file;
},
is_pdf() {
return this.src && this.src.includes('pdf');
},
},
watch: {
user() {
/**
* Specific for platform with login by token
* When the user is setted, fetching again the feature with the cookies setted
* since automatic authentification can take time to return the response
* setting the cookies, while the app is loading already
*/
this.getFeature();
}
},
mounted() {
this.getFeature();
},
methods: {
getFeature() {
console.log('getFeature'); // Keeping for debugging after deployment
this.$store.dispatch('feature/GET_PROJECT_FEATURE', {
project_slug: this.$route.params.slug,
feature_id: this.$route.params.slug_signal,
});
}
}
};
</script>
<style scoped lang="less">
.no-access {
> h1 {
margin: 2em 0;
}
height: 60vh;
display: flex;
justify-content: center;
flex-direction: column;
> * {
text-align: center;
}
}
.preview {
width: 100vw;
&.is_pdf {
padding: 0;
@media screen and (min-width: 726px) {
height: calc(100vh - 70px - 1em);
margin: .5em auto;
box-shadow: 1px 2px 10px grey;
}
@media screen and (max-width: 725px) {
height: calc(100vh - 110px);
margin: 0 auto;
}
}
> * {
height: 100%;
width: 100%;
}
> div {
display: flex;
justify-content: center;
img {
max-width: 100%;
}
}
}
</style>
\ No newline at end of file
src/views/Feature/FeatureDetail.vue
View file @ ee17a921
<template> <template>
<div <div id="feature-detail">
id="feature-detail"
class="page"
>
<div <div
v-if="currentFeature" v-if="currentFeature"
class="ui grid stackable" class="ui grid stackable"
...@@ -10,33 +7,58 @@ ...@@ -10,33 +7,58 @@
<div class="row"> <div class="row">
<div class="sixteen wide column"> <div class="sixteen wide column">
<FeatureHeader <FeatureHeader
@setIsCancelling="isCanceling = true" v-if="project"
:features-count="featuresCount"
:slug-signal="slugSignal"
:feature-type="feature_type"
:fast-edition-mode="project.fast_edition_mode"
:is-feature-creator="isFeatureCreator"
:can-edit-feature="canEditFeature"
:can-delete-feature="canDeleteFeature"
@fastEditFeature="validateFastEdition"
@setIsDeleting="isDeleting = true"
@tofeature="pushNgo"
/> />
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="eight wide column"> <div class="eight wide column">
<FeatureTable <FeatureTable
@pushNGo="pushNgo" v-if="project"
ref="featureTable"
:feature-type="feature_type"
:fast-edition-mode="project.fast_edition_mode"
:can-edit-feature="canEditFeature"
/> />
</div> </div>
<div class="eight wide column"> <div
<div v-if="feature_type && feature_type.geom_type !== 'none'"
id="map" class="eight wide column"
ref="map" >
/> <div class="map-container">
<div <div
id="popup" id="map"
class="ol-popup" ref="map"
> >
<a <SidebarLayers
id="popup-closer" v-if="basemaps && map"
href="#" ref="sidebar"
class="ol-popup-closer" />
/> <Geolocation />
<div </div>
id="popup-content" <div
/> id="popup"
class="ol-popup"
>
<a
id="popup-closer"
href="#"
class="ol-popup-closer"
/>
<div
id="popup-content"
/>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -49,32 +71,38 @@ ...@@ -49,32 +71,38 @@
<div class="eight wide column"> <div class="eight wide column">
<FeatureComments <FeatureComments
:events="events" :events="events"
:enable-key-doc-notif="feature_type.enable_key_doc_notif"
@fetchEvents="getFeatureEvents"
/> />
</div> </div>
</div> </div>
<div <div
v-if="isCanceling" v-if="isDeleting"
class="ui dimmer modals transition visible active" class="ui dimmer modals visible active"
style="display: flex !important"
> >
<div <div
:class="[ :class="[
'ui mini modal subscription', 'ui mini modal',
{ 'active visible': isCanceling }, { 'active visible': isDeleting },
]" ]"
> >
<i <i
class="close icon" class="close icon"
aria-hidden="true" aria-hidden="true"
@click="isCanceling = false" @click="isDeleting = false"
/> />
<div class="ui icon header"> <div
v-if="isDeleting"
class="ui icon header"
>
<i <i
class="trash alternate icon" class="trash alternate icon"
aria-hidden="true" aria-hidden="true"
/> />
Supprimer le signalement Supprimer le signalement
</div> </div>
<div class="actions"> <div class="actions">
<button <button
type="button" type="button"
...@@ -86,7 +114,60 @@ ...@@ -86,7 +114,60 @@
</div> </div>
</div> </div>
</div> </div>
<div
v-if="isLeaving"
class="ui dimmer modals visible active"
>
<div
:class="[
'ui mini modal',
{ 'active visible': isLeaving },
]"
>
<i
class="close icon"
aria-hidden="true"
@click="isLeaving = false"
/>
<div class="ui icon header">
<i
class="sign-out icon"
aria-hidden="true"
/>
Abandonner les modifications
</div>
<div class="content">
Les modifications apportées au signalement ne seront pas sauvegardées, continuer ?
</div>
<div class="actions">
<button
type="button"
class="ui green compact button"
@click="stayOnPage"
>
<i
class="close icon"
aria-hidden="true"
/>
Annuler
</button>
<button
type="button"
class="ui red compact button"
@click="leavePage"
>
Continuer
<i
class="arrow right icon"
aria-hidden="true"
/>
</button>
</div>
</div>
</div>
</div> </div>
<div v-else> <div v-else>
Pas de signalement correspondant trouvé Pas de signalement correspondant trouvé
</div> </div>
...@@ -94,7 +175,8 @@ ...@@ -94,7 +175,8 @@
</template> </template>
<script> <script>
import { mapState, mapActions, mapMutations } from 'vuex'; import { isEqual } from 'lodash';
import { mapState, mapActions, mapMutations, mapGetters } from 'vuex';
import mapService from '@/services/map-service'; import mapService from '@/services/map-service';
import axios from '@/axios-client.js'; import axios from '@/axios-client.js';
...@@ -104,6 +186,9 @@ import FeatureHeader from '@/components/Feature/Detail/FeatureHeader'; ...@@ -104,6 +186,9 @@ import FeatureHeader from '@/components/Feature/Detail/FeatureHeader';
import FeatureTable from '@/components/Feature/Detail/FeatureTable'; import FeatureTable from '@/components/Feature/Detail/FeatureTable';
import FeatureAttachements from '@/components/Feature/Detail/FeatureAttachements'; import FeatureAttachements from '@/components/Feature/Detail/FeatureAttachements';
import FeatureComments from '@/components/Feature/Detail/FeatureComments'; import FeatureComments from '@/components/Feature/Detail/FeatureComments';
import SidebarLayers from '@/components/Map/SidebarLayers';
import Geolocation from '@/components/Map/Geolocation';
import { buffer } from 'ol/extent'; import { buffer } from 'ol/extent';
export default { export default {
...@@ -113,7 +198,25 @@ export default { ...@@ -113,7 +198,25 @@ export default {
FeatureHeader, FeatureHeader,
FeatureTable, FeatureTable,
FeatureAttachements, FeatureAttachements,
FeatureComments FeatureComments,
SidebarLayers,
Geolocation,
},
beforeRouteUpdate (to, from, next) {
if (this.hasUnsavedChange && !this.isSavingChanges) {
this.confirmLeave(next); // prompt user that there is unsaved changes or that features order might change
} else {
next(); // continue navigation
}
},
beforeRouteLeave (to, from, next) {
if (this.hasUnsavedChange && !this.isSavingChanges) {
this.confirmLeave(next); // prompt user that there is unsaved changes or that features order might change
} else {
next(); // continue navigation
}
}, },
data() { data() {
...@@ -133,63 +236,130 @@ export default { ...@@ -133,63 +236,130 @@ export default {
}, },
}, },
events: [], events: [],
isCanceling: false, featuresCount: null,
projectSlug: this.$route.params.slug, isDeleting: false,
isLeaving: false,
isSavingChanges: false,
map: null,
slug: this.$route.params.slug,
slugSignal: '',
}; };
}, },
computed: { computed: {
...mapState([
'USER_LEVEL_PROJECTS',
'user'
]),
...mapState('projects', [ ...mapState('projects', [
'project' 'project'
]), ]),
...mapState('feature-type', [ ...mapState('feature-type', [
'feature_types' 'feature_types',
]), ]),
...mapState('feature', [ ...mapState('feature', [
'currentFeature' 'currentFeature',
'form',
]),
...mapGetters('feature-type', [
'feature_type',
]), ]),
...mapGetters([
'permissions',
]),
...mapState('map', [
'basemaps',
]),
/**
* Checks if there are any unsaved changes in the form compared to the current feature's properties.
* This function is useful for prompting the user before they navigate away from a page with unsaved changes.
*
* @returns {boolean} - Returns true if there are unsaved changes; otherwise, returns false.
*/
hasUnsavedChange() {
// Ensure we are in edition mode and all required objects are present.
if (this.project && this.project.fast_edition_mode &&
this.form && this.currentFeature && this.currentFeature.properties) {
// Check for changes in title, description, and status.
if (this.form.title !== this.currentFeature.properties.title) return true;
if (this.form.description.value !== this.currentFeature.properties.description) return true;
if (this.form.status.value !== this.currentFeature.properties.status) return true;
if (this.form.assigned_member.value !== this.currentFeature.properties.assigned_member) return true;
// Iterate over extra forms to check for any changes.
for (const xForm of this.$store.state.feature.extra_forms) {
const originalValue = this.currentFeature.properties[xForm.name];
// Check if the form value has changed, considering edge cases for undefined, null, or empty values.
if (
!isEqual(xForm.value, originalValue) && // Check if values have changed.
!(!xForm.value && !originalValue) // Ensure both aren't undefined/null/empty, treating null as equivalent to false for unactivated conditionals or unset booleans.
) {
// Log the difference for debugging purposes.
console.log(`In custom form [${xForm.name}], the current form value [${xForm.value}] differs from original value [${originalValue}]`);
return true;
}
}
}
// If none of the above conditions are met, return false indicating no unsaved changes.
return false;
},
isFeatureCreator() {
if (this.currentFeature && this.currentFeature.properties && this.user) {
return this.currentFeature.properties.creator === this.user.id ||
this.currentFeature.properties.creator.username === this.user.username;
}
return false;
},
isModerator() {
return this.USER_LEVEL_PROJECTS && this.USER_LEVEL_PROJECTS[this.slug] === 'Modérateur';
},
isAdministrator() {
return this.USER_LEVEL_PROJECTS && this.USER_LEVEL_PROJECTS[this.slug] === 'Administrateur projet';
},
canEditFeature() {
return (this.permissions && this.permissions.can_update_feature) ||
this.isFeatureCreator ||
this.isModerator ||
this.user.is_superuser;
},
canDeleteFeature() {
return (this.permissions && this.permissions.can_delete_feature && this.isFeatureCreator) ||
this.isFeatureCreator ||
this.isModerator ||
this.isAdministrator ||
this.user.is_superuser;
},
},
watch: {
/**
* To navigate back or forward to the previous or next URL, the query params in url are updated
* since the route doesn't change, mounted is not called, then the page isn't updated
* To reload page infos we need to call initPage() when query changes
*/
'$route.query'(newValue, oldValue) {
if (newValue !== oldValue) {
this.initPage();
}
},
}, },
created() { created() {
this.SET_CURRENT_FEATURE_TYPE_SLUG(this.$route.params.slug_type_signal); this.$store.dispatch('GET_USERS_GROUPS'); // récupére les groupes d'utilisateurs pour extra_forms
this.getFeatureEvents();
this.getFeatureAttachments();
this.getLinkedFeatures();
}, },
mounted() { mounted() {
this.DISPLAY_LOADER('Recherche du signalement'); this.initPage();
if (!this.project) {
// Chargements des features et infos projet en cas d'arrivée directe sur la page ou de refresh
axios.all([
this.GET_PROJECT(this.$route.params.slug),
this.GET_PROJECT_INFO(this.$route.params.slug),
this.GET_PROJECT_FEATURE({
project_slug: this.$route.params.slug,
feature_id: this.$route.params.slug_signal
})])
.then(() => {
this.DISCARD_LOADER();
this.initMap();
});
}
if (!this.currentFeature || this.currentFeature.feature_id !== this.$route.params.slug_signal) {
this.GET_PROJECT_FEATURE({
project_slug: this.$route.params.slug,
feature_id: this.$route.params.slug_signal
})
.then(() => {
this.DISCARD_LOADER();
this.initMap();
});
} else {
this.DISCARD_LOADER();
this.initMap();
}
}, },
beforeDestroy() { beforeDestroy() {
this.$store.commit('CLEAR_MESSAGES'); this.$store.commit('CLEAR_MESSAGES');
this.$store.dispatch('CANCEL_CURRENT_SEARCH_REQUEST');
}, },
methods: { methods: {
...@@ -197,6 +367,9 @@ export default { ...@@ -197,6 +367,9 @@ export default {
'DISPLAY_LOADER', 'DISPLAY_LOADER',
'DISCARD_LOADER' 'DISCARD_LOADER'
]), ]),
...mapMutations('feature', [
'SET_CURRENT_FEATURE'
]),
...mapMutations('feature-type', [ ...mapMutations('feature-type', [
'SET_CURRENT_FEATURE_TYPE_SLUG' 'SET_CURRENT_FEATURE_TYPE_SLUG'
]), ]),
...@@ -209,148 +382,245 @@ export default { ...@@ -209,148 +382,245 @@ export default {
'GET_PROJECT_FEATURES' 'GET_PROJECT_FEATURES'
]), ]),
pushNgo(link) { async initPage() {
this.$router.push({ await this.getPageInfo();
name: 'details-signalement', if(this.feature_type && this.feature_type.geom_type === 'none') {
params: { // setting map to null to ensure map would be created when navigating next to a geographical feature
slug_type_signal: link.feature_to.feature_type_slug, this.map = null;
slug_signal: link.feature_to.feature_id, } else if (this.currentFeature) {
}, this.initMap();
}); }
this.getFeatureEvents(); },
this.getFeatureAttachments();
this.getLinkedFeatures(); async getPageInfo() {
this.addFeatureToMap(); if (this.$route.params.slug_signal && this.$route.params.slug_type_signal) { // if coming from the route with an id
this.SET_CURRENT_FEATURE_TYPE_SLUG(this.$route.params.slug_type_signal);
this.slugSignal = this.$route.params.slug_signal;
} //* else it would be retrieve after fetchFilteredFeature with offset
this.DISPLAY_LOADER('Recherche du signalement');
let promises = [];
//* Récupération du projet, en cas d'arrivée directe sur la page ou de refresh
if (!this.project) {
promises.push(this.GET_PROJECT(this.slug));
}
//* Récupération des types de signalement, en cas de redirection page détails signalement avec id (projet déjà récupéré) ou cas précédent
if (!this.featureType || !this.basemaps) {
promises.push(
this.GET_PROJECT_INFO(this.slug),
);
}
//* changement de requête selon s'il y a un id ou un offset(dans le cas du parcours des signalements filtrés)
if (this.$route.query.offset >= 0) {
promises.push(this.fetchFilteredFeature());
} else if (!this.currentFeature || this.currentFeature.id !== this.slugSignal) {
promises.push(
this.GET_PROJECT_FEATURE({
project_slug: this.slug,
feature_id: this.slugSignal,
})
);
}
await axios.all(promises);
this.DISCARD_LOADER();
if (this.currentFeature) {
this.getFeatureEvents();
this.getFeatureAttachments();
this.getLinkedFeatures();
if (this.project.fast_edition_mode) {
this.$store.commit('feature/INIT_FORM');
this.$store.dispatch('feature/INIT_EXTRA_FORMS');
}
}
},
confirmLeave(next) {
this.next = next;
this.isLeaving = true;
},
stayOnPage() {
this.isLeaving = false;
},
leavePage() {
this.isLeaving = false;
this.next();
},
pushNgo(newEntry) {
//* update the params or queries in the route/url
this.$router.push(newEntry)
//* catch error if navigation get aborted (in beforeRouteUpdate)
.catch(() => true);
}, },
goBackToProject(message) { goBackToProject(message) {
this.$router.push({ this.$router.push({
name: 'project_detail', name: 'project_detail',
params: { params: {
slug: this.$route.params.slug, slug: this.slug,
message, message,
}, },
}); });
}, },
deleteFeature() { deleteFeature() {
this.isDeleting = false;
this.DISPLAY_LOADER('Suppression du signalement en cours...');
this.$store this.$store
.dispatch('feature/DELETE_FEATURE', { feature_id: this.currentFeature.feature_id }) .dispatch('feature/DELETE_FEATURE', { feature_id: this.currentFeature.id })
.then(async (response) => { .then(async (response) => {
if (response.status === 204) { this.DISCARD_LOADER();
await this.GET_PROJECT_FEATURES({ if (response.status === 200) {
project_slug: this.$route.params.slug this.goBackToProject({ comment: 'Le signalement a bien été supprimé', level: 'positive' });
}); } else {
this.goBackToProject(); this.$store.commit('DISPLAY_MESSAGE', { comment: 'Une erreur est survenue pendant la suppression du signalement', level: 'negative' });
} }
}); });
}, },
fetchFilteredFeature() { // TODO : if no query for sort, use project default ones
const queryString = new URLSearchParams({ ...this.$route.query });
const url = `${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}projects/${this.slug}/feature-paginated/?limit=1&${queryString}&output=geojson`;
return featureAPI.getPaginatedFeatures(url)
.then((data) => {
if (data && data.results && data.results.features && data.results.features[0]) {
this.featuresCount = data.count;
this.previous = data.previous;
this.next = data.next;
const currentFeature = data.results.features[0];
this.slugSignal = currentFeature.id;
this.SET_CURRENT_FEATURE(currentFeature);
this.SET_CURRENT_FEATURE_TYPE_SLUG(currentFeature.properties.feature_type.slug);
return { feature_id: currentFeature.id };
}
return;
});
},
initMap() { initMap() {
var mapDefaultViewCenter = var mapDefaultViewCenter =
this.$store.state.configuration.DEFAULT_MAP_VIEW.center; this.$store.state.configuration.DEFAULT_MAP_VIEW.center;
var mapDefaultViewZoom = var mapDefaultViewZoom =
this.$store.state.configuration.DEFAULT_MAP_VIEW.zoom; this.$store.state.configuration.DEFAULT_MAP_VIEW.zoom;
this.map = mapService.createMap(this.$refs.map, { if (this.map) {
mapDefaultViewCenter, mapService.removeFeatures();
mapDefaultViewZoom, } else {
interactions : { this.map = mapService.createMap(this.$refs.map, {
doubleClickZoom :false, mapDefaultViewCenter,
mouseWheelZoom: false, mapDefaultViewZoom,
dragPan: false maxZoom: this.project.map_max_zoom_level,
} interactions : {
}); doubleClickZoom :false,
mouseWheelZoom: true,
// Update link to feature list with map zoom and center dragPan: true
mapService.addMapEventListener('moveend', function () { },
// update link to feature list with map zoom and center fullScreenControl: true,
/*var $featureListLink = $("#feature-list-link") geolocationControl: true,
var baseUrl = $featureListLink.attr("href").split("?")[0]
$featureListLink.attr("href", baseUrl +`?zoom=${this.map.getZoom()}&lat=${this.map.getCenter().lat}&lng=${this.map.getCenter().lng}`)*/
});
// Load the layers.
// - if one basemap exists, we load the layers of the first one
// - if not, load the default map and service options
let layersToLoad = null;
var baseMaps = this.$store.state.map.basemaps;
var layers = this.$store.state.map.availableLayers;
if (baseMaps && baseMaps.length > 0) {
const basemapIndex = 0;
layersToLoad = baseMaps[basemapIndex].layers;
layersToLoad.forEach((layerToLoad) => {
layers.forEach((layer) => {
if (layer.id === layerToLoad.id) {
layerToLoad = Object.assign(layerToLoad, layer);
}
});
}); });
layersToLoad.reverse();
} }
mapService.addLayers(
layersToLoad,
this.$store.state.configuration.DEFAULT_BASE_MAP_SERVICE,
this.$store.state.configuration.DEFAULT_BASE_MAP_OPTIONS,
this.$store.state.configuration.DEFAULT_BASE_MAP_SCHEMA_TYPE,
);
this.addFeatureToMap(); this.addFeatureToMap();
}, },
addFeatureToMap() { addFeatureToMap() {
const url = `${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}projects/${this.$route.params.slug}/feature/` + const featureGroup = mapService.addFeatures({
`?feature_id=${this.$route.params.slug_signal}&output=geojson`; project_slug: this.slug,
axios features: [this.currentFeature],
.get(url) featureTypes: this.feature_types,
.then((response) => { addToMap: true,
if (response.data.features.length > 0) { });
const featureGroup = mapService.addFeatures( mapService.fitExtent(buffer(featureGroup.getExtent(),200));
response.data.features,
{},
this.feature_types,
true
);
mapService.fitExtent(buffer(featureGroup.getExtent(),200));
}
})
.catch((error) => {
throw error;
});
}, },
getFeatureEvents() { getFeatureEvents() {
featureAPI featureAPI
.getFeatureEvents(this.$route.params.slug_signal) .getFeatureEvents(this.slugSignal)
.then((data) => (this.events = data)); .then((data) => (this.events = data));
}, },
getFeatureAttachments() { getFeatureAttachments() {
featureAPI featureAPI
.getFeatureAttachments(this.$route.params.slug_signal) .getFeatureAttachments(this.slugSignal)
.then((data) => (this.attachments = data)); .then((data) => (this.attachments = data));
}, },
getLinkedFeatures() { getLinkedFeatures() {
featureAPI featureAPI
.getFeatureLinks(this.$route.params.slug_signal) .getFeatureLinks(this.slugSignal)
.then((data) => .then((data) =>
this.$store.commit('feature/SET_LINKED_FEATURES', data) this.$store.commit('feature/SET_LINKED_FEATURES', data)
); );
}, },
checkAddedForm() {
let isValid = true; //* fallback if all customForms returned true
if (this.$refs.featureTable && this.$refs.featureTable.$refs.extraForm) {
for (const extraForm of this.$refs.featureTable.$refs.extraForm) {
if (extraForm.checkForm() === false) {
isValid = false;
}
}
}
return isValid;
},
validateFastEdition() {
let is_valid = true;
is_valid = this.checkAddedForm();
if (is_valid) {
this.isSavingChanges = true; // change the value to avoid confirmation popup after redirection with new query
this.$store.dispatch(
'feature/SEND_FEATURE',
{
routeName: this.$route.name,
query: this.$route.query
}
).then((response) => {
if (response === 'reloadPage') {
// when query doesn't change we need to reload the page infos with initPage(),
// since it would not be called from the watcher'$route.query' when the query does change
this.initPage();
}
});
}
}
}, },
}; };
</script> </script>
<style scoped> <style scoped>
.map-container {
height: 100%;
max-height: 70vh;
position: relative;
overflow: hidden;
background-color: #fff;
}
#map { #map {
width: 100%; width: 100%;
height: 100%; height: 100%;
min-height: 250px; min-height: 250px;
max-height: 70vh; border: 1px solid grey;
}
div.geolocation-container {
/* each button have (more or less depends on borders) .5em space between */
/* zoom buttons are 60px high, geolocation and full screen button is 34px high with borders */
top: calc(1.3em + 60px + 34px);
} }
.prewrap { .prewrap {
white-space: pre-wrap; white-space: pre-wrap;
} }
.ui.active.dimmer {
position: fixed;
}
.ui.modal > .content {
text-align: center;
}
.ui.modal > .actions {
display: flex;
justify-content: space-evenly;
}
</style> </style>
\ No newline at end of file
src/views/Feature/FeatureEdit.vue
View file @ ee17a921
<template> <template>
<div <div id="feature-edit">
id="feature-edit" <h1>
class="page" <span v-if="feature_type && isCreation">
> Création d'un signalement <small>[{{ feature_type.title }}]</small>
<h1 v-if="feature && currentRouteName === 'editer-signalement'"> </span>
Mise à jour du signalement "{{ feature.title || feature.feature_id }}" <span v-else-if="currentFeature && currentRouteName === 'editer-signalement'">
</h1> Mise à jour du signalement "{{ currentFeature.properties ?
<h1 currentFeature.properties.title : currentFeature.id }}"
v-else-if="feature_type && currentRouteName === 'ajouter-signalement'" </span>
> <span v-else-if="feature_type && currentRouteName === 'editer-attribut-signalement'">
Création d'un signalement <small>[{{ feature_type.title }}]</small> Mise à jour des attributs de {{ checkedFeatures.length }} signalements
</span>
</h1> </h1>
<form <form
id="form-feature-edit" id="form-feature-edit"
action=""
method="post"
enctype="multipart/form-data" enctype="multipart/form-data"
class="ui form" class="ui form"
> >
<!-- Feature Fields --> <!-- Feature Fields -->
<div class="two fields"> <div
<div :class="field_title"> v-if="currentRouteName !== 'editer-attribut-signalement'"
:class="[ project && project.feature_assignement ? 'three' : 'two', 'fields']"
>
<div :class="['field', {'required': !titleIsOptional}]">
<label :for="form.title.id_for_label">{{ form.title.label }}</label> <label :for="form.title.id_for_label">{{ form.title.label }}</label>
<input <input
:id="form.title.id_for_label" :id="form.title.id_for_label"
v-model="form.title.value" v-model="form.title.value"
type="text" type="text"
required :required="!titleIsOptional"
:maxlength="form.title.field.max_length" :maxlength="form.title.field.max_length"
:name="form.title.html_name" :name="form.title.html_name"
@blur="updateStore" @blur="updateStore"
...@@ -65,9 +67,22 @@ ...@@ -65,9 +67,22 @@
:selection.sync="selected_status" :selection.sync="selected_status"
/> />
</div> </div>
<div
v-if="project && project.feature_assignement"
class="field"
>
<label for="assigned_member">Membre assigné</label>
<ProjectMemberSelect
:selected-user-id="form.assigned_member.value"
@update:user="setMemberAssigned($event)"
/>
</div>
</div> </div>
<div class="field"> <div
v-if="currentRouteName !== 'editer-attribut-signalement'"
class="field"
>
<label :for="form.description.id_for_label">{{ <label :for="form.description.id_for_label">{{
form.description.label form.description.label
}}</label> }}</label>
...@@ -80,7 +95,11 @@ ...@@ -80,7 +95,11 @@
</div> </div>
<!-- Geom Field --> <!-- Geom Field -->
<div class="field"> <div
v-if="currentRouteName !== 'editer-attribut-signalement'
&& feature_type && feature_type.geom_type !== 'none'"
class="field"
>
<label :for="form.geom.id_for_label">{{ form.geom.label }}</label> <label :for="form.geom.id_for_label">{{ form.geom.label }}</label>
<!-- Import GeoImage --> <!-- Import GeoImage -->
<div <div
...@@ -240,7 +259,16 @@ ...@@ -240,7 +259,16 @@
<div <div
id="map" id="map"
ref="map" ref="map"
/> tabindex="0"
>
<SidebarLayers v-if="basemaps && map" />
<Geolocation />
<Geocoder />
<EditingToolbar
v-if="isEditable"
:map="map"
/>
</div>
<div <div
id="popup" id="popup"
class="ol-popup" class="ol-popup"
...@@ -254,9 +282,6 @@ ...@@ -254,9 +282,6 @@
id="popup-content" id="popup-content"
/> />
</div> </div>
<SidebarLayers v-if="basemaps && map" />
<EditingToolbar v-if="basemaps && map" />
</div> </div>
</div> </div>
...@@ -265,16 +290,22 @@ ...@@ -265,16 +290,22 @@
DONNÉES MÉTIER DONNÉES MÉTIER
</div> </div>
<div <div
v-for="(field, index) in orderedCustomFields" v-for="field in extra_forms"
:key="field.field_type + index" :key="field.name"
class="field" class="extraform"
> >
<FeatureExtraForm :field="field" /> <ExtraForm
v-if="!field.isDeactivated"
:id="field.label"
ref="extraForm"
:field="field"
class="field"
/>
{{ field.errors }} {{ field.errors }}
</div> </div>
<!-- Pièces jointes --> <!-- Pièces jointes -->
<div v-if="isOnline"> <div v-if="isOnline && currentRouteName !== 'editer-attribut-signalement'">
<div class="ui horizontal divider"> <div class="ui horizontal divider">
PIÈCES JOINTES PIÈCES JOINTES
</div> </div>
...@@ -287,6 +318,7 @@ ...@@ -287,6 +318,7 @@
:key="attachForm.dataKey" :key="attachForm.dataKey"
ref="attachementForm" ref="attachementForm"
:attachment-form="attachForm" :attachment-form="attachForm"
:enable-key-doc-notif="feature_type && feature_type.enable_key_doc_notif"
/> />
</div> </div>
<button <button
...@@ -304,7 +336,7 @@ ...@@ -304,7 +336,7 @@
</div> </div>
<!-- Signalements liés --> <!-- Signalements liés -->
<div v-if="isOnline"> <div v-if="isOnline && currentRouteName !== 'editer-attribut-signalement'">
<div class="ui horizontal divider"> <div class="ui horizontal divider">
SIGNALEMENTS LIÉS SIGNALEMENTS LIÉS
</div> </div>
...@@ -331,9 +363,10 @@ ...@@ -331,9 +363,10 @@
</div> </div>
<div class="ui divider" /> <div class="ui divider" />
<button <button
id="save-changes"
type="button" type="button"
class="ui teal icon button" :class="['ui teal icon button', { loading: sendingFeature }]"
@click="postForm" @click="onSave"
> >
<i <i
class="white save icon" class="white save icon"
...@@ -347,20 +380,23 @@ ...@@ -347,20 +380,23 @@
<script> <script>
import { mapState, mapGetters } from 'vuex'; import { mapState, mapGetters } from 'vuex';
import { GeoJSON } from 'ol/format';
import FeatureAttachmentForm from '@/components/Feature/FeatureAttachmentForm'; import FeatureAttachmentForm from '@/components/Feature/FeatureAttachmentForm';
import FeatureLinkedForm from '@/components/Feature/FeatureLinkedForm'; import FeatureLinkedForm from '@/components/Feature/FeatureLinkedForm';
import FeatureExtraForm from '@/components/Feature/Edit/FeatureExtraForm'; import ExtraForm from '@/components/ExtraForm';
import Dropdown from '@/components/Dropdown.vue'; import Dropdown from '@/components/Dropdown.vue';
import SidebarLayers from '@/components/Map/SidebarLayers'; import SidebarLayers from '@/components/Map/SidebarLayers';
import EditingToolbar from '@/components/Map/EditingToolbar'; import EditingToolbar from '@/components/Map/EditingToolbar';
import featureAPI from '@/services/feature-api'; import Geocoder from '@/components/Map/Geocoder';
import Geolocation from '@/components/Map/Geolocation';
import ProjectMemberSelect from '@/components/ProjectMemberSelect';
import featureAPI from '@/services/feature-api';
import mapService from '@/services/map-service'; import mapService from '@/services/map-service';
import editionService from '@/services/edition-service'; import editionService from '@/services/edition-service';
import { allowedStatus2change } from '@/utils'; import { statusChoices, allowedStatus2change } from '@/utils';
import axios from '@/axios-client.js'; import axios from '@/axios-client.js';
import { GeoJSON } from 'ol/format';
export default { export default {
...@@ -371,14 +407,18 @@ export default { ...@@ -371,14 +407,18 @@ export default {
FeatureLinkedForm, FeatureLinkedForm,
Dropdown, Dropdown,
SidebarLayers, SidebarLayers,
Geocoder,
Geolocation,
EditingToolbar, EditingToolbar,
FeatureExtraForm, ExtraForm,
ProjectMemberSelect
}, },
data() { data() {
return { return {
map: null, map: null,
mapLoading: false, mapLoading: false,
sendingFeature: false,
baseUrl: this.$store.state.configuration.BASE_URL, baseUrl: this.$store.state.configuration.BASE_URL,
file: null, file: null,
showGeoRef: false, showGeoRef: false,
...@@ -408,6 +448,9 @@ export default { ...@@ -408,6 +448,9 @@ export default {
name: 'Brouillon', name: 'Brouillon',
}, },
}, },
assigned_member: {
value: null,
},
description: { description: {
errors: [], errors: [],
id_for_label: 'description', id_for_label: 'description',
...@@ -438,10 +481,11 @@ export default { ...@@ -438,10 +481,11 @@ export default {
]), ]),
...mapState('feature', [ ...mapState('feature', [
'attachmentFormset', 'attachmentFormset',
'linkedFormset', 'checkedFeatures',
'currentFeature',
'extra_forms',
'features', 'features',
'extra_form', 'linkedFormset',
'statusChoices',
]), ]),
...mapState('feature-type', [ ...mapState('feature-type', [
'feature_types' 'feature_types'
...@@ -454,25 +498,16 @@ export default { ...@@ -454,25 +498,16 @@ export default {
'feature_type' 'feature_type'
]), ]),
field_title() { titleIsOptional() {
if (this.feature_type) { return this.feature_type && this.feature_type.title_optional;
if (this.feature_type.title_optional) {
return 'field';
}
}
return 'required field';
}, },
currentRouteName() { currentRouteName() {
return this.$route.name; return this.$route.name;
}, },
feature() { isCreation() {
return this.$store.state.feature.currentFeature; return this.currentRouteName === 'ajouter-signalement';
},
orderedCustomFields() {
return [...this.extra_form].sort((a, b) => a.position - b.position);
}, },
geoRefFileLabel() { geoRefFileLabel() {
...@@ -485,6 +520,7 @@ export default { ...@@ -485,6 +520,7 @@ export default {
selected_status: { selected_status: {
get() { get() {
return this.form.status.value; return this.form.status.value;
}, },
set(newValue) { set(newValue) {
this.form.status.value = newValue; this.form.status.value = newValue;
...@@ -492,20 +528,31 @@ export default { ...@@ -492,20 +528,31 @@ export default {
}, },
}, },
isFeatureCreator() {
if (this.currentFeature && this.currentFeature.properties && this.user) {
return this.currentFeature.properties.creator === this.user.id ||
this.currentFeature.properties.creator.username === this.user.username;
}
return false;
},
allowedStatusChoices() { allowedStatusChoices() {
if (this.project && this.feature && this.user) { if (this.project && this.USER_LEVEL_PROJECTS && this.user) {
const isModerate = this.project.moderation; const isModerate = this.project.moderation;
const userStatus = this.USER_LEVEL_PROJECTS[this.project.slug]; const userStatus = this.USER_LEVEL_PROJECTS[this.project.slug];
const isOwnFeature = this.feature.creator === this.user.id; //* si le contributeur est l'auteur du signalement return allowedStatus2change(this.user, isModerate, userStatus, this.isFeatureCreator, this.currentRouteName);
return allowedStatus2change(this.statusChoices, isModerate, userStatus, isOwnFeature, this.currentRouteName);
} }
return []; return [];
}, },
isEditable() {
return this.basemaps && this.map && (this.feature_type && !this.feature_type.geom_type.includes('multi'));
}
}, },
watch: { watch: {
'form.title.value': function(newValue) { 'form.title.value': function(newValue) {
if (newValue.length === 128) { if (newValue && newValue.length === 128) {
this.form.title.infos.push('Le nombre de caractères et limité à 128.'); this.form.title.infos.push('Le nombre de caractères et limité à 128.');
} else { } else {
this.form.title.infos = []; this.form.title.infos = [];
...@@ -514,12 +561,14 @@ export default { ...@@ -514,12 +561,14 @@ export default {
}, },
created() { created() {
this.$store.dispatch('GET_USERS_GROUPS'); // récupére les groupes d'utilisateurs pour extra_forms
this.$store.commit('feature/CLEAR_EXTRA_FORM');
this.$store.commit( this.$store.commit(
'feature-type/SET_CURRENT_FEATURE_TYPE_SLUG', 'feature-type/SET_CURRENT_FEATURE_TYPE_SLUG',
this.$route.params.slug_type_signal this.$route.params.slug_type_signal
); );
//* empty previous feature data, not emptying by itself since it doesn't update by itself anymore //* empty previous feature data, not emptying by itself since it doesn't update by itself anymore
if (this.currentRouteName === 'ajouter-signalement') { if (this.currentRouteName === 'ajouter-signalement' || this.currentRouteName === 'editer-attribut-signalement') {
this.$store.commit('feature/SET_CURRENT_FEATURE', []); this.$store.commit('feature/SET_CURRENT_FEATURE', []);
} }
...@@ -530,10 +579,13 @@ export default { ...@@ -530,10 +579,13 @@ export default {
}, },
mounted() { mounted() {
const promises = [ const promises = [];
this.$store.dispatch('projects/GET_PROJECT', this.$route.params.slug), if (!this.project) {
this.$store.dispatch('projects/GET_PROJECT_INFO', this.$route.params.slug), promises.push(
]; this.$store.dispatch('projects/GET_PROJECT', this.$route.params.slug),
this.$store.dispatch('projects/GET_PROJECT_INFO', this.$route.params.slug),
);
}
if (this.$route.params.slug_signal) { if (this.$route.params.slug_signal) {
promises.push( promises.push(
this.$store.dispatch('feature/GET_PROJECT_FEATURE', { this.$store.dispatch('feature/GET_PROJECT_FEATURE', {
...@@ -544,15 +596,27 @@ export default { ...@@ -544,15 +596,27 @@ export default {
} }
Promise.all(promises).then(() => { Promise.all(promises).then(() => {
this.initForm(); if (this.currentRouteName !== 'editer-attribut-signalement') {
this.initMap(); this.initForm();
this.onFeatureTypeLoaded(); // if not in the case of a non geographical feature type, init map
this.initExtraForms(this.feature); if (this.feature_type.geom_type !== 'none') {
this.initMap();
this.initMapTools();
this.initDeleteFeatureOnKey();
}
}
this.$store.dispatch('feature/INIT_EXTRA_FORMS');
}); });
}, },
beforeDestroy() {
this.$store.dispatch('CANCEL_CURRENT_SEARCH_REQUEST');
},
destroyed() { destroyed() {
editionService.removeActiveFeatures(); editionService.removeActiveFeatures();
// emptying to enable adding event listener at feature edition straight after creation
editionService.selectForDeletion = null;
//* be sure that previous Formset have been cleared for creation //* be sure that previous Formset have been cleared for creation
this.$store.commit('feature/CLEAR_ATTACHMENT_FORM'); this.$store.commit('feature/CLEAR_ATTACHMENT_FORM');
this.$store.commit('feature/CLEAR_LINKED_FORM'); this.$store.commit('feature/CLEAR_LINKED_FORM');
...@@ -561,22 +625,24 @@ export default { ...@@ -561,22 +625,24 @@ export default {
methods: { methods: {
initForm() { initForm() {
if (this.currentRouteName === 'editer-signalement') { if (this.currentRouteName.includes('editer')) {
for (const key in this.feature) { for (const key in this.currentFeature.properties) {
if (key && this.form[key]) { if (key && this.form[key]) {
if (key === 'status') { if (key === 'status') {
const value = this.feature[key]; const value = this.currentFeature.properties[key];
this.form[key].value = this.statusChoices.find( this.form[key].value = statusChoices.find(
(key) => key.value === value (key) => key.value === value
); );
} else { } else {
this.form[key].value = this.feature[key]; this.form[key].value = this.currentFeature.properties[key];
} }
} }
} }
this.form.geom.value = this.currentFeature.geometry;
this.updateStore(); this.updateStore();
} }
}, },
addPointToCoordinates(coordinates){ addPointToCoordinates(coordinates){
let json = { let json = {
type: 'Feature', type: 'Feature',
...@@ -591,6 +657,7 @@ export default { ...@@ -591,6 +657,7 @@ export default {
this.showGeoPositionBtn = false; this.showGeoPositionBtn = false;
this.erreurGeolocalisationMessage = ''; this.erreurGeolocalisationMessage = '';
}, },
create_point_geoposition() { create_point_geoposition() {
function success(position) { function success(position) {
this.addPointToCoordinates([position.coords.longitude, position.coords.latitude]); this.addPointToCoordinates([position.coords.longitude, position.coords.latitude]);
...@@ -648,10 +715,10 @@ export default { ...@@ -648,10 +715,10 @@ export default {
this.addAttachment({ this.addAttachment({
title: 'Localisation', title: 'Localisation',
info: '', info: '',
id: 'loc',
attachment_file: this.file.name, attachment_file: this.file.name,
fileToImport: this.file, fileToImport: this.file,
}); });
this.toggleGeoRefModal();
} }
}) })
...@@ -666,24 +733,6 @@ export default { ...@@ -666,24 +733,6 @@ export default {
}); });
}, },
initExtraForms(feature) {
function findCurrentValue(label) {
const field = feature.feature_data.find((el) => el.label === label);
return field ? field.value : null;
}
const extraForm = this.feature_type.customfield_set.map((field) => {
return {
...field,
//* add value field to extra forms from feature_type and existing values if feature is defined
value:
feature && feature.feature_data
? findCurrentValue(field.label)
: null,
};
});
this.$store.commit('feature/SET_EXTRA_FORM', extraForm);
},
add_attachement_formset() { add_attachement_formset() {
this.$store.commit('feature/ADD_ATTACHMENT_FORM', { this.$store.commit('feature/ADD_ATTACHMENT_FORM', {
dataKey: this.attachmentDataKey, dataKey: this.attachmentDataKey,
...@@ -694,11 +743,7 @@ export default { ...@@ -694,11 +743,7 @@ export default {
addAttachment(attachment) { addAttachment(attachment) {
this.$store.commit('feature/ADD_ATTACHMENT_FORM', { this.$store.commit('feature/ADD_ATTACHMENT_FORM', {
dataKey: this.attachmentDataKey, dataKey: this.attachmentDataKey,
title: attachment.title, ...attachment
attachment_file: attachment.attachment_file,
info: attachment.info,
fileToImport: attachment.fileToImport,
id: attachment.id,
}); });
this.attachmentDataKey += 1; this.attachmentDataKey += 1;
}, },
...@@ -727,12 +772,13 @@ export default { ...@@ -727,12 +772,13 @@ export default {
}, },
updateStore() { updateStore() {
this.$store.commit('feature/UPDATE_FORM', { return this.$store.commit('feature/UPDATE_FORM', {
title: this.form.title.value, title: this.form.title.value,
status: this.form.status.value, status: this.form.status.value,
description: this.form.description, description: this.form.description,
assigned_member: this.form.assigned_member,
geometry: this.form.geom.value, geometry: this.form.geom.value,
feature_id: this.feature ? this.feature.feature_id : '', feature_id: this.currentFeature ? this.currentFeature.id : '',
}); });
}, },
...@@ -768,6 +814,13 @@ export default { ...@@ -768,6 +814,13 @@ export default {
checkAddedForm() { checkAddedForm() {
let isValid = true; //* fallback if all customForms returned true let isValid = true; //* fallback if all customForms returned true
if (this.$refs.extraForm) {
for (const extraForm of this.$refs.extraForm) {
if (extraForm.checkForm() === false) {
isValid = false;
}
}
}
if (this.$refs.attachementForm) { if (this.$refs.attachementForm) {
for (const attachementForm of this.$refs.attachementForm) { for (const attachementForm of this.$refs.attachementForm) {
if (attachementForm.checkForm() === false) { if (attachementForm.checkForm() === false) {
...@@ -785,22 +838,30 @@ export default { ...@@ -785,22 +838,30 @@ export default {
return isValid; return isValid;
}, },
postForm() { onSave() {
let is_valid = true; if (this.currentRouteName === 'editer-attribut-signalement') {
if (!this.feature_type.title_optional) { this.postMultipleFeatures();
is_valid =
this.checkFormTitle() &&
this.checkFormGeom() &&
this.checkAddedForm();
} else { } else {
is_valid = this.checkFormGeom() && this.checkAddedForm(); this.postForm();
}
},
async postForm(extraForms) {
let response;
let is_valid = this.checkAddedForm();
// if not in the case of a non geographical feature type, check geometry's validity
if (this.feature_type && this.feature_type.geom_type !== 'none') {
is_valid = is_valid && this.checkFormGeom();
}
if (!this.feature_type.title_optional) {
is_valid = is_valid && this.checkFormTitle();
} }
if (is_valid) { if (is_valid) {
//* in a moderate project, at edition of a published feature by someone else than admin or moderator, switch published status to draft. //* in a moderate project, at edition of a published feature by someone else than admin or moderator, switch published status to draft.
if ( if (
this.project.moderation && this.project.moderation &&
this.currentRouteName === 'editer-signalement' && this.currentRouteName.includes('editer') &&
this.form.status.value.value === 'published' && this.form.status.value.value === 'published' &&
!this.permissions.is_project_administrator && !this.permissions.is_project_administrator &&
!this.permissions.is_project_moderator !this.permissions.is_project_moderator
...@@ -808,14 +869,69 @@ export default { ...@@ -808,14 +869,69 @@ export default {
this.form.status.value = { name: 'Brouillon', value: 'draft' }; this.form.status.value = { name: 'Brouillon', value: 'draft' };
this.updateStore(); this.updateStore();
} }
this.$store.dispatch('feature/SEND_FEATURE', this.currentRouteName); this.sendingFeature = true;
response = await this.$store.dispatch(
'feature/SEND_FEATURE',
{
routeName: this.currentRouteName,
query: this.$route.query,
extraForms// if multiple features, pass directly extraForms object to avoid mutating the store
}
);
this.sendingFeature = false;
return response;
}
},
async postMultipleFeatures() {
this.$store.commit('DISPLAY_LOADER', 'Envoi des signalements en cours...');
const responses = [];
// loop over each selected feature id
for (const featureId of this.checkedFeatures) {
// get other infos from this feature to feel the form
const response = await this.$store.dispatch('feature/GET_PROJECT_FEATURE', {
project_slug: this.$route.params.slug,
feature_id: featureId,
});
if (response.status === 200) {
// fill title, status & description in store, required to send feature update request
this.initForm();
// create a new object of custom form to send directly with the request, to avoid multiple asynchronous mutation in store
const newXtraForms = [];
// parse each current custom form values to update the new custom form for this feature
for (const extraForm of this.extra_forms) {
// copy current custom form to prevent modifying the original one
let newXtForm = { ...extraForm };
// if value wasn't changed in this page, get back previous value of the feature (rather than using feature orginal form, which is missing information to send in request)
if (newXtForm.value === null) {
newXtForm.value = this.currentFeature.properties[newXtForm.name];
}
newXtraForms.push(newXtForm);
}
const response = await this.postForm(newXtraForms);
responses.push(response);
}
} }
this.$store.commit('DISCARD_LOADER');
const errors = responses.filter((res) => res === undefined || res.status !== 200).length > 0;
const message = {
comment: errors ? 'Des signalements n\'ont pas pu être mis à jour' : 'Les signalements ont été mis à jour',
level: errors ? 'negative' : 'positive'
};
this.$store.commit('DISPLAY_MESSAGE', message);
this.$router.push({
name: 'liste-signalements',
params: {
slug: this.$route.params.slug,
},
});
}, },
//* ************* MAP *************** *// //* ************* MAP *************** *//
onFeatureTypeLoaded() { initMapTools() {
const geomType = this.feature_type.geom_type; const geomType = this.feature_type.geom_type;
editionService.addEditionControls(geomType); editionService.addEditionControls(geomType);
editionService.draw.on('drawend', (evt) => { editionService.draw.on('drawend', (evt) => {
...@@ -830,8 +946,6 @@ export default { ...@@ -830,8 +946,6 @@ export default {
let feature = evt.features.getArray()[0]; let feature = evt.features.getArray()[0];
this.updateGeomField(new GeoJSON().writeGeometry(feature.getGeometry(),{ dataProjection:'EPSG:4326',featureProjection:'EPSG:3857' })); this.updateGeomField(new GeoJSON().writeGeometry(feature.getGeometry(),{ dataProjection:'EPSG:4326',featureProjection:'EPSG:3857' }));
}); });
//this.changeMobileBtnOrder();
this.map.on( this.map.on(
'draw:deleted', 'draw:deleted',
...@@ -853,7 +967,7 @@ export default { ...@@ -853,7 +967,7 @@ export default {
} }
if (geomFeatureJSON) { if (geomFeatureJSON) {
let retour = new GeoJSON().readFeature(geomFeatureJSON,{ dataProjection:'EPSG:4326',featureProjection:'EPSG:3857' }); let retour = new GeoJSON().readFeature(geomFeatureJSON,{ dataProjection:'EPSG:4326',featureProjection:'EPSG:3857' });
editionService.startEditFeature(retour); editionService.initFeatureToEdit(retour);
} else { } else {
this.map.setView( this.map.setView(
...@@ -863,9 +977,9 @@ export default { ...@@ -863,9 +977,9 @@ export default {
} }
}, },
updateGeomField(newGeom) { async updateGeomField(newGeom) {
this.form.geom.value = newGeom; this.form.geom.value = newGeom;
this.updateStore(); await this.updateStore();
}, },
initMap() { initMap() {
...@@ -875,34 +989,34 @@ export default { ...@@ -875,34 +989,34 @@ export default {
var mapDefaultViewZoom = var mapDefaultViewZoom =
this.$store.state.configuration.DEFAULT_MAP_VIEW.zoom; this.$store.state.configuration.DEFAULT_MAP_VIEW.zoom;
// Create the map, then init the layers and features // Create the map, then init features
this.map = mapService.createMap(this.$refs.map, { this.map = mapService.createMap(this.$refs.map, {
mapDefaultViewCenter, mapDefaultViewCenter,
mapDefaultViewZoom, mapDefaultViewZoom,
interactions : { doubleClickZoom :false, mouseWheelZoom:true, dragPan:true } maxZoom: this.project.map_max_zoom_level,
interactions : { doubleClickZoom :false, mouseWheelZoom:true, dragPan:true },
fullScreenControl: true,
geolocationControl: true,
}); });
const currentFeatureId = this.$route.params.slug_signal; const currentFeatureId = this.$route.params.slug_signal;
const url = `${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}projects/${this.$route.params.slug}/feature/?feature_type__slug=${this.$route.params.slug_type_signal}&output=geojson`; const url = `${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}v2/features/?feature_type__slug=${this.$route.params.slug_type_signal}&project__slug=${this.$route.params.slug}&output=geojson`;
axios axios
.get(url) .get(url)
.then((response) => { .then((response) => {
const features = response.data.features; const features = response.data.features;
if (features) { if (features.length > 0) {
const allFeaturesExceptCurrent = features.filter( const allFeaturesExceptCurrent = features.filter(
(feat) => feat.id !== currentFeatureId (feat) => feat.id !== currentFeatureId
); );
mapService.addFeatures( mapService.addFeatures({
allFeaturesExceptCurrent, addToMap: true,
{}, project_slug: this.project.slug,
this.feature_types, features: allFeaturesExceptCurrent,
true featureTypes: this.feature_types,
); });
if (this.currentRouteName === 'editer-signalement') { if (this.currentRouteName === 'editer-signalement') {
const currentFeature = features.filter( editionService.setFeatureToEdit(this.currentFeature);
(feat) => feat.id === currentFeatureId this.updateMap(this.currentFeature);
)[0];
editionService.setFeatureToEdit(currentFeature);
this.updateMap(currentFeature);
} }
} }
this.mapLoading = false; this.mapLoading = false;
...@@ -911,35 +1025,14 @@ export default { ...@@ -911,35 +1025,14 @@ export default {
this.mapLoading = false; this.mapLoading = false;
throw error; throw error;
}); });
},
document.addEventListener('change-layers-order', (event) => { enableSnap() {
// Reverse is done because the first layer in order has to be added in the map in last. editionService.addSnapInteraction(this.map);
// Slice is done because reverse() changes the original array, so we make a copy first
mapService.updateOrder(event.detail.layers.slice().reverse());
});
}, },
// TODO DDS voir adaptations disableSnap() {
changeMobileBtnOrder() { //* move large toolbar for polygon creation, cutting map in the middle editionService.removeSnapInteraction(this.map);
function changeDisplay() {
const buttons = document.querySelector('.leaflet-draw-actions.leaflet-draw-actions-top.leaflet-draw-actions-bottom');
if (buttons && buttons.style) {
buttons.style.display = 'flex';
buttons.style['flex-direction'] = 'column';
}
}
if (window.screen.availWidth < 767) { //* change button order all the time to keep homogeinity on mobile
const wrapper = document.querySelector('.leaflet-top.leaflet-right');
if (wrapper) {
wrapper.appendChild(wrapper.children[0]);
}
if (this.feature_type.geom_type === 'polygon') { //* if it's a polygon, change tools direction to vertical
let polygonBtn = document.querySelector('.leaflet-draw-draw-polygon'); //* since elements are generated
if (polygonBtn) {
polygonBtn.addEventListener('click', changeDisplay); //* it should be done at each click
}
}
}
}, },
getFeatureAttachments() { getFeatureAttachments() {
...@@ -953,6 +1046,25 @@ export default { ...@@ -953,6 +1046,25 @@ export default {
.getFeatureLinks(this.$route.params.slug_signal) .getFeatureLinks(this.$route.params.slug_signal)
.then((data) => this.addExistingLinkedFormset(data)); .then((data) => this.addExistingLinkedFormset(data));
}, },
/**
* Deletes the selected feature when the "Delete" or "Escape" key is pressed.
* The map element has been made focusable by adding tabindex=0.
*/
initDeleteFeatureOnKey() {
// Add an event listener for key presses
document.addEventListener('keydown', function(event) {
// Check if the element with the ID "map" has focus
if ((event.key === 'Delete' || event.key === 'Escape') && document.activeElement.id === 'map') {
// If the conditions are met, call the deleteSelectedFeature function
editionService.removeFeatureFromMap();
}
});
},
setMemberAssigned(e) {
this.form.assigned_member.value = e;
this.updateStore();
}
}, },
}; };
</script> </script>
...@@ -963,6 +1075,13 @@ export default { ...@@ -963,6 +1075,13 @@ export default {
width: 100%; width: 100%;
border: 1px solid grey; border: 1px solid grey;
} }
div.geolocation-container {
/* each button have .5em space between, zoom buttons are 60px high and full screen button is 34px high */
top: calc(1.3em + 60px + 34px);
}
#get-geom-from-image-file { #get-geom-from-image-file {
margin-bottom: 5px; margin-bottom: 5px;
} }
...@@ -990,4 +1109,7 @@ export default { ...@@ -990,4 +1109,7 @@ export default {
.leaflet-bottom { .leaflet-bottom {
z-index: 800; z-index: 800;
} }
.extraform {
margin-bottom: 1em;
}
</style> </style>
src/views/FeatureType/FeatureTypeDetail.vue
View file @ ee17a921
<template> <template>
<div <div
v-if="structure" v-if="feature_type"
id="feature-type-detail" id="feature-type-detail"
class="page"
> >
<div class="ui stackable grid"> <div class="ui stackable grid">
<div class="five wide column"> <div class="five wide column">
<div class="ui attached secondary segment"> <div
id="feature-type-title"
class="ui attached secondary segment"
>
<h1 class="ui center aligned header ellipsis"> <h1 class="ui center aligned header ellipsis">
<img <img
v-if="structure.geom_type === 'point'" v-if="feature_type.geom_type === 'point'"
class="ui medium image" class="ui medium image"
alt="Géométrie point" alt="Géométrie point"
src="@/assets/img/marker.png" src="@/assets/img/marker.png"
> >
<img <img
v-if="structure.geom_type === 'linestring'" v-if="feature_type.geom_type === 'linestring'"
class="ui medium image" class="ui medium image"
alt="Géométrie ligne" alt="Géométrie ligne"
src="@/assets/img/line.png" src="@/assets/img/line.png"
> >
<img <img
v-if="structure.geom_type === 'polygon'" v-if="feature_type.geom_type === 'polygon'"
class="ui medium image" class="ui medium image"
alt="Géométrie polygone" alt="Géométrie polygone"
src="@/assets/img/polygon.png" src="@/assets/img/polygon.png"
> >
{{ structure.title }} <img
v-if="feature_type.geom_type === 'multipoint'"
class="ui medium image"
alt="Géométrie point"
src="@/assets/img/multimarker.png"
>
<img
v-if="feature_type.geom_type === 'multilinestring'"
class="ui medium image"
alt="Géométrie ligne"
src="@/assets/img/multiline.png"
>
<img
v-if="feature_type.geom_type === 'multipolygon'"
class="ui medium image"
alt="Géométrie polygone"
src="@/assets/img/multipolygon.png"
>
<span
v-if="feature_type.geom_type === 'none'"
class="ui medium image"
title="Aucune géométrie"
>
<i class="ui icon big outline file" />
</span>
{{ feature_type.title }}
</h1> </h1>
</div> </div>
<div class="ui attached segment"> <div class="ui attached segment">
...@@ -41,10 +68,12 @@ ...@@ -41,10 +68,12 @@
</div> </div>
</div> </div>
<div class="value"> <div class="value">
{{ features_count }} {{ isOnline ? featuresCount : '?' }}
</div> </div>
<div class="label"> <div
Signalement{{ features.length > 1 ? "s" : "" }} class="label"
>
Signalement{{ featuresCount > 1 || !isOnline ? "s" : "" }}
</div> </div>
</div> </div>
...@@ -53,11 +82,11 @@ ...@@ -53,11 +82,11 @@
</h3> </h3>
<div class="ui divided list"> <div class="ui divided list">
<div <div
v-for="(field, index) in orderedCustomFields" v-for="(field, index) in feature_type.customfield_set"
:key="field.name + index" :key="field.name + index"
class="item" class="item"
> >
<div class="right floated content"> <div class="right floated content custom-field">
<div class="description"> <div class="description">
{{ field.field_type }} {{ field.field_type }}
</div> </div>
...@@ -71,8 +100,13 @@ ...@@ -71,8 +100,13 @@
</div> </div>
<div class="ui bottom attached secondary segment"> <div class="ui bottom attached secondary segment">
<div class="ui styled accordion"> <div
v-if="user && permissions.can_create_feature"
class="ui styled accordion"
data-test="features-import"
>
<div <div
id="toggle-show-import"
:class="['title', { active: showImport && isOnline, nohover: !isOnline }]" :class="['title', { active: showImport && isOnline, nohover: !isOnline }]"
@click="toggleShowImport" @click="toggleShowImport"
> >
...@@ -103,8 +137,9 @@ ...@@ -103,8 +137,9 @@
@change="onGeojsonFileChange" @change="onGeojsonFileChange"
> >
</div> </div>
<div <div
v-if="structure.geom_type === 'point'" v-if="feature_type.geom_type === 'point' || feature_type.geom_type === 'none'"
class="field" class="field"
> >
<label <label
...@@ -154,6 +189,7 @@ ...@@ -154,6 +189,7 @@
</ul> </ul>
<button <button
id="start-import"
:disabled=" :disabled="
(geojsonFileToImport.size === 0 && !$route.params.geojson) && (geojsonFileToImport.size === 0 && !$route.params.geojson) &&
(csvFileToImport.size === 0 && !$route.params.csv) (csvFileToImport.size === 0 && !$route.params.csv)
...@@ -168,13 +204,17 @@ ...@@ -168,13 +204,17 @@
Lancer l'import Lancer l'import
</button> </button>
<ImportTask <ImportTask
v-if="importFeatureTypeData && importFeatureTypeData.length" v-if="importsForFeatureType.length > 0"
:data="importFeatureTypeData" ref="importTask"
:reloading="reloadingImport" :imports="importsForFeatureType"
@reloadFeatureType="reloadFeatureType"
/> />
</div> </div>
</div> </div>
<div class="ui styled accordion"> <div
class="ui styled accordion"
data-test="features-export"
>
<div <div
:class="['title', { active: !showImport && isOnline, nohover: !isOnline }]" :class="['title', { active: !showImport && isOnline, nohover: !isOnline }]"
@click="toggleShowImport" @click="toggleShowImport"
...@@ -196,10 +236,10 @@ ...@@ -196,10 +236,10 @@
style="margin-bottom: 1em;" style="margin-bottom: 1em;"
> >
<option value="GeoJSON"> <option value="GeoJSON">
GeoJSON {{ feature_type.geom_type === 'none' ? 'JSON' : 'GeoJSON' }}
</option> </option>
<option <option
v-if="structure.geom_type === 'point'" v-if="feature_type.geom_type === 'point' || feature_type.geom_type === 'none'"
value="CSV" value="CSV"
> >
CSV CSV
...@@ -222,7 +262,10 @@ ...@@ -222,7 +262,10 @@
</div> </div>
</div> </div>
<div class="nine wide column"> <div
v-if="isOnline"
class="nine wide column"
>
<h3 class="ui header"> <h3 class="ui header">
Derniers signalements Derniers signalements
</h3> </h3>
...@@ -236,11 +279,12 @@ ...@@ -236,11 +279,12 @@
</div> </div>
<div <div
v-if=" v-if="
importFeatureTypeData && importsForFeatureType &&
importFeatureTypeData.length && importsForFeatureType.length &&
importFeatureTypeData.some((el) => el.status === 'pending') importsForFeatureType.some((el) => el.status === 'pending')
" "
class="ui message info" class="ui message info"
data-test="wait-import-message"
> >
<p> <p>
Des signalements sont en cours d'import. Pour suivre le statut de Des signalements sont en cours d'import. Pour suivre le statut de
...@@ -260,6 +304,7 @@ ...@@ -260,6 +304,7 @@
v-for="(feature, index) in lastFeatures" v-for="(feature, index) in lastFeatures"
:key="feature.feature_id + index" :key="feature.feature_id + index"
class="ui small header" class="ui small header"
data-test="last-features"
> >
<span <span
v-if="feature.status === 'archived'" v-if="feature.status === 'archived'"
...@@ -297,18 +342,10 @@ ...@@ -297,18 +342,10 @@
aria-hidden="true" aria-hidden="true"
/> />
</span> </span>
<router-link <FeatureFetchOffsetRoute
:to="{ :feature-id="feature.feature_id"
name: 'details-signalement', :properties="feature"
params: { />
slug,
slug_type_signal: $route.params.feature_type_slug,
slug_signal: feature.feature_id,
},
}"
>
{{ feature.title || feature.feature_id }}
</router-link>
<div class="sub header"> <div class="sub header">
<div> <div>
{{ {{
...@@ -319,7 +356,7 @@ ...@@ -319,7 +356,7 @@
</div> </div>
<div> <div>
[ Créé le {{ feature.created_on | formatDate }} [ Créé le {{ feature.created_on | formatDate }}
<span v-if="$store.state.user"> <span v-if="user">
par {{ feature.display_creator }}</span> par {{ feature.display_creator }}</span>
] ]
</div> </div>
...@@ -337,10 +374,10 @@ ...@@ -337,10 +374,10 @@
Voir tous les signalements Voir tous les signalements
</router-link> </router-link>
<router-link <router-link
v-if="permissions.can_create_feature" v-if="permissions.can_create_feature && feature_type.geom_type && !feature_type.geom_type.includes('multi')"
:to="{ :to="{
name: 'ajouter-signalement', name: 'ajouter-signalement',
params: { slug_type_signal: structure.slug }, params: { slug_type_signal: feature_type.slug },
}" }"
class="ui icon button button-hover-green margin-25" class="ui icon button button-hover-green margin-25"
> >
...@@ -348,23 +385,49 @@ ...@@ -348,23 +385,49 @@
</router-link> </router-link>
<br> <br>
</div> </div>
<div
v-else
class="nine wide column"
>
<h3 class="ui header">
Derniers signalements
</h3>
<div class="ui message info">
<p>
Information non disponible en mode déconnecté.
</p>
</div>
</div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { csv } from 'csvtojson';
import { mapActions, mapMutations, mapGetters, mapState } from 'vuex'; import { mapActions, mapMutations, mapGetters, mapState } from 'vuex';
import { formatStringDate } from '@/utils'; import { formatStringDate, transformProperties } from '@/utils';
import FeatureFetchOffsetRoute from '@/components/Feature/FeatureFetchOffsetRoute';
import ImportTask from '@/components/ImportTask'; import ImportTask from '@/components/ImportTask';
import featureAPI from '@/services/feature-api'; import featureAPI from '@/services/feature-api';
import { fileConvertSizeToMo, determineDelimiter, parseCSV, checkLonLatValues } from '@/assets/js/utils';
import { fileConvertSizeToMo, csvToJson } from '@/assets/js/utils'; const geojsonFileToImport = {
name: 'Sélectionner un fichier GeoJSON ...',
size: 0,
};
const csvFileToImport = {
name: 'Sélectionner un fichier CSV ...',
size: 0,
};
export default { export default {
name: 'FeatureTypeDetail', name: 'FeatureTypeDetail',
components: { components: {
ImportTask: ImportTask, FeatureFetchOffsetRoute,
ImportTask,
}, },
filters: { filters: {
...@@ -387,22 +450,18 @@ export default { ...@@ -387,22 +450,18 @@ export default {
data() { data() {
return { return {
importError: '', importError: '',
geojsonFileToImport: { geojsonFileToImport,
name: 'Sélectionner un fichier GeoJSON ...', csvFileToImport,
size: 0,
},
csvFileToImport: {
name: 'Sélectionner un fichier CSV ...',
size: 0,
},
showImport: false, showImport: false,
slug: this.$route.params.slug, slug: this.$route.params.slug,
featureTypeSlug: this.$route.params.feature_type_slug,
featuresLoading: true, featuresLoading: true,
loadingImportFile: false, loadingImportFile: false,
waitMessage: false, waitMessage: false,
reloadingImport: false,
exportFormat: 'GeoJSON', exportFormat: 'GeoJSON',
exportLoading: false exportLoading: false,
lastFeatures: [],
featuresCount: 0,
}; };
}, },
...@@ -413,94 +472,41 @@ export default { ...@@ -413,94 +472,41 @@ export default {
...mapGetters('projects', [ ...mapGetters('projects', [
'project' 'project'
]), ]),
...mapGetters('feature-type', [
'feature_type'
]),
...mapState([ ...mapState([
'reloadIntervalId', 'reloadIntervalId',
'configuration', 'configuration',
'isOnline', 'isOnline',
'user',
]), ]),
...mapState('projects', [ ...mapState('projects', [
'project' 'project'
]), ]),
...mapState('feature', [
'features',
'features_count'
]),
...mapState('feature-type', [ ...mapState('feature-type', [
'feature_types', 'feature_types',
'importFeatureTypeData' 'importFeatureTypeData',
'selectedPrerecordedListValues'
]), ]),
importsForFeatureType() { // filter import task datas only for this feature type
if (this.importFeatureTypeData) {
return this.importFeatureTypeData.filter((el) => el.feature_type_title === this.featureTypeSlug);
}
return [];
},
CATALOG_NAME() { CATALOG_NAME() {
return this.configuration.VUE_APP_CATALOG_NAME; return this.configuration.VUE_APP_CATALOG_NAME;
}, },
IDGO() { IDGO() {
return this.$store.state.configuration.VUE_APP_IDGO; return this.$store.state.configuration.VUE_APP_IDGO;
}, },
structure: function () {
if (Object.keys(this.feature_types).length) {
const st = this.feature_types.find(
(el) => el.slug === this.$route.params.feature_type_slug
);
if (st) {
return st;
}
}
return {};
},
feature_type_features: function () {
if (this.features.length) {
return this.features.filter(
(el) => el.feature_type.slug === this.$route.params.feature_type_slug
);
}
return {};
},
lastFeatures: function () {
if (this.feature_type_features.length) {
return this.feature_type_features.slice(0, 5);
}
return [];
},
orderedCustomFields() {
if (Object.keys(this.structure).length) {
return [...this.structure.customfield_set].sort(
(a, b) => a.position - b.position
);
}
return {};
},
}, },
watch: { watch: {
structure(newValue) { feature_type(newValue) {
if (newValue.slug) { this.toggleJsonUploadOption(newValue);
this.GET_IMPORTS({ }
feature_type: this.$route.params.feature_type_slug
});
}
},
importFeatureTypeData: {
deep: true,
handler(newValue, oldValue) {
if (newValue && newValue.some(el => el.status === 'pending')) {
setTimeout(() => {
this.reloadingImport = true;
this.GET_IMPORTS({
feature_type: this.$route.params.feature_type_slug
}).then(()=> {
setTimeout(() => {
this.reloadingImport = false;
}, 1000);
});
}, this.$store.state.configuration.VUE_APP_RELOAD_INTERVAL);
} else if (oldValue && oldValue.some(el => el.status === 'pending')) {
this.getLastFeatures();
}
}
},
}, },
created() { created() {
...@@ -508,238 +514,399 @@ export default { ...@@ -508,238 +514,399 @@ export default {
this.$store.dispatch('projects/GET_PROJECT', this.slug); this.$store.dispatch('projects/GET_PROJECT', this.slug);
this.$store.dispatch('projects/GET_PROJECT_INFO', this.slug); this.$store.dispatch('projects/GET_PROJECT_INFO', this.slug);
} }
this.$store.commit('feature/SET_FEATURES', []); //* empty remaining features in case they were in geojson format and will be fetch anyway
this.getLastFeatures();
this.SET_CURRENT_FEATURE_TYPE_SLUG( this.SET_CURRENT_FEATURE_TYPE_SLUG(
this.$route.params.feature_type_slug this.featureTypeSlug
); );
this.$store.dispatch('feature-type/GET_IMPORTS', {
project_slug: this.$route.params.slug,
feature_type: this.featureTypeSlug
});
this.getLastFeatures();
if (this.$route.params.type === 'external-geojson') { if (this.$route.params.type === 'external-geojson') {
this.showImport = true; this.showImport = true;
} }
// empty prerecorded lists in case the list has been previously loaded with a limit in other component like ExtraForm
this.SET_PRERECORDED_LISTS([]);
// This function is also called by watcher at this stage, but to be safe in edge case
this.toggleJsonUploadOption(this.feature_type);
}, },
methods: { methods: {
...mapMutations([
'DISPLAY_MESSAGE',
]),
...mapMutations('feature-type', [ ...mapMutations('feature-type', [
'SET_CURRENT_FEATURE_TYPE_SLUG', 'SET_CURRENT_FEATURE_TYPE_SLUG',
'SET_FILE_TO_IMPORT', 'SET_FILE_TO_IMPORT',
'SET_PRERECORDED_LISTS'
]), ]),
...mapActions('feature-type', [ ...mapActions('feature-type', [
'GET_PROJECT_FEATURE_TYPES',
'GET_SELECTED_PRERECORDED_LIST_VALUES',
'SEND_FEATURES_FROM_CSV', 'SEND_FEATURES_FROM_CSV',
'GET_IMPORTS'
]), ]),
...mapActions('feature', [ ...mapActions('feature', [
'GET_PROJECT_FEATURES' 'GET_PROJECT_FEATURES'
]), ]),
getLastFeatures() {
let url = `${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}projects/${this.slug}/feature-paginated/?feature_type_slug=${this.featureTypeSlug}&ordering=-created_on&limit=5&offset=0`;
featureAPI.getPaginatedFeatures(url)
.then((data) => {
if (data) {
this.lastFeatures = data.results;
this.featuresCount = data.count;
}
this.featuresLoading = false;
});
},
reloadFeatureType() {
this.GET_PROJECT_FEATURE_TYPES(this.slug);
this.getLastFeatures();
},
toggleShowImport() { toggleShowImport() {
this.showImport = !this.showImport; this.showImport = !this.showImport;
if (this.showImport) {
this.GET_IMPORTS({
feature_type: this.$route.params.feature_type_slug
});
}
}, },
transformProperties(prop) { /**
const type = typeof prop; * In the case of a non geographical feature type, replace geoJSON by JSON in file to upload options
const date = new Date(prop); *
if (type === 'boolean') { * @param {Object} featureType - The current featureType.
return 'boolean'; */
} else if (Number.isSafeInteger(prop)) { toggleJsonUploadOption(featureType) {
return 'integer'; if (featureType && featureType.geom_type === 'none') {
} else if ( this.geojsonFileToImport = {
type === 'string' && name: 'Sélectionner un fichier JSON ...',
['/', ':', '-'].some((el) => prop.includes(el)) && // check for chars found in datestring size: 0,
date instanceof Date && };
!isNaN(date.valueOf())
) {
return 'char';
} else if (type === 'number' && !isNaN(parseFloat(prop))) {
return 'decimal';
} }
return 'char'; //* string by default, most accepted type in database
}, },
checkJsonValidity(json) { async checkPreRecordedValue(fieldValue, listName) {
const fieldLabel = fieldValue.label || fieldValue;
// encode special characters like apostrophe or white space
const encodedPattern = encodeURIComponent(fieldLabel);
// query existing prerecorded list values (with label to limit results in response, there could be many) and escape special characters, since single quote causes error in backend
await this.GET_SELECTED_PRERECORDED_LIST_VALUES({ name: listName, pattern: encodedPattern });
// check if the value exist in available prerecorded list values
return this.selectedPrerecordedListValues[listName].some((el) => el.label === fieldLabel);
},
/**
* Validates the imported data against the pre-determined field types.
*
* This function iterates over all imported features and checks if each property's value matches
* the expected type specified in the feature type schema. It accommodates specific type conversions,
* such as allowing numerical strings for 'char' or 'text' fields and converting string representations
* of booleans and lists as necessary.
*
* @param {Array} features - The array of imported features to validate.
* @returns {boolean} Returns true if all features pass the validation; otherwise, false with an error message.
*/
async isValidTypes(features) {
this.importError = ''; this.importError = '';
const fields = this.structure.customfield_set.map((el) => {
// Extract relevant field type information from the feature type schema
const fields = this.feature_type.customfield_set.map((el) => {
return { return {
name: el.name, name: el.name,
field_type: el.field_type, field_type: el.field_type,
options: el.options, options: el.options,
}; };
}); });
for (const feature of json.features) { let count = 1;
for (const feature of features) {
this.$store.commit('DISPLAY_LOADER', `Vérification du signalement ${count} sur ${features.length}`);
for (const { name, field_type, options } of fields) { for (const { name, field_type, options } of fields) {
if (name in feature.properties) { const properties = feature.properties || feature;
const fieldInFeature = feature.properties[name];
const customType = this.transformProperties(fieldInFeature); if (name in properties) {
//* if custom field value is not null, then check validity of field let fieldInFeature = properties[name];
if (fieldInFeature !== null) {
//* if field type is list, it's not possible to guess from value type // Convert boolean strings from CSV to actual booleans
if (field_type === 'boolean') {
fieldInFeature = fieldInFeature === 'True' ? true : (fieldInFeature === 'False' ? false : fieldInFeature);
}
const customType = transformProperties(fieldInFeature);
// Validate field only if it has a non-null, non-empty, defined value
if (fieldInFeature !== null && fieldInFeature !== '' && fieldInFeature !== undefined) {
// Handle 'list' type by checking if value is among the defined options
if (field_type === 'list') { if (field_type === 'list') {
//*then check if the value is an available option
if (!options.includes(fieldInFeature)) { if (!options.includes(fieldInFeature)) {
this.importError = `Le fichier est invalide: la valeur [ ${fieldInFeature} ] n'est pas une option valide this.importError = `Fichier invalide: La valeur "${fieldInFeature}" n'est pas une option valide dans le champ "${name}" du signalement "${properties.title}".`;
pour le champ personnalisé "${name}".`; this.$store.commit('DISCARD_LOADER');
return false;
}
// Handle 'pre_recorded_list' by checking if the value matches pre-recorded options
} else if (field_type === 'pre_recorded_list') {
if (typeof fieldInFeature === 'string' && fieldInFeature.charAt(0) === '{') { // data from CSV come as string, if it doesn't start with bracket then it should not be converted to an object and stay as a string, since the structure has been simplified: https://redmine.neogeo.fr/issues/18740
try {
const jsonStr = fieldInFeature.replace(/['‘’"]\s*label\s*['‘’"]\s*:/g, '"label":')
.replace(/:\s*['‘’"](.+?)['‘’"]\s*(?=[,}])/g, ':"$1"');
fieldInFeature = JSON.parse(jsonStr);
} catch (e) {
console.error(e);
this.DISPLAY_MESSAGE({ comment: `La valeur "${fieldInFeature}" n'a pas pu être vérifiée dans le champ "${name}" du signalement "${properties.title}"` });
}
}
let fieldLabel = fieldInFeature.label || fieldInFeature;
const isPreRecordedValue = await this.checkPreRecordedValue(fieldLabel, options[0]);
if (!isPreRecordedValue) {
this.importError = `Fichier invalide: La valeur "${fieldLabel}" ne fait pas partie des valeurs pré-enregistrées dans le champ "${name}" du signalement "${properties.title}".`;
this.$store.commit('DISCARD_LOADER');
return false; return false;
} }
} else if (customType !== field_type) {
//* check if custom field value match // Handle 'multi_choices_list' by checking if each value in the array is among the defined options
this.importError = `Le fichier est invalide: Un champ de type ${field_type} ne peut pas avoir la valeur [ ${fieldInFeature} ]`; } else if (field_type === 'multi_choices_list') {
if (typeof fieldInFeature === 'string' && fieldInFeature.charAt(0) === '[') { // data from CSV come as string, if it doesn't start with bracket then there's no need to convert it to an array
try {
fieldInFeature = JSON.parse(fieldInFeature.replaceAll('\'', '"'));
} catch (e) {
console.error(e);
this.DISPLAY_MESSAGE({ comment: `La valeur "${fieldInFeature}" n'a pas pu être vérifiée dans le champ "${name}" du signalement "${properties.title}"` });
}
}
// Check that the value is an array before asserting its validity
if (Array.isArray(fieldInFeature)) {
const invalidValues = fieldInFeature.filter((el) => !options.includes(el));
if (invalidValues.length > 0) {
const plural = invalidValues.length > 1;
this.importError = `Fichier invalide: ${plural ? 'Les valeurs' : 'La valeur'} "${invalidValues.join(', ')}" ${plural ? 'ne sont pas des options valides' : 'n\'est pas une option valide'}
dans le champ "${name}" du signalement "${properties.title}".`;
this.$store.commit('DISCARD_LOADER');
return false;
}
} else {
this.importError = `Fichier invalide: La valeur "${fieldInFeature}" doit être un tableau dans le champ "${name}" du signalement "${properties.title}".`;
this.$store.commit('DISCARD_LOADER');
return false;
}
// Validate custom field value type
} else if (customType !== field_type &&
// at feature type at creation, in case the value was 0, since it can be either float or integer, by default we've set its type as a float
// when importing features, to avoid an error with different types, we bypass this check when the incoming feature value is a integer while the feature type says it should be a float
!(
// Allow integers where decimals are expected
(customType === 'integer' && field_type === 'decimal') ||
// Allow numbers formatted as strings when 'char' or 'text' type is expected
((customType === 'integer' || customType === 'float') && field_type === 'char' || field_type === 'text') ||
// Allow 'char' values where 'text' (multiline string) is expected
(customType === 'char' && field_type === 'text')
)
) {
this.importError = `Fichier invalide : Le type de champ "${field_type}" ne peut pas avoir la valeur "${fieldInFeature}" dans le champ "${name}" du signalement "${properties.title}".`;
this.$store.commit('DISCARD_LOADER');
return false; return false;
} }
} }
} }
} }
count +=1;
} }
this.$store.commit('DISCARD_LOADER');
return true; return true;
}, },
checkCsvValidity(csv) { /**
* Checks the validity of a CSV string. It ensures the CSV uses a recognized delimiter,
* contains 'lat' and 'lon' headers, and that these columns contain decimal values within valid ranges.
* Additionally, it verifies the consistency and presence of data in the CSV, and that the types of values are valid.
*
* @param {string} csvString - The CSV content in string format.
* @returns {boolean|Promise<boolean>} Returns a boolean or a Promise resolving to a boolean,
* indicating the validity of the CSV.
*/
async checkCsvValidity(csvString) {
this.importError = ''; this.importError = '';
// Find csv delimiter // Determine the delimiter of the CSV
const commaDelimited = csv.split('\n')[0].includes(','); const delimiter = determineDelimiter(csvString);
const semicolonDelimited = csv.split('\n')[0].includes(';'); if (!delimiter) {
const delimiter = commaDelimited && !semicolonDelimited ? ',' : semicolonDelimited ? ';' : false;
if ((commaDelimited && semicolonDelimited) || !delimiter) {
this.importError = `Le fichier ${this.csvFileToImport.name} n'est pas formaté correctement`; this.importError = `Le fichier ${this.csvFileToImport.name} n'est pas formaté correctement`;
return false; return false;
} }
// Check if file contains 'lat' and 'long' fields // Parse the CSV string into rows
const headersLine = const rows = parseCSV(csvString, delimiter);
csv
.split('\n')[0] // Extract headers
.replace(/(\r\n|\n|\r)/gm, '') const headers = rows.shift();
.split(delimiter) if (this.feature_type.geom_type !== 'none') {
.filter(el => { // Check for required fields 'lat' and 'lon' in headers
return el === 'lat' || el === 'lon'; if (!headers.includes('lat') || !headers.includes('lon')) {
}); this.importError = 'Les champs obligatoires "lat" et "lon" sont absents des headers.';
if (headersLine.length !== 2) { return false;
this.importError = 'Le fichier ne semble pas contenir de champs de coordonnées.'; }
// Verify the presence and validity of coordinate values
const hasCoordValues = checkLonLatValues(headers, rows);
if (!hasCoordValues) {
this.importError = 'Les valeurs de "lon" et "lat" ne sont pas valides ou absentes.';
return false;
}
}
// Ensure there are data rows after the headers
if (rows.length === 0) {
this.importError = 'Aucune donnée trouvée après les en-têtes.';
return false; return false;
} }
const sampleLine =
csv
.split('\n')[1]
.split(delimiter)
.map(el => {
return !isNaN(el) && el.indexOf('.') != -1;
})
.filter(Boolean);
if (sampleLine.length > 1 && headersLine.length === 2) {
const fields = this.structure.customfield_set.map((el) => {
return {
name: el.name,
field_type: el.field_type,
options: el.options,
};
});
const csvFeatures = csvToJson(csv, delimiter);
for (const feature of csvFeatures) {
for (let { name, field_type, options } of fields) {
if (name in feature) {
const fieldInFeature = feature[name];
// overide some specific cases on date type data
if (
typeof fieldInFeature === 'string' &&
['/', ':', '-'].some((el) => fieldInFeature.includes(el)) &&
(new Date(fieldInFeature)) instanceof Date &&
!isNaN((new Date(fieldInFeature)).valueOf())
) {
field_type = 'char';
} else if (
field_type === 'date' &&
((new Date(fieldInFeature)) instanceof Date)
) {
field_type = 'char';
}
const customType = this.transformProperties(fieldInFeature); // Ensure that each row has the same number of columns as the headers
//* if custom field value is not null, then check validity of field if (rows.some(row => row.length !== headers.length)) {
if (fieldInFeature !== null) { this.importError = 'Incohérence dans le nombre de colonnes par ligne.';
//* if field type is list, it's not possible to guess from value type
if (field_type === 'list') {
//*then check if the value is an available option
if (fieldInFeature && !options.includes(fieldInFeature)) {
this.importError = `Le fichier est invalide: la valeur [ ${fieldInFeature} ] n'est pas une option valide
pour le champ personnalisé "${name}".`;
return false;
}
} else if (customType !== field_type) {
//* check if custom field value match
this.importError = `Le fichier est invalide: Un champ de type ${field_type} ne peut pas avoir la valeur [ ${fieldInFeature} ]`;
return false;
}
}
}
}
}
return true;
} else {
return false; return false;
} }
// Convert the CSV string to a JSON object for further processing
const jsonFromCsv = await csv({ delimiter }).fromString(csvString);
// Validate the types of values in the JSON object
const validity = await this.isValidTypes(jsonFromCsv);
return validity;
}, },
onGeojsonFileChange(e) { /**
* Handles the change event for GeoJSON file input. This function is triggered when a user selects a file.
* It reads the file, checks its validity if it's not too large, and updates the component state accordingly.
*
* @param {Event} e - The event triggered by file input change.
*/
async onGeojsonFileChange(e) {
// Start loading process
this.loadingImportFile = true; this.loadingImportFile = true;
// Clear any previously selected CSV file to avoid confusion
this.csvFileToImport = csvFileToImport;
// Retrieve the files from the event
const files = e.target.files || e.dataTransfer.files; const files = e.target.files || e.dataTransfer.files;
// If no file is selected, stop the loading process and return
if (!files.length) { if (!files.length) {
this.loadingImportFile = false; this.loadingImportFile = false;
return; return;
} }
const reader = new FileReader(); const reader = new FileReader();
reader.addEventListener('load', (e) => {
// bypass json check for files larger then 10 Mo /**
* Asynchronously processes the content of the file.
* Checks the validity of the GeoJSON file if it's smaller than a certain size.
* Updates the state with the GeoJSON file if it's valid.
*
* @param {string} fileContent - The content of the file read by FileReader.
*/
const processFile = async (fileContent) => {
let jsonValidity; let jsonValidity;
// Check the file size and determine the GeoJSON validity
if (parseFloat(fileConvertSizeToMo(files[0].size)) <= 10) { if (parseFloat(fileConvertSizeToMo(files[0].size)) <= 10) {
jsonValidity = this.checkJsonValidity(JSON.parse(e.target.result)); // If the file is smaller than 10 Mo, check its validity
try {
const json = JSON.parse(fileContent);
jsonValidity = await this.isValidTypes(json.features || json);
} catch (error) {
this.DISPLAY_MESSAGE({ comment: error, level: 'negative' });
jsonValidity = false;
}
} else { } else {
// Assume validity for larger files
jsonValidity = true; jsonValidity = true;
} }
// If the GeoJSON is valid, update the component state with the file and set the file in store
if (jsonValidity) { if (jsonValidity) {
this.geojsonFileToImport = files[0]; // todo : remove this value from state as it stored (first attempt didn't work) this.geojsonFileToImport = files[0];
this.SET_FILE_TO_IMPORT( this.SET_FILE_TO_IMPORT(this.geojsonFileToImport);
this.geojsonFileToImport } else {
); // Clear any previously selected geojson file to disable import button
this.geojsonFileToImport = geojsonFileToImport;
this.toggleJsonUploadOption(this.feature_type);
} }
// Stop the loading process
this.loadingImportFile = false; this.loadingImportFile = false;
}); };
// Setup the load event listener for FileReader
reader.addEventListener('load', (e) => processFile(e.target.result));
// Read the text from the selected file
reader.readAsText(files[0]); reader.readAsText(files[0]);
}, },
onCsvFileChange(e) { /**
* Handles the change event for CSV file input. This function is triggered when a user selects a file.
* It reads the file, checks its validity if it's not too large, and updates the component state accordingly.
*
* @param {Event} e - The event triggered by file input change.
*/
async onCsvFileChange(e) {
// Start loading process
this.loadingImportFile = true; this.loadingImportFile = true;
// Clear any previously selected geojson file to avoid confusion
this.geojsonFileToImport = geojsonFileToImport;
this.toggleJsonUploadOption(this.feature_type);
// Retrieve the files from the event
const files = e.target.files || e.dataTransfer.files; const files = e.target.files || e.dataTransfer.files;
// If no file is selected, stop the loading process and return
if (!files.length) { if (!files.length) {
this.loadingImportFile = false; this.loadingImportFile = false;
return; return;
} }
// Create a new FileReader to read the selected file
const reader = new FileReader(); const reader = new FileReader();
reader.addEventListener('load', (e) => {
// bypass csv check for files larger then 10 Mo /**
* Asynchronously processes the content of the file.
* Checks the validity of the CSV file if it's smaller than a certain size.
* Updates the state with the CSV file if it's valid.
*
* @param {string} fileContent - The content of the file read by FileReader.
*/
const processFile = async (fileContent) => {
let csvValidity; let csvValidity;
// Check the file size and determine the CSV validity
if (parseFloat(fileConvertSizeToMo(files[0].size)) <= 10) { if (parseFloat(fileConvertSizeToMo(files[0].size)) <= 10) {
csvValidity = this.checkCsvValidity(e.target.result); // If the file is smaller than 10 Mo, check its validity
csvValidity = await this.checkCsvValidity(fileContent);
} else { } else {
// Assume validity for larger files
csvValidity = true; csvValidity = true;
} }
// If the CSV is valid, update the component state with the file
if (csvValidity) { if (csvValidity) {
this.csvFileToImport = files[0]; // todo : remove this value from state as it stored (first attempt didn't work) this.csvFileToImport = files[0]; // TODO: Remove this value from state as it is stored (first attempt didn't work)
this.SET_FILE_TO_IMPORT( this.SET_FILE_TO_IMPORT(this.csvFileToImport);
this.csvFileToImport } else {
); // Clear any previously selected geojson file to disable import button
this.csvFileToImport = csvFileToImport;
} }
// Stop the loading process
this.loadingImportFile = false; this.loadingImportFile = false;
}); };
// Setup the load event listener for FileReader
reader.addEventListener('load', (e) => processFile(e.target.result));
// Read the text from the selected file
reader.readAsText(files[0]); reader.readAsText(files[0]);
}, },
...@@ -747,7 +914,7 @@ export default { ...@@ -747,7 +914,7 @@ export default {
this.waitMessage = true; this.waitMessage = true;
const payload = { const payload = {
slug: this.slug, slug: this.slug,
feature_type_slug: this.$route.params.feature_type_slug, feature_type_slug: this.featureTypeSlug,
}; };
if (this.$route.params.geojson) { //* import after redirection, for instance with data from catalog if (this.$route.params.geojson) { //* import after redirection, for instance with data from catalog
payload['geojson'] = this.$route.params.geojson; payload['geojson'] = this.$route.params.geojson;
...@@ -760,6 +927,7 @@ export default { ...@@ -760,6 +927,7 @@ export default {
this.$store.dispatch('feature-type/SEND_FEATURES_FROM_GEOJSON', payload) this.$store.dispatch('feature-type/SEND_FEATURES_FROM_GEOJSON', payload)
.then(() => { .then(() => {
this.waitMessage = false; this.waitMessage = false;
this.$refs.importTask.fetchImports();
}); });
}, },
...@@ -767,11 +935,11 @@ export default { ...@@ -767,11 +935,11 @@ export default {
this.waitMessage = true; this.waitMessage = true;
const payload = { const payload = {
slug: this.slug, slug: this.slug,
feature_type_slug: this.$route.params.feature_type_slug, feature_type_slug: this.featureTypeSlug,
}; };
if (this.$route.params.csv) { //* import after redirection, for instance with data from catalog if (this.$route.params.csv) { //* import after redirection, for instance with data from catalog
payload['csv'] = this.$route.params.csv; payload['csv'] = this.$route.params.csv;
} else if (this.csvFileToImport.size > 0) { //* import directly from geojson } else if (this.csvFileToImport.size > 0) { //* import directly from csv file
payload['fileToImport'] = this.csvFileToImport; payload['fileToImport'] = this.csvFileToImport;
} else { } else {
this.importError = "La ressource n'a pas pu être récupéré."; this.importError = "La ressource n'a pas pu être récupéré.";
...@@ -780,20 +948,22 @@ export default { ...@@ -780,20 +948,22 @@ export default {
this.SEND_FEATURES_FROM_CSV(payload) this.SEND_FEATURES_FROM_CSV(payload)
.then(() => { .then(() => {
this.waitMessage = false; this.waitMessage = false;
this.$refs.importTask.fetchImports();
}); });
}, },
exportFeatures() { exportFeatures() {
this.exportLoading = true; this.exportLoading = true;
let exportFormat = this.feature_type.geom_type === 'none' && this.exportFormat === 'GeoJSON' ? 'json' : this.exportFormat.toLowerCase();
const url = ` const url = `
${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}projects/${this.slug}/feature-type/${this.$route.params.feature_type_slug}/export/?format_export=${this.exportFormat.toLowerCase()} ${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}projects/${this.slug}/feature-type/${this.featureTypeSlug}/export/?format_export=${exportFormat}
`; `;
featureAPI.getFeaturesBlob(url) featureAPI.getFeaturesBlob(url)
.then((blob) => { .then((blob) => {
if (blob) { if (blob) {
const link = document.createElement('a'); const link = document.createElement('a');
link.href = URL.createObjectURL(blob); link.href = URL.createObjectURL(blob);
link.download = `${this.project.title}-${this.structure.title}.${this.exportFormat === 'GeoJSON' ? 'json' : 'csv'}`; link.download = `${this.project.title}-${this.feature_type.title}.${exportFormat}`;
link.click(); link.click();
setTimeout(function(){ setTimeout(function(){
URL.revokeObjectURL(link.href); URL.revokeObjectURL(link.href);
...@@ -805,24 +975,20 @@ export default { ...@@ -805,24 +975,20 @@ export default {
this.exportLoading = false; this.exportLoading = false;
}); });
}, },
async getLastFeatures(){
const response = await
this.GET_PROJECT_FEATURES({
project_slug: this.slug,
feature_type__slug : this.$route.params.feature_type_slug,
ordering: '-created_on',
limit: '5'
});
if (response) {
this.featuresLoading = false;
}
},
}, },
}; };
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
#feature-type-title i {
color: #000000;
margin: auto;
}
.custom-field.content {
overflow: hidden;
text-overflow: ellipsis;
}
.margin-25 { .margin-25 {
margin: 0 0.25em 0.25em 0 !important; margin: 0 0.25em 0.25em 0 !important;
} }
......
src/views/FeatureType/FeatureTypeDisplay.vue 0 → 100644
View file @ ee17a921
<template>
<div id="displayCustomisation">
<div
:class="{ active: loading }"
class="ui inverted dimmer"
>
<div class="ui loader" />
</div>
<h1 v-if="project && feature_type">
Modifier l'affichage sur la carte des signalements de type "{{ feature_type.title }}" pour le
projet "{{ project.title }}"
</h1>
<section id="symbology">
<h3>Symbologie</h3>
<form
id="form-symbology-edit"
action=""
method="post"
enctype="multipart/form-data"
class="ui form"
>
<SymbologySelector
v-if="feature_type"
id="default"
:init-color="feature_type.color"
:init-icon="feature_type.icon"
:init-opacity="feature_type.opacity"
:geom-type="feature_type.geom_type"
@set="setDefaultStyle"
/>
<div
v-if="customizableFields.length > 0"
class="fields inline"
>
<label
id="customfield-select-label"
for="customfield-select"
>
Champ de personnalisation de la symbologie:
</label>
<div id="custom_types-dropdown">
<Dropdown
:options="customizableFields"
:selected="selectedCustomfield"
:selection.sync="selectedCustomfield"
:clearable="true"
/>
</div>
</div>
<div
v-if="selectedCustomfield"
id="customFieldSymbology"
class="field"
>
<SymbologySelector
v-for="option of selectedFieldOptions"
:id="option"
:key="option"
:title="option"
:init-color="feature_type.colors_style.value ?
feature_type.colors_style.value.colors[option] ?
feature_type.colors_style.value.colors[option].value :
feature_type.colors_style.value.colors[option]
: null
"
:init-icon="feature_type.colors_style.value ?
feature_type.colors_style.value.icons[option] :
null
"
:init-opacity="getOpacity(feature_type, option)"
:geom-type="feature_type.geom_type"
@set="setColorsStyle"
/>
</div>
</form>
</section>
<div class="ui divider" />
<section
v-if="feature_type && feature_type.customfield_set"
id="popupDisplay"
>
<h3>Prévisualisation des champs personnalisés de l'info-bulle</h3>
<table
id="table-fields-to-display"
class="ui definition single line compact table"
aria-describedby="Liste des champs à afficher"
>
<thead>
<tr>
<th scope="col">
Prévisualisation du champ
</th>
<th scope="col">
Champ
</th>
<th scope="col">
Type
</th>
</tr>
</thead>
<tbody>
<tr
v-for="field in featureAnyFields"
:key="field.name"
:class="{ first_customfield: feature_type.customfield_set[0] &&
field.name === feature_type.customfield_set[0].name }"
>
<td
scope="row"
class="collapsing center aligned"
>
<div class="ui toggle checkbox">
<input
:checked="form.displayed_fields.includes(field.name)"
type="checkbox"
@input="toggleDisplay($event, field.name)"
>
<label />
</div>
</td>
<td scope="row">
{{ field.name }} ({{ field.label }})
</td>
<td scope="row">
{{ field.field_type || getCustomFieldType(field.field_type) }}
</td>
</tr>
</tbody>
</table>
</section>
<section id="notification">
<h3>Configuration de la notification d'abonnement</h3>
<div class="ui form">
<div class="field">
<div class="ui checkbox">
<input
id="enable_key_doc_notif"
v-model="form.enable_key_doc_notif"
class="hidden"
name="enable_key_doc_notif"
type="checkbox"
>
<label for="enable_key_doc_notif">Activer la notification de publication de pièces jointes</label>
</div>
</div>
<div class="field">
<div class="ui checkbox">
<input
id="disable_notification"
v-model="form.disable_notification"
class="hidden"
name="disable_notification"
type="checkbox"
>
<label for="disable_notification">Désactiver les notifications</label>
</div>
</div>
</div>
</section>
<button
id="save-display"
class="ui teal icon button margin-25"
type="button"
:disabled="!canSaveDisplayConfig"
@click="sendDisplayConfig"
>
<i
class="white save icon"
aria-hidden="true"
/>
Sauvegarder l'affichage du type de signalement
</button>
</div>
</template>
<script>
import { isEqual } from 'lodash';
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
import { customFieldTypeChoices, featureNativeFields } from '@/utils';
import SymbologySelector from '@/components/FeatureType/SymbologySelector.vue';
import Dropdown from '@/components/Dropdown.vue';
export default {
name: 'FeatureTypeDisplay',
components: {
SymbologySelector,
Dropdown,
},
data() {
return {
loading: false,
form: {
color: '#000000',
icon: 'circle',
colors_style: {
fields: [],
colors: {},
icons: {},
opacities: {},
custom_field_name: '',
value: {
colors: {},
icons: {},
opacities: {},
}
},
displayed_fields: ['status', 'feature_type', 'updated_on'],
enable_key_doc_notif: false,
disable_notification: false,
},
canSaveDisplayConfig: false
};
},
computed: {
...mapState('projects', [
'project'
]),
...mapState('feature-type', [
'customForms',
'colorsStyleList'
]),
...mapGetters('feature-type', [
'feature_type'
]),
customizableFields() {
if (this.feature_type) {
let options = this.feature_type.customfield_set.filter(el => el.field_type === 'list' || el.field_type === 'char' || el.field_type === 'boolean');
options = options.map((el) => {
return { name: [el.name, this.getCustomFieldType(el.field_type)], value: el };
});
return options;
}
return [];
},
selectedFieldOptions() {
if (this.selectedCustomfield) {
const customFieldSet = this.feature_type.customfield_set.find(el => el.name === this.selectedCustomfield);
if (customFieldSet) {
if (customFieldSet.options && customFieldSet.options.length > 0) {
return customFieldSet.options;
} else if (customFieldSet.field_type === 'char') {
return ['Vide', 'Non vide'];
} else if (customFieldSet.field_type === 'boolean') {
return ['Décoché', 'Coché'];
}
}
}
return [];
},
selectedCustomfield: {
get() {
return this.form.colors_style.custom_field_name;
},
set(newValue) {
if (newValue !== undefined) {
this.form.colors_style.custom_field_name = newValue.value ? newValue.value.name : null;
}
}
},
featureAnyFields() {
return [...featureNativeFields, ...this.feature_type.customfield_set];
}
},
watch: {
feature_type(newValue) {
// In which case the feature type would change while on this page ?
if (newValue) {
this.initForm();
}
},
form: {
deep: true,
handler(newValue) {
// checks if they are changes to be saved to enable save button
if (isEqual(newValue, {
color: this.feature_type.color,
icon: this.feature_type.icon,
opacity: this.feature_type.opacity,
colors_style: this.feature_type.colors_style,
displayed_fields: this.feature_type.displayed_fields,
enable_key_doc_notif: this.feature_type.enable_key_doc_notif,
disable_notification: this.feature_type.disable_notification
})) {
this.canSaveDisplayConfig = false;
} else {
this.canSaveDisplayConfig = true;
}
}
}
},
created() {
if (!this.project) {
this.GET_PROJECT(this.$route.params.slug);
this.GET_PROJECT_INFO(this.$route.params.slug);
}
this.SET_CURRENT_FEATURE_TYPE_SLUG(this.$route.params.slug_type_signal);
if (this.feature_type) {
this.initForm();
} else {
this.loading = true;
this.GET_PROJECT_FEATURE_TYPES(this.$route.params.slug)
.then(() => {
this.initForm();
// TODO : Use the global loader and get rid of this redondant loader
this.loading = false;
})
.catch(() => {
this.loading = false;
});
}
},
methods: {
...mapMutations('feature-type', [
'SET_CURRENT_FEATURE_TYPE_SLUG'
]),
...mapActions('feature-type', [
'SEND_FEATURE_DISPLAY_CONFIG',
'GET_PROJECT_FEATURE_TYPES'
]),
...mapActions('projects', [
'GET_PROJECT',
'GET_PROJECT_INFO',
]),
initForm() {
this.form.color = JSON.parse(JSON.stringify(this.feature_type.color)); //? wouldn't be better to use lodash: https://medium.com/@pmzubar/why-json-parse-json-stringify-is-a-bad-practice-to-clone-an-object-in-javascript-b28ac5e36521
this.form.icon = JSON.parse(JSON.stringify(this.feature_type.icon)); //? since the library is already imported ?
this.form.colors_style = {
...this.form.colors_style,
...JSON.parse(JSON.stringify(this.feature_type.colors_style))
};
if (!this.form.colors_style.value['opacities']) { //* if the opacity values were never setted (but why would it happen, is it necessary ?)
this.form.colors_style.value['opacities'] = {};
}
if (this.feature_type.colors_style && Object.keys(this.feature_type.colors_style.colors).length > 0) {
const coloredCustomField = this.feature_type.customfield_set.find(
el => el.name === this.feature_type.colors_style.custom_field_name
);
if (coloredCustomField) {
this.selectedCustomfield = coloredCustomField.name;
}
}
if (this.feature_type && this.feature_type.displayed_fields) {
this.form.displayed_fields = [...this.feature_type.displayed_fields];
}
this.form.enable_key_doc_notif = this.feature_type.enable_key_doc_notif;
this.form.disable_notification = this.feature_type.disable_notification;
},
setDefaultStyle(e) {
const { color, icon, opacity } = e.value;
this.form.color = color.value;
this.form.icon = icon;
this.form.opacity = opacity;
},
setColorsStyle(e) {
const { name, value } = e;
const { color, icon, opacity } = value;
this.form.colors_style.colors[name] = color;
this.form.colors_style.icons[name] = icon;
this.form.colors_style.opacities[name] = opacity;
this.form.colors_style.value.colors[name] = color;
this.form.colors_style.value.icons[name] = icon;
this.form.colors_style.value.opacities[name] = opacity; //? why do we need to duplicate values ? for MVT ?
},
toggleDisplay(evt, name) {
if (evt.target.checked) {
this.form.displayed_fields.push(name);
} else {
this.form.displayed_fields = this.form.displayed_fields.filter(el => el !== name);
}
},
sendDisplayConfig() {
this.loading = true;
this.SEND_FEATURE_DISPLAY_CONFIG(this.form)
.then(() => {
this.loading = false;
this.$router.push({
name: 'project_detail',
params: {
slug: this.$route.params.slug,
message: { comment: `La modification de l'affichage du type de signalement "${this.feature_type.title}" a été prise en compte.`, level: 'positive' }
},
});
})
.catch((err) => {
console.error(err);
this.$store.commit('DISPLAY_MESSAGE', {
comment: `Une erreur est survenue pendant l'envoi des modifications de l'affichage du type de signalement "${this.feature_type.title}"`,
level: 'negative'
});
this.loading = false;
});
},
getOpacity(feature_type, optionName) {
if (feature_type.colors_style.value && feature_type.colors_style.value.opacities) {
return feature_type.colors_style.value.opacities[optionName];
}
return null;
},
getCustomFieldType(fieldType) {
return customFieldTypeChoices.find(el => el.value === fieldType).name;
}
}
};
</script>
<style lang="less" scoped>
#displayCustomisation {
h1 {
margin-top: 1em;
}
form {
text-align: left;
margin-left: 1em;
#customfield-select-label {
font-weight: 600;
font-size: 1.1em;
}
#custom_types-dropdown {
margin: 1em;
&& > .dropdown {
width: 50%;
}
}
}
}
section {
padding: 1.5em 0;
// shrink toggle background width and height
.ui.toggle.checkbox .box::after, .ui.toggle.checkbox label::after {
height: 15px;
width: 15px;
}
.ui.toggle.checkbox .box, .ui.toggle.checkbox label {
padding-left: 2.5rem;
}
// reduce toggle button width and height
.ui.toggle.checkbox .box::before, .ui.toggle.checkbox label::before {
height: 15px;
width: 35px;
}
// adjust toggled button placement
.ui.toggle.checkbox input:checked ~ .box::after, .ui.toggle.checkbox input:checked ~ label::after {
left: 20px;
}
.ui.toggle.checkbox .box, .ui.toggle.checkbox label, .ui.toggle.checkbox {
min-height: 15px;
}
table {
border-collapse: collapse;
}
tr.first_customfield td {
border-top-width: 4px !important;
}
}
</style>
src/views/FeatureType/FeatureTypeEdit.vue
View file @ ee17a921
<template> <template>
<div <div id="feature-type-edit">
id="feature-type-edit"
class="page"
>
<div
id="message"
class="fullwidth"
>
<div
v-if="error"
class="ui negative message"
>
<p>
<i
class="cross icon"
aria-hidden="true"
/>
{{ error }}
</p>
</div>
</div>
<div class="fourteen wide column"> <div class="fourteen wide column">
<div <div
:class="{ active: loading }" :class="{ active: loading }"
...@@ -30,9 +10,6 @@ ...@@ -30,9 +10,6 @@
<form <form
v-if="project" v-if="project"
id="form-type-edit" id="form-type-edit"
action=""
method="post"
enctype="multipart/form-data"
class="ui form" class="ui form"
> >
<h1 v-if="action === 'create'"> <h1 v-if="action === 'create'">
...@@ -74,8 +51,8 @@ ...@@ -74,8 +51,8 @@
</div> </div>
<div <div
:class="{ disabled: csv }" id="geometry-type"
class="required field" :class="['required field', { disabled: csv }]"
> >
<label :for="form.geom_type.id_for_label">{{ <label :for="form.geom_type.id_for_label">{{
form.geom_type.label form.geom_type.label
...@@ -99,61 +76,82 @@ ...@@ -99,61 +76,82 @@
<label :for="form.title_optional.html_name">{{ form.title_optional.label }}</label> <label :for="form.title_optional.html_name">{{ form.title_optional.label }}</label>
</div> </div>
</div> </div>
<div class="field">
<span v-if="action === 'duplicate' || action === 'edit'" /> <div class="ui checkbox">
<input
<div v-else> :id="form.enable_key_doc_notif.html_name"
<div id="formsets"> v-model="form.enable_key_doc_notif.value"
<FeatureTypeCustomForm class="hidden"
v-for="customForm in customForms" :name="form.enable_key_doc_notif.html_name"
:key="customForm.dataKey" type="checkbox"
ref="customForms" >
:data-key="customForm.dataKey" <label :for="form.enable_key_doc_notif.html_name">{{ form.enable_key_doc_notif.label }}</label>
:custom-form="customForm"
:selected-color-style="form.colors_style.value.custom_field_name"
@update="updateColorsStyle($event)"
/>
</div> </div>
</div>
<div class="field">
<div class="ui checkbox">
<input
:id="form.disable_notification.html_name"
v-model="form.disable_notification.value"
class="hidden"
:name="form.disable_notification.html_name"
type="checkbox"
>
<label :for="form.disable_notification.html_name">{{ form.disable_notification.label }}</label>
</div>
</div>
<button <div id="formsets">
id="add-field" <FeatureTypeCustomForm
type="button" v-for="customForm in customForms"
class="ui compact basic button" :key="customForm.dataKey"
@click="addCustomForm" ref="customForms"
> :data-key="customForm.dataKey"
<i :custom-form="customForm"
class="ui plus icon" :selected-color-style="form.colors_style.value.custom_field_name"
aria-hidden="true" @update="updateColorsStyle($event)"
/> />
Ajouter un champ personnalisé
</button>
<div class="ui divider" />
<button
class="ui teal icon button margin-25"
type="button"
@click="sendFeatureType"
>
<i
class="white save icon"
aria-hidden="true"
/>
{{ action === "create" ? "Créer" : "Sauvegarder" }} le type de
signalement
</button>
<button
v-if="geojson || csv"
class="ui teal icon button margin-25"
type="button"
@click="postFeatureTypeThenFeatures"
>
<i
class="white save icon"
aria-hidden="true"
/>
Créer et importer le(s) signalement(s) du {{ geojson ? 'geojson' : 'csv' }}
</button>
</div> </div>
<button
id="add-field"
type="button"
class="ui compact basic button"
@click="addCustomForm"
>
<i
class="ui plus icon"
aria-hidden="true"
/>
Ajouter un champ personnalisé
</button>
<div class="ui divider" />
<button
id="send-feature_type"
:class="['ui teal icon button margin-25', { disabled: loading }]"
type="button"
@click="sendFeatureType"
>
<i
class="white save icon"
aria-hidden="true"
/>
{{ action === "create" ? "Créer" : "Sauvegarder" }} le type de
signalement
</button>
<button
v-if="geojson || csv || json"
:class="['ui teal icon button margin-25', { disabled: loading }]"
type="button"
@click="postFeatureTypeThenFeatures"
>
<i
class="white save icon"
aria-hidden="true"
/>
Créer et importer le(s) signalement(s) du {{ geojson ? 'geojson' : csv ? 'csv' : 'json' }}
</button>
</form> </form>
</div> </div>
</div> </div>
...@@ -165,6 +163,7 @@ import { mapGetters, mapState, mapMutations, mapActions } from 'vuex'; ...@@ -165,6 +163,7 @@ import { mapGetters, mapState, mapMutations, mapActions } from 'vuex';
import Dropdown from '@/components/Dropdown.vue'; import Dropdown from '@/components/Dropdown.vue';
import FeatureTypeCustomForm from '@/components/FeatureType/FeatureTypeCustomForm.vue'; import FeatureTypeCustomForm from '@/components/FeatureType/FeatureTypeCustomForm.vue';
import { transformProperties, reservedKeywords } from'@/utils';
export default { export default {
name: 'FeatureTypeEdit', name: 'FeatureTypeEdit',
...@@ -183,6 +182,10 @@ export default { ...@@ -183,6 +182,10 @@ export default {
type: Array, type: Array,
default: null, default: null,
}, },
json: {
type: Array,
default: null,
},
}, },
data() { data() {
...@@ -190,12 +193,12 @@ export default { ...@@ -190,12 +193,12 @@ export default {
loading: false, loading: false,
action: 'create', action: 'create',
dataKey: 0, dataKey: 0,
error: null,
csvFields: null, csvFields: null,
geomTypeChoices: [ geomTypeChoices: [
{ value: 'linestring', name: 'Ligne' }, { value: 'linestring', name: 'Ligne' },
{ value: 'point', name: 'Point' }, { value: 'point', name: 'Point' },
{ value: 'polygon', name: 'Polygone' }, { value: 'polygon', name: 'Polygone' },
{ value: 'none', name: 'Aucune' },
], ],
form: { form: {
colors_style: { colors_style: {
...@@ -219,7 +222,7 @@ export default { ...@@ -219,7 +222,7 @@ export default {
id_for_label: 'title', id_for_label: 'title',
label: 'Titre', label: 'Titre',
field: { field: {
max_length: 128, // ! Vérifier la valeur dans django max_length: 128,
}, },
html_name: 'title', html_name: 'title',
value: null, value: null,
...@@ -231,35 +234,31 @@ export default { ...@@ -231,35 +234,31 @@ export default {
label: 'Titre du signalement optionnel', label: 'Titre du signalement optionnel',
value: false, value: false,
}, },
enable_key_doc_notif: {
errors: null,
id_for_label: 'enable_key_doc_notif',
html_name: 'enable_key_doc_notif',
label: 'Activer la notification de publication de pièces jointes',
value: false,
},
disable_notification: {
errors: null,
id_for_label: 'disable_notification',
html_name: 'disable_notification',
label: 'Désactiver les notifications',
value: false,
},
geom_type: { geom_type: {
id_for_label: 'geom_type', id_for_label: 'geom_type',
label: 'Type de géométrie', label: 'Type de géométrie',
field: { field: {
max_length: 128, // ! Vérifier la valeur dans django max_length: 128,
}, },
html_name: 'geom_type', html_name: 'geom_type',
value: 'point', value: 'point',
}, },
}, },
slug: this.$route.params.slug, slug: this.$route.params.slug,
reservedKeywords: [
// todo : add keywords for mapstyle (strokewidth...)
'id',
'title',
'description',
'status',
'created_on',
'updated_on',
'archived_on',
'deletion_on',
'feature_type',
'display_creator',
'display_last_editor',
'project',
'creator',
'lat',
'lon'
],
}; };
}, },
...@@ -334,14 +333,16 @@ export default { ...@@ -334,14 +333,16 @@ export default {
}, },
customForms(newValue, oldValue) { customForms(newValue, oldValue) {
if (newValue !== oldValue) { if (newValue !== oldValue) {
const name = this.form.colors_style.value.custom_field_name; // Retrieve custom_field_name; returns undefined if colors_style.value is null/undefined
const customField = this.customForms.find((el) => el.name === name); const customFieldName = this.form.colors_style.value?.custom_field_name;
if (!customField || customField.length === 0) {
//* if the customForm corresponding doesn't exist reset colors_style values // Determine if a custom field with the given name exists in customForms
this.form.colors_style.value = { // 'some' returns true if any element matches the condition
colors: {}, const customFieldExists = customFieldName && this.customForms.some(el => el.name === customFieldName);
custom_field_name: '',
}; // Reset colors_style if no corresponding custom field is found
if (!customFieldExists) {
this.form.colors_style.value = { colors: {}, custom_field_name: '' };
} }
} }
}, },
...@@ -375,21 +376,18 @@ export default { ...@@ -375,21 +376,18 @@ export default {
//* when creation from a geojson //* when creation from a geojson
if (this.geojson) { if (this.geojson) {
this.importGeoJsonFeatureType(); this.importGeoJsonFeatureType();
if (this.fileToImport && this.fileToImport.name) { //* add multiple geometries options available only for geojson (therefore when importing from catalog also)
this.form.title.value = // * use the filename as title by default this.geomTypeChoices.push(
this.fileToImport.name.split('.')[0]; { value: 'multilinestring', name: 'Multiligne' },
} else { //* case when the geojson comes from datasud catalog { value: 'multipoint', name: 'Multipoint' },
this.form.title.value = this.geojson.name;// * use the typename as title by default { value: 'multipolygon', name: 'Multipolygone' },
} );
} }
if (this.csv) { if (this.csv) {
this.importCSVFeatureType(); this.importCSVFeatureType();
if (this.fileToImport && this.fileToImport.name) { }
this.form.title.value = // * use the filename as title by default if (this.json) {
this.fileToImport.name.split('.')[0]; this.importJsonFeatureType();
} else { //* case when the geojson comes from datasud catalog
this.form.title.value = this.csv.name;// * use the typename as title by default
}
} }
}, },
beforeDestroy() { beforeDestroy() {
...@@ -399,6 +397,9 @@ export default { ...@@ -399,6 +397,9 @@ export default {
}, },
methods: { methods: {
...mapMutations([
'DISPLAY_MESSAGE',
]),
...mapMutations('feature-type', [ ...mapMutations('feature-type', [
'ADD_CUSTOM_FORM', 'ADD_CUSTOM_FORM',
'EMPTY_FORM', 'EMPTY_FORM',
...@@ -453,7 +454,7 @@ export default { ...@@ -453,7 +454,7 @@ export default {
} }
} }
//! add custom fields using ONLY this function, incrementing dataKey for Vue to correctly update components //! add custom fields using ONLY this function, incrementing dataKey for Vue to correctly update components
formData.customfield_set.forEach((el) => this.addCustomForm(el)); [...formData.customfield_set].forEach((el) => this.addCustomForm(el));
this.updateStore(); this.updateStore();
}, },
...@@ -491,6 +492,8 @@ export default { ...@@ -491,6 +492,8 @@ export default {
color: this.form.color, color: this.form.color,
title: this.form.title, title: this.form.title,
title_optional: this.form.title_optional, title_optional: this.form.title_optional,
enable_key_doc_notif: this.form.enable_key_doc_notif,
disable_notification: this.form.disable_notification,
geom_type: this.form.geom_type, geom_type: this.form.geom_type,
colors_style: this.form.colors_style, colors_style: this.form.colors_style,
}); });
...@@ -538,15 +541,25 @@ export default { ...@@ -538,15 +541,25 @@ export default {
const requestType = this.action === 'edit' ? 'put' : 'post'; const requestType = this.action === 'edit' ? 'put' : 'post';
if (this.checkForms()) { if (this.checkForms()) {
this.SEND_FEATURE_TYPE(requestType) this.SEND_FEATURE_TYPE(requestType)
.then(({ status }) => { .then((response) => {
const { status, data } = response;
if (status === 200) { if (status === 200) {
this.goBackToProject('Le type de signalement a été mis à jour'); this.goBackToProject({ comment: 'Le type de signalement a été mis à jour', level: 'positive' });
} else if (status === 201) { } else if (status === 201) {
this.goBackToProject('Le nouveau type de signalement a été créé'); this.goBackToProject({ comment: 'Le nouveau type de signalement a été créé', level: 'positive' });
} else { } else {
this.displayMessage( let comment = 'Une erreur est survenue lors de l\'import du type de signalement';
"Une erreur est survenue lors de l'import du type de signalement" if (data.customfield_set) {
); let errors = data.customfield_set.find((el) => el.options);
if (errors.options) {
let customFieldError = errors.options[0];
if(customFieldError) comment = customFieldError[0].replace('ce champ', 'chaque option de champ personnalisé');
}
}
this.DISPLAY_MESSAGE({
comment,
level: 'negative'
});
} }
}); });
} }
...@@ -556,16 +569,19 @@ export default { ...@@ -556,16 +569,19 @@ export default {
this.SEND_FEATURES_FROM_GEOJSON({ this.SEND_FEATURES_FROM_GEOJSON({
slug: this.slug, slug: this.slug,
feature_type_slug, feature_type_slug,
geojson: this.geojson geojson: this.geojson || this.json
}) })
.then((response) => { .then((response) => {
if (response && response.status === 200) { if (response && response.status === 200) {
this.goBackToProject(); this.goBackToProject({
comment: 'Le nouveau type de signalement a été créé. L\'import des signalements est en cours',
level: 'positive'
});
} else { } else {
this.displayMessage( this.DISPLAY_MESSAGE({
"Une erreur est survenue lors de l'import de signalements.\n " + comment: `Une erreur est survenue lors de l'import de signalements.\n ${ response.data.detail }`,
response.data.detail level: 'negative'
); });
} }
this.loading = false; this.loading = false;
}) })
...@@ -573,6 +589,7 @@ export default { ...@@ -573,6 +589,7 @@ export default {
this.loading = false; this.loading = false;
}); });
}, },
postCSVFeatures(feature_type_slug) { postCSVFeatures(feature_type_slug) {
this.$store this.$store
.dispatch('feature-type/SEND_FEATURES_FROM_CSV', { .dispatch('feature-type/SEND_FEATURES_FROM_CSV', {
...@@ -582,12 +599,15 @@ export default { ...@@ -582,12 +599,15 @@ export default {
}) })
.then((response) => { .then((response) => {
if (response && response.status === 200) { if (response && response.status === 200) {
this.goBackToProject(); this.goBackToProject({
comment: 'Le nouveau type de signalement a été créé. Import des signalements est en cours',
level: 'positive'
});
} else { } else {
this.displayMessage( this.DISPLAY_MESSAGE({
"Une erreur est survenue lors de l'import de signalements.\n " + comment: `Une erreur est survenue lors de l'import de signalements.\n ${ response.data.detail }`,
response.data.detail level: 'negative'
); });
} }
this.loading = false; this.loading = false;
}) })
...@@ -604,10 +624,9 @@ export default { ...@@ -604,10 +624,9 @@ export default {
.dispatch('feature-type/SEND_FEATURE_TYPE', requestType) .dispatch('feature-type/SEND_FEATURE_TYPE', requestType)
.then(({ feature_type_slug }) => { .then(({ feature_type_slug }) => {
if (feature_type_slug) { if (feature_type_slug) {
if (this.geojson) { if (this.geojson || this.json) {
this.postGeojsonFeatures(feature_type_slug); this.postGeojsonFeatures(feature_type_slug);
} } else if (this.csv) {
else if (this.csv) {
this.postCSVFeatures(feature_type_slug); this.postCSVFeatures(feature_type_slug);
} }
} else { } else {
...@@ -620,13 +639,6 @@ export default { ...@@ -620,13 +639,6 @@ export default {
} }
}, },
displayMessage(message) {
this.error = message;
document
.getElementById('message')
.scrollIntoView({ block: 'end', inline: 'nearest' });
},
// ****** Methodes for geojson import ****** // // ****** Methodes for geojson import ****** //
toNewFeatureType() { toNewFeatureType() {
this.$router.push({ this.$router.push({
...@@ -635,128 +647,119 @@ export default { ...@@ -635,128 +647,119 @@ export default {
}); });
}, },
translateLabel(value) { /**
if (value === 'LineString') { * Builds custom form fields based on the properties of data entries.
return 'linestring'; *
} else if (value === 'Polygon' || value === 'MultiPolygon') { * This function iterates through a subset of data entries (such as rows from a CSV, JSON objects, or GeoJSON features)
return 'polygon'; * to determine the most appropriate type for each field. It tracks confirmed types to avoid redundant checks and
* stops processing a field once its type is definitively determined. If a field is initially detected as a 'char',
* it remains as 'char' unless a multiline text ('text') is detected later. The function prioritizes the detection
* of definitive types (like 'text', 'boolean', 'integer') and updates the form with the confirmed types.
*
* @param {Array} propertiesList - An array of data entries, where each entry is an object representing a set of properties.
*/
buildCustomForm(propertiesList) {
const confirmedTypes = {}; // Store confirmed types for each field
const detectedAsChar = {}; // Track fields initially detected as 'char'
// Iterate over each row or feature in the subset
propertiesList.forEach((properties) => {
for (const [key, val] of Object.entries(properties)) {
if (!reservedKeywords.includes(key)) {
// If the type for this field has already been confirmed as something other than 'char', skip it
if (confirmedTypes[key] && confirmedTypes[key] !== 'char') {
continue;
}
// Determine the type of the current value
const detectedType = transformProperties(val);
if (detectedType === 'text') {
// Once 'text' (multiline) is detected, confirm it immediately
confirmedTypes[key] = 'text';
} else if (!confirmedTypes[key] && detectedType !== 'char') {
// If a type is detected that is not 'char' and not yet confirmed, confirm it
confirmedTypes[key] = detectedType;
} else if (!confirmedTypes[key]) {
// If this field hasn't been confirmed yet, initialize it as 'char'
confirmedTypes[key] = 'char';
detectedAsChar[key] = true;
} else if (detectedAsChar[key] && detectedType !== 'char') {
// If a field was initially detected as 'char' but now has a different type, update it
confirmedTypes[key] = detectedType;
delete detectedAsChar[key]; // Remove from 'char' tracking once updated
}
}
}
});
// Build custom forms using the confirmed types
for (const [key, confirmedType] of Object.entries(confirmedTypes)) {
const customForm = {
label: { value: key || '' },
name: { value: key || '' },
position: this.dataKey, // use dataKey already incremented by addCustomForm
field_type: { value: confirmedType }, // use the confirmed type
options: { value: [] }, // not available in export
};
this.addCustomForm(customForm);
} }
return 'point';
}, },
transformProperties(prop) { setTitleFromFile() {
const type = typeof prop; if (this.fileToImport && this.fileToImport.name) {
const date = new Date(prop); this.form.title.value = // * use the filename as title by default
if (type === 'boolean') { this.fileToImport.name.split('.')[0];
return 'boolean'; } else { //* case when the data comes from datasud catalog
} else if (Number.isSafeInteger(prop)) { // * use the typename as title by default
return 'integer'; this.form.title.value = this.geojson.name || this.csv.name || this.json.name;
} else if (
type === 'string' &&
date instanceof Date &&
!isNaN(date.valueOf())
) {
return 'date';
} else if (type === 'number' && !isNaN(parseFloat(prop))) {
return 'decimal';
} }
return 'char'; //* string by default, most accepted type in database
}, },
importGeoJsonFeatureType() { importGeoJsonFeatureType() {
if (this.geojson.features && this.geojson.features.length) { if (this.geojson.features && this.geojson.features.length) {
//* in order to get feature_type properties, the first feature is enough const { geometry } = this.geojson.features[0];
const { properties, geometry } = this.geojson.features[0]; this.form.geom_type.value = geometry.type.toLowerCase();
this.form.title.value = properties.feature_type; this.updateStore(); // register geom_type in store
this.form.geom_type.value = this.translateLabel(geometry.type);
this.updateStore(); //* register title & geom_type in store // Use a subset of the first N features to build the form
const subsetFeatures = this.geojson.features.slice(0, 200); // Adjust '200' based on performance needs
//* loop properties to create a customForm for each of them const propertiesList = subsetFeatures.map(feature => feature.properties);
for (const [key, val] of Object.entries(properties)) { this.buildCustomForm(propertiesList);
//* check that the property is not a keyword from the backend or map style
// todo: add map style keywords
if (!this.reservedKeywords.includes(key)) {
const customForm = {
label: { value: key || '' },
name: { value: key || '' },
position: this.dataKey, // * use dataKey already incremented by addCustomForm
field_type: { value: this.transformProperties(val) }, // * guessed from the type
options: { value: [] }, // * not available in export
};
this.addCustomForm(customForm);
}
}
} }
this.setTitleFromFile();
}, },
importCSVFeatureType() { importCSVFeatureType() {
if (this.csv.length) { if (this.csv.length) {
this.updateStore(); //* register title & geom_type in store this.updateStore(); // register title in store
// List fileds for user to select coords fields
// this.csvFields = // Use a subset of the first N rows to build the form
// Object.keys(this.csv[0]) const subsetCSV = this.csv.slice(0, 200); // Adjust '200' based on performance needs
// .map(el => { this.buildCustomForm(subsetCSV);
// return {
// field: el, // Check for geom data
// x: false, if (!('lat' in this.csv[0]) || !('lon' in this.csv[0])) {
// y:false this.form.geom_type.value = 'none';
// };
// });
for (const [key, val] of Object.entries(this.csv[0])) {
//* check that the property is not a keyword from the backend or map style
// todo: add map style keywords
if (!this.reservedKeywords.includes(key)) {
const customForm = {
label: { value: key || '' },
name: { value: key || '' },
position: this.dataKey, // * use dataKey already incremented by addCustomForm
field_type: { value: this.transformProperties(val) }, // * guessed from the type
options: { value: [] }, // * not available in export
};
this.addCustomForm(customForm);
}
} }
} }
this.setTitleFromFile();
},
importJsonFeatureType() {
if (this.json.length) {
this.form.geom_type.value = 'none'; // JSON are non-geom features
this.updateStore(); // register title in store
// Use a subset of the first N objects to build the form
const subsetJson = this.json.slice(0, 200); // Adjust '200' based on performance needs
this.buildCustomForm(subsetJson);
}
this.setTitleFromFile();
}, },
// pickXcsvCoordField(e) {
// this.csvFields.forEach(el => {
// if (el.field === e.field) {
// el.x = true;
// } else {
// el.x = false;
// }
// });
// },
// pickYcsvCoordField(e) {
// this.csvFields.forEach(el => {
// if (el.field === e.field) {
// el.y = true;
// } else {
// el.y = false;
// }
// });
// },
// setCSVCoordsFields() {
// const xField = this.csvFields.find(el => el.x === true).field;
// const yField = this.csvFields.find(el => el.y === true).field;
// this.csvFields = null;
// for (const [key, val] of Object.entries(this.csv[0])) {
// //* check that the property is not a keyword from the backend or map style
// // todo: add map style keywords
// if (!this.reservedKeywords.includes(key) && key !== xField && key !== yField) {
// const customForm = {
// label: { value: key || '' },
// name: { value: key || '' },
// position: this.dataKey, // * use dataKey already incremented by addCustomForm
// field_type: { value: this.transformProperties(val) }, // * guessed from the type
// options: { value: [] }, // * not available in export
// };
// this.addCustomForm(customForm);
// }
// }
// }
}, },
}; };
</script> </script>
......