From e0ba7f3e846c5566df9c6542e6eb47d1365614fe Mon Sep 17 00:00:00 2001
From: volterra79 <boccacci.francesco@gmail.com>
Date: Thu, 8 Feb 2024 16:03:15 +0100
Subject: [PATCH 01/17] add cache

---
 src/components/ChangeMapMenu.vue | 37 +++++++++++++++++++++++++-------
 1 file changed, 29 insertions(+), 8 deletions(-)

diff --git a/src/components/ChangeMapMenu.vue b/src/components/ChangeMapMenu.vue
index 5439ea8a3..0e4520dae 100644
--- a/src/components/ChangeMapMenu.vue
+++ b/src/components/ChangeMapMenu.vue
@@ -171,13 +171,17 @@ export default {
       this.loading = true;
       this.parent = item;
       try {
-        this.items = await XHR.get({
-          url: encodeURI(`/${ApplicationService.getApplicationUser().i18n}${API_BASE_URLS.ABOUT.group}${item.id}/`)
-        });
+          if (undefined  === this._cache.macrogroups[item.id]) {
+            this._cache.macrogroups[item.id] = await XHR.get({
+              url: encodeURI(`/${ApplicationService.getApplicationUser().i18n}${API_BASE_URLS.ABOUT.group}${item.id}/`)
+            });
+          }
+          this.items = this._cache.macrogroups[item.id];
         this.current = 'groups';
       } catch(err) {
         this.items = [];
       }
+
       this.steps.push(this.parent);
       this.loading = false;
     },
