feat: support persist for battle-of-giants

Signed-off-by: Dup4 <lyuzhi.pan@gmail.com>

packages/apps/board/src/auto-imports.d.ts

@@ -249,6 +249,7 @@ declare global {
   const useRefHistory: typeof import('@vueuse/core')['useRefHistory']
   const useResizeObserver: typeof import('@vueuse/core')['useResizeObserver']
   const useRoute: typeof import('vue-router')['useRoute']
+  const useRouteQueryForBattleOfGiants: typeof import('./composables/query')['useRouteQueryForBattleOfGiants']
   const useRouter: typeof import('vue-router')['useRouter']
   const useScreenOrientation: typeof import('@vueuse/core')['useScreenOrientation']
   const useScreenSafeArea: typeof import('@vueuse/core')['useScreenSafeArea']
@@ -562,6 +563,7 @@ declare module 'vue' {
     readonly useRefHistory: UnwrapRef<typeof import('@vueuse/core')['useRefHistory']>
     readonly useResizeObserver: UnwrapRef<typeof import('@vueuse/core')['useResizeObserver']>
     readonly useRoute: UnwrapRef<typeof import('vue-router')['useRoute']>
+    readonly useRouteQueryForBattleOfGiants: UnwrapRef<typeof import('./composables/query')['useRouteQueryForBattleOfGiants']>
     readonly useRouter: UnwrapRef<typeof import('vue-router')['useRouter']>
     readonly useScreenOrientation: UnwrapRef<typeof import('@vueuse/core')['useScreenOrientation']>
     readonly useScreenSafeArea: UnwrapRef<typeof import('@vueuse/core')['useScreenSafeArea']>
@@ -869,6 +871,7 @@ declare module '@vue/runtime-core' {
     readonly useRefHistory: UnwrapRef<typeof import('@vueuse/core')['useRefHistory']>
     readonly useResizeObserver: UnwrapRef<typeof import('@vueuse/core')['useResizeObserver']>
     readonly useRoute: UnwrapRef<typeof import('vue-router')['useRoute']>
+    readonly useRouteQueryForBattleOfGiants: UnwrapRef<typeof import('./composables/query')['useRouteQueryForBattleOfGiants']>
     readonly useRouter: UnwrapRef<typeof import('vue-router')['useRouter']>
     readonly useScreenOrientation: UnwrapRef<typeof import('@vueuse/core')['useScreenOrientation']>
     readonly useScreenSafeArea: UnwrapRef<typeof import('@vueuse/core')['useScreenSafeArea']>

packages/apps/board/src/components/board/Board.vue

@@ -41,6 +41,16 @@ const enableAutoScroll = ref(false);
   }
 })();
 
+(() => {
+  const routeQueryForBattleOfGiants = useRouteQueryForBattleOfGiants();
+  if (
+    routeQueryForBattleOfGiants.value !== null
+ && routeQueryForBattleOfGiants.value !== undefined
+  ) {
+    rankOptions.value.battleOfGiants.FromBase64(routeQueryForBattleOfGiants.value);
+  }
+})();
+
 const currentGroup = ref("all");
 function onChangeCurrentGroup(nextGroup: string) {
   if (nextGroup === rankOptions.value.group) {

packages/apps/board/src/components/board/OptionsModal.vue

@@ -100,12 +100,19 @@ function onCancel() {
 
 const localStorageKeyForFilterOrganizations = getLocalStorageKeyForFilterOrganizations();
 const localStorageKeyForFilterTeams = getLocalStorageKeyForFilterTeams();
+const routeQueryForBattleOfGiants = useRouteQueryForBattleOfGiants();
 
 function onConfirm() {
   // can't use useStorage, maybe it's a bug
   localStorage.setItem(localStorageKeyForFilterOrganizations, JSON.stringify(orgSelectedItems.value));
   localStorage.setItem(localStorageKeyForFilterTeams, JSON.stringify(teamsSelectedItems.value));
 
+  if (rankOptions.value.battleOfGiants.persist) {
+    routeQueryForBattleOfGiants.value = rankOptions.value.battleOfGiants.ToBase64();
+  } else {
+    routeQueryForBattleOfGiants.value = undefined as unknown as string;
+  }
+
   isHidden.value = true;
 }
 </script>
@@ -218,7 +225,7 @@ function onConfirm() {
               v-model="rankOptions.battleOfGiants.equalTeams"
             />
 
-            <!-- <span
+            <span
               text-sm font-medium
               text-gray-900 dark:text-gray-300
             >
@@ -227,7 +234,7 @@ function onConfirm() {
 
             <TheCheckbox
               v-model="rankOptions.battleOfGiants.persist"
-            /> -->
+            />
 
             <span
               text-sm font-medium

packages/apps/board/src/composables/query.ts

@@ -7,3 +7,11 @@ export function getDataSourceUrl() {
     { transform: String },
   );
 }
+
+export function useRouteQueryForBattleOfGiants() {
+  return useRouteQuery(
+    "battle-of-giants",
+    "",
+    { transform: String },
+  );
+}

packages/libs/core/package.json

@@ -52,6 +52,7 @@
     "chroma-js": "^2.4.2",
     "color-diff": "^1.4.0",
     "dayjs": "^1.11.8",
+    "js-base64": "^3.7.5",
     "lodash": "^4.17.21",
     "ordinal": "^1.0.3",
     "papaparse": "^5.4.1",

packages/libs/core/src/battle-of-giants.ts

@@ -1,3 +1,4 @@
+import { Base64 } from "js-base64";
 import { type SelectOptionItem } from "./basic-types";
 import type { Team } from "./team";
 
@@ -89,6 +90,15 @@ export class Giants {
 
     return [two(h), two(m)].join(":");
   }
+
+  toJSON() {
+    return {
+      type: this.type,
+      name: this.name,
+      filterOrganizations: this.filterOrganizations,
+      filterTeams: this.filterTeams,
+    };
+  }
 }
 
 export class BattleOfGiants {
@@ -109,4 +119,35 @@ export class BattleOfGiants {
     this.blueTeam = new Giants(GiantsType.BLUE);
     this.redTeam = new Giants(GiantsType.RED);
   }
+
+  ToBase64(): string {
+    return Base64.encode(JSON.stringify(this));
+  }
+
+  FromBase64(base64: string) {
+    if (base64.length === 0) {
+      return;
+    }
+
+    if (Base64.isValid(base64) === false) {
+      return;
+    }
+
+    const j = JSON.parse(Base64.decode(base64));
+
+    this.enable = j.enable;
+    this.topX = j.topX;
+    this.equalTeams = j.equalTeams;
+    this.persist = j.persist;
+
+    this.blueTeam = new Giants(GiantsType.BLUE);
+    this.blueTeam.name = j.blueTeam.name;
+    this.blueTeam.setFilterOrganizations(j.blueTeam.filterOrganizations);
+    this.blueTeam.setFilterTeams(j.blueTeam.filterTeams);
+
+    this.redTeam = new Giants(GiantsType.RED);
+    this.redTeam.name = j.redTeam.name;
+    this.redTeam.setFilterOrganizations(j.redTeam.filterOrganizations);
+    this.redTeam.setFilterTeams(j.redTeam.filterTeams);
+  }
 }