prevent sidebarLayer from mutating basemaps stored & drop opacity check

src/components/Map/SidebarLayers.vue

@@ -76,7 +76,7 @@ export default {
 
   data() {
     return {
-      baseMaps: [...this.$store.state.map.basemaps] || [],
+      baseMaps: [],
       expanded: false,
       projectSlug: this.$route.params.slug,
       selectedQueryLayer: '',
@@ -89,6 +89,7 @@ export default {
     ]),
     ...mapState('map', [
       'availableLayers',
+      'basemaps'
     ]),
     activeBasemap() {
       return this.baseMaps.find((baseMap) => baseMap.active);
@@ -99,10 +100,11 @@ export default {
     activeQueryableLayers() {
       return this.baseMaps[this.activeBasemapIndex].layers.filter((layer) => layer.queryable);
     },
-
   },
 
   mounted() {
+    // clone object to not modify data in store, using json parse instead of spread operator that modifies data, for instance when navigating to basemap administration page
+    this.baseMaps = JSON.parse(JSON.stringify(this.basemaps));
     const mapOptions =
       JSON.parse(localStorage.getItem('geocontrib-map-options')) || {};
     if (mapOptions && mapOptions[this.projectSlug]) {
@@ -177,15 +179,15 @@ export default {
       outer_block: {
         // For each basemap from the server, compare the length and id values of the layers
         for (const serverBasemap of basemapFromServer) {
-          // loop over basemaps from localStorage and check if layers id, queryable & opacity setting match with the layers from the server
+          // loop over basemaps from localStorage and check if layers id & queryable setting match with the layers from the server
+          // we don't check opacity since it would detect a change and reinit each time the user set it. It would need to be stored separatly like current basemap index
           for (const localBasemap of basemapFromLocalstorage) {
             if (serverBasemap.id === localBasemap.id) {
               isSameLayers =
                 serverBasemap.layers.length === localBasemap.layers.length &&
                 serverBasemap.layers.every(
                   (layer, index) => layer.id === localBasemap.layers[index].id &&
-                      layer.queryable === localBasemap.layers[index].queryable &&
-                        layer.opacity === localBasemap.layers[index].opacity
+                      layer.queryable === localBasemap.layers[index].queryable
                 );
               if (!isSameLayers) {
                 break outer_block;