From a8343cb45b07f330f583c4305b22ee6fbdfe72f6 Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Fri, 26 Jul 2024 17:37:25 +0200
Subject: [PATCH] [UI] Persist current settings page on the URL.

---
 .../http/webapp/src/components/Nav.vue        |  2 +-
 .../src/components/panels/Settings/Index.vue  | 21 +++++++++++++++++--
 .../backend/http/webapp/src/views/Panel.vue   |  2 +-
 3 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/platypush/backend/http/webapp/src/components/Nav.vue b/platypush/backend/http/webapp/src/components/Nav.vue
index 1941c9a655..abd6d57ae6 100644
--- a/platypush/backend/http/webapp/src/components/Nav.vue
+++ b/platypush/backend/http/webapp/src/components/Nav.vue
@@ -19,7 +19,7 @@
       <li v-for="config, name in configSections" :key="name" class="entry"
           :class="{selected: name === selectedConfigPanel}"
           :title="config.name" @click="$emit('select-config', name)">
-        <a href="/#settings">
+        <a :href="`/#settings?page=${name}`">
         <span class="icon">
           <i :class="config.icon['class']" v-if="config.icon?.['class']" />
           <img :src="config.icon?.imgUrl" v-else-if="config.icon?.imgUrl" alt="name"/>
diff --git a/platypush/backend/http/webapp/src/components/panels/Settings/Index.vue b/platypush/backend/http/webapp/src/components/panels/Settings/Index.vue
index 2f157c8476..024ad1348d 100644
--- a/platypush/backend/http/webapp/src/components/panels/Settings/Index.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Settings/Index.vue
@@ -20,6 +20,7 @@ export default {
   name: "Settings",
   components: {Application, Users, Token},
   mixins: [Utils],
+  emits: ['change-page'],
 
   props: {
     selectedPanel: {
@@ -41,8 +42,24 @@ export default {
     }
   },
 
-  mounted() {
-    this.refresh()
+  watch: {
+    selectedPanel(value) {
+      this.setUrlArgs({page: value})
+    },
+  },
+
+  async mounted() {
+    const args = this.getUrlArgs()
+    let page = null
+    if (args.page?.length) {
+      page = args.page
+    } else {
+      page = this.selectedPanel?.length ? this.selectedPanel : 'users'
+    }
+
+    this.$emit('change-page', page)
+    await this.refresh()
+    this.setUrlArgs({page: this.selectedPanel})
   }
 }
 </script>
diff --git a/platypush/backend/http/webapp/src/views/Panel.vue b/platypush/backend/http/webapp/src/views/Panel.vue
index 43a85d1523..fe69eebf02 100644
--- a/platypush/backend/http/webapp/src/views/Panel.vue
+++ b/platypush/backend/http/webapp/src/views/Panel.vue
@@ -12,7 +12,7 @@
 
     <div class="canvas" v-if="selectedPanel === 'settings'">
       <div class="panel">
-        <Settings :selected-panel="selectedConfigPanel" />
+        <Settings :selected-panel="selectedConfigPanel" @change-page="selectedConfigPanel = $event" />
       </div>
     </div>