src/utils/index.js

+import featureAPI from '@/services/feature-api';
+import { isEqual, isNil } from 'lodash';
+
 export function formatStringDate(stringDate) {
   const date = new Date(stringDate);
-  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;
+  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)
   ) {
@@ -19,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'
@@ -38,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>
 </template>

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>

src/views/Feature/FeatureDetail.vue

 <template>
-  <div
-    id="feature-detail"
-    class="page"
-  >
+  <div id="feature-detail">
     <div
       v-if="currentFeature"
-      class="ui grid"
+      class="ui grid stackable"
     >
       <div class="row">
         <div class="sixteen wide column">
-          <FeatureHeader />
+          <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="eight wide column">
           <FeatureTable
-            @pushNGo="pushNgo"
+            v-if="project"
+            ref="featureTable"
+            :feature-type="feature_type"
+            :fast-edition-mode="project.fast_edition_mode"
+            :can-edit-feature="canEditFeature"
           />
         </div>
-        <div class="eight wide column">
-          <div
-            id="map"
-            ref="map"
-          />
+        <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
+              id="popup"
+              class="ol-popup"
+            >
+              <a
+                id="popup-closer"
+                href="#"
+                class="ol-popup-closer"
+              />
+              <div
+                id="popup-content"
+              />
+            </div>
+          </div>
         </div>
       </div>
       <div class="row">
@@ -34,28 +71,38 @@
         <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="isCanceling"
-        class="ui dimmer modals page transition visible active"
-        style="display: flex !important"
+        v-if="isDeleting"
+        class="ui dimmer modals visible active"
       >
         <div
           :class="[
-            'ui mini modal subscription',
-            { 'active visible': isCanceling },
+            'ui mini modal',
+            { 'active visible': isDeleting },
           ]"
         >
           <i
             class="close icon"
-            @click="isCanceling = false"
+            aria-hidden="true"
+            @click="isDeleting = false"
           />
-          <div class="ui icon header">
-            <i class="trash alternate icon" />
+          <div
+            v-if="isDeleting"
+            class="ui icon header"
+          >
+            <i
+              class="trash alternate icon"
+              aria-hidden="true"
+            />
             Supprimer le signalement
           </div>
+
           <div class="actions">
             <button
               type="button"
@@ -67,7 +114,60 @@
           </div>
         </div>
       </div>
+
+      <div
+        v-if="isLeaving"
+        class="ui dimmer modals visible active"
+      >
+        <div
+          :class="[
+            'ui mini modal',
+            { 'active visible': isLeaving },
+          ]"
+        >
+          <i
+            class="close icon"
+            aria-hidden="true"
+            @click="isLeaving = false"
+          />
+          <div class="ui icon header">
+            <i
+              class="sign-out icon"
+              aria-hidden="true"
+            />
+            Abandonner les modifications
+          </div>
+          <div class="content">
+            Les modifications apportées au signalement ne seront pas sauvegardées, continuer ?
+          </div>
+          <div class="actions">
+            <button
+              type="button"
+              class="ui green compact button"
+              @click="stayOnPage"
+            >
+              <i
+                class="close icon"
+                aria-hidden="true"
+              />
+              Annuler
+            </button>
+            <button
+              type="button"
+              class="ui red compact button"
+              @click="leavePage"
+            >
+              Continuer
+              <i
+                class="arrow right icon"
+                aria-hidden="true"
+              />
+            </button>
+          </div>
+        </div>
+      </div>
     </div>
+
     <div v-else>
       Pas de signalement correspondant trouvé
     </div>
@@ -75,8 +175,9 @@
 </template>
 
 <script>
-import { mapState, mapActions, mapMutations } from 'vuex';
-import { mapUtil } from '@/assets/js/map-util.js';
+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';
@@ -85,6 +186,10 @@ 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',
@@ -93,7 +198,25 @@ export default {
     FeatureHeader,
     FeatureTable,
     FeatureAttachements,
-    FeatureComments
+    FeatureComments,
+    SidebarLayers,
+    Geolocation,
+  },
+
+  beforeRouteUpdate (to, from, next) {
+    if (this.hasUnsavedChange && !this.isSavingChanges) {
+      this.confirmLeave(next); // prompt user that there is unsaved changes or that features order might change
+    } else {
+      next(); // continue navigation
+    }
+  },
+
+  beforeRouteLeave (to, from, next) {
+    if (this.hasUnsavedChange && !this.isSavingChanges) {
+      this.confirmLeave(next); // prompt user that there is unsaved changes or that features order might change
+    } else {
+      next(); // continue navigation
+    }
   },
 
   data() {
@@ -113,63 +236,130 @@ 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_LEVEL_PROJECTS',
+      'user'
+    ]),
     ...mapState('projects', [
       'project'
     ]),
     ...mapState('feature-type', [
-      'feature_types'
+      'feature_types',
     ]),
     ...mapState('feature', [
-      'currentFeature'
+      'currentFeature',
+      'form',
+    ]),
+    ...mapGetters('feature-type', [
+      'feature_type',
+    ]),
+    ...mapGetters([
+      'permissions',
+    ]),
+    ...mapState('map', [
+      'basemaps',
     ]),
+    /**
+     * Checks if there are any unsaved changes in the form compared to the current feature's properties.
+     * This function is useful for prompting the user before they navigate away from a page with unsaved changes.
+     * 
+     * @returns {boolean} - Returns true if there are unsaved changes; otherwise, returns false.
+     */
+    hasUnsavedChange() {
+      // Ensure we are in edition mode and all required objects are present.
+      if (this.project && this.project.fast_edition_mode &&
+        this.form && this.currentFeature && this.currentFeature.properties) {
+        // Check for changes in title, description, and status.
+        if (this.form.title !== this.currentFeature.properties.title) return true;
+        if (this.form.description.value !== this.currentFeature.properties.description) return true;
+        if (this.form.status.value !== this.currentFeature.properties.status) return true;
+        if (this.form.assigned_member.value !== this.currentFeature.properties.assigned_member) return true;
+
+        // Iterate over extra forms to check for any changes.
+        for (const xForm of this.$store.state.feature.extra_forms) {
+          const originalValue = this.currentFeature.properties[xForm.name];
+          // Check if the form value has changed, considering edge cases for undefined, null, or empty values.
+          if (
+            !isEqual(xForm.value, originalValue) && // Check if values have changed.
+            !(!xForm.value && !originalValue) // Ensure both aren't undefined/null/empty, treating null as equivalent to false for unactivated conditionals or unset booleans.
+          ) {
+            // Log the difference for debugging purposes.
+            console.log(`In custom form [${xForm.name}], the current form value [${xForm.value}] differs from original value [${originalValue}]`);
+            return true;
+          }
+        }
+      }
+      // If none of the above conditions are met, return false indicating no unsaved changes.
+      return false;
+    },
+
+    isFeatureCreator() {
+      if (this.currentFeature && this.currentFeature.properties && this.user) {
+        return this.currentFeature.properties.creator === this.user.id ||
+          this.currentFeature.properties.creator.username === this.user.username;
+      }
+      return false;
+    },
+
+    isModerator() {
+      return this.USER_LEVEL_PROJECTS && this.USER_LEVEL_PROJECTS[this.slug] === 'Modérateur';
+    },
+
+    isAdministrator() {
+      return this.USER_LEVEL_PROJECTS && this.USER_LEVEL_PROJECTS[this.slug] === 'Administrateur projet';
+    },
+
+    canEditFeature() {
+      return (this.permissions && this.permissions.can_update_feature) ||
+                this.isFeatureCreator ||
+                this.isModerator ||
+                this.user.is_superuser;
+    },
+
+    canDeleteFeature() {
+      return (this.permissions && this.permissions.can_delete_feature && this.isFeatureCreator) ||
+                this.isFeatureCreator ||
+                this.isModerator ||
+                this.isAdministrator ||
+                this.user.is_superuser;
+    },
+  },
+
+  watch: {
+    /** 
+     * To navigate back or forward to the previous or next URL, the query params in url are updated
+     * since the route doesn't change, mounted is not called, then the page isn't updated
+     * To reload page infos we need to call initPage() when query changes
+    */ 
+    '$route.query'(newValue, oldValue) {
+      if (newValue !== oldValue) {
+        this.initPage();
+      }
+    },
   },
 
   created() {
-    this.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.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.GET_PROJECT(this.$route.params.slug),
-        this.GET_PROJECT_INFO(this.$route.params.slug),
-        this.GET_PROJECT_FEATURE({
-          project_slug: this.$route.params.slug,
-          feature_id: this.$route.params.slug_signal
-        })])
-        .then(() => {
-          this.DISCARD_LOADER();
-          this.initMap();
-        });
-    }
-    if (!this.currentFeature || this.currentFeature.feature_id !== this.$route.params.slug_signal) {
-      this.GET_PROJECT_FEATURE({
-        project_slug: this.$route.params.slug,
-        feature_id: this.$route.params.slug_signal
-      })
-        .then(() => {
-          this.DISCARD_LOADER();
-          this.initMap();
-        });
-    } else {
-      this.DISCARD_LOADER();
-      this.initMap();
-    }
+    this.initPage();
   },
 
   beforeDestroy() {
     this.$store.commit('CLEAR_MESSAGES');
+    this.$store.dispatch('CANCEL_CURRENT_SEARCH_REQUEST');
   },
 
   methods: {
@@ -177,6 +367,9 @@ export default {
       'DISPLAY_LOADER',
       'DISCARD_LOADER'
     ]),
+    ...mapMutations('feature', [
+      'SET_CURRENT_FEATURE'
+    ]),
     ...mapMutations('feature-type', [
       'SET_CURRENT_FEATURE_TYPE_SLUG'
     ]),
@@ -189,158 +382,245 @@ export default {
       'GET_PROJECT_FEATURES'
     ]),
 
-    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();
+    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();
+      } 
+    },
+
+    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,
+          })
+        );
+      }
+      await axios.all(promises);
+      this.DISCARD_LOADER();
+      if (this.currentFeature) {
+        this.getFeatureEvents();
+        this.getFeatureAttachments();
+        this.getLinkedFeatures();
+        if (this.project.fast_edition_mode) {
+          this.$store.commit('feature/INIT_FORM');
+          this.$store.dispatch('feature/INIT_EXTRA_FORMS');
+        }
+      } 
+    },
+
+    confirmLeave(next) {
+      this.next = next;
+      this.isLeaving = true;
+    },
+
+    stayOnPage() {
+      this.isLeaving = false;
+    },
+
+    leavePage() {
+      this.isLeaving = false;
+      this.next();
+    },
+
+    pushNgo(newEntry) {
+      //* update the params or queries in the route/url
+      this.$router.push(newEntry)
+        //* catch error if navigation get aborted (in beforeRouteUpdate)
+        .catch(() => true);
     },
 
     goBackToProject(message) {
       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', { feature_id: this.currentFeature.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;
+        });
+    },
+
     initMap() {
       var mapDefaultViewCenter =
         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.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;
+  border: 1px solid grey;
 }
-#feed-event .event {
-  margin-bottom: 1em;
-}
-#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
-    id="feature-edit"
-    class="page"
-  >
-    <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'"
-    >
-      Création d'un signalement <small>[{{ feature_type.title }}]</small>
+  <div id="feature-edit">
+    <h1>
+      <span v-if="feature_type && isCreation">      
+        Création d'un signalement <small>[{{ feature_type.title }}]</small>
+      </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"
-      action=""
-      method="post"
       enctype="multipart/form-data"
       class="ui form"
     >
       <!-- Feature Fields -->
-      <div class="two fields">
-        <div :class="field_title">
+      <div
+        v-if="currentRouteName !== 'editer-attribut-signalement'"
+        :class="[ project && project.feature_assignement ? 'three' : 'two', 'fields']"
+      >
+        <div :class="['field', {'required': !titleIsOptional}]">
           <label :for="form.title.id_for_label">{{ form.title.label }}</label>
           <input
             :id="form.title.id_for_label"
             v-model="form.title.value"
             type="text"
