src/views/Project/FeaturesListAndMap.vue

@@ -3,55 +3,74 @@
     <div class="column">
       <FeaturesListAndMapFilters
         :show-map="showMap"
-        :features-count="featuresCount"
+        :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"
-        @modify-status="modifyStatus"
+        @edit-status="modifyStatus"
         @toggle-delete-modal="toggleDeleteModal"
       />
 
-      <div
-        :class="['ui tab active map-container', { 'visible': showMap }]"
-        data-tab="map"
-      >
+      <div class="loader-container">
         <div
-          id="map"
-          ref="map"
-        />
-        <SidebarLayers
-          v-if="basemaps && map"
-          ref="sidebar"
-        />
-        <Geocoder />
-        <div 
-          id="popup" 
-          class="ol-popup"
+          :class="['ui tab active map-container', { 'visible': showMap }]"
+          data-tab="map"
         >
-          <a 
-            id="popup-closer" 
-            href="#" 
-            class="ol-popup-closer"
-          />
+          <div
+            id="map"
+            ref="map"
+          >
+            <SidebarLayers
+              v-if="basemaps && map"
+              ref="sidebar"
+            />
+            <Geolocation />
+            <Geocoder />
+          </div>
           <div 
-            id="popup-content"
-          />
+            id="popup" 
+            class="ol-popup"
+          >
+            <a 
+              id="popup-closer" 
+              href="#" 
+              class="ol-popup-closer"
+            />
+            <div 
+              id="popup-content"
+            />
+          </div>
         </div>
+        <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"
+        />
+        <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>
+        </Transition>
       </div>
-      <FeatureListTable
-        v-show="!showMap"
-        :paginated-features="paginatedFeatures"
-        :page-numbers="pageNumbers"
-        :checked-features.sync="checkedFeatures"
-        :features-count="featuresCount"
-        :pagination="pagination"
-        :sort="sort"
-        :queryparams="queryparams"
-        @update:page="handlePageChange"
-        @update:sort="handleSortChange"
-      />
 
     
       <!-- MODAL ALL DELETE FEATURE TYPE -->
@@ -77,8 +96,11 @@
               aria-hidden="true"
             />
             Êtes-vous sûr de vouloir effacer
-            <span v-if="checkedFeatures.length === 1"> un signalement ? </span>
-            <span v-else> ces {{ checkedFeatures.length }} signalements ? </span>
+            <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
@@ -103,8 +125,9 @@ import Geocoder from '@/components/Map/Geocoder';
 import featureAPI from '@/services/feature-api';
 
 import FeaturesListAndMapFilters from '@/components/Project/FeaturesListAndMap/FeaturesListAndMapFilters';
-import SidebarLayers from '@/components/Map/SidebarLayers';
 import FeatureListTable from '@/components/Project/FeaturesListAndMap/FeatureListTable';
