[WIP] Refactor catalog module

config/default.json

@@ -276,6 +276,7 @@
       "setupVariantByAttributeCode": true,
       "endpoint": "/api/product",
       "defaultFilters": ["color", "size", "price", "erin_recommends"],
+      "routerFiltersSource": "query",
       "filterFieldMapping": {
         "category.name": "category.name.keyword"
       },

core/build/webpack.prod.sw.config.ts

@@ -60,10 +60,12 @@ module.exports = merge(base, {
         {
           urlPattern: '/img/(.*)',
           handler: 'fastest'
-        }, {
-          urlPattern: '/api/catalog/*',
+        },
+        {
+          urlPattern: /(http[s]?:\/\/)?(\/)?([^\/\s]+\/)?(api\/catalog\/)(.*)/g, // eslint-disable-line no-useless-escape
           handler: 'networkFirst'
-        }, {
+        },
+        {
           urlPattern: '/api/*',
           handler: 'networkFirst'
         }, {

core/compatibility/components/blocks/Category/Sidebar.js

@@ -19,7 +19,7 @@ export default {
       return this.getActiveCategoryFilters
     },
     availableFilters () {
-      return pickBy(this.filters, (filter) => { return (filter.length) })
+      return pickBy(this.filters, (filter, filterType) => { return (filter.length && !this.$store.getters['category-next/getSystemFilterNames'].includes(filterType)) })
     },
     hasActiveFilters () {
       return Object.keys(this.activeFilters).length !== 0

core/data-resolver/index.ts

@@ -0,0 +1,74 @@
+import { SearchRequest } from '@vue-storefront/core/types/search/SearchRequest';
+import { quickSearchByQuery } from '@vue-storefront/core/lib/search';
+import SearchQuery from '@vue-storefront/core/lib/search/searchQuery';
+import config from 'config';
+
+export interface Product {
+  id: number,
+  name: any
+}
+
+const getProduct = async (): Promise<Product> => {
+  const product: Product = {
+    id: 1,
+    name: 'sample'
+  }
+  return product
+}
+
+function getProducts (): Product[] {
+  return [{
+    id: 1,
+    name: 'sample1'
+  }, {
+    id: 2,
+    name: 'sample2'
+  }
+  ]
+}
+
+const getCategories = async ({parent = null, key = null, value = null, level = null, onlyActive = true, onlyNotEmpty = false, size = 4000, start = 0, sort = 'position:asc', includeFields = config.entities.optimize ? config.entities.category.includeFields : null, excludeFields = config.entities.optimize ? config.entities.category.excludeFields : null} = {}) => {
+  let searchQuery = new SearchQuery()
+  if (parent) {
+    searchQuery = searchQuery.applyFilter({key: 'parent_id', value: {'eq': parent.id ? parent.id : parent}})
+  }
+  if (level) {
+    searchQuery = searchQuery.applyFilter({key: 'level', value: {'eq': level}})
+  }
+
+  if (key) {
+    if (Array.isArray(value)) {
+      searchQuery = searchQuery.applyFilter({key: key, value: {'in': value}})
+    } else {
+      searchQuery = searchQuery.applyFilter({key: key, value: {'eq': value}})
+    }
+  }
+
+  if (onlyActive === true) {
+    searchQuery = searchQuery.applyFilter({key: 'is_active', value: {'eq': true}})
+  }
+
+  if (onlyNotEmpty === true) {
+    searchQuery = searchQuery.applyFilter({key: 'product_count', value: {'gt': 0}})
+  }
+  const response = await quickSearchByQuery({ entityType: 'category', query: searchQuery, sort: sort, size: size, start: start, includeFields: includeFields, excludeFields: excludeFields })
+  return response.items
+}
+
+interface ProductResolver {
+  getProduct: (searchRequest: SearchRequest) => Promise<Product>,
+  getProducts: () => Product[]
+}
+
+interface CategoryService {
+  getCategories: (searchRequest?: any) => Promise<any>
+}
+
+export const ProductResolver: ProductResolver = {
+  getProduct,
+  getProducts
+}
+
+export const CategoryService: CategoryService = {
+  getCategories
+}

core/helpers/index.ts

@@ -124,24 +124,27 @@ export function baseFilterProductsQuery (parentCategory, filters = []) { // TODO
   return searchProductQuery
 }
 
-export function buildFilterProductsQuery (currentCategory, chosenFilters, defaultFilters = null) {
+export function buildFilterProductsQuery (currentCategory, chosenFilters = {}, defaultFilters = null) {
   let filterQr = baseFilterProductsQuery(currentCategory, defaultFilters == null ? config.products.defaultFilters : defaultFilters)
 
   // add choosedn filters
   for (let code of Object.keys(chosenFilters)) {
     const filter = chosenFilters[code]
+    const attributeCode = Array.isArray(filter) ? filter[0].attribute_code : filter.attribute_code
 
-    if (filter.attribute_code !== 'price') {
-      filterQr = filterQr.applyFilter({key: filter.attribute_code, value: {'eq': filter.id}, scope: 'catalog'})
+    if (Array.isArray(filter) && attributeCode !== 'price') {
+      const values = filter.map(filter => filter.id)
+      filterQr = filterQr.applyFilter({key: attributeCode, value: {'in': values}, scope: 'catalog'})
+    } else if (attributeCode !== 'price') {
+      filterQr = filterQr.applyFilter({key: attributeCode, value: {'eq': filter.id}, scope: 'catalog'})
     } else { // multi should be possible filter here?
       const rangeqr = {}
-      if (filter.from) {
-        rangeqr['gte'] = filter.from
-      }
-      if (filter.to) {
-        rangeqr['lte'] = filter.to
-      }
-      filterQr = filterQr.applyFilter({key: filter.attribute_code, value: rangeqr, scope: 'catalog'})
+      const filterValues = Array.isArray(filter) ? filter : [filter]
+      filterValues.forEach(singleFilter => {
+        if (singleFilter.from) rangeqr['gte'] = singleFilter.from
+        if (singleFilter.to) rangeqr['lte'] = singleFilter.to
+      })
+      filterQr = filterQr.applyFilter({key: attributeCode, value: rangeqr, scope: 'catalog'})
     }
   }
 

core/lib/search.ts

@@ -27,7 +27,7 @@ export function isOnline (): boolean {
  * @param {Int} size page size
  * @return {Promise}
  */
-export const quickSearchByQuery = async ({ query, start = 0, size = 50, entityType = 'product', sort = '', storeCode = null, excludeFields = null, includeFields = null }): Promise<SearchResponse> => {
+export const quickSearchByQuery = async ({ query = {}, start = 0, size = 50, entityType = 'product', sort = '', storeCode = null, excludeFields = null, includeFields = null } = {}): Promise<SearchResponse> => {
   const searchAdapter = await getSearchAdapter()
   if (size <= 0) size = 50
   if (start < 0) start = 0

core/modules/catalog-next/helpers/categoryHelpers.ts

@@ -0,0 +1,22 @@
+import { parseCategoryPath } from '@vue-storefront/core/modules/breadcrumbs/helpers'
+
+export const compareByLabel = (a, b) => {
+  if (a.label < b.label) {
+    return -1
+  }
+  if (a.label > b.label) {
+    return 1
+  }
+  return 0
+}
+
+export const calculateBreadcrumbs = (categories, id, list = []) => {
+  const category = categories.find(category => category.id === id)
+  if (!category) return parseCategoryPath(list).reverse()
+  const result = [...list, category]
+
+  if (category.level > 1 && category.parent_id) {
+    return calculateBreadcrumbs(categories, category.parent_id, result)
+  }
+  return parseCategoryPath(result).reverse()
+}

core/modules/catalog-next/helpers/filterHelpers.ts

@@ -0,0 +1,54 @@
+import FilterVariant from 'core/modules/catalog-next/types/FilterVariant';
+
+export const getSystemFilterNames: string[] = ['sort']
+
+/**
+ * Creates new filtersQuery (based on currentQuery) by modifying specific filter variant.
+ */
+export const changeFilterQuery = ({currentQuery = {}, filterVariant}: {currentQuery?: any, filterVariant?: FilterVariant} = {}) => {
+  const newQuery = JSON.parse(JSON.stringify(currentQuery))
+  if (!filterVariant) return newQuery
+  if (getSystemFilterNames.includes(filterVariant.type)) {
+    if (newQuery[filterVariant.type] && newQuery[filterVariant.type] === filterVariant.id) {
+      delete newQuery[filterVariant.type]
+    } else {
+      newQuery[filterVariant.type] = filterVariant.id
+    }
+  } else {
+    let queryFilter = newQuery[filterVariant.type] || []
+    if (!Array.isArray(queryFilter)) queryFilter = [queryFilter]
+    if (queryFilter.includes(filterVariant.id)) {
+      queryFilter = queryFilter.filter(value => value !== filterVariant.id)
+    } else {
+      queryFilter.push(filterVariant.id)
+    }
+    newQuery[filterVariant.type] = queryFilter
+  }
+  return newQuery
+}
+
+export const getFiltersFromQuery = ({filtersQuery = {}, availableFilters = {}} = {}) => {
+  const searchQuery = {
+    filters: {}
+  }
+  Object.keys(filtersQuery).forEach(filterKey => {
+    const filter = availableFilters[filterKey]
+    const queryValue = filtersQuery[filterKey]
+    if (!filter) return
+    if (getSystemFilterNames.includes(filterKey)) {
+      searchQuery[filterKey] = queryValue
+    } else if (Array.isArray(queryValue)) {
+      queryValue.map(singleValue => {
+        const variant = filter.find(filterVariant => filterVariant.id === singleValue)
+        if (!variant) return
+        if (!searchQuery.filters[filterKey] || !Array.isArray(searchQuery.filters[filterKey])) searchQuery.filters[filterKey] = []
+        searchQuery.filters[filterKey].push({...variant, attribute_code: filterKey})
+      })
+    } else {
+      const variant = filter.find(filterVariant => filterVariant.id === queryValue)
+      if (!variant) return
+      searchQuery.filters[filterKey] = {...variant, attribute_code: filterKey}
+    }
+  })
+  return searchQuery
+}

core/modules/catalog-next/helpers/optionLabel.ts

@@ -0,0 +1,39 @@
+/**
+ * Helper method for getting attribute name - TODO: to be moved to external/shared helper
+ *
+ * @param {String} attributeCode
+ * @param {String} optionId - value to get label for
+ */
+import toString from 'lodash-es/toString'
+
+export function optionLabel (state, { attributeKey, searchBy = 'code', optionId }) {
+  let attrCache = state.labels[attributeKey]
+
+  if (attrCache) {
+    let label = attrCache[optionId]
+
+    if (label) {
+      return label
+    }
+  }
+  let attr = state['list_by_' + searchBy][attributeKey]
+  if (attr) {
+    let opt = attr.options.find((op) => { // TODO: cache it in memory
+      if (toString(op.value) === toString(optionId)) {
+        return op
+      }
+    }) // TODO: i18n support with  multi-website attribute names
+
+    if (opt) {
+      if (!state.labels[attributeKey]) {
+        state.labels[attributeKey] = {}
+      }
+      state.labels[attributeKey][optionId] = opt.label
+      return opt ? opt.label : optionId
+    } else {
+      return optionId
+    }
+  } else {
+    return optionId
+  }
+}

core/modules/catalog-next/index.ts

@@ -0,0 +1,15 @@
+// import { productModule } from './store/product'
+// import { attributeModule } from './store/attribute'
+// import { stockModule } from './store/stock'
+// import { taxModule } from './store/tax'
+import { categoryModule } from './store/category'
+import { createModule } from '@vue-storefront/core/lib/module'
+// import { beforeRegistration } from './hooks/beforeRegistration'
+
+export const KEY = 'catalog-next'
+export default createModule({
+  key: KEY,
+  store: { modules: [
+    { key: 'category-next', module: categoryModule }
+  ] }
+})

core/modules/catalog-next/store/category/CategoryState.ts

@@ -0,0 +1,5 @@
+export default interface CategoryState {
+  categories: any,
+  availableFilters: any,
+  products: any
+}

core/modules/catalog-next/store/category/actions.ts

@@ -0,0 +1,90 @@
+// import Vue from 'vue'
+import { ActionTree } from 'vuex'
+import * as types from './mutation-types'
+import RootState from '@vue-storefront/core/types/RootState'
+import CategoryState from './CategoryState'
+import { quickSearchByQuery } from '@vue-storefront/core/lib/search'
+import { buildFilterProductsQuery } from '@vue-storefront/core/helpers'
+import { router } from '@vue-storefront/core/app'
+import FilterVariant from '../../types/FilterVariant'
+import { CategoryService } from '@vue-storefront/core/data-resolver'
+import { changeFilterQuery } from '../../helpers/filterHelpers'
+import { products } from 'config'
+import { configureProductAsync } from '@vue-storefront/core/modules/catalog/helpers'
+
+const actions: ActionTree<CategoryState, RootState> = {
+  /**
+   * Initialise category module.
+   * - gets available categories
+   * - gets available filters for current category
+   */
+  async initCategoryModule ({ getters, dispatch }) {
+    if (!getters.getCategories.length) {
+      await dispatch('loadCategories')
+    }
+  },
+  async loadCategoryProducts ({ commit, getters, dispatch }, { route } = {}) {
+    await dispatch('initCategoryModule')
+    const searchCategory = getters.getCategoryFrom(route.path)
+    await dispatch('loadCategoryFilters', searchCategory)
+    const searchQuery = getters.getCurrentFiltersFrom(route[products.routerFiltersSource])
+    let filterQr = buildFilterProductsQuery(searchCategory, searchQuery.filters)
+    const searchResult = await quickSearchByQuery({ query: filterQr, sort: searchQuery.sort })
+    let configuredProducts = searchResult.items.map(product => {
+      const configuredProductVariant = configureProductAsync({}, {product, configuration: searchQuery.filters, selectDefaultVariant: false, fallbackToDefaultWhenNoAvailable: true, setProductErorrs: false})
+      return Object.assign(product, configuredProductVariant)
+    })
+    commit(types.CATEGORY_SET_PRODUCTS, configuredProducts)
+    // await dispatch('loadAvailableFiltersFrom', searchResult)
+
+    return searchResult.items
+  },
+  async cacheProducts ({ commit, getters, dispatch }, { route } = {}) {
+    const searchCategory = getters.getCategoryFrom(route.path)
+    const searchQuery = getters.getCurrentFiltersFrom(route[products.routerFiltersSource])
+    let filterQr = buildFilterProductsQuery(searchCategory, searchQuery.filters)
+
+    console.error('CACHE 2 step...')
+    const xx = await dispatch('product/list', {
+      query: filterQr,
+      sort: searchQuery.sort,
+      updateState: false // not update the product listing - this request is only for caching
+    }, { root: true })
+    console.error('RETURNED PRODUCTS', xx)
+
+    // return searchResult.items
+  },
+  async findCategories () {
+    return CategoryService.getCategories()
+  },
+  async loadCategories ({ commit }) {
+    const categories = await CategoryService.getCategories()
+    commit(types.CATEGORY_SET_CATEGORIES, categories)
+    return categories
+  },
+  /**
+   * Fetch and process filters from current category and sets them in available filters.
+   */
+  async loadCategoryFilters ({ dispatch, getters }, category) {
+    const searchCategory = category || getters.getCurrentCategory
+    let filterQr = buildFilterProductsQuery(searchCategory)
+    const searchResult = await quickSearchByQuery({ query: filterQr })
+    await dispatch('loadAvailableFiltersFrom', searchResult)
+  },
+  async loadAvailableFiltersFrom ({ commit, getters }, {aggregations}) {
+    const filters = getters.getAvailableFiltersFrom(aggregations)
+    commit(types.CATEGORY_SET_AVAILABLE_FILTERS, filters)
+  },
+  async switchSearchFilter ({ dispatch }, filterVariant: FilterVariant) {
+    const newQuery = changeFilterQuery({currentQuery: router.currentRoute[products.routerFiltersSource], filterVariant})
+    await dispatch('changeRouterFilterParameters', newQuery)
+  },
+  async resetFilters ({dispatch}) {
+    await dispatch('changeRouterFilterParameters', {})
+  },
+  async changeRouterFilterParameters (context, query) {
+    router.push({[products.routerFiltersSource]: query})
+  }
+}
+
+export default actions