@@ -191,10 +195,13 @@ export default {
         this.current = 'projects';
       } else {
         try {
-          this.items = await XHR.get({
-            url: encodeURI(`/${ApplicationService.getApplicationUser().i18n}${API_BASE_URLS.ABOUT.projects.replace('__G3W_GROUP_ID__', item.id)}`)
-          });
-          this.items.forEach(item => this.setItemImageSrc({ item, type: 'project' }));
+          if (undefined  === this._cache.groups[item.id]) {
+            this._cache.groups[item.id] = await XHR.get({
+              url: encodeURI(`/${ApplicationService.getApplicationUser().i18n}${API_BASE_URLS.ABOUT.projects.replace('__G3W_GROUP_ID__', item.id)}`)
+            });
+            this._cache.groups[item.id].forEach(item => this.setItemImageSrc({ item, type: 'project' }));
+          }
+          this.items = this._cache.groups[item.id];
           this.current = 'projects';
         } catch(err) {
           this.items = [];
@@ -272,7 +279,18 @@ export default {
 
   },
 
-  created() {
+  async created() {
+    /**
+     * @since 3.10.0
+     * Store configuration of macrogroups and groups
+     * avoid wasting time-server request
+     * @type {{macrogroups: {}, groups: {}}}
+     * @private
+     */
+    this._cache = {
+      macrogroups : {},
+      groups      : {}
+    }
 
     // at start time set item projects
     this.items = ProjectsRegistry.getListableProjects();
@@ -307,6 +325,9 @@ export default {
     }
 
   },
+  beforeDestroy() {
+    this._cache = null;
+  }
 
 };
 </script>

From 962f82f61dc00c3e454ca8aa3d4625dbb47b7528 Mon Sep 17 00:00:00 2001
From: volterra79 <boccacci.francesco@gmail.com>
Date: Mon, 12 Feb 2024 17:07:26 +0100
Subject: [PATCH 02/17] Temp dev

---
 src/components/ChangeMapMenu.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/ChangeMapMenu.vue b/src/components/ChangeMapMenu.vue
index 0e4520dae..12cc4ada9 100644
--- a/src/components/ChangeMapMenu.vue
+++ b/src/components/ChangeMapMenu.vue
@@ -141,13 +141,18 @@ export default {
       else if (item.header_logo_img)       item.header_logo_img = g3w_logo;
     },
 
-    back() {
+    async back() {
       if (this.steps.length > 1) {
         const item = this.steps[0];
         this.steps = [];
         this.showGroups(item);
       } else {
-        this.showRoot();
+        if (this.init && undefined === this.parent.macro_id) {
+          await this.showGroups(this.macrogroups.find(mg => 1 === mg.id));
+          this.init = false;
+        } else {
+          this.showRoot();
+        }
       }
     },
 
@@ -280,6 +285,7 @@ export default {
   },
 
   async created() {
+    this.init = true;
     /**
      * @since 3.10.0
      * Store configuration of macrogroups and groups

From e5b89e72fa6b9337a14af6e03fccd729beadf24f Mon Sep 17 00:00:00 2001
From: volterra79 <boccacci.francesco@gmail.com>
Date: Mon, 19 Feb 2024 15:15:04 +0100
Subject: [PATCH 03/17] Check if current project (initiial) belong to a
 macrogroup/s checking initCongif.group.macrogroup_id attribute

---
 src/components/ChangeMapMenu.vue | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/ChangeMapMenu.vue b/src/components/ChangeMapMenu.vue
index 12cc4ada9..1bcf26697 100644
--- a/src/components/ChangeMapMenu.vue
+++ b/src/components/ChangeMapMenu.vue
@@ -147,8 +147,13 @@ export default {
         this.steps = [];
         this.showGroups(item);
       } else {
-        if (this.init && undefined === this.parent.macro_id) {
-          await this.showGroups(this.macrogroups.find(mg => 1 === mg.id));
+        if (
+          this.init
+          && Array.isArray(this.parent.macrogroup_id)
+          && this.parent.macrogroup_id.length > 0
+        ) {
+          //get first
+          await this.showGroups(this.macrogroups.find(mg => this.parent.macrogroup_id[0] === mg.id));
           this.init = false;
         } else {
           this.showRoot();

From 798d11b16ab413ccd4fca2f9d0d505d3d82a3e70 Mon Sep 17 00:00:00 2001
From: Raruto <Raruto@users.noreply.github.com>
Date: Tue, 20 Feb 2024 08:22:12 +0100
Subject: [PATCH 04/17] avoid nested conditions

---
 src/components/ChangeMapMenu.vue | 21 +++++++++------------
 1 file changed, 9 insertions(+), 12 deletions(-)

diff --git a/src/components/ChangeMapMenu.vue b/src/components/ChangeMapMenu.vue
index 1bcf26697..07bbdb479 100644
--- a/src/components/ChangeMapMenu.vue
+++ b/src/components/ChangeMapMenu.vue
@@ -142,22 +142,19 @@ export default {
     },
 
     async back() {
-      if (this.steps.length > 1) {
+      const has_steps = this.steps.length > 1;
+      const macro     = this.parent.macrogroup_id;
+      if (has_steps) {
         const item = this.steps[0];
         this.steps = [];
         this.showGroups(item);
+      }
+      if (!has_steps && this.init && Array.isArray(macro) && macro.length > 0) {
+        // get first
+        await this.showGroups(this.macrogroups.find(mg => macro[0] === mg.id));
+        this.init = false;
       } else {
-        if (
-          this.init
-          && Array.isArray(this.parent.macrogroup_id)
-          && this.parent.macrogroup_id.length > 0
-        ) {
-          //get first
-          await this.showGroups(this.macrogroups.find(mg => this.parent.macrogroup_id[0] === mg.id));
-          this.init = false;
-        } else {
-          this.showRoot();
-        }
+        this.showRoot();
       }
     },
 

From 48ef8bfe26096cf0c6205a8725a82e317260e644 Mon Sep 17 00:00:00 2001
From: Raruto <Raruto@users.noreply.github.com>
Date: Tue, 20 Feb 2024 09:39:47 +0100
Subject: [PATCH 05/17] replace `this._cache` with internal functions
 `get_macro(id)` + `get_group(id)`

---
 src/components/ChangeMapMenu.vue | 57 +++++++++++++-------------------
 1 file changed, 23 insertions(+), 34 deletions(-)

diff --git a/src/components/ChangeMapMenu.vue b/src/components/ChangeMapMenu.vue
index 07bbdb479..62ed92b74 100644
--- a/src/components/ChangeMapMenu.vue
+++ b/src/components/ChangeMapMenu.vue
@@ -73,6 +73,20 @@ import { API_BASE_URLS, LOGO_GIS3W } from "app/constant";
 const Projections = require('g3w-ol/projection/projections');
 const { XHR }     = require('utils');
 
+/** Cached HTTP GET request */
+async function get_macro(id) {
+  get_macro[id] = get_macro[id] || await XHR.get({ url: encodeURI(`/${ApplicationService.getApplicationUser().i18n}${API_BASE_URLS.ABOUT.group}${id}/`) });
+  return get_macro[id];
+}
+
+/** Cached HTTP GET request */
+async function get_group(id) {
+  const g = get_group[id] || await XHR.get({ url: encodeURI(`/${ApplicationService.getApplicationUser().i18n}${API_BASE_URLS.ABOUT.projects.replace('__G3W_GROUP_ID__', id)}`) });
+  if (!get_group[id]) g.forEach(cb);
+  else get_group[id] = g;
+  return g;
+}
+
 export default {
 
   /** @since 3.8.6 */
@@ -142,20 +156,20 @@ export default {
     },
 
     async back() {
-      const has_steps = this.steps.length > 1;
-      const macro     = this.parent.macrogroup_id;
-      if (has_steps) {
+      if (this.steps.length > 1) {
         const item = this.steps[0];
         this.steps = [];
         this.showGroups(item);
+        return;
       }
-      if (!has_steps && this.init && Array.isArray(macro) && macro.length > 0) {
-        // get first
+      const macro = this.parent && this.parent.macrogroup_id;
+      // go back to first MacroGroup when Group belongs to multiple MacroGroups
+      if (this.init && Array.isArray(macro) && macro.length > 0 ) {
         await this.showGroups(this.macrogroups.find(mg => macro[0] === mg.id));
         this.init = false;
-      } else {
-        this.showRoot();
+        return;
       }
+      this.showRoot();
     },
 
     showRoot() {
@@ -178,12 +192,7 @@ export default {
       this.loading = true;
       this.parent = item;
       try {
-          if (undefined  === this._cache.macrogroups[item.id]) {
-            this._cache.macrogroups[item.id] = await XHR.get({
-              url: encodeURI(`/${ApplicationService.getApplicationUser().i18n}${API_BASE_URLS.ABOUT.group}${item.id}/`)
-            });
-          }
-          this.items = this._cache.macrogroups[item.id];
+        this.items = await get_macro(item.id);
         this.current = 'groups';
       } catch(err) {
         this.items = [];
@@ -202,13 +211,7 @@ export default {
         this.current = 'projects';
       } else {
         try {
-          if (undefined  === this._cache.groups[item.id]) {
-            this._cache.groups[item.id] = await XHR.get({
-              url: encodeURI(`/${ApplicationService.getApplicationUser().i18n}${API_BASE_URLS.ABOUT.projects.replace('__G3W_GROUP_ID__', item.id)}`)
-            });
-            this._cache.groups[item.id].forEach(item => this.setItemImageSrc({ item, type: 'project' }));
-          }
-          this.items = this._cache.groups[item.id];
+          this.items = get_group(item.id, item => this.setItemImageSrc({ item, type: 'project' }));
           this.current = 'projects';
         } catch(err) {
           this.items = [];
@@ -288,17 +291,6 @@ export default {
 
   async created() {
     this.init = true;
-    /**
-     * @since 3.10.0
-     * Store configuration of macrogroups and groups
-     * avoid wasting time-server request
-     * @type {{macrogroups: {}, groups: {}}}
-     * @private
-     */
-    this._cache = {
-      macrogroups : {},
-      groups      : {}
-    }
 
     // at start time set item projects
     this.items = ProjectsRegistry.getListableProjects();
@@ -333,9 +325,6 @@ export default {
     }
 
   },
-  beforeDestroy() {
-    this._cache = null;
-  }
 
 };
 </script>

From c4d73ffc452befe2a3d72fcc777f4019706c60bc Mon Sep 17 00:00:00 2001
From: Raruto <Raruto@users.noreply.github.com>
Date: Tue, 20 Feb 2024 09:58:54 +0100
Subject: [PATCH 06/17] missing `cb`

---
 src/components/ChangeMapMenu.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ChangeMapMenu.vue b/src/components/ChangeMapMenu.vue
index 62ed92b74..aeab7b1b2 100644
--- a/src/components/ChangeMapMenu.vue
+++ b/src/components/ChangeMapMenu.vue
@@ -80,7 +80,7 @@ async function get_macro(id) {
 }
 
 /** Cached HTTP GET request */
-async function get_group(id) {
+async function get_group(id, cb) {
   const g = get_group[id] || await XHR.get({ url: encodeURI(`/${ApplicationService.getApplicationUser().i18n}${API_BASE_URLS.ABOUT.projects.replace('__G3W_GROUP_ID__', id)}`) });
   if (!get_group[id]) g.forEach(cb);
   else get_group[id] = g;

From 41172ffd5c097a6c2df3617fc14c06b664f3f8cf Mon Sep 17 00:00:00 2001
From: volterra79 <boccacci.francesco@gmail.com>
Date: Tue, 20 Feb 2024 10:18:07 +0100
Subject: [PATCH 07/17] Show macrogroups list if a project initial group belong
 to more than one macro groups

---
 src/components/ChangeMapMenu.vue | 77 ++++++++++++++++++++++----------
 1 file changed, 53 insertions(+), 24 deletions(-)

diff --git a/src/components/ChangeMapMenu.vue b/src/components/ChangeMapMenu.vue
index 62ed92b74..1b5f4975b 100644
--- a/src/components/ChangeMapMenu.vue
+++ b/src/components/ChangeMapMenu.vue
@@ -6,7 +6,13 @@
 <template>
   <div id="g3w-change-map-menu">
     <template v-if="isChildNode">
-      <div style="display: flex; align-items: center; color: #ffffff" class="skin-background-color">
+      <div
+        style="
+          display: flex;
+          align-items: center;
+          color: #ffffff"
+        class="skin-background-color"
+      >
         <span
           v-t-tooltip:bottom.create="'change_session'"
           v-disabled="loading"
@@ -20,24 +26,37 @@
             border-radius: 3px;
           "
         >
-          <i style="color: #FFFFFF" :class="g3wtemplate.getFontClass('reply')"></i>
+          <i
+            style="color: #FFFFFF"
+            :class="g3wtemplate.getFontClass('reply')">
+          </i>
         </span>
 
-        <div v-if="parent" style="margin: auto">
-          <h3 style="font-weight: bold">{{parent.title || parent.name}}</h3>
+        <div
+          v-if="parent"
+          style="margin: auto"
+        >
+          <h3 style="font-weight: bold">
+            {{parent.title || parent.name}}
+          </h3>
         </div>
       </div>
     </template>
 
-    <div v-if="items.length" class="g3w-change-map-menu-container">
+    <div
+      v-if="items.length"
+      class="g3w-change-map-menu-container">
       <div
         v-for="item in items"
-        :key="item.title"
+        :key="item.name"
         class="menu-item"
       >
 
       <!-- ITEM IMAGE -->
-        <div class="menu-item-image" @click.stop="trigger(item)">
+        <div
+          class="menu-item-image"
+          @click.stop="trigger(item)"
+        >
           <img
             :src="item.thumbnail || item.header_logo_img || item.logo_img"
             @error="setFallBackImage(item)"
@@ -49,7 +68,9 @@
         <!-- ITEM CONTENT -->
         <div class="menu-item-content">
           <div class="menu-item-text">
-            <h4 class="menu-item-title">{{ item.title }}</h4>
+            <h4 class="menu-item-title">
+              {{ item.title }}
+            </h4>
             <div v-html="item.description"></div>
           </div>
         </div>
@@ -58,7 +79,10 @@
     </div>
 
     <template v-else>
-      <h3 style="font-weight: bold" v-t="`no_other_${current}`"></h3>
+      <h3
+        style="font-weight: bold"
+        v-t="`no_other_${current}`">
+      </h3>
     </template>
 
   </div>
@@ -81,10 +105,8 @@ async function get_macro(id) {
 
 /** Cached HTTP GET request */
 async function get_group(id) {
-  const g = get_group[id] || await XHR.get({ url: encodeURI(`/${ApplicationService.getApplicationUser().i18n}${API_BASE_URLS.ABOUT.projects.replace('__G3W_GROUP_ID__', id)}`) });
-  if (!get_group[id]) g.forEach(cb);
-  else get_group[id] = g;
-  return g;
+  get_group[id] = get_group[id] || await XHR.get({ url: encodeURI(`/${ApplicationService.getApplicationUser().i18n}${API_BASE_URLS.ABOUT.projects.replace('__G3W_GROUP_ID__', id)}`) });
+  return get_group[id];
 }
 
 export default {
@@ -151,8 +173,11 @@ export default {
      */
      setFallBackImage(item) {
       const g3w_logo = `${ApplicationService.getConfig().urls.clienturl}${LOGO_GIS3W}`;
-      if (item.thumbnail || item.logo_img) item.thumbnail       = g3w_logo;
-      else if (item.header_logo_img)       item.header_logo_img = g3w_logo;
+      if (item.thumbnail || item.logo_img) {
+        item.thumbnail = g3w_logo;
+      } else if (item.header_logo_img) {
+        item.header_logo_img = g3w_logo;
+      }
     },
 
     async back() {
@@ -164,9 +189,14 @@ export default {
       }
       const macro = this.parent && this.parent.macrogroup_id;
       // go back to first MacroGroup when Group belongs to multiple MacroGroups
-      if (this.init && Array.isArray(macro) && macro.length > 0 ) {
-        await this.showGroups(this.macrogroups.find(mg => macro[0] === mg.id));
-        this.init = false;
+      if (Array.isArray(macro) && macro.length > 0 ) {
+        if (1 === macro.length) {
+          await this.showGroups(this.macrogroups.find(mg => macro[0] === mg.id));
+        } else {
+          this.current = 'macrogroups';
+          this.items = this.macrogroups.filter(m => this.parent.macrogroup_id.includes(m.id));
+          this.parent = {}; //set empty parent object (need to show title ??)
+        }
         return;
       }
       this.showRoot();
@@ -211,7 +241,7 @@ export default {
         this.current = 'projects';
       } else {
         try {
-          this.items = get_group(item.id, item => this.setItemImageSrc({ item, type: 'project' }));
+          this.items = await get_group(item.id, item => this.setItemImageSrc({ item, type: 'project' }));
           this.current = 'projects';
         } catch(err) {
           this.items = [];
@@ -242,10 +272,10 @@ export default {
 
     async trigger(item) {
       switch(this.current) {
-        case 'root':       return this._onChangeRoot(item);
-        case 'macrogroup': return this.showGroups(item);
-        case 'groups':     return await this.showProjects(item);
-        case 'projects':   return await this.changeMapProject(item);
+        case 'root':        return this._onChangeRoot(item);
+        case 'macrogroups': return this.showGroups(item);
+        case 'groups':      return await this.showProjects(item);
+        case 'projects':    return await this.changeMapProject(item);
       }
     },
 
@@ -290,7 +320,6 @@ export default {
   },
 
   async created() {
-    this.init = true;
 
     // at start time set item projects
     this.items = ProjectsRegistry.getListableProjects();

From 7f5d3e8806e8c1f3a335d036faa10524939b459a Mon Sep 17 00:00:00 2001
From: volterra79 <boccacci.francesco@gmail.com>
Date: Thu, 22 Feb 2024 15:00:35 +0100
Subject: [PATCH 08/17] Show macrogroups list if a project initial group belong
 to more than one macro groups: Improving

---
 src/components/ChangeMapMenu.vue | 74 ++++++++++++++++++++++++--------
 1 file changed, 56 insertions(+), 18 deletions(-)

diff --git a/src/components/ChangeMapMenu.vue b/src/components/ChangeMapMenu.vue
index 1b5f4975b..10cb85915 100644
--- a/src/components/ChangeMapMenu.vue
+++ b/src/components/ChangeMapMenu.vue
@@ -145,7 +145,7 @@ export default {
       /**
        * @type {Array}
        */
-      steps: [],
+      steps: [], //Contain all items from top to bottom
 
       /**
        * @type {string}
@@ -179,29 +179,61 @@ export default {
         item.header_logo_img = g3w_logo;
       }
     },
+    /**
+     *
+     * @return {void}
+     */
+    back() {
+      if (this.steps.length > 0) {
+        this.steps.pop(); //remove last
+        if (0 === this.steps.length) {
+         this.showRoot();
+         return;
+        }
+        const item = this.steps[this.steps.length - 1];
 
-    async back() {
-      if (this.steps.length > 1) {
-        const item = this.steps[0];
-        this.steps = [];
-        this.showGroups(item);
-        return;
-      }
-      const macro = this.parent && this.parent.macrogroup_id;
-      // go back to first MacroGroup when Group belongs to multiple MacroGroups
-      if (Array.isArray(macro) && macro.length > 0 ) {
-        if (1 === macro.length) {
-          await this.showGroups(this.macrogroups.find(mg => macro[0] === mg.id));
+        if (undefined === item.macrogroup_id) {
+          this.showGroups(item);
+          return;
         } else {
-          this.current = 'macrogroups';
-          this.items = this.macrogroups.filter(m => this.parent.macrogroup_id.includes(m.id));
-          this.parent = {}; //set empty parent object (need to show title ??)
+          this.showMacroGroups(item.macrogroup_id);
+          return;
         }
-        return;
       }
+      //no steps done -> First time of only back
+      if (0 === this.steps.length) {
+        //check if parent is parent (group) belong to macrogroups
+        if (Array.isArray(this.parent.macrogroup_id) && this.parent.macrogroup_id.length > 0) {
+          this.showMacroGroups(this.parent.macrogroup_id);
+          return;
+        }
+      }
+      //if group of project doesn't belong to macrogroup, go to root
       this.showRoot();
     },
 
+    /**
+     * @since 3.10.0
+      * @param macrogroup_id
+     * @return {Promise<void>}
+     */
+    async showMacroGroups(macrogroup_id=[]) {
+      //Belong just one macrogroup
+      if (1 === macrogroup_id.length) {
+        const macrogroup = this.macrogroups.find(mg => macrogroup_id[0] === mg.id);
+        this.parent = macrogroup;
+        await this.showGroups(macrogroup);
+      } else { //belong to more than one macrogroups
+        this.items = this.macrogroups.filter(m => macrogroup_id.includes(m.id));
+        this.current = 'macrogroups';
+        this.parent = {
+          ...this.parent,
+          title: null,
+          name: null
+        }
+      }
+    },
+
     showRoot() {
       this.current = 'root';
       this.items = this.macrogroupsandgroups;
@@ -220,7 +252,12 @@ export default {
 
     async showGroups(item) {
       this.loading = true;
-      this.parent = item;
+      const from_macros = 'macrogroups' === this.current;
+      if (!from_macros) {
+        this.parent = item;
+      } else {
+        console.log(this.parent)
+      }
       try {
         this.items = await get_macro(item.id);
         this.current = 'groups';
@@ -229,6 +266,7 @@ export default {
       }
 
       this.steps.push(this.parent);
+
       this.loading = false;
     },
 

From 0da32f7a7b484da652cdc34e6618e5c85935cc86 Mon Sep 17 00:00:00 2001
From: volterra79 <boccacci.francesco@gmail.com>
Date: Fri, 23 Feb 2024 09:36:35 +0100
Subject: [PATCH 09/17] Show macrogroups if init project belong to a group
 inside more than one macrogroups

---
 src/components/ChangeMapMenu.vue | 115 ++++++++++++++++---------------
 1 file changed, 61 insertions(+), 54 deletions(-)

diff --git a/src/components/ChangeMapMenu.vue b/src/components/ChangeMapMenu.vue
index 10cb85915..986a709d5 100644
--- a/src/components/ChangeMapMenu.vue
+++ b/src/components/ChangeMapMenu.vue
@@ -184,40 +184,38 @@ export default {
      * @return {void}
      */
     back() {
-      if (this.steps.length > 0) {
-        this.steps.pop(); //remove last
-        if (0 === this.steps.length) {
-         this.showRoot();
-         return;
+      const isThereStep = this.steps.pop(); //remove last
+      //no steps done -> First time of only back
+      if (0 === this.steps.length) {
+        //check if parent is parent (group) belong to macrogroups
+        if (undefined === isThereStep && Array.isArray(this.parent.macrogroup_id) && this.parent.macrogroup_id.length > 0) {
+          this.showMacroGroups(this.parent.macrogroup_id, true);
+        } else {
+          this.showRoot();
         }
+      } else {
+        //get last step
         const item = this.steps[this.steps.length - 1];
-
+        //set false to add step because it is comping from bottom to top
+        const addStep = false;
         if (undefined === item.macrogroup_id) {
-          this.showGroups(item);
-          return;
+          this.showGroups(item, addStep);
         } else {
-          this.showMacroGroups(item.macrogroup_id);
-          return;
-        }
-      }
-      //no steps done -> First time of only back
-      if (0 === this.steps.length) {
-        //check if parent is parent (group) belong to macrogroups
-        if (Array.isArray(this.parent.macrogroup_id) && this.parent.macrogroup_id.length > 0) {
-          this.showMacroGroups(this.parent.macrogroup_id);
-          return;
+          //set false to add step because it is comping from bottom to top
+          this.showMacroGroups(item.macrogroup_id, addStep);
         }
+
       }
-      //if group of project doesn't belong to macrogroup, go to root
-      this.showRoot();
+
     },
 
-    /**
-     * @since 3.10.0
-      * @param macrogroup_id
-     * @return {Promise<void>}
-     */
-    async showMacroGroups(macrogroup_id=[]) {
+      /**
+       * @since 3.10.0
+       * @param macrogroup_id
+       * @param addStep Boolean
+       * @return {Promise<void>}
+       */
+    async showMacroGroups(macrogroup_id=[], addStep=true) {
       //Belong just one macrogroup
       if (1 === macrogroup_id.length) {
         const macrogroup = this.macrogroups.find(mg => macrogroup_id[0] === mg.id);
@@ -227,49 +225,42 @@ export default {
         this.items = this.macrogroups.filter(m => macrogroup_id.includes(m.id));
         this.current = 'macrogroups';
         this.parent = {
-          ...this.parent,
-          title: null,
-          name: null
+          macrogroup_id,
+          title: null, // need to set empty (no title)
+          name: null // need to be set empty
+        }
+        if (addStep) {
+          this.steps.push(this.parent);
         }
-      }
-    },
-
-    showRoot() {
-      this.current = 'root';
-      this.items = this.macrogroupsandgroups;
-      this.steps = [];
-    },
 
-    _onChangeRoot(item) {
-      // item is a macrogroup
-      if (undefined === item.srid) {
-        this.showGroups(item)
-      } else {
-        // item is a group
-        this.showProjects(item);
       }
     },
 
-    async showGroups(item) {
+    /**
+     *
+      * @param item
+     * @return {Promise<void>}
+     */
+    async showGroups(item, addStep=true) {
       this.loading = true;
-      const from_macros = 'macrogroups' === this.current;
-      if (!from_macros) {
-        this.parent = item;
-      } else {
-        console.log(this.parent)
-      }
+      this.parent = item;
       try {
         this.items = await get_macro(item.id);
         this.current = 'groups';
       } catch(err) {
         this.items = [];
       }
-
-      this.steps.push(this.parent);
-
+      if (addStep) {
+        this.steps.push(this.parent);
+      }
       this.loading = false;
     },
 
+    /**
+     *
+      * @param item
+     * @return {Promise<void>}
+     */
     async showProjects(item) {
       this.loading = true;
       this.parent = item;
@@ -290,6 +281,22 @@ export default {
       this.loading = false;
     },
 
+    showRoot() {
+      this.current = 'root';
+      this.items = this.macrogroupsandgroups;
+      this.steps = [];
+    },
+
+    _onChangeRoot(item) {
+      // item is a macrogroup
+      if (undefined === item.srid) {
+        this.showGroups(item)
+      } else {
+        // item is a group
+        this.showProjects(item);
+      }
+    },
+
     /**
      * @param {string} item.url
      * @param {string} item.map_url

From 540c938fb483db5fcfebe023aabfbc188d77d71f Mon Sep 17 00:00:00 2001
From: volterra79 <boccacci.francesco@gmail.com>
Date: Fri, 23 Feb 2024 15:10:23 +0100
Subject: [PATCH 10/17] remove padding

---
 src/components/ChangeMapMenu.vue | 655 +++++++++++--------------------
 1 file changed, 227 insertions(+), 428 deletions(-)

diff --git a/src/components/ChangeMapMenu.vue b/src/components/ChangeMapMenu.vue
index 986a709d5..f4140db59 100644
--- a/src/components/ChangeMapMenu.vue
+++ b/src/components/ChangeMapMenu.vue
@@ -1,460 +1,259 @@
 <!--
   @file
-  @since 3.8.0
+  @since v3.7
 -->
 
 <template>
-  <div id="g3w-change-map-menu">
-    <template v-if="isChildNode">
-      <div
-        style="
-          display: flex;
-          align-items: center;
-          color: #ffffff"
-        class="skin-background-color"
+  <ul class="sidebar-menu">
+    <li
+      id="g3w-catalog-toc-views"
+      class="treeview sidebaritem skin-border-color"
+      style="margin-bottom: 5px; border-bottom: 2px solid"
+    >
+      <a
+        href="#"
+        ref="g3w-map-theme-ancor"
+        style="padding: 0; margin-bottom: 5px;"
       >
-        <span
-          v-t-tooltip:bottom.create="'change_session'"
-          v-disabled="loading"
-          @click.stop="back"
-          style="
-            font-size: 2em;
-            margin: 5px;
-            cursor: pointer;
-            padding: 3px;
-            border: 2px solid #ffffff;
-            border-radius: 3px;
-          "
-        >
+        <section style="display: flex;  flex-wrap: wrap; align-items: center; padding: 5px;">
           <i
-            style="color: #FFFFFF"
-            :class="g3wtemplate.getFontClass('reply')">
+            style="padding: 3px;"
+            :class="g3wtemplate.getFontClass('caret-down')">
           </i>
-        </span>
-
-        <div
-          v-if="parent"
-          style="margin: auto"
-        >
-          <h3 style="font-weight: bold">
-            {{parent.title || parent.name}}
-          </h3>
-        </div>
-      </div>
-    </template>
-
-    <div
-      v-if="items.length"
-      class="g3w-change-map-menu-container">
-      <div
-        v-for="item in items"
-        :key="item.name"
-        class="menu-item"
-      >
-
-      <!-- ITEM IMAGE -->
-        <div
-          class="menu-item-image"
-          @click.stop="trigger(item)"
+          <i
+            style="padding: 0 0 0 4px;"
+            :class="g3wtemplate.getFontClass('eye')">
+          </i>
+          <!-- Text of current theme -->
+          <span
+            v-if="current_map_theme"
+            class="treeview-label g3w-long-text"
+            style="overflow: hidden; white-space: normal;text-overflow: ellipsis;"
+          >
+            <span
+              style="color: #cccccc !important;"
+              v-t:pre="'sdk.catalog.current_map_theme_prefix'"
+            >:</span>
+            <span
+              class="skin-color"
+              style="font-size: 1.1em;">
+                {{ current_map_theme }}
+            </span>
+          </span>
+          <span
+            v-else
+            class="treeview-label"
+            style="color: #cccccc !important; font-weight: bold"
+          >
+            <span v-t="'sdk.catalog.choose_map_theme'"></span>
+          </span>
+        </section>
+      </a>
+      <!-- ADD NEW BOOKMARK (FORM) -->
+      <template v-if="showSaveMapThemeForm">
+
+        <li
+          style="border-top: 2px solid; margin: 5px 0"
+          class="skin-border-color"
         >
-          <img
-            :src="item.thumbnail || item.header_logo_img || item.logo_img"
-            @error="setFallBackImage(item)"
-            alt="logo"
-            class="img-responsive"
+          <div style="display: flex; justify-content: end; padding-top: 5px;">
+            <span
+              v-t-tooltip:left.create="'close'"
+              @click.stop="showSaveMapThemeForm = false"
+              :class="g3wtemplate.getFontClass('close')"
+              class="sidebar-button sidebar-button-icon"
+              style="padding: 5px; margin: 3px; cursor: pointer;"
+            ></span>
+          </div>
+          <div
+            class="container add-map-theme-input"
+            style="padding: 5px; width: 100%"
           >
-        </div>
-
-        <!-- ITEM CONTENT -->
-        <div class="menu-item-content">
-          <div class="menu-item-text">
-            <h4 class="menu-item-title">
-              {{ item.title }}
-            </h4>
-            <div v-html="item.description"></div>
+            <input-text
+              ref="add_map_theme_input"
+              :state="adduserthemeinput" />
           </div>
-        </div>
-
-      </div>
-    </div>
-
-    <template v-else>
-      <h3
-        style="font-weight: bold"
-        v-t="`no_other_${current}`">
-      </h3>
-    </template>
-
-  </div>
-
+          <div style="margin-top: 5px;">
+            <button
+              class="sidebar-button-run btn btn-block"
+              v-t="'add'"
+              @click.stop="save"
+              v-disabled="!canSave">
+            </button>
+          </div>
+        </li>
+      </template>
+      <template v-else>
+        <ul
+          id="g3w-catalog-views"
+          class="treeview-menu"
+          :class="{'menu-open': !collapsed}"
+          :style="{display: collapsed ? 'none' : 'block'}"
+        >
+          <li id="g3w-catalog-views-project">
+            <ul style="padding: 0">
+              <li>
+                <div style="font-weight: bold; padding: 5px 3px">Temi progetto</div>
+                <divider/>
+              </li>
+              <li style="padding: 5px 5px 5px 17px;">
+                <div
+                  v-for="(map_theme, index) in map_themes"
+                  :key="map_theme.theme"
+                >
+                  <input
+                    type="radio"
+                    name="radio"
+                    :id="`g3w-map_theme-${index}`"
+                    :value="map_theme.theme"
+                    v-model="current_map_theme"
+                    class="magic-radio"
+                    :checked="map_theme.default">
+                  <label
+                    :for="`g3w-map_theme-${index}`"
+                    style="display: flex; justify-content: space-between;"
+                  >
+                    <span class="g3w-long-text">{{ map_theme.theme }}</span>
+                  </label>
+                </div>
+              </li>
+            </ul>
+          </li>
+          <li id="g3w-catalog-views-user">
+            <ul style="padding: 0">
+              <li>
+                <div style="font-weight: bold; padding: 5px 3px; display: flex; justify-content: space-between">
+                  <span>Temi uente</span>
+                  <!-- Add theme button -->
+                  <span
+                    @click.stop="showSaveMapThemeForm = !showSaveMapThemeForm"
+                    :class="g3wtemplate.getFontClass('plus')"
+                    class="action sidebar-button sidebar-button-icon"
+                    style="margin-left: auto; padding: 5px; cursor:pointer;"
+                  >
+                  </span>
+                </div>
+                <divider/>
+              </li>
+              <li style="padding: 5px 5px 5px 17px">
+                <div
+                  v-for="(map_theme, index) in map_themes"
+                  :key="map_theme.theme"
+                >
+                  <input
+                    type="radio"
+                    name="radio"
+                    :id="`g3w-map_theme-${index}-user`"
+                    :value="map_theme.theme"
+                    v-model="current_map_theme"
+                    class="magic-radio"
+                    :checked="map_theme.default">
+                  <label
+                    :for="`g3w-map_theme-${index}-user`"
+                    style="display: flex; justify-content: space-between;"
+                  >
+                    <span class="g3w-long-text">{{ map_theme.theme }}</span>
+                  </label>
+                </div>
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </template>
+
+    </li>
+  </ul>
 </template>
 
 <script>
-import ApplicationService            from "services/application";
-import ProjectsRegistry              from "store/projects";
-import { API_BASE_URLS, LOGO_GIS3W } from "app/constant";
-
-const Projections = require('g3w-ol/projection/projections');
-const { XHR }     = require('utils');
-
-/** Cached HTTP GET request */
-async function get_macro(id) {
-  get_macro[id] = get_macro[id] || await XHR.get({ url: encodeURI(`/${ApplicationService.getApplicationUser().i18n}${API_BASE_URLS.ABOUT.group}${id}/`) });
-  return get_macro[id];
-}
-
-/** Cached HTTP GET request */
-async function get_group(id) {
-  get_group[id] = get_group[id] || await XHR.get({ url: encodeURI(`/${ApplicationService.getApplicationUser().i18n}${API_BASE_URLS.ABOUT.projects.replace('__G3W_GROUP_ID__', id)}`) });
-  return get_group[id];
+import ProjectsRegistry from 'store/projects';
+import InputText        from "./InputText.vue";
+
+/**
+ * Attributes to send to server of layerstrees object
+ *
+ * node (single layer): keys [id, name, showfeaturecount, visible]
+ * group (Group) : keys [checked, expanded, mutually-exclusive, name, nodes]
+ */
+const LAYERSTREES_KEYS = {
+  node:  ['id', 'name', 'showfeaturecount', 'visible'],
+  group: ['name', 'checked', 'expanded', 'mutually-exclusive', 'nodes']
 }
 
 export default {
-
-  /** @since 3.8.6 */
-  name: 'change-map-menu',
-
+  name: "changemapthemes",
+  components: {
+    InputText
+  },
+  props: {
+    map_themes: {
+      type: Array,
+      default: []
+    },
+    layerstrees: {
+      type: Array,
+    }
+  },
   data() {
+    const current_map_theme = this.map_themes.find(map_theme => map_theme.default);
     return {
-      
-      /**
-       * @type {uknown}
-       */
-      state: null,
-
-      /**
-       * @type {boolean}
-       */
-      loading: false,
-
-      /**
-       * @type { 'projects' | 'groups' | 'root' }
-       */
-      current: 'projects', 
-
-      /**
-       * @type {Array}
-       */
-      items: [],
-
-      /**
-       * @type {uknown}
-       */
-      parent: null,
-
-      /**
-       * @type {Array}
-       */
-      steps: [], //Contain all items from top to bottom
-
-      /**
-       * @type {string}
-       */
-      currentProjectGroupId: null,
- 
+      showSaveMapThemeForm : false,  /**@since 3.10.0 **/
+      current_map_theme    : current_map_theme ? current_map_theme.theme : null,
+      collapsed            : 'collapsed' === ProjectsRegistry.getCurrentProject().state.toc_themes_init_status,
+      canSave              :  false, /** @since 3.10.0 */
+      themeName            :  null, /** @since 3.10.0 */
+      adduserthemeinput: {
+        name: 'add-user-theme',
+        label: 'sdk.catalog.choose_map_theme_input_label',
+        i18nLabel: true,
+        value: null,
+        editable: true,
+        type: 'varchar',
+        input: {
+          type: 'text',
+          options: {}
+        },
+        visible: true,
+        info: 'Pippo',
+        validate: {
+          valid: false,
+          required: true
+        }
+      }
     }
   },
-
-  computed: {
-
+  methods: {
     /**
-     * @returns {boolean} whether current node isn't a "root" element
+     * Save current theme (layerstree state)
+     * @since 3.10.0
      */
-    isChildNode() {
-      return 'root' !== this.current;
-    },
+    save() {
 
+      console.log(this.layerstrees[0].tree)
+      //@TODO
+      this.$emit('save-map-theme');
+    }
   },
-
-  methods: {
-
-    /**
-     * Set a fallback image on network error.
-     */
-     setFallBackImage(item) {
-      const g3w_logo = `${ApplicationService.getConfig().urls.clienturl}${LOGO_GIS3W}`;
-      if (item.thumbnail || item.logo_img) {
-        item.thumbnail = g3w_logo;
-      } else if (item.header_logo_img) {
-        item.header_logo_img = g3w_logo;
+  watch: {
+    'current_map_theme': {
+      immediate: false,
+      handler(map_theme) {
+        this.$emit('change-map-theme', map_theme);
       }
     },
-    /**
-     *
-     * @return {void}
-     */
-    back() {
-      const isThereStep = this.steps.pop(); //remove last
-      //no steps done -> First time of only back
-      if (0 === this.steps.length) {
-        //check if parent is parent (group) belong to macrogroups
-        if (undefined === isThereStep && Array.isArray(this.parent.macrogroup_id) && this.parent.macrogroup_id.length > 0) {
-          this.showMacroGroups(this.parent.macrogroup_id, true);
-        } else {
-          this.showRoot();
-        }
-      } else {
-        //get last step
-        const item = this.steps[this.steps.length - 1];
-        //set false to add step because it is comping from bottom to top
-        const addStep = false;
-        if (undefined === item.macrogroup_id) {
-          this.showGroups(item, addStep);
-        } else {
-          //set false to add step because it is comping from bottom to top
-          this.showMacroGroups(item.macrogroup_id, addStep);
-        }
-
-      }
-
+    'themeName'(name) {
+      this.canSave = name ? name.trim() : false;
     },
-
-      /**
-       * @since 3.10.0
-       * @param macrogroup_id
-       * @param addStep Boolean
-       * @return {Promise<void>}
-       */
-    async showMacroGroups(macrogroup_id=[], addStep=true) {
-      //Belong just one macrogroup
-      if (1 === macrogroup_id.length) {
-        const macrogroup = this.macrogroups.find(mg => macrogroup_id[0] === mg.id);
-        this.parent = macrogroup;
-        await this.showGroups(macrogroup);
-      } else { //belong to more than one macrogroups
-        this.items = this.macrogroups.filter(m => macrogroup_id.includes(m.id));
-        this.current = 'macrogroups';
-        this.parent = {
-          macrogroup_id,
-          title: null, // need to set empty (no title)
-          name: null // need to be set empty
-        }
-        if (addStep) {
-          this.steps.push(this.parent);
+    async showSaveMapThemeForm(bool) {
+      this.themeName = null;
+      if (bool) {
+        await this.$nextTick();
+        //need to remove all class so input is adapted to 100% width
+        for (let i = 0; i < this.$refs.add_map_theme_input.$el.children.length; i++) {
+          this.$refs.add_map_theme_input.$el.children[i].classList.remove('col-sm-12')
         }
-
-      }
-    },
-
-    /**
-     *
-      * @param item
-     * @return {Promise<void>}
-     */
-    async showGroups(item, addStep=true) {
-      this.loading = true;
-      this.parent = item;
-      try {
-        this.items = await get_macro(item.id);
-        this.current = 'groups';
-      } catch(err) {
-        this.items = [];
-      }
-      if (addStep) {
-        this.steps.push(this.parent);
-      }
-      this.loading = false;
-    },
-
-    /**
-     *
-      * @param item
-     * @return {Promise<void>}
-     */
-    async showProjects(item) {
-      this.loading = true;
-      this.parent = item;
-
-      if (this.parent.id === this.currentProjectGroupId) {
-        this.items = ProjectsRegistry.getListableProjects();
-        this.current = 'projects';
-      } else {
-        try {
-          this.items = await get_group(item.id, item => this.setItemImageSrc({ item, type: 'project' }));
-          this.current = 'projects';
-        } catch(err) {
-          this.items = [];
-        }
-      }
-
-      this.steps.push(this.parent);
-      this.loading = false;
-    },
-
-    showRoot() {
-      this.current = 'root';
-      this.items = this.macrogroupsandgroups;
-      this.steps = [];
-    },
-
-    _onChangeRoot(item) {
-      // item is a macrogroup
-      if (undefined === item.srid) {
-        this.showGroups(item)
-      } else {
-        // item is a group
-        this.showProjects(item);
-      }
-    },
-
-    /**
-     * @param {string} item.url
-     * @param {string} item.map_url
-     */
-    async changeMapProject(item) {
-      let url;
-      const base_url = ProjectsRegistry.getBaseUrl();
-      const epsg = this.parent.srid ? `EPSG:${this.parent.srid}` : this.parent.crs.epsg;
-      await Projections.registerProjection(epsg);
-      try {
-        new URL(base_url);
-        url = `${base_url}${item.url || item.map_url.replace(/^\//, "")}`;
-      } catch(err) {
-        url = `${location.origin}${base_url}${item.url || item.map_url.replace(/^\//, "")}`;
-      }
-      return ApplicationService.changeMapProject({ url, epsg });
-    },
-
-    async trigger(item) {
-      switch(this.current) {
-        case 'root':        return this._onChangeRoot(item);
-        case 'macrogroups': return this.showGroups(item);
-        case 'groups':      return await this.showProjects(item);
-        case 'projects':    return await this.changeMapProject(item);
-      }
-    },
-
-    /**
-     * Set scr image of project, group, macrogroup
-     * 
-     * @param { 'project' | 'group' | 'macrogroup' } image.type
-     * @param                                        image.item
-      */
-    setItemImageSrc({ item, type } = {}) {
-      switch(type) {
-        case 'project':    item.thumbnail       = this._setSrc(item.thumbnail); break;
-        case 'group':      item.header_logo_img = this._setSrc(item.header_logo_img); break;
-        case 'macrogroup': item.logo_img        = this._setSrc(item.logo_img); break;
-      }
-    },
-
-    /**
-     * @TODO extract as utility function (almost the same as `components/ProjectsMenu::logoSrc(src)`) 
-     */
-    _setSrc(src) {
-      let imageSrc;
-      const host       = this.$options.host || '';
-      const mediaurl   = ProjectsRegistry.config.mediaurl;
-      const clienturl  = ApplicationService.getConfig().urls.clienturl;
-      const has_media  = src && (-1 !== src.indexOf(mediaurl));
-      const not_static = src && (-1 === src.indexOf('static') && -1 === src.indexOf('media'));
-
-      if (!src) {
-        imageSrc = `${clienturl}${LOGO_GIS3W}`;
-      } else if (has_media) {
-        imageSrc = src;
-      } else if (not_static) {  
-        imageSrc = `${mediaurl}${src}`;
-      } else {
-        imageSrc = `${clienturl}${LOGO_GIS3W}`;
-      }
-
-      return `${host}${imageSrc}`;
-    },
-
-  },
-
-  async created() {
-
-    // at start time set item projects
-    this.items = ProjectsRegistry.getListableProjects();
-    this.items.forEach(item => this.setItemImageSrc({ item, type: 'project' }));
-    this.parent = ProjectsRegistry.getCurrentProjectGroup();
-    this.currentProjectGroupId = this.parent.id;
-
-    // get macrogroups
-    this.macrogroups = ApplicationService.getConfig().macrogroups;
-    this.macrogroups.forEach(item => this.setItemImageSrc({ item, type: 'magrocroup' }));
-    
-    // get groups
-    this.groups = ApplicationService.getConfig().groups;
-    this.groups.forEach(item => this.setItemImageSrc({ item, type: 'group' }));
-
-    // collect all groups and macrogroups
-    this.macrogroupsandgroups = [...this.macrogroups, ...this.groups];
-
-    // check if group on initConfig is referred to macrogrop
-    const isMacroGroup = this.macrogroups.find(macrogroup => macrogroup.id === this.parent.id);
-    if (isMacroGroup) {
-      // check belong group
-      const findGroup = this.groups.find(group => group.id === this.parent.id);
-      if (findGroup) {
-        this.parent = findGroup;
-        this.currentProjectGroupId = this.parent.id;
       }
     }
-  
-    if (0 === this.items.length) {
-      this.showRoot();
-    }
-
-  },
-
-};
-</script>
-
-<style scoped>
-  #g3w-change-map-menu {
-    width: 100%;
-    position: relative;
-  }
-  .g3w-change-map-menu-container {
-    height: 100%;
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
-    grid-gap: 1em;
-    overflow-y: auto;
-
-  }
-  .menu-item {
-    margin-bottom: 20px;
-    margin-top:20px;
-  }
-
-  .menu-item-image {
-    cursor: pointer;
-    position: relative;
-    overflow: hidden;
-    padding-bottom: 50%;
-    opacity: 0.7;
-  }
-
-  .menu-item-image:hover {
-    opacity: 1;
   }
-
-  .menu-item-image img {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    margin: auto
-  }
-  .menu-item-content {
-    padding: 15px;
-    background: rgba(255,255,255,0.3);
-  }
-  .menu-item-text {
-    position: relative;
-    overflow: hidden;
-    height: 100%;
-    text-align: justify;
-  }
-  .menu-item-title {
-    text-align: center;
-    font-weight: bold;
-    background: rgba(255,255,255,0.5);
-    padding: 5px;
-  }
-</style>
\ No newline at end of file
+}
+</script>

From 4846b5ef544606e5ae3141604aec359ffd8362ab Mon Sep 17 00:00:00 2001
From: volterra79 <boccacci.francesco@gmail.com>
Date: Mon, 26 Feb 2024 09:01:25 +0100
Subject: [PATCH 11/17] Revert "remove padding"

This reverts commit 540c938fb483db5fcfebe023aabfbc188d77d71f.
---
 src/components/ChangeMapMenu.vue | 655 ++++++++++++++++++++-----------
 1 file changed, 428 insertions(+), 227 deletions(-)

diff --git a/src/components/ChangeMapMenu.vue b/src/components/ChangeMapMenu.vue
index f4140db59..986a709d5 100644
--- a/src/components/ChangeMapMenu.vue
+++ b/src/components/ChangeMapMenu.vue
@@ -1,259 +1,460 @@
 <!--
   @file
-  @since v3.7
+  @since 3.8.0
 -->
 
 <template>
-  <ul class="sidebar-menu">
-    <li
-      id="g3w-catalog-toc-views"
-      class="treeview sidebaritem skin-border-color"
-      style="margin-bottom: 5px; border-bottom: 2px solid"
-    >
-      <a
-        href="#"
-        ref="g3w-map-theme-ancor"
-        style="padding: 0; margin-bottom: 5px;"
+  <div id="g3w-change-map-menu">
+    <template v-if="isChildNode">
+      <div
+        style="
+          display: flex;
+          align-items: center;
+          color: #ffffff"
+        class="skin-background-color"
       >
-        <section style="display: flex;  flex-wrap: wrap; align-items: center; padding: 5px;">
-          <i
-            style="padding: 3px;"
-            :class="g3wtemplate.getFontClass('caret-down')">
-          </i>
+        <span
+          v-t-tooltip:bottom.create="'change_session'"
+          v-disabled="loading"
+          @click.stop="back"
+          style="
+            font-size: 2em;
+            margin: 5px;
+            cursor: pointer;
+            padding: 3px;
+            border: 2px solid #ffffff;
+            border-radius: 3px;
+          "
+        >
           <i
-            style="padding: 0 0 0 4px;"
-            :class="g3wtemplate.getFontClass('eye')">
+            style="color: #FFFFFF"
+            :class="g3wtemplate.getFontClass('reply')">
           </i>
-          <!-- Text of current theme -->
-          <span
-            v-if="current_map_theme"
-            class="treeview-label g3w-long-text"
-            style="overflow: hidden; white-space: normal;text-overflow: ellipsis;"
-          >
-            <span
-              style="color: #cccccc !important;"
-              v-t:pre="'sdk.catalog.current_map_theme_prefix'"
-            >:</span>
-            <span
-              class="skin-color"
-              style="font-size: 1.1em;">
-                {{ current_map_theme }}
-            </span>
-          </span>
-          <span
-            v-else
-            class="treeview-label"
-            style="color: #cccccc !important; font-weight: bold"
-          >
-            <span v-t="'sdk.catalog.choose_map_theme'"></span>
-          </span>
-        </section>
-      </a>
-      <!-- ADD NEW BOOKMARK (FORM) -->
-      <template v-if="showSaveMapThemeForm">
-
-        <li
-          style="border-top: 2px solid; margin: 5px 0"
-          class="skin-border-color"
+        </span>
+
+        <div
+          v-if="parent"
+          style="margin: auto"
         >
-          <div style="display: flex; justify-content: end; padding-top: 5px;">
-            <span
-              v-t-tooltip:left.create="'close'"
-              @click.stop="showSaveMapThemeForm = false"
-              :class="g3wtemplate.getFontClass('close')"
-              class="sidebar-button sidebar-button-icon"
-              style="padding: 5px; margin: 3px; cursor: pointer;"
-            ></span>
-          </div>
-          <div
-            class="container add-map-theme-input"
-            style="padding: 5px; width: 100%"
+          <h3 style="font-weight: bold">
+            {{parent.title || parent.name}}
+          </h3>
+        </div>
+      </div>
+    </template>
+
+    <div
+      v-if="items.length"
+      class="g3w-change-map-menu-container">
+      <div
+        v-for="item in items"
+        :key="item.name"
+        class="menu-item"
+      >
+
+      <!-- ITEM IMAGE -->
+        <div
+          class="menu-item-image"
+          @click.stop="trigger(item)"
+        >
+          <img
+            :src="item.thumbnail || item.header_logo_img || item.logo_img"
+            @error="setFallBackImage(item)"
+            alt="logo"
+            class="img-responsive"
           >
-            <input-text
-              ref="add_map_theme_input"
-              :state="adduserthemeinput" />
-          </div>
-          <div style="margin-top: 5px;">
-            <button
-              class="sidebar-button-run btn btn-block"
-              v-t="'add'"
-              @click.stop="save"
-              v-disabled="!canSave">
-            </button>
+        </div>
+
+        <!-- ITEM CONTENT -->
+        <div class="menu-item-content">
+          <div class="menu-item-text">
+            <h4 class="menu-item-title">
+              {{ item.title }}
+            </h4>
+            <div v-html="item.description"></div>
           </div>
-        </li>
-      </template>
-      <template v-else>
-        <ul
-          id="g3w-catalog-views"
-          class="treeview-menu"
-          :class="{'menu-open': !collapsed}"
-          :style="{display: collapsed ? 'none' : 'block'}"
-        >
-          <li id="g3w-catalog-views-project">
-            <ul style="padding: 0">
-              <li>
-                <div style="font-weight: bold; padding: 5px 3px">Temi progetto</div>
-                <divider/>
-              </li>
-              <li style="padding: 5px 5px 5px 17px;">
-                <div
-                  v-for="(map_theme, index) in map_themes"
-                  :key="map_theme.theme"
-                >
-                  <input
-                    type="radio"
-                    name="radio"
-                    :id="`g3w-map_theme-${index}`"
-                    :value="map_theme.theme"
-                    v-model="current_map_theme"
-                    class="magic-radio"
-                    :checked="map_theme.default">
-                  <label
-                    :for="`g3w-map_theme-${index}`"
-                    style="display: flex; justify-content: space-between;"
-                  >
-                    <span class="g3w-long-text">{{ map_theme.theme }}</span>
-                  </label>
-                </div>
-              </li>
-            </ul>
-          </li>
-          <li id="g3w-catalog-views-user">
-            <ul style="padding: 0">
-              <li>
-                <div style="font-weight: bold; padding: 5px 3px; display: flex; justify-content: space-between">
-                  <span>Temi uente</span>
-                  <!-- Add theme button -->
-                  <span
-                    @click.stop="showSaveMapThemeForm = !showSaveMapThemeForm"
-                    :class="g3wtemplate.getFontClass('plus')"
-                    class="action sidebar-button sidebar-button-icon"
-                    style="margin-left: auto; padding: 5px; cursor:pointer;"
-                  >
-                  </span>
-                </div>
-                <divider/>
-              </li>
-              <li style="padding: 5px 5px 5px 17px">
-                <div
-                  v-for="(map_theme, index) in map_themes"
-                  :key="map_theme.theme"
-                >
-                  <input
-                    type="radio"
-                    name="radio"
-                    :id="`g3w-map_theme-${index}-user`"
-                    :value="map_theme.theme"
-                    v-model="current_map_theme"
-                    class="magic-radio"
-                    :checked="map_theme.default">
-                  <label
-                    :for="`g3w-map_theme-${index}-user`"
-                    style="display: flex; justify-content: space-between;"
-                  >
-                    <span class="g3w-long-text">{{ map_theme.theme }}</span>
-                  </label>
-                </div>
-              </li>
-            </ul>
-          </li>
-        </ul>
-      </template>
-
-    </li>
-  </ul>
+        </div>
+
+      </div>
+    </div>
+
+    <template v-else>
+      <h3
+        style="font-weight: bold"
+        v-t="`no_other_${current}`">
+      </h3>
+    </template>
+
+  </div>
+
 </template>
 
 <script>
-import ProjectsRegistry from 'store/projects';
-import InputText        from "./InputText.vue";
-
-/**
- * Attributes to send to server of layerstrees object
- *
- * node (single layer): keys [id, name, showfeaturecount, visible]
- * group (Group) : keys [checked, expanded, mutually-exclusive, name, nodes]
- */
-const LAYERSTREES_KEYS = {
-  node:  ['id', 'name', 'showfeaturecount', 'visible'],
-  group: ['name', 'checked', 'expanded', 'mutually-exclusive', 'nodes']
+import ApplicationService            from "services/application";
+import ProjectsRegistry              from "store/projects";
+import { API_BASE_URLS, LOGO_GIS3W } from "app/constant";
+
+const Projections = require('g3w-ol/projection/projections');
+const { XHR }     = require('utils');
+
+/** Cached HTTP GET request */
+async function get_macro(id) {
+  get_macro[id] = get_macro[id] || await XHR.get({ url: encodeURI(`/${ApplicationService.getApplicationUser().i18n}${API_BASE_URLS.ABOUT.group}${id}/`) });
+  return get_macro[id];
+}
+
+/** Cached HTTP GET request */
+async function get_group(id) {
+  get_group[id] = get_group[id] || await XHR.get({ url: encodeURI(`/${ApplicationService.getApplicationUser().i18n}${API_BASE_URLS.ABOUT.projects.replace('__G3W_GROUP_ID__', id)}`) });
+  return get_group[id];
 }
 
 export default {
-  name: "changemapthemes",
-  components: {
-    InputText
-  },
-  props: {
-    map_themes: {
-      type: Array,
-      default: []
-    },
-    layerstrees: {
-      type: Array,
-    }
-  },
+
+  /** @since 3.8.6 */
+  name: 'change-map-menu',
+
   data() {
-    const current_map_theme = this.map_themes.find(map_theme => map_theme.default);
     return {
-      showSaveMapThemeForm : false,  /**@since 3.10.0 **/
-      current_map_theme    : current_map_theme ? current_map_theme.theme : null,
-      collapsed            : 'collapsed' === ProjectsRegistry.getCurrentProject().state.toc_themes_init_status,
-      canSave              :  false, /** @since 3.10.0 */
-      themeName            :  null, /** @since 3.10.0 */
-      adduserthemeinput: {
-        name: 'add-user-theme',
-        label: 'sdk.catalog.choose_map_theme_input_label',
-        i18nLabel: true,
-        value: null,
-        editable: true,
-        type: 'varchar',
-        input: {
-          type: 'text',
-          options: {}
-        },
-        visible: true,
-        info: 'Pippo',
-        validate: {
-          valid: false,
-          required: true
-        }
-      }
+      
+      /**
+       * @type {uknown}
+       */
+      state: null,
+
+      /**
+       * @type {boolean}
+       */
+      loading: false,
+
+      /**
+       * @type { 'projects' | 'groups' | 'root' }
+       */
+      current: 'projects', 
+
+      /**
+       * @type {Array}
+       */
+      items: [],
+
+      /**
+       * @type {uknown}
+       */
+      parent: null,
+
+      /**
+       * @type {Array}
+       */
+      steps: [], //Contain all items from top to bottom
+
+      /**
+       * @type {string}
+       */
+      currentProjectGroupId: null,
+ 
     }
   },
-  methods: {
+
+  computed: {
+
     /**
-     * Save current theme (layerstree state)
-     * @since 3.10.0
+     * @returns {boolean} whether current node isn't a "root" element
      */
-    save() {
+    isChildNode() {
+      return 'root' !== this.current;
+    },
 
-      console.log(this.layerstrees[0].tree)
-      //@TODO
-      this.$emit('save-map-theme');
-    }
   },
-  watch: {
-    'current_map_theme': {
-      immediate: false,
-      handler(map_theme) {
-        this.$emit('change-map-theme', map_theme);
+
+  methods: {
+
+    /**
+     * Set a fallback image on network error.
+     */
+     setFallBackImage(item) {
+      const g3w_logo = `${ApplicationService.getConfig().urls.clienturl}${LOGO_GIS3W}`;
+      if (item.thumbnail || item.logo_img) {
+        item.thumbnail = g3w_logo;
+      } else if (item.header_logo_img) {
+        item.header_logo_img = g3w_logo;
       }
     },
-    'themeName'(name) {
-      this.canSave = name ? name.trim() : false;
+    /**
+     *
+     * @return {void}
+     */
+    back() {
+      const isThereStep = this.steps.pop(); //remove last
+      //no steps done -> First time of only back
+      if (0 === this.steps.length) {
+        //check if parent is parent (group) belong to macrogroups
+        if (undefined === isThereStep && Array.isArray(this.parent.macrogroup_id) && this.parent.macrogroup_id.length > 0) {
+          this.showMacroGroups(this.parent.macrogroup_id, true);
+        } else {
+          this.showRoot();
+        }
+      } else {
+        //get last step
+        const item = this.steps[this.steps.length - 1];
+        //set false to add step because it is comping from bottom to top
+        const addStep = false;
+        if (undefined === item.macrogroup_id) {
+          this.showGroups(item, addStep);
+        } else {
+          //set false to add step because it is comping from bottom to top
+          this.showMacroGroups(item.macrogroup_id, addStep);
+        }
+
+      }
+
     },
-    async showSaveMapThemeForm(bool) {
-      this.themeName = null;
-      if (bool) {
-        await this.$nextTick();
-        //need to remove all class so input is adapted to 100% width
-        for (let i = 0; i < this.$refs.add_map_theme_input.$el.children.length; i++) {
-          this.$refs.add_map_theme_input.$el.children[i].classList.remove('col-sm-12')
+
+      /**
+       * @since 3.10.0
+       * @param macrogroup_id
+       * @param addStep Boolean
+       * @return {Promise<void>}
+       */
+    async showMacroGroups(macrogroup_id=[], addStep=true) {
+      //Belong just one macrogroup
+      if (1 === macrogroup_id.length) {
+        const macrogroup = this.macrogroups.find(mg => macrogroup_id[0] === mg.id);
+        this.parent = macrogroup;
+        await this.showGroups(macrogroup);
+      } else { //belong to more than one macrogroups
+        this.items = this.macrogroups.filter(m => macrogroup_id.includes(m.id));
+        this.current = 'macrogroups';
+        this.parent = {
+          macrogroup_id,
+          title: null, // need to set empty (no title)
+          name: null // need to be set empty
+        }
+        if (addStep) {
+          this.steps.push(this.parent);
         }
+
+      }
+    },
+
+    /**
+     *
+      * @param item
+     * @return {Promise<void>}
+     */
+    async showGroups(item, addStep=true) {
+      this.loading = true;
+      this.parent = item;
+      try {
+        this.items = await get_macro(item.id);
+        this.current = 'groups';
+      } catch(err) {
+        this.items = [];
+      }
+      if (addStep) {
+        this.steps.push(this.parent);
+      }
+      this.loading = false;
+    },
+
+    /**
+     *
+      * @param item
+     * @return {Promise<void>}
+     */
+    async showProjects(item) {
+      this.loading = true;
+      this.parent = item;
+
+      if (this.parent.id === this.currentProjectGroupId) {
+        this.items = ProjectsRegistry.getListableProjects();
+        this.current = 'projects';
+      } else {
+        try {
+          this.items = await get_group(item.id, item => this.setItemImageSrc({ item, type: 'project' }));
+          this.current = 'projects';
+        } catch(err) {
+          this.items = [];
+        }
+      }
+
+      this.steps.push(this.parent);
+      this.loading = false;
+    },
+
+    showRoot() {
+      this.current = 'root';
+      this.items = this.macrogroupsandgroups;
+      this.steps = [];
+    },
+
+    _onChangeRoot(item) {
+      // item is a macrogroup
+      if (undefined === item.srid) {
+        this.showGroups(item)
+      } else {
+        // item is a group
+        this.showProjects(item);
+      }
+    },
+
+    /**
+     * @param {string} item.url
+     * @param {string} item.map_url
+     */
+    async changeMapProject(item) {
+      let url;
+      const base_url = ProjectsRegistry.getBaseUrl();
+      const epsg = this.parent.srid ? `EPSG:${this.parent.srid}` : this.parent.crs.epsg;
+      await Projections.registerProjection(epsg);
+      try {
+        new URL(base_url);
+        url = `${base_url}${item.url || item.map_url.replace(/^\//, "")}`;
+      } catch(err) {
+        url = `${location.origin}${base_url}${item.url || item.map_url.replace(/^\//, "")}`;
+      }
+      return ApplicationService.changeMapProject({ url, epsg });
+    },
+
+    async trigger(item) {
+      switch(this.current) {
+        case 'root':        return this._onChangeRoot(item);
+        case 'macrogroups': return this.showGroups(item);
+        case 'groups':      return await this.showProjects(item);
+        case 'projects':    return await this.changeMapProject(item);
+      }
+    },
+
+    /**
+     * Set scr image of project, group, macrogroup
+     * 
+     * @param { 'project' | 'group' | 'macrogroup' } image.type
+     * @param                                        image.item
+      */
+    setItemImageSrc({ item, type } = {}) {
+      switch(type) {
+        case 'project':    item.thumbnail       = this._setSrc(item.thumbnail); break;
+        case 'group':      item.header_logo_img = this._setSrc(item.header_logo_img); break;
+        case 'macrogroup': item.logo_img        = this._setSrc(item.logo_img); break;
+      }
+    },
+
+    /**
+     * @TODO extract as utility function (almost the same as `components/ProjectsMenu::logoSrc(src)`) 
+     */
+    _setSrc(src) {
+      let imageSrc;
+      const host       = this.$options.host || '';
+      const mediaurl   = ProjectsRegistry.config.mediaurl;
+      const clienturl  = ApplicationService.getConfig().urls.clienturl;
+      const has_media  = src && (-1 !== src.indexOf(mediaurl));
+      const not_static = src && (-1 === src.indexOf('static') && -1 === src.indexOf('media'));
+
+      if (!src) {
+        imageSrc = `${clienturl}${LOGO_GIS3W}`;
+      } else if (has_media) {
+        imageSrc = src;
+      } else if (not_static) {  
+        imageSrc = `${mediaurl}${src}`;
+      } else {
+        imageSrc = `${clienturl}${LOGO_GIS3W}`;
+      }
+
+      return `${host}${imageSrc}`;
+    },
+
+  },
+
+  async created() {
+
+    // at start time set item projects
+    this.items = ProjectsRegistry.getListableProjects();
+    this.items.forEach(item => this.setItemImageSrc({ item, type: 'project' }));
+    this.parent = ProjectsRegistry.getCurrentProjectGroup();
+    this.currentProjectGroupId = this.parent.id;
+
+    // get macrogroups
+    this.macrogroups = ApplicationService.getConfig().macrogroups;
+    this.macrogroups.forEach(item => this.setItemImageSrc({ item, type: 'magrocroup' }));
+    
+    // get groups
+    this.groups = ApplicationService.getConfig().groups;
+    this.groups.forEach(item => this.setItemImageSrc({ item, type: 'group' }));
+
+    // collect all groups and macrogroups
+    this.macrogroupsandgroups = [...this.macrogroups, ...this.groups];
+
+    // check if group on initConfig is referred to macrogrop
+    const isMacroGroup = this.macrogroups.find(macrogroup => macrogroup.id === this.parent.id);
+    if (isMacroGroup) {
+      // check belong group
+      const findGroup = this.groups.find(group => group.id === this.parent.id);
+      if (findGroup) {
+        this.parent = findGroup;
+        this.currentProjectGroupId = this.parent.id;
       }
     }
-  }
-}
+  
+    if (0 === this.items.length) {
+      this.showRoot();
+    }
+
+  },
+
+};
 </script>
+
+<style scoped>
+  #g3w-change-map-menu {
+    width: 100%;
+    position: relative;
+  }
+  .g3w-change-map-menu-container {
+    height: 100%;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
+    grid-gap: 1em;
+    overflow-y: auto;
+
+  }
+  .menu-item {
+    margin-bottom: 20px;
+    margin-top:20px;
+  }
+
+  .menu-item-image {
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+    padding-bottom: 50%;
+    opacity: 0.7;
+  }
+
+  .menu-item-image:hover {
+    opacity: 1;
+  }
+
+  .menu-item-image img {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: auto
+  }
+  .menu-item-content {
+    padding: 15px;
+    background: rgba(255,255,255,0.3);
+  }
+  .menu-item-text {
+    position: relative;
+    overflow: hidden;
+    height: 100%;
+    text-align: justify;
+  }
+  .menu-item-title {
+    text-align: center;
+    font-weight: bold;
+    background: rgba(255,255,255,0.5);
+    padding: 5px;
+  }
+</style>
\ No newline at end of file

From 4241e92ef835a862ed3cfefc314fc42cad53c5ff Mon Sep 17 00:00:00 2001
From: Raruto <Raruto@users.noreply.github.com>
Date: Mon, 26 Feb 2024 12:20:50 +0100
Subject: [PATCH 12/17] code clean up

---
 src/components/ChangeMapMenu.vue | 165 ++++++++++++++++---------------
 1 file changed, 85 insertions(+), 80 deletions(-)

diff --git a/src/components/ChangeMapMenu.vue b/src/components/ChangeMapMenu.vue
index 986a709d5..8c57a5376 100644
--- a/src/components/ChangeMapMenu.vue
+++ b/src/components/ChangeMapMenu.vue
@@ -179,106 +179,110 @@ export default {
         item.header_logo_img = g3w_logo;
       }
     },
+
     /**
-     *
-     * @return {void}
+     * @returns { void | Promise<void> }
      */
     back() {
-      const isThereStep = this.steps.pop(); //remove last
-      //no steps done -> First time of only back
-      if (0 === this.steps.length) {
-        //check if parent is parent (group) belong to macrogroups
-        if (undefined === isThereStep && Array.isArray(this.parent.macrogroup_id) && this.parent.macrogroup_id.length > 0) {
-          this.showMacroGroups(this.parent.macrogroup_id, true);
-        } else {
-          this.showRoot();
-        }
-      } else {
-        //get last step
-        const item = this.steps[this.steps.length - 1];
-        //set false to add step because it is comping from bottom to top
-        const addStep = false;
-        if (undefined === item.macrogroup_id) {
-          this.showGroups(item, addStep);
-        } else {
-          //set false to add step because it is comping from bottom to top
-          this.showMacroGroups(item.macrogroup_id, addStep);
-        }
+      const last_step   = this.steps.pop();                               // remove last
+      const has_steps   = this.steps.length > 0;
+      const item        = has_steps && this.steps[this.steps.length - 1]; //get last step
+
+      // back to macrogrup
+      if (
+        (has_steps && undefined !== item.macrogroup_id) ||
+        (!has_steps && undefined === last_step && Array.isArray(this.parent.macrogroup_id) && this.parent.macrogroup_id.length > 0) // no steps done on first time
+      ) {
+        const macrogroup_id = has_steps ? item.macrogroup_id : this.parent.macrogroup_id;
+        const add           = has_steps ? false : true; // false = step it's comping from bottom to top
+        return this.showMacroGroups(macrogroup_id, add);
+      }
 
+      // back to group
+      if (has_steps && undefined === item.macrogroup_id) {
+        return this.showGroups(item, false);
       }
 
+      // back to root
+      if (!has_steps) {
+        return this.showRoot();
+      }
     },
 
-      /**
-       * @since 3.10.0
-       * @param macrogroup_id
-       * @param addStep Boolean
-       * @return {Promise<void>}
-       */
+    /**
+     * @param { Array } macrogroup_id
+     * @param { boolean } addStep Boolean
+     * 
+     * @returns { Promise<void> }
+     * 
+     * @since 3.10.0
+     */
     async showMacroGroups(macrogroup_id=[], addStep=true) {
-      //Belong just one macrogroup
+      // current project belongs to just one macrogroup
       if (1 === macrogroup_id.length) {
-        const macrogroup = this.macrogroups.find(mg => macrogroup_id[0] === mg.id);
-        this.parent = macrogroup;
-        await this.showGroups(macrogroup);
-      } else { //belong to more than one macrogroups
-        this.items = this.macrogroups.filter(m => macrogroup_id.includes(m.id));
-        this.current = 'macrogroups';
-        this.parent = {
-          macrogroup_id,
-          title: null, // need to set empty (no title)
-          name: null // need to be set empty
-        }
-        if (addStep) {
-          this.steps.push(this.parent);
-        }
+        this.parent = this.macrogroups.find(mg => macrogroup_id[0] === mg.id);
+        return await this.showGroups(this.parent);
+      }
 
+      // current project belongs to more than one macrogroup
+      this.items   = this.macrogroups.filter(m => macrogroup_id.includes(m.id));
+      this.current = 'macrogroups';
+      this.parent  = {
+        macrogroup_id,
+        title: null, // hide title
+        name: null   // hide name
+      }
+
+      if (addStep) {
+        this.steps.push(this.parent);
       }
     },
 
     /**
-     *
-      * @param item
-     * @return {Promise<void>}
+     * @param item
+     * @param { boolean } addStep Boolean
+     * 
+     * @returns { Promise<void> }
      */
     async showGroups(item, addStep=true) {
-      this.loading = true;
-      this.parent = item;
       try {
-        this.items = await get_macro(item.id);
+        this.loading = true;
+        this.parent  = item;
+        this.items   = await get_macro(item.id);
         this.current = 'groups';
-      } catch(err) {
+      } catch(e) {
+        console.warn(e);
         this.items = [];
+      } finally {
+        if (addStep) {
+          this.steps.push(this.parent);
+        }
+        this.loading = false;
       }
-      if (addStep) {
-        this.steps.push(this.parent);
-      }
-      this.loading = false;
     },
 
     /**
-     *
-      * @param item
-     * @return {Promise<void>}
+     * @param item
+     * 
+     * @returns { Promise<void> }
      */
     async showProjects(item) {
-      this.loading = true;
-      this.parent = item;
-
-      if (this.parent.id === this.currentProjectGroupId) {
-        this.items = ProjectsRegistry.getListableProjects();
+      try {
+        this.loading = true;
+        this.parent  = item;
+        this.items   = (
+          this.parent.id === this.currentProjectGroupId
+            ? ProjectsRegistry.getListableProjects()
+            : await get_group(item.id, item => this.setItemImageSrc({ item, type: 'project' }))
+        );
         this.current = 'projects';
-      } else {
-        try {
-          this.items = await get_group(item.id, item => this.setItemImageSrc({ item, type: 'project' }));
-          this.current = 'projects';
-        } catch(err) {
-          this.items = [];
-        }
+      } catch(e) {
+        console.warn(e);
+        this.items = [];
+      } finally {
+        this.steps.push(this.parent);
+        this.loading = false;
       }
-
-      this.steps.push(this.parent);
-      this.loading = false;
     },
 
     showRoot() {
@@ -383,17 +387,18 @@ export default {
     // collect all groups and macrogroups
     this.macrogroupsandgroups = [...this.macrogroups, ...this.groups];
 
+    console.log(this.parent.macrogroup_id);
+
     // check if group on initConfig is referred to macrogrop
-    const isMacroGroup = this.macrogroups.find(macrogroup => macrogroup.id === this.parent.id);
-    if (isMacroGroup) {
-      // check belong group
-      const findGroup = this.groups.find(group => group.id === this.parent.id);
-      if (findGroup) {
-        this.parent = findGroup;
-        this.currentProjectGroupId = this.parent.id;
-      }
+    const is_macro = this.macrogroups.find(mg => mg.id === this.parent.id);
+    const group    = is_macro && this.groups.find(g => g.id === this.parent.id);
+    if (group) {
+      this.parent                = group;
+      this.currentProjectGroupId = this.parent.id;
     }
   
+    console.log(this.parent.macrogroup_id);
+
     if (0 === this.items.length) {
       this.showRoot();
     }

From 4a9b9da851632a2650c0c25942d57ddc6408f2e4 Mon Sep 17 00:00:00 2001
From: volterra79 <boccacci.francesco@gmail.com>
Date: Mon, 26 Feb 2024 14:25:26 +0100
Subject: [PATCH 13/17] Fix case of group.id == macrogroup.id

---
 src/components/ChangeMapMenu.vue | 14 +-------------
 1 file changed, 1 insertion(+), 13 deletions(-)

diff --git a/src/components/ChangeMapMenu.vue b/src/components/ChangeMapMenu.vue
index 8c57a5376..24832a6fd 100644
--- a/src/components/ChangeMapMenu.vue
+++ b/src/components/ChangeMapMenu.vue
@@ -387,20 +387,8 @@ export default {
     // collect all groups and macrogroups
     this.macrogroupsandgroups = [...this.macrogroups, ...this.groups];
 
-    console.log(this.parent.macrogroup_id);
-
-    // check if group on initConfig is referred to macrogrop
-    const is_macro = this.macrogroups.find(mg => mg.id === this.parent.id);
-    const group    = is_macro && this.groups.find(g => g.id === this.parent.id);
-    if (group) {
-      this.parent                = group;
-      this.currentProjectGroupId = this.parent.id;
-    }
-  
-    console.log(this.parent.macrogroup_id);
-
     if (0 === this.items.length) {
-      this.showRoot();
+      this.back();
     }
 
   },

From 3881d535b527cf7101c280e9e0d4ecc13f660c45 Mon Sep 17 00:00:00 2001
From: Raruto <Raruto@users.noreply.github.com>
Date: Mon, 26 Feb 2024 14:38:12 +0100
Subject: [PATCH 14/17] remove `setFallBackImage` and `macrogroupsandgroups `

---
 src/components/ChangeMapMenu.vue | 59 ++++++++++++++------------------
 1 file changed, 26 insertions(+), 33 deletions(-)

diff --git a/src/components/ChangeMapMenu.vue b/src/components/ChangeMapMenu.vue
index 24832a6fd..f4f2023e3 100644
--- a/src/components/ChangeMapMenu.vue
+++ b/src/components/ChangeMapMenu.vue
@@ -59,7 +59,7 @@
         >
           <img
             :src="item.thumbnail || item.header_logo_img || item.logo_img"
-            @error="setFallBackImage(item)"
+            @error="setItemImageSrc({ item, type: 'net_error' })"
             alt="logo"
             class="img-responsive"
           >
@@ -148,9 +148,9 @@ export default {
       steps: [], //Contain all items from top to bottom
 
       /**
-       * @type {string}
+       * @type {string} ID of current project group 
        */
-      currentProjectGroupId: null,
+      curr_group: null,
  
     }
   },
@@ -168,18 +168,6 @@ export default {
 
   methods: {
 
-    /**
-     * Set a fallback image on network error.
-     */
-     setFallBackImage(item) {
-      const g3w_logo = `${ApplicationService.getConfig().urls.clienturl}${LOGO_GIS3W}`;
-      if (item.thumbnail || item.logo_img) {
-        item.thumbnail = g3w_logo;
-      } else if (item.header_logo_img) {
-        item.header_logo_img = g3w_logo;
-      }
-    },
-
     /**
      * @returns { void | Promise<void> }
      */
@@ -271,7 +259,7 @@ export default {
         this.loading = true;
         this.parent  = item;
         this.items   = (
-          this.parent.id === this.currentProjectGroupId
+          this.parent.id === this.curr_group
             ? ProjectsRegistry.getListableProjects()
             : await get_group(item.id, item => this.setItemImageSrc({ item, type: 'project' }))
         );
@@ -287,7 +275,7 @@ export default {
 
     showRoot() {
       this.current = 'root';
-      this.items = this.macrogroupsandgroups;
+      this.items = [...this.macrogroups, ...this.groups];
       this.steps = [];
     },
 
@@ -339,6 +327,14 @@ export default {
         case 'project':    item.thumbnail       = this._setSrc(item.thumbnail); break;
         case 'group':      item.header_logo_img = this._setSrc(item.header_logo_img); break;
         case 'macrogroup': item.logo_img        = this._setSrc(item.logo_img); break;
+        // Set a fallback image on network error.
+        case 'net_error':
+          if (item.thumbnail || item.logo_img) {
+            item.thumbnail = `${ApplicationService.getConfig().urls.clienturl}${LOGO_GIS3W}`;
+          } else if (item.header_logo_img) {
+            item.header_logo_img = `${ApplicationService.getConfig().urls.clienturl}${LOGO_GIS3W}`;
+          }
+          break;
       }
     },
 
@@ -370,22 +366,19 @@ export default {
 
   async created() {
 
-    // at start time set item projects
-    this.items = ProjectsRegistry.getListableProjects();
-    this.items.forEach(item => this.setItemImageSrc({ item, type: 'project' }));
-    this.parent = ProjectsRegistry.getCurrentProjectGroup();
-    this.currentProjectGroupId = this.parent.id;
-
-    // get macrogroups
-    this.macrogroups = ApplicationService.getConfig().macrogroups;
-    this.macrogroups.forEach(item => this.setItemImageSrc({ item, type: 'magrocroup' }));
-    
-    // get groups
-    this.groups = ApplicationService.getConfig().groups;
-    this.groups.forEach(item => this.setItemImageSrc({ item, type: 'group' }));
-
-    // collect all groups and macrogroups
-    this.macrogroupsandgroups = [...this.macrogroups, ...this.groups];
+    const config = ApplicationService.getConfig();
+
+    // setup items data (macrogrups and groups).
+    this.items       = ProjectsRegistry.getListableProjects();
+    this.parent      = ProjectsRegistry.getCurrentProjectGroup();
+    this.curr_group  = this.parent.id;
+    this.macrogroups = config.macrogroups;
+    this.groups      = config.groups;
+
+    // setup items images
+    Object
+      .entries({ 'project': this.items, 'magrocroup': this.macrogroups, 'group': this.groups })
+      .forEach(([type, d]) => d.forEach(item => this.setItemImageSrc({ item, type })))
 
     if (0 === this.items.length) {
       this.back();

From 89d6652245a5db2a8f80a7cdcad8bc02727dc781 Mon Sep 17 00:00:00 2001
From: Raruto <Raruto@users.noreply.github.com>
Date: Mon, 26 Feb 2024 14:49:21 +0100
Subject: [PATCH 15/17] remove `isChildNode` and `_onChangeRoot`

---
 src/components/ChangeMapMenu.vue | 28 ++++------------------------
 1 file changed, 4 insertions(+), 24 deletions(-)

diff --git a/src/components/ChangeMapMenu.vue b/src/components/ChangeMapMenu.vue
index f4f2023e3..270a6abfb 100644
--- a/src/components/ChangeMapMenu.vue
+++ b/src/components/ChangeMapMenu.vue
@@ -5,7 +5,8 @@
 
 <template>
   <div id="g3w-change-map-menu">
-    <template v-if="isChildNode">
+    <!-- current node is a child -->
+    <template v-if="'root' !== this.current">
       <div
         style="
           display: flex;
@@ -155,17 +156,6 @@ export default {
     }
   },
 
-  computed: {
-
-    /**
-     * @returns {boolean} whether current node isn't a "root" element
-     */
-    isChildNode() {
-      return 'root' !== this.current;
-    },
-
-  },
-
   methods: {
 
     /**
@@ -279,16 +269,6 @@ export default {
       this.steps = [];
     },
 
-    _onChangeRoot(item) {
-      // item is a macrogroup
-      if (undefined === item.srid) {
-        this.showGroups(item)
-      } else {
-        // item is a group
-        this.showProjects(item);
-      }
-    },
-
     /**
      * @param {string} item.url
      * @param {string} item.map_url
@@ -301,7 +281,7 @@ export default {
       try {
         new URL(base_url);
         url = `${base_url}${item.url || item.map_url.replace(/^\//, "")}`;
-      } catch(err) {
+      } catch(e) {
         url = `${location.origin}${base_url}${item.url || item.map_url.replace(/^\//, "")}`;
       }
       return ApplicationService.changeMapProject({ url, epsg });
@@ -309,7 +289,7 @@ export default {
 
     async trigger(item) {
       switch(this.current) {
-        case 'root':        return this._onChangeRoot(item);
+        case 'root':        return undefined === item.srid ? this.showGroups(item) : this.showProjects(item); // `srid` is undefined when item is a macrogroup
         case 'macrogroups': return this.showGroups(item);
         case 'groups':      return await this.showProjects(item);
         case 'projects':    return await this.changeMapProject(item);

From f0f2f172fb97d4bc9ba3e10bf56d8425603840ab Mon Sep 17 00:00:00 2001
From: Raruto <Raruto@users.noreply.github.com>
Date: Mon, 26 Feb 2024 14:50:17 +0100
Subject: [PATCH 16/17] jsdoc

---
 src/components/ChangeMapMenu.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/ChangeMapMenu.vue b/src/components/ChangeMapMenu.vue
index 270a6abfb..4f1108fa3 100644
--- a/src/components/ChangeMapMenu.vue
+++ b/src/components/ChangeMapMenu.vue
@@ -144,12 +144,12 @@ export default {
       parent: null,
 
       /**
-       * @type {Array}
+       * @type { Array } all items from top to bottom
        */
-      steps: [], //Contain all items from top to bottom
+      steps: [], 
 
       /**
-       * @type {string} ID of current project group 
+       * @type { string } ID of current project group 
        */
       curr_group: null,
  
@@ -159,9 +159,9 @@ export default {
   methods: {
 
     /**
-     * @returns { void | Promise<void> }
+     * @returns { Promise<void> }
      */
-    back() {
+    async back() {
       const last_step   = this.steps.pop();                               // remove last
       const has_steps   = this.steps.length > 0;
       const item        = has_steps && this.steps[this.steps.length - 1]; //get last step

From a68601076b61e19df3dfee5b9bac0be318bf916d Mon Sep 17 00:00:00 2001
From: volterra79 <boccacci.francesco@gmail.com>
Date: Mon, 26 Feb 2024 15:39:53 +0100
Subject: [PATCH 17/17] Fix .on register event. Need to be a function

---
 src/components/Relation.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Relation.vue b/src/components/Relation.vue
index 066308687..3a56f8194 100644
--- a/src/components/Relation.vue
+++ b/src/components/Relation.vue
@@ -357,7 +357,7 @@ export default {
       }
 
       // resize after popping child relation 
-      GUI.on('pop-content', setTimeout(() => this.resize()));
+      GUI.on('pop-content', () => setTimeout(() => this.resize()));
     },
 
     /**