-            required
+            :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"
+            >
+              {{ info }}
+            </li>
+          </ul>
           <ul
             id="errorlist-title"
             class="errorlist"
@@ -54,9 +67,22 @@
             :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>
 
-      <div class="field">
+      <div
+        v-if="currentRouteName !== 'editer-attribut-signalement'"
+        class="field"
+      >
         <label :for="form.description.id_for_label">{{
           form.description.label
         }}</label>
@@ -69,7 +95,11 @@
       </div>
 
       <!-- Geom Field -->
-      <div class="field">
+      <div
+        v-if="currentRouteName !== 'editer-attribut-signalement'
+          && feature_type && feature_type.geom_type !== 'none'"
+        class="field"
+      >
         <label :for="form.geom.id_for_label">{{ form.geom.label }}</label>
         <!-- Import GeoImage -->
         <div
@@ -82,7 +112,10 @@
               class="ui compact button"
               @click="toggleGeoRefModal"
             >
-              <i class="file image icon" />Importer une image géoréférencée
+              <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.
@@ -98,6 +131,7 @@
             >
               <i
                 class="close icon"
+                aria-hidden="true"
                 @click="toggleGeoRefModal"
               />
               <div class="content">
@@ -117,7 +151,10 @@
                       class="ui icon button"
                       for="image_file"
                     >
-                      <i class="file icon" />
+                      <i
+                        class="file icon"
+                        aria-hidden="true"
+                      />
                       <span class="label">{{ geoRefFileLabel }}</span>
                     </label>
                     <input
@@ -149,7 +186,10 @@
                     ]"
                     @click="georeferencement"
                   >
-                    <i class="plus icon" />
+                    <i
+                      class="plus icon"
+                      aria-hidden="true"
+                    />
                     Importer
                   </button>
                 </form>
@@ -163,7 +203,11 @@
               class="ui compact button"
               @click="create_point_geoposition"
             >
-              <i class="ui map marker alternate icon" />Positionner le
+              <i
+                class="ui map marker alternate icon"
+                aria-hidden="true"
+              />
+              Positionner le
               signalement à partir de votre géolocalisation
             </button>
           </p>
@@ -206,11 +250,38 @@
           class="ui tab active map-container"
           data-tab="map"
         >
+          <div
+            :class="{ active: mapLoading }"
+            class="ui inverted dimmer"
+          >
+            <div class="ui loader" />
+          </div>
           <div
             id="map"
             ref="map"
-          />
-          <SidebarLayers v-if="basemaps && map" />
+            tabindex="0"
+          >
+            <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>
 
@@ -219,16 +290,22 @@
         DONNÉES MÉTIER
       </div>
       <div
-        v-for="(field, index) in orderedCustomFields"
-        :key="field.field_type + index"
-        class="field"
+        v-for="field in extra_forms"
+        :key="field.name"
+        class="extraform"
       >
-        <FeatureExtraForm :field="field" />
+        <ExtraForm
+          v-if="!field.isDeactivated"
+          :id="field.label"
+          ref="extraForm"
+          :field="field"
+          class="field"
+        />
         {{ field.errors }}
       </div>
 
       <!-- Pièces jointes -->
-      <div v-if="isOnline">
+      <div v-if="isOnline && currentRouteName !== 'editer-attribut-signalement'">
         <div class="ui horizontal divider">
           PIÈCES JOINTES
         </div>
@@ -241,6 +318,7 @@
             :key="attachForm.dataKey"
             ref="attachementForm"
             :attachment-form="attachForm"
+            :enable-key-doc-notif="feature_type && feature_type.enable_key_doc_notif"
           />
         </div>
         <button
@@ -249,12 +327,16 @@
           class="ui compact basic button"
           @click="add_attachement_formset"
         >
-          <i class="ui plus icon" />Ajouter une pièce jointe
+          <i
+            class="ui plus icon"
+            aria-hidden="true"
+          />
+          Ajouter une pièce jointe
         </button>
       </div>
 
       <!-- Signalements liés -->
-      <div v-if="isOnline">
+      <div v-if="isOnline && currentRouteName !== 'editer-attribut-signalement'">
         <div class="ui horizontal divider">
           SIGNALEMENTS LIÉS
         </div>
@@ -272,16 +354,25 @@
           class="ui compact basic button"
           @click="add_linked_formset"
         >
-          <i class="ui plus icon" />Ajouter une liaison
+          <i
+            class="ui plus icon"
+            aria-hidden="true"
+          />
+          Ajouter une liaison
         </button>
       </div>
       <div class="ui divider" />
       <button
+        id="save-changes"
         type="button"
-        class="ui teal icon button"
-        @click="postForm"
+        :class="['ui teal icon button', { loading: sendingFeature }]"
+        @click="onSave"
       >
-        <i class="white save icon" /> Enregistrer les changements
+        <i
+          class="white save icon"
+          aria-hidden="true"
+        />
+        Enregistrer les changements
       </button>
     </form>
   </div>
@@ -289,21 +380,24 @@
 
 <script>
 import { mapState, mapGetters } from 'vuex';
-
-import L from 'leaflet';
-import 'leaflet-draw';
-import axios from '@/axios-client.js';
-import flip from '@turf/flip';
-
-import featureAPI from '@/services/feature-api';
-import { mapUtil } from '@/assets/js/map-util.js';
-import { allowedStatus2change } from '@/utils';
+import { GeoJSON } from 'ol/format';
 
 import FeatureAttachmentForm from '@/components/Feature/FeatureAttachmentForm';
 import FeatureLinkedForm from '@/components/Feature/FeatureLinkedForm';
-import FeatureExtraForm from '@/components/Feature/Edit/FeatureExtraForm';
+import ExtraForm from '@/components/ExtraForm';
 import Dropdown from '@/components/Dropdown.vue';
