From 6db9d57c46e58dcb192cde0c6ebef6df2cbda7ef Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Wed, 9 Nov 2022 18:01:17 +0100
Subject: [PATCH] [enh] save in url query the current catalog search values

---
 app/src/router/routes.js         |  1 +
 app/src/views/app/AppCatalog.vue | 47 +++++++++++++++++++-------------
 2 files changed, 29 insertions(+), 19 deletions(-)

diff --git a/app/src/router/routes.js b/app/src/router/routes.js
index 7d815851..8abd19bb 100644
--- a/app/src/router/routes.js
+++ b/app/src/router/routes.js
@@ -175,6 +175,7 @@ const routes = [
     name: 'app-catalog',
     path: '/apps/catalog',
     component: () => import(/* webpackChunkName: "views/apps/catalog" */ '@/views/app/AppCatalog'),
+    props: route => route.query,
     meta: {
       args: { trad: 'catalog' },
       breadcrumb: ['app-list', 'app-catalog']
diff --git a/app/src/views/app/AppCatalog.vue b/app/src/views/app/AppCatalog.vue
index 8367294c..d88e2824 100644
--- a/app/src/views/app/AppCatalog.vue
+++ b/app/src/views/app/AppCatalog.vue
@@ -12,10 +12,10 @@
           </b-input-group-prepend>
           <b-form-input
             id="search-input" :placeholder="$t('search.for', { items: $tc('items.apps', 2) })"
-            v-model="search" @input="setCategory"
+            :value="search" @input="updateQuery('search', $event)"
           />
           <b-input-group-append>
-            <b-select v-model="quality" :options="qualityOptions" @change="setCategory" />
+            <b-select :value="quality" :options="qualityOptions" @change="updateQuery('quality', $event)" />
           </b-input-group-append>
         </b-input-group>
 
@@ -24,9 +24,9 @@
           <b-input-group-prepend is-text>
             <icon iname="filter" />
           </b-input-group-prepend>
-          <b-select v-model="category" :options="categories" />
+          <b-select :value="category" :options="categories" @change="updateQuery('category', $event)" />
           <b-input-group-append>
-            <b-button variant="primary" :disabled="category === null" @click="category = null">
+            <b-button variant="primary" :disabled="category === null" @click="updateQuery('category', null)">
               {{ $t('app_show_categories') }}
             </b-button>
           </b-input-group-append>
@@ -39,10 +39,13 @@
           </b-input-group-prepend>
           <b-form-radio-group
             id="subtags-radio" name="subtags"
-            v-model="subtag" :options="subtags"
+            :checked="subtag" :options="subtags" @change="updateQuery('subtag', $event)"
             buttons button-variant="outline-secondary"
           />
-          <b-select id="subtags-select" v-model="subtag" :options="subtags" />
+          <b-select
+            id="subtags-select" :value="subtag" :options="subtags"
+            @change="updateQuery('subtag', $event)"
+          />
         </b-input-group>
       </div>
     </template>
@@ -54,7 +57,7 @@
         tag="li" class="category-card"
       >
         <b-card-title>
-          <b-link @click="category = cat.value" class="card-link">
+          <b-link @click="updateQuery('category', cat.value)" class="card-link">
             <icon :iname="cat.icon" /> {{ cat.text }}
           </b-link>
         </b-card-title>
@@ -171,6 +174,13 @@ export default {
     AppCatalogDetails
   },
 
+  props: {
+    search: { type: String, default: '' },
+    quality: { type: String, default: 'decent_quality' },
+    category: { type: String, default: null },
+    subtag: { type: String, default: 'all' }
+  },
+
   data () {
     return {
       queries: [
@@ -195,12 +205,6 @@ export default {
         // The rest is filled from api data
       ],
 
-      // Set by user inputs
-      search: '',
-      category: null,
-      subtag: 'all',
-      quality: 'decent_quality',
-
       // Custom install form
       customInstall: {
         field: {
@@ -244,7 +248,7 @@ export default {
 
     subtags () {
       // build an options array for subtags v-model/options
-      if (this.category) {
+      if (this.category && this.categories.length > 2) {
         const category = this.categories.find(cat => cat.value === this.category)
         if (category.subtags) {
           const subtags = [{ text: this.$i18n.t('all'), value: 'all' }]
@@ -302,11 +306,16 @@ export default {
       this.antifeatures = Object.fromEntries(data.antifeatures.map((af) => ([af.id, af])))
     },
 
-    setCategory () {
-      // allow search without selecting a category
-      if (this.category === null) {
-        this.category = 'all'
-      }
+    updateQuery (key, value) {
+      // Update the query string without reloading the page
+      this.$router.replace({
+        query: {
+          ...this.$route.query,
+          // allow search without selecting a category
+          category: this.$route.query.category || 'all',
+          [key]: value
+        }
+      })
     },
 
     // INSTALL APP