Merge pull request #198 from os2ulf/feature/OS2UOL-1001

OS2UOL-1001: Refactored search components, in order to hold previous …
os2ulf · Nov 27, 2024 · 6c74826 · 6c74826
2 parents 3849882 + 34fe567
commit 6c74826
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 24 deletions.
diff --git a/components/blocks/ContentSearchBlock.vue b/components/blocks/ContentSearchBlock.vue
@@ -216,11 +216,37 @@ const updateURLParameters = () => {
   // Add selected page to URL parameters
   params.set('page', selectedPage.value.toString());
 
-  // Use history.pushState to update the URL without reloading the page
   const newURL = `${window.location.pathname}?${params.toString()}`;
-  history.pushState(null, '', newURL);
+
+  // Convert reactive objects to plain objects
+  const plainState = {
+    searchKeyword: searchKeyword.value,
+    sortingString: sortingString.value,
+    selectedFiltersData: JSON.parse(JSON.stringify(selectedFiltersData)), // Clone as plain object
+    selectedPage: selectedPage.value,
+  };
+
+  history.replaceState(plainState, '', newURL);
 };
 
+if (process.client) {
+  window.onpopstate = (event) => {
+    if (event.state) {
+      searchKeyword.value = event.state.searchKeyword || '';
+      sortingString.value = event.state.sortingString || '';
+      selectedPage.value = event.state.selectedPage || 0;
+
+      selectedFiltersData.splice(
+        0,
+        selectedFiltersData.length,
+        ...(event.state.selectedFiltersData || []),
+      );
+
+      updateURLParameters();
+    }
+  };
+}
+
 // Parse URL parameters
 const extractedFilters = reactive([]);
 const parseUrlParameters = () => {
@@ -271,26 +297,22 @@ const parseUrlParameters = () => {
   }
 };
 
-// populates selectedFiltersData with extracted filters - CHIPS
+// populates selectedFiltersData with extracted filters
 const setSelectedFiltersDataWithExtractedFilters = () => {
+  // Clear previous selections
   selectedFiltersData.splice(0, selectedFiltersData.length);
 
+  // Iterate through extractedFilters
   extractedFilters.value.forEach((filter) => {
-    if (filter.searchQueryUrlAlias === 'period') {
-      selectedFiltersData.push({
-        searchQueryUrlAlias: filter.searchQueryUrlAlias,
-        value: filter.value,
-        label: `Fra ${datePickerStartDate.value} til ${datePickerEndDate.value}`,
-      });
-    }
-
     // Find the matching facet in allSortingOptions
     const matchingFacet = Object.values(allSortingOptions.value).find(
-      (facet) => facet.url_alias === filter.searchQueryUrlAlias,
+      (facet) => {
+        return facet.url_alias === filter.searchQueryUrlAlias;
+      },
     );
 
     if (matchingFacet) {
-      // Find the specific item in the matching facet's items array by value
+      // Find the specific item in the matching facet's items array
       const selectedItem = matchingFacet.items.find(
         (item) => item.value === filter.value,
       );

diff --git a/components/blocks/CourseProvidersBlock.vue b/components/blocks/CourseProvidersBlock.vue
@@ -145,11 +145,38 @@ const updateURLParameters = () => {
   // Add selected page to URL parameters
   params.set('page', selectedPage.value.toString());
 
-  // Use history.pushState to update the URL without reloading the page
+  // update state
   const newURL = `${window.location.pathname}?${params.toString()}`;
-  history.pushState(null, '', newURL);
+
+  // Convert reactive objects to plain objects
+  const plainState = {
+    searchKeyword: searchKeyword.value,
+    sortingString: sortingString.value,
+    selectedFiltersData: JSON.parse(JSON.stringify(selectedFiltersData)), // Clone as plain object
+    selectedPage: selectedPage.value,
+  };
+
+  history.replaceState(plainState, '', newURL);
 };
 
+if (process.client) {
+  window.onpopstate = (event) => {
+    if (event.state) {
+      searchKeyword.value = event.state.searchKeyword || '';
+      sortingString.value = event.state.sortingString || '';
+      selectedPage.value = event.state.selectedPage || 0;
+
+      selectedFiltersData.splice(
+        0,
+        selectedFiltersData.length,
+        ...(event.state.selectedFiltersData || []),
+      );
+
+      updateURLParameters();
+    }
+  };
+}
+
 // Parse URL parameters
 const extractedFilters = reactive([]);
 const parseUrlParameters = () => {
@@ -200,12 +227,16 @@ const setSelectedFiltersDataWithExtractedFilters = () => {
   extractedFilters.value.forEach((filter) => {
     // Find the matching facet in allSortingOptions
     const matchingFacet = Object.values(allSortingOptions.value).find(
-      (facet) => facet.url_alias === filter.searchQueryUrlAlias,
+      (facet) => {
+        return facet.url_alias === filter.searchQueryUrlAlias;
+      },
     );
 
     if (matchingFacet) {
-      // Find the specific item in the matching facet's items
-      const selectedItem = matchingFacet.items[filter.value];
+      // Find the specific item in the matching facet's items array
+      const selectedItem = matchingFacet.items.find(
+        (item) => item.value === filter.value,
+      );
 
       if (selectedItem) {
         // Push the filter object with necessary properties

diff --git a/pages/Search.vue b/pages/Search.vue
@@ -2,6 +2,7 @@
 import { useApiRouteStore } from '~/stores/apiRouteEndpoint';
 
 const apiRouteStore = useApiRouteStore();
+const router = useRouter();
 
 useHead({
   title: 'Søg',
@@ -179,9 +180,9 @@ const updateURLParameters = () => {
   // Add selected page to URL parameters
   params.set('page', selectedPage.value.toString());
 
-  // Use history.pushState to update the URL without reloading the page
-  const newURL = `${window.location.pathname}?${params.toString()}`;
-  history.pushState(null, '', newURL);
+  // Update the URL using Vue Router's replace method
+  const newQuery = Object.fromEntries(params.entries());
+  router.replace({ query: newQuery });
 };
 
 // Parse URL parameters
@@ -228,12 +229,16 @@ const setSelectedFiltersDataWithExtractedFilters = () => {
   extractedFilters.value.forEach((filter) => {
     // Find the matching facet in allSortingOptions
     const matchingFacet = Object.values(allSortingOptions.value).find(
-      (facet) => facet.facet_id === filter.searchQueryUrlAlias,
+      (facet) => {
+        return facet.url_alias === filter.searchQueryUrlAlias;
+      },
     );
 
     if (matchingFacet) {
-      // Find the specific item in the matching facet's items
-      const selectedItem = matchingFacet.items[filter.value];
+      // Find the specific item in the matching facet's items array
+      const selectedItem = matchingFacet.items.find(
+        (item) => item.value === filter.value,
+      );
 
       if (selectedItem) {
         // Push the filter object with necessary properties