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 3465 additions and 629 deletions
src/registerServiceWorker.js
View file @ ee17a921
/* eslint-disable no-console */ /* eslint-disable no-console */
import { register } from 'register-service-worker' import { register } from 'register-service-worker';
if (process.env.NODE_ENV === 'production') { if (process.env.NODE_ENV === 'production') {
register(`${process.env.BASE_URL}service-worker.js`, { register(`${process.env.BASE_URL}service-worker.js`, {
...@@ -8,25 +8,43 @@ if (process.env.NODE_ENV === 'production') { ...@@ -8,25 +8,43 @@ if (process.env.NODE_ENV === 'production') {
console.log( console.log(
'App is being served from cache by a service worker.\n' + 'App is being served from cache by a service worker.\n' +
'For more details, visit https://goo.gl/AFskqB' 'For more details, visit https://goo.gl/AFskqB'
) );
}, },
registered () { registered (registration) {
console.log('Service worker has been registered.') //console.log('Service worker has been registered.')
console.log(
'Service worker has been registered and now polling for updates.'
);
setInterval(() => {
registration.update();
}, 10000); // every 10 seconds
}, },
cached () { cached () {
console.log('Content has been cached for offline use.') console.log('Content has been cached for offline use.');
}, },
updatefound () { updatefound () {
console.log('New content is downloading.') console.log('New content is downloading.');
}, },
updated () { updated (registration) {
console.log('New content is available; please refresh.') if (!navigator.webdriver) {
alert('Une nouvelle version de l\'application est disponible, l\'application va se recharger');
console.log('New content is available; please refresh.');
//
if (!registration || !registration.waiting) {
return;
}
// Send message to SW to skip the waiting and activate the new SW
registration.waiting.postMessage({ type: 'SKIP_WAITING' });
//window.location.reload(true);
} else {
console.log('Execution dans un navigateur controlé par un agent automatisé, la mise à jour n\'est pas appliqué pendant le test.');
}
}, },
offline () { offline () {
console.log('No internet connection found. App is running in offline mode.') console.log('No internet connection found. App is running in offline mode.');
}, },
error (error) { error (error) {
console.error('Error during service worker registration:', error) console.error('Error during service worker registration:', error);
} }
}) });
} }
src/router/index.js
View file @ ee17a921
import Vue from 'vue' import Vue from 'vue';
import VueRouter from 'vue-router' import VueRouter from 'vue-router';
import Index from '../views/Index.vue' import ProjectsList from '../views/Projects/ProjectsList.vue';
import store from '@/store';
import featureAPI from '@/services/feature-api';
Vue.use(VueRouter) Vue.use(VueRouter);
let projectBase = 'projet';
if (window.location.pathname.includes('projet-partage')) {
projectBase = 'projet-partage';
}
const routes = [ const routes = [
{ {
path: '/', path: '/',
name: 'index', name: 'index',
component: Index component: ProjectsList
}, },
{ {
path: '/connexion/', path: `${projectBase === 'projet' ? '': `/${projectBase}/:slug`}/connexion/`,
name: 'login', name: 'login',
// route level code-splitting props: true,
// this generates a separate chunk (login.[hash].js) for this route component: () => import('../views/Login.vue')
// which is lazy-loaded when the route is visited. },
component: () => import(/* webpackChunkName: "login" */'../views/registration/Login.vue') {
path: `${projectBase === 'projet' ? '': `/${projectBase}/:slug`}/inscription/`,
name: 'signup',
component: () => import('../views/Login.vue')
},
{
path: `${projectBase === 'projet' ? '': `/${projectBase}/:slug`}/inscription/succes`,
name: 'sso-signup-success',
props: true,
component: () => import('../views/Login.vue')
}, },
{ {
path: '/my_account/', path: `${projectBase === 'projet' ? '': `/${projectBase}/:slug`}/my_account/`,
name: 'my_account', name: 'my_account',
component: () => import('../views/My_account.vue') component: () => import('../views/Account.vue')
}, },
{ {
path: '/mentions/', path: `${projectBase === 'projet' ? '': '/' + projectBase}/mentions/`,
name: 'mentions', name: 'mentions',
component: () => import('../views/flatpages/with_right_menu.vue') component: () => import('../views/FlatPages/LegalMentions.vue')
}, },
{ {
path: '/aide/', path: `${projectBase === 'projet' ? '': '/' + projectBase}/aide/`,
name: 'aide', name: 'aide',
component: () => import('../views/flatpages/Default.vue') component: () => import('../views/FlatPages/Help.vue')
}, },
// * PROJECT // * PROJECT
{ {
path: '/creer-projet/', path: '/creer-projet/',
name: 'project_create', name: 'project_create',
component: () => import('../views/project/Project_edit.vue') component: () => import('../views/Project/ProjectEdit.vue')
}, },
{ {
path: '/projet/:slug', path: `/${projectBase}/:slug`,
name: 'project_detail', name: 'project_detail',
props: true, props: true,
component: () => import('../views/project/Project_detail.vue'), component: () => import('../views/Project/ProjectDetail.vue'),
}, },
{ {
path: '/projet/:slug/editer', path: `/${projectBase}/:slug/signalement/lister/`,
name: 'liste-signalements',
component: () => import('../views/Project/FeaturesListAndMap.vue')
},
{
path: `/${projectBase}/:slug/editer`,
name: 'project_edit', name: 'project_edit',
component: () => import('../views/project/Project_edit.vue') component: () => import('../views/Project/ProjectEdit.vue')
}, },
{ {
path: '/projet-type/', path: '/projet-type/',
name: 'project_type_list', name: 'project_type_list',
component: () => import('../views/project/Project_type_list.vue') component: () => import('../views/Projects/ProjectsTypes.vue')
}, },
{ {
path: '/creer-projet/create_from/:slug/', path: '/creer-projet/create_from/:slug/',
name: 'project_create_from', name: 'project_create_from',
component: () => import('../views/project/Project_edit.vue') component: () => import('../views/Project/ProjectEdit.vue')
}, },
{ {
path: '/projet/:slug/administration-carte/', path: `/${projectBase}/:slug/administration-carte/`,
name: 'project_mapping', name: 'project_mapping',
component: () => import('../views/project/Project_mapping.vue') component: () => import('../views/Project/ProjectBasemaps.vue')
}, },
{ {
path: '/projet/:slug/membres/', path: `/${projectBase}/:slug/membres/`,
name: 'project_members', name: 'project_members',
component: () => import('../views/project/Project_members.vue') component: () => import('../views/Project/ProjectMembers.vue')
},
{
path: `/${projectBase}/:slug/signalement-filtre/`,
name: 'details-signalement-filtre',
component: () => import('../views/Feature/FeatureDetail.vue')
}, },
// * FEATURE TYPE // * FEATURE TYPE
{ {
path: '/projet/:slug/type-signalement/ajouter/', path: `/${projectBase}/:slug/type-signalement/ajouter/`,
name: 'ajouter-type-signalement', name: 'ajouter-type-signalement',
props: true, props: true,
component: () => import('../views/feature_type/Feature_type_edit.vue') component: () => import('../views/FeatureType/FeatureTypeEdit.vue')
}, },
{ {
path: '/projet/:slug/type-signalement/ajouter/create_from/:slug_type_signal', path: `/${projectBase}/:slug/type-signalement/ajouter/create_from/:slug_type_signal`,
name: 'dupliquer-type-signalement', name: 'dupliquer-type-signalement',
component: () => import('../views/feature_type/Feature_type_edit.vue') component: () => import('../views/FeatureType/FeatureTypeEdit.vue')
}, },
{ {
path: '/projet/:slug/type-signalement/:feature_type_slug/', path: `/${projectBase}/:slug/type-signalement/:feature_type_slug/`,
name: 'details-type-signalement', name: 'details-type-signalement',
component: () => import('../views/feature_type/Feature_type_detail.vue') component: () => import('../views/FeatureType/FeatureTypeDetail.vue')
}, },
{ {
path: '/projet/:slug/type-signalement/:slug_type_signal/editer/', path: `/${projectBase}/:slug/type-signalement/:slug_type_signal/editer/`,
name: 'editer-type-signalement', name: 'editer-type-signalement',
component: () => import('../views/feature_type/Feature_type_edit.vue') component: () => import('../views/FeatureType/FeatureTypeEdit.vue')
}, },
// * FEATURE
{ {
path: '/projet/:slug/signalement/lister/', path: `/${projectBase}/:slug/type-signalement/:slug_type_signal/affichage/`,
name: 'liste-signalements', name: 'editer-affichage-signalement',
component: () => import('../views/feature/Feature_list.vue') component: () => import('../views/FeatureType/FeatureTypeDisplay.vue')
}, },
// * FEATURE
{ {
path: '/projet/:slug/type-signalement/:slug_type_signal/signalement/ajouter/', path: `/${projectBase}/:slug/type-signalement/:slug_type_signal/signalement/ajouter/`,
name: 'ajouter-signalement', name: 'ajouter-signalement',
component: () => import('../views/feature/Feature_edit.vue') component: () => import('../views/Feature/FeatureEdit.vue')
}, },
{ {
path: '/projet/:slug/type-signalement/:slug_type_signal/signalement/:slug_signal', path: `/${projectBase}/:slug/type-signalement/:slug_type_signal/signalement/:slug_signal`,
name: 'details-signalement', name: 'details-signalement',
component: () => import('../views/feature/Feature_detail.vue') component: () => import('../views/Feature/FeatureDetail.vue'),
/**
* Handles routing logic before entering the details-signalement route.
* This function manages access and navigation based on user permissions and feature data.
*/
beforeEnter: async (to, from, next) => {
try {
const { slug, slug_type_signal, slug_signal } = to.params;
// Retrieve the project details from the store
const project = await store.dispatch('projects/GET_PROJECT', slug);
// Prepare query based on the project settings for feature browsing
const query = { ordering: project.feature_browsing_default_sort };
// Check if the default filter of the project is set to feature_type and apply it
if (project.feature_browsing_default_filter) { // when feature_type is the default filter of the project,
query['feature_type_slug'] = slug_type_signal; // set feature_type slug in query
}
// Get the feature's position based on the feature slug and query settings
const offset = await featureAPI.getFeaturePosition(slug, slug_signal, query);
// Decide next routing based on the offset result
if (offset >= 0) {
next({
name: 'details-signalement-filtre',
params: { slug },
query: { ...query, offset }
});
} else if (offset === 'No Content') {
// API return no content when user is not allowed to see the feature or isn't connected
if (store.state.user) {
// If the user is connected, display information that he's not allowed to view the feature
store.commit('DISPLAY_MESSAGE', { comment: 'Vous n\'avez pas accès à ce signalement avec cet utilisateur', level: 'negative' });
// and redirect to main page
next({ path: '/' });
} else {
// If the user is not connected, remove other messages to avoid displaying twice that the user is not connected
store.commit('CLEAR_MESSAGES');
// display information that user need to be connected
store.commit('DISPLAY_MESSAGE', { comment: 'Vous n\'avez pas accès à ce signalement hors connexion, veuillez-vous connecter au préalable', level: 'negative' });
// Then redirect to login page
if (store.state.configuration.VUE_APP_LOGIN_URL) {
// If the login is through SSO, redirect to external login page (if the instance accepts a redirect_url it would be caught before when requesting user_info with GET_USER_INFO)
setTimeout(() => { // delay switching page to allow the info message to be read by user
window.open(store.state.configuration.VUE_APP_LOGIN_URL);
}, 1500);
} else {
// In a classic installation, redirect to the login page of this application
next({ name: 'login' });
}
}
} else {
store.commit('DISPLAY_MESSAGE', { comment: 'Désolé, une erreur est survenue pendant la recherche du signalement', level: 'negative' });
next({ path: '/' });
}
} catch (error) {
console.error('error', error);
store.commit('DISPLAY_MESSAGE', { comment: `Désolé, une erreur est survenue pendant la recherche du signalement - ${error}`, level: 'negative' });
next({ path: '/' });
}
}
}, },
{ {
path: '/projet/:slug/type-signalement/:slug_type_signal/signalement/:slug_signal/editer/', path: `/${projectBase}/:slug/type-signalement/:slug_type_signal/offline`,
name: 'offline-signalement',
component: () => import('../views/Feature/FeatureOffline.vue')
},
{
path: `/${projectBase}/:slug/type-signalement/:slug_type_signal/signalement/:slug_signal/editer/`,
name: 'editer-signalement', name: 'editer-signalement',
component: () => import('../views/feature/Feature_edit.vue') component: () => import('../views/Feature/FeatureEdit.vue')
},
{
path: `/${projectBase}/:slug/type-signalement/:slug_type_signal/editer-signalements-attributs/`,
name: 'editer-attribut-signalement',
component: () => import('../views/Feature/FeatureEdit.vue')
},
{
path: '/projet/:slug/catalog/:feature_type_slug',
name: 'catalog-import',
component: () => import('../views/Catalog.vue')
},
{
path: '/projet/:slug/type-signalement/:slug_type_signal/signalement/:slug_signal/attachment-preview/',
name: 'attachment-preview',
component: () => import('../views/AttachmentPreview.vue')
}, },
{ path: '/:pathMatch(.*)*', name: 'NotFound', component: () => import('../views/NotFound.vue') }, { path: '/:pathMatch(.*)*', name: 'NotFound', component: () => import('../views/NotFound.vue') },
] ];
//let routerHistory = [];
const router = new VueRouter({ const router = new VueRouter({
mode: 'history', mode: 'history',
base: process.env.BASE_URL, base: '/geocontrib/',
routes, routes,
routerHistory: [], routerHistory: [],
scrollBehavior(to, from, savedPosition) { //* record each route change to turn back to origin after redirect scrollBehavior(to, from, savedPosition) { //* record each route change to keep scroll position
const fromHistory = Boolean(savedPosition); const fromHistory = Boolean(savedPosition);
if (fromHistory && this.options.routerHistory.length > 0) { if (fromHistory && this.options.routerHistory.length > 0) {
...@@ -133,6 +239,6 @@ const router = new VueRouter({ ...@@ -133,6 +239,6 @@ const router = new VueRouter({
} }
return savedPosition || { x: 0, y: 0 }; return savedPosition || { x: 0, y: 0 };
}, },
}) });
export default router export default router;
src/service-worker.js 0 → 100644
View file @ ee17a921
/* global workbox */ //* allow undefined variable for 'workbox' in this file (because global variable) to avoid eslint error
// custom service-worker.js
if (workbox) {
// adjust log level for displaying workbox logs
//workbox.core.setLogLevel(workbox.core.LOG_LEVELS.debug)
// apply precaching. In the built version, the precacheManifest will
// be imported using importScripts (as is workbox itself) and we can
// precache this. This is all we need for precaching
workbox.precaching.precacheAndRoute(self.__precacheManifest);
//workbox.core.skipWaiting();
// Make sure to return a specific response for all navigation requests.
// Since we have a SPA here, this should be index.html always.
// https://stackoverflow.com/questions/49963982/vue-router-history-mode-with-pwa-in-offline-mode
workbox.routing.registerNavigationRoute('/geocontrib/index.html', {
blacklist: [/\/api/,/\/admin/,/\/media/,/\/cas/],
});
workbox.routing.registerRoute(
new RegExp('.*/config/config.json'),
new workbox.strategies.StaleWhileRevalidate({
cacheName: 'config',
})
);
workbox.routing.registerRoute(
new RegExp('.*/api/.*'),
new workbox.strategies.NetworkFirst({
cacheName: 'api',
plugins: [
new workbox.cacheableResponse.Plugin({
statuses: [0, 200],
}),
],
})
);
workbox.routing.registerRoute(
/^https:\/\/[a-zA-Z]\.tile\.openstreetmap\.fr/,
new workbox.strategies.CacheFirst({
cacheName: 'osm',
plugins: [
new workbox.cacheableResponse.Plugin({
statuses: [0, 200],
}),
new workbox.expiration.Plugin({
maxAgeSeconds: 60 * 60 * 24 * 365,
// maxEntries: 30, pour limiter le nombre d'entrée dans le cache
}),
],
})
);
workbox.routing.registerRoute(
new RegExp('.*/service=WMS&request=GetMap/.*'),
new workbox.strategies.CacheFirst({
cacheName: 'wms',
plugins: [
new workbox.cacheableResponse.Plugin({
statuses: [0, 200],
}),
new workbox.expiration.Plugin({
maxAgeSeconds: 60 * 60 * 24 * 365,
// maxEntries: 30, pour limiter le nombre d'entrée dans le cache
}),
],
})
);
}
// This code listens for the user's confirmation to update the app.
self.addEventListener('message', (e) => {
if (!e.data) {
return;
}
switch (e.data.type) {
case 'SKIP_WAITING':
self.skipWaiting();
break;
default:
// NOOP
break;
}
});
src/services/edition-service.js 0 → 100644
View file @ ee17a921
import { Draw, Snap } from 'ol/interaction';
import Modify from 'ol/interaction/Modify';
import { Collection } from 'ol';
import MultiPoint from 'ol/geom/MultiPoint';
import {
Fill, Stroke, Style, Circle, Text //RegularShape, Circle as CircleStyle, Text,Icon
} from 'ol/style';
import VectorSource from 'ol/source/Vector';
import VectorLayer from 'ol/layer/Vector';
import mapService from '@/services/map-service';
import { buffer } from 'ol/extent';
const editionService = {
drawnFeature: null,
featureToEdit: null,
editing_feature: {},
geom_type: 'linestring',
// Création d'une collection filtrée
filteredFeatures: new Collection(),
// Méthode pour créer un style basé sur la couleur actuelle
createDrawStyle(isEditing) {
return [
new Style({
// Style principal pour le polygone
fill: new Fill({
color: isEditing ? 'rgba(255, 145, 0, .2)' : 'rgba(255, 255, 255, .2)',
}),
// Style principal pour la ligne et le tour du polygone
stroke: new Stroke({
color: isEditing ? 'rgba(255, 145, 0, .9)' : 'rgba(255, 45, 0, 0.5)',
lineDash: [],
width: 2,
}),
// Style principal pour le point
image: new Circle({
radius: 7,
stroke: new Stroke({
color: 'rgba(255, 0, 0, 0.5)',
lineDash: [],
width: 2
}),
fill: new Fill({
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
}),
// Style pour afficher des points sur les sommets de ligne ou polygone (seulement en mode édition)
...(isEditing
? [
// 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) {
this.editing_feature = feature;
},
initFeatureToEdit(feature) {
this.editing_feature = feature;
this.draw.setActive(false);
this.drawSource.addFeature(feature);
this.drawnItems.setZIndex(50);
mapService.fitExtent(buffer(this.drawSource.getExtent(),200));
},
addEditionControls(geomType) {
this.geom_type = geomType;
this.drawSource = new VectorSource();
this.drawnItems = new VectorLayer({
source: this.drawSource,
style: this.createDrawStyle(),
zIndex: 4000
});
mapService.getMap().addLayer(this.drawnItems);
if (this.draw) {
mapService.getMap().removeInteraction(this.draw);
}
let gType = 'Point';
if (geomType.toUpperCase().indexOf('POLYGON') >= 0) {
gType = 'Polygon';
}
else if (geomType.toUpperCase().indexOf('LINE') >= 0) {
gType = 'LineString';
}
this.draw = new Draw({
source: this.drawSource,
type: gType,
style: this.createDrawStyle()
});
mapService.getMap().addInteraction(this.draw);
this.setEditingFeature(undefined);
this.draw.on('drawend', (evt) => {
var feature = evt.feature;
this.drawnFeature = feature;
this.setEditingFeature(feature);
this.draw.setActive(false);
});
this.modify = new Modify({
style: this.createDrawStyle(),
features: this.filteredFeatures, // Limite la modification aux entités filtrées
});
// This workaround allows to avoid the ol freeze
// referenced bug : https://github.com/openlayers/openlayers/issues/6310
// May be corrected in a future version
this.modify.handleUpEvent_old = this.modify.handleUpEvent;
this.modify.handleUpEvent = function (evt) {
try {
this.handleUpEvent_old(evt);
} catch (ex) {
console.log(ex);
}
};
mapService.getMap().addInteraction(this.modify);
// Supprime dynamiquement la feature des entités modifiables
this.drawSource.on('removefeature', (event) => {
const feature = event.feature;
this.filteredFeatures.remove(feature);
});
},
resetAllTools() {
if (this.draw) {
this.draw.setActive(false);
}
if (this.modify) {
this.modify.setActive(false);
}
},
removeSelectInteraction(interaction) {
interaction.getFeatures().clear();
interaction.setActive(false);
},
activeUpdateFeature(isEditing) {
this.resetAllTools();
if (isEditing) {
// Mise à jour des entités modifiables
this.drawSource.forEachFeature((feature) => {
if (
(this.featureToEdit && feature.id_ === this.featureToEdit.id) ||
(this.drawnFeature && feature.ol_uid === this.drawnFeature.ol_uid) ||
(!this.drawnFeature && !this.featureToEdit)
) {
this.filteredFeatures.push(feature);
}
});
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) {
this.featureToEdit = feature;
},
removeActiveFeatures() {
this.drawnFeature = 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);
}
}
};
export default editionService;
src/services/feature-api.js
View file @ ee17a921
import axios from 'axios'; 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, queryString) {
const baseUrl = store.state.configuration.VUE_APP_DJANGO_API_BASE;
const response = await axios.get(
`${baseUrl}projects/${project_slug}/feature-bbox/${queryString ? '?' + queryString : ''}`
);
if (
response.status === 200 &&
response.data
) {
const bbox = response.data;
return [
[bbox.minLat, bbox.minLon],
[bbox.maxLat, bbox.maxLon],
];
} else {
return null;
}
},
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) {
// 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 (
response.status === 200 &&
response.data
) {
return response.data;
} else {
return null;
}
},
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/`
); );
...@@ -19,6 +69,7 @@ const featureAPI = { ...@@ -19,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/`
); );
...@@ -32,33 +83,109 @@ const featureAPI = { ...@@ -32,33 +83,109 @@ const featureAPI = {
} }
}, },
async postComment({ featureId, comment }) { async getFeatureLinks(featureId) {
const response = await axios.post( const baseUrl = store.state.configuration.VUE_APP_DJANGO_API_BASE;
`${baseUrl}features/${featureId}/comments/`, { comment } const response = await axios.get(
`${baseUrl}features/${featureId}/feature-links/`
); );
if ( if (
response.status === 200 && response.status === 200 &&
response.data response.data
) { ) {
return response.data;
} else {
return null;
}
},
async getFeaturesBlob(url) {
const response = await axios
.get(url, { responseType: 'blob' });
if (
response.status === 200 &&
response.data
) {
return response.data;
} else {
return null;
}
},
async postOrPutFeature({ method, feature_id, feature_type__slug, project__slug, data }) {
const baseUrl = store.state.configuration.VUE_APP_DJANGO_API_BASE;
let url = `${baseUrl}v2/features/`;
if (method === 'PUT') {
url += `${feature_id}/?
feature_type__slug=${feature_type__slug}
&project__slug=${project__slug}`;
}
const response = await axios({
url,
method,
data,
});
if ((response.status === 200 || response.status === 201) && response.data) {
return response;
} else {
return null;
}
},
async updateFeature({ feature_id, feature_type__slug, project__slug, newStatus }) {
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({
url,
method: 'PATCH',
data: { id: feature_id, status: newStatus, feature_type: feature_type__slug }
});
if (response.status === 200 && response.data) {
return response;
} else {
return null;
}
},
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; return response;
} else { } else {
return null; return null;
} }
}, },
async postCommentAttachment({ featureId, file, fileName, comment }) { async projectFeatureBulkDelete(projecSlug, queryString) {
let formdata = new FormData(); const baseUrl = store.state.configuration.VUE_APP_DJANGO_API_BASE;
formdata.append("file", file, fileName); const url = `${baseUrl}projects/${projecSlug}/feature-bulk-modify/?${queryString}`;
const data = {
comment const response = await axios({
url,
method: 'DELETE'
});
if (response.status === 200 && response.data) {
return response;
} else {
return null;
} }
formdata.append("data", JSON.stringify(data)); },
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}/attachments/`, formdata `${baseUrl}features/${featureId}/comments/`, { comment }
); );
if ( if (
response.status === 200 && response.status === 201 &&
response.data response.data
) { ) {
return response; return response;
...@@ -67,19 +194,37 @@ const featureAPI = { ...@@ -67,19 +194,37 @@ const featureAPI = {
} }
}, },
async getFeatureLinks(featureId) { async postCommentAttachment({ featureId, file, fileName, title, isKeyDocument, commentId }) {
const response = await axios.get( const baseUrl = store.state.configuration.VUE_APP_DJANGO_API_BASE;
`${baseUrl}features/${featureId}/feature-links/` const formdata = new FormData();
formdata.append('file', file, fileName);
formdata.append('title', title);
formdata.append('is_key_document', isKeyDocument);
const response = await axios.put(
`${baseUrl}features/${featureId}/comments/${commentId}/upload-file/`, formdata
); );
if ( if (
response.status === 200 && response.status === 200 &&
response.data response.data
) { ) {
return response.data; return response;
} else { } else {
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 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 featureTypeAPI = {
async deleteFeatureType(featureType_slug) {
const response = await axios.delete(
`${baseUrl}v2/feature-types/${featureType_slug}/`
);
if (
response.status === 204
) {
return 'success';
} else {
return null;
}
},
};
export default featureTypeAPI;
src/services/map-api.js
View file @ ee17a921
import axios from 'axios'; 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 mapAPI = { const mapAPI = {
async postOrPut({ basemap, projectSlug, newBasemapIds }) { async postOrPut({ basemap, projectSlug, newBasemapIds }) {
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;
...@@ -25,6 +26,6 @@ const mapAPI = { ...@@ -25,6 +26,6 @@ const mapAPI = {
} }
} };
export default mapAPI; export default mapAPI;
src/services/map-service.js 0 → 100644
View file @ ee17a921
import TileWMS from 'ol/source/TileWMS';
import { View, Map } from 'ol';
import { ScaleLine, Zoom, Attribution, FullScreen } from 'ol/control';
import TileLayer from 'ol/layer/Tile';
import { transform, transformExtent, fromLonLat } from 'ol/proj';
import { defaults } from 'ol/interaction';
import XYZ from 'ol/source/XYZ';
import VectorTileLayer from 'ol/layer/VectorTile';
import VectorTileSource from 'ol/source/VectorTile';
import { MVT, GeoJSON } from 'ol/format';
import { boundingExtent } from 'ol/extent';
import Overlay from 'ol/Overlay';
import { Fill, Stroke, Style, Circle } from 'ol/style';
import { asArray } from 'ol/color';
import VectorSource from 'ol/source/Vector';
import VectorLayer from 'ol/layer/Vector';
import WMTSTileGrid from 'ol/tilegrid/WMTS';
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';
import axios from '@/axios-client.js';
import router from '@/router';
import store from '@/store';
import { retrieveFeatureProperties } from '@/utils';
const parser = new WMTSCapabilities();
let dictLayersToMap = {};
let layersCount = 0;
const geolocationStyle = new Style({
image: new Circle({
radius: 6,
fill: new Fill({
color: '#3399CC',
}),
stroke: new Stroke({
color: '#fff',
width: 2,
}),
}),
});
const mapService = {
layers: [],
mvtLayer: undefined,
content: {},
overlay: {},
map: undefined,
queryParams: {},
geolocation: undefined, // for geolocation
geolocationSource: null, // for geolocation
positionFeature: null, // for geolocation
lastPosition: null, // for geolocation
getMap() {
return this.map;
},
destroyMap() {
this.map = undefined;
},
createMap(el, options) {
const {
lat,
lng,
mapDefaultViewCenter,
mapDefaultViewZoom,
maxZoom,
zoom,
zoomControl = true,
fullScreenControl = false,
geolocationControl = false,
interactions = { doubleClickZoom: false, mouseWheelZoom: false, dragPan: true },
controls = [
new Attribution({ collapsible: false }),
new ScaleLine({
units: 'metric',
}),
],
} = options;
if (fullScreenControl) {
controls.push(new FullScreen({ tipLabel: 'Mode plein écran' }));
}
const mapOptions = {
layers: [],
target: el,
controls,
interactions: defaults(interactions),
view: new View({
center: transform([ //* since 0 is considered false, check for number instead of just defined (though boolean will pass through)
Number(lng) ? lng : mapDefaultViewCenter[1],
Number(lat) ? lat : mapDefaultViewCenter[0],
], 'EPSG:4326', 'EPSG:3857'),
zoom: Number(mapDefaultViewZoom) ? mapDefaultViewZoom : zoom,
maxZoom
}),
};
this.map = new Map(mapOptions);
if (zoomControl) {
this.map.addControl(new Zoom({ zoomInTipLabel: 'Zoomer', zoomOutTipLabel: 'Dézoomer' }));
}
if (geolocationControl) {
this.initGeolocation();
}
this.map.once('rendercomplete', () => {
this.map.updateSize();
});
const container = document.getElementById('popup');
this.content = document.getElementById('popup-content');
const closer = document.getElementById('popup-closer');
this.overlay = new Overlay({
element: container,
autoPan: true,
autoPanAnimation: {
duration: 500,
},
});
let overlay = this.overlay;
if (closer) {
closer.onclick = function () {
overlay.setPosition(undefined);
closer.blur();
return false;
};
}
this.map.addOverlay(this.overlay);
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;
},
addRouterToPopup({ featureId, featureTypeSlug, index }) {
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, {
layerFilter: (l) => l === this.mvtLayer || this.olLayer
});
//* prepare popup content
if (features && features.length > 0 && this.content) {
const featureId = features[0].properties_ ? features[0].properties_.feature_id : features[0].id_;
const isEdited = router.history.current.name === 'editer-signalement' &&
router.history.current.params.slug_signal === featureId; //* avoid opening popup on feature currently edited
if (featureId && !isEdited) {
const popupContent = await this._createContentPopup(features[0]);
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);
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 urlInfos = url ? url.split('?') : [];
const urlParams = new URLSearchParams(urlInfos[1]);
const params = {};
Array.from(urlParams.keys()).forEach(param => {
if (proxyparams.indexOf(param.toLowerCase()) >= 0) {
params[param.toLowerCase()] = urlParams.get(param);
}
});
params.url = urlInfos[0];
axios.get(
window.proxy_url,
{ params }
).then(response => {
const data = response.data;
const err = typeof data === 'object' ? null : data;
if (data.features || err) this.showGetFeatureInfo(err, event, data, queryLayer);
}).catch(error => {
throw error;
});
}
}
},
showGetFeatureInfo: function (err, event, data, layer) {
let content;
if (err) {
content = `
<h4>${layer.options.title}</h4>
<p>Données de la couche inaccessibles</p>
`;
this.content.innerHTML = content;
this.overlay.setPosition(event.coordinate);
} else { // Otherwise show the content in a popup
const contentLines = [];
let contentTitle;
if (data.features.length > 0) {
Object.entries(data.features[0].properties).forEach(entry => {
const [key, value] = entry;
if (key !== 'bbox') {
contentLines.push(`<div>${key}: ${value}</div>`);
}
});
contentTitle = `<h4>${layer.options.title}</h4>`;
content = contentTitle.concat(contentLines.join(''));
this.content.innerHTML = content;
this.overlay.setPosition(event.coordinate);
}
}
},
getFeatureInfoUrl(event, layer) {
const olLayer = dictLayersToMap[layer.id];
const source = olLayer.getSource();
const viewResolution = this.map.getView().getResolution();
let url;
const wmsOptions = { info_format: 'application/json', query_layers: layer.options.layers };
if (source && source.getFeatureInfoUrl) {
url = source.getFeatureInfoUrl(event.coordinate, viewResolution, 'EPSG:3857', wmsOptions);
}
return url;
},
fitBounds(bounds) {
let ext = boundingExtent([[bounds[0][1], bounds[0][0]], [bounds[1][1], bounds[1][0]]]);
ext = transformExtent(ext, 'EPSG:4326', 'EPSG:3857');
this.map.getView().fit(ext, { padding: [25, 25, 25, 25], maxZoom: 16 });
},
fitExtent(ext) {
//ext = transformExtent(ext, 'EPSG:4326', 'EPSG:3857');
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) {
// Set the current layers to the provided layers array
this.layers = layers;
// Check if custom layers are defined (admin-defined basemaps)
if (layers) {
// Reset the layer count for managing Z-index
layersCount = 0;
// Loop through each layer and add it using the addConfigLayer method
layers.forEach((layer) => {
if (!layer) {
console.error('Layer is missing in the provided layers array.');
} else {
this.addConfigLayer(layer);
}
});
}
// 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;
// Handle the base map based on the schema type (WMS, WMTS, or fallback)
if (schemaType === 'wms') {
// 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 {
// Default to XYZ tile layer if the schema type is not WMS or WMTS
if (!serviceMap) {
console.error('Service URL is missing for XYZ base layer.');
} else {
const layer = new TileLayer({
source: new XYZ({
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) {
options.VERSION = options.version || '1.3.0'; // pour compatibilité avec le proxy django
const source = new TileWMS({
attributions: options.attribution,
url: url,
crossOrigin: 'anonymous',
params: options
});
const layer = new TileLayer({
source: source,
opacity: parseFloat(options.opacity),
});
this.map.addLayer(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)
removeLayers: function () {
Object.values(dictLayersToMap).forEach(element => {
this.map.removeLayer(element);
});
dictLayersToMap = {};
},
updateOpacity(layerId, opacity) {
const layer = dictLayersToMap[layerId];
if (layer) {
layer.setOpacity(parseFloat(opacity));
} else {
console.error(`Layer with id: ${layerId} couldn't be found for opacity update`);
}
},
updateOrder(layers) {
// First remove existing layers undefined
layers = layers.filter(function (x) {
return x !== undefined;
});
this.removeLayers();
// Redraw the layers
this.addLayers(layers);
},
retrieveFeatureStyle: function (featureType, properties) {
const { colors_style, customfield_set } = featureType;
let { color, opacity } = featureType;
if (colors_style && colors_style.custom_field_name && customfield_set) {
const customField = customfield_set.find((el) => el.name === colors_style.custom_field_name);
if (customField) {
const fieldType = customField.field_type;
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, project_slug, featureTypes, formFilters = {}, queryParams = {} }) {
const projectId = project_slug.split('-')[0];
const format_cfg = {/*featureClass: Feature*/ };
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 = {
urls: [],
matrixSet: 'EPSG:3857',
tileLoadFunction: customLoader,
};
options.format = mvt;
const layerSource = new VectorTileSource(options);
layerSource.setTileUrlFunction((p0) => {
return `${url}/?tile=${p0[0]}/${p0[1]}/${p0[2]}&project_id=${projectId}`;
});
const styleFunction = (feature) => this.getStyle(feature, featureTypes, formFilters);
this.mvtLayer = new VectorTileLayer({
style: styleFunction,
source: layerSource
});
this.featureTypes = featureTypes; // store featureTypes for popups
this.projectSlug = project_slug; // store projectSlug for popups
this.queryParams = queryParams; // store queryParams for popups
this.mvtLayer.setZIndex(30);
this.map.addLayer(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) {
const properties = feature.getProperties();
let featureType;
// Determine the feature type. Differentiate between GeoJSON and MVT sources.
if (properties && properties.feature_type) {
// Handle GeoJSON feature type
featureType = featureTypes
.find((ft) => ft.slug === (properties.feature_type.slug || properties.feature_type));
} else {
// Handle MVT feature type
featureType = featureTypes.find((x) => x.slug.split('-')[0] === '' + properties.feature_type_id);
}
if (featureType) {
// Retrieve the style (color, opacity) for the feature.
const { color, opacity } = this.retrieveFeatureStyle(featureType, properties);
let colorValue = '#000000'; // Default color
// Determine the color value based on the feature type.
if (color && color.value && color.value.length) {
colorValue = color.value;
} else if (typeof color === 'string' && color.length) {
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({
fill: new Fill({ color: rgbaColor }),
stroke: new Stroke({ color: colorValue, width: 2 }),
radius: 5,
}),
stroke: new Stroke({ color: colorValue, width: 2 }),
fill: new Fill({ color: rgbaColor }),
});
// Define a hidden style to apply when filters are active.
const hiddenStyle = new Style();
// 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;
}
if (formFilters.status && formFilters.status.length > 0 && !formFilters.status.includes(properties.status)) {
return hiddenStyle;
}
if (formFilters.title && !properties.title.toLowerCase().includes(formFilters.title.toLowerCase())) {
return hiddenStyle;
}
}
// 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, project_slug, queryParams = {} }) {
console.log('addToMap', addToMap);
const drawSource = new VectorSource();
let retour;
let index = 0;
features.forEach((feature) => {
try {
if (feature.properties) {
feature.properties['index'] = index;
index += 1;
}
retour = new GeoJSON().readFeature(feature, { dataProjection: 'EPSG:4326', featureProjection: 'EPSG:3857' }, featureTypes);
drawSource.addFeature(retour);
} catch (err) {
console.error(err);
}
});
const styleFunction = (feature) => this.getStyle(feature, featureTypes, filter);
const olLayer = new VectorLayer({
source: drawSource,
style: styleFunction,
});
olLayer.setZIndex(29);
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;
},
removeFeatures: function () {
this.drawSource.clear();
},
addMapEventListener: function (eventName, callback) {
this.map.on(eventName, callback);
},
createCustomFiedsContent(featureType, feature) {
const { customfield_set } = featureType;
// generate html for each customField configured to be displayed
let rows = '';
for (const { label, name } of customfield_set) {
const value = feature.getProperties()[name];
// check if the value is not null nor undefined (to allow false value if boolean)
if (featureType.displayed_fields.includes(name) && value !== null && value !== undefined) {
rows += `<div class="customField-row">${label} : ${value}</div>`;
}
}
// 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>` : '';
},
_createContentPopup: async function (feature) {
const properties = await retrieveFeatureProperties(feature, this.featureTypes, this.projectSlug);
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
const { displayed_fields } = feature_type;
// generate html for each native fields
const statusHtml = `<div>Statut : ${status}</div>`;
const featureTypeHtml = `<div>Type de signalement : ${feature_type ? '<a id="goToFeatureTypeDetail" class="pointer">' + feature_type.title + '</a>' : 'Type de signalement inconnu'}</div>`;
const updatedOnHtml = `<div>Dernière mise à jour : ${updated_on}</div>`;
const createdOnHtml = `<div>Date de création : ${created_on}</div>`;
const creatorHtml = creator ? `<div>Auteur : ${creator}</div>` : '';
const lastEditorHtml = display_last_editor ? `<div>Dernier éditeur : ${display_last_editor}</div>` : '';
// wrapping up finale html to fill popup, filtering native fields to display and adding filtered customFields
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 };
},
zoom(zoomlevel) {
this.map.getView().setZoom(zoomlevel);
},
zoomTo(location, zoomlevel, lon, lat) {
if (lon && lat) {
location = [+lon, +lat];
}
this.map.getView().setCenter(transform(location, 'EPSG:4326', 'EPSG:3857'));
this.zoom(zoomlevel);
},
animateTo(center, zoom) {
this.map.getView().animate({ center, zoom });
},
addOverlay(loc, zoom) {
const pos = fromLonLat(loc);
const marker = new Overlay({
position: pos,
positioning: 'center',
element: document.getElementById('marker'),
stopEvent: false,
});
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;
}
};
export default mapService;
\ No newline at end of file
src/services/misc-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 miscAPI = {
async getIdgoCatalog(username) {
try {
const response = await axios.get(
`${baseUrl}idgo-catalog/?user=${username}`
);
if (
response.status === 200 &&
response.data
) {
return response.data;
} else {
return null;
}
} catch (err) {
return err;
}
},
async getExternalGeojson(queryParams) {
const response = await axios.get(
`${baseUrl}external-geojson/${queryParams ? '?' + queryParams : ''}`
);
if (
response.status === 200 &&
response.data
) {
return response.data;
} else {
return null;
}
},
async getUserEvents(project_slug) {
const response = await axios.get(`${baseUrl}events/${project_slug ? '?project_slug=' + project_slug : ''}`);
if (
response.status === 200 &&
response.data
) {
return response.data;
} else {
return null;
}
},
};
export default miscAPI;
src/services/project-api.js
View file @ ee17a921
import axios from 'axios'; import axios from '@/axios-client.js';
import store from '../store'
axios.defaults.headers.common['X-CSRFToken'] = (name => {
var re = new RegExp(name + "=([^;]+)");
var value = re.exec(document.cookie);
return (value != null) ? unescape(value[1]) : null;
})('csrftoken');
const projectAPI = {
const baseUrl = store.state.configuration.VUE_APP_DJANGO_API_BASE; async getProject( baseUrl, projectSlug ) {
const response = await axios.get(
`${baseUrl}v2/projects/${projectSlug}/`
);
if (
response.status === 200 &&
response.data
) {
return response.data;
} else {
return null;
}
},
const projectAPI = { async getProjectSubscription({ baseUrl, projectSlug }) {
async getProjectSubscription({ projectSlug }) {
const response = await axios.get( const response = await axios.get(
`${baseUrl}projects/${projectSlug}/subscription/` `${baseUrl}projects/${projectSlug}/subscription/`
); );
...@@ -26,7 +30,7 @@ const projectAPI = { ...@@ -26,7 +30,7 @@ const projectAPI = {
} }
}, },
async subscribeProject({ projectSlug, suscribe }) { async subscribeProject({ baseUrl, projectSlug, suscribe }) {
const response = await axios.put( const response = await axios.put(
`${baseUrl}projects/${projectSlug}/subscription/`, `${baseUrl}projects/${projectSlug}/subscription/`,
{ is_suscriber: suscribe } { is_suscriber: suscribe }
...@@ -40,6 +44,76 @@ const projectAPI = { ...@@ -40,6 +44,76 @@ const projectAPI = {
return null; return null;
} }
}, },
}
async getProjects({ baseUrl, filters, page, projectSlug, myaccount, text }) {
let url = `${baseUrl}v2/projects/`;
if (projectSlug) {
url += `${projectSlug}/`;
}
url += `?page=${page}`;
if (myaccount) {
url += '&myaccount=true';
}
// Append search text if provided.
if (text) {
url += `&search=${encodeURIComponent(text)}`;
}
try {
if (Object.values(filters).some(el => el && el.length > 0)) {
for (const filter in filters) {
if (filters[filter]) {
url = url.concat('', `&${filter}=${filters[filter]}`);
}
}
}
const response = await axios.get(url);
if (response.status === 200 && response.data) {
return response.data;
}
} catch (error) {
console.error(error);
throw error;
}
},
async getProjectUsers( baseUrl, projectSlug) {
const response = await axios.get(
`${baseUrl}projects/${projectSlug}/utilisateurs/`
);
if (
response.status === 200 &&
response.data
) {
return response.data;
} else {
return null;
}
},
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) {
const response = await axios.delete(
`${baseUrl}v2/projects/${projectSlug}/`
);
if ( response.status === 204 ) {
return 'success';
} else {
return null;
}
},
};
export default projectAPI; export default projectAPI;
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
const axios = require("axios"); import axios from '@/axios-client.js';
import Vue from 'vue'; import Vue from 'vue';
import Vuex from 'vuex'; import Vuex from 'vuex';
import router from '../router' import router from '../router';
import feature_type from "./modules/feature_type" import modules from './modules';
import feature from "./modules/feature"
import map from "./modules/map"
axios.defaults.headers.common['X-CSRFToken'] = (name => {
var re = new RegExp(name + "=([^;]+)");
var value = re.exec(document.cookie);
return (value != null) ? unescape(value[1]) : null;
})('csrftoken');
Vue.use(Vuex); Vue.use(Vuex);
const noPermissions = {
axios.defaults.withCredentials = true; // * add cookies to axios can_view_project: true,
function updateAxiosHeader() { can_create_project: false,
axios.defaults.headers.common['X-CSRFToken'] = (name => { can_update_project: false,
var re = new RegExp(name + "=([^;]+)"); can_view_feature: true,
var value = re.exec(document.cookie); can_view_archived_feature: true,
return (value != null) ? unescape(value[1]) : null; can_create_feature: false,
})('csrftoken'); can_update_feature: false,
} can_delete_feature: false,
// ! À vérifier s'il y a un changement de token pendant l'éxécution de l'appli can_publish_feature: false,
updateAxiosHeader(); can_create_feature_type: false,
can_view_feature_type: true,
const noPermissions = { "can_view_project": true, "can_create_project": false, "can_update_project": false, "can_view_feature": true, "can_view_archived_feature": true, "can_create_feature": false, "can_update_feature": false, "can_delete_feature": false, "can_publish_feature": false, "can_create_feature_type": false, "can_view_feature_type": true, "is_project_administrator": false } is_project_administrator: false
};
export default new Vuex.Store({ export default new Vuex.Store({
modules: { modules,
feature_type,
feature,
map
},
state: { state: {
logged: false, cancellableSearchRequest: [],
user: false,
configuration: null, configuration: null,
project_slug: null, isOnline: true,
projects: [], levelsPermissions: [],
last_comments: [], loader: {
isLoading: false,
message: 'En cours de chargement'
},
logged: false,
messageCount: 0,
messages: [],
projectAttributes: [],
reloadIntervalId: null,
staticPages: null, staticPages: null,
SSO_SETTED: false, user: false,
usersGroups: [],
USER_LEVEL_PROJECTS: null, USER_LEVEL_PROJECTS: null,
user_permissions: null, user_permissions: null,
messages: [] userToken: null
}, },
mutations: { mutations: {
SET_PROJECTS(state, projects) { SET_IS_ONLINE(state, payload) {
state.projects = projects; state.isOnline = payload;
},
ADD_PROJECT(state, project) {
state.projects = [project, ...state.projects];
},
SET_PROJECT_SLUG(state, slug) {
state.project_slug = slug;
}, },
SET_USER(state, payload) { SET_USER(state, payload) {
state.user = payload; state.user = payload;
...@@ -66,17 +56,11 @@ export default new Vuex.Store({ ...@@ -66,17 +56,11 @@ 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_SSO(state, SSO_SETTED) { SET_USERS_GROUPS(state, usersGroups) {
state.SSO_SETTED = SSO_SETTED; 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;
...@@ -84,54 +68,81 @@ export default new Vuex.Store({ ...@@ -84,54 +68,81 @@ export default new Vuex.Store({
SET_LOGGED(state, value) { SET_LOGGED(state, value) {
state.logged = value; state.logged = value;
}, },
SET_PROJECT_COMMENTS(state, last_comments) { SET_USER_TOKEN(state, payload) {
state.last_comments = last_comments; state.userToken = payload;
}, },
SET_USER_PERMISSIONS(state, userPermissions) { SET_USER_PERMISSIONS(state, userPermissions) {
state.user_permissions = userPermissions; state.user_permissions = userPermissions;
}, },
DISPLAY_MESSAGE(state, comment) { SET_LEVELS_PERMISSIONS(state, levelsPermissions) {
state.messages = [{ comment }, ...state.messages]; state.levelsPermissions = levelsPermissions;
document.getElementById("messages").scrollIntoView({ block: "start", inline: "nearest" }); },
SET_PROJECT_ATTRIBUTES(state, userPermissions) {
state.projectAttributes = userPermissions;
},
DISPLAY_MESSAGE(state, message) {
message['counter'] = state.messageCount;
state.messageCount += 1;
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, messageCount) {
state.messages = state.messages.filter((mess) => mess.counter !== messageCount);
}, },
CLEAR_MESSAGES(state) { CLEAR_MESSAGES(state) {
state.messages = []; state.messages = [];
} },
DISPLAY_LOADER(state, message) {
state.loader = { isLoading: true, message };
},
DISCARD_LOADER(state) {
state.loader = {
isLoading: false,
message: 'En cours de chargement'
};
},
SET_CANCELLABLE_SEARCH_REQUEST(state, payload) {
state.cancellableSearchRequest.push(payload);
},
RESET_CANCELLABLE_SEARCH_REQUEST(state) {
state.cancellableSearchRequest = [];
},
REMOVE_LAST_CANCELLABLE_SEARCH_REQUEST(state) {
const updatedCancellableSearchRequest = state.cancellableSearchRequest.slice(0, -1);
state.cancellableSearchRequest = updatedCancellableSearchRequest;
},
SET_RELOAD_INTERVAL_ID(state, payload) {
state.reloadIntervalId = payload;
},
CLEAR_RELOAD_INTERVAL_ID(state) {
clearInterval(state.reloadIntervalId);
state.reloadIntervalId = null;
},
}, },
getters: { getters: {
project: state => state.projects.find((project) => project.slug === state.project_slug), permissions: state => state.user_permissions && state.projects.project ?
permissions: state => state.user_permissions ? state.user_permissions[state.project_slug] : noPermissions, state.user_permissions[state.projects.project.slug] : noPermissions,
project_types: state => state.projects.filter(projet => projet.is_project_type), usersGroupsOptions: state => state.usersGroups.map((group) => ({
project_user: state => state.projects.filter(projet => projet.creator === state.user.id), name: group.display_name,
value: group.codename,
isGlobal: group.is_global,
})),
usersGroupsFeatureOptions: (state, getters) => getters.usersGroupsOptions.filter((group) => !group.isGlobal)
}, },
actions: { actions: {
GET_ALL_PROJECTS({ commit }) {
function parseDate(date) {
let dateArr = date.split("/").reverse();
return new Date(dateArr[0], dateArr[1] - 1, dateArr[2]);
}
return axios
.get(`${this.state.configuration.VUE_APP_DJANGO_API_BASE}projects/`)
.then((response) => {
if (response.status === 200 && response.data) {
const orderedProjects = response.data.sort((a, b) => parseDate(b.created_on) - parseDate(a.created_on));
commit("SET_PROJECTS", orderedProjects);
}
})
.catch((error) => {
throw error;
});
},
GET_STATIC_PAGES({ commit }) { GET_STATIC_PAGES({ commit }) {
return axios return axios
.get(`${this.state.configuration.VUE_APP_DJANGO_API_BASE}flat-pages/`) .get(`${this.state.configuration.VUE_APP_DJANGO_API_BASE}flat-pages/`)
.then((response) => (commit("SET_STATIC_PAGES", response.data))) .then((response) => (commit('SET_STATIC_PAGES', response.data)))
.catch((error) => { .catch((error) => {
throw error; throw error;
}); });
...@@ -146,68 +157,192 @@ export default new Vuex.Store({ ...@@ -146,68 +157,192 @@ export default new Vuex.Store({
}) })
.then((response) => { .then((response) => {
if (response.status === 200 && response.data) { if (response.status === 200 && response.data) {
// * use stored previous route to go back after login if page not open on login at first commit('SET_USER', response.data.user);
let routerHistory = ''; dispatch('REDIRECT_AFTER_LOGIN');
if (router.options.routerHistory[0] !== undefined) { dispatch('GET_USER_LEVEL_PROJECTS');
routerHistory = router.options.routerHistory[0].name !== "login" ? router.options.routerHistory : "/"; dispatch('GET_USER_LEVEL_PERMISSIONS');
} else { return response.status;
routerHistory = "/";
}
commit("SET_USER", response.data.user);
router.push(routerHistory[routerHistory.length - 1] || "/");
dispatch("GET_USER_LEVEL_PROJECTS");
dispatch("GET_USER_LEVEL_PERMISSIONS")
return response.status
} }
}) })
.catch(() => { .catch(() => {
commit("SET_USER", false); commit('SET_USER', false);
return "error"; return 'error';
}); });
} }
}, },
USER_INFO({ state, commit }) { REDIRECT_AFTER_LOGIN() {
if (!state.user) { // * use stored previous route to go back after login if page not open on login at first
axios let routerHistory = '';
.get(`${this.state.configuration.VUE_APP_DJANGO_API_BASE}user_info/`) if (router.options.routerHistory[0] !== undefined) {
routerHistory = router.options.routerHistory[0].name !== 'login' ? router.options.routerHistory : '/';
} else {
routerHistory = '/';
}
const slug = router.history.current.params.slug;
if (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()
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.');
});
}
},
/**
* Action to retrieve user information.
* - If a token is present in the URL, it indicates a Single Sign-On (SSO) attempt,
* 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);
//window.localStorage.setItem("user", JSON.stringify(user)); // ? nécessaire ? // Fetch user related data
dispatch('GET_USER_LEVEL_PERMISSIONS');
dispatch('GET_USER_LEVEL_PROJECTS');
dispatch('projects/GET_PROJECTS');
return;
} }
}) })
.catch(() => { .catch(() => {
router.push({ name: "login" }); // If the instance is set to accept login with redirection
if (state.configuration.VUE_APP_SSO_LOGIN_URL_WITH_REDIRECT) {
commit('DISPLAY_MESSAGE', {
comment: 'Vous allez être redirigé vers la plateforme de connexion.'
});
// Call the SSO login plateform with url to redirect after login
window.open(`${state.configuration.VUE_APP_SSO_LOGIN_URL_WITH_REDIRECT}/?url_redirect=${encodeURIComponent(currentUrl)}`, '_self');
}
// 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;
}); });
} }
}, },
/**
LOGOUT({ commit, dispatch }) { * Action to connect user through SSO with a token.
// const pageNoRedirect = ["liste-signalements", "details-type-signalement", "details-signalement", "project_detail", "mentions", "aide", "index"] * 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 axios
.get(`${this.state.configuration.VUE_APP_DJANGO_API_BASE}logout/`) .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({ state, commit, dispatch }) {
return axios
.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 (!pageNoRedirect.includes(router.history.current.name)) router.push("/"); if (router.history.current.name !== 'index' &&
if (router.history.current.name !== "index") router.push("/"); !window.location.pathname.includes('projet-partage') &&
!state.configuration.VUE_APP_LOGIN_URL
) {
router.push('/');
}
} }
}) })
.catch((error) => { .catch((error) => {
throw error; console.error(error);
}); });
}, },
GET_CONFIG({ commit }) { GET_CONFIG({ commit }) {
axios axios
.get("./config/config.json") .get('./config/config.json')
.then((response) => {
if (response && response.status === 200) {
commit('SET_CONFIG', response.data);
}
})
.catch((error) => {
throw error;
});
},
GET_USERS_GROUPS({ commit }) {
return axios
.get(`${this.state.configuration.VUE_APP_DJANGO_API_BASE}users-groups/`)
.then((response) => { .then((response) => {
if (response && response.status === 200) { if (response && response.status === 200) {
commit("SET_CONFIG", response.data); commit('SET_USERS_GROUPS', response.data);
} }
}) })
.catch((error) => { .catch((error) => {
...@@ -220,7 +355,7 @@ export default new Vuex.Store({ ...@@ -220,7 +355,7 @@ export default new Vuex.Store({
.get(`${this.state.configuration.VUE_APP_DJANGO_API_BASE}user-level-projects/`) .get(`${this.state.configuration.VUE_APP_DJANGO_API_BASE}user-level-projects/`)
.then((response) => { .then((response) => {
if (response && response.status === 200) { if (response && response.status === 200) {
commit("SET_USER_LEVEL_PROJECTS", response.data); commit('SET_USER_LEVEL_PROJECTS', response.data);
} }
}) })
.catch((error) => { .catch((error) => {
...@@ -233,40 +368,45 @@ export default new Vuex.Store({ ...@@ -233,40 +368,45 @@ export default new Vuex.Store({
.get(`${this.state.configuration.VUE_APP_DJANGO_API_BASE}user-permissions/`) .get(`${this.state.configuration.VUE_APP_DJANGO_API_BASE}user-permissions/`)
.then((response) => { .then((response) => {
if (response && response.status === 200) { if (response && response.status === 200) {
commit("SET_USER_PERMISSIONS", response.data); commit('SET_USER_PERMISSIONS', response.data);
} }
}) })
.catch((error) => { .catch((error) => {
throw error; throw error;
}); });
}, },
GET_LEVELS_PERMISSIONS({ commit }) {
async GET_PROJECT_INFO({ state, commit, dispatch }, slug) { return axios
commit("SET_PROJECT_SLUG", slug); .get(`${this.state.configuration.VUE_APP_DJANGO_API_BASE}v2/levels-permissions/`)
let promises = [ .then((response) => {
dispatch("GET_PROJECT_LAST_MESSAGES", slug).then(response => response), if (response && response.status === 200) {
dispatch("feature_type/GET_PROJECT_FEATURE_TYPES", slug).then(response => response), commit('SET_LEVELS_PERMISSIONS', response.data);
dispatch("feature/GET_PROJECT_FEATURES", slug).then(response => response), }
] })
if (state.user) promises.push(dispatch("map/GET_BASEMAPS", slug).then(response => response)) .catch((error) => {
throw error;
const promiseResult = await Promise.all(promises) });
return promiseResult;
}, },
GET_PROJECT_ATTRIBUTES({ commit }) {
GET_PROJECT_LAST_MESSAGES({ commit }, project_slug) {
return axios return axios
.get(`${this.state.configuration.VUE_APP_DJANGO_API_BASE}projects/${project_slug}/comments/`) .get(`${this.state.configuration.VUE_APP_DJANGO_API_BASE}project-attributes/`)
.then((response) => { .then((response) => {
if (response && response.status === 200) { if (response && response.status === 200) {
commit("SET_PROJECT_COMMENTS", response.data.last_comments); commit('SET_PROJECT_ATTRIBUTES', response.data);
} }
return response;
}) })
.catch((error) => { .catch((error) => {
throw 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 0 → 100644
View file @ ee17a921
import axios from '@/axios-client.js';
import Vue from 'vue';
const getColorsStyles = (customForms) => customForms
.filter(customForm => customForm.options && customForm.options.length)
.map(el => {
//* in dropdown, value is the name and name is the label to be displayed, could be changed...
return { value: el.name, name: el.label, options: el.options };
});
const pending2draftFeatures = (features) => {
for (const el of features) {
if (el.properties && el.properties.status === 'pending') {
el.properties.status = 'draft';
} else if (el.status === 'pending') {
el.status = 'draft';
}
}
return features;
};
const feature_type = {
namespaced: true,
state: {
form: null,
colorsStyleList: [],
customForms: [],
current_feature_type_slug: null,
feature_types: [],
fileToImport: null,
importFeatureTypeData: [],
preRecordedLists: [],
selectedPrerecordedListValues: {}
},
getters: {
feature_type: state => state.feature_types.find(
(el) => el.slug === state.current_feature_type_slug
),
},
mutations: {
SET_FEATURE_TYPES(state, feature_types) {
state.feature_types = feature_types;
},
SET_CURRENT_FEATURE_TYPE_SLUG(state, payload) {
//* reset import status of features for a specific feature_type when changing
state.importFeatureTypeData = null;
state.current_feature_type_slug = payload;
},
UPDATE_FORM(state, payload) {
state.form = payload;
},
EMPTY_FORM(state) {
state.form = null;
},
SET_CUSTOM_FORMS(state, customForms) {
state.customForms = customForms;
state.colorsStyleList = getColorsStyles(state.customForms);
},
ADD_CUSTOM_FORM(state, customForm) {
state.customForms = [...state.customForms, customForm];
state.colorsStyleList = getColorsStyles(state.customForms);
},
UPDATE_CUSTOM_FORM(state, payload) {
const index = state.customForms.findIndex((el) => el.dataKey === payload.dataKey);
if (index !== -1) {
state.customForms[index] = payload;
//* trigger update of available options for colors style in feature_type_edit (getters not working)
state.colorsStyleList = getColorsStyles(state.customForms);
}
},
REMOVE_CUSTOM_FORM(state, payload) {
state.customForms = state.customForms.filter(form => form.dataKey !== payload);
state.colorsStyleList = getColorsStyles(state.customForms);
},
EMPTY_CUSTOM_FORMS(state) {
state.customForms = [];
state.colorsStyleList = [];
},
SET_IMPORT_FEATURE_TYPES_DATA(state, payload) {
state.importFeatureTypeData = payload;
},
SET_FILE_TO_IMPORT(state, 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: {
GET_PROJECT_FEATURE_TYPES({ commit }, project_slug) {
return axios
.get(`${this.state.configuration.VUE_APP_DJANGO_API_BASE}v2/feature-types/?project__slug=${project_slug}`)
.then((response) => {
if (response.status === 200 && response.data) {
commit('SET_FEATURE_TYPES', response.data);
return response;
}
})
.catch((error) => {
throw error;
});
},
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) {
const data = {
title: state.form.title.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,
color: state.form.color.value,
colors_style: state.form.colors_style.value,
project: rootState.projects.project.slug,
customfield_set: state.customForms
};
let url = `${this.state.configuration.VUE_APP_DJANGO_API_BASE}v2/feature-types/`;
if (requestType === 'put') url += `${getters.feature_type.slug}/`;
return axios({
url,
method: requestType,
data,
}).then((response) => {
if (response) {
const feature_type_slug = response.data.slug;
const status = response.status;
return { feature_type_slug, status };
}
})
.catch((error) => error.response);
},
async SEND_FEATURE_DISPLAY_CONFIG({ getters, rootState }, displayConfig) {
const data = {
title: getters.feature_type.title,
project: rootState.projects.project.slug,
...displayConfig
};
return axios
.put(`${this.state.configuration.VUE_APP_DJANGO_API_BASE}v2/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_FEATURES_FROM_GEOJSON({ state, dispatch, rootState }, payload) {
let { feature_type_slug, geojson } = payload;
//* check if geojson then build a file
if(!geojson && !state.fileToImport && state.fileToImport.size === 0 ) {
return;
}
const formData = new FormData();
let { name, type } = geojson || state.fileToImport;
if (!name && state.fileToImport) {
name = state.fileToImport.name;
}
if (rootState.projects.project.moderation) {
if (state.fileToImport && state.fileToImport.size > 0) { //* if data in a binary file, read it as text
const textFile = await state.fileToImport.text();
geojson = JSON.parse(textFile);
}
const unmoderatedFeatures = pending2draftFeatures(geojson.features || geojson);
geojson = geojson.features ? {
type: 'FeatureCollection', features: unmoderatedFeatures
} : unmoderatedFeatures;
}
const fileToImport = new File([JSON.stringify(geojson)], name, { type });
formData.append('json_file', geojson ? fileToImport : state.fileToImport);
formData.append('feature_type_slug', feature_type_slug);
const url =
this.state.configuration.VUE_APP_DJANGO_API_BASE +
'v2/import-tasks/';
return axios
.post(url, formData, {
headers: {
'Content-Type': 'multipart/form-data',
},
})
.then((response) => {
if (response && response.status === 200) {
return dispatch('GET_IMPORTS', {
feature_type: feature_type_slug
});
}
return response;
})
.catch((error) => {
throw (error);
});
},
async SEND_FEATURES_FROM_CSV({ state, dispatch }, payload) {
const { feature_type_slug, csv } = payload;
if (!csv && !state.fileToImport && state.fileToImport.size === 0 ) {
return;
}
const formData = new FormData();
formData.append('csv_file', state.fileToImport);
formData.append('feature_type_slug', feature_type_slug);
const url = `${this.state.configuration.VUE_APP_DJANGO_API_BASE}v2/import-tasks/`;
return axios
.post(url, formData, {
headers: {
'Content-Type': 'multipart/form-data',
},
})
.then((response) => {
if (response && response.status === 200) {
return dispatch('GET_IMPORTS', {
feature_type: feature_type_slug
});
}
return response;
})
.catch((error) => {
throw (error);
});
},
GET_IMPORTS({ state, commit, dispatch }, { project_slug, feature_type }) {
let url = `${this.state.configuration.VUE_APP_DJANGO_API_BASE}v2/import-tasks/`;
if (project_slug) {
url = url.concat('', `${url.includes('?') ? '&' : '?'}project_slug=${project_slug}`);
}
if (feature_type) {
url = url.concat('', `${url.includes('?') ? '&' : '?'}feature_type_slug=${feature_type}`);
}
return axios
.get(url)
.then((response) => {
if (response) {
const diffStatus = [];
if (state.importFeatureTypeData) {
for (const data of response.data) {
const index =
state.importFeatureTypeData
.findIndex(el => el.geojson_file_name === data.geojson_file_name);
if (index !== -1 && state.importFeatureTypeData[index].status !== data.status && data.status === 'finished') {
diffStatus.push(data);
}
}
}
if (diffStatus.length > 0 && project_slug && feature_type) {
try {
dispatch(
'feature/GET_PROJECT_FEATURES',
{
project_slug: project_slug,
feature_type__slug: feature_type,
},
{ root: true }
);
} catch (err) {
console.error(err);
}
}
commit('SET_IMPORT_FEATURE_TYPES_DATA', response.data);
}
return response;
})
.catch((error) => {
throw (error);
});
}
}
};
export default feature_type;
src/store/modules/feature.js deleted 100644 → 0
View file @ f22e1632
const axios = require("axios");
import router from '../../router'
axios.defaults.headers.common['X-CSRFToken'] = (name => {
var re = new RegExp(name + "=([^;]+)");
var value = re.exec(document.cookie);
return (value != null) ? unescape(value[1]) : null;
})('csrftoken');
const feature = {
namespaced: true,
state: {
attachmentFormset: [],
linkedFormset: [],
features: [],
form: null,
extra_form: [],
linked_features: [],
},
mutations: {
SET_FEATURES(state, features) {
state.features = features;
},
UPDATE_FORM(state, payload) {
state.form = payload;
},
UPDATE_EXTRA_FORM(state, extra_form) {
const index = state.extra_form.findIndex(el => el.label === extra_form.label);
if (index !== -1) {
state.extra_form[index] = extra_form;
}
},
SET_EXTRA_FORM(state, extra_form) {
state.extra_form = extra_form;
},
ADD_ATTACHMENT_FORM(state, attachmentFormset) {
state.attachmentFormset = [...state.attachmentFormset, attachmentFormset];
},
UPDATE_ATTACHMENT_FORM(state, payload) {
const index = state.attachmentFormset.findIndex((el) => el.dataKey === payload.dataKey);
if (index !== -1) state.attachmentFormset[index] = payload
},
REMOVE_ATTACHMENT_FORM(state, payload) {
state.attachmentFormset = state.attachmentFormset.filter(form => form.dataKey !== payload);
},
CLEAR_ATTACHMENT_FORM(state) {
state.attachmentFormset = [];
},
ADD_LINKED_FORM(state, linkedFormset) {
state.linkedFormset = [...state.linkedFormset, linkedFormset];
},
UPDATE_LINKED_FORM(state, payload) {
const index = state.linkedFormset.findIndex((el) => el.dataKey === payload.dataKey);
if (index !== -1) state.linkedFormset[index] = payload
},
REMOVE_LINKED_FORM(state, payload) {
state.linkedFormset = state.linkedFormset.filter(form => form.dataKey !== payload);
},
SET_LINKED_FEATURES(state, payload) {
state.linked_features = payload;
},
CLEAR_LINKED_FORM(state) {
state.linkedFormset = [];
},
},
getters: {
},
actions: {
GET_PROJECT_FEATURES({ commit, rootState }, project_slug) {
return axios
.get(`${rootState.configuration.VUE_APP_DJANGO_API_BASE}projects/${project_slug}/feature/`)
.then((response) => {
if (response.status === 200 && response.data) {
const features = response.data.features;
commit("SET_FEATURES", features);
//dispatch("map/ADD_FEATURES", null, { root: true }); //todo: should check if map was initiated
}
return response;
})
.catch((error) => {
throw error;
});
},
SEND_FEATURE({ state, rootState, dispatch }, routeName) {
const message = routeName === "editer-signalement" ? "Le signalement a été mis à jour" : "Le signalement a été crée";
function redirect(featureId) {
router.push({
name: "details-signalement",
params: {
slug_type_signal: rootState.feature_type.current_feature_type_slug,
slug_signal: featureId,
message,
},
});
}
async function handleOtherForms(featureId) {
await dispatch("SEND_ATTACHMENTS", featureId)
await dispatch("PUT_LINKED_FEATURES", featureId)
redirect(featureId);
}
let extraFormObject = {}; //* prepare an object to be flatten in properties of geojson
for (const field of state.extra_form) {
extraFormObject[field.name] = field.value;
}
const geojson = {
"id": state.form.feature_id,
"type": "Feature",
"geometry": state.form.geometry,
"properties": {
"title": state.form.title,
"description": state.form.description.value,
"status": state.form.status.value,
"project": rootState.project_slug,
"feature_type": rootState.feature_type.current_feature_type_slug,
...extraFormObject
}
}
if (routeName === "editer-signalement") {
axios
.put(`${rootState.configuration.VUE_APP_DJANGO_API_BASE}features/${state.form.feature_id}/`, geojson)
.then((response) => {
if (response.status === 200 && response.data) {
if (state.attachmentFormset.length > 0 || state.linkedFormset.length > 0) {
handleOtherForms(response.data.id)
} else {
redirect(response.data.id)
}
}
})
.catch((error) => {
throw error;
});
} else {
axios
.post(`${rootState.configuration.VUE_APP_DJANGO_API_BASE}features/`, geojson)
.then((response) => {
if (response.status === 201 && response.data) {
if (state.attachmentFormset.length > 0 || state.linkedFormset.length > 0) {
handleOtherForms(response.data.id)
} else {
redirect(response.data.id)
}
}
})
.catch((error) => {
throw error;
});
}
},
SEND_ATTACHMENTS({ state, rootState }, featureId) {
for (let attacht of state.attachmentFormset) {
if (attacht.fileToImport) { //* if no new file imported abort, until beeing able to do PUT
let formdata = new FormData();
formdata.append("file", attacht.fileToImport, attacht.fileToImport.name);
const data = {
title: attacht.title,
info: attacht.info,
}
formdata.append("data", JSON.stringify(data));
axios
.post(`${rootState.configuration.VUE_APP_DJANGO_API_BASE}features/${featureId}/attachments/`, formdata)
.then((response) => {
if (response.status === 200 && response.data) {
console.log(response, response.data)
return "La pièce jointe a bien été ajouté"
}
})
.catch((error) => {
throw error;
});
}
}
},
PUT_LINKED_FEATURES({ state, rootState }, featureId) {
return axios
.put(`${rootState.configuration.VUE_APP_DJANGO_API_BASE}features/${featureId}/feature-links/`, state.linkedFormset)
.then((response) => {
if (response.status === 200 && response.data) {
console.log(response, response.data)
return "La relation a bien été ajouté"
}
})
.catch((error) => {
throw error;
});
},
DELETE_FEATURE({ state, rootState }, feature_id) {
console.log("Deleting feature:", feature_id, state)
const url = `${rootState.configuration.VUE_APP_DJANGO_API_BASE}features/${feature_id}`;
return axios
.delete(url)
.then((response) => response)
.catch(() => {
return false;
});
},
},
}
export default feature
src/store/modules/feature.store.js 0 → 100644
View file @ ee17a921
import axios from '@/axios-client.js';
import router from '../../router';
import { objIsEmpty, findXformValue, activateFieldsNforceValues } from'@/utils';
const feature = {
namespaced: true,
state: {
attachmentFormset: [],
attachmentsToDelete: [],
checkedFeatures: [],
clickedFeatures: [],
extra_forms: [],
features: [],
features_count: 0,
currentFeature: null,
form: null,
linkedFormset: [], //* used to edit in feature_edit
linked_features: [], //* used to display in feature_detail
massMode: 'edit-status',
},
mutations: {
SET_FEATURES(state, features) {
state.features = features.sort((a, b) => {
return new Date(b.created_on) - new Date(a.created_on); // sort features chronologically
});
},
SET_FEATURES_COUNT(state, features_count) {
state.features_count = features_count;
},
SET_CURRENT_FEATURE(state, feature) {
state.currentFeature = feature;
},
UPDATE_FORM(state, payload) {
state.form = payload;
},
INIT_FORM(state) {
state.form = {
title: state.currentFeature.properties.title,
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;
}
},
UPDATE_EXTRA_FORM(state, 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) {
state.extra_forms = [];
},
ADD_ATTACHMENT_FORM(state, attachmentFormset) {
state.attachmentFormset = [...state.attachmentFormset, attachmentFormset];
},
UPDATE_ATTACHMENT_FORM(state, payload) {
const index = state.attachmentFormset.findIndex((el) => el.dataKey === payload.dataKey);
if (index !== -1) {
state.attachmentFormset[index] = payload;
}
},
REMOVE_ATTACHMENT_FORM(state, payload) {
state.attachmentFormset = state.attachmentFormset.filter(form => form.dataKey !== payload);
},
CLEAR_ATTACHMENT_FORM(state) {
state.attachmentFormset = [];
},
ADD_LINKED_FORM(state, linkedFormset) {
state.linkedFormset = [...state.linkedFormset, linkedFormset];
},
UPDATE_LINKED_FORM(state, payload) {
const index = state.linkedFormset.findIndex((el) => el.dataKey === payload.dataKey);
if (index !== -1) {
state.linkedFormset[index] = payload;
}
},
REMOVE_LINKED_FORM(state, payload) {
state.linkedFormset = state.linkedFormset.filter(form => form.dataKey !== payload);
},
SET_LINKED_FEATURES(state, payload) {
state.linked_features = payload;
},
CLEAR_LINKED_FORM(state) {
state.linkedFormset = [];
},
ADD_ATTACHMENT_TO_DELETE(state, attachementId) {
state.attachmentsToDelete.push(attachementId);
},
REMOVE_ATTACHMENTS_ID_TO_DELETE(state, attachementId) {
state.attachmentsToDelete = state.attachmentsToDelete.filter(el => el !== attachementId);
},
UPDATE_CHECKED_FEATURES(state, checkedFeatures) {
state.checkedFeatures = checkedFeatures;
},
UPDATE_CLICKED_FEATURES(state, clickedFeatures) {
state.clickedFeatures = clickedFeatures;
},
TOGGLE_MASS_MODE(state, payload) {
state.massMode = payload;
},
},
actions: {
async GET_PROJECT_FEATURES({ commit, dispatch, rootState }, {
project_slug,
feature_type__slug,
ordering,
search,
limit,
geojson = false
}) {
dispatch('CANCEL_CURRENT_SEARCH_REQUEST', null, { root: true });
const cancelToken = axios.CancelToken.source();
commit('SET_CANCELLABLE_SEARCH_REQUEST', cancelToken, { root: true });
commit('SET_FEATURES', []);
commit('SET_FEATURES_COUNT', 0);
let url = `${rootState.configuration.VUE_APP_DJANGO_API_BASE}v2/features/?project__slug=${project_slug}`;
if (feature_type__slug) {
url = url.concat('', `${url.includes('?') ? '&' : '?'}feature_type__slug=${feature_type__slug}`);
}
if (ordering) {
url = url.concat('', `${url.includes('?') ? '&' : '?'}ordering=${ordering}`);
}
if (search) {
url = url.concat('', `${url.includes('?') ? '&' : '?'}title__icontains=${search}`);
}
if (limit) {
url = url.concat('', `${url.includes('?') ? '&' : '?'}limit=${limit}`);
}
if (geojson) {
url = url.concat('', '&output=geojson');
}
try {
const response = await axios.get(url, { cancelToken: cancelToken.token });
if (response.status === 200 && response.data) {
const features = response.data.features;
commit('SET_FEATURES', features);
const features_count = response.data.count;
commit('SET_FEATURES_COUNT', features_count);
}
return response;
} catch (error) {
if (error.message) {
console.error(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, dispatch, rootState }, { project_slug, feature_id }) {
dispatch('CANCEL_CURRENT_SEARCH_REQUEST', null, { root: true });
const cancelToken = axios.CancelToken.source();
commit('SET_CANCELLABLE_SEARCH_REQUEST', cancelToken, { root: true });
const url = `${rootState.configuration.VUE_APP_DJANGO_API_BASE}v2/features/${feature_id}/?project__slug=${project_slug}`;
return axios
.get(url, { cancelToken: cancelToken.token })
.then((response) => {
if (response.status === 200 && response.data) {
commit('SET_CURRENT_FEATURE', response.data);
}
return response;
})
.catch((error) => {
console.error('Error while getting feature for id = ', feature_id, error);
throw error;
});
},
/**
* Handles the entire lifecycle of a feature submission, from sending data to handling additional forms
* and managing redirections based on the operation performed (create or update).
* @param {Object} context - Vuex action context, including state and dispatch functions.
* @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',
{
comment: routeName === 'ajouter-signalement' ?
'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;
}
}
if (query && query.ordering === '-updated_on') { // if the list is ordered by update time
newQuery.offset = 0;// it would be in first position (else, if ordered by creation, the position won't change anyway)
}
// in fast edition avoid redundant navigation if query didn't change
if (routeName === 'details-signalement-filtre' && parseInt(query.offset) === parseInt(newQuery.offset)) {
return 'reloadPage';
}
// Perform the actual route navigation if needed.
if (!objIsEmpty(newQuery)) {
router.push({
name: 'details-signalement-filtre',
params: { slug_type_signal },
query: newQuery,
});
} else {
router.push({
name: 'details-signalement',
params: { slug_type_signal },
});
}
return response;
}
/**
* 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('PUT_LINKED_FEATURES', 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
const extraFormObject = {}; //* prepare an object to be flatten in properties of geojson
// use extraForms from argument if defined, overiding data from the store, in order to not use mutation (in case of multiple features)
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;
}
}
let geojson = {
id: state.form.feature_id || state.currentFeature.id,
type: 'Feature',
properties: {
title: state.form.title,
description: state.form.description.value,
status: state.form.status.value.value || state.form.status.value,
project: rootState.projects.project.slug,
feature_type: rootState['feature-type'].current_feature_type_slug,
assigned_member: state.form.assigned_member.value,
...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(); // Construct the GeoJSON from current state.
let url = `${rootState.configuration.VUE_APP_DJANGO_API_BASE}v2/features/`;
if (routeName !== 'ajouter-signalement') {
url += `${geojson.id}/?
feature_type__slug=${rootState['feature-type'].current_feature_type_slug}
&project__slug=${rootState.projects.project.slug}`;
}
//* postOrPutFeature function from service featureAPI could be used here, but because configuration is in store,
//* projectBase would need to be sent with each function which imply to modify all function from this service,
//* which could create regression
return axios({
url,
method: routeName === 'ajouter-signalement' ? 'POST' : 'PUT',
data: geojson
}).then((response) => {
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 ||
state.linkedFormset.length > 0 ||
state.attachmentsToDelete.length > 0) {
return handleOtherForms(featureId, featureName, response);
} else {
return redirect(featureName, response);
}
}
}).catch((error) => {
// If offline, store the edited feature in localeStorage to send them when back online
if (error.message === 'Network Error' || !rootState.isOnline) {
let arraysOffline = [];
const localStorageArray = localStorage.getItem('geocontrib_offline');
if (localStorageArray) {
arraysOffline = JSON.parse(localStorageArray);
}
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) {
const DJANGO_API_BASE = rootState.configuration.VUE_APP_DJANGO_API_BASE;
/**
* 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();
formdata.append('file', attachment.fileToImport, attachment.fileToImport.name);
return axios
.put(`${DJANGO_API_BASE}features/${featureId}/attachments/${attchmtId}/upload-file/`, formdata)
.then((response) => {
return response;
})
.catch((error) => {
console.error(error);
return error;
});
}
/**
* 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) {
const formdata = new FormData();
formdata.append('title', attachment.title);
formdata.append('info', attachment.info);
formdata.append('is_key_document', attachment.is_key_document);
let url = `${DJANGO_API_BASE}features/${featureId}/attachments/`;
if (attachment.id) {
url += `${attachment.id}/`;
}
return axios({
url,
method: attachment.id ? 'PUT' : 'POST',
data: formdata
}).then((response) => {
if (response && (response.status === 200 || response.status === 201) && attachment.fileToImport) {
return addFileToRequest(attachment, response.data.id);
}
return response;
}).catch((error) => {
console.error(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) {
const payload = {
attachmentsId: attachmentsId,
featureId: featureId
};
return dispatch('DELETE_ATTACHMENTS', payload)
.then((response) => response);
}
const promisesResult = await Promise.all([
...state.attachmentFormset.map((attachment) => putOrPostAttachement(attachment)),
...state.attachmentsToDelete.map((attachmentsId) => deleteAttachement(attachmentsId, featureId))
]);
state.attachmentsToDelete = [];
return promisesResult;
},
DELETE_ATTACHMENTS({ commit }, payload) {
const url = `${this.state.configuration.VUE_APP_DJANGO_API_BASE}features/${payload.featureId}/attachments/${payload.attachmentsId}/`;
return axios
.delete(url)
.then((response) => {
if (response && response.status === 204) {
commit('REMOVE_ATTACHMENTS_ID_TO_DELETE', payload.attachmentsId);
return response;
}
})
.catch((error) => {
console.error(error);
return error;
});
},
PUT_LINKED_FEATURES({ state, rootState }, featureId) {
return axios
.put(`${rootState.configuration.VUE_APP_DJANGO_API_BASE}features/${featureId}/feature-links/`, state.linkedFormset)
.then((response) => {
if (response.status === 200 && response.data) {
return 'La relation a bien été ajouté';
}
})
.catch((error) => {
throw error;
});
},
DELETE_FEATURE({ rootState }, payload) {
const { feature_id, noFeatureType } = payload;
let url = `${rootState.configuration.VUE_APP_DJANGO_API_BASE}v2/features/${feature_id}/?` +
`project__slug=${rootState.projects.project.slug}`;
if (!noFeatureType) {
url +=`&feature_type__slug=${rootState['feature-type'].current_feature_type_slug}`;
}
return axios
.delete(url)
.then((response) => response)
.catch(() => {
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;
src/store/modules/feature_type.js deleted 100644 → 0
View file @ f22e1632
import axios from "axios"
axios.defaults.headers.common['X-CSRFToken'] = (name => {
var re = new RegExp(name + "=([^;]+)");
var value = re.exec(document.cookie);
return (value != null) ? unescape(value[1]) : null;
})('csrftoken');
const feature_type = {
namespaced: true,
state: {
form: null,
colorsStyleList: [],
customForms: [],
current_feature_type_slug: null,
feature_types: [],
fileToImport: null,
importFeatureTypeData: [],
},
mutations: {
SET_FEATURE_TYPES(state, feature_types) {
state.feature_types = feature_types;
},
SET_CURRENT_FEATURE_TYPE_SLUG(state, payload) {
//* reset import status of features for a specific feature_type when changing
state.importFeatureTypeData = null;
state.current_feature_type_slug = payload;
},
UPDATE_FORM(state, payload) {
state.form = payload;
},
EMPTY_FORM(state) {
state.form = null;
},
SET_CUSTOM_FORMS(state, customForms) {
state.customForms = customForms;
},
ADD_CUSTOM_FORM(state, customForm) {
state.customForms = [...state.customForms, customForm];
},
UPDATE_CUSTOM_FORM(state, payload) {
const index = state.customForms.findIndex((el) => el.dataKey === payload.dataKey);
if (index !== -1) {
state.customForms[index] = payload;
//* trigger update of available options for colors style in feature_type_edit
state.colorsStyleList = state.customForms.filter(cust => cust.options && cust.options.length).map(el => {
//* in dropdown, value is the name and name is the label to be displayed, could be changed...
return { value: el.name, name: el.label, options: el.options }
})
}
},
REMOVE_CUSTOM_FORM(state, payload) {
state.customForms = state.customForms.filter(form => form.dataKey !== payload);
},
EMPTY_CUSTOM_FORMS(state) {
state.customForms = [];
},
SET_IMPORT_FEATURE_TYPES_DATA(state, payload) {
state.importFeatureTypeData = payload;
},
SET_FILE_TO_IMPORT(state, payload) {
state.fileToImport = payload;
},
},
getters: {
feature_type: state => state.feature_types.find(
(el) => el.slug === state.current_feature_type_slug
),
},
actions: {
GET_PROJECT_FEATURE_TYPES({ commit }, project_slug) {
return axios
.get(`${this.state.configuration.VUE_APP_DJANGO_API_BASE}projects/${project_slug}/feature-types/`)
.then((response) => {
if (response.status === 200 && response.data) {
commit("SET_FEATURE_TYPES", response.data.feature_types)
return response;
}
})
.catch((error) => {
throw error;
});
},
async SEND_FEATURE_TYPE({ state, getters, rootGetters }, requestType) {
const data = {
'title': state.form.title.value,
'title_optional': state.form.title_optional.value,
'geom_type': state.form.geom_type.value,
'color': state.form.color.value,
'colors_style': state.form.colors_style.value,
'project': rootGetters.project.slug,
'customfield_set': state.customForms.map(el => {
return {
'position': el.position,
'label': el.label,
'name': el.name,
'field_type': el.field_type,
'options': el.options,
}
}),
//'is_editable': true,
}
if (requestType === "post") {
return axios
.post(`${this.state.configuration.VUE_APP_DJANGO_API_BASE}feature-types/`, 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);
});
} else if (requestType === "put") {
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);
});
}
},
SEND_FEATURES_FROM_GEOJSON({ state, dispatch }, payload) {
const { feature_type_slug } = payload
if (state.fileToImport.size > 0) {
let formData = new FormData();
formData.append("json_file", state.fileToImport);
formData.append("feature_type_slug", feature_type_slug);
let url =
this.state.configuration.VUE_APP_DJANGO_API_BASE +
'import-tasks/'
return axios
.post(url, formData, {
headers: {
"Content-Type": "multipart/form-data",
},
})
.then((response) => {
if (response && response.status === 200) {
dispatch("GET_IMPORTS", feature_type_slug);
}
return response
})
.catch((error) => {
throw (error);
});
}
},
GET_IMPORTS({ commit }, feature_type) {
let url =
this.state.configuration.VUE_APP_DJANGO_API_BASE +
"import-tasks?feature_type_slug=" +
feature_type;
axios
.get(url)
.then((response) => {
if (response) {
commit("SET_IMPORT_FEATURE_TYPES_DATA", response.data);
}
})
.catch((error) => {
throw (error);
});
}
}
}
export default feature_type
\ No newline at end of file
src/store/modules/index.js 0 → 100644
View file @ ee17a921
/**
* Automatically imports all the modules and exports as a single module object
**/
const requireModule = require.context('.', false, /\.store\.js$/);
const modules = {};
requireModule.keys().forEach(filename => {
// create the module name from fileName
// remove the store.js extension
const moduleName = filename.replace(/(\.\/|\.store\.js)/g, '');
modules[moduleName] = requireModule(filename).default || requireModule(filename);
});
export default modules;
\ No newline at end of file
src/store/modules/map.js → src/store/modules/map.store.js
View file @ ee17a921
const axios = require("axios"); import axios from '@/axios-client.js';
import { mapUtil } from "@/assets/js/map-util.js"; import mapService from '@/services/map-service';
axios.defaults.headers.common['X-CSRFToken'] = (name => {
var re = new RegExp(name + "=([^;]+)");
var value = re.exec(document.cookie);
return (value != null) ? unescape(value[1]) : null;
})('csrftoken');
const map = { const map = {
namespaced: true, namespaced: true,
state: { state: {
map: null,
basemaps: null, basemaps: null,
basemapsToDelete: [], basemapsToDelete: [],
features: [], features: [],
geojsonFeatures: null, geojsonFeatures: null,
layers: null, availableLayers: null,
}, },
mutations: { mutations: {
SET_LAYERS(state, layers) { SET_MAP(state, payload) {
state.layers = layers; state.map = payload;
},
SET_LAYERS(state, availableLayers) {
state.availableLayers = availableLayers;
}, },
SET_GEOJSON_FEATURES(state, geojsonFeatures) { SET_GEOJSON_FEATURES(state, geojsonFeatures) {
state.geojsonFeatures = geojsonFeatures; state.geojsonFeatures = geojsonFeatures;
...@@ -28,7 +26,7 @@ const map = { ...@@ -28,7 +26,7 @@ const map = {
state.basemaps = basemaps; state.basemaps = basemaps;
}, },
CREATE_BASEMAP(state, id) { CREATE_BASEMAP(state, id) {
state.basemaps = [...state.basemaps, { id, title: '', layers: [], errors: [] }] state.basemaps = [...state.basemaps, { id, title: '', layers: [], errors: [] }];
}, },
UPDATE_BASEMAPS(state, basemaps) { UPDATE_BASEMAPS(state, basemaps) {
state.basemaps = basemaps; state.basemaps = basemaps;
...@@ -36,14 +34,10 @@ const map = { ...@@ -36,14 +34,10 @@ const map = {
UPDATE_BASEMAP(state, { title, id, layers, errors }) { UPDATE_BASEMAP(state, { title, id, layers, errors }) {
const index = state.basemaps.findIndex((el) => el.id === id); const index = state.basemaps.findIndex((el) => el.id === id);
if (index !== -1) { if (index !== -1) {
if (title) { state.basemaps[index].title = title;
state.basemaps[index].title = title state.basemaps[index].errors = errors;
}
if (layers) { if (layers) {
state.basemaps[index].layers = layers state.basemaps[index].layers = layers;
}
if (errors) {
state.basemaps[index].errors = errors
} }
} }
}, },
...@@ -87,10 +81,10 @@ const map = { ...@@ -87,10 +81,10 @@ const map = {
}, },
actions: { actions: {
GET_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;
}); });
...@@ -98,115 +92,91 @@ const map = { ...@@ -98,115 +92,91 @@ 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);
} }
return response return response;
}) })
.catch((error) => { .catch((error) => {
throw error; throw error;
}); });
}, },
INITIATE_MAP({ state, rootGetters }) { INITIATE_MAP({ commit, rootState }, options) {
const project = rootGetters.project var mapDefaultViewCenter =
let mapDefaultViewCenter = [46, 2]; // defaultMapView.center; this.state.configuration.DEFAULT_MAP_VIEW.center;
let mapDefaultViewZoom = 5; // defaultMapView.zoom; var mapDefaultViewZoom =
mapUtil.createMap({ this.state.configuration.DEFAULT_MAP_VIEW.zoom;
mapDefaultViewCenter, mapService.createMap(options.el, {
mapDefaultViewZoom, 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() };
// Load the layers. commit('SET_MAP', map);
// - if one basemap exists, check in the localstorage if one active basemap is set
// - if no current active basemap, get the first index
// - if not, load the default map and service options
// todo : create endpoints to get : 'baseMaps' ,'layers' ,'serviceMap' ,'optionsMap'
let layersToLoad = null;
if (state.baseMaps && state.baseMaps.length > 0) {
// Use active one if exists, otherwise index 0 (first basemap in the list)
const mapOptions =
JSON.parse(localStorage.getItem("geocontrib-map-options")) || {};
const basemapIndex =
mapOptions &&
mapOptions[project] &&
mapOptions[project]["current-basemap-index"]
? mapOptions[project]["current-basemap-index"]
: 0;
layersToLoad = state.baseMaps[basemapIndex].layers;
layersToLoad.forEach((layerToLoad) => {
state.layers.forEach((layer) => {
if (layer.id === layerToLoad.id) {
layerToLoad = Object.assign(layerToLoad, layer);
}
});
});
layersToLoad.reverse();
}
mapUtil.addLayers(layersToLoad, this.state.configuration.DEFAULT_BASE_MAP.SERVICE, this.state.configuration.DEFAULT_BASE_MAP.OPTIONS);
// Remove multiple interactions with the map
//mapUtil.getMap().dragging.disable();
mapUtil.getMap().doubleClickZoom.disable();
mapUtil.getMap().scrollWheelZoom.disable();
}, },
async SAVE_BASEMAPS({ state, rootState, dispatch }, newBasemapIds) { async SAVE_BASEMAPS({ state, rootState, dispatch }, newBasemapIds) {
const DJANGO_API_BASE = this.state.configuration.VUE_APP_DJANGO_API_BASE; //* send new basemaps synchronously to create their ids in the order they were created in the form
function postOrPut(basemap) { let promisesResult = [];
basemap["project"] = rootState.project_slug
if (newBasemapIds.includes(basemap.id)) { function postOrPut(basemapsToSend) {
return axios if (basemapsToSend.length > 0) { //* execute the function recursively as long as there is still a basemap to send
.post(`${DJANGO_API_BASE}base-maps/`, basemap) let basemap = basemapsToSend.shift(); //* remove and return first item in array
.then((response) => response) basemap['project'] = rootState.projects.project.slug;
let url = `${rootState.configuration.VUE_APP_DJANGO_API_BASE}v2/base-maps/`;
if (!newBasemapIds.includes(basemap.id)) url += `${basemap.id}/`;
axios({
url,
method: newBasemapIds.includes(basemap.id) ? 'POST' : 'PUT',
data: basemap,
})
.then((response) => {
postOrPut(basemapsToSend);
promisesResult.push(response);
})
.catch((error) => { .catch((error) => {
console.error(error); postOrPut(basemapsToSend);
return error promisesResult.push(error);
});
} else {
return axios
.put(`${DJANGO_API_BASE}base-maps/${basemap.id}/`, basemap)
.then((response) => response)
.catch((error) => {
console.error(error);
return error
}); });
} }
} }
function deleteBMap(basemapId) { function deleteBMap(basemapId) {
//* delete in the backend the basemaps that was rewoved from the front //* delete in the backend the basemaps that was rewoved from the front
return dispatch("DELETE_BASEMAP", basemapId) return dispatch('DELETE_BASEMAP', basemapId)
.then((response) => response); .then((response) => response);
} }
//* save new or modifed basemap
const promisesResult = await Promise.all( postOrPut([...state.basemaps]);
[...state.basemaps.map((basemap) => postOrPut(basemap)), ...state.basemapsToDelete.map((basemapId) => deleteBMap(basemapId))] //* delete basemaps
const deletedResult = await Promise.all(state.basemapsToDelete.map((basemapId) => deleteBMap(basemapId)));
); state.basemapsToDelete = [];
state.basemapsToDelete = [] //* return promises results
return promisesResult return [...promisesResult, ...deletedResult];
}, },
DELETE_BASEMAP({ commit }, basemapId) { DELETE_BASEMAP({ commit, rootState }, basemapId) {
let 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) => {
if (response && response.status === 204) { if (response && response.status === 204) {
commit("REMOVE_BASEMAP_ID_TO_DELETE", basemapId) commit('REMOVE_BASEMAP_ID_TO_DELETE', basemapId);
return response return response;
} }
}) })
.catch((error) => { .catch((error) => {
console.error(error); console.error(error);
return error return error;
}); });
} }
}, },
} };
export default map export default map;
\ No newline at end of file
src/store/modules/modals.store.js 0 → 100644
View file @ ee17a921
const modals = {
namespaced: true,
state: {
isProjectModalOpen: false,
projectModalType: null
},
mutations: {
OPEN_PROJECT_MODAL(state, payload) {
state.isProjectModalOpen = true;
state.projectModalType = payload;
},
CLOSE_PROJECT_MODAL(state) {
state.isProjectModalOpen = false;
state.projectModalType = null;
}
},
actions: {
}
};
export default modals;
src/store/modules/projects.store.js 0 → 100644
View file @ ee17a921
import axios from '@/axios-client.js';
import projectAPI from '@/services/project-api';
const initialFilters = {
moderation: null,
access_level: null,
user_access_level: 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 = {
namespaced: true,
state: {
count: 0,
currentPage: 1,
filters: { ...initialFilters },
isProjectsListSearched: null,
last_comments: [],
projects: [],
project: null,
projectUsers: [],
searchProjectsFilter: null,
},
mutations: {
SET_CURRENT_PAGE (state, payload) {
state.currentPage = payload;
},
SET_PROJECTS(state, projects) {
if (projects.results) {
state.projects = projects.results;
state.count = projects.count;
} else {
state.projects = projects;
state.count = projects.length;
}
},
ADD_PROJECT(state, project) {
state.projects = [project, ...state.projects];
},
SET_PROJECT(state, project) {
state.project = project;
},
SET_PROJECT_USERS(state, users) {
state.projectUsers = users;
},
SET_PROJECTS_FILTER(state, payload) {
state.filters[payload.filter] = payload.value;
},
SET_PROJECTS_SEARCH_STATE(state, payload) {
state.isProjectsListSearched = payload.isSearched;
state.searchProjectsFilter = payload.text;
},
SET_PROJECT_COMMENTS(state, last_comments) {
state.last_comments = last_comments;
},
},
actions: {
async GET_PROJECTS({ state, rootState, commit }, payload) {
let { page, myaccount, projectSlug } = payload || {};
if (!page) {
page = state.currentPage;
}
const baseUrl = rootState.configuration.VUE_APP_DJANGO_API_BASE;
const projects = await projectAPI.getProjects({
baseUrl,
filters : state.filters,
page,
projectSlug,
myaccount,
text: state.searchProjectsFilter
});
commit('SET_PROJECTS', projects);
return;
},
async SEARCH_PROJECTS({ commit, dispatch }, text) {
if (text) {
await dispatch('HANDLE_PROJECTS_SEARCH_REQUEST', text);
} else {
commit('SET_PROJECTS_SEARCH_STATE', {
isSearched: false,
text: null
});
await dispatch('GET_PROJECTS');
}
},
async GET_PROJECT({ rootState, commit }, slug) { // todo : use GET_PROJECTS instead, with slug
const baseUrl = rootState.configuration.VUE_APP_DJANGO_API_BASE;
const project = await projectAPI.getProject(baseUrl, slug);
commit('SET_PROJECT', project);
return project;
},
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 = [
dispatch('GET_PROJECT_LAST_MESSAGES', slug).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)
];
const promiseResult = await Promise.all(promises);
return promiseResult;
},
GET_PROJECT_LAST_MESSAGES({ commit }, project_slug) {
return axios
.get(`${this.state.configuration.VUE_APP_DJANGO_API_BASE}projects/${project_slug}/comments/`)
.then((response) => {
if (response && response.status === 200) {
commit('SET_PROJECT_COMMENTS', response.data.last_comments);
}
return response;
})
.catch((error) => {
throw error;
});
},
/**
* 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) {
const currentRequestCancelToken =
rootState.cancellableSearchRequest[rootState.cancellableSearchRequest.length - 1];
currentRequestCancelToken.cancel();
}
// Prepare the cancel token for the new request and store it.
const cancelToken = axios.CancelToken.source();
commit('SET_CANCELLABLE_SEARCH_REQUEST', cancelToken, { root: true });
// Construct the search URL with any applied filters.
const searchUrl = constructSearchUrl({
baseUrl: rootState.configuration.VUE_APP_DJANGO_API_BASE,
filters: state.filters,
text,
page
});
try {
// Perform the search request.
const response = await axios.get(searchUrl, { cancelToken: cancelToken.token });
// Process successful response.
if (response.status === 200 && response.data) {
commit('SET_PROJECTS', response.data);
commit('SET_PROJECTS_SEARCH_STATE', {
isSearched: true,
text: text
});
}
} catch (error) {
// Handle potential errors, such as request cancellation.
console.error('Search request canceled or failed', error);
}
}
}
};
export default projectsStore;