Merge branch 'redmine-issues/13974' into 'develop'

REDMINE_ISSUE-13974|La carte disparait lorsqu'on passe sur la liste ou que l'on change l'ordre des couches

See merge request !411

src/components/Map/SidebarLayers.vue

@@ -59,8 +59,7 @@
       class="basemaps-items ui accordion styled"
     >
       <div
-        :class="{ active: isActive(basemap) }"
-        class="basemap-item title"
+        :class="['basemap-item title', { active: isActive(basemap) }]"
         @click="activateGroup(basemap)"
       >
         {{ basemap.title }}
@@ -79,8 +78,7 @@
       </div>
       <div
         :id="`list-${basemap.id}`"
-        :class="{ active: isActive(basemap) }"
-        class="content"
+        :class="['content', { active: isActive(basemap) }]"
         :data-basemap-index="basemap.id"
       >
         <div
@@ -89,6 +87,7 @@
           class="layer-item transition visible item list-group-item"
           :data-id="layer.id"
         >
+        <!-- layer id is used for retrieving layer when changing order -->
           <p class="layer-handle-sort">
             <i
               class="th icon"
@@ -245,13 +244,13 @@ export default {
       // Get the names of the current layers in order.
       const currentLayersNamesInOrder = Array.from(
         document.getElementsByClassName('layer-item transition visible')
-      ).map((el) => el.children[0].innerText);
+      ).map((el) => parseInt(el.attributes['data-id'].value));
       // Create an array to put the layers in order.
       let movedLayers = [];
 
       for (const layerName of currentLayersNamesInOrder) {
         movedLayers.push(
-          this.activeBasemap.layers.filter((el) => el.title === layerName)[0]
+          this.activeBasemap.layers.filter((el) => el.id === layerName)[0]
         );
       }
       // Remove existing layers undefined

src/views/Project/FeaturesListAndMap.vue

@@ -14,8 +14,7 @@
       />
 
       <div
-        v-if="showMap"
-        class="ui tab active map-container visible"
+        :class="['ui tab active map-container', {visible: showMap}]"
         data-tab="map"
       >
         <div class="hider" />
@@ -40,7 +39,7 @@
         </div>
       </div>
       <FeatureListTable
-        v-else
+        v-show="!showMap"
         :paginated-features="paginatedFeatures"
         :page-numbers="pageNumbers"
         :checked-features.sync="checkedFeatures"
@@ -513,7 +512,11 @@ export default {
 }
 
 .map-container {
+  width: 80vw;
+  transform: translateX(-50%);
+  margin-left: 50%;
   visibility: hidden;
+  position: absolute;
 }
 .map-container.visible {
   visibility: visible;
@@ -538,8 +541,8 @@ export default {
 
   #map {
     width: 100%;
-    min-height: 300px;
-    height: calc(100vh - 300px);
+    min-height: 310px;
+    height: calc(100vh - 310px);
     border: 1px solid grey;
     /* To not hide the filters */
     z-index: 1;