From 764bbaaf3e3d23abdd53238dc132b7b62dccc40e Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Tue, 26 Sep 2023 12:01:43 +0800
Subject: [PATCH] feat: store query params to location href in app store page

Signed-off-by: Ryan Wang <i@ryanc.cc>
---
 console/package.json           |  1 +
 console/pnpm-lock.yaml         | 16 ++++++++++++++
 console/src/views/AppStore.vue | 38 ++++++++++++++++++++++------------
 3 files changed, 42 insertions(+), 13 deletions(-)

diff --git a/console/package.json b/console/package.json
index 48db2b7..1728352 100644
--- a/console/package.json
+++ b/console/package.json
@@ -13,6 +13,7 @@
     "@halo-dev/console-shared": "^2.9.0",
     "@tanstack/vue-query": "^4.34.4",
     "@vueuse/core": "^10.4.1",
+    "@vueuse/router": "^10.4.1",
     "axios": "^1.5.0",
     "dayjs": "^1.11.9",
     "github-markdown-css": "^5.2.0",
diff --git a/console/pnpm-lock.yaml b/console/pnpm-lock.yaml
index bcdb162..64fadda 100644
--- a/console/pnpm-lock.yaml
+++ b/console/pnpm-lock.yaml
@@ -20,6 +20,9 @@ dependencies:
   '@vueuse/core':
     specifier: ^10.4.1
     version: 10.4.1(vue@3.3.4)
+  '@vueuse/router':
+    specifier: ^10.4.1
+    version: 10.4.1(vue-router@4.2.4)(vue@3.3.4)
   axios:
     specifier: ^1.5.0
     version: 1.5.0
@@ -1096,6 +1099,19 @@ packages:
     resolution: {integrity: sha512-2Sc8X+iVzeuMGHr6O2j4gv/zxvQGGOYETYXEc41h0iZXIRnRbJZGmY/QP8dvzqUelf8vg0p/yEA5VpCEu+WpZg==}
     dev: false
 
+  /@vueuse/router@10.4.1(vue-router@4.2.4)(vue@3.3.4):
+    resolution: {integrity: sha512-gsMuSIDTUj7Gt91pnFbrhUCDaGObceQAs3+XGguRNj/WgzqLpywe37mE4645McDspEbig/n9nvn8SSmo6XRvPw==}
+    peerDependencies:
+      vue-router: '>=4.0.0-rc.1'
+    dependencies:
+      '@vueuse/shared': 10.4.1(vue@3.3.4)
+      vue-demi: 0.14.5(vue@3.3.4)
+      vue-router: 4.2.4(vue@3.3.4)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: false
+
   /@vueuse/shared@10.4.1(vue@3.3.4):
     resolution: {integrity: sha512-vz5hbAM4qA0lDKmcr2y3pPdU+2EVw/yzfRsBdu+6+USGa4PxqSQRYIUC9/NcT06y+ZgaTsyURw2I9qOFaaXHAg==}
     dependencies:
diff --git a/console/src/views/AppStore.vue b/console/src/views/AppStore.vue
index e05f860..ae475e6 100644
--- a/console/src/views/AppStore.vue
+++ b/console/src/views/AppStore.vue
@@ -26,6 +26,7 @@ import { useLocalStorage } from "@vueuse/core";
 import { computed, nextTick, watch } from "vue";
 import { ref } from "vue";
 import RiApps2Line from "~icons/ri/apps-2-line";
+import { useRouteQuery } from "@vueuse/router";
 
 const Types = [
   {
@@ -70,22 +71,32 @@ const viewTypes = [
 
 const viewType = useLocalStorage<string>("app-store-list-view", "grid");
 
-const keyword = ref("");
-const page = ref(1);
-const size = ref(20);
-const selectedSort = ref("latestReleaseTimestamp,desc");
-const selectedPriceMode = ref();
-const selectedType = ref();
-const onlyQueryInstalled = ref(false);
+const keyword = useRouteQuery<string>("keyword", "");
+const page = useRouteQuery<number>("page", 1, { transform: Number });
+const size = useRouteQuery<number>("size", 20, { transform: Number });
+const selectedSort = useRouteQuery<string | undefined>("sort", "latestReleaseTimestamp,desc");
+const selectedPriceMode = useRouteQuery("price-mode");
+const selectedType = useRouteQuery<string | undefined>("type");
+const onlyQueryInstalled = useRouteQuery<string>("installed", "false");
+const onlyQueryInstalledAsBoolean = computed(() => onlyQueryInstalled.value === "true");
 
-const { installedPlugins } = useFetchInstalledPlugins(onlyQueryInstalled);
-const { installedThemes } = useFetchInstalledThemes(onlyQueryInstalled);
+const { installedPlugins } = useFetchInstalledPlugins(onlyQueryInstalledAsBoolean);
+const { installedThemes } = useFetchInstalledThemes(onlyQueryInstalledAsBoolean);
 
 const { data, isFetching, isLoading, refetch } = useQuery<ListResponse<ApplicationSearchResult>>({
-  queryKey: ["store-apps", keyword, selectedSort, page, size, selectedPriceMode, selectedType, onlyQueryInstalled],
+  queryKey: [
+    "store-apps",
+    keyword,
+    selectedSort,
+    page,
+    size,
+    selectedPriceMode,
+    selectedType,
+    onlyQueryInstalledAsBoolean,
+  ],
   queryFn: async () => {
     const appIds: string[] = [];
-    if (onlyQueryInstalled.value) {
+    if (onlyQueryInstalledAsBoolean.value) {
       if (installedPlugins.value?.length) {
         appIds.push(
           ...((installedPlugins.value?.map((plugin) => plugin.metadata.annotations?.[STORE_APP_ID]) || []).filter(
@@ -122,7 +133,7 @@ const { data, isFetching, isLoading, refetch } = useQuery<ListResponse<Applicati
     size.value = data.size;
   },
   enabled: computed(() => {
-    if (onlyQueryInstalled.value) {
+    if (onlyQueryInstalledAsBoolean.value) {
       return !!installedPlugins.value && !!installedThemes.value;
     }
     return true;
@@ -203,6 +214,7 @@ watch([selectedPriceMode, selectedType, selectedSort, onlyQueryInstalled, keywor
                       id="onlyQueryInstalled"
                       v-model="onlyQueryInstalled"
                       type="checkbox"
+                      value="true"
                       class="as-h-3.5 as-w-3.5 as-rounded as-border-gray-300 as-text-indigo-600 focus:as-ring-indigo-600"
                     />
                   </div>
@@ -210,7 +222,7 @@ watch([selectedPriceMode, selectedType, selectedSort, onlyQueryInstalled, keywor
                     <label
                       for="onlyQueryInstalled"
                       class="as-text-sm as-text-gray-700 hover:as-text-black"
-                      :class="{ 'as-font-semibold as-text-gray-700': onlyQueryInstalled }"
+                      :class="{ 'as-font-semibold as-text-gray-700': onlyQueryInstalledAsBoolean }"
                     >
                       已安装
                     </label>