Fix issue with open tree-structure

package.json

@@ -59,7 +59,7 @@
     "vue-router": "^3.2.0",
     "vue-tour": "^2.0.0",
     "vue2mapbox-gl": "^0.15.0",
-    "vuetify": "^2.2.11",
+    "vuetify": "2.7.2",
     "vuex": "^3.4.0",
     "wkt": "^0.1.1",
     "xml-js": "^1.6.11"

src/components/LayerChooser/LayerChooser.vue

@@ -32,8 +32,9 @@
     </div>
     <div class="layers-scrollable">
       <v-treeview
-        data-v-step="2"
+        :key="keyForceTreeUpdate"
         ref="tree"
+        data-v-step="2"
         class="layer-chooser__tree"
         :value="activeFlattenedLayerIds"
         hoverable
@@ -147,6 +148,7 @@
       value: [],
       onlyActive: false,
       openedItems: [],
+      keyForceTreeUpdate:0,
     }),
 
     computed: {
@@ -163,30 +165,44 @@
 
     watch: {
       searchString(newValue, oldValue) {
+        console.log('searchString')
         if (oldValue === '') {
           this.$refs.tree.updateAll(true)
         }
       },
       onlyActive(newValue) {
+        console.log('only Active')
         this.$refs.tree.updateAll(newValue)
       },
       '$route.query'() {
+        console.log('route.query')
         if (this.$route.query.folders) {
           this.openedItems = (this.$route.query.folders || '').split(',')
         } 
       },
+      openedItems() {
+        console.log('this.openedItems', this.openedItems)
+      },
     },
     mounted () {
+      console.log('mounted')
       const searchParams = new URLSearchParams(window.location.search)
       const folders = (searchParams.get('folders') || '').split(',')
-      this.openedItems = folders
+
+      setTimeout(() => {
+        this.openedItems = folders
+      }, '500')
+
+
+
     },
     methods: {
       ...mapActions('map', [ 'updateWmsLayerOpacity', 'updateZoomExtent' ]),
       handleOpenedFolders(newValue, oldValue) {
-        if (newValue.length === 0 && !oldValue) {
+        console.log('hanldeOpenedFolders newValue and OldValue', newValue, oldValue)
+        /*  if (newValue.length === 0 && !oldValue) {
           return 
-        }
+        } */
         const url = new URL(window.location.href)
         if (url.searchParams.get('folders') === newValue.join(',')) {
           return 
@@ -211,9 +227,11 @@
         }
       },
       expandAll() {
+        console.log('expand all')
         this.$refs.tree.updateAll(true)
       },
       collapseAll() {
+        console.log('collapseAll')
         this.$refs.tree.updateAll(false)
       },
       activeFilter(item, input, textKey) {

src/components/LayersDialog/LayersDialog.vue

@@ -72,6 +72,7 @@
         this.$emit('close')
       },
       showLayer(id) {
+        console.log('showLayer calls the loadLayerOnMap')
         this.resetLayers()
         const layer = this.flattenedLayers.find(({ id: layerId }) => id === layerId)
         this.loadLayerOnMap({ layers: [ layer ] })

src/store/modules/data/index.js

@@ -63,7 +63,6 @@ export default {
   actions: {
     async getAppData({ dispatch }, { route, locale }) {
       const viewer = route?.params?.config
-
       //Set viewer configuration
       const { mapCenter, mapZoom, defaultLayer, privacyStatement, userAgreement } = await getViewerConfiguration(viewer)
 
@@ -84,7 +83,6 @@ export default {
         initialLayerIds.push(defaultLayer.id)
         layersById = getLayersById(layers, initialLayerIds)
       }
-
       if (layersById.length) {
         dispatch('map/loadLayerOnMap', { layers: layersById }, { root: true })
       }

src/store/modules/map/index.js

@@ -169,7 +169,6 @@ export default {
       commit('SET_MAP_LOADED')
     },
     loadLayerOnMap({ commit, state }, { layers }) {
-
       const layersToAdd = difference(layers, state.activeFlattenedLayers)
 
       layersToAdd.forEach((layer) => {

src/views/DownloadGeoserver.vue

@@ -321,7 +321,6 @@
       },
 
       onAreaSelection(id) {
-        console.log('id',id)
         this.setDrawMode({ mode: null })
 
         if (id === NO_SELECTION_ID) {