+import SidebarLayers from '@/components/Map/SidebarLayers';
+import Geolocation from '@/components/Map/Geolocation';
 
 const initialPagination = {
   currentPage: 1,
@@ -120,23 +143,24 @@ export default {
     FeaturesListAndMapFilters,
     SidebarLayers,
     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,
@@ -178,27 +202,45 @@ export default {
     pageNumbers() {
       return this.createPagesArray(this.featuresCount, this.pagination.pagesize);
     },
+
+    featuresCountDisplay() {
+      return this.showMap ? this.featuresWithGeomCount : this.featuresCount;
+    }
+  },
+
+
+  watch: {
+    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
       Promise.all([
         this.$store.dispatch('projects/GET_PROJECT', this.projectSlug),
         this.$store.dispatch('projects/GET_PROJECT_INFO', this.projectSlug)
-      ])
-        .then(()=> this.initMap());
+      ]).then(()=> this.initPage());
     } else {
-      this.initMap();
+      this.initPage();
     }
   },
 
   destroyed() {
     //* allow user to change page if ever stuck on loader
-    this.$store.commit('DISCARD_LOADER');
+    this.loading = false;
   },
 
   methods: {
+    ...mapMutations([
+      'DISPLAY_MESSAGE',
+    ]),
     ...mapActions('feature', [
       'DELETE_FEATURE',
     ]),
@@ -209,79 +251,209 @@ export default {
 
     setShowMap(newValue) {
       this.showMap = newValue;
-      //* expanded sidebar is visible under the list, even when the map is closed (position:absolute), solved by closing it whin switching to list
-      if (newValue === false) this.$refs.sidebar.toggleSidebar(false);
+      // 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);
     },
     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];
-      const value = Object.values(e)[0];
-      if (filter === 'title') {
-        this.form[filter] = value;
-      } else {
-        this.form[filter].selected = value;
+      let value = Object.values(e)[0];
+      if (value && Array.isArray(value)) {
+        value = value.map(el => el.value);
       }
+      this.form[filter] = value;
     },
 
     toggleDeleteModal() {
       this.isDeleteModalOpen = !this.isDeleteModalOpen;
     },
 
+    /**
+     * Modifie le statut des objets sélectionnés.
+     *
+     * Cette méthode prend en charge deux cas :
+     * 1. Si tous les objets sont sélectionnés (`allSelected`), une requête unique en mode "bulk update" est envoyée
+     *    au backend pour modifier le statut de tous les objets correspondant aux critères.
+     * 2. Si des objets spécifiques sont sélectionnés (`checkedFeatures`), ils sont traités un par un de manière
+     *    récursive. Chaque objet modifié est retiré de la liste des objets sélectionnés.
+     *
+     * En cas d'erreur (réseau ou backend), un message d'erreur est affiché, et les données sont rafraîchies.
+     * Si tous les objets sont modifiés avec succès, un message de confirmation est affiché.
+     *
+     * @param {string} newStatus - Le nouveau statut à appliquer aux objets sélectionnés.
+     * @returns {Promise<void>} - Une promesse qui se résout lorsque tous les objets ont été traités.
+     */
     async modifyStatus(newStatus) {
-      if (this.checkedFeatures.length > 0) {
-        const feature_id = this.checkedFeatures[0];
-        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();
     },
 
@@ -291,6 +463,14 @@ export default {
       }
     },
 
+    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 || '';
@@ -308,35 +488,28 @@ export default {
         mapDefaultViewCenter,
         mapDefaultViewZoom,
         maxZoom: this.project.map_max_zoom_level,
-        interactions : { doubleClickZoom :false,mouseWheelZoom:true,dragPan:true }
-      });
-
-      //this.fetchBboxNfit(); cette methode est appelée a nouveau par la suite donc pas utile ici
-
-      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
-        mapService.updateOrder(event.detail.layers.slice().reverse());
+        interactions : { doubleClickZoom :false, mouseWheelZoom:true, dragPan:true },
+        fullScreenControl: true,
+        geolocationControl: true,
       });
 
-      // --------- End sidebar events ----------
-      setTimeout(() => {
-        const project_id = this.projectSlug.split('-')[0];
+      this.$nextTick(() => {
         const mvtUrl = `${this.API_BASE_URL}features.mvt`;
-        mapService.addVectorTileLayer(
-          mvtUrl,
-          project_id,
-          this.feature_types,
-          this.form
-        );
-      }, 1000);
+        mapService.addVectorTileLayer({
+          url: mvtUrl,
+          project_slug: this.projectSlug,
+          featureTypes: this.feature_types,
+          formFilters: this.form,
+          queryParams: this.queryparams,
+        });
+      });
 
       this.fetchPagedFeatures();
     },
 
