src/store/modules/feature.store.js

 import axios from '@/axios-client.js';
 import router from '../../router';
-
+import { objIsEmpty, findXformValue, activateFieldsNforceValues } from'@/utils';
 
 const feature = {
   namespaced: true,
@@ -8,31 +8,15 @@ const feature = {
     attachmentFormset: [],
     attachmentsToDelete: [],
     checkedFeatures: [],
-    extra_form: [],
+    clickedFeatures: [],
+    extra_forms: [],
     features: [],
     features_count: 0,
-    current_feature: [],
+    currentFeature: null,
     form: null,
-    linkedFormset: [],
-    linked_features: [],
-    statusChoices: [
-      {
-        name: 'Brouillon',
-        value: 'draft',
-      },
-      {
-        name: 'En attente de publication',
-        value: 'pending',
-      },
-      {
-        name: 'Publié',
-        value: 'published',
-      },
-      {
-        name: 'Archivé',
-        value: 'archived',
-      },
-    ],
+    linkedFormset: [], //* used to edit in feature_edit
+    linked_features: [], //* used to display in feature_detail
+    massMode: 'edit-status',
   },
   mutations: {
     SET_FEATURES(state, features) {
@@ -44,29 +28,44 @@ const feature = {
       state.features_count = features_count;
     },
     SET_CURRENT_FEATURE(state, feature) {
-      state.current_feature = feature;
+      state.currentFeature = feature;
     },
     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;
+    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;
       }
     },
-    SET_EXTRA_FORM(state, extra_form) {
-      state.extra_form = extra_form;
+    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_form = [];
+      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;
+      if (index !== -1) {
+        state.attachmentFormset[index] = payload;
+      }
     },
     REMOVE_ATTACHMENT_FORM(state, payload) {
       state.attachmentFormset = state.attachmentFormset.filter(form => form.dataKey !== payload);
@@ -79,7 +78,9 @@ const feature = {
     },
     UPDATE_LINKED_FORM(state, payload) {
       const index = state.linkedFormset.findIndex((el) => el.dataKey === payload.dataKey);
-      if (index !== -1) state.linkedFormset[index] = payload;
+      if (index !== -1) {
+        state.linkedFormset[index] = payload;
+      }
     },
     REMOVE_LINKED_FORM(state, payload) {
       state.linkedFormset = state.linkedFormset.filter(form => form.dataKey !== payload);
@@ -100,30 +101,30 @@ const feature = {
     },
     UPDATE_CHECKED_FEATURES(state, checkedFeatures) {
       state.checkedFeatures = checkedFeatures;
-    }
-  },
-  getters: {
+    },
+    UPDATE_CLICKED_FEATURES(state, clickedFeatures) {
+      state.clickedFeatures = clickedFeatures;
+    },
+    TOGGLE_MASS_MODE(state, payload) {
+      state.massMode = payload;
+    },
   },
+
   actions: {
-    async GET_PROJECT_FEATURES({ commit, rootState }, {
+    async GET_PROJECT_FEATURES({ commit, dispatch, rootState }, {
       project_slug,
       feature_type__slug,
       ordering,
       search,
       limit,
-      geojson = false 
-    }) {
-      if (rootState.cancellableSearchRequest.length > 0) {
-        const currentRequestCancelToken =
-          rootState.cancellableSearchRequest[rootState.cancellableSearchRequest.length - 1];
-        currentRequestCancelToken.cancel();
-      }
-
+      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}projects/${project_slug}/feature/`;
+      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}`);
       }
@@ -136,7 +137,9 @@ const feature = {
       if (limit) {
         url = url.concat('', `${url.includes('?') ? '&' : '?'}limit=${limit}`);
       }
-      if (geojson) url = url.concat('', '&output=geojson');
+      if (geojson) {
+        url = url.concat('', '&output=geojson');
+      }
 
       try {
         const response = await axios.get(url, { cancelToken: cancelToken.token });
@@ -148,144 +151,213 @@ const feature = {
         }
         return response;
       } catch (error) {
-        console.error(error);
-        return 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, rootState }, { project_slug, feature_id }) {
-      if (rootState.cancellableSearchRequest.length > 0) {
-        const currentRequestCancelToken =
-          rootState.cancellableSearchRequest[rootState.cancellableSearchRequest.length - 1];
-        currentRequestCancelToken.cancel();
-      }
-
+    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 });
-      commit('SET_CURRENT_FEATURE', null);
-      let url = `${rootState.configuration.VUE_APP_DJANGO_API_BASE}projects/${project_slug}/feature/?id=${feature_id}`;
+      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.features) {
-            const feature = response.data.features[0];
-            commit('SET_CURRENT_FEATURE', feature);
+          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;
         });
     },
 
