Added Query Parameters

src/presentation/components/Scripts/Menu/Recommendation/TheRecommendationSelector.vue

@@ -86,7 +86,7 @@
 
 <script lang="ts">
 import {
- defineComponent, computed,
+ defineComponent, computed, onMounted, watch,
 } from 'vue';
 import { injectKey } from '@/presentation/injectionSymbols';
 import TooltipWrapper from '@/presentation/components/Shared/TooltipWrapper.vue';
@@ -132,8 +132,45 @@ export default defineComponent({
  collection: currentCollection.value,
  });
  });
+ updateQueryParam(type);
  }
 
+ function updateQueryParam(type: RecommendationStatusType) {
+ const url = new URL(window.location.href);
+ const presetValue = RecommendationStatusType[type].toLowerCase();
+ url.searchParams.set('preset', presetValue);
+ window.history.pushState({}, '', url);
+ }
+
+ function getRecommendationFromQueryParam(): RecommendationStatusType | undefined {
+ const url = new URL(window.location.href);
+ const preset = url.searchParams.get('preset');
+ if (preset) {
+ const typeKey = Object.keys(RecommendationStatusType)
+ .find((key) => key.toLowerCase() === preset.toLowerCase());
+ return typeKey ? RecommendationStatusType[typeKey as keyof typeof RecommendationStatusType] : undefined;
+ }
+ return undefined;
+ }
+
+ onMounted(() => {
+ const typeFromQuery = getRecommendationFromQueryParam();
+ if (typeFromQuery !== undefined && typeFromQuery !== currentRecommendationStatusType.value) {
+ selectRecommendationStatusType(typeFromQuery);
+ }
+ });
+
+ watch(currentRecommendationStatusType, (newType) => {
+ updateQueryParam(newType);
+ });
+
+ window.addEventListener('popstate', () => {
+ const typeFromQuery = getRecommendationFromQueryParam();
+ if (typeFromQuery !== undefined && typeFromQuery !== currentRecommendationStatusType.value) {
+ selectRecommendationStatusType(typeFromQuery);
+ }
+ });
+
  return {
  RecommendationStatusType,
  currentRecommendationStatusType,

src/presentation/components/Scripts/Menu/TheOsChanger.vue

@@ -11,7 +11,9 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed } from 'vue';
+import {
+ defineComponent, computed, onMounted, watch,
+} from 'vue';
 import { injectKey } from '@/presentation/injectionSymbols';
 import { OperatingSystem } from '@/domain/OperatingSystem';
 import { getOperatingSystemDisplayName } from '@/presentation/components/Shared/OperatingSystemNames';
@@ -49,8 +51,45 @@ export default defineComponent({
  modifyCurrentContext((context) => {
  context.changeContext(newOs);
  });
+ updateQueryParam(newOs);
  }
 
+ function updateQueryParam(os: OperatingSystem) {
+ const url = new URL(window.location.href);
+ url.searchParams.set('collection', OperatingSystem[os]);
+ window.history.pushState({}, '', url);
+ }
+
+ function getOsFromQueryParam(): OperatingSystem | undefined {
+ const url = new URL(window.location.href);
+ const collection = url.searchParams.get('collection');
+ if (collection) {
+ const osKey = Object.keys(OperatingSystem).find(
+ (key) => key.toLowerCase() === collection.toLowerCase(),
+ );
+ return osKey ? OperatingSystem[osKey as keyof typeof OperatingSystem] : undefined;
+ }
+ return undefined;
+ }
+
+ onMounted(() => {
+ const osFromQuery = getOsFromQueryParam();
+ if (osFromQuery !== undefined && osFromQuery !== currentOs.value) {
+ changeOs(osFromQuery);
+ }
+ });
+
+ watch(currentOs, (newOs) => {
+ updateQueryParam(newOs);
+ });
+
+ window.addEventListener('popstate', () => {
+ const osFromQuery = getOsFromQueryParam();
+ if (osFromQuery !== undefined && osFromQuery !== currentOs.value) {
+ changeOs(osFromQuery);
+ }
+ });
+
  return {
  allOses,
  currentOs,

src/presentation/components/TheSearchBar.vue

@@ -14,7 +14,7 @@
 
 <script lang="ts">
 import {
- defineComponent, ref, watch, computed,
+ defineComponent, ref, watch, computed, onMounted,
 } from 'vue';
 import { injectKey } from '@/presentation/injectionSymbols';
 import { NonCollapsing } from '@/presentation/components/Scripts/View/Cards/NonCollapsingDirective';
@@ -41,7 +41,10 @@ export default defineComponent({
 
  const searchQuery = ref<string | undefined>();
 
- watch(searchQuery, (newFilter) => updateFilter(newFilter));
+ watch(searchQuery, (newFilter) => {
+ updateFilter(newFilter);
+ updateQueryParam(newFilter);
+ });
 
  function updateFilter(newFilter: string | undefined) {
  modifyCurrentState((state) => {
@@ -53,7 +56,31 @@ export default defineComponent({
  }
  });
  }
-
+ function updateQueryParam(query: string | undefined) {
+ const url = new URL(window.location.href);
+ if (query) {
+ url.searchParams.set('q', query);
+ } else {
+ url.searchParams.delete('q');
+ }
+ window.history.pushState({}, '', url);
+ }
+ // Read the 'q' parameter from the URL when the component is mounted
+ onMounted(() => {
+ const url = new URL(window.location.href);
+ const queryParam = url.searchParams.get('q');
+ if (queryParam) {
+ searchQuery.value = queryParam;
+ updateFilter(queryParam);
+ }
+ });
+ // Handle browser back/forward navigation
+ window.addEventListener('popstate', () => {
+ const url = new URL(window.location.href);
+ const queryParam = url.searchParams.get('q');
+ searchQuery.value = queryParam || undefined;
+ updateFilter(searchQuery.value);
+ });
  onStateChange((newState) => {
  updateFromInitialFilter(newState.filter.currentFilter);
  events.unsubscribeAllAndRegister([