refactor(filters): add information about selected filters in filters sidebar

packages/theme/composables/types.ts

@@ -236,11 +236,11 @@ export interface AgnosticSort {
 }
 
 export interface AgnosticPagination {
-  currentPage: number;
-  totalPages: number;
-  totalItems: number;
-  itemsPerPage: number;
-  pageOptions: number[];
+  currentPage?: number;
+  totalPages?: number;
+  totalItems?: number;
+  itemsPerPage?: number;
+  pageOptions?: number[];
 }
 
 export interface AgnosticAddress {

packages/theme/composables/useFacet/index.ts

@@ -73,7 +73,8 @@ export const useFacet = (): UseFacet => {
 
       const itemsPerPage = (params.itemsPerPage) ? params.itemsPerPage : 20;
       const inputFilters = (params.filters) ? params.filters : {};
-      const categoryId = (params.categoryId) ? {
+
+      const categoryId = (params.categoryId && !inputFilters.category_id) ? {
         category_uid: {
           ...(Array.isArray(params.categoryId)
             ? { in: params.categoryId }

packages/theme/composables/useUiHelpers/index.ts

@@ -16,55 +16,151 @@ const reduceFilters = (query) => (prev, curr: string) => {
 const useUiHelpers = () => {
   const route = useRoute();
   const router = useRouter();
-  const { query } = route.value;
+  let { query } = route.value;
 
-  const getFiltersDataFromUrl = (onlyFilters) => Object.keys(query)
-    .filter((f) => (onlyFilters ? !nonFilters.has(f) : nonFilters.has(f)))
-  // eslint-disable-next-line unicorn/prefer-object-from-entries
-    .reduce(reduceFilters(query), {});
+  const resolveQuery = () => {
+    if (typeof window !== 'undefined') {
+      query = router.resolve((window.location.pathname + window.location.search).slice(1)).route.query;
+    }
 
-  const getFacetsFromURL = () => ({
-    filters: getFiltersDataFromUrl(true),
-    itemsPerPage: Number.parseInt(query.itemsPerPage as string, 10) || 10,
-    page: Number.parseInt(query.page as string, 10) || 1,
-    sort: query.sort as string || '',
-    term: query.term as string,
-  });
+    return query;
+  };
+
+  const getFiltersDataFromUrl = (onlyFilters = false) => {
+    const currentQuery = resolveQuery();
+    return Object.keys(currentQuery)
+      .filter((f) => (onlyFilters ? !nonFilters.has(f) : f))
+      // eslint-disable-next-line unicorn/prefer-object-from-entries
+      .reduce(reduceFilters(currentQuery), {});
+  };
+
+  const getFacetsFromURL = () => {
+    const currentQuery = resolveQuery();
+
+    return {
+      filters: getFiltersDataFromUrl(true),
+      itemsPerPage: Number.parseInt(currentQuery.itemsPerPage as string, 10) || 10,
+      page: Number.parseInt(currentQuery.page as string, 10) || 1,
+      sort: currentQuery.sort as string || '',
+      term: currentQuery.term as string,
+    };
+  };
 
   const changeSearchTerm = (term: string) => term;
 
-  const getSearchTermFromUrl = () => ({
-    page: Number.parseInt(query.page as string, 10) || 1,
-    sort: query.sort || '',
-    filters: getFiltersDataFromUrl(true),
-    itemsPerPage: Number.parseInt(query.itemsPerPage as string, 10) || 10,
-    term: query.term,
-  });
+  const getSearchTermFromUrl = () => {
+    const currentQuery = resolveQuery();
+
+    return {
+      page: Number.parseInt(currentQuery.page as string, 10) || 1,
+      sort: currentQuery.sort || '',
+      filters: getFiltersDataFromUrl(true),
+      itemsPerPage: Number.parseInt(currentQuery.itemsPerPage as string, 10) || 10,
+      term: currentQuery.term,
+    };
+  };
 
   const getCatLink = (category: Category): string => `/c/${category.url_path}${category.url_suffix || ''}`;
 
   const getAgnosticCatLink = (category: CategoryTreeInterface): string => `/c${category.slug}`;
 
-  const changeSorting = async (sort: string) => {
-    await router.push({ query: { ...query, sort } });
+  /**
+   * Force push for a backward compatibility in other places, should be removed
+   *
+   * @param sort
+   * @param forcePush
+   */
+  const changeSorting = async (sort: string, forcePush = true) => {
+    if (forcePush) {
+      await router.push({ query: { ...query, sort } });
+    } else {
+      const routeData = router.resolve({
+        query: {
+          ...getFiltersDataFromUrl(),
+          sort,
+        },
+      });
+      window.history.pushState(
+        {},
+        null,
+        routeData.href,
+      );
+    }
   };
 
-  const changeFilters = async (filters: any) => {
-    await router.push({
-      query: {
-        ...getFiltersDataFromUrl(false),
-        ...filters,
-      },
-    });
+  /**
+   * Force push for a backward compatibility in other places, should be removed
+   *
+   * @param filters
+   * @param forcePush
+   */
+  const changeFilters = async (filters: any, forcePush = true) => {
+    if (forcePush) {
+      await router.push({
+        query: {
+          ...getFiltersDataFromUrl(false),
+          ...filters,
+        },
+      });
+    } else {
+      const routeData = router.resolve({
+        query: {
+          ...getFiltersDataFromUrl(),
+          ...filters,
+        },
+      });
+      window.history.pushState(
+        {},
+        null,
+        routeData.href,
+      );
+    }
   };
 
-  const changeItemsPerPage = async (itemsPerPage: number) => {
-    await router.push({
-      query: {
-        ...getFiltersDataFromUrl(false),
-        itemsPerPage,
-      },
-    });
+  const clearFilters = async (forcePush = true) => {
+    if (forcePush) {
+      await router.push({
+        query: {},
+      });
+    } else {
+      const routeData = router.resolve({
+        query: {},
+      });
+      window.history.pushState(
+        {},
+        null,
+        routeData.href,
+      );
+    }
+  };
+
+  /**
+   * Force push for a backward compatibility in other places, should be removed
+   *
+   * @param itemsPerPage
+   * @param forcePush
+   */
+  const changeItemsPerPage = async (itemsPerPage: number, forcePush = true) => {
+    if (forcePush) {
+      await router.push({
+        query: {
+          ...getFiltersDataFromUrl(false),
+          itemsPerPage,
+        },
+      });
+    } else {
+      const routeData = router.resolve({
+        query: {
+          ...getFiltersDataFromUrl(),
+          itemsPerPage,
+        },
+      });
+      window.history.pushState(
+        {},
+        null,
+        routeData.href,
+      );
+    }
   };
 
   const setTermForUrl = async (term: string) => {
@@ -87,6 +183,7 @@ const useUiHelpers = () => {
     changeSorting,
     changeFilters,
     changeItemsPerPage,
+    clearFilters,
     setTermForUrl,
     isFacetColor,
     isFacetCheckbox,

packages/theme/composables/useUrlResolver.ts

@@ -1,6 +1,6 @@
 import { useRoute, useContext, ref } from '@nuxtjs/composition-api';
 import { Logger } from '~/helpers/logger';
-import { Maybe, UrlResolverQuery } from '~/modules/GraphQL/types';
+import { EntityUrl, Maybe } from '~/modules/GraphQL/types';
 
 export const useUrlResolver = () => {
   const route = useRoute();
@@ -12,9 +12,9 @@ export const useUrlResolver = () => {
     search: null,
   });
 
-  const search = async (): Promise<Maybe<UrlResolverQuery>> => {
+  const search = async (): Promise<Maybe<EntityUrl>> => {
     loading.value = true;
-    let results = null;
+    let results: EntityUrl = {};
 
     try {
       const clearUrl = path.replace(/[a-z]+\/[cp|]\//gi, '');

packages/theme/composables/useWishlist/useWishlist.ts

@@ -1,7 +1,7 @@
 import { Ref } from '@nuxtjs/composition-api';
 import { ComposableFunctionArgs } from '~/composables/types';
 import {
-  Maybe, Scalars, WishlistItem, WishlistItems,
+  Maybe, ProductInterface, Scalars, WishlistItem, WishlistItems,
 } from '~/modules/GraphQL/types';
 
 export interface Wishlist {
@@ -32,7 +32,7 @@ export interface UseWishlistErrors {
 export type UseWishlist = {
   wishlist: Ref<Wishlist>,
   loadItemsCount(params: ComposableFunctionArgs<{}>): Promise<number | null>;
-  isInWishlist: (params: { currentWishlist: any; product: any }) => boolean;
+  isInWishlist: (params: { product: ProductInterface }) => boolean;
   addItem: (
     params: ComposableFunctionArgs<{
       product: any; // TODO: add product intrface

packages/theme/getters/facetGetters.ts

@@ -15,6 +15,7 @@ import {
   reduceForGroupedFacets,
   reduceForFacets,
 } from '~/composables/useFacet/_utils';
+import { ProductInterface } from '~/modules/GraphQL/types';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const getAll = (searchData: SearchData, criteria?: string[]): FacetInterface[] => buildFacets(searchData, reduceForFacets, criteria);
@@ -54,7 +55,7 @@ const getCategoryTree = (searchData): AgnosticCategoryTree => {
 };
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-const getProducts = (searchData): any => {
+const getProducts = (searchData): ProductInterface[] => {
   if (!searchData || !searchData.data || !searchData.data.items) {
     return [];
   }

packages/theme/getters/types.d.ts

@@ -2,7 +2,7 @@ import { Country } from '~/modules/GraphQL/types';
 import {
   AgnosticAttribute, Countries, AgnosticPrice, AgnosticTotals,
   AgnosticCoupon, AgnosticDiscount, AgnosticCategoryTree, AgnosticBreadcrumb,
-  GroupedFacetInterface, AgnosticSort, AgnosticMediaGalleryItem,
+  GroupedFacetInterface, AgnosticSort, AgnosticMediaGalleryItem, AgnosticPagination, AgnosticFacetSearchParams, FacetInterface,
 } from '~/composables/types';
 
 export interface AddressGetter {
@@ -64,7 +64,7 @@ export interface ForgotPasswordGetters<FORGOT_PASSWORD_RESULT> {
 }
 
 export interface FacetsGetters<SEARCH_DATA, RESULTS, CRITERIA = any> {
-  getAll: (searchData: FacetSearchResult<SEARCH_DATA>, criteria?: CRITERIA) => AgnosticFacet[];
+  getAll: (searchData: FacetSearchResult<SEARCH_DATA>, criteria?: CRITERIA) => FacetInterface[];
   getGrouped: (searchData: FacetSearchResult<SEARCH_DATA>, criteria?: CRITERIA) => GroupedFacetInterface[];
   getCategoryTree: (searchData: FacetSearchResult<SEARCH_DATA>) => AgnosticCategoryTree;
   getSortOptions: (searchData: FacetSearchResult<SEARCH_DATA>) => AgnosticSort;

packages/theme/lang/de.js

@@ -256,5 +256,9 @@ export default {
   'Page not found': 'Seite nicht gefunden',
   'Back to Home page': 'Zurück zur Startseite',
   'An error occurred': 'Ein Fehler ist aufgetreten',
-  "AllProductsFromCategory": "Alle {categoryName}"
+  "AllProductsFromCategory": "Alle {categoryName}",
+  "Show more": "Zeig mehr",
+  "Show less": "Zeige weniger",
+  "Yes": "Ja",
+  "No": "Nein",
 };

packages/theme/lang/en.js

@@ -50,7 +50,7 @@ export default {
   "Enter promo code": "Enter promo code",
   "Feedback": "Your feedback is important to us. Let us know what we could improve.",
   "Feel free to edit": "Feel free to edit any of your details below so your account is always up to date",
-  "Filters": "Filter",
+  "Filters": "Filters",
   "Find out more": "Find out more",
   "First Name": "First Name",
   "Forgot Password": "If you can’t remember your password, you can reset it.",
@@ -254,5 +254,9 @@ export default {
   'Page not found': 'Page not found',
   'Back to Home page': 'Back to Home page',
   'An error occurred': 'An error occurred',
-  "AllProductsFromCategory": "All {categoryName}"
+  "AllProductsFromCategory": "All {categoryName}",
+  "Show more": "Show more",
+  "Show less": "Show less",
+  "Yes": "Yes",
+  "No": "No",
 };