-import SidebarLayers from '@/components/SidebarLayers';
+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 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';
+
 
 export default {
   name: 'FeatureEdit',
@@ -313,12 +407,18 @@ export default {
     FeatureLinkedForm,
     Dropdown,
     SidebarLayers,
-    FeatureExtraForm,
+    Geocoder,
+    Geolocation,
+    EditingToolbar,
+    ExtraForm,
+    ProjectMemberSelect
   },
 
   data() {
     return {
       map: null,
+      mapLoading: false,
+      sendingFeature: false,
       baseUrl: this.$store.state.configuration.BASE_URL,
       file: null,
       showGeoRef: false,
@@ -330,9 +430,10 @@ export default {
       form: {
         title: {
           errors: [],
+          infos: [],
           id_for_label: 'name',
           field: {
-            max_length: 30,
+            max_length: 128,
           },
           html_name: 'name',
           label: 'Nom',
@@ -347,6 +448,9 @@ export default {
             name: 'Brouillon',
           },
         },
+        assigned_member: {
+          value: null,
+        },
         description: {
           errors: [],
           id_for_label: 'description',
@@ -377,10 +481,11 @@ export default {
     ]),
     ...mapState('feature', [
       'attachmentFormset',
-      'linkedFormset',
+      'checkedFeatures',
+      'currentFeature',
+      'extra_forms',
       'features',
-      'extra_form',
-      'statusChoices',
+      'linkedFormset',
     ]),
     ...mapState('feature-type', [
       'feature_types'
@@ -393,25 +498,16 @@ export default {
       'feature_type'
     ]),
 
-    field_title() {
-      if (this.feature_type) {
-        if (this.feature_type.title_optional) {
-          return 'field';
-        }
-      }
-      return 'required field';
+    titleIsOptional() {
+      return this.feature_type && this.feature_type.title_optional;
     },
 
     currentRouteName() {
       return this.$route.name;
     },
 
-    feature() {
-      return this.$store.state.feature.currentFeature;
-    },
-
-    orderedCustomFields() {
-      return [...this.extra_form].sort((a, b) => a.position - b.position);
+    isCreation() {
+      return this.currentRouteName === 'ajouter-signalement';
     },
 
     geoRefFileLabel() {
@@ -424,6 +520,7 @@ export default {
     selected_status: {
       get() {
         return this.form.status.value;
+
       },
       set(newValue) {
         this.form.status.value = newValue;
@@ -431,24 +528,47 @@ 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'));
+    }
+  },
+
+  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') {
+    if (this.currentRouteName === 'ajouter-signalement' || this.currentRouteName === 'editer-attribut-signalement') {
       this.$store.commit('feature/SET_CURRENT_FEATURE', []);
     }
 
@@ -459,10 +579,13 @@ export default {
   },
 
   mounted() {
-    const 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', {
@@ -473,21 +596,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');
@@ -496,31 +625,42 @@ export default {
 
   methods: {
     initForm() {
-      if (this.currentRouteName === 'editer-signalement') {
-        for (const 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();
       }
     },
 
+    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) {
@@ -570,24 +710,15 @@ export default {
           if (response.data.geom.indexOf('POINT') >= 0) {
             const regexp = /POINT\s\((.*)\s(.*)\)/;
             const arr = regexp.exec(response.data.geom);
-            const json = {
-              type: 'Feature',
-              geometry: {
-                type: 'Point',
-                coordinates: [parseFloat(arr[1]), parseFloat(arr[2])],
-              },
-              properties: {},
-            };
-            this.updateMap(json);
-            this.updateGeomField(json);
+            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();
           }
         })
 
@@ -602,24 +733,6 @@ export default {
         });
     },
 
-    initExtraForms(feature) {
-      function findCurrentValue(label) {
-        const field = feature.feature_data.find((el) => el.label === label);
-        return field ? field.value : null;
-      }
-      const extraForm = this.feature_type.customfield_set.map((field) => {
-        return {
-          ...field,
-          //* add value field to extra forms from feature_type and existing values if feature is defined
-          value:
-            feature && feature.feature_data
-              ? findCurrentValue(field.label)
-              : null,
-        };
-      });
-      this.$store.commit('feature/SET_EXTRA_FORM', extraForm);
-    },
-
     add_attachement_formset() {
       this.$store.commit('feature/ADD_ATTACHMENT_FORM', {
         dataKey: this.attachmentDataKey,
@@ -630,11 +743,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;
     },
@@ -663,12 +772,13 @@ export default {
     },
 
     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 : '',
       });
     },
 
@@ -704,6 +814,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) {
@@ -721,22 +838,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
@@ -744,183 +869,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.',
-              },
-            },
-          },
+      this.$store.commit('DISPLAY_MESSAGE', message);
+      this.$router.push({
+        name: 'liste-signalements',
+        params: {
+          slug: this.$route.params.slug,
         },
-        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.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;
-          const self = this;
-          layers.eachLayer(function (layer) {
-            self.updateGeomField(layer.toGeoJSON());
-          });
-        }.bind(this)
-      );
-
       this.map.on(
         'draw:deleted',
         function () {
@@ -936,20 +962,13 @@ export default {
     },
 
     updateMap(geomFeatureJSON) {
-      if (this.drawnItems) {
-        this.drawnItems.clearLayers();
+      if (editionService.drawSource) {
+        editionService.drawSource.clear();
       }
-      var geomType = this.feature_type.geom_type;
       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,
@@ -958,99 +977,62 @@ export default {
       }
     },
 
-    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;
       var mapDefaultViewZoom =
         this.$store.state.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(() => {
-        const 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.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.$store.state.configuration.VUE_APP_DJANGO_API_BASE}v2/features/?feature_type__slug=${this.$route.params.slug_type_signal}&project__slug=${this.$route.params.slug}&output=geojson`;
       axios
         .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.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() {
-        const buttons = document.querySelector('.leaflet-draw-actions.leaflet-draw-actions-top.leaflet-draw-actions-bottom');
-        if (buttons && buttons.style) {
-          buttons.style.display = 'flex';
-          buttons.style['flex-direction'] = 'column';
-        }
-      }
-      if (window.screen.availWidth < 767) { //* change button order all the time to keep homogeinity on mobile
-        const wrapper = document.querySelector('.leaflet-top.leaflet-right');
-        if (wrapper) {
-          wrapper.appendChild(wrapper.children[0]);
-        }
-        if (this.feature_type.geom_type === 'polygon') { //* if it's a polygon, change tools direction to vertical
-          let polygonBtn = document.querySelector('.leaflet-draw-draw-polygon'); //* since elements are generated
-          if (polygonBtn) {
-            polygonBtn.addEventListener('click', changeDisplay); //* it should be done at each click
-          }
-        }
-      }
+    disableSnap() {
+      editionService.removeSnapInteraction(this.map);
     },
 
     getFeatureAttachments() {
@@ -1064,6 +1046,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>
@@ -1074,6 +1075,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;
 }
@@ -1101,4 +1109,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">
@@ -38,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>
 
@@ -50,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>
@@ -69,23 +101,31 @@
 
         <div class="ui bottom attached secondary segment">
           <div
-            :class="['title', { active: showImport && isOnline, nohover: !isOnline }]"
-            @click="toggleShowImport"
+            v-if="user && permissions.can_create_feature"
+            class="ui styled accordion"
+            data-test="features-import"
           >
-            <i class="dropdown icon" />
-            Importer des signalements
-          </div>
-          <div :class="['content', { active: showImport && isOnline }]">
             <div
-              :class="['title', { active: showImport }]"
+              id="toggle-show-import"
+              :class="['title', { active: showImport && isOnline, nohover: !isOnline }]"
               @click="toggleShowImport"
             >
+              <i
+                class="dropdown icon"
+                aria-hidden="true"
+              />
+              Importer des signalements
+            </div>
+            <div :class="['content', { active: showImport && isOnline }]">
               <div class="field">
                 <label
                   class="ui icon button ellipsis"
                   for="json_file"
                 >
-                  <i class="file icon" />
+                  <i
+                    class="file icon"
+                    aria-hidden="true"
+                  />
                   <span class="label">{{ geojsonFileToImport.name }}</span>
                 </label>
                 <input
@@ -98,12 +138,18 @@
                 >
               </div>
 
-              <div class="field">
+              <div
+                v-if="feature_type.geom_type === 'point' || feature_type.geom_type === 'none'"
+                class="field"
+              >
                 <label
                   class="ui icon button ellipsis"
                   for="csv_file"
                 >
-                  <i class="file icon" />
+                  <i
+                    class="file icon"
+                    aria-hidden="true"
+                  />
                   <span class="label">{{ csvFileToImport.name }}</span>
                 </label>
                 <input
@@ -115,7 +161,6 @@
                   @change="onCsvFileChange"
                 >
               </div>
-
               <router-link
                 v-if="
                   IDGO &&
@@ -133,149 +178,94 @@
               >
                 Importer les signalements à partir de {{ CATALOG_NAME|| 'IDGO' }}
               </router-link>
-              <div
-                v-if="$route.params.geojson"
-                class="ui button import-catalog basic active teal nohover"
+
+              <ul
+                v-if="importError"
+                class="errorlist"
               >
-                <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>
+                <li>
+                  {{ importError }}
+                </li>
+              </ul>
 
-                <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>
-                <div
-                  v-if="$route.params.geojson"
-                  class="ui button import-catalog basic active teal no-hover"
-                >
-                  Ressource {{ $route.params.geojson.name }}
-                </div>
-                <ul
-                  v-if="importError"
-                  class="errorlist"
-                >
-                  <li>
-                    {{ importError }}
-                  </li>
-                </ul>
-                <button
-                  :disabled="fileToImport.size === 0 && !$route.params.geojson"
-                  class="ui fluid teal icon button"
-                  @click="importGeoJson"
-                >
-                  <i class="upload icon" /> Lancer l'import
-                </button>
-                <ImportTask
-                  v-if="importFeatureTypeData && importFeatureTypeData.length"
-                  :data="importFeatureTypeData"
-                  :reloading="reloadingImport"
+              <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"
                 />
-              </div>
+                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
-                :disabled="
-                  (geojsonFileToImport.size === 0 && !$route.params.geojson) &&
-                    (csvFileToImport.size === 0 && !$route.params.csv)
-                "
+                :class="{ loading: exportLoading }"
+                type="button"
                 class="ui fluid teal icon button"
-                @click="geojsonFileToImport.size !== 0 ? importGeoJson() : importCSV()"
+                @click="exportFeatures"
               >
-                <i class="download icon" /> Exporter
+                <i
+                  class="download icon"
+                  aria-hidden="true"
+                />
+                Exporter
               </button>
             </div>
           </div>
         </div>
-        <div class="ui styled accordion">
-          <div
-            :class="['title', { active: !showImport && isOnline, nohover: !isOnline }]"
-            @click="toggleShowImport"
-          >
-            <i class="dropdown icon" />
-            Exporter les signalements
-          </div>
-          <div :class="['content', { active: !showImport && isOnline}]">
-            <p>
-              Vous pouvez télécharger tous les signalements qui vous sont
-              accessibles.
-            </p>
-
-            <!-- <div class="ui selection dropdown fluid">
-              <input type="hidden" name="format">
-              <i class="dropdown icon"></em>
-              <div class="default text">Format</div>
-              <div class="menu">
-                <div class="item" data-value="1">GeoJSON</div>
-                <div class="item" data-value="2">CSV</div>
-              </div>
-            </div> -->
-
-            <select
-              v-model="exportFormat"
-              class="ui fluid dropdown"
-              style="margin-bottom: 1em;"
-            >
-              <option value="GeoJSON">
-                GeoJSON
-              </option>
-              <option value="CSV">
-                CSV
-              </option>
-            </select>
-
-            <button
-              type="button"
-              class="ui fluid teal icon button"
-              @click="exportFeatures"
-            >
-              <i class="download icon" /> Exporter
-            </button>
-          </div>
-        </div>
       </div>
 
-      <div class="nine wide column">
+      <div
+        v-if="isOnline"
+        class="nine wide column"
+      >
         <h3 class="ui header">
           Derniers signalements
         </h3>
@@ -289,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
@@ -313,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>
               {{
@@ -360,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>
@@ -371,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"
         >
@@ -386,23 +385,49 @@
         </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 } from '@/utils';
+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, csvToJson } from '@/assets/js/utils';
+const geojsonFileToImport = {
+  name: 'Sélectionner un fichier GeoJSON ...',
+  size: 0,
+};
+const csvFileToImport = {
+  name: 'Sélectionner un fichier CSV ...',
+  size: 0,
+};
 
 export default {
   name: 'FeatureTypeDetail',
   
   components: {
-    ImportTask: ImportTask,
+    FeatureFetchOffsetRoute,
+    ImportTask,
   },
 
   filters: {
@@ -425,21 +450,18 @@ export default {
   data() {
     return {
       importError: '',
-      geojsonFileToImport: {
-        name: 'Sélectionner un fichier GeoJSON ...',
-        size: 0,
-      },
-      csvFileToImport: {
-        name: 'Sélectionner un fichier CSV ...',
-        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'
+      exportFormat: 'GeoJSON',
+      exportLoading: false,
+      lastFeatures: [],
+      featuresCount: 0,
     };
   },
 
@@ -450,94 +472,41 @@ export default {
     ...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) {
-        const st = this.feature_types.find(
-          (el) => el.slug === this.$route.params.feature_type_slug
-        );
-        if (st) {
-          return st;
-        }
-      }
-      return {};
-    },
-
-    feature_type_features: function () {
-      if (this.features.length) {
-        return this.features.filter(
-          (el) => el.feature_type.slug === this.$route.params.feature_type_slug
-        );
-      }
-      return {};
-    },
-
-    lastFeatures: function () {
-      if (this.feature_type_features.length) {
-        return this.feature_type_features.slice(0, 5);
-      }
-      return [];
-    },
-
-    orderedCustomFields() {
-      if (Object.keys(this.structure).length) {
-        return [...this.structure.customfield_set].sort(
-          (a, b) => a.position - b.position
-        );
-      }
-      return {};
-    },
   },
 
   watch: {
-    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() {
@@ -545,204 +514,399 @@ 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;
                 }
-              } 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} ]`;
+
+              // 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;
+                }
+
+              // 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;
     },
 
-    checkCsvValidity(csv) {
+    /**
+     * Checks the validity of a CSV string. It ensures the CSV uses a recognized delimiter,
+     * contains 'lat' and 'lon' headers, and that these columns contain decimal values within valid ranges.
+     * Additionally, it verifies the consistency and presence of data in the CSV, and that the types of values are valid.
+     *
+     * @param {string} csvString - The CSV content in string format.
+     * @returns {boolean|Promise<boolean>} Returns a boolean or a Promise resolving to a boolean,
+     *                                      indicating the validity of the CSV.
+     */
+    async checkCsvValidity(csvString) {
       this.importError = '';
-      // Check if file contains 'lat' and 'long' fields
-      const headersLine =
-        csv
-          .split('\n')[0]
-          .split(',')
-          .filter(el => {
-            return el === 'lat' || el === 'lon';
-          });
-      // Look for 2 decimal fields in first line of csv
-      // corresponding to lon and lat
-      const sampleLine =
-        csv
-          .split('\n')[1]
-          .split(',')
-          .map(el => {
-            return !isNaN(el) && el.indexOf('.') != -1;
-          })
-          .filter(Boolean);
-      if (sampleLine.length > 1 && headersLine.length === 2) {
-        const fields = this.structure.customfield_set.map((el) => {
-          return {
-            name: el.name,
-            field_type: el.field_type,
-            options: el.options,
-          };
-        });
-        const csvFeatures = csvToJson(csv);
-        for (const feature of csvFeatures) {
-          for (const { name, field_type, options } of fields) {
-            if (name in feature) {
-              const fieldInFeature = feature[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
-                if (field_type === 'list') {
-                  //*then check if the value is an available option
-                  if (!options.includes(fieldInFeature)) {
-                    return false;
-                  }
-                } else if (customType !== field_type) {
-                  //* check if custom field value match
-                  this.importError = `Le fichier est invalide: Un champ de type ${field_type} ne peut pas avoir la valeur [ ${fieldInFeature} ]`;
-                  return false;
-                }
-              }
-            }
-          }
+
+      // 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;
         }
-        return true;
-      } else {
+        // 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;
     },
 
-    onGeojsonFileChange(e) {
+    /**
+     * Handles the change event for GeoJSON file input. This function is triggered when a user selects a file.
+     * It reads the file, checks its validity if it's not too large, and updates the component state accordingly.
+     *
+     * @param {Event} e - The event triggered by file input change.
+     */
+    async onGeojsonFileChange(e) {
+      // Start loading process
       this.loadingImportFile = true;
+
+      // 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;
       }
 
       const reader = new FileReader();
-      reader.addEventListener('load', (e) => {
-        // bypass json check for files larger then 10 Mo
+
+      /**
+       * Asynchronously processes the content of the file.
+       * Checks the validity of the GeoJSON file if it's smaller than a certain size.
+       * Updates the state with the GeoJSON file if it's valid.
+       *
+       * @param {string} fileContent - The content of the file read by FileReader.
+       */
+      const processFile = async (fileContent) => {
         let jsonValidity;
-        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.geojsonFileToImport = 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.geojsonFileToImport
-          );
+          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]);
     },
 
-    onCsvFileChange(e) {
+    /**
+     * Handles the change event for CSV file input. This function is triggered when a user selects a file.
+     * It reads the file, checks its validity if it's not too large, and updates the component state accordingly.
+     *
+     * @param {Event} e - The event triggered by file input change.
+     */
+    async onCsvFileChange(e) {
+      // Start loading process
       this.loadingImportFile = true;
+
+      // 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();
-      reader.addEventListener('load', (e) => {
-        // bypass csv check for files larger then 10 Mo
+
+      /**
+       * Asynchronously processes the content of the file.
+       * Checks the validity of the CSV file if it's smaller than a certain size.
+       * Updates the state with the CSV file if it's valid.
+       *
+       * @param {string} fileContent - The content of the file read by FileReader.
+       */
+      const processFile = async (fileContent) => {
         let csvValidity;
+
+        // Check the file size and determine the CSV validity
         if (parseFloat(fileConvertSizeToMo(files[0].size)) <= 10) {
-          csvValidity = this.checkCsvValidity(e.target.result);
+          // If the file is smaller than 10 Mo, check its validity
+          csvValidity = await this.checkCsvValidity(fileContent);
         } else {
+          // 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 stored (first attempt didn't work)
-          this.$store.commit(
-            'feature_type/SET_FILE_TO_IMPORT',
-            this.csvFileToImport
-          );
+          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]);
     },
 
@@ -750,19 +914,20 @@ export default {
       this.waitMessage = true;
       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.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();
         });
     },
 
@@ -770,52 +935,60 @@ export default {
       this.waitMessage = true;
       const payload = {
         slug: this.slug,
-        feature_type_slug: this.$route.params.feature_type_slug,
+        feature_type_slug: this.featureTypeSlug,
       };
       if (this.$route.params.csv) { //* import after redirection, for instance with data from catalog
         payload['csv'] = this.$route.params.csv;
-      } else if (this.csvFileToImport.size > 0) { //* import directly from geojson
+      } else if (this.csvFileToImport.size > 0) { //* import directly from csv file
         payload['fileToImport'] = this.csvFileToImport;
       } else {
         this.importError = "La ressource n'a pas pu être récupéré.";
         return;
       }
-      this.$store.dispatch('feature_type/SEND_FEATURES_FROM_CSV', payload)
+      this.SEND_FEATURES_FROM_CSV(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);
-        }
-      });
-    },
-    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;
-      }
+      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;
 }
@@ -831,4 +1004,17 @@ export 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/FeatureTypeEdit.vue

 <template>
-  <div
-    id="feature-type-edit"
-    class="page"
-  >
-    <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 }"
@@ -24,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'">
@@ -68,8 +51,8 @@
           </div>
 
           <div
-            :class="{ disabled: csv }"
-            class="required field"
+            id="geometry-type"
+            :class="['required field', { disabled: csv }]"
           >
             <label :for="form.geom_type.id_for_label">{{
               form.geom_type.label
@@ -80,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">
@@ -109,157 +76,82 @@
             <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"
+            :key="customForm.dataKey"
+            ref="customForms"
+            :data-key="customForm.dataKey"
+            :custom-form="customForm"
+            :selected-color-style="form.colors_style.value.custom_field_name"
+            @update="updateColorsStyle($event)"
+          />
+        </div>
 
-        <!-- <div
-          v-if="csvFields && csvFields.length"
-          id="csv-fields"
+        <button
+          id="add-field"
+          type="button"
+          class="ui compact basic button"
+          @click="addCustomForm"
         >
-          <table class="ui striped table">
-            <thead>
-              <tr>
-                <th>Champ</th>
-                <th>X</th>
-                <th>Y</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr
-                v-for="field in csvFields"
-                :key="field.field"
-              >
-                <td>
-                  {{ field.field }}
-                </td>
-                <td>
-                  <div
-                    class="ui radio checkbox"
-                    :class="{ disabled: field.y }"
-                  >
-                    <input
-                      :disabled="field.y"
-                      type="radio"
-                      name="x"
-                      @input="pickXcsvCoordField(field)"
-                    >
-                    <label />
-                  </div>
-                </td>
-                <td>
-                  <div
-                    class="ui radio checkbox"
-                    :class="{ disabled: field.x }"
-                  >
-                    <input
-                      :disabled="field.x"
-                      type="radio"
-                      name="y"
-                      @input="pickYcsvCoordField(field)"
-                    >
-                    <label />
-                  </div>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-          <button
-            class="ui teal icon button margin-25"
-            type="button"
-            :disabled="
-              !csvFields.some(el => el.x === true) ||
-                !csvFields.some(el => el.y === true)
-            "
-            @click="setCSVCoordsFields"
-          >
-            <i class="white save icon" />
-            Continuer
-          </button>
-        </div> -->
-
-        <div v-else>
-          <div id="formsets">
-            <FeatureTypeCustomForm
-              v-for="customForm in customForms"
-              :key="customForm.dataKey"
-              ref="customForms"
-              :data-key="customForm.dataKey"
-              :custom-form="customForm"
-              :selected-color-style="form.colors_style.value.custom_field_name"
-              @update="updateColorsStyle($event)"
-            />
-          </div>
-
-          <button
-            id="add-field"
-            type="button"
-            class="ui compact basic button"
-            @click="addCustomForm"
-          >
-            <i class="ui plus icon" />Ajouter un champ personnalisé
-          </button>
-
-          <div class="ui divider" />
-          <button
-            class="ui teal icon button margin-25"
-            type="button"
-            @click="sendFeatureType"
-          >
-            <i class="white save icon" />
-            {{ action === "create" ? "Créer" : "Sauvegarder" }} le type de
-            signalement
-          </button>
-          <button
-            v-if="geojson || csv"
-            class="ui teal icon button margin-25"
-            type="button"
-            @click="postFeatureTypeThenFeatures"
-          >
-            <i class="white save icon" />
-            Créer et importer le(s) signalement(s) du geojson
-          </button>
-        </div>
+          <i
+            class="ui plus icon"
+            aria-hidden="true"
+          />
+          Ajouter un champ personnalisé
+        </button>
+
+        <div class="ui divider" />
+        <button
+          id="send-feature_type"
+          :class="['ui teal icon button margin-25', { disabled: loading }]"
+          type="button"
+          @click="sendFeatureType"
+        >
+          <i
+            class="white save icon"
+            aria-hidden="true"
+          />
+          {{ action === "create" ? "Créer" : "Sauvegarder" }} le type de
+          signalement
+        </button>
+        <button
+          v-if="geojson || csv || json"
+          :class="['ui teal icon button margin-25', { disabled: loading }]"
+          type="button"
+          @click="postFeatureTypeThenFeatures"
+        >
+          <i
+            class="white save icon"
+            aria-hidden="true"
+          />
+          Créer et importer le(s) signalement(s) du {{ geojson ? 'geojson' : csv ? 'csv' : 'json' }}
+        </button>
       </form>
     </div>
   </div>
@@ -271,6 +163,7 @@ import { mapGetters, mapState, mapMutations, mapActions } from 'vuex';
 
 import Dropdown from '@/components/Dropdown.vue';
 import FeatureTypeCustomForm from '@/components/FeatureType/FeatureTypeCustomForm.vue';
+import { transformProperties, reservedKeywords } from'@/utils';
 
 export default {
   name: 'FeatureTypeEdit',
@@ -289,6 +182,10 @@ export default {
       type: Array,
       default: null,
     },
+    json: {
+      type: Array,
+      default: null,
+    },
   },
 
   data() {
@@ -296,12 +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: {
@@ -325,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,
@@ -337,34 +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',
-        'lat',
-        'lon'
-      ],
     };
   },
 
@@ -439,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: '' };
         }
       }
     },
@@ -480,21 +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.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.csv.name;// * use the typename as title by default
-      }
+    }
+    if (this.json) {
+      this.importJsonFeatureType();
     }
   },
   beforeDestroy() {
@@ -504,6 +397,9 @@ export default {
   },
 
   methods: {
+    ...mapMutations([
+      'DISPLAY_MESSAGE',
+    ]),
     ...mapMutations('feature-type', [
       'ADD_CUSTOM_FORM',
       'EMPTY_FORM',
@@ -558,7 +454,7 @@ export default {
         }
       }
       //! 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();
     },
 
@@ -596,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,
       });
