add drag & drop and update store with new order for layers

src/components/map-layers/SidebarLayers.vue

@@ -86,7 +86,6 @@
           </p>
           <label>Opacité &nbsp;<span>(%)</span></label>
           <div class="range-container">
-            <!-- // todo : rendre réactif les valeurs et connectés avec store/Map -->
             <input
               @change="updateOpacity($event, layer)"
               type="range"

src/components/project/ProjectMappingContextLayer.vue

 <template>
-  <div class="ui segment layer-item">
+  <div :id="layer.dataKey" class="ui segment layer-item">
     <div class="ui divided form">
       <div class="field" data-type="layer-field">
         <label for="form.layer.id_for_label" class="layer-handle-sort">

src/components/project/project_mapping_basemap.vue

@@ -20,7 +20,11 @@
     </div>
 
     <div class="nested">
-      <div v-if="basemap.layers" class="ui segments layers-container">
+      <div
+        :id="`list-${basemap.id}`"
+        v-if="basemap.layers"
+        class="ui segments layers-container"
+      >
         <ProjectMappingContextLayer
           v-for="layer in basemap.layers"
           :key="'layer-' + layer.dataKey"
@@ -60,6 +64,7 @@
 </template>
 
 <script>
+import Sortable from "sortablejs";
 import ProjectMappingContextLayer from "@/components/project/ProjectMappingContextLayer.vue";
 
 export default {
@@ -127,7 +132,49 @@ export default {
         }),
       });
     },
+
+    //* drag & drop *//
+
+    onlayerMove(event) {
+      console.log(event);
+      //* Get the names of the current layers in order.
+      const currentLayersNamesInOrder = Array.from(
+        document.getElementsByClassName("layer-item")
+      ).map((el) => el.id);
+
+      //* increment value 'order' in this.basemap.layers looping over layers from template ^
+      let order = 0;
+      let movedLayers = [];
+      for (let id of currentLayersNamesInOrder) {
+        let matchingLayer = this.basemap.layers.find(
+          (el) => el.dataKey === Number(id)
+        );
+        if (matchingLayer) {
+          matchingLayer["order"] = order;
+          movedLayers.push(matchingLayer);
+          order += 1;
+        }
+      }
+      //* update the store
+      this.$store.commit("map/UPDATE_BASEMAP", {
+        layers: movedLayers,
+        id: this.basemap.id,
+        title: this.basemap.title,
+        errors: this.basemap.errors,
+      });
+    },
+
+    initSortable() {
+      new Sortable(document.getElementById(`list-${this.basemap.id}`), {
+        animation: 150,
+        handle: ".layer-handle-sort", // The element that is active to drag
+        ghostClass: "blue-background-class",
+        dragClass: "white-opacity-background-class",
+        onEnd: this.onlayerMove.bind(this),
+      });
+    },
   },
+
   watch: {
     "basemap.title": {
       deep: true,
@@ -153,14 +200,16 @@ export default {
   //   this.errors = [];
   // }
 
-  // mounted() { //* not present in original
-  //   if (!this.basemap.title) {
-  //     this.$store.commit("map/UPDATE_BASEMAP", {
-  //       id: this.basemap.id,
-  //       title: newValue,
-  //     });
-  //   }
-  // },
+  mounted() {
+    //* not present in original
+    this.initSortable();
+    //   if (!this.basemap.title) {
+    //     this.$store.commit("map/UPDATE_BASEMAP", {
+    //       id: this.basemap.id,
+    //       title: newValue,
+    //     });
+    //   }
+  },
 };
 </script>
 

src/views/project/Project_mapping.vue

@@ -83,6 +83,7 @@ export default {
       this.newBasemapIds.push(this.basemapMaxId + 1); //* register new basemaps to seperate post and put
       this.$store.commit("map/CREATE_BASEMAP", this.basemapMaxId + 1);
     },
+    
     checkTitles() {
       let isValid = true;
       this.basemaps.forEach((basemap) => {