-    SEND_FEATURE({ state, rootState, commit, dispatch }, routeName) {
-      commit('DISPLAY_LOADER', 'Le signalement est en cours de création', { root: true });
-      function redirect(featureId) {
-        dispatch(
-          'GET_PROJECT_FEATURE',
+    /**
+     * 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',
           {
-            project_slug: rootState.projects.project.slug,
-            feature_id: featureId
+            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;
           }
-        )
-          .then(() => {
-            commit('DISCARD_LOADER', null, { root: true });
-            router.push({
-              name: 'details-signalement',
-              params: {
-                slug_type_signal: rootState.feature_type.current_feature_type_slug,
-                slug_signal: featureId,
-                message: routeName === 'editer-signalement' ? 'Le signalement a été mis à jour' : 'Le signalement a été crée'
-              },
-            });
-            dispatch('projects/GET_ALL_PROJECTS', null, { root:true }); //* & refresh project list
+        }
+        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;
       }
 
-      async function handleOtherForms(featureId) {
+      /**
+       * Manages the uploading of attachments and linked features after the main feature submission.
+       * @param {number} featureId - The ID of the feature to which attachments and linked features relate.
+       * @param {string} featureName - The name of the feature for messaging purposes.
+       * @param {Object} response - The server response from the main feature submission.
+       * @return {Object} - Redirect response or a string to trigger page reload.
+       */
+      async function handleOtherForms(featureId, featureName, response) {
         await dispatch('SEND_ATTACHMENTS', featureId);
         await dispatch('PUT_LINKED_FEATURES', featureId);
-        redirect(featureId);
+        return redirect(featureName, response);
       }
 
+      /**
+       * Prepares a GeoJSON object from the current state and extra forms provided in the payload.
+       * @return {Object} - A GeoJSON object representing the feature with additional properties.
+       */
       function createGeojson() { //* prepare feature data to send
-        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 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;
+          }
         }
-        return {
-          id: state.form.feature_id,
+        let geojson = {
+          id: state.form.feature_id || state.currentFeature.id,
           type: 'Feature',
-          geometry: state.form.geometry,
           properties: {
             title: state.form.title,
             description: state.form.description.value,
-            status: state.form.status.value,
+            status: state.form.status.value.value || state.form.status.value,
             project: rootState.projects.project.slug,
-            feature_type: rootState.feature_type.current_feature_type_slug,
+            feature_type: rootState['feature-type'].current_feature_type_slug,
+            assigned_member: state.form.assigned_member.value,
             ...extraFormObject
           }
         };
+        // 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();
-      let url = `${rootState.configuration.VUE_APP_DJANGO_API_BASE}features/`;
-      if (routeName === 'editer-signalement') {
-        url += `${state.form.feature_id}/?
-        feature_type__slug=${rootState.feature_type.current_feature_type_slug} 
+      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 === 'editer-signalement' ? 'PUT' : 'POST',
+        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) {
-            handleOtherForms(response.data.id);
+              state.linkedFormset.length > 0 ||
+              state.attachmentsToDelete.length > 0) {
+            return handleOtherForms(featureId, featureName, response);
           } else {
-            redirect(response.data.id);
+            return redirect(featureName, response);
           }
         }
-      })
-        .catch((error) => {
-          commit('DISCARD_LOADER', null, { root: true });
-          if (error.message === 'Network Error' || window.navigator.onLine === false) {
-            let arraysOffline = [];
-            let localStorageArray = localStorage.getItem('geocontrib_offline');
-            if (localStorageArray) {
-              arraysOffline = JSON.parse(localStorageArray);
-            }
-            let updateMsg = {
-              project: rootState.projects.project.slug,
-              type: routeName === 'editer-signalement' ? 'put' : 'post',
-              featureId: state.form.feature_id,
-              geojson: geojson
-            };
-            arraysOffline.push(updateMsg);
-            localStorage.setItem('geocontrib_offline', JSON.stringify(arraysOffline));
-            router.push({
-              name: 'offline-signalement',
-              params: {
-                slug_type_signal: rootState.feature_type.current_feature_type_slug
-              },
-            });
-          }
-          else {
-            console.error(error);
-            throw error;
+      }).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);
           }
-          throw error;
-        });
+          const updateMsg = {
+            project: rootState.projects.project.slug,
+            type: routeName === 'ajouter-signalement' ? 'post' : 'put',
+            featureId: geojson.id,
+            geojson: geojson
+          };
+          arraysOffline.push(updateMsg);
+          localStorage.setItem('geocontrib_offline', JSON.stringify(arraysOffline));
+          router.push({
+            name: 'offline-signalement',
+            params: {
+              slug_type_signal: rootState['feature-type'].current_feature_type_slug
+            },
+          });
+        } else {
+          console.error('Error while sending feature', error);
+          throw error; // Re-throw the error for further handling.
+        }
+        throw error; // Ensure any error is thrown to be handled by calling code.
+      });
     },
 
     async SEND_ATTACHMENTS({ state, rootState, dispatch }, featureId) {
       const DJANGO_API_BASE = rootState.configuration.VUE_APP_DJANGO_API_BASE;
-      
-      function addFile(attachment, attchmtId) {
-        let formdata = new FormData();
+
+      /**
+       * 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)
@@ -298,10 +370,16 @@ const feature = {
           });
       }
 
+      /**
+       * Handles creating or updating an attachment, optionally uploading a file if included.
+       * @param {Object} attachment - The attachment data, including title, info, and optional file.
+       * @return {Promise<Object>} - The server response, either from creating/updating the attachment or from file upload.
+       */
       function putOrPostAttachement(attachment) {
-        let formdata = new FormData();
+        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) {
@@ -314,18 +392,23 @@ const feature = {
           data: formdata
         }).then((response) => {
           if (response && (response.status === 200 || response.status === 201) && attachment.fileToImport) {
-            return addFile(attachment, response.data.id);
+            return addFileToRequest(attachment, response.data.id);
           }
           return response;
-        })
-          .catch((error) => {
-            console.error(error);
-            return error;
-          });
+        }).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) {
-        let payload = {
+        const payload = {
           attachmentsId: attachmentsId,
           featureId: featureId
         };
@@ -336,15 +419,13 @@ const feature = {
       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) {
-      let url = `${this.state.configuration.VUE_APP_DJANGO_API_BASE}features/${payload.featureId}/attachments/${payload.attachmentsId}/`;
+      const url = `${this.state.configuration.VUE_APP_DJANGO_API_BASE}features/${payload.featureId}/attachments/${payload.attachmentsId}/`;
       return axios
         .delete(url)
         .then((response) => {
@@ -372,10 +453,13 @@ const feature = {
         });
     },
 
-    DELETE_FEATURE({ rootState }, feature_id) {
-      const url = `${rootState.configuration.VUE_APP_DJANGO_API_BASE}features/${feature_id}/?` +
-        `feature_type__slug=${rootState.feature_type.current_feature_type_slug}` +
-        `&project__slug=${rootState.projects.project.slug}`;
+    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)
@@ -383,8 +467,36 @@ const feature = {
           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/map.store.js

 import axios from '@/axios-client.js';
-import { mapUtil } from '@/assets/js/map-util.js';
+import mapService from '@/services/map-service';
 
 
 const map = {
@@ -83,7 +83,7 @@ const map = {
   actions: {
     GET_AVAILABLE_LAYERS({ commit }) {
       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)))
         .catch((error) => {
           throw error;
@@ -92,7 +92,7 @@ const map = {
 
     GET_BASEMAPS({ commit }, project_slug) {
       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) => {
           if (response.status === 200 && response.data) {
             commit('SET_BASEMAPS', response.data);
@@ -104,48 +104,46 @@ const map = {
         });
     },
 
-    INITIATE_MAP({ commit }, el) { //todo: since this function is not anymore called in different components, it would better to move it in project_details.vue
-      let mapDefaultViewCenter = [46, 2]; // defaultMapView.center;
-      let mapDefaultViewZoom = 5; // defaultMapView.zoom;
-      mapUtil.createMap(el, {
-        mapDefaultViewCenter,
-        mapDefaultViewZoom,
+    INITIATE_MAP({ commit, rootState }, options) {
+      var mapDefaultViewCenter =
+        this.state.configuration.DEFAULT_MAP_VIEW.center;
+      var mapDefaultViewZoom =
+        this.state.configuration.DEFAULT_MAP_VIEW.zoom;
+      mapService.createMap(options.el, {
+        mapDefaultViewZoom: options.zoom || mapDefaultViewZoom || 5,
+        mapDefaultViewCenter: options.center || mapDefaultViewCenter || [46.0, 2.0],
+        maxZoom: options.maxZoom || rootState.projects.project.map_max_zoom_level,
+        controls: options.controls,
+        zoomControl: options.zoomControl,
+        interactions : { doubleClickZoom :false, mouseWheelZoom:true, dragPan:true , ...options.interactions },
+        geolocationControl: true,
       });
-      commit('SET_MAP', mapUtil.getMap());
-
-      mapUtil.addLayers(
-        null,
-        this.state.configuration.DEFAULT_BASE_MAP_SERVICE,
-        this.state.configuration.DEFAULT_BASE_MAP_OPTIONS,
-        this.state.configuration.DEFAULT_BASE_MAP_SCHEMA_TYPE,
-      );
-
-      // Remove multiple interactions with the map
-      //mapUtil.getMap().dragging.disable();
-      mapUtil.getMap().doubleClickZoom.disable();
-      mapUtil.getMap().scrollWheelZoom.disable();
-
+      const map = { ...mapService.getMap() };
+      commit('SET_MAP', map);
     },
 
     async SAVE_BASEMAPS({ state, rootState, dispatch }, newBasemapIds) {
-      const DJANGO_API_BASE = this.state.configuration.VUE_APP_DJANGO_API_BASE;
-      function postOrPut(basemap) {
-        basemap['project'] = rootState.projects.project.slug;
-        if (newBasemapIds.includes(basemap.id)) {
-          return axios
-            .post(`${DJANGO_API_BASE}base-maps/`, basemap)
-            .then((response) => response)
-            .catch((error) => {
-              console.error(error);
-              return error;
-            });
-        } else {
-          return axios
-            .put(`${DJANGO_API_BASE}base-maps/${basemap.id}/`, basemap)
-            .then((response) => response)
+      //* send new basemaps synchronously to create their ids in the order they were created in the form
+      let promisesResult = [];
+
+      function postOrPut(basemapsToSend) {
+        if (basemapsToSend.length > 0) { //* execute the function recursively as long as there is still a basemap to send
+          let basemap = basemapsToSend.shift(); //* remove and return first item in array
+          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) => {
-              console.error(error);
-              return error;
+              postOrPut(basemapsToSend);
+              promisesResult.push(error);
             });
         }
       }
@@ -155,19 +153,17 @@ const map = {
         return dispatch('DELETE_BASEMAP', basemapId)
           .then((response) => response);
       }
-
-      const promisesResult = await Promise.all(
-        [
-          ...state.basemaps.map((basemap) => postOrPut(basemap)),
-          ...state.basemapsToDelete.map((basemapId) => deleteBMap(basemapId))
-        ]
-      );
+      //* save new or modifed basemap
+      postOrPut([...state.basemaps]);
+      //* delete basemaps
+      const deletedResult = await Promise.all(state.basemapsToDelete.map((basemapId) => deleteBMap(basemapId)));
       state.basemapsToDelete = [];
-      return promisesResult;
+      //* return promises results
+      return [...promisesResult, ...deletedResult];
     },
 
-    DELETE_BASEMAP({ commit }, basemapId) {
-      let url = `${this.state.configuration.VUE_APP_DJANGO_API_BASE}base-maps/` + basemapId;
+    DELETE_BASEMAP({ commit, rootState }, basemapId) {
+      const url = `${rootState.configuration.VUE_APP_DJANGO_API_BASE}v2/base-maps/${basemapId}/`;
       return axios
         .delete(url)
         .then((response) => {
@@ -183,4 +179,4 @@ const map = {
     }
   },
 };
-export default map;
\ No newline at end of file
+export default map;

src/store/modules/projects.store.js

 import axios from '@/axios-client.js';
 import projectAPI from '@/services/project-api';
 
-const projects = {
+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: {
-      moderation: null,
-      access_level: null,
-      user_access_level: null,
-      accessible: null
-    },
+    filters: { ...initialFilters },
     isProjectsListSearched: null,
     last_comments: [],
     projects: [],
     project: null,
-    project_slug: null,
+    projectUsers: [],
     searchProjectsFilter: null,
   },
 
-  getters: {
-    project_types: state => state.projects.filter(projet => projet.is_project_type),
-    project_user: state => state.projects.filter(projet => projet.creator === state.user.id),
-  },
-
   mutations: {
     SET_CURRENT_PAGE (state, payload) {
       state.currentPage = payload;
@@ -50,6 +76,10 @@ const projects = {
       state.project = project;
     },
 
+    SET_PROJECT_USERS(state, users) {
+      state.projectUsers = users;
+    },
+
     SET_PROJECTS_FILTER(state, payload) {
       state.filters[payload.filter] = payload.value;
     },
@@ -65,26 +95,22 @@ const projects = {
   },
 
   actions: {
-    async GET_ALL_PROJECTS({ rootState, commit }) {
-      try {
-        const response = await axios
-          .get(`${rootState.configuration.VUE_APP_DJANGO_API_BASE}projects/`);
-        if (response.status === 200 && response.data) {
-          commit('SET_PROJECTS', response.data);
-        }
-      } catch (error) {
-        console.error(error);
-        throw error;
-      }
-    },
-
-    async GET_PROJECTS({ state, rootState, commit }, page) {
+    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, state.filters, page);
+      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) {
@@ -99,19 +125,26 @@ const projects = {
       }
     },
 
-    async GET_PROJECT({ rootState, commit }, slug) {
+    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_INFO({ rootState, dispatch }, slug) {
-      let promises = [
+    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)
       ];
-      if (rootState.user) promises.push(dispatch('map/GET_BASEMAPS', slug, { root: true }).then(response => response));
 
       const promiseResult = await Promise.all(promises);
       return promiseResult;
@@ -131,47 +164,52 @@ const projects = {
         });
     },
 
-    async HANDLE_PROJECTS_SEARCH_REQUEST({ state, rootState, commit }, text) {
-
+    /**
+     * Asynchronously handles the search request for projects, incorporating search text and applied filters.
+     * Cancels any ongoing search request to ensure that only the latest request is processed,
+     * which enhances the responsiveness of search functionality.
+     *
+     * @param {Object} context - Destructured to gain access to Vuex state, rootState, and commit function.
+     * @param {String} text - The search text used for filtering projects.
+     */
+    async HANDLE_PROJECTS_SEARCH_REQUEST({ state, rootState, commit }, { page, text }) {
+      // Cancel any ongoing search request.
       if (rootState.cancellableSearchRequest.length > 0) {
         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 });
-  
-      const url = `${rootState.configuration.VUE_APP_DJANGO_API_BASE}projects/?search=${text}`;
-      let filteredUrl;
-      if (Object.values(state.filters).some(el => el && el.length > 0)) {
-        filteredUrl = url;
-        for (const filter in state.filters) {
-          if (state.filters[filter]) {
-            filteredUrl = filteredUrl.concat('', `&${filter}=${state.filters[filter]}`);
-          }
-        }
-      }
-  
-      const response = await axios.get(
-        filteredUrl ? filteredUrl : url,
-        {
-          cancelToken: cancelToken.token,
-        }
-      );
-      if (response.status === 200) {
-        const projects = response.data;
-        if (projects) {
-          commit('SET_PROJECTS', projects);
+
+      // 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 projects;
+export default projectsStore;

src/utils/index.js

-export function parseDate(date) {
-  let dateArr = date.split('/').reverse();
-  return new Date(dateArr[0], dateArr[1] - 1, dateArr[2]);
+import featureAPI from '@/services/feature-api';
+import { isEqual, isNil } from 'lodash';
+
+export function formatStringDate(stringDate) {
+  const date = new Date(stringDate);
+  if (date instanceof Date && !isNaN(date.valueOf())) {
+    const formatted_date = date.getFullYear() + '/' + ('0' + (date.getMonth() + 1)).slice(-2) + '/' + ('0' + date.getDate()).slice(-2) + ' ' +
+    ('0' + date.getHours()).slice(-2) + ':' + ('0' + date.getMinutes()).slice(-2);
+    return formatted_date;
+  }
+  return stringDate;
 }
 
-export function allowedStatus2change(statusChoices, isModerate, userStatus, isOwnFeature, currentRouteName) {
-  if ( //* si admin, modérateur ou super contributeur, statuts toujours disponibles: Brouillon, Publié, Archivé
-    userStatus === 'Modérateur' ||
+export const statusChoices = [
+  {
+    name: 'Brouillon',
+    value: 'draft',
+  },
+  {
+    name: 'En attente de publication',
+    value: 'pending',
+  },
+  {
+    name: 'Publié',
+    value: 'published',
+  },
+  {
+    name: 'Archivé',
+    value: 'archived',
+  },
+];
+
+export function allowedStatus2change(user, isModerate, userStatus, isOwnFeature, currentRouteName) {
+  if ( //* si 'super-admin'(superuser) admin, modérateur ou super contributeur, statuts toujours disponibles: Brouillon, Publié, Archivé
+    user.is_superuser ||
+      userStatus === 'Modérateur' ||
       userStatus === 'Administrateur projet' ||
       (userStatus === 'Super Contributeur' && !isModerate)
   ) {
@@ -17,6 +45,7 @@ export function allowedStatus2change(statusChoices, isModerate, userStatus, isOw
   } else if (userStatus === 'Contributeur') { //* cas particuliers du contributeur
     if (currentRouteName === 'ajouter-signalement' || !isOwnFeature) {
       //* même cas à l'ajout d'une feature ou si feature n'a pas été créé par le contributeur
+      //? Incohérence / Inutile ? Un contributeur ne peut pas modifier un signalement d'un autre utilisateur
       return isModerate
         ? statusChoices.filter(
           (el) => el.value === 'draft' || el.value === 'pending'
@@ -36,4 +65,230 @@ export function allowedStatus2change(statusChoices, isModerate, userStatus, isOw
     }
   }
   return [];
+}
+
+/**
+ * Determines the type of a property based on its value.
+ *
+ * This function inspects a given property and returns a string indicating its type,
+ * such as 'boolean', 'integer', 'decimal', 'date', 'text', or 'char'.
+ * It uses various checks to determine the appropriate type for different value formats.
+ *
+ * @param {any} prop - The property value to be evaluated.
+ * @returns {string} The determined type of the property ('boolean', 'integer', 'decimal', 'date', 'text', or 'char').
+ */
+export function transformProperties(prop) {
+  const type = typeof prop;
+  const regInteger = /^-?\d+$/;  // Regular expression to match integer numbers
+  const regFloat = /^-?\d*\.\d+$/;  // Regular expression to match decimal numbers
+  const regText = /[\r\n]/;  // Regular expression to detect multiline text (newlines)
+  const regDate = /^\d{4}-\d{2}-\d{2}$|^\d{2}\/\d{2}\/\d{4}$/; // Regular expression to match common date formats
+
+  // Check if the property is a boolean or a string that represents a boolean
+  if (type === 'boolean' || (type === 'string' && (prop.toLowerCase() === 'true' || prop.toLowerCase() === 'false'))) {
+    return 'boolean';
+  } else if (regInteger.test(prop) || (type === 'number' && Number.isSafeInteger(prop))) {
+    // Check if the property is an integer or a string that represents an integer
+    return 'integer';
+  } else if (type === 'string' && regDate.test(prop.trim())) {
+    // More specific check for date strings using regular expressions
+    return 'date';
+  } else if (regFloat.test(prop) || (type === 'number' && !Number.isSafeInteger(prop))) {
+    // Check if the property is a decimal number or a string that represents a decimal
+    return 'decimal';
+  } else if (regText.test(prop) || (type === 'string' && prop.length > 255)) {
+    // Check if the property contains newline characters or is a long text
+    return 'text';
+  }
+
+  // Default case for all other types: assume it is a short text or character field
+  return 'char';
+}
+
+
+export function objIsEmpty(obj) {
+  for(const prop in obj) {
+    if(Object.hasOwn(obj, prop)) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+export const reservedKeywords = [
+  // todo : add keywords for mapstyle (strokewidth...)
+  'id',
+  'title',
+  'description',
+  'status',
+  'created_on',
+  'updated_on',
+  'archived_on',
+  'deletion_on',
+  'feature_type',
+  'feature_id',
+  'display_creator',
+  'display_last_editor',
+  'project',
+  'creator',
+  'lat',
+  'lon'
+];
+
+export const customFieldTypeChoices = [
+  { name: 'Booléen', value: 'boolean' },
+  { name: 'Chaîne de caractères', value: 'char' },
+  { name: 'Date', value: 'date' },
+  { name: 'Liste de valeurs', value: 'list' },
+  { name: 'Liste de valeurs pré-enregistrées', value: 'pre_recorded_list' },
+  { name: 'Liste à choix multiples', value: 'multi_choices_list' },
+  { name: 'Nombre entier', value: 'integer' },
+  { name: 'Nombre décimal', value: 'decimal' },
+  { name: 'Texte multiligne', value: 'text' },
+  { name: 'Notification à un groupe', value: 'notif_group' },
+];
+
+export const featureNativeFields = [
+  { name: 'status', label: 'Statut', field_type: 'Champ GéoContrib' },
+  { name: 'feature_type', label: 'Type', field_type: 'Champ GéoContrib' },
+  { name: 'updated_on', label: 'Dernière mise à jour', field_type: 'Champ GéoContrib' },
+  { name: 'created_on', label: 'Date de création', field_type: 'Champ GéoContrib' },
+  { name: 'display_creator', label: 'Auteur', field_type: 'Champ GéoContrib' },
+  { name: 'display_last_editor', label: 'Dernier éditeur', field_type: 'Champ GéoContrib' },
+];
+
+export const formatDate = (current_datetime) => {
+  let formatted_date = current_datetime.getFullYear() + '-' + ('0' + (current_datetime.getMonth() + 1)).slice(-2) + '-' + ('0' + current_datetime.getDate()).slice(-2) + ' ' +
+    ('0' + current_datetime.getHours()).slice(-2) + ':' + ('0' + current_datetime.getMinutes()).slice(-2);
+  return formatted_date;
+};
+
+export const retrieveFeatureProperties = async (feature, featureTypes, projectSlug) => {
+  const properties = feature.getProperties();
+  let { feature_type, status, updated_on, created_on, creator, display_last_editor, index } = properties;
+  
+  if (creator) { 
+    creator = creator.full_name ? `${creator.first_name} ${creator.last_name}` : creator.username;
+  } else if (properties.feature_id) {
+    //* if *** MVT *** feature, retrieve display_creator and display_last_editor by fetching the feature details from API
+    const fetchedFeature = await featureAPI.getProjectFeature(projectSlug, properties.feature_id);
+    if (fetchedFeature) {
+      creator = fetchedFeature.properties.display_creator;
+      display_last_editor = fetchedFeature.properties.display_last_editor;
+      feature_type = fetchedFeature.properties.feature_type;
+    }
+  }
+  
+  if (featureTypes && feature_type) {
+    feature_type = featureTypes.find((el) => el.slug === (feature_type.slug || feature_type));
+  }
+  
+  if (updated_on && !isNaN(new Date(updated_on))) { //* check if date is already formatted
+    updated_on = formatDate(new Date(updated_on));
+  }
+  if (created_on && !isNaN(new Date(created_on))) { //* check if date is already formatted
+    created_on = formatDate(new Date(created_on));
+  }
+  
+  if (status) {
+    if (status.label) { //* when the label is already in the feature
+      status = status.label;
+    } else if (featureTypes) { //* if not, retrieve the name/label from the list
+      status = statusChoices.find((el) => el.value === status).name;
+    }
+  }
+
+  return { feature_type, status, updated_on, created_on, creator, display_last_editor, index };
+};
+
+export function findXformValue(feature, customField) {
+  if (!feature) return null;
+  if (feature.properties) {
+    return feature.properties[customField.name] || null;
+  } else if (feature.feature_data) {
+    const field = feature.feature_data.find((el) => el.label === customField.label);
+    return field ? field.value : null;
+  }
+  return null;
+}
+
+export function isXtraFormActive(extraForms, config) { // return true if no config or if the condition is fullfilled
+  if (config) { // if conditional field configuration is not null
+    // get name and value in condition
+    const { conditionField, conditionValue } = config;
+    // get the customForm which activates conditional field
+    const conditioningXForm = extraForms.find((xForm) => xForm.name === conditionField);
+    // check if the conditioning extraform value match the condition value
+    if (conditioningXForm) {
+      // if the values to compare are null or undefined the field can't be activated
+      if (isNil(conditioningXForm.value) || isNil(conditionValue)) {
+        return false;
+      } else if (Array.isArray(conditionValue) && Array.isArray(conditioningXForm.value)) { // case of multiple list or prerecorded values list
+        return conditioningXForm.value.some((value) => conditionValue.includes(value));
+      } else if (typeof conditioningXForm.value === 'object' && conditioningXForm.value.label) { // case of simple list
+        return conditioningXForm.value.label === conditionValue.label;
+      } else {
+        return conditioningXForm.value === conditionValue; // more simple case of other fields
+      } 
+    }
+  }
+  return true;
+}
+
+export function checkDeactivatedValues(extraForms) {
+  // if changes occured, update extraForms array with freshly checked active customForms
+  let newExtraForms = extraForms.map((xForm) => { // we use 'deactivate' instead of 'activate' because at initialization this property cannot be evaluated ...
+    const isDeactivated = !isXtraFormActive(extraForms, xForm.conditional_field_config);  // ... if the component is not created to set this property, thus no extra form would appear at all
+    // toggle value to null to deactivate other fields conditioned by it
+    if (isDeactivated) {
+      xForm['value'] = null;
+    }
+    return { ...xForm, ['isDeactivated']: isDeactivated };
+  });
+  return newExtraForms;
+}
+
+export function checkFieldForcedValue(field, extraForms) {
+  field['disabled'] = false; //* create a property disabled and (re)set to false by default
+  if (field.forced_value_config) {
+    //* loop over each forced value config for this extraForm
+    for (const config of field.forced_value_config) {
+      //* find the extraForm field conditioning the forced value
+      const conditioningField = extraForms.find((xtraForm) => xtraForm.name === config.conditionField);
+      //* if found check that its value match the condtionValue
+      if (conditioningField && isEqual(conditioningField.value, config.conditionValue)) {
+        //* set this value with the forced value and disable the form field
+        field.value = config.forcedValue;
+        field.disabled = true;
+      }
+    }
+  }
+  return field;
+}
+
+export function activateFieldsNforceValues(extraForms) {
+  for (const [index, field] of extraForms.entries()) {
+    const checkedField = checkFieldForcedValue(field, extraForms);
+    //* each time a value changes, call this function recursively, until there is no more change
+    if (checkedField.value !== field.value) {
+      extraForms[index] = checkedField; //* update the value in extraForms
+      activateFieldsNforceValues(extraForms); //* call the function with new extraForms
+    }
+  }
+  //* when no more changes detected in the loop, check for deactivated extraForms
+  extraForms = checkDeactivatedValues(extraForms);
+  //* return extraForms from the lastly called function
+  return extraForms;
+}
+
+export function formatUserOption(user) {
+  let name = user.first_name || '';
+  if (user.last_name) {
+    name = name + ' ' + user.last_name;
+  }
+  return {
+    name: [name, user.username],
+    value: user.id,
+  };
 }
\ No newline at end of file

src/views/Account.vue

 <template>
-  <div
-    id="account"
-    class="page"
-  >
+  <div id="account">
     <h1>Mon compte</h1>
 
     <div class="ui stackable grid">
-
       <div class="five wide column">
-
         <UserProfile />
-
+        <UserActivity />
       </div>
 
       <div class="eleven wide column">
-
         <UserProjectsList />
-      
-      </div>
-
-      <div class="sixteen wide column">
-
-        <UserActivity />
-        
       </div>
     </div>
   </div>

src/views/AttachmentPreview.vue

+<template>
+  <div
+    v-if="(configuration.VUE_APP_SSO_LOGIN_URL_WITH_REDIRECT && !user) || !currentFeature"
+    class="no-access"
+  >
+    <h3>
+      🔒&nbsp;Vous n'avez pas accès à ce signalement
+      <span v-if="!user"> en tant qu'utilisateur anonyme&nbsp;🥸</span>
+    </h3>
+    <p v-if="!user">
+      Veuillez vous connectez afin de pouvoir visualiser le document
+    </p>
+  </div>
+
+  <div
+    v-else
+    :class="['preview', { is_pdf }]"
+  >  
+    <embed
+      v-if="is_pdf"
+      :src="src"
+      type="application/pdf"
+    >
+    <div v-else>
+      <img
+        :src="src"
+        alt="Aperçu de l'image"
+      >
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+
+export default {
+  name: 'AttachmentPreview',
+
+  computed: {
+    ...mapState([
+      'configuration',
+      'user'
+    ]),
+    ...mapState('feature', [
+      'currentFeature'
+    ]),
+
+    src() {
+      return this.$route.query.file;
+    },
+
+    is_pdf() {
+      return this.src && this.src.includes('pdf');
+    },
+  },
+
+  watch: {
+    user() {
+      /**
+       * Specific for platform with login by token
+       * When the user is setted, fetching again the feature with the cookies setted
+       * since automatic authentification can take time to return the response
+       * setting the cookies, while the app is loading already
+       */ 
+      this.getFeature();
+    }
+  },
+
+  mounted() {
+    this.getFeature();
+  },
+  
+  methods: {
+    getFeature() {
+      console.log('getFeature'); // Keeping for debugging after deployment
+      this.$store.dispatch('feature/GET_PROJECT_FEATURE', {
+        project_slug: this.$route.params.slug,
+        feature_id: this.$route.params.slug_signal,
+      });
+    }
+  }
+};
+</script>
+
+<style scoped lang="less">
+.no-access {
+  > h1 {
+    margin: 2em 0;
+  }
+  height: 60vh;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  > * {
+    text-align: center;
+  }
+}
+
+.preview {
+  width: 100vw;
+  &.is_pdf {
+    padding: 0;
+    @media screen and (min-width: 726px) {
+      height: calc(100vh - 70px - 1em);
+      margin: .5em auto;
+      box-shadow: 1px 2px 10px grey;
+    }
+    @media screen and (max-width: 725px) {
+      height: calc(100vh - 110px);
+      margin: 0 auto;
+    }
+  }
+  > * {
+    height: 100%;
+    width: 100%;
+  }
+  > div {
+    display: flex;
+    justify-content: center;
+    img {
+      max-width: 100%;
+    }
+  }
+}
+</style>
\ No newline at end of file

src/views/Catalog.vue

@@ -89,7 +89,10 @@
         class="ui fluid teal icon button"
         @click="launchImport"
       >
-        <i class="upload icon" /> Lancer l'import avec le fichier
+        <i
+          class="upload icon"
+          aria-hidden="true"
+        /> Lancer l'import avec le fichier
         <span v-if="selectedResource">
           {{ selectedResource.resource }}
         </span>
@@ -128,7 +131,7 @@ export default {
     },
 
     nbPages() {
-      let N = Math.ceil(this.resources.length / this.pagination.pagesize);
+      const N = Math.ceil(this.resources.length / this.pagination.pagesize);
       const arr = [...Array(N).keys()].map(function (x) {
         ++x;
         return x;
@@ -147,7 +150,9 @@ export default {
     this.$store.commit('DISPLAY_LOADER', 'Interrogation du catologue datasud.');
     this.$store.dispatch('projects/GET_PROJECT', this.$route.params.slug);
     miscAPI.getIdgoCatalog(this.user.username).then((data) => {
-      if (data && data.layers) this.resources = data.layers;
+      if (data && data.layers) {
+        this.resources = data.layers;
+      }
       this.$store.commit('DISCARD_LOADER');
     });
   },
@@ -197,7 +202,9 @@ export default {
     launchImport() {
       const queryParams = `typename=${this.selectedResource.layer}&organization_slug=${this.selectedResource.organization_slug}`;
       miscAPI.getExternalGeojson(queryParams).then((data) => {
-        if (data) this.redirect(data);
+        if (data) {
+          this.redirect(data);
+        }
       });
     },
   },
@@ -289,7 +296,6 @@ h1 {
 .dataTables_paginate .paginate_button.current:hover {
   color: #333 !important;
   border: 1px solid #979797;
-  background-color: white;
   background: -webkit-gradient(
     linear,
     left top,
@@ -319,7 +325,6 @@ h1 {
 .dataTables_paginate .paginate_button:hover {
   color: white !important;
   border: 1px solid #111;
-  background-color: #585858;
   background: -webkit-gradient(
     linear,
     left top,

src/views/Feature/FeatureDetail.vue

 <template>
-  <div v-frag>
+  <div id="feature-detail">
     <div
-      v-if="feature"
-      v-frag
+      v-if="currentFeature"
+      class="ui grid stackable"
     >
       <div class="row">
-        <div class="fourteen wide column">
-          <h1 class="ui header">
-            <div class="content">
-              {{ feature.title || feature.feature_id }}
-              <div class="ui icon right floated compact buttons">
-                <router-link
-                  v-if="permissions && permissions.can_create_feature"
-                  :to="{
-                    name: 'ajouter-signalement',
-                    params: {
-                      slug_type_signal: $route.params.slug_type_signal,
-                    },
-                  }"
-                  class="ui button button-hover-orange"
-                  data-tooltip="Ajouter un signalement"
-                  data-position="bottom left"
-                >
-                  <i class="plus fitted icon" />
-                </router-link>
-                <router-link
-                  v-if="
-                    (permissions && permissions.can_update_feature) ||
-                      isFeatureCreator ||
-                      isModerator
-                  "
-                  :to="{
-                    name: 'editer-signalement',
-                    params: {
-                      slug_signal: $route.params.slug_signal,
-                      slug_type_signal: $route.params.slug_type_signal,
-                    },
-                  }"
-                  class="ui button button-hover-orange"
-                >
-                  <i class="inverted grey pencil alternate icon" />
-                </router-link>
-                <a
-                  v-if="isFeatureCreator"
-                  id="feature-delete"
-                  class="ui button button-hover-red"
-                  @click="isCanceling = true"
-                >
-                  <i class="inverted grey trash alternate icon" />
-                </a>
-              </div>
-              <div class="ui hidden divider" />
-              <div class="sub header prewrap">
-                {{ feature.description }}
-              </div>
-            </div>
-          </h1>
+        <div class="sixteen wide column">
+          <FeatureHeader
+            v-if="project"
+            :features-count="featuresCount"
+            :slug-signal="slugSignal"
+            :feature-type="feature_type"
+            :fast-edition-mode="project.fast_edition_mode"
+            :is-feature-creator="isFeatureCreator"
+            :can-edit-feature="canEditFeature"
+            :can-delete-feature="canDeleteFeature"
+            @fastEditFeature="validateFastEdition"
+            @setIsDeleting="isDeleting = true"
+            @tofeature="pushNgo"
+          />
         </div>
       </div>
-
       <div class="row">
-        <div class="seven wide column">
-          <table class="ui very basic table">
-            <tbody>
-              <div
-                v-for="(field, index) in feature.feature_data"
-                :key="'field' + index"
-                v-frag
-              >
-                <tr v-if="field">
-                  <td>
-                    <b>{{ field.label }}</b>
-                  </td>
-                  <td>
-                    <b>
-                      <i
-                        v-if="field.field_type === 'boolean'"
-                        :class="[
-                          'icon',
-                          field.value ? 'olive check' : 'grey times',
-                        ]"
-                      />
-                      <span v-else>
-                        {{ field.value }}
-                      </span>
-                    </b>
-                  </td>
-                </tr>
-              </div>
-              <tr>
-                <td>Auteur</td>
-                <td>{{ feature.display_creator }}</td>
-              </tr>
-              <tr>
-                <td>Statut</td>
-                <td>
-                  <i
-                    v-if="feature.status"
-                    :class="['icon', statusIcon]"
-                  />
-                  {{ statusLabel }}
-                </td>
-              </tr>
-              <tr>
-                <td>Date de création</td>
-                <td v-if="feature.created_on">
-                  {{ feature.created_on | formatDate }}
-                </td>
-              </tr>
-              <tr>
-                <td>Date de dernière modification</td>
-                <td v-if="feature.updated_on">
-                  {{ feature.updated_on | formatDate }}
-                </td>
-              </tr>
-            </tbody>
-          </table>
-
-          <h3>Liaison entre signalements</h3>
-          <table class="ui very basic table">
-            <tbody>
-              <tr
-                v-for="(link, index) in linked_features"
-                :key="link.feature_to.title + index"
-              >
-                <td v-if="link.feature_to.feature_type_slug">
-                  {{ link.relation_type_display }}
-                  <a @click="pushNgo(link)">{{ link.feature_to.title }} </a>
-                  ({{ link.feature_to.display_creator }} -
-                  {{ link.feature_to.created_on }})
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-
-        <div class="seven wide column">
-          <div
-            id="map"
-            ref="map"
+        <div class="eight wide column">
+          <FeatureTable
+            v-if="project"
+            ref="featureTable"
+            :feature-type="feature_type"
+            :fast-edition-mode="project.fast_edition_mode"
+            :can-edit-feature="canEditFeature"
           />
         </div>
-      </div>
-
-      <div class="row">
-        <div class="seven wide column">
-          <h2 class="ui header">
-            Pièces jointes
-          </h2>
-
-          <div
-            v-for="pj in attachments"
-            :key="pj.id"
-            class="ui divided items"
-          >
-            <div class="item">
-              <a
-                class="ui tiny image"
-                target="_blank"
-                :href="pj.attachment_file"
-              >
-                <img
-                  :src="
-                    pj.extension === '.pdf'
-                      ? require('@/assets/img/pdf.png')
-                      : pj.attachment_file
-                  "
-                >
-              </a>
-              <div class="middle aligned content">
-                <a
-                  class="header"
-                  target="_blank"
-                  :href="pj.attachment_file"
-                >{{
-                  pj.title
-                }}</a>
-                <div class="description">
-                  {{ pj.info }}
-                </div>
-              </div>
+        <div
+          v-if="feature_type && feature_type.geom_type !== 'none'"
+          class="eight wide column"
+        >
+          <div class="map-container">
+            <div
+              id="map"
+              ref="map"
+            >
+              <SidebarLayers
+                v-if="basemaps && map"
+                ref="sidebar"
+              />
+              <Geolocation />
             </div>
-          </div>
-          <i
-            v-if="attachments.length === 0"
-          >Aucune pièce jointe associée au signalement.</i>
-        </div>
-
-        <div class="seven wide column">
-          <h2 class="ui header">
-            Activité et commentaires
-          </h2>
-
-          <div
-            id="feed-event"
-            class="ui feed"
-          >
             <div
-              v-for="(event, index) in events"
-              :key="'event' + index"
-              v-frag
+              id="popup"
+              class="ol-popup"
             >
+              <a
+                id="popup-closer"
+                href="#"
+                class="ol-popup-closer"
+              />
               <div
-                v-if="event.event_type === 'create'"
-                v-frag
-              >
-                <div
-                  v-if="event.object_type === 'feature'"
-                  class="event"
-                >
-                  <div class="content">
-                    <div class="summary">
-                      <div class="date">
-                        {{ event.created_on }}
-                      </div>
-                      Création du signalement
-                      <span v-if="user">par {{ event.display_user }}</span>
-                    </div>
-                  </div>
-                </div>
-                <div
-                  v-else-if="event.object_type === 'comment'"
-                  class="event"
-                >
-                  <div class="content">
-                    <div class="summary">
-                      <div class="date">
-                        {{ event.created_on }}
-                      </div>
-                      Commentaire
-                      <span v-if="user">par {{ event.display_user }}</span>
-                    </div>
-                    <div class="extra text">
-                      {{ event.related_comment.comment }}
-                      <div
-                        v-if="event.related_comment.attachment"
-                        v-frag
-                      >
-                        <br><a
-                          :href="
-                            DJANGO_BASE_URL +
-                              event.related_comment.attachment.url
-                          "
-                          target="_blank"
-                        ><i class="paperclip fitted icon" />
-                          {{ event.related_comment.attachment.title }}</a>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                v-else-if="event.event_type === 'update'"
-                class="event"
-              >
-                <div class="content">
-                  <div class="summary">
-                    <div class="date">
-                      {{ event.created_on }}
-                    </div>
-                    Signalement mis à jour
-                    <span v-if="user">par {{ event.display_user }}</span>
-                  </div>
-                </div>
-              </div>
+                id="popup-content"
+              />
             </div>
           </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="eight wide column">
+          <FeatureAttachements
+            :attachments="attachments"
+          />
+        </div>
+        <div class="eight wide column">
+          <FeatureComments
+            :events="events"
+            :enable-key-doc-notif="feature_type.enable_key_doc_notif"
+            @fetchEvents="getFeatureEvents"
+          />
+        </div>
+      </div>
 
+      <div
+        v-if="isDeleting"
+        class="ui dimmer modals visible active"
+      >
+        <div
+          :class="[
+            'ui mini modal',
+            { 'active visible': isDeleting },
+          ]"
+        >
+          <i
+            class="close icon"
+            aria-hidden="true"
+            @click="isDeleting = false"
+          />
           <div
-            v-if="permissions && permissions.can_create_feature && isOffline() !== true"
-            class="ui segment"
+            v-if="isDeleting"
+            class="ui icon header"
           >
-            <form
-              id="form-comment"
-              class="ui form"
+            <i
+              class="trash alternate icon"
+              aria-hidden="true"
+            />
+            Supprimer le signalement
+          </div>
+
+          <div class="actions">
+            <button
+              type="button"
+              class="ui red compact fluid button"
+              @click="deleteFeature"
             >
-              <div class="required field">
-                <label
-                  :for="comment_form.comment.id_for_label"
-                >Ajouter un commentaire</label>
-                <ul
-                  v-if="comment_form.comment.errors"
-                  class="errorlist"
-                >
-                  <li>
-                    {{ comment_form.comment.errors }}
-                  </li>
-                </ul>
-                <textarea
-                  v-model="comment_form.comment.value"
-                  :name="comment_form.comment.html_name"
-                  rows="2"
-                />
-              </div>
-              <label>Pièce jointe (facultative)</label>
-              <div class="two fields">
-                <div class="field">
-                  <label
-                    class="ui icon button"
-                    for="attachment_file"
-                  >
-                    <i class="paperclip icon" />
-                    <span class="label">{{
-                      comment_form.attachment_file.value
-                        ? comment_form.attachment_file.value
-                        : "Sélectionner un fichier ..."
-                    }}</span>
-                  </label>
-                  <input
-                    id="attachment_file"
-                    type="file"
-                    accept="application/pdf, image/jpeg, image/png"
-                    style="display: none"
-                    name="attachment_file"
-                    @change="onFileChange"
-                  >
-                </div>
-                <div class="field">
-                  <input
-                    id="title"
-                    v-model="comment_form.attachment_file.title"
-                    type="text"
-                    name="title"
-                  >
-                  {{ comment_form.attachment_file.errors }}
-                </div>
-              </div>
-              <ul
-                v-if="comment_form.attachment_file.errors"
-                class="errorlist"
-              >
-                <li>
-                  {{ comment_form.attachment_file.errors }}
-                </li>
-              </ul>
-              <button
-                type="button"
-                class="ui compact green icon button"
-                @click="postComment"
-              >
-                <i class="plus icon" /> Poster le commentaire
-              </button>
-            </form>
+              Confirmer la suppression
+            </button>
           </div>
         </div>
       </div>
 
       <div
-        v-if="isCanceling"
-        class="ui dimmer modals page transition visible active"
-        style="display: flex !important"
+        v-if="isLeaving"
+        class="ui dimmer modals visible active"
       >
         <div
           :class="[
-            'ui mini modal subscription',
-            { 'active visible': isCanceling },
+            'ui mini modal',
+            { 'active visible': isLeaving },
           ]"
         >
           <i
             class="close icon"
-            @click="isCanceling = false"
+            aria-hidden="true"
+            @click="isLeaving = false"
           />
           <div class="ui icon header">
-            <i class="trash alternate icon" />
-            Supprimer le signalement
+            <i
+              class="sign-out icon"
+              aria-hidden="true"
+            />
+            Abandonner les modifications
+          </div>
+          <div class="content">
+            Les modifications apportées au signalement ne seront pas sauvegardées, continuer ?
           </div>
           <div class="actions">
             <button
               type="button"
-              class="ui red compact fluid button"
-              @click="deleteFeature"
+              class="ui green compact button"
+              @click="stayOnPage"
             >
-              Confirmer la suppression
+              <i
+                class="close icon"
+                aria-hidden="true"
+              />
+              Annuler
+            </button>
+            <button
+              type="button"
+              class="ui red compact button"
+              @click="leavePage"
+            >
+              Continuer
+              <i
+                class="arrow right icon"
+                aria-hidden="true"
+              />
             </button>
           </div>
         </div>
       </div>
     </div>
-    <div
-      v-else
-      v-frag
-    >
+
+    <div v-else>
       Pas de signalement correspondant trouvé
     </div>
   </div>
 </template>
 
 <script>
-import frag from 'vue-frag';
-import { mapGetters, mapState, mapActions } from 'vuex';
-import { mapUtil } from '@/assets/js/map-util.js';
-import featureAPI from '@/services/feature-api';
+import { isEqual } from 'lodash';
+import { mapState, mapActions, mapMutations, mapGetters } from 'vuex';
+import mapService from '@/services/map-service';
+
 import axios from '@/axios-client.js';
+import featureAPI from '@/services/feature-api';
+
+import FeatureHeader from '@/components/Feature/Detail/FeatureHeader';
+import FeatureTable from '@/components/Feature/Detail/FeatureTable';
+import FeatureAttachements from '@/components/Feature/Detail/FeatureAttachements';
+import FeatureComments from '@/components/Feature/Detail/FeatureComments';
+import SidebarLayers from '@/components/Map/SidebarLayers';
+import Geolocation from '@/components/Map/Geolocation';
+
+import { buffer } from 'ol/extent';
 
 export default {
   name: 'FeatureDetail',
 
-  directives: {
-    frag,
+  components: {
+    FeatureHeader,
+    FeatureTable,
+    FeatureAttachements,
+    FeatureComments,
+    SidebarLayers,
+    Geolocation,
   },
 
-  filters: {
-    formatDate(value) {
-      let date = new Date(value);
-      date = date.toLocaleString().replace(',', '');
-      return date.substr(0, date.length - 3); //* quick & dirty way to remove seconds from date
-    },
+  beforeRouteUpdate (to, from, next) {
+    if (this.hasUnsavedChange && !this.isSavingChanges) {
+      this.confirmLeave(next); // prompt user that there is unsaved changes or that features order might change
+    } else {
+      next(); // continue navigation
+    }
+  },
+
+  beforeRouteLeave (to, from, next) {
+    if (this.hasUnsavedChange && !this.isSavingChanges) {
+      this.confirmLeave(next); // prompt user that there is unsaved changes or that features order might change
+    } else {
+      next(); // continue navigation
+    }
   },
 
   data() {
@@ -425,251 +236,265 @@ export default {
         },
       },
       events: [],
-      isCanceling: false,
-      projectSlug: this.$route.params.slug,
+      featuresCount: null,
+      isDeleting: false,
+      isLeaving: false,
+      isSavingChanges: false,
+      map: null,
+      slug: this.$route.params.slug,
+      slugSignal: '',
     };
   },
 
   computed: {
     ...mapState([
-      'user',
-      'USER_LEVEL_PROJECTS'
+      'USER_LEVEL_PROJECTS',
+      'user'
     ]),
     ...mapState('projects', [
       'project'
     ]),
+    ...mapState('feature-type', [
+      'feature_types',
+    ]),
+    ...mapState('feature', [
+      'currentFeature',
+      'form',
+    ]),
+    ...mapGetters('feature-type', [
+      'feature_type',
+    ]),
     ...mapGetters([
       'permissions',
     ]),
-    ...mapState('feature', [
-      'linked_features',
-      'statusChoices'
+    ...mapState('map', [
+      'basemaps',
     ]),
-    DJANGO_BASE_URL() {
-      return this.$store.state.configuration.VUE_APP_DJANGO_BASE;
-    },
-
-    feature() {
-      const result = this.$store.state.feature.current_feature;
-      return result;
+    /**
+     * Checks if there are any unsaved changes in the form compared to the current feature's properties.
+     * This function is useful for prompting the user before they navigate away from a page with unsaved changes.
+     * 
+     * @returns {boolean} - Returns true if there are unsaved changes; otherwise, returns false.
+     */
+    hasUnsavedChange() {
+      // Ensure we are in edition mode and all required objects are present.
+      if (this.project && this.project.fast_edition_mode &&
+        this.form && this.currentFeature && this.currentFeature.properties) {
+        // Check for changes in title, description, and status.
+        if (this.form.title !== this.currentFeature.properties.title) return true;
+        if (this.form.description.value !== this.currentFeature.properties.description) return true;
+        if (this.form.status.value !== this.currentFeature.properties.status) return true;
+        if (this.form.assigned_member.value !== this.currentFeature.properties.assigned_member) return true;
+
+        // Iterate over extra forms to check for any changes.
+        for (const xForm of this.$store.state.feature.extra_forms) {
+          const originalValue = this.currentFeature.properties[xForm.name];
+          // Check if the form value has changed, considering edge cases for undefined, null, or empty values.
+          if (
+            !isEqual(xForm.value, originalValue) && // Check if values have changed.
+            !(!xForm.value && !originalValue) // Ensure both aren't undefined/null/empty, treating null as equivalent to false for unactivated conditionals or unset booleans.
+          ) {
+            // Log the difference for debugging purposes.
+            console.log(`In custom form [${xForm.name}], the current form value [${xForm.value}] differs from original value [${originalValue}]`);
+            return true;
+          }
+        }
+      }
+      // If none of the above conditions are met, return false indicating no unsaved changes.
+      return false;
     },
 
     isFeatureCreator() {
-      if (this.feature && this.user) {
-        return this.feature.creator === this.user.id;
+      if (this.currentFeature && this.currentFeature.properties && this.user) {
+        return this.currentFeature.properties.creator === this.user.id ||
+          this.currentFeature.properties.creator.username === this.user.username;
       }
       return false;
     },
 
     isModerator() {
-      return this.USER_LEVEL_PROJECTS && this.project &&
-        this.USER_LEVEL_PROJECTS[this.projectSlug] === 'Modérateur'
-        ? true
-        : false;
+      return this.USER_LEVEL_PROJECTS && this.USER_LEVEL_PROJECTS[this.slug] === 'Modérateur';
     },
 
-    statusIcon() {
-      switch (this.feature.status) {
-      case 'archived':
-        return 'grey archive';
-      case 'pending':
-        return 'teal hourglass outline';
-      case 'published':
-        return 'olive check';
-      case 'draft':
-        return 'orange pencil alternate';
-      default:
-        return '';
-      }
+    isAdministrator() {
+      return this.USER_LEVEL_PROJECTS && this.USER_LEVEL_PROJECTS[this.slug] === 'Administrateur projet';
     },
 
-    statusLabel() {
-      const status = this.statusChoices.find(
-        (el) => el.value === this.feature.status
-      );
-      return status ? status.name : '';
+    canEditFeature() {
+      return (this.permissions && this.permissions.can_update_feature) ||
+                this.isFeatureCreator ||
+                this.isModerator ||
+                this.user.is_superuser;
+    },
+
+    canDeleteFeature() {
+      return (this.permissions && this.permissions.can_delete_feature && this.isFeatureCreator) ||
+                this.isFeatureCreator ||
+                this.isModerator ||
+                this.isAdministrator ||
+                this.user.is_superuser;
+    },
+  },
+
+  watch: {
+    /** 
+     * To navigate back or forward to the previous or next URL, the query params in url are updated
+     * since the route doesn't change, mounted is not called, then the page isn't updated
+     * To reload page infos we need to call initPage() when query changes
+    */ 
+    '$route.query'(newValue, oldValue) {
+      if (newValue !== oldValue) {
+        this.initPage();
+      }
     },
   },
 
   created() {
-    this.$store.commit(
-      'feature-type/SET_CURRENT_FEATURE_TYPE_SLUG',
-      this.$route.params.slug_type_signal
-    );
-    this.getFeatureEvents();
-    this.getFeatureAttachments();
-    this.getLinkedFeatures();
+    this.$store.dispatch('GET_USERS_GROUPS'); // récupére les groupes d'utilisateurs pour extra_forms
   },
 
   mounted() {
-    this.$store.commit('DISPLAY_LOADER', 'Recherche du signalement');
-    if (!this.project) {
-      // Chargements des features et infos projet en cas d'arrivée directe sur la page ou de refresh
-      axios.all([
-        this.$store
-          .dispatch('projects/GET_PROJECT', this.$route.params.slug),
-        this.$store
-          .dispatch('projects/GET_PROJECT_INFO', this.$route.params.slug),
-        this.$store.dispatch('feature/GET_PROJECT_FEATURE', {
-          project_slug: this.$route.params.slug,
-          feature_id: this.$route.params.slug_signal
-        })])
-        .then(() => {
-          this.$store.commit('DISCARD_LOADER');
-          this.initMap();
-        });
-    } if (!this.feature || this.feature.feature_id !== this.$route.params.slug_signal) {
-      this.$store.dispatch('feature/GET_PROJECT_FEATURE', {
-        project_slug: this.$route.params.slug,
-        feature_id: this.$route.params.slug_signal
-      })
-        .then(() => {
-          this.$store.commit('DISCARD_LOADER');
-          this.initMap();
-        });
-    } else {
-      this.$store.commit('DISCARD_LOADER');
-      this.initMap();
-    }
+    this.initPage();
   },
 
   beforeDestroy() {
     this.$store.commit('CLEAR_MESSAGES');
+    this.$store.dispatch('CANCEL_CURRENT_SEARCH_REQUEST');
   },
 
   methods: {
+    ...mapMutations([
+      'DISPLAY_LOADER',
+      'DISCARD_LOADER'
+    ]),
+    ...mapMutations('feature', [
+      'SET_CURRENT_FEATURE'
+    ]),
+    ...mapMutations('feature-type', [
+      'SET_CURRENT_FEATURE_TYPE_SLUG'
+    ]),
+    ...mapActions('projects', [
+      'GET_PROJECT',
+      'GET_PROJECT_INFO'
+    ]),
     ...mapActions('feature', [
+      'GET_PROJECT_FEATURE',
       'GET_PROJECT_FEATURES'
     ]),
-    isOffline() {
-      return navigator.onLine == false;
-    },
-    pushNgo(link) {
-      this.$router.push({
-        name: 'details-signalement',
-        params: {
-          slug_type_signal: link.feature_to.feature_type_slug,
-          slug_signal: link.feature_to.feature_id,
-        },
-      });
-      this.getFeatureEvents();
-      this.getFeatureAttachments();
-      this.getLinkedFeatures();
-      this.addFeatureToMap();
-    },
 
-    validateForm() {
-      this.comment_form.comment.errors = '';
-      if (!this.comment_form.comment.value) {
-        this.comment_form.comment.errors = 'Le commentaire ne peut pas être vide';
-        return false;
-      }
-      return true;
+    async initPage() {
+      await this.getPageInfo();
+      if(this.feature_type && this.feature_type.geom_type === 'none') {
+        // setting map to null to ensure map would be created when navigating next to a geographical feature
+        this.map = null;
+      } else if (this.currentFeature) {
+        this.initMap();
+      } 
     },
 
-    postComment() {
-      if (this.validateForm()) {
-        featureAPI
-          .postComment({
-            featureId: this.$route.params.slug_signal,
-            comment: this.comment_form.comment.value,
+    async getPageInfo() {
+      if (this.$route.params.slug_signal && this.$route.params.slug_type_signal) { // if coming from the route with an id
+        this.SET_CURRENT_FEATURE_TYPE_SLUG(this.$route.params.slug_type_signal);
+        this.slugSignal = this.$route.params.slug_signal;
+      } //* else it would be retrieve after fetchFilteredFeature with offset
+      this.DISPLAY_LOADER('Recherche du signalement');
+      let promises = [];
+      //* Récupération du projet, en cas d'arrivée directe sur la page ou de refresh
+      if (!this.project) {
+        promises.push(this.GET_PROJECT(this.slug));
+      }
+      //* Récupération des types de signalement, en cas de redirection page détails signalement avec id (projet déjà récupéré) ou cas précédent
+      if (!this.featureType || !this.basemaps) {
+        promises.push(
+          this.GET_PROJECT_INFO(this.slug),
+        );
+      }
+      //* changement de requête selon s'il y a un id ou un offset(dans le cas du parcours des signalements filtrés)
+      if (this.$route.query.offset >= 0) {
+        promises.push(this.fetchFilteredFeature());
+      } else if (!this.currentFeature || this.currentFeature.id !== this.slugSignal) {
+        promises.push(
+          this.GET_PROJECT_FEATURE({
+            project_slug: this.slug,
+            feature_id: this.slugSignal,
           })
-          .then((response) => {
-            if (response && this.comment_form.attachment_file.file) {
-              featureAPI
-                .postCommentAttachment({
-                  featureId: this.$route.params.slug_signal,
-                  file: this.comment_form.attachment_file.file,
-                  fileName: this.comment_form.attachment_file.fileName,
-                  title: this.comment_form.attachment_file.title,
-                  commentId: response.data.id,
-                })
-                .then(() => {
-                  this.confirmComment();
-                });
-            } else {
-              this.confirmComment();
-            }
-          });
+        );
       }
+      await axios.all(promises);
+      this.DISCARD_LOADER();
+      if (this.currentFeature) {
+        this.getFeatureEvents();
+        this.getFeatureAttachments();
+        this.getLinkedFeatures();
+        if (this.project.fast_edition_mode) {
+          this.$store.commit('feature/INIT_FORM');
+          this.$store.dispatch('feature/INIT_EXTRA_FORMS');
+        }
+      } 
     },
 
-    confirmComment() {
-      this.$store.commit('DISPLAY_MESSAGE', { comment: 'Ajout du commentaire confirmé', level: 'positive' });
-      this.getFeatureEvents(); //* display new comment on the page
-      this.comment_form.attachment_file.file = null;
-      this.comment_form.attachment_file.fileName = '';
-      this.comment_form.attachment_file.title = '';
-      this.comment_form.comment.value = null;
+    confirmLeave(next) {
+      this.next = next;
+      this.isLeaving = true;
     },
 
-    validateImgFile(files, handleFile) {
-      let url = window.URL || window.webkitURL;
-      let image = new Image();
-      image.onload = function () {
-        handleFile(true);
-        URL.revokeObjectURL(image.src);
-      };
-      image.onerror = function () {
-        handleFile(false);
-        URL.revokeObjectURL(image.src);
-      };
-      image.src = url.createObjectURL(files);
+    stayOnPage() {
+      this.isLeaving = false;
     },
 
-    onFileChange(e) {
-      // * read image file
-      const files = e.target.files || e.dataTransfer.files;
-
-      const handleFile = (isValid) => {
-        if (isValid) {
-          this.comment_form.attachment_file.file = files[0]; //* store the file to post afterwards
-          let title = files[0].name;
-          this.comment_form.attachment_file.fileName = title; //* name of the file
-          const fileExtension = title.substring(title.lastIndexOf('.') + 1);
-          if ((title.length - fileExtension.length) > 11) {
-            title = title.slice(0, 10) + '[...].' + fileExtension;
-          }
-          this.comment_form.attachment_file.title = title; //* title for display
-          this.comment_form.attachment_file.errors = null;
-        } else {
-          this.comment_form.attachment_file.errors =
-            "Transférez une image valide. Le fichier que vous avez transféré n'est pas une image, ou il est corrompu.";
-        }
-      };
-
-      if (files.length) {
-        //* exception for pdf
-        if (files[0].type === 'application/pdf') {
-          handleFile(true);
-        } else {
-          this.comment_form.attachment_file.errors = null;
-          //* check if file is an image and pass callback to handle file
-          this.validateImgFile(files[0], handleFile);
-        }
-      }
+    leavePage() {
+      this.isLeaving = false;
+      this.next();
+    },
+
+    pushNgo(newEntry) {
+      //* update the params or queries in the route/url
+      this.$router.push(newEntry)
+        //* catch error if navigation get aborted (in beforeRouteUpdate)
+        .catch(() => true);
     },
 
     goBackToProject(message) {
       this.$router.push({
         name: 'project_detail',
         params: {
-          slug: this.$route.params.slug,
+          slug: this.slug,
           message,
         },
       });
     },
 
     deleteFeature() {
+      this.isDeleting = false;
+      this.DISPLAY_LOADER('Suppression du signalement en cours...');
       this.$store
-        .dispatch('feature/DELETE_FEATURE', this.feature.feature_id)
-        .then((response) => {
-          if (response.status === 204) {
-            this.GET_PROJECT_FEATURES({
-              project_slug: this.$route.params.slug
-            });
-            this.goBackToProject();
+        .dispatch('feature/DELETE_FEATURE', { feature_id: this.currentFeature.id })
+        .then(async (response) => {
+          this.DISCARD_LOADER();
+          if (response.status === 200) {
+            this.goBackToProject({ comment: 'Le signalement a bien été supprimé', level: 'positive' });
+          } else {
+            this.$store.commit('DISPLAY_MESSAGE', { comment: 'Une erreur est survenue pendant la suppression du signalement', level: 'negative' });
+          }
+        });
+    },
+
+    fetchFilteredFeature() { // TODO : if no query for sort, use project default ones
+      const queryString = new URLSearchParams({ ...this.$route.query });
+      const url = `${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}projects/${this.slug}/feature-paginated/?limit=1&${queryString}&output=geojson`;
+      return featureAPI.getPaginatedFeatures(url)
+        .then((data) => {
+          if (data && data.results && data.results.features && data.results.features[0]) {
+            this.featuresCount = data.count;
+            this.previous = data.previous;
+            this.next = data.next;
+            const currentFeature = data.results.features[0];
+            this.slugSignal = currentFeature.id;
+            this.SET_CURRENT_FEATURE(currentFeature);
+            this.SET_CURRENT_FEATURE_TYPE_SLUG(currentFeature.properties.feature_type.slug);
+            return { feature_id: currentFeature.id };
           }
+          return;
         });
     },
 
@@ -678,116 +503,124 @@ export default {
         this.$store.state.configuration.DEFAULT_MAP_VIEW.center;
       var mapDefaultViewZoom =
         this.$store.state.configuration.DEFAULT_MAP_VIEW.zoom;
-      this.map = mapUtil.createMap(this.$refs.map, {
-        mapDefaultViewCenter,
-        mapDefaultViewZoom,
-      });
-
-      // Update link to feature list with map zoom and center
-      mapUtil.addMapEventListener('moveend', function () {
-        // update link to feature list with map zoom and center
-        /*var $featureListLink = $("#feature-list-link")
-        var baseUrl = $featureListLink.attr("href").split("?")[0]
-
-        $featureListLink.attr("href", baseUrl +`?zoom=${this.map.getZoom()}&lat=${this.map.getCenter().lat}&lng=${this.map.getCenter().lng}`)*/
-      });
-
-      // Load the layers.
-      // - if one basemap exists, we load the layers of the first one
-      // - if not, load the default map and service options
-      let layersToLoad = null;
-      var baseMaps = this.$store.state.map.basemaps;
-      var layers = this.$store.state.map.availableLayers;
-      if (baseMaps && baseMaps.length > 0) {
-        const basemapIndex = 0;
-        layersToLoad = baseMaps[basemapIndex].layers;
-        layersToLoad.forEach((layerToLoad) => {
-          layers.forEach((layer) => {
-            if (layer.id === layerToLoad.id) {
-              layerToLoad = Object.assign(layerToLoad, layer);
-            }
-          });
+      if (this.map) {
+        mapService.removeFeatures();
+      } else {
+        this.map = mapService.createMap(this.$refs.map, {
+          mapDefaultViewCenter,
+          mapDefaultViewZoom,
+          maxZoom: this.project.map_max_zoom_level,
+          interactions : {
+            doubleClickZoom :false,
+            mouseWheelZoom: true,
+            dragPan: true
+          },
+          fullScreenControl: true,
+          geolocationControl: true,
         });
-        layersToLoad.reverse();
       }
-      mapUtil.addLayers(
-        layersToLoad,
-        this.$store.state.configuration.DEFAULT_BASE_MAP_SERVICE,
-        this.$store.state.configuration.DEFAULT_BASE_MAP_OPTIONS,
-        this.$store.state.configuration.DEFAULT_BASE_MAP_SCHEMA_TYPE,
-      );
-
-      mapUtil.getMap().dragging.disable();
-      mapUtil.getMap().doubleClickZoom.disable();
-      mapUtil.getMap().scrollWheelZoom.disable();
-
       this.addFeatureToMap();
     },
 
     addFeatureToMap() {
-      const url = `${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}projects/${this.$route.params.slug}/feature/` +
-                  `?feature_id=${this.$route.params.slug_signal}&output=geojson`;
-      axios
-        .get(url)
-        .then((response) => {
-          if (response.data.features.length > 0) {
-            const featureGroup = mapUtil.addFeatures(
-              response.data.features,
-              {},
-              true,
-              this.$store.state.feature_type.feature_types
-            );
-            mapUtil
-              .getMap()
-              .fitBounds(featureGroup.getBounds(), { padding: [25, 25] });
-          }
-        })
-        .catch((error) => {
-          throw error;
-        });
+      const featureGroup = mapService.addFeatures({
+        project_slug: this.slug,
+        features: [this.currentFeature],
+        featureTypes: this.feature_types,
+        addToMap: true,
+      });
+      mapService.fitExtent(buffer(featureGroup.getExtent(),200));
     },
 
     getFeatureEvents() {
       featureAPI
-        .getFeatureEvents(this.$route.params.slug_signal)
+        .getFeatureEvents(this.slugSignal)
         .then((data) => (this.events = data));
     },
 
     getFeatureAttachments() {
       featureAPI
-        .getFeatureAttachments(this.$route.params.slug_signal)
+        .getFeatureAttachments(this.slugSignal)
         .then((data) => (this.attachments = data));
     },
 
     getLinkedFeatures() {
       featureAPI
-        .getFeatureLinks(this.$route.params.slug_signal)
+        .getFeatureLinks(this.slugSignal)
         .then((data) =>
           this.$store.commit('feature/SET_LINKED_FEATURES', data)
         );
     },
+
+    checkAddedForm() {
+      let isValid = true; //* fallback if all customForms returned true
+      if (this.$refs.featureTable && this.$refs.featureTable.$refs.extraForm) {
+        for (const extraForm of this.$refs.featureTable.$refs.extraForm) {
+          if (extraForm.checkForm() === false) {
+            isValid = false;
+          }
+        }
+      }
+      return isValid;
+    },
+
+    validateFastEdition() {
+      let is_valid = true;
+      is_valid = this.checkAddedForm();
+      if (is_valid) {
+        this.isSavingChanges = true; // change the value to avoid confirmation popup after redirection with new query
+        this.$store.dispatch(
+          'feature/SEND_FEATURE',
+          {
+            routeName: this.$route.name,
+            query: this.$route.query
+          }
+        ).then((response) => {
+          if (response === 'reloadPage') {
+            // when query doesn't change we need to reload the page infos with initPage(),
+            // since it would not be called from the watcher'$route.query' when the query does change
+            this.initPage();
+          }
+        });
+      }
+    }
   },
 };
 </script>
 
 <style scoped>
+.map-container {
+  height: 100%;
+  max-height: 70vh;
+  position: relative;
+  overflow: hidden;
+  background-color: #fff;
+}
 #map {
   width: 100%;
   height: 100%;
   min-height: 250px;
-  max-height: 70vh;
-}
-#feed-event .event {
-  margin-bottom: 1em;
+  border: 1px solid grey;
 }
-#feed-event .event .date {
-  margin-right: 1em !important;
-}
-#feed-event .event .extra.text {
-  margin-left: 107px;
-  margin-top: 0;
+div.geolocation-container {
+  /* each button have (more or less depends on borders) .5em space between */
+  /* zoom buttons are 60px high, geolocation and full screen button is 34px high with borders */
+  top: calc(1.3em + 60px + 34px);
 }
+
 .prewrap {
   white-space: pre-wrap;
 }
+
+.ui.active.dimmer {
+  position: fixed;
+}
+.ui.modal > .content {
+  text-align: center;
+}
+
+.ui.modal > .actions {
+  display: flex;
+  justify-content: space-evenly;
+}
 </style>
\ No newline at end of file

src/views/Feature/FeatureEdit.vue

 <template>
-  <div v-frag>
-    <div class="fourteen wide column">
-      <h1 v-if="feature && currentRouteName === 'editer-signalement'">
-        Mise à jour du signalement "{{ feature.title || feature.feature_id }}"
-      </h1>
-      <h1
-        v-else-if="feature_type && currentRouteName === 'ajouter-signalement'"
-      >
+  <div id="feature-edit">
+    <h1>
+      <span v-if="feature_type && isCreation">      
         Création d'un signalement <small>[{{ feature_type.title }}]</small>
-      </h1>
-
-      <form
-        id="form-feature-edit"
-        action=""
-        method="post"
-        enctype="multipart/form-data"
-        class="ui form"
+      </span>
+      <span v-else-if="currentFeature && currentRouteName === 'editer-signalement'">
+        Mise à jour du signalement "{{ currentFeature.properties ?
+          currentFeature.properties.title : currentFeature.id }}"
+      </span>
+      <span v-else-if="feature_type && currentRouteName === 'editer-attribut-signalement'">
+        Mise à jour des attributs de {{ checkedFeatures.length }} signalements
+      </span>
+    </h1>
+
+    <form
+      id="form-feature-edit"
+      enctype="multipart/form-data"
+      class="ui form"
+    >
+      <!-- Feature Fields -->
+      <div
+        v-if="currentRouteName !== 'editer-attribut-signalement'"
+        :class="firstFieldsClass"
       >
-        <!-- Feature Fields -->
-        <div class="two fields">
-          <div :class="field_title">
-            <label :for="form.title.id_for_label">{{ form.title.label }}</label>
-            <input
-              :id="form.title.id_for_label"
-              v-model="form.title.value"
-              type="text"
-              required
-              :maxlength="form.title.field.max_length"
-              :name="form.title.html_name"
-              @blur="updateStore"
+        <div :class="['field', {'required': !titleIsOptional}]">
+          <label :for="form.title.id_for_label">{{ form.title.label }}</label>
+          <input
+            :id="form.title.id_for_label"
+            v-model="form.title.value"
+            type="text"
+            :required="!titleIsOptional"
+            :maxlength="form.title.field.max_length"
+            :name="form.title.html_name"
+            @blur="updateStore"
+          >
+          <ul
+            id="infoslist-title"
+            class="infoslist"
+          >
+            <li
+              v-for="info in form.title.infos"
+              :key="info"
             >
-            <ul
-              id="errorlist-title"
-              class="errorlist"
+              {{ info }}
+            </li>
+          </ul>
+          <ul
+            id="errorlist-title"
+            class="errorlist"
+          >
+            <li
+              v-for="error in form.title.errors"
+              :key="error"
             >
-              <li
-                v-for="error in form.title.errors"
-                :key="error"
-              >
-                {{ error }}
-              </li>
-            </ul>
-          </div>
-          <div class="required field">
-            <label :for="form.status.id_for_label">{{
-              form.status.label
-            }}</label>
-            <Dropdown
-              :options="allowedStatusChoices"
-              :selected="selected_status.name"
-              :selection.sync="selected_status"
-            />
-          </div>
+              {{ error }}
+            </li>
+          </ul>
         </div>
-        <div class="field">
-          <label :for="form.description.id_for_label">{{
-            form.description.label
+        <div
+          v-if="!onlyPublishedStatus"
+          class="required field"
+        >
+          <label :for="form.status.id_for_label">{{
+            form.status.label
           }}</label>
-          <textarea
-            v-model="form.description.value"
-            :name="form.description.html_name"
-            rows="5"
-            @blur="updateStore"
+          <Dropdown
+            :options="allowedStatusChoices"
+            :selected="selected_status.name"
+            :selection.sync="selected_status"
           />
         </div>
+        <div
+          v-if="project && project.feature_assignement"
+          class="field"
+        >
+          <label for="assigned_member">Membre assigné</label>
+          <ProjectMemberSelect
+            :selected-user-id="form.assigned_member.value"
+            @update:user="setMemberAssigned($event)"
+          /> 
+        </div>
+      </div>
 
-        <!-- Geom Field -->
-        <div class="field">
-          <label :for="form.geom.id_for_label">{{ form.geom.label }}</label>
-
-          <!-- Import GeoImage -->
+      <div
+        v-if="currentRouteName !== 'editer-attribut-signalement'"
+        class="field"
+      >
+        <label :for="form.description.id_for_label">{{
+          form.description.label
+        }}</label>
+        <textarea
+          v-model="form.description.value"
+          :name="form.description.html_name"
+          rows="5"
+          @blur="updateStore"
+        />
+      </div>
+
+      <!-- Geom Field -->
+      <div
+        v-if="currentRouteName !== 'editer-attribut-signalement'
+          && feature_type && feature_type.geom_type !== 'none'"
+        class="field"
+      >
+        <label :for="form.geom.id_for_label">{{ form.geom.label }}</label>
+        <!-- Import GeoImage -->
+        <div
+          v-if="feature_type && feature_type.geom_type === 'point'"
+        >
+          <p v-if="isOnline">
+            <button
+              id="add-geo-image"
+              type="button"
+              class="ui compact button"
+              @click="toggleGeoRefModal"
+            >
+              <i
+                class="file image icon"
+                aria-hidden="true"
+              />Importer une image géoréférencée
+            </button>
+            Vous pouvez utiliser une image géoréférencée pour localiser le
+            signalement.
+          </p>
           <div
-            v-if="feature_type && feature_type.geom_type === 'point'"
-            v-frag
+            v-if="showGeoRef"
+            class="ui dimmer modals page transition visible active"
+            style="display: flex !important"
           >
-            <p v-if="isOffline() !== true">
-              <button
-                id="add-geo-image"
-                type="button"
-                class="ui compact button"
-                @click="toggleGeoRefModal"
-              >
-                <i class="file image icon" />Importer une image géoréférencée
-              </button>
-              Vous pouvez utiliser une image géoréférencée pour localiser le
-              signalement.
-            </p>
-
             <div
-              v-if="showGeoRef"
-              class="ui dimmer modals page transition visible active"
-              style="display: flex !important"
+              class="ui mini modal transition visible active"
+              style="display: block !important"
             >
-              <div
-                class="ui mini modal transition visible active"
-                style="display: block !important"
-              >
-                <i
-                  class="close icon"
-                  @click="toggleGeoRefModal"
-                />
-                <div class="content">
-                  <h3>Importer une image géoréférencée</h3>
-                  <form
-                    id="form-geo-image"
-                    class="ui form"
-                    enctype="multipart/form-data"
-                  >
-                    <p>
-                      Attention, si vous avez déjà saisi une géométrie, celle
-                      issue de l'image importée l'écrasera.
-                    </p>
-                    <div class="field georef-btn">
-                      <label>Image (png ou jpeg)</label>
-                      <label
-                        class="ui icon button"
-                        for="image_file"
-                      >
-                        <i class="file icon" />
-                        <span class="label">{{ geoRefFileLabel }}</span>
-                      </label>
-                      <input
-                        id="image_file"
-                        ref="file"
-                        type="file"
-                        accept="image/jpeg, image/png"
-                        style="display: none"
-                        name="image_file"
-                        class="image_file"
-                        @change="handleFileUpload"
-                      >
-                      <ul
-                        v-if="erreurUploadMessage"
-                        class="errorlist"
-                      >
-                        <li>
-                          {{ erreurUploadMessage }}
-                        </li>
-                      </ul>
-                    </div>
-                    <button
-                      id="get-geom-from-image-file"
-                      type="button"
-                      :class="[
-                        'ui compact button',
-                        file && !erreurUploadMessage ? 'green' : 'disabled',
-                        { red: erreurUploadMessage },
-                      ]"
-                      @click="georeferencement"
+              <i
+                class="close icon"
+                aria-hidden="true"
+                @click="toggleGeoRefModal"
+              />
+              <div class="content">
+                <h3>Importer une image géoréférencée</h3>
+                <form
+                  id="form-geo-image"
+                  class="ui form"
+                  enctype="multipart/form-data"
+                >
+                  <p>
+                    Attention, si vous avez déjà saisi une géométrie, celle
+                    issue de l'image importée l'écrasera.
+                  </p>
+                  <div class="field georef-btn">
+                    <label>Image (png ou jpeg)</label>
+                    <label
+                      class="ui icon button"
+                      for="image_file"
+                    >
+                      <i
+                        class="file icon"
+                        aria-hidden="true"
+                      />
+                      <span class="label">{{ geoRefFileLabel }}</span>
+                    </label>
+                    <input
+                      id="image_file"
+                      ref="file"
+                      type="file"
+                      accept="image/jpeg, image/png"
+                      style="display: none"
+                      name="image_file"
+                      class="image_file"
+                      @change="handleFileUpload"
+                    >
+                    <ul
+                      v-if="erreurUploadMessage"
+                      class="errorlist"
                     >
-                      <i class="plus icon" />
-                      Importer
-                    </button>
-                  </form>
-                </div>
+                      <li>
+                        {{ erreurUploadMessage }}
+                      </li>
+                    </ul>
+                  </div>
+                  <button
+                    id="get-geom-from-image-file"
+                    type="button"
+                    :class="[
+                      'ui compact button',
+                      file && !erreurUploadMessage ? 'green' : 'disabled',
+                      { red: erreurUploadMessage },
+                    ]"
+                    @click="georeferencement"
+                  >
+                    <i
+                      class="plus icon"
+                      aria-hidden="true"
+                    />
+                    Importer
+                  </button>
+                </form>
               </div>
             </div>
-
-            <p v-if="showGeoPositionBtn">
-              <button
-                id="create-point-geoposition"
-                type="button"
-                class="ui compact button"
-                @click="create_point_geoposition"
-              >
-                <i class="ui map marker alternate icon" />Positionner le
-                signalement à partir de votre géolocalisation
-              </button>
-            </p>
-            <span
-              v-if="erreurGeolocalisationMessage"
-              id="erreur-geolocalisation"
+          </div>
+          <p v-if="showGeoPositionBtn">
+            <button
+              id="create-point-geoposition"
+              type="button"
+              class="ui compact button"
+              @click="create_point_geoposition"
             >
-              <div class="ui negative message">
-                <div class="header">
-                  Une erreur est survenue avec la fonctionnalité de
-                  géolocalisation
-                </div>
-                <p id="erreur-geolocalisation-message">
-                  {{ erreurGeolocalisationMessage }}
-                </p>
+              <i
+                class="ui map marker alternate icon"
+                aria-hidden="true"
+              />
+              Positionner le
+              signalement à partir de votre géolocalisation
+            </button>
+          </p>
+          <span
+            v-if="erreurGeolocalisationMessage"
+            id="erreur-geolocalisation"
+          >
+            <div class="ui negative message">
+              <div class="header">
+                Une erreur est survenue avec la fonctionnalité de
+                géolocalisation
               </div>
-              <br>
-            </span>
-          </div>
-          <ul
-            id="errorlist-geom"
-            class="errorlist"
+              <p id="erreur-geolocalisation-message">
+                {{ erreurGeolocalisationMessage }}
+              </p>
+            </div>
+            <br>
+          </span>
+        </div>
+        <ul
+          id="errorlist-geom"
+          class="errorlist"
+        >
+          <li
+            v-for="error in form.geom.errors"
+            :key="error"
           >
-            <li
-              v-for="error in form.geom.errors"
-              :key="error"
-            >
-              {{ error }}
-            </li>
-          </ul>
-          <!-- Map -->
-          <input
-            :id="form.geom.id_for_label"
-            v-model="form.geom.value"
-            type="hidden"
-            :name="form.geom.html_name"
-            @blur="updateStore"
+            {{ error }}
+          </li>
+        </ul>
+        <!-- Map -->
+        <input
+          :id="form.geom.id_for_label"
+          v-model="form.geom.value"
+          type="hidden"
+          :name="form.geom.html_name"
+          @blur="updateStore"
+        >
+        <div
+          class="ui tab active map-container"
+          data-tab="map"
+        >
+          <div
+            :class="{ active: mapLoading }"
+            class="ui inverted dimmer"
           >
+            <div class="ui loader" />
+          </div>
           <div
-            class="ui tab active map-container"
-            data-tab="map"
+            id="map"
+            ref="map"
+            tabindex="0"
           >
-            <div
-              id="map"
-              ref="map"
-            />
             <SidebarLayers v-if="basemaps && map" />
+            <Geolocation />
+            <Geocoder />
+            <EditingToolbar
+              v-if="isEditable"
+              :map="map"
+            />
+          </div>
+          <div 
+            id="popup" 
+            class="ol-popup"
+          >
+            <a 
+              id="popup-closer" 
+              href="#" 
+              class="ol-popup-closer"
+            />
+            <div 
+              id="popup-content"
+            />
           </div>
         </div>
+      </div>
+
+      <!-- Extra Fields -->
+      <div class="ui horizontal divider">
+        DONNÉES MÉTIER
+      </div>
+      <div
+        v-for="field in extra_forms"
+        :key="field.name"
+        class="extraform"
+      >
+        <ExtraForm
+          v-if="!field.isDeactivated"
+          :id="field.label"
+          ref="extraForm"
+          :field="field"
+          class="field"
+        />
+        {{ field.errors }}
+      </div>
 
-        <!-- Extra Fields -->
+      <!-- Pièces jointes -->
+      <div v-if="isOnline && currentRouteName !== 'editer-attribut-signalement'">
         <div class="ui horizontal divider">
-          DONNÉES MÉTIER
+          PIÈCES JOINTES
         </div>
         <div
-          v-for="(field, index) in orderedCustomFields"
-          :key="field.field_type + index"
-          class="field"
+          v-if="isOnline"
+          id="formsets-attachment"
         >
-          <FeatureExtraForm :field="field" />
-          {{ field.errors }}
+          <FeatureAttachmentForm
+            v-for="attachForm in attachmentFormset"
+            :key="attachForm.dataKey"
+            ref="attachementForm"
+            :attachment-form="attachForm"
+            :enable-key-doc-notif="feature_type && feature_type.enable_key_doc_notif"
+          />
         </div>
+        <button
+          id="add-attachment"
+          type="button"
+          class="ui compact basic button"
+          @click="add_attachement_formset"
+        >
+          <i
+            class="ui plus icon"
+            aria-hidden="true"
+          />
+          Ajouter une pièce jointe
+        </button>
+      </div>
 
-        <!-- Pièces jointes -->
-        <div v-if="isOffline() !== true">
-          <div class="ui horizontal divider">
-            PIÈCES JOINTES
-          </div>
-          <div
-            v-if="isOffline() !== true"
-            id="formsets-attachment"
-          >
-            <FeatureAttachmentForm
-              v-for="attachForm in attachmentFormset"
-              :key="attachForm.dataKey"
-              ref="attachementForm"
-              :attachment-form="attachForm"
-            />
-          </div>
-
-          <button
-            id="add-attachment"
-            type="button"
-            class="ui compact basic button"
-            @click="add_attachement_formset"
-          >
-            <i class="ui plus icon" />Ajouter une pièce jointe
-          </button>
+      <!-- Signalements liés -->
+      <div v-if="isOnline && currentRouteName !== 'editer-attribut-signalement'">
+        <div class="ui horizontal divider">
+          SIGNALEMENTS LIÉS
         </div>
-
-        <!-- Signalements liés -->
-        <div v-if="isOffline() !== true">
-          <div class="ui horizontal divider">
-            SIGNALEMENTS LIÉS
-          </div>
-          <div id="formsets-link">
-            <FeatureLinkedForm
-              v-for="linkForm in linkedFormset"
-              :key="linkForm.dataKey"
-              ref="linkedForm"
-              :linked-form="linkForm"
-            />
-          </div>
-          <button
-            id="add-link"
-            type="button"
-            class="ui compact basic button"
-            @click="add_linked_formset"
-          >
-            <i class="ui plus icon" />Ajouter une liaison
-          </button>
+        <div id="formsets-link">
+          <FeatureLinkedForm
+            v-for="linkForm in linkedFormset"
+            :key="linkForm.dataKey"
+            ref="linkedForm"
+            :linked-form="linkForm"
+          />
         </div>
-        <div class="ui divider" />
-
         <button
+          id="add-link"
           type="button"
-          class="ui teal icon button"
-          @click="postForm"
+          class="ui compact basic button"
+          @click="add_linked_formset"
         >
-          <i class="white save icon" /> Enregistrer les changements
+          <i
+            class="ui plus icon"
+            aria-hidden="true"
+          />
+          Ajouter une liaison
         </button>
-      </form>
-    </div>
+      </div>
+      <div class="ui divider" />
+      <button
+        id="save-changes"
+        type="button"
+        :class="['ui teal icon button', { loading: sendingFeature }]"
+        @click="onSave"
+      >
+        <i
+          class="white save icon"
+          aria-hidden="true"
+        />
+        Enregistrer les changements
+      </button>
+    </form>
   </div>
 </template>
 
 <script>
-import frag from 'vue-frag';
 import { mapState, mapGetters } from 'vuex';
-import FeatureAttachmentForm from '@/components/feature/FeatureAttachmentForm';
-import FeatureLinkedForm from '@/components/feature/FeatureLinkedForm';
-import FeatureExtraForm from '@/components/feature/FeatureExtraForm';
+import { GeoJSON } from 'ol/format';
+
+import FeatureAttachmentForm from '@/components/Feature/FeatureAttachmentForm';
+import FeatureLinkedForm from '@/components/Feature/FeatureLinkedForm';
+import ExtraForm from '@/components/ExtraForm';
 import Dropdown from '@/components/Dropdown.vue';
-import SidebarLayers from '@/components/SidebarLayers';
-import featureAPI from '@/services/feature-api';
+import SidebarLayers from '@/components/Map/SidebarLayers';
+import EditingToolbar from '@/components/Map/EditingToolbar';
+import Geocoder from '@/components/Map/Geocoder';
+import Geolocation from '@/components/Map/Geolocation';
+import ProjectMemberSelect from '@/components/ProjectMemberSelect';
 
-import L from 'leaflet';
-import 'leaflet-draw';
-import { mapUtil } from '@/assets/js/map-util.js';
-import { allowedStatus2change } from '@/utils';
+import featureAPI from '@/services/feature-api';
+import mapService from '@/services/map-service';
+import editionService from '@/services/edition-service';
+import { statusChoices, allowedStatus2change } from '@/utils';
 import axios from '@/axios-client.js';
-import flip from '@turf/flip';
+
 
 export default {
   name: 'FeatureEdit',
 
-  directives: {
-    frag,
-  },
-
   components: {
     FeatureAttachmentForm,
     FeatureLinkedForm,
     Dropdown,
     SidebarLayers,
-    FeatureExtraForm,
+    Geocoder,
+    Geolocation,
+    EditingToolbar,
+    ExtraForm,
+    ProjectMemberSelect
   },
 
   data() {
     return {
       map: null,
-      baseUrl: this.$store.state.configuration.BASE_URL,
+      mapLoading: false,
+      sendingFeature: false,
       file: null,
       showGeoRef: false,
       showGeoPositionBtn: true,
@@ -337,9 +432,10 @@ export default {
       form: {
         title: {
           errors: [],
+          infos: [],
           id_for_label: 'name',
           field: {
-            max_length: 30,
+            max_length: 128,
           },
           html_name: 'name',
           label: 'Nom',
@@ -354,6 +450,9 @@ export default {
             name: 'Brouillon',
           },
         },
+        assigned_member: {
+          value: null,
+        },
         description: {
           errors: [],
           id_for_label: 'description',
@@ -371,40 +470,47 @@ export default {
   },
 
   computed: {
-    ...mapGetters(['permissions']),
-    ...mapGetters('feature-type', [
-      'feature_type'
+    ...mapState([
+      'configuration',
+      'isOnline',
+      'user',
+      'USER_LEVEL_PROJECTS'
+    ]),
+    ...mapState('projects', [
+      'project'
+    ]),
+    ...mapState('map', [
+      'basemaps'
     ]),
-    ...mapState(['user', 'USER_LEVEL_PROJECTS']),
-    ...mapState('projects', ['project']),
-    ...mapState('map', ['basemaps']),
     ...mapState('feature', [
       'attachmentFormset',
-      'linkedFormset',
+      'checkedFeatures',
+      'currentFeature',
+      'extra_forms',
       'features',
-      'extra_form',
-      'statusChoices',
+      'linkedFormset',
+    ]),
+    ...mapState('feature-type', [
+      'feature_types'
     ]),
 
-    field_title() {
-      if (this.feature_type) {
-        if (this.feature_type.title_optional) {
-          return 'field';
-        }
-      }
-      return 'required field';
+    ...mapGetters([
+      'permissions'
+    ]),
+    ...mapGetters('feature-type', [
+      'feature_type'
+    ]),
+
+    titleIsOptional() {
+      return this.feature_type && this.feature_type.title_optional;
     },
 
     currentRouteName() {
       return this.$route.name;
     },
 
-    feature() {
-      return this.$store.state.feature.current_feature;
-    },
-
-    orderedCustomFields() {
-      return [...this.extra_form].sort((a, b) => a.position - b.position);
+    isCreation() {
+      return this.currentRouteName === 'ajouter-signalement';
     },
 
     geoRefFileLabel() {
@@ -417,6 +523,7 @@ export default {
     selected_status: {
       get() {
         return this.form.status.value;
+
       },
       set(newValue) {
         this.form.status.value = newValue;
@@ -424,24 +531,61 @@ export default {
       },
     },
 
+    isFeatureCreator() {
+      if (this.currentFeature && this.currentFeature.properties && this.user) {
+        return this.currentFeature.properties.creator === this.user.id ||
+          this.currentFeature.properties.creator.username === this.user.username;
+      }
+      return false;
+    },
+    
     allowedStatusChoices() {
-      if (this.project && this.feature && this.user) {
+      if (this.project && this.USER_LEVEL_PROJECTS && this.user) {
         const isModerate = this.project.moderation;
         const userStatus = this.USER_LEVEL_PROJECTS[this.project.slug];
-        const isOwnFeature = this.feature.creator === this.user.id; //* si le contributeur est l'auteur du signalement
-        return allowedStatus2change(this.statusChoices, isModerate, userStatus, isOwnFeature, this.currentRouteName);
+        return allowedStatus2change(this.user, isModerate, userStatus, this.isFeatureCreator, this.currentRouteName);
       }
       return [];
     },
+    
+    isEditable() {
+      return this.basemaps && this.map && (this.feature_type && !this.feature_type.geom_type.includes('multi'));
+    },
+
+    onlyPublishedStatus() {
+      return this.configuration?.VUE_APP_ONLY_PUBLISHED_STATUS;
+    },
+    
+    firstFieldsClass() {
+      const hasFeatureAssignment = this.project && this.project.feature_assignement;
+
+      if (hasFeatureAssignment) {
+        return this.onlyPublishedStatus ? 'two fields' : 'three fields';
+      }
+
+      return this.onlyPublishedStatus ? '' : 'two fields';
+    }
+  },
+
+  watch: {
+    'form.title.value': function(newValue) {
+      if (newValue && newValue.length === 128) {
+        this.form.title.infos.push('Le nombre de caractères et limité à 128.');
+      } else {
+        this.form.title.infos = [];
+      }
+    }
   },
 
   created() {
+    this.$store.dispatch('GET_USERS_GROUPS'); // récupére les groupes d'utilisateurs pour extra_forms
+    this.$store.commit('feature/CLEAR_EXTRA_FORM');
     this.$store.commit(
       'feature-type/SET_CURRENT_FEATURE_TYPE_SLUG',
       this.$route.params.slug_type_signal
     );
-    //* empty previous feature data, not emptying by itself since it doesn't update by itself anymore
-    if (this.currentRouteName === 'ajouter-signalement') {
+    //* empty previous feature data in the store
+    if (this.currentRouteName === 'ajouter-signalement' || this.currentRouteName === 'editer-attribut-signalement') {
       this.$store.commit('feature/SET_CURRENT_FEATURE', []);
     }
 
@@ -452,10 +596,13 @@ export default {
   },
 
   mounted() {
-    let promises = [
-      this.$store.dispatch('projects/GET_PROJECT', this.$route.params.slug),
-      this.$store.dispatch('projects/GET_PROJECT_INFO', this.$route.params.slug),
-    ];
+    const promises = [];
+    if (!this.project) {
+      promises.push(
+        this.$store.dispatch('projects/GET_PROJECT', this.$route.params.slug),
+        this.$store.dispatch('projects/GET_PROJECT_INFO', this.$route.params.slug),
+      );
+    }
     if (this.$route.params.slug_signal) {
       promises.push(
         this.$store.dispatch('feature/GET_PROJECT_FEATURE', {
@@ -466,21 +613,27 @@ export default {
     }
 
     Promise.all(promises).then(() => {
-      this.initForm();
-      this.initMap();
-      this.onFeatureTypeLoaded();
-      this.initExtraForms(this.feature);
-
-      setTimeout(
-        function () {
-          mapUtil.addGeocoders(this.$store.state.configuration);
-        }.bind(this),
-        1000
-      );
+      if (this.currentRouteName !== 'editer-attribut-signalement') {
+        this.initForm();
+        // if not in the case of a non geographical feature type, init map
+        if (this.feature_type.geom_type !== 'none') {
+          this.initMap();
+          this.initMapTools();
+          this.initDeleteFeatureOnKey();
+        }
+      }
+      this.$store.dispatch('feature/INIT_EXTRA_FORMS');
     });
   },
 
+  beforeDestroy() {
+    this.$store.dispatch('CANCEL_CURRENT_SEARCH_REQUEST');
+  },
+
   destroyed() {
+    editionService.removeActiveFeatures();
+    // emptying to enable adding event listener at feature edition straight after creation
+    editionService.selectForDeletion = null;
     //* be sure that previous Formset have been cleared for creation
     this.$store.commit('feature/CLEAR_ATTACHMENT_FORM');
     this.$store.commit('feature/CLEAR_LINKED_FORM');
@@ -488,35 +641,45 @@ export default {
   },
 
   methods: {
-    isOffline() {
-      return navigator.onLine == false;
-    },
     initForm() {
-      if (this.currentRouteName === 'editer-signalement') {
-        for (let key in this.feature) {
+      if (this.currentRouteName.includes('editer')) {
+        for (const key in this.currentFeature.properties) {
           if (key && this.form[key]) {
             if (key === 'status') {
-              const value = this.feature[key];
-              this.form[key].value = this.statusChoices.find(
+              const value = this.currentFeature.properties[key];
+              this.form[key].value = statusChoices.find(
                 (key) => key.value === value
               );
             } else {
-              this.form[key].value = this.feature[key];
+              this.form[key].value = this.currentFeature.properties[key];
             }
           }
         }
+        this.form.geom.value = this.currentFeature.geometry;
         this.updateStore();
+      } else if (this.currentRouteName === 'ajouter-signalement' && this.onlyPublishedStatus) { // Forcer la valeur à "publié" sur les instances au statut limité à "publié"
+        this.form.status.value = statusChoices.find((key) => key.value === 'published');
       }
     },
 
+    addPointToCoordinates(coordinates){
+      let json = {
+        type: 'Feature',
+        geometry: {
+          type: 'Point',
+          coordinates: coordinates,
+        },
+        properties: {},
+      };
+      this.updateMap(json);
+      this.updateGeomField(json.geometry);
+      this.showGeoPositionBtn = false;
+      this.erreurGeolocalisationMessage = '';
+    },
+
     create_point_geoposition() {
       function success(position) {
-        const latitude = position.coords.latitude;
-        const longitude = position.coords.longitude;
-
-        var layer = L.circleMarker([latitude, longitude]);
-        this.add_layer_call_back(layer);
-        this.map.setView([latitude, longitude]);
+        this.addPointToCoordinates([position.coords.longitude, position.coords.latitude]);
       }
 
       function error(err) {
@@ -553,8 +716,8 @@ export default {
     },
 
     georeferencement() {
-      const url = `${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}exif-geom-reader/`;
-      let formData = new FormData();
+      const url = `${this.configuration.VUE_APP_DJANGO_API_BASE}exif-geom-reader/`;
+      const formData = new FormData();
       formData.append('image_file', this.file);
       axios
         .post(url, formData, {
@@ -564,26 +727,17 @@ export default {
         })
         .then((response) => {
           if (response.data.geom.indexOf('POINT') >= 0) {
-            let regexp = /POINT\s\((.*)\s(.*)\)/;
-            let arr = regexp.exec(response.data.geom);
-            let json = {
-              type: 'Feature',
-              geometry: {
-                type: 'Point',
-                coordinates: [parseFloat(arr[1]), parseFloat(arr[2])],
-              },
-              properties: {},
-            };
-            this.updateMap(json);
-            this.updateGeomField(json);
+            const regexp = /POINT\s\((.*)\s(.*)\)/;
+            const arr = regexp.exec(response.data.geom);
+            this.addPointToCoordinates([parseFloat(arr[1]), parseFloat(arr[2])]);
             // Set Attachment
             this.addAttachment({
               title: 'Localisation',
               info: '',
-              id: 'loc',
               attachment_file: this.file.name,
               fileToImport: this.file,
             });
+            this.toggleGeoRefModal();
           }
         })
 
@@ -598,24 +752,6 @@ export default {
         });
     },
 
-    initExtraForms(feature) {
-      function findCurrentValue(label) {
-        const field = feature.feature_data.find((el) => el.label === label);
-        return field ? field.value : null;
-      }
-      let extraForm = this.feature_type.customfield_set.map((field) => {
-        return {
-          ...field,
-          //* add value field to extra forms from feature_type and existing values if feature is defined
-          value:
-            feature && feature.feature_data
-              ? findCurrentValue(field.label)
-              : null,
-        };
-      });
-      this.$store.commit('feature/SET_EXTRA_FORM', extraForm);
-    },
-
     add_attachement_formset() {
       this.$store.commit('feature/ADD_ATTACHMENT_FORM', {
         dataKey: this.attachmentDataKey,
@@ -626,11 +762,7 @@ export default {
     addAttachment(attachment) {
       this.$store.commit('feature/ADD_ATTACHMENT_FORM', {
         dataKey: this.attachmentDataKey,
-        title: attachment.title,
-        attachment_file: attachment.attachment_file,
-        info: attachment.info,
-        fileToImport: attachment.fileToImport,
-        id: attachment.id,
+        ...attachment
       });
       this.attachmentDataKey += 1;
     },
@@ -652,20 +784,20 @@ export default {
       for (const linked of linkedFormset) {
         this.$store.commit('feature/ADD_LINKED_FORM', {
           dataKey: this.linkedDataKey,
-          relation_type: linked.relation_type,
-          feature_to: linked.feature_to,
+          ...linked
         });
         this.linkedDataKey += 1;
       }
     },
 
     updateStore() {
-      this.$store.commit('feature/UPDATE_FORM', {
+      return this.$store.commit('feature/UPDATE_FORM', {
         title: this.form.title.value,
         status: this.form.status.value,
         description: this.form.description,
+        assigned_member: this.form.assigned_member,
         geometry: this.form.geom.value,
-        feature_id: this.feature ? this.feature.feature_id : '',
+        feature_id: this.currentFeature ? this.currentFeature.id : '',
       });
     },
 
@@ -701,6 +833,13 @@ export default {
 
     checkAddedForm() {
       let isValid = true; //* fallback if all customForms returned true
+      if (this.$refs.extraForm) {
+        for (const extraForm of this.$refs.extraForm) {
+          if (extraForm.checkForm() === false) {
+            isValid = false;
+          }
+        }
+      }
       if (this.$refs.attachementForm) {
         for (const attachementForm of this.$refs.attachementForm) {
           if (attachementForm.checkForm() === false) {
@@ -718,22 +857,30 @@ export default {
       return isValid;
     },
 
-    postForm() {
-      let is_valid = true;
-      if (!this.feature_type.title_optional) {
-        is_valid =
-          this.checkFormTitle() &&
-          this.checkFormGeom() &&
-          this.checkAddedForm();
+    onSave() {
+      if (this.currentRouteName === 'editer-attribut-signalement') {
+        this.postMultipleFeatures();
       } else {
-        is_valid = this.checkFormGeom() && this.checkAddedForm();
+        this.postForm();
+      }
+    },
+
+    async postForm(extraForms) {
+      let response;
+      let is_valid = this.checkAddedForm();
+      // if not in the case of a non geographical feature type, check geometry's validity
+      if (this.feature_type && this.feature_type.geom_type !== 'none') {
+        is_valid = is_valid && this.checkFormGeom();
+      }
+      if (!this.feature_type.title_optional) {
+        is_valid = is_valid && this.checkFormTitle();
       }
 
       if (is_valid) {
         //* in a moderate project, at edition of a published feature by someone else than admin or moderator, switch published status to draft.
         if (
           this.project.moderation &&
-          this.currentRouteName === 'editer-signalement' &&
+          this.currentRouteName.includes('editer') &&
           this.form.status.value.value === 'published' &&
           !this.permissions.is_project_administrator &&
           !this.permissions.is_project_moderator
@@ -741,183 +888,84 @@ export default {
           this.form.status.value = { name: 'Brouillon', value: 'draft' };
           this.updateStore();
         }
-        this.$store.dispatch('feature/SEND_FEATURE', this.currentRouteName);
+        this.sendingFeature = true;
+        response = await this.$store.dispatch(
+          'feature/SEND_FEATURE',
+          {
+            routeName: this.currentRouteName,
+            query: this.$route.query,
+            extraForms// if multiple features, pass directly extraForms object to avoid mutating the store
+          }
+        );
+        this.sendingFeature = false;
+        return response;
       }
     },
 
-    //* ************* MAP *************** *//
+    async postMultipleFeatures() {
+      this.$store.commit('DISPLAY_LOADER', 'Envoi des signalements en cours...');
 
-    onFeatureTypeLoaded() {
-      var geomLeaflet = {
-        point: 'circlemarker',
-        linestring: 'polyline',
-        polygon: 'polygon',
-      };
-      var geomType = this.feature_type.geom_type;
-      var drawConfig = {
-        polygon: false,
-        marker: false,
-        polyline: false,
-        rectangle: false,
-        circle: false,
-        circlemarker: false,
+      const responses = [];
+      // loop over each selected feature id
+      for (const featureId of this.checkedFeatures) {
+        // get other infos from this feature to feel the form
+        const response = await this.$store.dispatch('feature/GET_PROJECT_FEATURE', {
+          project_slug: this.$route.params.slug,
+          feature_id: featureId,
+        });
+        if (response.status === 200) {
+          // fill title, status & description in store, required to send feature update request
+          this.initForm();
+          // create a new object of custom form to send directly with the request, to avoid multiple asynchronous mutation in store
+          const newXtraForms = [];
+          // parse each current custom form values to update the new custom form for this feature 
+          for (const extraForm of this.extra_forms) {
+            // copy current custom form to prevent modifying the original one
+            let newXtForm = { ...extraForm };
+            // if value wasn't changed in this page, get back previous value of the feature (rather than using feature orginal form, which is missing information to send in request)
+            if (newXtForm.value === null) {
+              newXtForm.value = this.currentFeature.properties[newXtForm.name];
+            }
+            newXtraForms.push(newXtForm);
+          }
+          const response = await this.postForm(newXtraForms);
+          responses.push(response);
+        }
+      }
+
+      this.$store.commit('DISCARD_LOADER');
+      const errors = responses.filter((res) => res === undefined || res.status !== 200).length > 0;
+      const message = {
+        comment: errors ? 'Des signalements n\'ont pas pu être mis à jour' : 'Les signalements ont été mis à jour',
+        level: errors ? 'negative' : 'positive'
       };
-      drawConfig[geomLeaflet[geomType]] = true;
-
-      L.drawLocal = {
-        draw: {
-          toolbar: {
-            actions: {
-              title: 'Annuler le dessin',
-              text: 'Annuler',
-            },
-            finish: {
-              title: 'Terminer le dessin',
-              text: 'Terminer',
-            },
-            undo: {
-              title: 'Supprimer le dernier point dessiné',
-              text: 'Supprimer le dernier point',
-            },
-            buttons: {
-              polyline: 'Dessiner une polyligne',
-              polygon: 'Dessiner un polygone',
-              rectangle: 'Dessiner un rectangle',
-              circle: 'Dessiner un cercle',
-              marker: 'Dessiner une balise',
-              circlemarker: 'Dessiner un point',
-            },
-          },
-          handlers: {
-            circle: {
-              tooltip: {
-                start: 'Cliquer et glisser pour dessiner le cercle.',
-              },
-              radius: 'Rayon',
-            },
-            circlemarker: {
-              tooltip: {
-                start: 'Cliquer sur la carte pour placer le point.',
-              },
-            },
-            marker: {
-              tooltip: {
-                start: 'Cliquer sur la carte pour placer la balise.',
-              },
-            },
-            polygon: {
-              tooltip: {
-                start: 'Cliquer pour commencer à dessiner.',
-                cont: 'Cliquer pour continuer à dessiner.',
-                end: 'Cliquer sur le premier point pour terminer le dessin.',
-              },
-            },
-            polyline: {
-              error: '<strong>Error:</strong> shape edges cannot cross!',
-              tooltip: {
-                start: 'Cliquer pour commencer à dessiner.',
-                cont: 'Cliquer pour continuer à dessiner.',
-                end: 'Cliquer sur le dernier point pour terminer le dessin.',
-              },
-            },
-            rectangle: {
-              tooltip: {
-                start: 'Cliquer et glisser pour dessiner le rectangle.',
-              },
-            },
-            simpleshape: {
-              tooltip: {
-                end: 'Relâcher la souris pour terminer de dessiner.',
-              },
-            },
-          },
-        },
-        edit: {
-          toolbar: {
-            actions: {
-              save: {
-                title: 'Sauver les modifications',
-                text: 'Sauver',
-              },
-              cancel: {
-                title:
-                  'Annuler la modification, annule toutes les modifications',
-                text: 'Annuler',
-              },
-              clearAll: {
-                title: "Effacer l'objet",
-                text: 'Effacer',
-              },
-            },
-            buttons: {
-              edit: "Modifier l'objet",
-              editDisabled: 'Aucun objet à modifier',
-              remove: "Supprimer l'objet",
-              removeDisabled: 'Aucun objet à supprimer',
-            },
-          },
-          handlers: {
-            edit: {
-              tooltip: {
-                text: "Faites glisser les marqueurs ou les balises pour modifier l'élément.",
-                subtext: 'Cliquez sur Annuler pour annuler les modifications..',
-              },
-            },
-            remove: {
-              tooltip: {
-                text: 'Cliquez sur un élément pour le supprimer.',
-              },
-            },
-          },
+      this.$store.commit('DISPLAY_MESSAGE', message);
+      this.$router.push({
+        name: 'liste-signalements',
+        params: {
+          slug: this.$route.params.slug,
         },
-      };
+      });
+    },
 
-      this.drawnItems = new L.FeatureGroup();
-      this.map.addLayer(this.drawnItems);
+    //* ************* MAP *************** *//
 
-      this.drawControlFull = new L.Control.Draw({
-        position: 'topright',
-        edit: {
-          featureGroup: this.drawnItems,
-        },
-        draw: drawConfig,
+    initMapTools() {
+      const geomType = this.feature_type.geom_type;
+      editionService.addEditionControls(geomType);
+      editionService.draw.on('drawend', (evt) => {
+        const feature = evt.feature;
+        this.updateGeomField(new GeoJSON().writeGeometry(feature.getGeometry(),{ dataProjection:'EPSG:4326',featureProjection:'EPSG:3857' }));
+        if (this.feature_type.geomType === 'point') {
+          this.showGeoPositionBtn = false;
+          this.erreurGeolocalisationMessage = '';
+        }
       });
-
-      this.drawControlEditOnly = new L.Control.Draw({
-        position: 'topright',
-        edit: {
-          featureGroup: this.drawnItems,
-        },
-        draw: false,
+      editionService.modify.on('modifyend', (evt) => {
+        let feature = evt.features.getArray()[0];
+        this.updateGeomField(new GeoJSON().writeGeometry(feature.getGeometry(),{ dataProjection:'EPSG:4326',featureProjection:'EPSG:3857' }));
       });
 
-      if (this.currentRouteName === 'editer-signalement') {
-        this.map.addControl(this.drawControlEditOnly);
-      } else {
-        this.map.addControl(this.drawControlFull);
-      }
-      this.changeMobileBtnOrder();
-
-      this.map.on(
-        'draw:created',
-        function (e) {
-          var layer = e.layer;
-          this.add_layer_call_back(layer);
-        }.bind(this)
-      );
-      //var wellknown;// TODO Remplacer par autre chose
-
-      this.map.on(
-        'draw:edited',
-        function (e) {
-          var layers = e.layers;
-          let self = this;
-          layers.eachLayer(function (layer) {
-            self.updateGeomField(layer.toGeoJSON());
-          });
-        }.bind(this)
-      );
-
       this.map.on(
         'draw:deleted',
         function () {
@@ -933,115 +981,77 @@ export default {
     },
 
     updateMap(geomFeatureJSON) {
-      if (this.drawnItems) this.drawnItems.clearLayers();
-      var geomType = this.feature_type.geom_type;
+      if (editionService.drawSource) {
+        editionService.drawSource.clear();
+      }
       if (geomFeatureJSON) {
-        var geomJSON = flip(geomFeatureJSON.geometry);
-        if (geomType === 'point') {
-          L.circleMarker(geomJSON.coordinates).addTo(this.drawnItems);
-        } else if (geomType === 'linestring') {
-          L.polyline(geomJSON.coordinates).addTo(this.drawnItems);
-        } else if (geomType === 'polygon') {
-          L.polygon(geomJSON.coordinates).addTo(this.drawnItems);
-        }
-        this.map.fitBounds(this.drawnItems.getBounds(), { padding: [25, 25] });
+        let retour = new GeoJSON().readFeature(geomFeatureJSON,{ dataProjection:'EPSG:4326',featureProjection:'EPSG:3857' });
+        editionService.initFeatureToEdit(retour);
+       
       } else {
         this.map.setView(
-          this.$store.state.configuration.DEFAULT_MAP_VIEW.center,
-          this.$store.state.configuration.DEFAULT_MAP_VIEW.zoom
+          this.configuration.DEFAULT_MAP_VIEW.center,
+          this.configuration.DEFAULT_MAP_VIEW.zoom
         );
       }
     },
 
-    updateGeomField(newGeom) {
-      this.form.geom.value = newGeom.geometry;
-      this.updateStore();
+    async updateGeomField(newGeom) {
+      this.form.geom.value = newGeom;
+      await this.updateStore();
     },
 
     initMap() {
+      this.mapLoading = true;
       var mapDefaultViewCenter =
-        this.$store.state.configuration.DEFAULT_MAP_VIEW.center;
+        this.configuration.DEFAULT_MAP_VIEW.center;
       var mapDefaultViewZoom =
-        this.$store.state.configuration.DEFAULT_MAP_VIEW.zoom;
+        this.configuration.DEFAULT_MAP_VIEW.zoom;
 
-      // Create the map, then init the layers and features
-      this.map = mapUtil.createMap(this.$refs.map, {
+      // Create the map, then init features
+      this.map = mapService.createMap(this.$refs.map, {
         mapDefaultViewCenter,
         mapDefaultViewZoom,
+        maxZoom: this.project.map_max_zoom_level,
+        interactions : { doubleClickZoom :false, mouseWheelZoom:true, dragPan:true },
+        fullScreenControl: true,
+        geolocationControl: true,
       });
       const currentFeatureId = this.$route.params.slug_signal;
-      setTimeout(() => {
-        let project_id = this.$route.params.slug.split('-')[0];
-        const mvtUrl = `${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}features.mvt/?tile={z}/{x}/{y}&project_id=${project_id}`;
-
-        mapUtil.addVectorTileLayer(
-          mvtUrl,
-          this.$route.params.slug,
-          this.$store.state.feature_type.feature_types
-        );
-      }, 1000);
-      const url = `${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}projects/${this.$route.params.slug}/feature/?feature_type__slug=${this.$route.params.slug_type_signal}&output=geojson`;
+      const url = `${this.configuration.VUE_APP_DJANGO_API_BASE}v2/features/?feature_type__slug=${this.$route.params.slug_type_signal}&project__slug=${this.$route.params.slug}&output=geojson`;
       axios
         .get(url)
         .then((response) => {
           const features = response.data.features;
-          if (features) {
+          if (features.length > 0) {
             const allFeaturesExceptCurrent = features.filter(
               (feat) => feat.id !== currentFeatureId
             );
-            mapUtil.addFeatures(
-              allFeaturesExceptCurrent,
-              {},
-              true,
-              this.$store.state.feature_type.feature_types
-            );
+            mapService.addFeatures({
+              addToMap: true,
+              project_slug: this.project.slug,
+              features: allFeaturesExceptCurrent,
+              featureTypes: this.feature_types,
+            });
             if (this.currentRouteName === 'editer-signalement') {
-              const currentFeature = features.filter(
-                (feat) => feat.id === currentFeatureId
-              )[0];
-              this.updateMap(currentFeature);
+              editionService.setFeatureToEdit(this.currentFeature);
+              this.updateMap(this.currentFeature);
             }
           }
+          this.mapLoading = false;
         })
         .catch((error) => {
+          this.mapLoading = false;
           throw error;
         });
-
-      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
-        mapUtil.updateOrder(event.detail.layers.slice().reverse());
-      });
     },
 
-    add_layer_call_back(layer) {
-      layer.addTo(this.drawnItems);
-      this.drawControlFull.remove(this.map);
-      this.drawControlEditOnly.addTo(this.map);
-      //var wellknown;// TODO Remplacer par autre chose
-      this.updateGeomField(layer.toGeoJSON());
-      if (this.feature_type.geomType === 'point') {
-        this.showGeoPositionBtn = false;
-        this.erreurGeolocalisationMessage = '';
-      }
+    enableSnap() {
+      editionService.addSnapInteraction(this.map);
     },
 
-    changeMobileBtnOrder() { //* move large toolbar for polygon creation, cutting map in the middle
-      function changeDisplay() {
-        let buttons = document.querySelector('.leaflet-draw-actions.leaflet-draw-actions-top.leaflet-draw-actions-bottom');
-        if (buttons && buttons.style) {
-          buttons.style.display = 'flex';
-          buttons.style['flex-direction'] = 'column';
-        }
-      }
-      if (window.screen.availWidth < 767) { //* change button order all the time to keep homogeinity on mobile
-        let wrapper = document.querySelector('.leaflet-top.leaflet-right');
-        if (wrapper) wrapper.appendChild(wrapper.children[0]);
-        if (this.feature_type.geom_type === 'polygon') { //* if it's a polygon, change tools direction to vertical
-          let polygonBtn = document.querySelector('.leaflet-draw-draw-polygon'); //* since elements are generated
-          if (polygonBtn) polygonBtn.addEventListener('click', changeDisplay); //* it should be done at each click
-        }
-      }
+    disableSnap() {
+      editionService.removeSnapInteraction(this.map);
     },
 
     getFeatureAttachments() {
@@ -1055,6 +1065,25 @@ export default {
         .getFeatureLinks(this.$route.params.slug_signal)
         .then((data) => this.addExistingLinkedFormset(data));
     },
+    /**
+     * Deletes the selected feature when the "Delete" or "Escape" key is pressed.
+     * The map element has been made focusable by adding tabindex=0.
+     */
+    initDeleteFeatureOnKey() {
+      // Add an event listener for key presses
+      document.addEventListener('keydown', function(event) {
+        // Check if the element with the ID "map" has focus
+        if ((event.key === 'Delete' || event.key === 'Escape') && document.activeElement.id === 'map') {
+          // If the conditions are met, call the deleteSelectedFeature function
+          editionService.removeFeatureFromMap();
+        }
+      });
+    },
+
+    setMemberAssigned(e) {
+      this.form.assigned_member.value = e;
+      this.updateStore();
+    }
   },
 };
 </script>
@@ -1065,6 +1094,13 @@ export default {
   width: 100%;
   border: 1px solid grey;
 }
+
+
+div.geolocation-container {
+  /* each button have .5em space between, zoom buttons are 60px high and full screen button is 34px high */
+  top: calc(1.3em + 60px + 34px);
+}
+  
 #get-geom-from-image-file {
   margin-bottom: 5px;
 }
@@ -1092,4 +1128,7 @@ export default {
 .leaflet-bottom {
   z-index: 800;
 }
+.extraform {
+  margin-bottom: 1em;
+}
 </style>

src/views/Feature/FeatureOffline.vue

@@ -16,7 +16,10 @@
       }"
       class="ui positive left labeled icon button margin-1"
     >
-      <i class="arrow left icon" />Retour au projet
+      <i
+        class="arrow left icon"
+        aria-hidden="true"
+      />Retour au projet
     </router-link>
   </div>
 </template>

src/views/FeatureType/FeatureTypeDetail.vue

 <template>
   <div
-    v-if="structure"
+    v-if="feature_type"
     id="feature-type-detail"
-    class="page"
   >
     <div class="ui stackable grid">
       <div class="five wide column">
-
-        <div class="ui attached secondary segment">
+        <div
+          id="feature-type-title"
+          class="ui attached secondary segment"
+        >
           <h1 class="ui center aligned header ellipsis">
             <img
-              v-if="structure.geom_type === 'point'"
+              v-if="feature_type.geom_type === 'point'"
               class="ui medium image"
+              alt="Géométrie point"
               src="@/assets/img/marker.png"
             >
             <img
-              v-if="structure.geom_type === 'linestring'"
+              v-if="feature_type.geom_type === 'linestring'"
               class="ui medium image"
+              alt="Géométrie ligne"
               src="@/assets/img/line.png"
             >
             <img
-              v-if="structure.geom_type === 'polygon'"
+              v-if="feature_type.geom_type === 'polygon'"
               class="ui medium image"
+              alt="Géométrie polygone"
               src="@/assets/img/polygon.png"
             >
-            {{ structure.title }}
+            <img
+              v-if="feature_type.geom_type === 'multipoint'"
+              class="ui medium image"
+              alt="Géométrie point"
+              src="@/assets/img/multimarker.png"
+            >
+            <img
+              v-if="feature_type.geom_type === 'multilinestring'"
+              class="ui medium image"
+              alt="Géométrie ligne"
+              src="@/assets/img/multiline.png"
+            >
+            <img
+              v-if="feature_type.geom_type === 'multipolygon'"
+              class="ui medium image"
+              alt="Géométrie polygone"
+              src="@/assets/img/multipolygon.png"
+            >
+            <span
+              v-if="feature_type.geom_type === 'none'"
+              class="ui medium image"
+              title="Aucune géométrie"
+            >
+              <i class="ui icon big outline file" />
+            </span>
+            {{ feature_type.title }}
           </h1>
         </div>
         <div class="ui attached segment">
@@ -39,10 +68,12 @@
                 </div>
               </div>
               <div class="value">
-                {{ features_count }}
+                {{ isOnline ? featuresCount : '?' }}
               </div>
-              <div class="label">
-                Signalement{{ features.length > 1 ? "s" : "" }}
+              <div
+                class="label"
+              >
+                Signalement{{ featuresCount > 1 || !isOnline ? "s" : "" }}
               </div>
             </div>
 
@@ -51,11 +82,11 @@
             </h3>
             <div class="ui divided list">
               <div
-                v-for="(field, index) in orderedCustomFields"
+                v-for="(field, index) in feature_type.customfield_set"
                 :key="field.name + index"
                 class="item"
               >
-                <div class="right floated content">
+                <div class="right floated content custom-field">
                   <div class="description">
                     {{ field.field_type }}
                   </div>
@@ -70,112 +101,171 @@
 
         <div class="ui bottom attached secondary segment">
           <div
-            v-if="permissions.can_create_feature"
+            v-if="user && permissions.can_create_feature"
             class="ui styled accordion"
+            data-test="features-import"
           >
             <div
-              :class="['title', { active: showImport }]"
+              id="toggle-show-import"
+              :class="['title', { active: showImport && isOnline, nohover: !isOnline }]"
               @click="toggleShowImport"
             >
-              <i class="dropdown icon" />
+              <i
+                class="dropdown icon"
+                aria-hidden="true"
+              />
               Importer des signalements
             </div>
-            <div :class="['content', { active: showImport }]">
-              <div
-                id="form-import-features"
-                class="ui form"
-                :class="loadingImportFile ? 'loading' : ''"
-              >
-                <div class="field">
-                  <label
-                    class="ui icon button ellipsis"
-                    for="json_file"
-                  >
-                    <i class="file icon" />
-                    <span class="label">{{ fileToImport.name }}</span>
-                  </label>
-                  <input
-                    id="json_file"
-                    type="file"
-                    accept="application/json, .json, .geojson"
-                    style="display: none"
-                    name="json_file"
-                    @change="onFileChange"
-                  >
-                </div>
-
-                <router-link
-                  v-if="
-                    IDGO &&
-                      permissions &&
-                      permissions.can_create_feature
-                  "
-                  :to="{
-                    name: 'catalog-import',
-                    params: {
-                      slug,
-                      feature_type_slug: $route.params.feature_type_slug
-                    },
-                  }"
-                  class="ui icon button import-catalog"
+            <div :class="['content', { active: showImport && isOnline }]">
+              <div class="field">
+                <label
+                  class="ui icon button ellipsis"
+                  for="json_file"
                 >
-                  Importer les signalements à partir de {{ CATALOG_NAME|| 'IDGO' }}
-                </router-link>
-                <div
-                  v-if="$route.params.geojson"
-                  class="ui button import-catalog basic active teal no-hover"
+                  <i
+                    class="file icon"
+                    aria-hidden="true"
+                  />
+                  <span class="label">{{ geojsonFileToImport.name }}</span>
+                </label>
+                <input
+                  id="json_file"
+                  type="file"
+                  accept="application/json, .json, .geojson"
+                  style="display: none"
+                  name="json_file"
+                  @change="onGeojsonFileChange"
                 >
-                  Ressource {{ $route.params.geojson.name }}
-                </div>
-                <ul
-                  v-if="importError"
-                  class="errorlist"
+              </div>
+
+              <div
+                v-if="feature_type.geom_type === 'point' || feature_type.geom_type === 'none'"
+                class="field"
+              >
+                <label
+                  class="ui icon button ellipsis"
+                  for="csv_file"
                 >
-                  <li>
-                    {{ importError }}
-                  </li>
-                </ul>
-                <button
-                  :disabled="fileToImport.size === 0 && !$route.params.geojson"
-                  class="ui fluid teal icon button"
-                  @click="importGeoJson"
+                  <i
+                    class="file icon"
+                    aria-hidden="true"
+                  />
+                  <span class="label">{{ csvFileToImport.name }}</span>
+                </label>
+                <input
+                  id="csv_file"
+                  type="file"
+                  accept="application/csv, .csv"
+                  style="display: none"
+                  name="csv_file"
+                  @change="onCsvFileChange"
                 >
-                  <i class="upload icon" /> Lancer l'import
-                </button>
-                <ImportTask
-                  v-if="importFeatureTypeData && importFeatureTypeData.length"
-                  :data="importFeatureTypeData"
-                  :reloading="reloadingImport"
-                />
               </div>
+              <router-link
+                v-if="
+                  IDGO &&
+                    permissions &&
+                    permissions.can_create_feature
+                "
+                :to="{
+                  name: 'catalog-import',
+                  params: {
+                    slug,
+                    feature_type_slug: $route.params.feature_type_slug
+                  },
+                }"
+                class="ui icon button import-catalog"
+              >
+                Importer les signalements à partir de {{ CATALOG_NAME|| 'IDGO' }}
+              </router-link>
+
+              <ul
+                v-if="importError"
+                class="errorlist"
+              >
+                <li>
+                  {{ importError }}
+                </li>
+              </ul>
+
+              <button
+                id="start-import"
+                :disabled="
+                  (geojsonFileToImport.size === 0 && !$route.params.geojson) &&
+                    (csvFileToImport.size === 0 && !$route.params.csv)
+                "
+                class="ui fluid teal icon button"
+                @click="geojsonFileToImport.size !== 0 ? importGeoJson() : importCSV()"
+              >
+                <i
+                  class="upload icon"
+                  aria-hidden="true"
+                />
+                Lancer l'import
+              </button>
+              <ImportTask
+                v-if="importsForFeatureType.length > 0"
+                ref="importTask"
+                :imports="importsForFeatureType"
+                @reloadFeatureType="reloadFeatureType"
+              />
             </div>
           </div>
-          <div class="ui styled accordion">
+          <div
+            class="ui styled accordion"
+            data-test="features-export"
+          >
             <div
-              :class="['title', { active: !showImport }]"
+              :class="['title', { active: !showImport && isOnline, nohover: !isOnline }]"
               @click="toggleShowImport"
             >
-              <i class="dropdown icon" />
+              <i
+                class="dropdown icon"
+                aria-hidden="true"
+              />
               Exporter les signalements
             </div>
-            <div :class="['content', { active: !showImport }]">
+            <div :class="['content', { active: !showImport && isOnline }]">
               <p>
                 Vous pouvez télécharger tous les signalements qui vous sont
                 accessibles.
               </p>
+              <select
+                v-model="exportFormat"
+                class="ui fluid dropdown"
+                style="margin-bottom: 1em;"
+              >
+                <option value="GeoJSON">
+                  {{ feature_type.geom_type === 'none' ? 'JSON' : 'GeoJSON' }}
+                </option>
+                <option
+                  v-if="feature_type.geom_type === 'point' || feature_type.geom_type === 'none'"
+                  value="CSV"
+                >
+                  CSV
+                </option>
+              </select>
               <button
+                :class="{ loading: exportLoading }"
                 type="button"
                 class="ui fluid teal icon button"
                 @click="exportFeatures"
               >
-                <i class="download icon" /> Exporter
+                <i
+                  class="download icon"
+                  aria-hidden="true"
+                />
+                Exporter
               </button>
             </div>
           </div>
         </div>
       </div>
 
-      <div class="nine wide column">
+      <div
+        v-if="isOnline"
+        class="nine wide column"
+      >
         <h3 class="ui header">
           Derniers signalements
         </h3>
@@ -189,11 +279,12 @@
         </div>
         <div
           v-if="
-            importFeatureTypeData &&
-              importFeatureTypeData.length &&
-              importFeatureTypeData.some((el) => el.status === 'pending')
+            importsForFeatureType &&
+              importsForFeatureType.length &&
+              importsForFeatureType.some((el) => el.status === 'pending')
           "
           class="ui message info"
+          data-test="wait-import-message"
         >
           <p>
             Des signalements sont en cours d'import. Pour suivre le statut de
@@ -213,43 +304,48 @@
           v-for="(feature, index) in lastFeatures"
           :key="feature.feature_id + index"
           class="ui small header"
+          data-test="last-features"
         >
           <span
             v-if="feature.status === 'archived'"
             data-tooltip="Archivé"
           >
-            <i class="grey archive icon" />
+            <i
+              class="grey archive icon"
+              aria-hidden="true"
+            />
           </span>
           <span
             v-else-if="feature.status === 'pending'"
             data-tooltip="En attente de publication"
           >
-            <i class="teal hourglass outline icon" />
+            <i
+              class="teal hourglass outline icon"
+              aria-hidden="true"
+            />
           </span>
           <span
             v-else-if="feature.status === 'published'"
             data-tooltip="Publié"
           >
-            <i class="olive check icon" />
+            <i
+              class="olive check icon"
+              aria-hidden="true"
+            />
           </span>
           <span
             v-else-if="feature.status === 'draft'"
             data-tooltip="Brouillon"
           >
-            <i class="orange pencil alternate icon" />
+            <i
+              class="orange pencil alternate icon"
+              aria-hidden="true"
+            />
           </span>
-          <router-link
-            :to="{
-              name: 'details-signalement',
-              params: {
-                slug,
-                slug_type_signal: $route.params.feature_type_slug,
-                slug_signal: feature.feature_id,
-              },
-            }"
-          >
-            {{ feature.title || feature.feature_id }}
-          </router-link>
+          <FeatureFetchOffsetRoute
+            :feature-id="feature.feature_id"
+            :properties="feature"
+          />
           <div class="sub header">
             <div>
               {{
@@ -260,7 +356,7 @@
             </div>
             <div>
               [ Créé le {{ feature.created_on | formatDate }}
-              <span v-if="$store.state.user">
+              <span v-if="user">
                 par {{ feature.display_creator }}</span>
               ]
             </div>
@@ -271,14 +367,17 @@
           :to="{ name: 'liste-signalements', params: { slug } }"
           class="ui right labeled icon button margin-25"
         >
-          <i class="right arrow icon" />
+          <i
+            class="right arrow icon"
+            aria-hidden="true"
+          />
           Voir tous les signalements
         </router-link>
         <router-link
-          v-if="permissions.can_create_feature"
+          v-if="permissions.can_create_feature && feature_type.geom_type && !feature_type.geom_type.includes('multi')"
           :to="{
             name: 'ajouter-signalement',
-            params: { slug_type_signal: structure.slug },
+            params: { slug_type_signal: feature_type.slug },
           }"
           class="ui icon button button-hover-green margin-25"
         >
@@ -286,29 +385,54 @@
         </router-link>
         <br>
       </div>
+      <div
+        v-else
+        class="nine wide column"
+      >
+        <h3 class="ui header">
+          Derniers signalements
+        </h3>
+        <div class="ui message info">
+          <p>
+            Information non disponible en mode déconnecté.
+          </p>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
+import { csv } from 'csvtojson';
+
 import { mapActions, mapMutations, mapGetters, mapState } from 'vuex';
+import { formatStringDate, transformProperties } from '@/utils';
+
+import FeatureFetchOffsetRoute from '@/components/Feature/FeatureFetchOffsetRoute';
 import ImportTask from '@/components/ImportTask';
 import featureAPI from '@/services/feature-api';
+import { fileConvertSizeToMo, determineDelimiter, parseCSV, checkLonLatValues } from '@/assets/js/utils';
 
-import { fileConvertSizeToMo } from '@/assets/js/utils';
+const geojsonFileToImport = {
+  name: 'Sélectionner un fichier GeoJSON ...',
+  size: 0,
+};
+const csvFileToImport = {
+  name: 'Sélectionner un fichier CSV ...',
+  size: 0,
+};
 
 export default {
   name: 'FeatureTypeDetail',
   
   components: {
-    ImportTask: ImportTask,
+    FeatureFetchOffsetRoute,
+    ImportTask,
   },
 
   filters: {
     formatDate(value) {
-      let date = new Date(value);
-      date = date.toLocaleString().replace(',', ' à');
-      return date.substr(0, date.length - 3); //* quick & dirty way to remove seconds from date
+      return formatStringDate(value);
     },
   },
 
@@ -317,113 +441,72 @@ export default {
       type: Object,
       default: null,
     },
+    csv: {
+      type: Object,
+      default: null,
+    },
   },
 
   data() {
     return {
       importError: '',
-      fileToImport: {
-        name: 'Sélectionner un fichier GeoJSON ...',
-        size: 0,
-      },
+      geojsonFileToImport,
+      csvFileToImport,
       showImport: false,
       slug: this.$route.params.slug,
+      featureTypeSlug: this.$route.params.feature_type_slug,
       featuresLoading: true,
       loadingImportFile: false,
       waitMessage: false,
-      reloadingImport: false,
+      exportFormat: 'GeoJSON',
+      exportLoading: false,
+      lastFeatures: [],
+      featuresCount: 0,
     };
   },
 
   computed: {
     ...mapGetters([
-      'permissions'
+      'permissions',
     ]),
     ...mapGetters('projects', [
       'project'
     ]),
+    ...mapGetters('feature-type', [
+      'feature_type'
+    ]),
     ...mapState([
       'reloadIntervalId',
       'configuration',
+      'isOnline',
+      'user',
     ]),
     ...mapState('projects', [
       'project'
     ]),
-    ...mapState('feature', [
-      'features',
-      'features_count'
-    ]),
     ...mapState('feature-type', [
       'feature_types',
-      'importFeatureTypeData'
+      'importFeatureTypeData',
+      'selectedPrerecordedListValues'
     ]),
+    importsForFeatureType() { // filter import task datas only for this feature type
+      if (this.importFeatureTypeData) {
+        return this.importFeatureTypeData.filter((el) => el.feature_type_title === this.featureTypeSlug);
+      }
+      return [];
+    },
     CATALOG_NAME() {
       return this.configuration.VUE_APP_CATALOG_NAME;
     },
     IDGO() {
       return this.$store.state.configuration.VUE_APP_IDGO;
     },
-    structure: function () {
-      if (Object.keys(this.feature_types).length) {
-        let st = this.feature_types.find(
-          (el) => el.slug === this.$route.params.feature_type_slug
-        );
-        if (st) return st;
-      }
-      return {};
-    },
-
-    feature_type_features: function () {
-      if (this.features.length)
-        return this.features.filter(
-          (el) => el.feature_type.slug === this.$route.params.feature_type_slug
-        );
-      return {};
-    },
-
-    lastFeatures: function () {
-      if (this.feature_type_features.length)
-        return this.feature_type_features.slice(0, 5);
-      return [];
-    },
-
-    orderedCustomFields() {
-      if (Object.keys(this.structure).length)
-        return [...this.structure.customfield_set].sort(
-          (a, b) => a.position - b.position
-        );
-      return {};
-    },
   },
 
   watch: {
-    structure(newValue) {
-      if (newValue.slug) {
-        this.GET_IMPORTS({
-          feature_type: this.$route.params.feature_type_slug
-        });
-      }
-    },
-
-    importFeatureTypeData: {
-      deep: true,
-      handler(newValue, oldValue) {
-        if (newValue && newValue.some(el => el.status === 'pending')) {
-          setTimeout(() => {
-            this.reloadingImport = true;
-            this.GET_IMPORTS({
-              feature_type: this.$route.params.feature_type_slug
-            }).then(()=> {
-              setTimeout(() => {
-                this.reloadingImport = false;
-              }, 1000);
-            });
-          }, this.$store.state.configuration.VUE_APP_RELOAD_INTERVAL);
-        } else if (oldValue && oldValue.some(el => el.status === 'pending')) {
-          this.getLastFeatures();
-        }
-      }
-    },
+    feature_type(newValue) {
+      this.toggleJsonUploadOption(newValue);
+    }
   },
 
   created() {
@@ -431,170 +514,481 @@ export default {
       this.$store.dispatch('projects/GET_PROJECT', this.slug);
       this.$store.dispatch('projects/GET_PROJECT_INFO', this.slug);
     }
-    this.$store.commit('feature/SET_FEATURES', []); //* empty remaining features in case they were in geojson format and will be fetch anyway
-    this.getLastFeatures();
     this.SET_CURRENT_FEATURE_TYPE_SLUG(
-      this.$route.params.feature_type_slug
+      this.featureTypeSlug
     );
+    this.$store.dispatch('feature-type/GET_IMPORTS', {
+      project_slug:  this.$route.params.slug,
+      feature_type: this.featureTypeSlug
+    });
+    this.getLastFeatures();
     if (this.$route.params.type === 'external-geojson') {
       this.showImport = true;
     }
+    // empty prerecorded lists in case the list has been previously loaded with a limit in other component like ExtraForm 
+    this.SET_PRERECORDED_LISTS([]);
+    // This function is also called by watcher at this stage, but to be safe in edge case
+    this.toggleJsonUploadOption(this.feature_type);
   },
 
+
   methods: {
+    ...mapMutations([
+      'DISPLAY_MESSAGE',
+    ]),
     ...mapMutations('feature-type', [
-      'SET_CURRENT_FEATURE_TYPE_SLUG'
+      'SET_CURRENT_FEATURE_TYPE_SLUG',
+      'SET_FILE_TO_IMPORT',
+      'SET_PRERECORDED_LISTS'
     ]),
     ...mapActions('feature-type', [
-      'GET_IMPORTS'
+      'GET_PROJECT_FEATURE_TYPES',
+      'GET_SELECTED_PRERECORDED_LIST_VALUES',
+      'SEND_FEATURES_FROM_CSV',
     ]),
     ...mapActions('feature', [
       'GET_PROJECT_FEATURES'
     ]),
+
+    getLastFeatures() {
+      let url = `${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}projects/${this.slug}/feature-paginated/?feature_type_slug=${this.featureTypeSlug}&ordering=-created_on&limit=5&offset=0`;
+      featureAPI.getPaginatedFeatures(url)
+        .then((data) => {
+          if (data) {
+            this.lastFeatures = data.results;
+            this.featuresCount = data.count;
+          }
+          this.featuresLoading = false;
+        });
+    },
+
+    reloadFeatureType() {
+      this.GET_PROJECT_FEATURE_TYPES(this.slug);
+      this.getLastFeatures();
+    },
     
     toggleShowImport() {
       this.showImport = !this.showImport;
-      if (this.showImport) {
-        this.GET_IMPORTS({
-          feature_type: this.$route.params.feature_type_slug
-        });
-      }
     },
 
-    transformProperties(prop) {
-      const type = typeof prop;
-      const date = new Date(prop);
-      if (type === 'boolean') {
-        return 'boolean';
-      } else if (Number.isSafeInteger(prop)) {
-        return 'integer';
-      } else if (
-        type === 'string' &&
-        ['/', ':', '-'].some((el) => prop.includes(el)) && // check for chars found in datestring
-        date instanceof Date &&
-        !isNaN(date.valueOf())
-      ) {
-        return 'date';
-      } else if (type === 'number' && !isNaN(parseFloat(prop))) {
-        return 'decimal';
+    /**
+     * In the case of a non geographical feature type, replace geoJSON by JSON in file to upload options
+     *
+     * @param {Object} featureType - The current featureType.
+     */
+    toggleJsonUploadOption(featureType) {
+      if (featureType && featureType.geom_type === 'none') {
+        this.geojsonFileToImport = {
+          name: 'Sélectionner un fichier JSON ...',
+          size: 0,
+        };
       }
-      return 'char'; //* string by default, most accepted type in database
     },
 
-    checkJsonValidity(json) {
+    async checkPreRecordedValue(fieldValue, listName) {
+      const fieldLabel = fieldValue.label || fieldValue;
+      // encode special characters like apostrophe or white space
+      const encodedPattern = encodeURIComponent(fieldLabel);
+      // query existing prerecorded list values (with label to limit results in response, there could be many) and escape special characters, since single quote causes error in backend
+      await this.GET_SELECTED_PRERECORDED_LIST_VALUES({ name: listName, pattern: encodedPattern });
+      // check if the value exist in available prerecorded list values
+      return this.selectedPrerecordedListValues[listName].some((el) => el.label === fieldLabel);        
+    },
+
+    /**
+     * Validates the imported data against the pre-determined field types.
+     *
+     * This function iterates over all imported features and checks if each property's value matches
+     * the expected type specified in the feature type schema. It accommodates specific type conversions,
+     * such as allowing numerical strings for 'char' or 'text' fields and converting string representations
+     * of booleans and lists as necessary.
+     *
+     * @param {Array} features - The array of imported features to validate.
+     * @returns {boolean} Returns true if all features pass the validation; otherwise, false with an error message.
+     */
+    async isValidTypes(features) {
       this.importError = '';
-      const fields = this.structure.customfield_set.map((el) => {
+      
+      // Extract relevant field type information from the feature type schema
+      const fields = this.feature_type.customfield_set.map((el) => {
         return {
           name: el.name,
           field_type: el.field_type,
           options: el.options,
         };
       });
-      for (const feature of json.features) {
+      let count = 1;
+      for (const feature of features) {
+        this.$store.commit('DISPLAY_LOADER', `Vérification du signalement ${count} sur ${features.length}`);
         for (const { name, field_type, options } of fields) {
-          if (name in feature.properties) {
-            const fieldInFeature = feature.properties[name];
-            const customType = this.transformProperties(fieldInFeature);
-            //* if custom field value is not null, then check validity of field
-            if (fieldInFeature !== null) {
-              //* if field type is list, it's not possible to guess from value type
+          const properties = feature.properties || feature;
+          
+          if (name in properties) {
+            let fieldInFeature = properties[name];
+
+            // Convert boolean strings from CSV to actual booleans
+            if (field_type === 'boolean') {
+              fieldInFeature = fieldInFeature === 'True' ? true : (fieldInFeature === 'False' ? false : fieldInFeature);
+            }
+
+            const customType = transformProperties(fieldInFeature);
+
+            // Validate field only if it has a non-null, non-empty, defined value
+            if (fieldInFeature !== null && fieldInFeature !== '' && fieldInFeature !== undefined) {
+              
+              // Handle 'list' type by checking if value is among the defined options
               if (field_type === 'list') {
-                //*then check if the value is an available option
                 if (!options.includes(fieldInFeature)) {
+                  this.importError = `Fichier invalide: La valeur "${fieldInFeature}" n'est pas une option valide dans le champ "${name}" du signalement "${properties.title}".`;
+                  this.$store.commit('DISCARD_LOADER');
+                  return false;
+                }
+
+              // Handle 'pre_recorded_list' by checking if the value matches pre-recorded options
+              } else if (field_type === 'pre_recorded_list') {
+                if (typeof fieldInFeature === 'string' && fieldInFeature.charAt(0) === '{') { // data from CSV come as string, if it doesn't start with bracket then it should not be converted to an object and stay as a string, since the structure has been simplified: https://redmine.neogeo.fr/issues/18740
+                  try {
+                    const jsonStr = fieldInFeature.replace(/['‘’"]\s*label\s*['‘’"]\s*:/g, '"label":')
+                      .replace(/:\s*['‘’"](.+?)['‘’"]\s*(?=[,}])/g, ':"$1"');
+                    fieldInFeature = JSON.parse(jsonStr);
+                  } catch (e) {
+                    console.error(e);
+                    this.DISPLAY_MESSAGE({ comment: `La valeur "${fieldInFeature}" n'a pas pu être vérifiée dans le champ "${name}" du signalement "${properties.title}"` });
+                  }
+                }
+                let fieldLabel = fieldInFeature.label || fieldInFeature;
+                const isPreRecordedValue = await this.checkPreRecordedValue(fieldLabel, options[0]);
+                if (!isPreRecordedValue) {
+                  this.importError = `Fichier invalide: La valeur "${fieldLabel}" ne fait pas partie des valeurs pré-enregistrées dans le champ "${name}" du signalement "${properties.title}".`;
+                  this.$store.commit('DISCARD_LOADER');
+                  return false;
+                }
+
+              // Handle 'multi_choices_list' by checking if each value in the array is among the defined options
+              } else if (field_type === 'multi_choices_list') {
+                if (typeof fieldInFeature === 'string' && fieldInFeature.charAt(0) === '[') { // data from CSV come as string, if it doesn't start with bracket then there's no need to convert it to an array
+                  try {
+                    fieldInFeature = JSON.parse(fieldInFeature.replaceAll('\'', '"'));
+                  } catch (e) {
+                    console.error(e);
+                    this.DISPLAY_MESSAGE({ comment: `La valeur "${fieldInFeature}" n'a pas pu être vérifiée dans le champ "${name}" du signalement "${properties.title}"` });
+                  }
+                }
+                // Check that the value is an array before asserting its validity
+                if (Array.isArray(fieldInFeature)) {
+                  const invalidValues = fieldInFeature.filter((el) => !options.includes(el));
+                  if (invalidValues.length > 0) {
+                    const plural = invalidValues.length > 1;
+                    this.importError = `Fichier invalide: ${plural ? 'Les valeurs' : 'La valeur'} "${invalidValues.join(', ')}" ${plural ? 'ne sont pas des options valides' : 'n\'est pas une option valide'}
+                      dans le champ "${name}" du signalement "${properties.title}".`;
+                    this.$store.commit('DISCARD_LOADER');
+                    return false;
+                  }
+                } else {
+                  this.importError = `Fichier invalide: La valeur "${fieldInFeature}" doit être un tableau dans le champ "${name}" du signalement "${properties.title}".`;
+                  this.$store.commit('DISCARD_LOADER');
                   return false;
                 }
-              } else if (customType !== field_type) {
-                //* check if custom field value match
-                this.importError = `Le fichier est invalide: Un champ de type ${field_type} ne peut pas avoir la valeur [ ${fieldInFeature} ]`;
+
+              // Validate custom field value type
+              } else if (customType !== field_type &&
+              // at feature type at creation, in case the value was 0, since it can be either float or integer, by default we've set its type as a float
+              // when importing features, to avoid an error with different types, we bypass this check when the incoming feature value is a integer while the feature type says it should be a float
+                !(
+                  // Allow integers where decimals are expected
+                  (customType === 'integer' && field_type === 'decimal') ||
+                  // Allow numbers formatted as strings when 'char' or 'text' type is expected
+                  ((customType === 'integer' || customType === 'float') && field_type === 'char' || field_type === 'text') ||
+                  // Allow 'char' values where 'text' (multiline string) is expected
+                  (customType === 'char' && field_type === 'text')
+                )
+              ) {
+                this.importError = `Fichier invalide : Le type de champ "${field_type}" ne peut pas avoir la valeur "${fieldInFeature}" dans le champ "${name}" du signalement "${properties.title}".`;
+                this.$store.commit('DISCARD_LOADER');
                 return false;
               }
             }
           }
         }
+        count +=1;
       }
+      this.$store.commit('DISCARD_LOADER');
       return true;
     },
 
-    onFileChange(e) {
+    /**
+     * Checks the validity of a CSV string. It ensures the CSV uses a recognized delimiter,
+     * contains 'lat' and 'lon' headers, and that these columns contain decimal values within valid ranges.
+     * Additionally, it verifies the consistency and presence of data in the CSV, and that the types of values are valid.
+     *
+     * @param {string} csvString - The CSV content in string format.
+     * @returns {boolean|Promise<boolean>} Returns a boolean or a Promise resolving to a boolean,
+     *                                      indicating the validity of the CSV.
+     */
+    async checkCsvValidity(csvString) {
+      this.importError = '';
+
+      // Determine the delimiter of the CSV
+      const delimiter = determineDelimiter(csvString);
+      if (!delimiter) {
+        this.importError = `Le fichier ${this.csvFileToImport.name} n'est pas formaté correctement`;
+        return false;
+      }
+
+      // Parse the CSV string into rows
+      const rows = parseCSV(csvString, delimiter);
+
+      // Extract headers
+      const headers = rows.shift();
+      if (this.feature_type.geom_type !== 'none') {
+        // Check for required fields 'lat' and 'lon' in headers
+        if (!headers.includes('lat') || !headers.includes('lon')) {
+          this.importError = 'Les champs obligatoires "lat" et "lon" sont absents des headers.';
+          return false;
+        }
+        // Verify the presence and validity of coordinate values
+        const hasCoordValues = checkLonLatValues(headers, rows);
+        if (!hasCoordValues) {
+          this.importError = 'Les valeurs de "lon" et "lat" ne sont pas valides ou absentes.';
+          return false;
+        }
+
+      } 
+
+      // Ensure there are data rows after the headers
+      if (rows.length === 0) {
+        this.importError = 'Aucune donnée trouvée après les en-têtes.';
+        return false;
+      }
+
+      // Ensure that each row has the same number of columns as the headers
+      if (rows.some(row => row.length !== headers.length)) {
+        this.importError = 'Incohérence dans le nombre de colonnes par ligne.';
+        return false;
+      }
+
+      // Convert the CSV string to a JSON object for further processing
+      const jsonFromCsv = await csv({ delimiter }).fromString(csvString);
+
+      // Validate the types of values in the JSON object
+      const validity = await this.isValidTypes(jsonFromCsv);
+      return validity;
+    },
+
+    /**
+     * Handles the change event for GeoJSON file input. This function is triggered when a user selects a file.
+     * It reads the file, checks its validity if it's not too large, and updates the component state accordingly.
+     *
+     * @param {Event} e - The event triggered by file input change.
+     */
+    async onGeojsonFileChange(e) {
+      // Start loading process
       this.loadingImportFile = true;
+
+      // Clear any previously selected CSV file to avoid confusion
+      this.csvFileToImport = csvFileToImport;
+
+      // Retrieve the files from the event
       const files = e.target.files || e.dataTransfer.files;
+      
+      // If no file is selected, stop the loading process and return
       if (!files.length) {
         this.loadingImportFile = false;
         return;
       }
 
-      let reader = new FileReader();
-      reader.addEventListener('load', (e) => {
-        // bypass json check for files larger then 10 Mo
+      const reader = new FileReader();
+
+      /**
+       * Asynchronously processes the content of the file.
+       * Checks the validity of the GeoJSON file if it's smaller than a certain size.
+       * Updates the state with the GeoJSON file if it's valid.
+       *
+       * @param {string} fileContent - The content of the file read by FileReader.
+       */
+      const processFile = async (fileContent) => {
         let jsonValidity;
-        if (parseFloat(fileConvertSizeToMo(files[0])) <= 10) {
-          jsonValidity = this.checkJsonValidity(JSON.parse(e.target.result));
+
+        // Check the file size and determine the GeoJSON validity
+        if (parseFloat(fileConvertSizeToMo(files[0].size)) <= 10) {
+          // If the file is smaller than 10 Mo, check its validity
+          try {
+            const json = JSON.parse(fileContent);
+            jsonValidity = await this.isValidTypes(json.features || json);
+          } catch (error) {
+            this.DISPLAY_MESSAGE({ comment: error, level: 'negative' });
+            jsonValidity = false;
+          }
         } else {
+          // Assume validity for larger files
           jsonValidity = true;
         }
 
+        // If the GeoJSON is valid, update the component state with the file and set the file in store
         if (jsonValidity) {
-          this.fileToImport = files[0]; // todo : remove this value from state as it stored (first attempt didn't work)
-          this.$store.commit(
-            'feature-type/SET_FILE_TO_IMPORT',
-            this.fileToImport
-          );
+          this.geojsonFileToImport = files[0];
+          this.SET_FILE_TO_IMPORT(this.geojsonFileToImport);
+        } else {
+          // Clear any previously selected geojson file to disable import button
+          this.geojsonFileToImport = geojsonFileToImport;
+          this.toggleJsonUploadOption(this.feature_type);
         }
+
+        // Stop the loading process
         this.loadingImportFile = false;
-      });
+      };
+
+      // Setup the load event listener for FileReader
+      reader.addEventListener('load', (e) => processFile(e.target.result));
+
+      // Read the text from the selected file
+      reader.readAsText(files[0]);
+    },
+
+    /**
+     * Handles the change event for CSV file input. This function is triggered when a user selects a file.
+     * It reads the file, checks its validity if it's not too large, and updates the component state accordingly.
+     *
+     * @param {Event} e - The event triggered by file input change.
+     */
+    async onCsvFileChange(e) {
+      // Start loading process
+      this.loadingImportFile = true;
+
+      // Clear any previously selected geojson file to avoid confusion
+      this.geojsonFileToImport = geojsonFileToImport;
+      this.toggleJsonUploadOption(this.feature_type);
+
+      // Retrieve the files from the event
+      const files = e.target.files || e.dataTransfer.files;
+      
+      // If no file is selected, stop the loading process and return
+      if (!files.length) {
+        this.loadingImportFile = false;
+        return;
+      }
+
+      // Create a new FileReader to read the selected file
+      const reader = new FileReader();
+
+      /**
+       * Asynchronously processes the content of the file.
+       * Checks the validity of the CSV file if it's smaller than a certain size.
+       * Updates the state with the CSV file if it's valid.
+       *
+       * @param {string} fileContent - The content of the file read by FileReader.
+       */
+      const processFile = async (fileContent) => {
+        let csvValidity;
+
+        // Check the file size and determine the CSV validity
+        if (parseFloat(fileConvertSizeToMo(files[0].size)) <= 10) {
+          // If the file is smaller than 10 Mo, check its validity
+          csvValidity = await this.checkCsvValidity(fileContent);
+        } else {
+          // Assume validity for larger files
+          csvValidity = true;
+        }
+
+        // If the CSV is valid, update the component state with the file
+        if (csvValidity) {
+          this.csvFileToImport = files[0]; // TODO: Remove this value from state as it is stored (first attempt didn't work)
+          this.SET_FILE_TO_IMPORT(this.csvFileToImport);
+        } else {
+          // Clear any previously selected geojson file to disable import button
+          this.csvFileToImport = csvFileToImport;
+        }
+
+        // Stop the loading process
+        this.loadingImportFile = false;
+      };
+
+      // Setup the load event listener for FileReader
+      reader.addEventListener('load', (e) => processFile(e.target.result));
+
+      // Read the text from the selected file
       reader.readAsText(files[0]);
     },
 
     importGeoJson() {
       this.waitMessage = true;
-      let payload = {
+      const payload = {
         slug: this.slug,
-        feature_type_slug: this.$route.params.feature_type_slug,
+        feature_type_slug: this.featureTypeSlug,
       };
       if (this.$route.params.geojson) { //* import after redirection, for instance with data from catalog
         payload['geojson'] = this.$route.params.geojson;
-      } else if (this.fileToImport.size > 0) { //* import directly from geojson
-        payload['fileToImport'] = this.fileToImport;
+      } else if (this.geojsonFileToImport.size > 0) { //* import directly from geojson
+        payload['fileToImport'] = this.geojsonFileToImport;
       } else {
-        this.importError = "La ressource n'a pas pu être récupéré.";
+        this.importError = 'La ressource n\'a pas pu être récupéré.';
         return;
       }
       this.$store.dispatch('feature-type/SEND_FEATURES_FROM_GEOJSON', payload)
         .then(() => {
           this.waitMessage = false;
+          this.$refs.importTask.fetchImports();
         });
     },
 
-    exportFeatures() {
-      const url = `${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}projects/${this.slug}/feature-type/${this.$route.params.feature_type_slug}/export/`;
-      featureAPI.getFeaturesBlob(url).then((blob) => {
-        if (blob) {
-          const link = document.createElement('a');
-          link.href = URL.createObjectURL(blob);
-          link.download = `${this.project.title}-${this.structure.title}.json`;
-          link.click();
-          URL.revokeObjectURL(link.href);
-        }
-      });
+    importCSV() {
+      this.waitMessage = true;
+      const payload = {
+        slug: this.slug,
+        feature_type_slug: this.featureTypeSlug,
+      };
+      if (this.$route.params.csv) { //* import after redirection, for instance with data from catalog
+        payload['csv'] = this.$route.params.csv;
+      } else if (this.csvFileToImport.size > 0) { //* import directly from csv file
+        payload['fileToImport'] = this.csvFileToImport;
+      } else {
+        this.importError = "La ressource n'a pas pu être récupéré.";
+        return;
+      }
+      this.SEND_FEATURES_FROM_CSV(payload)
+        .then(() => {
+          this.waitMessage = false;
+          this.$refs.importTask.fetchImports();
+        });
     },
-    async getLastFeatures(){
-      const response = await 
-      this.GET_PROJECT_FEATURES({
-        project_slug:  this.slug,
-        feature_type__slug : this.$route.params.feature_type_slug,
-        ordering: '-created_on',
-        limit: '5'
-      });
 
-      if (response) {
-        this.featuresLoading = false;
-      }
+    exportFeatures() {
+      this.exportLoading = true;
+      let exportFormat = this.feature_type.geom_type === 'none' && this.exportFormat === 'GeoJSON' ? 'json' : this.exportFormat.toLowerCase();
+      const url = `
+        ${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}projects/${this.slug}/feature-type/${this.featureTypeSlug}/export/?format_export=${exportFormat}
+      `;
+      featureAPI.getFeaturesBlob(url)
+        .then((blob) => {
+          if (blob) {
+            const link = document.createElement('a');
+            link.href = URL.createObjectURL(blob);
+            link.download = `${this.project.title}-${this.feature_type.title}.${exportFormat}`;
+            link.click();
+            setTimeout(function(){
+              URL.revokeObjectURL(link.href); 
+            }, 1000);
+          }
+          this.exportLoading = false;
+        })
+        .catch(() => {
+          this.exportLoading = false;
+        });
     },
   },
 };
 </script>
 
-<style scoped>
+<style scoped lang="less">
+
+#feature-type-title i {
+  color: #000000;
+  margin: auto;
+}
+.custom-field.content {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 .margin-25 {
   margin: 0 0.25em 0.25em 0 !important;
 }
@@ -603,7 +997,24 @@ export default {
   margin-bottom: 1em;
 }
 
-.no-hover {
+.nohover, .nohover:hover {
   cursor: default;
 }
+
+.ui.styled.accordion .nohover.title:hover {
+  color: rgba(0, 0, 0, .4);
+}
+
+.ui.styled.accordion {
+  .content {
+    .field {
+      label {
+        width: 100%;
+      }
+    }
+    .import-catalog {
+      width: 100%;
+    }
+  }
+}
 </style>
\ No newline at end of file

src/views/FeatureType/FeatureTypeDisplay.vue

+<template>
+  <div id="displayCustomisation">
+    <div
+      :class="{ active: loading }"
+      class="ui inverted dimmer"
+    >
+      <div class="ui loader" />
+    </div>
+    
+    <h1 v-if="project && feature_type">
+      Modifier l'affichage sur la carte des signalements de type "{{ feature_type.title }}" pour le
+      projet "{{ project.title }}"
+    </h1>
+    
+    <section id="symbology">
+      <h3>Symbologie</h3>
+      <form
+        id="form-symbology-edit"
+        action=""
+        method="post"
+        enctype="multipart/form-data"
+        class="ui form"
+      >
+        <SymbologySelector
+          v-if="feature_type"
+          id="default"
+          :init-color="feature_type.color"
+          :init-icon="feature_type.icon"
+          :init-opacity="feature_type.opacity"
+          :geom-type="feature_type.geom_type"
+          @set="setDefaultStyle"
+        />
+        <div
+          v-if="customizableFields.length > 0"
+          class="fields inline"
+        >
+          <label
+            id="customfield-select-label"
+            for="customfield-select"
+          >
+            Champ de personnalisation de la symbologie:
+          </label>
+          <div id="custom_types-dropdown">
+            <Dropdown
+              :options="customizableFields"
+              :selected="selectedCustomfield"
+              :selection.sync="selectedCustomfield"
+              :clearable="true"
+            />
+          </div>
+        </div>
+        <div
+          v-if="selectedCustomfield"
+          id="customFieldSymbology"
+          class="field"
+        >
+          <SymbologySelector
+            v-for="option of selectedFieldOptions"
+            :id="option"
+            :key="option"
+            :title="option"
+            :init-color="feature_type.colors_style.value ?
+              feature_type.colors_style.value.colors[option] ?
+                feature_type.colors_style.value.colors[option].value :
+                feature_type.colors_style.value.colors[option]
+              : null
+            "
+            :init-icon="feature_type.colors_style.value ?
+              feature_type.colors_style.value.icons[option] :
+              null
+            "
+            :init-opacity="getOpacity(feature_type, option)"
+            :geom-type="feature_type.geom_type"
+            @set="setColorsStyle"
+          />
+        </div>
+      </form>
+    </section>
+
+    <div class="ui divider" />
+
+    <section
+      v-if="feature_type && feature_type.customfield_set"
+      id="popupDisplay"
+    >
+      <h3>Prévisualisation des champs personnalisés de l'info-bulle</h3>
+      <table
+        id="table-fields-to-display"
+        class="ui definition single line compact table"
+        aria-describedby="Liste des champs à afficher"
+      >
+        <thead>
+          <tr>
+            <th scope="col">
+              Prévisualisation du champ
+            </th>
+            <th scope="col">
+              Champ
+            </th>
+            <th scope="col">
+              Type
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="field in featureAnyFields"
+            :key="field.name"
+            :class="{ first_customfield: feature_type.customfield_set[0] &&
+              field.name === feature_type.customfield_set[0].name }"
+          >
+            <td
+              scope="row" 
+              class="collapsing center aligned"
+            >
+              <div class="ui toggle checkbox">
+                <input
+                  :checked="form.displayed_fields.includes(field.name)"
+                  type="checkbox"
+                  @input="toggleDisplay($event, field.name)"
+                >
+                <label />
+              </div>
+            </td>
+            <td scope="row">
+              {{ field.name }} ({{ field.label }})
+            </td>
+            <td scope="row">
+              {{ field.field_type || getCustomFieldType(field.field_type) }}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </section>
+
+    <section id="notification">
+      <h3>Configuration de la notification d'abonnement</h3>
+      <div class="ui form">
+        <div class="field">
+          <div class="ui checkbox">
+            <input
+              id="enable_key_doc_notif"
+              v-model="form.enable_key_doc_notif"
+              class="hidden"
+              name="enable_key_doc_notif"
+              type="checkbox"
+            >
+            <label for="enable_key_doc_notif">Activer la notification de publication de pièces jointes</label>
+          </div>
+        </div>
+        <div class="field">
+          <div class="ui checkbox">
+            <input
+              id="disable_notification"
+              v-model="form.disable_notification"
+              class="hidden"
+              name="disable_notification"
+              type="checkbox"
+            >
+            <label for="disable_notification">Désactiver les notifications</label>
+          </div>
+        </div>
+      </div>
+    </section>
+    
+    <button
+      id="save-display"
+      class="ui teal icon button margin-25"
+      type="button"
+      :disabled="!canSaveDisplayConfig"
+      @click="sendDisplayConfig"
+    >
+      <i
+        class="white save icon"
+        aria-hidden="true"
+      />
+      Sauvegarder l'affichage du type de signalement
+    </button>
+  </div>
+</template>
+
+<script>
+import { isEqual } from 'lodash';
+
+import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
+
+import { customFieldTypeChoices, featureNativeFields } from '@/utils';
+import SymbologySelector from '@/components/FeatureType/SymbologySelector.vue';
+import Dropdown from '@/components/Dropdown.vue';
+
+
+export default {
+  name: 'FeatureTypeDisplay',
+
+  components: {
+    SymbologySelector,
+    Dropdown,
+  },
+
+  data() {
+    return {
+      loading: false,
+      form: {
+        color: '#000000',
+        icon: 'circle',
+        colors_style: {
+          fields: [],
+          colors: {},
+          icons: {},
+          opacities: {},
+          custom_field_name: '',
+          value: {
+            colors: {},
+            icons: {},
+            opacities: {},
+          }
+        },
+        displayed_fields: ['status', 'feature_type', 'updated_on'],
+        enable_key_doc_notif: false,
+        disable_notification: false,
+      },
+      canSaveDisplayConfig: false
+    };
+  },
+
+  computed: {
+    ...mapState('projects', [
+      'project'
+    ]),
+    ...mapState('feature-type', [
+      'customForms',
+      'colorsStyleList'
+    ]),
+    ...mapGetters('feature-type', [
+      'feature_type'
+    ]),
+    customizableFields() {
+      if (this.feature_type) {
+        let options = this.feature_type.customfield_set.filter(el => el.field_type === 'list' || el.field_type === 'char' || el.field_type === 'boolean');
+        options = options.map((el) => {
+          return { name: [el.name, this.getCustomFieldType(el.field_type)], value: el };
+        });
+        return options;
+      }
+      return [];
+    },
+    selectedFieldOptions() {
+      if (this.selectedCustomfield) {
+        const customFieldSet = this.feature_type.customfield_set.find(el => el.name === this.selectedCustomfield);
+        if (customFieldSet) {
+          if (customFieldSet.options && customFieldSet.options.length > 0) {
+            return customFieldSet.options;
+          } else if (customFieldSet.field_type === 'char') {
+            return ['Vide', 'Non vide'];
+          } else if (customFieldSet.field_type === 'boolean') {
+            return ['Décoché', 'Coché'];
+          }
+        }
+      }
+      return [];
+    },
+    selectedCustomfield: {
+      get() {
+        return this.form.colors_style.custom_field_name;
+      },
+      set(newValue) {
+        if (newValue !== undefined) {
+          this.form.colors_style.custom_field_name = newValue.value ? newValue.value.name : null;
+        }
+      }
+    },
+    featureAnyFields() {
+      return [...featureNativeFields, ...this.feature_type.customfield_set];
+    }
+  },
+
+  watch: {
+    feature_type(newValue) {
+      // In which case the feature type would change while on this page ?
+      if (newValue) {
+        this.initForm();
+      }
+    },
+    form: {
+      deep: true,
+      handler(newValue) {
+        // checks if they are changes to be saved to enable save button
+        if (isEqual(newValue, {
+          color: this.feature_type.color, 
+          icon: this.feature_type.icon,
+          opacity: this.feature_type.opacity,
+          colors_style: this.feature_type.colors_style,
+          displayed_fields: this.feature_type.displayed_fields,
+          enable_key_doc_notif: this.feature_type.enable_key_doc_notif,
+          disable_notification: this.feature_type.disable_notification
+        })) {
+          this.canSaveDisplayConfig = false;
+        } else {
+          this.canSaveDisplayConfig = true;
+        }
+      }
+    }
+  },
+
+  created() {
+    if (!this.project) {
+      this.GET_PROJECT(this.$route.params.slug);
+      this.GET_PROJECT_INFO(this.$route.params.slug);
+    }
+    this.SET_CURRENT_FEATURE_TYPE_SLUG(this.$route.params.slug_type_signal);
+    if (this.feature_type) {
+      this.initForm();
+    } else {
+      this.loading = true;
+      this.GET_PROJECT_FEATURE_TYPES(this.$route.params.slug)
+        .then(() => {
+          this.initForm();
+          // TODO : Use the global loader and get rid of this redondant loader
+          this.loading = false;
+        })
+        .catch(() => {
+          this.loading = false;
+        });
+    }
+  },
+
+  methods: {
+    ...mapMutations('feature-type', [
+      'SET_CURRENT_FEATURE_TYPE_SLUG'
+    ]),
+    ...mapActions('feature-type', [
+      'SEND_FEATURE_DISPLAY_CONFIG',
+      'GET_PROJECT_FEATURE_TYPES'
+    ]),
+    ...mapActions('projects', [
+      'GET_PROJECT',
+      'GET_PROJECT_INFO',
+    ]),
+  
+    initForm() {
+      this.form.color = JSON.parse(JSON.stringify(this.feature_type.color)); //? wouldn't be better to use lodash: https://medium.com/@pmzubar/why-json-parse-json-stringify-is-a-bad-practice-to-clone-an-object-in-javascript-b28ac5e36521
+      this.form.icon = JSON.parse(JSON.stringify(this.feature_type.icon)); //? since the library is already imported ?
+      this.form.colors_style = {
+        ...this.form.colors_style,
+        ...JSON.parse(JSON.stringify(this.feature_type.colors_style))
+      };
+      if (!this.form.colors_style.value['opacities']) { //* if the opacity values were never setted (but why would it happen, is it necessary ?)
+        this.form.colors_style.value['opacities'] = {};
+      }
+      if (this.feature_type.colors_style && Object.keys(this.feature_type.colors_style.colors).length > 0) {
+        const coloredCustomField = this.feature_type.customfield_set.find(
+          el => el.name === this.feature_type.colors_style.custom_field_name
+        );
+        if (coloredCustomField) { 
+          this.selectedCustomfield = coloredCustomField.name;
+        }
+      }
+      if (this.feature_type && this.feature_type.displayed_fields) {
+        this.form.displayed_fields = [...this.feature_type.displayed_fields];
+      }
+      this.form.enable_key_doc_notif = this.feature_type.enable_key_doc_notif;
+      this.form.disable_notification = this.feature_type.disable_notification;
+    },
+
+    setDefaultStyle(e) {
+      const { color, icon, opacity } = e.value;
+      this.form.color = color.value;
+      this.form.icon = icon;
+      this.form.opacity = opacity;
+    },
+
+    setColorsStyle(e) {
+      const { name, value } = e;
+      const { color, icon, opacity } = value;
+      this.form.colors_style.colors[name] = color;
+      this.form.colors_style.icons[name] = icon;
+      this.form.colors_style.opacities[name] = opacity;
+      this.form.colors_style.value.colors[name] = color;
+      this.form.colors_style.value.icons[name] = icon;
+      this.form.colors_style.value.opacities[name] = opacity; //? why do we need to duplicate values ? for MVT ?
+    },
+
+    toggleDisplay(evt, name) {
+      if (evt.target.checked) {
+        this.form.displayed_fields.push(name);
+      } else {
+        this.form.displayed_fields = this.form.displayed_fields.filter(el => el !== name);
+      } 
+    },
+
+    sendDisplayConfig() {
+      this.loading = true;
+      this.SEND_FEATURE_DISPLAY_CONFIG(this.form)
+        .then(() => {
+          this.loading = false;
+          this.$router.push({
+            name: 'project_detail',
+            params: {
+              slug: this.$route.params.slug,
+              message: { comment: `La modification de l'affichage du type de signalement "${this.feature_type.title}" a été prise en compte.`, level: 'positive' }
+            },
+          });
+        })
+        .catch((err) => {
+          console.error(err);
+          this.$store.commit('DISPLAY_MESSAGE', {
+            comment: `Une erreur est survenue pendant l'envoi des modifications de l'affichage du type de signalement "${this.feature_type.title}"`,
+            level: 'negative'
+          });
+          this.loading = false;
+        });
+    },
+
+    getOpacity(feature_type, optionName) {
+      if (feature_type.colors_style.value && feature_type.colors_style.value.opacities) {
+        return feature_type.colors_style.value.opacities[optionName];
+      }
+      return null;
+    },
+
+    getCustomFieldType(fieldType) {
+      return customFieldTypeChoices.find(el => el.value === fieldType).name;
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+#displayCustomisation {
+  h1 {
+    margin-top: 1em;
+  }
+  form {
+    text-align: left;
+    margin-left: 1em;
+    #customfield-select-label {
+      font-weight: 600;
+      font-size: 1.1em;
+    }
+    #custom_types-dropdown {
+      margin: 1em;
+      && > .dropdown {
+        width: 50%;
+      }
+    } 
+  }
+}
+
+
+section {
+  padding: 1.5em 0;
+  // shrink toggle background width and height
+  .ui.toggle.checkbox .box::after, .ui.toggle.checkbox label::after {
+    height: 15px;
+    width: 15px;
+  }
+  .ui.toggle.checkbox .box, .ui.toggle.checkbox label {
+    padding-left: 2.5rem;
+  }
+  // reduce toggle button width and height
+  .ui.toggle.checkbox .box::before, .ui.toggle.checkbox label::before {
+    height: 15px;
+    width: 35px;
+  }
+  // adjust toggled button placement
+  .ui.toggle.checkbox input:checked ~ .box::after, .ui.toggle.checkbox input:checked ~ label::after {
+    left: 20px;
+  }
+  .ui.toggle.checkbox .box, .ui.toggle.checkbox label, .ui.toggle.checkbox {
+    min-height: 15px;
+  }
+  table {
+    border-collapse: collapse;
+  }
+  tr.first_customfield td {
+    border-top-width: 4px !important;
+  }
+}
+
+</style>

src/views/FeatureType/Feature_type_edit.vue → src/views/FeatureType/FeatureTypeEdit.vue

 <template>
-  <div v-frag>
-    <div
-      id="message"
-      class="fullwidth"
-    >
-      <div
-        v-if="error"
-        class="ui negative message"
-      >
-        <p><i class="cross icon" /> {{ error }}</p>
-      </div>
-    </div>
+  <div id="feature-type-edit">
     <div class="fourteen wide column">
       <div
         :class="{ active: loading }"
@@ -21,9 +10,6 @@
       <form
         v-if="project"
         id="form-type-edit"
-        action=""
-        method="post"
-        enctype="multipart/form-data"
         class="ui form"
       >
         <h1 v-if="action === 'create'">
@@ -64,7 +50,10 @@
             </ul>
           </div>
 
-          <div class="required field">
+          <div
+            id="geometry-type"
+            :class="['required field', { disabled: csv }]"
+          >
             <label :for="form.geom_type.id_for_label">{{
               form.geom_type.label
             }}</label>
@@ -74,22 +63,6 @@
               :selection.sync="selectedGeomType"
             />
           </div>
-
-          <div
-            v-if="selectedGeomType !== 'Point'"
-            class="required field"
-          >
-            <label :for="form.color.id_for_label">{{ form.color.label }}</label>
-            <input
-              :id="form.color.id_for_label"
-              v-model="form.color.value"
-              type="color"
-              required
-              style="width: 100%; height: 38px"
-              :name="form.color.html_name"
-              @blur="updateStore"
-            >
-          </div>
         </div>
         <div class="field">
           <div class="ui checkbox">
@@ -103,50 +76,31 @@
             <label :for="form.title_optional.html_name">{{ form.title_optional.label }}</label>
           </div>
         </div>
-
-        <!--  //* s'affiche après sélection d'option de type liste dans type de champ -->
-        <div
-          v-if="colorsStyleList.length > 0 && selectedGeomType !== 'Point'"
-          id="id_style_container"
-          class="custom_style"
-        >
-          <div
-            id="id_list_selection"
-            class="list_selection"
-          >
-            <Dropdown
-              :options="colorsStyleList"
-              :selected="selected_colors_style"
-              :selection.sync="selected_colors_style"
-              :placeholder="'Sélectionner la liste de valeurs'"
-            />
+        <div class="field">
+          <div class="ui checkbox">
+            <input
+              :id="form.enable_key_doc_notif.html_name"
+              v-model="form.enable_key_doc_notif.value"
+              class="hidden"
+              :name="form.enable_key_doc_notif.html_name"
+              type="checkbox"
+            >
+            <label :for="form.enable_key_doc_notif.html_name">{{ form.enable_key_doc_notif.label }}</label>
           </div>
-          <div
-            id="id_colors_selection"
-            class="colors_selection"
-            hidden
-          >
-            <div
-              v-for="(value, key, index) in form.colors_style.value.colors"
-              :key="'colors_style-' + index"
+        </div>
+        <div class="field">
+          <div class="ui checkbox">
+            <input
+              :id="form.disable_notification.html_name"
+              v-model="form.disable_notification.value"
+              class="hidden"
+              :name="form.disable_notification.html_name"
+              type="checkbox"
             >
-              <div
-                v-if="key"
-                class="color-input"
-              >
-                <label>{{ key }}</label><input
-                  :name="key"
-                  type="color"
-                  :value="value"
-                  @input="setColorStyles"
-                >
-              </div>
-            </div>
+            <label :for="form.disable_notification.html_name">{{ form.disable_notification.label }}</label>
           </div>
         </div>
 
-        <span v-if="action === 'duplicate' || action === 'edit'" />
-
         <div id="formsets">
           <FeatureTypeCustomForm
             v-for="customForm in customForms"
@@ -165,27 +119,38 @@
           class="ui compact basic button"
           @click="addCustomForm"
         >
-          <i class="ui plus icon" />Ajouter un champ personnalisé
+          <i
+            class="ui plus icon"
+            aria-hidden="true"
+          />
+          Ajouter un champ personnalisé
         </button>
 
         <div class="ui divider" />
         <button
-          class="ui teal icon button margin-25"
+          id="send-feature_type"
+          :class="['ui teal icon button margin-25', { disabled: loading }]"
           type="button"
           @click="sendFeatureType"
         >
-          <i class="white save icon" />
+          <i
+            class="white save icon"
+            aria-hidden="true"
+          />
           {{ action === "create" ? "Créer" : "Sauvegarder" }} le type de
           signalement
         </button>
         <button
-          v-if="geojson"
-          class="ui teal icon button margin-25"
+          v-if="geojson || csv || json"
+          :class="['ui teal icon button margin-25', { disabled: loading }]"
           type="button"
           @click="postFeatureTypeThenFeatures"
         >
-          <i class="white save icon" />
-          Créer et importer le(s) signalement(s) du geojson
+          <i
+            class="white save icon"
+            aria-hidden="true"
+          />
+          Créer et importer le(s) signalement(s) du {{ geojson ? 'geojson' : csv ? 'csv' : 'json' }}
         </button>
       </form>
     </div>
@@ -193,18 +158,16 @@
 </template>
 
 <script>
-import frag from 'vue-frag';
+
 import { mapGetters, mapState, mapMutations, mapActions } from 'vuex';
+
 import Dropdown from '@/components/Dropdown.vue';
-import FeatureTypeCustomForm from '@/components/feature_type/FeatureTypeCustomForm.vue';
+import FeatureTypeCustomForm from '@/components/FeatureType/FeatureTypeCustomForm.vue';
+import { transformProperties, reservedKeywords } from'@/utils';
 
 export default {
   name: 'FeatureTypeEdit',
 
-  directives: {
-    frag,
-  },
-
   components: {
     Dropdown,
     FeatureTypeCustomForm,
@@ -215,6 +178,14 @@ export default {
       type: Object,
       default: null,
     },
+    csv: {
+      type: Array,
+      default: null,
+    },
+    json: {
+      type: Array,
+      default: null,
+    },
   },
 
   data() {
@@ -222,11 +193,12 @@ export default {
       loading: false,
       action: 'create',
       dataKey: 0,
-      error: null,
+      csvFields: null,
       geomTypeChoices: [
         { value: 'linestring', name: 'Ligne' },
         { value: 'point', name: 'Point' },
         { value: 'polygon', name: 'Polygone' },
+        { value: 'none', name: 'Aucune' },
       ],
       form: {
         colors_style: {
@@ -250,7 +222,7 @@ export default {
           id_for_label: 'title',
           label: 'Titre',
           field: {
-            max_length: 128, // ! Vérifier la valeur dans django
+            max_length: 128,
           },
           html_name: 'title',
           value: null,
@@ -262,32 +234,31 @@ export default {
           label: 'Titre du signalement optionnel',
           value: false,
         },
+        enable_key_doc_notif: {
+          errors: null,
+          id_for_label: 'enable_key_doc_notif',
+          html_name: 'enable_key_doc_notif',
+          label: 'Activer la notification de publication de pièces jointes',
+          value: false,
+        },
+        disable_notification: {
+          errors: null,
+          id_for_label: 'disable_notification',
+          html_name: 'disable_notification',
+          label: 'Désactiver les notifications',
+          value: false,
+        },
         geom_type: {
           id_for_label: 'geom_type',
           label: 'Type de géométrie',
           field: {
-            max_length: 128, // ! Vérifier la valeur dans django
+            max_length: 128,
           },
           html_name: 'geom_type',
           value: 'point',
         },
       },
       slug: this.$route.params.slug,
-      reservedKeywords: [
-        // todo : add keywords for mapstyle (strokewidth...)
-        'title',
-        'description',
-        'status',
-        'created_on',
-        'updated_on',
-        'archived_on',
-        'deletion_on',
-        'feature_type',
-        'display_creator',
-        'display_last_editor',
-        'project',
-        'creator',
-      ],
     };
   },
 
@@ -362,14 +333,16 @@ export default {
     },
     customForms(newValue, oldValue) {
       if (newValue !== oldValue) {
-        const name = this.form.colors_style.value.custom_field_name;
-        const customField = this.customForms.find((el) => el.name === name);
-        if (!customField || customField.length === 0) {
-          //* if the customForm corresponding doesn't exist reset colors_style values
-          this.form.colors_style.value = {
-            colors: {},
-            custom_field_name: '',
-          };
+        // Retrieve custom_field_name; returns undefined if colors_style.value is null/undefined
+        const customFieldName = this.form.colors_style.value?.custom_field_name;
+
+        // Determine if a custom field with the given name exists in customForms
+        // 'some' returns true if any element matches the condition
+        const customFieldExists = customFieldName && this.customForms.some(el => el.name === customFieldName);
+
+        // Reset colors_style if no corresponding custom field is found
+        if (!customFieldExists) {
+          this.form.colors_style.value = { colors: {}, custom_field_name: '' };
         }
       }
     },
@@ -403,12 +376,18 @@ export default {
     //* when creation from a geojson
     if (this.geojson) {
       this.importGeoJsonFeatureType();
-      if (this.fileToImport && this.fileToImport.name) {
-        this.form.title.value = // * use the filename as title by default
-        this.fileToImport.name.split('.')[0];
-      } else { //* case when the geojson comes from datasud catalog
-        this.form.title.value = this.geojson.name;// * use the typename as title by default
-      }
+      //* add multiple geometries options available only for geojson (therefore when importing from catalog also)
+      this.geomTypeChoices.push(
+        { value: 'multilinestring', name: 'Multiligne' },
+        { value: 'multipoint', name: 'Multipoint' },
+        { value: 'multipolygon', name: 'Multipolygone' },
+      );
+    }
+    if (this.csv) {
+      this.importCSVFeatureType();
+    }
+    if (this.json) {
+      this.importJsonFeatureType();
     }
   },
   beforeDestroy() {
@@ -418,6 +397,9 @@ export default {
   },
 
   methods: {
+    ...mapMutations([
+      'DISPLAY_MESSAGE',
+    ]),
     ...mapMutations('feature-type', [
       'ADD_CUSTOM_FORM',
       'EMPTY_FORM',
@@ -467,10 +449,12 @@ export default {
     fillFormData(formData) {
       for (const el in formData) {
         // * find feature_type and fill form values
-        if (this.form[el]) this.form[el].value = formData[el];
+        if (this.form[el]) {
+          this.form[el].value = formData[el];
+        }
       }
       //! add custom fields using ONLY this function, incrementing dataKey for Vue to correctly update components
-      formData.customfield_set.forEach((el) => this.addCustomForm(el));
+      [...formData.customfield_set].forEach((el) => this.addCustomForm(el));
       this.updateStore();
     },
 
@@ -491,7 +475,7 @@ export default {
         }
         //* if modified or deleted
       } else {
-        let modifiedColorStyle = {};
+        const modifiedColorStyle = {};
         for (const [index, key] of newOptions.entries()) {
           //* if no key then item will disappear (deleted)
           if (key) {
@@ -508,6 +492,8 @@ export default {
         color: this.form.color,
         title: this.form.title,
         title_optional: this.form.title_optional,
+        enable_key_doc_notif: this.form.enable_key_doc_notif,
+        disable_notification: this.form.disable_notification,
         geom_type: this.form.geom_type,
         colors_style: this.form.colors_style,
       });
@@ -515,12 +501,13 @@ export default {
 
     checkCustomForms() {
       let is_valid = true;
-      if (this.$refs.customForms)
+      if (this.$refs.customForms) {
         for (const customForm of this.$refs.customForms) {
           if (customForm.checkCustomForm() === false) {
             is_valid = false;
           }
         }
+      }
       return is_valid; //* fallback if all customForms returned true
     },
 
@@ -554,34 +541,73 @@ export default {
       const requestType = this.action === 'edit' ? 'put' : 'post';
       if (this.checkForms()) {
         this.SEND_FEATURE_TYPE(requestType)
-          .then(({ status }) => {
+          .then((response) => {
+            const { status, data } = response;
             if (status === 200) {
-              this.goBackToProject('Le type de signalement a été mis à jour');
+              this.goBackToProject({ comment: 'Le type de signalement a été mis à jour', level: 'positive' });
             } else if (status === 201) {
-              this.goBackToProject('Le nouveau type de signalement a été créé');
+              this.goBackToProject({ comment: 'Le nouveau type de signalement a été créé', level: 'positive' });
             } else {
-              this.displayMessage(
-                "Une erreur est survenue lors de l'import du type de signalement"
-              );
+              let comment = 'Une erreur est survenue lors de l\'import du type de signalement';
+              if (data.customfield_set) {
+                let errors =  data.customfield_set.find((el) => el.options);
+                if (errors.options) {
+                  let customFieldError =  errors.options[0];
+                  if(customFieldError) comment = customFieldError[0].replace('ce champ', 'chaque option de champ personnalisé');
+                }
+              }
+              this.DISPLAY_MESSAGE({
+                comment,
+                level: 'negative'
+              });
             }
           });
       }
     },
 
-    postFeatures(feature_type_slug) {
+    postGeojsonFeatures(feature_type_slug) {
       this.SEND_FEATURES_FROM_GEOJSON({
         slug: this.slug,
         feature_type_slug,
-        geojson: this.geojson
+        geojson: this.geojson || this.json
       })
         .then((response) => {
           if (response && response.status === 200) {
-            this.goBackToProject();
+            this.goBackToProject({
+              comment: 'Le nouveau type de signalement a été créé. L\'import des signalements est en cours',
+              level: 'positive'
+            });
+          } else {
+            this.DISPLAY_MESSAGE({
+              comment: `Une erreur est survenue lors de l'import de signalements.\n ${ response.data.detail }`,
+              level: 'negative'
+            });
+          }
+          this.loading = false;
+        })
+        .catch(() => {
+          this.loading = false;
+        });
+    },
+
+    postCSVFeatures(feature_type_slug) {
+      this.$store
+        .dispatch('feature-type/SEND_FEATURES_FROM_CSV', {
+          slug: this.slug,
+          feature_type_slug,
+          csv: this.csv
+        })
+        .then((response) => {
+          if (response && response.status === 200) {
+            this.goBackToProject({
+              comment: 'Le nouveau type de signalement a été créé. Import des signalements est en cours',
+              level: 'positive'
+            });
           } else {
-            this.displayMessage(
-              "Une erreur est survenue lors de l'import de signalements.\n " +
-                response.data.detail
-            );
+            this.DISPLAY_MESSAGE({
+              comment: `Une erreur est survenue lors de l'import de signalements.\n ${ response.data.detail }`,
+              level: 'negative'
+            });
           }
           this.loading = false;
         })
@@ -598,7 +624,11 @@ export default {
           .dispatch('feature-type/SEND_FEATURE_TYPE', requestType)
           .then(({ feature_type_slug }) => {
             if (feature_type_slug) {
-              this.postFeatures(feature_type_slug);
+              if (this.geojson || this.json) {
+                this.postGeojsonFeatures(feature_type_slug);
+              } else if (this.csv) {
+                this.postCSVFeatures(feature_type_slug);
+              }
             } else {
               this.loading = false;
             }
@@ -609,13 +639,6 @@ export default {
       }
     },
 
-    displayMessage(message) {
-      this.error = message;
-      document
-        .getElementById('message')
-        .scrollIntoView({ block: 'end', inline: 'nearest' });
-    },
-
     // ****** Methodes for geojson import ****** //
     toNewFeatureType() {
       this.$router.push({
@@ -624,59 +647,119 @@ export default {
       });
     },
 
-    translateLabel(value) {
-      if (value === 'LineString') {
-        return 'linestring';
-      } else if (value === 'Polygon' || value === 'MultiPolygon') {
-        return 'polygon';
+    /**
+     * Builds custom form fields based on the properties of data entries.
+     *
+     * This function iterates through a subset of data entries (such as rows from a CSV, JSON objects, or GeoJSON features)
+     * to determine the most appropriate type for each field. It tracks confirmed types to avoid redundant checks and 
+     * stops processing a field once its type is definitively determined. If a field is initially detected as a 'char',
+     * it remains as 'char' unless a multiline text ('text') is detected later. The function prioritizes the detection 
+     * of definitive types (like 'text', 'boolean', 'integer') and updates the form with the confirmed types.
+     *
+     * @param {Array} propertiesList - An array of data entries, where each entry is an object representing a set of properties.
+     */
+
+    buildCustomForm(propertiesList) {
+      const confirmedTypes = {};  // Store confirmed types for each field
+      const detectedAsChar = {};  // Track fields initially detected as 'char'
+
+      // Iterate over each row or feature in the subset
+      propertiesList.forEach((properties) => {
+        for (const [key, val] of Object.entries(properties)) {
+          if (!reservedKeywords.includes(key)) {
+
+            // If the type for this field has already been confirmed as something other than 'char', skip it
+            if (confirmedTypes[key] && confirmedTypes[key] !== 'char') {
+              continue;
+            }
+
+            // Determine the type of the current value
+            const detectedType = transformProperties(val);
+
+            if (detectedType === 'text') {
+              // Once 'text' (multiline) is detected, confirm it immediately
+              confirmedTypes[key] = 'text';
+            } else if (!confirmedTypes[key] && detectedType !== 'char') {
+              // If a type is detected that is not 'char' and not yet confirmed, confirm it
+              confirmedTypes[key] = detectedType;
+            } else if (!confirmedTypes[key]) {
+              // If this field hasn't been confirmed yet, initialize it as 'char'
+              confirmedTypes[key] = 'char';
+              detectedAsChar[key] = true;
+            } else if (detectedAsChar[key] && detectedType !== 'char') {
+              // If a field was initially detected as 'char' but now has a different type, update it
+              confirmedTypes[key] = detectedType;
+              delete detectedAsChar[key];  // Remove from 'char' tracking once updated
+            }
+          }
+        }
+      });
+
+      // Build custom forms using the confirmed types
+      for (const [key, confirmedType] of Object.entries(confirmedTypes)) {
+        const customForm = {
+          label: { value: key || '' },
+          name: { value: key || '' },
+          position: this.dataKey, // use dataKey already incremented by addCustomForm
+          field_type: { value: confirmedType }, // use the confirmed type
+          options: { value: [] }, // not available in export
+        };
+        this.addCustomForm(customForm);
       }
-      return 'point';
     },
 
-    transformProperties(prop) {
-      const type = typeof prop;
-      const date = new Date(prop);
-      if (type === 'boolean') {
-        return 'boolean';
-      } else if (Number.isSafeInteger(prop)) {
-        return 'integer';
-      } else if (
-        type === 'string' &&
-        date instanceof Date &&
-        !isNaN(date.valueOf())
-      ) {
-        return 'date';
-      } else if (type === 'number' && !isNaN(parseFloat(prop))) {
-        return 'decimal';
+    setTitleFromFile() {
+      if (this.fileToImport && this.fileToImport.name) {
+        this.form.title.value = // * use the filename as title by default
+          this.fileToImport.name.split('.')[0];
+      } else { //* case when the data comes from datasud catalog
+        // * use the typename as title by default
+        this.form.title.value = this.geojson.name || this.csv.name || this.json.name;
       }
-      return 'char'; //* string by default, most accepted type in database
     },
 
     importGeoJsonFeatureType() {
       if (this.geojson.features && this.geojson.features.length) {
-        //* in order to get feature_type properties, the first feature is enough
-        const { properties, geometry } = this.geojson.features[0];
-        this.form.title.value = properties.feature_type;
-        this.form.geom_type.value = this.translateLabel(geometry.type);
-        this.updateStore(); //* register title & geom_type in store
+        const { geometry } = this.geojson.features[0];
+        this.form.geom_type.value = geometry.type.toLowerCase();
+        this.updateStore(); // register geom_type in store
+
+        // Use a subset of the first N features to build the form
+        const subsetFeatures = this.geojson.features.slice(0, 200); // Adjust '200' based on performance needs
+        const propertiesList = subsetFeatures.map(feature => feature.properties);
+        this.buildCustomForm(propertiesList);
+      }
+      this.setTitleFromFile();
+    },
 
-        //* loop properties to create a customForm for each of them
-        for (const [key, val] of Object.entries(properties)) {
-          //* check that the property is not a keyword from the backend or map style
-          // todo: add map style keywords
-          if (!this.reservedKeywords.includes(key)) {
-            const customForm = {
-              label: { value: key || '' },
-              name: { value: key || '' },
-              position: this.dataKey, // * use dataKey already incremented by addCustomForm
-              field_type: { value: this.transformProperties(val) }, // * guessed from the type
-              options: { value: [] }, // * not available in export
-            };
-            this.addCustomForm(customForm);
-          }
+    importCSVFeatureType() {
+      if (this.csv.length) {
+        this.updateStore(); // register title in store
+
+        // Use a subset of the first N rows to build the form
+        const subsetCSV = this.csv.slice(0, 200); // Adjust '200' based on performance needs
+        this.buildCustomForm(subsetCSV);
+
+        // Check for geom data
+        if (!('lat' in this.csv[0]) || !('lon' in this.csv[0])) {
+          this.form.geom_type.value = 'none';
         }
       }
+      this.setTitleFromFile();
+    },
+
+    importJsonFeatureType() {
+      if (this.json.length) {
+        this.form.geom_type.value = 'none'; // JSON are non-geom features
+        this.updateStore(); // register title in store
+
+        // Use a subset of the first N objects to build the form
+        const subsetJson = this.json.slice(0, 200); // Adjust '200' based on performance needs
+        this.buildCustomForm(subsetJson);
+      }
+      this.setTitleFromFile();
     },
+
   },
 };
 </script>

src/views/FeatureType/Feature_type_symbology.vue

-<template>
-  <div>
-    <div
-      :class="{ active: loading }"
-      class="ui inverted dimmer"
-    >
-      <div class="ui loader" />
-    </div>
-    <div
-      id="message"
-      class="fullwidth"
-    >
-      <div
-        v-if="error"
-        class="ui negative message"
-      >
-        <p><i class="close icon" /> {{ error }}</p>
-      </div>
-      <div
-        v-if="success"
-        class="ui positive message"
-      >
-        <i
-          class="close icon"
-          @click="success = null"
-        />
-        <p>{{ success }}</p>
-      </div>
-    </div>
-    <div class="fourteen wide column">
-      <form
-        id="form-symbology-edit"
-        action=""
-        method="post"
-        enctype="multipart/form-data"
-        class="ui form"
-      >
-        <h1 v-if="project && feature_type">
-          Éditer la symbologie du type de signalement "{{ feature_type.title }}" pour le
-          projet "{{ project.title }}"
-        </h1>
-        <SymbologySelector
-          v-if="feature_type"
-          :init-color="feature_type.color"
-          :init-icon="feature_type.icon"
-          :geom-type="feature_type.geom_type"
-          @set="setDefaultStyle"
-        />
-        <div
-          v-if="
-            feature_type &&
-              feature_type.customfield_set.length > 0 &&
-              feature_type.customfield_set.some(el => el.field_type === 'list')
-          "
-        >
-          <div class="ui divider" />
-          <label
-            id="customfield-select-label"
-            for="customfield-select"
-          >
-            Personnaliser la symbologie d'une liste de valeurs:
-          </label>
-          <select
-            id="customfield-select"
-            v-model="selectedCustomfield"
-            class="ui dropdown"
-          >
-            <option
-              v-for="customfieldList of feature_type.customfield_set.filter(el => el.field_type === 'list')"
-              :key="customfieldList.name"
-              :value="customfieldList.name"
-            >
-              {{ customfieldList.label }}
-            </option>
-          </select>
-        </div>
-        <div v-if="selectedCustomfield">
-          <div 
-            v-for="option of feature_type.customfield_set.find(el => el.name === selectedCustomfield).options"
-            :key="option"
-          >
-            <SymbologySelector
-              :title="option"
-              :init-color="feature_type.colors_style.value ?
-                feature_type.colors_style.value.colors[option] ?
-                  feature_type.colors_style.value.colors[option].value :
-                  feature_type.colors_style.value.colors[option]
-                : null
-              "
-              :init-icon="feature_type.colors_style.value ?
-                feature_type.colors_style.value.icons[option] :
-                null
-              "
-              :geom-type="feature_type.customfield_set.geomType"
-              @set="setColorsStyle"
-            />
-          </div>
-        </div>
-        <div class="ui divider" />
-        <button
-          class="ui teal icon button margin-25"
-          type="button"
-          :disabled="!canSaveSymbology"
-          @click="sendFeatureSymbology"
-        >
-          <i class="white save icon" />
-          Sauvegarder la symbologie du type de signalement
-        </button>
-      </form>
-    </div>
-  </div>
-</template>
-
-<script>
-import { isEqual } from 'lodash';
-
-import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
-
-import SymbologySelector from '@/components/feature_type/SymbologySelector.vue';
-
-export default {
-  name: 'FeatureTypeSymbology',
-
-  components: {
-    SymbologySelector
-  },
-
-  data() {
-    return {
-      loading: false,
-      error: null,
-      success: null,
-      selectedCustomfield: null,
-      form: {
-        color: '#000000',
-        icon: 'circle',
-        colors_style: {
-          fields: [],
-          colors: {},
-          icons: {},
-          custom_field_name: '',
-          value: {
-            colors: {},
-            icons: {}
-          }
-        },
-      },
-      canSaveSymbology: false
-    };
-  },
-
-  computed: {
-    ...mapState('projects', [
-      'project'
-    ]),
-    ...mapState('feature-type', [
-      'customForms',
-      'colorsStyleList'
-    ]),
-    ...mapGetters('feature-type', [
-      'feature_type'
-    ]),
-  },
-
-  watch: {
-    selectedCustomfield(newValue) {
-      this.form.colors_style.custom_field_name = newValue;
-    },
-    feature_type(newValue) {
-      if (newValue) {
-        // Init form
-        this.form.color = JSON.parse(JSON.stringify(newValue.color));
-        this.form.icon = JSON.parse(JSON.stringify(newValue.icon));
-        this.form.colors_style = {
-          ...this.form.colors_style,
-          ...JSON.parse(JSON.stringify(newValue.colors_style))
-        };
-      }
-    },
-    form: {
-      deep: true,
-      handler(newValue) {
-        if (isEqual(newValue, {
-          color: this.feature_type.color, 
-          icon: this.feature_type.icon,
-          colors_style: this.feature_type.colors_style
-        })) {
-          this.canSaveSymbology = false;
-        } else {
-          this.canSaveSymbology = true;
-        }
-      }
-    }
-  },
-
-  created() {
-    if (!this.project) {
-      this.GET_PROJECT(this.$route.params.slug);
-      this.GET_PROJECT_INFO(this.$route.params.slug);
-    }
-    this.SET_CURRENT_FEATURE_TYPE_SLUG(this.$route.params.slug_type_signal);
-    if (this.feature_type) {
-      this.initForm();
-    } else {
-      this.loading = true;
-      this.GET_PROJECT_FEATURE_TYPES(this.$route.params.slug)
-        .then(() => {
-          this.initForm();
-          this.loading = false;
-        })
-        .catch(() => {
-          this.loading = false;
-        });
-    }
-  },
-
-  methods: {
-    ...mapMutations('feature-type', [
-      'SET_CURRENT_FEATURE_TYPE_SLUG'
-    ]),
-    ...mapActions('feature-type', [
-      'SEND_FEATURE_SYMBOLOGY',
-      'GET_PROJECT_FEATURE_TYPES'
-    ]),
-    ...mapActions('projects', [
-      'GET_PROJECT',
-      'GET_PROJECT_INFO',
-    ]),
-
-    initForm() {
-      this.form.color = JSON.parse(JSON.stringify(this.feature_type.color));
-      this.form.icon = JSON.parse(JSON.stringify(this.feature_type.icon));
-      this.form.colors_style = {
-        ...this.form.colors_style,
-        ...JSON.parse(JSON.stringify(this.feature_type.colors_style))
-      };
-      if (this.feature_type.colors_style && Object.keys(this.feature_type.colors_style.colors).length > 0) {
-        this.selectedCustomfield =
-          this.feature_type.customfield_set.find(
-            el => el.name === this.feature_type.colors_style.custom_field_name
-          ).name;
-      }
-    },
-
-    setDefaultStyle(e) {
-      const value  = e.value;
-      this.form.color = value.color.value;
-      this.form.icon = value.icon;
-    },
-
-    setColorsStyle(e) {
-      const { name, value } = e;
-      this.form.colors_style.colors[name] = value.color;
-      this.form.colors_style.icons[name] = value.icon;
-      this.form.colors_style.value.colors[name] = value.color;
-      this.form.colors_style.value.icons[name] = value.icon;
-    },
-
-    sendFeatureSymbology() {
-      this.loading = true;
-      this.SEND_FEATURE_SYMBOLOGY(this.form)
-        .then(() => {
-          this.GET_PROJECT_FEATURE_TYPES(this.$route.params.slug)
-            .then(() => {
-              this.loading = false;
-              this.success =
-                'La modification de la symbologie a été prise en compte. Vous allez être redirigé vers la page d\'accueil du projet.';
-              setTimeout(() => {
-                this.$router.push({
-                  name: 'project_detail',
-                  params: {
-                    slug: this.$route.params.slug,
-                  },
-                });
-              }, 1500);
-            })
-            .catch((err) => {
-              console.error(err);
-            });
-        })
-        .catch((err) => {
-          console.error(err);
-          this.loading = false;
-        });
-    }
-  }
-};
-</script>
-
-<style lang="less" scoped>
-
-h1 {
-  margin-top: 1em;
-}
-
-form {
-  text-align: left;
-
-  #customfield-select-label {
-    cursor: pointer;
-    font-weight: 600;
-    font-size: 1.1em;
-  }
-  #customfield-select {
-    width: 50% !important;
-  }
-
-}
-
-</style>

src/views/flatpages/Default.vue → src/views/FlatPages/Help.vue

@@ -16,7 +16,7 @@
 import { mapState } from 'vuex';
 
 export default {
-  name: 'Default',
+  name: 'Help',
 
   computed: {
     ...mapState(['staticPages']),

src/views/flatpages/with_right_menu.vue → src/views/FlatPages/LegalMentions.vue

@@ -34,7 +34,7 @@
 import { mapState } from 'vuex';
 
 export default {
-  name: 'WithRightMenu',
+  name: 'Mentions',
 
   data() {
     return {
@@ -63,11 +63,11 @@ export default {
   methods: {
     createMenu() {
       // parse the ToC content (looking for h2 elements)
-      let list = document.querySelectorAll('h2');
-      let tocArr = [];
+      const list = document.querySelectorAll('h2');
+      const tocArr = [];
 
       for (let i = 0; i < list.length; i++) {
-        let e = list[i];
+        const e = list[i];
         let id = e.id;
 
         // add id in html if not present

src/views/Login.vue

@@ -4,28 +4,29 @@
       <div class="fourteen wide column">
         <img
           class="ui centered small image"
-          :src="logo"
+          :src="appLogo"
+          alt="Logo de l'application"
         >
         <h2 class="ui center aligned icon header">
           <div class="content">
-            {{ APPLICATION_NAME }}
+            {{ appName }}
             <div class="sub header">
-              {{ APPLICATION_ABSTRACT }}
+              {{ appAbstract }}
             </div>
           </div>
         </h2>
       </div>
     </div>
     <div class="row">
-      <div class="six wide column">
+      <div
+        v-if="$route.name === 'login'"
+        class="six wide column"
+      >
         <h3 class="ui horizontal divider header">
           CONNEXION
         </h3>
 
-        <div
-          v-if="form.errors"
-          class="ui warning message"
-        >
+        <div :class="['ui warning message', {'closed': !errors.global}]">
           <div class="header">
             Les informations d'identification sont incorrectes.
           </div>
@@ -38,23 +39,29 @@
           type="post"
           @submit.prevent="login"
         >
-          <div class="ui stacked secondary segment">
-            <div class="six field required">
+          <div class="ui secondary segment">
+            <div class="six field">
               <div class="ui left icon input">
-                <i class="user icon" />
+                <i
+                  class="user icon"
+                  aria-hidden="true"
+                />
                 <input
-                  v-model="username_value"
+                  v-model="loginForm.username"
                   type="text"
                   name="username"
                   placeholder="Utilisateur"
                 >
               </div>
             </div>
-            <div class="six field required">
+            <div class="six field">
               <div class="ui left icon input">
-                <i class="lock icon" />
+                <i
+                  class="lock icon"
+                  aria-hidden="true"
+                />
                 <input
-                  v-model="password_value"
+                  v-model="loginForm.password"
                   type="password"
                   name="password"
                   placeholder="Mot de passe"
@@ -70,70 +77,518 @@
           </div>
         </form>
       </div>
+      <div
+        v-else-if="$route.name === 'signup'"
+        class="six wide column"
+      >
+        <h3 class="ui horizontal divider header">
+          INSCRIPTION
+        </h3>
+
+        <div :class="['ui warning message', {'closed': !error}]">
+          {{ error }}
+        </div>
+
+        <form
+          class="ui form"
+          role="form"
+          type="post"
+          @submit.prevent="signup"
+        >
+          <div class="ui secondary segment">
+            <div class="six field">
+              <div class="ui left icon input">
+                <i
+                  class="user outline icon"
+                  aria-hidden="true"
+                />
+                <input
+                  v-model="signupForm.first_name"
+                  type="text"
+                  name="first_name"
+                  placeholder="Prénom"
+                  required
+                >
+              </div>
+            </div>
+
+            <div class="six field">
+              <div class="ui left icon input">
+                <i
+                  class="id card icon"
+                  aria-hidden="true"
+                />
+                <input
+                  v-model="signupForm.last_name"
+                  type="text"
+                  name="last_name"
+                  placeholder="Nom"
+                  required
+                >
+              </div>
+            </div>
+
+            <div class="six field">
+              <div class="ui left icon input">
+                <i
+                  class="envelope icon"
+                  aria-hidden="true"
+                />
+                <input
+                  v-model="signupForm.email"
+                  type="email"
+                  name="email"
+                  placeholder="Adresse courriel"
+                  required
+                >
+              </div>
+            </div>
+
+            <div class="six field">
+              <div class="ui left icon input">
+                <i
+                  class="user icon"
+                  aria-hidden="true"
+                />
+                <input
+                  v-model="signupForm.username"
+                  type="text"
+                  name="username"
+                  placeholder="Utilisateur"
+                  disabled
+                >
+              </div>
+            </div>
+
+            <div :class="['six field', {'error': errors.passwd}]">
+              <div class="ui action left icon input">
+                <i
+                  class="lock icon"
+                  aria-hidden="true"
+                />
+                <input
+                  v-model="signupForm.password"
+                  :type="signupFormMeta.showPwd ? 'text' : 'password'"
+                  name="password"
+                  placeholder="Mot de passe"
+                  required
+                  @blur="isValidPwd"
+                >
+                <button
+                  class="ui icon button"
+                  @click="signupFormMeta.showPwd = !signupFormMeta.showPwd"
+                >
+                  <i :class="[signupFormMeta.showPwd ? 'eye slash' : 'eye', 'icon']" />
+                </button>
+              </div>
+            </div>
+            
+            <div class="field">
+              <div class="ui checkbox">
+                <input
+                  id="simplifiedForm"
+                  v-model="signupFormMeta.simplifiedForm"
+                  class="hidden"
+                  type="checkbox"
+                  name="simplifiedForm"
+                >
+                <label for="simplifiedForm">Je suis membre des forces de l'ordre</label>
+              </div>
+            </div>
+            
+            <div :class="['six field', {'error': errors.company}]">
+              <div class="ui action left icon input">
+                <i
+                  class="building icon"
+                  aria-hidden="true"
+                />
+                <input
+                  v-model="signupFormMeta.company"
+                  type="text"
+                  name="company"
+                  placeholder="Entreprise"
+                  :required="!signupFormMeta.simplifiedForm"
+                  :disabled="signupFormMeta.simplifiedForm"
+                >
+              </div>
+            </div>
+
+            <div :class="['six field', {'error': errors.comments}]">
+              <div class="ui left icon input">
+                <i
+                  class="pencil icon"
+                  aria-hidden="true"
+                />
+                <input
+                  v-model="signupForm.comments"
+                  type="text"
+                  name="comments"
+                  :placeholder="commentsFieldLabel || `Commentaires`"
+                  :required="commentsFieldRequired && !signupFormMeta.simplifiedForm"
+                  :disabled="signupFormMeta.simplifiedForm"
+                >
+              </div>
+            </div>
+            <div
+              v-if="usersGroupsOptions.length > 0"
+              class="six field"
+            >
+              <div class="ui divider" />
+              <Multiselect
+                v-model="usersGroupsSelections"
+                :options="usersGroupsOptions"
+                :multiple="true"
+                track-by="value"
+                label="name"
+                select-label=""
+                selected-label=""
+                deselect-label=""
+                :searchable="false"
+                :placeholder="'Sélectionez un ou plusieurs groupe de la liste ...'"
+              />
+              <p v-if="adminMail">
+                Si le groupe d'utilisateurs recherché n'apparaît pas, vous pouvez demander à
+                <a :href="'mailto:'+adminMail">{{ adminMail }}</a> de le créer
+              </p>
+            </div>
+
+            <button
+              :class="['ui fluid large teal submit button']"
+              type="submit"
+            >
+              Valider
+            </button>
+          </div>
+        </form>
+      </div>
+      <div
+        v-else-if="$route.name === 'sso-signup-success'"
+        class="six wide column"
+      >
+        <h3 class="ui horizontal divider header">
+          INSCRIPTION RÉUSSIE
+        </h3>
+        <h4 class="ui center aligned icon header">
+          <div class="content">
+            <p
+              v-if="username"
+              class="sub header"
+            >
+              Le compte pour le nom d'utilisateur <strong>{{ username }}</strong> a été créé
+            </p>
+            <p>
+              Un e-mail de confirmation vient d'être envoyé à l'adresse indiquée.
+            </p>
+            <p class="sub header">
+              Merci de bien vouloir suivre les instructions données afin de finaliser la création de votre compte.
+            </p>
+          </div>
+        </h4>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
+import { mapState, mapGetters, mapMutations } from 'vuex';
+import Multiselect from 'vue-multiselect';
+import userAPI from '../services/user-api';
+
 export default {
   name: 'Login',
+
+  components: {
+    Multiselect
+  },
+
+  props: {
+    username: {
+      type: String,
+      default: null
+    }
+  },
+
   data() {
     return {
-      username_value: null,
-      password_value: null,
+      errors: {
+        global: null,
+        passwd: null,
+        company: null,
+        comments: null,
+      },
       logged: false,
-      form: {
-        errors: null,
+      loginForm: {
+        username: null,
+        password: null,
+      },
+      signupForm: {
+        username: null,
+        password: null,
+        first_name: null,
+        last_name: null,
+        email: null,
+        comments: null,
+        usersgroups: [],
+      },
+      signupFormMeta: {
+        showPwd: false,
+        company: null,
+        simplifiedForm: false,
       },
     };
   },
+
   computed: {
-    logo() {
-      return this.$store.state.configuration.VUE_APP_LOGO_PATH;
+    ...mapState({
+      appLogo: state => state.configuration.VUE_APP_LOGO_PATH,
+      appName: state => state.configuration.VUE_APP_APPLICATION_NAME,
+      appAbstract: state => state.configuration.VUE_APP_APPLICATION_ABSTRACT,
+      adminMail: state => state.configuration.VUE_APP_ADMIN_MAIL,
+      ssoSignupUrl: state => state.configuration.VUE_APP_SSO_SIGNUP_URL,
+      commentsFieldLabel: state => state.configuration.VUE_APP_SIGNUP_COMMENTS_FIELD_LABEL,
+      commentsFieldRequired: state => state.configuration.VUE_APP_SIGNUP_COMMENTS_FIELD_REQUIRED,
+    }),
+    ...mapGetters(['usersGroupsOptions']),
+
+    usersGroupsSelections: {
+      get() {
+        return this.usersGroupsOptions.filter((el) => this.signupForm.usersgroups?.includes(el.value));
+      },
+      set(newValue) {
+        this.signupForm.usersgroups = newValue.map(el => el.value);
+      }
     },
-    APPLICATION_NAME() {
-      return this.$store.state.configuration.VUE_APP_APPLICATION_NAME;
+
+    error() {
+      return this.errors.global || this.errors.passwd || this.errors.comments;
+    }
+  },
+
+  watch: {
+    'signupForm.first_name': function (newValue, oldValue) {
+      if (newValue !== oldValue) {
+        this.signupForm.username = `${newValue.charAt(0)}${this.signupForm.last_name}`.toLowerCase().replace(/\s/g, '');
+      }
+    },
+    'signupForm.last_name': function (newValue, oldValue) {
+      if (newValue !== oldValue) {
+        this.signupForm.username = `${this.signupForm.first_name.charAt(0)}${newValue}`.toLowerCase().replace(/\s/g, '');
+      }
     },
-    APPLICATION_ABSTRACT() {
-      return this.$store.state.configuration.VUE_APP_APPLICATION_ABSTRACT;
+    'signupForm.password': function (newValue, oldValue) {
+      if (newValue.length >= 8) {
+        if (newValue !== oldValue) {
+          this.isValidPwd();
+        }
+      } else {
+        this.errors.passwd = null;
+      }
     },
+    username(newValue, oldValue) {
+      if (newValue !== oldValue) {
+        this.loginForm.username = newValue; 
+      }
+    }
   },
 
+  // Plus nécessaire pour l'instant, la demande du client a changé, mais pourrait être utile si évolution de l'authentification
+  // created() {
+  //   if (this.$route.name === 'signup') {
+  //     this.$store.dispatch('GET_USERS_GROUPS'); // récupére les groupes d'utilisateurs pour extra_forms
+  //   }
+  // },
+
   mounted() {
-    if (this.$store.state.user) {
-      this.$store.commit(
-        'DISPLAY_MESSAGE',
-        { comment: 'Vous êtes déjà connecté, vous allez être redirigé vers la page précédente.' }
-      );
-      setTimeout(() => this.$store.dispatch('REDIRECT_AFTER_LOGIN'), 3100);
+    if (this.$route.name === 'login') {
+      if (this.$store.state.user) {
+        this.DISPLAY_MESSAGE({ header: 'Vous êtes déjà connecté', comment: 'Vous allez être redirigé vers la page précédente.' });
+        setTimeout(() => this.$store.dispatch('REDIRECT_AFTER_LOGIN'), 3100);
+      }
     }
   },
+
   methods: {
+    ...mapMutations(['DISPLAY_MESSAGE']),
+
     login() {
       this.$store
         .dispatch('LOGIN', {
-          username: this.username_value,
-          password: this.password_value,
+          username: this.loginForm.username,
+          password: this.loginForm.password,
         })
         .then((status) => {
           if (status === 200) {
-            this.form.errors = null;
+            this.errors.global = null;
           } else if (status === 'error') {
-            this.form.errors = status;
+            this.errors.global = status;
           }
         })
         .catch();
     },
+
+    async signup() {
+      if (this.hasUnvalidFields()) return;
+      
+      // Étape 1 : Création de l'utilisateur auprès du service d'authentification SSO si nécessaire
+      if (this.ssoSignupUrl) {
+        // Préparation du champ commentaire pour réception par OGS
+        let comments;
+        if (this.signupFormMeta.simplifiedForm) {
+          comments = "Je suis membre des forces de l'ordre";
+        } else {
+          comments = `{"${this.commentsFieldLabel}":"${this.signupForm.comments}","entreprise":"${this.signupFormMeta.company}"}`;
+        }
+        // Envoi de la requête vers OGS
+        const ssoResponse = await userAPI.signup({
+          ...this.signupForm,
+          // Pour permettre la visualisation dans OGS Maps, l'utilisateur doit être ajouté à un groupe OGS, mis en dur pour aller vite pour l'instant
+          usergroup_roles:[{ organisation: { id: 1 } }],
+          comments
+        }, this.ssoSignupUrl);
+        // Vérification de la réponse et affichage erreur le cas échéant
+        if (ssoResponse.status !== 201) {
+          if (ssoResponse.status === 400) {
+            this.errors.global = 'Un compte associé à ce courriel existe déjà';
+          } else {
+            this.errors.global = `Erreur lors de l'inscription: ${ssoResponse.data?.detail || 'Problème inconnu'}`;
+          }
+          return;  // Stoppe la fonction si l'inscription SSO échoue
+        } else {
+          this.signupForm.username = ssoResponse.data.username;
+          this.signupForm.first_name = ssoResponse.data.first_name;
+          this.signupForm.last_name = ssoResponse.data.last_name;
+        }
+      }
+
+      // Étape 2 : Création de l'utilisateur dans Geocontrib
+      const response = await userAPI.signup(this.signupForm);
+
+      if (response.status !== 201) {
+        const errorMessage = response.data
+          ? Object.values(response.data)?.[0]?.[0] || 'Problème inconnu'
+          : 'Problème inconnu';
+        this.errors.global = `Erreur lors de l'inscription: ${errorMessage}`;
+        return;
+      }
+
+      this.DISPLAY_MESSAGE({ header: 'Inscription réussie !', comment: `Bienvenue sur la plateforme ${this.signupForm.username}.`, level: 'positive' });
+      if (this.ssoSignupUrl) {
+        setTimeout(() => {
+          this.$router.push({ name: 'sso-signup-success', params: { username: this.signupForm.username } });
+        }, 3100);
+      } else {
+        setTimeout(() => {
+          this.$router.push({ name: 'login', params: { username: this.signupForm.username } });
+        }, 3100);
+      }
+    },
+
+
+    isValidPwd() {
+      const regPwd = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[A-Za-z\d/$&+,:;=?#|'<>.^*()%!-]{8,}$/;
+
+      if (!regPwd.test(this.signupForm.password)) {
+        this.errors.passwd = `Le mot de passe doit comporter au moins 8 caractères, dont 1 majuscule, 1 minuscule et 1 chiffre.
+        Vous pouvez utiliser les caractères spéciaux suivants : /$ & + , : ; = ? # | ' < > . ^ * ( ) % ! -.`;
+        return false;
+      }
+      
+      this.errors.passwd = null;
+      return true;
+    },
+
+    hasUnvalidFields() {
+      const { last_name, email, first_name, comments } = this.signupForm;
+
+      if (!this.signupFormMeta.simplifiedForm && this.commentsFieldRequired && !comments) {
+        this.errors.comments = `Le champ ${ this.commentsFieldLabel || 'Commentaires'} est requis`;
+        return true;
+      } else {
+        this.errors.comments = null;
+      }
+
+      if (!this.signupFormMeta.simplifiedForm && !this.signupFormMeta.company) {
+        this.errors.company = "Le champ 'Entreprise' est requis";
+        return true;
+      } else {
+        this.errors.company = null;
+      }
+
+      if (email && last_name && first_name) {
+        this.errors.global = null;
+      } else {
+        this.errors.global = 'Certains champs requis ne sont pas renseignés';
+        return true;
+      }
+
+      return !this.isValidPwd();   
+    }
   },
 };
 </script>
 
 <style lang="less" scoped>
-
 #login-page {
   max-width: 500px;
   min-width: 200px;
   margin: 3em auto;
+
+  .ui.message {
+    min-height: 0px;
+
+    &.closed {
+      overflow: hidden;
+      opacity: 0;
+      padding: 0;
+      max-height: 0px;
+    }
+  }
+
+  input[required] {
+    background-image: linear-gradient(45deg, transparent, transparent 50%, rgb(209, 0, 0) 50%, rgb(209, 0, 0) 100%);
+    background-position: top right;
+    background-size: .5em .5em;
+    background-repeat: no-repeat;
+  }
+}
+p {
+  margin: 1em 0 !important; 
+}
+</style>
+
+<style>
+.multiselect__placeholder {
+  position: absolute;
+  width: calc(100% - 48px);
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.multiselect__tags {
+  position: relative;
+}
+
+/* keep font-weight from overide of semantic classes */
+.multiselect__placeholder,
+.multiselect__content,
+.multiselect__tags {
+  font-weight: initial !important;
+}
+
+/* keep placeholder eigth */
+.multiselect .multiselect__placeholder {
+  margin-bottom: 9px !important;
+  padding-top: 1px;
+}
+
+/* keep placeholder height when opening dropdown without selection */
+input.multiselect__input {
+  padding: 3px 0 0 0 !important;
 }
 
+/* keep placeholder height when opening dropdown with already a value selected */
+.multiselect__tags .multiselect__single {
+  padding: 1px 0 0 0 !important;
+  margin-bottom: 9px;
+}
 </style>
\ No newline at end of file

src/views/Project/FeaturesListAndMap.vue

 <template>
-  <div
-    id="project-features"
-    class="page"
-  >
-    <div
-      id="feature-list-container"
-      class="ui grid mobile-column"
-    >
-      <div class="mobile-fullwidth">
-        <h1>Signalements</h1>
-      </div>
-      <div class="no-padding-mobile mobile-fullwidth">
-        <div class="ui large text loader">
-          Chargement
-        </div>
-        <div class="ui secondary menu no-margin">
-          <a
-            :class="['item no-margin', { active: showMap }]"
-            data-tab="map"
-            data-tooltip="Carte"
-            data-position="bottom left"
-            @click="showMap = true"
-          ><i class="map fitted icon" /></a>
-          <a
-            :class="['item no-margin', { active: !showMap }]"
-            data-tab="list"
-            data-tooltip="Liste"
-            data-position="bottom left"
-            @click="showMap = false"
-          ><i class="list fitted icon" /></a>
-          <div class="item">
-            <h4>
-              {{ featuresCount }} signalement{{ featuresCount > 1 ? "s" : "" }}
-            </h4>
-          </div>
+  <div id="project-features">
+    <div class="column">
+      <FeaturesListAndMapFilters
+        :show-map="showMap"
+        :features-count="featuresCountDisplay"
+        :pagination="pagination"
+        :all-selected="allSelected"
+        :edit-attributes-feature-type="editAttributesFeatureType"
+        @set-filter="setFilters"
+        @reset-pagination="resetPagination"
+        @fetch-features="fetchPagedFeatures"
+        @show-map="setShowMap"
+        @edit-status="modifyStatus"
+        @toggle-delete-modal="toggleDeleteModal"
+      />
 
+      <div class="loader-container">
+        <div
+          :class="['ui tab active map-container', { 'visible': showMap }]"
+          data-tab="map"
+        >
           <div
-            v-if="
-              project &&
-                feature_types.length > 0 &&
-                permissions.can_create_feature
-            "
-            id="button-dropdown"
-            class="item right"
+            id="map"
+            ref="map"
           >
-            <div
-              class="ui dropdown button compact button-hover-green"
-              data-tooltip="Ajouter un signalement"
-              data-position="bottom right"
-              @click="toggleAddFeature"
-            >
-              <i class="plus fitted icon" />
-              <div
-                v-if="showAddFeature"
-                class="menu left transition visible"
-                style="z-index: 9999"
-              >
-                <div class="header">
-                  Ajouter un signalement du type
-                </div>
-                <div class="scrolling menu text-wrap">
-                  <router-link
-                    v-for="(type, index) in feature_types"
-                    :key="type.slug + index"
-                    :to="{
-                      name: 'ajouter-signalement',
-                      params: { slug_type_signal: type.slug },
-                    }"
-                    class="item"
-                  >
-                    {{ type.title }}
-                  </router-link>
-                </div>
-              </div>
-            </div>
-
-            <div
-              v-if="checkedFeatures.length > 0 && mode === 'modify'"
-              class="ui dropdown button compact button-hover-green margin-left-25"
-              data-tooltip="Modifier le statut des Signalements"
-              data-position="bottom right"
-              @click="toggleModifyStatus"
-            >
-              <i class="pencil fitted icon" />
-              <div
-                v-if="showModifyStatus"
-                class="menu left transition visible"
-                style="z-index: 9999"
-              >
-                <div class="header">
-                  Modifier le statut des Signalements
-                </div>
-                <div class="scrolling menu text-wrap">
-                  <span
-                    v-for="status in availableStatus"
-                    :key="status.value"
-                    class="item"
-                    @click="modifyStatus(status.value)"
-                  >
-                    {{ status.name }}
-                  </span>
-                </div>
-              </div>
-            </div>
-
-            <div
-              v-if="checkedFeatures.length > 0 && mode === 'delete'"
-              class="ui button compact button-hover-red margin-left-25"
-              data-tooltip="Effacer tous les types de signalements sélectionnés"
-              data-position="bottom right"
-              @click="modalAllDelete"
-            >
-              <i class="grey trash fitted icon" />
-            </div>
+            <SidebarLayers
+              v-if="basemaps && map"
+              ref="sidebar"
+            />
+            <Geolocation />
+            <Geocoder />
+          </div>
+          <div 
+            id="popup" 
+            class="ol-popup"
+          >
+            <a 
+              id="popup-closer" 
+              href="#" 
+              class="ol-popup-closer"
+            />
+            <div 
+              id="popup-content"
+            />
           </div>
         </div>
-      </div>
-    </div>
-
-    <section
-      id="form-filters"
-      class="ui form grid"
-    >
-      <div class="field wide four column no-margin-mobile">
-        <label>Type</label>
-        <Dropdown
-          :options="featureTypeChoices"
-          :selected="form.type.selected"
-          :selection.sync="form.type.selected"
-          :search="true"
-          :clearable="true"
-        />
-      </div>
-      <div class="field wide four column no-padding-mobile no-margin-mobile">
-        <label>Statut</label>
-        <!--  //* giving an object mapped on key name -->
-        <Dropdown
-          :options="filteredStatusChoices"
-          :selected="form.status.selected.name"
-          :selection.sync="form.status.selected"
-          :search="true"
-          :clearable="true"
+        <FeatureListTable
+          v-show="!showMap"
+          :paginated-features="paginatedFeatures"
+          :page-numbers="pageNumbers"
+          :all-selected="allSelected"
+          :checked-features.sync="checkedFeatures"
+          :features-count="featuresCount"
+          :pagination="pagination"
+          :sort="sort"
+          :edit-attributes-feature-type.sync="editAttributesFeatureType"
+          :queryparams="queryparams"
+          @update:page="handlePageChange"
+          @update:sort="handleSortChange"
+          @update:allSelected="handleAllSelectedChange"
         />
-      </div>
-      <div class="field wide four column">
-        <label>Nom</label>
-        <div class="ui icon input">
-          <i class="search icon" />
-          <div class="ui action input">
-            <input
-              v-model="form.title"
-              type="text"
-              name="title"
-              @keyup.enter="resetPaginationNfetchFeatures"
-            >
-            <button
-              id="submit-search"
-              class="ui teal icon button"
-              @click="resetPaginationNfetchFeatures"
-            >
-              <i class="search icon" />
-            </button>
+        <Transition name="fadeIn">
+          <div
+            v-if="loading"
+            class="ui inverted dimmer active"
+          >
+            <div class="ui text loader">
+              Récupération des signalements en cours...
+            </div>
           </div>
-        </div>
+        </Transition>
       </div>
-      <!-- map params, updated on map move -->
-      <input
-        v-model="zoom"
-        type="hidden"
-        name="zoom"
-      >
-      <input
-        v-model="lat"
-        type="hidden"
-        name="lat"
-      >
-      <input
-        v-model="lng"
-        type="hidden"
-        name="lng"
-      >
-    </section>
 
-    <div
-      v-if="showMap"
-      class="ui tab active map-container visible"
-      data-tab="map"
-    >
+    
+      <!-- MODAL ALL DELETE FEATURE TYPE -->
       <div
-        id="map"
-        ref="map"
-      />
-      <SidebarLayers v-if="basemaps && map" />
-    </div>
-
-    <FeatureListTable
-      v-else
-      :paginated-features="paginatedFeatures"
-      :checked-features.sync="checkedFeatures"
-      :features-count="featuresCount"
-      :clicked-features.sync="clickedFeatures"
-      :mode.sync="mode"
-      :pagination="pagination"
-      :sort="sort"
-      @update:page="handlePageChange"
-      @update:sort="handleSortChange"
-    />
-
-    <!-- MODAL ALL DELETE FEATURE TYPE -->
-    <div
-      v-if="modalAllDeleteOpen"
-      class="ui dimmer modals page transition visible active"
-      style="display: flex !important"
-    >
-      <div
-        :class="[
-          'ui mini modal subscription',
-          { 'active visible': modalAllDeleteOpen },
-        ]"
+        v-if="isDeleteModalOpen"
+        class="ui dimmer modals page transition visible active"
+        style="display: flex !important"
       >
-        <i
-          class="close icon"
-          @click="modalAllDeleteOpen = false"
-        />
-        <div class="ui icon header">
-          <i class="trash alternate icon" />
-          Êtes-vous sûr de vouloir effacer
-          <span v-if="checkedFeatures.length === 1"> un signalement ? </span>
-          <span v-else> ces {{ checkedFeatures.length }} signalements ? </span>
-        </div>
-        <div class="actions">
-          <button
-            type="button"
-            class="ui red compact fluid button"
-            @click="deleteAllFeatureSelection"
-          >
-            Confirmer la suppression
-          </button>
+        <div
+          :class="[
+            'ui mini modal',
+            { 'active visible': isDeleteModalOpen },
+          ]"
+        >
+          <i
+            class="close icon"
+            aria-hidden="true"
+            @click="isDeleteModalOpen = false"
+          />
+          <div class="ui icon header">
+            <i
+              class="trash alternate icon"
+              aria-hidden="true"
+            />
+            Êtes-vous sûr de vouloir effacer
+            <span v-if="checkedFeatures.length === 1"> un signalement&nbsp;?</span>
+            <span v-else-if="checkedFeatures.length > 1">ces {{ checkedFeatures.length }} signalements&nbsp;?</span>
+            <span v-else>tous les signalements sélectionnés&nbsp;?<br>
+              <small>Seuls ceux que vous êtes autorisé à supprimer seront réellement effacés.</small>
+            </span>
+          </div>
+          <div class="actions">
+            <button
+              type="button"
+              class="ui red compact fluid button"
+              @click="deleteAllFeatureSelection"
+            >
+              Confirmer la suppression
+            </button>
+          </div>
         </div>
       </div>
     </div>
@@ -244,60 +118,59 @@
 </template>
 
 <script>
-import axios from '@/axios-client.js';
+
+import { mapState, mapActions, mapMutations } from 'vuex';
+import mapService from '@/services/map-service';
+import Geocoder from '@/components/Map/Geocoder';
 import featureAPI from '@/services/feature-api';
 
-import { mapGetters, mapState, mapActions } from 'vuex';
-import { mapUtil } from '@/assets/js/map-util.js';
-import { allowedStatus2change } from '@/utils';
+import FeaturesListAndMapFilters from '@/components/Project/FeaturesListAndMap/FeaturesListAndMapFilters';
+import FeatureListTable from '@/components/Project/FeaturesListAndMap/FeatureListTable';
+import SidebarLayers from '@/components/Map/SidebarLayers';
+import Geolocation from '@/components/Map/Geolocation';
 
-import Dropdown from '@/components/Dropdown.vue';
-import SidebarLayers from '@/components/SidebarLayers';
-import FeatureListTable from '@/components/FeaturesListAndMap/FeatureListTable';
+const initialPagination = {
+  currentPage: 1,
+  pagesize: 15,
+  start: 0,
+  end: 15,
+};
 
 export default {
   name: 'FeaturesListAndMap',
 
   components: {
+    FeaturesListAndMapFilters,
     SidebarLayers,
-    Dropdown,
+    Geocoder,
+    Geolocation,
     FeatureListTable,
   },
 
   data() {
     return {
-      clickedFeatures: [],
+      allSelected: false,
+      editAttributesFeatureType: null,
       currentLayer: null,
       featuresCount: 0,
+      featuresWithGeomCount:0,
       form: {
-        type: {
-          selected: '',
-        },
-        status: {
-          selected: '',
-        },
+        type: [],
+        status: [],
         title: null,
       },
+      isDeleteModalOpen: false,
+      loading: false,
       lat: null,
       lng: null,
       map: null,
-      modalAllDeleteOpen: false,
-      mode: 'modify',
-      next: null,
       paginatedFeatures: [],
-      pagination: {
-        currentPage: 1,
-        pagesize: 15,
-        start: 0,
-        end: 15,
-      },
-      previous: null,
+      pagination: { ...initialPagination },
       projectSlug: this.$route.params.slug,
+      queryparams: {},
       showMap: true,
-      showAddFeature: false,
-      showModifyStatus: false,
       sort: {
-        column: '',
+        column: 'updated_on',
         ascending: true,
       },
       zoom: null,
@@ -306,18 +179,14 @@ export default {
 
   computed: {
     ...mapState([
-      'user',
-      'USER_LEVEL_PROJECTS'
-    ]),
-    ...mapGetters([
-      'permissions',
+      'isOnline'
     ]),
     ...mapState('projects', [
       'project',
     ]),
     ...mapState('feature', [
       'checkedFeatures',
-      'statusChoices',
+      'clickedFeatures',
     ]),
     ...mapState('feature-type', [
       'feature_types',
@@ -330,191 +199,278 @@ export default {
       return this.$store.state.configuration.VUE_APP_DJANGO_API_BASE;
     },
 
-    filteredStatusChoices() {
-      //* if project is not moderate, remove pending status
-      return this.statusChoices.filter((el) =>
-        this.project && this.project.moderation ? true : el.value !== 'pending'
-      );
-    },
-    availableStatus() {
-      if (this.project && this.user) {
-        const isModerate = this.project.moderation;
-        const userStatus = this.USER_LEVEL_PROJECTS[this.project.slug];
-        const isOwnFeature = true; //* dans ce cas le contributeur est toujours l'auteur des signalements qu'il peut modifier
-        return allowedStatus2change(this.statusChoices, isModerate, userStatus, isOwnFeature);
-      }
-      return [];
+    pageNumbers() {
+      return this.createPagesArray(this.featuresCount, this.pagination.pagesize);
     },
 
-    featureTypeChoices() {
-      return this.feature_types.map((el) => el.title);
-    },
+    featuresCountDisplay() {
+      return this.showMap ? this.featuresWithGeomCount : this.featuresCount;
+    }
   },
 
+
   watch: {
-    'form.type.selected'() {
-      this.resetPaginationNfetchFeatures();
-    },
-    'form.status.selected.value'() {
-      this.resetPaginationNfetchFeatures();
-    },
-    map(newValue) {
-      if (newValue && this.paginatedFeatures && this.paginatedFeatures.length) {
-        if (this.currentLayer) {
-          this.map.removeLayer(this.currentLayer);
-        }
-        this.currentLayer = mapUtil.addFeatures(
-          this.paginatedFeatures,
-          {},
-          true,
-          this.feature_types
-        );
-      }
-    },
-    paginatedFeatures: {
-      deep: true,
-      handler(newValue, oldValue) {
-        if (newValue && newValue.length && newValue !== oldValue && this.map) {
-          if (this.currentLayer) {
-            this.map.removeLayer(this.currentLayer);
-            this.currentLayer = null;
-          }
-          this.currentLayer = mapUtil.addFeatures(
-            newValue,
-            {},
-            true,
-            this.feature_types
-          );
-        } else if (newValue && newValue.length === 0) {
-          if (this.currentLayer) {
-            this.map.removeLayer(this.currentLayer);
-            this.currentLayer = null;
-          }
-        }
+    isOnline(newValue, oldValue) {
+      if (newValue != oldValue && !newValue) {
+        this.DISPLAY_MESSAGE({
+          comment: 'Les signalements du projet non mis en cache ne sont pas accessibles en mode déconnecté',
+        });
       }
     },
   },
 
   mounted() {
+    this.UPDATE_CHECKED_FEATURES([]); // empty for when turning back from edit attributes page
     if (!this.project) {
       // Chargements des features et infos projet en cas d'arrivée directe sur la page ou de refresh
-      this.$store.dispatch('projects/GET_PROJECT', this.projectSlug);
-      this.$store
-        .dispatch('projects/GET_PROJECT_INFO', this.projectSlug)
-        .then(() => this.initMap());
+      Promise.all([
+        this.$store.dispatch('projects/GET_PROJECT', this.projectSlug),
+        this.$store.dispatch('projects/GET_PROJECT_INFO', this.projectSlug)
+      ]).then(()=> this.initPage());
     } else {
-      this.initMap();
+      this.initPage();
     }
-    this.fetchPagedFeatures();
-    window.addEventListener('mousedown', this.clickOutsideDropdown);
   },
 
   destroyed() {
-    window.removeEventListener('mousedown', this.clickOutsideDropdown);
     //* allow user to change page if ever stuck on loader
-    this.$store.commit('DISCARD_LOADER');
+    this.loading = false;
   },
 
   methods: {
+    ...mapMutations([
+      'DISPLAY_MESSAGE',
+    ]),
     ...mapActions('feature', [
-      'GET_PROJECT_FEATURES',
-      'SEND_FEATURE'
+      'DELETE_FEATURE',
     ]),
 
-    toggleAddFeature() {
-      this.showAddFeature = !this.showAddFeature;
-      this.showModifyStatus = false;
-    },
+    ...mapMutations('feature', [
+      'UPDATE_CHECKED_FEATURES'
+    ]),
 
-    toggleModifyStatus() {
-      this.showModifyStatus = !this.showModifyStatus;
-      this.showAddFeature = false;
+    setShowMap(newValue) {
+      this.showMap = newValue;
+      // expanded sidebar is visible under the list, even when the map is closed (position:absolute), solved by closing it when switching to list
+      if (newValue === false && this.$refs.sidebar) this.$refs.sidebar.toggleSidebar(false);
     },
-
-    modalAllDelete() {
-      this.modalAllDeleteOpen = !this.modalAllDeleteOpen;
+    resetPagination() {
+      this.pagination = { ...initialPagination };
     },
-
-    clickOutsideDropdown(e) {
-      if (!e.target.closest('#button-dropdown')) {
-        this.showModifyStatus = false;
-        setTimeout(() => { //* timout necessary to give time to click on link to add feature
-          this.showAddFeature = false;
-        }, 500);
+    
+    /**
+     * Updates the filters based on the provided key-value pair.
+     *
+     * @param {Object} e - The key-value pair representing the filter to update.
+     */
+    setFilters(e) {
+      const filter = Object.keys(e)[0];
+      let value = Object.values(e)[0];
+      if (value && Array.isArray(value)) {
+        value = value.map(el => el.value);
       }
+      this.form[filter] = value;
     },
 
+    toggleDeleteModal() {
+      this.isDeleteModalOpen = !this.isDeleteModalOpen;
+    },
+
+    /**
+     * Modifie le statut des objets sélectionnés.
+     *
+     * Cette méthode prend en charge deux cas :
+     * 1. Si tous les objets sont sélectionnés (`allSelected`), une requête unique en mode "bulk update" est envoyée
+     *    au backend pour modifier le statut de tous les objets correspondant aux critères.
+     * 2. Si des objets spécifiques sont sélectionnés (`checkedFeatures`), ils sont traités un par un de manière
+     *    récursive. Chaque objet modifié est retiré de la liste des objets sélectionnés.
+     *
+     * En cas d'erreur (réseau ou backend), un message d'erreur est affiché, et les données sont rafraîchies.
+     * Si tous les objets sont modifiés avec succès, un message de confirmation est affiché.
+     *
+     * @param {string} newStatus - Le nouveau statut à appliquer aux objets sélectionnés.
+     * @returns {Promise<void>} - Une promesse qui se résout lorsque tous les objets ont été traités.
+     */
     async modifyStatus(newStatus) {
-      if (this.checkedFeatures.length > 0) {
-        const feature_id = this.checkedFeatures[0];
-        let feature = this.clickedFeatures.find((el) => el.feature_id === feature_id);
+      if (this.allSelected) {
+        // Cas : Modification en masse de tous les objets
+        try {
+          // Update additional query parameters based on the current filter states.
+          this.updateQueryParams();
+          const queryString = new URLSearchParams(this.queryparams).toString();
+          const response = await featureAPI.projectFeatureBulkUpdateStatus(this.projectSlug, queryString, newStatus);
+
+          if (response && response.data) {
+            // Affiche un message basé sur la réponse du backend
+            this.DISPLAY_MESSAGE({
+              comment: response.data.message,
+              level: response.data.level,
+            });
+          }
+        } catch (error) {
+          // Gère les erreurs de type Axios (400, 500, etc.)
+          if (error.response && error.response.data) {
+            this.DISPLAY_MESSAGE({
+              comment: error.response.data.error || 'Une erreur est survenue.',
+              level: 'negative',
+            });
+          } else {
+            // Gère les erreurs réseau ou autres
+            this.DISPLAY_MESSAGE({
+              comment: 'Impossible de communiquer avec le serveur.',
+              level: 'negative',
+            });
+          }
+        }
+        // Rafraîchit les données après un traitement global
+        this.resetPagination();
+        this.fetchPagedFeatures();
+      } else if (this.checkedFeatures.length > 0) {
+        // Cas : Traitement des objets un par un
+        const feature_id = this.checkedFeatures[0]; // Récupère l'ID du premier objet sélectionné
+        const feature = this.clickedFeatures.find((el) => el.feature_id === feature_id); // Trouve l'objet complet
+
         if (feature) {
-          featureAPI.updateFeature({
+          // Envoie une requête pour modifier le statut d'un objet spécifique
+          const response = await featureAPI.updateFeature({
             feature_id,
             feature_type__slug: feature.feature_type,
             project__slug: this.projectSlug,
-            newStatus
-          }).then((response) => {
-            if (response && response.data && response.status === 200) {
-              this.checkedFeatures.splice(this.checkedFeatures.indexOf(response.data.id), 1);
-              this.modifyStatus(newStatus);
-            } else {
-              this.$store.commit('DISPLAY_MESSAGE', {
-                comment: `Le signalement ${feature.title} n'a pas pu être modifié`,
-                level: 'negative'
-              });
-              this.fetchPagedFeatures();
-            }
+            newStatus,
           });
+
+          if (response && response.data && response.status === 200) {
+            // Supprime l'objet traité de la liste des objets sélectionnés
+            const newCheckedFeatures = [...this.checkedFeatures];
+            newCheckedFeatures.splice(this.checkedFeatures.indexOf(response.data.id), 1);
+            this.UPDATE_CHECKED_FEATURES(newCheckedFeatures);
+            // Rappel récursif pour traiter l'objet suivant
+            this.modifyStatus(newStatus);
+          } else {
+            // Affiche un message d'erreur si la modification échoue
+            this.DISPLAY_MESSAGE({
+              comment: `Le signalement ${feature.title} n'a pas pu être modifié.`,
+              level: 'negative',
+            });
+            // Rafraîchit les données en cas d'erreur
+            this.fetchPagedFeatures();
+          }
         }
       } else {
-        this.fetchPagedFeatures();
-        this.$store.commit('DISPLAY_MESSAGE', {
-          comment: 'Tous les signalements ont été modifié avec succès.',
-          level: 'positive'
+        // Cas : Tous les objets ont été traités après le traitement récursif
+        this.fetchPagedFeatures(); // Rafraîchit les données pour afficher les mises à jour
+        this.DISPLAY_MESSAGE({
+          comment: 'Tous les signalements ont été modifiés avec succès.',
+          level: 'positive',
         });
       }
     },
 
-    deleteFeature(feature_id) {
-      const url = `${this.API_BASE_URL}features/${feature_id}/?project__slug=${this.projectSlug}`;
-      axios //TODO: REFACTO -> Delete function already exist in store
-        .delete(url, {})
-        .then(() => {
-          if (!this.modalAllDeleteOpen) {
-            this.GET_PROJECT_FEATURES({
-              project_slug: this.projectSlug,
-            })
-              .then(() => {
-                this.fetchPagedFeatures();
-                this.checkedFeatures.splice(feature_id);
-              });
+    /**
+     * Supprime tous les objets sélectionnés.
+     *
+     * Cette méthode prend en charge deux cas :
+     * 1. Si tous les objets sont sélectionnés (`allSelected`), une requête unique en mode "bulk delete" est envoyée
+     *    au backend pour supprimer tous les objets correspondant aux critères. La liste des résultats est ensuite rafraichie.
+     * 2. Si des objets spécifiques sont sélectionnés (`checkedFeatures`), ils sont traités un par un de manière
+     *    récursive. Cette méthode utilise `Promise.all` pour envoyer les requêtes de suppression en parallèle
+     *    pour tous les objets dans la liste `checkedFeatures`. Après suppression, elle met à jour la pagination
+     *    et rafraîchit les objets affichés pour refléter les changements.
+     *
+     * En cas d'erreur (réseau ou backend), un message d'erreur est affiché, et les données sont rafraîchies.
+     * Si tous les objets sont supprimé avec succès, un message de confirmation est affiché.
+     *
+     * @returns {Promise<void>} - Une promesse qui se résout lorsque tous les objets ont été traités.
+     */
+    async deleteAllFeatureSelection() {
+      if (this.allSelected) {
+        // Cas : Suppression en masse de tous les objets
+        try {
+          // Update additional query parameters based on the current filter states.
+          this.updateQueryParams();
+          const queryString = new URLSearchParams(this.queryparams).toString();
+          const response = await featureAPI.projectFeatureBulkDelete(this.projectSlug, queryString);
+
+          if (response && response.data) {
+            // Affiche un message basé sur la réponse du backend
+            this.DISPLAY_MESSAGE({
+              comment: response.data.message,
+              level: response.data.level,
+            });
           }
-        })
-        .catch(() => {
-          return false;
-        });
-    },
-
-    deleteAllFeatureSelection() {
-      let feature = {};
-      this.checkedFeatures.forEach((feature_id) => {
-        feature = { feature_id: feature_id }; // ? Is this usefull ?
-        this.deleteFeature(feature.feature_id); //? since property feature_id is directly used after...
-      });
-      this.modalAllDelete();
+        } catch (error) {
+          // Gère les erreurs de type Axios (400, 500, etc.)
+          if (error.response && error.response.data) {
+            this.DISPLAY_MESSAGE({
+              comment: error.response.data.error || 'Une erreur est survenue.',
+              level: 'negative',
+            });
+          } else {
+            // Gère les erreurs réseau ou autres
+            this.DISPLAY_MESSAGE({
+              comment: 'Impossible de communiquer avec le serveur.',
+              level: 'negative',
+            });
+          }
+        }
+        // Rafraîchit les données après un traitement global
+        this.resetPagination();
+        this.fetchPagedFeatures();
+      } else {
+        // Sauvegarde le nombre total d'objets
+        const initialFeaturesCount = this.featuresCount;
+        // Sauvegarde la page actuelle
+        const initialCurrentPage = this.pagination.currentPage;
+        // Crée une liste de promesses pour supprimer chaque objet sélectionné
+        const promises = this.checkedFeatures.map((feature_id) =>
+          this.DELETE_FEATURE({ feature_id, noFeatureType: true })
+        );
+        // Exécute toutes les suppressions en parallèle
+        Promise.all(promises)
+          .then((response) => {
+            // Compte le nombre d'objets supprimés avec succès
+            const deletedFeaturesCount = response.reduce(
+              (acc, curr) => (curr.status === 204 ? acc + 1 : acc),
+              0
+            );
+            // Calcule le nouveau total d'objets
+            const newFeaturesCount = initialFeaturesCount - deletedFeaturesCount;
+            // Recalcule les pages
+            const newPagesArray = this.createPagesArray(newFeaturesCount, this.pagination.pagesize);
+            // Dernière page valide
+            const newLastPageNum = newPagesArray[newPagesArray.length - 1];
+            // Réinitialise la sélection
+            this.$store.commit('feature/UPDATE_CHECKED_FEATURES', []);
+
+            if (initialCurrentPage > newLastPageNum) {
+              // Navigue à la dernière page valide si la page actuelle n'existe plus
+              this.toPage(newLastPageNum);
+            } else {
+              // Rafraîchit les objets affichés
+              this.fetchPagedFeatures();
+            }
+          })
+          // Gère les erreurs éventuelles
+          .catch((err) => console.error(err));
+      }
+      // Ferme la modale de confirmation de suppression
+      this.toggleDeleteModal();
     },
 
     onFilterChange() {
-      if (mapUtil.getMap()) {
-        mapUtil.getMap().invalidateSize();
-        mapUtil.getMap()._onResize(); // force refresh for vector tiles
-        if (window.layerMVT) {
-          window.layerMVT.redraw();
-        }
+      if (mapService.getMap() && mapService.mvtLayer) {
+        mapService.mvtLayer.changed();
       }
     },
 
+    initPage() {
+      this.sort = {
+        column: this.project.feature_browsing_default_sort.replace('-', ''),
+        ascending: this.project.feature_browsing_default_sort.includes('-')
+      };
+      this.initMap();
+    },
+
     initMap() {
       this.zoom = this.$route.query.zoom || '';
       this.lat = this.$route.query.lat || '';
@@ -525,43 +481,38 @@ export default {
       var mapDefaultViewZoom =
         this.$store.state.configuration.DEFAULT_MAP_VIEW.zoom;
 
-      this.map = mapUtil.createMap(this.$refs.map, {
+      this.map = mapService.createMap(this.$refs.map, {
         zoom: this.zoom,
         lat: this.lat,
         lng: this.lng,
         mapDefaultViewCenter,
         mapDefaultViewZoom,
+        maxZoom: this.project.map_max_zoom_level,
+        interactions : { doubleClickZoom :false, mouseWheelZoom:true, dragPan:true },
+        fullScreenControl: true,
+        geolocationControl: true,
       });
 
-      this.fetchBboxNfit();
-
-      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
-        mapUtil.updateOrder(event.detail.layers.slice().reverse());
+      this.$nextTick(() => {
+        const mvtUrl = `${this.API_BASE_URL}features.mvt`;
+        mapService.addVectorTileLayer({
+          url: mvtUrl,
+          project_slug: this.projectSlug,
+          featureTypes: this.feature_types,
+          formFilters: this.form,
+          queryParams: this.queryparams,
+        });
       });
 
-      // --------- End sidebar events ----------
-
-      setTimeout(() => {
-        const project_id = this.projectSlug.split('-')[0];
-        const mvtUrl = `${this.API_BASE_URL}features.mvt/?tile={z}/{x}/{y}&project_id=${project_id}`;
-        mapUtil.addVectorTileLayer(
-          mvtUrl,
-          this.projectSlug,
-          this.feature_types,
-          this.form
-        );
-        mapUtil.addGeocoders(this.$store.state.configuration);
-      }, 1000);
+      this.fetchPagedFeatures();
     },
 
-    fetchBboxNfit(queryParams) {
+    fetchBboxNfit(queryString) {
       featureAPI
-        .getFeaturesBbox(this.projectSlug, queryParams)
+        .getFeaturesBbox(this.projectSlug, queryString)
         .then((bbox) => {
           if (bbox) {
-            mapUtil.getMap().fitBounds(bbox, { padding: [25, 25] });
+            mapService.fitBounds(bbox);
           }
         });
     },
@@ -582,65 +533,89 @@ export default {
       return result;
     },
 
-    buildQueryString() {
-      let urlParams = '';
-      let typeFilter = this.getFeatureTypeSlug(this.form.type.selected);
-      let statusFilter = this.form.status.selected.value;
-
-      if (typeFilter) urlParams += `&feature_type_slug=${typeFilter}`;
-      if (statusFilter) urlParams += `&status__value=${statusFilter}`;
-      if (this.form.title) urlParams += `&title=${this.form.title}`;
-      if (this.sort.column) {
-        urlParams += `&ordering=${
-          this.sort.ascending ? '-' : ''
-        }${this.getAvalaibleField(this.sort.column)}`;
+    /**
+     * Updates the query parameters based on the current state of the pagination and form filters.
+     * This function sets various parameters like offset, feature_type_slug, status__value, title,
+     * and ordering to be used in an API request and to filter hidden features on mvt tiles.
+     */
+    updateQueryParams() {
+      // empty queryparams to remove params when removed from the form
+      this.queryparams = {};
+      // Update the 'offset' parameter based on the current pagination start value.
+      this.queryparams['offset'] = this.pagination.start;
+      // Set 'feature_type_slug' if a type is selected in the form.
+      if (this.form.type.length > 0) {
+        this.queryparams['feature_type_slug'] = this.form.type;
+      }
+      // Set 'status__value' if a status is selected in the form.
+      if (this.form.status.length > 0) {
+        this.queryparams['status__value'] = this.form.status;
       }
-      return urlParams;
+      // Set 'title' if a title is entered in the form.
+      if (this.form.title) {
+        this.queryparams['title'] = this.form.title;
+      }
+      // Update the 'ordering' parameter based on the current sorting state.
+      // Prepends a '-' for descending order if sort.ascending is false.
+      this.queryparams['ordering'] = `${this.sort.ascending ? '-' : ''}${this.getAvalaibleField(this.sort.column)}`;
     },
 
-    fetchPagedFeatures(newUrl) {
-      let url = `${this.API_BASE_URL}projects/${this.projectSlug}/feature-paginated/?output=geojson&limit=${this.pagination.pagesize}&offset=${this.pagination.start}`;
-      //* if receiving next & previous url
-      if (newUrl && typeof newUrl === 'string') {
-        //newUrl = newUrl.replace("8000", "8010"); //* for dev uncomment to use proxy link
-        url = newUrl;
+    /**
+     * Fetches paginated feature data from the API.
+     * This function is called to retrieve a specific page of features based on the current pagination settings and any applied filters.
+     * If the application is offline, it displays a message and does not proceed with the API call.
+     */
+    fetchPagedFeatures() {
+      // Check if the application is online; if not, display a message and return.
+      if (!this.isOnline) {
+        this.DISPLAY_MESSAGE({
+          comment: 'Les signalements du projet non mis en cache ne sont pas accessibles en mode déconnecté',
+        });
+        return;
       }
-      const queryString = this.buildQueryString();
-      url += queryString;
 
-      this.$store.commit(
-        'DISPLAY_LOADER',
-        'Récupération des signalements en cours...'
-      );
+      // Display a loading message.
+      this.loading = true;
+
+      // Update additional query parameters based on the current filter states.
+      this.updateQueryParams();
+      const queryString = new URLSearchParams(this.queryparams).toString();
+      // Construct the base URL with query parameters.
+      const url = `${this.API_BASE_URL}projects/${this.projectSlug}/feature-paginated/?limit=${this.pagination.pagesize}&${queryString}`;
+      // Make an API call to get the paginated features.
       featureAPI.getPaginatedFeatures(url)
         .then((data) => {
           if (data) {
+            // Update the component state with the data received from the API.
             this.featuresCount = data.count;
+            this.featuresWithGeomCount = data.geom_count;
             this.previous = data.previous;
             this.next = data.next;
-            this.paginatedFeatures = data.results.features;
+            this.paginatedFeatures = data.results;
           }
-          //* bbox needs to be updated with the same filters
+          // If there are features, update the bounding box.
           if (this.paginatedFeatures.length) {
             this.fetchBboxNfit(queryString);
-            this.onFilterChange(); //* use paginated event to watch change in filters and modify features on map
           }
-          this.$store.commit('DISCARD_LOADER');
+          // Trigger actions on filter change.
+          this.onFilterChange();
+          // Hide the loading message.
+          this.loading = false;
         });
     },
 
-    resetPaginationNfetchFeatures() {
-      this.pagination = {
-        currentPage: 1,
-        pagesize: 15,
-        start: 0,
-        end: 15,
-      },
-      this.fetchPagedFeatures();
-    },
-
     //* Pagination for table *//
 
+    createPagesArray(featuresCount, pagesize) {
+      const totalPages = Math.ceil(
+        featuresCount / pagesize
+      );
+      return [...Array(totalPages).keys()].map((pageNumb) => {
+        ++pageNumb;
+        return pageNumb;
+      });
+    },
+
     handlePageChange(page) {
       if (page === 'next') {
         this.toNextPage();
@@ -654,10 +629,15 @@ export default {
 
     handleSortChange(sort) {
       this.sort = sort;
-      this.fetchPagedFeatures({
-        filterType: undefined,
-        filterValue: undefined,
-      });
+      this.fetchPagedFeatures();
+    },
+
+    handleAllSelectedChange(isChecked) {
+      this.allSelected = isChecked;
+      // Si des sélections existent, tout déselectionner
+      if (this.checkedFeatures.length > 0) {
+        this.UPDATE_CHECKED_FEATURES([]);
+      }
     },
 
     toPage(pageNumber) {
@@ -676,7 +656,7 @@ export default {
           this.pagination.end -= this.pagination.pagesize;
           this.pagination.currentPage -= 1;
         }
-        this.fetchPagedFeatures(this.previous);
+        this.fetchPagedFeatures();
       }
     },
 
@@ -687,7 +667,7 @@ export default {
           this.pagination.end += this.pagination.pagesize;
           this.pagination.currentPage += 1;
         }
-        this.fetchPagedFeatures(this.next);
+        this.fetchPagedFeatures();
       }
     },
   },
@@ -696,81 +676,92 @@ export default {
 
 
 <style lang="less" scoped>
-
-#project-features {
-  margin: 2em auto 1em;
-}
-
-#map {
-  width: 100%;
-  min-height: 300px;
-  height: calc(100vh - 300px);
-  border: 1px solid grey;
-  /* To not hide the filters */
+.loader-container {
+  position: relative;
+  min-height: 250px; // keep a the spinner above result and below table header
   z-index: 1;
+  .ui.inverted.dimmer.active {
+    opacity: .6;
+  }
 }
-
-#feature-list-container {
-  justify-content: flex-start;
-}
-
-#feature-list-container .ui.menu:not(.vertical) .right.item {
-  padding-right: 0;
-}
-
 .map-container {
   width: 80vw;
   transform: translateX(-50%);
   margin-left: 50%;
   visibility: hidden;
   position: absolute;
+  #map {
+    min-height: 0;
+  }
 }
 .map-container.visible {
   visibility: visible;
-  position: initial;
-}
-
-.margin-left-25 {
-  margin-left: 0.25em !important;
-}
+  position: relative;
+  width: 100%;
 
-.no-padding {
-  padding: 0 !important;
-}
+  .sidebar-container {
+    left: -250px;
+  }
 
-.ui.dropdown .menu .left.menu, .ui.dropdown > .left.menu .menu {
-  margin-right: 0 !important;
-}
+  .sidebar-container.expanded {
+    left: 0;
+  }
 
-@media screen and (min-width: 767px) {
-  .twelve-wide {
-    width: 75% !important;
+  #map {
+    width: 100%;
+    min-height: 310px;
+    height: calc(100vh - 310px);
+    border: 1px solid grey;
+    /* To not hide the filters */
+    z-index: 1;
   }
 }
+div.geolocation-container {
+  // each button have (more or less depends on borders) .5em space between
+  // zoom buttons are 60px high, geolocation and full screen button is 34px high with borders
+  top: calc(1.3em + 60px + 34px);
+}
 
 @media screen and (max-width: 767px) {
-  #feature-list-container > .mobile-fullwidth {
-    width: 100% !important;
-  }
-  .no-margin-mobile {
-    margin: 0 !important;
+  #project-features {
+    margin: 1em auto 1em;
   }
-  .no-padding-mobile {
-    padding-top: 0 !important;
-    padding-bottom: 0 !important;
+  .map-container {
+    width: 100%;
+    position: relative;
   }
-  .mobile-column {
-    flex-direction: column !important;
+}
+
+.fadeIn-enter-active {
+  animation: fadeIn .5s;
+}
+.fadeIn-leave-active {
+  animation: fadeIn .5s reverse;
+}
+.transition.fade.in {
+  -webkit-animation-name: fadeIn;
+  animation-name: fadeIn
+}
+
+@-webkit-keyframes fadeIn {
+  0% {
+    opacity: 0
   }
-  #button-dropdown {
-    transform: translate(-50px, -60px);
+
+  100% {
+    opacity: .9
   }
-  #form-filters > .field.column {
-    width: 100% !important;
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0
   }
-  .map-container {
-    width: 100%;
+
+  100% {
+    opacity: .9
   }
 }
+
 </style>
 

src/views/Project/ProjectBasemaps.vue

 <template>
-  <div
-    id="project-basemaps"
-    class="page"
-  >
-    <div
-      id="message_info"
-      class="fullwidth"
-    >
-      <div v-if="infoMessage.length > 0">
-        <div
-          v-for="(message, index) of infoMessage"
-          :key="index"
-          :class="['ui message', message.success ? 'positive' : 'negative']"
-          style="text-align: left"
-        >
-          <div class="header">
-            <i class="info circle icon" /> Informations
-          </div>
-          {{ message.comment }}
-        </div>
-      </div>
-    </div>
+  <div id="project-basemaps">
     <h1 class="ui header">
       Administration des fonds cartographiques
     </h1>
 
     <form
       id="form-layers"
-      action="."
-      method="post"
-      enctype="multipart/form-data"
       class="ui form"
     >
       <!--  {{ formset.management_form }} -->
       <div class="ui buttons">
-        <a
+        <button
           class="ui compact small icon left floated button green"
+          type="button"
           data-variation="mini"
           @click="addBasemap"
         >
-          <i class="ui plus icon" />
+          <i
+            class="ui plus icon"
+            aria-hidden="true"
+          />
           <span>&nbsp;Créer un fond cartographique</span>
-        </a>
+        </button>
       </div>
 
       <div
         v-if="basemaps"
-        class="ui"
+        class="ui margin-bottom margin-top"
       >
         <BasemapListItem
           v-for="basemap in basemaps"
@@ -54,22 +34,26 @@
           :basemap="basemap"
         />
       </div>
-      <div class="margin-top">
-        <button
-          type="button"
-          class="ui teal icon floated button"
-          @click="saveChanges"
-        >
-          <i class="white save icon" /> Enregistrer les changements
-        </button>
-      </div>
+
+      <button
+        v-if="basemaps && basemaps[0] && basemaps[0].title && basemaps[0].layers.length > 0"
+        type="button"
+        class="ui teal icon floated button"
+        @click="saveChanges"
+      >
+        <i
+          class="white save icon"
+          aria-hidden="true"
+        />
+        Enregistrer les changements
+      </button>
     </form>
   </div>
 </template>
 
 <script>
-import BasemapListItem from '@/components/BasemapListItem.vue';
-import { mapState, mapGetters } from 'vuex';
+import BasemapListItem from '@/components/Project/Basemaps/BasemapListItem.vue';
+import { mapState, mapGetters, mapMutations } from 'vuex';
 
 export default {
   name: 'ProjectBasemaps',
@@ -80,7 +64,6 @@ export default {
 
   data() {
     return {
-      infoMessage: [],
       newBasemapIds: [],
     };
   },
@@ -102,6 +85,7 @@ export default {
   },
 
   methods: {
+    ...mapMutations(['DISPLAY_MESSAGE']),
     addBasemap() {
       this.newBasemapIds.push(this.basemapMaxId + 1); //* register new basemaps to seperate post and put
       this.$store.commit('map/CREATE_BASEMAP', this.basemapMaxId + 1);
@@ -130,30 +114,20 @@ export default {
           .then((response) => {
             const errors = response.filter(
               (res) =>
-                res.status === 200 && res.status === 201 && res.status === 204
+                res.status !== 200 && res.status !== 201 && res.status !== 204
             );
             if (errors.length === 0) {
-              this.infoMessage.push({
-                success: true,
+              this.DISPLAY_MESSAGE({
                 comment: 'Enregistrement effectué.',
+                level: 'positive'
               });
               this.newBasemapIds = [];
             } else {
-              this.infoMessage.push({
-                success: false,
-                comment: "L'édition des fonds cartographiques a échoué. ",
+              this.DISPLAY_MESSAGE({
+                comment: 'L\'édition des fonds cartographiques a échoué.',
+                level: 'negative'
               });
             }
-
-            document
-              .getElementById('message_info')
-              .scrollIntoView({ block: 'end', inline: 'nearest' });
-            setTimeout(
-              function () {
-                this.infoMessage = [];
-              }.bind(this),
-              5000
-            );
           })
           .catch((error) => {
             console.error(error);
@@ -162,12 +136,4 @@ export default {
     },
   },
 };
-</script>
-
-<style lang="less" scoped>
-
-#project-basemaps {
-  min-width: 300px;
-}
-
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file

src/views/Project/ProjectDetail.vue

@@ -3,65 +3,73 @@
     <div
       v-if="permissions && permissions.can_view_project && project"
       id="project-detail"
-      class="page"
     >
-      <div
-        id="message"
-        class="fullwidth"
-      >
-        <div
-          v-if="tempMessage"
-          class="ui positive message"
-        >
-          <p><i class="check icon" /> {{ tempMessage }}</p>
-        </div>
-      </div>
-      <div
-        id="message_info"
-        class="fullwidth"
-      >
-        <div
-          v-if="infoMessage"
-          class="ui info message"
-          style="text-align: left"
-        >
-          <div class="header">
-            <i class="info circle icon" /> Informations
-          </div>
-          <ul class="list">
-            {{
-              infoMessage
-            }}
-          </ul>
-        </div>
-      </div>
-
       <ProjectHeader
         :arrays-offline="arraysOffline"
+        @retrieveInfo="retrieveProjectInfo"
+        @updateLocalStorage="updateLocalStorage"
       />
 
-      <div class="ui grid">
+      <div class="ui grid stackable">
         <div class="row">
           <div class="eight wide column">
             <ProjectFeatureTypes
-              :loading="projectInfoLoading"
+              :loading="featureTypesLoading"
               :project="project"
+              @delete="toggleDeleteFeatureTypeModal"
+              @update="updateAfterImport"
             />
           </div>
 
-          <div class="eight wide column">
-            <div
-              :class="{ active: mapLoading }"
-              class="ui inverted dimmer"
-            >
-              <div class="ui text loader">
-                Chargement de la carte...
+          <div class="eight wide column block-map">
+            <div class="map-container">
+              <div
+                id="map"
+                ref="map"
+              />
+              <div
+                :class="{ active: mapLoading }"
+                class="ui inverted dimmer"
+              >
+                <div class="ui text loader">
+                  Chargement de la carte...
+                </div>
+              </div>
+              <SidebarLayers
+                v-if="basemaps && map && !projectInfoLoading"
+                ref="sidebar"
+              />
+              <Geolocation />
+              <div
+                id="popup"
+                class="ol-popup"
+              >
+                <a
+                  id="popup-closer"
+                  href="#"
+                  class="ol-popup-closer"
+                />
+                <div
+                  id="popup-content"
+                />
               </div>
             </div>
-            <div
-              id="map"
-              ref="map"
-            />
+
+            <router-link
+              id="features-list"
+              :to="{
+                name: 'liste-signalements',
+                params: { slug: slug },
+              }"
+              custom
+            >
+              <div
+                class="ui button fluid teal"
+              >
+                <i class="ui icon arrow right" />
+                Voir tous les signalements
+              </div>
+            </router-link>
           </div>
         </div>
 
@@ -69,7 +77,7 @@
           <div class="sixteen wide column">
             <div class="ui two stackable cards">
               <ProjectLastFeatures
-                :loading="featuresLoading"
+                ref="lastFeatures"
               />
               <ProjectLastComments
                 :loading="projectInfoLoading"
@@ -89,33 +97,38 @@
     </div>
 
     <span v-else-if="!projectInfoLoading">
-      <i class="icon exclamation triangle" />
+      <i
+        class="icon exclamation triangle"
+        aria-hidden="true"
+      />
       <span>Vous ne disposez pas des droits nécessaires pour consulter ce
         projet.</span>
     </span>
 
     <ProjectModal
       :is-subscriber="is_suscriber"
+      :feature-type-to-delete="featureTypeToDelete"
       @action="handleModalAction"
     />
   </div>
 </template>
 
 <script>
-import { mapUtil } from '@/assets/js/map-util.js';
+import mapService from '@/services/map-service';
 import { mapGetters, mapState, mapActions, mapMutations } from 'vuex';
+
 import projectAPI from '@/services/project-api';
 import featureTypeAPI from '@/services/featureType-api';
 import featureAPI from '@/services/feature-api';
 
-import axios from '@/axios-client.js';
-
-import ProjectHeader from '@/components/ProjectDetail/ProjectHeader';
-import ProjectFeatureTypes from '@/components/ProjectDetail/ProjectFeatureTypes';
-import ProjectLastFeatures from '@/components/ProjectDetail/ProjectLastFeatures';
-import ProjectLastComments from '@/components/ProjectDetail/ProjectLastComments';
-import ProjectParameters from '@/components/ProjectDetail/ProjectParameters';
-import ProjectModal from '@/components/ProjectDetail/ProjectModal';
+import ProjectHeader from '@/components/Project/Detail/ProjectHeader';
+import ProjectFeatureTypes from '@/components/Project/Detail/ProjectFeatureTypes';
+import ProjectLastFeatures from '@/components/Project/Detail/ProjectLastFeatures';
+import ProjectLastComments from '@/components/Project/Detail/ProjectLastComments';
+import ProjectParameters from '@/components/Project/Detail/ProjectParameters';
+import ProjectModal from '@/components/Project/Detail/ProjectModal';
+import SidebarLayers from '@/components/Map/SidebarLayers';
+import Geolocation from '@/components/Map/Geolocation';
 
 export default {
   name: 'ProjectDetail',
@@ -126,7 +139,9 @@ export default {
     ProjectLastFeatures,
     ProjectLastComments,
     ProjectParameters,
-    ProjectModal
+    ProjectModal,
+    SidebarLayers,
+    Geolocation,
   },
 
   filters: {
@@ -143,8 +158,8 @@ export default {
 
   props: {
     message: {
-      type: String,
-      default: ''
+      type: Object,
+      default: () => {}
     }
   },
 
@@ -158,8 +173,8 @@ export default {
       is_suscriber: false,
       tempMessage: null,
       projectInfoLoading: true,
+      featureTypesLoading: false,
       featureTypeToDelete: null,
-      featuresLoading: true,
       mapLoading: true,
     };
   },
@@ -181,20 +196,18 @@ export default {
       'feature_types'
     ]),
     ...mapState([
-      'last_comments',
       'user',
       'user_permissions',
       'reloadIntervalId',
     ]),
     ...mapState('map', [
-      'map'
+      'map',
+      'basemaps',
+      'availableLayers',
     ]),
     API_BASE_URL() {
       return this.configuration.VUE_APP_DJANGO_API_BASE;
     },
-    isSharedProject() {
-      return this.$route.path.includes('projet-partage');
-    },
   },
 
   created() {
@@ -206,33 +219,28 @@ export default {
         })
         .then((data) => (this.is_suscriber = data.is_suscriber));
     }
-    this.$store.commit('feature/SET_FEATURES', []); //* empty features remaining in case they were in geojson format and will be fetch after map initialization anyway
-    this.$store.commit('feature-type/SET_FEATURE_TYPES', []); //* empty feature_types remaining from previous project
   },
 
   mounted() {
     this.retrieveProjectInfo();
-
     if (this.message) {
-      this.tempMessage = this.message;
-      document
-        .getElementById('message')
-        .scrollIntoView({ block: 'end', inline: 'nearest' });
-      setTimeout(() => (this.tempMessage = null), 5000); //* hide message after 5 seconds
+      this.DISPLAY_MESSAGE(this.message);
     }
   },
 
-  destroyed() {
+  beforeDestroy() {
+    this.$store.dispatch('CANCEL_CURRENT_SEARCH_REQUEST');
     this.CLEAR_RELOAD_INTERVAL_ID();
+    this.CLOSE_PROJECT_MODAL();
   },
 
   methods: {
     ...mapMutations([
-      'SET_RELOAD_INTERVAL_ID',
       'CLEAR_RELOAD_INTERVAL_ID',
       'DISPLAY_MESSAGE',
     ]),
     ...mapMutations('modals', [
+      'OPEN_PROJECT_MODAL',
       'CLOSE_PROJECT_MODAL'
     ]),
     ...mapActions('projects', [
@@ -247,40 +255,31 @@ export default {
     ]),
     ...mapActions('feature-type', [
       'GET_PROJECT_FEATURE_TYPES',
-      'GET_IMPORTS'
     ]),
-    getRouteUrl(url) {
-      if (this.isSharedProject) {
-        url = url.replace('projet', 'projet-partage');
-      }
-      return url.replace(this.$store.state.configuration.BASE_URL, ''); //* remove duplicate /geocontrib
-    },
 
     retrieveProjectInfo() {
-      this.$store.commit('DISPLAY_LOADER', 'Projet en cours de chargement.');
       Promise.all([
         this.GET_PROJECT(this.slug),
         this.GET_PROJECT_INFO(this.slug)
       ])
         .then(() => {
-          this.$store.commit('DISCARD_LOADER');
-          this.projectInfoLoading = false;
-          setTimeout(() => {
-            let map = mapUtil.getMap();
-            if (map) map.remove();
+          this.$nextTick(() => {
+            const map = mapService.getMap();
+            if (map) mapService.destroyMap();
             this.initMap();
-          }, 1000);
+          });
         })
         .catch((err) => {
           console.error(err);
-          this.$store.commit('DISCARD_LOADER');
+        })
+        .finally(() => {
           this.projectInfoLoading = false;
         });
     },
 
     checkForOfflineFeature() {
       let arraysOffline = [];
-      let localStorageArray = localStorage.getItem('geocontrib_offline');
+      const localStorageArray = localStorage.getItem('geocontrib_offline');
       if (localStorageArray) {
         arraysOffline = JSON.parse(localStorageArray);
         this.arraysOffline = arraysOffline.filter(
@@ -289,61 +288,13 @@ export default {
       }
     },
 
-    sendOfflineFeatures() {
-      var promises = [];
-      let self = this;
-      this.arraysOfflineErrors = [];
-      this.arraysOffline.forEach((feature) => {
-        if (feature.type === 'post') {
-          promises.push(
-            axios
-              .post(`${this.API_BASE_URL}features/`, feature.geojson)
-              .then((response) => {
-                if (response.status === 201 && response.data) {
-                  return 'OK';
-                } else {
-                  self.arraysOfflineErrors.push(feature);
-                }
-              })
-              .catch((error) => {
-                console.error(error);
-                self.arraysOfflineErrors.push(feature);
-              })
-          );
-        } else if (feature.type === 'put') {
-          promises.push(
-            axios
-              .put(
-                `${this.API_BASE_URL}features/${feature.featureId}`,
-                feature.geojson
-              )
-              .then((response) => {
-                if (response.status === 200 && response.data) {
-                  return 'OK';
-                } else {
-                  self.arraysOfflineErrors.push(feature);
-                }
-              })
-              .catch((error) => {
-                console.error(error);
-                self.arraysOfflineErrors.push(feature);
-              })
-          );
-        }
-      });
-      Promise.all(promises).then(() => {
-        this.updateLocalStorage();
-        window.location.reload();
-      });
-    },
-
     updateLocalStorage() {
       let arraysOffline = [];
-      let localStorageArray = localStorage.getItem('geocontrib_offline');
+      const localStorageArray = localStorage.getItem('geocontrib_offline');
       if (localStorageArray) {
         arraysOffline = JSON.parse(localStorageArray);
       }
-      let arraysOfflineOtherProject = arraysOffline.filter(
+      const arraysOfflineOtherProject = arraysOffline.filter(
         (x) => x.project !== this.slug
       );
       this.arraysOffline = [];
@@ -362,14 +313,16 @@ export default {
         })
         .then((data) => {
           this.is_suscriber = data.is_suscriber;
-          this.modalType = false;
-          if (this.is_suscriber)
-            this.infoMessage =
-              'Vous êtes maintenant abonné aux notifications de ce projet.';
-          else
-            this.infoMessage =
-              'Vous ne recevrez plus les notifications de ce projet.';
-          setTimeout(() => (this.infoMessage = ''), 3000);
+          this.CLOSE_PROJECT_MODAL();
+          if (this.is_suscriber) {
+            this.DISPLAY_MESSAGE({
+              comment: 'Vous êtes maintenant abonné aux notifications de ce projet.', level: 'positive'
+            });
+          } else {
+            this.DISPLAY_MESSAGE({
+              comment: 'Vous ne recevrez plus les notifications de ce projet.', level: 'negative'
+            });
+          }
         });
     },
 
@@ -393,9 +346,9 @@ export default {
     deleteFeatureType() {
       featureTypeAPI.deleteFeatureType(this.featureTypeToDelete.slug)
         .then((response) => {
-          this.modalType = false;
+          this.CLOSE_PROJECT_MODAL();
           if (response === 'success') {
-            this.GET_PROJECT();
+            this.GET_PROJECT(this.slug);
             this.retrieveProjectInfo();
             this.DISPLAY_MESSAGE({
               comment: `Le type de signalement ${this.featureTypeToDelete.title} a bien été supprimé.`,
@@ -408,6 +361,13 @@ export default {
             });
           }
           this.featureTypeToDelete = null;
+        })
+        .catch(() => {
+          this.DISPLAY_MESSAGE({
+            comment: `Une erreur est survenu lors de la suppression du type de signalement ${this.featureTypeToDelete.title}.`,
+            level: 'negative',
+          });
+          this.CLOSE_PROJECT_MODAL();
         });
     },
 
@@ -425,61 +385,100 @@ export default {
       }
     },
 
-    toggleModalType(featureType) {
+    toggleDeleteFeatureTypeModal(featureType) {
       this.featureTypeToDelete = featureType;
-      this.modalType = 'deleteFeatureType';
+      this.OPEN_PROJECT_MODAL('deleteFeatureType');
     },
-
+    /**
+     * Initializes the map if the project is accessible and the user has view permissions.
+     * This method sets up the map, loads vector tile layers, and handles offline features.
+     */
     async initMap() {
+      // Check if the project is accessible and the user has view permissions
       if (this.project && this.permissions.can_view_project) {
-        await this.INITIATE_MAP(this.$refs.map);
+        // Initialize the map using the provided element reference
+        await this.INITIATE_MAP({ el: this.$refs.map });
+        // Check for offline features
         this.checkForOfflineFeature();
-        let project_id = this.$route.params.slug.split('-')[0];
-        const mvtUrl = `${this.API_BASE_URL}features.mvt/?tile={z}/{x}/{y}&project_id=${project_id}`;
-        mapUtil.addVectorTileLayer(
-          mvtUrl,
-          this.$route.params.slug,
-          this.feature_types
-        );
-        this.mapLoading = false;
+        // Define the URL for vector tile layers
+        const mvtUrl = `${this.API_BASE_URL}features.mvt`;
+        // Define parameters for loading layers
+        const params = {
+          project_slug: this.slug,
+          featureTypes: this.feature_types,
+          queryParams: {
+            ordering: this.project.feature_browsing_default_sort,
+            filter: this.project.feature_browsing_default_filter,
+          },
+        };
+        // Add vector tile layers to the map
+        mapService.addVectorTileLayer({
+          url: mvtUrl,
+          ...params
+        });
+        // Modify offline feature properties (setting color to 'red')
         this.arraysOffline.forEach((x) => (x.geojson.properties.color = 'red'));
+        // Extract offline features from arraysOffline
         const featuresOffline = this.arraysOffline.map((x) => x.geojson);
-
-        this.GET_PROJECT_FEATURES({
-          project_slug: this.slug,
-          ordering: '-created_on',
-          limit: null,
-          geojson: true,
-        })
-          .then(() => {
-            this.featuresLoading = false;
-            mapUtil.addFeatures(
-              [...this.features, ...featuresOffline],
-              {},
-              true,
-              this.feature_types
-            );
-          })
-          .catch((err) => {
-            console.error(err);
-            this.featuresLoading = false;
+        // Add offline features to the map if available
+        if (featuresOffline && featuresOffline.length > 0) {
+          mapService.addFeatures({
+            addToMap: true,
+            features: featuresOffline,
+            ...params
           });
-
+        }
+        // Get the bounding box of features and fit the map to it
         featureAPI.getFeaturesBbox(this.slug).then((bbox) => {
           if (bbox) {
-            mapUtil.getMap().fitBounds(bbox, { padding: [25, 25] });
+            mapService.fitBounds(bbox);
           }
+          this.mapLoading = false; // Mark map loading as complete
         });
       }
     },
+
+    updateAfterImport() {
+      // reload feature types
+      this.featureTypesLoading = true;
+      this.GET_PROJECT_FEATURE_TYPES(this.slug)
+        .then(() => {
+          this.featureTypesLoading = false;
+        });
+      // reload last features
+      this.$refs.lastFeatures.fetchLastFeatures();
+      // reload map
+      const map = mapService.getMap();
+      if (map) mapService.destroyMap();
+      this.mapLoading = true;
+      this.initMap();
+    },
   },
 };
 </script>
 
-<style scoped>
-
+<style lang="less" scoped>
 .fullwidth {
   width: 100%;
 }
 
+.block-map {
+  display: flex !important;
+  flex-direction: column;
+  .map-container {
+  position: relative;
+  height: 100%;
+  #map {
+    border: 1px solid grey;
+  }
+}
+  .button {
+    margin-top: 0.5em;
+  }
+}
+
+div.geolocation-container {
+  /* each button have .5em space between, zoom buttons are 60px high and full screen button is 34px high */
+  top: calc(1.1em + 60px);
+}
 </style>