add persistent query and paging

src/router/index.ts

@@ -22,6 +22,11 @@ const router = createRouter({
       path: "/search",
       name: "search",
       component: () => import("../views/search/SearchView.vue"),
+      props: (route) => ({
+        offset: route.query.offset,
+        limit: route.query.limit,
+        query: route.query.query,
+      }),
     },
     {
       path: "/imprint",

src/views/search/SearchView.vue

@@ -31,19 +31,25 @@ import {
   ref,
   unref,
   type Ref,
+  watch,
 } from "vue";
 import ExportProgress from "./ExportProgress.vue";
 import { downloadFullTsv, type ProgressEvent } from "./ExportTsv";
 import ResultTable from "./ResultTable.vue";
+import { useRoute, useRouter } from "vue-router";
 const pageState = usePageState();
 const searchState = usePageState();
 const entries: Ref<BakrepSearchResultEntry[]> = ref([]);
 
 const api = useApi();
+const route = useRoute();
+const router = useRouter();
+
 const pagination: Ref<PaginationData> = ref(empty());
 const query: Ref<CompoundQuery> = ref({ op: "and", value: [] });
 const ordering: Ref<SortOption[]> = ref([{ field: "id", ord: "asc" }]);
 const searchinfo: Ref<SearchInfo> = ref({ fields: [] });
+
 function init() {
   pageState.value.setState(State.Loading);
   api
@@ -52,9 +58,50 @@ function init() {
       searchinfo.value = r;
       pageState.value.setState(State.Main);
     })
+    .then(populateVariables)
     .catch((err) => pageState.value.setError(err));
 }
 
+function encodeQuery(): string {
+  return btoa(JSON.stringify({ query: query.value, ordering: ordering.value }));
+}
+
+function decodeQuery(encodedQuery: string): {
+  query: CompoundQuery;
+  ordering: SortOption[];
+} {
+  return JSON.parse(atob(encodedQuery));
+}
+
+function populateVariables() {
+  if (route.query.query) {
+    const decodedQuery = decodeQuery(route.query.query as string);
+    query.value = decodedQuery.query;
+    ordering.value = decodedQuery.ordering;
+    pagination.value.offset = Number.parseInt(route.query.offset as string);
+    pagination.value.limit = Number.parseInt(route.query.limit as string);
+    search(pagination.value.offset);
+  }
+}
+
+watch(
+  () => route.query,
+  () => {
+    populateVariables();
+  },
+);
+
+function updateQuery(offset = 0) {
+  router.push({
+    name: "search",
+    query: {
+      offset: offset,
+      limit: pagination.value.limit,
+      query: encodeQuery(),
+    },
+  });
+}
+
 function searchinfo2querybuilderrules(f: SearchInfoField): Rule {
   const config = fieldNames[f.field];
   const field = config ? config.label : f.field;
@@ -170,6 +217,7 @@ function search(offset = 0) {
       searchState.value.setState(State.Main);
       if (r.offset) pagination.value.offset = r.offset;
       pagination.value.total = r.total;
+      updateQuery(r.offset);
     })
     .catch((err) => pageState.value.setError(err));
 }
@@ -294,7 +342,7 @@ onBeforeUnmount(() => {
             v-if="pagination.total > 0"
             class="mt-3"
             :value="pagination"
-            @update:offset="search"
+            @update:offset="updateQuery"
           />
         </div>
       </Loading>