Issue #1014: added parameters for configurate query string

js-packages/search-frontend/src/components/queryString.ts

@@ -1,13 +1,42 @@
-export function loadQueryString<Value>(): Value | null {
+import { queryStringValues } from "../embeddable/entry";
+import { SearchToken } from "./client";
+
+export function loadQueryString<
+  Value extends { text?: string; textOnChange?: string },
+>(defaultValue: Value): Value {
   const params = new URLSearchParams(window.location.search);
   const q = params.get("q");
-  if (q) return JSON.parse(q);
-  return null;
+  if (q) {
+    try {
+      const loadedValue = JSON.parse(q) as Partial<Value>;
+      const combinedValue = { ...defaultValue, ...loadedValue };
+
+      if (!combinedValue.textOnChange && combinedValue.text) {
+        combinedValue.textOnChange = combinedValue.text;
+      }
+
+      return combinedValue;
+    } catch (error) {
+      console.error("Error parsing query string:", error);
+    }
+  }
+  return defaultValue;
 }
 
-export function saveQueryString<Value>(value: Value) {
+export function saveQueryString<Value>(
+  value: any,
+  queryStringValues: queryStringValues,
+) {
   const params = new URLSearchParams(window.location.search);
-  params.set("q", JSON.stringify(value));
+
+  const newValue = queryStringValues?.reduce((acc, prop) => {
+    if (prop in value) {
+      acc[prop] = value[prop];
+    }
+    return acc;
+  }, {} as Record<string, any>);
+
+  params.set("q", JSON.stringify(newValue));
   const url = `${window.location.pathname}?${params.toString()}`;
   window.history.replaceState(null, "", url);
 }

js-packages/search-frontend/src/components/useSelections.tsx

@@ -7,15 +7,18 @@ import {
 } from "./client";
 import { loadQueryString, saveQueryString } from "./queryString";
 import { containsAtLeastOne } from "../embeddable/Main";
+import { queryStringValues } from "../embeddable/entry";
 
 export function useSelections({
   useKeycloak = true,
   useQueryString = true,
   defaultString = "",
+  queryStringValues,
 }: {
   useKeycloak?: boolean;
   useQueryString?: boolean;
   defaultString?: string;
+  queryStringValues: queryStringValues;
 }) {
   const defaultSearch = {
     text: defaultString,
@@ -27,7 +30,7 @@ export function useSelections({
   const [state, dispatch] = React.useReducer(
     reducer,
     defaultSearch,
-    () => loadQueryString<SelectionsState>() ?? defaultSearch,
+    (defaultSearch) => loadQueryString<SelectionsState>(defaultSearch),
   );
 
   const [canSave, setCanSave] = React.useState(false);
@@ -45,10 +48,10 @@ export function useSelections({
   }, []);
   React.useEffect(() => {
     if (useKeycloak && canSave && useQueryString) {
-      saveQueryString(state);
+      saveQueryString(state, queryStringValues);
     } else {
       if (!useKeycloak && useQueryString) {
-        saveQueryString(state);
+        saveQueryString(state, queryStringValues);
       }
     }
   }, [canSave, state]);

js-packages/search-frontend/src/embeddable/Main.tsx

@@ -80,6 +80,12 @@ export function Main({
   const isHoverChangeDetail = configuration.resultList?.changeOnOver ?? true;
   const isActiveSkeleton = configuration?.isActiveSkeleton || false;
   const viewButton = configuration?.viewButton;
+  const queryStringValues = configuration?.queryStringValues || [
+    "text",
+    "selection",
+    "textOnChange",
+    "filters",
+  ];
   const skeletonCustom = {
     tabs: configuration.skeletonTabsCustom,
     results: configuration.skeletonResultsCustom,
@@ -97,12 +103,14 @@ export function Main({
     useKeycloak,
     useQueryString,
     defaultString: configuration.defaultString || "",
+    queryStringValues,
   });
   const [selectionsStateSuggestions, selectionsDispatchSuggestions] =
     useSelections({
       useKeycloak,
       useQueryString,
       defaultString: configuration.defaultString || "",
+      queryStringValues,
     });
   const [sortAfterKey, setSortAfterKey] = React.useState("");
   const [totalResult, setTotalResult] = React.useState<number | null>(null);

js-packages/search-frontend/src/embeddable/entry.tsx

@@ -356,6 +356,7 @@ export type Configuration = {
   details: Element | string | null;
   filters: Element | string | null;
   login: Element | string | null;
+  queryStringValues: queryStringValues;
   results: Element | string | null;
   search: Element | string | null;
   sortable: Element | string | null;
@@ -418,6 +419,7 @@ const defaultConfiguration: Configuration = {
   memoryResults: null,
   numberResult: null,
   numberResultOfFilters: null,
+  queryStringValues: null,
   removeFilters: null,
   resultList: null,
   resultListPagination: null,
@@ -476,3 +478,8 @@ declare global {
     OpenK9: typeof OpenK9;
   }
 }
+
+export type queryStringValues =
+  | ("text" | "selection" | "textOnChange" | "filters")[]
+  | null
+  | undefined;