Streamline search request handling

Tekst-Web/src/App.vue

@@ -4,7 +4,7 @@ import InitLoader from '@/components/InitLoader.vue';
 import GlobalMessenger from '@/components/messages/GlobalMessenger.vue';
 import { computed } from 'vue';
 import { getLocaleProfile } from '@/i18n';
-import { useStateStore } from '@/stores';
+import { useStateStore, useThemeStore } from '@/stores';
 import {
   NLoadingBarProvider,
   NConfigProvider,
@@ -13,7 +13,6 @@ import {
   NBackTop,
   useThemeVars,
 } from 'naive-ui';
-import { useThemeStore } from '@/stores/theme';
 import PageHeader from './layout/PageHeader.vue';
 import PageFooter from './layout/PageFooter.vue';
 import { useInitializeApp } from '@/composables/init';

Tekst-Web/src/components/browse/ResourceToggleDrawer.vue

@@ -1,13 +1,12 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { NDrawer, NDrawerContent, NButton, NSpace, NIcon } from 'naive-ui';
-import { useAuthStore, useBrowseStore, useResourcesStore } from '@/stores';
+import { useAuthStore, useBrowseStore, useResourcesStore, useThemeStore } from '@/stores';
 import ResourceToggleDrawerItem from '@/components/browse/ResourceToggleDrawerItem.vue';
 import IconHeading from '@/components/generic/IconHeading.vue';
 
 import { CheckAllIcon, ResourceIcon, UncheckAllIcon } from '@/icons';
 import LabelledSwitch from '../LabelledSwitch.vue';
-import { useThemeStore } from '@/stores/theme';
 
 const props = defineProps<{ show: boolean }>();
 const emit = defineEmits<{ (e: 'update:show', show: boolean): void }>();

Tekst-Web/src/components/generic/IconHeading.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { type Component } from 'vue';
 import { NEllipsis, NIcon } from 'naive-ui';
-import { useThemeStore } from '@/stores/theme';
+import { useThemeStore } from '@/stores';
 
 withDefaults(
   defineProps<{

Tekst-Web/src/components/navigation/PrimaryNavBar.vue

@@ -6,7 +6,7 @@ import LocaleSwitcher from '@/components/navigation/LocaleSwitcher.vue';
 import UserActionsButton from '@/components/navigation/UserActionsButton.vue';
 import QuickSearchWidget from '@/components/navigation/QuickSearch.vue';
 import HelpNavButton from '@/components/navigation/HelpNavButton.vue';
-import { useAuthStore, useBrowseStore, useStateStore } from '@/stores';
+import { useAuthStore, useBrowseStore, useStateStore, useThemeStore } from '@/stores';
 import { useRoute, RouterLink } from 'vue-router';
 import { usePlatformData } from '@/composables/platformData';
 import NavigationMenu from '@/components/navigation/NavigationMenu.vue';
@@ -16,7 +16,6 @@ import TranslationDisplay from '@/components/generic/TranslationDisplay.vue';
 import logo from '@/assets/logo.png';
 import logoDarkmode from '@/assets/logo-darkmode.png';
 import { HamburgerMenuIcon } from '@/icons';
-import { useThemeStore } from '@/stores/theme';
 import { STATIC_PATH } from '@/common';
 
 const { pfData, systemHome } = usePlatformData();

Tekst-Web/src/components/navigation/QuickSearch.vue

@@ -8,34 +8,31 @@ import GenericModal from '@/components/generic/GenericModal.vue';
 import { SearchIcon } from '@/icons';
 import NInputOsk from '@/components/NInputOsk.vue';
 import { useRouter } from 'vue-router';
-import { Base64 } from 'js-base64';
-import { useStateStore } from '@/stores';
-import type { SearchRequestBody } from '@/api';
 import GeneralSearchSettingsForm from '@/forms/search/GeneralSearchSettingsForm.vue';
 import QuickSearchSettingsForm from '@/forms/search/QuickSearchSettingsForm.vue';
+import { useSearchStore } from '@/stores';
 
-const showModal = ref(false);
-const searchInput = ref<string>('');
+const search = useSearchStore();
 const router = useRouter();
-const state = useStateStore();
 
+const showModal = ref(false);
+const searchInput = ref<string>('');
 const inputRef = ref<InputInst>();
 const settingsExpanded = ref<string[]>([]);
 
 function handleSearch(e: UIEvent) {
   e.preventDefault();
   e.stopPropagation();
   showModal.value = false;
-  const reqBody: SearchRequestBody = {
-    type: 'quick',
-    q: searchInput.value,
-    gen: state.searchSettingsGeneral,
-    qck: state.searchSettingsQuick,
-  };
   router.push({
     name: 'searchResults',
-    params: {
-      req: Base64.encode(JSON.stringify(reqBody), true),
+    query: {
+      q: search.encodeQueryParam({
+        type: 'quick',
+        q: searchInput.value,
+        gen: search.settingsGeneral,
+        qck: search.settingsQuick,
+      }),
     },
   });
 }

Tekst-Web/src/components/navigation/TextSelectOption.vue

@@ -4,8 +4,8 @@ import { NIcon } from 'naive-ui';
 import TranslationDisplay from '@/components/generic/TranslationDisplay.vue';
 
 import { DisabledVisibleIcon } from '@/icons';
-import { useThemeStore } from '@/stores/theme';
 import { computed } from 'vue';
+import { useThemeStore } from '@/stores';
 
 const props = defineProps<{
   text: TextRead;

Tekst-Web/src/components/navigation/ThemeModeSwitcher.vue

@@ -2,9 +2,9 @@
 import { NButton, NIcon } from 'naive-ui';
 import { computed } from 'vue';
 import { $t } from '@/i18n';
-import { useThemeStore } from '@/stores/theme';
 
 import { LightModeIcon, DarkModeIcon } from '@/icons';
+import { useThemeStore } from '@/stores';
 
 const theme = useThemeStore();
 

Tekst-Web/src/components/navigation/UserActionsButton.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import { ref, computed, h } from 'vue';
-import { useAuthStore, useStateStore } from '@/stores';
+import { useAuthStore, useStateStore, useThemeStore } from '@/stores';
 import { type RouteLocationRaw, RouterLink } from 'vue-router';
 import { NButton, NIcon, NDropdown } from 'naive-ui';
 import { $t } from '@/i18n';
-import { useThemeStore } from '@/stores/theme';
 import { LogInIcon, LogOutIcon, UserIcon, AdminIcon, ResourceIcon } from '@/icons';
 import { renderIcon } from '@/utils';
 

Tekst-Web/src/forms/search/GeneralSearchSettingsForm.vue

@@ -1,17 +1,17 @@
 <script setup lang="ts">
 import LabelledSwitch from '@/components/LabelledSwitch.vue';
-import { useStateStore } from '@/stores';
+import { useSearchStore } from '@/stores';
 import { NForm, NFormItem } from 'naive-ui';
 
-const state = useStateStore();
+const search = useSearchStore();
 </script>
 
 <template>
-  <n-form :model="state.searchSettingsGeneral">
+  <n-form :model="search.settingsGeneral">
     <!-- STRICT SEARCH MODE -->
     <n-form-item path="strict" :show-label="false" :show-feedback="false">
       <labelled-switch
-        v-model:value="state.searchSettingsGeneral.strict"
+        v-model:value="search.settingsGeneral.strict"
         :label="$t('search.settings.general.strict')"
       />
     </n-form-item>

Tekst-Web/src/forms/search/QuickSearchSettingsForm.vue

@@ -1,23 +1,23 @@
 <script setup lang="ts">
 import LabelledSwitch from '@/components/LabelledSwitch.vue';
 import { usePlatformData } from '@/composables/platformData';
-import { useStateStore } from '@/stores';
+import { useSearchStore } from '@/stores';
 import { NForm, NFormItem, NSelect } from 'naive-ui';
 import { computed } from 'vue';
 
-const state = useStateStore();
+const search = useSearchStore();
 const { pfData } = usePlatformData();
 const textOptions = computed(() =>
   pfData.value?.texts.map((t) => ({ label: t.title, value: t.id }))
 );
 </script>
 
 <template>
-  <n-form :model="state.searchSettingsQuick">
+  <n-form :model="search.settingsQuick">
     <!-- TEXTS -->
     <n-form-item path="defaultOperator" :label="$t('search.settings.quick.texts')">
       <n-select
-        v-model:value="state.searchSettingsQuick.texts"
+        v-model:value="search.settingsQuick.texts"
         :options="textOptions"
         :placeholder="$t('search.settings.quick.textsPlaceholder')"
         clearable
@@ -28,7 +28,7 @@ const textOptions = computed(() =>
     <!-- DEFAULT OPERATOR -->
     <n-form-item path="texts" :show-label="false" :show-feedback="false">
       <labelled-switch
-        v-model:value="state.searchSettingsQuick.op"
+        v-model:value="search.settingsQuick.op"
         checked-value="AND"
         unchecked-value="OR"
         :label="$t('search.settings.quick.defaultOperator')"

Tekst-Web/src/router.ts

@@ -73,7 +73,7 @@ const router = createRouter({
       },
     },
     {
-      path: '/search/:req',
+      path: '/search',
       name: 'searchResults',
       component: SearchResultsView,
     },

Tekst-Web/src/stores/index.ts

@@ -2,3 +2,5 @@ export * from './auth';
 export * from './state';
 export * from './browse';
 export * from './resources';
+export * from './search';
+export * from './theme';

Tekst-Web/src/stores/search.ts

@@ -0,0 +1,62 @@
+import type {
+  AdvancedSearchSettings,
+  GeneralSearchSettings,
+  QuickSearchSettings,
+  SearchRequestBody,
+} from '@/api';
+import { useMessages } from '@/composables/messages';
+import { $t } from '@/i18n';
+import { Base64 } from 'js-base64';
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+export const useSearchStore = defineStore('search', () => {
+  const router = useRouter();
+  const { message } = useMessages();
+
+  const lastReq = ref<SearchRequestBody>();
+
+  const settingsGeneral = ref<GeneralSearchSettings>({
+    strict: false,
+  });
+  const settingsQuick = ref<QuickSearchSettings>({
+    op: 'OR',
+  });
+  const settingsAdvanced = ref<AdvancedSearchSettings>({});
+
+  function encodeQueryParam(requestBody?: SearchRequestBody): string | undefined {
+    if (!requestBody) return undefined;
+    try {
+      return Base64.encode(JSON.stringify(requestBody), true);
+    } catch {
+      message.error($t('errors.unexpected'));
+      return undefined;
+    }
+  }
+
+  function decodeQueryParam(): SearchRequestBody | undefined {
+    const queryParam = router.currentRoute.value.query.q?.toString();
+    try {
+      const decoded: SearchRequestBody = queryParam
+        ? JSON.parse(Base64.decode(queryParam))
+        : undefined;
+      if (!decoded || !['quick', 'advanced'].includes(decoded.type)) {
+        throw new Error();
+      }
+      return decoded;
+    } catch {
+      message.error($t('search.results.msgInvalidRequest'));
+      return undefined;
+    }
+  }
+
+  return {
+    settingsGeneral,
+    settingsQuick,
+    settingsAdvanced,
+    encodeQueryParam,
+    decodeQueryParam,
+    lastReq,
+  };
+});

Tekst-Web/src/stores/state.ts

@@ -5,12 +5,12 @@ import type { RouteLocationNormalized } from 'vue-router';
 import { i18n, setI18nLocale, getAvaliableBrowserLocaleKey, localeProfiles } from '@/i18n';
 import type { LocaleProfile } from '@/i18n';
 import { useRoute } from 'vue-router';
-import type { GeneralSearchSettings, TextRead, TranslationLocaleKey } from '@/api';
+import type { TextRead, TranslationLocaleKey } from '@/api';
 import { $t, $te } from '@/i18n';
 import { usePlatformData } from '@/composables/platformData';
 import { useAuthStore } from './auth';
 import { useMessages } from '@/composables/messages';
-import type { QuickSearchSettings, AdvancedSearchSettings, LocaleKey } from '@/api';
+import type { LocaleKey } from '@/api';
 import { pickTranslation } from '@/utils';
 
 export const useStateStore = defineStore('state', () => {
@@ -123,16 +123,6 @@ export const useStateStore = defineStore('state', () => {
     () => text.value?.levels.map((l) => pickTranslation(l, locale.value)) || []
   );
 
-  // search settings
-
-  const searchSettingsGeneral = ref<GeneralSearchSettings>({
-    strict: false,
-  });
-  const searchSettingsQuick = ref<QuickSearchSettings>({
-    op: 'OR',
-  });
-  const searchSettingsAdvanced = ref<AdvancedSearchSettings>({});
-
   // init loading state
 
   const initLoading = ref(false);
@@ -195,8 +185,5 @@ export const useStateStore = defineStore('state', () => {
     fallbackText,
     textLevelLabels,
     getTextLevelLabel,
-    searchSettingsGeneral,
-    searchSettingsQuick,
-    searchSettingsAdvanced,
   };
 });

Tekst-Web/src/views/ResourceSettingsView.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { type AnyResourceUpdate, PATCH, type AnyResourceRead } from '@/api';
 import { $t } from '@/i18n';
-import { useAuthStore, useStateStore } from '@/stores';
+import { useAuthStore, useResourcesStore, useStateStore } from '@/stores';
 import HelpButtonWidget from '@/components/HelpButtonWidget.vue';
 import IconHeading from '@/components/generic/IconHeading.vue';
 import { useMessages } from '@/composables/messages';
@@ -15,7 +15,6 @@ import { useRoute } from 'vue-router';
 import { useRouter } from 'vue-router';
 import ResourceInfoWidget from '@/components/resource/ResourceInfoWidget.vue';
 import ButtonShelf from '@/components/generic/ButtonShelf.vue';
-import { useResourcesStore } from '@/stores/resources';
 import ResourceSettingsFormItems from '@/forms/resources/config/ResourceSettingsFormItems.vue';
 
 import { SettingsIcon, ArrowBackIcon, ResourceIcon } from '@/icons';
@@ -25,8 +24,8 @@ const route = useRoute();
 const router = useRouter();
 const state = useStateStore();
 const auth = useAuthStore();
-
 const resources = useResourcesStore();
+
 const resource = ref<AnyResourceRead>();
 const getInitialModel = () => _cloneDeep(resource.value);