@@ -643,15 +541,25 @@ 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'
+              });
             }
           });
       }
@@ -661,16 +569,19 @@ export default {
       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.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;
         })
@@ -678,6 +589,7 @@ export default {
           this.loading = false;
         });
     },
+
     postCSVFeatures(feature_type_slug) {
       this.$store
         .dispatch('feature-type/SEND_FEATURES_FROM_CSV', {
@@ -687,12 +599,15 @@ export default {
         })
         .then((response) => {
           if (response && response.status === 200) {
-            this.goBackToProject();
+            this.goBackToProject({
+              comment: 'Le nouveau type de signalement a été créé. Import des signalements est en cours',
+              level: 'positive'
+            });
           } else {
-            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;
         })
@@ -709,10 +624,9 @@ export default {
           .dispatch('feature-type/SEND_FEATURE_TYPE', requestType)
           .then(({ feature_type_slug }) => {
             if (feature_type_slug) {
-              if (this.geojson) {
+              if (this.geojson || this.json) {
                 this.postGeojsonFeatures(feature_type_slug);
-              }
-              else if (this.csv) {
+              } else if (this.csv) {
                 this.postCSVFeatures(feature_type_slug);
               }
             } else {
@@ -725,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({
@@ -740,129 +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
-
-        //* 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);
-          }
-        }
+        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();
     },
 
     importCSVFeatureType() {
       if (this.csv.length) {
-        this.updateStore(); //* register title & geom_type in store
-        // List fileds for user to select coords fields
-        // this.csvFields =
-        //   Object.keys(this.csv[0])
-        //     .map(el => {
-        //       return {
-        //         field: el,
-        //         x: false,
-        //         y:false
-        //       };
-        //     });
-
-        for (const [key, val] of Object.entries(this.csv[0])) {
-          //* check that the property is not a keyword from the backend or map style
-          // todo: add map style keywords
-          if (!this.reservedKeywords.includes(key)) {
-            const customForm = {
-              label: { value: key || '' },
-              name: { value: key || '' },
-              position: this.dataKey, // * use dataKey already incremented by addCustomForm
-              field_type: { value: this.transformProperties(val) }, // * guessed from the type
-              options: { value: [] }, // * not available in export
-            };
-            this.addCustomForm(customForm);
-          }
+        this.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();
     },
 
-    // pickXcsvCoordField(e) {
-    //   this.csvFields.forEach(el => {
-    //     if (el.field === e.field) {
-    //       el.x = true;
-    //     } else {
-    //       el.x = false;
-    //     }
-    //   });
-    // },
-    // pickYcsvCoordField(e) {
-    //   this.csvFields.forEach(el => {
-    //     if (el.field === e.field) {
-    //       el.y = true;
-    //     } else {
-    //       el.y = false;
-    //     }
-    //   });
-    // },
-    // setCSVCoordsFields() {
-    //   const xField = this.csvFields.find(el => el.x === true).field;
-    //   const yField = this.csvFields.find(el => el.y === true).field;
-    //   this.csvFields = null;
-
-    //   for (const [key, val] of Object.entries(this.csv[0])) {
-    //     //* check that the property is not a keyword from the backend or map style
-    //     // todo: add map style keywords
-    //     if (!this.reservedKeywords.includes(key) && key !== xField && key !== yField) {
-    //       const customForm = {
-    //         label: { value: key || '' },
-    //         name: { value: key || '' },
-    //         position: this.dataKey, // * use dataKey already incremented by addCustomForm
-    //         field_type: { value: this.transformProperties(val) }, // * guessed from the type
-    //         options: { value: [] }, // * not available in export
-    //       };
-    //       this.addCustomForm(customForm);
-    //     }
-    //   }
-    // }
   },
 };
 </script>

src/views/FeatureType/FeatureTypeSymbology.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/FeatureType/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/Help.vue

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

src/views/FlatPages/LegalMentions.vue

@@ -34,7 +34,7 @@
 import { mapState } from 'vuex';
 
 export default {
-  name: 'WithRightMenu',
+  name: 'Mentions',
 
   data() {
     return {

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,467 @@
           </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="showPwd ? 'text' : 'password'"
+                  name="password"
+                  placeholder="Mot de passe"
+                  required
+                  @blur="isValidPwd"
+                >
+                <button
+                  class="ui icon button"
+                  @click="showPwd = !showPwd"
+                >
+                  <i :class="[showPwd ? 'eye slash' : 'eye', 'icon']" />
+                </button>
+              </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"
+                >
+              </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,
       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: [],
+      },
+      errors: {
+        global: null,
+        passwd: null,
+        comments: null,
       },
+      showPwd: 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);
+      }
+    },
+
+    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, '');
+      }
     },
-    APPLICATION_NAME() {
-      return this.$store.state.configuration.VUE_APP_APPLICATION_NAME;
+    '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; 
+      }
+    }
+  },
+
+  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) {
+        const ssoResponse = await userAPI.signup({
+          ...this.signupForm,
+          // Ajout du label personnalisé pour affichage plus précis dans admin OGS
+          comments: `{"${this.commentsFieldLabel}":"${this.signupForm.comments}"}`,
+          // 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 } }]
+        }, this.ssoSignupUrl);
+        
+        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.commentsFieldRequired && !comments) {
+        this.errors.comments = `Le champ ${ this.commentsFieldLabel || 'Commentaires'} est requis`;
+        return true;
+      } else {
+        this.errors.comments = 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 && massMode === '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 && massMode === 'delete'"
-              class="ui button compact button-hover-red margin-left-25"
-              data-tooltip="Supprimer tous les signalements sélectionnés"
-              data-position="bottom right"
-              @click="toggleDeleteModal"
-            >
-              <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"
-      :page-numbers="pageNumbers"
-      :checked-features.sync="checkedFeatures"
-      :features-count="featuresCount"
-      :pagination="pagination"
-      :sort="sort"
-      @update:page="handlePageChange"
-      @update:sort="handleSortChange"
-    />
-
-    <!-- MODAL ALL DELETE FEATURE TYPE -->
-    <div
-      v-if="isDeleteModalOpen"
-      class="ui dimmer modals page transition visible active"
-      style="display: flex !important"
-    >
-      <div
-        :class="[
-          'ui mini modal subscription',
-          { 'active visible': isDeleteModalOpen },
-        ]"
+        v-if="isDeleteModalOpen"
+        class="ui dimmer modals page transition visible active"
+        style="display: flex !important"
       >