-    fetchBboxNfit(queryParams) {
+    fetchBboxNfit(queryString) {
       featureAPI
-        .getFeaturesBbox(this.projectSlug, queryParams)
+        .getFeaturesBbox(this.projectSlug, queryString)
         .then((bbox) => {
           if (bbox) {
             mapService.fitBounds(bbox);
@@ -360,61 +533,74 @@ export default {
       return result;
     },
 
-    buildQueryString() {
-      let queryString = '';
-      const typeFilter = this.getFeatureTypeSlug(this.form.type.selected);
-      const statusFilter = this.form.status.selected.value;
-
+    /**
+     * 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;
-      if (typeFilter) {
-        this.queryparams['feature_type_slug'] = typeFilter;
-        queryString += `&feature_type_slug=${typeFilter}`;
+      // 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) {
-        this.queryparams['status__value'] = statusFilter;
-        queryString += `&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) {
         this.queryparams['title'] = this.form.title;
-        queryString += `&title=${this.form.title}`;
-      }
-      if (this.sort.column) {
-        let ordering = `${this.sort.ascending ? '-' : ''}${this.getAvalaibleField(this.sort.column)}`;
-        this.queryparams['ordering'] = ordering;
-        queryString += `&ordering=${ordering}`;
       }
-      return queryString;
+      // 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) {
-      if (!this.isOnline) return;
-      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 when using 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;
         });
     },
 
@@ -443,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) {
@@ -485,6 +676,14 @@ export default {
 
 
 <style lang="less" scoped>
+.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;
+  }
+}
 .map-container {
   width: 80vw;
   transform: translateX(-50%);
@@ -517,6 +716,11 @@ export default {
     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) {
   #project-features {
@@ -527,5 +731,37 @@ export default {
     position: relative;
   }
 }
+
+.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
+  }
+
+  100% {
+    opacity: .9
+  }
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0
+  }
+
+  100% {
+    opacity: .9
+  }
+}
+
 </style>
 

src/views/Project/ProjectBasemaps.vue

@@ -6,15 +6,13 @@
 
     <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"
         >
@@ -23,12 +21,12 @@
             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"
@@ -36,19 +34,19 @@
           :basemap="basemap"
         />
       </div>
-      <div class="margin-top">
-        <button
-          type="button"
-          class="ui teal icon floated button"
-          @click="saveChanges"
-        >
-          <i
-            class="white save icon"
-            aria-hidden="true"
-          />
-          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>
@@ -116,7 +114,7 @@ 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.DISPLAY_MESSAGE({
@@ -138,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

@@ -4,24 +4,6 @@
       v-if="permissions && permissions.can_view_project && project"
       id="project-detail"
     >
-      <div
-        id="message"
-        class="fullwidth"
-      >
-        <div
-          v-if="tempMessage"
-          class="ui positive message"
-        >
-          <p>
-            <i
-              class="check icon"
-              aria-hidden="true"
-            />
-            {{ tempMessage }}
-          </p>
-        </div>
-      </div>
-
       <ProjectHeader
         :arrays-offline="arraysOffline"
         @retrieveInfo="retrieveProjectInfo"
@@ -32,27 +14,47 @@
         <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 map-container">
-            <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="{
@@ -68,20 +70,6 @@
                 Voir tous les signalements
               </div>
             </router-link>
-
-            <div 
-              id="popup" 
-              class="ol-popup"
-            >
-              <a 
-                id="popup-closer" 
-                href="#" 
-                class="ol-popup-closer"
-              />
-              <div 
-                id="popup-content"
-              />
-            </div>
           </div>
         </div>
 
@@ -89,7 +77,7 @@
           <div class="sixteen wide column">
             <div class="ui two stackable cards">
               <ProjectLastFeatures
-                :loading="featuresLoading"
+                ref="lastFeatures"
               />
               <ProjectLastComments
                 :loading="projectInfoLoading"
@@ -139,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',
@@ -149,7 +139,9 @@ export default {
     ProjectLastFeatures,
     ProjectLastComments,
     ProjectParameters,
-    ProjectModal
+    ProjectModal,
+    SidebarLayers,
+    Geolocation,
   },
 
   filters: {
@@ -166,8 +158,8 @@ export default {
 
   props: {
     message: {
-      type: String,
-      default: ''
+      type: Object,
+      default: () => {}
     }
   },
 
@@ -181,8 +173,8 @@ export default {
       is_suscriber: false,
       tempMessage: null,
       projectInfoLoading: true,
+      featureTypesLoading: false,
       featureTypeToDelete: null,
-      featuresLoading: true,
       mapLoading: true,
     };
   },
@@ -204,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() {
@@ -229,23 +219,17 @@ 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();
   },
@@ -254,8 +238,6 @@ export default {
     ...mapMutations([
       'CLEAR_RELOAD_INTERVAL_ID',
       'DISPLAY_MESSAGE',
-      'DISPLAY_LOADER',
-      'DISCARD_LOADER',
     ]),
     ...mapMutations('modals', [
       'OPEN_PROJECT_MODAL',
@@ -272,33 +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(() => {
-            let map = mapService.getMap();
+          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;
         });
     },
@@ -415,66 +389,96 @@ export default {
       this.featureTypeToDelete = featureType;
       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];
+        // Define the URL for vector tile layers
         const mvtUrl = `${this.API_BASE_URL}features.mvt`;
-        mapService.addVectorTileLayer(
-          mvtUrl,
-          project_id,
-          this.feature_types
-        );
-        this.mapLoading = false;
+        // 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;
-            mapService.addFeatures(
-              [...this.features, ...featuresOffline],
-              {},
-              this.feature_types,
-              true
-            );
-          })
-          .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) {
             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 lang="less" scoped>
-
 .fullwidth {
   width: 100%;
 }
 
-.map-container {
+.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

@@ -46,7 +46,7 @@
             </li>
           </ul>
         </div>
-        <div class="field">
+        <div class="field file-logo">
           <label>Illustration du projet</label>
           <img
             v-if="thumbnailFileSrc.length || form.thumbnail.length"
@@ -91,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">
@@ -138,7 +150,7 @@
             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"
           />
@@ -157,7 +169,7 @@
       </div>
 
       <div class="two fields">
-        <div class="fields grouped">
+        <div class="fields grouped checkboxes">
           <div class="field">
             <div class="ui checkbox">
               <input
@@ -207,26 +219,116 @@
                 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 class="field required">
+        <div class="field">
           <label>Niveau de zoom maximum de la carte</label>
-          <div class="range-container">
-            <input
-              v-model="form.map_max_zoom_level"
-              type="range"
-              min="0"
-              max="22"
-              step="1"
-            ><output class="range-output-bubble">{{
-              form.map_max_zoom_level
-            }}</output>
+          <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
+        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
@@ -246,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 TextareaMarkdown from 'textarea-markdown';
 
-import { mapState } from 'vuex';
+import { mapActions, mapState } from 'vuex';
 
 export default {
   name: 'ProjectEdit',
 
   components: {
     Dropdown,
+    ProjectAttributeForm
   },
 
   data() {
@@ -265,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: '',
@@ -284,8 +408,6 @@ 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,
@@ -294,21 +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) => {
@@ -318,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();
           }
         });
@@ -342,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: {
@@ -352,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)
@@ -369,9 +530,14 @@ export default {
         this.fillProjectForm();
       }
     }
+    let textarea = document.querySelector('textarea');
+    new TextareaMarkdown(textarea);
   },
 
   methods: {
+    ...mapActions('map', [
+      'INITIATE_MAP'
+    ]),
     definePageType() {
       if (this.$router.history.current.name === 'project_create') {
         this.action = 'create';
@@ -448,20 +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.$store.dispatch('projects/GET_PROJECT', slug), //* refresh current project
       ]).then(() =>
         // * go back to project list
         this.$router.push({
@@ -505,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] = [];
@@ -534,23 +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,
-        map_max_zoom_level: this.form.map_max_zoom_level,
-        is_project_type: this.form.is_project_type,
-        generate_share_link: this.form.generate_share_link,
-        fast_edition_mode: this.form.fast_edition_mode,
-        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
@@ -568,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
@@ -594,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()
@@ -605,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

@@ -143,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',
@@ -188,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 () {
@@ -247,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) {
@@ -300,67 +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() {
-      this.$store.commit(
-        'DISPLAY_LOADER',
-        'Mise à jour des membres du projet en cours ...'
-      );
+      // 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'
+            });
           }
-          this.$store.commit('DISCARD_LOADER');
+          // Hide the loader regardless of the request result
+          this.DISCARD_LOADER();
         })
         .catch((error) => {
-          this.$store.commit('DISCARD_LOADER');
-          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

@@ -9,6 +9,7 @@
         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"
@@ -22,6 +23,7 @@
           name: 'project_type_list',
         }"
         class="ui blue basic button"
+        data-test="to-project-models"
       >
         <i
           class="copy icon"
@@ -33,18 +35,21 @@
 
     <!-- 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
@@ -55,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"
@@ -78,9 +81,8 @@
       <!-- 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);
     },
   }
 };
@@ -227,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;
   }
 }
 

vue.config.js

@@ -2,6 +2,7 @@ const webpack = require('webpack');
 const fs = require('fs');
 const packageJson = fs.readFileSync('./package.json');
 const version = JSON.parse(packageJson).version || 0;
+
 module.exports = {
   publicPath: '/geocontrib/',
   devServer: {
@@ -34,6 +35,7 @@ module.exports = {
     themeColor: '#1da025'
   },
   configureWebpack: {
+    devtool: 'source-map',
     plugins: [
       new webpack.DefinePlugin({
         'process.env': {
@@ -42,5 +44,14 @@ module.exports = {
       })
     ]
   },
-// the rest of your original module.exports code goes here
+  transpileDependencies: [
+    // Add dependencies that use modern JavaScript syntax, based on encountered errors
+    'ol',
+    'color-rgba',
+    'color-parse',
+    '@sentry/browser',
+    '@sentry/core',
+    '@sentry/vue',
+    '@sentry-internal'
+  ]
 };

webpack.config.js

+module.exports = {
+    module: {
+      rules: [
+        {
+          test: /\.js$/,
+          exclude: /node_modules/,
+          use: {
+            loader: 'babel-loader'
+          }
+        },
+        {
+          test: /\.vue$/,
+          loader: 'vue-loader'
+        }
+      ]
+    }
+  };
+  
\ No newline at end of file