-        <i
-          class="close icon"
-          @click="isDeleteModalOpen = 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,15 +119,15 @@
 
 <script>
 
-import { mapState, mapGetters, mapActions, mapMutations } from 'vuex';
-import { mapUtil } from '@/assets/js/map-util.js';
-import { allowedStatus2change } from '@/utils';
-
+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 SidebarLayers from '@/components/SidebarLayers';
+import FeaturesListAndMapFilters from '@/components/Project/FeaturesListAndMap/FeaturesListAndMapFilters';
 import FeatureListTable from '@/components/Project/FeaturesListAndMap/FeatureListTable';
-import Dropdown from '@/components/Dropdown.vue';
+import SidebarLayers from '@/components/Map/SidebarLayers';
+import Geolocation from '@/components/Map/Geolocation';
 
 const initialPagination = {
   currentPage: 1,
@@ -265,36 +140,37 @@ export default {
   name: 'FeaturesListAndMap',
 
   components: {
+    FeaturesListAndMapFilters,
     SidebarLayers,
-    Dropdown,
+    Geocoder,
+    Geolocation,
     FeatureListTable,
   },
 
   data() {
     return {
+      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,
       paginatedFeatures: [],
       pagination: { ...initialPagination },
       projectSlug: this.$route.params.slug,
+      queryparams: {},
       showMap: true,
-      showAddFeature: false,
-      showModifyStatus: false,
       sort: {
-        column: '',
+        column: 'updated_on',
         ascending: true,
       },
       zoom: null,
@@ -303,11 +179,7 @@ export default {
 
   computed: {
     ...mapState([
-      'user',
-      'USER_LEVEL_PROJECTS'
-    ]),
-    ...mapGetters([
-      'permissions',
+      'isOnline'
     ]),
     ...mapState('projects', [
       'project',
@@ -315,8 +187,6 @@ export default {
     ...mapState('feature', [
       'checkedFeatures',
       'clickedFeatures',
-      'statusChoices',
-      'massMode',
     ]),
     ...mapState('feature-type', [
       'feature_types',
@@ -329,99 +199,49 @@ 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 [];
-    },
-
-    featureTypeChoices() {
-      return this.feature_types.map((el) => el.title);
-    },
-
     pageNumbers() {
       return this.createPagesArray(this.featuresCount, this.pagination.pagesize);
     },
+
+    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',
     ]),
 
@@ -429,95 +249,228 @@ export default {
       'UPDATE_CHECKED_FEATURES'
     ]),
 
-    toggleAddFeature() {
-      this.showAddFeature = !this.showAddFeature;
-      this.showModifyStatus = 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);
     },
-
-    toggleModifyStatus() {
-      this.showModifyStatus = !this.showModifyStatus;
-      this.showAddFeature = false;
+    resetPagination() {
+      this.pagination = { ...initialPagination };
+    },
+    
+    /**
+     * 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;
     },
 
-    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);
-      }
-    },
-
+    /**
+     * 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];
-        const 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) {
-              const newCheckedFeatures = [...this.checkedFeatures];
-              newCheckedFeatures.splice(this.checkedFeatures.indexOf(response.data.id), 1);
-              this.UPDATE_CHECKED_FEATURES(newCheckedFeatures);
-              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',
         });
       }
     },
 
-    deleteAllFeatureSelection() {
-      const initialFeaturesCount = this.featuresCount;
-      const initialCurrentPage = this.pagination.currentPage;
-      const promises = this.checkedFeatures.map(
-        (feature_id) => this.DELETE_FEATURE({ feature_id, noFeatureType: true })
-      );
-      Promise.all(promises).then((response) => {
-        const deletedFeaturesCount = response.reduce((acc, curr) => curr.status === 204 ? acc += 1 : acc, 0);
-        const newFeaturesCount = initialFeaturesCount - deletedFeaturesCount;
-        const newPagesArray = this.createPagesArray(newFeaturesCount, this.pagination.pagesize);
-        const newLastPageNum = newPagesArray[newPagesArray.length - 1];
-        this.$store.commit('feature/UPDATE_CHECKED_FEATURES', []);
-        if (initialCurrentPage > newLastPageNum) { //* if page doesn't exist anymore
-          this.toPage(newLastPageNum); //* go to new last page
-        } else {
-          this.fetchPagedFeatures();
+    /**
+     * 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 (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',
+            });
+          }
         }
-      })
-        .catch((err) => console.error(err));
+        // 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 || '';
@@ -528,44 +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) => {
-          const map = mapUtil.getMap();
-          if (bbox && map) {
-            map.fitBounds(bbox, { padding: [25, 25] });
+          if (bbox) {
+            mapService.fitBounds(bbox);
           }
         });
     },
@@ -586,63 +533,77 @@ export default {
       return result;
     },
 
-    buildQueryString() {
-      let urlParams = '';
-      const typeFilter = this.getFeatureTypeSlug(this.form.type.selected);
-      const statusFilter = this.form.status.selected.value;
-
-      if (typeFilter) {
-        urlParams += `&feature_type_slug=${typeFilter}`;
+    /**
+     * 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;
       }
-      if (statusFilter) {
-        urlParams += `&status__value=${statusFilter}`;
+      // Set 'status__value' if a status is selected in the form.
+      if (this.form.status.length > 0) {
+        this.queryparams['status__value'] = this.form.status;
       }
+      // Set 'title' if a title is entered in the form.
       if (this.form.title) {
-        urlParams += `&title=${this.form.title}`;
+        this.queryparams['title'] = this.form.title;
       }
-      if (this.sort.column) {
-        urlParams += `&ordering=${
-          this.sort.ascending ? '-' : ''
-        }${this.getAvalaibleField(this.sort.column)}`;
-      }
-      return urlParams;
+      // 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/?limit=${this.pagination.pagesize}&offset=${this.pagination.start}`;
-      //* if receiving next & previous url (// todo : might be not used anymore, to check)
-      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;
           }
-          //* 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 = { ...initialPagination };
-      this.fetchPagedFeatures();
-    },
-
     //* Pagination for table *//
 
     createPagesArray(featuresCount, pagesize) {
@@ -668,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) {
@@ -710,85 +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;
-}
-
-.no-padding {
-  padding: 0 !important;
-}
+  position: relative;
+  width: 100%;
 
-.ui.dropdown .menu .left.menu, .ui.dropdown > .left.menu .menu {
-  margin-right: 0 !important;
-}
+  .sidebar-container {
+    left: -250px;
+  }
 
-#button-dropdown {
-  z-index: 1;
-}
+  .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/Project/Basemaps/BasemapListItem.vue';
-import { mapState, mapGetters } from 'vuex';
+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,67 +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>
 
@@ -71,7 +77,7 @@
           <div class="sixteen wide column">
             <div class="ui two stackable cards">
               <ProjectLastFeatures
-                :loading="featuresLoading"
+                ref="lastFeatures"
               />
               <ProjectLastComments
                 :loading="projectInfoLoading"
@@ -91,20 +97,24 @@
     </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';
@@ -117,6 +127,8 @@ 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',
@@ -127,7 +139,9 @@ export default {
     ProjectLastFeatures,
     ProjectLastComments,
     ProjectParameters,
-    ProjectModal
+    ProjectModal,
+    SidebarLayers,
+    Geolocation,
   },
 
   filters: {
@@ -144,8 +158,8 @@ export default {
 
   props: {
     message: {
-      type: String,
-      default: ''
+      type: Object,
+      default: () => {}
     }
   },
 
@@ -159,8 +173,8 @@ export default {
       is_suscriber: false,
       tempMessage: null,
       projectInfoLoading: true,
+      featureTypesLoading: false,
       featureTypeToDelete: null,
-      featuresLoading: true,
       mapLoading: true,
     };
   },
@@ -182,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() {
@@ -207,35 +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',
-      'DISPLAY_LOADER',
-      'DISCARD_LOADER',
     ]),
     ...mapMutations('modals', [
+      'OPEN_PROJECT_MODAL',
       'CLOSE_PROJECT_MODAL'
     ]),
     ...mapActions('projects', [
@@ -249,35 +254,25 @@ export default {
       'GET_PROJECT_FEATURES'
     ]),
     ...mapActions('feature-type', [
-      'GET_IMPORTS'
+      'GET_PROJECT_FEATURE_TYPES',
     ]),
-    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.DISPLAY_LOADER('Projet en cours de chargement.');
       Promise.all([
         this.GET_PROJECT(this.slug),
         this.GET_PROJECT_INFO(this.slug)
       ])
         .then(() => {
-          this.DISCARD_LOADER();
-          this.projectInfoLoading = false;
-          setTimeout(() => {
-            const 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.DISCARD_LOADER();
+        })
+        .finally(() => {
           this.projectInfoLoading = false;
         });
     },
@@ -318,15 +313,16 @@ export default {
         })
         .then((data) => {
           this.is_suscriber = data.is_suscriber;
-          this.modalType = false;
+          this.CLOSE_PROJECT_MODAL();
           if (this.is_suscriber) {
-            this.infoMessage =
-              'Vous êtes maintenant abonné aux notifications de ce projet.';
+            this.DISPLAY_MESSAGE({
+              comment: 'Vous êtes maintenant abonné aux notifications de ce projet.', level: 'positive'
+            });
           } else {
-            this.infoMessage =
-              'Vous ne recevrez plus les notifications de ce projet.';
+            this.DISPLAY_MESSAGE({
+              comment: 'Vous ne recevrez plus les notifications de ce projet.', level: 'negative'
+            });
           }
-          setTimeout(() => (this.infoMessage = ''), 3000);
         });
     },
 
@@ -350,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é.`,
@@ -365,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();
         });
     },
 
@@ -382,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();
-        const 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>

src/views/Project/ProjectEdit.vue

 <template>
-  <div
-    id="project-edit"
-    class="page"
-  >
+  <div id="project-edit">
     <div
       :class="{ active: loading }"
       class="ui inverted dimmer"
@@ -49,9 +46,10 @@
             </li>
           </ul>
         </div>
-        <div class="field">
+        <div class="field file-logo">
           <label>Illustration du projet</label>
           <img
+            v-if="thumbnailFileSrc.length || form.thumbnail.length"
             id="form-input-file-logo"
             class="ui small image"
             :src="
@@ -59,12 +57,16 @@
                 ? thumbnailFileSrc
                 : DJANGO_BASE_URL + form.thumbnail
             "
+            alt="Thumbnail du projet"
           >
           <label
             class="ui icon button"
             for="thumbnail"
           >
-            <i class="file icon" />
+            <i
+              class="file icon"
+              aria-hidden="true"
+            />
             <span class="label">{{
               form.thumbnail_name ? form.thumbnail_name : fileToImport.name
             }}</span>
@@ -89,14 +91,26 @@
           </ul>
         </div>
       </div>
-      <div class="field">
-        <label for="description">Description</label>
-        <textarea
-          v-model="form.description"
-          name="description"
-          rows="5"
-        />
-        <!-- {{ form.description.errors }} -->
+      <div class="two fields">
+        <div class="field">
+          <label for="description">Description</label>
+          <textarea
+            id="editor"
+            v-model="form.description"
+            data-preview="#preview"
+            name="description"
+            rows="5"
+          />
+          <!-- {{ form.description.errors }} -->
+        </div>
+        <div class="field">
+          <label for="preview">Aperçu</label>
+          <div
+            id="preview"
+            class="description preview"
+            name="preview"
+          />
+        </div>
       </div>
 
       <div class="ui horizontal divider">
@@ -104,52 +118,10 @@
       </div>
 
       <div class="two fields">
-        <!-- <div class="field">
-          <label for="archive_feature">Délai avant archivage</label>
-          <div class="ui right labeled input">
-            <input
-              id="archive_feature"
-              v-model="form.archive_feature"
-              type="number"
-              min="0"
-              oninput="validity.valid||(value=0);"
-              style="padding: 1px 2px"
-              name="archive_feature"
-              @blur="checkEmpty"
-            >
-            <div class="ui label">
-              jour(s)
-            </div>
-          </div>
-          <ul
-            v-if="errors_archive_feature.length"
-            id="errorlist-achivage"
-            class="errorlist"
-          >
-            <li>
-              {{ errors_archive_feature[0] }}
-            </li>
-          </ul>
-        </div>
-        <div class="field">
-          <label for="delete_feature">Délai avant suppression</label>
-          <div class="ui right labeled input">
-            <input
-              id="delete_feature"
-              v-model="form.delete_feature"
-              type="number"
-              min="0"
-              oninput="validity.valid||(value=0);"
-              style="padding: 1px 2px"
-              name="delete_feature"
-              @blur="checkEmpty"
-            >
-            <div class="ui label">
-              jour(s)
-            </div>
-          </div>
-        </div> -->
-        <div class="required field">
+        <div
+          id="published-visibility"
+          class="required field"
+        >
           <label
             for="access_level_pub_feature"
           >Visibilité des signalements publiés</label>
@@ -170,12 +142,15 @@
             </li>
           </ul>
         </div>
-        <div class="required field">
+        <div
+          id="archived-visibility"
+          class="required field"
+        >
           <label for="access_level_arch_feature">
             Visibilité des signalements archivés
           </label>
           <Dropdown
-            :options="levelPermissions"
+            :options="levelPermissionsArc"
             :selected="form.access_level_arch_feature.name"
             :selection.sync="form.access_level_arch_feature"
           />
@@ -193,53 +168,179 @@
         </div>
       </div>
 
-      <div class="field">
-        <div class="ui checkbox">
-          <input
-            id="moderation"
-            v-model="form.moderation"
-            class="hidden"
-            type="checkbox"
-            name="moderation"
-          >
-          <label for="moderation">Modération</label>
+      <div class="two fields">
+        <div class="fields grouped checkboxes">
+          <div class="field">
+            <div class="ui checkbox">
+              <input
+                id="moderation"
+                v-model="form.moderation"
+                class="hidden"
+                type="checkbox"
+                name="moderation"
+              >
+              <label for="moderation">Modération</label>
+            </div>
+          </div>
+
+          <div class="field">
+            <div class="ui checkbox">
+              <input
+                id="is_project_type"
+                v-model="form.is_project_type"
+                class="hidden"
+                type="checkbox"
+                name="is_project_type"
+              >
+              <label for="is_project_type">Est un projet type</label>
+            </div>
+          </div>
+
+          <div class="field">
+            <div class="ui checkbox">
+              <input
+                id="generate_share_link"
+                v-model="form.generate_share_link"
+                class="hidden"
+                type="checkbox"
+                name="generate_share_link"
+              >
+              <label for="generate_share_link">Génération d'un lien de partage externe</label>
+            </div>
+          </div>
+
+          <div class="field">
+            <div class="ui checkbox">
+              <input
+                id="fast_edition_mode"
+                v-model="form.fast_edition_mode"
+                class="hidden"
+                type="checkbox"
+                name="fast_edition_mode"
+              >
+              <label for="fast_edition_mode">Mode d'édition rapide de signalements</label>
+              <div
+                class="
+                  ui
+                  small
+                  button
+                  circular
+                  compact
+                  absolute-right
+                  icon
+                  teal
+                "
+                data-tooltip="Consulter la documentation"
+                data-position="right center"
+                data-variation="mini"                
+                @click="goToDocumentationFeature"
+              >
+                <i class="question icon" />
+              </div>
+            </div>
+          </div>
+
+          <div class="field">
+            <div class="ui checkbox">
+              <input
+                id="feature_assignement"
+                v-model="form.feature_assignement"
+                class="hidden"
+                type="checkbox"
+                name="feature_assignement"
+              >
+              <label for="feature_assignement">Activation de l'assignation de signalements aux membres du projet</label>
+            </div>
+          </div>
+
+          <div class="fields grouped">
+            <div class="field">
+              <label for="feature_browsing">Configuration du parcours de signalement</label>
+            </div>
+            <div
+              id="feature_browsing_filter"
+              class="field inline"
+            >
+              <label for="feature_browsing_default_filter">Filtrer sur</label>
+              <Dropdown
+                :options="featureBrowsingOptions.filter"
+                :selected="form.feature_browsing_default_filter.name"
+                :selection.sync="form.feature_browsing_default_filter"
+              />
+            </div>
+            <div
+              id="feature_browsing_sort"
+              class="field inline"
+            >
+              <label for="feature_browsing_default_sort">Trier par</label>
+              <Dropdown
+                :options="featureBrowsingOptions.sort"
+                :selected="form.feature_browsing_default_sort.name"
+                :selection.sync="form.feature_browsing_default_sort"
+              />
+            </div>
+          </div>
         </div>
-      </div>
 
-      <div class="field">
-        <div class="ui checkbox">
-          <input
-            id="is_project_type"
-            v-model="form.is_project_type"
-            class="hidden"
-            type="checkbox"
-            name="is_project_type"
-          >
-          <label for="is_project_type">Est un projet type</label>
+        <div class="field">
+          <label>Niveau de zoom maximum de la carte</label>
+          <div class="map-maxzoom-selector">
+            <div class="range-container">
+              <input
+                v-model="form.map_max_zoom_level"
+                type="range"
+                min="0"
+                max="22"
+                step="1"
+                @input="zoomMap"
+              ><output class="range-output-bubble">{{
+                scalesTable[form.map_max_zoom_level]
+              }}</output>
+            </div>
+            <div class="map-preview">
+              <label>Aperçu :</label>
+              <div
+                id="map"
+                ref="map"
+              />
+              <div class="no-preview">
+                pas de fond&nbsp;de&nbsp;carte disponible à&nbsp;cette&nbsp;échelle
+              </div>
+            </div>
+          </div>
         </div>
       </div>
 
-      <div class="field">
-        <div class="ui checkbox">
-          <input
-            id="generate_share_link"
-            v-model="form.generate_share_link"
-            class="hidden"
-            type="checkbox"
-            name="generate_share_link"
-          >
-          <label for="generate_share_link">Génération d'un lien de partage externe</label>
-        </div>
+
+      <div
+        v-if="filteredAttributes.length > 0"
+        class="ui horizontal divider"
+      >
+        ATTRIBUTS
+      </div>
+      
+      <div class="fields grouped">
+        <ProjectAttributeForm
+          v-for="(attribute, index) in filteredAttributes"
+          :key="index"
+          :attribute="attribute"
+          :form-project-attributes="form.project_attributes"
+          @update:project_attributes="updateProjectAttributes($event)"
+        />
       </div>
 
       <div class="ui divider" />
 
       <button
+        id="send-project"
         type="button"
         class="ui teal icon button"
         @click="postForm"
       >
-        <i class="white save icon" /> Enregistrer les changements
+        <i
+          class="white save icon"
+          aria-hidden="true"
+        /> Enregistrer les changements
       </button>
     </form>
   </div>
@@ -247,15 +348,20 @@
 
 <script>
 import axios from '@/axios-client.js';
-import Dropdown from '@/components/Dropdown.vue';
+import Dropdown from '@/components/Dropdown';
+import ProjectAttributeForm from '@/components/Project/Edition/ProjectAttributeForm';
+import mapService from '@/services/map-service';
 
-import { mapState, mapActions } from 'vuex';
+import TextareaMarkdown from 'textarea-markdown';
+
+import { mapActions, mapState } from 'vuex';
 
 export default {
   name: 'ProjectEdit',
 
   components: {
     Dropdown,
+    ProjectAttributeForm
   },
 
   data() {
@@ -266,13 +372,30 @@ export default {
         name: 'Sélectionner une image ...',
         size: 0,
       },
-      errors_archive_feature: [],
       errors: {
         title: [],
         access_level_pub_feature: [],
         access_level_arch_feature: [],
       },
       errorThumbnail: [],
+      featureBrowsingOptions: {
+        filter: [{
+          name: 'Désactivé',
+          value: ''
+        },
+        {
+          name: 'Type de signalement',
+          value: 'feature_type_slug',
+        }],
+        sort: [{
+          name: 'Date de création',
+          value: '-created_on',
+        },
+        {
+          name: 'Date de modification',
+          value: '-updated_on'
+        }],
+      },
       form: {
         title: '',
         slug: '',
@@ -285,8 +408,7 @@ export default {
         creator: null,
         access_level_pub_feature: { name: '', value: '' },
         access_level_arch_feature: { name: '', value: '' },
-        archive_feature: 0,
-        delete_feature: 0,
+        map_max_zoom_level: 22,
         nb_features: 0,
         nb_published_features: 0,
         nb_comments: 0,
@@ -294,20 +416,52 @@ export default {
         nb_contributors: 0,
         is_project_type: false,
         generate_share_link: false,
+        feature_assignement: false,
+        fast_edition_mode: false,
+        feature_browsing_default_filter: '',
+        feature_browsing_default_sort: '-created_on',
+        project_attributes: [],
+
       },
       thumbnailFileSrc: '',
+      scalesTable: [
+        '1:500 000 000',
+        '1:250 000 000',
+        '1:150 000 000',
+        '1:70 000 000',
+        '1:35 000 000',
+        '1:15 000 000',
+        '1:10 000 000',
+        '1:4 000 000',
+        '1:2 000 000',
+        '1:1 000 000',
+        '1:500 000',
+        '1:250 000',
+        '1:150 000',
+        '1:70 000',
+        '1:35 000',
+        '1:15 000',
+        '1:8 000',
+        '1:4 000',
+        '1:2 000',
+        '1:1 000',
+        '1:500',
+        '1:250',
+        '1:150',
+      ]
     };
   },
 
   computed: {
     ...mapState([
       'levelsPermissions',
+      'projectAttributes'
     ]),
     ...mapState('projects', ['project']),
     DJANGO_BASE_URL: function () {
       return this.$store.state.configuration.VUE_APP_DJANGO_BASE;
     },
-    levelPermissions(){
+    levelPermissionsArc(){
       const levels = new Array();
       if(this.levelsPermissions) {
         this.levelsPermissions.forEach((item) => {
@@ -317,7 +471,7 @@ export default {
               value: item.user_type_id,
             });
           }
-          if (!this.form.moderation && item.user_type_id == 'moderator') {
+          if (!this.form.moderation && item.user_type_id === 'moderator') {
             levels.pop();
           }
         });
@@ -341,7 +495,14 @@ export default {
         });
       }
       return levels;
-    }
+    },
+    /**
+     * Filter out attribute of field type list without option
+     */
+    filteredAttributes() {
+      return this.projectAttributes.filter(attr => attr.field_type === 'boolean' || attr.options);
+    },
+
   },
 
   watch: {
@@ -351,11 +512,12 @@ export default {
       }
     }
   },
-
-  created() {
+  
+  mounted() {
     this.definePageType();
     if (this.action === 'create') {
       this.thumbnailFileSrc = require('@/assets/img/default.png');
+      this.initPreviewMap();
     } else if (this.action === 'edit' || this.action === 'create_from') {
       if (!this.project) {
         this.$store.dispatch('projects/GET_PROJECT', this.$route.params.slug)
@@ -368,11 +530,13 @@ export default {
         this.fillProjectForm();
       }
     }
+    let textarea = document.querySelector('textarea');
+    new TextareaMarkdown(textarea);
   },
 
   methods: {
-    ...mapActions('projects', [
-      'GET_ALL_PROJECTS'
+    ...mapActions('map', [
+      'INITIATE_MAP'
     ]),
     definePageType() {
       if (this.$router.history.current.name === 'project_create') {
@@ -450,21 +614,11 @@ export default {
       }
     },
 
-    checkEmpty() {
-      //* forbid empty fields
-      if (!this.form.archive_feature) {
-        this.form.archive_feature = 0;
-      }
-      if (!this.form.delete_feature) {
-        this.form.delete_feature = 0;
-      }
-    },
-
     goBackNrefresh(slug) {
       Promise.all([
         this.$store.dispatch('GET_USER_LEVEL_PROJECTS'), //* refresh projects user levels
         this.$store.dispatch('GET_USER_LEVEL_PERMISSIONS'), //* refresh projects permissions
-        this.GET_ALL_PROJECTS(), //* & refresh project list
+        this.$store.dispatch('projects/GET_PROJECT', slug), //* refresh current project
       ]).then(() =>
         // * go back to project list
         this.$router.push({
@@ -508,12 +662,6 @@ export default {
     },
 
     checkForm() {
-      if (this.form.archive_feature > this.form.delete_feature) {
-        this.errors_archive_feature.push(
-          "Le délais de suppression doit être supérieur au délais d'archivage."
-        );
-        return false;
-      }
       for (const key in this.errors) {
         if ((key === 'title' && this.form[key]) || this.form[key].value) {
           this.errors[key] = [];
@@ -537,21 +685,16 @@ export default {
         return;
       }
       const projectData = {
-        title: this.form.title,
-        description: this.form.description,
+        ...this.form,
         access_level_arch_feature: this.form.access_level_arch_feature.value,
         access_level_pub_feature: this.form.access_level_pub_feature.value,
-        archive_feature: this.form.archive_feature,
-        delete_feature: this.form.delete_feature,
-        is_project_type: this.form.is_project_type,
-        generate_share_link: this.form.generate_share_link,
-        moderation: this.form.moderation,
+        feature_browsing_default_sort: this.form.feature_browsing_default_sort.value,
+        feature_browsing_default_filter: this.form.feature_browsing_default_filter.value,
       };
-      let url = `${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}projects/`;
 
       if (this.action === 'edit') {
         await axios
-          .put((url += `${this.project.slug}/`), projectData)
+          .put((`${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}v2/projects/${this.project.slug}/`), projectData)
           .then((response) => {
             if (response && response.status === 200) {
               //* send thumbnail after feature_type was updated
@@ -569,8 +712,9 @@ export default {
             throw error;
           });
       } else {
+        let url = `${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}v2/projects/`;
         if (this.action === 'create_from') {
-          url += `${this.project.slug}/duplicate/`;
+          url = `${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}projects/${this.project.slug}/duplicate/`;
         }
         this.loading = true;
         await axios
@@ -595,9 +739,12 @@ export default {
           });
       }
     },
+
     fillProjectForm() {
-      this.form = { ...this.project }; //* create a new object to avoid modifying original one
-      if (this.action === 'create_from') { //* if duplication of project, generate new name
+      //* create a new object to avoid modifying original one
+      this.form = { ...this.project };
+      //* if duplication of project, generate new name
+      if (this.action === 'create_from') {
         this.form.title =
           this.project.title +
           ` (Copie-${new Date()
@@ -606,41 +753,215 @@ export default {
             .replace(',', '')})`;
         this.form.is_project_type = false;
       }
-      //* transform string values to objects for dropdowns display (could be in a computed)
+      //* transform string values to objects used with dropdowns 
+      // fill dropdown current selection for archived feature viewing permission
+      if (this.levelPermissionsArc) {
+        const accessLevelArc = this.levelPermissionsArc.find(
+          (el) => el.name === this.project.access_level_arch_feature
+        );
+        if (accessLevelArc) {
+          this.form.access_level_arch_feature = {
+            name: this.project.access_level_arch_feature,
+            value: accessLevelArc.value ,
+          };
+        }
+      }
+      // fill dropdown current selection for published feature viewing permission
       if (this.levelPermissionsPub) {
-        const value = this.levelPermissionsPub.find(
+        const accessLevelPub = this.levelPermissionsPub.find(
           (el) => el.name === this.project.access_level_pub_feature
         );
-        if(value){
+        if (accessLevelPub) {
           this.form.access_level_pub_feature = {
             name: this.project.access_level_pub_feature,
-            value: value.value ,
+            value: accessLevelPub.value ,
           };
         }
       }
-      if (this.levelPermissions) {
-        const value = this.levelPermissions.find(
-          (el) => el.name === this.project.access_level_arch_feature
-        );
-        if(value){
-          this.form.access_level_arch_feature = {
-            name: this.project.access_level_arch_feature,
-            value: value.value ,
-          };
-        }
+      // fill dropdown current selection for feature browsing default filtering
+      const default_filter = this.featureBrowsingOptions.filter.find(
+        (el) => el.value === this.project.feature_browsing_default_filter
+      );
+      if (default_filter) {
+        this.form.feature_browsing_default_filter = default_filter;
+      }
+      // fill dropdown current selection for feature browsing default sorting
+      const default_sort = this.featureBrowsingOptions.sort.find(
+        (el) => el.value === this.project.feature_browsing_default_sort
+      );
+      if (default_sort) {
+        this.form.feature_browsing_default_sort = default_sort;
       }
+
+      this.initPreviewMap();
     },
+
+    initPreviewMap () {
+      const map = mapService.getMap();
+      if (map) mapService.destroyMap();
+      //On récupère le zoom maximum autorisé par la couche
+      const maxZoomLayer = this.$store.state.configuration.DEFAULT_BASE_MAP_OPTIONS.maxZoom;
+      let activeZoom = maxZoomLayer;
+      if(this.project && this.project.map_max_zoom_level < maxZoomLayer){
+        activeZoom = this.project.map_max_zoom_level;
+      }
+      this.INITIATE_MAP({
+        el: this.$refs.map,
+        zoom: activeZoom,
+        center: this.$store.state.configuration.MAP_PREVIEW_CENTER,
+        maxZoom: 22,
+        controls: [],
+        zoomControl: false,
+        //On désactive le zoom et le pan => gérer par le composant zoom max
+        interactions: { dragPan: false, mouseWheelZoom: false }
+      });
+      // add default basemap (in other maps the component SidebarLayer handles layers)
+      mapService.addLayers(
+        null,
+        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
+      );
+      //La tuile au dessus du zoom maximum n'existe pas
+      //On attend un peu qu'elle se charge et on zoom si besoin
+      setTimeout(() => {
+        mapService.zoom(this.project ? this.project.map_max_zoom_level : 22);
+      }, 500);
+    },
+
+    zoomMap() {
+      mapService.zoom(this.form.map_max_zoom_level);
+    },
+
+    /**
+     * Updates the value of a project attribute or adds a new attribute if it does not exist.
+     * 
+     * This function looks for an attribute by its ID. If the attribute exists, its value is updated.
+     * If the attribute does not exist, a new attribute object is added to the `project_attributes` array.
+     * 
+     * @param {String} value - The new value to be assigned to the project attribute.
+     * @param {Number} attributeId - The ID of the attribute to be updated or added.
+     */
+    updateProjectAttributes({ value, attributeId }) {
+      // Find the index of the attribute in the project_attributes array.
+      const attributeIndex = this.form.project_attributes.findIndex(el => el.attribute_id === attributeId);
+      if (attributeIndex !== -1) {
+        // Directly update the attribute's value if it exists.
+        this.form.project_attributes[attributeIndex].value = value;
+      } else {
+        // Add a new attribute object if it does not exist.
+        this.form.project_attributes.push({ attribute_id: attributeId, value });
+      }
+    },
+    
+    goToDocumentationFeature() {
+      window.open(this.$store.state.configuration.VUE_APP_URL_DOCUMENTATION_FEATURE);
+    }
+
   },
 };
 </script>
 
-<style media="screen">
+<style media="screen" lang="less">
 #form-input-file-logo {
   margin-left: auto;
   margin-right: auto;
 }
 
+.file-logo {
+  min-height: calc(150px + 2.4285em);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
 .close.icon:hover {
   cursor: pointer;
 }
-</style>
\ No newline at end of file
+
+textarea {
+  height: 10em;
+}
+
+.description.preview {
+  height: 10em;
+  overflow: scroll;
+  border: 1px solid rgba(34, 36, 38, .15);
+  padding: .78571429em 1em;
+}
+
+.checkboxes {
+  padding-left: .5em;
+  .absolute-right.ui.compact.icon.button {
+    position: absolute;
+    right: -2.75em;
+    top: calc(50% - 1em);
+    padding: .4em;
+  }
+}
+
+.map-maxzoom-selector {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  
+  input, output {
+    height: fit-content;
+  }
+  output {
+    white-space: nowrap;
+    min-width: auto;
+  }
+
+  .range-container {
+    margin-bottom: 2rem;
+  }
+  .map-preview {
+    margin-top: -1rem;
+    display: flex;
+    position: relative;
+    label {
+      white-space: nowrap;
+      font-size: .95em;
+      margin-right: 1rem;
+    }
+    #map {
+      min-height: 80px;
+      height: 80px;
+      width: 150px;
+      max-width: 150px;
+      z-index: 1;
+    }
+    
+    .no-preview {
+      position: absolute;
+      top: 25%;
+      left: 25%;
+      text-align: center;
+      font-size: .75em;
+      color: #656565;
+    }
+  }
+}
+
+label[for=feature_browsing] {
+  padding-left: 2em;
+}
+label[for=feature_browsing_default_filter],
+label[for=feature_browsing_default_sort] {
+  min-width: 4em;
+}
+#feature_browsing_filter,
+#feature_browsing_sort {
+  margin-left: 2.5rem;
+}
+@media only screen and (min-width: 1100px) {
+  #feature_browsing_filter {
+    margin-top: -2.25em;
+  }
+  #feature_browsing_filter,
+  #feature_browsing_sort {
+    float: right;
+  }
+}
+</style>

src/views/Project/ProjectMembers.vue

 <template>
-  <div
-    id="project-members"
-    class="page"
-  >
+  <div id="project-members">
     <h1 class="ui header">
       Gérer les membres
     </h1>
@@ -49,7 +46,10 @@
         :disabled="!newMember.user.name"
         @click="addMember"
       >
-        <i class="white add icon" />
+        <i
+          class="white add icon"
+          aria-hidden="true"
+        />
         <span class="padding-1">Ajouter</span>
       </button>
     </div>
@@ -59,10 +59,13 @@
       id="form-members"
       class="ui form"
     >
-      <table class="ui red table">
+      <table
+        class="ui red table"
+        aria-describedby="Table des membres du projet"
+      >
         <thead>
           <tr>
-            <th>
+            <th scope="col">
               Membre
               <i
                 :class="{
@@ -70,10 +73,11 @@
                   up: isSortedDesc('member'),
                 }"
                 class="icon sort"
+                aria-hidden="true"
                 @click="changeSort('member')"
               />
             </th>
-            <th>
+            <th scope="col">
               Niveau d'autorisation
               <i
                 :class="{
@@ -81,6 +85,7 @@
                   up: isSortedDesc('role'),
                 }"
                 class="icon sort"
+                aria-hidden="true"
                 @click="changeSort('role')"
               />
             </th>
@@ -108,7 +113,10 @@
                   data-tooltip="Retirer ce membre"
                   @click="removeMember(member)"
                 >
-                  <i class="times icon" />
+                  <i
+                    class="times icon"
+                    aria-hidden="true"
+                  />
                 </button>
               </div>
             </td>
@@ -123,7 +131,10 @@
         class="ui teal icon button"
         @click="saveMembers"
       >
-        <i class="white save icon" />&nbsp;Enregistrer les changements
+        <i
+          class="white save icon"
+          aria-hidden="true"
+        />&nbsp;Enregistrer les changements
       </button>
     </div>
   </div>
@@ -132,9 +143,10 @@
 <script>
 import axios from '@/axios-client.js';
 
-import { mapState } from 'vuex';
+import { mapMutations, mapState } from 'vuex';
 
 import Dropdown from '@/components/Dropdown.vue';
+import { formatUserOption } from '@/utils';
 
 export default {
   name: 'ProjectMembers',
@@ -177,16 +189,7 @@ export default {
     userOptions: function () {
       return this.projectUsers
         .filter((el) => el.userLevel.value === 'logged_user')
-        .map((el) => {
-          let name = el.user.first_name || '';
-          if (el.user.last_name) {
-            name = name + ' ' + el.user.last_name;
-          }
-          return {
-            name: [name, el.user.username],
-            value: el.user.id,
-          };
-        });
+        .map((el) => formatUserOption(el.user)); // Format user data to fit dropdown option structure
     },
 
     levelOptions: function () {
@@ -236,10 +239,16 @@ export default {
 
   destroyed() {
     //* allow user to change page if ever stuck on loader
-    this.$store.commit('DISCARD_LOADER');
+    this.DISCARD_LOADER();
   },
 
   methods: {
+    ...mapMutations([
+      'DISPLAY_MESSAGE',
+      'DISPLAY_LOADER',
+      'DISCARD_LOADER'
+    ]),
+
     validateNewMember() {
       this.newMember.errors = [];
       if (!this.newMember.user.value) {
@@ -289,60 +298,69 @@ export default {
       });
     },
 
+    /**
+     * Saves the updated members and their roles for a project.
+     * Displays a loader while the update is in progress and provides feedback upon completion or error.
+     */
     saveMembers() {
+      // Display a loader to indicate that the update process is ongoing
+      this.DISPLAY_LOADER('Mise à jour des membres du projet en cours ...');
+
+      // Prepare the data to be sent in the API request
       const data = this.projectUsers.map((member) => {
         return {
           user: member.user,
           level: {
-            display: member.userLevel.name,
-            codename: member.userLevel.value,
+            display: member.userLevel.name,  // Display name of the user level
+            codename: member.userLevel.value, // Codename of the user level
           },
         };
       });
 
+      // Make an API request to update the project members
       axios
         .put(
           `${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}projects/${this.project.slug}/utilisateurs/`,
           data
         )
         .then((response) => {
+          // Check if the response status is 200 (OK)
           if (response.status === 200) {
-            this.$store.dispatch('GET_USER_LEVEL_PROJECTS'); //* update user status in top right menu
-            this.$store.commit('DISPLAY_MESSAGE', { comment: 'Permissions mises à jour', level: 'positive' });
+            // Dispatch an action to update the user status in the top right menu
+            this.$store.dispatch('GET_USER_LEVEL_PROJECTS');
+            // Display a positive message indicating success
+            this.DISPLAY_MESSAGE({ comment: 'Permissions mises à jour avec succès', level: 'positive' });
           } else {
-            this.$store.commit(
-              'DISPLAY_MESSAGE',
-              {
-                comment : "Une erreur s'est produite pendant la mises à jour des permissions",
-                level: 'negative'
-              }
-            );
+            // Display a generic error message if the response status is not 200
+            this.DISPLAY_MESSAGE({
+              comment: "Une erreur s'est produite pendant la mises à jour des permissions",
+              level: 'negative'
+            });
           }
+          // Hide the loader regardless of the request result
+          this.DISCARD_LOADER();
         })
         .catch((error) => {
-          throw error;
-        });
-    },
-
-    fetchMembers() {
-      // todo: move function to a service
-      return axios
-        .get(
-          `${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}projects/${this.$route.params.slug}/utilisateurs/`
-        )
-        .then((response) => response.data)
-        .catch((error) => {
-          throw error;
+          // Hide the loader if an error occurs
+          this.DISCARD_LOADER();
+          // Determine the error message to display
+          const errorMessage = error.response && error.response.data && error.response.data.error
+            ? error.response.data.error
+            : "Une erreur s'est produite pendant la mises à jour des permissions";
+          // Display the error message
+          this.DISPLAY_MESSAGE({
+            comment: errorMessage,
+            level: 'negative'
+          });
+          // Log the error to the console for debugging
+          console.error(error);
         });
     },
 
     populateMembers() {
-      this.$store.commit(
-        'DISPLAY_LOADER',
-        'Récupération des membres en cours...'
-      );
-      this.fetchMembers().then((members) => {
-        this.$store.commit('DISCARD_LOADER');
+      this.DISPLAY_LOADER('Récupération des membres en cours...');
+      this.$store.dispatch('projects/GET_PROJECT_USERS', this.$route.params.slug).then((members) => {
+        this.DISCARD_LOADER();
         this.projectUsers = members.map((el) => {
           return {
             userLevel: { name: el.level.display, value: el.level.codename },

src/views/Projects/ProjectsList.vue

 <template>
-  <div
-    id="projects"
-    class="page"
-  >
+  <div id="projects">
     <h2 class="ui horizontal divider header">
       PROJETS
     </h2>
@@ -12,8 +9,13 @@
         v-if="user && user.can_create_project && isOnline"
         :to="{ name: 'project_create', params: { action: 'create' } }"
         class="ui green basic button"
+        data-test="create-project"
       >
-        <i class="plus icon" /> Créer un nouveau projet
+        <i
+          class="plus icon"
+          aria-hidden="true"
+        />
+        Créer un nouveau projet
       </router-link>
       <router-link
         v-if="user && user.can_create_project && isOnline"
@@ -21,25 +23,33 @@
           name: 'project_type_list',
         }"
         class="ui blue basic button"
+        data-test="to-project-models"
       >
-        <i class="copy icon" /> Accéder à la liste des modèles de projets
+        <i
+          class="copy icon"
+          aria-hidden="true"
+        />
+        Accéder à la liste des modèles de projets
       </router-link>
     </div>
 
     <!-- FILTRES DES PROJETS -->
     <ProjectsMenu
+      :loading="loading"
       @filter="setProjectsFilters"
+      @getData="getData"
       @loading="setLoader"
     />
 
     <div
       v-if="configuration.DISPLAY_FORBIDDEN_PROJECTS"
       id="forbidden-projects"
-      class="ui toggle checkbox"
+      class="ui toggle checkbox margin-top"
     >
       <input
-        v-model="displayForbiddenProjects"
+        :checked="displayForbiddenProjects"
         type="checkbox"
+        @input="toggleForbiddenProjects"
       >
       <label>
         N'afficher que les projets disponibles à la consultation
@@ -50,14 +60,12 @@
     <div
       v-if="projects"
       class="ui divided items dimmable dimmed"
+      data-test="project-list"
     >
-      <div
-        :class="{ active: loading }"
-        class="ui inverted dimmer"
-      >
+      <div :class="['ui inverted dimmer', { active: loading }]">
         <div class="ui loader" />
       </div>
-      
+    
       <ProjectsListItem
         v-for="project in projects"
         :key="project.slug"
@@ -66,21 +74,15 @@
 
       <span
         v-if="!projects || projects.length === 0"
-      >Vous n'avez accès à aucun projet.</span>
-
-      <div
-        :class="{ active: loading }"
-        class="ui inverted dimmer"
       >
-        <div class="ui loader" />
-      </div>
+        Vous n'avez accès à aucun projet.
+      </span>
 
       <!-- PAGINATION -->
       <Pagination
         v-if="count"
-        :nb-pages="Math.ceil(count/10)"
-        :on-page-change="SET_CURRENT_PAGE"
-        @change-page="changePage"
+        :nb-pages="nbPages"
+        @page-update="changePage"
       />
     </div>
   </div>
@@ -123,49 +125,30 @@ export default {
     DJANGO_BASE_URL() {
       return this.$store.state.configuration.VUE_APP_DJANGO_BASE;
     },
-  },
-
-  watch: {
-    filters: {
-      deep: true,
-      handler(newValue) {
-        if (newValue) {
-          this.getData();
-        }
-      }
-    },
-    displayForbiddenProjects(newValue) {
-      if (newValue) {
-        this.SET_PROJECTS_FILTER({
-          filter: 'accessible',
-          value: 'true'
-        });
-      } else {
-        this.SET_PROJECTS_FILTER({
-          filter: 'accessible',
-          value: null
-        });
-      }
-      this.getData();
+    nbPages() {
+      return Math.ceil(this.count / 10);
     }
   },
 
   created() {
+    this.SET_CURRENT_PAGE(1);
+    // Empty stored text to search
+    this.SET_PROJECTS_SEARCH_STATE({ text: null });
+    // Empty stored project list
     this.$store.commit('projects/SET_PROJECT', null);
-    this.SET_PROJECTS_FILTER({
-      filter: 'accessible',
-      value: 'true'
-    });
+    // Init display of restricted access projects
     this.displayForbiddenProjects = this.configuration.DISPLAY_FORBIDDEN_PROJECTS_DEFAULT;
+    this.setForbiddenProjectsFilter(true);
   },
 
   methods: {
     ...mapMutations('projects', [
       'SET_CURRENT_PAGE',
-      'SET_PROJECTS_FILTER'
+      'SET_PROJECTS_FILTER',
+      'SET_PROJECTS_SEARCH_STATE',
     ]),
     ...mapActions('projects', [
-      'GET_PROJECTS'
+      'GET_PROJECTS',
     ]),
 
     getData(page) {
@@ -187,8 +170,26 @@ export default {
       this.getData(e);
     },
 
-    setProjectsFilters(e) {
+    setProjectsFilters(e, noUpdate) {
       this.SET_PROJECTS_FILTER(e);
+      // Reset the page number at filter change
+      this.SET_CURRENT_PAGE(1);
+      // Wait that all filters are set in store to fetch data when component is created
+      if (!noUpdate) {
+        this.getData();
+      }
+    },
+
+    toggleForbiddenProjects(e) {
+      this.displayForbiddenProjects = e.target.checked;
+      this.setForbiddenProjectsFilter();
+    },
+
+    setForbiddenProjectsFilter(noUpdate) {
+      this.setProjectsFilters({
+        filter: 'accessible',
+        value: this.displayForbiddenProjects ? 'true' : null
+      }, noUpdate);
     },
   }
 };
@@ -198,6 +199,16 @@ export default {
 
 #projects {
   margin: 0 auto;
+
+  .dimmable {
+
+    .dimmer {
+      
+      .loader {
+        top: 25%;
+      }
+    }
+  }
 }
 
 .flex {
@@ -217,10 +228,10 @@ export default {
     color: rgb(94, 94, 94);
   }
   input:checked ~ label::before {
-    background-color: teal !important;
+    background-color: var(--primary-color, #008c86) !important;
   }
   input:checked ~ label {
-    color: teal !important;
+    color: var(--primary-color, #008c86) !important;
   }
 }